ordering-ui-react-native 0.17.96 → 0.17.97-release

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

@@ -1,4 +1,4 @@
-import React, { useEffect, useState } from 'react';
+import React, { useState } from 'react';
 import {
   Cart as CartController,
   useOrder,
@@ -23,10 +23,9 @@ import { ActivityIndicator, TouchableOpacity, View } from 'react-native';
 import AntIcon from 'react-native-vector-icons/AntDesign'
 import { TaxInformation } from '../TaxInformation';
 import { CartStoresListing } from '../CartStoresListing';
-import { OAlert } from '../../../../../src/components/shared'
+import { OAlert } from '../shared'
 import { PlaceSpot } from '../PlaceSpot'
 import { DriverTips } from '../DriverTips'
-import { MomentOption } from '../MomentOption'
 
 const CartUI = (props: any) => {
   const {
@@ -45,12 +44,14 @@ const CartUI = (props: any) => {
     isMultiCheckout,
     hideDeliveryFee,
     hideDriverTip,
+    hideCouponInput,
     preorderSlotInterval,
     preorderLeadTime,
     preorderTimeRange,
     preorderMaximumDays,
     preorderMinimumDays,
-    cateringTypes
+    cateringTypes,
+    isFromUpselling
   } = props
 
   const theme = useTheme();
@@ -65,9 +66,8 @@ const CartUI = (props: any) => {
   const [openChangeStore, setOpenChangeStore] = useState(false)
   const [canOpenUpselling, setCanOpenUpselling] = useState(false)
   const [openTaxModal, setOpenTaxModal] = useState<any>({ open: false, data: null, type: '' })
-  const [confirm, setConfirm] = useState<any>({ open: false, content: null, handleOnAccept: null, id: null, title: null })
   const [openPlaceModal, setOpenPlaceModal] = useState(false)
-  const [maxDate, setMaxDate] = useState<any>(null)
+
   const isCartPending = cart?.status === 2
   const isCouponEnabled = validationFields?.fields?.checkout?.coupon?.enabled
   const business: any = (orderState?.carts && Object.values(orderState.carts).find((_cart: any) => _cart?.uuid === props.cartuuid)) ?? {}
@@ -108,18 +108,23 @@ const CartUI = (props: any) => {
     }
   }
 
-  const handleUpsellingPage = () => {
+  const handleUpsellingPage = (individualCart : any) => {
+    const isProductCartParam = !!individualCart?.products?.length
     setOpenUpselling(false)
     setCanOpenUpselling(false)
-    const cartsAvailable: any = Object.values(orderState?.carts)?.filter((cart: any) => cart?.valid && cart?.status !== 2)
-    if (cartsAvailable.length === 1) {
+
+    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: cartsAvailable[0]?.uuid,
-        businessLogo: cartsAvailable[0]?.business?.logo,
-        businessName: cartsAvailable[0]?.business?.name,
-        cartTotal: cartsAvailable[0]?.total
-      })
+        cartUuid: cart?.uuid,
+        businessLogo: cart?.business?.logo,
+        businessName: cart?.business?.name,
+        cartTotal: cart?.total
+      }, true)
     } else {
       const groupKeys: any = {}
       cartsAvailable.forEach((_cart: any) => {
@@ -135,12 +140,12 @@ const CartUI = (props: any) => {
         onNavigationRedirect('CheckoutNavigator', {
           screen: 'MultiCheckout',
           checkCarts: true
-        })
+        }, true)
       } else {
         onNavigationRedirect('CheckoutNavigator', {
           screen: 'MultiCheckout',
           cartUuid: cartsAvailable[0]?.group?.uuid
-        })
+        }, true)
       }
     }
   }
@@ -159,16 +164,16 @@ const CartUI = (props: any) => {
     return cart?.taxes?.filter((tax: any) => tax?.type === 1)?.reduce((carry: number, tax: any) => carry + (tax?.summary?.tax_after_discount ?? tax?.summary?.tax), 0)
   }
 
