ordering-ui-external 10.4.1 → 10.5.0

package/src/themes/five/src/components/BusinessesListing/layouts/OriginalBusinessesListing/index.js

@@ -23,7 +23,13 @@ import {
   BusinessLogosContainer,
   BusinessBanner,
   BusinessLogosWrapper,
-  AddressFormWrapper
+  AddressFormWrapper,
+  Title,
+  TypesContainer,
+  TypeButton,
+  IconTypeButton,
+  TypesWrapper,
+  AdditionalTypesContainer
 } from './styles'
 import { useWindowSize } from '../../../../../../../hooks/useWindowSize'
 import { Button } from '../../../../styles/Buttons'
@@ -70,11 +76,13 @@ const BusinessesListingUI = (props) => {
     getCities,
     citiesState,
     logosLayout,
-    actualSlug
+    actualSlug,
+    orderTypes
   } = props
-
+  const allOrderTypes = [1, 2, 3, 4, 5]
+  const pickupTypes = [2, 3, 4, 5]
   const [, t] = useLanguage()
-  const [orderState, { changeCityFilter }] = useOrder()
+  const [orderState, { changeCityFilter, changeType }] = useOrder()
   const [{ auth }] = useSession()
   const [{ configs }] = useConfig()
   const windowSize = useWindowSize()
