ordering-ui-external 2.4.6 → 2.5.0

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

@@ -1,6 +1,6 @@
 import React, { useState, useRef, useEffect } from 'react'
 import TiArrowSortedUp from '@meronex/icons/ti/TiArrowSortedUp'
-import { useOrder, useLanguage, useEvent, useUtils, useConfig, useOrderingTheme } from 'ordering-components-external'
+import { useOrder, useLanguage, useEvent, useUtils, useConfig } from 'ordering-components-external'
 import { useTheme } from 'styled-components'
 import FiClock from '@meronex/icons/fi/FiClock'
 import {
@@ -49,7 +49,6 @@ export const BusinessItemAccordion = (props) => {
   const [{ parsePrice }] = useUtils()
   const [{ configs }] = useConfig()
   const theme = useTheme()
-  const [orderingTheme] = useOrderingTheme()
   const [setActive, setActiveState] = useState('')
   const [setHeight, setHeightState] = useState('0px')
   const [setRotate, setRotateState] = useState('accordion__icon')
@@ -63,8 +62,8 @@ export const BusinessItemAccordion = (props) => {
   const changeStore = useRef(null)
 
   const viewString = isStore ? 'business_view' : 'header'
-  const showBusinessLogo = !orderingTheme?.theme?.[viewString]?.components?.cart?.components?.business?.components?.logo?.hidden
-  const showBusinessTime = !orderingTheme?.theme?.[viewString]?.components?.cart?.components?.business?.components?.time?.hidden
+  const hideBusinessLogo = theme?.[viewString]?.components?.cart?.components?.business?.components?.logo?.hidden
+  const hideBusinessTime = theme?.[viewString]?.components?.cart?.components?.business?.components?.time?.hidden
 
   const toggleAccordion = (e) => {
     const isActionsClick = businessStore.current?.contains(e?.target) || businessDelete.current?.contains(e?.target) || changeStore.current?.contains(e?.target)
@@ -146,14 +145,14 @@ export const BusinessItemAccordion = (props) => {
               onClick={(e) => toggleAccordion(e)}
             >
               <BusinessInfo>
-                {!showBusinessLogo && (
+                {!hideBusinessLogo && (
                   <WrapperBusinessLogo>
                     <BusinessLogo bgimage={business?.logo || theme.images?.dummies?.businessLogo} />
                   </WrapperBusinessLogo>
                 )}
                 <ContentInfo className='info' isStore={isStore}>
                   <h2>{business?.name}</h2>
-                  {!showBusinessTime && (
+                  {!hideBusinessTime && (
                     <TimeContainer>
                       {orderState?.options?.type === 1 ? (
                         <span>

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

@@ -32,10 +32,11 @@ import {
   NoResult,
   PriceFilterWrapper,
   PriceFilterListWrapper,
-  PreviouslyOrderedContainer
+  PreviouslyOrderedContainer,
+  SearchBarContainer
 } from './styles'
 import Skeleton from 'react-loading-skeleton'
-import { Check2, XLg as Close } from 'react-bootstrap-icons'
+import { Check2, XLg as Close, Funnel } from 'react-bootstrap-icons'
 import { SearchBar } from '../SearchBar'
 import { useLanguage, useOrder, useUtils, useSession, BusinessSearchList, useConfig } from 'ordering-components-external'
 import { BusinessController } from '../BusinessController'
@@ -79,6 +80,7 @@ export const BusinessListingSearchUI = (props) => {
   const [, t] = useLanguage()
   const theme = useTheme()
   const [curProduct, setCurProduct] = useState({ business: null, product: null })
+  const [openFilter, setOpenFilter] = useState(false)
   const [{ parsePrice, optimizeImage, parseDistance }] = useUtils()
   const [{ auth }] = useSession()
   const { width } = useWindowSize()
@@ -105,7 +107,6 @@ export const BusinessListingSearchUI = (props) => {
   const noResults = (!businessesSearchList.loading && !businessesSearchList.lengthError && businessesSearchList?.businesses?.length === 0)
   const currentCart = Object.values(orderState?.carts).find(cart => cart?.business?.slug === curProduct?.business?.slug) ?? {}
 
-
   const handleScroll = useCallback(() => {
     const innerHeightScrolltop = window.innerHeight + document.documentElement?.scrollTop + PIXELS_TO_SCROLL
     const badScrollPosition = innerHeightScrolltop < document.documentElement?.offsetHeight
@@ -144,114 +145,130 @@ export const BusinessListingSearchUI = (props) => {
     return () => window.removeEventListener('scroll', handleScroll)
   }, [handleScroll])
 
-  return (
-    <BusinessListingSearchContainer>
-      <BusinessesTitle>
-        {t('SEARCH', 'Search')}
-      </BusinessesTitle>
-      <SearchBar
-        lazyLoad
-        isCustomLayout
-        forceFocus
-        placeholder={`${t('SEARCH_BUSINESSES', 'Search Businesses')} / ${t('PLEASE_TYPE_AT_LEAST_3_CHARACTERS', 'Please type at least 3 characters')}`}
-        onSearch={(val) => handleChangeTermValue(val)}
-        search={termValue}
-      />
-      <FiltersContainer>
-        <Filters>
-          <SortContainer>
-            <FilterAccordion title={t('SORT', 'Sort')}>
-              {sortItems?.filter(item => !(orderState?.options?.type === 1 && item?.value === 'pickup_time') && !(orderState?.options?.type === 2 && item?.value === 'delivery_time'))?.map(item => (
-                <SortItem
-                  key={item?.value}
-                  onClick={() => handleChangeFilters('orderBy', item?.value)}
-                  active={filters?.orderBy?.includes(item?.value)}
+  const filtersComponent = () => {
+    return (
+      <Filters>
+        <SortContainer>
+          <FilterAccordion title={t('SORT', 'Sort')}>
+            {sortItems?.filter(item => !(orderState?.options?.type === 1 && item?.value === 'pickup_time') && !(orderState?.options?.type === 2 && item?.value === 'delivery_time'))?.map(item => (
+              <SortItem
+                key={item?.value}
+                onClick={() => handleChangeFilters('orderBy', item?.value)}
+                active={filters?.orderBy?.includes(item?.value)}
+              >
+                {item?.text}  {(filters?.orderBy?.includes(item?.value)) && <>{filters?.orderBy?.includes('-') ? <BisUpArrow /> : <BisDownArrow />}</>}
+              </SortItem>
+            ))}
+          </FilterAccordion>
+        </SortContainer>
+        <BrandContainer>
+          <FilterAccordion title={t('BRANDS', 'Brands')}>
+            <BrandListWrapper>
+              {brandList?.loading && (
+                <>
+                  {[...Array(5).keys()].map(index => (
+                    <BrandItem key={index}>
+                      <Skeleton width={120} height={15} />
+                      <Skeleton width={16} height={16} />
+                    </BrandItem>
+                  ))}
+                </>
+              )}
+              {!brandList?.loading && brandList?.brands.map((brand, i) => brand?.enabled && (
+                <BrandItem key={i} onClick={() => handleChangeBrandFilter(brand?.id)}>
+                  <span>{brand?.name}</span>
+                  {filters?.franchise_ids?.includes(brand?.id) && <Check2 />}
+                </BrandItem>
+              ))}
+              {!brandList?.loading && ((brandList?.brands?.filter(brand => brand?.enabled))?.length === 0) && (
+                <NoResult>{t('NO_RESULTS_FOUND', 'Sorry, no results found')}</NoResult>
+              )}
+            </BrandListWrapper>
+          </FilterAccordion>
+        </BrandContainer>
+        <PriceFilterWrapper>
+          <FilterAccordion title={t('PRICE_RANGE', 'Price range')}>
+            <PriceFilterListWrapper>
+              {priceList.map((price, i) => (
+                <Button
+                  key={i}
+                  color={(filters?.price_level === price?.level) ? 'primary' : 'lightGray'}
+                  onClick={() => handleChangePriceRange(price?.level)}
                 >
-                  {item?.text}  {(filters?.orderBy?.includes(item?.value)) && <>{filters?.orderBy?.includes('-') ? <BisUpArrow /> : <BisDownArrow />}</>}
-                </SortItem>
+                  {price.content}
+                  {(filters?.price_level === price?.level) && <Close />}
+                </Button>
               ))}
-            </FilterAccordion>
-          </SortContainer>
-          <BrandContainer>
-            <FilterAccordion title={t('BRANDS', 'Brands')}>
-              <BrandListWrapper>
-                {brandList?.loading && (
-                  <>
-                    {[...Array(5).keys()].map(index => (
-                      <BrandItem key={index}>
-                        <Skeleton width={120} height={15} />
-                        <Skeleton width={16} height={16} />
-                      </BrandItem>
-                    ))}
-                  </>
-                )}
-                {!brandList?.loading && brandList?.brands.map((brand, i) => brand?.enabled && (
-                  <BrandItem key={i} onClick={() => handleChangeBrandFilter(brand?.id)}>
-                    <span>{brand?.name}</span>
-                    {filters?.franchise_ids?.includes(brand?.id) && <Check2 />}
-                  </BrandItem>
-                ))}
-                {!brandList?.loading && ((brandList?.brands?.filter(brand => brand?.enabled))?.length === 0) && (
-                  <NoResult>{t('NO_RESULTS_FOUND', 'Sorry, no results found')}</NoResult>
-                )}
-              </BrandListWrapper>
-            </FilterAccordion>
-          </BrandContainer>
-          <PriceFilterWrapper>
-            <FilterAccordion title={t('PRICE_RANGE', 'Price range')}>
-              <PriceFilterListWrapper>
-                {priceList.map((price, i) => (
-                  <Button
-                    key={i}
-                    color={(filters?.price_level === price?.level) ? 'primary' : 'lightGray'}
-                    onClick={() => handleChangePriceRange(price?.level)}
-                  >
-                    {price.content}
-                    {(filters?.price_level === price?.level) && <Close />}
-                  </Button>
-                ))}
-              </PriceFilterListWrapper>
-            </FilterAccordion>
-          </PriceFilterWrapper>
-          {orderState?.options?.type === 1 && (
-            <MaxSectionItem
-              title={t('MAX_DELIVERY_FEE', 'Max delivery fee')}
-              options={maxDeliveryFeeOptions}
-              filter='max_delivery_price'
-              filters={filters}
-              handleChangeFilters={handleChangeFilters}
-            />
-          )}
-          {[1, 2].includes(orderState?.options?.type) && (
-            <MaxSectionItem
-              title={orderState?.options?.type === 1 ? t('MAX_DELIVERY_TIME', 'Max delivery time') : t('MAX_PICKUP_TIME', 'Max pickup time')}
-              options={maxTimeOptions}
-              filter='max_eta'
-              filters={filters}
-              handleChangeFilters={handleChangeFilters}
-            />
-          )}
+            </PriceFilterListWrapper>
+          </FilterAccordion>
+        </PriceFilterWrapper>
+        {orderState?.options?.type === 1 && (
           <MaxSectionItem
-            title={t('MAX_DISTANCE', 'Max distance')}
-            options={maxDistanceOptions}
-            filter='max_distance'
+            title={t('MAX_DELIVERY_FEE', 'Max delivery fee')}
+            options={maxDeliveryFeeOptions}
+            filter='max_delivery_price'
             filters={filters}
             handleChangeFilters={handleChangeFilters}
           />
-          <TagsContainer>
-            <FilterAccordion title={t('BUSINESS_CATEGORIES', 'Business categories')}>
-              <BusinessTypeFilter
-                isSearchMode
-                filters={filters}
-                handleChangeFilters={handleChangeFilters}
-              />
-            </FilterAccordion>
-          </TagsContainer>
-        </Filters>
+        )}
+        {[1, 2].includes(orderState?.options?.type) && (
+          <MaxSectionItem
+            title={orderState?.options?.type === 1 ? t('MAX_DELIVERY_TIME', 'Max delivery time') : t('MAX_PICKUP_TIME', 'Max pickup time')}
+            options={maxTimeOptions}
+            filter='max_eta'
+            filters={filters}
+            handleChangeFilters={handleChangeFilters}
+          />
+        )}
+        <MaxSectionItem
+          title={t('MAX_DISTANCE', 'Max distance')}
+          options={maxDistanceOptions}
+          filter='max_distance'
+          filters={filters}
+          handleChangeFilters={handleChangeFilters}
+        />
+        <TagsContainer>
+          <FilterAccordion title={t('BUSINESS_CATEGORIES', 'Business categories')}>
+            <BusinessTypeFilter
+              isSearchMode
+              filters={filters}
+              handleChangeFilters={handleChangeFilters}
+            />
+          </FilterAccordion>
+        </TagsContainer>
+      </Filters>
+    )
+  }
+
+  return (
+    <BusinessListingSearchContainer>
+      <BusinessesTitle>
+        {t('SEARCH', 'Search')}
+      </BusinessesTitle>
+      <SearchBarContainer>
+        <SearchBar
+          lazyLoad
+          isCustomLayout
+          forceFocus
+          placeholder={`${t('SEARCH_BUSINESSES', 'Search Businesses')} / ${t('PLEASE_TYPE_AT_LEAST_3_CHARACTERS', 'Please type at least 3 characters')}`}
+          onSearch={(val) => handleChangeTermValue(val)}
+          search={termValue}
+        />
+        {width <= 768 && (
+          <Funnel onClick={() => setOpenFilter(true)} />
+        )}
+      </SearchBarContainer>
+      <FiltersContainer>
+        {width > 768 && (
+          <>
+            {filtersComponent()}
+          </>
+        )}
         <FiltersResultContainer>
           {auth && termValue?.length === 0 && (
             <PreviouslyOrderedContainer>
               <MyOrders
+                isFromBusinessListingSearch
                 hideOrders
                 businessesSearchList={businessesSearchList}
                 onRedirectPage={onRedirectPage}
@@ -431,6 +448,15 @@ export const BusinessListingSearchUI = (props) => {
           />
         )}
       </Modal>
+      {width <= 768 && (
+        <Modal
+          open={openFilter}
+          onClose={() => setOpenFilter(false)}
+          title={t('FILTERS', 'Filters')}
+        >
+          {filtersComponent()}
+        </Modal>
+      )}
     </BusinessListingSearchContainer>
   )
 }

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

@@ -48,6 +48,7 @@ export const FiltersContainer = styled.div`
 export const Filters = styled.div`
   width: 100%;
   max-width: 100%;
+
   @media (min-width: 993px){
     width: 25%;
     max-width: 25%;
@@ -435,3 +436,17 @@ export const PriceFilterListWrapper = styled.div`
 export const PreviouslyOrderedContainer = styled.div`
 
 `
+export const SearchBarContainer = styled.div`
+  display: flex;
+  align-items: center;
+
+  svg {
+    font-size: 26px;
+    color: ${props => props.theme.colors.primary};
+    ${props => props.theme.rtl ? css`
+    margin-right: 10px;
+    ` : css`
+      margin-left: 10px;
+    `}
+  }
+`

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

@@ -105,7 +105,12 @@ const BusinessProductsCategoriesUI = (props) => {
     const navbar = document.getElementById('category-lists')
     const search = document.getElementById('WrapperSearchAbsolute')
     const wrapperCategories = document.getElementById('wrapper-categories')
-    const limit = window.pageYOffset >= wrapperCategories?.offsetTop && window.pageYOffset > 0
+    let limit
+    if (windowSize.width >= 993) {
+      limit = window.pageYOffset >= wrapperCategories?.offsetTop && window.pageYOffset > 0
+    } else {
+      limit = window.pageYOffset >= (wrapperCategories?.offsetTop - 56) && window.pageYOffset > 0
+    }
 
     if (limit) {
       const classAdded = navbar.classList.contains('sticky-prod-cat')
@@ -130,7 +135,7 @@ const BusinessProductsCategoriesUI = (props) => {
 
     let style0 = '.sticky-prod-cat {'
     style0 += 'position: fixed !important;'
-    style0 += 'top: 0px !important;'
+    style0 += `top: ${windowSize.width >= 993 ? '0px' : '56px'} !important;`
     style0 += 'left: 0px !important;'
     style0 += 'padding: 5px 5px 0px 5px !important;'
     style0 += `width: calc(100% - ${useKioskApp ? '50px' : windowSize.width >= 993 ? '155px' : '0px'})!important;`

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

@@ -5,7 +5,7 @@ export const CategoriesContainer = styled.div`
   overflow-x: auto;
   padding: 5px 0px 0px 0px;
   background: ${props => props.theme.colors.backgroundPage};
-  z-index: 1002;
+  z-index: 1000;
   position: absolute;
   top: 0;
   border-bottom: 1px solid #D9D9D9;

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

@@ -87,7 +87,7 @@ const BusinessProductsListUI = (props) => {
                 onClick={() => onClickSubcategory(null, category)}
                 color={allsubcategorySelected ? 'primary' : 'lightGray'}
               >
-                {t('ALL', 'All')} {allsubcategorySelected && <Close />}
+                {t('ALL', 'All')}
               </Button>
             </ContainerButton>
             {category?.subcategories?.map(subcategory => {

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

@@ -14,8 +14,8 @@ import {
   useUtils,
   useSession,
   useSite,
-  useOrderingTheme,
-  useConfig
+  useConfig,
+  useBusiness
 } from 'ordering-components-external'
 
 import {
@@ -90,14 +90,14 @@ const BusinessProductsListingUI = (props) => {
   const [{ configs }] = useConfig()
   const theme = useTheme()
   const [, t] = useLanguage()
-  const [{ carts }, { addProduct, updateProduct }] = useOrder()
+  const [{ carts, options }, { addProduct, updateProduct }] = useOrder()
   const [{ parsePrice }] = useUtils()
   const [events] = useEvent()
   const location = useLocation()
   const windowSize = useWindowSize()
   const [{ auth }] = useSession()
   const [{ site }] = useSite()
-  const [orderingTheme] = useOrderingTheme()
+  const [, { setBusiness }] = useBusiness()
   const [openProduct, setModalIsOpen] = useState(false)
   const [curProduct, setCurProduct] = useState(props.product)
   const [openUpselling, setOpenUpselling] = useState(false)
@@ -113,7 +113,9 @@ const BusinessProductsListingUI = (props) => {
   const checkoutMultiBusinessEnabled = configs?.checkout_multi_business_enabled?.value === '1'
   const currentCart = Object.values(carts).find(cart => cart?.business?.slug === business?.slug) ?? {}
   const isLazy = businessState?.business?.lazy_load_products_recommended
-  const showViewOrderButton = !orderingTheme?.theme?.business_view?.components?.order_view_button?.hidden
+  const showViewOrderButton = !theme?.business_view?.components?.order_view_button?.hidden
+  const cateringTypes = [7, 8]
+  const cateringPreorder = cateringTypes.includes(options?.type)
   const sortByOptions = [
     { value: null, content: t('SORT_BY', theme?.defaultLanguages?.SORT_BY || 'Sort By'), showOnSelected: t('SORT_BY', theme?.defaultLanguages?.SORT_BY || 'Sort By') },
     { value: 'rank', content: t('RANK', theme?.defaultLanguages?.RANK || 'Rank'), showOnSelected: t('RANK', theme?.defaultLanguages?.RANK || 'Rank') },
@@ -187,12 +189,23 @@ const BusinessProductsListingUI = (props) => {
   }
 
   const handleScroll = useCallback(() => {
+    const backArrowElement = document.getElementById('back-arrow')
+    if (backArrowElement) {
+      const limit = window.pageYOffset >= backArrowElement?.offsetTop && window.pageYOffset > 0
+      if (limit && windowSize.width < 993) {
+        const classAdded = backArrowElement.classList.contains('fixed-arrow')
+        !classAdded && backArrowElement.classList.add('fixed-arrow')
+      } else {
+        backArrowElement && backArrowElement.classList.remove('fixed-arrow')
+      }
+    }
+
     const innerHeightScrolltop = window.innerHeight + document.documentElement?.scrollTop + PIXELS_TO_SCROLL
     const badScrollPosition = innerHeightScrolltop < document.documentElement?.offsetHeight
     const hasMore = !(categoryState.pagination.totalPages === categoryState.pagination.currentPage)
     if (badScrollPosition || categoryState.loading || !hasMore) return
     getNextProducts({ isNextPage: true })
-  }, [categoryState])
+  }, [categoryState, windowSize.width])
 
   const handleChangePage = (data) => {
     if (Object.entries(data.query).length === 0 && openProduct) {
@@ -300,14 +313,25 @@ const BusinessProductsListingUI = (props) => {
     }
   }, [currentCart])
 
+  useEffect(() => {
+    if (cateringPreorder) {
+      setBusiness(business)
+    }
+    return () => {
+      setBusiness({})
+    }
+  }, [cateringPreorder, business])
+
   return (
     <>
       <ProductsContainer>
         {!props.useKioskApp && (
           <HeaderContent>
-            {!location.pathname.includes('/marketplace') &&
-              <ArrowLeft className='back-arrow' onClick={() => handleGoToBusinessList()} />
-            }
+            {!location.pathname.includes('/marketplace') && (
+              <div id='back-arrow'>
+                <ArrowLeft className='back-arrow' onClick={() => handleGoToBusinessList()} />
+              </div>
+            )}
             {windowSize?.width < 576 && (
               <OrderContextUIWrapper>
                 <OrderContextUI isCheckOut />
@@ -432,6 +456,7 @@ const BusinessProductsListingUI = (props) => {
                 isProducts={currentCart.products.length}
                 isCartOnProductsList={isCartOnProductsList}
                 handleCartOpen={(val) => setIsCartOpen(val)}
+                businessConfigs={business?.configs}
               />
             </>
           ) : (

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

@@ -3,6 +3,16 @@ import styled, { css } from 'styled-components'
 export const ProductsContainer = styled.div`
   width: 95%;
   margin: 20px auto 0px;
+  > svg {
+    color: ${props => props.theme.colors.headingColor};
+    font-size: 24px;
+    cursor: pointer;
+    margin-bottom: 5px;
+  }
+  > div {
+    background-color: ${({ theme }) => theme?.business_view?.components?.style?.backgroundColor};
+  }
+
 `
 
 export const ProductLoading = styled.div`
@@ -138,6 +148,22 @@ export const HeaderContent = styled.div`
     font-size: 24px;
     cursor: pointer;
   }
+  .fixed-arrow {
+    position: fixed;
+    top: 0;
+    left: 0;
+    z-index: 1001;
+    width: 100vw;
+    background-color: ${props => props.theme.colors.backgroundPage};
+    height: 56px;
+    display: flex;
+    align-items: center;
+    ${props => props.theme?.rtl ? css`
+      padding-right: 10px;
+    ` : css`
+      padding-left: 10px;
+    `}
+  }
 `
 export const OrderContextUIWrapper = styled.div`
   flex: 1;

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

@@ -87,7 +87,8 @@ const BusinessesListingUI = (props) => {
   const [hasHighRatedBusiness, setHasHighRatedBusiness] = useState(true)
   const userCustomer = JSON.parse(window.localStorage.getItem('user-customer'))
   const [favoriteIds, setFavoriteIds] = useState([])
-  const hideCities = (theme?.business_listing_view?.components?.cities?.hidden || orderState?.options?.type !== 2) ?? true
+  const allCitiesDisabled = citiesState?.cities?.every(city => !city.enabled)
+  const hideCities = (theme?.business_listing_view?.components?.cities?.hidden || orderState?.options?.type !== 2 || allCitiesDisabled) ?? true
   const hideSearch = theme?.business_listing_view?.components?.search?.hidden
   const hideFilter = theme?.business_listing_view?.components?.filter?.hidden || hideSearch
   const hideHero = theme?.business_listing_view?.components?.business_hero?.hidden
@@ -186,6 +187,12 @@ const BusinessesListingUI = (props) => {
     setFavoriteIds([...new Set(ids)])
   }, [businessesList?.businesses?.length])
 
+  useEffect(() => {
+    if (!citiesState?.cities?.length || !orderState?.options?.city_id) return
+    const selectedCity = citiesState?.cities?.find(city => city?.id === orderState?.options?.city_id)
+    if (!selectedCity || !selectedCity?.enabled) changeCityFilter(null)
+  }, [citiesState, orderState?.options?.city_id])
+
   if (logosLayout) {
     return (
       <BusinessLogosWrapper>
@@ -218,7 +225,7 @@ const BusinessesListingUI = (props) => {
       {(windowSize.width < 576 || (configs?.business_listing_hide_image?.value !== '1' && !isChew)) && (
         <BusinessBanner>
           {windowSize.width < 576 && (
-            <OrderContextUI isBusinessList hideHero={!hideHero} />
+            <OrderContextUI isBusinessList hideHero={(!!configs?.business_listing_hide_image?.value && !hideHero)} />
           )}
           {(configs?.business_listing_hide_image?.value !== '1' && !isChew) && !hideHero && (
             <BusinessHeroImg

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

@@ -135,9 +135,8 @@ const CartUI = (props) => {
     }
   }
 
-  const loyaltyRewardValue = ((
-    Math.trunc(((cart?.subtotal + getIncludedTaxes()) * loyaltyRewardRate) * 100) / 100
-  ).toFixed(configs.format_number_decimal_length?.value ?? 2), 10)
+  const clearAmount = (value) => parseFloat((Math.trunc(value * 100) / 100).toFixed(configs.format_number_decimal_length?.value ?? 2))
+  const loyaltyRewardValue = clearAmount((cart?.subtotal + getIncludedTaxes()) * loyaltyRewardRate)
 
   const momentFormatted = !orderState?.option?.moment
     ? t('RIGHT_NOW', 'Right Now')
@@ -511,7 +510,7 @@ const CartUI = (props) => {
                       <td>{t('TOTAL', 'Total')}</td>
                       <td>{parsePrice(cart?.total >= 0 ? cart?.total : 0)}</td>
                     </tr>
-                    {!!loyaltyRewardValue && isFinite(loyaltyRewardValue) && !isMultiCheckout && (
+                    {!!loyaltyRewardValue && isFinite(loyaltyRewardValue) && isCheckout && (
                       <tr>
                         <td>&nbsp;</td>
                         <td id='loyalty'>{t('REWARD_LOYALTY_POINT', 'Reward :amount: on loyalty points').replace(':amount:', loyaltyRewardValue)}</td>

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

@@ -47,7 +47,9 @@ import {
   MobileWrapperPlaceOrderButton,
   OrderContextUIWrapper,
   HeaderContent,
-  AuthButtonList
+  AuthButtonList,
+  Flag,
+  SectionTitleContainer
 } from './styles'
 
 import { Button } from '../../styles/Buttons'
@@ -141,6 +143,8 @@ const CheckoutUI = (props) => {
   const isGiftCardCart = !cart?.business_id
   // 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 isDisablePlaceOrderButton = !cart?.valid ||
     (!paymethodSelected && cart?.balance > 0) ||
     (paymethodSelected?.gateway === 'stripe' && cardList?.cards?.length === 0) ||
@@ -154,7 +158,8 @@ const CheckoutUI = (props) => {
     (options.type === 1 &&
       validationFields?.fields?.checkout?.driver_tip?.enabled &&
       validationFields?.fields?.checkout?.driver_tip?.required &&
-      (Number(cart?.driver_tip) <= 0))
+      (Number(cart?.driver_tip) <= 0)) ||
+    (validateCommentsCartField)
 
   const driverTipsOptions = typeof configs?.driver_tip_options?.value === 'string'
     ? JSON.parse(configs?.driver_tip_options?.value) || []
@@ -168,7 +173,7 @@ 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 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
 
@@ -474,7 +479,10 @@ const CheckoutUI = (props) => {
 
           {!cartState.loading && cart && (
             <PaymentMethodContainer className='paymentsContainer'>
-              <h1>{t('PAYMENT_METHODS', 'Payment Methods')}</h1>
+              <SectionTitleContainer>
+                <h1>{t('PAYMENT_METHODS', 'Payment Methods')}</h1>
+                <Flag>{t('REQUIRED', 'Required')}</Flag>
+              </SectionTitleContainer>
               {!cartState.loading && cart?.status === 4 && (
                 <WarningMessage style={{ marginTop: 20 }}>
                   <VscWarning />
@@ -644,6 +652,12 @@ const CheckoutUI = (props) => {
             </WarningText>
           )}
 
+        {validateCommentsCartField && (
+          <WarningText>
+            {t('WARNING_INVALID_CART_COMMENTS', 'Cart comments is required.')}
+          </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.')}