ordering-ui-external 10.1.0 → 10.2.0

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>
   )
 }

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

@@ -64,6 +64,9 @@ export const TimeListWrapper = styled.div`
   margin-top: 30px;
   max-height: 250px;
   overflow: auto;
+  ${({ cateringPreorder }) => cateringPreorder && css`
+    margin-left: 0;
+  `}
 `
 
 export const CheckedIcon = styled.div`
@@ -77,6 +80,13 @@ export const CheckedIcon = styled.div`
   ${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;
+  `}
 `
 export const ButtonWrapper = styled.div`
   margin-top: 25px;
@@ -155,6 +165,10 @@ export const DaysSwiper = styled.div`
       left: 0px;
       right: auto;
     }
+    .swiper-wrapper {
+      display: flex;
+      justify-content: space-between;
+    }
   }
 `
 
@@ -208,47 +222,75 @@ export const DayNumber = styled.div`
 export const TimeItem = styled.div`
   cursor: pointer;
   display: flex;
-  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;
-
-  ${({ active }) => active && css`
-    background: #F5F9FF;
-    color: ${props => props.theme.colors.primary};
-  `}
-
   span {
     font-size: 14px;
     white-space: nowrap;
   }
-
-  @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);
-    ${({ isAppoint }) => isAppoint && css`
-      width: calc(33.33% - 24px);
-      min-width: calc(33.33% - 24px);
+  ${({ active }) => active && css`
+    background: #F5F9FF;
+    color: ${props => props.theme.colors.primary};
+  `}
+${({ cateringPreorder }) => cateringPreorder ? css`
+    background: #fff;
+    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 {
-        font-size: 12px;
+        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;
+          }
+        `}
+      }
+    `
   }
 `
 
@@ -257,3 +299,64 @@ export const ClosedBusinessMsg = styled.div`
   font-size: 16px;
   width: 100%;
 `
+
+export const SelectContainer = styled.div`
+  #list {
+    width: 100%;
+  }
+
+  > div {
+    width: 100%;
+    background-color: #F8F9FA!important;
+    box-shadow: 0px 1px 4px rgba(0, 0, 0, 0.1);
+    min-height: 44px;
+    border: none;
+    border-radius: 7.6px;
+    color: #909BA9 !important;
+
+    > div:first-child {
+      padding-top: 5px;
+      padding-bottom: 5px;
+      justify-content: space-between;
+    }
+    > div#list {
+      width: 100%;
+      background-color: #F8F9FA!important;
+      border: 1px solid #F8F9FA;
+      border-radius: 7.6px;
+      box-shadow: 0px 1px 4px rgba(0, 0, 0, 0.1);
+    }
+  }
+
+  ${({ theme }) => theme?.layouts?.checkout?.components?.layout?.type === 'pfchangs' && css`
+    background: #000;
+    #select-input {
+      margin-bottom: 0px;
+    }
+    div {
+      white-space: pre-wrap;
+    }
+    > div {
+      background-color: #000!important;
+      border: 1px solid #fff;
+      border-radius: 0px;
+      color: #fff !important;
+      padding: 0px 10px;
+      box-sizing: border-box;
+      height: auto;
+      > div#list {
+        background-color: #000 !important;
+        border: 1px solid #fff;
+        border-radius: 0px;
+      }
+    }
+  `}
+`
+
+export const CheckIcon = styled.div`
+  margin-right: 20px;
+  svg {
+    width: 24px;
+    height: 24px;
+  }
+`

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

