ordering-ui-react-native 0.12.44 → 0.12.45

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

@@ -1,19 +1,20 @@
 import React, { useState } from 'react';
 import { View } from 'react-native'
 import {
-	Cart,
-	useOrder,
-	useLanguage,
-	useUtils,
-	useConfig,
-	useValidationFields,
+  Cart,
+  useOrder,
+  useLanguage,
+  useUtils,
+  useConfig,
+  useValidationFields,
 } from 'ordering-components/native';
-
+import { useTheme } from 'styled-components/native';
 import {
-	OSContainer,
-	OSProductList,
-	OSBill,
-	OSTable
+  OSContainer,
+  OSProductList,
+  OSBill,
+  OSTable,
+  OSRow
 } from './styles';
 
 import { ProductItemAccordion } from '../ProductItemAccordion';
@@ -21,178 +22,212 @@ import { CouponControl } from '../CouponControl';
 import { OModal, OText } from '../shared';
 import { ProductForm } from '../ProductForm';
 import { verifyDecimals } from '../../utils';
-
+import AntIcon from 'react-native-vector-icons/AntDesign'
+import { TaxInformation } from '../TaxInformation';
+import { TouchableOpacity } from 'react-native';
 
 const OrderSummaryUI = (props: any) => {
-	const {
-		cart,
-		changeQuantity,
-		getProductMax,
-		offsetDisabled,
-		removeProduct,
-		isCartPending,
-		isFromCheckout
-	} = props;
+  const {
+    cart,
+    changeQuantity,
+    getProductMax,
+    offsetDisabled,
+    removeProduct,
+    isCartPending,
+    isFromCheckout
+  } = props;
+
+  const theme = useTheme()
+  const [, t] = useLanguage();
+  const [{ configs }] = useConfig();
+  const [orderState] = useOrder();
+  const [{ parsePrice, parseNumber }] = useUtils();
+  const [validationFields] = useValidationFields();
+  const [openProduct, setModalIsOpen] = useState(false)
+  const [curProduct, setCurProduct] = useState<any>(null)
+  const [openTaxModal, setOpenTaxModal] = useState<any>({ open: false, data: null })
+
+  const isCouponEnabled = validationFields?.fields?.checkout?.coupon?.enabled;
 
-	const [, t] = useLanguage();
-	const [{ configs }] = useConfig();
-	const [orderState] = useOrder();
-	const [{ parsePrice, parseNumber }] = useUtils();
-	const [validationFields] = useValidationFields();
-	const [openProduct, setModalIsOpen] = useState(false)
-	const [curProduct, setCurProduct] = useState<any>(null)
+  const handleDeleteClick = (product: any) => {
+    removeProduct(product, cart)
+  }
 
-	const isCouponEnabled = validationFields?.fields?.checkout?.coupon?.enabled;
+  const handleEditProduct = (product: any) => {
+    setCurProduct(product)
+    setModalIsOpen(true)
+  }
 
-	const handleDeleteClick = (product: any) => {
-		removeProduct(product, cart)
-	}
+  const handlerProductAction = (product: any) => {
+    if (Object.keys(product).length) {
+      setModalIsOpen(false)
+    }
+  }
 
-	const handleEditProduct = (product: any) => {
-		setCurProduct(product)
-		setModalIsOpen(true)
-	}
+  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 handlerProductAction = (product: any) => {
-		if (Object.keys(product).length) {
-			setModalIsOpen(false)
-		}
-	}
 
-	return (
-		<OSContainer>
-			{cart?.products?.length > 0 && (
-				<>
-					<OSProductList>
-						{cart?.products.map((product: any) => (
-							<ProductItemAccordion
-								key={product.code}
-								product={product}
-								isCartPending={isCartPending}
-								isCartProduct
-								changeQuantity={changeQuantity}
-								getProductMax={getProductMax}
-								offsetDisabled={offsetDisabled}
-								onDeleteProduct={handleDeleteClick}
-								onEditProduct={handleEditProduct}
-								isFromCheckout={isFromCheckout}
-							/>
-						))}
-					</OSProductList>
-					{cart?.valid && (
-						<OSBill>
-							<OSTable>
-								<OText size={12}>{t('SUBTOTAL', 'Subtotal')}</OText>
-								<OText size={12}>{cart.business.tax_type === 1
-									? parsePrice((cart?.subtotal + cart?.tax) || 0)
-									: parsePrice(cart?.subtotal || 0)}</OText>
-							</OSTable>
-							{cart?.discount > 0 && cart?.total >= 0 && (
-								<OSTable>
-									{cart?.discount_type === 1 ? (
-										<OText size={12}>
-											{t('DISCOUNT', 'Discount')}
-											<OText size={12}>{`(${verifyDecimals(cart?.discount_rate, parsePrice)}%)`}</OText>
-										</OText>
-									) : (
-										<OText size={12}>{t('DISCOUNT', 'Discount')}</OText>
-									)}
-									<OText size={12}>- {parsePrice(cart?.discount || 0)}</OText>
-								</OSTable>
-							)}
-							{cart.business.tax_type !== 1 && (
-								<OSTable>
-									<OText size={12}>
-										{t('TAX', 'Tax')}
-										{`(${verifyDecimals(cart?.business?.tax, parseNumber)}%)`}
-									</OText>
-									<OText size={12}>{parsePrice(cart?.tax || 0)}</OText>
-								</OSTable>
-							)}
-							{orderState?.options?.type === 1 && cart?.delivery_price > 0 && (
-								<OSTable>
-									<OText size={12}>{t('DELIVERY_FEE', 'Delivery Fee')}</OText>
-									<OText size={12}>{parsePrice(cart?.delivery_price)}</OText>
-								</OSTable>
-							)}
-							{cart?.driver_tip > 0 && (
-								<OSTable>
-									<OText size={12}>
-										{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}>{parsePrice(cart?.driver_tip)}</OText>
-								</OSTable>
-							)}
-							{cart?.service_fee > 0 && (
-								<OSTable>
-									<OText size={12}>
-										{t('SERVICE_FEE', 'Service Fee')}
-										{`(${verifyDecimals(cart?.business?.service_fee, parseNumber)}%)`}
-									</OText>
-									<OText size={12}>{parsePrice(cart?.service_fee)}</OText>
-								</OSTable>
-							)}
-							{isCouponEnabled && !isCartPending && (
-								<View>
-									<View style={{ paddingVertical: 5 }}>
-										<CouponControl
-											businessId={cart.business_id}
-											price={cart.total}
-										/>
-									</View>
-								</View>
-							)}
-							{cart?.total >= 1 && (
-								<View style={{ marginTop: 15, borderTopWidth: 1, borderTopColor: '#d9d9d9' }}>
-									<OSTable style={{ marginTop: 15 }}>
-										<OText size={14} style={{ fontWeight: 'bold' }}>
-											{t('TOTAL', 'Total')}
-										</OText>
-										<OText size={14} style={{ fontWeight: 'bold' }} >
-											{parsePrice(cart?.total)}
-										</OText>
-									</OSTable>
-								</View>
-							)}
-						</OSBill>
-					)}
-					<OModal
-						open={openProduct}
-						entireModal
-						customClose
-						onClose={() => setModalIsOpen(false)}
-					>
-						<ProductForm
-							isCartProduct
-							productCart={curProduct}
-							businessSlug={cart?.business?.slug}
-							businessId={cart?.business_id}
-							categoryId={curProduct?.category_id}
-							productId={curProduct?.id}
-							onSave={handlerProductAction}
-							onClose={() => setModalIsOpen(false)}
-							isFromCheckout={isFromCheckout}
-						/>
-					</OModal>
-				</>
-			)}
-		</OSContainer>
-	)
+  return (
+    <OSContainer>
+      {cart?.products?.length > 0 && (
+        <>
+          <OSProductList>
+            {cart?.products.map((product: any) => (
+              <ProductItemAccordion
+                key={product.code}
+                product={product}
+                isCartPending={isCartPending}
+                isCartProduct
+                changeQuantity={changeQuantity}
+                getProductMax={getProductMax}
+                offsetDisabled={offsetDisabled}
+                onDeleteProduct={handleDeleteClick}
+                onEditProduct={handleEditProduct}
+                isFromCheckout={isFromCheckout}
+              />
+            ))}
+          </OSProductList>
+          {cart?.valid && (
+            <OSBill>
+              <OSTable>
+                <OText size={12}>{t('SUBTOTAL', 'Subtotal')}</OText>
+                <OText size={12}>{parsePrice(cart?.subtotal + getIncludedTaxes())}</OText>
+              </OSTable>
+              {cart?.discount > 0 && cart?.total >= 0 && (
+                <OSTable>
+                  {cart?.discount_type === 1 ? (
+                    <OText size={12}>
+                      {t('DISCOUNT', 'Discount')}
+                      <OText size={12}>{`(${verifyDecimals(cart?.discount_rate, parsePrice)}%)`}</OText>
+                    </OText>
+                  ) : (
+                    <OText size={12}>{t('DISCOUNT', 'Discount')}</OText>
+                  )}
+                  <OText size={12}>- {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={20} 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={20} 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}>{t('DELIVERY_FEE', 'Delivery Fee')}</OText>
+                  <OText size={12}>{parsePrice(cart?.delivery_price)}</OText>
+                </OSTable>
+              )}
+              {cart?.driver_tip > 0 && (
+                <OSTable>
+                  <OText size={12}>
+                    {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}>{parsePrice(cart?.driver_tip)}</OText>
+                </OSTable>
+              )}
+              {isCouponEnabled && !isCartPending && (
+                <View>
+                  <View style={{ paddingVertical: 5 }}>
+                    <CouponControl
+                      businessId={cart.business_id}
+                      price={cart.total}
+                    />
+                  </View>
+                </View>
+              )}
+              {cart?.total >= 1 && (
+                <View style={{ marginTop: 15, borderTopWidth: 1, borderTopColor: '#d9d9d9' }}>
+                  <OSTable style={{ marginTop: 15 }}>
+                    <OText size={14} style={{ fontWeight: 'bold' }}>
+                      {t('TOTAL', 'Total')}
+                    </OText>
+                    <OText size={14} style={{ fontWeight: 'bold' }} >
+                      {parsePrice(cart?.total)}
+                    </OText>
+                  </OSTable>
+                </View>
+              )}
+            </OSBill>
+          )}
+          <OModal
+            open={openProduct}
+            entireModal
+            customClose
+            onClose={() => setModalIsOpen(false)}
+          >
+            <ProductForm
+              isCartProduct
+              productCart={curProduct}
+              businessSlug={cart?.business?.slug}
+              businessId={cart?.business_id}
+              categoryId={curProduct?.category_id}
+              productId={curProduct?.id}
+              onSave={handlerProductAction}
+              onClose={() => setModalIsOpen(false)}
+              isFromCheckout={isFromCheckout}
+            />
+          </OModal>
+          <OModal
+            open={openTaxModal.open}
+            onClose={() => setOpenTaxModal({ open: false, data: null })}
+            entireModal
+          >
+            <TaxInformation data={openTaxModal.data} products={cart.products} />
+          </OModal>
+        </>
+      )}
+    </OSContainer>
+  )
 }
 
 export const OrderSummary = (props: any) => {
-	const orderSummaryProps = {
-		...props,
-		UIComponent: OrderSummaryUI
-	}
+  const orderSummaryProps = {
+    ...props,
+    UIComponent: OrderSummaryUI
+  }
 
-	return (
-		<Cart {...orderSummaryProps} />
-	)
+  return (
+    <Cart {...orderSummaryProps} />
+  )
 }

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

