ordering-ui-react-native 0.12.44 → 0.12.45

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

@@ -1,19 +1,20 @@
 import React, { useEffect, useState } from 'react';
-import { View } from 'react-native'
+import { TouchableOpacity, View } from 'react-native'
 import {
-	Cart,
-	useOrder,
-	useLanguage,
-	useUtils,
-	useConfig,
-	useValidationFields,
+  Cart,
+  useOrder,
+  useLanguage,
+  useUtils,
+  useConfig,
+  useValidationFields,
 } from 'ordering-components/native';
 
 import {
-	OSContainer,
-	OSProductList,
-	OSBill,
-	OSTable
+  OSContainer,
+  OSProductList,
+  OSBill,
+  OSTable,
+  OSRow
 } from './styles';
 
 import { ProductItemAccordion } from '../ProductItemAccordion';
@@ -23,200 +24,241 @@ import { ProductForm } from '../ProductForm';
 import { verifyDecimals } from '../../utils';
 import { useTheme } from 'styled-components/native';
 import { DriverTips } from '../DriverTips';
+import AntIcon from 'react-native-vector-icons/AntDesign'
+import { TaxInformation } from '../TaxInformation';
 
 const OrderSummaryUI = (props: any) => {
-	const {
-		cart,
-		changeQuantity,
-		getProductMax,
-		offsetDisabled,
-		removeProduct,
-		isCartPending,
-		isFromCheckout,
-		isDriverTips,
-		handleProductDelete,
-		handleProductEdit
-	} = props;
+  const {
+    cart,
+    changeQuantity,
+    getProductMax,
+    offsetDisabled,
+    removeProduct,
+    isCartPending,
+    isFromCheckout,
+    isDriverTips,
+    handleProductDelete,
+    handleProductEdit
+  } = 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 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 isCouponEnabled = validationFields?.fields?.checkout?.coupon?.enabled;
 
-	const driverTipsOptions = typeof configs?.driver_tip_options?.value === 'string'
-		? JSON.parse(configs?.driver_tip_options?.value) || []
-		: configs?.driver_tip_options?.value || []
+  const driverTipsOptions = typeof configs?.driver_tip_options?.value === 'string'
+    ? JSON.parse(configs?.driver_tip_options?.value) || []
+    : configs?.driver_tip_options?.value || []
 
-	const handlerProductAction = (product: any) => {
-		if (Object.keys(product).length) {
-			setModalIsOpen(false)
-		}
-	}
+  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={handleProductDelete}
-								onEditProduct={handleProductEdit}
-								isFromCheckout={isFromCheckout}
-								isExpanded
-							/>
-						))}
-					</OSProductList>
-					{isDriverTips && driverTipsOptions && driverTipsOptions?.length > 0 && (
-						<View style={{ flexDirection: 'column', paddingVertical: 10, paddingBottom: 17, borderBottomWidth: 1, borderBottomColor: theme.colors.border }}>
-							<View style={{ flexDirection: 'row', alignItems: 'center' }}>
-								<OIcon src={theme.images.general.bicycle} color={theme.colors.primary} width={16} style={{ marginEnd: 7 }} />
-								<OText style={{ ...theme.labels.middle, fontWeight: '600', marginBottom: 3 }}>
-									{t('DRIVER_TIPS', 'Driver Tips')}
-								</OText>
-							</View>
-							<DriverTips
-								businessId={cart?.business_id}
-								driverTipsOptions={driverTipsOptions}
-								isFixedPrice={parseInt(configs?.driver_tip_type?.value, 10) === 1 || !!parseInt(configs?.driver_tip_use_custom?.value, 10)}
-								isDriverTipUseCustom={!!parseInt(configs?.driver_tip_use_custom?.value, 10)}
-								driverTip={parseInt(configs?.driver_tip_type?.value, 10) === 1 || !!parseInt(configs?.driver_tip_use_custom?.value, 10)
-									? cart?.driver_tip
-									: cart?.driver_tip_rate}
-								useOrderContext
-								wrapStyle={{ alignSelf: 'stretch' }}
-							/>
-						</View>
-					)}
+  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)
+    }
+  }
 
