ordering-ui-react-native 0.15.25 → 0.15.26-release

package/themes/doordash/src/components/BusinessesListing/index.tsx

@@ -197,7 +197,7 @@ const BusinessesListingUI = (props: BusinessesListingParams) => {
 			{isFarAway && (
 				<FarAwayMessage style={styles.farAwayMsg}>
 					<Ionicons name='md-warning-outline' style={styles.iconStyle} />
-					<OText size={12} numberOfLines={1} ellipsizeMode={'tail'} color={theme.colors.textNormal}>{t('YOU_ARE_FAR_FROM_ADDRESS', 'You are far from this address')}</OText>
+					<OText size={12} numberOfLines={1} ellipsizeMode={'tail'} color={theme.colors.textNormal}>{t('YOU_ARE_FAR_FROM_ADDRESS', 'Your are far from this address')}</OText>
 				</FarAwayMessage>
 			)}
 			{!auth && (

package/themes/doordash/src/components/LoginForm/index.tsx

@@ -410,8 +410,7 @@ const LoginFormUI = (props: LoginParams) => {
                     textInputProps={{
                       returnKeyType: 'next',
                       onSubmitEditing: () => inputRef?.current?.focus?.(),
-                      style: { borderWidth: 0, fontSize: 12 },
-					  maxLength: 10
+                      style: { borderWidth: 0, fontSize: 12 }
                     }}
                     textWrapStyle={{ borderColor: theme.colors.clear, borderWidth: 0, height: 40, paddingStart: 0 }}
                   />

package/themes/instacart/src/components/BusinessesListing/index.tsx

@@ -155,7 +155,7 @@ const BusinessesListingUI = (props: BusinessesListingParams) => {
 				{isFarAway && (
 					<FarAwayMessage style={styles.farAwayMsg}>
 						<Ionicons name='md-warning-outline' style={styles.iconStyle} />
-						<OText size={12} numberOfLines={1} ellipsizeMode={'tail'} color={theme.colors.textNormal}>{t('YOU_ARE_FAR_FROM_ADDRESS', 'You are far from this address')}</OText>
+						<OText size={12} numberOfLines={1} ellipsizeMode={'tail'} color={theme.colors.textNormal}>{t('YOU_ARE_FAR_FROM_ADDRESS', 'Your are far from this address')}</OText>
 					</FarAwayMessage>
 				)}
 				<View style={styles.wrapperOrderOptions}>

package/themes/kiosk/src/components/Cart/index.tsx

@@ -10,7 +10,7 @@ import {
   useValidationFields,
 } from 'ordering-components/native';
 
-import { CheckoutAction, OrderTypeWrapper, FloatingLayout } from './styles';
+import { CheckoutAction, OrderTypeWrapper, FloatingLayout, OSRow } from './styles';
 
 import { OSBill, OSCoupon, OSTable } from '../OrderSummary/styles';
 
@@ -90,6 +90,20 @@ const CartUI = (props: any) => {
 
   const goToBack = () => navigation.goBack();
 
+  const getIncludedTaxes = () => {
+    if (cart?.taxes === null) {
+      return cart.business.tax_type === 1 ? cart?.tax : 0
+    } else {
+      return cart?.taxes.reduce((taxIncluded: number, tax: any) => {
+        return taxIncluded + (tax.type === 1 ? tax.summary?.tax : 0)
+      }, 0)
+    }
+  }
+
+  const getIncludedTaxesDiscounts = () => {
+    return cart?.taxes?.filter((tax: any) => tax?.type === 1)?.reduce((carry: number, tax: any) => carry + (tax?.summary?.tax_after_discount ?? tax?.summary?.tax), 0)
+  }
+
   return (
     <>
       <Container>
@@ -177,13 +191,10 @@ const CartUI = (props: any) => {
               <OSTable>
                 <OText>{t('SUBTOTAL', 'Subtotal')}</OText>
                 <OText>
-                  {cart.business.tax_type === 1
-                    ? parsePrice((cart?.subtotal + cart?.tax) || 0)
-                    : parsePrice(cart?.subtotal || 0)}
+                  {parsePrice(cart?.subtotal + getIncludedTaxes())}
                 </OText>
               </OSTable>
-              {cart?.discount > 0 && cart?.total >= 0 && orientationState?.orientation == PORTRAIT && (
-
+              {cart?.discount > 0 && cart?.total >= 0 && cart?.offers?.length === 0 && orientationState?.orientation == PORTRAIT && (
                 <OSTable
                   style={{
                     backgroundColor: theme.colors.success,
@@ -226,44 +237,107 @@ const CartUI = (props: any) => {
                   </OText>
                 </OSTable>
               )}
-              {cart.business.tax_type !== 1 && (
+              {
+                cart?.offers?.length > 0 && cart?.offers?.filter((offer: any) => offer?.target === 1)?.map((offer: any) => (
+                  <OSTable key={offer.id}>
+                    <OSRow>
+                      <OText>{offer.name}</OText>
+                      {offer.rate_type === 1 && (
+                        <OText>{`(${verifyDecimals(offer?.rate, parsePrice)}%)`}</OText>
+                      )}
+                    </OSRow>
+                    <OText>
+                      - {parsePrice(offer?.summary?.discount)}
+                    </OText>
+                  </OSTable>
+                ))
+              }
+              {cart?.subtotal_with_discount > 0 && cart?.discount > 0 && cart?.total >= 0 && (
                 <OSTable>
-                  <OText>
-                    {t('TAX', 'Tax')}
-                    {`(${verifyDecimals(cart?.business?.tax, parseNumber)}%)`}
-                  </OText>
-                  <OText>{parsePrice(cart?.tax || 0)}</OText>
+                  <OText numberOfLines={1}>{t('SUBTOTAL_WITH_DISCOUNT', 'Subtotal with discount')}</OText>
+                  {cart?.business?.tax_type === 1 ? (
+                    <OText>{parsePrice(cart?.subtotal_with_discount + getIncludedTaxesDiscounts() ?? 0)}</OText>
+                  ) : (
+                    <OText>{parsePrice(cart?.subtotal_with_discount ?? 0)}</OText>
+                  )}
                 </OSTable>
               )}
+              {
+                cart.taxes?.length > 0 && cart.taxes.filter((tax: any) => tax.type === 2 && tax?.rate !== 0).map((tax: any) => (
+                  <OSTable key={tax.id}>
+                    <OSRow>
+                      <OText>
+                        {tax.name || t('INHERIT_FROM_BUSINESS', 'Inherit from business')}{' '}
+                        {`(${verifyDecimals(tax?.rate, parseNumber)}%)`}{' '}
+                      </OText>
+                    </OSRow>
+                    <OText>{parsePrice(tax?.summary?.tax_after_discount ?? tax?.summary?.tax ?? 0)}</OText>
+                  </OSTable>
+                ))
+              }
+              {
+                cart?.fees?.length > 0 && cart?.fees?.filter((fee: any) => !(fee.fixed === 0 && fee.percentage === 0)).map((fee: any) => (
+                  <OSTable key={fee?.id}>
+                    <OSRow>
+                      <OText>
+                        {fee.name || t('INHERIT_FROM_BUSINESS', 'Inherit from business')}{' '}
+                        ({fee?.fixed > 0 && `${parsePrice(fee?.fixed)}${fee.percentage > 0 ? ' + ' : ''}`}{fee.percentage > 0 && `${fee.percentage}%`}){' '}
+                      </OText>
+                    </OSRow>
+                    <OText>{parsePrice(fee?.summary?.fixed + (fee?.summary?.percentage_after_discount ?? fee?.summary?.percentage) ?? 0)}</OText>
+                  </OSTable>
+                ))
+              }
+              {
+                cart?.offers?.length > 0 && cart?.offers?.filter((offer: any) => offer?.target === 3)?.map((offer: any) => (
+                  <OSTable key={offer.id}>
+                    <OSRow>
+                      <OText>{offer.name}</OText>
+                      {offer.rate_type === 1 && (
+                        <OText>{`(${verifyDecimals(offer?.rate, parsePrice)}%)`}</OText>
+                      )}
+                    </OSRow>
+                    <OText>
+                      - {parsePrice(offer?.summary?.discount)}
+                    </OText>
+                  </OSTable>
+                ))
+              }
               {selectedOrderType === 1 && cart?.delivery_price > 0 && (
                 <OSTable>
                   <OText>{t('DELIVERY_FEE', 'Delivery Fee')}</OText>
                   <OText>{parsePrice(cart?.delivery_price)}</OText>
                 </OSTable>
               )}
+              {
+                cart?.offers?.length > 0 && cart?.offers?.filter((offer: any) => offer?.target === 2)?.map((offer: any) => (
+                  <OSTable key={offer.id}>
+                    <OSRow>
+                      <OText>{offer.name}</OText>
+                      {offer.rate_type === 1 && (
+                        <OText>{`(${verifyDecimals(offer?.rate, parsePrice)}%)`}</OText>
+                      )}
+                    </OSRow>
+                    <OText>
+                      - {parsePrice(offer?.summary?.discount)}
+                    </OText>
+                  </OSTable>
+                ))
+              }
               {cart?.driver_tip > 0 && (
                 <OSTable>
                   <OText>
                     {t('DRIVER_TIP', 'Driver tip')}
                     {cart?.driver_tip_rate > 0 &&
                       parseInt(configs?.driver_tip_type?.value, 10) === 2 &&
-                      !!!parseInt(configs?.driver_tip_use_custom?.value, 10) &&
+                      !parseInt(configs?.driver_tip_use_custom?.value, 10) &&
                       (
-                        `(${parseNumber(cart?.driver_tip_rate)}%)`
+                        `(${verifyDecimals(cart?.driver_tip_rate, parseNumber)}%)`
                       )}
                   </OText>
                   <OText>{parsePrice(cart?.driver_tip)}</OText>
                 </OSTable>
               )}
-              {cart?.service_fee > 0 && (
-                <OSTable>
-                  <OText>
-                    {t('SERVICE_FEE', 'Service Fee')}
-                    {`(${verifyDecimals(cart?.business?.service_fee, parseNumber)}%)`}
-                  </OText>
-                  <OText>{parsePrice(cart?.service_fee)}</OText>
-                </OSTable>
-              )}
               {!cart?.discount_type && isCouponEnabled && !isCartPending && orientationState?.orientation == PORTRAIT && (
                 <OSTable>
                   <OSCoupon>
@@ -279,7 +353,7 @@ const CartUI = (props: any) => {
                   {t('TOTAL', 'Total')}
                 </OText>
                 <OText weight='bold' color={theme.colors.primary}>
-                  {cart?.total >= 1 && parsePrice(cart?.total)}
+                  {parsePrice(cart?.total >= 0 ? cart?.total : 0)}
                 </OText>
               </OSTable>
             </OSBill>

package/themes/kiosk/src/components/Cart/styles.tsx

@@ -68,3 +68,9 @@ export const FloatingLayout = styled.View`
     padding-bottom: 20px;
   `)}
 `
+
+export const OSRow = styled.View`
+  flex-direction: row;
+  overflow: hidden;
+  width: 80%;
+`

package/themes/kiosk/src/components/CartBottomSheet/index.tsx

@@ -179,7 +179,7 @@ const CartBottomSheetUI = (props: CartBottomSheetUIProps): React.ReactElement |
         <ProductForm
           productCart={curProduct}
           businessSlug={cart?.business?.slug}
-          businessId={curProduct?.business_id}
+          businessId={cart?.business_id}
           categoryId={curProduct?.category_id}
           productId={curProduct?.id}
           onSave={handlerProductAction}

package/themes/kiosk/src/components/CartBottomSheet/styles.tsx

@@ -5,7 +5,7 @@ export const StyledContainer = styled.ScrollView`
 	zIndex: 1000;
 	width: 100%;
 	background-color: #fff;
-	padding: 20px 20px 20px 0px;
+	padding: 20px 0 0;
 	bottom: 0;
 	shadow-color: #000;
 	shadow-opacity:  0.4;

package/themes/kiosk/src/components/CartContent/index.tsx

@@ -1,6 +1,6 @@
 import React, { useEffect, useState } from 'react';
 import { useLanguage } from 'ordering-components/native';
-
+import { useCartBottomSheet } from '../../providers/CartBottomSheetProvider';
 import { CCNotCarts } from './styles';
 
 import { Cart } from '../Cart';
@@ -22,6 +22,7 @@ export const CartContent = (props: any) => {
 
   const [, t] = useLanguage()
   const [isCartsLoading, setIsCartsLoading] = useState(false)
+  const [, { hideCartBottomSheet }] = useCartBottomSheet();
 
   const cartProps = {
     navigation,
@@ -33,6 +34,15 @@ export const CartContent = (props: any) => {
     resetInactivityTimeout,
   }
 
+  useEffect(() => {
+    if (!cart && showNotFound) {
+      navigation?.canGoBack()
+        ? navigation.goBack()
+        : props.onNavigationRedirect && props.onNavigationRedirect('Business')
+      hideCartBottomSheet()
+    }
+  }, [cart])
+
   const content = (
     <>
       {(isOrderStateCarts && cart) && (
@@ -46,13 +56,13 @@ export const CartContent = (props: any) => {
           }
         </>
       )}
-      {(!cart && showNotFound) && (
+      {/* {(!cart && showNotFound) && (
         <CCNotCarts>
           <OText size={24} style={{ textAlign: 'center' }}>
             {t('CARTS_NOT_FOUND', 'You don\'t have carts available')}
           </OText>
         </CCNotCarts>
-      )}
+      )} */}
       <Spinner visible={isCartsLoading} />
     </>
   )

package/themes/kiosk/src/components/CartItem/index.tsx

@@ -1,6 +1,7 @@
 import React, { useState } from 'react';
-import { View, Animated, TouchableOpacity } from 'react-native';
+import { View, Animated, TouchableOpacity, ImageBackground } from 'react-native';
 import { useLanguage, useUtils } from 'ordering-components/native';
+import FastImage from 'react-native-fast-image'
 
 import {
   StyledCartItem,
@@ -70,13 +71,24 @@ const CartItem = (props: CartItemProps) => {
       >
         <StyledCartItem>
           <View style={{ flexDirection: 'row' }}>
-            <OImage
-              source={{ uri: product?.images || '' }}
-              height={60}
-              width={60}
-              resizeMode="cover"
-              borderRadius={6}
-            />
+            {product?.images ? (
+              <FastImage
+                style={{ height: 60, width: 80, borderRadius: 6 }}
+                source={{
+                  uri: product?.images,
+                  priority: FastImage.priority.normal,
+                  // cache:FastImage.cacheControl.web
+                }}
+                resizeMode={FastImage.resizeMode.cover}
+              />
+            ) : (
+              <ImageBackground
+                style={{ height: 60, width: 80, borderRadius: 6 }}
+                source={theme.images.dummies.product}
+                imageStyle={{ borderRadius: 6 }}
+                resizeMode='cover'
+              />
+            )}
 
             <View style={{ flexDirection: 'column', justifyContent: 'space-evenly', marginHorizontal: 15, marginTop: 10 }}>
               <View>

package/themes/kiosk/src/components/CustomerName/index.tsx

@@ -1,6 +1,6 @@
 import React, { useEffect } from 'react';
 import { useLanguage, ToastType, useToast } from 'ordering-components/native';
-import { _setStoreData } from '../../../../../src/providers/StoreUtil';
+import { _setStoreData, _removeStoreData } from '../../../../../src/providers/StoreUtil';
 
 import { OButton, OInput, OText } from '../shared';
 import { useForm, Controller } from 'react-hook-form';
@@ -24,10 +24,15 @@ const CustomerName = (props: Props): React.ReactElement => {
   const [orientationState] = useDeviceOrientation();
 
   const onSubmit = (values: any) => {
-    _setStoreData('customer_name', { customerName: values.name });
+    _setStoreData('customer_name', {customerName: values.name});
     onProceedToPay()
   };
 
+  const onSkip = () => {
+    _removeStoreData('customer_name')
+    onProceedToPay()
+  }
+
   const styles = StyleSheet.create({
     inputStyle: {
       borderRadius: 4,
@@ -52,30 +57,26 @@ const CustomerName = (props: Props): React.ReactElement => {
 
   const goToBack = () => navigation?.goBack();
 
-  const submitButton = (
-    <View style={{ flex: 1, alignItems: 'center' }}>
-      <OButton
-        text={t('PROCEED_TO_PAY', 'Proceed to Pay')}
-        onClick={handleSubmit(onSubmit)}
-        textStyle={{ color: theme.colors.primaryContrast, fontSize: 20 }}
-        parentStyle={{
-          height: orientationState?.orientation === PORTRAIT
-            ? 50 : 100
-        }}
-        style={{
-          width: orientationState?.orientation === PORTRAIT
-            ? orientationState?.dimensions.width * 0.5
-            : orientationState?.dimensions.width * 0.5
-        }}
-      />
-    </View>
-  );
+  const submitButton  = (<OButton
+    text={t('PROCEED_TO_PAY', 'Proceed to Pay')}
+    onClick={handleSubmit(onSubmit)}
+    textStyle={{color: theme.colors.primaryContrast, fontSize: 20}}
+    parentStyle={{
+      height: orientationState?.orientation === PORTRAIT
+         ? 50 : 100
+    }}
+    style={{
+      width: orientationState?.orientation === PORTRAIT
+        ? orientationState?.dimensions.width - 40
+        : orientationState?.dimensions.width * 0.5,
+    }}
+  />);
 
-  const skipButton = (
-    <View style={{ flex: 1, alignItems: 'center' }}>
+  const skipButton  = (
+    <View style={{flex:1, left: orientationState?.dimensions.width * 0.2,}}>
       <OButton
         text={t('SKIP', 'Skip')}
-        onClick={onProceedToPay}
+        onClick={onSkip}
         textStyle={{ color: theme.colors.primary, fontSize: 20 }}
         parentStyle={{
           height: orientationState?.orientation === PORTRAIT
@@ -84,7 +85,7 @@ const CustomerName = (props: Props): React.ReactElement => {
         style={{
           backgroundColor: theme.colors.white,
           width: orientationState?.orientation === PORTRAIT
-            ? orientationState?.dimensions.width * 0.2
+            ? orientationState?.dimensions.width - 40
             : orientationState?.dimensions.width * 0.1,
         }}
       />
@@ -93,78 +94,78 @@ const CustomerName = (props: Props): React.ReactElement => {
 
   return (
     <>
-      <Container>
-        <NavBar
-          title={t('YOUR_NAME', 'Your name')}
-          onActionLeft={goToBack}
-          btnStyle={{ paddingLeft: 0 }}
-        />
-        <View style={{
-          marginVertical: orientationState?.dimensions?.height * 0.08,
-          alignItems: 'center'
-        }}>
-          <OText
-            size={orientationState?.dimensions?.width * 0.05}
-            style={{ bottom: 20 }}
-          >
-            {t('WHATS_YOUR_NAME', "What's your name?")}
-            {/* <OText
+        <Container>
+          <NavBar
+                title={t('YOUR_NAME', 'Your name')}
+                onActionLeft={goToBack}
+                btnStyle={{paddingLeft: 0}}
+          />
+          <View style={{ 
+            marginVertical: orientationState?.dimensions?.height * 0.08,
+            paddingLeft: orientationState?.dimensions?.width * 0.25
+          }}>
+              <OText
+                size={orientationState?.dimensions?.width * 0.05}
+                style={{bottom: 20}}
+              >
+                {t('WHATS_YOUR_NAME', "What's your name?")}
+                {/* <OText
                   size={orientationState?.dimensions?.width * 0.05}
                   weight={'700'}
                 >
                   {`${t('ORDER_BE_FOR', 'order be for?')}`}
                 </OText> */}
-          </OText>
-          <Controller
-            control={control}
-            render={({ onChange, value }: any) => (
-              <OInput
-                placeholder={t('WRITE_YOUR_NAME', 'Write your name')}
-                style={{
-                  ...styles.inputStyle,
-                  width: orientationState?.orientation === PORTRAIT
-                    ? orientationState?.dimensions.width * 0.5
-                    : orientationState?.dimensions.width * 0.5,
+              </OText>
+              <Controller
+                control={control}
+                render={({ onChange, value }: any) => (
+                  <OInput
+                    placeholder={t('WRITE_YOUR_NAME', 'Write your name')}
+                    style={{
+                      ...styles.inputStyle,
+                      width: orientationState?.orientation === PORTRAIT
+                        ? orientationState?.dimensions.width - 40
+                        : orientationState?.dimensions.width * 0.5,
+                    }}
+                    value={value}
+                    autoCapitalize="words"
+                    autoCorrect={false}
+                    onChange={(val: any) => onChange(val)}
+                    onSubmitEditing={handleSubmit(onSubmit)}
+                  />
+                )}
+                name="name"
+                rules={{
+                  required: t(
+                    'VALIDATION_ERROR_REQUIRED',
+                    'The field Customer Name is required',
+                  ).replace('_attribute_', t('REQUEST_COLLECTION_CUSTOMER_NAME', 'Customer Name')),
+                  pattern: {
+                    value: /^[a-zA-Z áéíóúüñçÁÉÍÓÚÜÑÇ]+$/i,
+                    message: t(
+                      'INVALID_ERROR',
+                      'Invalid name',
+                    ).replace('_attribute_', t('NAME', 'Name')),
+                  }
                 }}
-                value={value}
-                autoCapitalize="words"
-                autoCorrect={false}
-                onChange={(val: any) => onChange(val)}
-                onSubmitEditing={handleSubmit(onSubmit)}
+                defaultValue=""
               />
-            )}
-            name="name"
-            rules={{
-              required: t(
-                'VALIDATION_ERROR_REQUIRED',
-                'The field Customer Name is required',
-              ).replace('_attribute_', t('REQUEST_COLLECTION_CUSTOMER_NAME', 'Customer Name')),
-              pattern: {
-                value: /^[a-zA-Z áéíóúüñçÁÉÍÓÚÜÑÇ]+$/i,
-                message: t(
-                  'INVALID_ERROR',
-                  'Invalid name',
-                ).replace('_attribute_', t('NAME', 'Name')),
-              }
-            }}
-            defaultValue=""
-          />
 
-          {orientationState?.orientation === LANDSCAPE && submitButton}
-          {orientationState?.orientation === LANDSCAPE && skipButton}
-          {(orientationState?.orientation === PORTRAIT) && (
-            <OSActions>
-              {submitButton}
-            </OSActions>
-          )}
-          {(orientationState?.orientation === PORTRAIT) && (
-            <OSActions>
-              {skipButton}
-            </OSActions>
-          )}
-        </View>
-      </Container>
-    </>
+              {orientationState?.orientation === LANDSCAPE && submitButton}
+              {orientationState?.orientation === LANDSCAPE && skipButton}
+              {(orientationState?.orientation === PORTRAIT) && (
+                <OSActions>
+                  {submitButton}
+                </OSActions>
+              )}
+              {(orientationState?.orientation === PORTRAIT) && (
+                <OSActions>
+                  {skipButton}
+                </OSActions>
+              )}
+            </View>
+        </Container>
+      </>
   );
 };
 

package/themes/kiosk/src/components/Intro/index.tsx

@@ -32,17 +32,17 @@ const Intro = (props: any): React.ReactElement => {
   };
 
   return (
-    <ScrollView
-      scrollEnabled={false}
-      refreshControl={
-        <RefreshControl
-          refreshing={showLogoutPopup ? false : refreshing}
-          onRefresh={() => setShowLogoutPopup(true)}
-        />
-      }
-    >
+    // <ScrollView
+    //   scrollEnabled={false}
+    //   refreshControl={
+    //     <RefreshControl
+    //       refreshing={showLogoutPopup ? false : refreshing}
+    //       onRefresh={() => setShowLogoutPopup(true)}
+    //     />
+    //   }
+    // >
       <Pressable onPress={goBusiness}>
-        <Container nopadding={orientationState.orientation === LANDSCAPE}>
+        <View style={{ height: orientationState?.dimensions?.height }}>
           {orientationState.orientation === PORTRAIT ? (
             <View
               style={{
@@ -132,15 +132,15 @@ const Intro = (props: any): React.ReactElement => {
             open={showLogoutPopup}
             onClose={() => setShowLogoutPopup(false)}
           />
-        </Container>
+        </View>
       </Pressable>
-    </ScrollView>
+    // </ScrollView>
   );
 };
 
 const styles = StyleSheet.create({
   buttonLandStyle: {
-    width: 290,
+    minWidth: 130,
     marginBottom: 16
   }
 });

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

@@ -5,6 +5,7 @@ import { ImageStyle, TextStyle, View, Platform } from 'react-native'
 import { OrderTypeSelector } from '../OrderTypeSelector'
 import { useConfig, useLanguage } from 'ordering-components/native'
 import { useTheme } from 'styled-components/native'
+
 const Wrapper = styled.View`
   background-color: ${(props: any) => props.theme.colors.white};
   padding: 10px 0px 20px 0px;
@@ -64,28 +65,27 @@ const NavBar = (props: Props) => {
 
   return (
     <Wrapper style={{ paddingTop: props.paddingTop, ...props.style }}>
-      {(props?.onActionLeft) && (
+      {(props?.onActionLeft || props?.leftImg) && (
         <OButton
-          imgLeftSrc={props.leftImg}
+          imgLeftSrc={props.leftImg || theme.images.general.arrow_left}
           imgRightSrc={null}
           style={{ ...btnBackArrow, ...props.btnStyle }}
           onClick={props.onActionLeft}
-          imgLeftStyle={props.imgLeftStyle}
-          {...(!props.leftImg && { iconProps: { name: 'arrowleft', size: 28, color: props.btnStyle?.color } })}
+          imgLeftStyle= {props.imgLeftStyle}
         />)
       }
       <TitleTopWrapper>
         {props.withIcon
           ? (
-            <OIcon
-              url={props.icon}
-              style={{
-                borderColor: theme.colors.lightGray,
-                borderRadius: 20,
-              }}
-              width={60}
-              height={60}
-            />
+              <OIcon
+                url={props.icon}
+                style={{
+                  borderColor: theme.colors.lightGray,
+                  borderRadius: 20,
+                }}
+                width={60}
+                height={60}
+              />
           )
           : null
         }
@@ -125,7 +125,7 @@ const NavBar = (props: Props) => {
         </View>
       )}
 
-      {props.rightComponent}
+      { props.rightComponent }
     </Wrapper>
   )
 }