ordering-ui-react-native 0.17.73 → 0.17.74-release

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

@@ -22,17 +22,22 @@ const DriverTipsUI = (props: any) => {
 	const {
 		driverTip,
 		driverTipsOptions,
-		optionSelected,
-		isFixedPrice,
+		isMulti,
+		isLoading,
+		cart,
+		carts,
 		isDriverTipUseCustom,
-		handlerChangeOption
+		handlerChangeOption,
+		isFixedPrice
 	} = props;
 
 	const [{ parsePrice }] = useUtils();
+	const theme = useTheme();
 	const [, t] = useLanguage();
 	const [{ configs }] = useConfig();
-
-	const theme = useTheme();
+	const [customTip, setCustomTip] = useState((!isMulti && isDriverTipUseCustom && !driverTipsOptions.includes(driverTip)) ?? false)
+	const currentTip = customTip ? parseFloat(driverTip || 0) > 0 : (!customTip && !driverTipsOptions.includes(driverTip) && parseFloat(driverTip || 0)) > 0
+	const [value, setvalue] = useState('');
 
 	const style = StyleSheet.create({
 		semicircle: {
@@ -48,53 +53,65 @@ const DriverTipsUI = (props: any) => {
 		}
 	})
 
-	const [value, setvalue] = useState('');
-
-	const placeholderCurrency = (configs?.currency_position?.value || 'left') === 'left'
+	const placeholderCurrency = !isFixedPrice ? `0%` : (configs?.currency_position?.value || 'left') === 'left'
 		? `${configs?.format_number_currency?.value}0`
 		: `0${configs?.format_number_currency?.value}`
 
 	const handleChangeDriverTip = (val: any) => {
 		const tip = Number(val)
 		if ((isNaN(tip) || tip < 0)) {
-		  setvalue(value)
-		  return
+			setvalue(value)
+			return
 		}
 		setvalue(val)
 	}
-	
+
+	const multiCartTipsAmmout = carts?.reduce((total: any, cart: any) => {
+		return total + parseFloat(cart?.driver_tip || 0)
+	}, 0)
+
 	return (
 		<DTContainer>
 			<DTLabel>
 				{t('CUSTOM_DRIVER_TIP_MESSAGE', '100% of these tips go directly to your driver')}
 			</DTLabel>
 			<DTWrapperTips>
-				{!isDriverTipUseCustom && driverTipsOptions.map((option: any, i: number) => (
+				{driverTipsOptions.map((option: any, i: number) => (
 					<TouchableOpacity
 						key={i}
-						onPress={() => handlerChangeOption(option)}
+						onPress={() => {
+							if (!isLoading) {
+								handlerChangeOption(option)
+								setCustomTip(false)
+							}
+						}}
 					>
 						<DTCard
 							style={style.semicircle}
-							isActive={option === optionSelected}
+							isActive={(option === driverTip && !customTip)}
 						>
-							<OText size={12} numberOfLines={2} color={option === optionSelected ? '#FFF' : theme.colors.textSecondary}>
+							<OText size={12} numberOfLines={2} color={(option === driverTip && !customTip) ? '#FFF' : theme.colors.textSecondary}>
 								{`${isFixedPrice ? parsePrice(option) : `${option}%`}`}
 							</OText>
 						</DTCard>
 					</TouchableOpacity>
 				))}
+				{isDriverTipUseCustom && (
+					<TouchableOpacity
+						onPress={() => { !isLoading && setCustomTip(true) }}
+					>
+						<DTCard
+							style={style.semicircle}
+							isActive={customTip}
+						>
+							<OText size={12} numberOfLines={2} color={customTip ? '#FFF' : theme.colors.textSecondary}>
+								{t('CUSTOM_TIP', 'Custom')}
+							</OText>
+						</DTCard>
+					</TouchableOpacity>
+				)}
 			</DTWrapperTips>
-			{(!isDriverTipUseCustom && !driverTipsOptions.includes(driverTip) && driverTip > 0) && (
-				<OText
-					color={theme.colors.error}
-					size={16}
-					style={{ marginTop: 10, textAlign: 'center' }}
-				>
-					{t('CUSTOM_DRIVER_TIP_AMOUNT', 'The driver\'s current tip comes from a custom option')}
-				</OText>
-			)}
-			{isDriverTipUseCustom && (
+			{customTip && (
 				<DTForm>
 					<DTWrapperInput>
 						<OInput
@@ -120,17 +137,18 @@ const DriverTipsUI = (props: any) => {
 							}}
 						/>
 					</DTWrapperInput>
-					{parseFloat(driverTip || 0) > 0 && (
-						<OText
-							color={theme.colors.error}
-							size={16}
-							style={{ marginTop: 10, textAlign: 'center' }}
-						>
-							{t('CURRENT_DRIVER_TIP_AMOUNT', 'Current driver tip amount')}: {parsePrice(driverTip)}
-						</OText>
-					)}
 				</DTForm>
 			)}
+			{currentTip && (
+				<OText
+					color={theme.colors.primary}
+					size={16}
+					style={{ marginTop: 10, textAlign: 'center' }}
+				>
+					{t('CURRENT_DRIVER_TIP_AMOUNT', 'Current driver tip amount')}{!isFixedPrice &&
+						` (${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()
@@ -36,7 +35,7 @@ export const Favorite = (props: any) => {
 
   return (
     <Container
-      pdng={Platform.OS === 'ios' ? '20px' : '30px'}
+      pdng={Platform.OS === 'ios' ? '10px' : '20px'}
     >
       <NavBar
         title={t('FAVORITE', 'Favorite')}
@@ -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/FavoriteList/index.tsx

@@ -16,7 +16,7 @@ import { BusinessController } from '../BusinessController';
 import { SingleProductCard } from '../SingleProductCard';
 import { NotFoundSource } from '../NotFoundSource';
 import moment from 'moment';
-
+import { getOrderStatus } from '../../utils'
 
 const FavoriteListUI = (props: FavoriteParams) => {
   const {
@@ -40,40 +40,6 @@ const FavoriteListUI = (props: FavoriteParams) => {
 
   const pastOrders = [1, 2, 5, 6, 10, 11, 12, 15, 16, 17]
 
-  const getOrderStatus = (s: any) => {
-    const status = parseInt(s)
-    const orderStatus = [
-      { key: 0, value: t('PENDING', theme?.defaultLanguages?.PENDING || 'Pending') },
-      { key: 1, value: t('COMPLETED', theme?.defaultLanguages?.COMPLETED || 'Completed') },
-      { key: 2, value: t('REJECTED', theme?.defaultLanguages?.REJECTED || 'Rejected') },
-      { key: 3, value: t('DRIVER_IN_BUSINESS', theme?.defaultLanguages?.DRIVER_IN_BUSINESS || 'Driver in business') },
-      { key: 4, value: t('PREPARATION_COMPLETED', theme?.defaultLanguages?.PREPARATION_COMPLETED || 'Preparation Completed') },
-      { key: 5, value: t('REJECTED_BY_BUSINESS', theme?.defaultLanguages?.REJECTED_BY_BUSINESS || 'Rejected by business') },
-      { key: 6, value: t('REJECTED_BY_DRIVER', theme?.defaultLanguages?.REJECTED_BY_DRIVER || 'Rejected by Driver') },
-      { key: 7, value: t('ACCEPTED_BY_BUSINESS', theme?.defaultLanguages?.ACCEPTED_BY_BUSINESS || 'Accepted by business') },
-      { key: 8, value: t('ACCEPTED_BY_DRIVER', theme?.defaultLanguages?.ACCEPTED_BY_DRIVER || 'Accepted by driver') },
-      { key: 9, value: t('PICK_UP_COMPLETED_BY_DRIVER', theme?.defaultLanguages?.PICK_UP_COMPLETED_BY_DRIVER || 'Pick up completed by driver') },
-      { key: 10, value: t('PICK_UP_FAILED_BY_DRIVER', theme?.defaultLanguages?.PICK_UP_FAILED_BY_DRIVER || 'Pick up Failed by driver') },
-      { key: 11, value: t('DELIVERY_COMPLETED_BY_DRIVER', theme?.defaultLanguages?.DELIVERY_COMPLETED_BY_DRIVER || 'Delivery completed by driver') },
-      { key: 12, value: t('DELIVERY_FAILED_BY_DRIVER', theme?.defaultLanguages?.DELIVERY_FAILED_BY_DRIVER || 'Delivery Failed by driver') },
-      { key: 13, value: t('PREORDER', theme?.defaultLanguages?.PREORDER || 'PreOrder') },
-      { key: 14, value: t('ORDER_NOT_READY', theme?.defaultLanguages?.ORDER_NOT_READY || 'Order not ready') },
-      { key: 15, value: t('ORDER_PICKEDUP_COMPLETED_BY_CUSTOMER', theme?.defaultLanguages?.ORDER_PICKEDUP_COMPLETED_BY_CUSTOMER || 'Order picked up completed by customer') },
-      { key: 16, value: t('ORDER_STATUS_CANCELLED_BY_CUSTOMER', theme?.defaultLanguages?.ORDER_STATUS_CANCELLED_BY_CUSTOMER || 'Order cancelled by customer') },
-      { key: 17, value: t('ORDER_NOT_PICKEDUP_BY_CUSTOMER', theme?.defaultLanguages?.ORDER_NOT_PICKEDUP_BY_CUSTOMER || 'Order not picked up by customer') },
-      { key: 18, value: t('ORDER_DRIVER_ALMOST_ARRIVED_BUSINESS', theme?.defaultLanguages?.ORDER_DRIVER_ALMOST_ARRIVED_BUSINESS || 'Driver almost arrived to business') },
-      { key: 19, value: t('ORDER_DRIVER_ALMOST_ARRIVED_CUSTOMER', theme?.defaultLanguages?.ORDER_DRIVER_ALMOST_ARRIVED_CUSTOMER || 'Driver almost arrived to customer') },
-      { key: 20, value: t('ORDER_CUSTOMER_ALMOST_ARRIVED_BUSINESS', theme?.defaultLanguages?.ORDER_CUSTOMER_ALMOST_ARRIVED_BUSINESS || 'Customer almost arrived to business') },
-      { key: 21, value: t('ORDER_CUSTOMER_ARRIVED_BUSINESS', theme?.defaultLanguages?.ORDER_CUSTOMER_ARRIVED_BUSINESS || 'Customer arrived to business') },
-      { key: 22, value: t('ORDER_LOOKING_FOR_DRIVER', theme?.defaultLanguages?.ORDER_LOOKING_FOR_DRIVER || 'Looking for driver') },
-      { key: 23, value: t('ORDER_DRIVER_ON_WAY', theme?.defaultLanguages?.ORDER_DRIVER_ON_WAY || 'Driver on way') }
-    ]
-
-    const objectStatus = orderStatus.find((o) => o.key === status)
-
-    return objectStatus && objectStatus
-  }
-
   const onProductClick = (product: any) => {
     const categoryId = product?.category?.id
     const businessId = product?.category?.business?.id

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

@@ -22,8 +22,7 @@ const FloatingButtonUI = (props: FloatingButtonParams) => {
 		disabled,
 		isSecondaryBtn,
 		handleEmpty,
-		iosBottom,
-		hideButton
+		iosBottom
 	} = props;
 
 	const [, t] = useLanguage();
@@ -78,17 +77,15 @@ const FloatingButtonUI = (props: FloatingButtonParams) => {
 					</View>
 				)}
 			</View>
-			{!hideButton && (
-				<Button
-					style={[isSecondaryBtn ? styles.secondaryBtn : styles.primaryBtn]}
-					onPress={handleButtonClick}
-					disabled={disabled}
-				>
-					<OText color={isSecondaryBtn ? theme.colors.textSecondary : theme.colors.white} lineHeight={24} size={14} weight={'400'}>
-						{btnText}
-					</OText>
-				</Button>
-			)}
+			<Button
+				style={[isSecondaryBtn ? styles.secondaryBtn : styles.primaryBtn]}
+				onPress={handleButtonClick}
+				disabled={disabled}
+			>
+				<OText color={isSecondaryBtn ? theme.colors.textSecondary : theme.colors.white} lineHeight={24} size={14} weight={'400'}>
+					{btnText}
+				</OText>
+			</Button>
 		</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/PurchaseGiftCard/index.tsx

@@ -3,7 +3,7 @@ import {
   useLanguage,
   PurchaseGiftCard as PurchaseGiftCardController
 } from 'ordering-components/native'
-import { StyleSheet, View, TouchableOpacity } from 'react-native'
+import { StyleSheet, View, TouchableOpacity, ScrollView } from 'react-native'
 import { Fade, Placeholder, PlaceholderLine } from 'rn-placeholder';
 import { useTheme } from 'styled-components/native';
 import { OText, OButton, OIcon } from '../../shared';
@@ -44,7 +44,11 @@ const PurchaseGiftCardUI = (props: any) => {
     <Container>
       <OText color={theme.colors.textNormal} weight='bold' size={20} mBottom={40}>{t('PURCHASE_GIFT_CARD', 'Purchase gift card')}</OText>
       <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 +76,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,4 +1,4 @@
-import React, { useEffect } from 'react'
+import React, { useEffect, useState } from 'react'
 import {
   useLanguage, useUtils, RedeemGiftCard as RedeemGiftCardController
 } from 'ordering-components/native'
@@ -26,6 +26,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 +45,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)
@@ -90,9 +100,12 @@ const RedeemGiftCardUI = (props: any) => {
               control={control}
               render={({ onChange, value }: any) => (
               <OInput
-                placeholder='0000 0000'
-                value={value}
-                onChange={(val: any) => onChange(val)}
+                placeholder='XXXX-XXXX-XXXX-XXXX'
+                value={codeValue}
+                onChange={(val: any) => {
+                  onChange(val)
+                  handleChangeCode(val)
+                }}
                 autoCapitalize='none'
                 autoCorrect={false}
                 blurOnSubmit={false}
@@ -148,8 +161,8 @@ const RedeemGiftCardUI = (props: any) => {
             <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>
             <OText color={theme.colors.textNormal} size={14} mBottom={6}>{t('FROM', 'From')}: {redeemedGiftCard?.receiver?.name} {redeemedGiftCard?.receiver?.lastname}</OText>
-            <OText color={theme.colors.textNormal} size={14} mBottom={6}>{t('TITLE', 'Title')}: {redeemedGiftCard?.title}</OText>
-            <OText color={theme.colors.textNormal} size={14} mBottom={6}>{t('MESSAGES', 'Messages')}: {redeemedGiftCard?.message}</OText>
+            {!!redeemedGiftCard?.title && <OText color={theme.colors.textNormal} size={14} mBottom={6}>{t('TITLE', 'Title')}: {redeemedGiftCard?.title}</OText>}
+            {!!redeemedGiftCard?.message && <OText color={theme.colors.textNormal} size={14} mBottom={6}>{t('MESSAGES', 'Messages')}: {redeemedGiftCard?.message}</OText>}
             <OButton
               onClick={() => {
                 setRedeemedGiftCard(null)

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,9 @@ export const GoogleMap = (props: GoogleMapsParams) => {
     saveLocation,
     setSaveLocation,
     handleToggleMap,
-    locations
+    locations,
+    isIntGeoCoder,
+    businessZones
   } = props
 
   const [, t] = useLanguage()
@@ -43,7 +45,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 +83,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 +109,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 +120,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 +176,9 @@ export const GoogleMap = (props: GoogleMapsParams) => {
   }
 
   useEffect(() => {
+    if (isIntGeoCoder) return
     Geocoder.init(googleMapsApiKey)
-  }, [])
+  }, [isIntGeoCoder])
 
   useEffect(() => {
     mapRef.current.animateToRegion({
@@ -219,6 +244,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: businessZone?.data?.center.lat, longitude: businessZone?.data?.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/Help/index.tsx

@@ -1,5 +1,5 @@
 import React, { useState } from 'react'
-import { RefreshControl } from 'react-native'
+import { Platform, RefreshControl } from 'react-native'
 import { HelpParams } from '../../types'
 import { useLanguage } from 'ordering-components/native'
 import NavBar from '../NavBar'
@@ -31,7 +31,7 @@ export const Help = (props: HelpParams) => {
 
   return (
     <Container
-      pt={10}
+      pt={Platform.OS === 'ios' ? 20 : 10}
       noPadding
       refreshControl={
         <RefreshControl

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

@@ -9,8 +9,9 @@ import AntDesignIcon from 'react-native-vector-icons/AntDesign'
 
 import {
   Content,
-  HeaderWrapper
+  Container
 } from './styles'
+import NavBar from '../NavBar'
 
 export const HelpAccountAndPayment = (props: HelpAccountAndPaymentParams) => {
   const {
@@ -20,15 +21,6 @@ export const HelpAccountAndPayment = (props: HelpAccountAndPaymentParams) => {
   const theme = useTheme()
 
   const styles = StyleSheet.create({
-    btnBackArrow: {
-      borderWidth: 0,
-      backgroundColor: theme.colors.white,
-      borderColor: theme.colors.white,
-      shadowColor: theme.colors.white,
-      display: 'flex',
-      justifyContent: 'flex-start',
-      paddingLeft: 0,
-    },
     imageStyle: {
       width: '100%',
       height: 300,
@@ -39,26 +31,13 @@ export const HelpAccountAndPayment = (props: HelpAccountAndPaymentParams) => {
   const goToBack = () => navigation?.canGoBack() && navigation.goBack()
 
   return (
-    <>
-      <HeaderWrapper>
-        <OButton
-          imgRightSrc={null}
-          style={styles.btnBackArrow}
-          onClick={() => goToBack()}
-          icon={AntDesignIcon}
-          iconProps={{
-            name: 'arrowleft',
-            size: 26
-          }}
-        />
-        <OText
-          size={24}
-          weight={Platform.OS === 'ios' ? '600' : 'bold'}
-          color={theme.colors.textNormal}
-        >
-          {t('ACCOUNT_PAYMENT_OPTIONS', 'Account and Payment Options')}
-        </OText>
-      </HeaderWrapper>
+    <Container>
+      <NavBar
+        title={t('ACCOUNT_PAYMENT_OPTIONS', 'Account and Payment Options')}
+        onActionLeft={goToBack}
+        btnStyle={{ paddingLeft: 0 }}
+        showCall={false}
+      />
       <Content>
         <OText mBottom={20}>
           -Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vel in congue nisl, nisi. Mauris, condimentum auctor sed cras cursus arcu pellentesque.
@@ -78,6 +57,6 @@ export const HelpAccountAndPayment = (props: HelpAccountAndPaymentParams) => {
           cover
         />
       </Content>
-    </>
+    </Container>
   )
 }

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

@@ -4,7 +4,9 @@ export const Content = styled.View`
   padding-vertical: 20px;
   margin-bottom: 20px;
 `
-export const HeaderWrapper = styled.View`
-  padding: 10px 20px 20px 0;
-  flex-direction: row;
+
+export const Container = styled.ScrollView`
+    position: relative;
+    flex: 1;
+    margin: 10px 0;
 `