ordering-ui-react-native 0.11.19 → 0.11.23

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "ordering-ui-react-native",
-  "version": "0.11.19",
+  "version": "0.11.23",
   "description": "Reusable components made in react native",
   "main": "src/index.tsx",
   "author": "ordering.inc",

package/src/providers/StoreUtil.tsx

@@ -5,21 +5,17 @@ export const _retrieveStoreData = async (key: string) => {
   if (!key) return
   try {
     const value = await AsyncStorage.getItem(key);
-    if (value !== null) {
-      return JSON.parse(value)
-    }
+    return value != null ? JSON.parse(value) : null;
   } catch {
     return null
   }
 };
 
-export const _setStoreData = (key: string, val: any) => {
+export const _setStoreData = async (key: string, val: any) => {
   if (!key) return
   try {
-    AsyncStorage.setItem(
-      key,
-      typeof (val) === 'string' ? val : JSON.stringify(val)
-    )
+    const value = JSON.stringify(val)
+    await AsyncStorage.setItem(key, value)
   } catch {
     return null
   }

package/themes/business/index.tsx

@@ -46,6 +46,10 @@ import { Container } from './src/layouts/Container';
 import { SafeAreaContainer } from './src/layouts/SafeAreaContainer';
 import { SafeAreaContainerLayout } from './src/layouts/SafeAreaContainer';
 import { useLocation } from './src/hooks/useLocation';
+
+// providers
+import { StoreMethods } from './src/providers/StoreUtil';
+
 export {
   //Components
   AcceptOrRejectOrder,
@@ -90,5 +94,7 @@ export {
   //layouts
   Container,
   SafeAreaContainer,
-  useLocation
+  useLocation,
+  // providers
+  StoreMethods,
 };

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

@@ -15,6 +15,7 @@ import {
   LoginForm as LoginFormController,
   useLanguage,
   useConfig,
+  useApi
 } from 'ordering-components/native';
 import { useTheme } from 'styled-components/native';
 import {
@@ -25,6 +26,7 @@ import {
   OrSeparator,
   LineSeparator,
 } from './styles';
+import { _setStoreData } from '../../providers/StoreUtil'
 import { OText, OButton, OInput, OIconButton, OModal } from '../shared';
 import { PhoneInputNumber } from '../PhoneInputNumber';
 import { VerifyPhone } from '../VerifyPhone';
@@ -45,8 +47,10 @@ const LoginFormUI = (props: LoginParams) => {
     handleCheckPhoneCode,
     setCheckPhoneCodeState,
     allowedLevels,
+    useRootPoint
   } = props;
 
+  const [ordering, { setOrdering }] = useApi();
   const [, { showToast }] = useToast();
   const [, t] = useLanguage();
   const theme = useTheme();
@@ -55,6 +59,7 @@ const LoginFormUI = (props: LoginParams) => {
 
   const scrollRefTab = useRef() as React.MutableRefObject<ScrollView>;
   const inputRef = useRef<any>(null);
+  const inputMailRef = useRef<any>(null);
 
   const [passwordSee, setPasswordSee] = useState(false);
   const [isLoadingVerifyModal, setIsLoadingVerifyModal] = useState(false);
@@ -76,6 +81,9 @@ const LoginFormUI = (props: LoginParams) => {
       : 'Landscape',
   );
 
+  const [submitted, setSubmitted] = useState(false);
+  const [formValues, setFormValues] = useState(null);
+
   const getTraduction = (key: string) => {
     const keyList: any = {
       // Add the key and traduction that you need below
@@ -142,9 +150,20 @@ const LoginFormUI = (props: LoginParams) => {
       return;
     }
 
+    if (values?.project_name) {
+      setOrdering({
+        ...ordering,
+        project: values?.project_name
+      })
+      _setStoreData('project_name', values?.project_name)
+      setFormValues({ ...values, ...phoneInputData.phone })
+      setSubmitted(true)
+      return
+    }
+
     handleButtonLoginClick({
       ...values,
-      ...phoneInputData.phone,
+      ...phoneInputData.phone
     });
   };
 
@@ -194,6 +213,7 @@ const LoginFormUI = (props: LoginParams) => {
                 t('PHONE_NUMER', 'Phone number'),
               ),
         );
+      setSubmitted(false)
     }
   }, [formState]);
 
@@ -256,6 +276,15 @@ const LoginFormUI = (props: LoginParams) => {
     }
   }, [loading]);
 
