ordering-ui-react-native 0.14.35 → 0.14.38

package/package.json

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

package/src/types/react-native-color-matrix-image-filters/index.d.ts

@@ -0,0 +1 @@
+declare module 'react-native-color-matrix-image-filters'

package/themes/original/index.tsx

@@ -30,6 +30,8 @@ import { NotFoundSource } from './src/components/NotFoundSource';
 import { OrderTypeSelector } from './src/components/OrderTypeSelector';
 import { Wallets } from './src/components/Wallets';
 import { PaymentOptionWallet } from './src/components/PaymentOptionWallet';
+import { ProductForm } from './src/components/ProductForm';
+import { UpsellingProducts } from './src/components/UpsellingProducts';
 
 import { Toast } from './src/components/shared/OToast';
 import {
@@ -90,6 +92,8 @@ export {
 	OrderTypeSelector,
   Wallets,
   PaymentOptionWallet,
+  ProductForm,
+  UpsellingProducts,
 
 	// OComponents
 	Toast,

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

@@ -46,7 +46,7 @@ const BusinessPreorderUI = (props: BusinessPreorderParams) => {
   const [menu, setMenu] = useState({})
   const [timeList, setTimeList] = useState<any>([])
   const [selectDate, setSelectedDate] = useState<any>(null)
-  const [datesWhitelist, setDateWhitelist] = useState<any>([{start: null, end: null}])
+  const [datesWhitelist, setDateWhitelist] = useState<any>([{ start: null, end: null }])
 
   const styles = StyleSheet.create({
     container: {
@@ -54,19 +54,19 @@ const BusinessPreorderUI = (props: BusinessPreorderParams) => {
       paddingVertical: 30,
       paddingHorizontal: 40
     },
-		businessLogo: {
-			backgroundColor: 'white',
-			width: 60,
-			height: 60,
-			borderRadius: 7.6,
-			justifyContent: 'center',
-			alignItems: 'center',
-			shadowColor: '#000000',
-			shadowOffset: { width: 0, height: 1 },
-			shadowOpacity: 0.1,
-			shadowRadius: 1,
-			elevation: 2
-		},
+    businessLogo: {
+      backgroundColor: 'white',
+      width: 60,
+      height: 60,
+      borderRadius: 7.6,
+      justifyContent: 'center',
+      alignItems: 'center',
+      shadowColor: '#000000',
+      shadowOffset: { width: 0, height: 1 },
+      shadowOpacity: 0.1,
+      shadowRadius: 1,
+      elevation: 2
+    },
     selectOption: {
       backgroundColor: theme.colors.backgroundGray100,
       borderRadius: 7.6,
@@ -82,7 +82,7 @@ const BusinessPreorderUI = (props: BusinessPreorderParams) => {
       paddingBottom: 15,
       borderBottomWidth: 1,
       borderColor: theme.colors.backgroundGray200,
-      height: 100
+      height: 100,
     },
     calendarHeaderContainer: {
       flex: 1,
@@ -101,35 +101,36 @@ const BusinessPreorderUI = (props: BusinessPreorderParams) => {
     dateNumber: {
       color: '#B1BCCC',
       fontSize: 16,
-      fontWeight: '500'
+      fontWeight: '500',
     },
     dateName: {
       color: '#B1BCCC',
       fontSize: 12,
-      textTransform: 'capitalize'
+      textTransform: 'capitalize',
     },
     highlightDateName: {
       color: '#344050',
       fontSize: 12,
-      textTransform: 'capitalize'
+      textTransform: 'capitalize',
     },
     highlightDateNumber: {
       color: '#344050',
       fontSize: 16,
-      textTransform: 'capitalize'
+      textTransform: 'capitalize',
     },
     disabledDateName: {
       color: '#B1BCCC',
       fontSize: 10,
       textTransform: 'capitalize',
-      opacity: 1
+      opacity: 1,
     },
     disabledDateNumber: {
       color: '#B1BCCC',
       fontSize: 14,
-      fontWeight: '500'
+      fontWeight: '500',
+
     }
-	})
+  })
 
   const preorderTypeList = [
     { key: 'business_hours', name: t('BUSINESS_HOURS', 'Business hours') },
@@ -191,7 +192,7 @@ const BusinessPreorderUI = (props: BusinessPreorderParams) => {
 
   const LeftSelector = () => {
     return (
-      <View style={{height: '100%', justifyContent: 'flex-end'}}>
+      <View style={{ height: '100%', justifyContent: 'flex-end' }}>
         <IconAntDesign
           name='caretleft'
           color={theme.colors.textNormal}
@@ -203,7 +204,7 @@ const BusinessPreorderUI = (props: BusinessPreorderParams) => {
 
   const RightSelector = () => {
     return (
-      <View style={{height: '100%', justifyContent: 'flex-end'}}>
+      <View style={{ height: '100%', justifyContent: 'flex-end' }}>
         <IconAntDesign
           name='caretright'
           color={theme.colors.textNormal}
@@ -280,7 +281,7 @@ const BusinessPreorderUI = (props: BusinessPreorderParams) => {
             name='close'
             color={theme.colors.textThird}
             size={24}
-            style={{ marginLeft: -4}}
+            style={{ marginLeft: -4 }}
           />
         </TouchableOpacity>
         <BusinessInfoWrapper>
@@ -294,8 +295,8 @@ const BusinessPreorderUI = (props: BusinessPreorderParams) => {
             <FastImage
               style={{ width: 59, height: 59 }}
               source={{
-                  uri: optimizeImage(business?.logo, 'h_60,c_limit'),
-                  priority: FastImage.priority.normal,
+                uri: optimizeImage(business?.logo, 'h_60,c_limit'),
+                priority: FastImage.priority.normal,
               }}
               resizeMode={FastImage.resizeMode.cover}
             />
@@ -372,7 +373,7 @@ const BusinessPreorderUI = (props: BusinessPreorderParams) => {
               setMenu={setMenu}
               menu={menu}
             />
-          </MenuWrapper> 
+          </MenuWrapper>
         )}
         <OrderTimeWrapper>
           <OText
@@ -393,14 +394,15 @@ const BusinessPreorderUI = (props: BusinessPreorderParams) => {
                 calendarHeaderStyle={styles.calendarHeader}
                 dateNumberStyle={styles.dateNumber}
                 dateNameStyle={styles.dateName}
-                iconContainer={{flex: 0.1}}
+                iconContainer={{ flex: 0.1 }}
                 highlightDateNameStyle={styles.highlightDateName}
                 highlightDateNumberStyle={styles.highlightDateNumber}
+                dayContainerStyle={{ height: '100%' }}
+                highlightDateContainerStyle={{ height: '100%' }}
                 calendarHeaderFormat='MMMM, YYYY'
-                iconStyle={{borderWidth: 1}}
+                iconStyle={{ borderWidth: 1 }}
                 selectedDate={selectDate}
                 datesWhitelist={datesWhitelist}
-                dayContainerStyle={{height: 40}}
                 disabledDateNameStyle={styles.disabledDateName}
                 disabledDateNumberStyle={styles.disabledDateNumber}
                 disabledDateOpacity={0.6}
@@ -417,7 +419,7 @@ const BusinessPreorderUI = (props: BusinessPreorderParams) => {
                   <TimeItem active={timeSelected === time.value}>
                     <OText
                       size={14}
-                      color={timeSelected === time.value ? theme.colors.primary: theme.colors.textNormal}
+                      color={timeSelected === time.value ? theme.colors.primary : theme.colors.textNormal}
                       style={{
                         lineHeight: 24
                       }}
@@ -426,15 +428,15 @@ const BusinessPreorderUI = (props: BusinessPreorderParams) => {
                 </TouchableOpacity>
               ))}
               {timeList.length % 3 === 2 && (
-                <TimeItem style={{backgroundColor: 'transparent'}}/>
+                <TimeItem style={{ backgroundColor: 'transparent' }} />
               )}
             </TimeContentWrapper>
           </TimeListWrapper>
         </OrderTimeWrapper>
         <OButton
           text={t('GO_TO_MENU', 'Go to menu')}
-          textStyle={{color: 'white'}}
-          style={{borderRadius: 7.6, marginBottom: 20, marginTop: 30}}
+          textStyle={{ color: 'white' }}
+          style={{ borderRadius: 7.6, marginBottom: 20, marginTop: 30 }}
           onClick={() => handleClickBusiness()}
         />
       </PreOrderContainer>

package/themes/original/src/components/BusinessProductsListing/UpsellingRedirect.tsx

@@ -0,0 +1,35 @@
+import React, { useEffect } from 'react'
+import { UpsellingPage as UpsellingPageController } from 'ordering-components/native'
+
+const UpsellingRedirectUI = (props: any) => {
+  const {
+    setOpenUpselling,
+    upsellingProducts,
+    handleUpsellingPage,
+    onRedirect,
+  } = props
+
+  useEffect(() => {
+    if (!upsellingProducts.loading) {
+      if (upsellingProducts?.products?.length) {
+        onRedirect &&
+          onRedirect('UpsellingPage', props)
+      } else {
+        handleUpsellingPage && handleUpsellingPage()
+      }
+      setOpenUpselling(false)
+    }
+  }, [upsellingProducts.loading, upsellingProducts?.products.length])
+
+  return (<>{null}</>)
+}
+
+export const UpsellingRedirect = (props: any) => {
+  const upsellingProps = {
+    ...props,
+    UIComponent: UpsellingRedirectUI
+  }
+  return (
+    <UpsellingPageController {...upsellingProps} />
+  )
+}

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

@@ -1,5 +1,5 @@
 import React, { useCallback, useEffect, useRef, useState } from 'react'
-import { View, TouchableOpacity, StyleSheet, SafeAreaView, Platform } from 'react-native'
+import { View, TouchableOpacity, StyleSheet, SafeAreaView } from 'react-native'
 import { useTheme } from 'styled-components/native';
 import {
 	BusinessAndProductList,
@@ -17,17 +17,13 @@ import { BusinessProductsCategories } from '../BusinessProductsCategories'
 import { BusinessProductsList } from '../BusinessProductsList'
 import { BusinessProductsListingParams } from '../../types'
 import {
-	WrapHeader,
 	TopHeader,
-	AddressInput,
 	WrapSearchBar,
 	WrapContent,
 	BusinessProductsListingContainer
 } from './styles'
 import { FloatingButton } from '../FloatingButton'
-import { ProductForm } from '../ProductForm'
-import { UpsellingProducts } from '../UpsellingProducts'
-import { useSafeAreaInsets } from 'react-native-safe-area-context';
+import { UpsellingRedirect } from './UpsellingRedirect'
 import Animated from 'react-native-reanimated'
 
 const PIXELS_TO_SCROLL = 1000
@@ -47,7 +43,7 @@ const BusinessProductsListingUI = (props: BusinessProductsListingParams) => {
 		errorQuantityProducts,
 		header,
 		logo,
-		getNextProducts
+		getNextProducts,
 	} = props
 
 	const theme = useTheme();
@@ -56,7 +52,6 @@ const BusinessProductsListingUI = (props: BusinessProductsListingParams) => {
 	const [orderState] = useOrder()
 	const [{ parsePrice }] = useUtils()
 	const [, { showToast }] = useToast()
-	const { top } = useSafeAreaInsets();
 
 	const styles = StyleSheet.create({
 		mainContainer: {
@@ -87,7 +82,6 @@ const BusinessProductsListingUI = (props: BusinessProductsListingParams) => {
 	const { business, loading, error } = businessState
 	const [openBusinessInformation, setOpenBusinessInformation] = useState(false)
 	const [isOpenSearchBar, setIsOpenSearchBar] = useState(false)
-	const [curProduct, setCurProduct] = useState(null)
 	const [openUpselling, setOpenUpselling] = useState(false)
 	const [canOpenUpselling, setCanOpenUpselling] = useState(false)
 	const scrollViewRef = useRef<any>(null)
@@ -102,7 +96,11 @@ const BusinessProductsListingUI = (props: BusinessProductsListingParams) => {
 	}
 
 	const onProductClick = (product: any) => {
-		setCurProduct(product)
+    onRedirect('ProductDetails', {
+			product: product,
+      businessSlug: business.slug,
+      businessId: business.id,
+		})
 	}
 
 	const handleCancel = () => {
@@ -110,14 +108,6 @@ const BusinessProductsListingUI = (props: BusinessProductsListingParams) => {
 		handleChangeSearch('')
 	}
 
-	const handleCloseProductModal = () => {
-		setCurProduct(null)
-	}
-
-	const handlerProductAction = () => {
-		handleCloseProductModal()
-	}
-
 	const handleUpsellingPage = () => {
 		onRedirect('CheckoutNavigator', {
 			screen: 'CheckoutPage',
@@ -166,13 +156,6 @@ const BusinessProductsListingUI = (props: BusinessProductsListingParams) => {
 		setCategoryClicked(false);
 	  }, []);
 
-
-	useEffect(() => {
-		if (!orderState.loading) {
-			handleCloseProductModal()
-		}
-	}, [orderState.loading])
-
 	return (
 		<SafeAreaView
 			style={{ flex: 1 }}
@@ -304,49 +287,35 @@ const BusinessProductsListingUI = (props: BusinessProductsListingParams) => {
 					</>
 				)}
 			</BusinessProductsListingContainer>
-			{!loading && auth && !openUpselling && currentCart?.products?.length > 0 && categoryState.products.length !== 0 && (
+			{!loading && auth && currentCart?.products?.length > 0 && categoryState.products.length !== 0 && (
 				<FloatingButton
 					btnText={
 						currentCart?.subtotal >= currentCart?.minimum
-							? !openUpselling ? t('VIEW_ORDER', 'View Order') : t('LOADING', 'Loading')
+							? t('VIEW_ORDER', 'View Order')
 							: `${t('MINIMUN_SUBTOTAL_ORDER', 'Minimum subtotal order:')} ${parsePrice(currentCart?.minimum)}`
 					}
 					isSecondaryBtn={currentCart?.subtotal < currentCart?.minimum}
-					btnLeftValueShow={currentCart?.subtotal >= currentCart?.minimum && !openUpselling && currentCart?.products?.length > 0}
-					btnRightValueShow={currentCart?.subtotal >= currentCart?.minimum && !openUpselling && currentCart?.products?.length > 0}
+					btnLeftValueShow={currentCart?.subtotal >= currentCart?.minimum && currentCart?.products?.length > 0}
+					btnRightValueShow={currentCart?.subtotal >= currentCart?.minimum && currentCart?.products?.length > 0}
 					btnLeftValue={currentCart?.products?.length}
 					btnRightValue={parsePrice(currentCart?.total)}
-					disabled={openUpselling || currentCart?.subtotal < currentCart?.minimum}
+					disabled={currentCart?.subtotal < currentCart?.minimum}
 					handleClick={() => setOpenUpselling(true)}
 				/>
 			)}
-			<OModal
-				open={!!curProduct}
-				onClose={handleCloseProductModal}
-				entireModal
-				customClose
-				isAvoidKeyBoardView
-			>
-				<ProductForm
-					product={curProduct}
-					businessSlug={business.slug}
-					businessId={business.id}
-					onClose={handleCloseProductModal}
-					navigation={navigation}
-					onSave={handlerProductAction}
-				/>
-			</OModal>
 			{openUpselling && (
-				<UpsellingProducts
+				<UpsellingRedirect
 					businessId={currentCart?.business_id}
 					business={currentCart?.business}
 					cartProducts={currentCart?.products}
 					cart={currentCart}
+          setOpenUpselling={setOpenUpselling}
 					handleUpsellingPage={handleUpsellingPage}
 					handleCloseUpsellingPage={handleCloseUpsellingPage}
 					openUpselling={openUpselling}
 					canOpenUpselling={canOpenUpselling}
 					setCanOpenUpselling={setCanOpenUpselling}
+          onRedirect={onRedirect}
 				/>
 			)}
 		</SafeAreaView>

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

@@ -17,7 +17,6 @@ import { BusinessItemAccordion } from '../BusinessItemAccordion';
 import { CouponControl } from '../CouponControl';
 
 import { OButton, OInput, OModal, OText } from '../shared';
-import { ProductForm } from '../ProductForm';
 import { UpsellingProducts } from '../UpsellingProducts';
 import { verifyDecimals } from '../../utils';
 import { ActivityIndicator, TouchableOpacity, View } from 'react-native';
@@ -35,10 +34,9 @@ const CartUI = (props: any) => {
     removeProduct,
     handleCartOpen,
     setIsCartsLoading,
-    hideUpselling,
     handleChangeComment,
-    commentState
-    // isFromCart
+    commentState,
+    onNavigationRedirect
   } = props
 
   const theme = useTheme();
@@ -49,8 +47,6 @@ const CartUI = (props: any) => {
   const [{ parsePrice, parseNumber, parseDate }] = useUtils()
   const [validationFields] = useValidationFields()
 
-  const [openProduct, setModalIsOpen] = useState(false)
-  const [curProduct, setCurProduct] = useState<any>(null)
   const [openUpselling, setOpenUpselling] = useState(false)
   const [openChangeStore, setOpenChangeStore] = useState(false)
   const [canOpenUpselling, setCanOpenUpselling] = useState(false)
@@ -71,14 +67,14 @@ const CartUI = (props: any) => {
   }
 
   const handleEditProduct = (product: any) => {
-    setCurProduct(product)
-    setModalIsOpen(true)
-  }
-
-  const handlerProductAction = (product: any) => {
-    if (Object.keys(product).length) {
-      setModalIsOpen(false)
-    }
+    onNavigationRedirect('ProductDetails', {
+      businessId,
+			isCartProduct: true,
+      productCart: product,
+      businessSlug: cart?.business?.slug,
+      categoryId: product?.category_id,
+      productId: product?.id,
+		})
   }
 
   const handleClearProducts = async () => {
@@ -329,23 +325,6 @@ const CartUI = (props: any) => {
           </CheckoutAction>
         )}
       </BusinessItemAccordion>
-      <OModal
-        open={openProduct}
-        entireModal
-        customClose
-        onClose={() => setModalIsOpen(false)}
-      >
-        <ProductForm
-          isCartProduct
-          productCart={curProduct}
-          businessSlug={cart?.business?.slug}
-          businessId={businessId}
-          categoryId={curProduct?.category_id}
-          productId={curProduct?.id}
-          onSave={handlerProductAction}
-          onClose={() => setModalIsOpen(false)}
-        />
-      </OModal>
 
       <OModal
         open={openChangeStore && props.isFranchiseApp}

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

@@ -546,6 +546,7 @@ const CheckoutUI = (props: any) => {
 										<OrderSummary
 											cart={cart}
 											isCartPending={cart?.status === 2}
+                      onNavigationRedirect={onNavigationRedirect}
 										/>
 									</>
 								)}

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

@@ -611,7 +611,9 @@ export const OrderDetailsUI = (props: OrderDetailsParams) => {
                   <OText size={16} style={{ textAlign: 'left' }} color={theme.colors.textNormal}>
                     {t('DELIVERY_PREFERENCE', 'Delivery Preference')}
                   </OText>
-                  <OText size={12} style={{ textAlign: 'left' }} color={theme.colors.textNormal}>{order?.delivery_option?.name ?? t('EITHER_WAY', 'Either way')}</OText>
+                  <OText size={12} style={{ textAlign: 'left' }} color={theme.colors.textNormal}>
+                    {order?.delivery_option?.name ? t(order?.delivery_option?.name.toUpperCase().replace(/\s/g, '_')) : t('EITHER_WAY', 'Either way')}
+                  </OText>
                 </View>
               )}
               {order?.comment && (

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

@@ -20,7 +20,6 @@ import {
 import { ProductItemAccordion } from '../ProductItemAccordion';
 import { CouponControl } from '../CouponControl';
 import { OInput, OModal, OText } from '../shared';
-import { ProductForm } from '../ProductForm';
 import { verifyDecimals } from '../../utils';
 import AntIcon from 'react-native-vector-icons/AntDesign'
 import { TaxInformation } from '../TaxInformation';
@@ -35,7 +34,8 @@ const OrderSummaryUI = (props: any) => {
     isCartPending,
     isFromCheckout,
     commentState,
-    handleChangeComment
+    handleChangeComment,
+    onNavigationRedirect
   } = props;
 
   const theme = useTheme()
@@ -44,8 +44,6 @@ const OrderSummaryUI = (props: any) => {
   const [orderState] = useOrder();
   const [{ parsePrice, parseNumber }] = useUtils();
   const [validationFields] = useValidationFields();
-  const [openProduct, setModalIsOpen] = useState(false)
-  const [curProduct, setCurProduct] = useState<any>(null)
   const [openTaxModal, setOpenTaxModal] = useState<any>({ open: false, data: null })
 
   const isCouponEnabled = validationFields?.fields?.checkout?.coupon?.enabled;
@@ -55,14 +53,15 @@ const OrderSummaryUI = (props: any) => {
   }
 
   const handleEditProduct = (product: any) => {
-    setCurProduct(product)
-    setModalIsOpen(true)
-  }
-
-  const handlerProductAction = (product: any) => {
-    if (Object.keys(product).length) {
-      setModalIsOpen(false)
-    }
+    onNavigationRedirect('ProductDetails', {
+      isCartProduct: true,
+      productCart: product,
+      businessSlug: cart?.business?.slug,
+      businessId: cart?.business_id,
+      categoryId: product?.category_id,
+      productId: product?.id,
+      isFromCheckout: isFromCheckout,
+		})
   }
 
   const getIncludedTaxes = () => {
@@ -242,24 +241,6 @@ const OrderSummaryUI = (props: any) => {
               )}
             </OSBill>
           )}
-          <OModal
-            open={openProduct}
-            entireModal
-            customClose
-            onClose={() => setModalIsOpen(false)}
-          >
-            <ProductForm
-              isCartProduct
-              productCart={curProduct}
-              businessSlug={cart?.business?.slug}
-              businessId={cart?.business_id}
-              categoryId={curProduct?.category_id}
-              productId={curProduct?.id}
-              onSave={handlerProductAction}
-              onClose={() => setModalIsOpen(false)}
-              isFromCheckout={isFromCheckout}
-            />
-          </OModal>
           <OModal
             open={openTaxModal.open}
             onClose={() => setOpenTaxModal({ open: false, data: null })}

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

@@ -16,10 +16,9 @@ import {
 	Grayscale
 } from 'react-native-color-matrix-image-filters'
 
-import { View, TouchableOpacity, StyleSheet, Dimensions, Platform, AppRegistry, I18nManager } from 'react-native';
+import { View, TouchableOpacity, StyleSheet, Dimensions, I18nManager, SafeAreaView } from 'react-native';
 
 import {
-	ProductHeader,
 	WrapHeader,
 	TopHeader,
 	WrapContent,
@@ -40,9 +39,7 @@ import { ScrollView } from 'react-native-gesture-handler';
 import { ProductOptionSubOption } from '../ProductOptionSubOption';
 import { NotFoundSource } from '../NotFoundSource';
 import { Placeholder, PlaceholderLine, Fade } from 'rn-placeholder';
-import { useSafeAreaInsets } from 'react-native-safe-area-context';
 import { useState } from 'react';
-import { useWindowDimensions } from 'react-native';
 
 const windowHeight = Dimensions.get('window').height;
 const windowWidth = Dimensions.get('window').width;
@@ -63,8 +60,6 @@ export const ProductOptionsUI = (props: any) => {
 		handleChangeSuboptionState,
 		handleChangeCommentState,
 		productObject,
-		onClose,
-		isFromCheckout,
 	} = props;
 
 	const theme = useTheme();
@@ -97,7 +92,7 @@ export const ProductOptionsUI = (props: any) => {
 		},
 		btnBackArrow: {
 			borderWidth: 0,
-			backgroundColor: 'rgba(0,0,0,0.3)',
+			backgroundColor: '#FFF',
 			borderRadius: 24,
 			marginRight: 15,
 		},
@@ -160,15 +155,13 @@ export const ProductOptionsUI = (props: any) => {
 	const [gallery, setGallery] = useState([])
 	const [thumbsSwiper, setThumbsSwiper] = useState(0)
 
-	const { top, bottom } = useSafeAreaInsets();
-	const { height } = useWindowDimensions();
 	const [selOpt, setSelectedOpt] = useState(0);
 	const [isHaveWeight, setIsHaveWeight] = useState(false)
 	const [qtyBy, setQtyBy] = useState({
 		weight_unit: false,
 		pieces: true
 	})
-	const [pricePerWeightUnit, setPricePerWeightUnit] = useState(null)
+	const [pricePerWeightUnit, setPricePerWeightUnit] = useState<any>(null)
 
 	const swiperRef: any = useRef(null)
 
@@ -187,10 +180,8 @@ export const ProductOptionsUI = (props: any) => {
 	};
 
 	const handleSaveProduct = () => {
-		console.log('----- click handle ------')
 		const isErrors = Object.values(errors).length > 0;
 		if (!isErrors) {
-			console.log('----- save handle ------')
 			handleSave && handleSave();
 			return;
 		}
@@ -220,7 +211,6 @@ export const ProductOptionsUI = (props: any) => {
 	}
 
 	const handleRedirectLogin = () => {
-		onClose();
 		navigation.navigate('Login');
 	};
 
@@ -298,14 +288,20 @@ export const ProductOptionsUI = (props: any) => {
 		</>
 	);
 
+  const handleGoBack = navigation?.canGoBack()
+    ? () => navigation.goBack()
+    : () => navigation.navigate('Business', { store: props.businessSlug })
+
 	return (
-		<>
-			<TopHeader>
-				<TouchableOpacity
-					style={styles.headerItem}
-					onPress={onClose}>
-					<OIcon src={theme.images.general.close} width={16} />
-				</TouchableOpacity>
+    <SafeAreaView style={{ flex: 1 }}>
+      <TopHeader>
+        <OButton
+          imgLeftSrc={theme.images.general.arrow_left}
+          imgRightSrc={null}
+          style={styles.btnBackArrow}
+          onClick={() => handleGoBack()}
+          imgLeftStyle={{ tintColor: theme.colors.textNormal, width: 16 }}
+        />
 			</TopHeader>
 			<ScrollView>
 				{!error && (
@@ -773,11 +769,7 @@ export const ProductOptionsUI = (props: any) => {
 				)}
 			</ScrollView>
 			{!loading && !error && product && (
-				<ProductActions
-					style={{
-						paddingBottom: Platform.OS === 'ios' ? bottom + 30 : bottom + 80
-					}}
-				>
+				<ProductActions>
 					<OText size={16} lineHeight={24} weight={'600'}>
 						{productCart.total ? parsePrice(productCart?.total) : ''}
 					</OText>
@@ -921,7 +913,7 @@ export const ProductOptionsUI = (props: any) => {
 					</View>
 				</ProductActions>
 			)}
-		</>
+    </SafeAreaView>
 	);
 };
 

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

@@ -11,7 +11,8 @@ export const TopHeader = styled.View`
   align-items: center;
   justify-content: space-between;
   z-index: 1;
-  padding-horizontal: 40px;
+  height: 60px;
+  min-height: 60px;
 `
 
 export const ProductHeader = styled.ImageBackground`
@@ -89,4 +90,4 @@ export const WeightUnitItem = styled.View`
   ${({ active }: any) => active && css`
     background-color: ${(props: any) => props.theme.colors.primary}20;
   `}
-`
+`

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

@@ -4,9 +4,10 @@ import {
 	UpsellingPage as UpsellingPageController,
 	useUtils,
 	useLanguage,
+  useOrder
 } from 'ordering-components/native'
 import { useTheme } from 'styled-components/native';
-import { OText, OIcon, OModal, OBottomPopup, OButton } from '../shared'
+import { OText, OIcon, OBottomPopup, OButton } from '../shared'
 import { UpsellingProductsParams } from '../../types'
 import {
 	Container,
@@ -14,11 +15,9 @@ import {
 	Item,
 	Details,
 	AddButton,
-	CloseUpselling,
 	TopBar,
 	TopActions
 } from './styles'
-import { ProductForm } from '../ProductForm';
 import { OrderSummary } from '../OrderSummary';
 import { ScrollView } from 'react-native-gesture-handler';
 import { useSafeAreaInsets } from 'react-native-safe-area-context';
@@ -28,18 +27,18 @@ const UpsellingProductsUI = (props: UpsellingProductsParams) => {
 		isCustomMode,
 		upsellingProducts,
 		business,
-		cart,
 		handleUpsellingPage,
 		handleCloseUpsellingPage,
 		openUpselling,
 		canOpenUpselling,
 		setCanOpenUpselling,
-		isFromCart
+		isFromCart,
+    onNavigationRedirect,
+    onGoBack
 	} = props
 
 	const theme = useTheme();
 
-
 	const styles = StyleSheet.create({
 		imageStyle: {
 			width: 73,
@@ -66,14 +65,25 @@ const UpsellingProductsUI = (props: UpsellingProductsParams) => {
 		}
 	})
 
-	const [actualProduct, setActualProduct] = useState<any>(null)
 	const [modalIsOpen, setModalIsOpen] = useState(false)
+	const [{ carts }] = useOrder()
 	const [{ parsePrice }] = useUtils()
 	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 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) {
+		if (!isCustomMode && !props.products) {
 			if (!upsellingProducts.loading) {
 				if (upsellingProducts?.products?.length && !isFromCart) {
 					setCanOpenUpselling && setCanOpenUpselling(true)
@@ -81,25 +91,15 @@ const UpsellingProductsUI = (props: UpsellingProductsParams) => {
 					handleUpsellingPage && handleUpsellingPage()
 				}
 			}
-			// if ((!upsellingProducts?.products?.length && !upsellingProducts.loading && !canOpenUpselling && openUpselling) ||
-			// 	(!upsellingProducts?.products?.length && !upsellingProducts.loading && openUpselling)) {
-			// 	handleUpsellingPage && handleUpsellingPage()
-			// }
 		}
 	}, [upsellingProducts.loading, upsellingProducts?.products.length])
 
-	useEffect(() => {
-		if (!cart?.validate && cart?.products?.length == 0) handleCloseUpsellingPage()
-	}, [cart])
-
 	const handleFormProduct = (product: any) => {
-		setActualProduct(product)
-		setModalIsOpen(true)
-	}
-
-	const handleSaveProduct = () => {
-		setActualProduct(null)
-		setModalIsOpen(false)
+    onNavigationRedirect && onNavigationRedirect('ProductDetails', {
+      product: product,
+      businessId: product?.api?.businessId,
+      businessSlug: business.slug,
+		})
 	}
 
 	const UpsellingLayout = () => {
@@ -114,7 +114,7 @@ const UpsellingProductsUI = (props: UpsellingProductsParams) => {
 						!upsellingProducts.loading && (
 							<>
 								{
-									!upsellingProducts.error ? upsellingProducts.products.map((product: any) => (
+									!upsellingProducts.error ? productsList.map((product: any) => (
 										<Item key={product.id}>
 											<View style={{ flexBasis: '57%' }}>
 												<Details>
@@ -125,7 +125,7 @@ const UpsellingProductsUI = (props: UpsellingProductsParams) => {
 													<OText size={10} color={theme.colors.primary}>{t('ADD', 'Add')}</OText>
 												</AddButton>
 											</View>
-											<View style={{}}>
+											<View>
 												<OIcon url={product.images} style={styles.imageStyle} />
 											</View>
 										</Item>
@@ -143,75 +143,73 @@ const UpsellingProductsUI = (props: UpsellingProductsParams) => {
 		)
 	}
 
+  const UpsellingContent = () => {
+    return (
+      <>
+        <TopBar style={{ paddingTop: Platform.OS == 'ios' ? 10 : 30 }}>
+          <TopActions onPress={() => onGoBack()}>
+            <OIcon src={theme.images.general.arrow_left} width={15} />
+          </TopActions>
+          <TopActions style={styles.cancelBtn} onPress={() => handleUpsellingPage()}>
+            <OText size={12} color={theme.colors.textSecondary}>{t('CANCEL', 'Cancel')}</OText>
+          </TopActions>
+        </TopBar>
+        <ScrollView style={{ marginBottom: props.isPage ? 40 : bottom + (Platform.OS == 'ios' ? 96 : 130) }} showsVerticalScrollIndicator={false}>
+          {productsList.length > 0 &&
+            <View style={{ paddingHorizontal: 40, overflow: 'visible' }}>
+              <OText size={16} lineHeight={24} weight={'500'}>{t('WANT_SOMETHING_ELSE', 'Do you want something else?')}</OText>
+              <UpsellingLayout />
+            </View>
+          }
+          <View style={{ paddingHorizontal: 40 }}>
+            <OText size={20} lineHeight={30} weight={600} style={{ marginTop: 10, marginBottom: 17 }}>{t('YOUR_CART', 'Your cart')}</OText>
+            <OrderSummary
+              cart={cart}
+              isCartPending={cart?.status === 2}
+              onNavigationRedirect={onNavigationRedirect}
+            />
+          </View>
+        </ScrollView>
+        <View
+          style={{
+            alignItems: 'center',
+            bottom: props.isPage ? 20 : Platform.OS === 'ios' ? bottom  + 59 :  bottom + 125
+          }}
+        >
+          <OButton
+            imgRightSrc=''
+            text={t('CHECKOUT', 'Checkout')}
+            style={{...styles.closeUpsellingButton}}
+            textStyle={{ color: theme.colors.white, fontSize: 14 }}
+            onClick={() => handleUpsellingPage()}
+          />
+        </View>
+      </>
+    )
+  }
+
 	return (
 		<>
 			{isCustomMode ? (
 				<UpsellingLayout />
 			) : (
 				<>
-					{!canOpenUpselling ? null : (
-						<>
-							{!modalIsOpen && (
-								<OBottomPopup
-									title={''}
-									open={openUpselling}
-									onClose={() => handleUpsellingPage()}
-									isStatusBar
-								>
-									<TopBar style={{ paddingTop: Platform.OS == 'ios' ? 10 : 30 }}>
-										<TopActions onPress={() => handleCloseUpsellingPage()}>
-											<OIcon src={theme.images.general.arrow_left} width={15} />
-										</TopActions>
-										<TopActions style={styles.cancelBtn} onPress={() => handleCloseUpsellingPage()}>
-											<OText size={12} color={theme.colors.textSecondary}>{t('CANCEL', 'Cancel')}</OText>
-										</TopActions>
-									</TopBar>
-									<ScrollView style={{ marginBottom: bottom + (Platform.OS == 'ios' ? 96 : 130) }} showsVerticalScrollIndicator={false}>
-										{upsellingProducts?.products?.length > 0 &&
-											<View style={{ paddingHorizontal: 40, overflow: 'visible' }}>
-												<OText size={16} lineHeight={24} weight={'500'}>{t('WANT_SOMETHING_ELSE', 'Do you want something else?')}</OText>
-												<UpsellingLayout />
-											</View>
-										}
-										<View style={{ paddingHorizontal: 40 }}>
-											<OText size={20} lineHeight={30} weight={600} style={{ marginTop: 10, marginBottom: 17 }}>{t('YOUR_CART', 'Your cart')}</OText>
-											<OrderSummary
-												cart={cart}
-												isCartPending={cart?.status === 2}
-											/>
-										</View>
-									</ScrollView>
-									<View style={{alignItems: 'center', bottom: Platform.OS === 'ios' ? bottom  + 59 :  bottom + 125}}>
-										<OButton
-											imgRightSrc=''
-											text={t('CHECKOUT', 'Checkout')}
-											style={{...styles.closeUpsellingButton}}
-											textStyle={{ color: theme.colors.white, fontSize: 14 }}
-											onClick={() => handleUpsellingPage()}
-										/>
-									</View>
-								</OBottomPopup>
-							)}
-						</>
-					)}
+          {props.isPage ? (
+            <UpsellingContent />
+          ) : (
+            canOpenUpselling && !modalIsOpen && (
+              <OBottomPopup
+                title={''}
+                open={openUpselling}
+                onClose={() => handleUpsellingPage()}
+                isStatusBar
+              >
+                <UpsellingContent />
+              </OBottomPopup>
+            )
+          )}
 				</>
 			)}
-			<OModal
-				open={modalIsOpen}
-				onClose={() => setModalIsOpen(false)}
-				entireModal
-				customClose
-			>
-				{actualProduct && (
-					<ProductForm
-						product={actualProduct}
-						businessId={actualProduct?.api?.businessId}
-						businessSlug={business.slug}
-						onSave={() => handleSaveProduct()}
-						onClose={() => setModalIsOpen(false)}
-					/>
-				)}
-			</OModal>
 		</>
 	)
 }

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

@@ -438,6 +438,10 @@ export interface UpsellingProductsParams {
 	cart?: any;
 	handleCloseUpsellingPage: () => void;
 	isFromCart?: boolean;
+	isPage?: boolean;
+	products?: any;
+	onNavigationRedirect?: any;
+	onGoBack?: any;
 }
 
 export interface GoogleMapsParams {