ordering-ui-react-native 0.16.31 → 0.16.32-release

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

@@ -24,6 +24,7 @@ import { DriverTips } from '../DriverTips';
 import { NotFoundSource } from '../NotFoundSource';
 import { UserDetails } from '../UserDetails';
 import { PaymentOptionWallet } from '../PaymentOptionWallet';
+import { PlaceSpot } from '../PlaceSpot'
 
 import {
 	ChContainer,
@@ -105,8 +106,7 @@ const CheckoutUI = (props: any) => {
 			padding: 20
 		},
 		pagePadding: {
-			paddingLeft: 40,
-			paddingRight: 40
+			paddingHorizontal: 40
 		},
 		icon: {
 			top: 15,
@@ -114,9 +114,15 @@ const CheckoutUI = (props: any) => {
 			position: 'absolute',
 			fontSize: 20
 		},
-		wrapperNavbar: Platform.OS === 'ios'
-			? { paddingVertical: 0, paddingHorizontal: 40 }
-			: { paddingVertical: 20, paddingHorizontal: 40 }
+		detailWrapper: {
+			paddingHorizontal: 40,
+			width: '100%'
+		},
+		wrapperNavbar: {
+			paddingVertical: 0,
+			paddingHorizontal: 40,
+			marginVertical: 2
+		}
 	})
 
 	const [, { showToast }] = useToast();
