ordering-ui-react-native 0.18.56 → 0.18.58-test

package/package.json

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

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

@@ -123,7 +123,7 @@ const AddressFormUI = (props: AddressFormParams) => {
 		},
 		wrapperNavbar: Platform.OS === 'ios'
 			? { paddingVertical: 0, paddingLeft: 40, paddingRight: 20 }
-			: { paddingVertical: 20, paddingLeft: 40, paddingRight: 20 }
+			: { paddingVertical: 10, paddingLeft: 40, paddingRight: 20 }
 	});
 
 	const [, t] = useLanguage();
@@ -176,7 +176,6 @@ const AddressFormUI = (props: AddressFormParams) => {
 
 	const getAddressFormatted = (address: any) => {
 		const data: any = { address: null, error: null };
-		Geocoder.init(googleMapsApiKey);
 		Geocoder.from(address)
 			.then((json) => {
 				if (json.results && json.results?.length > 0) {
@@ -491,6 +490,10 @@ const AddressFormUI = (props: AddressFormParams) => {
 		}
 	}, []);
 
+	useEffect(() => {
+		Geocoder.init(googleMapsApiKey);
+	}, [googleMapsApiKey]);
+
 	useEffect(() => {
 		const keyboardDidShowListener = Keyboard.addListener(
 			'keyboardDidShow',
@@ -535,7 +538,7 @@ const AddressFormUI = (props: AddressFormParams) => {
 				/>
 			</View>
 			<TouchableWithoutFeedback onPress={Keyboard.dismiss}>
-				<AddressFormContainer style={{ height: HEIGHT_SCREEN * .78, overflow: 'scroll' }}>
+				<AddressFormContainer style={{ overflow: 'scroll' }}>
 					<View>
 						<FormInput>
 							<AutocompleteInput>
@@ -640,6 +643,7 @@ const AddressFormUI = (props: AddressFormParams) => {
 													}
 												}}
 												IconButton={<OIcon src={theme.images.general.pin} width={16} />}
+												isIntGeoCoder
 											/>
 										</View>
 									)}
@@ -661,6 +665,7 @@ const AddressFormUI = (props: AddressFormParams) => {
 											saveLocation={saveMapLocation}
 											setSaveLocation={setSaveMapLocation}
 											handleToggleMap={handleToggleMap}
+											isIntGeoCoder
 										/>
 									</GoogleMapContainer>
 								</View>
@@ -871,6 +876,7 @@ const AddressFormUI = (props: AddressFormParams) => {
 									saveLocation={saveMapLocation}
 									setSaveLocation={setSaveMapLocation}
 									handleToggleMap={handleToggleMap}
+									isIntGeoCoder
 								/>
 							</GoogleMapContainer>
 						)}

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

@@ -23,7 +23,7 @@ import { ActivityIndicator, TouchableOpacity, View } from 'react-native';
 import AntIcon from 'react-native-vector-icons/AntDesign'
 import { TaxInformation } from '../TaxInformation';
 import { CartStoresListing } from '../CartStoresListing';
-import { OAlert } from '../../../../../src/components/shared'
+import { OAlert } from '../shared'
 import { PlaceSpot } from '../PlaceSpot'
 import { DriverTips } from '../DriverTips'
 import { MomentOption } from '../MomentOption'
@@ -67,7 +67,6 @@ const CartUI = (props: any) => {
   const [openChangeStore, setOpenChangeStore] = useState(false)
   const [canOpenUpselling, setCanOpenUpselling] = useState(false)
   const [openTaxModal, setOpenTaxModal] = useState<any>({ open: false, data: null, type: '' })
-  const [confirm, setConfirm] = useState<any>({ open: false, content: null, handleOnAccept: null, id: null, title: null })
   const [openPlaceModal, setOpenPlaceModal] = useState(false)
   const [maxDate, setMaxDate] = useState<any>(null)
   const isCartPending = cart?.status === 2
@@ -75,7 +74,6 @@ const CartUI = (props: any) => {
   const business: any = (orderState?.carts && Object.values(orderState.carts).find((_cart: any) => _cart?.uuid === props.cartuuid)) ?? {}
   const businessId = business?.business_id ?? null
   const placeSpotTypes = [4]
-  const isChewLayout = theme?.header?.components?.layout?.type?.toLowerCase() === 'chew'
   const hideCartComments = theme?.business_view?.components?.cart?.components?.comments?.hidden
   const hideCartDiscount = theme?.business_view?.components?.cart?.components?.discount?.hidden
   const driverTipsOptions = typeof configs?.driver_tip_options?.value === 'string'
@@ -167,16 +165,16 @@ const CartUI = (props: any) => {
     return cart?.taxes?.filter((tax: any) => tax?.type === 1)?.reduce((carry: number, tax: any) => carry + (tax?.summary?.tax_after_discount ?? tax?.summary?.tax), 0)
   }
 
-  const onRemoveOffer = (id: number) => {
-    setConfirm({
-      open: true,
-      content: [t('QUESTION_DELETE_OFFER', 'Are you sure that you want to delete the offer?')],
-      title: t('OFFER', 'Offer'),
-      handleOnAccept: () => {
-        setConfirm({ ...confirm, open: false })
-        handleRemoveOfferClick(id)
-      }
-    })
+  const OfferAlert = ({ offerId }: any) => {
+    return (
+      <OAlert
+        title={t('OFFER', 'Offer')}
+        message={t('QUESTION_DELETE_OFFER', 'Are you sure that you want to delete the offer?')}
+        onAccept={() => handleRemoveOfferClick(offerId)}
+      >
+        <AntIcon style={{ marginLeft: 3 }} name='closecircle' size={16} color={theme.colors.primary} />
+      </OAlert>
+    )
   }
 
   const walletName: any = {
@@ -283,9 +281,9 @@ const CartUI = (props: any) => {
                     <TouchableOpacity style={{ marginLeft: 3 }} onPress={() => setOpenTaxModal({ open: true, data: offer, type: 'offer_target_1' })}>
                       <AntIcon name='infocirlceo' size={16} color={theme.colors.primary} />
                     </TouchableOpacity>
-                    <TouchableOpacity style={{ marginLeft: 3 }} onPress={() => onRemoveOffer(offer?.id)}>
-                      <AntIcon name='closecircle' size={16} color={theme.colors.primary} />
-                    </TouchableOpacity>
+                    {!!offer?.id && (
+                      <OfferAlert offerId={offer?.id} />
+                    )}
                   </OSRow>
                   <OText size={12} lineHeight={18}>
                     - {parsePrice(offer?.summary?.discount)}
@@ -347,10 +345,8 @@ const CartUI = (props: any) => {
                     <TouchableOpacity style={{ marginLeft: 3 }} onPress={() => setOpenTaxModal({ open: true, data: offer, type: 'offer_target_3' })}>
                       <AntIcon name='infocirlceo' size={16} color={theme.colors.primary} />
                     </TouchableOpacity>
-                    {!offer?.type && (
-                      <TouchableOpacity style={{ marginLeft: 3 }} onPress={() => onRemoveOffer(offer?.id)}>
-                        <AntIcon name='closecircle' size={16} color={theme.colors.primary} />
-                      </TouchableOpacity>
+                    {!offer?.type && !!offer?.id && (
+                      <OfferAlert offerId={offer?.id} />
                     )}
                   </OSRow>
                   <OText size={12} lineHeight={18}>
@@ -376,9 +372,9 @@ const CartUI = (props: any) => {
                     <TouchableOpacity style={{ marginLeft: 3 }} onPress={() => setOpenTaxModal({ open: true, data: offer, type: 'offer_target_2' })}>
                       <AntIcon name='infocirlceo' size={16} color={theme.colors.primary} />
                     </TouchableOpacity>
-                    <TouchableOpacity style={{ marginLeft: 3 }} onPress={() => onRemoveOffer(offer?.id)}>
-                      <AntIcon name='closecircle' size={16} color={theme.colors.primary} />
-                    </TouchableOpacity>
+                    {!!offer?.id && (
+                      <OfferAlert offerId={offer?.id} />
+                    )}
                   </OSRow>
                   <OText size={12} lineHeight={18}>
                     - {parsePrice(offer?.summary?.discount)}
@@ -591,14 +587,6 @@ const CartUI = (props: any) => {
           setOpenPlaceModal={setOpenPlaceModal}
         />
       </OModal>
-      <OAlert
-        open={confirm.open}
-        title={confirm.title}
-        content={confirm.content}
-        onAccept={confirm.handleOnAccept}
-        onCancel={() => setConfirm({ ...confirm, open: false, title: null })}
-        onClose={() => setConfirm({ ...confirm, open: false, title: null })}
-      />
     </CContainer>
   )
 }

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

@@ -12,7 +12,8 @@ export const GPSButton = (props: any) => {
     handleGPS,
 		apiKey,
     IconButton,
-    IconLoadingButton
+    IconLoadingButton,
+    isIntGeoCoder
   } = props
 
 	const [isLoading, setLoading] = useState(false);
@@ -74,8 +75,9 @@ export const GPSButton = (props: any) => {
   }
 
   useEffect(() => {
+    if (isIntGeoCoder) return
     Geocoder.init(apiKey);
-  }, [])
+  }, [isIntGeoCoder])
 
   return (
     <GpsButtonStyle

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

@@ -18,7 +18,8 @@ export const GoogleMap = (props: GoogleMapsParams) => {
     saveLocation,
     setSaveLocation,
     handleToggleMap,
-    locations
+    locations,
+    isIntGeoCoder
   } = props
 
   const [, t] = useLanguage()
@@ -161,8 +162,9 @@ export const GoogleMap = (props: GoogleMapsParams) => {
   }
 
   useEffect(() => {
+    if (isIntGeoCoder) return
     Geocoder.init(googleMapsApiKey)
-  }, [])
+  }, [isIntGeoCoder])
 
   useEffect(() => {
     mapRef.current.animateToRegion({

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

@@ -114,7 +114,9 @@ const MultiCheckoutUI = (props: any) => {
 
   const clearAmount = (value: any) => parseFloat((Math.trunc(value * 100) / 100).toFixed(configs.format_number_decimal_length?.value ?? 2))
 
-  const loyaltyRewardValue = openCarts.reduce((sum: any, cart: any) => sum + clearAmount((cart?.subtotal + getIncludedTaxes(cart)) * accumulationRateBusiness(cart?.business_id)), 0)
+  const loyaltyRewardValue = openCarts
+    ?.reduce((sum: any, cart: any) => sum + clearAmount((cart?.subtotal + getIncludedTaxes(cart)) * accumulationRateBusiness(cart?.business_id)), 0)
+    ?.toFixed(configs.format_number_decimal_length?.value ?? 2)
 
   const [isUserDetailsEdit, setIsUserDetailsEdit] = useState(false);
   const [phoneUpdate, setPhoneUpdate] = useState(false);
@@ -320,7 +322,7 @@ const MultiCheckoutUI = (props: any) => {
                     isFixedPrice={parseInt(configs?.driver_tip_type?.value, 10) === 1}
                     isDriverTipUseCustom={!!parseInt(configs?.driver_tip_use_custom?.value, 10)}
                     driverTip={parseInt(configs?.driver_tip_type?.value, 10) === 1
-                      ? openCarts[0]?.driver_tip
+                      ? openCarts?.reduce((sum: any, cart: any) => sum + cart?.driver_tip, 0)
                       : openCarts[0]?.driver_tip_rate}
                     useOrderContext
                   />

package/themes/original/src/components/OrderDetails/OrderEta.tsx

@@ -38,9 +38,12 @@ export const OrderEta = (props: any) => {
       }
       _estimatedTime = moment.utc(_delivery).add(totalEta, 'minutes')
     } else {
-      _estimatedTime = moment.utc(_delivery).add(order?.eta_time, 'minutes')
+      let timesToAdd = 0
+      if (order?.delivered_in) timesToAdd += order?.delivered_in
+      if (order?.prepared_in) timesToAdd += order?.prepared_in
+      const _etaTime = order?.eta_time + timesToAdd
+      _estimatedTime = moment.utc(_delivery).add(_etaTime, 'minutes')
     }
-    if (order?.delivered_in) { _estimatedTime = moment.utc(_delivery).add(order?.delivered_in, 'minutes')}
     _estimatedTime = outputFormat ? moment(_estimatedTime).local().format(outputFormat) : parseDate(_estimatedTime, { utc: false })
     setEstimatedDeliveryTime(_estimatedTime)
   }

package/themes/original/src/components/OrderDetails/OrderHistory.tsx

@@ -129,7 +129,7 @@ export const OrderHistory = (props: any) => {
               <OText
                 size={14}
                 weight='bold'
-                numberOfLines={message.change?.attribute === 'delivered_in' ? 2 : 1}
+                numberOfLines={message.change?.attribute.includes(['delivered_in', 'prepared_in']) ? 2 : 1}
                 ellipsizeMode='tail'
               >
                 {message.change?.attribute === 'logistic_status'
@@ -140,7 +140,12 @@ export const OrderHistory = (props: any) => {
                       {formatSeconds(parseInt(message.change.new, 10))}
                     </>
                   )
-                    : t(ORDER_STATUS[parseInt(message.change.new, 10)])
+                    : message.change?.attribute === 'prepared_in' ? (
+                    <>
+                      {t('TIME_ADDED_BY_BUSINESS', 'Time added by business')}{'\n'}
+                      {formatSeconds(parseInt(message.change.new, 10))}
+                    </>
+                    ) : t(ORDER_STATUS[parseInt(message.change.new, 10)])
                 }
               </OText>
             ) : (

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

@@ -20,12 +20,11 @@ import {
 
 import { ProductItemAccordion } from '../ProductItemAccordion';
 import { CouponControl } from '../CouponControl';
-import { OInput, OModal, OText } from '../shared';
+import { OInput, OModal, OText, OAlert } from '../shared';
 import { verifyDecimals } from '../../utils';
 import AntIcon from 'react-native-vector-icons/AntDesign'
 import { TaxInformation } from '../TaxInformation';
 import { TouchableOpacity } from 'react-native';
-import { OAlert } from '../../../../../src/components/shared'
 import { MomentOption } from '../MomentOption';
 
 const OrderSummaryUI = (props: any) => {
@@ -58,7 +57,6 @@ const OrderSummaryUI = (props: any) => {
   const [{ parsePrice, parseNumber }] = useUtils();
   const [validationFields] = useValidationFields();
   const [openTaxModal, setOpenTaxModal] = useState<any>({ open: false, data: null, type: '' })
-  const [confirm, setConfirm] = useState<any>({ open: false, content: null, handleOnAccept: null, id: null, title: null })
   const isCouponEnabled = validationFields?.fields?.checkout?.coupon?.enabled;
   const hideCartComments = !validationFields?.fields?.checkout?.comments?.enabled
 
@@ -106,16 +104,16 @@ const OrderSummaryUI = (props: any) => {
     return cart?.taxes?.filter((tax: any) => tax?.type === 1)?.reduce((carry: number, tax: any) => carry + (tax?.summary?.tax_after_discount ?? tax?.summary?.tax), 0)
   }
 
-  const onRemoveOffer = (id: number) => {
-    setConfirm({
-      open: true,
-      content: [t('QUESTION_DELETE_OFFER', 'Are you sure that you want to delete the offer?')],
-      title: t('OFFER', 'Offer'),
-      handleOnAccept: () => {
-        setConfirm({ ...confirm, open: false })
-        handleRemoveOfferClick(id)
-      }
-    })
+  const OfferAlert = ({ offerId }: any) => {
+    return (
+      <OAlert
+        title={t('OFFER', 'Offer')}
+        message={t('QUESTION_DELETE_OFFER', 'Are you sure that you want to delete the offer?')}
+        onAccept={() => handleRemoveOfferClick(offerId)}
+      >
+        <AntIcon style={{ marginLeft: 3 }} name='closecircle' size={16} color={theme.colors.primary} />
+      </OAlert>
+    )
   }
 
   return (
@@ -171,9 +169,9 @@ const OrderSummaryUI = (props: any) => {
                       <TouchableOpacity style={{ marginLeft: 3 }} onPress={() => setOpenTaxModal({ open: true, data: offer, type: 'offer_target_1' })}>
                         <AntIcon name='infocirlceo' size={16} color={theme.colors.primary} />
                       </TouchableOpacity>
-                      <TouchableOpacity style={{ marginLeft: 3 }} onPress={() => onRemoveOffer(offer?.id)}>
-                        <AntIcon name='closecircle' size={16} color={theme.colors.primary} />
-                      </TouchableOpacity>
+                      {!!offer?.id && (
+                        <OfferAlert offerId={offer?.id} />
+                      )}
                     </OSRow>
                     <OText size={12}>
                       - {parsePrice(offer?.summary?.discount)}
@@ -237,9 +235,9 @@ const OrderSummaryUI = (props: any) => {
                       <TouchableOpacity style={{ marginLeft: 3 }} onPress={() => setOpenTaxModal({ open: true, data: offer, type: 'offer_target_3' })}>
                         <AntIcon name='infocirlceo' size={16} color={theme.colors.primary} />
                       </TouchableOpacity>
-                      <TouchableOpacity style={{ marginLeft: 3 }} onPress={() => onRemoveOffer(offer?.id)}>
-                        <AntIcon name='closecircle' size={16} color={theme.colors.primary} />
-                      </TouchableOpacity>
+                      {!!offer?.id && (
+                        <OfferAlert offerId={offer?.id} />
+                      )}
                     </OSRow>
                     <OText size={12}>
                       - {parsePrice(offer?.summary?.discount)}
@@ -264,9 +262,9 @@ const OrderSummaryUI = (props: any) => {
                       <TouchableOpacity style={{ marginLeft: 3 }} onPress={() => setOpenTaxModal({ open: true, data: offer, type: 'offer_target_2' })}>
                         <AntIcon name='infocirlceo' size={16} color={theme.colors.primary} />
                       </TouchableOpacity>
-                      <TouchableOpacity style={{ marginLeft: 3 }} onPress={() => onRemoveOffer(offer?.id)}>
-                        <AntIcon name='closecircle' size={16} color={theme.colors.primary} />
-                      </TouchableOpacity>
+                      {!!offer?.id && (
+                        <OfferAlert offerId={offer?.id} />
+                      )}
                     </OSRow>
                     <OText size={12}>
                       - {parsePrice(offer?.summary?.discount)}
@@ -388,14 +386,6 @@ const OrderSummaryUI = (props: any) => {
               products={cart?.products}
             />
           </OModal>
-          <OAlert
-            open={confirm.open}
-            title={confirm.title}
-            content={confirm.content}
-            onAccept={confirm.handleOnAccept}
-            onCancel={() => setConfirm({ ...confirm, open: false, title: null })}
-            onClose={() => setConfirm({ ...confirm, open: false, title: null })}
-          />
         </>
       )}
     </OSContainer>

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

@@ -52,7 +52,7 @@ const SingleOrderCardUI = (props: SingleOrderCardParams) => {
   const [confirm, setConfirm] = useState<any>({ open: false, content: null, handleOnAccept: null, id: null, title: null })
   const [isPressed, setIsPressed] = useState(false)
 
-  const allowedOrderStatus = [1, 2, 5, 6, 10, 11, 12];
+  const allowedOrderStatus = [1, 2, 5, 6, 10, 11, 12, 15];
 
   const styles = StyleSheet.create({
     container: {

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

@@ -49,12 +49,12 @@ export const WalletTransactionItem = (props: any) => {
             .replace(':order_id', item?.event?.order_id ? item?.event?.order_id + ' ' : '')}
         </OText>
       </MessageBlock>
-      {/* {!!item?.description && (
+      {!!item?.description && (
         <DescriptionBlock>
           <OText>{item?.description}</OText>
         </DescriptionBlock>
       )}
-      {!!item?.code && (
+      {/* {!!item?.code && (
         <DescriptionBlock>
           <OText weight={'bold'}>
             {t('CODE', 'Code')}

package/themes/original/src/components/shared/OInput.tsx

@@ -104,7 +104,9 @@ const OInput = (props: Props): React.ReactElement => {
 					props.forwardRef && (props.forwardRef.current = e)
 				}}
 				style={{
-					color: theme?.general?.components?.inputs?.color,
+          ...(theme?.general?.components?.inputs?.color && {
+            color: theme?.general?.components?.inputs?.color
+          }),
 					...props?.inputStyle
 				}}
 				onFocus={() => setInputFocused(true)}

package/themes/original/src/types/index.tsx

@@ -629,7 +629,8 @@ export interface GoogleMapsParams {
 	isSetInputs?: boolean,
 	locations?: Array<any>,
 	setSaveLocation?: (val: boolean) => void,
-	handleToggleMap?: () => void
+	handleToggleMap?: () => void,
+	isIntGeoCoder: boolean
 }
 
 export interface HelpParams {

package/themes/original/src/utils/index.tsx

@@ -384,7 +384,7 @@ export const getOrderStatus = (s: string) => {
       key: 0,
       value: t('PENDING', 'Pending'),
       slug: 'PENDING',
-      percentage: 0.25,
+      percentage: 0.1,
       image: theme.images.order.status0,
     },
     {
@@ -412,7 +412,7 @@ export const getOrderStatus = (s: string) => {
       key: 4,
       value: t('PREPARATION_COMPLETED', 'Preparation Completed'),
       slug: 'PREPARATION_COMPLETED',
-      percentage: 0.7,
+      percentage: 0.2,
       image: theme.images.order.status4,
     },
     {
@@ -433,21 +433,21 @@ export const getOrderStatus = (s: string) => {
       key: 7,
       value: t('ACCEPTED_BY_BUSINESS', 'Accepted by business'),
       slug: 'ACCEPTED_BY_BUSINESS',
-      percentage: 0.35,
+      percentage: 0.15,
       image: theme.images.order.status7,
     },
     {
       key: 8,
       value: t('ACCEPTED_BY_DRIVER', 'Accepted by driver'),
       slug: 'ACCEPTED_BY_DRIVER',
-      percentage: 0.45,
+      percentage: 0.4,
       image: theme.images.order.status8,
     },
     {
       key: 9,
       value: t('PICK_UP_COMPLETED_BY_DRIVER', 'Pick up completed by driver'),
       slug: 'PICK_UP_COMPLETED_BY_DRIVER',
-      percentage: 0.8,
+      percentage: 0.7,
       image: theme.images.order.status9,
     },
     {
@@ -485,7 +485,7 @@ export const getOrderStatus = (s: string) => {
       key: 14,
       value: t('ORDER_NOT_READY', 'Order not ready'),
       slug: 'ORDER_NOT_READY',
-      percentage: 0,
+      percentage: 0.15,
       image: theme.images.order.status13,
     },
     {
@@ -522,7 +522,7 @@ export const getOrderStatus = (s: string) => {
         'Driver almost arrived to business',
       ),
       slug: 'DRIVER_ALMOST_ARRIVED_TO_BUSINESS',
-      percentage: 0.15,
+      percentage: 0.5,
       image: theme.images.order.status3,
     },
     {
@@ -552,21 +552,21 @@ export const getOrderStatus = (s: string) => {
         'Customer arrived to business',
       ),
       slug: 'ORDER_CUSTOMER_ARRIVED_BUSINESS',
-      percentage: 0.95,
+      percentage: 0.9,
       image: theme.images.order.status7,
     },
     {
       key: 22,
       value: t('ORDER_LOOKING_FOR_DRIVER', 'Looking for driver'),
       slug: 'ORDER_LOOKING_FOR_DRIVER',
-      percentage: 0.35,
+      percentage: 0.3,
       image: theme.images.order.status8
     },
     {
       key: 23,
       value: t('ORDER_DRIVER_ON_WAY', 'Driver on way'),
       slug: 'ORDER_DRIVER_ON_WAY',
-      percentage: 0.45,
+      percentage: 0.8,
       image: theme.images.order.status8
     }
   ];
@@ -614,7 +614,7 @@ export const lightenDarkenColor = (color: any) => {
   }
 }
 
-export const vibrateApp = (impact ?: string) => {
+export const vibrateApp = (impact?: string) => {
   const options = {
     enableVibrateFallback: true,
     ignoreAndroidSystemSettings: false