ordering-ui-react-native 0.16.76 → 0.16.77-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,9 @@ const CartUI = (props: any) => {
     commentState,
     onNavigationRedirect,
     handleRemoveOfferClick,
-    isMultiCheckout
+    isMultiCheckout,
+    hideDeliveryFee,
+    hideDriverTip
   } = props
 
   const theme = useTheme();
@@ -61,8 +63,6 @@ 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 business: any = (orderState?.carts && Object.values(orderState.carts).find((_cart: any) => _cart?.uuid === props.cartuuid)) ?? {}
   const businessId = business?.business_id ?? null
   const placeSpotTypes = [4]
@@ -100,21 +100,41 @@ const CartUI = (props: any) => {
     }
   }
 
-  const handleUpsellingPage = () => {
+  const handleUpsellingPage = (individualCart : any) => {
     setOpenUpselling(false)
     setCanOpenUpselling(false)
-    if (isCheckoutMultiBusinessEnabled) {
-      props.onNavigationRedirect('CheckoutNavigator', {
-        screen: 'MultiCheckout'
-      })
-    } else {
-      props.onNavigationRedirect('CheckoutNavigator', {
+    const cartsAvailable: any = Object.values(orderState?.carts)?.filter((cart: any) => cart?.valid && cart?.status !== 2)
+    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
       })
+    } 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
+        })
+      }
     }
   }
 
@@ -153,6 +173,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 && (
@@ -177,7 +203,7 @@ 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}
       >
         {cart?.products?.length > 0 && cart?.products.map((product: any, i: number) => (
@@ -290,9 +316,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)}
@@ -300,10 +328,10 @@ const CartUI = (props: any) => {
                 </OSTable>
               ))
             }
-            {orderState?.options?.type === 1 && cart?.delivery_price > 0 && (
+            {orderState?.options?.type === 1 && cart?.delivery_price > 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 ?? cart?.delivery_price)}</OText>
               </OSTable>
             )}
             {
@@ -327,7 +355,13 @@ const CartUI = (props: any) => {
                 </OSTable>
               ))
             }
-            {cart?.driver_tip > 0 && (
+            {orderState?.options?.type === 1 && cart?.delivery_price > 0 && cart?.delivery_price_with_discount >= 0 && !hideDeliveryFee && (
+              <OSTable>
+                <OText size={12} lineHeight={18}>{t('DELIVERY_FEE_AFTER_DISCOUNT', 'Delivery Fee After Discount')}</OText>
+                <OText size={12} lineHeight={18}>{parsePrice(cart?.delivery_price_with_discount)}</OText>
+              </OSTable>
+            )}
+            {cart?.driver_tip > 0 && !hideDriverTip && (
               <OSTable>
                 <OText size={12} lineHeight={18}>
                   {t('DRIVER_TIP', 'Driver tip')}
@@ -360,7 +394,7 @@ const CartUI = (props: any) => {
               </OSTable>
             )}
 
-            {isMultiCheckout &&
+            {!isMultiCheckout &&
               cart &&
               cart?.valid &&
               orderState?.options?.type === 1 &&
@@ -368,30 +402,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>
@@ -454,15 +489,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,42 +1,82 @@
-import React, { useEffect, useState } from 'react';
-import { useLanguage, useOrder } from 'ordering-components/native';
+import React, { useState } from 'react';
+import { View } from 'react-native';
+import { useLanguage, useConfig } from 'ordering-components/native';
 import { useTheme } from 'styled-components/native';
-import { CCContainer, CCNotCarts, CCList } from './styles';
+import { CCContainer, CCNotCarts, CCList, CheckoutAction } from './styles';
 
 import { Cart } from '../Cart';
-import { OIcon, OText } from '../shared';
+import { OButton, OText } from '../shared';
 import Spinner from 'react-native-loading-spinner-overlay';
-import { View } from 'react-native';
 
 export const CartContent = (props: any) => {
 	const {
 		carts,
-		isOrderStateCarts
+		isOrderStateCarts,
+		onNavigationRedirect
 	} = props
 
 	const theme = useTheme();
 	const [, t] = useLanguage()
+	const [{ configs }] = useConfig()
 	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 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 && (
 				<>
-					{/* <OText size={24} lineHeight={36} weight={'600'} style={{ marginBottom: 20 }}>
-						{carts.length > 1 ? t('MY_CARTS', 'My Carts') : t('CART', 'Cart')}
-					</OText> */}
 					{carts.map((cart: any, i: number) => (
 						<CCList key={i} style={{ overflow: 'visible' }}>
 							{cart.products.length > 0 && (
 								<>
 									<Cart
-                    singleBusiness={props.singleBusiness}
-                    isFranchiseApp={props.isFranchiseApp}
+										singleBusiness={props.singleBusiness}
+										isFranchiseApp={props.isFranchiseApp}
 										cart={cart}
-                    cartuuid={cart.uuid}
+										cartuuid={cart.uuid}
 										onNavigationRedirect={props.onNavigationRedirect}
 										isCartsLoading={isCartsLoading}
 										setIsCartsLoading={setIsCartsLoading}
+										isMultiCheckout={isMultiCheckout}
 										hideUpselling
 									/>
 									<View style={{ height: 8, backgroundColor: theme.colors.backgroundGray100, marginHorizontal: -40, marginTop: 20 }} />
@@ -44,18 +84,40 @@ export const CartContent = (props: any) => {
 							)}
 						</CCList>
 					))}
+					{isMultiCheckout && (
+						<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>
-					{/* <OIcon
-            url={props.icon}
-            width={200}
-            height={122}
-          /> */}
 					<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')}
+					/>
 				</CCNotCarts>
 			)}
 			<Spinner visible={isCartsLoading} />

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,13 @@ 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;
+`