ordering-ui-react-native 0.17.98 → 0.17.99-release

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

@@ -0,0 +1,20 @@
+import styled from 'styled-components/native';
+
+export const DateContainer = styled.View`
+  display: flex;
+  align-items: center;
+  margin-bottom: 20px;
+
+  input {
+    border-radius: 20px;
+    width: 140px;
+    outline: none;
+    padding: 10px 15px;
+    border: 1px solid #E9ECEF;
+  }
+
+  .react-datepicker__triangle {
+    transform: translate(40px, 0px) !important;
+  }
+
+`

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

@@ -23,7 +23,9 @@ const DriverTipsUI = (props: any) => {
 		driverTip,
 		driverTipsOptions,
 		isMulti,
+		isLoading,
 		cart,
+		carts,
 		isDriverTipUseCustom,
 		handlerChangeOption,
 		isFixedPrice
@@ -64,6 +66,10 @@ const DriverTipsUI = (props: any) => {
 		setvalue(val)
 	}
 
+	const multiCartTipsAmmout = carts?.reduce((total: any, cart: any) => {
+		return total + parseFloat(cart?.driver_tip || 0)
+	}, 0)
+
 	return (
 		<DTContainer>
 			<DTLabel>
@@ -74,8 +80,10 @@ const DriverTipsUI = (props: any) => {
 					<TouchableOpacity
 						key={i}
 						onPress={() => {
-							handlerChangeOption(option)
-							setCustomTip(false)
+							if (!isLoading) {
+								handlerChangeOption(option)
+								setCustomTip(false)
+							}
 						}}
 					>
 						<DTCard
@@ -90,7 +98,7 @@ const DriverTipsUI = (props: any) => {
 				))}
 				{isDriverTipUseCustom && (
 					<TouchableOpacity
-						onPress={() => setCustomTip(true)}
+						onPress={() => { !isLoading && setCustomTip(true) }}
 					>
 						<DTCard
 							style={style.semicircle}
@@ -138,7 +146,7 @@ const DriverTipsUI = (props: any) => {
 					style={{ marginTop: 10, textAlign: 'center' }}
 				>
 					{t('CURRENT_DRIVER_TIP_AMOUNT', 'Current driver tip amount')}{!isFixedPrice &&
-						` (${driverTip}%)`}: {isFixedPrice ? parsePrice(driverTip) : parsePrice(cart?.driver_tip)}
+						` (${driverTip}%)`}: {isFixedPrice ? parsePrice(multiCartTipsAmmout ?? driverTip) : parsePrice(multiCartTipsAmmout ?? cart?.driver_tip)}
 				</OText>
 			)}
 		</DTContainer>

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

@@ -1,6 +1,8 @@
 import styled from 'styled-components/native'
 
-export const Container = styled.View``
+export const Container = styled.View`
+  margin-bottom: 20px;
+`
 
 export const FacebookButton = styled.TouchableOpacity`
   background-color: #FFFFFF;

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

@@ -14,8 +14,7 @@ import {
 
 export const Favorite = (props: any) => {
   const {
-    navigation,
-    franchiseId
+    navigation
   } = props
   const [, t] = useLanguage()
   const theme = useTheme()
@@ -73,7 +72,6 @@ export const Favorite = (props: any) => {
           originalURL='business'
           location={`${orderState.options?.address?.location?.lat},${orderState.options?.address?.location?.lng}`}
           propsToFetch={['id', 'name', 'header', 'logo', 'location', 'address', 'ribbon', 'timezone', 'schedule', 'open', 'delivery_price', 'distance', 'delivery_time', 'pickup_time', 'reviews', 'featured', 'offers', 'food', 'laundry', 'alcohol', 'groceries', 'slug']}
-          franchiseId={franchiseId}
         />
       )}
       {tabSelected === 'products' && (
@@ -82,7 +80,6 @@ export const Favorite = (props: any) => {
           originalURL='products'
           onNavigationRedirect={onRedirect}
           isProduct
-          franchiseId={franchiseId}
         />
       )}
       {tabSelected === 'orders' && (
@@ -91,7 +88,6 @@ export const Favorite = (props: any) => {
           favoriteURL='favorite_orders'
           originalURL='orders'
           isOrder
-          franchiseId={franchiseId}
         />
       )}
     </Container>

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);
@@ -31,7 +32,7 @@ export const GPSButton = (props: any) => {
             break
           }
         }
-        let data = null
+        let data : any
         const details = {
           geometry: { location: { lat: pos.latitude, lng: pos.longitude } }
         }
@@ -68,14 +69,15 @@ export const GPSButton = (props: any) => {
         setLoading(false);
         console.log(`ERROR(${err.code}): ${err.message}`)
       }, {
-        enableHighAccuracy: true, timeout: 15000, maximumAge: 10000
+        enableHighAccuracy: false, timeout: 30000, maximumAge: 1000
       })
     }
   }
 
   useEffect(() => {
+    if (isIntGeoCoder) return
     Geocoder.init(apiKey);
-  }, [])
+  }, [isIntGeoCoder])
 
   return (
     <GpsButtonStyle

package/themes/original/src/components/GiftCard/GiftCardUI/index.tsx

@@ -56,7 +56,7 @@ export const GiftCardUI =  React.memo((props: any) => {
       <View style={style.actionWrapper}>
         <OButton
           onClick={() => setOpenModal('purchase')}
-          text={t('PURCHASE_GIFT_CARD', 'Purchase gift card')}
+          text={t('PURCHASE', 'Purchase')}
           bgColor={theme.colors.primary}
           borderColor={theme.colors.primary}
           textStyle={{ color: 'white', fontSize: 13 }}
@@ -66,7 +66,7 @@ export const GiftCardUI =  React.memo((props: any) => {
 
         <OButton
           onClick={() => setOpenModal('redeem')}
-          text={t('REDEEM_GIFT_CARD', 'Redeem gift card')}
+          text={t('REDEEM', 'Redeem')}
           bgColor={theme.colors.lightPrimary}
           borderColor={theme.colors.lightPrimary}
           textStyle={{ color: theme.colors.primary, fontSize: 13 }}
@@ -79,13 +79,18 @@ export const GiftCardUI =  React.memo((props: any) => {
 				open={openModal === 'purchase'}
 				onClose={() => setOpenModal(null)}
 				entireModal
+        customClose
 			>
-				<PurchaseGiftCard handleCustomGoToCheckout={handleCustomGoToCheckout} />
+				<PurchaseGiftCard
+          handleCustomGoToCheckout={handleCustomGoToCheckout}
+          onClose={() => setOpenModal(null)}
+        />
 			</OModal>
       <OModal
 				open={openModal === 'redeem'}
 				onClose={() => setOpenModal(null)}
 				entireModal
+        customClose
 			>
 				<RedeemGiftCard
           onClose={() => setOpenModal(null)}

package/themes/original/src/components/GiftCard/PurchaseGiftCard/index.tsx

@@ -3,10 +3,11 @@ import {
   useLanguage,
   PurchaseGiftCard as PurchaseGiftCardController
 } from 'ordering-components/native'
-import { StyleSheet, View, TouchableOpacity } from 'react-native'
+import { StyleSheet, View, TouchableOpacity, ScrollView, Platform } from 'react-native'
 import { Fade, Placeholder, PlaceholderLine } from 'rn-placeholder';
 import { useTheme } from 'styled-components/native';
 import { OText, OButton, OIcon } from '../../shared';
+import AntDesignIcon from 'react-native-vector-icons/AntDesign'
 
 import {
   Container
@@ -17,7 +18,8 @@ const PurchaseGiftCardUI = (props: any) => {
     productsListState,
     selectedProduct,
     setSelectedProduct,
-    handleAccept
+    handleAccept,
+    onClose
   } = props
 
   const theme = useTheme()
@@ -42,9 +44,44 @@ const PurchaseGiftCardUI = (props: any) => {
 
   return (
     <Container>
-      <OText color={theme.colors.textNormal} weight='bold' size={20} mBottom={40}>{t('PURCHASE_GIFT_CARD', 'Purchase gift card')}</OText>
+      <View style={{
+        marginBottom: 40,
+        marginTop: Platform.OS === 'ios' ? 30 : 50,
+        display: 'flex',
+        flexDirection: 'row',
+        alignItems: 'center',
+      }}>
+        <OButton
+          imgLeftStyle={{ width: 18 }}
+          imgRightSrc={null}
+          style={{
+            borderWidth: 0,
+            width: 26,
+            height: 26,
+            backgroundColor: '#FFF',
+            borderColor: '#FFF',
+            shadowColor: '#FFF',
+            paddingLeft: 0,
+            paddingRight: 0,
+          }}
+          onClick={onClose}
+          icon={AntDesignIcon}
+          iconProps={{
+            name: 'arrowleft',
+            size: 26,
+            style: {
+              color: theme.colors.textNormal
+            }
+          }}
+        />
+        <OText color={theme.colors.textNormal} weight='bold' size={20} mLeft={10}>{t('PURCHASE_GIFT_CARD', 'Purchase gift card')}</OText>
+      </View>
       <OText color={theme.colors.textNormal} size={14}>{t('SELECT_ONE_OPTION', 'Select one option')}</OText>
-      <View>
+      <ScrollView
+        contentContainerStyle={{
+          flexGrow: 1
+        }}
+      >
         {productsListState.loading && (
           [...Array(5).keys()].map(i => (
             <View key={i} style={style.itemStyle}>
@@ -72,7 +109,7 @@ const PurchaseGiftCardUI = (props: any) => {
             <OText color={theme.colors.textNormal} size={14}>{product.name}</OText>
           </TouchableOpacity>
         ))}
-      </View>
+      </ScrollView>
       <OButton
         onClick={() => handleAccept()}
         text={t('ACCEPT', 'Accept')}

package/themes/original/src/components/GiftCard/PurchaseGiftCard/styles.tsx

@@ -3,4 +3,6 @@ import styled from 'styled-components/native'
 export const Container = styled.View`
   width: 100%;
   padding-horizontal: 40px;
+  flex: 1;
+  padding-bottom: 30px;
 `

package/themes/original/src/components/GiftCard/RedeemGiftCard/index.tsx

@@ -1,11 +1,12 @@
-import React, { useEffect } from 'react'
+import React, { useEffect, useState } from 'react'
 import {
   useLanguage, useUtils, RedeemGiftCard as RedeemGiftCardController
 } from 'ordering-components/native'
 import { useForm, Controller } from 'react-hook-form'
-import { StyleSheet, View, Alert } from 'react-native';
+import { StyleSheet, View, Alert, Platform } from 'react-native';
 import { useTheme } from 'styled-components/native';
 import { OText, OButton, OInput } from '../../shared';
+import AntDesignIcon from 'react-native-vector-icons/AntDesign'
 
 import {
   Container,
@@ -26,6 +27,8 @@ const RedeemGiftCardUI = (props: any) => {
   const { handleSubmit, control, errors } = useForm()
   const [{ parsePrice }] = useUtils()
 
+  const [codeValue, setCodeValue] = useState('')
+
   const style = StyleSheet.create({
     btnStyle: {
       borderRadius: 7.6,
@@ -43,6 +46,14 @@ const RedeemGiftCardUI = (props: any) => {
     handleApply(values)
   }
 
+  const handleChangeCode = (string: any) => {
+    string = string.replace(/-/g, '')
+    if (!string) return
+    const codeSlices = string.match(/.{1,4}/g)
+    string = codeSlices.join('-')
+    setCodeValue(string)
+  }
+
   useEffect(() => {
     if (Object.keys(errors).length > 0) {
       const list = Object.values(errors)
@@ -83,17 +94,51 @@ const RedeemGiftCardUI = (props: any) => {
     <Container>
       {!redeemedGiftCard ? (
         <View>
-          <OText color={theme.colors.textNormal} weight='bold' size={20} mBottom={40}>{t('REDEEM_GIFT_CARD', 'Redeem a gift card')}</OText>
+          <View style={{
+            marginBottom: 40,
+            marginTop: Platform.OS === 'ios' ? 30 : 50,
+            display: 'flex',
+            flexDirection: 'row',
+            alignItems: 'center',
+          }}>
+            <OButton
+              imgLeftStyle={{ width: 18 }}
+              imgRightSrc={null}
+              style={{
+                borderWidth: 0,
+                width: 26,
+                height: 26,
+                backgroundColor: '#FFF',
+                borderColor: '#FFF',
+                shadowColor: '#FFF',
+                paddingLeft: 0,
+                paddingRight: 0,
+              }}
+              onClick={onClose}
+              icon={AntDesignIcon}
+              iconProps={{
+                name: 'arrowleft',
+                size: 26,
+                style: {
+                  color: theme.colors.textNormal
+                }
+              }}
+            />
+              <OText color={theme.colors.textNormal} weight='bold' size={20} mLeft={10}>{t('REDEEM_GIFT_CARD', 'Redeem a gift card')}</OText>
+          </View>
           <FormController>
             <OText color={theme.colors.textNormal} size={14} mBottom={10}>{t('GIFT_CARD_CODE', 'Gift card code')}</OText>
             <Controller
               control={control}
               render={({ onChange, value }: any) => (
               <OInput
-                placeholder='0000 0000'
-                value={value}
-                onChange={(val: any) => onChange(val)}
-                autoCapitalize='none'
+                placeholder='XXXX-XXXX-XXXX-XXXX'
+                value={codeValue}
+                onChange={(val: any) => {
+                  onChange(val)
+                  handleChangeCode(val)
+                }}
+                autoCapitalize='characters'
                 autoCorrect={false}
                 blurOnSubmit={false}
                 style={style.inputStyle}
@@ -143,7 +188,38 @@ const RedeemGiftCardUI = (props: any) => {
         </View>
       ) : (
         <>
-          <OText color={theme.colors.textNormal} weight='bold' size={20} mBottom={40}>{t('GIFT_CARD', 'Gift card')}</OText>
+          <View style={{
+            marginBottom: 40,
+            marginTop: Platform.OS === 'ios' ? 30 : 50,
+            display: 'flex',
+            flexDirection: 'row',
+            alignItems: 'center',
+          }}>
+            <OButton
+              imgLeftStyle={{ width: 18 }}
+              imgRightSrc={null}
+              style={{
+                borderWidth: 0,
+                width: 26,
+                height: 26,
+                backgroundColor: '#FFF',
+                borderColor: '#FFF',
+                shadowColor: '#FFF',
+                paddingLeft: 0,
+                paddingRight: 0,
+              }}
+              onClick={onClose}
+              icon={AntDesignIcon}
+              iconProps={{
+                name: 'arrowleft',
+                size: 26,
+                style: {
+                  color: theme.colors.textNormal
+                }
+              }}
+            />
+              <OText color={theme.colors.textNormal} weight='bold' size={20} mLeft={10}>{t('GIFT_CARD', 'Gift card')}</OText>
+          </View>
           <View>
             <OText color={theme.colors.textNormal} size={14} mBottom={6}>{t('TYPE', 'Type')}: {redeemedGiftCard?.type}</OText>
             <OText color={theme.colors.textNormal} size={14} mBottom={6}>{t('AMOUNT', 'Amount')}: {parsePrice(redeemedGiftCard?.amount)}</OText>

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

@@ -1,7 +1,7 @@
 import styled from 'styled-components/native'
 
 export const Container = styled.View`
-	margin-vertical: 20px;
+	margin-bottom: 20px;
 `
 
 export const GoogleButton = styled.TouchableOpacity`

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

@@ -1,6 +1,6 @@
 import React, { useState, useEffect, useRef } from 'react'
 import { Dimensions, StyleSheet, View, Platform } from 'react-native';
-import MapView, { PROVIDER_DEFAULT, PROVIDER_GOOGLE, Marker, Region, } from 'react-native-maps'
+import MapView, { PROVIDER_DEFAULT, PROVIDER_GOOGLE, Marker, Region, Polygon, Circle } from 'react-native-maps'
 import Geocoder from 'react-native-geocoding';
 import { useLanguage, useConfig } from 'ordering-components/native'
 import { GoogleMapsParams } from '../../types';
@@ -18,7 +18,10 @@ export const GoogleMap = (props: GoogleMapsParams) => {
     saveLocation,
     setSaveLocation,
     handleToggleMap,
-    locations
+    locations,
+    isIntGeoCoder,
+    businessZones,
+    delta
   } = props
 
   const [, t] = useLanguage()
@@ -29,8 +32,8 @@ export const GoogleMap = (props: GoogleMapsParams) => {
   const [region, setRegion] = useState({
     latitude: location.lat,
     longitude: location.lng,
-    latitudeDelta: 0.0010,
-    longitudeDelta: 0.0010 * ASPECT_RATIO
+    latitudeDelta: delta ?? 0.0010,
+    longitudeDelta: (delta ?? 0.0010) * ASPECT_RATIO
   })
   const [MARKERS, SETMARKERS] = useState(locations)
   let mapRef = useRef<any>(null)
@@ -43,7 +46,20 @@ export const GoogleMap = (props: GoogleMapsParams) => {
     ERROR_MAX_LIMIT_LOCATION: `Sorry, You can only set the position to ${maxLimitLocation}m`
   }
 
-  const geocodePosition = (pos: { latitude: number, longitude: number }) => {
+  const units: any = {
+    mi: 1609,
+    km: 1000
+  }
+
+  const types: any = [1, 2, 5]
+
+  const fillStyles = {
+    fillColor: 'rgba(44, 123, 229, 0.3)',
+    strokeColor: 'rgba(44, 123, 229, 1)',
+    strokeWidth: 2
+  }
+
+  const geocodePosition = (pos: { latitude: number, longitude: number }, isMovingRegion ?: boolean) => {
     Geocoder.from({
       latitude: pos.latitude,
       longitude: pos.longitude
@@ -68,7 +84,9 @@ export const GoogleMap = (props: GoogleMapsParams) => {
         }
         handleChangeAddressMap && handleChangeAddressMap(address, details)
         setSaveLocation && setSaveLocation(false)
-        handleToggleMap && handleToggleMap()
+        if(!isMovingRegion){
+          handleToggleMap && handleToggleMap()
+        }
       } else {
         setMapErrors && setMapErrors('ERROR_NOT_FOUND_ADDRESS')
       }
@@ -92,6 +110,9 @@ export const GoogleMap = (props: GoogleMapsParams) => {
     const _maxLimitLocation = typeof maxLimitLocation === 'string' ? parseInt(maxLimitLocation, 10) : maxLimitLocation
 
     if (distance <= _maxLimitLocation) {
+      if (!aproxEqual(curPos.latitude, center.lat) || !aproxEqual(curPos.longitude, center.lng)){
+        geocodePosition(curPos, true)
+      }
       setMarkerPosition(curPos)
       setRegion({ ...region, longitude: curPos.longitude, latitude: curPos.latitude })
     } else {
@@ -100,6 +121,10 @@ export const GoogleMap = (props: GoogleMapsParams) => {
     }
   }
 
+  const aproxEqual = (n1 : number, n2 : number, epsilon = 0.000001) => {
+    return Math.abs(n1 - n2) < epsilon
+  }
+
   const calculateDistance = (pointA: { lat: number, lng: number }, pointB: { latitude: number, longitude: number }) => {
 
     const lat1 = pointA.lat;
@@ -152,8 +177,9 @@ export const GoogleMap = (props: GoogleMapsParams) => {
   }
 
   useEffect(() => {
+    if (isIntGeoCoder) return
     Geocoder.init(googleMapsApiKey)
-  }, [])
+  }, [isIntGeoCoder])
 
   useEffect(() => {
     mapRef.current.animateToRegion({
@@ -219,6 +245,36 @@ export const GoogleMap = (props: GoogleMapsParams) => {
             title={markerTitle || t('YOUR_LOCATION', 'Your Location')}
           />
         )}
+        {businessZones?.length > 0 && businessZones.filter((item: any) => types.includes(item?.type)).map((businessZone: any, i: number) => (
+          <React.Fragment key={i}>
+            {businessZone?.type === 2 && Array.isArray(businessZone?.data) && (
+              <Polygon
+                coordinates={businessZone?.data.map((item: any) => ({ latitude: item.lat, longitude: item.lng}))}
+                fillColor={fillStyles.fillColor}
+                strokeColor={fillStyles.strokeColor}
+                strokeWidth={fillStyles.strokeWidth}
+              />
+            )}
+            {(businessZone.type === 1 && businessZone?.data?.center && businessZone?.data?.radio) && (
+              <Circle
+                center={{ latitude: businessZone?.data?.center.lat, longitude: businessZone?.data?.center.lng}}
+                radius={businessZone?.data.radio * 1000}
+                fillColor={fillStyles.fillColor}
+                strokeColor={fillStyles.strokeColor}
+                strokeWidth={fillStyles.strokeWidth}
+              />
+            )}
+            {(businessZone.type === 5 && businessZone?.data?.distance) && (
+              <Circle
+                center={{ latitude: center.lat, longitude: center.lng}}
+                radius={businessZone?.data.distance * units[businessZone?.data?.unit]}
+                fillColor={fillStyles.fillColor}
+                strokeColor={fillStyles.strokeColor}
+                strokeWidth={fillStyles.strokeWidth}
+              />
+            )}
+          </React.Fragment>
+        ))}
       </MapView>
       <Alert
         open={alertState.open}

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

@@ -1,5 +1,5 @@
-import React from 'react';
-import { useLanguage, useOrder } from 'ordering-components/native';
+import React, { useEffect } from 'react';
+import { useLanguage, useOrder, useConfig } from 'ordering-components/native';
 import { useTheme } from 'styled-components/native';
 import { StyleSheet, View } from 'react-native';
 import { OButton, OIcon, OText } from '../shared';
@@ -8,12 +8,21 @@ import { TouchableOpacity } from 'react-native-gesture-handler';
 import { useWindowDimensions, Platform } from 'react-native';
 
 export const Home = (props: any) => {
-	const { onNavigationRedirect } = props;
+	const { onNavigationRedirect, businessSlug } = props;
 	const { width, height } = useWindowDimensions();
 	const [, t] = useLanguage();
 	const [orderState] = useOrder();
+	const [{ configs }] = useConfig()
 
 	const theme = useTheme();
+	const unaddressedTypes = configs?.unaddressed_order_types_allowed?.value.split('|').map((value: any) => Number(value)) || []
+	const isAllowUnaddressOrderType = unaddressedTypes.includes(orderState?.options?.type)
+
+	useEffect(() => {
+		if (isAllowUnaddressOrderType) {
+			onNavigationRedirect(!!businessSlug ? 'Business' : 'BusinessList')
+		}
+	}, [isAllowUnaddressOrderType])
 
 	return (
 		<View style={styles.container}>
@@ -60,7 +69,7 @@ export const Home = (props: any) => {
 					style={{ ...styles.textLink, marginTop: 12 }}
 					onPress={() =>
 						orderState?.options?.address?.address
-							? onNavigationRedirect('BusinessList', { isGuestUser: true })
+							? onNavigationRedirect(!!businessSlug ? 'Business' : 'BusinessList', { isGuestUser: true })
 							: onNavigationRedirect('AddressForm', { isGuestUser: true })
 					}>
 					<OText weight="normal" size={18} color={theme.colors.white}>

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

@@ -129,7 +129,8 @@ export const LastOrder = (props: OrdersOptionParams) => {
 			initialPage: 1,
 			pageSize: 3,
 			controlType: 'infinity'
-		}
+		},
+		noGiftCardOrders: true
 	}
 
 	return <OrderList {...MyOrdersProps} />

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

@@ -117,7 +117,8 @@ export const LastOrders = (props: any) => {
       initialPage: 1,
       pageSize: 3,
       controlType: 'infinity'
-    }
+    },
+    noGiftCardOrders: true
   }
   return <OrderListController {...helpProps} />
 }