@@ -39,7 +39,7 @@ export const MyOrders = (props) => {
   const hideBusinessTab = theme?.orders?.components?.business_tab?.hidden
 
   const MyOrdersMenu = [
-    { key: 'orders', value: t('ORDERS', 'Orders'), disabled: false},
+    { key: 'orders', value: t('ORDERS', 'Orders'), disabled: false },
     { key: 'business', value: t('BUSINESS', 'Business'), disabled: hideBusinessTab },
     { key: 'products', value: t('PRODUCTS', 'Products'), disabled: hideProductsTab }
   ]

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

@@ -8,8 +8,8 @@ import {
   useConfig,
   useOrder,
   useCustomer,
-  GoogleMapsMap,
-  useOrderingTheme
+  useSession,
+  GoogleMapsMap
 } from 'ordering-components-external'
 import RiUser2Fill from '@meronex/icons/ri/RiUser2Fill'
 import FaUserAlt from '@meronex/icons/fa/FaUserAlt'
@@ -103,11 +103,11 @@ const OrderDetailsUI = (props) => {
   const [, t] = useLanguage()
   const [{ configs }] = useConfig()
   const theme = useTheme()
+  const [{ token }] = useSession()
   const [events] = useEvent()
   const [{ parsePrice, parseDate }] = useUtils()
   const [, { deleteUserCustomer }] = useCustomer()
   const [{ carts }, { refreshOrderOptions }] = useOrder()
-  const [orderingTheme] = useOrderingTheme()
   const [openMessages, setOpenMessages] = useState({ business: false, driver: false })
   const [isOrderReviewed, setIsOrderReviewed] = useState(false)
   const [isProductReviewed, setIsProductReviewed] = useState(false)
@@ -134,7 +134,7 @@ const OrderDetailsUI = (props) => {
   const hideOrderActions = order?.delivery_type === 1
   const isGiftCardOrder = !order?.business_id
 
-  const isOriginalLayout = orderingTheme?.theme?.confirmation?.components?.layout?.type === 'original'
+  const isOriginalLayout = theme?.confirmation?.components?.layout?.type === 'original'
   const hideDeliveryType = theme?.confirmation?.components?.order?.components?.delivery_type?.hidden
   const hideDeliveryDate = theme?.confirmation?.components?.order?.components?.date?.hidden
   const hideDeliveryProgress = theme?.confirmation?.components?.order?.components?.progress?.hidden
@@ -369,6 +369,10 @@ const OrderDetailsUI = (props) => {
     const _isService = order.products.some(product => product.type === 'service')
     setIsService(_isService)
     businessLogoUrlValidation()
+    props.openBChatByParam && setOpenMessages({
+      ...openMessages,
+      business: !!props.openBChatByParam
+    })
   }, [order])
 
   useEffect(() => {
@@ -470,16 +474,18 @@ const OrderDetailsUI = (props) => {
                       >
                         <span onClick={() => setIsOrderHistory(true)}>{t('VIEW_DETAILS', 'View details')}</span>
                       </ReviewOrderLink>
-                      <ReviewOrderLink
-                        className='Review-order'
-                        active={
-                          acceptedStatus.includes(parseInt(order?.status, 10)) &&
-                          (!order?.review || (order.driver && !order?.user_review)) &&
-                          (!isOrderReviewed || !isProductReviewed || (isService && !isProReviewed) || !isDriverReviewed)
-                        }
-                      >
-                        <span onClick={handleOpenReview}>{t('REVIEW_ORDER', theme?.defaultLanguages?.REVIEW_ORDER || 'Review your Order')}</span>
-                      </ReviewOrderLink>
+                      {(!props.isCustomerMode || (props.isCustomerMode && !!props.hashKey && !token)) && (
+                        <ReviewOrderLink
+                          className='Review-order'
+                          active={
+                            [...acceptedStatus, 16].includes(parseInt(order?.status, 10)) &&
+                            (!order?.review || (order.driver && !order?.user_review)) &&
+                            (!isOrderReviewed || !isProductReviewed || (isService && !isProReviewed) || !isDriverReviewed)
+                          }
+                        >
+                          <span onClick={handleOpenReview}>{t('REVIEW_ORDER', theme?.defaultLanguages?.REVIEW_ORDER || 'Review your Order')}</span>
+                        </ReviewOrderLink>
+                      )}
                     </LinkWrapper>
                   </OrderStatusAndLinkContainer>
                 </>
@@ -762,13 +768,36 @@ const OrderDetailsUI = (props) => {
           >
             <ReviewWrapper>
               {
-                reviewStatus?.order
-                  ? <ReviewOrder order={order} closeReviewOrder={closeReviewOrder} setIsReviewed={setIsOrderReviewed} />
-                  : (reviewStatus?.product
-                    ? <ReviewProduct order={order} closeReviewProduct={closeReviewProduct} setIsProductReviewed={setIsProductReviewed} />
-                    : (reviewStatus?.professional
-                      ? <ReviewProfessional order={order} closeReviewProfessional={handleCloseReivew} setIsProfessionalReviewed={setIsProReviewed} isProfessional />
-                      : <ReviewDriver order={order} closeReviewDriver={handleCloseReivew} setIsDriverReviewed={setIsDriverReviewed} />))
+                reviewStatus?.order ? (
+                  <ReviewOrder
+                    order={order}
+                    hashKey={props.hashKey}
+                    closeReviewOrder={closeReviewOrder}
+                    setIsReviewed={setIsOrderReviewed}
+                  />)
+                  : (reviewStatus?.product ? (
+                    <ReviewProduct
+                      order={order}
+                      hashKey={props.hashKey}
+                      closeReviewProduct={closeReviewProduct}
+                      setIsProductReviewed={setIsProductReviewed}
+                    />)
+                    : (reviewStatus?.professional ? (
+                      <ReviewProfessional
+                        order={order}
+                        hashKey={props.hashKey}
+                        closeReviewProfessional={handleCloseReivew}
+                        setIsProfessionalReviewed={setIsProReviewed}
+                        isProfessional
+                      />)
+                      : (
+                        <ReviewDriver
+                          order={order}
+                          hashKey={props.hashKey}
+                          closeReviewDriver={handleCloseReivew}
+                          setIsDriverReviewed={setIsDriverReviewed}
+                        />
+                      )))
               }
             </ReviewWrapper>
 

package/src/themes/five/src/components/OrderDetails/layouts/Kiosk/index.js

@@ -9,8 +9,7 @@ import {
   useUtils,
   useEvent,
   useToast, ToastType,
-  useApi,
-  useOrderingTheme
+  useApi
 } from 'ordering-components-external'
 import AiFillCheckCircle from '@meronex/icons/ai/AiFillCheckCircle'
 
@@ -59,7 +58,6 @@ const OrderDetailsUI = (props) => {
   const [events] = useEvent()
   const [{ parseDate }] = useUtils()
   const [, { showToast }] = useToast()
-  const [orderingTheme] = useOrderingTheme()
   const optToSendReceipt = [
     {
       key: _EMAIL,
@@ -81,9 +79,9 @@ const OrderDetailsUI = (props) => {
 
   const { order, loading, error } = props.order
 
-  const showDeliveryType = !orderingTheme?.theme?.confirmation?.components?.order?.components?.delivery_type?.hidden
-  const showDeliveryDate = !orderingTheme?.theme?.confirmation?.components?.order?.components?.date?.hidden
-  const showDeliveryProgress = !orderingTheme?.theme?.confirmation?.components?.order?.components?.progress?.hidden
+  const showDeliveryType = !theme?.confirmation?.components?.order?.components?.delivery_type?.hidden
+  const showDeliveryDate = !theme?.confirmation?.components?.order?.components?.date?.hidden
+  const showDeliveryProgress = !theme?.confirmation?.components?.order?.components?.progress?.hidden
 
   const locations = [
     { ...order?.driver?.location, icon: order?.driver?.photo || theme.images?.dummies?.driverPhoto },

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

@@ -1,5 +1,5 @@
 import React from 'react'
-import { useLanguage, OrderTypeControl, useOrder } from 'ordering-components-external'
+import { useLanguage, useOrder, OrderTypeControl } from 'ordering-components-external'
 import { useTheme } from 'styled-components'
 import BsArrowRight from '@meronex/icons/bs/BsArrowRight'
 import {
@@ -109,6 +109,18 @@ export const OrderTypeSelectorContent = (props) => {
         text: t('DRIVE_THRU', 'Drive thru'),
         description: t('ORDERTYPE_DESCRIPTION_DRIVETHRU', 'Drive Thru description'),
         image: theme.images?.deliveryTypes?.driveThru
+      },
+      {
+        value: 7,
+        text: t('CATERING_DELIVERY', 'Catering Delivery'),
+        description: t('ORDERTYPE_DESCRIPTION_CATERING_DELIVERY', 'Catering Delivery description'),
+        image: theme.images?.deliveryTypes?.cateringDelivery
+      },
+      {
+        value: 8,
+        text: t('CATERING_PICKUP', 'Catering Pickup'),
+        description: t('ORDERTYPE_DESCRIPTION_CATERING_PICKUP', 'Catering Pickup description'),
+        image: theme.images?.deliveryTypes?.cateringPickup
       }
     ]
   }

package/src/themes/five/src/components/OrdersOption/PreviousBusinessOrdered/index.js

@@ -1,9 +1,10 @@
 import React from 'react'
-import { useOrder, useOrderingTheme } from 'ordering-components-external'
+import { useOrder } from 'ordering-components-external'
 import { BusinessController } from '../../BusinessController'
 import { AutoScroll } from '../../AutoScroll'
 import { BusinessList, BusinessListWrapper } from './styles'
 import { useWindowSize } from '../../../../../../hooks/useWindowSize'
+import { useTheme } from 'styled-components'
 
 export const PreviousBusinessOrdered = (props) => {
   const {
@@ -15,9 +16,9 @@ export const PreviousBusinessOrdered = (props) => {
   } = props
 
   const [orderState] = useOrder()
-  const [orderingTheme] = useOrderingTheme()
+  const theme = useTheme()
   const { width } = useWindowSize()
-  const isChew = orderingTheme?.theme?.header?.components?.layout?.type?.toLowerCase() === 'chew'
+  const isChew = theme?.header?.components?.layout?.type?.toLowerCase() === 'chew'
 
   const onBusinessClick = (business) => {
     onRedirectPage({ page: 'business', params: { store: business.slug } })