ordering-ui-react-native 0.15.99 → 0.16.0-release

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

@@ -0,0 +1,92 @@
+import React, { useState } from 'react'
+import { useLanguage, useOrder } from 'ordering-components/native'
+import { useTheme } from 'styled-components/native'
+import { FavoriteList } from '../FavoriteList'
+import NavBar from '../NavBar'
+import { OText } from '../shared'
+
+import {
+  TabContainer,
+  Tab,
+  Container
+} from './styles'
+
+export const Favorite = (props: any) => {
+  const {
+    navigation
+  } = props
+  const [, t] = useLanguage()
+  const theme = useTheme()
+  const [orderState] = useOrder()
+  const [tabSelected, setTabSelected] = useState('businesses')
+
+  const tabList = [
+    { key: 'businesses', name: t('BUSINESSES', 'Businesses') },
+    { key: 'products', name: t('PRODUCTS', 'Products') },
+    { key: 'orders', name: t('ORDERS', 'Orders') }
+  ]
+
+  const goToBack = () => navigation?.canGoBack() && navigation.goBack()
+
+  const onRedirect = (route: string, params?: any) => {
+    navigation.navigate(route, params)
+  }
+
+  return (
+    <Container>
+      <NavBar
+        title={t('FAVORITE', 'Favorite')}
+        titleAlign={'center'}
+        onActionLeft={goToBack}
+        showCall={false}
+        paddingTop={10}
+        btnStyle={{ paddingLeft: 0 }}
+      />
+      <TabContainer>
+        {tabList.map((menu, i) => (
+          <Tab
+            key={i}
+            active={menu.key === tabSelected}
+            onPress={() => setTabSelected(menu.key)}
+          >
+            <OText
+              color={menu.key === tabSelected ? theme.colors.textNormal : theme.colors.disabled}
+					    size={14}
+					    weight={menu.key === tabSelected ? '500' : '400'}
+					    style={{ marginBottom: 12 }}
+            >
+              {menu.name}
+            </OText>
+          </Tab>
+        ))}
+      </TabContainer>
+      {tabSelected === 'businesses' && (
+        <FavoriteList
+          navigation={navigation}
+          onNavigationRedirect={onRedirect}
+          isBusiness
+          favoriteURL='favorite_businesses'
+          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']}
+        />
+      )}
+      {tabSelected === 'products' && (
+        <FavoriteList
+          favoriteURL='favorite_products'
+          originalURL='products'
+          onNavigationRedirect={onRedirect}
+          isProduct
+        />
+      )}
+      {tabSelected === 'orders' && (
+        <FavoriteList
+          onNavigationRedirect={onRedirect}
+          favoriteURL='favorite_orders'
+          originalURL='orders'
+          isOrder
+        />
+      )}
+    </Container>
+  )
+}

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

@@ -0,0 +1,22 @@
+import styled, { css } from 'styled-components/native'
+
+export const TabContainer = styled.View`
+  flex-direction: row;
+  border-bottom-color: ${(props: any) => props.theme.colors.border};
+  border-bottom-width: 1px;
+  margin-bottom: 25px;
+`
+
+export const Tab = styled.TouchableOpacity`
+  margin-right: 32px;
+  ${(props: any) => props.active && css`
+    border-bottom-color: ${(props: any) => props.theme.colors.textNormal};
+    border-bottom-width: 1px;
+  `}
+`
+
+export const Container = styled.View`
+  padding-horizontal: 40px;
+  padding-bottom: 20px;
+  padding-top: 30px;
+`

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

