ordering-ui-external 13.0.6 → 14.0.0

package/src/themes/callcenterOriginal/src/components/Orders/Messages/index.js

@@ -1,6 +1,6 @@
 import React, { useState, useEffect, useRef } from 'react'
 import { useHistory, useLocation } from 'react-router-dom'
-import { useUtils, useLanguage, useSession, MessagesDashboard as MessagesController } from 'ordering-components-external'
+import { useUtils, useLanguage, useSession, MessagesDashboard as MessagesController, useConfig } from 'ordering-components-external'
 import { useForm, Controller } from 'react-hook-form'
 import { useTheme } from 'styled-components'
 import Skeleton from 'react-loading-skeleton'
@@ -82,7 +82,6 @@ export const MessagesUI = (props) => {
     getHistoryComment
   } = props
 
-  const routerHistory = useHistory()
   const query = new URLSearchParams(useLocation().search)
   const [, t] = useLanguage()
   const theme = useTheme()
@@ -99,8 +98,11 @@ export const MessagesUI = (props) => {
   const [load, setLoad] = useState(0)
   const [messageList, setMessageList] = useState([])
   const [isChatDisabled, setIsChatDisabled] = useState(false)
-  const previousStatus = [1, 2, 5, 6, 10, 11, 12, 16, 17]
+  const previousStatus = [1, 2, 5, 6, 10, 11, 12, 15, 16, 17]
   const chatDisabled = previousStatus.includes(order?.status)
+  const [{ configs }] = useConfig()
+  const showExternalId = configs?.change_order_id?.value === '1'
+  const hideLogBookMessages = configs?.order_logbook_enabled?.value === '0'
 
   const adminMessageList = [
     { key: 'message_1', text: t('ADMIN_MESSAGE_1', 'admin_message_1') },
@@ -258,6 +260,20 @@ export const MessagesUI = (props) => {
     })
   }
 
