ordering-ui-react-native 0.17.76 → 0.17.77-release

package/themes/original/src/components/MultiOrdersDetails/SingleOrderCard.tsx

@@ -3,6 +3,7 @@ import {
   useLanguage,
   useEvent,
   useUtils,
+  useConfig,
   OrderDetails as OrderDetailsController
 } from 'ordering-components/native'
 import { View, StyleSheet, TouchableOpacity, Linking } from 'react-native'
@@ -15,6 +16,7 @@ import {
   StaturBar,
   Icons
 } from './styles'
+import { getOrderStatus } from '../../utils'
 
 const SingleOrderCardUI = (props: any) => {
   const {
@@ -23,13 +25,17 @@ const SingleOrderCardUI = (props: any) => {
     readMessages,
     messages,
     setMessages,
-    handleGoToOrderDetails
+    handleGoToOrderDetails,
+    showProgressBar
   } = props
 
   const { order } = props.order
   const theme = useTheme()
   const [, t] = useLanguage()
   const [{ parseDate, parsePrice }] = useUtils()
+  const [{ configs }] = useConfig()
+
+  const hideIndividualButton = configs.multi_business_checkout_remove_individual_buttons?.value === '1'
 
   const styles = StyleSheet.create({
     statusBar: {
@@ -37,205 +43,6 @@ const SingleOrderCardUI = (props: any) => {
     }
   })
 
-  const getOrderStatus = (s: string) => {
-    const status = parseInt(s);
-    const orderStatus = [
-      {
-        key: 0,
-        value: t('PENDING', 'Pending'),
-        slug: 'PENDING',
-        percentage: 0.25,
-        image: theme.images.order.status0,
-      },
-      {
-        key: 1,
-        value: t('COMPLETED', 'Completed'),
-        slug: 'COMPLETED',
-        percentage: 1,
-        image: theme.images.order.status1,
-      },
-      {
-        key: 2,
-        value: t('REJECTED', 'Rejected'),
-        slug: 'REJECTED',
-        percentage: 0,
-        image: theme.images.order.status2,
-      },
-      {
-        key: 3,
-        value: t('DRIVER_IN_BUSINESS', 'Driver in business'),
-        slug: 'DRIVER_IN_BUSINESS',
-        percentage: 0.6,
-        image: theme.images.order.status3,
-      },
-      {
-        key: 4,
-        value: t('PREPARATION_COMPLETED', 'Preparation Completed'),
-        slug: 'PREPARATION_COMPLETED',
-        percentage: 0.7,
-        image: theme.images.order.status4,
-      },
-      {
-        key: 5,
-        value: t('REJECTED_BY_BUSINESS', 'Rejected by business'),
-        slug: 'REJECTED_BY_BUSINESS',
-        percentage: 0,
-        image: theme.images.order.status5,
-      },
-      {
-        key: 6,
-        value: t('REJECTED_BY_DRIVER', 'Rejected by Driver'),
-        slug: 'REJECTED_BY_DRIVER',
-        percentage: 0,
-        image: theme.images.order.status6,
-      },
-      {
-        key: 7,
-        value: t('ACCEPTED_BY_BUSINESS', 'Accepted by business'),
-        slug: 'ACCEPTED_BY_BUSINESS',
-        percentage: 0.35,
-        image: theme.images.order.status7,
-      },
-      {
-        key: 8,
-        value: t('ACCEPTED_BY_DRIVER', 'Accepted by driver'),
-        slug: 'ACCEPTED_BY_DRIVER',
-        percentage: 0.45,
-        image: theme.images.order.status8,
-      },
-      {
-        key: 9,
-        value: t('PICK_UP_COMPLETED_BY_DRIVER', 'Pick up completed by driver'),
-        slug: 'PICK_UP_COMPLETED_BY_DRIVER',
-        percentage: 0.8,
-        image: theme.images.order.status9,
-      },
-      {
-        key: 10,
-        value: t('PICK_UP_FAILED_BY_DRIVER', 'Pick up Failed by driver'),
-        slug: 'PICK_UP_FAILED_BY_DRIVER',
-        percentage: 0,
-        image: theme.images.order.status10,
-      },
-      {
-        key: 11,
-        value: t(
-          'DELIVERY_COMPLETED_BY_DRIVER',
-          'Delivery completed by driver',
-        ),
-        slug: 'DELIVERY_COMPLETED_BY_DRIVER',
-        percentage: 1,
-        image: theme.images.order.status11,
-      },
-      {
-        key: 12,
-        value: t('DELIVERY_FAILED_BY_DRIVER', 'Delivery Failed by driver'),
-        slug: 'DELIVERY_FAILED_BY_DRIVER',
-        percentage: 0,
-        image: theme.images.order.status12,
-      },
-      {
-        key: 13,
-        value: t('PREORDER', 'PreOrder'),
-        slug: 'PREORDER',
-        percentage: 0,
-        image: theme.images.order.status13,
-      },
-      {
-        key: 14,
-        value: t('ORDER_NOT_READY', 'Order not ready'),
-        slug: 'ORDER_NOT_READY',
-        percentage: 0,
-        image: theme.images.order.status13,
-      },
-      {
-        key: 15,
-        value: t(
-          'ORDER_PICKEDUP_COMPLETED_BY_CUSTOMER',
-          'Order picked up completed by customer',
-        ),
-        slug: 'ORDER_PICKEDUP_COMPLETED_BY_CUSTOMER',
-        percentage: 100,
-        image: theme.images.order.status1,
-      },
-      {
-        key: 16,
-        value: t('CANCELLED_BY_CUSTOMER', 'Cancelled by customer'),
-        slug: 'CANCELLED_BY_CUSTOMER',
-        percentage: 0,
-        image: theme.images.order.status2,
-      },
-      {
-        key: 17,
-        value: t(
-          'ORDER_NOT_PICKEDUP_BY_CUSTOMER',
-          'Order not picked up by customer',
-        ),
-        slug: 'ORDER_NOT_PICKEDUP_BY_CUSTOMER',
-        percentage: 0,
-        image: theme.images.order.status2,
-      },
-      {
-        key: 18,
-        value: t(
-          'DRIVER_ALMOST_ARRIVED_TO_BUSINESS',
-          'Driver almost arrived to business',
-        ),
-        slug: 'DRIVER_ALMOST_ARRIVED_TO_BUSINESS',
-        percentage: 0.15,
-        image: theme.images.order.status3,
-      },
-      {
-        key: 19,
-        value: t(
-          'DRIVER_ALMOST_ARRIVED_TO_CUSTOMER',
-          'Driver almost arrived to customer',
-        ),
-        slug: 'DRIVER_ALMOST_ARRIVED_TO_CUSTOMER',
-        percentage: 0.9,
-        image: theme.images.order.status11,
-      },
-      {
-        key: 20,
-        value: t(
-          'ORDER_CUSTOMER_ALMOST_ARRIVED_BUSINESS',
-          'Customer almost arrived to business',
-        ),
-        slug: 'ORDER_CUSTOMER_ALMOST_ARRIVED_BUSINESS',
-        percentage: 90,
-        image: theme.images.order.status7,
-      },
-      {
-        key: 21,
-        value: t(
-          'ORDER_CUSTOMER_ARRIVED_BUSINESS',
-          'Customer arrived to business',
-        ),
-        slug: 'ORDER_CUSTOMER_ARRIVED_BUSINESS',
-        percentage: 95,
-        image: theme.images.order.status7,
-      },
-      {
-        key: 22,
-        value: t('ORDER_LOOKING_FOR_DRIVER', 'Looking for driver'),
-        slug: 'ORDER_LOOKING_FOR_DRIVER',
-        percentage: 35,
-        image: theme.images.order.status8
-      },
-      {
-        key: 23,
-        value: t('ORDER_DRIVER_ON_WAY', 'Driver on way'),
-        slug: 'ORDER_DRIVER_ON_WAY',
-        percentage: 45,
-        image: theme.images.order.status8
-      }
-    ];
-
-    const objectStatus = orderStatus.find((o) => o.key === status);
-
-    return objectStatus && objectStatus;
-  };
-
   const handleGoToMessages = (type: string) => {
     readMessages && readMessages();
     navigation.navigate(
@@ -275,14 +82,16 @@ const SingleOrderCardUI = (props: any) => {
             </View>
           </View>
         </View>
-        <OButton
-          onClick={() => handleGoToOrderDetails(order?.uuid)}
-          textStyle={{ color: theme.colors.primary, textAlign: 'center', fontSize: 14 }}
-          style={{ flexDirection: 'row', justifyContent: 'center', borderRadius: 7.6, shadowOpacity: 0, paddingLeft: 5, paddingRight: 5, height: 44 }}
-          text={t('ORDER_DETAILS', 'Order Details')}
-          bgColor={theme.colors.white}
-          borderColor={theme.colors.primary}
-        />
+        {!hideIndividualButton && (
+          <OButton
+            onClick={() => handleGoToOrderDetails(order?.uuid)}
+            textStyle={{ color: theme.colors.primary, textAlign: 'center', fontSize: 14 }}
+            style={{ flexDirection: 'row', justifyContent: 'center', borderRadius: 7.6, shadowOpacity: 0, paddingLeft: 5, paddingRight: 5, height: 44 }}
+            text={t('ORDER_DETAILS', 'Order Details')}
+            bgColor={theme.colors.white}
+            borderColor={theme.colors.primary}
+          />
+        )}
       </View>
       <OText size={16} lineHeight={24} mBottom={17} weight={'500'} color={theme.colors.textNormal}>
         {t('FROM', 'From')}
@@ -324,25 +133,29 @@ const SingleOrderCardUI = (props: any) => {
         <OText size={12} lineHeight={18} color={theme.colors.textNormal}>
           {order?.business?.cellphone}
         </OText>
-      )}      
+      )}
       <OText size={12} lineHeight={18} color={theme.colors.textNormal}>
         {order?.business?.address}
       </OText>
-      <StaturBar>
-        <LinearGradient
-          start={{ x: 0.0, y: 0.0 }}
-          end={{
-            x: getOrderStatus(order?.status)?.percentage || 0,
-            y: 0,
-          }}
-          locations={[0.9999, 0.9999]}
-          colors={[theme.colors.primary, theme.colors.backgroundGray100]}
-          style={styles.statusBar}
-        />
-      </StaturBar>
-      <OText size={12} lineHeight={18} weight={'400'} color={theme.colors.textNormal}>
-        {getOrderStatus(order?.status)?.value}
-      </OText>
+      {showProgressBar && (
+        <>
+          <StaturBar>
+            <LinearGradient
+              start={{ x: 0.0, y: 0.0 }}
+              end={{
+                x: getOrderStatus(order?.status)?.percentage || 0,
+                y: 0,
+              }}
+              locations={[0.9999, 0.9999]}
+              colors={[theme.colors.primary, theme.colors.backgroundGray100]}
+              style={styles.statusBar}
+            />
+          </StaturBar>
+          <OText size={12} lineHeight={18} weight={'400'} color={theme.colors.textNormal}>
+            {getOrderStatus(order?.status)?.value}
+          </OText>
+        </>
+      )}
       <View style={{ flexDirection: 'row', justifyContent: 'flex-end', marginTop: 20 }}>
         <OText size={16} lineHeight={24} weight={'600'} color={theme.colors.textNormal}>
           {t('EXPORT_ORDER_TOTAL', 'Order total')}: {parsePrice(order?.summary?.total ?? order?.total)}

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

@@ -1,12 +1,12 @@
 import React, { useEffect } from 'react'
-import { useLanguage, useUtils, useToast, ToastType, MultiOrdersDetails as MultiOrdersDetailsController } from 'ordering-components/native'
+import { useLanguage, useUtils, useToast, ToastType, useConfig, MultiOrdersDetails as MultiOrdersDetailsController } from 'ordering-components/native'
 import { View, StyleSheet, BackHandler, TouchableOpacity } from 'react-native'
 import { useTheme } from 'styled-components/native'
 import { OText, OButton } from '../shared'
-import { Container } from '../../layouts/Container'
 import { Placeholder, PlaceholderLine, Fade } from 'rn-placeholder'
 import { SingleOrderCard } from './SingleOrderCard'
 import AntDesignIcon from 'react-native-vector-icons/AntDesign'
+import { getOrderStatus } from '../../utils'
 
 import {
   OrdersDetailsContainer,
@@ -17,9 +17,11 @@ import {
   InfoBlock,
   Row,
   OrdersSummary,
-  BorderLine
+  BorderLine,
+  StaturBar
 } from './styles'
 import { NotFoundSource } from '../NotFoundSource'
+import LinearGradient from 'react-native-linear-gradient'
 
 export const MultiOrdersDetailsUI = (props: any) => {
   const {
@@ -39,12 +41,21 @@ export const MultiOrdersDetailsUI = (props: any) => {
       padding: 0,
       marginLeft: -20
     },
+    statusBar: {
+      height: 12,
+    }
   })
 
   const { loading, orders, error } = props.ordersList
   const [, t] = useLanguage()
   const [{ parsePrice, parseNumber, parseDate }] = useUtils();
   const [, { showToast }] = useToast();
+  const [{ configs }] = useConfig()
+
+  const isTaxIncludedOnPrice = orders.every((_order: any) => _order.taxes?.length ? _order.taxes?.every((_tax: any) => _tax.type === 1) : true)
+  const progressBarStyle = configs.multi_business_checkout_progress_bar_style?.value
+  const showBarInOrder = ['group', 'both']
+  const showBarInIndividual = ['individual', 'both']
 
   const walletName: any = {
     cash: {
@@ -155,7 +166,7 @@ export const MultiOrdersDetailsUI = (props: any) => {
           <OText key={event.id} size={12} lineHeight={18} color={theme.colors.textNormal}>
             {event?.wallet_event
               ? walletName[event?.wallet_event?.wallet?.type]?.name
-              : event?.paymethod?.name}
+              : t(event?.paymethod?.name.toUpperCase()?.replace(/ /g, '_'), event?.paymethod?.name)}
           </OText>
         ))}
       </Section>
@@ -186,6 +197,23 @@ export const MultiOrdersDetailsUI = (props: any) => {
           <OText size={16} lineHeight={24} weight={'500'} color={theme.colors.textNormal} mBottom={20}>
             {t('ORDER_SUMMARY', 'Order summary')}
           </OText>
+          {(showBarInOrder.includes(progressBarStyle)) && (
+            <StaturBar isOrderDetails>
+              <LinearGradient
+                start={{ x: 0.0, y: 0.0 }}
+                end={{
+                  x: getOrderStatus(orders[0]?.status)?.percentage || 0,
+                  y: 0,
+                }}
+                locations={[0.9999, 0.9999]}
+                colors={[theme.colors.primary, theme.colors.backgroundGray100]}
+                style={styles.statusBar}
+              />
+            </StaturBar>
+          )}
+          <OText size={14} lineHeight={18} weight={'400'} color={theme.colors.textNormal} mBottom={10}>
+            {getOrderStatus(orders[0]?.status)?.value}
+          </OText>
           {orders.map((order: any) => (
             <Row key={order.id}>
               <OText size={12} lineHeight={18} weight={'400'} color={theme.colors.textNormal}>
@@ -197,23 +225,27 @@ export const MultiOrdersDetailsUI = (props: any) => {
             </Row>
           ))}
           <BorderLine />
-          <Row>
-            <OText size={12} lineHeight={18} weight={'400'} color={theme.colors.textNormal}>
-              {t('TOTAL_BEFORE_TAX', 'Total before tax')}:
-            </OText>
-            <OText size={12} lineHeight={18} weight={'400'} color={theme.colors.textNormal}>
-              {parsePrice(ordersSummary?.subtotal)}
-            </OText>
-          </Row>
-          <Row>
-            <OText size={12} lineHeight={18} weight={'400'} color={theme.colors.textNormal}>
-              {t('ESTIMATED_TAX_TO_BE_COLLECTED', 'Estimated tax to be collected')}:
-            </OText>
-            <OText size={12} lineHeight={18} weight={'400'} color={theme.colors.textNormal}>
-              {parsePrice(ordersSummary?.tax)}
-            </OText>
-          </Row>
-          <BorderLine />
+          {!isTaxIncludedOnPrice && (
+            <>
+              <Row>
+                <OText size={12} lineHeight={18} weight={'400'} color={theme.colors.textNormal}>
+                  {t('TOTAL_BEFORE_TAX', 'Total before tax')}:
+                </OText>
+                <OText size={12} lineHeight={18} weight={'400'} color={theme.colors.textNormal}>
+                  {parsePrice(ordersSummary?.subtotal)}
+                </OText>
+              </Row>
+              <Row>
+                <OText size={12} lineHeight={18} weight={'400'} color={theme.colors.textNormal}>
+                  {t('ESTIMATED_TAX_TO_BE_COLLECTED', 'Estimated tax to be collected')}:
+                </OText>
+                <OText size={12} lineHeight={18} weight={'400'} color={theme.colors.textNormal}>
+                  {parsePrice(ordersSummary?.tax)}
+                </OText>
+              </Row>
+              <BorderLine />
+            </>
+          )}
           <Row style={{ marginTop: 10 }}>
             <OText size={14} lineHeight={18} weight={'500'} color={theme.colors.textNormal}>
               {t('PAYMENT_TOTAL', 'Payment total')}:
@@ -243,6 +275,7 @@ export const MultiOrdersDetailsUI = (props: any) => {
                 navigation={navigation}
                 order={order}
                 handleGoToOrderDetails={handleGoToOrderDetails}
+                showProgressBar={showBarInIndividual.includes(progressBarStyle)}
               />
               <Divider />
             </React.Fragment>

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

@@ -41,7 +41,7 @@ export const SingleOrderContainer = styled.View`
   padding: 40px 0;
 `
 export const StaturBar = styled.View`
-	margin-top: 30px;
+	margin-top: ${(props: any) => props.isOrderDetails ? '10px' : '30px'};
 	margin-bottom: 10px;
 `
 export const Icons = styled.View`

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

@@ -23,21 +23,25 @@ export const MyOrders = (props: any) => {
   const [isEmptyBusinesses, setIsEmptyBusinesses] = useState(false)
   const [businessOrderIds, setBusinessOrderIds] = useState([])
   const [ordersLength, setOrdersLength] = useState({
-    activeOrdersLength: 0,
+    activeOrdersLength: null,
     previousOrdersLength: 0,
+    preordersLength: 0
   });
   const [selectedOption, setSelectedOption] = useState(!hideOrders ? 'orders' : 'business')
 
   const notOrderOptions = ['business', 'products']
-  const allEmpty = (ordersLength?.activeOrdersLength === 0 && ordersLength?.previousOrdersLength === 0) || ((isEmptyBusinesses || businessOrderIds?.length === 0) && hideOrders)
+  const allEmpty = (ordersLength?.activeOrdersLength === 0 && ordersLength?.previousOrdersLength === 0 && ordersLength?.preordersLength === 0) || ((isEmptyBusinesses || businessOrderIds?.length === 0) && hideOrders)
+
+  const isChewLayout = theme?.header?.components?.layout?.type?.toLowerCase() === 'chew'
+  const showNavbar = theme?.bar_menu?.components?.orders?.hidden
+  const hideOrdersTheme = theme?.bar_menu?.components?.orders?.hidden
+  const hideProductsTab = theme?.orders?.components?.products_tab?.hidden
+  const hideBusinessTab = theme?.orders?.components?.business_tab?.hidden
   const MyOrdersMenu = [
-    { key: 'orders', value: t('ORDERS', 'Orders') },
-    { key: 'business', value: t('BUSINESS', 'Business') },
-    { key: 'products', value: t('PRODUCTS', 'Products') }
+    { key: 'orders', value: t('ORDERS', 'Orders'), disabled: false },
+    { key: 'business', value: t('BUSINESS', 'Business'), disabled: hideBusinessTab },
+    { key: 'products', value: t('PRODUCTS', 'Products'), disabled: hideProductsTab }
   ]
-  const isChewLayout = theme?.header?.components?.layout?.type === 'chew'
-  const showNavbar = theme?.bar_menu?.components?.orders?.hidden
-
   const goToBack = () => navigation?.canGoBack() && navigation.goBack()
 
   const handleOnRefresh = () => {
@@ -87,7 +91,7 @@ export const MyOrders = (props: any) => {
           },
           ...props.titleStyle
         }}>
-          {!props.hideBackBtn && !isChewLayout && (
+          {!props.hideBackBtn && (!isChewLayout || (isChewLayout && hideOrdersTheme)) && (
             <OButton
               imgLeftStyle={{ width: 18 }}
               imgRightSrc={null}
@@ -99,7 +103,8 @@ export const MyOrders = (props: any) => {
                 borderColor: '#FFF',
                 shadowColor: '#FFF',
                 paddingLeft: 0,
-                paddingRight: 0
+                paddingRight: 0,
+                marginTop: 30,
               }}
               onClick={goToBack}
               icon={AntDesignIcon}
@@ -109,7 +114,7 @@ export const MyOrders = (props: any) => {
               }}
             />
           )}
-          <HeaderTitle ph={0} text={t('MY_ORDERS', 'My Orders')} />
+          <HeaderTitle ph={10} text={t('MY_ORDERS', 'My Orders')} />
         </View>
       )}
       {!hideOrders && !isChewLayout && !showNavbar && (
@@ -123,7 +128,7 @@ export const MyOrders = (props: any) => {
           showsHorizontalScrollIndicator={false}
           scrollEventThrottle={16}
         >
-          {MyOrdersMenu.filter(option => !hideOrders || option.key !== 'orders').map(option => (
+          {MyOrdersMenu.filter(option => (!hideOrders || option.key !== 'orders') && !option.disabled).map(option => (
             <Tab
               key={option.key}
               onPress={() => setSelectedOption(option.key)}
@@ -143,18 +148,26 @@ export const MyOrders = (props: any) => {
       )}
       {selectedOption === 'orders' && (
         <>
-          {ordersLength?.activeOrdersLength > 0 && (
-            <View style={{ paddingHorizontal: isChewLayout ? 20 : 40 }}>
-              <OrdersOption
-                {...props}
-                activeOrders
-                ordersLength={ordersLength}
-                setOrdersLength={setOrdersLength}
-                setRefreshOrders={setRefreshOrders}
-                refreshOrders={refreshOrders}
-              />
-            </View>
-          )}
+          <View style={{ paddingHorizontal: isChewLayout ? 20 : 40 }}>
+            <OrdersOption
+              {...props}
+              preOrders
+              ordersLength={ordersLength}
+              setOrdersLength={setOrdersLength}
+              setRefreshOrders={setRefreshOrders}
+              refreshOrders={refreshOrders}
+            />
+          </View>
+          <View style={{ paddingHorizontal: isChewLayout ? 20 : 40 }}>
+            <OrdersOption
+              {...props}
+              activeOrders
+              ordersLength={ordersLength}
+              setOrdersLength={setOrdersLength}
+              setRefreshOrders={setRefreshOrders}
+              refreshOrders={refreshOrders}
+            />
+          </View>
           <View style={{ paddingHorizontal: isChewLayout ? 20 : 40 }}>
             <OrdersOption
               {...props}

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

@@ -1,3 +1,6 @@
+
+
+
 import * as React from 'react'
 import styled, { useTheme } from 'styled-components/native'
 import { OButton, OIcon, OText } from '../shared'
@@ -9,7 +12,6 @@ const TitleWrapper = styled.View`
   padding-horizontal: 10px;
 `
 const TitleTopWrapper = styled.View`
-  flex: 1;
   flex-direction: row;
   align-items: center;
 `
@@ -17,8 +19,10 @@ const TitleTopWrapper = styled.View`
 const btnBackArrow = {
 	borderWidth: 0,
 	backgroundColor: '#FFF',
-	borderColor: '#FFF',
-	shadowColor: '#FFF'
+	borderColor: '#fff',
+	shadowColor: '#FFF',
+	paddingLeft: 30,
+	paddingRight: 30
 }
 
 interface Props {
@@ -42,6 +46,7 @@ interface Props {
 	paddingTop?: number,
 	isVertical?: boolean,
 	noMargin?: any
+	hideArrowLeft?: boolean
 }
 
 const NavBar = (props: Props) => {
@@ -52,8 +57,6 @@ const NavBar = (props: Props) => {
 		background-color: ${theme.colors.white};
 		padding: 10px 20px 20px 0px;
 		flex-direction: row;
-		justify-content: center;
-		align-items: center;
 		position: relative;
 	`
 
@@ -62,13 +65,18 @@ const NavBar = (props: Props) => {
 	}
 	return (
 		<Wrapper style={{ paddingTop: props.paddingTop, ...{ flexDirection: props.isVertical ? 'column' : 'row', alignItems: props.isVertical ? 'flex-start' : 'center' }, ...props.style }}>
-			<OButton
-				imgLeftSrc={theme.images.general.arrow_left}
-				imgLeftStyle={{ width: 26 }}
-				imgRightSrc={null}
-				style={{ ...btnBackArrow, ...props.btnStyle, ...props.isVertical ? (I18nManager.isRTL ? { paddingRight: 0 } : { paddingLeft: 0 }) : {} }}
-				onClick={props?.onActionLeft}
-			/>
+			{!props.hideArrowLeft && (
+				<OButton
+					iconProps={{
+						name: 'arrowleft',
+						size: 26
+					}}
+					icon={AntDesignIcon}
+					imgRightSrc={null}
+					style={{ ...btnBackArrow, ...props.btnStyle, ...props.isVertical ? (I18nManager.isRTL ? { paddingRight: 0 } : { paddingLeft: 0 }) : {} }}
+					onClick={props?.onActionLeft}
+				/>
+			)}
 			<TitleTopWrapper>
 				{props.withIcon
 					? (