ordering-ui-react-native 0.16.85 → 0.16.86-release

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

@@ -4,8 +4,8 @@ import { Fade, Placeholder, PlaceholderLine } from 'rn-placeholder';
 import { FavoriteParams } from '../../types';
 import { SingleOrderCard } from '../SingleOrderCard';
 import {
-	FavoriteList as FavoriteListController,
-	useOrder,
+  FavoriteList as FavoriteListController,
+  useOrder,
   useLanguage
 } from 'ordering-components/native';
 import { useTheme } from 'styled-components/native';
@@ -14,11 +14,12 @@ 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';
-
+import { getOrderStatus } from '../../utils'
 
 const FavoriteListUI = (props: FavoriteParams) => {
-	const {
+  const {
     favoriteList,
     handleUpdateFavoriteList,
     pagination,
@@ -30,82 +31,53 @@ const FavoriteListUI = (props: FavoriteParams) => {
     isBusiness,
     isOrder,
     isProduct
-	} = props
+  } = props
 
-	const theme = useTheme();
+  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
-		})
+      isRedirect: 'business',
+      productId: product?.id,
+      businessId: businessId,
+      categoryId: categoryId,
+      business: {
+        store: product?.category?.business.slug,
+        header: product?.category?.header,
+      }
+    })
   }
 
   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
+    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])
+      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', {
@@ -194,12 +166,12 @@ const FavoriteListUI = (props: FavoriteParams) => {
     )
   }
 