@@ -86,6 +94,7 @@ const BusinessesListingUI = (props) => {
   const [isPreorder, setIsPreorder] = useState(false)
   const [preorderBusiness, setPreorderBusiness] = useState(null)
   const [hasHighRatedBusiness, setHasHighRatedBusiness] = useState(true)
+  const [isPickupSelected, setIsPickupSelected] = useState(pickupTypes.includes(orderState?.options?.type))
   const userCustomer = JSON.parse(window.localStorage.getItem('user-customer'))
   const [favoriteIds, setFavoriteIds] = useState([])
   const allCitiesDisabled = citiesState?.cities?.every(city => !city.enabled)
@@ -105,7 +114,7 @@ const BusinessesListingUI = (props) => {
     : orderState?.options?.type === 8
       ? 'catering_pickup'
       : null
-
+  const configTypes = configs?.order_types_allowed?.value.split('|').filter(value => (allOrderTypes.includes(Number(value)))).map(value => Number(value)) || []
   const cateringValues = preorderBusiness?.configs && getCateringValues(cateringTypeString, preorderBusiness?.configs)
 
   const handleScroll = useCallback(() => {
@@ -173,6 +182,21 @@ const BusinessesListingUI = (props) => {
     changeCityFilter(cityId === orderState?.options?.city_id ? null : cityId)
   }
 
+  const handleChangeType = (value) => {
+    if (!orderState?.loading) {
+      changeType(value)
+      if (value === 1) {
+        setIsPickupSelected(false)
+      }
+    }
+  }
+
+  const handleChangeToPickup = () => {
+    const firstEnabledPickupType = orderTypes.find(type => configTypes?.includes(type.value) && type.value !== 1)?.value
+    handleChangeType(firstEnabledPickupType)
+    setIsPickupSelected(true)
+  }
+
   useEffect(() => {
     if (preorderBusiness) setIsPreorder(true)
   }, [preorderBusiness])
@@ -195,6 +219,30 @@ const BusinessesListingUI = (props) => {
     if (!selectedCity || !selectedCity?.enabled) changeCityFilter(null)
   }, [citiesState, orderState?.options?.city_id])
 
+  useEffect(() => {
+    if (pickupTypes.includes(orderState?.options?.type) && isCustomerMode) {
+      setIsPickupSelected(true)
+    }
+  }, [orderState?.options?.type])
+
+  const OrderTypesComponent = () => {
+    return (
+      <>
+        {orderTypes && (configTypes ? orderTypes.filter(type => configTypes?.includes(type.value) && type.value !== 1) : orderTypes).map((item, i) => (
+          <Button
+            key={item.value}
+            onClick={() => handleChangeType(item.value)}
+            color={orderState?.options?.type === item?.value ? 'primary' : 'secondary'}
+            disabled={orderState?.loading}
+            className={orderState?.options?.type !== item?.value ? 'activated' : ''}
+          >
+            {item.text}
+          </Button>
+        ))}
+      </>
+    )
+  }
+
   if (logosLayout) {
     return (
       <BusinessLogosWrapper>
@@ -234,7 +282,7 @@ const BusinessesListingUI = (props) => {
           {windowSize.width < 576 && (
             <OrderContextUI isBusinessList hideHero={(configs?.business_listing_hide_image?.value !== '1' && !isChew) && !hideHero} />
           )}
-          {(configs?.business_listing_hide_image?.value !== '1' && !isChew) && !hideHero && (
+          {(configs?.business_listing_hide_image?.value !== '1' && !isChew) && !hideHero && !isCustomerMode && (
             <BusinessHeroImg
               bgimage={theme.images?.general?.businessHero}
               height={theme?.business_listing_view?.components?.business_hero?.style?.height}
@@ -242,13 +290,58 @@ const BusinessesListingUI = (props) => {
           )}
         </BusinessBanner>
       )}
-      <OrderProgress
-        isChew={isChew}
-        franchiseId={props.franchiseId}
-        userCustomerId={userCustomer?.id}
-        asDashboard={isCustomerMode}
-        isCustomerMode={isCustomerMode}
-      />
+      {(userCustomer && orderState?.options?.address?.address && isCustomerMode) && (
+        <>
+          <Title>{t('DELIVERY_TYPE', 'Delivery Type')}</Title>
+          <TypesContainer>
+            {configTypes.includes(1) && (
+              <TypeButton onClick={() => handleChangeType(1)} disabled={orderState?.loading} activated={!isPickupSelected}>
+                <IconTypeButton activated={!isPickupSelected}>
+                  <img
+                    src={theme?.images?.general?.deliveryIco}
+                    width={20}
+                    height={20}
+                  />
+                </IconTypeButton>
+                <p>{t('DELIVERY', 'Delivery')}</p>
+              </TypeButton>
+            )}
+            {configTypes.some(type => pickupTypes.includes(type)) && (
+              <TypeButton
+                disabled={orderState?.loading}
+                activated={isPickupSelected}
+                onClick={() => handleChangeToPickup()}
+              >
+                <IconTypeButton activated={isPickupSelected}>
+                  <img
+                    src={theme?.images?.general?.pickupIco}
+                    width={22}
+                    height={22}
+                  />
+                </IconTypeButton>
+                <p>{t('PICKUP', 'Pickup')}</p>
+              </TypeButton>
+            )}
+          </TypesContainer>
+          {isPickupSelected && (
+            <TypesWrapper>
+              <p>{t('WHAT_PICKUP_YOU_NEED', 'What kind of pickup do you need?')}</p>
+              <AdditionalTypesContainer>
+                <OrderTypesComponent />
+              </AdditionalTypesContainer>
+            </TypesWrapper>
+          )}
+        </>
+      )}
+      {!isCustomerMode && (
+        <OrderProgress
+          isChew={isChew}
+          franchiseId={props.franchiseId}
+          userCustomerId={userCustomer?.id}
+          asDashboard={isCustomerMode}
+          isCustomerMode={isCustomerMode}
+        />
+      )}
       {(configs?.business_listing_hide_image?.value !== '1' && isChew) && (
         <BusinessHeroImg
           bgimage={theme.images?.general?.businessHero}
@@ -455,28 +548,27 @@ const BusinessesListingUI = (props) => {
         open={modals.formOpen || modals.listOpen}
         width='70%'
         onClose={() => setModals({ ...modals, formOpen: false, listOpen: false })}
-        >
-          {modals.listOpen ? (
-              <AddressList
-                isModal
-                changeOrderAddressWithDefault
-                userId={isNaN(userCustomer?.id) ? null : userCustomer?.id}
-                onCancel={() => setModals({ ...modals, listOpen: false })}
-                isCustomerMode={isCustomerMode}
-              />
-            ) : (
-              <AddressFormWrapper>
-                <AddressForm
-                  useValidationFileds
-                  address={orderState?.options?.address || {}}
-                  onCancel={() => setModals({ ...modals, formOpen: false })}
-                  onSaveAddress={() => setModals({ ...modals, formOpen: false })}
-                  isCustomerMode={isCustomerMode}
-                />
-              </AddressFormWrapper>
-            )
-          }
-        </Modal>
+      >
+        {modals.listOpen ? (
+          <AddressList
+            isModal
+            changeOrderAddressWithDefault
+            userId={isNaN(userCustomer?.id) ? null : userCustomer?.id}
+            onCancel={() => setModals({ ...modals, listOpen: false })}
+            isCustomerMode={isCustomerMode}
+          />
+        ) : (
+          <AddressFormWrapper>
+            <AddressForm
+              useValidationFileds
+              address={orderState?.options?.address || {}}
+              onCancel={() => setModals({ ...modals, formOpen: false })}
+              onSaveAddress={() => setModals({ ...modals, formOpen: false })}
+              isCustomerMode={isCustomerMode}
+            />
+          </AddressFormWrapper>
+        )}
+      </Modal>
 
       <Alert
         title={!mapErrors ? t('SEARCH', 'Search') : t('BUSINESSES_MAP', 'Businesses Map')}
@@ -492,10 +584,38 @@ const BusinessesListingUI = (props) => {
 }
 
 export const OriginalBusinessesListing = (props) => {
+  const [, t] = useLanguage()
   const businessListingProps = {
     ...props,
     UIComponent: BusinessesListingUI,
-    paginationSettings: { initialPage: 1, pageSize: 25, controlType: 'infinity' }
+    paginationSettings: { initialPage: 1, pageSize: 25, controlType: 'infinity' },
+    orderTypes: props.orderTypes || [
+      {
+        value: 1,
+        text: t('DELIVERY', 'Delivery'),
+        description: t('ORDERTYPE_DESCRIPTION_DELIVERY', 'Delivery description'),
+      },
+      {
+        value: 2,
+        text: t('PICKUP', 'Pickup'),
+        description: t('ORDERTYPE_DESCRIPTION_PICKUP', 'Pickup description')
+      },
+      {
+        value: 3,
+        text: t('EAT_IN', 'Eat in'),
+        description: t('ORDERTYPE_DESCRIPTION_EATIN', 'Eat in description')
+      },
+      {
+        value: 4,
+        text: t('CURBSIDE', 'Curbside'),
+        description: t('ORDERTYPE_DESCRIPTION_CURBSIDE', 'Curbside description')
+      },
+      {
+        value: 5,
+        text: t('DRIVE_THRU', 'Drive thru'),
+        description: t('ORDERTYPE_DESCRIPTION_DRIVETHRU', 'Drive Thru description')
+      }
+    ]
   }
   return <BusinessListController {...businessListingProps} />
 }

package/src/themes/five/src/components/BusinessesListing/layouts/OriginalBusinessesListing/styles.js

@@ -202,3 +202,69 @@ export const AddressFormWrapper = styled.div`
     margin-top: 20px;
   }
 `
+
+export const IconTypeButton = styled.div`
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  width: 44px;
+  height: 44px;
+  background: ${({ activated, theme }) => activated ? theme?.colors?.white : '#F3F9FF'};
+  border-radius: 44px;
+`
+
+export const TypesContainer = styled.div`
+  display: flex;
+  margin: 42px 20px 0px 20px;
+`
+
+export const AdditionalTypesContainer = styled.div`
+  width: 60%;
+  display: flex;
+  margin-bottom: 20px;
+  margin-left: 20px;
+  button {
+    padding: 4px 10px;
+    border-radius: 50px;
+    font-size: 10px;
+    line-height: 0;
+    height: 25px;
+    margin-right: 20px;
+  }
+  .activated {
+    color: ${({ theme }) => theme?.colors?.darkTextColor}
+  }
+`
+
+export const TypeButton = styled.div`
+  display: flex;
+  align-items: center;
+  width: 215px;
+  height: 75px;
+  border-radius: 7.6px;
+  padding: 16px;
+  box-shadow: 0px 1px 4px 0px rgba(0, 0, 0, 0.10);
+  margin-right: 32px;
+  margin-bottom: 32px;
+  cursor: pointer;
+  background: ${({ activated, theme }) => activated ? theme?.colors?.primary : theme?.colors?.white};
+  p{
+    margin: 0;
+    margin-left: 33px;
+    ${({ activated, theme }) => activated && css`
+      color: ${theme?.colors?.white};
+    `}
+  }
+`
+
+export const Title = styled.h2`
+  font-weight: 600;
+  font-size: 24px;
+  color: ${props => props.theme?.colors.headingColor};
+  margin: 0px 20px 5px 20px;
+`
+
+export const TypesWrapper = styled.div`
+  margin-left: 20px;
+  width: 600px;
+`

package/src/themes/five/src/components/Cart/index.js

@@ -8,6 +8,7 @@ import {
   useValidationFields,
   useConfig,
   useSite,
+  useSession,
   useCustomer
 } from 'ordering-components-external'
 import { Button } from '../../styles/Buttons'
@@ -73,13 +74,16 @@ const CartUI = (props) => {
     hideCouponInput,
     businessConfigs,
     loyaltyRewardRate,
-    isCustomerMode
+    isCustomerMode,
+    guestCheckoutComment,
+    guestCheckoutCupon
   } = props
 
   const theme = useTheme()
   const [, t] = useLanguage()
   const [orderState] = useOrder()
   const [events] = useEvent()
+  const [{ user: loginUser }] = useSession()
   const [{ parsePrice, parseNumber, parseDate }] = useUtils()
   const [validationFields] = useValidationFields()
   const [{ configs }] = useConfig()
@@ -107,8 +111,8 @@ const CartUI = (props) => {
   const isMultiCheckout = configs?.checkout_multi_business_enabled?.value === '1'
   const cart = cartMulticart || orderState?.carts?.[`businessId:${props.cart?.business_id}`]
   const viewString = isStore ? 'business_view' : 'header'
-  const hideCartComments = theme?.[viewString]?.components?.cart?.components?.comments?.hidden || !validationFields?.fields?.checkout?.comments?.enabled
-  const hideCartDiscount = theme?.[viewString]?.components?.cart?.components?.discount_coupon?.hidden
+  const hideCartComments = theme?.[viewString]?.components?.cart?.components?.comments?.hidden || ((loginUser?.guest_id && guestCheckoutComment) ? !guestCheckoutComment?.enabled : !validationFields?.fields?.checkout?.comments?.enabled)
+  const hideCartDiscount = theme?.[viewString]?.components?.cart?.components?.discount_coupon?.hidden || ((loginUser?.guest_id && guestCheckoutCupon) ? !guestCheckoutCupon?.enabled : !validationFields?.fields?.checkout?.comments?.enabled)
   const cateringTypeString = orderState?.options?.type === 7
     ? 'catering_delivery'
     : orderState?.options?.type === 8
@@ -142,7 +146,6 @@ const CartUI = (props) => {
     }
     return acc = acc
   }, cart?.subtotal)
-  console.log('cart', cart)
   const clearAmount = (value) => parseFloat((Math.trunc(value * 100) / 100).toFixed(configs.format_number_decimal_length?.value ?? 2))
   const loyaltyRewardValue = clearAmount((cart?.subtotal + getIncludedTaxes()) * loyaltyRewardRate)
 

package/src/themes/five/src/components/Checkout/index.js

@@ -1,4 +1,4 @@
-import React, { useEffect, useState } from 'react'
+import React, { useEffect, useMemo, useState } from 'react'
 import VscWarning from '@meronex/icons/vsc/VscWarning'
 import Skeleton from 'react-loading-skeleton'
 import { useTheme } from 'styled-components'
@@ -99,7 +99,8 @@ const CheckoutUI = (props) => {
     handleStoreRedirect,
     onPlaceOrderClick,
     setPlaceSpotNumber,
-    placeSpotNumber
+    placeSpotNumber,
+    checkoutFieldsState
   } = props
 
   const theme = useTheme()
@@ -136,13 +137,18 @@ const CheckoutUI = (props) => {
   const isWalletEnabled = configs?.cash_wallet?.value && configs?.wallet_enabled?.value === '1' &&
     (isWalletCashEnabled || isWalletCreditPointsEnabled) && !useKioskApp && !isCustomerMode
   const isMultiDriverTips = theme?.header?.components?.layout?.type?.toLowerCase() === 'chew'
+  const notFields = ['coupon', 'driver_tip', 'mobile_phone', 'address', 'zipcode', 'address_notes', 'comments']
 
   const placeSpotTypes = [3, 4, 5]
   const placeSpotsEnabled = placeSpotTypes.includes(options?.type) && !useKioskApp
   const isGiftCardCart = !cart?.business_id
+  const guestCheckoutDriveTip = checkoutFieldsState?.fields?.find(field => field.order_type_id === 1 && field?.validation_field?.code === 'driver_tip')
+  const guestCheckoutComment = useMemo(() => checkoutFieldsState?.fields?.find(field => field.order_type_id === options?.type && field?.validation_field?.code === 'comments'), [checkoutFieldsState, options])
+  const guestCheckoutCupon = useMemo(() => checkoutFieldsState?.fields?.find(field => field.order_type_id === options?.type && field?.validation_field?.code === 'coupon'), [checkoutFieldsState, options])
   // const [hasBusinessPlaces, setHasBusinessPlaces] = useState(null)
 
-  const validateCommentsCartField = validationFields?.fields?.checkout?.comments?.enabled && validationFields?.fields?.checkout?.comments?.required && (cart?.comment === null || cart?.comment?.trim().length === 0)
+  const validateCommentsCartField = (!user?.guest_id ? (validationFields?.fields?.checkout?.comments?.enabled && validationFields?.fields?.checkout?.comments?.required) : (guestCheckoutComment?.enabled && guestCheckoutComment?.required)) && (cart?.comment === null || cart?.comment?.trim().length === 0)
+  const validateDriverTipField = options.type === 1 && (!user?.guest_id ? (validationFields?.fields?.checkout?.driver_tip?.enabled && validationFields?.fields?.checkout?.driver_tip?.required) : (guestCheckoutDriveTip?.enabled && guestCheckoutDriveTip?.required)) && (Number(cart?.driver_tip) <= 0)
 
   const validateZipcodeCard =
     validationFields?.fields?.card?.zipcode?.enabled && validationFields?.fields?.card?.zipcode?.required && paymethodSelected?.gateway === 'stripe' && paymethodSelected?.data?.card && !paymethodSelected?.data?.card?.zipcode
@@ -157,10 +163,7 @@ const CheckoutUI = (props) => {
     !cart?.valid_maximum ||
     (!cart?.valid_minimum && !(cart?.discount_type === 1 && cart?.discount_rate === 100)) ||
     // (((placeSpotTypes.includes(options?.type) && !cart?.place) && hasBusinessPlaces)) ||
-    (options.type === 1 &&
-      validationFields?.fields?.checkout?.driver_tip?.enabled &&
-      validationFields?.fields?.checkout?.driver_tip?.required &&
-      (Number(cart?.driver_tip) <= 0)) ||
+    (validateDriverTipField && !isGiftCardCart) ||
     (validateCommentsCartField) ||
     validateZipcodeCard
 
@@ -178,7 +181,7 @@ const CheckoutUI = (props) => {
   const hideBusinessDetails = theme?.checkout?.components?.business?.hidden
   const hideBusinessMap = theme?.checkout?.components?.map?.hidden
   const hideCustomerDetails = theme?.checkout?.components?.customer?.hidden
-  const driverTipsField = !cartState.loading && cart && cart?.business_id && options.type === 1 && cart?.status !== 2 && validationFields?.fields?.checkout?.driver_tip?.enabled && driverTipsOptions.length > 0 && !useKioskApp
+  const driverTipsField = !cartState.loading && cart && cart?.business_id && options.type === 1 && cart?.status !== 2 && ((!user?.guest_id && validationFields?.fields?.checkout?.driver_tip?.enabled) || (user?.guest_id && guestCheckoutDriveTip?.enabled)) && driverTipsOptions.length > 0 && !useKioskApp
 
   const creditPointPlan = loyaltyPlansState?.result?.find(loyal => loyal.type === 'credit_point')
   const creditPointPlanOnBusiness = creditPointPlan?.businesses?.find(b => b.business_id === cart?.business_id && b.accumulates)
@@ -190,8 +193,7 @@ const CheckoutUI = (props) => {
       return
     }
 
-    if (!userErrors.length && (!requiredFields?.length ||
-      (allowedGuest && (paymethodSelected?.gateway === 'cash' || paymethodSelected?.gateway === 'card_delivery')))) {
+    if (!userErrors.length && !requiredFields?.length) {
       const body = {}
       if (behalfName) {
         body.on_behalf_of = behalfName
@@ -227,10 +229,30 @@ const CheckoutUI = (props) => {
     setIsUserDetailsEdit(false)
   }
 
+  const checkGuestValidationFields = () => {
+    const userSelected = isCustomerMode ? customerState.user : user
+    const _requiredFields = checkoutFieldsState?.fields
+      .filter(field => (field?.order_type_id === options?.type) && field?.enabled && field?.required &&
+        !notFields.includes(field?.validation_field?.code) &&
+        userSelected && !userSelected[field?.validation_field?.code])
+      .map(item => item?.validation_field?.code)
+    const guestCheckoutCellPhone = checkoutFieldsState?.fields?.find(field => field.order_type_id === options?.type && field?.validation_field?.code === 'mobile_phone')
+
+    if (
+      userSelected &&
+        !userSelected?.cellphone &&
+        ((guestCheckoutCellPhone?.enabled &&
+          guestCheckoutCellPhone?.required) ||
+          configs?.verification_phone_required?.value === '1')
+    ) {
+      _requiredFields.push('cellphone')
+    }
+    setRequiredFields(_requiredFields)
+  }
+
   const checkValidationFields = () => {
     setUserErrors([])
     const errors = []
-    const notFields = ['coupon', 'driver_tip', 'mobile_phone', 'address', 'zipcode', 'address_notes', 'comments']
     const userSelected = isCustomerMode ? customerState.user : user
     const _requiredFields = []
 
@@ -294,6 +316,11 @@ const CheckoutUI = (props) => {
     }
   }, [validationFields, user, customerState])
 
+  useEffect(() => {
+    if (checkoutFieldsState?.loading || !user?.guest_id || customerState.loading || userLoading) return
+    checkGuestValidationFields()
+  }, [user, checkoutFieldsState, customerState])
+
   useEffect(() => {
     if (errors) {
       setAlertState({
@@ -313,12 +340,12 @@ const CheckoutUI = (props) => {
 
   useEffect(() => {
     if (cart?.products?.length) return
-    if (cart?.business?.slug) {
+    if (cart?.business_id !== null) {
       handleStoreRedirect(cart?.business?.slug)
     } else {
       events.emit('go_to_page', { page: 'wallets' })
     }
-  }, [cart?.products])
+  }, [JSON.stringify(cart?.products)])
 
   useEffect(() => {
     window.scrollTo(0, 0)
@@ -542,24 +569,24 @@ const CheckoutUI = (props) => {
 
         {
           !!(!isMultiDriverTips && driverTipsField) &&
-          <>
-            <DriverTipContainer>
-              <h1>{t('DRIVER_TIPS', 'Driver Tips')}</h1>
-              <p>{t('100%_OF_THE_TIP_YOUR_DRIVER', '100% of the tip goes to your driver')}</p>
-              <DriverTips
-                businessId={cart?.business_id}
-                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}
-                cart={cart}
-                useOrderContext
-              />
-            </DriverTipContainer>
-            <DriverTipDivider />
-          </>
+            <>
+              <DriverTipContainer>
+                <h1>{t('DRIVER_TIPS', 'Driver Tips')}</h1>
+                <p>{t('100%_OF_THE_TIP_YOUR_DRIVER', '100% of the tip goes to your driver')}</p>
+                <DriverTips
+                  businessId={cart?.business_id}
+                  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}
+                  cart={cart}
+                  useOrderContext
+                />
+              </DriverTipContainer>
+              <DriverTipDivider />
+            </>
         }
         {!cartState.loading && placeSpotsEnabled && cart?.business_id && (
           <SelectSpotContainer>
@@ -594,6 +621,8 @@ const CheckoutUI = (props) => {
                 creditPointPlanOnBusiness?.accumulation_rate ??
                 (!!creditPointPlanOnBusiness && creditPointPlan?.accumulation_rate) ?? 0
               }
+              guestCheckoutComment={guestCheckoutComment}
+              guestCheckoutCupon={guestCheckoutCupon}
             />
           </CartContainer>
         )}
@@ -658,10 +687,7 @@ const CheckoutUI = (props) => {
           </WarningText>
         )}
 
-        {options.type === 1 &&
-          validationFields?.fields?.checkout?.driver_tip?.enabled &&
-          validationFields?.fields?.checkout?.driver_tip?.required &&
-          (Number(cart?.driver_tip) <= 0) &&
+        {validateDriverTipField && !isGiftCardCart &&
           (
             <WarningText>
               {t('WARNING_INVALID_DRIVER_TIP', 'Driver Tip is required.')}

package/src/themes/five/src/components/GiftCard/GiftCardOrdersList/index.js

@@ -0,0 +1,50 @@
+import React, { useState } from 'react'
+import { useLanguage } from 'ordering-components-external'
+import { HorizontalGiftCardOrdersLayout } from '../HorizontalGiftCardOrdersLayout'
+import {
+  Container,
+  Divider,
+  NoOrdersWrapper
+} from './styles'
+
+export const GiftCardOrdersList = (props) => {
+  const [, t] = useLanguage()
+  const [isEmptyPending, setIsEmptyPending] = useState(false)
+  const [isEmptySent, setIsEmptySent] = useState(false)
+  const [isEmptyRedeemed, setIsEmptyRedeemed] = useState(false)
+
+  return (
+    <Container>
+      <HorizontalGiftCardOrdersLayout
+        title={t('PENDING', 'Pending')}
+        defaultStatus='pending'
+        setIsEmpty={setIsEmptyPending}
+        scrollId='pendingGifts'
+      />
+
+      {isEmptyPending && isEmptySent && isEmptyRedeemed && (
+        <Divider />
+      )}
+
+      <HorizontalGiftCardOrdersLayout
+        title={t('SENT', 'Sent')}
+        defaultStatus='sent'
+        setIsEmpty={setIsEmptySent}
+        scrollId='sentGifts'
+      />
+
+      <HorizontalGiftCardOrdersLayout
+        title={t('REDEEMED', 'Redeemed')}
+        defaultStatus='activated'
+        setIsEmpty={setIsEmptyRedeemed}
+        scrollId='redeemedgGifts'
+      />
+
+      {isEmptyPending && isEmptySent && isEmptyRedeemed && (
+        <NoOrdersWrapper>
+          <p>{t('YOU_DONT_HAVE_CARDS', 'You don\'t have cards')}</p>
+        </NoOrdersWrapper>
+      )}
+    </Container>
+  )
+}

package/src/themes/five/src/components/GiftCard/GiftCardOrdersList/styles.js

@@ -0,0 +1,34 @@
+import styled from 'styled-components'
+
+export const Container = styled.div`
+  h2 {
+    font-size: 24px;
+    font-weight: 600;
+    margin: 40px 0 20px 0;
+  }
+`
+
+export const Divider = styled.div`
+  margin-top: 25px;
+  background: #F8F9FA;
+  height: 8px;
+  width: 100%;
+`
+export const NoOrdersWrapper = styled.div`
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  padding: 50px 0px;
+  box-sizing: border-box;
+  min-height: calc(100% - 120px);
+  width: 100%;
+
+  > p {
+    font-weight: 500;
+    font-size: 16px;
+    line-height: 24px;
+    margin-top: 0px;
+    margin-bottom: 25px;
+  }
+`