+  useEffect(() => {
+    if (ordering.project === null || !submitted || !useRootPoint) return
+    const values: any = formValues
+    if (values?.project_name) {
+      delete values.project_name
+    }
+    handleButtonLoginClick({ ...values })
+  }, [ordering, submitted])
+
   Dimensions.addEventListener('change', ({ window: { width, height } }) => {
     setWindowWidth(
       parseInt(parseFloat(String(Dimensions.get('window').width)).toFixed(0)),
@@ -422,6 +451,37 @@ const LoginFormUI = (props: LoginParams) => {
 
       {(useLoginByCellphone || useLoginByEmail) && (
         <FormInput>
+          {useRootPoint && (
+            <Controller
+              control={control}
+              name='project_name'
+              rules={{ required: t(`VALIDATION_ERROR_PROJECT_NAME_REQUIRED`, 'The field project name is required') }}
+              defaultValue=""
+              render={({ onChange, value }: any) => (
+                <OInput
+                  name='project_name'
+                  placeholderTextColor={theme.colors.arrowColor}
+                  placeholder={t('PROJECT_NAME', 'Project Name')}
+                  icon={theme.images.general.project}
+                  iconColor={theme.colors.arrowColor}
+                  onChange={(e: any) => {
+                    onChange(e?.target?.value);
+                    setSubmitted(false);
+                  }}
+                  selectionColor={theme.colors.primary}
+                  color={theme.colors.textGray}
+                  value={value}
+                  style={styles.input}
+                  returnKeyType='next'
+                  autoCorrect={false}
+                  autoCapitalize='none'
+                  onSubmitEditing={() => inputMailRef.current?.focus()}
+                  blurOnSubmit={false}
+                />
+              )}
+            />
+          )}
+
           {useLoginByEmail && loginTab === 'email' && (
             <Controller
               control={control}
@@ -442,6 +502,7 @@ const LoginFormUI = (props: LoginParams) => {
                   autoCorrect={false}
                   type="email-address"
                   autoCompleteType="email"
+                  forwardRef={inputMailRef}
                   returnKeyType="next"
                   onSubmitEditing={() => inputRef.current?.focus()}
                   blurOnSubmit={false}

package/themes/business/src/components/OrdersOption/index.tsx

@@ -47,6 +47,7 @@ const OrdersOptionUI = (props: OrdersOptionParams) => {
     loadOrders,
     loadMoreOrders,
     onNavigationRedirect,
+    handleClickOrder
   } = props;
 
   const theme = useTheme();
@@ -328,6 +329,7 @@ const OrdersOptionUI = (props: OrdersOptionParams) => {
             orders={currentOrdersGroup.orders}
             onNavigationRedirect={onNavigationRedirect}
             getOrderStatus={getOrderStatus}
+            handleClickOrder={handleClickOrder}
           />
         )}
 

package/themes/business/src/components/PreviousOrders/index.tsx

@@ -3,15 +3,17 @@ import { StyleSheet, TouchableOpacity } from 'react-native';
 import { useTheme } from 'styled-components/native';
 import { useLanguage, useUtils } from 'ordering-components/native';
 import { OIcon, OText } from '../shared';
-import { Card, Logo, Information, MyOrderOptions } from './styles';
+import { Card, Logo, Information, MyOrderOptions, NotificationIcon } from './styles';
+import EntypoIcon from 'react-native-vector-icons/Entypo'
 
 export const PreviousOrders = (props: any) => {
-  const { orders, onNavigationRedirect, getOrderStatus } = props;
+  const { orders, onNavigationRedirect, getOrderStatus, handleClickOrder } = props;
   const [, t] = useLanguage();
   const [{ parseDate, optimizeImage }] = useUtils();
   const theme = useTheme();
 
   const handlePressOrder = (order: any) => {
+    handleClickOrder && handleClickOrder(order)
     onNavigationRedirect &&
       onNavigationRedirect('OrderDetails', { order: order });
   };
@@ -96,12 +98,17 @@ export const PreviousOrders = (props: any) => {
                   />
                 </Logo>
               )}
-
               <Information>
                 <OText numberOfLines={1} style={styles.title}>
                   {order.business?.name}
                 </OText>
-
+                <NotificationIcon>
+                  <EntypoIcon
+                    name="dot-single"
+                    size={32}
+                    color={theme.colors.primary}
+                  />
+                </NotificationIcon>
                 <OText
                   style={styles.date}
                   numberOfLines={1}

package/themes/business/src/components/PreviousOrders/styles.tsx

@@ -13,6 +13,7 @@ export const Logo = styled.View`
 `;
 
 export const Information = styled.View`
+  position: relative;
   justify-content: flex-start;
   margin-horizontal: 10px;
   flex: 1;
@@ -23,3 +24,8 @@ export const MyOrderOptions = styled.View`
   flex-direction: column;
   justify-content: space-between;
 `;
+
+export const NotificationIcon = styled.View`
+  position: absolute;
+  left: 90%;
+`

package/themes/business/src/providers/StoreUtil.tsx

@@ -5,21 +5,17 @@ export const _retrieveStoreData = async (key: string) => {
   if (!key) return
   try {
     const value = await AsyncStorage.getItem(key);
-    if (value !== null) {
-      return JSON.parse(value)
-    }
+    return value != null ? JSON.parse(value) : null;
   } catch {
     return null
   }
 };
 
-export const _setStoreData = (key: string, val: any) => {
+export const _setStoreData = async (key: string, val: any) => {
   if (!key) return
   try {
-    AsyncStorage.setItem(
-      key,
-      typeof (val) === 'string' ? val : JSON.stringify(val)
-    )
+    const value = JSON.stringify(val)
+    await AsyncStorage.setItem(key, value)
   } catch {
     return null
   }

package/themes/business/src/types/index.tsx

@@ -19,6 +19,7 @@ export interface LoginParams {
   emailInputIcon?: any;
   passwordInputIcon?: any;
   allowedLevels?: any;
+  useRootPoint?: any;
 }
 export interface ProfileParams {
   navigation?: any;
@@ -274,6 +275,7 @@ export interface OrdersOptionParams {
   ordersGroup?: any;
   setOrdersGroup?: any;
   setCurrentFilters?: any;
+  handleClickOrder?: any;
 }
 export interface ActiveOrdersParams {
   orders?: any;

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

@@ -9,7 +9,6 @@ import {
   useApi
 } from 'ordering-components/native'
 import Carousel from 'react-native-snap-carousel';
-import Geocoder from 'react-native-geocoding';
 import { BusinessProductsListingParams, Business, Product } from '../../types'
 import { OCard, OText } from '../shared'
 import GridContainer from '../../layouts/GridContainer'
@@ -26,13 +25,7 @@ const BusinessProductsListingUI = (props: BusinessProductsListingParams) => {
 
   const theme = useTheme();
   const [, t] = useLanguage();
-  const [{user, accessToken}] = useSession()
-  const [, {changeAddress}] = useOrder()
   const [orientationState] = useDeviceOrientation();
-  const [configState] = useConfig()
-  const [ordering] = useApi()
-  const [addressState, setAddressState] = useState<any>({ loading: false, changes: {}, error: null, address: {} })
-  const googleMapsApiKey = configState?.configs?.google_maps_api_key?.value
 
   const _categories: any = business?.original?.categories;
   let _promos: any = [];
@@ -46,74 +39,6 @@ const BusinessProductsListingUI = (props: BusinessProductsListingParams) => {
     }
   });
 
-  const handleCurrentUserLocation = async () => {
-    let addressValue : any = []
-    let data: any = { address: null, error: null }
-    const filterAddressInfo = [
-      { tag: 'street_number', isShort: true },
-      { tag: 'route', isShort: true },
-      { tag: 'locality', isShort: true },
-      { tag: 'administrative_area_level_1', isShort: false },
-      { tag: 'country', isShort: false },
-    ]
-      Geocoder.init(googleMapsApiKey);
-      Geocoder.from({
-        latitude: business.location?.lat,
-        longitude: business.location?.lng
-      }).then( async (json : any) => {
-        if(json.results && json.results?.length > 0){
-            for (const component of json.results?.[0].address_components) {
-              const addressType = component.types?.[0]
-              for (const filterProps of filterAddressInfo)  {
-                if(filterProps.tag.includes(addressType)) {
-                  addressValue.push(filterProps.isShort ? component.short_name : component.long_name)
-                }
-              }
-            }
-            data = {
-              address: addressValue.join(', '),
-              location: json.results[0].geometry.location,
-              map_data: {
-                library: 'google',
-                place_id: json.results?.[0].place_id
-              }
-            }
-            setAddressState({ ...addressState, loading: true })
-            try {
-              const { content } = await ordering
-              .users(user?.id)
-              .addresses()
-              .save(data.address, { accessToken })
-              setAddressState({
-                ...addressState,
-                loading: false,
-                error: content.error ? content.result : null,
-              })
-              if (!content.error && data) {
-                setAddressState({
-                  ...addressState,
-                  address: data
-                })
-                changeAddress(data)
-              }
-            } catch (err : any) {
-              setAddressState({
-                ...addressState,
-                loading: false,
-                error: [err.message],
-                address: {}
-              })
-            }
-        }
-      })
-  }
-
-  useEffect(() => {
-    if(business?.location?.lat && business?.location?.lng){
-      handleCurrentUserLocation()
-    }
-  }, [business?.location, googleMapsApiKey])
-
   const _renderTitle = (title: string): React.ReactElement => (
     <View style={{paddingHorizontal: 20, paddingVertical: 40}}>
       <OText size={orientationState?.dimensions?.width * 0.035} weight="bold">
@@ -199,7 +124,7 @@ const BusinessProductsListingUI = (props: BusinessProductsListingParams) => {
     </>
   );
 
-  if (businessState?.error || addressState.error) {
+  if (businessState?.error) {
     return <OText>{t('ERROR', 'Error')}</OText>;
   }
 

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

@@ -73,6 +73,7 @@ const CustomerName = (props: Props): React.ReactElement => {
         <NavBar
           title={t('YOUR_NAME', 'Your name')}
           onActionLeft={goToBack}
+          btnStyle={{paddingLeft: 0}}
         />
 
         <View style={{ marginVertical: orientationState?.dimensions?.height * 0.03 }}>

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

@@ -33,6 +33,7 @@ const Intro = (props: any): React.ReactElement => {
 
   return (
     <ScrollView
+      scrollEnabled={false}
       refreshControl={
         <RefreshControl
           refreshing={showLogoutPopup ? false : refreshing}

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

@@ -21,7 +21,7 @@ const LanguageSelectorUI = (props: LanguageSelectorParams) => {
 
   const styles = StyleSheet.create({
     closeIcon: {
-      width: 48, marginLeft: 24
+      width: 48, marginLeft: 32
     },
     flagsContainer: {
       marginLeft: 40

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

@@ -79,7 +79,7 @@ const NavBar = (props: Props) => {
                   borderRadius: 20,
                 }}
                 width={60}
-                height={60} 
+                height={60}
               />
           )
           : null

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

@@ -1,10 +1,10 @@
 import React from 'react';
-import { ImageSourcePropType, ImageStyle, TextStyle, ViewStyle } from 'react-native';
+import { ImageSourcePropType, ImageStyle, TextStyle, ViewStyle, ActivityIndicator } from 'react-native';
 import { TouchableOpacity } from 'react-native-gesture-handler';
 import { useTheme } from 'styled-components/native';
 
 import { OButton, OIcon, OText } from '../shared';
-import { Container, InnerContainer } from './styles';
+import { Container, InnerContainer, ActivityIndicatorContainer } from './styles';
 
 const OptionCard = (props: Props) => {
   const theme = useTheme();
@@ -13,6 +13,7 @@ const OptionCard = (props: Props) => {
     <TouchableOpacity
       onPress={props.onClick}
       activeOpacity={1}
+      disabled={props.isDisabled}
     >
       <Container
         source={props.bgImage}
@@ -20,7 +21,13 @@ const OptionCard = (props: Props) => {
       >
         <InnerContainer
           style={props.innerStyle}
+          isLoading={props.isLoading}
         >
+          {props.isLoading && (
+            <ActivityIndicatorContainer>
+              <ActivityIndicator size='large' color='#ffffff' />
+            </ActivityIndicatorContainer>
+          )}
           <OIcon
             src={props.icon}
             style={{ marginBottom: 10, ...props?.iconStyle }}
@@ -79,6 +86,7 @@ interface Props {
   description: string;
   descriptionStyle?: TextStyle;
   isDisabled?: boolean;
+  isLoading?: boolean;
   onClick?: () => void;
   style?: ViewStyle;
   bgImage: ImageSourcePropType;

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

@@ -6,9 +6,17 @@ export const Container = styled.ImageBackground`
 `
 export const InnerContainer = styled.View`
 	position: absolute;
-	background: rgba(24, 28, 50, 0.4);
+	background: ${(props : any) => props.isLoading ? 'rgba(24, 28, 50, 0.7)' : 'rgba(24, 28, 50, 0.4)'};
 	width: 100%;
 	height: 100%;
 	padding: 10%;
 	justify-content: center;
 `
+
+export const ActivityIndicatorContainer = styled.View`
+    flex: 1;
+    justify-content: center;
+    align-items: center;
+	position: absolute;
+	left: 60%
+`

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

@@ -435,6 +435,7 @@ export const OrderDetailsUI = (props: OrderDetailsParams) => {
           <Container>
             <NavBar
               title={t('TAKE_YOUR_RECEIPT', 'Take your receipt')}
+              style={{right: 10}}
             />
 
             <View style={{

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

@@ -1,8 +1,9 @@
-import React from 'react'
+import React, { useEffect, useState } from 'react'
 import { View } from 'react-native'
 import {
   OrderTypeControl,
   useLanguage,
+  useOrder
 } from 'ordering-components/native'
 import { useTheme } from 'styled-components/native'
 
@@ -29,7 +30,9 @@ const OrderTypeSelectorCardUI = (props: OrderTypeSelectParams) => {
 	const theme = useTheme();
   const [, t] = useLanguage();
   const [orientationState] = useDeviceOrientation();
-
+  const [orderState] = useOrder()
+  const [isCardCliked, setIsCardClicked] = useState(false)
+  const [isLoadingCard, setIsLoadingCard] = useState<string | null>(null)
   const _orderTypes = orderTypes.filter((type: any) => configTypes?.includes(type.value))
 
   const _takeOut = _orderTypes?.find(item => item?.value === 2);
@@ -41,12 +44,21 @@ const OrderTypeSelectorCardUI = (props: OrderTypeSelectParams) => {
     height: orientationState?.orientation === PORTRAIT ? orientationState?.dimensions?.height * 0.34 : orientationState?.dimensions?.height * 0.45,
   }
 
+  useEffect(() => {
+    if(isCardCliked){
+      callback?.()
+      setIsCardClicked(false)
+      setIsLoadingCard(null)
+    }
+  }, [orderState?.options?.type])
+
   return (
     typeSelected !== undefined && (
       <Container>
         <NavBar
           title={t('DELIVERY_TYPE', 'Delivery type')}
           {...(goBack && { onActionLeft: goBack } )}
+          btnStyle={{paddingLeft: 0}}
         />
 
         <View style={{ marginVertical: orientationState?.dimensions?.height * 0.03 }}>
@@ -69,14 +81,21 @@ const OrderTypeSelectorCardUI = (props: OrderTypeSelectParams) => {
         >
           <OptionCard
             style={cardStyle}
+            isDisabled={isCardCliked}
+            isLoading={isLoadingCard === 'Eat In'}
             title={t('EAT_IN','Eat In')}
             description={t('EAT_IN_DESCRIPTION', 'We are very glad to have you here. Bon appetit!')}
             bgImage={theme.images.general.eatIn}
             icon={theme.images.general.pushPin}
             callToActionText={t('START_MY_ORDER', 'Start my order')}
             onClick={() => {
-              handleChangeOrderType(_eatIn?.value);
-              callback && callback();
+              if(_eatIn?.value !== orderState?.options?.type){
+                handleChangeOrderType(_eatIn?.value);
+                setIsCardClicked(true)
+                setIsLoadingCard('Eat In')
+              } else {
+                callback?.()
+              }
             }}
           />
 
@@ -88,13 +107,20 @@ const OrderTypeSelectorCardUI = (props: OrderTypeSelectParams) => {
           <OptionCard
             style={cardStyle}
             title={t('TAKE_OUT','Take out')}
+            isDisabled={isCardCliked}
+            isLoading={isLoadingCard === 'Take out'}
             description={t('TAKE_OUT_DESCRIPTION', 'You are very welcome anytime you visit us!')}
             bgImage={theme.images.general.takeOut}
             icon={theme.images.general.shoppingCart}
             callToActionText={t('START_MY_ORDER', 'Start my order')}
             onClick={() => {
-              handleChangeOrderType(_takeOut?.value);
-              callback && callback();
+              if(_takeOut?.value !== orderState?.options?.type){
+                handleChangeOrderType(_takeOut?.value);
+                setIsCardClicked(true)
+                setIsLoadingCard('Take out')
+              } else {
+                callback?.()
+              }
             }}
           />
         </GridContainer>

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

@@ -52,7 +52,7 @@ const OrderTypeSelectorUI = (props: OrderTypeSelectParams) => {
         /* @ts-ignore */
         renderButtonText={(value) => value?.label}
         renderRow={(item : any) => (
-          <View style={{ padding: 5, backgroundColor: theme.colors.white }}>
+          <View style={{ padding: 5, paddingVertical: 0, backgroundColor: theme.colors.white }}>
             <OText>{item.label}</OText>
           </View>
         )}
@@ -62,7 +62,7 @@ const OrderTypeSelectorUI = (props: OrderTypeSelectParams) => {
           </View>
         )}
         dropdownStyle={{
-          height: 110,
+          height: 80,
           borderRadius: 6,
           padding: 10,
         }}

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

@@ -192,6 +192,7 @@ const PaymentOptionsUI = (props: any) => {
         <NavBar
           title={t('PAYMENT_METHODS', 'Payment methods')}
           onActionLeft={goToBack}
+          btnStyle={{paddingLeft: 0}}
         />
 
         <View
@@ -209,7 +210,9 @@ const PaymentOptionsUI = (props: any) => {
         {supportedMethods?.length > 0 && (
           <GridContainer style={{justifyContent: 'space-between'}}>
             {propsOfItems.CARD_ON_DELIVERY_ID && (
-              <OptionCard {...propsOfItems?.CARD_ON_DELIVERY_ID} />
+              <View style={{marginBottom: orientationState?.orientation === LANDSCAPE ? 20 : 0}}>
+                <OptionCard {...propsOfItems?.CARD_ON_DELIVERY_ID} styke/>
+              </View>
             )}
 
             <View

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

@@ -38,6 +38,24 @@ const UpsellingProductsUI = (props: UpsellingProductsParams) => {
   const [, t] = useLanguage()
   const [orientationState] = useDeviceOrientation();
 
+  const styles = StyleSheet.create({
+    imageStyle: {
+      width: '100%',
+      height: Platform.OS === 'ios' ? 250 : 180,
+      resizeMode: 'cover',
+      borderRadius: 10,
+    },
+    closeUpsellingButton: {
+      marginVertical: 10,
+      marginHorizontal: 20,
+      marginLeft: orientationState.orientation === PORTRAIT ? 20 : 0
+    },
+    upsellingModal: {
+      height: '50%',
+      top: 250
+    }
+  })
+
   useEffect(() => {
     if (!isCustomMode) {
       if (upsellingProducts?.products?.length && !upsellingProducts.loading) {
@@ -68,11 +86,12 @@ const UpsellingProductsUI = (props: UpsellingProductsParams) => {
       <Container>
         {
           !upsellingProducts.loading ? (
-            orientationState.orientation == PORTRAIT ? (
+            orientationState.orientation === PORTRAIT ? (
             <>
               <NavBar
                 title={t('BEFORE_YOU_GO', 'Before you go')}
                 onActionLeft={onClose}
+                btnStyle={{paddingLeft: 0}}
               />
 
               <View style={{ marginVertical: orientationState?.dimensions?.height * 0.03 }}>
@@ -149,6 +168,7 @@ const UpsellingProductsUI = (props: UpsellingProductsParams) => {
                 <NavBar
                   title={t('BEFORE_YOU_GO', 'Before you go')}
                   onActionLeft={onClose}
+                  btnStyle={{paddingLeft: 0}}
                 />
 
                 <View
@@ -299,23 +319,6 @@ const UpsellingProductsUI = (props: UpsellingProductsParams) => {
   )
 }
 
-const styles = StyleSheet.create({
-  imageStyle: {
-    width: '100%',
-    height: Platform.OS === 'ios' ? 250 : 180,
-    resizeMode: 'cover',
-    borderRadius: 10,
-  },
-  closeUpsellingButton: {
-    marginVertical: 10,
-    marginHorizontal: 20,
-  },
-  upsellingModal: {
-    height: '50%',
-    top: 250
-  }
-})
-
 export const UpsellingProducts = (props : UpsellingProductsParams) => {
   const upsellingProductsProps = {
     ...props,