ordering-ui-react-native 0.14.35 → 0.14.37-release

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

@@ -7,6 +7,7 @@ import {
 	ScrollView,
 	Platform,
 	TouchableOpacity,
+	RefreshControl
 } from 'react-native';
 import {
 	BusinessList as BusinessesListingController,
@@ -57,11 +58,12 @@ const BusinessesListingUI = (props: BusinessesListingParams) => {
 		handleBusinessClick,
 		paginationProps,
 		handleChangeSearch,
-    businessId
+		businessId
 	} = props;
 
 	const theme = useTheme();
 	const isFocused = useIsFocused();
+	const [refreshing] = useState(false);
 
 	const styles = StyleSheet.create({
 		container: {
@@ -142,15 +144,15 @@ const BusinessesListingUI = (props: BusinessesListingParams) => {
 	};
 
 	const getDistance = (lat1: any, lon1: any, lat2: any, lon2: any) => {
-    const R = 6371 // km
-    const dLat = convertToRadian(lat2 - lat1)
-    const dLon = convertToRadian(lon2 - lon1)
-    const curLat1 = convertToRadian(lat1)
-    const curLat2 = convertToRadian(lat2)
-    const a = Math.sin(dLat / 2) * Math.sin(dLat / 2) + Math.sin(dLon / 2) * Math.sin(dLon / 2) * Math.cos(curLat1) * Math.cos(curLat2)
-    const c = 2 * Math.atan2(Math.sqrt(a), Math.sqrt(1 - a))
-    return R * c
-  }
+		const R = 6371 // km
+		const dLat = convertToRadian(lat2 - lat1)
+		const dLon = convertToRadian(lon2 - lon1)
+		const curLat1 = convertToRadian(lat1)
+		const curLat2 = convertToRadian(lat2)
+		const a = Math.sin(dLat / 2) * Math.sin(dLat / 2) + Math.sin(dLon / 2) * Math.sin(dLon / 2) * Math.cos(curLat1) * Math.cos(curLat2)
+		const c = 2 * Math.atan2(Math.sqrt(a), Math.sqrt(1 - a))
+		return R * c
+	}
 
 	useEffect(() => {
 		if (businessesList.businesses.length > 0) {
@@ -162,6 +164,7 @@ const BusinessesListingUI = (props: BusinessesListingParams) => {
 			setFeaturedBusinesses(ary);
 		}
 	}, [businessesList.businesses]);
+
 	// const resetInactivityTimeout = () => {
 	//   clearTimeout(timerId.current)
 	//   timerId.current = setInterval(() => {
@@ -173,21 +176,37 @@ const BusinessesListingUI = (props: BusinessesListingParams) => {
 	//   resetInactivityTimeout()
 	// }, [])
 
+	const handleOnRefresh = () => {
+		const hasMore = !(
+			paginationProps.totalPages === paginationProps.currentPage
+		);
+		if (!businessesList.loading && hasMore) {
+			getBusinesses();
+		}
+	}
+
 	useEffect(() => {
 		Geolocation.getCurrentPosition((pos) => {
-      const crd = pos.coords
-      const distance = getDistance(crd.latitude, crd.longitude, orderState?.options?.address?.location?.lat, orderState?.options?.address?.location?.lng)
-      if (distance > 20) setIsFarAway(true)
+			const crd = pos.coords
+			const distance = getDistance(crd.latitude, crd.longitude, orderState?.options?.address?.location?.lat, orderState?.options?.address?.location?.lng)
+			if (distance > 20) setIsFarAway(true)
 			else setIsFarAway(false)
-    }, (err) => {
-      console.log(`ERROR(${err.code}): ${err.message}`)
-    }, {
-      enableHighAccuracy: true, timeout: 15000, maximumAge: 10000
-    })
-  }, [orderState?.options?.address?.location])
+		}, (err) => {
+			console.log(`ERROR(${err.code}): ${err.message}`)
+		}, {
+			enableHighAccuracy: true, timeout: 15000, maximumAge: 10000
+		})
+	}, [orderState?.options?.address?.location])
 
 	return (
-		<ScrollView style={styles.container} onScroll={(e) => handleScroll(e)} showsVerticalScrollIndicator={false}>
+		<ScrollView style={styles.container} onScroll={(e) => handleScroll(e)} showsVerticalScrollIndicator={false}
+			refreshControl={
+				<RefreshControl
+					refreshing={refreshing}
+					onRefresh={() => handleOnRefresh()}
+				/>
+			}
+		>
 			<HeaderWrapper
 				source={theme.images.backgrounds.business_list_header}
 				style={{ paddingTop: top + 20 }}>
@@ -257,72 +276,78 @@ const BusinessesListingUI = (props: BusinessesListingParams) => {
 							/>
 						</WrapMomentOption>
 
-            {!businessId && (
-              <SearchBar
-                onSearch={handleChangeSearch}
-                searchValue={searchValue}
-                lazyLoad
-                isCancelXButtonShow={!!searchValue}
-                borderStyle={styles.borderStyle}
-                onCancel={() => handleChangeSearch('')}
-                placeholder={t('SEARCH', 'Search')}
-                height={26}
-                inputStyle={{ ...styles.searchInput, ...Platform.OS === 'ios' ? {} : { paddingBottom: 4 } }}
-              />
-            )}
+						{!businessId && (
+							<SearchBar
+								onSearch={handleChangeSearch}
+								searchValue={searchValue}
+								lazyLoad
+								isCancelXButtonShow={!!searchValue}
+								borderStyle={styles.borderStyle}
+								onCancel={() => handleChangeSearch('')}
+								placeholder={t('SEARCH', 'Search')}
+								height={26}
+								inputStyle={{ ...styles.searchInput, ...Platform.OS === 'ios' ? {} : { paddingBottom: 4 } }}
+							/>
+						)}
 
 					</View>
 				</OrderControlContainer>
 			</HeaderWrapper>
-			{isFocused && (
-				<OrderProgressWrapper>
-					<OrderProgress
-						{...props}
-					/>
-				</OrderProgressWrapper>
-			)}
-			{!businessId && !props.franchiseId && featuredBusiness && featuredBusiness.length > 0 && (
-				<FeaturedWrapper>
-					<OText size={16} style={{ marginLeft: 40 }} weight={Platform.OS === 'ios' ? '600' : 'bold'}>{t('FEATURED_BUSINESS', 'Featured business')}</OText>
-					<ScrollView
-						showsHorizontalScrollIndicator={false}
-						nestedScrollEnabled
-						horizontal contentContainerStyle={{ paddingHorizontal: 40 }}>
-						{featuredBusiness.map((bAry: any, idx) => (
-							<View key={'f-listing_' + idx}>
-								<BusinessFeaturedController
-									key={bAry[0].id}
-									business={bAry[0]}
-									handleCustomClick={handleBusinessClick}
-									orderType={orderState?.options?.type}
-								/>
-								{bAry.length > 1 && (
+			{
+				isFocused && (
+					<OrderProgressWrapper>
+						<OrderProgress
+							{...props}
+						/>
+					</OrderProgressWrapper>
+				)
+			}
+			{
+				!businessId && !props.franchiseId && featuredBusiness && featuredBusiness.length > 0 && (
+					<FeaturedWrapper>
+						<OText size={16} style={{ marginLeft: 40 }} weight={Platform.OS === 'ios' ? '600' : 'bold'}>{t('FEATURED_BUSINESS', 'Featured business')}</OText>
+						<ScrollView
+							showsHorizontalScrollIndicator={false}
+							nestedScrollEnabled
+							horizontal contentContainerStyle={{ paddingHorizontal: 40 }}>
+							{featuredBusiness.map((bAry: any, idx) => (
+								<View key={'f-listing_' + idx}>
 									<BusinessFeaturedController
-										key={bAry[1].id}
-										business={bAry[1]}
+										key={bAry[0].id}
+										business={bAry[0]}
 										handleCustomClick={handleBusinessClick}
 										orderType={orderState?.options?.type}
 									/>
-								)}
-							</View>
-						))}
-					</ScrollView>
-				</FeaturedWrapper>
-			)}
+									{bAry.length > 1 && (
+										<BusinessFeaturedController
+											key={bAry[1].id}
+											business={bAry[1]}
+											handleCustomClick={handleBusinessClick}
+											orderType={orderState?.options?.type}
+										/>
+									)}
+								</View>
+							))}
+						</ScrollView>
+					</FeaturedWrapper>
+				)
+			}
 			<View style={{ height: 8, backgroundColor: theme.colors.backgroundGray100 }} />
-      {!businessId && !props.franchiseId && (
-        <HighestRatedBusinesses onBusinessClick={handleBusinessClick} navigation={navigation} />
-      )}
+			{
+				!businessId && !props.franchiseId && (
+					<HighestRatedBusinesses onBusinessClick={handleBusinessClick} navigation={navigation} />
+				)
+			}
 			<View style={{ height: 8, backgroundColor: theme.colors.backgroundGray100 }} />
 			<ListWrapper>
-        {!businessId && (
-          <BusinessTypeFilter
-            images={props.images}
-            businessTypes={props.businessTypes}
-            defaultBusinessType={props.defaultBusinessType}
-            handleChangeBusinessType={handleChangeBusinessType}
-          />
-        )}
+				{!businessId && (
+					<BusinessTypeFilter
+						images={props.images}
+						businessTypes={props.businessTypes}
+						defaultBusinessType={props.defaultBusinessType}
+						handleChangeBusinessType={handleChangeBusinessType}
+					/>
+				)}
 				{!businessesList.loading && businessesList.businesses.length === 0 && (
 					<NotFoundSource
 						content={t(

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

@@ -8,7 +8,7 @@ import {
   useValidationFields,
 } from 'ordering-components/native';
 import { useTheme } from 'styled-components/native';
-import { CContainer, CheckoutAction } from './styles';
+import { CContainer, CheckoutAction, Divider } from './styles';
 
 import { OSBill, OSTable, OSCoupon, OSTotal, OSRow } from '../OrderSummary/styles';
 
@@ -17,13 +17,13 @@ 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';
 import AntIcon from 'react-native-vector-icons/AntDesign'
 import { TaxInformation } from '../TaxInformation';
 import { CartStoresListing } from '../CartStoresListing';
+import { OAlert } from '../../../../../src/components/shared'
 
 const CartUI = (props: any) => {
   const {
@@ -35,10 +35,10 @@ const CartUI = (props: any) => {
     removeProduct,
     handleCartOpen,
     setIsCartsLoading,
-    hideUpselling,
     handleChangeComment,
-    commentState
-    // isFromCart
+    commentState,
+    onNavigationRedirect,
+    handleRemoveOfferClick
   } = props
 
   const theme = useTheme();
@@ -49,12 +49,11 @@ 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)
-  const [openTaxModal, setOpenTaxModal] = useState<any>({ open: false, data: null })
+  const [openTaxModal, setOpenTaxModal] = useState<any>({ open: false, data: null, type: '' })
+  const [confirm, setConfirm] = useState<any>({ open: false, content: null, handleOnAccept: null, id: null, title: null })
 
   const isCartPending = cart?.status === 2
   const isCouponEnabled = validationFields?.fields?.checkout?.coupon?.enabled
@@ -71,14 +70,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 () => {
@@ -113,6 +112,22 @@ const CartUI = (props: any) => {
     }
   }
 
+  const getIncludedTaxesDiscounts = () => {
+    return cart?.taxes?.filter((tax: any) => tax?.type === 1)?.reduce((carry: number, tax: any) => carry + (tax?.summary?.tax_after_discount ?? tax?.summary?.tax), 0)
+  }
+
+  const onRemoveOffer = (id: number) => {
+    setConfirm({
+      open: true,
+      content: [t('QUESTION_DELETE_OFFER', 'Are you sure that you want to delete the offer?')],
+      title: t('OFFER', 'Offer'),
+      handleOnAccept: () => {
+        setConfirm({ ...confirm, open: false })
+        handleRemoveOfferClick(id)
+      }
+    })
+  }
+
   const walletName: any = {
     cash: {
       name: t('PAY_WITH_CASH_WALLET', 'Pay with Cash Wallet'),
@@ -170,7 +185,7 @@ const CartUI = (props: any) => {
                 {parsePrice(cart?.subtotal + getIncludedTaxes())}
               </OText>
             </OSTable>
-            {cart?.discount > 0 && cart?.total >= 0 && (
+            {cart?.discount > 0 && cart?.total >= 0 && cart?.offers?.length === 0 && (
               <OSTable>
                 {cart?.discount_type === 1 ? (
                   <OText size={12} lineHeight={18}>
@@ -183,19 +198,51 @@ const CartUI = (props: any) => {
                 <OText size={12} lineHeight={18}>- {parsePrice(cart?.discount || 0)}</OText>
               </OSTable>
             )}
+            {
+              cart?.offers?.length > 0 && cart?.offers?.filter((offer: any) => offer?.target === 1)?.map((offer: any) => (
+                <OSTable key={offer.id}>
+                  <OSRow>
+                    <OText size={12} lineHeight={18}>{offer.name}</OText>
+                    {offer.rate_type === 1 && (
+                      <OText size={12} lineHeight={18}>{`(${verifyDecimals(offer?.rate, parsePrice)}%)`}</OText>
+                    )}
+                    <TouchableOpacity style={{ marginLeft: 3 }} onPress={() => setOpenTaxModal({ open: true, data: offer, type: 'offer_target_1' })}>
+                      <AntIcon name='exclamationcircleo' size={18} color={theme.colors.primary} />
+                    </TouchableOpacity>
+                    <TouchableOpacity style={{ marginLeft: 3 }} onPress={() => onRemoveOffer(offer?.id)}>
+                      <AntIcon name='closecircle' size={18} color={theme.colors.primary} />
+                    </TouchableOpacity>
+                  </OSRow>
+                  <OText size={12} lineHeight={18}>
+                    - {parsePrice(offer?.summary?.discount)}
+                  </OText>
+                </OSTable>
+              ))
+            }
+            <Divider />
+            {cart?.subtotal_with_discount > 0 && cart?.discount > 0 && cart?.total >= 0 && (
+              <OSTable>
+                <OText size={12} lineHeight={18} numberOfLines={1}>{t('SUBTOTAL_WITH_DISCOUNT', 'Subtotal with discount')}</OText>
+                {cart?.business?.tax_type === 1 ? (
+                  <OText size={12} lineHeight={18}>{parsePrice(cart?.subtotal_with_discount + getIncludedTaxesDiscounts() ?? 0)}</OText>
+                ) : (
+                  <OText size={12} lineHeight={18}>{parsePrice(cart?.subtotal_with_discount ?? 0)}</OText>
+                )}
+              </OSTable>
+            )}
             {
               cart.taxes?.length > 0 && cart.taxes.filter((tax: any) => tax.type === 2 && tax?.rate !== 0).map((tax: any) => (
                 <OSTable key={tax.id}>
                   <OSRow>
-                    <OText numberOfLines={1} >
+                    <OText size={12} lineHeight={18} numberOfLines={1} >
                       {tax.name || t('INHERIT_FROM_BUSINESS', 'Inherit from business')}{' '}
                       {`(${verifyDecimals(tax?.rate, parseNumber)}%)`}{' '}
                     </OText>
-                    <TouchableOpacity onPress={() => setOpenTaxModal({ open: true, data: tax })} >
+                    <TouchableOpacity onPress={() => setOpenTaxModal({ open: true, data: tax, type: 'tax' })} >
                       <AntIcon name='exclamationcircleo' size={18} color={theme.colors.primary} />
                     </TouchableOpacity>
                   </OSRow>
-                  <OText>{parsePrice(tax?.summary?.tax || 0)}</OText>
+                  <OText size={12} lineHeight={18}>{parsePrice(tax?.summary?.tax_after_discount ?? tax?.summary?.tax ?? 0)}</OText>
                 </OSTable>
               ))
             }
@@ -203,33 +250,66 @@ const CartUI = (props: any) => {
               cart?.fees?.length > 0 && cart?.fees?.filter((fee: any) => !(fee.fixed === 0 && fee.percentage === 0)).map((fee: any) => (
                 <OSTable key={fee?.id}>
                   <OSRow>
-                    <OText numberOfLines={1} size={12} lineHeight={18}>
+                    <OText size={12} lineHeight={18} numberOfLines={1}>
                       {fee.name || t('INHERIT_FROM_BUSINESS', 'Inherit from business')}{' '}
                       ({parsePrice(fee?.fixed)} + {fee?.percentage}%){' '}
                     </OText>
-                    <TouchableOpacity onPress={() => setOpenTaxModal({ open: true, data: fee })} >
+                    <TouchableOpacity onPress={() => setOpenTaxModal({ open: true, data: fee, type: 'fee' })} >
                       <AntIcon name='exclamationcircleo' size={18} color={theme.colors.primary} />
                     </TouchableOpacity>
                   </OSRow>
-                  <OText>{parsePrice(fee?.summary?.fixed + fee?.summary?.percentage || 0)}</OText>
+                  <OText size={12} lineHeight={18}>{parsePrice(fee?.summary?.fixed + (fee?.summary?.percentage_after_discount ?? fee?.summary?.percentage) ?? 0)}</OText>
+                </OSTable>
+              ))
+            }
+            {
+              cart?.offers?.length > 0 && cart?.offers?.filter((offer: any) => offer?.target === 3)?.map((offer: any) => (
+                <OSTable key={offer.id}>
+                  <OSRow>
+                    <OText size={12} lineHeight={18}>{offer.name}</OText>
+                    {offer.rate_type === 1 && (
+                      <OText size={12} lineHeight={18}>{`(${verifyDecimals(offer?.rate, parsePrice)}%)`}</OText>
+                    )}
+                    <TouchableOpacity style={{ marginLeft: 3 }} onPress={() => setOpenTaxModal({ open: true, data: offer, type: 'offer_target_3' })}>
+                      <AntIcon name='exclamationcircleo' size={18} color={theme.colors.primary} />
+                    </TouchableOpacity>
+                    <TouchableOpacity style={{ marginLeft: 3 }} onPress={() => onRemoveOffer(offer?.id)}>
+                      <AntIcon name='closecircle' size={18} color={theme.colors.primary} />
+                    </TouchableOpacity>
+                  </OSRow>
+                  <OText size={12} lineHeight={18}>
+                    - {parsePrice(offer?.summary?.discount)}
+                  </OText>
                 </OSTable>
               ))
             }
-            {cart?.service_fee > 0 && !cart?.fees?.length && (
-              <OSTable>
-                <OText size={12} lineHeight={18}>
-                  {t('SERVICE_FEE', 'Service Fee')}
-                  {`(${verifyDecimals(cart?.business?.service_fee, parseNumber)}%)`}
-                </OText>
-                <OText size={12} lineHeight={18}>{parsePrice(cart?.service_fee)}</OText>
-              </OSTable>
-            )}
             {orderState?.options?.type === 1 && cart?.delivery_price > 0 && (
               <OSTable>
                 <OText size={12} lineHeight={18}>{t('DELIVERY_FEE', 'Delivery Fee')}</OText>
                 <OText size={12} lineHeight={18}>{parsePrice(cart?.delivery_price)}</OText>
               </OSTable>
             )}
+            {
+              cart?.offers?.length > 0 && cart?.offers?.filter((offer: any) => offer?.target === 2)?.map((offer: any) => (
+                <OSTable key={offer.id}>
+                  <OSRow>
+                    <OText size={12} lineHeight={18}>{offer.name}</OText>
+                    {offer.rate_type === 1 && (
+                      <OText size={12} lineHeight={18}>{`(${verifyDecimals(offer?.rate, parsePrice)}%)`}</OText>
+                    )}
+                    <TouchableOpacity style={{ marginLeft: 3 }} onPress={() => setOpenTaxModal({ open: true, data: offer, type: 'offer_target_2' })}>
+                      <AntIcon name='exclamationcircleo' size={18} color={theme.colors.primary} />
+                    </TouchableOpacity>
+                    <TouchableOpacity style={{ marginLeft: 3 }} onPress={() => onRemoveOffer(offer?.id)}>
+                      <AntIcon name='closecircle' size={18} color={theme.colors.primary} />
+                    </TouchableOpacity>
+                  </OSRow>
+                  <OText size={12} lineHeight={18}>
+                    - {parsePrice(offer?.summary?.discount)}
+                  </OText>
+                </OSTable>
+              ))
+            }
             {cart?.driver_tip > 0 && (
               <OSTable>
                 <OText size={12} lineHeight={18}>
@@ -269,7 +349,7 @@ const CartUI = (props: any) => {
                   {t('TOTAL', 'Total')}
                 </OText>
                 <OText size={14} lineHeight={21} weight={'600'}>
-                  {parsePrice(cart?.balance ?? cart?.total)}
+                  {parsePrice(cart?.total >= 0 ? cart?.total : 0)}
                 </OText>
               </OSTable>
             </OSTotal>
@@ -329,23 +409,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}
@@ -360,11 +423,25 @@ const CartUI = (props: any) => {
       </OModal>
       <OModal
         open={openTaxModal.open}
-        onClose={() => setOpenTaxModal({ open: false, data: null })}
+        onClose={() => setOpenTaxModal({ open: false, data: null, type: '' })}
         entireModal
+        title={`${openTaxModal.data?.name ||
+          t('INHERIT_FROM_BUSINESS', 'Inherit from business')} ${openTaxModal.data?.rate_type !== 2 ? `(${typeof openTaxModal.data?.rate === 'number' ? `${openTaxModal.data?.rate}%` : `${parsePrice(openTaxModal.data?.fixed ?? 0)} + ${openTaxModal.data?.percentage}%`})` : ''}  `}
       >
-        <TaxInformation data={openTaxModal.data} products={cart.products} />
+        <TaxInformation
+          type={openTaxModal.type}
+          data={openTaxModal.data}
+          products={cart?.products}
+        />
       </OModal>
+        <OAlert
+          open={confirm.open}
+          title={confirm.title}
+          content={confirm.content}
+          onAccept={confirm.handleOnAccept}
+          onCancel={() => setConfirm({ ...confirm, open: false, title: null })}
+          onClose={() => setConfirm({ ...confirm, open: false, title: null })}
+        />
     </CContainer>
   )
 }

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

@@ -1,4 +1,4 @@
-import styled, { css } from 'styled-components/native';
+import styled from 'styled-components/native';
 
 export const CContainer = styled.View`
   /* border-bottom: 1px solid #F0F0F0; */
@@ -26,3 +26,10 @@ export const CheckoutAction = styled.View`
   margin-top: 10px;
   margin-bottom: 10px;
 `
+
+export const Divider = styled.View`
+  border-color: #EAEAEA;
+  border-width: 1px;
+  margin-top: 5px;
+  margin-bottom: 10px;
+`

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,6 +129,10 @@ 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 driverTipsOptions = typeof configs?.driver_tip_options?.value === 'string'
 		? JSON.parse(configs?.driver_tip_options?.value) || []
@@ -154,6 +161,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)
@@ -214,6 +231,10 @@ const CheckoutUI = (props: any) => {
 		}
 	}, [cart?.products])
 
+	useEffect(() => {
+		onFailPaypal()
+	}, [showGateway.closedByUser])
+
 	return (
 		<>
 			<Container noPadding>
@@ -501,6 +522,7 @@ const CheckoutUI = (props: any) => {
 									setErrorCash={setErrorCash}
 									onNavigationRedirect={onNavigationRedirect}
 									paySelected={paymethodSelected}
+									handlePaymentMethodClickCustom={handlePaymentMethodClick}
 								/>
 							</ChPaymethods>
 						</ChSection>
@@ -510,6 +532,7 @@ const CheckoutUI = (props: any) => {
             <WalletPaymentOptionContainer>
               <PaymentOptionWallet
                 cart={cart}
+                businessId={cart?.business_id}
               />
             </WalletPaymentOptionContainer>
           )}
@@ -546,6 +569,7 @@ const CheckoutUI = (props: any) => {
 										<OrderSummary
 											cart={cart}
 											isCartPending={cart?.status === 2}
+                      						onNavigationRedirect={onNavigationRedirect}
 										/>
 									</>
 								)}
@@ -618,6 +642,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/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>
     </>
   )