ordering-ui-react-native 0.17.9 → 0.17.10-release

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

@@ -8,7 +8,7 @@ import {
   useValidationFields,
 } from 'ordering-components/native';
 import { useTheme } from 'styled-components/native';
-import { CContainer, CheckoutAction, Divider, DriverTipsContainer } from './styles';
+import { CContainer, CheckoutAction, DriverTipsContainer } from './styles';
 
 import { OSBill, OSTable, OSCoupon, OSTotal, OSRow } from '../OrderSummary/styles';
 
@@ -41,7 +41,17 @@ const CartUI = (props: any) => {
     commentState,
     onNavigationRedirect,
     handleRemoveOfferClick,
-    isMultiCheckout
+    isMultiCheckout,
+    hideDeliveryFee,
+    hideDriverTip,
+    hideCouponInput,
+    preorderSlotInterval,
+    preorderLeadTime,
+    preorderTimeRange,
+    preorderMaximumDays,
+    preorderMinimumDays,
+    cateringTypes,
+    isFromUpselling
   } = props
 
   const theme = useTheme();
@@ -61,13 +71,12 @@ const CartUI = (props: any) => {
 
   const isCartPending = cart?.status === 2
   const isCouponEnabled = validationFields?.fields?.checkout?.coupon?.enabled
-  const isCheckoutMultiBusinessEnabled: Boolean = configs?.checkout_multi_business_enabled?.value === '1'
-  const openCarts = (Object.values(orderState?.carts)?.filter((cart: any) => cart?.products && cart?.products?.length && cart?.status !== 2 && cart?.valid_schedule && cart?.valid_products && cart?.valid_address && cart?.valid_maximum && cart?.valid_minimum && !cart?.wallets) || null) || []
-
   const business: any = (orderState?.carts && Object.values(orderState.carts).find((_cart: any) => _cart?.uuid === props.cartuuid)) ?? {}
   const businessId = business?.business_id ?? null
   const placeSpotTypes = [4]
-
+  const isChewLayout = theme?.header?.components?.layout?.type?.toLowerCase() === 'chew'
+  const hideCartComments = theme?.business_view?.components?.cart?.components?.comments?.hidden
+  const hideCartDiscount = theme?.business_view?.components?.cart?.components?.discount?.hidden
   const driverTipsOptions = typeof configs?.driver_tip_options?.value === 'string'
     ? JSON.parse(configs?.driver_tip_options?.value) || []
     : configs?.driver_tip_options?.value || []
@@ -101,21 +110,45 @@ const CartUI = (props: any) => {
     }
   }
 