@@ -33,3 +33,9 @@ export const OSCoupon = styled.View`
   width: 100%;
   padding: 5px 0px;
 `
+
+export const OSRow = styled.View`
+  flex-direction: row;
+  overflow: hidden;
+  width: 80%;
+`

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

@@ -87,7 +87,7 @@ export const SingleProductCard = (props: SingleProductCardParams) => {
 				styles.container,
 				(isSoldOut || maxProductQuantity <= 0) && styles.soldOutBackgroundStyle,
 			]}
-			onPress={() => onProductClick(product)}>
+			onPress={() => onProductClick?.(product)}>
 			<CardInfo>
 				<OText
 					size={12}

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

@@ -0,0 +1,51 @@
+import React from 'react'
+import { useLanguage, useUtils } 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>
+}
+
+export const TaxInformation = (props: taxInformationParams) => {
+  const {
+    data,
+    products
+  } = 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')})`
+
+  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 && (
+        <OText mBottom={10} size={18} style={{ alignSelf: 'center', textAlign: 'center' }}>
+          {t('DESCRIPTION', 'Description')}: {data?.description} {data?.type && includedOnPriceString}
+        </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>
+    </TaxInformationContainer>
+  )
+}

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

@@ -0,0 +1,9 @@
+import styled from 'styled-components/native'
+
+export const TaxInformationContainer = styled.ScrollView`
+  padding: 10px;
+`
+
+export const ProductContainer = styled.View`
+  flex: 1
+`

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

