ordering-ui-react-native 0.14.48 → 0.14.51

package/package.json

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

package/src/components/OrderDetails/index.tsx

@@ -453,7 +453,7 @@ export const OrderDetailsUI = (props: OrderDetailsParams) => {
                   {order?.offer_type === 1 ? (
                     <OText>
                       {t('DISCOUNT', theme?.defaultLanguages?.DISCOUNT || 'Discount')}{' '}
-                      <span>{`(${verifyDecimals(order?.offer_rate, parsePrice)}%)`}</span>
+                      <OText>{`(${verifyDecimals(order?.offer_rate, parsePrice)}%)`}</OText>
                     </OText>
                   ) : (
                     <OText>{t('DISCOUNT', theme?.defaultLanguages?.DISCOUNT || 'Discount')}</OText>

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

@@ -24,7 +24,7 @@ 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()
   };
 
@@ -52,27 +52,31 @@ const CustomerName = (props: Props): React.ReactElement => {
 
   const goToBack = () => navigation?.goBack();
 
-  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 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 skipButton  = (
-    <View style={{flex:1, left: orientationState?.dimensions.width * 0.2,}}>
+  const skipButton = (
+    <View style={{ flex: 1, alignItems: 'center' }}>
       <OButton
         text={t('SKIP', 'Skip')}
         onClick={onProceedToPay}
-        textStyle={{color: theme.colors.primary, fontSize: 20}}
+        textStyle={{ color: theme.colors.primary, fontSize: 20 }}
         parentStyle={{
           height: orientationState?.orientation === PORTRAIT
             ? 50 : 100
@@ -80,7 +84,7 @@ const CustomerName = (props: Props): React.ReactElement => {
         style={{
           backgroundColor: theme.colors.white,
           width: orientationState?.orientation === PORTRAIT
-            ? orientationState?.dimensions.width - 40
+            ? orientationState?.dimensions.width * 0.2
             : orientationState?.dimensions.width * 0.1,
         }}
       />
@@ -89,78 +93,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,
-            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
+      <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
                   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 - 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')),
-                  }
+          </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,
                 }}
-                defaultValue=""
+                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')),
+              }
+            }}
+            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

@@ -1,5 +1,5 @@
 import React, { useState } from 'react';
-import { StyleSheet, View, RefreshControl, ScrollView } from 'react-native';
+import { StyleSheet, View, RefreshControl, ScrollView, Pressable } from 'react-native';
 import { useLanguage } from 'ordering-components/native';
 import { useTheme } from 'styled-components/native';
 
@@ -41,64 +41,15 @@ const Intro = (props: any): React.ReactElement => {
         />
       }
     >
-      <Container nopadding={orientationState.orientation === LANDSCAPE}>
-        {orientationState.orientation === PORTRAIT ? (
-          <View
-            style={{
-              height: orientationState?.dimensions?.height - _offset,
-              padding: 4,
-              justifyContent: 'space-around',
-              alignItems: 'center'
-            }}
-          >
-            <OImage
-              source={theme.images.logos.logotype}
-              width={(orientationState?.dimensions?.width * 0.4) - _offset}
-              height={orientationState?.dimensions?.height * 0.1}
-            />
-
-            <OImage
-              source={theme.images.general.homeHero}
-              width={orientationState?.dimensions?.width}
-              height={orientationState?.dimensions?.height * 0.6}
-            />
-
-            <OButton
-              text={t('TOUCH_TO_ORDER', 'Touch to order')}
-              parentStyle={{
-                alignItems: 'center',
-                width: orientationState?.dimensions?.width - _offset
-              }}
-              onClick={goBusiness}
-            />
-            <LanguageSelector />
-          </View>
-        ) : (
-          <View
-            style={{
-              flexDirection: 'row',
-              justifyContent: 'flex-start',
-              alignItems: 'center',
-              padding: 0,
-              margin: 0
-            }}
-          >
-            <OImage
-              source={theme.images.general.homeHeroLandscape}
-              width={orientationState?.dimensions?.width * 0.40}
-              height={orientationState?.dimensions?.height * 1.1}
-              style={{ bottom: 100, right: 100 }}
-              resizeMode='cover'
-            />
-
+      <Pressable onPress={goBusiness}>
+        <Container nopadding={orientationState.orientation === LANDSCAPE}>
+          {orientationState.orientation === PORTRAIT ? (
             <View
               style={{
-                height: orientationState?.dimensions?.height,
-                width: '50%',
+                height: orientationState?.dimensions?.height - _offset,
+                padding: 4,
                 justifyContent: 'space-around',
-                alignItems: 'center',
-                paddingBottom: '5%',
-                paddingTop: '10%',
+                alignItems: 'center'
               }}
             >
               <OImage
@@ -107,31 +58,82 @@ const Intro = (props: any): React.ReactElement => {
                 height={orientationState?.dimensions?.height * 0.1}
               />
 
-              <View style={{
-                justifyContent: 'space-around',
-                alignItems: 'center'
-              }}>
+              <OImage
+                source={theme.images.general.homeHero}
+                width={orientationState?.dimensions?.width}
+                height={orientationState?.dimensions?.height * 0.6}
+              />
+
+              <OButton
+                text={t('TOUCH_ANYWHERE_TO_ORDER', 'Touch anywhere to order')}
+                parentStyle={{
+                  alignItems: 'center',
+                  width: orientationState?.dimensions?.width - _offset
+                }}
+                onClick={goBusiness}
+              />
+              <LanguageSelector />
+            </View>
+          ) : (
+            <View
+              style={{
+                flexDirection: 'row',
+                justifyContent: 'flex-start',
+                alignItems: 'center',
+                padding: 0,
+                margin: 0
+              }}
+            >
+              <OImage
+                source={theme.images.general.homeHeroLandscape}
+                width={orientationState?.dimensions?.width * 0.40}
+                height={orientationState?.dimensions?.height * 1.1}
+                style={{ bottom: 100, right: 100 }}
+                resizeMode='cover'
+              />
 
-                <OButton
-                  style={styles.buttonLandStyle}
-                  text={t('TOUCH_ANYWHERE_TO_ORDER', 'Touch anywhere to order')}
-                  parentStyle={{
-                    alignItems: 'center',
-                    width: orientationState?.dimensions?.width - _offset
-                  }}
-                  onClick={goBusiness}
+              <View
+                style={{
+                  height: orientationState?.dimensions?.height,
+                  width: '50%',
+                  justifyContent: 'space-around',
+                  alignItems: 'center',
+                  paddingBottom: '5%',
+                  paddingTop: '10%',
+                }}
+              >
+                <OImage
+                  source={theme.images.logos.logotype}
+                  width={(orientationState?.dimensions?.width * 0.4) - _offset}
+                  height={orientationState?.dimensions?.height * 0.1}
                 />
-                <LanguageSelector />
+
+                <View style={{
+                  justifyContent: 'space-around',
+                  alignItems: 'center'
+                }}>
+
+                  <OButton
+                    style={styles.buttonLandStyle}
+                    text={t('TOUCH_ANYWHERE_TO_ORDER', 'Touch anywhere to order')}
+                    parentStyle={{
+                      alignItems: 'center',
+                      width: orientationState?.dimensions?.width - _offset
+                    }}
+                    onClick={goBusiness}
+                  />
+                  <LanguageSelector />
+                </View>
               </View>
             </View>
-          </View>
-        )}
+          )}
 
-        <LogoutPopup
-          open={showLogoutPopup}
-          onClose={() => setShowLogoutPopup(false)}
-        />
-      </Container>
+          <LogoutPopup
+            open={showLogoutPopup}
+            onClose={() => setShowLogoutPopup(false)}
+          />
+        </Container>
+      </Pressable>
     </ScrollView>
   );
 };

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

@@ -5,7 +5,6 @@ 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;
@@ -65,27 +64,28 @@ const NavBar = (props: Props) => {
 
   return (
     <Wrapper style={{ paddingTop: props.paddingTop, ...props.style }}>
-      {(props?.onActionLeft || props?.leftImg) && (
+      {(props?.onActionLeft) && (
         <OButton
-          imgLeftSrc={props.leftImg || theme.images.general.arrow_left}
+          imgLeftSrc={props.leftImg}
           imgRightSrc={null}
           style={{ ...btnBackArrow, ...props.btnStyle }}
           onClick={props.onActionLeft}
-          imgLeftStyle= {props.imgLeftStyle}
+          imgLeftStyle={props.imgLeftStyle}
+          {...(!props.leftImg && { iconProps: { name: 'arrowleft', size: 28, color: props.btnStyle?.color } })}
         />)
       }
       <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>
   )
 }

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

@@ -69,7 +69,7 @@ export const ProductOptionsUI = (props: any) => {
 
   const { product, loading, error } = productObject;
 
-  const HEADER_EXPANDED_HEIGHT =  Platform.OS === 'ios' ? orientationState?.dimensions?.height * 0.65 : orientationState?.dimensions?.height * 0.4;
+  const HEADER_EXPANDED_HEIGHT = Platform.OS === 'ios' ? orientationState?.dimensions?.height * 0.65 : orientationState?.dimensions?.height * 0.4;
   const HEADER_COLLAPSED_HEIGHT = orientationState?.dimensions?.height * 0.2;
 
   const isError = (id: number) => {
@@ -100,35 +100,35 @@ export const ProductOptionsUI = (props: any) => {
   const saveErrors = orderState.loading || maxProductQuantity === 0 || Object.keys(errors)?.length > 0
 
   const [scrollY] = useState(new Animated.Value(0));
-  
+
   const headerHeight = scrollY.interpolate({
-    inputRange: [0, HEADER_EXPANDED_HEIGHT-HEADER_COLLAPSED_HEIGHT],
+    inputRange: [0, HEADER_EXPANDED_HEIGHT - HEADER_COLLAPSED_HEIGHT],
     outputRange: [HEADER_EXPANDED_HEIGHT, HEADER_COLLAPSED_HEIGHT],
     extrapolate: 'clamp'
   });
   const heroContainerOpacity = scrollY.interpolate({
-    inputRange: [0, HEADER_EXPANDED_HEIGHT-HEADER_COLLAPSED_HEIGHT],
+    inputRange: [0, HEADER_EXPANDED_HEIGHT - HEADER_COLLAPSED_HEIGHT],
     outputRange: [1, 0],
     extrapolate: 'clamp'
   });
   const heroTranslateY = scrollY.interpolate({
-    inputRange: [0, HEADER_EXPANDED_HEIGHT-HEADER_COLLAPSED_HEIGHT],
-    outputRange: [0, -(HEADER_EXPANDED_HEIGHT-HEADER_COLLAPSED_HEIGHT)],
+    inputRange: [0, HEADER_EXPANDED_HEIGHT - HEADER_COLLAPSED_HEIGHT],
+    outputRange: [0, -(HEADER_EXPANDED_HEIGHT - HEADER_COLLAPSED_HEIGHT)],
     extrapolate: 'clamp'
   });
   const navBar1ContainerOpacity = scrollY.interpolate({
-    inputRange: [0, HEADER_EXPANDED_HEIGHT-HEADER_COLLAPSED_HEIGHT],
+    inputRange: [0, HEADER_EXPANDED_HEIGHT - HEADER_COLLAPSED_HEIGHT],
     outputRange: [1, 0],
     extrapolate: 'clamp'
   });
   const navBar2ContainerOpacity = scrollY.interpolate({
-    inputRange: [0, HEADER_EXPANDED_HEIGHT-HEADER_COLLAPSED_HEIGHT],
+    inputRange: [0, HEADER_EXPANDED_HEIGHT - HEADER_COLLAPSED_HEIGHT],
     outputRange: [0, 1],
     extrapolate: 'clamp'
   });
 
   const collapsedBarContainerOpacity = scrollY.interpolate({
-    inputRange: [HEADER_EXPANDED_HEIGHT-HEADER_COLLAPSED_HEIGHT - ((HEADER_EXPANDED_HEIGHT-HEADER_COLLAPSED_HEIGHT) * 0.08), HEADER_EXPANDED_HEIGHT-HEADER_COLLAPSED_HEIGHT],
+    inputRange: [HEADER_EXPANDED_HEIGHT - HEADER_COLLAPSED_HEIGHT - ((HEADER_EXPANDED_HEIGHT - HEADER_COLLAPSED_HEIGHT) * 0.08), HEADER_EXPANDED_HEIGHT - HEADER_COLLAPSED_HEIGHT],
     outputRange: [0, 1],
     extrapolate: 'clamp'
   });
@@ -223,7 +223,7 @@ export const ProductOptionsUI = (props: any) => {
     shadow: {
       shadowColor: '#000',
       shadowOffset: { width: 1, height: 1 },
-      shadowOpacity:  0.4,
+      shadowOpacity: 0.4,
       shadowRadius: 3,
       elevation: 5,
     }
@@ -235,33 +235,31 @@ export const ProductOptionsUI = (props: any) => {
         style={styles.mainContainer}
         contentContainerStyle={styles.scrollContainer}
         onScroll={Animated.event(
-          [{ nativeEvent: { contentOffset: { y: scrollY }} }],
-          {useNativeDriver: false})
+          [{ nativeEvent: { contentOffset: { y: scrollY } } }],
+          { useNativeDriver: false })
         }
         scrollEventThrottle={16}
       >
         <Animated.View style={[styles.header, { height: headerHeight }]}>
           {!isDrawer && (<Animated.View style={{ opacity: navBar1ContainerOpacity }}>
-              <NavBar
-                {...navBarProps}
-                titleColor={theme.colors.white}
-                {...((navigation || onClose) && { leftImg: theme.images.general.arrow_left_white })}
-                btnStyle={{
-                  width: 55,
-                  height: 55,
-                  backgroundColor: 'black',
-                  borderRadius: 100,
-                  opacity: 0.8,
-                  left: 20,
-                }}
-                imgLeftStyle={{ width: 27, height: 27 }}
-              />
-            </Animated.View>
+            <NavBar
+              {...navBarProps}
+              titleColor={theme.colors.white}
+              btnStyle={{
+                width: 66,
+                height: 66,
+                backgroundColor: 'black',
+                borderRadius: 100,
+                color: 'white',
+                opacity: 0.8,
+                left: 20,
+              }}
+            />
+          </Animated.View>
           )}
           <Animated.View style={{ opacity: navBar2ContainerOpacity, position: 'absolute' }}>
             <NavBar
               {...navBarProps}
-              {...((navigation || onClose) && { leftImg: theme.images.general.arrow_left })}
               btnStyle={{
                 width: 55,
                 height: 55,
@@ -269,7 +267,6 @@ export const ProductOptionsUI = (props: any) => {
                 borderRadius: 100,
                 left: 20,
               }}
-              imgLeftStyle={{ width: 27, height: 27 }}
             />
           </Animated.View>
 
@@ -288,7 +285,7 @@ export const ProductOptionsUI = (props: any) => {
               }}
             >
               <OImage
-                source={{uri: product?.images}}
+                source={{ uri: product?.images }}
                 width={70}
                 height={70}
                 resizeMode="cover"
@@ -319,7 +316,7 @@ export const ProductOptionsUI = (props: any) => {
             opacity: heroContainerOpacity,
             position: 'absolute',
             zIndex: -100,
-            transform: [{translateY: heroTranslateY }],
+            transform: [{ translateY: heroTranslateY }],
           }}>
             <View
               style={{
@@ -330,13 +327,13 @@ export const ProductOptionsUI = (props: any) => {
                 backgroundColor: 'rgba(24, 28, 50, 0.4)',
               }}
             >
-              <ImageBackground source={{ uri: product?.images }} resizeMode='cover' style={{ flex:1, justifyContent: 'center' }} />
+              <ImageBackground source={{ uri: product?.images }} resizeMode='cover' style={{ flex: 1, justifyContent: 'center' }} />
 
             </View>
 
             <Animated.View
               style={{
-                transform: [{translateY: heroTranslateY }],
+                transform: [{ translateY: heroTranslateY }],
                 width: orientationState?.dimensions?.width * 0.75,
                 height: HEADER_EXPANDED_HEIGHT / 2,
                 position: 'relative',
@@ -347,7 +344,7 @@ export const ProductOptionsUI = (props: any) => {
             >
               <OText
                 color={theme.colors.white}
-                size={orientationState?.dimensions?.width * 0.048}
+                size={orientationState?.dimensions?.width * 0.038}
                 weight="bold"
                 mBottom={10}
                 numberOfLines={2}
@@ -369,18 +366,18 @@ export const ProductOptionsUI = (props: any) => {
           <Spinner visible={loading} />
         )} */}
         {!loading && !error && product && (
-          <View style={{ paddingTop: isDrawer ? 10 : 20, paddingBottom: 80 }}> 
+          <View style={{ paddingTop: isDrawer ? 10 : 20, paddingBottom: 80 }}>
             <WrapContent isDrawer={isDrawer}>
               <ProductDescription>
                 {(
                   (product?.sku && product?.sku !== '-1' && product?.sku !== '1') ||
                   (productCart?.sku && productCart?.sku !== '-1' && productCart?.sku !== '1')
-                ) &&(
-                  <>
-                    <OText size={20}>{t('SKU', 'Sku')}</OText>
-                    <OText>{product?.sku || productCart?.sku}</OText>
-                  </>
-                )}
+                ) && (
+                    <>
+                      <OText size={20}>{t('SKU', 'Sku')}</OText>
+                      <OText>{product?.sku || productCart?.sku}</OText>
+                    </>
+                  )}
               </ProductDescription>
               <ProductEditions>
                 {product?.ingredients.length > 0 && (
@@ -504,7 +501,7 @@ export const ProductOptionsUI = (props: any) => {
               </TouchableOpacity>
             </View>
           )}
-          <View style={{ width: isSoldOut || maxProductQuantity <= 0 ? '100%' : isDrawer ? '70%':'80%' }}>
+          <View style={{ width: isSoldOut || maxProductQuantity <= 0 ? '100%' : isDrawer ? '70%' : '80%' }}>
             {productCart && !isSoldOut && maxProductQuantity > 0 && auth && orderState.options?.address_id && (
               <OButton
                 onClick={() => handleSaveProduct()}

package/themes/kiosk/src/components/shared/OButton.tsx

@@ -10,6 +10,8 @@ import {
 
 import * as React from 'react';
 import styled from 'styled-components/native';
+import AntDesignIcon from 'react-native-vector-icons/AntDesign'
+import { Icon, IconProps } from 'react-native-vector-icons/Icon';
 
 const StyledButton = styled.View<Props>`
   background-color: ${(props: any) => props.theme.colors.primary};
@@ -77,17 +79,19 @@ interface Props {
   isCircle?: boolean;
   bgColor?: string;
   borderColor?: string;
+  iconProps?: IconProps;
+  IconCustom?: React.FunctionComponent
 }
 
 const OButton = (props: Props): React.ReactElement => {
   if (props.isDisabled) {
     return (
       <View style={props.parentStyle}>
-      <StyledButtonDisabled style={props.style}>
-        <StyledTextDisabled style={props.disabledTextStyle ? props.disabledTextStyle : props.textStyle}>
-          {props.text}
-        </StyledTextDisabled>
-      </StyledButtonDisabled>
+        <StyledButtonDisabled style={props.style}>
+          <StyledTextDisabled style={props.disabledTextStyle ? props.disabledTextStyle : props.textStyle}>
+            {props.text}
+          </StyledTextDisabled>
+        </StyledButtonDisabled>
       </View>
     );
   }
@@ -111,6 +115,15 @@ const OButton = (props: Props): React.ReactElement => {
         {props.imgLeftSrc ? (
           <StyledImage style={props.imgLeftStyle} source={props.imgLeftSrc} />
         ) : null}
+        {props.iconProps ? (
+          <>
+            {props?.IconCustom ? (
+              <props.IconCustom {...props.iconProps} />
+            ) : (
+              <AntDesignIcon {...props.iconProps} />
+            )}
+          </>
+        ) : null}
         {props.text ? (
           <StyledText style={props.textStyle}>{props.text}</StyledText>
         ) : null}

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

@@ -33,8 +33,8 @@ const UpsellingProductsUI = (props: UpsellingProductsParams) => {
 		canOpenUpselling,
 		setCanOpenUpselling,
 		isFromCart,
-    onNavigationRedirect,
-    onGoBack
+		onNavigationRedirect,
+		onGoBack
 	} = props
 
 	const theme = useTheme();
@@ -71,16 +71,16 @@ const UpsellingProductsUI = (props: UpsellingProductsParams) => {
 	const [, t] = useLanguage()
 	const { bottom } = useSafeAreaInsets()
 
-  const cart = carts?.[`businessId:${props.businessId}`] ?? {}
-  const cartProducts = cart?.products?.length
-    ? cart?.products.map((product: any) => product.id)
-    : []
+	const cart = carts?.[`businessId:${props.businessId}`] ?? {}
+	const cartProducts = cart?.products?.length
+		? cart?.products.map((product: any) => product.id)
+		: []
 
-  const productsList = !upsellingProducts.loading && !upsellingProducts.error
-    ? upsellingProducts?.products?.length
-      ? upsellingProducts?.products.filter((product: any) => !cartProducts.includes(product.id))
-      : (props?.products ?? []).filter((product: any) => !cartProducts.includes(product.id)) ?? []
-    : []
+  	const productsList = !upsellingProducts.loading && !upsellingProducts.error
+      ? upsellingProducts?.products?.length
+      	? upsellingProducts?.products.filter((product: any) => !cartProducts.includes(product.id))
+      	: (props?.products ?? []).filter((product: any) => !cartProducts.includes(product.id)) ?? []
+      : []
 
 	useEffect(() => {
 		if (!isCustomMode && !props.products) {
@@ -94,6 +94,10 @@ const UpsellingProductsUI = (props: UpsellingProductsParams) => {
 		}
 	}, [upsellingProducts.loading, upsellingProducts?.products.length])
 
+	useEffect(() => {
+		Object.keys(cart).length === 0 && onNavigationRedirect && onNavigationRedirect('MyOrders')
+	}, [cart])
+
 	const handleFormProduct = (product: any) => {
     onNavigationRedirect && onNavigationRedirect('ProductDetails', {
       product: product,