ordering-ui-react-native 0.17.2 → 0.17.3-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,8 +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 {
@@ -38,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: {
@@ -185,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}>
@@ -196,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')}:
@@ -242,12 +275,26 @@ export const MultiOrdersDetailsUI = (props: any) => {
                 navigation={navigation}
                 order={order}
                 handleGoToOrderDetails={handleGoToOrderDetails}
+                showProgressBar={showBarInIndividual.includes(progressBarStyle)}
               />
               <Divider />
             </React.Fragment>
           ))}
         </>
       )}
+      {!loading && (error || orders?.length === 0) && (
+        error?.includes('ERROR_ACCESS_EXPIRED') ? (
+          <NotFoundSource
+            content={t(error[0], 'Sorry, the order has expired.')}
+          />
+        ) : (
+          <NotFoundSource
+            content={t('NOT_FOUND_ORDER', theme?.defaultLanguages?.NOT_FOUND_ORDER || 'Sorry, we couldn\'t find the requested order.')}
+            btnTitle={t('ORDERS_REDIRECT', theme?.defaultLanguages?.ORDERS_REDIRECT || 'Go to Orders')}
+            onClickButton={navigation.navigate('BusinessList')}
+          />
+        )
+      )}
       <Divider />
     </OrdersDetailsContainer>
   )

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

@@ -1,9 +1,10 @@
 import React, { useState, useEffect } from 'react'
 import { useLanguage } from 'ordering-components/native';
-import { View, StyleSheet, RefreshControl } from 'react-native';
+import { View, StyleSheet, RefreshControl, Platform } from 'react-native';
+import AntDesignIcon from 'react-native-vector-icons/AntDesign'
 
 import { OrdersOption } from '../OrdersOption'
-import { HeaderTitle, OText } from '../shared'
+import { HeaderTitle, OButton, OText } from '../shared'
 import { ScrollView } from 'react-native-gesture-handler';
 import { Tab } from './styles'
 import { useTheme } from 'styled-components/native';
@@ -11,6 +12,7 @@ import { Container } from '../../layouts/Container';
 
 export const MyOrders = (props: any) => {
   const {
+    navigation,
     hideOrders,
     businessesSearchList
   } = props
@@ -21,18 +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,
   });
   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 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 goToBack = () => navigation?.canGoBack() && navigation.goBack()
 
   const handleOnRefresh = () => {
     setRefreshOrders(true);
@@ -61,24 +70,64 @@ export const MyOrders = (props: any) => {
   });
 
   return (
-    <Container noPadding refreshControl={
-      <RefreshControl
-        refreshing={refreshing}
-        onRefresh={() => handleOnRefresh()}
-      />
-    }>
-      {!hideOrders && (
+    <Container
+      noPadding
+      refreshControl={
+        <RefreshControl
+          refreshing={refreshing}
+          onRefresh={() => handleOnRefresh()}
+        />
+      }
+    >
+      {(isChewLayout || showNavbar) && (
+        <View style={{
+          ...{
+            width: '100%',
+            display: 'flex',
+            flexDirection: 'row',
+            alignItems: 'center',
+            paddingHorizontal: isChewLayout ? 20 : 40,
+          },
+          ...props.titleStyle
+        }}>
+          {!props.hideBackBtn && (!isChewLayout || (isChewLayout && hideOrdersTheme)) && (
+            <OButton
+              imgLeftStyle={{ width: 18 }}
+              imgRightSrc={null}
+              style={{
+                borderWidth: 0,
+                width: 26,
+                height: 26,
+                backgroundColor: '#FFF',
+                borderColor: '#FFF',
+                shadowColor: '#FFF',
+                paddingLeft: 0,
+                paddingRight: 0,
+                marginTop: 30,
+              }}
+              onClick={goToBack}
+              icon={AntDesignIcon}
+              iconProps={{
+                name: 'arrowleft',
+                size: 26
+              }}
+            />
+          )}
+          <HeaderTitle ph={10} text={t('MY_ORDERS', 'My Orders')} />
+        </View>
+      )}
+      {!hideOrders && !isChewLayout && !showNavbar && (
         <HeaderTitle text={t('MY_ORDERS', 'My Orders')} />
       )}
       {!allEmpty && (
         <ScrollView
           horizontal
           style={{ ...styles.container, borderBottomWidth: 1 }}
-          contentContainerStyle={{ paddingHorizontal: !!businessesSearchList ? 0 : 40 }}
+          contentContainerStyle={{ paddingHorizontal: !!businessesSearchList ? 0 : isChewLayout ? 20 : 40 }}
           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)}
@@ -98,7 +147,7 @@ export const MyOrders = (props: any) => {
       )}
       {selectedOption === 'orders' && (
         <>
-          <View style={{ paddingLeft: 40, paddingRight: 40 }}>
+          <View style={{ paddingHorizontal: isChewLayout ? 20 : 40 }}>
             <OrdersOption
               {...props}
               activeOrders
@@ -108,7 +157,7 @@ export const MyOrders = (props: any) => {
               refreshOrders={refreshOrders}
             />
           </View>
-          <View style={{ paddingLeft: 40, paddingRight: 40 }}>
+          <View style={{ paddingHorizontal: isChewLayout ? 20 : 40 }}>
             <OrdersOption
               {...props}
               ordersLength={ordersLength}

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

@@ -9,7 +9,7 @@ const TitleWrapper = styled.View`
   padding-horizontal: 10px;
 `
 const TitleTopWrapper = styled.View`
-  flex-grow: 1;
+  flex: 1;
   flex-direction: row;
   align-items: center;
 `
@@ -40,7 +40,8 @@ interface Props {
 	style?: ViewStyle,
 	titleWrapStyle?: ViewStyle,
 	paddingTop?: number,
-	isVertical?: boolean
+	isVertical?: boolean,
+	noMargin?: any
 }
 
 const NavBar = (props: Props) => {
@@ -62,16 +63,11 @@ 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={props.leftImg}
-				imgLeftStyle={{ width: 18 }}
+				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}
-				icon={AntDesignIcon}
-				iconProps={{
-					name: 'arrowleft',
-					size: 26
-				}}
 			/>
 			<TitleTopWrapper>
 				{props.withIcon
@@ -96,10 +92,9 @@ const NavBar = (props: Props) => {
 						style={
 							{
 								textAlign: props.titleAlign ? props.titleAlign : 'center',
-								marginRight: props.showCall ? 0 : 40,
+								marginRight: (props.showCall || !!props.noMargin) ? 0 : 40,
 								color: props.titleColor || theme.colors.textNormal,
 								paddingHorizontal: props.titleAlign == 'left' ? 12 : 0,
-								width: '100%',
 								...props.titleStyle,
 							}
 						}