ordering-ui-react-native 0.14.61 → 0.14.64

package/package.json

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

package/src/components/Checkout/index.tsx

@@ -55,6 +55,7 @@ import { ActivityIndicator } from 'react-native-paper';
 import WebView from 'react-native-webview';
 import Icon from 'react-native-vector-icons/Feather';
 import { OrderCreating } from '../OrderCreating';
+import { PaymentOptionsWebView } from '../PaymentOptionsWebView';
 
 const mapConfigs = {
   mapZoom: 16,
@@ -129,16 +130,12 @@ const CheckoutUI = (props: any) => {
   const [{ options, carts, loading }, { confirmCart }] = useOrder();
   const [validationFields] = useValidationFields();
   const [ordering] = useApi()
-  const webviewRef = useRef<any>(null)
-  const webviewRefSquare = useRef<any>(null)
   const [errorCash, setErrorCash] = useState(false);
   const [userErrors, setUserErrors] = useState<any>([]);
   const [isUserDetailsEdit, setIsUserDetailsEdit] = useState(false);
   const [phoneUpdate, setPhoneUpdate] = useState(false);
   const [showGateway, setShowGateway] = useState<any>({ closedByUsed: false, open: false });
   const [webviewPaymethod, setWebviewPaymethod] = useState<any>(null)
-  const [progClr, setProgClr] = useState('#424242');
-  const [prog, setProg] = useState(true);
   const [openOrderCreating, setOpenOrderCreating] = useState(false)
   const [cardData, setCardData] = useState(null)
   const [isDeliveryOptionModalVisible, setIsDeliveryOptionModalVisible] = useState(false)
@@ -202,29 +199,6 @@ const CheckoutUI = (props: any) => {
     setPhoneUpdate(val)
   }
 
-  const onMessage = (e: any) => {
-    if (e?.nativeEvent?.data && e?.nativeEvent?.data !== 'undefined') {
-      let payment = JSON.parse(e.nativeEvent.data);
-      setOpenOrderCreating(true)
-      if (payment === 'api error') {
-        setShowGateway({ closedByUser: true, open: false })
-        setProg(true);
-      }
-
-      if (payment) {
-        if (payment.error) {
-          showToast(ToastType.Error, payment.result)
-          setOpenOrderCreating(false)
-        } else if (payment?.result?.order?.uuid) {
-          showToast(ToastType.Success, t('ORDER_PLACED_SUCCESSfULLY', 'The order was placed successfully'))
-          onNavigationRedirect && onNavigationRedirect('OrderDetails', { orderId: payment?.result?.order?.uuid, goToBusinessList: true })
-        }
-        setProg(true);
-        setShowGateway({ closedByUser: false, open: false })
-      }
-    }
-  }
-
   const onFailPaypal = async () => {
     if (showGateway.closedByUser === true) {
       await confirmCart(cart.uuid)
@@ -236,11 +210,6 @@ const CheckoutUI = (props: any) => {
     setWebviewPaymethod(paymethod)
   }
 
-  const handleCloseWebview = () => {
-    setProg(true);
-    setShowGateway({ open: false, closedByUser: true })
-  }
-
   const changeDeliveryOption = (option: any) => {
     handleChangeDeliveryOption(option)
     setIsDeliveryOptionModalVisible(false)
@@ -649,141 +618,32 @@ const CheckoutUI = (props: any) => {
         </>
       )}
       {webviewPaymethod?.gateway === 'paypal' && showGateway.open && (
-        <View style={{ zIndex: 9999, height: '100%', width: '100%', position: 'absolute', backgroundColor: 'white' }}>
-          <Icon
-            name="x"
-            size={35}
-            style={{ backgroundColor: 'white', paddingTop: 30, paddingLeft: 10 }}
-            onPress={handleCloseWebview}
-          />
-          <OText
-            style={{
-              textAlign: 'center',
-              fontSize: 16,
-              fontWeight: 'bold',
-              color: '#00457C',
-              marginBottom: 5,
-              marginTop: 10
-            }}>
-            {t('PAYPAL_GATEWAY', 'PayPal GateWay')}
-          </OText>
-          <View style={{ padding: 20, opacity: prog ? 1 : 0, backgroundColor: 'white' }}>
-            <ActivityIndicator size={24} color={progClr} />
-          </View>
-          <WebView
-            source={{ uri: `${ordering.root}/html/paypal_react_native` }}
-            onMessage={onMessage}
-            ref={webviewRef}
-            javaScriptEnabled={true}
-            javaScriptEnabledAndroid={true}
-            cacheEnabled={false}
-            cacheMode='LOAD_NO_CACHE'
-            style={{ flex: 1 }}
-            onLoadStart={() => {
-              setProg(true);
-              setProgClr('#424242');
-            }}
-            onLoadProgress={() => {
-              setProg(true);
-              setProgClr('#00457C');
-            }}
-            onLoad={() => {
-              setProg(true);
-              setProgClr('#00457C');
-            }}
-            onLoadEnd={(e) => {
-              const message = {
-                action: 'init',
-                data: {
-                  urlPlace: `${ordering.root}/carts/${cart?.uuid}/place`,
-                  urlConfirm: `${ordering.root}/carts/${cart?.uuid}/confirm`,
-                  payData: {
-                    paymethod_id: webviewPaymethod?.id,
-                    amount: cart?.total,
-                    delivery_zone_id: cart?.delivery_zone_id,
-                    user_id: user?.id
-                  },
-                  currency: configs?.stripe_currency?.value || currency,
-                  userToken: token,
-                  clientId: webviewPaymethod?.credentials?.client_id
-                }
-              }
-              setProg(false);
-              webviewRef?.current?.postMessage?.(JSON.stringify(message))
-            }}
+          <PaymentOptionsWebView
+            onNavigationRedirect={onNavigationRedirect}
+            uri={`${ordering.root}/html/paypal_react_native`}
+            user={user}
+            token={token}
+            cart={cart}
+            currency={currency}
+            webviewPaymethod={webviewPaymethod}
+            setShowGateway={setShowGateway}
+            setOpenOrderCreating={setOpenOrderCreating}
           />
-        </View>
       )}
       {webviewPaymethod?.gateway === 'square' && showGateway.open && (
-        <View style={{ zIndex: 9999, height: '100%', width: '100%', position: 'absolute', backgroundColor: 'white' }}>
-          <Icon
-            name="x"
-            size={35}
-            style={{ backgroundColor: 'white', paddingTop: 30, paddingLeft: 10 }}
-            onPress={handleCloseWebview}
+          <PaymentOptionsWebView
+            onNavigationRedirect={onNavigationRedirect}
+            uri={`https://test-square-f50f7.web.app`}
+            user={user}
+            token={token}
+            cart={cart}
+            currency={currency}
+            webviewPaymethod={webviewPaymethod}
+            setShowGateway={setShowGateway}
+            setOpenOrderCreating={setOpenOrderCreating}
+            locationId={'L1NGAY5M6KJRX'}
           />
-          <OText
-            style={{
-              textAlign: 'center',
-              fontSize: 16,
-              fontWeight: 'bold',
-              color: '#00457C',
-              marginBottom: 5,
-              marginTop: 10
-            }}>
-            {t('SQUARE_PAYMENT', 'Square payment')}
-          </OText>
-          <View style={{ padding: 20, opacity: prog ? 1 : 0, backgroundColor: 'white' }}>
-            <ActivityIndicator size={24} color={progClr} />
-          </View>
-          <WebView
-            source={{ uri: `https://test-square-f50f7.web.app` }}
-            onMessage={onMessage}
-            ref={webviewRefSquare}
-            javaScriptEnabled={true}
-            javaScriptEnabledAndroid={true}
-            cacheEnabled={false}
-            cacheMode='LOAD_NO_CACHE'
-            style={{ flex: 1 }}
-            onShouldStartLoadWithRequest={() => true}
-            onLoadStart={() => {
-              setProg(true);
-              setProgClr('#424242');
-            }}
-            onLoadProgress={() => {
-              setProg(true);
-              setProgClr('#00457C');
-            }}
-            onLoad={() => {
-              setProg(true);
-              setProgClr('#00457C');
-            }}
-            onLoadEnd={(e) => {
-              const message = {
-                action: 'init',
-                data: {
-                  urlPlace: `${ordering.root}/carts/${cart?.uuid}/place`,
-                  urlConfirm: `${ordering.root}/carts/${cart?.uuid}/confirm`,
-                  payData: {
-                    paymethod_id: webviewPaymethod?.id,
-                    amount: cart?.total,
-                    delivery_zone_id: cart?.delivery_zone_id,
-                    user_id: user?.id,
-                    user_name: user?.name
-                  },
-                  currency: configs?.stripe_currency?.value || currency,
-                  userToken: token,
-                  clientId: 'sandbox-sq0idb-rMLAce87hOfpGvokZCygEw',
-                  locationId: 'L1NGAY5M6KJRX'
-                }
-              }
-              setProg(false);
-              webviewRefSquare?.current?.postMessage?.(JSON.stringify(message))
-            }}
-          />
-        </View>
-      )
-      }
+      )}
       {openOrderCreating && (
         <View style={{ zIndex: 9999, height: '100%', width: '100%', position: 'absolute', backgroundColor: 'white' }}>
           <OrderCreating

package/src/components/PaymentOptions/index.tsx

@@ -45,6 +45,8 @@ const stripeOptions: any = ['stripe_direct', 'stripe', 'stripe_connect']
 //   { name: 'iDEAL', value: 'ideal' }
 // ]
 
+const webViewPaymentGateway: any = ['paypal', 'square']
+
 const PaymentOptionsUI = (props: any) => {
   const {
     cart,
@@ -92,7 +94,7 @@ const PaymentOptionsUI = (props: any) => {
   const handlePaymentMethodClick = (paymethod: any) => {
     const isPopupMethod = ['stripe', 'stripe_direct', 'stripe_connect', 'stripe_redirect', 'paypal', 'square'].includes(paymethod?.gateway)
     handlePaymethodClick(paymethod, isPopupMethod)
-    if(paymethod?.gateway === 'paypal' || paymethod?.gateway === 'square') {
+		if (webViewPaymentGateway.includes(paymethod?.gateway)) {
       handlePaymentMethodClickCustom(paymethod)
     }
     setCardData(paymethodData)

package/src/components/PaymentOptionsWebView/index.tsx

@@ -0,0 +1,150 @@
+import React, { useRef, useState } from 'react'
+import { View } from 'react-native';
+import Icon from 'react-native-vector-icons/Feather';
+import WebView from 'react-native-webview';
+import { ActivityIndicator } from 'react-native-paper';
+
+import {
+    ToastType,
+    useToast,
+    useApi,
+    useLanguage,
+    useConfig
+} from 'ordering-components/native';
+
+import { OText } from '../shared';
+
+interface PaymentOptionsWebViewParams {
+    onNavigationRedirect?: Function,
+    uri?: any,
+    user?: any,
+    token?: any,
+    cart?: any,
+    currency?: any,
+    webviewPaymethod?: any,
+    setShowGateway?: any,
+    setOpenOrderCreating?: any,
+    locationId?: any
+}
+export const PaymentOptionsWebView = (props: PaymentOptionsWebViewParams) => {
+    const { 
+        onNavigationRedirect,
+        uri,
+        user,
+        token,
+        cart,
+        currency,
+        webviewPaymethod,
+        setShowGateway,
+        setOpenOrderCreating,
+        locationId
+    } = props
+
+   const webviewRef = useRef<any>(null)
+   const [, { showToast }] = useToast();
+   const [ordering] = useApi()
+   const [{ configs }] = useConfig();
+   const [, t] = useLanguage();
+
+   
+   const [progClr, setProgClr] = useState('#424242');
+   const [prog, setProg] = useState(true);
+
+   const handleCloseWebview = () => {
+    setProg(true);
+    setShowGateway({ open: false, closedByUser: true })
+  }
+
+   const onMessage = (e: any) => {
+        if (e?.nativeEvent?.data && e?.nativeEvent?.data !== 'undefined') {
+            let payment = JSON.parse(e.nativeEvent.data);
+
+            if (payment === 'api error') {
+                setShowGateway({ closedByUser: true, open: false })
+                setProg(true);
+            }
+
+            if (payment) {
+                if (payment.error) {
+                showToast(ToastType.Error, payment.result)
+                setOpenOrderCreating && setOpenOrderCreating(false)
+                } else if (payment?.result?.order?.uuid) {
+                showToast(ToastType.Success, t('ORDER_PLACED_SUCCESSfULLY', 'The order was placed successfully'))
+                onNavigationRedirect && onNavigationRedirect('OrderDetails', { orderId: payment?.result?.order?.uuid, isFromCheckout: true})
+                }
+                setProg(true);
+                setShowGateway({ closedByUser: false, open: false })
+            }
+        }
+   }
+
+   return (
+    <View style={{ zIndex: 9999, height: '100%', width: '100%', position: 'absolute', backgroundColor: 'white' }}>
+          <Icon
+            name="x"
+            size={35}
+            style={{ backgroundColor: 'white', paddingTop: 30, paddingLeft: 10 }}
+            onPress={handleCloseWebview}
+          />
+          <OText
+            style={{
+              textAlign: 'center',
+              fontSize: 16,
+              fontWeight: 'bold',
+              color: '#00457C',
+              marginBottom: 5,
+              marginTop: 10
+            }}>
+           {webviewPaymethod?.gateway === 'paypal' ? (t('PAYPAL_GATEWAY', 'PayPal GateWay')) : (t('SQUARE_PAYMENT', 'Square payment'))}
+          </OText>
+          <View style={{ padding: 20, opacity: prog ? 1 : 0, backgroundColor: 'white' }}>
+            <ActivityIndicator size={24} color={progClr} />
+          </View>
+          <WebView
+            source={{ uri: uri }}
+            onMessage={onMessage}
+            ref={webviewRef}
+            javaScriptEnabled={true}
+            javaScriptEnabledAndroid={true}
+            cacheEnabled={false}
+            cacheMode='LOAD_NO_CACHE'
+            style={{ flex: 1 }}
+            onShouldStartLoadWithRequest={() => true}
+            onLoadStart={() => {
+              setProg(true);
+              setProgClr('#424242');
+            }}
+            onLoadProgress={() => {
+              setProg(true);
+              setProgClr('#00457C');
+            }}
+            onLoad={() => {
+              setProg(true);
+              setProgClr('#00457C');
+            }}
+            onLoadEnd={(e) => {
+            const messageParams = locationId ? { locationId } : {}
+              const message = {
+                action: 'init',
+                data: {
+                  urlPlace: `${ordering.root}/carts/${cart?.uuid}/place`,
+                  urlConfirm: `${ordering.root}/carts/${cart?.uuid}/confirm`,
+                  payData: {
+                    paymethod_id: webviewPaymethod?.id,
+                    amount: cart?.balance ?? cart?.total,
+                    delivery_zone_id: cart?.delivery_zone_id,
+                    user_id: user?.id,
+                    user_name: user?.name
+                  },
+                  currency: configs?.stripe_currency?.value || currency,
+                  userToken: token,
+                  clientId: webviewPaymethod?.credentials?.client_id,
+                  ...messageParams
+                }
+              }
+              setProg(false);
+              webviewRef?.current?.postMessage?.(JSON.stringify(message))
+            }}
+          />
+    </View>
+)}

package/src/index.tsx

@@ -45,6 +45,7 @@ import { OrdersOption } from './components/OrdersOption';
 import { PaymentOptionCash } from './components/PaymentOptionCash';
 import { PaymentOptionStripe } from './components/PaymentOptionStripe';
 import { PaymentOptions } from './components/PaymentOptions';
+import { PaymentOptionsWebView } from './components/PaymentOptionsWebView';
 import { PhoneInputNumber } from './components/PhoneInputNumber';
 import { PreviousOrders } from './components/PreviousOrders';
 import { ProductForm } from './components/ProductForm';
@@ -144,6 +145,7 @@ export {
   PaymentOptionCash,
   PaymentOptionStripe,
   PaymentOptions,
+  PaymentOptionsWebView,
   PhoneInputNumber,
   PreviousOrders,
   ProductForm,

package/themes/business/src/components/OrderDetails/OrderContentComponent.tsx

@@ -45,6 +45,15 @@ export const OrderContentComponent = (props: OrderContent) => {
 
   const pastOrderStatuses = [1, 2, 5, 6, 10, 11, 12, 16, 17]
 
+  const walletName: any = {
+    cash: {
+      name: t('PAY_WITH_CASH_WALLET', 'Pay with Cash Wallet'),
+    },
+    credit_point: {
+      name: t('PAY_WITH_CREDITS_POINTS_WALLET', 'Pay with Credit Points Wallet'),
+    }
+  }
+
   const styles = StyleSheet.create({
     linkWithIcons: {
       flexDirection: 'row',
@@ -441,7 +450,7 @@ export const OrderContentComponent = (props: OrderContent) => {
           )
         }
 
-        <Total>
+        <Total style={{ paddingBottom: 10 }}>
           <Table>
             <OText mBottom={4} style={styles.textBold}>
               {t('TOTAL', 'Total')}
@@ -455,6 +464,52 @@ export const OrderContentComponent = (props: OrderContent) => {
             </OText>
           </Table>
         </Total>
+
+        {order?.payment_events?.length > 0 && (
+          <View>
+            <OText size={14} color={theme.colors.textNormal}>{t('PAYMENTS', 'Payments')}</OText>
+            <View
+              style={{
+                width: '100%',
+                marginTop: 5
+              }}
+            >
+              {order?.payment_events?.map((event: any) => (
+                <View
+                  key={event.id}
+                  style={{
+                    display: 'flex',
+                    flexDirection: 'row',
+                    justifyContent: 'space-between',
+                    alignItems: 'center',
+                    marginBottom: 10
+                  }}
+                >
+                  <View
+                    style={{
+                      display: 'flex',
+                      flexDirection: 'column',
+                    }}
+                  >
+                    <OText>
+                      {event?.wallet_event
+                        ? walletName[event?.wallet_event?.wallet?.type]?.name
+                        : event?.paymethod?.name}
+                    </OText>
+                    {event?.data?.charge_id && (
+                      <OText>
+                        {`${t('CODE', 'Code')}: ${event?.data?.charge_id}`}
+                      </OText>
+                    )}
+                  </View>
+                  <OText>
+                    -{parsePrice(event.amount)}
+                  </OText>
+                </View>
+              ))}
+            </View>
+          </View>
+        )}
       </OrderBill >
       <OModal
         open={openReviewModal}

package/themes/business/src/components/OrderDetails/OrderHeaderComponent.tsx

@@ -14,7 +14,7 @@ import {
 } from '../shared'
 
 import { useTheme } from 'styled-components/native';
-import { StyleSheet } from 'react-native';
+import { StyleSheet, View } from 'react-native';
 
 import {
   useLanguage,
@@ -84,6 +84,25 @@ export const OrderHeaderComponent = (props: OrderHeader) => {
     17: theme.colors.statusOrderRed,
   };
 
+  const walletName: any = {
+    cash: {
+      name: t('CASH_WALLET', 'Cash Wallet'),
+    },
+    credit_point: {
+      name: t('CREDITS_POINTS_WALLET', 'Credit Points Wallet'),
+    }
+  }
+
+  const orderTypes = (type: number) => type === 1
+    ? t('DELIVERY', 'Delivery')
+    : order.delivery_type === 2
+      ? t('PICKUP', 'Pickup')
+      : order.delivery_type === 3
+        ? t('EAT_IN', 'Eat in')
+        : order.delivery_type === 4
+          ? t('CURBSIDE', 'Curbside')
+          : t('DRIVER_THRU', 'Driver thru')
+
   return (
     <>
       <Header>
@@ -176,18 +195,30 @@ export const OrderHeaderComponent = (props: OrderHeader) => {
           </>
         </OText>
         {!order?.isLogistic && order?.delivery_type && (!order?.order_group_id || !logisticOrderStatus?.includes(order?.status)) && (
-          <OText size={13}>
-            {`${order?.paymethod?.name} - ${order.delivery_type === 1
-              ? t('DELIVERY', 'Delivery')
-              : order.delivery_type === 2
-                ? t('PICKUP', 'Pickup')
-                : order.delivery_type === 3
-                  ? t('EAT_IN', 'Eat in')
-                  : order.delivery_type === 4
-                    ? t('CURBSIDE', 'Curbside')
-                    : t('DRIVER_THRU', 'Driver thru')
-              }`}
-          </OText>
+          <>
+            <OText size={13}>
+              <OText size={13} weight='bold'>{`${t('ORDER_TYPE', 'Order Type')}: `}</OText>
+              {orderTypes(order.delivery_type)}
+            </OText>
+            {order?.payment_events?.length > 0 && (
+              <View>
+                <OText size={13}>
+                  <OText size={13} weight='bold'>
+                    {`${t('PAYMENT_METHODS', 'Payment methods')}: `}
+                  </OText>
+                  {order?.payment_events?.map((event: any, idx: number) => {
+                    return event?.wallet_event
+                      ? idx < order?.payment_events?.length - 1
+                        ? `${walletName[event?.wallet_event?.wallet?.type]?.name} - `
+                        : walletName[event?.wallet_event?.wallet?.type]?.name
+                      : idx < order?.payment_events?.length - 1
+                        ? `${event?.paymethod?.name} - `
+                        : event?.paymethod?.name
+                  })}
+                </OText>
+              </View>
+            )}
+          </>
         )}
       </OrderHeader>
     </>

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

@@ -1,4 +1,4 @@
-import React, { useEffect, useState } from 'react';
+import React, { useCallback, useEffect, useRef, useState } from 'react';
 import { Fade, Placeholder, PlaceholderLine } from 'rn-placeholder';
 import Geolocation from '@react-native-community/geolocation'
 import {
@@ -44,7 +44,7 @@ import { BusinessFeaturedController } from '../BusinessFeaturedController';
 import { HighestRatedBusinesses } from '../HighestRatedBusinesses';
 import { getTypesText, convertToRadian } from '../../utils';
 import { OrderProgress } from '../OrderProgress';
-import { useIsFocused } from '@react-navigation/native';
+import { useFocusEffect, useIsFocused } from '@react-navigation/native';
 
 const PIXELS_TO_SCROLL = 1000;
 
@@ -115,15 +115,15 @@ const BusinessesListingUI = (props: BusinessesListingParams) => {
 	const [featuredBusiness, setFeaturedBusinesses] = useState(Array);
 	const [isFarAway, setIsFarAway] = useState(false)
 
-	// const timerId = useRef<any>(false)
+	const timerId = useRef<any>(false)
 	// const panResponder = useRef(
-	//   PanResponder.create({
-	//     onMoveShouldSetPanResponder: (e, gestureState) => {
-	//       const {dx, dy} = gestureState;
-	//       resetInactivityTimeout()
-	//       return (Math.abs(dx) > 20) || (Math.abs(dy) > 20);
-	//     },
-	//   })
+	// 	PanResponder.create({
+	// 		onMoveShouldSetPanResponder: (e, gestureState) => {
+	// 			const { dx, dy } = gestureState;
+	// 			resetInactivityTimeout()
+	// 			return (Math.abs(dx) > 20) || (Math.abs(dy) > 20);
+	// 		},
+	// 	})
 	// ).current
 
 	const configTypes =
@@ -165,16 +165,18 @@ const BusinessesListingUI = (props: BusinessesListingParams) => {
 		}
 	}, [businessesList.businesses]);
 
-	// const resetInactivityTimeout = () => {
-	//   clearTimeout(timerId.current)
-	//   timerId.current = setInterval(() => {
-	//     getBusinesses(true)
-	//   }, 600000)
-	// }
+	const resetInactivityTimeout = () => {
+		clearTimeout(timerId.current)
+		timerId.current = setInterval(() => {
+			if (!businessesList.loading) {
+				getBusinesses(true)
+			}
+		}, 300000)
+	}
 
-	// useEffect(() => {
-	//   resetInactivityTimeout()
-	// }, [])
+	useEffect(() => {
+		resetInactivityTimeout()
+	}, [])
 
 	const handleOnRefresh = () => {
 		if (!businessesList.loading) {
@@ -195,6 +197,14 @@ const BusinessesListingUI = (props: BusinessesListingParams) => {
 		})
 	}, [orderState?.options?.address?.location])
 
+	useFocusEffect(
+		useCallback(() => {
+			getBusinesses(true)
+			resetInactivityTimeout()
+			return () => clearTimeout(timerId.current)
+		}, [navigation])
+	)
+
 	return (
 		<ScrollView style={styles.container} onScroll={(e) => handleScroll(e)} showsVerticalScrollIndicator={false}
 			refreshControl={

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

@@ -49,6 +49,7 @@ import NavBar from '../NavBar';
 import { OrderSummary } from '../OrderSummary';
 import { getTypesText } from '../../utils';
 import { CartStoresListing } from '../CartStoresListing';
+import { PaymentOptionsWebView } from '../../../../../src/components/PaymentOptionsWebView';
 
 const mapConfigs = {
 	mapZoom: 16,
@@ -83,6 +84,7 @@ const CheckoutUI = (props: any) => {
 		deliveryOptionSelected,
 		instructionsOptions,
 		handleChangeDeliveryOption,
+		currency
 	} = props
 
 	const theme = useTheme();
@@ -114,10 +116,11 @@ const CheckoutUI = (props: any) => {
 
 	const [, { showToast }] = useToast();
 	const [, t] = useLanguage();
-	const [{ user }] = useSession();
+	const [{ user, token }] = useSession();
+	const [ordering] = useApi()
 	const [{ configs }] = useConfig();
 	const [{ parsePrice, parseDate }] = useUtils();
-	const [{ options, carts, loading }] = useOrder();
+	const [{ options, carts, loading }, { confirmCart }] = useOrder();
 	const [validationFields] = useValidationFields();
 
 	const [errorCash, setErrorCash] = useState(false);
@@ -126,8 +129,11 @@ const CheckoutUI = (props: any) => {
 	const [phoneUpdate, setPhoneUpdate] = useState(false);
 	const [openChangeStore, setOpenChangeStore] = useState(false)
 	const [isDeliveryOptionModalVisible, setIsDeliveryOptionModalVisible] = useState(false)
+	const [showGateway, setShowGateway] = useState<any>({ closedByUsed: false, open: false });
+	const [webviewPaymethod, setWebviewPaymethod] = useState<any>(null)
 
-  const isWalletEnabled = configs?.wallet_enabled?.value === '1' && (configs?.wallet_cash_enabled?.value === '1' || configs?.wallet_credit_point_enabled?.value === '1')
+
+  	const isWalletEnabled = configs?.wallet_enabled?.value === '1' && (configs?.wallet_cash_enabled?.value === '1' || configs?.wallet_credit_point_enabled?.value === '1')
 
 	const driverTipsOptions = typeof configs?.driver_tip_options?.value === 'string'
 		? JSON.parse(configs?.driver_tip_options?.value) || []
@@ -156,6 +162,16 @@ const CheckoutUI = (props: any) => {
 		setIsUserDetailsEdit(true)
 	}
 
+	const handlePaymentMethodClick = (paymethod: any) => {
+		setShowGateway({ closedByUser: false, open: true })
+		setWebviewPaymethod(paymethod)
+	}
+
+	const onFailPaypal = async () => {
+		if (showGateway.closedByUser === true) {
+		  await confirmCart(cart.uuid)
+		}
+	}
 	const changeDeliveryOption = (option: any) => {
 		handleChangeDeliveryOption(option)
 		setIsDeliveryOptionModalVisible(false)
@@ -216,6 +232,10 @@ const CheckoutUI = (props: any) => {
 		}
 	}, [cart?.products])
 
+	useEffect(() => {
+		onFailPaypal()
+	}, [showGateway.closedByUser])
+
 	return (
 		<>
 			<Container noPadding>
@@ -503,6 +523,7 @@ const CheckoutUI = (props: any) => {
 									setErrorCash={setErrorCash}
 									onNavigationRedirect={onNavigationRedirect}
 									paySelected={paymethodSelected}
+									handlePaymentMethodClickCustom={handlePaymentMethodClick}
 								/>
 							</ChPaymethods>
 						</ChSection>
@@ -549,7 +570,7 @@ const CheckoutUI = (props: any) => {
 										<OrderSummary
 											cart={cart}
 											isCartPending={cart?.status === 2}
-                      onNavigationRedirect={onNavigationRedirect}
+                      						onNavigationRedirect={onNavigationRedirect}
 										/>
 									</>
 								)}
@@ -622,6 +643,18 @@ const CheckoutUI = (props: any) => {
 					iosBottom={20}
 				/>
 			)}
+			{webviewPaymethod?.gateway === 'paypal' && showGateway.open && (
+				<PaymentOptionsWebView
+					onNavigationRedirect={onNavigationRedirect}
+					uri={`${ordering.root}/html/paypal_react_native`}
+					user={user}
+					token={token}
+					cart={cart}
+					currency={currency}
+					webviewPaymethod={webviewPaymethod}
+					setShowGateway={setShowGateway}
+				/>
+			)}
 		</>
 	)
 }

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

@@ -277,7 +277,7 @@ const MomentOptionUI = (props: MomentOptionParams) => {
 								style={{ marginEnd: 24 }}
 							/>
 						)}
-						<OText color={optionSelected.isAsap ? theme.colors.textNormal : theme.colors.disabled}>{t('ASAP_ABBREVIATION', 'ASAP') + ` (${moment().format('dddd, MMM d, yyyy h:mm A')} + delivery time)`}</OText>
+						<OText color={optionSelected.isAsap ? theme.colors.textNormal : theme.colors.disabled}>{t('ASAP_ABBREVIATION', 'ASAP') + ` (${moment().format('dddd, MMM D, yyyy h:mm A')} + delivery time)`}</OText>
 					</WrapSelectOption>
 					<WrapSelectOption
 						onPress={() => setOptionSelected({ isAsap: false, isSchedule: true })}

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

@@ -37,6 +37,8 @@ const stripeOptions: any = ['stripe_direct', 'stripe', 'stripe_connect']
 //   { name: 'iDEAL', value: 'ideal' }
 // ]
 
+const webViewPaymentGateway: any = ['paypal', 'square']
+
 const PaymentOptionsUI = (props: any) => {
 	const {
 		cart,
@@ -49,7 +51,8 @@ const PaymentOptionsUI = (props: any) => {
 		onNavigationRedirect,
 		handlePaymethodClick,
 		handlePaymethodDataChange,
-		isOpenMethod
+		isOpenMethod,
+		handlePaymentMethodClickCustom
 	} = props
 
 	const theme = useTheme();
@@ -90,6 +93,9 @@ const PaymentOptionsUI = (props: any) => {
 
 	const handlePaymentMethodClick = (paymethod: any) => {
 		const isPopupMethod = ['stripe', 'stripe_direct', 'stripe_connect', 'stripe_redirect', 'paypal'].includes(paymethod?.gateway)
+		if (webViewPaymentGateway.includes(paymethod?.gateway)) {
+			handlePaymentMethodClickCustom(paymethod)
+		}
 		handlePaymethodClick(paymethod, isPopupMethod)
 	}
 
@@ -139,7 +145,7 @@ const PaymentOptionsUI = (props: any) => {
 		)
 	}
 
-	const excludeIds: any = [3, 32, 66]; //exclude paypal & connect & redirect
+	const excludeIds: any = [32, 66]; //exclude paypal & connect & redirect
 
 	return (
 		<PMContainer>

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

@@ -70,6 +70,7 @@ const UpsellingProductsUI = (props: UpsellingProductsParams) => {
 	const [{ parsePrice }] = useUtils()
 	const [, t] = useLanguage()
 	const { bottom } = useSafeAreaInsets()
+	const [isCheckout, setIsCheckout] = useState(false)
 
 	const cart = carts?.[`businessId:${props.businessId}`] ?? {}
 	const cartProducts = cart?.products?.length
@@ -95,8 +96,8 @@ const UpsellingProductsUI = (props: UpsellingProductsParams) => {
 	}, [upsellingProducts.loading, upsellingProducts?.products.length])
 
 	useEffect(() => {
-		Object.keys(cart).length === 0 && onNavigationRedirect && onNavigationRedirect('MyOrders')
-	}, [cart])
+		isCheckout && Object.keys(cart).length === 0 && onNavigationRedirect && onNavigationRedirect('MyOrders')
+	}, [cart, isCheckout])
 
 	const handleFormProduct = (product: any) => {
     onNavigationRedirect && onNavigationRedirect('ProductDetails', {
@@ -185,7 +186,10 @@ const UpsellingProductsUI = (props: UpsellingProductsParams) => {
             text={t('CHECKOUT', 'Checkout')}
             style={{...styles.closeUpsellingButton}}
             textStyle={{ color: theme.colors.white, fontSize: 14 }}
-            onClick={() => handleUpsellingPage()}
+            onClick={() => {
+				handleUpsellingPage()
+				setIsCheckout(true)
+			}}
           />
         </View>
       </>