ordering-ui-external 10.1.0 → 10.2.1

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

@@ -153,53 +153,75 @@ export const TimeListWrapper = styled.div`
 export const TimeItem = styled.div`
   cursor: pointer;
   display: flex;
-  justify-content: center;
-  align-items: center;
-  ${({ 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;
-  width: calc(50% - 24px);
-  min-width: calc(50% - 24px);
-  box-sizing: border-box;
-  user-select: none;
-
+  span {
+    font-size: 14px;
+    white-space: nowrap;
+  }
   ${({ active }) => active && css`
     background: #F5F9FF;
     color: ${props => props.theme.colors.primary};
   `}
-
-  ${({ 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;
-  }
-
-  @media (min-width: 400px) {
-    width: calc(33.33% - 24px);
-    min-width: calc(33.33% - 24px);
-  }
-
-  @media (min-width: 576px) {
-    width: calc(25% - 24px);
-    min-width: calc(25% - 24px);
-  }
-
-  @media (min-width: 769px) {
-    width: calc(16.66% - 24px);
-    min-width: calc(16.66% - 24px);
+${({ cateringPreorder }) => cateringPreorder ? css`
+    background: ${(props) => props.theme?.colors?.backgroundPage};
+    width: 100%;
+    min-width: 100%;
+    height: 50px;
+    
+    span {
+      font-size: 18px;
+      display: flex;
+      align-items: center;
+      margin: 10px 0;
+      margin-left: 15px;
+      p{
+        position: relative;
+        bottom: 2px;
+      }
+    }
+    ${({ active }) => active && css`
+      background: #F5F9FF;
+      color: ${props => props.theme.colors.primary};
+      span {
+        p{
+          bottom: 0;
+          margin-left: 2px;
+        }
+      }
+    `}
+  ` : css`
+    justify-content: center;
+    align-items: center;
+    background: #E9ECEF;
+    border-radius: 7.6px;
+    padding: 5px 15px;
+    margin: 12px;
+    width: calc(50% - 24px);
+    min-width: calc(50% - 24px);
+    box-sizing: border-box;
+    user-select: none;
+      
+      @media (min-width: 400px) {
+        width: calc(33.33% - 24px);
+        min-width: calc(33.33% - 24px);
+      }
+      
+      @media (min-width: 576px) {
+      width: calc(25% - 24px);
+      min-width: calc(25% - 24px);
+      }
+      
+      @media (min-width: 769px) {
+        width: calc(33.33% - 24px);
+        min-width: calc(33.33% - 24px);
+        ${({ isAppoint }) => isAppoint && css`
+          width: calc(33.33% - 24px);
+          min-width: calc(33.33% - 24px);
+          span {
+            font-size: 12px;
+          }
+        `}
+      }
+    `
   }
 `
 
@@ -320,3 +342,31 @@ export const ClosedBusinessMsg = styled.div`
   font-size: 16px;
   width: 100%;
 `
+
+export const CheckIcon = styled.div`
+  margin-right: 20px;
+  svg {
+    width: 24px;
+    height: 24px;
+  }
+`
+
+export const CheckedIcon = styled.div`
+  border-radius: 50%;
+  width: 20px;
+  min-width: 20px;
+  height: 20px;
+  box-sizing: border-box;
+  border: 6px solid ${props => props.theme.colors?.primary};
+  margin: 2px 12px 2px 2px;
+  ${props => props.theme.rtl && css`
+    margin: 2px 2px 2px 12px;
+  `}
+  ${({ cateringPreorder }) => cateringPreorder && css`
+    width: 21px;
+    min-width: 21px;
+    height: 21px;
+    margin: 0;
+    margin-left: 1px;
+  `}
+`

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

@@ -1,6 +1,6 @@
 import React, { useEffect, useState } from 'react'
 import Skeleton from 'react-loading-skeleton'
-import { BusinessProductsCategories as ProductsCategories, useOrderingTheme } from 'ordering-components-external'
+import { BusinessProductsCategories as ProductsCategories } from 'ordering-components-external'
 import { AutoScroll } from '../../../../../components/AutoScroll'
 import { useTheme } from 'styled-components'
 
@@ -23,11 +23,10 @@ const BusinessProductsCategoriesUI = (props) => {
 
   const theme = useTheme()
   const windowSize = useWindowSize()
-  const [orderingTheme] = useOrderingTheme()
   const [selectedCategory, setSelectedCateogry] = useState({ id: null })
   const scrollTopSpan = 60
 
-  const isChew = orderingTheme?.theme?.header?.components?.layout?.type?.toLowerCase() === 'chew'
+  const isChew = theme?.header?.components?.layout?.type?.toLowerCase() === 'chew'
 
   const handleChangeCategory = (category) => {
     const isBlockScroll = window.location.search.includes('category') &&

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

@@ -147,8 +147,7 @@ const BusinessProductsListUI = (props) => {
                   handleUpdateProducts={handleUpdateProducts}
                   productAddedToCartLength={currentCart?.products?.reduce((productsLength, Cproduct) => { return productsLength + (Cproduct?.id === product?.id ? Cproduct?.quantity : 0) }, 0)}
                 />
-              ))
-              }
+              ))}
             </ProductsListing>
             {isSearchMode && category?.subcategories?.length > 0 && category?.subcategories?.filter(subcategory => productsCategorySelected?.some(product => product?.category_id === subcategory?.id))?.map(subcategory => (
               <SubcategorySearchContainer key={subcategory?.id}>

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

@@ -130,6 +130,13 @@ const BusinessProductsListingUI = (props) => {
     { value: 'a-z', content: t('A_to_Z', theme?.defaultLanguages?.A_to_Z || 'A-Z'), showOnSelected: t('A_to_Z', theme?.defaultLanguages?.A_to_Z || 'A-Z') }
   ]
 
+  const subtotalWithTaxes = currentCart?.taxes?.reduce((acc, item) => {
+    if (item?.type === 1) {
+      return acc = acc + item?.summary?.tax
+    }
+    return acc = acc
+  }, currentCart?.subtotal)
+
   const handler = () => {
     setOpenBusinessInformation(true)
   }
@@ -443,14 +450,14 @@ const BusinessProductsListingUI = (props) => {
           btnText={
             !currentCart?.valid_maximum ? (
               `${t('MAXIMUM_SUBTOTAL_ORDER', theme?.defaultLanguages?.MAXIMUM_SUBTOTAL_ORDER || 'Maximum subtotal order')}: ${parsePrice(currentCart?.maximum)}`
-            ) : (!currentCart?.valid_minimum && !(currentCart?.discount_type === 1 && currentCart?.discount_rate === 100)) ? (
+            ) : (subtotalWithTaxes < currentCart?.minimum) ? (
               `${t('MINIMUN_SUBTOTAL_ORDER', theme?.defaultLanguages?.MINIMUN_SUBTOTAL_ORDER || 'Minimum subtotal order:')} ${parsePrice(currentCart?.minimum)}`
             ) : !openUpselling !== canOpenUpselling ? t('VIEW_ORDER', theme?.defaultLanguages?.VIEW_ORDER || 'View Order') : t('LOADING', theme?.defaultLanguages?.LOADING || 'Loading')
           }
-          isSecondaryBtn={!currentCart?.valid_maximum || (!currentCart?.valid_minimum && !(currentCart?.discount_type === 1 && currentCart?.discount_rate === 100))}
+          isSecondaryBtn={!currentCart?.valid_maximum || subtotalWithTaxes < currentCart?.minimum}
           btnValue={currentCart?.products?.length}
           handleClick={() => setOpenUpselling(true)}
-          disabled={openUpselling || !currentCart?.valid_maximum || (!currentCart?.valid_minimum && !(currentCart?.discount_type === 1 && currentCart?.discount_rate === 100))}
+          disabled={openUpselling || !currentCart?.valid_maximum || subtotalWithTaxes < currentCart?.minimum}
         />
       )}
       {(windowSize.width < 1000 || windowSize.height < 600) && currentCart?.products?.length > 0 && (

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

@@ -10,7 +10,7 @@ export const ProductsContainer = styled.div`
     margin-bottom: 5px;
   }
   > div {
-    background-color: ${({ theme }) => theme?.business_view?.components?.style?.backgroundColor};
+    background-color: ${(props) => props.theme?.colors?.backgroundPage};
   }
 
 `

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

@@ -13,11 +13,21 @@ export const OrdersSection = (props) => {
   } = props
   const [orderState] = useOrder()
   const [, t] = useLanguage()
+
+  const propsToFetchBusiness = ['name', 'logo', 'slug', 'id']
+  const propsToFetch = ['cart', 'business', 'status', 'id', 'uuid', 'cart_group_id', 'business_id', 'delivery_datetime', 'delivery_datetime_utc', 'total', 'summary']
+
+  const handleRedirectToCheckout = (uuid) => {
+    onRedirectPage && onRedirectPage({ page: 'checkout', params: { cartUuid: uuid } })
+  }
+
   return (
     <>
       {onRedirectPage && (
         <>
           <OrdersOption
+            propsToFetch={propsToFetch}
+            propsToFetchBusiness={propsToFetchBusiness}
             horizontal
             isBusinessesPage
             onRedirectPage={onRedirectPage}
@@ -30,8 +40,11 @@ export const OrdersSection = (props) => {
             isBusinessesLoading={businessesList.loading}
             isCustomerMode={isCustomerMode}
             franchiseId={props.franchiseId}
+            handleRedirectToCheckout={handleRedirectToCheckout}
           />
           <OrdersOption
+            propsToFetch={propsToFetch}
+            propsToFetchBusiness={propsToFetchBusiness}
             activeOrders
             horizontal
             asDashboard
@@ -44,8 +57,11 @@ export const OrdersSection = (props) => {
             isBusinessesLoading={businessesList.loading}
             isCustomerMode={isCustomerMode}
             franchiseId={props.franchiseId}
+            handleRedirectToCheckout={handleRedirectToCheckout}
           />
           <OrdersOption
+            propsToFetch={propsToFetch}
+            propsToFetchBusiness={propsToFetchBusiness}
             pastOrders
             horizontal
             asDashboard
@@ -58,6 +74,7 @@ export const OrdersSection = (props) => {
             isBusinessesLoading={businessesList.loading}
             isCustomerMode={isCustomerMode}
             franchiseId={props.franchiseId}
+            handleRedirectToCheckout={handleRedirectToCheckout}
           />
         </>
       )}

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

@@ -7,8 +7,7 @@ import {
   useSession,
   useLanguage,
   useConfig,
-  BusinessList as BusinessListController,
-  useOrderingTheme
+  BusinessList as BusinessListController
 } from 'ordering-components-external'
 
 import {
@@ -79,7 +78,6 @@ const BusinessesListingUI = (props) => {
   const [{ auth }] = useSession()
   const [{ configs }] = useConfig()
   const windowSize = useWindowSize()
-  const [orderingTheme] = useOrderingTheme()
   const theme = useTheme()
   const [modals, setModals] = useState({ listOpen: false, formOpen: false, citiesOpen: false })
   const [alertState, setAlertState] = useState({ open: false, content: [] })
@@ -101,7 +99,7 @@ const BusinessesListingUI = (props) => {
   const isAllCategoriesHidden = theme?.business_listing_view?.components?.categories?.hidden
   const businessesIds = businessesList.businesses &&
     businessesList.businesses?.map(business => business.id)
-  const isChew = orderingTheme?.theme?.header?.components?.layout?.type?.toLowerCase() === 'chew'
+  const isChew = theme?.header?.components?.layout?.type?.toLowerCase() === 'chew'
   const cateringTypeString = orderState?.options?.type === 7
     ? 'catering_delivery'
     : orderState?.options?.type === 8
@@ -226,9 +224,10 @@ const BusinessesListingUI = (props) => {
 
   return (
     <BusinessContainer>
-      {!isCustomerMode && ( // Keep this banner at the top
-        <PageBanner position='web_business_listing' />
-      )}
+      <PageBanner
+        position='web_business_listing'
+        isCustomerMode={isCustomerMode}
+      />
 
       {(windowSize.width < 576 || (configs?.business_listing_hide_image?.value !== '1' && !isChew)) && (
         <BusinessBanner>

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

@@ -136,6 +136,13 @@ const CartUI = (props) => {
     }
   }
 
+  const subtotalWithTaxes = cart?.taxes?.reduce((acc, item) => {
+    if (item?.type === 1) {
+      return acc = acc + item?.summary?.tax
+    }
+    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)
 
@@ -610,19 +617,19 @@ const CartUI = (props) => {
                 />
               </div>
             )}
-            {(onClickCheckout || isForceOpenCart) && !isCheckout && cart?.valid_products && (!isMultiCheckout || isStore) && (
+            {(onClickCheckout || isForceOpenCart) && !isCheckout && cart?.valid && (!isMultiCheckout || isStore) && (
               <CheckoutAction>
                 <p>{cart?.total >= 1 && parsePrice(cart?.total)}</p>
                 <Button
-                  color={(!cart?.valid_maximum || (!cart?.valid_minimum && !(cart?.discount_type === 1 && cart?.discount_rate === 100)) || !cart?.valid_address) ? 'secundary' : 'primary'}
+                  color={(!cart?.valid_maximum || subtotalWithTaxes < cart?.minimum || !cart?.valid_address) ? 'secundary' : 'primary'}
                   onClick={() => checkOutBtnClick(cart?.uuid)}
-                  disabled={(openUpselling && !canOpenUpselling) || !cart?.valid_maximum || (!cart?.valid_minimum && !(cart?.discount_type === 1 && cart?.discount_rate === 100)) || !cart?.valid_address}
+                  disabled={(openUpselling && !canOpenUpselling) || !cart?.valid_maximum || subtotalWithTaxes < cart?.minimum || !cart?.valid_address}
                 >
                   {!cart?.valid_address ? (
                     t('OUT_OF_COVERAGE', 'Out of Coverage')
                   ) : !cart?.valid_maximum ? (
                     `${t('MAXIMUM_SUBTOTAL_ORDER', 'Maximum subtotal order')}: ${parsePrice(cart?.maximum)}`
-                  ) : (!cart?.valid_minimum && !(cart?.discount_type === 1 && cart?.discount_rate === 100)) ? (
+                  ) : subtotalWithTaxes < cart?.minimum ? (
                     `${t('MINIMUN_SUBTOTAL_ORDER', 'Minimum subtotal order:')} ${parsePrice(cart?.minimum)}`
                   ) : !openUpselling ^ canOpenUpselling ? t('CHECKOUT', 'Checkout') : t('LOADING', 'Loading')}
                 </Button>

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

@@ -9,7 +9,7 @@ import {
   Title
 } from './styles'
 
-import { useOrder, useEvent, useLanguage, useOrderingTheme } from 'ordering-components-external'
+import { useOrder, useEvent, useLanguage } from 'ordering-components-external'
 import { useTheme } from 'styled-components'
 import { CartContent } from '../CartContent'
 import { Modal } from '../Modal'
@@ -22,11 +22,10 @@ export const CartPopover = (props) => {
   const theme = useTheme()
   const [events] = useEvent()
   const [, t] = useLanguage()
-  const [orderingTheme] = useOrderingTheme()
   const referenceElement = useRef()
   const popperElement = useRef()
   const arrowElement = useRef()
-  const isChew = orderingTheme?.theme?.header?.components?.layout?.type?.toLowerCase() === 'chew'
+  const isChew = theme?.header?.components?.layout?.type?.toLowerCase() === 'chew'
   const popper = usePopper(referenceElement.current, popperElement.current, {
     placement: theme?.rtl ? 'bottom' : 'bottom-end',
     modifiers: [

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

@@ -26,7 +26,7 @@ export const HeaderItem = styled.div`
 `
 
 export const PopoverBody = styled.div`
-  background-color: #FFF;
+  background-color: ${(props) => props.theme?.colors?.backgroundPage};
   color: #333;
   padding: 15px;
   border-radius: 10px;

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

@@ -13,7 +13,6 @@ import {
   useValidationFields,
   useConfig,
   useCustomer,
-  useOrderingTheme,
   useEvent
 } from 'ordering-components-external'
 import { useWindowSize } from '../../../../../hooks/useWindowSize'
@@ -105,11 +104,10 @@ const CheckoutUI = (props) => {
 
   const theme = useTheme()
   const [validationFields] = useValidationFields()
-  const [orderingTheme] = useOrderingTheme()
   const [{ options, loading }] = useOrder()
   const [, t] = useLanguage()
   const [{ parsePrice }] = useUtils()
-  const [{ user }, { login }] = useSession()
+  const [{ user, loading: userLoading }, { login }] = useSession()
   const [{ configs }] = useConfig()
   const [customerState] = useCustomer()
   const [events] = useEvent()
@@ -137,7 +135,7 @@ const CheckoutUI = (props) => {
   const isWalletCreditPointsEnabled = businessConfigs.find(config => config.key === 'wallet_credit_point_enabled')?.value === '1'
   const isWalletEnabled = configs?.cash_wallet?.value && configs?.wallet_enabled?.value === '1' &&
     (isWalletCashEnabled || isWalletCreditPointsEnabled) && !useKioskApp && !isCustomerMode
-  const isMultiDriverTips = orderingTheme?.theme?.header?.components?.layout?.type?.toLowerCase() === 'chew'
+  const isMultiDriverTips = theme?.header?.components?.layout?.type?.toLowerCase() === 'chew'
 
   const placeSpotTypes = [3, 4, 5]
   const placeSpotsEnabled = placeSpotTypes.includes(options?.type) && !useKioskApp
@@ -170,7 +168,7 @@ const CheckoutUI = (props) => {
     ? JSON.parse(configs?.driver_tip_options?.value) || []
     : configs?.driver_tip_options?.value || []
 
-  const deliveryOptions = instructionsOptions?.result && instructionsOptions?.result?.filter(option => option?.enabled)?.map(option => {
+  const deliveryOptions = instructionsOptions?.result && Array.isArray(instructionsOptions?.result) && instructionsOptions?.result?.filter(option => option?.enabled)?.map(option => {
     return {
       value: option?.id, content: t(option?.name.toUpperCase().replace(/\s/g, '_'), option?.name), showOnSelected: t(option?.name.toUpperCase().replace(/\s/g, '_'), option?.name)
     }
@@ -186,6 +184,7 @@ const CheckoutUI = (props) => {
   const creditPointPlanOnBusiness = creditPointPlan?.businesses?.find(b => b.business_id === cart?.business_id && b.accumulates)
 
   const handlePlaceOrder = () => {
+    if (placing) return
     if (stripePaymethods.includes(paymethodSelected?.gateway) && user?.guest_id) {
       setOpenModal({ ...openModal, signup: true, isGuest: true })
       return
@@ -290,7 +289,7 @@ const CheckoutUI = (props) => {
   }
 
   useEffect(() => {
-    if (validationFields && validationFields?.fields?.checkout) {
+    if (validationFields && validationFields?.fields?.checkout && !customerState.loading && !userLoading) {
       checkValidationFields()
     }
   }, [validationFields, user, customerState])

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

@@ -24,7 +24,7 @@ export const PopupWrap = styled.div`
 `
 
 export const PopupDialog = styled.div`
-  background-color: #FFF;
+  background-color: ${(props) => props.theme?.colors?.backgroundPage};
   padding: 20px;
   width: 70%;
   border-radius: 10px;

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

@@ -14,6 +14,7 @@ export const DatePickerUI = props => {
         date={value}
         name={name}
         onChange={onChange}
+        maxDate={new Date()}
       />
     </DateContainer>
   )

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

@@ -1,5 +1,5 @@
 import React, { useState } from 'react'
-import { useLanguage, useOrder, useOrderingTheme } from 'ordering-components-external'
+import { useLanguage, useOrder } from 'ordering-components-external'
 import { FavoriteList } from '../FavoriteList'
 import { Tabs } from '../../styles/Tabs'
 import {
@@ -9,12 +9,13 @@ import {
   Tab,
   ContentWrapper
 } from './styles'
+import { useTheme } from 'styled-components'
 
 export const Favorite = (props) => {
   const [, t] = useLanguage()
-  const [orderingTheme] = useOrderingTheme()
   const [orderState] = useOrder()
-  const layout = orderingTheme?.theme?.favorite?.components?.layout?.type || 'original'
+  const theme = useTheme()
+  const layout = theme?.favorite?.components?.layout?.type || 'original'
 
   const [tabSelected, setTabSelected] = useState('businesses')
 

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

@@ -1,12 +1,13 @@
 import React, { useState, useEffect } from 'react'
-import { useApi, useConfig, useLanguage, useOrderingTheme } from 'ordering-components-external'
+import { useApi, useConfig, useLanguage } from 'ordering-components-external'
 
 import { Container, PoweredByOrdering } from './styles'
+import { useTheme } from 'styled-components'
 
 export const Footer = ({ isFooterPage }) => {
   const [footerState, setfooterState] = useState({ body: null, loading: false, error: null })
   const [ordering] = useApi()
-  const [{ theme }] = useOrderingTheme()
+  const theme = useTheme()
   const requestsState = {}
   const [{ configs }] = useConfig()
   const [, t] = useLanguage()

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

@@ -1,6 +1,6 @@
 import React, { useState, useEffect, useRef } from 'react'
 import { useLocation } from 'react-router-dom'
-import { useSession, useLanguage, useOrder, useEvent, useConfig, useCustomer, useUtils, useOrderingTheme, useBusiness } from 'ordering-components-external'
+import { useSession, useLanguage, useOrder, useEvent, useConfig, useCustomer, useUtils, useBusiness } from 'ordering-components-external'
 import { useTheme } from 'styled-components'
 import AiOutlineClose from '@meronex/icons/ai/AiOutlineClose'
 import { LanguageSelector } from '../../../../../components/LanguageSelector'
@@ -75,7 +75,6 @@ export const Header = (props) => {
   const theme = useTheme()
   const [configState] = useConfig()
   const [customerState, { deleteUserCustomer }] = useCustomer()
-  const [orderingTheme] = useOrderingTheme()
   const [{ business }] = useBusiness()
 
   const clearCustomer = useRef(null)
@@ -105,7 +104,7 @@ export const Header = (props) => {
   const orderTypeList = [t('DELIVERY', 'Delivery'), t('PICKUP', 'Pickup'), t('EAT_IN', 'Eat in'), t('CURBSIDE', 'Curbside'), t('DRIVE_THRU', 'Drive thru'), '', t('CATERING_DELIVERY', 'Catering Delivery'), t('CATERING_PICKUP', 'Catering pickup')]
   const configTypes = configState?.configs?.order_types_allowed?.value.split('|').map(value => Number(value)) || []
   const isPreOrderSetting = configState?.configs?.preorder_status_enabled?.value === '1'
-  const isChew = orderingTheme?.theme?.header?.components?.layout?.type?.toLowerCase() === 'chew'
+  const isChew = theme?.header?.components?.layout?.type?.toLowerCase() === 'chew'
   const isHideLanguages = theme?.header?.components?.language_selector?.hidden
   const cateringTypeString = orderState?.options?.type === 7
     ? 'catering_delivery'
@@ -241,8 +240,8 @@ export const Header = (props) => {
               onClick={() => handleGoToPage({ page: orderState?.options?.address?.location && !isCustomerMode ? 'search' : 'home' })}
               isChew={isChew}
             >
-              <img alt='Logotype' width='170px' height={isChew ? '35px' : '45px'} src={isChew ? theme?.images?.logos?.chewLogo : orderingTheme?.theme?.my_products?.components?.images?.components?.logo?.components?.image || theme?.images?.logos?.logotype} loading='lazy' />
-              <img alt='Isotype' width={isChew ? '70px' : '35px'} height={isChew ? '20px' : '45px'} src={isChew ? theme?.images?.logos?.chewLogo : (windowSize.width <= 768 ? theme?.images?.logos?.isotypeInvert : orderingTheme?.theme?.my_products?.components?.images?.components?.logo?.components?.image || theme?.images?.logos?.isotype)} loading='lazy' />
+              <img alt='Logotype' width='170px' height={isChew ? '35px' : '45px'} src={isChew ? theme?.images?.logos?.chewLogo : theme?.my_products?.components?.images?.components?.logo?.components?.image || theme?.images?.logos?.logotype} loading='lazy' />
+              <img alt='Isotype' width={isChew ? '70px' : '35px'} height={isChew ? '20px' : '45px'} src={isChew ? theme?.images?.logos?.chewLogo : (windowSize.width <= 768 ? theme?.images?.logos?.isotypeInvert : theme?.my_products?.components?.images?.components?.logo?.components?.image || theme?.images?.logos?.isotype)} loading='lazy' />
             </LogoHeader>
           </LeftHeader>
           {isShowOrderOptions && windowSize.width >= 576 && (

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

@@ -1,5 +1,5 @@
 import React from 'react'
-import { useUtils, useLanguage, useConfig, useOrder, useOrderingTheme } from 'ordering-components-external'
+import { useUtils, useLanguage, useConfig, useOrder } from 'ordering-components-external'
 import AiOutlineShoppingCart from '@meronex/icons/ai/AiOutlineShoppingCart'
 import FaMapMarkerAlt from '@meronex/icons/fa/FaMapMarkerAlt'
 
@@ -7,6 +7,7 @@ import {
   Container,
   DeliveryType
 } from './styles'
+import { useTheme } from 'styled-components'
 
 export const HeaderOption = (props) => {
   const {
@@ -19,10 +20,10 @@ export const HeaderOption = (props) => {
 
   const [{ configs }] = useConfig()
   const [{ parseDate }] = useUtils()
-  const [orderingTheme] = useOrderingTheme()
   const [, t] = useLanguage()
   const [orderStatus] = useOrder()
-  const isChew = orderingTheme?.theme?.header?.components?.layout?.type?.toLowerCase() === 'chew'
+  const theme = useTheme()
+  const isChew = theme?.header?.components?.layout?.type?.toLowerCase() === 'chew'
 
   return (
     <>

package/src/themes/five/src/components/HomeHero/layouts/OriginalHomeHero/index.js

@@ -1,6 +1,6 @@
 import React, { useState, useEffect } from 'react'
 import { useTheme } from 'styled-components'
-import { useSession, useOrder, useLanguage, useOrderingTheme, useConfig } from 'ordering-components-external'
+import { useSession, useOrder, useLanguage, useConfig } from 'ordering-components-external'
 import HiOutlineLocationMarker from '@meronex/icons/hi/HiOutlineLocationMarker'
 import {
   HeroContainer,
@@ -35,17 +35,16 @@ export const OriginalHomeHero = (props) => {
   const theme = useTheme()
   const userCustomer = parseInt(window.localStorage.getItem('user-customer'))
   const windowSize = useWindowSize()
-  const [orderingTheme] = useOrderingTheme()
   const [authModalOpen, setAuthModalOpen] = useState(false)
   const [modalPageToShow, setModalPageToShow] = useState(null)
   const [newAddressModalOpened, setNewAddressModalOpened] = useState(false)
 
-  const isShowLoginAccount = !orderingTheme?.theme?.mobile_view_web?.components?.home?.components?.login_account?.hidden
-  const bgImg = orderingTheme?.theme?.my_products?.components?.images?.components?.homepage_background?.components?.image
-  const logo = orderingTheme?.theme?.my_products?.components?.images?.components?.logo?.components?.image
-  const mobileBgImg = orderingTheme?.theme?.my_products?.components?.images?.components?.homepage_mobile_background?.components?.image
-  const isFullScreen = orderingTheme?.theme?.my_products?.components?.images?.components?.homepage_image_fullscreen
-  const isChew = orderingTheme?.theme?.header?.components?.layout?.type?.toLowerCase() === 'chew'
+  const isShowLoginAccount = !theme?.mobile_view_web?.components?.home?.components?.login_account?.hidden
+  const bgImg = theme?.my_products?.components?.images?.components?.homepage_background?.components?.image
+  const logo = theme?.my_products?.components?.images?.components?.logo?.components?.image
+  const mobileBgImg = theme?.my_products?.components?.images?.components?.homepage_mobile_background?.components?.image
+  const isFullScreen = theme?.my_products?.components?.images?.components?.homepage_image_fullscreen
+  const isChew = theme?.header?.components?.layout?.type?.toLowerCase() === 'chew'
   const enabledPoweredByOrdering = configs?.powered_by_ordering_module?.value
   const handleFindBusinesses = () => {
     if (!orderState?.options?.address?.location) {

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

@@ -29,6 +29,7 @@ export const CardsContainer = styled.div`
 export const CardsContainerWrapper = styled.div`
   margin-bottom: 10px;
   display: flex;
+  overflow: auto hidden;
   ${({ isBusinessesPage }) => isBusinessesPage && css`
     overflow: scroll hidden;
     width: 100%;

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

@@ -11,7 +11,7 @@ export const Container = styled.div`
 
 export const ModalDialog = styled.div`
   position: relative;
-  background-color: ${({ isTransparent }) => isTransparent ? 'transparent' : '#FFF'};
+  background-color: ${({ isTransparent, theme }) => isTransparent ? 'transparent' : theme?.colors?.backgroundPage};
   padding: ${({ padding }) => padding || '30px 20px'};
   width: 100vw;
   border-radius: 0px;