-  const handleUpsellingPage = () => {
+  const handleUpsellingPage = (individualCart : any) => {
+    const isProductCartParam = !!individualCart?.products?.length
     setOpenUpselling(false)
     setCanOpenUpselling(false)
-    if (isCheckoutMultiBusinessEnabled && openCarts.length > 1) {
-      props.onNavigationRedirect('CheckoutNavigator', {
-        screen: 'MultiCheckout'
-      })
-    } else {
-      props.onNavigationRedirect('CheckoutNavigator', {
+
+    const cartsAvailable: any = Object.values(orderState?.carts)
+      ?.filter((_cart: any) => _cart?.valid && _cart?.status !== 2 && _cart?.products?.length)
+      ?.filter((_c: any) => !isProductCartParam ? _c.uuid !== individualCart?.uuid : _c)
+    if (cartsAvailable.length === 1 || !isMultiCheckout) {
+      const cart = isMultiCheckout ? cartsAvailable[0] : individualCart
+      onNavigationRedirect('CheckoutNavigator', {
         screen: 'CheckoutPage',
         cartUuid: cart?.uuid,
         businessLogo: cart?.business?.logo,
         businessName: cart?.business?.name,
         cartTotal: cart?.total
+      }, true)
+    } else {
+      const groupKeys: any = {}
+      cartsAvailable.forEach((_cart: any) => {
+        groupKeys[_cart?.group?.uuid]
+          ? groupKeys[_cart?.group?.uuid] += 1
+          : groupKeys[_cart?.group?.uuid ?? 'null'] = 1
       })
+
+      if (
+        (Object.keys(groupKeys).length === 1 && Object.keys(groupKeys)[0] === 'null') ||
+        Object.keys(groupKeys).length > 1
+      ) {
+        onNavigationRedirect('CheckoutNavigator', {
+          screen: 'MultiCheckout',
+          checkCarts: true
+        }, true)
+      } else {
+        onNavigationRedirect('CheckoutNavigator', {
+          screen: 'MultiCheckout',
+          cartUuid: cartsAvailable[0]?.group?.uuid
+        }, true)
+      }
     }
   }
 
@@ -154,6 +187,12 @@ const CartUI = (props: any) => {
     }
   }
 
+  const subtotalWithTaxes = cart?.taxes?.reduce((acc: any, item: any) => {
+    if (item?.type === 1)
+      return acc = acc + item?.summary?.tax
+    return acc = acc
+  }, cart?.subtotal)
+
   return (
     <CContainer>
       {openUpselling && (
@@ -178,14 +217,16 @@ const CartUI = (props: any) => {
         onNavigationRedirect={props.onNavigationRedirect}
         handleChangeStore={() => setOpenChangeStore(true)}
         handleClickCheckout={() => setOpenUpselling(true)}
-        checkoutButtonDisabled={(openUpselling && !canOpenUpselling) || cart?.subtotal < cart?.minimum || !cart?.valid_address}
+        checkoutButtonDisabled={(openUpselling && !canOpenUpselling) || subtotalWithTaxes < cart?.minimum || !cart?.valid_address}
         isMultiCheckout={isMultiCheckout}
+        isFromUpselling={isFromUpselling}
       >
         {cart?.products?.length > 0 && cart?.products.map((product: any, i: number) => (
           <ProductItemAccordion
             key={`${product.code}_${i}`}
             isCartPending={isCartPending}
             isCartProduct
+            isDisabledEdit={!cart?.business_id}
             product={product}
             changeQuantity={changeQuantity}
             getProductMax={getProductMax}
@@ -291,9 +332,11 @@ const CartUI = (props: any) => {
                     <TouchableOpacity style={{ marginLeft: 3 }} onPress={() => setOpenTaxModal({ open: true, data: offer, type: 'offer_target_3' })}>
                       <AntIcon name='infocirlceo' size={16} color={theme.colors.primary} />
                     </TouchableOpacity>
-                    <TouchableOpacity style={{ marginLeft: 3 }} onPress={() => onRemoveOffer(offer?.id)}>
-                      <AntIcon name='closecircle' size={16} color={theme.colors.primary} />
-                    </TouchableOpacity>
+                    {!offer?.type && (
+                      <TouchableOpacity style={{ marginLeft: 3 }} onPress={() => onRemoveOffer(offer?.id)}>
+                        <AntIcon name='closecircle' size={16} color={theme.colors.primary} />
+                      </TouchableOpacity>
+                    )}
                   </OSRow>
                   <OText size={12} lineHeight={18}>
                     - {parsePrice(offer?.summary?.discount)}
@@ -301,10 +344,10 @@ const CartUI = (props: any) => {
                 </OSTable>
               ))
             }
-            {orderState?.options?.type === 1 && cart?.delivery_price > 0 && (
+            {orderState?.options?.type === 1 && cart?.delivery_price_with_discount > 0 && !hideDeliveryFee && (
               <OSTable>
                 <OText size={12} lineHeight={18}>{t('DELIVERY_FEE', 'Delivery Fee')}</OText>
-                <OText size={12} lineHeight={18}>{parsePrice(cart?.delivery_price)}</OText>
+                <OText size={12} lineHeight={18}>{parsePrice(cart?.delivery_price_with_discount)}</OText>
               </OSTable>
             )}
             {
@@ -328,7 +371,7 @@ const CartUI = (props: any) => {
                 </OSTable>
               ))
             }
-            {cart?.driver_tip > 0 && (
+            {cart?.driver_tip > 0 && !hideDriverTip && (
               <OSTable>
                 <OText size={12} lineHeight={18}>
                   {t('DRIVER_TIP', 'Driver tip')}
@@ -350,18 +393,19 @@ const CartUI = (props: any) => {
                 <OText size={12}>-{parsePrice(event.amount, { isTruncable: true })}</OText>
               </OSTable>
             ))}
-            {isCouponEnabled && !isCartPending && (
+            {isCouponEnabled && !isCartPending && !hideCouponInput && (
               <OSTable>
                 <OSCoupon>
                   <CouponControl
                     businessId={businessId}
                     price={cart.total}
+                    cart={cart}
                   />
                 </OSCoupon>
               </OSTable>
             )}
 
-            {isMultiCheckout &&
+            {!isMultiCheckout &&
               cart &&
               cart?.valid &&
               orderState?.options?.type === 1 &&
@@ -369,30 +413,31 @@ const CartUI = (props: any) => {
               validationFields?.fields?.checkout?.driver_tip?.enabled &&
               driverTipsOptions && driverTipsOptions?.length > 0 &&
               (
-								<DriverTipsContainer>
-									<OText size={14} lineHeight={20} color={theme.colors.textNormal}>
-										{t('DRIVER_TIPS', 'Driver Tips')}
-									</OText>
-									<DriverTips
-										uuid={cart?.uuid}
-										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
-									/>
-								</DriverTipsContainer>
+                <DriverTipsContainer>
+                  <OText size={14} lineHeight={20} color={theme.colors.textNormal}>
+                    {t('DRIVER_TIPS', 'Driver Tips')}
+                  </OText>
+                  <DriverTips
+                    uuid={cart?.uuid}
+                    businessId={cart?.business_id}
+                    driverTipsOptions={!driverTipsOptions.includes(0) ? [0, ...driverTipsOptions] : driverTipsOptions}
+                    isFixedPrice={parseInt(configs?.driver_tip_type?.value, 10) === 1}
+                    isDriverTipUseCustom={!!parseInt(configs?.driver_tip_use_custom?.value, 10)}
+                    driverTip={parseInt(configs?.driver_tip_type?.value, 10) === 1
+                      ? cart?.driver_tip
+                      : cart?.driver_tip_rate}
+                    useOrderContext
+                    cart={cart}
+                  />
+                </DriverTipsContainer>
               )}
 
             <OSTotal>
               <OSTable style={{ marginTop: 15 }}>
-                <OText size={14} lineHeight={21} weight={'600'}>
+                <OText size={14} lineHeight={21} weight={'bold'} color={theme.colors.textNormal}>
                   {t('TOTAL', 'Total')}
                 </OText>
-                <OText size={14} lineHeight={21} weight={'600'}>
+                <OText size={14} lineHeight={21} weight={'bold'} color={theme.colors.textNormal}>
                   {parsePrice(cart?.balance >= 0 ? cart?.balance : 0)}
                 </OText>
               </OSTable>
@@ -455,15 +500,15 @@ const CartUI = (props: any) => {
             {cart?.valid_products ? (
               <CheckoutAction>
                 <OButton
-                  text={(cart?.subtotal >= cart?.minimum || !cart?.minimum) && cart?.valid_address ? (
+                  text={(subtotalWithTaxes >= 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}
+                  bgColor={(subtotalWithTaxes < cart?.minimum || !cart?.valid_address) ? theme.colors.secundary : theme.colors.primary}
+                  isDisabled={(openUpselling && !canOpenUpselling) || subtotalWithTaxes < cart?.minimum || !cart?.valid_address}
                   borderColor={theme.colors.primary}
                   imgRightSrc={null}
                   textStyle={{ color: 'white', textAlign: 'center', flex: 1 }}

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

@@ -1,12 +1,13 @@
 import React, { useState } from 'react';
 import { View } from 'react-native';
-import { useLanguage } from 'ordering-components/native';
+import { useLanguage, useConfig, useUtils } from 'ordering-components/native';
 import { useTheme } from 'styled-components/native';
-import { CCContainer, CCNotCarts, CCList } from './styles';
+import { CCContainer, CCNotCarts, CCList, CheckoutAction, ChCartsTotal } from './styles';
 
 import { Cart } from '../Cart';
 import { OButton, OText } from '../shared';
 import Spinner from 'react-native-loading-spinner-overlay';
+import { NotFoundSource } from '../NotFoundSource';
 
 export const CartContent = (props: any) => {
 	const {
@@ -17,14 +18,61 @@ export const CartContent = (props: any) => {
 
 	const theme = useTheme();
 	const [, t] = useLanguage()
+	const [{ configs }] = useConfig()
+	const [{ parsePrice }] = useUtils();
 	const [isCartsLoading, setIsCartsLoading] = useState(false)
 
+	const isChewLayout = theme?.header?.components?.layout?.type === 'chew'
+	const isMultiCheckout = configs?.checkout_multi_business_enabled?.value === '1'
+	const cartsAvailable: any = Object.values(carts)?.filter((cart: any) => cart?.valid && cart?.status !== 2)
+
+	const totalCartsPrice = cartsAvailable?.length && cartsAvailable.reduce((total: any, cart: any) => { return total + cart?.total }, 0)
+	const totalCartsFee = cartsAvailable?.length && cartsAvailable
+		?.filter((cart: any) => cart?.status !== 1 && cart?.valid && cart?.products?.length)
+		?.reduce((total: any, cart: any) => { return total + (cart?.delivery_price_with_discount) }, 0)
+
+	const handleCheckoutRedirect = () => {
+		if (cartsAvailable.length === 1) {
+			onNavigationRedirect('CheckoutNavigator', {
+				screen: 'CheckoutPage',
+				cartUuid: cartsAvailable[0]?.uuid,
+				businessLogo: cartsAvailable[0]?.business?.logo,
+				businessName: cartsAvailable[0]?.business?.name,
+				cartTotal: cartsAvailable[0]?.total
+			})
+		} else {
+			const groupKeys: any = {}
+			cartsAvailable.forEach((_cart: any) => {
+				groupKeys[_cart?.group?.uuid]
+					? groupKeys[_cart?.group?.uuid] += 1
+					: groupKeys[_cart?.group?.uuid ?? 'null'] = 1
+			})
+
+			if (
+				(Object.keys(groupKeys).length === 1 && Object.keys(groupKeys)[0] === 'null') ||
+				Object.keys(groupKeys).length > 1
+			) {
+				onNavigationRedirect('CheckoutNavigator', {
+					screen: 'MultiCheckout',
+					checkCarts: true
+				})
+			} else {
+				onNavigationRedirect('CheckoutNavigator', {
+					screen: 'MultiCheckout',
+					cartUuid: cartsAvailable[0]?.group?.uuid
+				})
+			}
+		}
+	}
+
 	return (
-		<CCContainer>
+		<CCContainer
+			style={{ paddingHorizontal: isChewLayout ? 20 : 40 }}
+		>
 			{isOrderStateCarts && carts?.length > 0 && (
 				<>
 					{carts.map((cart: any, i: number) => (
-						<CCList key={i} style={{ overflow: 'visible' }}>
+						<CCList nestedScrollEnabled={true} key={i} style={{ overflow: 'visible' }}>
 							{cart.products.length > 0 && (
 								<>
 									<Cart
@@ -35,32 +83,75 @@ export const CartContent = (props: any) => {
 										onNavigationRedirect={props.onNavigationRedirect}
 										isCartsLoading={isCartsLoading}
 										setIsCartsLoading={setIsCartsLoading}
+										isMultiCheckout={isMultiCheckout}
 										hideUpselling
+										businessConfigs={cart?.business?.configs}
+										hideCouponInput={configs?.multi_business_checkout_coupon_input_style?.value === 'group'}
+                    hideDeliveryFee={configs?.multi_business_checkout_show_combined_delivery_fee?.value === '1'}
+										hideDriverTip={configs?.multi_business_checkout_show_combined_driver_tip?.value === '1'}
 									/>
 									<View style={{ height: 8, backgroundColor: theme.colors.backgroundGray100, marginHorizontal: -40, marginTop: 20 }} />
 								</>
 							)}
 						</CCList>
 					))}
+					{isMultiCheckout && (
+						<>
+							{!!cartsAvailable.length && (
+								<ChCartsTotal>
+									{!!totalCartsFee && configs?.multi_business_checkout_show_combined_delivery_fee?.value === '1' && (
+                    <View style={{ flexDirection: 'row', justifyContent: 'space-between' }}>
+                      <OText size={14} lineHeight={24} color={theme.colors.textNormal} weight={'400'}>
+                        {t('TOTAL_DELIVERY_FEE', 'Total delivery fee')}
+                      </OText>
+                      <OText size={14} lineHeight={24} color={theme.colors.textNormal} weight={'400'}>
+                        {parsePrice(totalCartsFee)}
+                      </OText>
+                    </View>
+                  )}
+                  {cartsAvailable.reduce((sum: any, cart: any) => sum + cart?.driver_tip, 0) > 0 &&
+                    configs?.multi_business_checkout_show_combined_driver_tip?.value === '1' && (
+                    <View style={{ flexDirection: 'row', justifyContent: 'space-between' }}>
+                      <OText size={14} lineHeight={24} color={theme.colors.textNormal} weight={'400'}>
+                        {t('DRIVER_TIP', 'Driver tip')}
+                      </OText>
+                      <OText size={14} lineHeight={24} color={theme.colors.textNormal} weight={'400'}>
+                        {parsePrice(cartsAvailable.reduce((sum: any, cart: any) => sum + cart?.driver_tip, 0))}
+                      </OText>
+                    </View>
+                  )}
+                  <View style={{ flexDirection: 'row', justifyContent: 'space-between' }}>
+                    <OText size={16} lineHeight={24} color={theme.colors.textNormal} weight={'500'}>
+                      {t('TOTAL_FOR_ALL_CARTS', 'Total for all Carts')}
+                    </OText>
+                    <OText size={16} lineHeight={24} color={theme.colors.textNormal} weight={'500'}>{parsePrice(totalCartsPrice)}</OText>
+                  </View>
+								</ChCartsTotal>
+							)}
+							<CheckoutAction style={{ marginTop: 0 }}>
+								<OButton
+									text={t('CHECKOUT', 'Checkout')}
+									bgColor={!cartsAvailable.length ? theme.colors.secundary : theme.colors.primary}
+									isDisabled={!cartsAvailable.length}
+									borderColor={theme.colors.primary}
+									imgRightSrc={null}
+									textStyle={{ color: 'white', textAlign: 'center', flex: 1 }}
+									onClick={() => handleCheckoutRedirect()}
+									style={{ width: '100%', flexDirection: 'row', justifyContent: 'center', borderRadius: 7.6, shadowOpacity: 0 }}
+								/>
+							</CheckoutAction>
+						</>
+					)}
 				</>
 			)}
 			{(!carts || carts?.length === 0) && (
 				<CCNotCarts>
-					<OText size={24} style={{ textAlign: 'center' }}>
-						{t('CARTS_NOT_FOUND', 'You don\'t have carts available')}
-					</OText>
-					<OButton
-						text={t('START_SHOPPING', 'Start shopping')}
-						bgColor={theme.colors.primary}
-						borderColor={theme.colors.primary}
-						textStyle={{
-							color: theme.colors.white,
-							fontSize: 14,
-							paddingRight: 0
-						}}
-						style={{ height: 35, marginVertical: 20, borderRadius: 8 }}
-						imgRightSrc={null}
-						onClick={() => onNavigationRedirect('BusinessList')}
+					<NotFoundSource
+						hideImage
+						btnStyle={{ borderRadius: 8 }}
+						content={t('CARTS_NOT_FOUND', 'You don\'t have carts available')}
+						btnTitle={t('START_SHOPPING', 'Start shopping')}
+						onClickButton={() => onNavigationRedirect('BusinessList')}
 					/>
 				</CCNotCarts>
 			)}

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

@@ -1,7 +1,7 @@
 import styled from 'styled-components/native';
 
 export const CCContainer = styled.View`
-  padding: 20px 40px;
+  padding-vertical: 20px;
 `
 
 export const CCNotCarts = styled.View`
@@ -17,3 +17,17 @@ export const CCNotCarts = styled.View`
 export const CCList = styled.ScrollView`
   padding: 10px 0px;
 `
+
+export const CheckoutAction = styled.View`
+  width: 100%;
+  display: flex;
+  justify-content: center;
+  flex-direction: column;
+  align-items: center;
+  margin-top: 10px;
+  margin-bottom: 10px;
+`
+
+export const ChCartsTotal = styled.View`
+  margin-bottom: 16px;
+`