ordering-ui-react-native 0.15.86-release → 0.15.87-release

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "ordering-ui-react-native",
-  "version": "0.15.86-release",
+  "version": "0.15.87-release",
   "description": "Reusable components made in react native",
   "main": "src/index.tsx",
   "author": "ordering.inc",

package/themes/original/src/components/AddressForm/index.tsx

@@ -5,7 +5,6 @@ import {
 	TouchableOpacity,
 	Keyboard,
 	TouchableWithoutFeedback,
-	KeyboardAvoidingView,
 	Platform,
 } from 'react-native';
 import {
@@ -22,7 +21,7 @@ import Spinner from 'react-native-loading-spinner-overlay';
 import { useForm, Controller } from 'react-hook-form';
 import Geocoder from 'react-native-geocoding';
 
-import { OInput, OButton, OText, OModal, OIcon } from '../shared';
+import { OInput, OButton, OModal, OIcon } from '../shared';
 import { AddressFormParams } from '../../types';
 import { getTraduction } from '../../utils';
 import { useTheme } from 'styled-components/native';
@@ -57,7 +56,6 @@ const AddressFormUI = (props: AddressFormParams) => {
 		addressState,
 		addressesList,
 		saveAddress,
-		userCustomerSetup,
 		isGuestUser,
 		isRequiredField,
 		isFromProductsList,
@@ -599,33 +597,27 @@ const AddressFormUI = (props: AddressFormParams) => {
 										/>
 									)}
 								/>
-								{hasEditing ? (
-									<View style={styles.pinIcon}>
-										<GPSButton
-											apiKey={googleMapsApiKey}
-											handleGPS={(data: any, detail: any) => {
-												handleChangeAddress(data, detail);
-												setValue(data.address);
-												if (googleInput?.current) {
-													googleInput?.current?.setAddressText(data.address);
-												}
-											}}
-											IconButton={<OIcon src={theme.images.general.pin} width={16} />}
-										/>
-									</View>
-								) : null}
-							</AutocompleteInput>
 
-							{/* {!isKeyboardShow && (addressState?.address?.location || formState?.changes?.location) && (
-                <TouchableOpacity onPress={handleToggleMap} style={{ marginBottom: 10 }}>
-                  <OText
-                    color={theme.colors.primary}
-                    style={{ textAlign: 'center' }}
-                  >
-                    {t('VIEW_MAP', 'View map to modify the exact location')}
-                  </OText>
-                </TouchableOpacity>
-              )} */}
+								{(
+									(!isEditing && !isGuestUser && !formState.changes?.address) ||
+									(isEditing && !isGuestUser && !formState.changes?.address && formState.changes?.address !== undefined)) ||
+									(isGuestUser && !formState.changes?.address && formState.changes?.address !== undefined) &&
+								(
+										<View style={styles.pinIcon}>
+											<GPSButton
+												apiKey={googleMapsApiKey}
+												handleGPS={(data: any, detail: any) => {
+													handleChangeAddress(data, detail);
+													setValue('address', data.address);
+													if (googleInput?.current) {
+														googleInput?.current?.setAddressText(data.address);
+													}
+												}}
+												IconButton={<OIcon src={theme.images.general.pin} width={16} />}
+											/>
+										</View>
+								)}
+							</AutocompleteInput>
 
 							{(locationChange || formState.changes?.location) && (
 								<View

package/themes/original/src/components/AddressList/index.tsx

@@ -56,7 +56,7 @@ const AddressListUI = (props: AddressListParams) => {
 	}
 
 	const uniqueAddressesList = (addressList.addresses && addressList.addresses.filter(
-		(address: any, i: number, self: any) =>
+		(address: any, i: number, self: any) => address.address &&
 			i === self.findIndex((obj: any) => (
 				address.address === obj.address &&
 				address.address_notes === obj.address_notes &&

package/themes/original/src/components/BusinessBasicInformation/index.tsx

@@ -1,5 +1,6 @@
 import React, { useState, useEffect } from 'react';
 import { StyleSheet, View, TouchableOpacity, Linking, Pressable } from 'react-native';
+import FastImage from 'react-native-fast-image'
 import { useUtils, useOrder, useLanguage } from 'ordering-components/native';
 import { useTheme } from 'styled-components/native';
 import { OIcon, OText, OModal } from '../shared';
@@ -55,13 +56,13 @@ export const BusinessBasicInformation = (
 		headerStyle: {
 			height: isChewLayout ? 170 : 260,
 		},
-		businessLogo: {
-			width: 72,
-			height: 72,
-			borderRadius: 7.6,
-			justifyContent: 'flex-start',
-			alignItems: 'flex-start',
-		},
+		logoStyle: {
+      width: 72,
+      height: 72,
+      borderRadius: 7.6,
+      justifyContent: 'flex-start',
+      alignItems: 'flex-start'
+    },
 		businessInfo: {
 			paddingHorizontal: 40,
 			paddingTop: isChewLayout ? 0 : 56,
@@ -270,11 +271,9 @@ export const BusinessBasicInformation = (
 						? styles.businesInfoheaderStyle
 						: { ...styles.headerStyle, backgroundColor: theme.colors.backgroundGray }
 				}
-				source={{
-					uri:
-						header ||
-						optimizeImage(businessState?.business?.header, 'h_250,c_limit'),
-				}}
+				{...(!loading && { source: {
+					uri: header || optimizeImage(businessState?.business?.header, 'h_250,c_limit')
+				}})}
 				imageStyle={{ opacity: isChewLayout ? 0.5 : 1 }}
 			>
 				{!isBusinessInfoShow && !isChewLayout && (
@@ -282,7 +281,7 @@ export const BusinessBasicInformation = (
 						<OIcon src={theme.images.general.info} width={24} />
 					</WrapBusinessInfo>
 				)}
-				{isChewLayout && (
+				{isChewLayout && !loading && (
 					<View style={styles.headerChewStyle}>
 						<OText size={24} weight={'600'} mBottom={-5}>
 							{business?.name}
@@ -302,12 +301,14 @@ export const BusinessBasicInformation = (
 				{showLogo && (
 					<BusinessLogo isChewLayout={isChewLayout}>
 						{!isBusinessInfoShow && (
-							<OIcon
-								url={
-									logo ||
-									optimizeImage(businessState?.business?.logo, 'h_70,c_limit')
-								}
-								style={styles.businessLogo}
+							<FastImage
+								style={styles.logoStyle}
+								source={{
+									uri: logo || optimizeImage(businessState?.business?.logo, 'h_70,c_limit'),
+									priority: FastImage.priority.high,
+									cache:FastImage.cacheControl.web
+								}}
+								resizeMode={FastImage.resizeMode.contain}
 							/>
 						)}
 					</BusinessLogo>

package/themes/original/src/components/BusinessListingSearch/index.tsx

@@ -25,7 +25,8 @@ import {
   BrandItem,
   PriceFilterWrapper,
   OptionTitle,
-  BContainer
+  BContainer,
+  WrapperButtons
 } from './styles'
 import FastImage from 'react-native-fast-image'
 import { convertHoursToMinutes } from '../../utils'
@@ -134,7 +135,7 @@ export const BusinessListingSearchUI = (props: BusinessSearchParams) => {
       borderWidth: 0
     },
     applyButton: {
-      paddingHorizontal: 40,
+      paddingHorizontal: 10,
       width: '100%',
       marginTop: 20
     }
@@ -145,10 +146,14 @@ export const BusinessListingSearchUI = (props: BusinessSearchParams) => {
   }
 
   const handleCloseFilters = () => {
-    setFilters({ business_types: [], orderBy: 'default', franchise_ids: [], price_level: null })
+    clearFilters()
     setOpenFilters(false)
   }
 
+  const clearFilters = () => {
+    setFilters({ business_types: [], orderBy: 'default', franchise_ids: [], price_level: null })
+  }
+
   const handleChangeActiveBusinessType = (type: any) => {
     if (type?.id === null) {
       handleChangeFilters('business_types', [])
@@ -482,22 +487,28 @@ export const BusinessListingSearchUI = (props: BusinessSearchParams) => {
           </PriceFilterWrapper>
           {orderState?.options?.type === 1 && (
             <MaxSectionItem
+              filters={filters}
               title={t('MAX_DELIVERY_FEE', 'Max delivery fee')}
               options={maxDeliveryFeeOptions}
               filter='max_delivery_price'
+              handleChangeFilters={handleChangeFilters}
             />
           )}
           {[1, 2].includes(orderState?.options?.type) && (
             <MaxSectionItem
+              filters={filters}
               title={orderState?.options?.type === 1 ? t('MAX_DELIVERY_TIME', 'Max delivery time') : t('MAX_PICKUP_TIME', 'Max pickup time')}
               options={maxTimeOptions}
               filter='max_eta'
+              handleChangeFilters={handleChangeFilters}
             />
           )}
           <MaxSectionItem
+            filters={filters}
             title={t('MAX_DISTANCE', 'Max distance')}
             options={maxDistanceOptions}
             filter='max_distance'
+            handleChangeFilters={handleChangeFilters}
           />
           {businessTypes?.length > 0 && (
             <TagsContainer>
@@ -517,12 +528,26 @@ export const BusinessListingSearchUI = (props: BusinessSearchParams) => {
             </TagsContainer>
           )}
         </ScrollView>
-        <OButton
-          text={t('APPLY', 'Apply')}
-          parentStyle={styles.applyButton}
-          textStyle={{ color: '#fff' }}
-          onClick={() => handleApplyFilters()}
-        />
+        <WrapperButtons>
+          <View style={{ width: '50%' }}>
+            <OButton
+              text={t('APPLY', 'Apply')}
+              parentStyle={styles.applyButton}
+              textStyle={{ color: '#fff' }}
+              onClick={() => handleApplyFilters()}
+            />
+          </View>
+          <View style={{ width: '50%' }}>
+            <OButton
+              text={t('CLEAR_FILTERS', 'Clear')}
+              bgColor={theme.colors.white}
+              borderColor={theme.colors.primary}
+              parentStyle={styles.applyButton}
+              textStyle={{ color: theme.colors.primary }}
+              onClick={() => clearFilters()}
+            />
+          </View>
+        </WrapperButtons>
       </OModal>
     </BContainer>
   )

package/themes/original/src/components/BusinessListingSearch/styles.tsx

@@ -86,3 +86,9 @@ export const OptionTitle = styled.View`
 		margin-left: ${() => props.isBusinessesSearchList ? '0' : '40px'};
 	`}
 `
+
+export const WrapperButtons = styled.View`
+  flex-direction: row;
+  width: 100%;
+  justify-content: space-between;
+`

package/themes/original/src/components/BusinessProductsListing/index.tsx

@@ -293,7 +293,7 @@ const BusinessProductsListingUI = (props: BusinessProductsListingParams) => {
 							</Placeholder>
 						</NearBusiness>
 					)}
-					{!hideBusinessNearCity && businessState?.business?.city_id && (
+					{!loading && !hideBusinessNearCity && businessState?.business?.city_id && (
 						<NearBusiness>
 							<BusinessesListing
 								logosLayout

package/themes/original/src/components/BusinessesListing/Layout/Original/index.tsx

@@ -165,16 +165,6 @@ const BusinessesListingUI = (props: BusinessesListingParams) => {
 	const [favoriteIds, setFavoriteIds] = useState<any>([])
 	const chewOrderTypes = [{ name: t('DELIVERY', 'Delivery').toUpperCase(), value: 1 }, { name: t('PICKUP', 'Pickup').toUpperCase(), value: 2 }]
 
-	// const panResponder = useRef(
-	// 	PanResponder.create({
-	// 		onMoveShouldSetPanResponder: (e, gestureState) => {
-	// 			const { dx, dy } = gestureState;
-	// 			resetInactivityTimeout()
-	// 			return (Math.abs(dx) > 20) || (Math.abs(dy) > 20);
-	// 		},
-	// 	})
-	// ).current
-
 	const handleMomentClick = () => {
 		if (isPreorderEnabled) {
 			navigation.navigate('MomentOption')
@@ -296,7 +286,10 @@ const BusinessesListingUI = (props: BusinessesListingParams) => {
 
 	if (logosLayout) {
 		return (
-			<BusinessLogosContainer horizontal>
+			<BusinessLogosContainer
+				horizontal
+				showsHorizontalScrollIndicator={false}
+			>
 				{businessesList?.loading ? (
 					<Placeholder Animation={Fade}>
 						<View style={{ flexDirection: 'row' }}>
@@ -310,14 +303,27 @@ const BusinessesListingUI = (props: BusinessesListingParams) => {
 				) : (
 					<>
 						{businessesList.businesses
-							?.filter(business => business?.slug !== actualSlug && business?.open)
+							?.filter(business => business?.open)
 							?.map(business => (
 								<TouchableOpacity
 									key={business?.id}
 									onPress={() => handleBusinessClick && handleBusinessClick(business)}
+									style={{
+										width: 57,
+										height: 58,
+										borderBottomColor: theme.colors.primary,
+										borderBottomWidth: business?.slug === actualSlug ? 2 : 0,
+										marginRight: 5
+									}}
 								>
 									<FastImage
-										style={{ width: 56, height: 56, marginRight: 20, borderRadius: 7.6 }}
+										style={{
+											width: 56,
+											height: 56,
+											marginRight: 20,
+											borderTopLeftRadius: 7.6,
+											borderTopRightRadius: 7.6
+										}}
 										source={{
 											uri: business?.logo,
 											priority: FastImage.priority.normal,
@@ -333,7 +339,10 @@ const BusinessesListingUI = (props: BusinessesListingParams) => {
 	}
 
 	return (
-		<IOScrollView style={styles.container} onScroll={(e) => handleScroll(e)} showsVerticalScrollIndicator={false}
+		<IOScrollView
+			style={styles.container}
+			onScroll={(e) => handleScroll(e)}
+			showsVerticalScrollIndicator={false}
 			refreshControl={
 				<RefreshControl
 					refreshing={refreshing}
@@ -463,11 +472,12 @@ const BusinessesListingUI = (props: BusinessesListingParams) => {
 						handleChangeBusinessType={handleChangeBusinessType}
 						isChewLayout
 						chewOrderTypes={chewOrderTypes}
+						handleChangeType={setOrderTypeValue}
 					/>
 				</OrderTypesContainer>
 			)}
 
-			{!hideCities && (
+			{!hideCities && orderTypeValue === 2 && (
 				<View style={{ marginTop: 20 }}>
 					<TouchableOpacity
 						style={styles.buttonCityStyle}

package/themes/original/src/components/GPSButton/index.tsx

@@ -1,17 +1,16 @@
 import React, { useEffect, useState } from 'react'
-import { getTrackingStatus, requestTrackingPermission } from 'react-native-tracking-transparency'
-import Geolocation from '@react-native-community/geolocation'
 import Geocoder from 'react-native-geocoding'
-import { GpsButtonStyle } from './styles'
-import { View } from 'react-native'
-import { OText } from '../shared'
 import { ActivityIndicator } from 'react-native-paper'
+import Geolocation from '@react-native-community/geolocation'
+import { getTrackingStatus, requestTrackingPermission } from 'react-native-tracking-transparency'
+
+import { OText } from '../shared'
+import { GpsButtonStyle } from './styles'
 
 export const GPSButton = (props: any) => {
   const {
     handleGPS,
 		apiKey,
-    googleReady,
     IconButton,
     IconLoadingButton
   } = props
@@ -56,25 +55,27 @@ export const GPSButton = (props: any) => {
     })
   }
 
-	const getCurrentPosition = async () => {
+  const getCurrentPosition = async () => {
     let trackingStatus = await getTrackingStatus()
-		if (trackingStatus === 'not-determined') {
-			trackingStatus = await requestTrackingPermission()
-		}
-		if (trackingStatus === 'authorized' || trackingStatus === 'unavailable') {
-      setLoading(true);
+    if (trackingStatus === 'not-determined') {
+      trackingStatus = await requestTrackingPermission()
+    }
+    if (trackingStatus === 'authorized' || trackingStatus === 'unavailable') {
+      setLoading(true)
       Geolocation.getCurrentPosition((pos) => {
-        geoCodePosition(pos.coords);
+        geoCodePosition(pos.coords)
       }, (err) => {
         setLoading(false);
-        console.log(err);
-      });
+        console.log(`ERROR(${err.code}): ${err.message}`)
+      }, {
+        enableHighAccuracy: true, timeout: 15000, maximumAge: 10000
+      })
     }
-	}
+  }
 
-	useEffect(() => {
-		Geocoder.init(apiKey);
-	}, [])
+  useEffect(() => {
+    Geocoder.init(apiKey);
+  }, [])
 
   return (
     <GpsButtonStyle

package/themes/original/src/components/OrderTypeSelector/index.tsx

@@ -1,4 +1,4 @@
-import React from 'react'
+import React, { useEffect } from 'react'
 import {
 	OrderTypeControl,
 	useLanguage,
@@ -17,6 +17,7 @@ const OrderTypeSelectorUI = (props: OrderTypeSelectParams) => {
 	const {
 		navigation,
 		handleChangeOrderType,
+		handleChangeType,
 		typeSelected,
 		defaultValue,
 		configTypes,
@@ -51,6 +52,10 @@ const OrderTypeSelectorUI = (props: OrderTypeSelectParams) => {
 		}
 	}
 
+	useEffect(() => {
+		handleChangeType(typeSelected)
+	}, [typeSelected])
+
 	return (
 		<Wrapper>
 			{isChewLayout ? (

package/themes/original/src/components/OrdersOption/PreviousBusinessOrdered/index.tsx

@@ -97,7 +97,7 @@ export const PreviousBusinessOrdered = (props: PreviousBusinessOrderedParams) =>
   const [orderState] = useOrder()
   const windowWidth = Dimensions.get('window').width;
   const onBusinessClick = (business: any) => {
-    onNavigationRedirect('Business', { store: business.slug })
+    onNavigationRedirect('Business', { store: business.slug, logo: business.logo, header: business.header })
   }
 
   const styles = StyleSheet.create({

package/themes/original/src/components/ProductForm/index.tsx

@@ -1,4 +1,16 @@
-import React, { useEffect, useRef, useCallback } from 'react';
+import React, { useEffect, useRef, useState, useCallback } from 'react';
+import {
+  View,
+  Keyboard,
+  TextInput,
+  TouchableOpacity,
+  StyleSheet,
+  Dimensions,
+  I18nManager,
+  SafeAreaView,
+  Platform,
+  Button
+} from 'react-native';
 import {
 	ProductForm as ProductOptions,
 	useSession,
@@ -15,17 +27,10 @@ import Swiper from 'react-native-swiper'
 import FastImage from 'react-native-fast-image';
 import IconAntDesign from 'react-native-vector-icons/AntDesign';
 import YoutubePlayer from "react-native-youtube-iframe"
-import { TextInput } from 'react-native'
-import {
-	Grayscale
-} from 'react-native-color-matrix-image-filters'
-
-import { View, TouchableOpacity, StyleSheet, Dimensions, I18nManager, SafeAreaView, Platform, Button } from 'react-native';
 
 import {
 	WrapHeader,
 	TopHeader,
-	WrapContent,
 	ProductTitle,
 	ProductDescription,
 	ProductEditions,
@@ -45,8 +50,6 @@ import { ScrollView } from 'react-native-gesture-handler';
 import { ProductOptionSubOption } from '../ProductOptionSubOption';
 import { NotFoundSource } from '../NotFoundSource';
 import { Placeholder, PlaceholderLine, Fade } from 'rn-placeholder';
-import { useState } from 'react';
-const windowHeight = Dimensions.get('window').height;
 const windowWidth = Dimensions.get('window').width;
 
 export const ProductOptionsUI = (props: any) => {
@@ -454,6 +457,16 @@ export const ProductOptionsUI = (props: any) => {
 		)
 	}
 
+	useEffect(() => {
+    const keyboardDidShowListener = Keyboard.addListener('keyboardDidShow', () => {
+			scrollViewRef.current.scrollToEnd({ animated: true })
+    })
+    return () => {
+      keyboardDidShowListener.remove()
+    }
+  }, [])
+
+
 	return (
 		<SafeAreaView style={{ flex: 1 }}>
 			<TopHeader>
@@ -466,7 +479,8 @@ export const ProductOptionsUI = (props: any) => {
 					ref={scrollViewRef}
 					contentContainerStyle={{ paddingBottom: 80 }}
 					stickyHeaderIndices={[2]}
-					onScroll={handleScroll}>
+					onScroll={handleScroll}
+				>
 					<WrapHeader onLayout={(event: any) => setHeaderRefHeight(event.nativeEvent.layout?.height)}>
 						{loading && !product ? (
 							<View style={styles.productHeaderSkeleton}>

package/themes/original/src/components/ProductForm/styles.tsx

@@ -65,7 +65,7 @@ export const WrapperSubOption = styled.View`
 `
 
 export const ProductComment = styled.View`
-  padding-bottom: 60px;
+  padding-bottom: ${(props: any) => props.pb || 60}px;
 `
 
 export const ProductActions = styled.View`