-					{cart?.valid && (
-						<OSBill>
-							<OSTable>
-								<OText style={theme.labels.normal} color={theme.colors.textPrimary}>{t('SUBTOTAL', 'Subtotal')}</OText>
-								<OText style={theme.labels.normal} color={theme.colors.textPrimary}>{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 style={theme.labels.normal} color={theme.colors.textPrimary}>
-											{t('DISCOUNT', 'Discount')}
-											<OText style={theme.labels.normal} color={theme.colors.textPrimary}>{`(${verifyDecimals(cart?.discount_rate, parsePrice)}%)`}</OText>
-										</OText>
-									) : (
-										<OText style={theme.labels.normal} color={theme.colors.textPrimary}>{t('DISCOUNT', 'Discount')}</OText>
-									)}
-									<OText style={theme.labels.normal} color={theme.colors.textPrimary}>- {parsePrice(cart?.discount || 0)}</OText>
-								</OSTable>
-							)}
-							{cart.business.tax_type !== 1 && (
-								<OSTable>
-									<OText style={theme.labels.normal} color={theme.colors.textPrimary}>
-										{t('TAX', 'Tax')}
-										{`(${verifyDecimals(cart?.business?.tax, parseNumber)}%)`}
-									</OText>
-									<OText style={theme.labels.normal} color={theme.colors.textPrimary}>{parsePrice(cart?.tax || 0)}</OText>
-								</OSTable>
-							)}
-							{orderState?.options?.type === 1 && cart?.delivery_price > 0 && (
-								<OSTable>
-									<OText style={theme.labels.normal} color={theme.colors.textPrimary}>{t('DELIVERY_FEE', 'Delivery Fee')}</OText>
-									<OText style={theme.labels.normal} color={theme.colors.textPrimary}>{parsePrice(cart?.delivery_price)}</OText>
-								</OSTable>
-							)}
-							{cart?.driver_tip > 0 && (
-								<OSTable>
-									<OText style={theme.labels.normal} color={theme.colors.textPrimary}>
-										{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 style={theme.labels.normal} color={theme.colors.textPrimary}>{parsePrice(cart?.driver_tip)}</OText>
-								</OSTable>
-							)}
-							{cart?.service_fee > 0 && (
-								<OSTable>
-									<OText style={theme.labels.normal} color={theme.colors.textPrimary}>
-										{t('SERVICE_FEE', 'Service Fee')}
-										{`(${verifyDecimals(cart?.business?.service_fee, parseNumber)}%)`}
-									</OText>
-									<OText style={theme.labels.normal} color={theme.colors.textPrimary}>{parsePrice(cart?.service_fee)}</OText>
-								</OSTable>
-							)}
-							{cart?.total >= 1 && (
-								<View style={{}}>
-									<OSTable>
-										<OText size={12} lineHeight={18} weight={'600'} color={theme.colors.textPrimary}>
-											{t('TOTAL', 'Total')}
-										</OText>
-										<OText size={12} lineHeight={18} weight={'600'} color={theme.colors.textPrimary}>
-											{parsePrice(cart?.total)}
-										</OText>
-									</OSTable>
-								</View>
-							)}
-							{isCouponEnabled && !isCartPending && (
-								<View>
-									<View style={{ paddingVertical: 5 }}>
-										<CouponControl
-											businessId={cart.business_id}
-											price={cart.total}
-										/>
-									</View>
-								</View>
-							)}
+  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={handleProductDelete}
+                onEditProduct={handleProductEdit}
+                isFromCheckout={isFromCheckout}
+                isExpanded
+              />
+            ))}
+          </OSProductList>
+          {isDriverTips && driverTipsOptions && driverTipsOptions?.length > 0 && (
+            <View style={{ flexDirection: 'column', paddingVertical: 10, paddingBottom: 17, borderBottomWidth: 1, borderBottomColor: theme.colors.border }}>
+              <View style={{ flexDirection: 'row', alignItems: 'center' }}>
+                <OIcon src={theme.images.general.bicycle} color={theme.colors.primary} width={16} style={{ marginEnd: 7 }} />
+                <OText style={{ ...theme.labels.middle, fontWeight: '600', marginBottom: 3 }}>
+                  {t('DRIVER_TIPS', 'Driver Tips')}
+                </OText>
+              </View>
+              <DriverTips
+                businessId={cart?.business_id}
+                driverTipsOptions={driverTipsOptions}
+                isFixedPrice={parseInt(configs?.driver_tip_type?.value, 10) === 1 || !!parseInt(configs?.driver_tip_use_custom?.value, 10)}
+                isDriverTipUseCustom={!!parseInt(configs?.driver_tip_use_custom?.value, 10)}
+                driverTip={parseInt(configs?.driver_tip_type?.value, 10) === 1 || !!parseInt(configs?.driver_tip_use_custom?.value, 10)
+                  ? cart?.driver_tip
+                  : cart?.driver_tip_rate}
+                useOrderContext
+                wrapStyle={{ alignSelf: 'stretch' }}
+              />
+            </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>
-	)
+          {cart?.valid && (
+            <OSBill>
+              <OSTable>
+                <OText style={theme.labels.normal} color={theme.colors.textPrimary}>{t('SUBTOTAL', 'Subtotal')}</OText>
+                <OText style={theme.labels.normal} color={theme.colors.textPrimary}>{parsePrice(cart?.subtotal + getIncludedTaxes())}</OText>
+              </OSTable>
+              {cart?.discount > 0 && cart?.total >= 0 && (
+                <OSTable>
+                  {cart?.discount_type === 1 ? (
+                    <OText style={theme.labels.normal} color={theme.colors.textPrimary}>
+                      {t('DISCOUNT', 'Discount')}
+                      <OText style={theme.labels.normal} color={theme.colors.textPrimary}>{`(${verifyDecimals(cart?.discount_rate, parsePrice)}%)`}</OText>
+                    </OText>
+                  ) : (
+                    <OText style={theme.labels.normal} color={theme.colors.textPrimary}>{t('DISCOUNT', 'Discount')}</OText>
+                  )}
+                  <OText style={theme.labels.normal} color={theme.colors.textPrimary}>- {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 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 >{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 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>{parsePrice(fee?.summary?.fixed + fee?.summary?.percentage || 0)}</OText>
+                  </OSTable>
+                ))
+              }
+              {orderState?.options?.type === 1 && cart?.delivery_price > 0 && (
+                <OSTable>
+                  <OText style={theme.labels.normal} color={theme.colors.textPrimary}>{t('DELIVERY_FEE', 'Delivery Fee')}</OText>
+                  <OText style={theme.labels.normal} color={theme.colors.textPrimary}>{parsePrice(cart?.delivery_price)}</OText>
+                </OSTable>
+              )}
+              {cart?.driver_tip > 0 && (
+                <OSTable>
+                  <OText style={theme.labels.normal} color={theme.colors.textPrimary}>
+                    {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 style={theme.labels.normal} color={theme.colors.textPrimary}>{parsePrice(cart?.driver_tip)}</OText>
+                </OSTable>
+              )}
+              {cart?.service_fee > 0 && (
+                <OSTable>
+                  <OText style={theme.labels.normal} color={theme.colors.textPrimary}>
+                    {t('SERVICE_FEE', 'Service Fee')}
+                    {`(${verifyDecimals(cart?.business?.service_fee, parseNumber)}%)`}
+                  </OText>
+                  <OText style={theme.labels.normal} color={theme.colors.textPrimary}>{parsePrice(cart?.service_fee)}</OText>
+                </OSTable>
+              )}
+              {cart?.total >= 1 && (
+                <View style={{}}>
+                  <OSTable>
+                    <OText size={12} lineHeight={18} weight={'600'} color={theme.colors.textPrimary}>
+                      {t('TOTAL', 'Total')}
+                    </OText>
+                    <OText size={12} lineHeight={18} weight={'600'} color={theme.colors.textPrimary}>
+                      {parsePrice(cart?.total)}
+                    </OText>
+                  </OSTable>
+                </View>
+              )}
+              {isCouponEnabled && !isCartPending && (
+                <View>
+                  <View style={{ paddingVertical: 5 }}>
+                    <CouponControl
+                      businessId={cart.business_id}
+                      price={cart.total}
+                    />
+                  </View>
+                </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/instacart/src/components/OrderSummary/styles.tsx

@@ -34,3 +34,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/instacart/src/components/SingleProductCard/index.tsx

@@ -76,7 +76,7 @@ export const SingleProductCard = (props: SingleProductCardParams) => {
 
   return (
     <CardContainer style={styles.container}
-      onPress={() => onProductClick(product)}
+      onPress={() => onProductClick?.(product)}
 		  activeOpacity={0.8}
     >
       <OIcon
@@ -90,7 +90,7 @@ export const SingleProductCard = (props: SingleProductCardParams) => {
         <OText color={theme.colors.textSecondary} size={9} numberOfLines={2} ellipsizeMode='tail' style={{...styles.textStyle, ...theme.labels.small}}>{product?.description}</OText>
       </CardInfo>
 
-		<TouchableOpacity style={styles.addBtn} onPress={() => onProductClick(product)} activeOpacity={0.7}>
+		<TouchableOpacity style={styles.addBtn} onPress={() => onProductClick?.(product)} activeOpacity={0.7}>
 			<OIcon src={theme.images.general.plus_circle} />
 		</TouchableOpacity>
 

package/themes/instacart/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/instacart/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
+`