ordering-ui-external 2.1.4 → 2.2.0

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

@@ -16,8 +16,27 @@ export const BusinessListingSearchContainer = styled.div`
   }
 `
 
+export const Title = styled.div`
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  margin: 20px 0;
+  cursor: pointer;
+
+  h3 {
+    margin: 0 10px 0 0;
+  }
+
+  .rotate {
+    transform: rotate(180deg);
+  }
+
+  .accordion__icon {
+    transition: transform 0.6s ease;
+  }
+`
+
 export const FiltersContainer = styled.div`
-  
   flex-direction: column;
   @media (min-width: 993px){
     flex-direction: row;
@@ -32,7 +51,7 @@ export const Filters = styled.div`
   @media (min-width: 993px){
     width: 25%;
     max-width: 25%;
-    margin-right: 20px;
+    margin-right: 70px;
   }
 `
 

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

@@ -93,6 +93,28 @@ const BusinessPreorderUI = (props) => {
     setIsEnabled(menu.schedule[day].enabled || false)
   }
 
+  const getMomentTime = (time) => {
+    const _moment = moment(`${moment(dateSelected).format('YYYY-MM-DD')} ${time}`, 'YYYY-MM-DD HH:mm').toDate()
+    return _moment
+  }
+
+  const isBusyTime = (professional, selectedMoment) => {
+    if (!selectedMoment) return false
+    const startDay = moment(selectedMoment).utc().format('d')
+    const isStartScheduleEnabled = professional?.schedule?.[startDay]?.enabled
+    if (!isStartScheduleEnabled) return true
+
+    if (professional?.busy_times?.length === 0) return false
+
+    const busyTimes = professional?.busy_times
+
+    const valid = busyTimes.some(item => {
+      return (moment.utc(item?.start).local().valueOf() <= moment(selectedMoment).valueOf() &&
+        moment(selectedMoment).valueOf() < moment.utc(item?.end).local().valueOf())
+    })
+    return valid
+  }
+
   const getTimeList = (curdate, menu) => {
     validateSelectedDate(curdate, menu)
     const dateParts = curdate.split('-')
@@ -208,6 +230,8 @@ const BusinessPreorderUI = (props) => {
                     active={timeSelected === time.value}
                     onClick={() => handleChangeTime(time.value)}
                     isDisabled={isDisabled}
+                    isProfessional={isProfessional}
+                    busyTime={isProfessional && isBusyTime(business, getMomentTime(time.value))}
                   >
                     <span>{time.text}</span>
                   </TimeItem>

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

@@ -155,7 +155,12 @@ export const TimeItem = styled.div`
   display: flex;
   justify-content: center;
   align-items: center;
-  background: #E9ECEF;
+  ${({ isProfessional }) => isProfessional ? css`
+    background: ${props => props.theme.colors.primaryContrast};
+    color: ${props => props.theme.colors.primary};
+  ` : css`
+    background: ${props => props.theme.colors.gray200};
+  `}
   border-radius: 7.6px;
   padding: 5px 15px;
   margin: 12px;
@@ -172,6 +177,11 @@ export const TimeItem = styled.div`
   ${({ isDisabled }) => isDisabled && css`
     pointer-events: none;
   `}
+  
+  ${({ busyTime }) => busyTime && css`
+    background: ${props => props.theme.colors.gray200};
+    color: ${props => props.theme.colors.lightGray};
+  `}
 
   span {
     font-size: 14px;

package/src/themes/five/src/components/BusinessProductsList/layouts/groceries/styles.js

@@ -47,10 +47,12 @@ export const WrapAllCategories = styled.div`
       white-space: pre;
     }
     span {
-      color: ${props => props.theme.colors.primary};
-      text-decoration: underline;
+      color: ${props => props.theme.colors.primary};=
       margin-left: 10px;
       cursor: pointer;
+      &:hover {
+        text-decoration: underline;
+      }
     }
   }
 
@@ -150,11 +152,13 @@ export const CategoryDescripion = styled.div`
     }
     span {
       color: ${props => props.theme.colors.primary};
-      text-decoration: underline;
       margin-left: 10px;
       cursor: pointer;
       white-space: nowrap;
       overflow: visible;
+      &:hover {
+        text-decoration: underline;
+      }
     }
 `
 

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

@@ -80,10 +80,12 @@ export const CategoryDescription = styled.div`
     }
     span {
       color: ${props => props.theme.colors.primary};
-      text-decoration: underline;
       margin-left: 10px;
       cursor: pointer;
       white-space: nowrap;
+      &:hover {
+        text-decoration: underline;
+      }
     }
 `
 

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

