ordering-ui-react-native 0.14.30 → 0.14.31-release

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

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

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

@@ -76,6 +76,7 @@ export const ChCart = styled(ChPaymethods)``
 
 export const WalletPaymentOptionContainer = styled(ChPaymethods)`
   padding-bottom: 0;
+  margin-left: -20px;
 `
 
 export const ChPlaceOrderBtn = styled.View`

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

@@ -44,7 +44,7 @@ const DriverTipsUI = (props: any) => {
 			borderWidth: 1,
 			borderColor: theme.colors.inputDisabled,
 			marginRight: 10,
-			height: 44
+			height: 50
 		}
 	})
 
@@ -63,7 +63,7 @@ const DriverTipsUI = (props: any) => {
 	return (
 		<DTContainer>
 			<DTWrapperTips>
-				{driverTipsOptions.map((option: any, i: number) => (
+				{driverTipsOptions.map((option: any, i: number) => (				
 					<TouchableOpacity
 						key={i}
 						onPress={() => handlerChangeOption(option)}
@@ -72,7 +72,7 @@ const DriverTipsUI = (props: any) => {
 							style={style.circle}
 							isActive={option === optionSelected}
 						>
-							<OText size={13} color={option === optionSelected ? '#FFF' : theme.colors.textSecondary}>
+							<OText size={12} numberOfLines={1} color={option === optionSelected ? '#FFF' : theme.colors.textSecondary}>
 								{`${isFixedPrice ? parsePrice(option) : `${option}%`}`}
 							</OText>
 						</DTCard>

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

@@ -15,7 +15,7 @@ export const DTWrapperTips = styled.View`
   width: 100%;
   justify-content: space-evenly;
   align-items: center;
-  flex-wrap: nowrap;
+  flex-wrap: wrap;
 `
 
 export const DTCard = styled.View`