-  const onRemoveOffer = (id: number) => {
-    setConfirm({
-      open: true,
-      content: [t('QUESTION_DELETE_OFFER', 'Are you sure that you want to delete the offer?')],
-      title: t('OFFER', 'Offer'),
-      handleOnAccept: () => {
-        setConfirm({ ...confirm, open: false })
-        handleRemoveOfferClick(id)
-      }
-    })
+  const OfferAlert = ({ offerId }: any) => {
+    return (
+      <OAlert
+        title={t('OFFER', 'Offer')}
+        message={t('QUESTION_DELETE_OFFER', 'Are you sure that you want to delete the offer?')}
+        onAccept={() => handleRemoveOfferClick(offerId)}
+      >
+        <AntIcon style={{ marginLeft: 3 }} name='closecircle' size={16} color={theme.colors.primary} />
+      </OAlert>
+    )
   }
 
   const walletName: any = {
@@ -186,19 +191,6 @@ const CartUI = (props: any) => {
     return acc = acc
   }, cart?.subtotal)
 
-  useEffect(() => {
-    const limitDays = parseInt(preorderMaximumDays ?? configs?.max_days_preorder?.value, 10)
-    const currentDate = new Date()
-    const time = limitDays > 1
-      ? currentDate.getTime() + ((limitDays - 1) * 24 * 60 * 60 * 1000)
-      : limitDays === 1 ? currentDate.getTime() : currentDate.getTime() + (6 * 24 * 60 * 60 * 1000)
-
-    currentDate.setTime(time)
-    currentDate.setHours(23)
-    currentDate.setMinutes(59)
-    setMaxDate(currentDate)
-  }, [preorderMaximumDays, configs?.max_days_preorder?.value])
-
   return (
     <CContainer>
       {openUpselling && (
@@ -225,6 +217,8 @@ const CartUI = (props: any) => {
         handleClickCheckout={() => setOpenUpselling(true)}
         checkoutButtonDisabled={(openUpselling && !canOpenUpselling) || subtotalWithTaxes < cart?.minimum || !cart?.valid_address}
         isMultiCheckout={isMultiCheckout}
+        isFromUpselling={isFromUpselling}
+        isGiftCart={!cart?.business_id}
       >
         {cart?.products?.length > 0 && cart?.products.map((product: any, i: number) => (
           <ProductItemAccordion
@@ -238,7 +232,6 @@ const CartUI = (props: any) => {
             offsetDisabled={offsetDisabled}
             onDeleteProduct={handleDeleteClick}
             onEditProduct={handleEditProduct}
-            viewString='business_view'
           />
         ))}
 
@@ -250,7 +243,7 @@ const CartUI = (props: any) => {
                 {parsePrice(cart?.subtotal + getIncludedTaxes())}
               </OText>
             </OSTable>
-            {!hideCartDiscount && cart?.discount > 0 && cart?.total >= 0 && cart?.offers?.length === 0 && (
+            {cart?.discount > 0 && cart?.total >= 0 && cart?.offers?.length === 0 && (
               <OSTable>
                 {cart?.discount_type === 1 ? (
                   <OText size={12} lineHeight={18}>
@@ -264,7 +257,7 @@ const CartUI = (props: any) => {
               </OSTable>
             )}
             {
-              !hideCartDiscount && cart?.offers?.length > 0 && cart?.offers?.filter((offer: any) => offer?.target === 1)?.map((offer: any, i: number) => (
+              cart?.offers?.length > 0 && cart?.offers?.filter((offer: any) => offer?.target === 1)?.map((offer: any, i: number) => (
                 <OSTable key={`${offer.id}_${i}`}>
                   <OSRow>
                     <OText size={12} lineHeight={18}>{offer.name}</OText>
@@ -274,9 +267,9 @@ const CartUI = (props: any) => {
                     <TouchableOpacity style={{ marginLeft: 3 }} onPress={() => setOpenTaxModal({ open: true, data: offer, type: 'offer_target_1' })}>
                       <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?.id && (
+                      <OfferAlert offerId={offer?.id} />
+                    )}
                   </OSRow>
                   <OText size={12} lineHeight={18}>
                     - {parsePrice(offer?.summary?.discount)}
@@ -285,7 +278,7 @@ const CartUI = (props: any) => {
               ))
             }
             {/* <Divider /> */}
-            {!hideCartDiscount && cart?.subtotal_with_discount > 0 && cart?.discount > 0 && cart?.total >= 0 && (
+            {cart?.subtotal_with_discount > 0 && cart?.discount > 0 && cart?.total >= 0 && (
               <OSTable>
                 <OText size={12} lineHeight={18} numberOfLines={1}>{t('SUBTOTAL_WITH_DISCOUNT', 'Subtotal with discount')}</OText>
                 {cart?.business?.tax_type === 1 ? (
@@ -338,10 +331,8 @@ 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>
-                    {!offer?.type && (
-                      <TouchableOpacity style={{ marginLeft: 3 }} onPress={() => onRemoveOffer(offer?.id)}>
-                        <AntIcon name='closecircle' size={16} color={theme.colors.primary} />
-                      </TouchableOpacity>
+                    {!!offer?.id && (
+                      <OfferAlert offerId={offer?.id} />
                     )}
                   </OSRow>
                   <OText size={12} lineHeight={18}>
@@ -350,10 +341,10 @@ const CartUI = (props: any) => {
                 </OSTable>
               ))
             }
-            {orderState?.options?.type === 1 && cart?.delivery_price > 0 && !hideDeliveryFee && (
+            {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>
             )}
             {
@@ -367,9 +358,9 @@ const CartUI = (props: any) => {
                     <TouchableOpacity style={{ marginLeft: 3 }} onPress={() => setOpenTaxModal({ open: true, data: offer, type: 'offer_target_2' })}>
                       <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?.id && (
+                      <OfferAlert offerId={offer?.id} />
+                    )}
                   </OSRow>
                   <OText size={12} lineHeight={18}>
                     - {parsePrice(offer?.summary?.discount)}
@@ -377,12 +368,6 @@ const CartUI = (props: any) => {
                 </OSTable>
               ))
             }
-            {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}>
@@ -405,12 +390,13 @@ 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>
@@ -423,6 +409,7 @@ const CartUI = (props: any) => {
               cart?.status !== 2 &&
               validationFields?.fields?.checkout?.driver_tip?.enabled &&
               driverTipsOptions && driverTipsOptions?.length > 0 &&
+              cart?.business_id &&
               (
                 <DriverTipsContainer>
                   <OText size={14} lineHeight={20} color={theme.colors.textNormal}>
@@ -471,7 +458,7 @@ const CartUI = (props: any) => {
                 </TouchableOpacity>
               </OSTable>
             )}
-            {cart?.status !== 2 && !hideCartComments && (
+            {cart?.status !== 2 && (
               <OSTable>
                 <View style={{ width: '100%', marginTop: 20 }}>
                   <OText size={16} lineHeight={18}>{t('COMMENTS', 'Comments')}</OText>
@@ -506,21 +493,6 @@ const CartUI = (props: any) => {
             )}
           </OSBill>
         )}
-        {cateringTypes.includes(orderState?.options?.type) && maxDate && cart?.valid_products && (
-          <View>
-            <MomentOption
-              maxDate={maxDate}
-              cateringPreorder
-              isCart
-              preorderSlotInterval={preorderSlotInterval}
-              preorderLeadTime={preorderLeadTime}
-              preorderTimeRange={preorderTimeRange}
-              preorderMaximumDays={preorderMaximumDays}
-              preorderMinimumDays={preorderMinimumDays}
-              business={cart?.business}
-            />
-          </View>
-        )}
         {!isMultiCheckout && (
           <>
             {cart?.valid_products ? (
@@ -537,7 +509,7 @@ const CartUI = (props: any) => {
                   isDisabled={(openUpselling && !canOpenUpselling) || subtotalWithTaxes < cart?.minimum || !cart?.valid_address}
                   borderColor={theme.colors.primary}
                   imgRightSrc={null}
-                  textStyle={{ color: '#fff', textAlign: 'center', flex: 1 }}
+                  textStyle={{ color: 'white', textAlign: 'center', flex: 1 }}
                   onClick={() => setOpenUpselling(true)}
                   style={{ width: '100%', flexDirection: 'row', justifyContent: 'center', borderRadius: 7.6, shadowOpacity: 0 }}
                 />
@@ -587,14 +559,6 @@ const CartUI = (props: any) => {
           setOpenPlaceModal={setOpenPlaceModal}
         />
       </OModal>
-      <OAlert
-        open={confirm.open}
-        title={confirm.title}
-        content={confirm.content}
-        onAccept={confirm.handleOnAccept}
-        onCancel={() => setConfirm({ ...confirm, open: false, title: null })}
-        onClose={() => setConfirm({ ...confirm, open: false, title: null })}
-      />
     </CContainer>
   )
 }

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

@@ -1,29 +1,37 @@
 import React, { useState } from 'react';
 import { View } from 'react-native';
-import { useLanguage, useConfig } from 'ordering-components/native';
+import { useLanguage, useConfig, useUtils } from 'ordering-components/native';
 import { useTheme } from 'styled-components/native';
-import { CCContainer, CCNotCarts, CCList, CheckoutAction } 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 {
 		carts,
 		isOrderStateCarts,
-		onNavigationRedirect
+		onNavigationRedirect,
+		singleBusiness
 	} = props
 
 	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', {
@@ -79,6 +87,9 @@ export const CartContent = (props: any) => {
 										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 }} />
 								</>
@@ -86,38 +97,67 @@ 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>
+						<>
+							{!!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>
+									<View style={{ flexDirection: 'row', justifyContent: 'center', marginVertical: 20 }}>
+										<OText size={14} color={theme.colors.textNormal} weight={'300'} style={{ textAlign: 'center' }}>
+											{t('CART_GROUP_MESSAGE_ALERT', 'Discounts may be applied at the time of payment for this group.')}
+										</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={() => singleBusiness ? onNavigationRedirect('Business') : onNavigationRedirect('BusinessList')}
 					/>
 				</CCNotCarts>
 			)}

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

@@ -5,13 +5,9 @@ export const CCContainer = styled.View`
 `
 
 export const CCNotCarts = styled.View`
-  height: 300px;
-  display: flex;
   flex-direction: column;
-  justify-content: center;
-  align-items: center;
-  width: 80%;
-  margin: auto;
+	align-items: center;
+	margin-top: 40px;
 `
 
 export const CCList = styled.ScrollView`
@@ -27,3 +23,7 @@ export const CheckoutAction = styled.View`
   margin-top: 10px;
   margin-bottom: 10px;
 `
+
+export const ChCartsTotal = styled.View`
+  margin-bottom: 16px;
+`