ordering-ui-react-native 0.16.91 → 0.16.92

package/package.json

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

package/themes/business/src/components/BusinessController/index.tsx

@@ -97,6 +97,7 @@ export const BusinessControllerUI = (props: BusinessControllerParams) => {
             <Logo style={styles.logo}>
               <OIcon
                 url={optimizeImage(business?.logo, 'h_300,c_limit')}
+                src={!business?.logo && theme?.images?.dummies?.businessLogo}
                 style={styles.icon}
               />
             </Logo>

package/themes/business/src/components/ReviewCustomer/index.tsx

@@ -1,4 +1,4 @@
-import React, { useState, useEffect } from 'react'
+import React, { useState, useEffect, useRef } from 'react'
 import {
   useLanguage,
   useUtils,
@@ -10,7 +10,8 @@ import {
   View,
   StyleSheet,
   I18nManager,
-  TouchableOpacity
+  TouchableOpacity,
+  Keyboard
 } from 'react-native'
 import { useTheme } from 'styled-components/native'
 import { ReviewCustomerParams } from '../../types'
@@ -52,7 +53,7 @@ const ReviewCustomerUI = (props: ReviewCustomerParams) => {
   const { top, bottom } = useSafeAreaInsets()
   const [comments, setComments] = useState<Array<any>>([])
   const [extraComment, setExtraComment] = useState('')
-
+  const scrollref = useRef<any>()
   const styles = StyleSheet.create({
     photoWrapper: {
       shadowColor: theme.colors.black,
@@ -142,6 +143,14 @@ const ReviewCustomerUI = (props: ReviewCustomerParams) => {
 
   }, [actionState.error])
 
+  useEffect(() => {
+    if(scrollref?.current){
+      Keyboard.addListener('keyboardDidShow', () => {
+        scrollref.current.scrollToEnd()
+      })
+    }
+  }, [scrollref?.current])
+
   return (
     <KeyboardAvoidingView
       enabled
@@ -179,6 +188,7 @@ const ReviewCustomerUI = (props: ReviewCustomerParams) => {
       <Content
         showsVerticalScrollIndicator={false}
         contentContainerStyle={{ paddingBottom: 30 }}
+        ref={scrollref}
       >
         <CustomerInfoContainer>
           <View

package/themes/business/src/components/StoresList/index.tsx

@@ -149,10 +149,10 @@ const StoresListUI = (props: BusinessesListingParams) => {
             width={12}
             height={12}
             color={theme.colors.skyBlue}
-            style={{ marginRight: 5 }}
+            style={{ marginRight: 5, marginTop: 3 }}
           />
           <OText size={12}>
-            {t('MORE_SETTINGS_GO_TO', 'For more settings go to ')}
+            {t('MORE_SETTINGS_GO_TO', 'For more settings go to')}{' '}
           </OText>
           <TouchableOpacity onPress={() => { Linking.openURL(t('LINK_MORE_SETTINGS_GO_TO', 'https://app.ordering.co')) }}>
             <OText size={12} color={theme.colors.skyBlue}>

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,26 @@ 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 && !formState.changes?.address) ||
+									(isEditing && !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

@@ -59,7 +59,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

@@ -15,7 +15,7 @@ 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 { Keyboard, TextInput } from 'react-native'
 import {
 	Grayscale
 } from 'react-native-color-matrix-image-filters'
@@ -183,6 +183,7 @@ export const ProductOptionsUI = (props: any) => {
 	const [headerRefHeight, setHeaderRefHeight] = useState(0)
 	const [summaryRefHeight, setSummaryRefHeight] = useState(0)
 	const [isScrollAvailable, setIsScrollAvailable] = useState(null)
+	const [isKeyboardShow, setIsKeyboardShow] = useState(false)
 
 	const isError = (id: number) => {
 		let bgColor = theme.colors.white;
@@ -454,6 +455,20 @@ export const ProductOptionsUI = (props: any) => {
 		)
 	}
 
+	useEffect(() => {
+    const keyboardDidShowListener = Keyboard.addListener('keyboardDidShow', () => {
+      setIsKeyboardShow(true)
+    })
+    const keyboardDidHideListener = Keyboard.addListener('keyboardDidHide', () => {
+      setIsKeyboardShow(false)
+    })
+    return () => {
+      keyboardDidShowListener.remove()
+      keyboardDidHideListener.remove()
+    }
+  }, [])
+
+
 	return (
 		<SafeAreaView style={{ flex: 1 }}>
 			<TopHeader>
@@ -947,7 +962,7 @@ export const ProductOptionsUI = (props: any) => {
 								</>
 							)}
 							{!product?.hide_special_instructions && (
-								<ProductComment>
+								<ProductComment pb={isKeyboardShow && Platform.OS === 'ios' && 320}>
 									<SectionTitle>
 										<OText size={16} weight={'600'} lineHeight={24}>
 											{t('SPECIAL_COMMENT', 'Special comment')}

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`