@@ -24,10 +24,10 @@ export const DTCard = styled.View`
   align-items: center;
   border: 1px solid ${(props: any) => props.isActive ? props.theme.colors.primary : props.theme.colors.border};
   text-transform: capitalize;
-  min-height: 48px;
-  min-width: 48px;
-  max-width: 48px;
-  max-height: 48px;
+  min-height: 55px;
+  min-width: 55px;
+  max-width: 55px;
+  max-height: 55px;
   margin-right: 10px;
   margin-left: 10px;
   margin-top: 10px;

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

@@ -11,7 +11,8 @@ export const FacebookLogin = (props: any) => {
 	const {
 		handleErrors,
 		handleLoading,
-		handleSuccessFacebookLogin
+		handleSuccessFacebookLogin,
+		notificationState
 	} = props
 
 	const [, t] = useLanguage()
@@ -30,7 +31,14 @@ export const FacebookLogin = (props: any) => {
 
 	const handleLoginClick = async (accessToken: string) => {
 		try {
-			const response = await ordering.users().authFacebook({ access_token: accessToken })
+			const body: any = {
+				access_token: accessToken
+			  }
+			  if (notificationState?.notification_token) {
+				body.notification_token = notificationState.notification_token
+				body.notification_app = notificationState.notification_app
+			  }
+			const response = await ordering.users().authFacebook(body)
 			if (!response.content.error) {
 				if (handleSuccessFacebookLogin) {
 					handleSuccessFacebookLogin(response.content.result)
@@ -38,9 +46,10 @@ export const FacebookLogin = (props: any) => {
 				}
 			} else {
 				handleLoading && handleLoading(false)
+				handleErrors && handleErrors(response.content.result)
 				logoutWithFacebook()
 			}
-		} catch (err) {
+		} catch (err: any) {
 			handleLoading && handleLoading(false)
 			handleErrors && handleErrors(err.message)
 		}
@@ -48,7 +57,7 @@ export const FacebookLogin = (props: any) => {
 
 	const loginWithFacebook = () => {
 		handleLoading && handleLoading(true)
-		LoginManager && LoginManager.logInWithPermissions(['public_profile']).then(
+		LoginManager && LoginManager.logInWithPermissions(['public_profile', 'email']).then(
 			(login: any) => {
 				if (login.isCancelled) {
 					const err = t('LOGIN_WITH_FACEBOOK_CANCELLED', 'Login cancelled')
@@ -58,6 +67,9 @@ export const FacebookLogin = (props: any) => {
 					AccessToken.getCurrentAccessToken().then((data: any) => {
 						const accessToken = data.accessToken.toString();
 						handleLoginClick(accessToken)
+					}).catch((err : any) => {
+						handleErrors && handleErrors(err.message)
+						handleLoading && handleLoading(false)
 					});
 				}
 			},
@@ -68,7 +80,10 @@ export const FacebookLogin = (props: any) => {
 				handleLoading && handleLoading(false)
 				handleErrors && handleErrors(err)
 			},
-		);
+		).catch((err : any) => {
+			handleErrors && handleErrors(err.message)
+			handleLoading && handleLoading(false)
+		});
 	};
 
 	const onPressButton = auth

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

@@ -48,7 +48,7 @@ export const Help = (props: HelpParams) => {
 
       <LastOrdersContainer>
         <OText size={18} weight={600}>{t('LAST_ORDERS', 'Last Orders')}</OText>
-        <LastOrders businessId={props.businessId} onRedirect={onRedirect} />
+        <LastOrders {...props} onRedirect={onRedirect} />
       </LastOrdersContainer>
     </>
   )

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

@@ -5,11 +5,11 @@ import { StyleSheet, View } from 'react-native';
 import { OButton, OIcon, OText } from '../shared';
 import { LanguageSelector } from '../LanguageSelector';
 import { TouchableOpacity } from 'react-native-gesture-handler';
-import { useWindowDimensions } from 'react-native';
+import { useWindowDimensions, Platform } from 'react-native';
 
 export const Home = (props: any) => {
 	const { onNavigationRedirect } = props;
-	const { width } = useWindowDimensions();
+	const { width, height } = useWindowDimensions();
 	const [, t] = useLanguage();
 	const [orderState] = useOrder();
 
@@ -18,7 +18,9 @@ export const Home = (props: any) => {
 	return (
 		<View style={styles.container}>
 			<View>
-				<LanguageSelector />
+				<View style={{paddingTop: (height <= 756 && Platform.OS !== 'ios') ? (height * 0.05) : 0 }}>
+					<LanguageSelector />
+				</View>
 				<OIcon
 					src={theme.images.logos.logotypeInvert}
 					style={{

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

@@ -436,59 +436,60 @@ const LoginFormUI = (props: LoginParams) => {
 						</>
 					)}
 
-				<View
-					style={{
-						flexDirection: 'row',
-						width: '100%',
-						justifyContent: 'space-between',
-						alignItems: 'center',
-						marginVertical: 15
-					}}>
-					<View style={loginStyle.line} />
-					<OText
-						size={14}
-						mBottom={10}
-						style={{ paddingHorizontal: 19 }}
-						color={theme.colors.disabled}>
-						{t('OR', 'or')}
-					</OText>
-					<View style={loginStyle.line} />
-				</View>
-
 				{configs && Object.keys(configs).length > 0 ? (
           (((configs?.facebook_login?.value === 'true' || configs?.facebook_login?.value === '1') && configs?.facebook_id?.value) ||
           (configs?.google_login_client_id?.value !== '' && configs?.google_login_client_id?.value !== null)) &&
           (
-						<ButtonsWrapper>
-							<SocialButtons>
-								{(configs?.facebook_login?.value === 'true' || configs?.facebook_login?.value === '1') &&
-                  configs?.facebook_id?.value && (
-									<FacebookLogin
-										notificationState={notificationState}
-										handleErrors={(err: any) => showToast(ToastType.Error, err)}
-										handleLoading={(val: boolean) => setIsFBLoading(val)}
-										handleSuccessFacebookLogin={handleSuccessFacebook}
-									/>
-								)}
-                {(configs?.google_login_client_id?.value !== '' && configs?.google_login_client_id?.value !== null) && (
-									<GoogleLogin
-										notificationState={notificationState}
-										webClientId={configs?.google_login_client_id?.value}
-										handleErrors={(err: any) => showToast(ToastType.Error, err)}
-										handleLoading={(val: boolean) => setIsFBLoading(val)}
-										handleSuccessGoogleLogin={handleSuccessFacebook}
-									/>
-								)}
-                {(configs?.apple_login_client_id?.value !== '' && configs?.google_login_client_id?.value !== null) && (
-									<AppleLogin
-										notificationState={notificationState}
-										handleErrors={(err: any) => showToast(ToastType.Error, err)}
-										handleLoading={(val: boolean) => setIsFBLoading(val)}
-										handleSuccessAppleLogin={handleSuccessFacebook}
-									/>
-								)}
-							</SocialButtons>
-						</ButtonsWrapper>
+            <>
+            	<View
+                style={{
+                  flexDirection: 'row',
+                  width: '100%',
+                  justifyContent: 'space-between',
+                  alignItems: 'center',
+                  marginVertical: 15
+                }}>
+                <View style={loginStyle.line} />
+                <OText
+                  size={14}
+                  mBottom={10}
+                  style={{ paddingHorizontal: 19 }}
+                  color={theme.colors.disabled}>
+                  {t('OR', 'or')}
+                </OText>
+                <View style={loginStyle.line} />
+              </View>
+              <ButtonsWrapper>
+                <SocialButtons>
+                  {(configs?.facebook_login?.value === 'true' || configs?.facebook_login?.value === '1') &&
+                    configs?.facebook_id?.value && (
+                    <FacebookLogin
+                      notificationState={notificationState}
+                      handleErrors={(err: any) => showToast(ToastType.Error, err)}
+                      handleLoading={(val: boolean) => setIsFBLoading(val)}
+                      handleSuccessFacebookLogin={handleSuccessFacebook}
+                    />
+                  )}
+                  {(configs?.google_login_client_id?.value !== '' && configs?.google_login_client_id?.value !== null) && (
+                    <GoogleLogin
+                      notificationState={notificationState}
+                      webClientId={configs?.google_login_client_id?.value}
+                      handleErrors={(err: any) => showToast(ToastType.Error, err)}
+                      handleLoading={(val: boolean) => setIsFBLoading(val)}
+                      handleSuccessGoogleLogin={handleSuccessFacebook}
+                    />
+                  )}
+                  {(configs?.apple_login_client_id?.value !== '' && configs?.google_login_client_id?.value !== null) && (
+                    <AppleLogin
+                      notificationState={notificationState}
+                      handleErrors={(err: any) => showToast(ToastType.Error, err)}
+                      handleLoading={(val: boolean) => setIsFBLoading(val)}
+                      handleSuccessAppleLogin={handleSuccessFacebook}
+                    />
+                  )}
+                </SocialButtons>
+              </ButtonsWrapper>
+            </>
 					)
 				) : (
 					<SkeletonWrapper>

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

@@ -1,5 +1,5 @@
 import React, { useState, useEffect } from 'react'
-import { useLanguage, useOrder, ToastType, useToast, OrderList, OrderDetails as OrderDetailsConTableoller } from 'ordering-components/native'
+import { useLanguage, useOrder, ToastType, useToast, OrderList, OrderDetails as OrderDetailsConTableoller, useBusiness } from 'ordering-components/native'
 import { useTheme } from 'styled-components/native';
 import { useFocusEffect } from '@react-navigation/native'
 import { OText, OModal } from '../shared'
@@ -214,6 +214,7 @@ const OrderMessageUI = (props: any) => {
 }
 
 export const OrderListing = (props: OrdersOptionParams) => {
+  const [businessState] = useBusiness();
 	const OrderListingProps = {
 		...props,
 		UIComponent: OrdersOptionUI,
@@ -224,6 +225,7 @@ export const OrderListing = (props: OrdersOptionParams) => {
 			pageSize: 10,
 			controlType: 'infinity'
 		},
+    businessId: businessState?.business?.id,
 		profileMessages: true,
 		orderBy: 'last_direct_message_at',
 		orderDirection: 'asc'
@@ -287,6 +289,7 @@ export const MessageListing = (props: MessageListingParams) => {
 				setSelectedOrderId={setSelectedOrderId}
 				setOrderList={setOrderListStatus}
 				setOpenMessges={setOpenMessges}
+        franchiseId={props.franchiseId}
 			/>
 			{openMessages && seletedOrder && (
 				<OModal
@@ -304,4 +307,3 @@ export const MessageListing = (props: MessageListingParams) => {
 		</MessageListingWrapper>
 	)
 }
-

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 })}