ordering-ui-react-native 0.14.39 → 0.14.42

package/src/components/OrderSummary/index.tsx

@@ -14,12 +14,13 @@ import {
   OSProductList,
   OSBill,
   OSTable,
-  OSRow
+  OSRow,
+  Divider
 } from './styles';
 
 import { ProductItemAccordion } from '../ProductItemAccordion';
 import { CouponControl } from '../CouponControl';
-import { OInput, OModal, OText } from '../shared';
+import { OAlert, OInput, OModal, OText } from '../shared';
 import { verifyDecimals } from '../../utils';
 import { useTheme } from 'styled-components/native';
 import { TaxInformation } from '../TaxInformation';
@@ -36,7 +37,8 @@ const OrderSummaryUI = (props: any) => {
     isFromCheckout,
     commentState,
     handleChangeComment,
-    onNavigationRedirect
+    onNavigationRedirect,
+    handleRemoveOfferClick
   } = props;
 
   const theme = useTheme();
@@ -46,6 +48,7 @@ const OrderSummaryUI = (props: any) => {
   const [{ parsePrice, parseNumber }] = useUtils();
   const [validationFields] = useValidationFields();
   const [openTaxModal, setOpenTaxModal] = useState<any>({ open: false, data: null })
+  const [confirm, setConfirm] = useState<any>({ open: false, content: null, handleOnAccept: null, id: null, title: null })
 
   const isCouponEnabled = validationFields?.fields?.checkout?.coupon?.enabled;
 
@@ -55,15 +58,15 @@ const OrderSummaryUI = (props: any) => {
 
   const handleEditProduct = (product: any) => {
     onNavigationRedirect &&
-    onNavigationRedirect('ProductDetails', {
-      isCartProduct: true,
-      productCart: product,
-      businessSlug: cart?.business?.slug,
-      businessId: cart?.business_id,
-      categoryId: product?.category_id,
-      productId: product?.id,
-      isFromCheckout: isFromCheckout,
-		})
+      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 = () => {
@@ -76,6 +79,22 @@ const OrderSummaryUI = (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)
+      }
+    })
+  }
+
   return (
     <OSContainer>
       {cart?.products?.length > 0 && (
@@ -99,35 +118,65 @@ const OrderSummaryUI = (props: any) => {
           {cart?.valid && (
             <OSBill>
               <OSTable>
-                <OText size={18}>{t('SUBTOTAL', 'Subtotal')}</OText>
-                <OText size={18}>{parsePrice(cart?.subtotal + getIncludedTaxes())}</OText>
+                <OText size={16}>{t('SUBTOTAL', 'Subtotal')}</OText>
+                <OText size={16}>{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={18}>
-                      {t('DISCOUNT', 'Discount')}
-                      <OText size={18}>{`(${verifyDecimals(cart?.discount_rate, parsePrice)}%)`}</OText>
+                    <OText size={16}>
+                      {t('DISCOUNT', 'Discount')}{' '}
+                      <OText size={16}>{`(${verifyDecimals(cart?.discount_rate, parsePrice)}%)`}</OText>
                     </OText>
                   ) : (
-                    <OText size={18}>{t('DISCOUNT', 'Discount')}</OText>
+                    <OText size={16}>{t('DISCOUNT', 'Discount')}</OText>
+                  )}
+                  <OText size={16}>- {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={16}>{offer.name}</OText>
+                      {offer.rate_type === 1 && (
+                        <OText size={16}>{`(${verifyDecimals(offer?.rate, parsePrice)}%)`}</OText>
+                      )}
+                      <TouchableOpacity style={{ marginLeft: 5, top: 3 }} onPress={() => setOpenTaxModal({ open: true, data: offer, type: 'offer_target_1' })}>
+                        <AntIcon name='exclamationcircleo' size={20} color={theme.colors.primary} />
+                      </TouchableOpacity>
+                      <TouchableOpacity style={{ marginLeft: 5, top: 3 }} onPress={() => onRemoveOffer(offer?.id)}>
+                        <AntIcon name='closecircle' size={20} color={theme.colors.primary} />
+                      </TouchableOpacity>
+                    </OSRow>
+                    <OText size={16} numberOfLines={2}>- {parsePrice(offer?.summary?.discount)}</OText>
+                  </OSTable>
+                ))
+              }
+              <Divider />
+              {cart?.subtotal_with_discount > 0 && cart?.discount > 0 && cart?.total >= 0 && (
+                <OSTable>
+                  <OText size={16} numberOfLines={1}>{t('SUBTOTAL_WITH_DISCOUNT', 'Subtotal with discount')}</OText>
+                  {cart?.business?.tax_type === 1 ? (
+                    <OText size={16}>{parsePrice(cart?.subtotal_with_discount + getIncludedTaxesDiscounts() ?? 0)}</OText>
+                  ) : (
+                    <OText size={16}>{parsePrice(cart?.subtotal_with_discount ?? 0)}</OText>
                   )}
-                  <OText size={18}>- {parsePrice(cart?.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 size={18} numberOfLines={1}>
+                      <OText size={16} 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={20} color={theme.colors.primary} />
                       </TouchableOpacity>
                     </OSRow>
-                    <OText size={18}>{parsePrice(tax?.summary?.tax || 0)}</OText>
+                    <OText size={16}>{parsePrice(tax?.summary?.tax_after_discount ?? tax?.summary?.tax ?? 0)}</OText>
                   </OSTable>
                 ))
               }
@@ -135,27 +184,69 @@ const OrderSummaryUI = (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 size={18} numberOfLines={1}>
+                      <OText size={16} 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={20} color={theme.colors.primary} />
+                      </TouchableOpacity>
+                    </OSRow>
+                    <OText size={16}>{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={16}>{offer.name}</OText>
+                      {offer.rate_type === 1 && (
+                        <OText size={16}>{`(${verifyDecimals(offer?.rate, parsePrice)}%)`}</OText>
+                      )}
+                      <TouchableOpacity style={{ marginLeft: 5, top: 3 }} onPress={() => setOpenTaxModal({ open: true, data: offer, type: 'offer_target_3' })}>
                         <AntIcon name='exclamationcircleo' size={20} color={theme.colors.primary} />
                       </TouchableOpacity>
+                      <TouchableOpacity style={{ marginLeft: 5, top: 3 }} onPress={() => onRemoveOffer(offer?.id)}>
+                        <AntIcon name='closecircle' size={20} color={theme.colors.primary} />
+                      </TouchableOpacity>
                     </OSRow>
-                    <OText size={18}>{parsePrice(fee?.summary?.fixed + fee?.summary?.percentage || 0)}</OText>
+                    <OText size={16}>
+                      - {parsePrice(offer?.summary?.discount)}
+                    </OText>
                   </OSTable>
                 ))
               }
               {orderState?.options?.type === 1 && cart?.delivery_price > 0 && (
                 <OSTable>
-                  <OText size={18}>{t('DELIVERY_FEE', 'Delivery Fee')}</OText>
-                  <OText size={18}>{parsePrice(cart?.delivery_price)}</OText>
+                  <OText size={16}>{t('DELIVERY_FEE', 'Delivery Fee')}</OText>
+                  <OText size={16}>{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={16}>{offer.name}</OText>
+                      {offer.rate_type === 1 && (
+                        <OText size={16}>{`(${verifyDecimals(offer?.rate, parsePrice)}%)`}</OText>
+                      )}
+                      <TouchableOpacity style={{ marginLeft: 3, top: 3 }} onPress={() => setOpenTaxModal({ open: true, data: offer, type: 'offer_target_2' })}>
+                        <AntIcon name='exclamationcircleo' size={20} color={theme.colors.primary} />
+                      </TouchableOpacity>
+                      <TouchableOpacity style={{ marginLeft: 3, top: 3 }} onPress={() => onRemoveOffer(offer?.id)}>
+                        <AntIcon name='closecircle' size={20} color={theme.colors.primary} />
+                      </TouchableOpacity>
+                    </OSRow>
+                    <OText size={16}>
+                      - {parsePrice(offer?.summary?.discount)}
+                    </OText>
+                  </OSTable>
+                ))
+              }
               {cart?.driver_tip > 0 && (
                 <OSTable>
-                  <OText size={18}>
+                  <OText size={16}>
                     {t('DRIVER_TIP', 'Driver tip')}
                     {cart?.driver_tip_rate > 0 &&
                       parseInt(configs?.driver_tip_type?.value, 10) === 2 &&
@@ -164,7 +255,7 @@ const OrderSummaryUI = (props: any) => {
                         `(${verifyDecimals(cart?.driver_tip_rate, parseNumber)}%)`
                       )}
                   </OText>
-                  <OText size={18}>{parsePrice(cart?.driver_tip)}</OText>
+                  <OText size={16}>{parsePrice(cart?.driver_tip)}</OText>
                 </OSTable>
               )}
               {isCouponEnabled && !isCartPending && (
@@ -177,22 +268,20 @@ const OrderSummaryUI = (props: any) => {
                   </View>
                 </View>
               )}
-              {cart?.total >= 1 && (
                 <View style={{ marginTop: 15, borderTopWidth: 1, borderTopColor: '#d9d9d9' }}>
                   <OSTable style={{ marginTop: 15 }}>
-                    <OText size={18} style={{ fontWeight: 'bold' }}>
+                    <OText size={16} style={{ fontWeight: 'bold' }}>
                       {t('TOTAL', 'Total')}
                     </OText>
-                    <OText size={18} style={{ fontWeight: 'bold' }} color={theme.colors.primary}>
-                      {parsePrice(cart?.total)}
+                    <OText size={16} style={{ fontWeight: 'bold' }} color={theme.colors.primary}>
+                      {parsePrice(cart?.total >= 0 ? cart?.total : 0)}
                     </OText>
                   </OSTable>
                 </View>
-              )}
               {cart?.status !== 2 && (
                 <OSTable>
                   <View style={{ width: '100%', marginTop: 20 }}>
-                    <OText>{t('COMMENTS', 'Comments')}</OText>
+                    <OText size={16}>{t('COMMENTS', 'Comments')}</OText>
                     <View style={{ flex: 1, width: '100%' }}>
                       <OInput
                         value={cart?.comment}
@@ -227,9 +316,23 @@ const OrderSummaryUI = (props: any) => {
             open={openTaxModal.open}
             onClose={() => setOpenTaxModal({ open: false, data: null })}
             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 })}
+          />
         </>
       )}
     </OSContainer>

package/src/components/OrderSummary/styles.tsx

@@ -33,5 +33,13 @@ export const OSCoupon = styled.View`
 export const OSRow = styled.View`
   flex-direction: row;
   overflow: hidden;
-  width: 80%;
-`
+  width: 70%;
+  flex-wrap: wrap;
+`
+
+export const Divider = styled.View`
+  border-color: #EAEAEA;
+  border-width: 1px;
+  margin-top: 5px;
+  margin-bottom: 10px;
+`

package/src/components/ProductForm/index.tsx

@@ -132,26 +132,26 @@ export const ProductOptionsUI = (props: any) => {
                     <View style={{ flexDirection: 'column', width: '100%' }}>
                       <View style={{ flexDirection: 'row', marginTop: 15 }}>
                         <OText size={20} style={{ flex: I18nManager.isRTL ? 0 : 1, marginBottom: 10 }}>{product?.name || productCart.name}{' '}</OText>
-                        {product?.calories && (
+                        {!!product?.calories && (
                           <OText size={16} style={styles.caloriesStyle}>{product?.calories} cal</OText>
                         )}
                       </View>
                       <View style={{ flexDirection: 'row', marginBottom: 10 }}>
                         <OText size={16} style={{ flex: I18nManager.isRTL ? 1 : 0 }} color={theme.colors.primary}>{productCart.price ? parsePrice(productCart.price) : ''}</OText>
-                        {product?.offer_price && (
+                        {!!product?.offer_price && (
                           <OText style={styles.regularPriceStyle}>{parsePrice(product?.offer_price)}</OText>
                         )}
                       </View>
-                      {(product?.estimated_person || (product?.sku && product?.sku !== '-1' && product?.sku !== '1')) && (
+                      {(!!product?.estimated_person || (!!product?.sku && product?.sku !== '-1' && product?.sku !== '1')) && (
                         <OText size={14} style={{ flex: I18nManager.isRTL ? 1 : 0, marginBottom: 10 }} color={'#909BA9'}>
                           {
                             ((product?.sku && product?.sku !== '-1' && product?.sku !== '1') || (productCart?.sku && productCart?.sku !== '-1' && productCart?.sku !== '1'))
                             && <>{t('SKU', 'Sku')}{' '}{product?.sku || productCart?.sku}</>
                           }
-                          {product?.sku && product?.sku !== '-1' && product?.sku !== '1' && product?.estimated_person && (
+                          {!!product?.sku && product?.sku !== '-1' && product?.sku !== '1' && !!product?.estimated_person && (
                             <>&nbsp;&#183;&nbsp;</>
                           )}
-                          {product?.estimated_person
+                          {!!product?.estimated_person
                             && <>{product?.estimated_person}{' '}{t('ESTIMATED_PERSONS', 'persons')}</>
                           }
                         </OText>

package/src/components/SingleProductCard/index.tsx

@@ -86,7 +86,7 @@ export const SingleProductCard = (props: SingleProductCardParams) => {
         <OText size={12} numberOfLines={2} ellipsizeMode='tail' style={styles.textStyle}>{product?.description}</OText>
         <PricesContainer>
           <OText color={theme.colors.primary}>{parsePrice(product?.price)}</OText>
-          {product?.offer_price && (
+          {!!product?.offer_price && (
             <OText style={styles.regularPriceStyle}>{parsePrice(product?.offer_price)}</OText>
           )}
         </PricesContainer>

package/src/components/TaxInformation/index.tsx

@@ -1,51 +1,83 @@
 import React from 'react'
-import { useLanguage, useUtils } from 'ordering-components/native'
+import { useLanguage } from 'ordering-components/native'
 import { SingleProductCard } from '../SingleProductCard'
 import { TaxInformationContainer, ProductContainer } from './styles'
 import { OText } from '../shared'
 
 interface taxInformationParams {
-  data: { name: string, description?: string, rate: string | number, type: number, fixed?: number, percentage?: number, id: number },
-  products: Array<any>
+  data: {
+    name: string,
+    description?: string,
+    rate: string | number,
+    type: number,
+    fixed?: number,
+    percentage?: number,
+    id: number,
+    discounts?: any
+  },
+  products: Array<any>,
+  type: string
 }
 
 export const TaxInformation = (props: taxInformationParams) => {
   const {
     data,
-    products
+    products,
+    type
   } = props
 
   const [, t] = useLanguage()
-  const [{ parsePrice }] = useUtils()
 
-  const isTax = typeof data?.rate === 'number'
-  const TaxFeeString = isTax ? 'tax' : 'fee'
   const includedOnPriceString = data?.type === 1 ? `(${t('INCLUDED_ON_PRICE', 'Included on price')})` : `(${t('NOT_INCLUDED_ON_PRICE', 'Not included on price')})`
 
+  const getFilterValidation = (product: any) => {
+    return (
+      type === 'tax'
+        ? (product.tax?.id ? product.tax?.id === data?.id : product.tax?.id === null && data?.id === null)
+        : type === 'fee'
+          ? (product.fee?.id ? product.fee?.id === data?.id : (product.fee?.id === null && data?.id === null))
+          : Object.keys(data?.discounts ?? {}).map(code => code.includes(product?.code))
+    )
+  }
+
+  const getTypeString = () => {
+    return (
+      type === 'offer_target_1'
+        ? t('PRODUCT_DISCOUNT', 'Product discount')
+        : type === 'tax'
+          ? t('TAX', 'Tax')
+          : t('Fee', 'Fee')
+    )
+  }
+
   return (
     <TaxInformationContainer>
-      <OText size={24} style={{ alignSelf: 'center', textAlign: 'center' }} mBottom={10}>
-        {`${data?.name ||
-          t('INHERIT_FROM_BUSINESS', 'Inherit from business')} (${typeof data?.rate === 'number' ? `${data?.rate}%` : `${parsePrice(data?.fixed ?? 0)} + ${data?.percentage}%`})`}
-      </OText>
-      {data?.description && (
+      {!!data?.description ? (
+        <OText size={24} style={{ alignSelf: 'center', textAlign: 'center' }} mBottom={10}>
+          {t('DESCRIPTION', 'Description')}: {data?.description} {data?.type && !type?.includes('offer') && includedOnPriceString}
+        </OText>
+      ) : (
         <OText mBottom={10} size={18} style={{ alignSelf: 'center', textAlign: 'center' }}>
-          {t('DESCRIPTION', 'Description')}: {data?.description} {data?.type && includedOnPriceString}
+          {t('WITHOUT_DESCRIPTION', 'Without description')}
         </OText>
       )}
-      <OText>{t(`OTHER_PRODUCTS_WITH_THIS_${TaxFeeString.toUpperCase()}`, `Other products with this ${TaxFeeString}`)}:</OText>
-      <ProductContainer>
-        {
-          products.filter((product: any) => isTax ? (product.tax?.id ? product.tax?.id === data?.id : product.tax?.id === null && data?.id === null) : (product.fee?.id ? product.fee?.id === data?.id : (product.fee?.id === null && data?.id === null))).map(product => (
-            <SingleProductCard
-              key={product.id}
-              product={product}
-              isSoldOut={false}
-              businessId={product?.business_id}
-            />
-          ))
-        }
-      </ProductContainer>
+      {!(type === 'offer_target_2' || type === 'offer_target_3') && (
+        <>
+          <OText>{t('OTHER_PRODUCTS_WITH_THIS', 'Other products with this')} {getTypeString()}:</OText>
+          <ProductContainer>
+            {
+              products.filter((product: any) => getFilterValidation(product)).map(product => (
+                <SingleProductCard
+                  key={product.id}
+                  product={product}
+                  isSoldOut={false}
+                  businessId={product?.business_id}
+                />
+              ))
+            }
+          </ProductContainer>
+        </>
+      )}
     </TaxInformationContainer>
   )
 }

package/src/navigators/HomeNavigator.tsx

@@ -21,6 +21,7 @@ import HelpOrder from '../pages/HelpOrder'
 import HelpGuide from '../pages/HelpGuide'
 import HelpAccountAndPayment from '../pages/HelpAccountAndPayment'
 import Splash from '../pages/Splash';
+import ProductDetails from '../pages/ProductDetails';
 const Stack = createStackNavigator();
 
 const HomeNavigator = (e : any) => {
@@ -101,6 +102,11 @@ const HomeNavigator = (e : any) => {
                     component={BusinessProductsList}
                     options={{ headerShown: false }}
                   />
+                  <Stack.Screen
+                    name="ProductDetails"
+                    component={ProductDetails}
+                    options={{ headerShown: false }}
+                  />
                   <Stack.Screen
                     name="ReviewOrder"
                     component={ReviewOrder}

package/src/pages/ProductDetails.tsx

@@ -0,0 +1,55 @@
+import * as React from 'react';
+import styled, { useTheme } from 'styled-components/native';
+import { Platform } from 'react-native';
+import { ProductForm as ProductFormController } from '../components/ProductForm';
+interface Props {
+  navigation: any;
+  route: any;
+}
+
+const ProductDetails = (props: Props) => {
+  const theme = useTheme()
+
+  const productProps = {
+    ...props,
+    isCartProduct: props.route.params?.isCartProduct,
+    isFromCheckout: props.route.params?.isFromCheckout,
+    productCart: props.route.params?.productCart,
+    product: props.route.params?.product,
+    businessSlug: props.route.params?.businessSlug,
+    businessId: props.route.params?.businessId,
+    categoryId: props.route.params?.categoryId,
+    productId: props.route.params?.productId,
+    onSave: props?.navigation?.canGoBack()
+      ? () => { props.route.params?.onAction && props.route.params?.onAction(); props?.navigation?.goBack(); }
+      : () => { props.route.params?.onAction && props.route.params?.onAction(); props?.navigation?.navigate('BottomTab') }
+    ,
+    handleGoBack: props?.navigation?.canGoBack()
+      ? () => {
+        props.route.params?.onAction &&
+        props.route.params?.onAction();
+        props?.navigation?.goBack();
+      }
+      : (businessSlug: any) => {
+        props.route.params?.onAction &&
+        props.route.params?.onAction();
+        businessSlug
+          ? props?.navigation.navigate('Business', { store: businessSlug })
+          : props?.navigation.navigate('BottomTab')
+      }
+  };
+
+  const BusinessProductsListView = styled.SafeAreaView`
+    flex: 1;
+    background-color: ${theme.colors.backgroundPage};
+    padding-top: ${Platform.OS === 'ios' ? '0px' : '20px'};
+  `;
+
+  return (
+    <BusinessProductsListView>
+      <ProductFormController {...productProps} />
+    </BusinessProductsListView>
+  );
+};
+
+export default ProductDetails;

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

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

@@ -7,6 +7,7 @@ import {
   PaymentOptionWallet as PaymentOptionWalletController,
   useLanguage,
   useUtils,
+  useOrder
 } from 'ordering-components/native'
 
 import {
@@ -18,7 +19,7 @@ import { OText } from '../shared'
 
 const PaymentOptionWalletUI = (props: any) => {
   const {
-    cart,
+    businessId,
     walletsState,
     selectWallet,
     deletetWalletSelected
@@ -26,8 +27,11 @@ const PaymentOptionWalletUI = (props: any) => {
 
   const theme = useTheme()
   const [, t] = useLanguage()
+  const [{ carts }] = useOrder()
   const [{ parsePrice }] = useUtils()
 
+  const cart = carts?.[`businessId:${businessId}`] ?? {}
+
   const styles = StyleSheet.create({
     checkBoxStyle: {
       width: 25,
@@ -68,7 +72,7 @@ const PaymentOptionWalletUI = (props: any) => {
     if (!walletsState.loading && walletsState.result?.length) {
       setCheckedState(
         walletsState.result?.map((wallet: any) => {
-          return !!cart?.wallets?.find((w: any) => w.id === wallet.id)
+          return !!cart?.payment_events?.find((w: any) => w.wallet_id === wallet.id)
         })
       )
     }