@@ -0,0 +1,317 @@
+import React, { useEffect } from 'react';
+import { View } from 'react-native';
+import { Fade, Placeholder, PlaceholderLine } from 'rn-placeholder';
+import { FavoriteParams } from '../../types';
+import { SingleOrderCard } from '../SingleOrderCard';
+import {
+	FavoriteList as FavoriteListController,
+	useOrder,
+  useLanguage
+} from 'ordering-components/native';
+import { useTheme } from 'styled-components/native';
+import { _setStoreData } from '../../providers/StoreUtil';
+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';
+
+
+const FavoriteListUI = (props: FavoriteParams) => {
+	const {
+    favoriteList,
+    handleUpdateFavoriteList,
+    pagination,
+    getFavoriteList,
+    navigation,
+    onNavigationRedirect,
+    reorderState,
+    handleReorder,
+    isBusiness,
+    isOrder,
+    isProduct
+	} = props
+
+	const theme = useTheme();
+  const [, t] = useLanguage()
+  const [orderState] = useOrder();
+  const [{ carts }] = useOrder()
+
+  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
+    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) {
+		  if (reorderState?.result?.business_id) {
+			_setStoreData('adjust-cart-products', JSON.stringify(_businessId))
+			onNavigationRedirect && onNavigationRedirect('Business', { store: reorderState?.result?.business?.slug })
+		  }
+		}
+		if (!reorderState?.error && reorderState.loading === false && reorderState?.result?.business_id) {
+		  const cartProducts = carts?.[_businessId]?.products
+		  const available = cartProducts.every((product: any) => product.valid === true)
+		  const orderProducts = favoriteList?.favorites.find((order: any) => order?.id === reorderState?.result?.orderId)?.products
+
+		  if (available && reorderState?.result?.uuid && (cartProducts?.length === orderProducts?.length)) {
+			onNavigationRedirect && onNavigationRedirect('CheckoutNavigator', { cartUuid: reorderState?.result.uuid })
+		  } else {
+			_setStoreData('adjust-cart-products', JSON.stringify(_businessId))
+			cartProducts?.length !== orderProducts?.length && _setStoreData('already-removed', JSON.stringify('removed'))
+			onNavigationRedirect && onNavigationRedirect('Business', { store: reorderState?.result?.business?.slug })
+		  }
+		}
+	  }, [reorderState])
+
+  const handleBusinessClick = (business: any) => {
+    onNavigationRedirect && onNavigationRedirect('Business', {
+      store: business.slug,
+      header: business.header,
+      logo: business.logo,
+    });
+  }
+
+  const BusinessSkeleton = () => {
+    return (
+      <Placeholder
+        Animation={Fade}
+        style={{ marginBottom: 20 }}>
+        <View style={{ width: '100%' }}>
+          <PlaceholderLine
+            height={200}
+            style={{ marginBottom: 20, borderRadius: 25 }}
+          />
+          <View style={{ paddingHorizontal: 10 }}>
+            <View
+              style={{
+                flexDirection: 'row',
+                justifyContent: 'space-between',
+              }}>
+              <PlaceholderLine
+                height={25}
+                width={40}
+                style={{ marginBottom: 10 }}
+              />
+              <PlaceholderLine
+                height={25}
+                width={20}
+                style={{ marginBottom: 10 }}
+              />
+            </View>
+            <PlaceholderLine
+              height={20}
+              width={30}
+              style={{ marginBottom: 10 }}
+            />
+            <PlaceholderLine
+              height={20}
+              width={80}
+              style={{ marginBottom: 10 }}
+            />
+          </View>
+        </View>
+      </Placeholder>
+    )
+  }
+
+  const ProductSkeleton = () => {
+    return (
+      <Placeholder style={{ padding: 5 }} Animation={Fade}>
+        <View style={{ flexDirection: 'row' }}>
+          <PlaceholderLine
+            width={24}
+            height={70}
+            style={{ marginRight: 10, marginBottom: 10 }}
+          />
+          <Placeholder style={{ paddingVertical: 10 }}>
+            <PlaceholderLine width={60} style={{ marginBottom: 25 }} />
+            <PlaceholderLine width={20} />
+          </Placeholder>
+        </View>
+      </Placeholder>
+    )
+  }
+
+  const OrderSkeleton = () => {
+    return (
+      <Placeholder style={{ padding: 5 }} Animation={Fade}>
+        <View style={{ flexDirection: 'row' }}>
+          <PlaceholderLine
+            width={24}
+            height={70}
+            style={{ marginRight: 10, marginBottom: 10 }}
+          />
+          <Placeholder style={{ paddingVertical: 10 }}>
+            <PlaceholderLine width={60} style={{ marginBottom: 25 }} />
+            <PlaceholderLine width={20} />
+          </Placeholder>
+        </View>
+      </Placeholder>
+    )
+  }
+
+	return (
+		<Container>
+      {isBusiness && (
+        <>
+          {favoriteList?.favorites?.length > 0 && (
+            favoriteList.favorites?.sort((a: any, b: any) => a?.name?.toLowerCase() > b?.name?.toLowerCase()).map((business: any, i:number) => (
+              <BusinessController
+                key={`${business.id}_` + i}
+                business={business}
+                isBusinessOpen={business.open}
+                handleCustomClick={handleBusinessClick}
+                orderType={orderState?.options?.type}
+                navigation={navigation}
+                businessHeader={business?.header}
+                businessFeatured={business?.featured}
+                businessLogo={business?.logo}
+                businessReviews={business?.reviews}
+                businessDeliveryPrice={business?.delivery_price}
+                businessDeliveryTime={business?.delivery_time}
+                businessPickupTime={business?.pickup_time}
+                businessDistance={business?.distance}
+                handleUpdateBusinessList={handleUpdateFavoriteList}
+              />
+            ))
+          )}
+          {favoriteList?.loading && (
+            [...Array(5).keys()].map(i => (
+              <BusinessSkeleton key={i} />
+            ))
+          )}
+          {!favoriteList?.loading && !favoriteList?.favorites?.length && (
+            <NotFoundSource
+              content={t('NOT_FOUND_FAVORITES_LIST', 'No favorites to show at this time.')
+              }
+            />
+          )}
+        </>
+      )}
+
+      {isOrder && (
+        <>
+          {favoriteList?.favorites?.length > 0 && (
+            favoriteList.favorites?.sort((a: any, b:any) => moment(a?.delivery_datetime_utc).valueOf() - moment(b?.delivery_datetime_utc).valueOf())
+              .map((order: any, i: number) => (
+                <SingleOrderCard
+                  key={`${order?.id}_${i}`}
+                  order={order}
+                  getOrderStatus={getOrderStatus}
+                  onNavigationRedirect={onNavigationRedirect}
+                  pastOrders={pastOrders.includes(order?.status)}
+                  handleUpdateOrderList={handleUpdateFavoriteList}
+                  handleUpdateFavoriteList={handleUpdateFavoriteList}
+                  handleReorder={handleReorder}
+                  reorderLoading={reorderState?.loading}
+                />
+            ))
+          )}
+          {favoriteList?.loading && (
+            [...Array(5).keys()].map(i => (
+              <OrderSkeleton key={i} />
+            ))
+          )}
+          {!favoriteList?.loading && !favoriteList?.favorites?.length && (
+            <NotFoundSource
+              content={t('NOT_FOUND_FAVORITES_LIST', 'No favorites to show at this time.')
+              }
+            />
+          )}
+        </>
+      )}
+
+      {isProduct && (
+        <>
+          {favoriteList?.favorites?.length > 0 && (
+            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}
+                product={product}
+                onProductClick={onProductClick}
+                handleUpdateProducts={handleUpdateFavoriteList}
+              />
+            ))
+          )}
+          {favoriteList?.loading && (
+            [...Array(5).keys()].map(i => (
+              <ProductSkeleton key={i} />
+            ))
+          )}
+          {!favoriteList?.loading && !favoriteList?.favorites?.length && (
+            <NotFoundSource
+              content={t('NOT_FOUND_FAVORITES_LIST', 'No favorites to show at this time.')
+              }
+            />
+          )}
+        </>
+      )}
+
+      {!favoriteList?.loading && pagination.totalPages && pagination.currentPage < pagination.totalPages && (
+				<WrappButton>
+					<OButton
+						onClick={() => getFavoriteList(pagination?.currentPage + 1)}
+						text={t('LOAD_MORE_ITEMS', 'Load more items')}
+						imgRightSrc={null}
+						textStyle={{ color: theme.colors.white }}
+						style={{ borderRadius: 7.6, shadowOpacity: 0, marginTop: 20 }}
+					/>
+				</WrappButton>
+			)}
+    </Container>
+	)
+}
+
+export const FavoriteList = (props: any) => {
+  const favoriteBusinessesProps = {
+    ...props,
+    UIComponent: FavoriteListUI
+  }
+  return <FavoriteListController {...favoriteBusinessesProps} />
+}

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