@@ -28,7 +28,10 @@ import { UpsellingProducts } from '../UpsellingProducts';
 import { 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 { TaxInformation } from '../TaxInformation';
+import { TouchableOpacity } from 'react-native';
 const CartUI = (props: any) => {
   const {
     cart,
@@ -55,6 +58,7 @@ const CartUI = (props: any) => {
   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
@@ -96,6 +100,16 @@ const CartUI = (props: any) => {
     })
   }
 
+  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)
+    }
+  }
+
   return (
     cart?.products?.length > 0 ? (
       <ScrollView
@@ -134,9 +148,7 @@ const CartUI = (props: any) => {
                   <OSTable>
                     <OText size={12} lineHeight={18}>{t('SUBTOTAL', 'Subtotal')}</OText>
                     <OText size={12} lineHeight={18}>
-                      {cart.business.tax_type === 1
-                        ? parsePrice((cart?.subtotal + cart?.tax) || 0)
-                        : parsePrice(cart?.subtotal || 0)}
+                      {parsePrice(cart?.subtotal + getIncludedTaxes())}
                     </OText>
                   </OSTable>
                   {cart?.discount > 0 && cart?.total >= 0 && (
@@ -152,15 +164,38 @@ const CartUI = (props: any) => {
                       <OText size={12} lineHeight={18}>- {parsePrice(cart?.discount || 0)}</OText>
                     </OSTable>
                   )}
-                  {cart.business.tax_type !== 1 && (
-                    <OSTable>
-                      <OText size={12} lineHeight={18}>
-                        {t('TAX', 'Tax')}
-                        {`(${verifyDecimals(cart?.business?.tax, parseNumber)}%)`}
-                      </OText>
-                      <OText size={12} lineHeight={18}>{parsePrice(cart?.tax || 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>
@@ -181,15 +216,6 @@ const CartUI = (props: any) => {
                       <OText size={12} lineHeight={18}>{parsePrice(cart?.driver_tip)}</OText>
                     </OSTable>
                   )}
-                  {cart?.service_fee > 0 && (
-                    <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>
-                  )}
                   {isCouponEnabled && !isCartPending && (
                     <OSTable>
                       <OSCoupon>
@@ -200,7 +226,7 @@ const CartUI = (props: any) => {
                       </OSCoupon>
                     </OSTable>
                   )}
-  
+
                   <OSTotal>
                     <OSTable style={{ marginTop: 15 }}>
                       <OText size={14} lineHeight={21} weight={'600'}>
@@ -289,7 +315,7 @@ const CartUI = (props: any) => {
             onSave={handlerProductAction}
             onClose={() => setModalIsOpen(false)}
           />
-  
+
         </OModal>
       </ScrollView>
     ) : (
@@ -308,6 +334,13 @@ const CartUI = (props: any) => {
             image={theme.images.general.notFound}
           />
         </View>
+        <OModal
+          open={openTaxModal.open}
+          onClose={() => setOpenTaxModal({ open: false, data: null })}
+          entireModal
+        >
+          <TaxInformation data={openTaxModal.data} products={cart.products} />
+        </OModal>
       </Container>
     )
   )