@@ -136,8 +142,11 @@ const CheckoutUI = (props: any) => {
 	const [isDeliveryOptionModalVisible, setIsDeliveryOptionModalVisible] = useState(false)
 	const [showGateway, setShowGateway] = useState<any>({ closedByUsed: false, open: false });
 	const [webviewPaymethod, setWebviewPaymethod] = useState<any>(null)
+	const [isOpen, setIsOpen] = useState(false)
+	const [requiredFields, setRequiredFields] = useState<any>([])
 
-	const placeSpotTypes = [3, 4]
+	const placeSpotTypes = [3, 4, 5]
+	const placeSpotsEnabled = placeSpotTypes.includes(options?.type)
 	const businessConfigs = businessDetails?.business?.configs ?? []
 	const isWalletCashEnabled = businessConfigs.find((config: any) => config.key === 'wallet_cash_enabled')?.value === '1'
 	const isWalletCreditPointsEnabled = businessConfigs.find((config: any) => config.key === 'wallet_credit_point_enabled')?.value === '1'
@@ -145,8 +154,9 @@ const CheckoutUI = (props: any) => {
 	const isBusinessChangeEnabled = configs?.cart_change_business_validation?.value === '1'
 
 	const isPreOrder = configs?.preorder_status_enabled?.value === '1'
-	const isDisabledButtonPlace = loading || !cart?.valid || (!paymethodSelected && cart?.balance > 0) || placing || errorCash ||
-		cart?.subtotal < cart?.minimum || (placeSpotTypes.includes(options?.type) && !cart?.place) ||
+	const isDisabledButtonPlace = loading || !cart?.valid || (!paymethodSelected && cart?.balance > 0) ||
+		placing || errorCash || cart?.subtotal < cart?.minimum ||
+		// (placeSpotTypes.includes(options?.type) && !cart?.place) ||
 		(options.type === 1 &&
 			validationFields?.fields?.checkout?.driver_tip?.enabled &&
 			validationFields?.fields?.checkout?.driver_tip?.required &&
@@ -172,11 +182,15 @@ const CheckoutUI = (props: any) => {
 		}
 	}
 
-	const handlePlaceOrder = (confirmPayment) => {
-		if (!userErrors.length) {
+	const handlePlaceOrder = (confirmPayment: any, forcePlace: boolean = false) => {
+		if (!userErrors.length && !requiredFields?.length || forcePlace) {
 			handlerClickPlaceOrder && handlerClickPlaceOrder(null, null, confirmPayment)
 			return
 		}
+		if (requiredFields?.length) {
+			setIsOpen(true)
+			return
+		}
 		let stringError = ''
 		Object.values(userErrors).map((item: any, i: number) => {
 			stringError += (i + 1) === userErrors.length ? `- ${item?.message || item}` : `- ${item?.message || item}\n`
@@ -204,11 +218,12 @@ const CheckoutUI = (props: any) => {
 		setUserErrors([])
 		const errors = []
 		const notFields = ['coupon', 'driver_tip', 'mobile_phone', 'address', 'zipcode', 'address_notes']
+		const _requiredFields: any = []
 
 		Object.values(validationFields?.fields?.checkout).map((field: any) => {
-			if (field?.required && !notFields.includes(field.code)) {
+			if (field?.required && !notFields.includes(field.code) && field?.enabled) {
 				if (!user[field?.code]) {
-					errors.push(t(`VALIDATION_ERROR_${field.code.toUpperCase()}_REQUIRED`, `The field ${field?.name} is required`))
+					_requiredFields.push(field?.code)
 				}
 			}
 		})
@@ -219,8 +234,9 @@ const CheckoutUI = (props: any) => {
 				validationFields?.fields?.checkout?.cellphone?.required) ||
 				configs?.verification_phone_required?.value === '1')
 		) {
-			errors.push(t('VALIDATION_ERROR_MOBILE_PHONE_REQUIRED', 'The field Phone number is required'))
+			_requiredFields.push('cellphone')
 		}
+		setRequiredFields(_requiredFields)
 
 		if (phoneUpdate) {
 			errors.push(t('NECESSARY_UPDATE_COUNTRY_PHONE_CODE', 'It is necessary to update your phone number'))
@@ -270,7 +286,6 @@ const CheckoutUI = (props: any) => {
 						onActionLeft={() => navigation?.canGoBack() && navigation.goBack()}
 						showCall={false}
 						btnStyle={{ paddingLeft: 0 }}
-						style={{ marginTop: Platform.OS === 'ios' ? 0 : 30 }}
 						titleWrapStyle={{ paddingHorizontal: 0 }}
 						titleStyle={{ marginRight: 0, marginLeft: 0 }}
 					/>
@@ -315,10 +330,10 @@ const CheckoutUI = (props: any) => {
 								!businessDetails?.error &&
 								(
 									<Placeholder Animation={Fade}>
-										<PlaceholderLine height={20} width={70} />
-										<PlaceholderLine height={10} width={60} />
-										<PlaceholderLine height={10} width={60} />
-										<PlaceholderLine height={10} width={80} style={{ marginBottom: 20 }} />
+										<PlaceholderLine height={20} />
+										<PlaceholderLine height={12} />
+										<PlaceholderLine height={12} />
+										<PlaceholderLine height={12} style={{ marginBottom: 20 }} />
 									</Placeholder>
 								)}
 							{
@@ -327,7 +342,7 @@ const CheckoutUI = (props: any) => {
 								Object.values(businessDetails?.business).length > 0 &&
 								(
 									<>
-										<OText size={16} lineHeight={24} weight={'500'} mBottom={10}>
+										<OText size={16} lineHeight={24} weight={'500'} mBottom={10} color={theme.colors.textNormal}>
 											{t('BUSINESS_DETAILS', 'Business Details')}
 										</OText>
 										<View>
@@ -348,7 +363,7 @@ const CheckoutUI = (props: any) => {
 								)}
 							{businessDetails?.error && businessDetails?.error?.length > 0 && (
 								<View>
-									<OText size={16} lineHeight={24} weight={'500'}>
+									<OText size={16} lineHeight={24} weight={'500'} color={theme.colors.textNormal}>
 										{t('BUSINESS_DETAILS', 'Business Details')}
 									</OText>
 									<NotFoundSource
@@ -364,10 +379,10 @@ const CheckoutUI = (props: any) => {
 						<ChUserDetails>
 							{cartState.loading ? (
 								<Placeholder Animation={Fade}>
-									<PlaceholderLine height={20} width={70} />
-									<PlaceholderLine height={10} width={60} />
-									<PlaceholderLine height={10} width={60} />
-									<PlaceholderLine height={10} width={80} style={{ marginBottom: 20 }} />
+									<PlaceholderLine height={20} />
+									<PlaceholderLine height={12} />
+									<PlaceholderLine height={12} />
+									<PlaceholderLine height={12} style={{ marginBottom: 20 }} />
 								</Placeholder>
 							) : (
 								<UserDetails
@@ -391,13 +406,13 @@ const CheckoutUI = (props: any) => {
 							{cartState.loading || deliveryOptionSelected === undefined ? (
 								<View style={{ height: 110 }}>
 									<Placeholder Animation={Fade}>
-										<PlaceholderLine height={20} width={70} />
-										<PlaceholderLine height={40} width={100} />
+										<PlaceholderLine height={20} />
+										<PlaceholderLine height={40} />
 									</Placeholder>
 								</View>
 							) : (
 								<>
-									<OText size={16}>{t('DELIVERY_OPTIONS', 'Delivery options')}</OText>
+									<OText size={16} color={theme.colors.textNormal} mBottom={10}>{t('DELIVERY_OPTIONS', 'Delivery options')}</OText>
 									<View
 										style={{
 											backgroundColor: theme.colors.inputDisabled,
@@ -583,6 +598,20 @@ const CheckoutUI = (props: any) => {
 					)}
 
 
+					{!cartState.loading && placeSpotsEnabled && (
+						<>
+							<View style={{ height: 8, backgroundColor: theme.colors.backgroundGray100, marginTop: 30, marginHorizontal: -40 }} />
+							<PlaceSpot
+								isCheckout
+								isInputMode
+								cart={cart}
+								spotNumberDefault={cartState?.cart?.spot_number ?? cart?.spot_number}
+								vehicleDefault={cart?.vehicle}
+							/>
+							<View style={{ height: 8, backgroundColor: theme.colors.backgroundGray100, marginHorizontal: -40 }} />
+						</>
+					)}
+
 					{!cartState.loading && cart && (
 						<ChSection>
 							<ChCart>
@@ -598,7 +627,6 @@ const CheckoutUI = (props: any) => {
 												size={16}
 												lineHeight={24}
 												color={theme.colors.textNormal}
-												style={{ fontWeight: '500' }}
 											>
 												{t('MOBILE_FRONT_YOUR_ORDER', 'Your order')}
 											</OText>
@@ -634,6 +662,7 @@ const CheckoutUI = (props: any) => {
 											cart={cart}
 											isCartPending={cart?.status === 2}
 											onNavigationRedirect={onNavigationRedirect}
+											placeSpotTypes={placeSpotTypes}
 										/>
 									</>
 								)}
@@ -670,14 +699,6 @@ const CheckoutUI = (props: any) => {
 										{t('WARNING_INVALID_PRODUCTS_CHECKOUT', 'To continue with your checkout, please remove from your cart the products that are not available.')}
 									</OText>
 								)}
-								{placeSpotTypes.includes(options?.type) && !cart?.place && (
-									<OText
-										color={theme.colors.error}
-										size={12}
-									>
-										{t('WARNING_PLACE_SPOT', 'Please, select your spot to place order.')}
-									</OText>
-								)}
 								{options.type === 1 &&
 									validationFields?.fields?.checkout?.driver_tip?.enabled &&
 									validationFields?.fields?.checkout?.driver_tip?.required &&
@@ -703,11 +724,36 @@ const CheckoutUI = (props: any) => {
 							onClose={() => setOpenChangeStore(false)}
 						/>
 					</OModal>
+					<OModal
+						open={isOpen}
+						onClose={() => setIsOpen(false)}
+					>
+						<View style={styles.detailWrapper}>
+							<UserDetails
+								isUserDetailsEdit
+								cartStatus={cart?.status}
+								businessId={cart?.business_id}
+								useValidationFields
+								useDefualtSessionManager
+								useSessionUser
+								isCheckout
+								isEdit
+								phoneUpdate={phoneUpdate}
+								togglePhoneUpdate={togglePhoneUpdate}
+								requiredFields={requiredFields}
+								hideUpdateButton
+								onClose={() => {
+									setIsOpen(false)
+									handlePlaceOrder(null, true)
+								}}
+							/>
+						</View>
+					</OModal>
 				</ChContainer>
 			</Container>
 			{!cartState.loading && cart && cart?.status !== 2 && (
 				<FloatingButton
-					handleClick={() => handlePlaceOrder()}
+					handleClick={() => handlePlaceOrder(null)}
 					isSecondaryBtn={isDisabledButtonPlace}
 					disabled={isDisabledButtonPlace}
 					btnText={cart?.subtotal >= cart?.minimum
@@ -721,7 +767,7 @@ const CheckoutUI = (props: any) => {
 						: (`${t('MINIMUN_SUBTOTAL_ORDER', 'Minimum subtotal order:')} ${parsePrice(cart?.minimum)}`)
 					}
 					btnRightValueShow
-					btnRightValue={parsePrice(cart?.total)}
+					btnRightValue={parsePrice(cart?.balance)}
 					iosBottom={30}
 				/>
 			)}
@@ -737,19 +783,6 @@ const CheckoutUI = (props: any) => {
 					setShowGateway={setShowGateway}
 				/>
 			)}
-			{webviewPaymethod?.gateway === 'square' && showGateway.open && (
-				<PaymentOptionsWebView
-					onNavigationRedirect={onNavigationRedirect}
-					uri={`https://test-square-f50f7.web.app`}
-					user={user}
-					token={token}
-					cart={cart}
-					currency={currency}
-					webviewPaymethod={webviewPaymethod}
-					setShowGateway={setShowGateway}
-					locationId={'L1NGAY5M6KJRX'}
-				/>
-			)}
 		</>
 	)
 }
@@ -775,16 +808,23 @@ export const Checkout = (props: any) => {
 
 	const getOrder = async (cartId: any) => {
 		try {
-			setCartState({ ...cartState, loading: true })
-			const url = `${ordering.root}/carts/${cartId}`
-			const response = await fetch(url, {
-				method: 'GET',
-				headers: {
-					'Content-Type': 'application/json',
-					Authorization: `Bearer ${token}`
-				}
-			})
-			const { result } = await response.json();
+			let result: any = {}
+			const cart = orderState?.carts.find((cart: any) => cart.uuid === cartId)
+			if (cart) {
+				result = { ...cart }
+			} else {
+				setCartState({ ...cartState, loading: true })
+				const url = `${ordering.root}/carts/${cartId}`
+				const response = await fetch(url, {
+					method: 'GET',
+					headers: {
+						'Content-Type': 'application/json',
+						Authorization: `Bearer ${token}`
+					}
+				})
+				const content = await response.json();
+				result = content.result
+			}
 
 			let publicKey = null
 			try {

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

@@ -76,7 +76,6 @@ export const ChCart = styled(ChPaymethods)``
 
 export const WalletPaymentOptionContainer = styled(ChPaymethods)`
   padding-bottom: 0;
-  margin-left: -20px;
 `
 
 export const ChPlaceOrderBtn = styled.View`

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

@@ -35,8 +35,8 @@ const DriverTipsUI = (props: any) => {
 	const theme = useTheme();
 
 	const style = StyleSheet.create({
-		circle: {
-			borderRadius: 30
+		semicircle: {
+			borderRadius: 8
 		},
 		inputStyle: {
 			flex: 1,
@@ -75,10 +75,10 @@ const DriverTipsUI = (props: any) => {
 						onPress={() => handlerChangeOption(option)}
 					>
 						<DTCard
-							style={style.circle}
+							style={style.semicircle}
 							isActive={option === optionSelected}
 						>
-							<OText size={12} numberOfLines={1} color={option === optionSelected ? '#FFF' : theme.colors.textSecondary}>
+							<OText size={12} numberOfLines={2} color={option === optionSelected ? '#FFF' : theme.colors.textSecondary}>
 								{`${isFixedPrice ? parsePrice(option) : `${option}%`}`}
 							</OText>
 						</DTCard>

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

@@ -26,11 +26,12 @@ export const DTCard = styled.View`
   text-transform: capitalize;
   min-height: 55px;
   min-width: 55px;
-  max-width: 55px;
+  max-width: 80px;
   max-height: 55px;
   margin-right: 10px;
   margin-left: 10px;
   margin-top: 10px;
+  padding-horizontal: 10px;
 
   ${(props: any) => props.isActive && css`
     background-color: ${(props: any) => props.theme.colors.primary};

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

@@ -75,6 +75,7 @@ export const Favorite = (props: any) => {
         <FavoriteList
           favoriteURL='favorite_products'
           originalURL='products'
+          onNavigationRedirect={onRedirect}
           isProduct
         />
       )}

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

@@ -14,6 +14,7 @@ import { Container, WrappButton } from './styles'
 import { OButton } from '../shared';
 import { BusinessController } from '../BusinessController';
 import { SingleProductCard } from '../SingleProductCard';
+import { NotFoundSource } from '../NotFoundSource';
 import moment from 'moment';
 
 
@@ -73,6 +74,17 @@ const FavoriteListUI = (props: FavoriteParams) => {
     return objectStatus && objectStatus
   }
 
+  const onProductClick = (product: any) => {
+    const categoryId = product?.category?.id
+    const businessId = product?.category?.business?.id
+    if (!categoryId || !businessId) return
+    onNavigationRedirect && onNavigationRedirect('ProductDetails', {
+			productId: product?.id,
+			categoryId: categoryId,
+			businessId: businessId
+		})
+  }
+
   useEffect(() => {
 		const _businessId = 'businessId:' + reorderState?.result?.business_id
 		if (reorderState?.error) {
@@ -213,6 +225,12 @@ const FavoriteListUI = (props: FavoriteParams) => {
               <BusinessSkeleton key={i} />
             ))
           )}
+          {!favoriteList?.loading && !favoriteList?.favorites?.length && (
+            <NotFoundSource
+              content={t('NOT_FOUND_FAVORITES_LIST', 'No favorites to show at this time.')
+              }
+            />
+          )}
         </>
       )}
 
@@ -239,6 +257,12 @@ const FavoriteListUI = (props: FavoriteParams) => {
               <OrderSkeleton key={i} />
             ))
           )}
+          {!favoriteList?.loading && !favoriteList?.favorites?.length && (
+            <NotFoundSource
+              content={t('NOT_FOUND_FAVORITES_LIST', 'No favorites to show at this time.')
+              }
+            />
+          )}
         </>
       )}
 
@@ -248,9 +272,9 @@ const FavoriteListUI = (props: FavoriteParams) => {
             favoriteList.favorites?.sort((a: any, b: any) => a?.name?.toLowerCase() > b?.name?.toLowerCase()).map((product: any, i: number) => (
               <SingleProductCard
                 key={`${product?.id}_${i}`}
-                isSoldOut={product.inventoried && !product.quantity}
+                isSoldOut={product?.inventoried && !product?.quantity}
                 product={product}
-                onProductClick={() => {}}
+                onProductClick={onProductClick}
                 handleUpdateProducts={handleUpdateFavoriteList}
               />
             ))
@@ -260,6 +284,12 @@ const FavoriteListUI = (props: FavoriteParams) => {
               <ProductSkeleton key={i} />
             ))
           )}
+          {!favoriteList?.loading && !favoriteList?.favorites?.length && (
+            <NotFoundSource
+              content={t('NOT_FOUND_FAVORITES_LIST', 'No favorites to show at this time.')
+              }
+            />
+          )}
         </>
       )}
 

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

@@ -12,7 +12,7 @@ export const Container = styled.View`
   width: 100%;
   justify-content: space-between;
   background-color: #FFF;
-  z-index: 1000;
+  z-index: 9999;
   justify-content: space-between;
 `
 

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/GoogleMap/index.tsx

@@ -32,6 +32,7 @@ export const GoogleMap = (props: GoogleMapsParams) => {
     latitudeDelta: 0.0010,
     longitudeDelta: 0.0010 * ASPECT_RATIO
   })
+  const [MARKERS, SETMARKERS] = useState(locations)
   let mapRef = useRef<any>(null)
   const googleMapsApiKey = configState?.configs?.google_maps_api_key?.value
 
@@ -41,12 +42,7 @@ export const GoogleMap = (props: GoogleMapsParams) => {
     ERROR_NOT_FOUND_ADDRESS: 'Sorry, we couldn\'t find an address',
     ERROR_MAX_LIMIT_LOCATION: `Sorry, You can only set the position to ${maxLimitLocation}m`
   }
-  const MARKERS = locations && locations.map((location: { lat: number, lng: number }) => {
-    return {
-      latitude: location.lat,
-      longitude: location.lng
-    }
-  })
+
   const geocodePosition = (pos: { latitude: number, longitude: number }) => {
     Geocoder.from({
       latitude: pos.latitude,
@@ -93,7 +89,9 @@ export const GoogleMap = (props: GoogleMapsParams) => {
       return
     }
 
-    if (distance <= maxLimitLocation) {
+    const _maxLimitLocation = typeof maxLimitLocation === 'string' ? parseInt(maxLimitLocation, 10) : maxLimitLocation
+
+    if (distance <= _maxLimitLocation) {
       setMarkerPosition(curPos)
       setRegion({ ...region, longitude: curPos.longitude, latitude: curPos.latitude })
     } else {
@@ -147,7 +145,7 @@ export const GoogleMap = (props: GoogleMapsParams) => {
   }
 
   const fitAllMarkers = () => {
-    mapRef.current.fitToCoordinates(MARKERS, {
+    mapRef.current.fitToCoordinates(MARKERS?.map(location => ({ latitude: location.lat, longitude: location.lng })), {
       edgePadding: { top: 80, right: 80, bottom: 80, left: 80 },
       animated: true,
     });
@@ -157,6 +155,13 @@ export const GoogleMap = (props: GoogleMapsParams) => {
     Geocoder.init(googleMapsApiKey)
   }, [])
 
+  useEffect(() => {
+    mapRef.current.animateToRegion({
+      ...region,
+      latitude: location?.lat,
+      longitude: location?.lng,
+    })
+  }, [location])
 
   useEffect(() => {
     if (saveLocation) {
@@ -170,6 +175,9 @@ export const GoogleMap = (props: GoogleMapsParams) => {
         fitAllMarkers()
       }
     }, 1000)
+    if (locations) {
+      SETMARKERS(locations)
+    }
     return () => clearInterval(interval)
   }, [locations])
 
@@ -189,16 +197,16 @@ export const GoogleMap = (props: GoogleMapsParams) => {
       >
         {locations ? (
           <>
-            {MARKERS && MARKERS.map((location: { latitude: number, longitude: number }, i: number) => (
+            {MARKERS && MARKERS.map((location: { lat: number, lng: number }, i: number) => (
               <React.Fragment key={i}>
                 {
                   <Marker
                     zIndex={i}
-                    coordinate={location}
-                    title={locations[i]?.title}
+                    coordinate={{ latitude: location.lat ?? 0, longitude: location.lng ?? 0 }}
+                    title={MARKERS[i]?.title}
                   >
                     <View>
-                      <OIcon url={locations[i].icon} width={50} height={50} />
+                      <OIcon url={MARKERS[i].icon} width={50} height={50} />
                     </View>
                   </Marker>
                 }

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

@@ -1,12 +1,15 @@
 import React from 'react'
+import { Platform } from 'react-native'
 import { useLanguage } from 'ordering-components/native'
 import { HelpAccountAndPaymentParams } from '../../types'
 import { OText, OButton, OIcon } from '../shared'
 import { useTheme } from 'styled-components/native'
-import { StyleSheet } from 'react-native'
+import { StyleSheet, TouchableOpacity } from 'react-native'
+import AntDesignIcon from 'react-native-vector-icons/AntDesign'
 
 import {
-  Content
+  Content,
+  HeaderWrapper
 } from './styles'
 
 export const HelpAccountAndPayment = (props: HelpAccountAndPaymentParams) => {
@@ -37,13 +40,25 @@ export const HelpAccountAndPayment = (props: HelpAccountAndPaymentParams) => {
 
   return (
     <>
-      <OButton
-        imgLeftSrc={theme.images.general.arrow_left}
-        imgRightSrc={null}
-        style={styles.btnBackArrow}
-        onClick={() => goToBack()}
-      />
-      <OText size={22} weight={600}>{t('ACCOUNT_PAYMENT_OPTIONS', 'Account and Payment Options')}</OText>
+      <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>
       <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.
@@ -65,4 +80,4 @@ export const HelpAccountAndPayment = (props: HelpAccountAndPaymentParams) => {
       </Content>
     </>
   )
-}
+}