@@ -0,0 +1,5 @@
+import styled from 'styled-components/native'
+
+export const Container = styled.View``
+
+export const WrappButton = styled.View``

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

@@ -1,16 +1,16 @@
 import React, { useEffect, useState } from 'react'
-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
@@ -55,19 +55,27 @@ export const GPSButton = (props: any) => {
     })
   }
 
-	const getCurrentPosition = () => {
-		setLoading(true);
-		Geolocation.getCurrentPosition((pos) => {
-			geoCodePosition(pos.coords);
-		}, (err) => {
-			setLoading(false);
-			console.log(err);
-		});
-	}
+  const getCurrentPosition = async () => {
+    let trackingStatus = await getTrackingStatus()
+    if (trackingStatus === 'not-determined') {
+      trackingStatus = await requestTrackingPermission()
+    }
+    if (trackingStatus === 'authorized' || trackingStatus === 'unavailable') {
+      setLoading(true)
+      Geolocation.getCurrentPosition((pos) => {
+        geoCodePosition(pos.coords)
+      }, (err) => {
+        setLoading(false);
+        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,15 +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
-                    coordinate={location}
-                    title={locations[i]?.title}
+                    zIndex={i}
+                    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

@@ -3,7 +3,8 @@ 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
@@ -38,10 +39,14 @@ export const HelpAccountAndPayment = (props: HelpAccountAndPaymentParams) => {
   return (
     <>
       <OButton
-        imgLeftSrc={theme.images.general.arrow_left}
         imgRightSrc={null}
         style={styles.btnBackArrow}
         onClick={() => goToBack()}
+        icon={AntDesignIcon}
+        iconProps={{
+          name: 'arrowleft',
+          size: 26
+        }}
       />
       <OText size={22} weight={600}>{t('ACCOUNT_PAYMENT_OPTIONS', 'Account and Payment Options')}</OText>
       <Content>
@@ -65,4 +70,4 @@ export const HelpAccountAndPayment = (props: HelpAccountAndPaymentParams) => {
       </Content>
     </>
   )
-}
+}

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

@@ -3,10 +3,11 @@ import { useLanguage } from 'ordering-components/native'
 import { HelpGuideParams } 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 {
   Content
 } from './styles'
+import AntDesignIcon from 'react-native-vector-icons/AntDesign'
 
 export const HelpGuide = (props: HelpGuideParams) => {
   const {
@@ -37,10 +38,14 @@ export const HelpGuide = (props: HelpGuideParams) => {
   return (
     <>
       <OButton
-        imgLeftSrc={theme.images.general.arrow_left}
         imgRightSrc={null}
         style={styles.btnBackArrow}
         onClick={() => goToBack()}
+        icon={AntDesignIcon}
+        iconProps={{
+          name: 'arrowleft',
+          size: 26
+        }}
       />
       <OText size={22} weight={600}>{t('GUIDE_TO_ORDERING', 'Guide to Ordering')}</OText>
       <Content>
@@ -64,4 +69,4 @@ export const HelpGuide = (props: HelpGuideParams) => {
       </Content>
     </>
   )
-}
+}

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

@@ -3,8 +3,9 @@ import { useLanguage } from 'ordering-components/native'
 import { HelpOrderParams } 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 { WebView } from 'react-native-webview'
+import AntDesignIcon from 'react-native-vector-icons/AntDesign'
 
 import {
   Content
@@ -42,10 +43,14 @@ export const HelpOrder = (props: HelpOrderParams) => {
   return (
     <>
       <OButton
-        imgLeftSrc={theme.images.general.arrow_left}
         imgRightSrc={null}
         style={styles.btnBackArrow}
         onClick={() => goToBack()}
+        icon={AntDesignIcon}
+        iconProps={{
+          name: 'arrowleft',
+          size: 26
+        }}
       />
       <OText size={22} weight={600}>{t('HELP_WITH_ORDER', 'Help with an order')}</OText>
       <Content>
@@ -76,4 +81,4 @@ export const HelpOrder = (props: HelpOrderParams) => {
       </Content>
     </>
   )
-}
+}