@@ -243,6 +243,16 @@ const BusinessProductsListingUI = (props) => {
     events.emit('get_current_view')
   }, [])
 
+  useEffect(() => {
+    const handleClickedBannerProduct = () => {
+      handleUpdateInitialRender(true)
+    }
+    events.on('product_banner_clicked', handleClickedBannerProduct)
+    return () => {
+      events.off('product_banner_clicked', handleClickedBannerProduct)
+    }
+  }, [])
+
   useEffect(() => {
     if (loading) return
     if (openProduct) {
@@ -442,7 +452,7 @@ const BusinessProductsListingUI = (props) => {
         disableOverflowX
       >
 
-        {productModal.loading && !productModal.error && (
+        {productModal.loading && !productModal.error && !productModal.product && (
           <ProductLoading>
             <SkeletonItem>
               <Skeleton height={45} count={props.useKioskApp ? 12 : 8} />

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

@@ -47,6 +47,7 @@ import { AutoScroll } from '../../../AutoScroll'
 import { CitiesControl } from '../../../CitiesControl'
 import { OrderContextUI } from '../../../OrderContextUI'
 import { OrdersSection } from './OrdersSection'
+import { getCateringValues } from '../../../../../../../utils'
 
 const PIXELS_TO_SCROLL = 300
 
@@ -97,6 +98,13 @@ const BusinessesListingUI = (props) => {
   const businessesIds = businessesList.businesses &&
     businessesList.businesses?.map(business => business.id)
   const isChew = orderingTheme?.theme?.header?.components?.layout?.type?.toLowerCase() === 'chew'
+  const cateringTypeString = orderState?.options?.type === 7
+    ? 'catering_delivery'
+    : orderState?.options?.type === 8
+      ? 'catering_pickup'
+      : null
+
+  const cateringValues = preorderBusiness?.configs && getCateringValues(cateringTypeString, preorderBusiness?.configs)
 
   const handleScroll = useCallback(() => {
     const innerHeightScrolltop = window.innerHeight + document.documentElement?.scrollTop + PIXELS_TO_SCROLL
@@ -210,7 +218,7 @@ const BusinessesListingUI = (props) => {
       {(windowSize.width < 576 || (configs?.business_listing_hide_image?.value !== '1' && !isChew)) && (
         <BusinessBanner>
           {windowSize.width < 576 && (
-            <OrderContextUI isBusinessList />
+            <OrderContextUI isBusinessList hideHero={!hideHero} />
           )}
           {(configs?.business_listing_hide_image?.value !== '1' && !isChew) && !hideHero && (
             <BusinessHeroImg
@@ -415,6 +423,8 @@ const BusinessesListingUI = (props) => {
           business={preorderBusiness}
           handleClick={handleBusinessClick}
           showButton
+          cateringPreorder={!!cateringTypeString}
+          {...cateringValues}
         />
       </Modal>
       <Modal

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

@@ -76,8 +76,10 @@ export const OrderBill = styled.div`
       td:nth-child(2) {
         font-weight: bold;
         color: ${({ theme }) => theme.colors.primary};
-        text-decoration: underline;
         cursor: pointer;
+        &:hover {
+        text-decoration: underline;
+      }
       }
     }
   }

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

@@ -157,6 +157,12 @@ const CheckoutUI = (props) => {
     }
   })
 
+  const hideBusinessAddress = theme?.checkout?.components?.business?.components?.address?.hidden
+  const hideBusinessDetails = theme?.checkout?.components?.business?.hidden
+  const hideBusinessMap = theme?.checkout?.components?.business?.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 handlePlaceOrder = () => {
     if (!userErrors.length && !requiredFields?.length) {
       const body = {}
@@ -452,38 +458,31 @@ const CheckoutUI = (props) => {
               />
             </WalletPaymentOptionContainer>
           )}
-
-          {
-            isMultiDriverTips &&
-            !cartState.loading &&
-            cart &&
-            cart?.business_id &&
-            options.type === 1 &&
-            cart?.status !== 2 &&
-            validationFields?.fields?.checkout?.driver_tip?.enabled &&
-            driverTipsOptions.length > 0 &&
-            !useKioskApp &&
-            (
-              <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>
-            )
-          }
         </WrapperLeftContent>
       </WrapperLeftContainer>
       <WrapperRightContainer>
+
+        {
+          !!(!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 />
+          </>
+        }
         {!cartState.loading && placeSpotsEnabled && cart?.business_id && (
           <SelectSpotContainer>
             <PlaceSpot
@@ -497,38 +496,6 @@ const CheckoutUI = (props) => {
             />
           </SelectSpotContainer>
         )}
-        {
-          !isMultiDriverTips &&
-          !cartState.loading &&
-          cart &&
-          cart?.business_id &&
-          options.type === 1 &&
-          cart?.status !== 2 &&
-          validationFields?.fields?.checkout?.driver_tip?.enabled &&
-          driverTipsOptions.length > 0 &&
-          !useKioskApp &&
-          (
-            <>
-              <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 && cart && (
           <CartContainer>
             <CartHeader>
@@ -546,6 +513,26 @@ const CheckoutUI = (props) => {
             />
           </CartContainer>
         )}
+        {
+          !!(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>
+          )
+        }
 
         {windowSize.width >= 576 && !cartState.loading && cart && cart?.status !== 2 && (
           <WrapperPlaceOrderButton>

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

@@ -258,9 +258,11 @@ export const CartHeader = styled.div`
   span {
     font-size: 13px;
     color: ${props => props.theme.colors.primary};
-    text-decoration: underline;
     cursor: pointer;
     user-select: none;
+    &:hover {
+        text-decoration: underline;
+      }
   }
 
   h1, span {

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

@@ -18,6 +18,7 @@ const DriverTipsUI = (props) => {
     driverTip,
     driverTipsOptions,
     cart,
+    carts,
     isDriverTipUseCustom,
     handlerChangeOption
   } = props
@@ -40,6 +41,10 @@ const DriverTipsUI = (props) => {
     ? `${configs?.format_number_currency?.value}0`
     : `0${configs?.format_number_currency?.value}`
 
+  const multiCartTipsAmmout = carts?.reduce((total, cart) => {
+    return total + parseFloat(cart?.driver_tip || 0)
+  }, 0)
+
   return (
     <DriverTipContainer id='driver-tip-container'>
       <>
@@ -56,7 +61,7 @@ const DriverTipsUI = (props) => {
               {`${isFixedPriceType ? parsePrice(option) : `${option}%`}`}
             </TipCard>
           ))}
-          {(isDriverTipUseCustom && !isMulti) && (
+          {isDriverTipUseCustom && (
             <TipCard
               className={`${customTip ? 'active' : ''}`}
               onClick={() => setCustomTip(true)}
@@ -90,7 +95,7 @@ const DriverTipsUI = (props) => {
           {currentTip && (
             <DriverTipMessage>
               {t('CURRENT_DRIVER_TIP_AMOUNT', 'Current driver tip amount')}{!isFixedPriceType &&
-                ` (${driverTip}%)`}: {isFixedPriceType ? parsePrice(driverTip) : parsePrice(cart?.driver_tip)}
+                ` (${driverTip}%)`}: {parsePrice(isMulti ? multiCartTipsAmmout : isFixedPriceType ? driverTip : cart?.driver_tip)}
             </DriverTipMessage>
           )}
         </WrapperTips>

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

@@ -100,6 +100,8 @@ export const RightHeader = styled.div`
 export const Menu = styled.div`
   display: flex;
   align-items: center;
+  margin-right: 10px;
+
   #select-input {
     border-radius: 7.6px;
     #list {
@@ -428,7 +430,7 @@ export const LanguageSelectorWrapper = styled(InputGroup)`
     }
   }
   #select-input {
-    margin: 0px 10px 0 5px;
+    margin-left: 5px;
   }
 `
 
@@ -453,7 +455,7 @@ export const LeftSide = styled.div`
   width: 100%;
   @media (min-width: 769px){
     flex-direction: ${({ theme }) =>
-      theme?.header?.components?.logo?.components?.layout?.position === 'center' ? 'row-reverse' : 'row'};
+    theme?.header?.components?.logo?.components?.layout?.position === 'center' ? 'row-reverse' : 'row'};
     width: 60%;
   }
 `

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

@@ -64,7 +64,6 @@ export const Help = (props) => {
                   }
                 </SubPageList>
                 <LastOrdersListWrapper>
-                  <h2>{t('LAST_ORDER', 'Last order')}</h2>
                   <LastOrders {...props} />
                 </LastOrdersListWrapper>
               </HelpContentWrapper>

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

@@ -13,7 +13,6 @@ import {
   OrderInfoBlock,
   BusinessHeader
 } from './styles'
-import { NotFoundSource } from '../NotFoundSource'
 
 export const LastOrdersUI = (props) => {
   const {
@@ -39,33 +38,31 @@ export const LastOrdersUI = (props) => {
         </React.Fragment>))}
       {props.beforeComponents?.map((BeforeComponent, i) => (
         <BeforeComponent key={i} {...props} />))}
-      <LastOrdersContainer>
-        {orderList?.loading && <Skeleton height={150} />}
-        {!orderList?.loading && orderList?.orders?.length > 0 && orderList?.orders.map((order, i) => (
-          <BusinessHeader key={i} bgimage={optimizeImage(order?.business?.header || theme.images?.dummies?.businessLogo, 'h_400,c_limit')}>
-            <OrderInfoBlock onClick={() => handleClickOrder(order?.uuid)}>
-              {order?.business?.name && (
-                <h4>{order?.business?.name}</h4>
-              )}
-              {(order?.delivery_datetime_utc || order?.delivery_datetime) && (
-                <p>
-                  <span>{t('TUTORIAL_ORDER_COMPLETED', 'Order Completed')} {('ON', 'on')} </span>
-                  {order?.delivery_datetime_utc
-                    ? parseDate(order?.delivery_datetime_utc)
-                    : parseDate(order?.delivery_datetime, { utc: false })}
-                </p>
-              )}
-            </OrderInfoBlock>
-          </BusinessHeader>
-        ))}
-        {!orderList?.loading && orderList?.orders?.length === 0 && (
-          <NotFoundSource
-            image={imageFails}
-            content={t('NO_RESULTS_FOUND', 'Sorry, no results found')}
-            conditioned
-          />
-        )}
-      </LastOrdersContainer>
+      {!orderList?.loading && orderList?.orders?.length > 0 && (
+        <>
+          <h2>{t('LAST_ORDER', 'Last order')}</h2>
+          <LastOrdersContainer>
+            {orderList?.loading && <Skeleton height={150} />}
+            {!orderList?.loading && orderList?.orders?.length > 0 && orderList?.orders.map((order, i) => (
+              <BusinessHeader key={i} bgimage={optimizeImage(order?.business?.header || theme.images?.dummies?.businessLogo, 'h_400,c_limit')}>
+                <OrderInfoBlock onClick={() => handleClickOrder(order?.uuid)}>
+                  {order?.business?.name && (
+                    <h4>{order?.business?.name}</h4>
+                  )}
+                  {(order?.delivery_datetime_utc || order?.delivery_datetime) && (
+                    <p>
+                      <span>{t('TUTORIAL_ORDER_COMPLETED', 'Order Completed')} {('ON', 'on')} </span>
+                      {order?.delivery_datetime_utc
+                        ? parseDate(order?.delivery_datetime_utc)
+                        : parseDate(order?.delivery_datetime, { utc: false })}
+                    </p>
+                  )}
+                </OrderInfoBlock>
+              </BusinessHeader>
+            ))}
+          </LastOrdersContainer>
+        </>
+      )}
       {props.afterComponents?.map((AfterComponent, i) => (
         <AfterComponent key={i} {...props} />))}
       {props.afterElements?.map((AfterElement, i) => (

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

@@ -4,8 +4,9 @@ import { useLanguage, useUtils, useEvent, OrderList as OrderListController, Orde
 import { useTheme } from 'styled-components'
 import Skeleton from 'react-loading-skeleton'
 import FaUserAlt from '@meronex/icons/fa/FaUserAlt'
-import { NotFoundSource } from '../../../../../components/NotFoundSource'
 import { getOrderStatus } from '../../../../../utils'
+import { Messages } from '../Messages'
+import { NotFoundSource } from '../NotFoundSource'
 
 import {
   MessagesListingContainer,
@@ -33,7 +34,6 @@ import {
   DriverText,
   NotFoundSourceWrapper
 } from './styles'
-import { Messages } from '../Messages'
 
 const OrdersListingUI = (props) => {
   const {

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

@@ -139,7 +139,9 @@ export const ViewDetails = styled.a`
   cursor: pointer;
   color: ${props => props.theme.colors.primary};
   font-size: 12px;
-  text-decoration: underline;
+  &:hover {
+        text-decoration: underline;
+      }
   margin: 0 10px;
 `
 

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

@@ -263,20 +263,20 @@ const MultiCheckoutUI = (props) => {
                 <MultiCartPriceContainer totalFeeEnabled={totalFeeEnabled}>
                   {!!totalCartsFee &&
                     configs?.multi_business_checkout_show_combined_delivery_fee?.value === '1' &&
-                  (
-                    <span>
-                      <p>{t('TOTAL_DELIVERY_FEE', 'Total delivery fee')}</p>
-                      <p>{parsePrice(totalCartsFee)}</p>
-                    </span>
-                  )}
+                    (
+                      <span>
+                        <p>{t('TOTAL_DELIVERY_FEE', 'Total delivery fee')}</p>
+                        <p>{parsePrice(totalCartsFee)}</p>
+                      </span>
+                    )}
                   {openCarts.reduce((sum, cart) => sum + cart?.driver_tip, 0) > 0 &&
                     configs?.multi_business_checkout_show_combined_driver_tip?.value === '1' &&
-                  (
-                    <span>
-                      <p>{t('DRIVER_TIP', 'Driver tip')}</p>
-                      <p>{parsePrice(openCarts.reduce((sum, cart) => sum + cart?.driver_tip, 0))}</p>
-                    </span>
-                  )}
+                    (
+                      <span>
+                        <p>{t('DRIVER_TIP', 'Driver tip')}</p>
+                        <p>{parsePrice(openCarts.reduce((sum, cart) => sum + cart?.driver_tip, 0))}</p>
+                      </span>
+                    )}
                   <div>
                     <h4>{t('TOTAL_FOR_ALL_CARTS', 'Total for all Carts')}</h4>
                     <h4>{parsePrice(totalCartsPrice)}</h4>

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

@@ -54,9 +54,6 @@ export const MyOrders = (props) => {
       {hideOrders && !allEmpty && (
         <h2>{t('PREVIOUSLY_ORDERED', 'Previously ordered')}</h2>
       )}
-      {!hideOrders && !props.hideOptions && (
-        <ProfileOptions value='orders' />
-      )}
       <Container hideOrders={hideOrders}>
         {!hideOrders && (
           <h1>{layout === 'appointments' ? t('MY_APPOINTMENTS', 'My appointments') : t('MY_ORDERS', 'My orders')}</h1>

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

@@ -1,6 +1,6 @@
 import React from 'react'
-import { useTheme } from 'styled-components'
 import { Button } from '../../styles/Buttons'
+import FdPageSearch from '@meronex/icons/fd/FdPageSearch'
 
 import {
   NotFound,
@@ -17,9 +17,6 @@ export const NotFoundSource = (props) => {
     onClickButton
   } = props
 
-  const theme = useTheme()
-
-  const errorImage = image || theme.images?.general?.notFound
 
   return (
     <>
@@ -30,12 +27,10 @@ export const NotFoundSource = (props) => {
       {props.beforeComponents?.map((BeforeComponent, i) => (
         <BeforeComponent key={i} {...props} />))}
       <NotFound id='not-found-source'>
-        {errorImage && (
-          <NotFoundImage>
-            <img src={errorImage} alt='Not Found' width='300' height='260' loading='lazy' />
-          </NotFoundImage>
-        )}
-        {content && conditioned && !errorImage && <h1>{content}</h1>}
+        <NotFoundImage>
+          <FdPageSearch />
+        </NotFoundImage>
+        {content && conditioned && <h1>{content}</h1>}
         {content && !conditioned && <h1>{content}</h1>}
         {!onClickButton && props.children && (
           props.children

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

@@ -10,7 +10,8 @@ export const NotFound = styled.div`
   margin: 20px auto;
 
   h1 {
-    font-size: 14px;
+    font-size: 20px;
+    opacity: 0.5;
     line-height: 24px;
     text-align: center;
     color: ${props => props.theme.colors?.headingColor};
@@ -24,7 +25,11 @@ export const NotFound = styled.div`
 `
 
 export const NotFoundImage = styled.div`
-  max-width: 300px;
+  svg {
+    width: 150px;
+    height: 120px;
+    opacity: 0.5;
+  }
 `
 
 export const ButtonWrapper = styled.div`

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

@@ -67,7 +67,7 @@ export const OrderContextUI = (props) => {
 
   return (
     <>
-      <Container isBusinessList={isBusinessList}>
+      <Container isBusinessList={isBusinessList} hero={props.hideHero} >
         <AddressMenu
           onClick={() => handleClickAddress()}
           isCheckOut={isCheckOut}