+  const queryStringToObject = url => {
+    const params = new URLSearchParams(url.split('?')[1])
+    return Object.fromEntries(params)
+  }
+
+  const addQueryToUrl = (newObj) => {
+    const queryObj = queryStringToObject(location.href)
+    for (const key in newObj) {
+      queryObj[key] = newObj[key]
+    }
+    const query = new URLSearchParams(queryObj)
+    history && history.replaceState(null, '', `${location.pathname}?${query}`)
+  }
+
   const unreadMessageControl = () => {
     if (messages.loading || messages.messages.length === 0) return
     if (messages.messages[messages.messages.length - 1].read) return
@@ -302,9 +318,9 @@ export const MessagesUI = (props) => {
   const handleTabClick = (tab, isInitialRender) => {
     setTabActive(tab)
     if (!isInitialRender) {
-      const orderId = query.get('id')
-      const section = query.get('section')
-      routerHistory.replace(`${location.pathname}?id=${orderId}&section=${section}&tab=${tab}`)
+      addQueryToUrl({
+        tab: tab
+      })
     }
   }
 
@@ -330,7 +346,7 @@ export const MessagesUI = (props) => {
               {isChat && (
                 <ChatHeader>
                   <OrderNumber>
-                    {t('INVOICE_ORDER_NO', 'Order No')} {order.id}
+                    {t('INVOICE_ORDER_NO', 'Order No')} {(showExternalId && !!order?.external_id) ? order.external_id : order.id}
                   </OrderNumber>
                   <ImageContainer>
                     {user?.level !== 2 && (
@@ -468,13 +484,15 @@ export const MessagesUI = (props) => {
                   <React.Fragment key={message.id}>
                     {history && tabActive === 'order_history' && (
                       <>
-                        {message.type === 0 && (
+                        {message.type === 0 && !hideLogBookMessages && (
                           <MessageConsole key={message.id}>
                             <BubbleConsole>
                               <p
                                 dangerouslySetInnerHTML={{
                                   __html: t('ORDER_PLACED_FOR_VIA', 'Order placed for _for_ via _via_.')
-                                    .replace('_for_', '<b>' + parseDate(order.delivery_datetime) + '</b>')
+                                    .replace('_for_', '<b>' + order?.delivery_datetime_utc
+                                      ? parseDate(order?.delivery_datetime_utc)
+                                      : parseDate(order?.delivery_datetime, { utc: false }) + '</b>')
                                     .replace('_via_', '<b>' + t(order.app_id ? order.app_id.toUpperCase() : 'OTHER') + '</b>')
                                 }}
                               />
@@ -486,7 +504,7 @@ export const MessagesUI = (props) => {
                             </BubbleConsole>
                           </MessageConsole>
                         )}
-                        {message.type === 1 && (
+                        {message.type === 1 && !hideLogBookMessages && (
                           <MessageConsole key={message.id} style={{ display: `${tabActive === 'order_history' ? 'inline-flex' : 'none'}` }}>
                             {getHistoryComment(message) && (
                               <BubbleConsole>
@@ -509,7 +527,7 @@ export const MessagesUI = (props) => {
                     )}
                     {isChat && (
                       <>
-                        {message.type === 0 && (
+                        {message.type === 0 && !hideLogBookMessages && (
                           <MessageConsole key={message.id}>
                             <BubbleConsole>
                               <p>
@@ -528,7 +546,7 @@ export const MessagesUI = (props) => {
                             </BubbleConsole>
                           </MessageConsole>
                         )}
-                        {message.type === 1 && (
+                        {message.type === 1 && !hideLogBookMessages && (
                           <MessageConsole key={message.id} style={{ display: `${tabActive === 'order_history' ? 'inline-flex' : 'none'}` }}>
                             {getHistoryComment(message) && (
                               <BubbleConsole>

package/src/themes/callcenterOriginal/src/components/PhoneAutocomplete/index.js

@@ -5,7 +5,8 @@ import {
   useLanguage,
   useOrder,
   useCustomer,
-  useConfig
+  useConfig,
+  useEvent
 } from 'ordering-components-external'
 import { useTheme } from 'styled-components'
 import { Modal } from '../Modal'
@@ -63,17 +64,24 @@ const PhoneAutocompleteUI = (props) => {
   const theme = useTheme()
   const [, { deleteUserCustomer }] = useCustomer()
   const [configState] = useConfig()
+  const [events] = useEvent()
   const [alertState, setAlertState] = useState({ open: false, content: [] })
-  const [inputValue, setInputValue] = useState(urlPhone ?? '')
-  const [optSelected, setOptSelected] = useState(null)
   const [isOpenUserData, setIsOpenUserData] = useState(false)
   const [isAddressFormOpen, setIsAddressFormOpen] = useState(false)
   const [isPickupSelected, setIsPickupSelected] = useState(pickupTypes.includes(orderState?.options?.type))
   const userCustomer = JSON.parse(window.localStorage.getItem('user-customer'))
+  const [inputValue, setInputValue] = useState(urlPhone ?? userCustomer?.cellphone ?? '')
+  const [isSavedAddress, setIsSavedAddress] = useState(false)
+  const [optSelected, setOptSelected] = useState(userCustomer ? {
+    value: userCustomer.cellphone || userCustomer.phone,
+    label: `${userCustomer?.country_phone_code ? `(${userCustomer?.country_phone_code})` : ''} ${userCustomer?.phone && !userCustomer?.cellphone ? `${userCustomer?.phone}` : ''} ${userCustomer?.cellphone ? `${userCustomer.cellphone}` : ''} - {${userCustomer.name}}`,
+    flag: userCustomer?.imported_address_text && userCustomer?.addresses?.length === 0,
+    lastname: userCustomer.lastname
+  } : null)
   const configTypes = configState?.configs?.order_types_allowed?.value.split('|').filter(value => (allOrderTypes.includes(Number(value)))).map(value => Number(value)) || []
   const userName = userCustomer?.lastname
     ? `${userCustomer?.name} ${userCustomer?.lastname}`
-    : userCustomer?.name
+    : userCustomer?.name ?? optSelected?.lastname
 
   const handleCloseAlert = () => {
     setCustomersPhones({ ...customersPhones, error: null })
@@ -87,7 +95,10 @@ const PhoneAutocompleteUI = (props) => {
   }
 
   const handleFindClick = () => {
-    if (userCustomer?.id && orderState?.options?.address?.address) {
+    if (optSelected && !(userCustomer?.id && orderState?.options?.address?.address)) {
+      onChange(optSelected)
+    }
+    else if (userCustomer?.id && orderState?.options?.address?.address) {
       onRedirectPage && onRedirectPage('search')
     } else {
       setAlertState({ open: true, content: t('SELECT_ADDRESS_CUSTOMER', 'Please select an address for the selected customer') })
@@ -124,8 +135,21 @@ const PhoneAutocompleteUI = (props) => {
     onChangeNumber(inputValue)
   }
 
-  const onChange = (option) => {
-    setOptSelected(option)
+  const onChange = (option, triggeredAction) => {
+    if (triggeredAction?.action === 'clear') {
+      setOptSelected(null)
+      setCustomersPhones({ ...customersPhones, users: [] })
+      setInputValue('')
+      return
+    }
+    let user
+    if (option) {
+      user = customersPhones.users?.find(user => user.cellphone === option?.value || user.phone === option?.value)
+    }
+    setOptSelected({
+      ...option,
+      lastname: user?.lastname ?? user?.name
+    })
     setInputValue(option ? option?.value : '')
     if (!option) {
       onChangeNumber('')
@@ -134,7 +158,6 @@ const PhoneAutocompleteUI = (props) => {
       }
       return
     }
-    const user = customersPhones.users?.find(user => user.cellphone === option?.value || user.phone === option?.value)
     if (user) {
       setCustomerState({ ...customerState, result: user })
       setOpenModal({ ...openModal, signup: false, customer: true })
@@ -201,6 +224,15 @@ const PhoneAutocompleteUI = (props) => {
     }
   }, [orderState?.options?.type])
 
+  useEffect(() => {
+    if (isSavedAddress &&
+      userCustomer?.id === orderState?.options?.user_id &&
+      orderState?.options?.address?.address
+    ) {
+      events.emit('go_to_page', { page: 'search' })
+    }
+  }, [isSavedAddress, userCustomer?.id, orderState?.options?.user_id, orderState?.options?.address?.address])
+
   const OrderTypesComponent = () => {
     return (
       <>
@@ -225,38 +257,36 @@ const PhoneAutocompleteUI = (props) => {
         <ContentWrapper>
           <Title>{t('TITLE_HOME_CALLCENTER', 'Welcome to your Ordering Call Center.')}</Title>
           <Slogan>{t('SUBTITLE_HOME_CALLCENTER', 'Start first by selecting a delivery type')}</Slogan>
-          {!(userCustomer && orderState?.options?.address?.address) && (
-            <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>
-          )}
+          <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 && (
             <>
               <p>{t('WHAT_PICKUP_YOU_NEED', 'What kind of pickup do you need?')}</p>
@@ -267,51 +297,49 @@ const PhoneAutocompleteUI = (props) => {
           )}
           {configTypes.includes(orderState?.options?.type) && (
             <>
-              {!userCustomer && (
-                <PhoneAutocompleteContainer>
-                  <h2>
-                    {t('ADDING_CUSTOMERS_PHONE_NUMBER', 'Adding the customers’ phone number')}
-                  </h2>
-                  <WrappBtn>
-                    <Button
-                      color={(inputValue || (userCustomer && orderState?.options?.address?.address)) ? 'primary' : 'secundary'}
-                      onMouseDown={() => !(userCustomer && orderState?.options?.address?.address) ? createNewUser() : handleFindClick()}
-                      disabled={(!inputValue && !(userCustomer && orderState?.options?.address?.address))}
-                    >
-                      {
-                        !(userCustomer && orderState?.options?.address?.address)
-                          ? t('CREATE_CUSTOMER', 'Create new customer')
-                          : `${t('CONTINUE_WITH', 'Continue with')} ${userName}`
-                      }
-                    </Button>
-                  </WrappBtn>
-                  <SelectContainer>
-                    <MdcCellphoneAndroid size={18} color={theme?.colors?.primary} />
-                    <Select
-                      isSearchable
-                      isClearable
-                      className='basic-single'
-                      classNamePrefix='select'
-                      placeholder={t('PHONE_NUMBER', 'Phone number')}
-                      value={optSelected}
-                      noOptionsMessage={() => inputValue?.length > 6 ? t('NO_OPTIONS', 'No options') : t('TYPE_AT_LEAST_NUMBER_SUGGEST', 'Type at least 7 numbers for suggesstions')}
-                      inputValue={!optSelected ? inputValue : ''}
-                      onChange={onChange}
-                      onInputChange={onInputChange}
-                      isLoading={customersPhones?.loading}
-                      options={optionsToSelect}
-                      components={{ Option }}
-                    />
-                    {optSelected && (
-                      <ContinueButton>
-                        <Button onClick={() => onChange(optSelected)} color='primary'>
-                          {t('CONTINUE', 'Continue')}
-                        </Button>
-                      </ContinueButton>
-                    )}
-                  </SelectContainer>
-                </PhoneAutocompleteContainer>
-              )}
+              <PhoneAutocompleteContainer>
+                <h2>
+                  {t('ADDING_CUSTOMERS_PHONE_NUMBER', 'Adding the customers’ phone number')}
+                </h2>
+                <WrappBtn>
+                  <Button
+                    color={(inputValue || (userCustomer && orderState?.options?.address?.address)) ? 'primary' : 'secundary'}
+                    onMouseDown={() => !(userCustomer && orderState?.options?.address?.address) && !optSelected ? createNewUser() : handleFindClick()}
+                    disabled={(!inputValue && !(userCustomer && orderState?.options?.address?.address) && !optSelected)}
+                  >
+                    {
+                      !(userCustomer && orderState?.options?.address?.address) && !optSelected
+                        ? t('CREATE_CUSTOMER', 'Create new customer')
+                        : `${t('CONTINUE_WITH', 'Continue with')} ${userName}`
+                    }
+                  </Button>
+                </WrappBtn>
+                <SelectContainer>
+                  <MdcCellphoneAndroid size={18} color={theme?.colors?.primary} />
+                  <Select
+                    isSearchable
+                    isClearable
+                    className='basic-single'
+                    classNamePrefix='select'
+                    placeholder={t('PHONE_NUMBER', 'Phone number')}
+                    value={optSelected}
+                    noOptionsMessage={() => inputValue?.length > 6 ? t('NO_OPTIONS', 'No options') : t('TYPE_AT_LEAST_NUMBER_SUGGEST', 'Type at least 7 numbers for suggesstions')}
+                    inputValue={!optSelected ? inputValue : ''}
+                    onChange={onChange}
+                    onInputChange={onInputChange}
+                    isLoading={customersPhones?.loading}
+                    options={optionsToSelect}
+                    components={{ Option }}
+                  />
+                  {optSelected && (
+                    <ContinueButton>
+                      <Button onClick={() => onChange(optSelected)} color='primary'>
+                        {t('CONTINUE', 'Continue')}
+                      </Button>
+                    </ContinueButton>
+                  )}
+                </SelectContainer>
+              </PhoneAutocompleteContainer>
             </>
           )}
         </ContentWrapper>
@@ -361,10 +389,12 @@ const PhoneAutocompleteUI = (props) => {
                 }}
                 isEnableContinueButton
                 isCustomerMode
+                isFromPhoneAutocomplete
                 isOpenUserData={isOpenUserData}
                 setIsOpenUserData={setIsOpenUserData}
                 setIsAddressFormOpen={setIsAddressFormOpen}
                 franchiseId={franchiseId}
+                setIsSavedAddress={setIsSavedAddress}
               />
             </>
           )}

package/src/themes/callcenterOriginal/src/components/SignUpForm/index.js

@@ -278,7 +278,7 @@ const SignUpFormUI = (props) => {
                                 name={field.code}
                                 aria-label={field.code}
                                 className='form'
-                                placeholder={t(field.code.toUpperCase(), field.name)}
+                                placeholder={!field.required ? t(field.code.toUpperCase() + '_OPTIONAL', field.name + ' (Optional)') : t(field.code.toUpperCase(), field.name)}
                                 onChange={handleChangeInputEmail}
                                 ref={(e) => {
                                   emailInput.current = e

package/src/themes/callcenterOriginal/src/components/UserDetails/index.js

@@ -44,6 +44,8 @@ const UserDetailsUI = (props) => {
   const [{ user }] = useSession()
   const userData = userState.result?.result || props.userData || formState.result?.result || user
 
+  const validationFieldsLength = Object.values(validationFields?.fields?.checkout)?.map(field => field.enabled)
+
   useEffect(() => {
     if (isUserDetailsEdit) {
       !isEdit && toggleIsEdit()
@@ -69,9 +71,13 @@ const UserDetailsUI = (props) => {
         <BeforeComponent key={i} {...props} />))}
       {(validationFields.loading || formState.loading || userState.loading) && (
         <UserData>
-          <Skeleton width={250} height={25} />
-          <Skeleton width={180} height={25} />
-          <Skeleton width={210} height={25} />
+          {validationFieldsLength?.map(field => (
+            <React.Fragment key={field?.id}>
+              <Skeleton width={250} height={50} />
+              <Skeleton width={180} height={25} />
+              <Skeleton width={210} height={50} />
+            </React.Fragment>
+          ))}
         </UserData>
       )}
 

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

@@ -6,6 +6,7 @@ import {
   Header,
   Map,
   Text,
+  ToggleMap,
   WrappMap
 } from './styles'
 
@@ -27,6 +28,7 @@ const AddressDetailsUI = (props) => {
   const [, t] = useLanguage()
   const [openModal, setOpenModal] = useState(false)
   const [alertState, setAlertState] = useState({ open: false, content: [] })
+  const [isShowMap, setIsShowMap] = useState(false)
   const userCustomer = JSON.parse(window.localStorage.getItem('user-customer'))
   const [{ user }] = useCustomer()
 
@@ -51,11 +53,22 @@ const AddressDetailsUI = (props) => {
           </Text>
         </Header>
         {apiKey && (
-          <WrappMap>
-            <Map>
-              <img src={googleMapsUrl} id='google-maps-image' alt='google-maps-location' width='288px' height='162px' loading='lazy' />
-            </Map>
-          </WrappMap>
+          <>
+            {!isShowMap && (
+              <ToggleMap>
+                <Text>
+                  <span onClick={() => setIsShowMap(!isShowMap)}>{t('SHOW_MAP', 'Show map')}</span>
+                </Text>
+              </ToggleMap>
+            )}
+            {isShowMap && (
+              <WrappMap>
+                <Map>
+                  <img src={googleMapsUrl} id='google-maps-image' alt='google-maps-location' width='288px' height='162px' loading='lazy' />
+                </Map>
+              </WrappMap>
+            )}
+          </>
         )}
 
         <Modal

package/src/themes/five/src/components/AddressDetails/styles.js

@@ -11,6 +11,7 @@ export const Header = styled.div``
 export const WrappMap = styled.div`
   width: 100%;
   margin: auto;
+  height: 300px;
 `
 
 export const Map = styled.div`
@@ -63,3 +64,9 @@ export const Text = styled.div`
     `}
   }
 `
+
+export const ToggleMap = styled.div`
+  span {
+    margin: 0 auto;
+  }
+`

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

@@ -9,7 +9,8 @@ export const OrdersSection = (props) => {
     getCustomArray,
     businessesList,
     isCustomerMode,
-    userCustomer
+    userCustomer,
+    disableSkeletons
   } = props
   const [orderState] = useOrder()
   const [, t] = useLanguage()
@@ -41,6 +42,7 @@ export const OrdersSection = (props) => {
             isCustomerMode={isCustomerMode}
             franchiseId={props.franchiseId}
             handleRedirectToCheckout={handleRedirectToCheckout}
+            disableSkeletons={disableSkeletons}
           />
           <OrdersOption
             propsToFetch={propsToFetch}
@@ -58,6 +60,7 @@ export const OrdersSection = (props) => {
             isCustomerMode={isCustomerMode}
             franchiseId={props.franchiseId}
             handleRedirectToCheckout={handleRedirectToCheckout}
+            disableSkeletons={disableSkeletons}
           />
           <OrdersOption
             propsToFetch={propsToFetch}
@@ -75,6 +78,7 @@ export const OrdersSection = (props) => {
             isCustomerMode={isCustomerMode}
             franchiseId={props.franchiseId}
             handleRedirectToCheckout={handleRedirectToCheckout}
+            disableSkeletons={disableSkeletons}
           />
         </>
       )}

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

@@ -357,6 +357,7 @@ const BusinessesListingUI = (props) => {
           businessesList={businessesList}
           isCustomerMode={isCustomerMode}
           userCustomer={userCustomer}
+          disableSkeletons
         />
       )}
       {!isCustomerMode && !hideSearchSection && (

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

@@ -100,7 +100,8 @@ const CheckoutUI = (props) => {
     onPlaceOrderClick,
     setPlaceSpotNumber,
     placeSpotNumber,
-    checkoutFieldsState
+    checkoutFieldsState,
+    alseaCheckPriceError
   } = props
 
   const theme = useTheme()
@@ -171,7 +172,8 @@ const CheckoutUI = (props) => {
     validateCommentsCartField ||
     validateDriverTipField ||
     validateCouponField ||
-    validateZipcodeCard
+    validateZipcodeCard ||
+    !!alseaCheckPriceError
 
   const driverTipsOptions = typeof configs?.driver_tip_options?.value === 'string'
     ? JSON.parse(configs?.driver_tip_options?.value) || []
@@ -199,7 +201,7 @@ const CheckoutUI = (props) => {
       return
     }
 
-    if (!userErrors.length && !requiredFields?.length) {
+    if ((!userErrors.length && !requiredFields?.length) || (requiredFields?.length === 1 && isCustomerMode && requiredFields?.includes('email'))) {
       const body = {}
       if (behalfName) {
         body.on_behalf_of = behalfName
@@ -578,24 +580,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>
@@ -723,6 +725,12 @@ const CheckoutUI = (props) => {
             {t('WARNING_CARD_ZIPCODE_REQUIRED', 'Your card selected has not zipcode')}
           </WarningText>
         )}
+
+        {!!alseaCheckPriceError && (
+          <WarningText>
+            {alseaCheckPriceError}
+          </WarningText>
+        )}
         {cart?.valid_preorder !== undefined && !cart?.valid_preorder && (
           <WarningText>
             {t('INVALID_CART_MOMENT', 'Selected schedule time is invalid, please select a schedule into the business schedule interval.')}

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

@@ -81,7 +81,7 @@ const HighestRatedUI = (props) => {
         <BusinessListWrapper>
           <BusinessList>
             {
-              !businessesList.loading && (businessesList.businesses.length === 0 || isBusinessWithReviews) && (
+              !isCustomerMode && !businessesList.loading && (businessesList.businesses.length === 0 || isBusinessWithReviews) && (
                 <NotFoundSource
                   content={t('NOT_FOUND_BUSINESSES_HIGHEST_RATED', 'No highest rated businesses found, please change filters or change address.')}
                 >