-	return (
-		<Container>
+  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) => (
+            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}
@@ -224,13 +196,19 @@ 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.')
+              }
+            />
+          )}
         </>
       )}
 
       {isOrder && (
         <>
           {favoriteList?.favorites?.length > 0 && (
-            favoriteList.favorites?.sort((a: any, b:any) => moment(a?.delivery_datetime_utc).valueOf() - moment(b?.delivery_datetime_utc).valueOf())
+            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}`}
@@ -243,13 +221,19 @@ const FavoriteListUI = (props: FavoriteParams) => {
                   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.')
+              }
+            />
+          )}
         </>
       )}
 
@@ -271,22 +255,28 @@ 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.')
+              }
+            />
+          )}
         </>
       )}
 
       {!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>
-			)}
+        <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) => {

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

@@ -62,7 +62,7 @@ const FloatingButtonUI = (props: FloatingButtonParams) => {
 	return (
 		<Container
 			style={{
-				paddingBottom: Platform.OS === 'ios' ? iosBottom ?? 0 : bottom + 16
+				paddingBottom: Platform.OS === 'ios' ? 20 : bottom + 16
 			}}>
 
 			<View style={styles.infoCont}>
@@ -86,7 +86,6 @@ const FloatingButtonUI = (props: FloatingButtonParams) => {
 					{btnText}
 				</OText>
 			</Button>
-
 		</Container>
 	);
 };

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: 20001;
   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/GPSButton/styles.ts

@@ -1,6 +1,6 @@
 import styled, { css } from 'styled-components/native'
 
 export const GpsButtonStyle = styled.TouchableOpacity`
-  width: 30px;
-	height: 30px;
-`
+  width: 16px;
+	height: 16px;
+`

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

@@ -89,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 {
@@ -153,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) {

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,20 +31,20 @@ export const Help = (props: HelpParams) => {
 
   return (
     <Container
+      pt={Platform.OS === 'ios' ? 20 : 10}
       noPadding
       refreshControl={
-				<RefreshControl
-					refreshing={refreshing}
-					onRefresh={() => handleOnRefresh()}
-				/>
-			}
+        <RefreshControl
+          refreshing={refreshing}
+          onRefresh={() => handleOnRefresh()}
+        />
+      }
     >
       <NavBar
         title={t('HELP', 'Help')}
         titleAlign={'center'}
         onActionLeft={goToBack}
         showCall={false}
-        paddingTop={10}
         btnStyle={{ paddingLeft: 0 }}
       />
       <HelpSubItem
@@ -53,7 +53,7 @@ export const Help = (props: HelpParams) => {
         <OText size={14}>{t('HELP_WITH_ORDER', 'Help with an order')}</OText>
       </HelpSubItem>
       <HelpSubItem
-        onPress={() => onRedirect('HelpAccountAndPayment')}      
+        onPress={() => onRedirect('HelpAccountAndPayment')}
       >
         <OText size={14}>{t('ACCOUNT_PAYMENT_OPTIONS', 'Account and Payment Options')}</OText>
       </HelpSubItem>

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

@@ -1,4 +1,5 @@
 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'
@@ -7,8 +8,10 @@ import { StyleSheet, TouchableOpacity } from 'react-native'
 import AntDesignIcon from 'react-native-vector-icons/AntDesign'
 
 import {
-  Content
+  Content,
+  Container
 } from './styles'
+import NavBar from '../NavBar'
 
 export const HelpAccountAndPayment = (props: HelpAccountAndPaymentParams) => {
   const {
@@ -18,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,
@@ -37,18 +31,13 @@ export const HelpAccountAndPayment = (props: HelpAccountAndPaymentParams) => {
   const goToBack = () => navigation?.canGoBack() && navigation.goBack()
 
   return (
-    <>
-      <OButton
-        imgRightSrc={null}
-        style={styles.btnBackArrow}
-        onClick={() => goToBack()}
-        icon={AntDesignIcon}
-        iconProps={{
-          name: 'arrowleft',
-          size: 26
-        }}
+    <Container>
+      <NavBar
+        title={t('ACCOUNT_PAYMENT_OPTIONS', 'Account and Payment Options')}
+        onActionLeft={goToBack}
+        btnStyle={{ paddingLeft: 0 }}
+        showCall={false}
       />
-      <OText size={22} weight={600}>{t('ACCOUNT_PAYMENT_OPTIONS', 'Account and Payment Options')}</OText>
       <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.
@@ -68,6 +57,6 @@ export const HelpAccountAndPayment = (props: HelpAccountAndPaymentParams) => {
           cover
         />
       </Content>
-    </>
+    </Container>
   )
 }

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

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

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

@@ -1,13 +1,14 @@
 import React from 'react'
 import { useLanguage } from 'ordering-components/native'
 import { HelpGuideParams } from '../../types'
-import { OText, OButton, OIcon } from '../shared'
+import { OText, OIcon } from '../shared'
 import { useTheme } from 'styled-components/native'
-import { StyleSheet, TouchableOpacity } from 'react-native'
+import { Platform, StyleSheet } from 'react-native'
+import NavBar from '../NavBar'
 import {
-  Content
+  Content,
+  Container
 } from './styles'
-import AntDesignIcon from 'react-native-vector-icons/AntDesign'
 
 export const HelpGuide = (props: HelpGuideParams) => {
   const {
@@ -36,18 +37,13 @@ export const HelpGuide = (props: HelpGuideParams) => {
   const goToBack = () => navigation?.canGoBack() && navigation.goBack()
 
   return (
-    <>
-      <OButton
-        imgRightSrc={null}
-        style={styles.btnBackArrow}
-        onClick={() => goToBack()}
-        icon={AntDesignIcon}
-        iconProps={{
-          name: 'arrowleft',
-          size: 26
-        }}
+    <Container pdng={Platform.OS === 'ios' ? '10px' : '0px'}>
+      <NavBar
+        title={t('GUIDE_TO_ORDERING', 'Guide to Ordering')}
+        onActionLeft={goToBack}
+        btnStyle={{ paddingLeft: 0 }}
+        showCall={false}
       />
-      <OText size={22} weight={600}>{t('GUIDE_TO_ORDERING', 'Guide to Ordering')}</OText>
       <Content>
         <OText mBottom={15}>
           Lorem ipsum dolor sit amet, consectetur adipiscing elit. Blandit mauris varius faucibus varius condimentum morbi pretium mus. Aliquam bibendum erat venenatis feugiat sed.
@@ -67,6 +63,6 @@ export const HelpGuide = (props: HelpGuideParams) => {
           cover
         />
       </Content>
-    </>
+    </Container>
   )
 }

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

@@ -4,3 +4,9 @@ export const Content = styled.View`
   padding-vertical: 20px;
   margin-bottom: 20px;
 `
+export const Container = styled.ScrollView`
+    position: relative;
+    flex: 1;
+    margin: 10px 0;
+    padding-top: ${(props: any) => props.pdng}
+`

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

@@ -1,14 +1,15 @@
 import React from 'react'
 import { useLanguage } from 'ordering-components/native'
 import { HelpOrderParams } from '../../types'
-import { OText, OButton, OIcon } from '../shared'
+import { OText, OIcon } from '../shared'
 import { useTheme } from 'styled-components/native'
-import { StyleSheet, TouchableOpacity } from 'react-native'
+import { StyleSheet } from 'react-native'
 import { WebView } from 'react-native-webview'
-import AntDesignIcon from 'react-native-vector-icons/AntDesign'
+import NavBar from '../NavBar'
 
 import {
-  Content
+  Content,
+  Container
 } from './styles'
 
 export const HelpOrder = (props: HelpOrderParams) => {
@@ -19,15 +20,6 @@ export const HelpOrder = (props: HelpOrderParams) => {
   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: 120
@@ -41,18 +33,13 @@ export const HelpOrder = (props: HelpOrderParams) => {
   const goToBack = () => navigation?.canGoBack() && navigation.goBack()
 
   return (
-    <>
-      <OButton
-        imgRightSrc={null}
-        style={styles.btnBackArrow}
-        onClick={() => goToBack()}
-        icon={AntDesignIcon}
-        iconProps={{
-          name: 'arrowleft',
-          size: 26
-        }}
+    <Container>
+      <NavBar
+        title={t('HELP_WITH_ORDER', 'Help with an order')}
+        onActionLeft={goToBack}
+        btnStyle={{ paddingLeft: 0 }}
+        showCall={false}
       />
-      <OText size={22} weight={600}>{t('HELP_WITH_ORDER', 'Help with an order')}</OText>
       <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. Sed tempus et, cursus ultricies nisl nisl, in eros.
@@ -79,6 +66,6 @@ export const HelpOrder = (props: HelpOrderParams) => {
           style={styles.videoStyle}
         />
       </Content>
-    </>
+    </Container>
   )
 }

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

@@ -3,4 +3,11 @@ import styled from 'styled-components/native'
 export const Content = styled.View`
   padding-vertical: 20px;
   margin-bottom: 20px;
-`
+`
+
+export const Container = styled.ScrollView`
+    position: relative;
+    flex: 1;
+    margin: 10px 0;
+`
+