ordering-ui-external 10.0.1 → 10.2.0

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/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,7 +104,6 @@ const CheckoutUI = (props) => {
 
   const theme = useTheme()
   const [validationFields] = useValidationFields()
-  const [orderingTheme] = useOrderingTheme()
   const [{ options, loading }] = useOrder()
   const [, t] = useLanguage()
   const [{ parsePrice }] = useUtils()
@@ -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)
     }

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;

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

@@ -8,10 +8,9 @@ import { SpinnerLoader } from '../../../../../components/SpinnerLoader'
 import { useWindowSize } from '../../../../../hooks/useWindowSize'
 
 export const MomentContent = (props) => {
-  const [{ configs }] = useConfig()
-  const limitDays = parseInt(configs?.max_days_preorder?.value, 10)
+  const [{ configs, loading }] = useConfig()
+  const limitDays = parseInt(props.preorderMaximumDays ?? configs?.max_days_preorder?.value, 10)
   const [orderState] = useOrder()
-
   const currentDate = new Date()
   const time = limitDays > 1
     ? currentDate.getTime() + ((limitDays - 1) * 24 * 60 * 60 * 1000)
@@ -36,11 +35,21 @@ export const MomentContent = (props) => {
       {props.beforeComponents?.map((BeforeComponent, i) => (
         <BeforeComponent key={i} {...props} />))}
       <Container isLoading={orderState?.loading}>
-        <MomentControl
-          {...momentProps}
-          onClose={props.onClose}
-        />
-        {orderState?.loading && (
+        {((!props.cateringPreorder) || (!loading)) && (
+          <MomentControl
+            {...momentProps}
+            onClose={props.onClose}
+            cateringPreorder={props.cateringPreorder}
+            isCart={props.isCart}
+            preorderSlotInterval={props.preorderSlotInterval}
+            preorderLeadTime={props.preorderLeadTime}
+            preorderTimeRange={props.preorderTimeRange}
+            preorderMaximumDays={props.preorderMaximumDays}
+            preorderMinimumDays={props.preorderMinimumDays}
+            business={props.business}
+          />
+        )}
+        {orderState?.loading && !props.isHeader && (
           <Layer height={momentControl?.height && `${momentControl?.height}px`}>
             {(window.location.pathname !== '/search' || orderState?.options?.address?.location) && (
               <SpinnerLoader

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

@@ -26,7 +26,8 @@ import {
   DayName,
   DayNumber,
   TimeItem,
-  ClosedBusinessMsg
+  ClosedBusinessMsg,
+  CheckIcon
 } from './styles'
 import CgRadioCheck from '@meronex/icons/cg/CgRadioCheck'
 import { Button } from '../../styles/Buttons'
@@ -51,7 +52,14 @@ const MomentControlUI = (props) => {
     handleChangeDate,
     handleChangeTime,
     onClose,
-    isAppoint
+    isAppoint,
+    cateringPreorder,
+    isCart,
+    preorderLeadTime,
+    business,
+    getActualSchedule,
+    preorderMaximumDays,
+    preorderMinimumDays
   } = props
 
   const [{ configs }] = useConfig()
@@ -150,32 +158,49 @@ const MomentControlUI = (props) => {
 
   useEffect(() => {
     let _timeLists = []
-    if (!scheduleList) {
-      _timeLists = hoursList.map(hour => {
-        return {
-          value: hour.startTime,
-          text: is12hours ? (
-            hour.startTime.includes('12')
-              ? `${hour.startTime}PM`
-              : parseTime(moment(hour.startTime, 'HH:mm'), { outputFormat: 'hh:mma' })
-          ) : (
-            parseTime(moment(hour.startTime, 'HH:mm'), { outputFormat: 'HH:mm' })
-          )
-        }
-      })
+    if (!scheduleList || cateringPreorder) {
+      const schedule = business && Object.keys(business || {})?.length > 0 && getActualSchedule()
+      if (!schedule && cateringPreorder && Object.keys(business)?.length > 0) {
+        setIsEnabled(false)
+        return
+      }
+      _timeLists = hoursList
+        .filter(hour => (Object.keys(business || {})?.length === 0 || schedule?.lapses?.some(lapse =>
+          moment(dateSelected + ` ${hour.startTime}`) >= moment(dateSelected + ` ${lapse.open.hour}:${lapse.open.minute}`).add(preorderLeadTime, 'minutes') && moment(dateSelected + ` ${hour.endTime}`) <= moment(dateSelected + ` ${lapse.close.hour}:${lapse.close.minute}`))) &&
+          moment(dateSelected + ` ${hour.startTime}`) < moment(dateSelected + ` ${hour.endTime}`) &&
+          (moment().add(preorderLeadTime, 'minutes') < moment(dateSelected + ` ${hour.startTime}`) || !cateringPreorder))
+        .map(hour => {
+          return {
+            value: hour.startTime,
+            text: is12hours ? (
+              hour.startTime.includes('12')
+                ? `${hour.startTime}PM`
+                : parseTime(moment(hour.startTime, 'HH:mm'), { outputFormat: 'hh:mma' })
+            ) : (
+              parseTime(moment(hour.startTime, 'HH:mm'), { outputFormat: 'HH:mm' })
+            ),
+            endText: is12hours ? (
+              hour.endTime.includes('12')
+                ? `${hour.endTime}PM`
+                : parseTime(moment(hour.endTime, 'HH:mm'), { outputFormat: 'hh:mma' })
+            ) : (
+              parseTime(moment(hour.endTime, 'HH:mm'), { outputFormat: 'HH:mm' })
+            )
+          }
+        })
       setIsEnabled(true)
     } else {
       _timeLists = getTimes(dateSelected, scheduleList)
     }
     setTimeList(_timeLists)
-  }, [dateSelected, hoursList, scheduleList])
+  }, [dateSelected, hoursList, scheduleList, cateringPreorder, JSON.stringify(business)])
 
   useEffect(() => {
-    handleCheckBoxChange(isAsap)
+    handleCheckBoxChange(isAsap && ((preorderMinimumDays === 0 && preorderLeadTime === 0) || !cateringPreorder))
   }, [isAsap])
 
   useEffect(() => {
-    if (!pathname.includes('store')) {
+    if (!pathname.includes('store') || isCart) {
       setScheduleList(null)
       return
     }
@@ -190,23 +215,21 @@ const MomentControlUI = (props) => {
 
   return (
     <div id='moment_control'>
-      {props.beforeElements?.map((BeforeElement, i) => (
-        <React.Fragment key={i}>
-          {BeforeElement}
-        </React.Fragment>))}
-      {props.beforeComponents?.map((BeforeComponent, i) => (
-        <BeforeComponent key={i} {...props} />))}
       {!isAppoint && (
         <>
-          <Title>{t('WHEN_DO_WE_DELIVERY', 'When do we delivery?')}</Title>
-          <CheckBoxWrapper
-            highlight={isAsap && isASP}
-            onClick={() => handleCheckBoxChange(true)}
-            isLoading={orderState?.loading}
-          >
-            {isASP ? <CheckedIcon /> : <CgRadioCheck />}
-            <span>{t('CHECKOUT_ASAP', 'ASAP')} ({moment(new Date()).format('LLLL')} - {t('DELIVERY_TIME', 'delivery time')})</span>
-          </CheckBoxWrapper>
+          {!isCart && (
+            <Title>{t('WHEN_DO_WE_DELIVERY', 'When do we delivery?')}</Title>
+          )}
+          {((preorderMinimumDays === 0 && preorderLeadTime === 0) || !cateringPreorder) && (
+            <CheckBoxWrapper
+              highlight={isAsap && isASP}
+              onClick={() => handleCheckBoxChange(true)}
+              isLoading={orderState?.loading}
+            >
+              {isASP ? <CheckedIcon /> : <CgRadioCheck />}
+              <span>{t('CHECKOUT_ASAP', 'ASAP')} ({moment(new Date()).format('LLLL')} - {t('DELIVERY_TIME', 'delivery time')})</span>
+            </CheckBoxWrapper>
+          )}
           <CheckBoxWrapper
             highlight={!isASP}
             onClick={() => handleCheckBoxChange(null)}
@@ -220,10 +243,16 @@ const MomentControlUI = (props) => {
         (!isASP || isAppoint) && (
           !props.isCustomLayout ? (
             <OrderTimeWrapper>
-              {!isAppoint && <p>{t('ORDER_TIME', 'Order time')}</p>}
+              {!isAppoint && !isCart && <p>{t('ORDER_TIME', 'Order time')}</p>}
               <DateWrapper>
                 <MonthYearLayer>
-                  <span>{moment(dateSelected).format('MMMM, yyyy')}</span>
+                  <span>
+                    {
+                      datesList.slice((cateringPreorder && preorderMinimumDays) || 0, Number(cateringPreorder ? preorderMaximumDays : configs?.max_days_preorder?.value ?? 6, 10))?.length === 0
+                        ? moment(dateSelected).format('Do MMMM, yyyy')
+                        : moment(dateSelected).format('MMMM, yyyy')
+                    }
+                  </span>
                 </MonthYearLayer>
                 <DaysSwiper left={<BsCaretLeftFill />}>
                   <Swiper
@@ -253,7 +282,7 @@ const MomentControlUI = (props) => {
                     preventClicksPropagation={false}
                   >
                     {
-                      datesList.slice(0, Number(configs?.max_days_preorder?.value || 6, 10)).map(date => {
+                      datesList.slice((cateringPreorder && preorderMinimumDays) || 0, Number(cateringPreorder ? preorderMaximumDays : configs?.max_days_preorder?.value ?? 6, 10)).map(date => {
                         const dateParts = date.split('-')
                         const _date = new Date(dateParts[0], dateParts[1] - 1, dateParts[2])
                         const dayName = t('DAY' + (_date.getDay() >= 1 ? _date.getDay() : 7)).substring(0, 2)
@@ -280,13 +309,27 @@ const MomentControlUI = (props) => {
                         active={timeSelected === time.value}
                         onClick={() => handleChangeTime(time.value)}
                         isAppoint={isAppoint}
+                        cateringPreorder={cateringPreorder}
                       >
-                        <span>{time.text}</span>
+                        <span>
+                          {cateringPreorder && (
+                            <CheckIcon>
+                              {timeSelected === time.value ? <CheckedIcon cateringPreorder={cateringPreorder} /> : <CgRadioCheck />}
+                            </CheckIcon>
+                          )}
+                          <p>
+                            {time.text} {cateringPreorder && `- ${time.endText}`}
+                          </p>
+                        </span>
                       </TimeItem>
                     ))}
                   </>
                 ) : (
-                  <ClosedBusinessMsg>{t('ERROR_ADD_PRODUCT_BUSINESS_CLOSED', 'The business is closed at the moment')}</ClosedBusinessMsg>
+                  <ClosedBusinessMsg>
+                    {!business
+                      ? t('ERROR_SHEDULE_UNAVAILABLE', 'There are no schedules for this date')
+                      : t('ERROR_ADD_PRODUCT_BUSINESS_CLOSED', 'The business is closed at the moment')}
+                  </ClosedBusinessMsg>
                 )}
               </TimeListWrapper>
             </OrderTimeWrapper>
@@ -303,23 +346,18 @@ const MomentControlUI = (props) => {
           )
         )
       }
-      {!isAppoint && (
+      {!isAppoint && !isCart && (
         <ButtonWrapper>
           <Button
             color='primary'
             onClick={() => onClose()}
+            disabled={!timeSelected}
           >
             <span>{t('CONTINUE', 'Continue')}</span>
             <ArrowRight />
           </Button>
         </ButtonWrapper>
       )}
-      {props.afterComponents?.map((AfterComponent, i) => (
-        <AfterComponent key={i} {...props} />))}
-      {props.afterElements?.map((AfterElement, i) => (
-        <React.Fragment key={i}>
-          {AfterElement}
-        </React.Fragment>))}
     </div>
   )
 }