ordering-ui-react-native 0.24.43-test → 0.25.1

package/themes/single-business/src/components/Cart/index.tsx

@@ -1,490 +1,490 @@
-import React, { useState } from 'react';
-import {
-  Cart as CartController,
-  useOrder,
-  useLanguage,
-  useConfig,
-  useUtils,
-  useValidationFields,
-} from 'ordering-components/native';
-import { useTheme } from 'styled-components/native';
-import { ScrollView, View, useWindowDimensions, ActivityIndicator, StyleSheet } from 'react-native';
-import {
-  CheckoutAction,
-  OSBill,
-  OSTable,
-  OSCoupon,
-  OSTotal,
-  Title,
-  LineDivider,
-  BIHeader,
-  BIInfo,
-  BIContentInfo,
-  BITotal,
-  TopHeader
-} from './styles';
-
-import { ProductItemAccordion } from '../ProductItemAccordion';
-import { CouponControl } from '../CouponControl';
-
-import { OButton, OInput, OModal, OText, OIcon } from '../shared';
-import { ProductForm } from '../ProductForm';
-import { UpsellingProducts } from '../UpsellingProducts';
-import { convertHoursToMinutes, verifyDecimals } from '../../utils';
-import { Container } from '../../layouts/Container';
-import { NotFoundSource } from '../NotFoundSource'
-import { OSRow } from '../OrderSummary/styles';
-import AntIcon from 'react-native-vector-icons/AntDesign'
-import MaterialCommunityIcon from 'react-native-vector-icons/MaterialCommunityIcons'
-import { TaxInformation } from '../TaxInformation';
-import { TouchableOpacity } from 'react-native';
-
-const CartUI = (props: any) => {
-  const {
-    cart,
-    clearCart,
-    isCartList,
-    changeQuantity,
-    getProductMax,
-    offsetDisabled,
-    removeProduct,
-    handleCartOpen,
-    setIsCartsLoading,
-    handleChangeComment,
-    commentState
-  } = props
-
-  const theme = useTheme();
-  const { height } = useWindowDimensions()
-
-  const [, t] = useLanguage()
-  const [orderState] = useOrder()
-  const [{ configs }] = useConfig();
-  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 [canOpenUpselling, setCanOpenUpselling] = useState(false)
-  const [isUpsellingProducts, setIsUpsellingProducts] = useState(false)
-  const [openTaxModal, setOpenTaxModal] = useState<any>({ open: false, data: null })
-
-  const isCartPending = cart?.status === 2
-  const isCouponEnabled = validationFields?.fields?.checkout?.coupon?.enabled
-  const isClosed = !cart?.valid_schedule
-  const isProducts = cart?.products?.length
-
-  const handleDeleteClick = (product: any) => {
-    removeProduct(product, cart)
-  }
-
-  const handleEditProduct = (product: any) => {
-    setCurProduct(product)
-    setModalIsOpen(true)
-  }
-
-  const handlerProductAction = (product: any) => {
-    if (Object.keys(product).length) {
-      setModalIsOpen(false)
-    }
-  }
-
-  // const handleClearProducts = async () => {
-  //   try {
-  //     setIsCartsLoading && setIsCartsLoading(true)
-  //     const result = await clearCart(cart?.uuid)
-  //     setIsCartsLoading && setIsCartsLoading(false)
-  //   } catch (error) {
-  //     setIsCartsLoading && setIsCartsLoading(false)
-  //   }
-  // }
-
-  const handleUpsellingPage = () => {
-    setOpenUpselling(false)
-    setCanOpenUpselling(false)
-    props.onNavigationRedirect('CheckoutNavigator', {
-      screen: 'CheckoutPage',
-      cartUuid: cart?.uuid,
-      businessLogo: cart?.business?.logo,
-      businessName: cart?.business?.name,
-      cartTotal: cart?.total
-    })
-  }
-
-  const getIncludedTaxes = () => {
-    if (cart?.taxes === null) {
-      return cart.business.tax_type === 1 ? cart?.tax : 0
-    } else {
-      return cart?.taxes.reduce((taxIncluded: number, tax: any) => {
-        return taxIncluded + (tax.type === 1 ? tax.summary?.tax : 0)
-      }, 0)
-    }
-  }
-
-  const CartHeader = () => {
-    return (
-      <BIHeader isClosed={isClosed}>
-        <BIInfo>
-          {cart?.business?.logo && (
-            <View
-              style={{
-                height: 72,
-                width: 72,
-                borderWidth: 1,
-                borderColor: theme.colors.border,
-                borderRadius: 8
-              }}
-            >
-              <OIcon
-                url={cart?.business?.logo}
-                width={70}
-                height={70}
-                style={{ borderRadius: 16 }}
-              />
-            </View>
-          )}
-          <BIContentInfo>
-            <OText>{cart?.business?.name}</OText>
-            {orderState?.options?.type === 1 ? (
-              <View style={{ display: 'flex', flexDirection: 'row', alignItems: 'center' }}>
-                <MaterialCommunityIcon
-                  name='clock-outline'
-                  size={20}
-                />
-                <OText size={12}>{convertHoursToMinutes(cart?.business?.delivery_time)}</OText>
-              </View>
-            ) : (
-              <View style={{ display: 'flex', flexDirection: 'row', alignItems: 'center' }}>
-                <MaterialCommunityIcon
-                  name='clock-outline'
-                  size={20}
-                />
-                <OText size={12}>{convertHoursToMinutes(cart?.business?.pickup_time)}</OText>
-              </View>
-            )}
-          </BIContentInfo>
-        </BIInfo>
-
-        {!isClosed && !!isProducts && cart?.valid_products && cart?.total > 0 && (
-          <BITotal>
-            <OText size={12}>{t('CART_TOTAL', 'Total')}</OText>
-            <OText size={12} color='#000'>{parsePrice(cart?.total)}</OText>
-          </BITotal>
-        )}
-
-        {isClosed && (
-          <BITotal>
-            <OText>{t('CLOSED', 'Closed')}</OText>
-          </BITotal>
-        )}
-
-        {!isClosed && !isProducts && (
-          <BITotal>
-            <OText>{t('NO_PRODUCTS', 'No products')}</OText>
-          </BITotal>
-        )}
-      </BIHeader>
-    )
-  }
-
-  const styles = StyleSheet.create({
-    headerItem: {
-      overflow: 'hidden',
-      backgroundColor: theme.colors.clear,
-      width: 35,
-      marginVertical: 18,
-    },
-  })
-
-  return (
-    cart?.products?.length > 0 ? (
-      <ScrollView
-        showsVerticalScrollIndicator={false}
-        showsHorizontalScrollIndicator={false}
-        style={{ height: isCartList ? 'auto' : height, backgroundColor: theme.colors.backgroundPage }}
-      >
-        <Container noPadding={isCartList}>
-          {!isCartList ? (
-            <Title>
-              <OText
-                size={20}
-              >
-                {t('YOUR_CART', 'Your cart')}
-              </OText>
-            </Title>
-          ) : (
-            <CartHeader />
-          )}
-
-          {cart?.products?.length > 0 && (
-            <View>
-              {cart?.products?.map((product: any) => (
-                <ProductItemAccordion
-                  key={product.code}
-                  isCartPending={isCartPending}
-                  isCartProduct
-                  product={product}
-                  changeQuantity={changeQuantity}
-                  getProductMax={getProductMax}
-                  offsetDisabled={offsetDisabled}
-                  onDeleteProduct={handleDeleteClick}
-                  onEditProduct={handleEditProduct}
-                />
-              ))}
-
-              {cart?.valid_products && (
-                <OSBill>
-                  <OSTable>
-                    <OText size={12} lineHeight={18}>{t('SUBTOTAL', 'Subtotal')}</OText>
-                    <OText size={12} lineHeight={18}>
-                      {parsePrice(cart?.subtotal + getIncludedTaxes())}
-                    </OText>
-                  </OSTable>
-                  {cart?.discount > 0 && cart?.total >= 0 && (
-                    <OSTable>
-                      {cart?.discount_type === 1 ? (
-                        <OText size={12} lineHeight={18}>
-                          {t('DISCOUNT', 'Discount')}
-                          <OText size={12} lineHeight={18}>{`(${verifyDecimals(cart?.discount_rate, parsePrice)}%)`}</OText>
-                        </OText>
-                      ) : (
-                        <OText size={12} lineHeight={18}>{t('DISCOUNT', 'Discount')}</OText>
-                      )}
-                      <OText size={12} lineHeight={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={12} numberOfLines={1} >
-                            {tax.name || t('INHERIT_FROM_BUSINESS', 'Inherit from business')}{' '}
-                            {`(${verifyDecimals(tax?.rate, parseNumber)}%)`}{' '}
-                          </OText>
-                          <TouchableOpacity onPress={() => setOpenTaxModal({ open: true, data: tax })} >
-                            <AntIcon name='exclamationcircleo' size={12} color={theme.colors.primary} />
-                          </TouchableOpacity>
-                        </OSRow>
-                        <OText size={12}>{parsePrice(tax?.summary?.tax || 0)}</OText>
-                      </OSTable>
-                    ))
-                  }
-                  {
-                    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={12} numberOfLines={1}>
-                            {fee.name || t('INHERIT_FROM_BUSINESS', 'Inherit from business')}{' '}
-                            ({parsePrice(fee?.fixed)} + {fee?.percentage}%){' '}
-                          </OText>
-                          <TouchableOpacity onPress={() => setOpenTaxModal({ open: true, data: fee })} >
-                            <AntIcon name='exclamationcircleo' size={12} color={theme.colors.primary} />
-                          </TouchableOpacity>
-                        </OSRow>
-                        <OText size={12}>{parsePrice(fee?.summary?.fixed + fee?.summary?.percentage || 0)}</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?.driver_tip > 0 && (
-                    <OSTable>
-                      <OText size={12} lineHeight={18}>
-                        {t('DRIVER_TIP', 'Driver tip')}
-                        {cart?.driver_tip_rate > 0 &&
-                          parseInt(configs?.driver_tip_type?.value, 10) === 2 &&
-                          !parseInt(configs?.driver_tip_use_custom?.value, 10) &&
-                          (
-                            `(${verifyDecimals(cart?.driver_tip_rate, parseNumber)}%)`
-                          )}
-                      </OText>
-                      <OText size={12} lineHeight={18}>{parsePrice(cart?.driver_tip)}</OText>
-                    </OSTable>
-                  )}
-                  {isCouponEnabled && !isCartPending && (
-                    <OSTable>
-                      <OSCoupon>
-                        <CouponControl
-                          businessId={cart.business_id}
-                          price={cart.total}
-                        />
-                      </OSCoupon>
-                    </OSTable>
-                  )}
-
-                  {cart?.status !== 2 && (
-                    <OSTable>
-                      <View style={{ width: '100%', marginTop: 0 }}>
-                        <OText size={14} style={{ marginBottom: 10 }}>{t('COMMENTS', 'Comments')}</OText>
-                        <View style={{ flex: 1, width: '100%' }}>
-                          <OInput
-                            value={cart?.comment}
-                            placeholder={t('SPECIAL_COMMENTS', 'Special Comments')}
-                            onChange={(value: string) => handleChangeComment(value)}
-                            style={{
-                              borderColor: theme.colors.border,
-                              borderRadius: 10,
-                              marginBottom: 20,
-                              height: 104,
-                              maxHeight: 104,
-                              alignItems: 'flex-start',
-                            }}
-                            multiline
-                          />
-                          {commentState?.loading && (
-                            <View style={{ position: 'absolute', right: 20 }}>
-                              <ActivityIndicator
-                                size='large'
-                                style={{ height: 100 }}
-                                color={theme.colors.primary}
-                              />
-                            </View>
-                          )}
-                        </View>
-                      </View>
-                    </OSTable>
-                  )}
-
-                  <OSTotal>
-                    <OSTable style={{ marginTop: 15 }}>
-                      <OText size={14} lineHeight={21} weight={'600'}>
-                        {t('TOTAL', 'Total')}
-                      </OText>
-                      <OText size={14} lineHeight={21} weight={'600'}>
-                        {cart?.total >= 1 && parsePrice(cart?.total)}
-                      </OText>
-                    </OSTable>
-                  </OSTotal>
-                </OSBill>
-              )}
-            </View>
-          )}
-        </Container>
-
-        {cart?.products?.length > 0 && (
-          <>
-            <LineDivider />
-
-            <Container noPadding={isCartList}>
-              <View style={{ padding: 0, }}>
-                <ScrollView
-                  showsVerticalScrollIndicator={false}
-                  showsHorizontalScrollIndicator={false}
-                >
-                  <UpsellingProducts
-                    isCustomMode
-                    isShowTitle
-                    openUpselling={openUpselling}
-                    businessId={cart?.business_id}
-                    business={cart?.business}
-                    cartProducts={cart?.products}
-                    canOpenUpselling={canOpenUpselling}
-                    setCanOpenUpselling={setCanOpenUpselling}
-                    handleUpsellingPage={handleUpsellingPage}
-                    handleCloseUpsellingPage={() => { }}
-                    handleUpsellingProducts={setIsUpsellingProducts}
-                  />
-                </ScrollView>
-
-                {cart?.valid_products && (
-                  <CheckoutAction>
-                    <OButton
-                      text={(cart?.subtotal >= cart?.minimum || !cart?.minimum) && cart?.valid_address ? (
-                        !openUpselling !== canOpenUpselling ? t('CHECKOUT', 'Checkout') : t('LOADING', 'Loading')
-                      ) : !cart?.valid_address ? (
-                        `${t('OUT_OF_COVERAGE', 'Out of Coverage')}`
-                      ) : (
-                        `${t('MINIMUN_SUBTOTAL_ORDER', 'Minimum subtotal order:')} ${parsePrice(cart?.minimum)}`
-                      )}
-                      bgColor={(cart?.subtotal < cart?.minimum || !cart?.valid_address) ? theme.colors.secundary : theme.colors.primary}
-                      isDisabled={(openUpselling && !canOpenUpselling) || cart?.subtotal < cart?.minimum || !cart?.valid_address}
-                      borderColor={theme.colors.primary}
-                      imgRightSrc={null}
-                      textStyle={{ color: 'white', textAlign: 'center', flex: 1 }}
-                      onClick={() => props.onNavigationRedirect('CheckoutNavigator', {
-                        screen: 'CheckoutPage',
-                        cartUuid: cart?.uuid,
-                        businessLogo: cart?.business?.logo,
-                        businessName: cart?.business?.name,
-                        cartTotal: cart?.total
-                      })}
-                      style={{ width: '100%', flexDirection: 'row', justifyContent: 'center', borderRadius: 7.6, shadowOpacity: 0 }}
-                    />
-                  </CheckoutAction>
-                )}
-              </View>
-            </Container>
-          </>
-        )}
-
-        <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)}
-          />
-        </OModal>
-
-        <OModal
-          open={openTaxModal.open}
-          onClose={() => setOpenTaxModal({ open: false, data: null })}
-          entireModal
-          customClose
-        >
-          <>
-            <TopHeader>
-              <TouchableOpacity
-                style={styles.headerItem}
-                onPress={() => setOpenTaxModal({ open: false, data: null })}>
-                <OIcon src={theme.images.general.close} width={16} />
-              </TouchableOpacity>
-            </TopHeader>
-            <TaxInformation data={openTaxModal.data} products={cart?.products} />
-          </>
-        </OModal>
-      </ScrollView>
-    ) : (
-      <Container>
-        <Title>
-          <OText
-            size={20}
-          >
-            {t('YOUR_CART', 'Your cart')}
-          </OText>
-        </Title>
-        <View style={{ height: height * 0.7, justifyContent: 'center' }}>
-          <NotFoundSource
-            content={t('NO_PRODUCTS_FOUND', 'Sorry, no products found')}
-            image={theme.images.general.notFound}
-          />
-        </View>
-      </Container>
-    )
-  )
-}
-
-export const Cart = (props: any) => {
-  const cartProps = {
-    ...props,
-    UIComponent: CartUI
-  }
-
-  return (
-    <CartController {...cartProps} />
-  )
-}
+import React, { useState } from 'react';
+import {
+  Cart as CartController,
+  useOrder,
+  useLanguage,
+  useConfig,
+  useUtils,
+  useValidationFields,
+} from 'ordering-components/native';
+import { useTheme } from 'styled-components/native';
+import { ScrollView, View, useWindowDimensions, ActivityIndicator, StyleSheet } from 'react-native';
+import {
+  CheckoutAction,
+  OSBill,
+  OSTable,
+  OSCoupon,
+  OSTotal,
+  Title,
+  LineDivider,
+  BIHeader,
+  BIInfo,
+  BIContentInfo,
+  BITotal,
+  TopHeader
+} from './styles';
+
+import { ProductItemAccordion } from '../ProductItemAccordion';
+import { CouponControl } from '../CouponControl';
+
+import { OButton, OInput, OModal, OText, OIcon } from '../shared';
+import { ProductForm } from '../ProductForm';
+import { UpsellingProducts } from '../UpsellingProducts';
+import { convertHoursToMinutes, verifyDecimals } from '../../utils';
+import { Container } from '../../layouts/Container';
+import { NotFoundSource } from '../NotFoundSource'
+import { OSRow } from '../OrderSummary/styles';
+import AntIcon from 'react-native-vector-icons/AntDesign'
+import MaterialCommunityIcon from 'react-native-vector-icons/MaterialCommunityIcons'
+import { TaxInformation } from '../TaxInformation';
+import { TouchableOpacity } from 'react-native';
+
+const CartUI = (props: any) => {
+  const {
+    cart,
+    clearCart,
+    isCartList,
+    changeQuantity,
+    getProductMax,
+    offsetDisabled,
+    removeProduct,
+    handleCartOpen,
+    setIsCartsLoading,
+    handleChangeComment,
+    commentState
+  } = props
+
+  const theme = useTheme();
+  const { height } = useWindowDimensions()
+
+  const [, t] = useLanguage()
+  const [orderState] = useOrder()
+  const [{ configs }] = useConfig();
+  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 [canOpenUpselling, setCanOpenUpselling] = useState(false)
+  const [isUpsellingProducts, setIsUpsellingProducts] = useState(false)
+  const [openTaxModal, setOpenTaxModal] = useState<any>({ open: false, data: null })
+
+  const isCartPending = cart?.status === 2
+  const isCouponEnabled = validationFields?.fields?.checkout?.coupon?.enabled
+  const isClosed = !cart?.valid_schedule
+  const isProducts = cart?.products?.length
+
+  const handleDeleteClick = (product: any) => {
+    removeProduct(product, cart)
+  }
+
+  const handleEditProduct = (product: any) => {
+    setCurProduct(product)
+    setModalIsOpen(true)
+  }
+
+  const handlerProductAction = (product: any) => {
+    if (Object.keys(product).length) {
+      setModalIsOpen(false)
+    }
+  }
+
+  // const handleClearProducts = async () => {
+  //   try {
+  //     setIsCartsLoading && setIsCartsLoading(true)
+  //     const result = await clearCart(cart?.uuid)
+  //     setIsCartsLoading && setIsCartsLoading(false)
+  //   } catch (error) {
+  //     setIsCartsLoading && setIsCartsLoading(false)
+  //   }
+  // }
+
+  const handleUpsellingPage = () => {
+    setOpenUpselling(false)
+    setCanOpenUpselling(false)
+    props.onNavigationRedirect('CheckoutNavigator', {
+      screen: 'CheckoutPage',
+      cartUuid: cart?.uuid,
+      businessLogo: cart?.business?.logo,
+      businessName: cart?.business?.name,
+      cartTotal: cart?.total
+    })
+  }
+
+  const getIncludedTaxes = () => {
+    if (cart?.taxes === null) {
+      return cart.business.tax_type === 1 ? cart?.tax : 0
+    } else {
+      return cart?.taxes.reduce((taxIncluded: number, tax: any) => {
+        return taxIncluded + (tax.type === 1 ? tax.summary?.tax : 0)
+      }, 0)
+    }
+  }
+
+  const CartHeader = () => {
+    return (
+      <BIHeader isClosed={isClosed}>
+        <BIInfo>
+          {cart?.business?.logo && (
+            <View
+              style={{
+                height: 72,
+                width: 72,
+                borderWidth: 1,
+                borderColor: theme.colors.border,
+                borderRadius: 8
+              }}
+            >
+              <OIcon
+                url={cart?.business?.logo}
+                width={70}
+                height={70}
+                style={{ borderRadius: 16 }}
+              />
+            </View>
+          )}
+          <BIContentInfo>
+            <OText>{cart?.business?.name}</OText>
+            {orderState?.options?.type === 1 ? (
+              <View style={{ display: 'flex', flexDirection: 'row', alignItems: 'center' }}>
+                <MaterialCommunityIcon
+                  name='clock-outline'
+                  size={20}
+                />
+                <OText size={12}>{convertHoursToMinutes(cart?.business?.delivery_time)}</OText>
+              </View>
+            ) : (
+              <View style={{ display: 'flex', flexDirection: 'row', alignItems: 'center' }}>
+                <MaterialCommunityIcon
+                  name='clock-outline'
+                  size={20}
+                />
+                <OText size={12}>{convertHoursToMinutes(cart?.business?.pickup_time)}</OText>
+              </View>
+            )}
+          </BIContentInfo>
+        </BIInfo>
+
+        {!isClosed && !!isProducts && cart?.valid_products && cart?.total > 0 && (
+          <BITotal>
+            <OText size={12}>{t('CART_TOTAL', 'Total')}</OText>
+            <OText size={12} color='#000'>{parsePrice(cart?.total)}</OText>
+          </BITotal>
+        )}
+
+        {isClosed && (
+          <BITotal>
+            <OText>{t('CLOSED', 'Closed')}</OText>
+          </BITotal>
+        )}
+
+        {!isClosed && !isProducts && (
+          <BITotal>
+            <OText>{t('NO_PRODUCTS', 'No products')}</OText>
+          </BITotal>
+        )}
+      </BIHeader>
+    )
+  }
+
+  const styles = StyleSheet.create({
+    headerItem: {
+      overflow: 'hidden',
+      backgroundColor: theme.colors.clear,
+      width: 35,
+      marginVertical: 18,
+    },
+  })
+
+  return (
+    cart?.products?.length > 0 ? (
+      <ScrollView
+        showsVerticalScrollIndicator={false}
+        showsHorizontalScrollIndicator={false}
+        style={{ height: isCartList ? 'auto' : height, backgroundColor: theme.colors.backgroundPage }}
+      >
+        <Container noPadding={isCartList}>
+          {!isCartList ? (
+            <Title>
+              <OText
+                size={20}
+              >
+                {t('YOUR_CART', 'Your cart')}
+              </OText>
+            </Title>
+          ) : (
+            <CartHeader />
+          )}
+
+          {cart?.products?.length > 0 && (
+            <View>
+              {cart?.products?.map((product: any) => (
+                <ProductItemAccordion
+                  key={product.code}
+                  isCartPending={isCartPending}
+                  isCartProduct
+                  product={product}
+                  changeQuantity={changeQuantity}
+                  getProductMax={getProductMax}
+                  offsetDisabled={offsetDisabled}
+                  onDeleteProduct={handleDeleteClick}
+                  onEditProduct={handleEditProduct}
+                />
+              ))}
+
+              {cart?.valid_products && (
+                <OSBill>
+                  <OSTable>
+                    <OText size={12} lineHeight={18}>{t('SUBTOTAL', 'Subtotal')}</OText>
+                    <OText size={12} lineHeight={18}>
+                      {parsePrice(cart?.subtotal + getIncludedTaxes())}
+                    </OText>
+                  </OSTable>
+                  {cart?.discount > 0 && cart?.total >= 0 && (
+                    <OSTable>
+                      {cart?.discount_type === 1 ? (
+                        <OText size={12} lineHeight={18}>
+                          {t('DISCOUNT', 'Discount')}
+                          <OText size={12} lineHeight={18}>{`(${verifyDecimals(cart?.discount_rate, parsePrice)}%)`}</OText>
+                        </OText>
+                      ) : (
+                        <OText size={12} lineHeight={18}>{t('DISCOUNT', 'Discount')}</OText>
+                      )}
+                      <OText size={12} lineHeight={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={12} numberOfLines={1} >
+                            {tax.name || t('INHERIT_FROM_BUSINESS', 'Inherit from business')}{' '}
+                            {`(${verifyDecimals(tax?.rate, parseNumber)}%)`}{' '}
+                          </OText>
+                          <TouchableOpacity onPress={() => setOpenTaxModal({ open: true, data: tax })} >
+                            <AntIcon name='exclamationcircleo' size={12} color={theme.colors.primary} />
+                          </TouchableOpacity>
+                        </OSRow>
+                        <OText size={12}>{parsePrice(tax?.summary?.tax || 0)}</OText>
+                      </OSTable>
+                    ))
+                  }
+                  {
+                    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={12} numberOfLines={1}>
+                            {fee.name || t('INHERIT_FROM_BUSINESS', 'Inherit from business')}{' '}
+                            ({parsePrice(fee?.fixed)} + {fee?.percentage}%){' '}
+                          </OText>
+                          <TouchableOpacity onPress={() => setOpenTaxModal({ open: true, data: fee })} >
+                            <AntIcon name='exclamationcircleo' size={12} color={theme.colors.primary} />
+                          </TouchableOpacity>
+                        </OSRow>
+                        <OText size={12}>{parsePrice(fee?.summary?.fixed + fee?.summary?.percentage || 0)}</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?.driver_tip > 0 && (
+                    <OSTable>
+                      <OText size={12} lineHeight={18}>
+                        {t('DRIVER_TIP', 'Driver tip')}
+                        {cart?.driver_tip_rate > 0 &&
+                          parseInt(configs?.driver_tip_type?.value, 10) === 2 &&
+                          !parseInt(configs?.driver_tip_use_custom?.value, 10) &&
+                          (
+                            `(${verifyDecimals(cart?.driver_tip_rate, parseNumber)}%)`
+                          )}
+                      </OText>
+                      <OText size={12} lineHeight={18}>{parsePrice(cart?.driver_tip)}</OText>
+                    </OSTable>
+                  )}
+                  {isCouponEnabled && !isCartPending && (
+                    <OSTable>
+                      <OSCoupon>
+                        <CouponControl
+                          businessId={cart.business_id}
+                          price={cart.total}
+                        />
+                      </OSCoupon>
+                    </OSTable>
+                  )}
+
+                  {cart?.status !== 2 && (
+                    <OSTable>
+                      <View style={{ width: '100%', marginTop: 0 }}>
+                        <OText size={14} style={{ marginBottom: 10 }}>{t('COMMENTS', 'Comments')}</OText>
+                        <View style={{ flex: 1, width: '100%' }}>
+                          <OInput
+                            value={cart?.comment}
+                            placeholder={t('SPECIAL_COMMENTS', 'Special Comments')}
+                            onChange={(value: string) => handleChangeComment(value)}
+                            style={{
+                              borderColor: theme.colors.border,
+                              borderRadius: 10,
+                              marginBottom: 20,
+                              height: 104,
+                              maxHeight: 104,
+                              alignItems: 'flex-start',
+                            }}
+                            multiline
+                          />
+                          {commentState?.loading && (
+                            <View style={{ position: 'absolute', right: 20 }}>
+                              <ActivityIndicator
+                                size='large'
+                                style={{ height: 100 }}
+                                color={theme.colors.primary}
+                              />
+                            </View>
+                          )}
+                        </View>
+                      </View>
+                    </OSTable>
+                  )}
+
+                  <OSTotal>
+                    <OSTable style={{ marginTop: 15 }}>
+                      <OText size={14} lineHeight={21} weight={'600'}>
+                        {t('TOTAL', 'Total')}
+                      </OText>
+                      <OText size={14} lineHeight={21} weight={'600'}>
+                        {cart?.total >= 1 && parsePrice(cart?.total)}
+                      </OText>
+                    </OSTable>
+                  </OSTotal>
+                </OSBill>
+              )}
+            </View>
+          )}
+        </Container>
+
+        {cart?.products?.length > 0 && (
+          <>
+            <LineDivider />
+
+            <Container noPadding={isCartList}>
+              <View style={{ padding: 0, }}>
+                <ScrollView
+                  showsVerticalScrollIndicator={false}
+                  showsHorizontalScrollIndicator={false}
+                >
+                  <UpsellingProducts
+                    isCustomMode
+                    isShowTitle
+                    openUpselling={openUpselling}
+                    businessId={cart?.business_id}
+                    business={cart?.business}
+                    cartProducts={cart?.products}
+                    canOpenUpselling={canOpenUpselling}
+                    setCanOpenUpselling={setCanOpenUpselling}
+                    handleUpsellingPage={handleUpsellingPage}
+                    handleCloseUpsellingPage={() => { }}
+                    handleUpsellingProducts={setIsUpsellingProducts}
+                  />
+                </ScrollView>
+
+                {cart?.valid_products && (
+                  <CheckoutAction>
+                    <OButton
+                      text={(cart?.subtotal >= cart?.minimum || !cart?.minimum) && cart?.valid_address ? (
+                        !openUpselling !== canOpenUpselling ? t('CHECKOUT', 'Checkout') : t('LOADING', 'Loading')
+                      ) : !cart?.valid_address ? (
+                        `${t('OUT_OF_COVERAGE', 'Out of Coverage')}`
+                      ) : (
+                        `${t('MINIMUN_SUBTOTAL_ORDER', 'Minimum subtotal order:')} ${parsePrice(cart?.minimum)}`
+                      )}
+                      bgColor={(cart?.subtotal < cart?.minimum || !cart?.valid_address) ? theme.colors.secundary : theme.colors.primary}
+                      isDisabled={(openUpselling && !canOpenUpselling) || cart?.subtotal < cart?.minimum || !cart?.valid_address}
+                      borderColor={theme.colors.primary}
+                      imgRightSrc={null}
+                      textStyle={{ color: 'white', textAlign: 'center', flex: 1 }}
+                      onClick={() => props.onNavigationRedirect('CheckoutNavigator', {
+                        screen: 'CheckoutPage',
+                        cartUuid: cart?.uuid,
+                        businessLogo: cart?.business?.logo,
+                        businessName: cart?.business?.name,
+                        cartTotal: cart?.total
+                      })}
+                      style={{ width: '100%', flexDirection: 'row', justifyContent: 'center', borderRadius: 7.6, shadowOpacity: 0 }}
+                    />
+                  </CheckoutAction>
+                )}
+              </View>
+            </Container>
+          </>
+        )}
+
+        <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)}
+          />
+        </OModal>
+
+        <OModal
+          open={openTaxModal.open}
+          onClose={() => setOpenTaxModal({ open: false, data: null })}
+          entireModal
+          customClose
+        >
+          <>
+            <TopHeader>
+              <TouchableOpacity
+                style={styles.headerItem}
+                onPress={() => setOpenTaxModal({ open: false, data: null })}>
+                <OIcon src={theme.images.general.close} width={16} />
+              </TouchableOpacity>
+            </TopHeader>
+            <TaxInformation data={openTaxModal.data} products={cart?.products} />
+          </>
+        </OModal>
+      </ScrollView>
+    ) : (
+      <Container>
+        <Title>
+          <OText
+            size={20}
+          >
+            {t('YOUR_CART', 'Your cart')}
+          </OText>
+        </Title>
+        <View style={{ height: height * 0.7, justifyContent: 'center' }}>
+          <NotFoundSource
+            content={t('NO_PRODUCTS_FOUND', 'Sorry, no products found')}
+            image={theme.images.general.notFound}
+          />
+        </View>
+      </Container>
+    )
+  )
+}
+
+export const Cart = (props: any) => {
+  const cartProps = {
+    ...props,
+    UIComponent: CartUI
+  }
+
+  return (
+    <CartController {...cartProps} />
+  )
+}