ordering-ui-external 10.0.1 → 10.2.0

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

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

@@ -22,7 +22,8 @@ SwiperCore.use([Navigation])
 
 const PageBannerUI = (props) => {
   const {
-    pageBannerState
+    pageBannerState,
+    isCustomerMode
   } = props
 
   const [{ site }] = useSite()
@@ -33,61 +34,74 @@ const PageBannerUI = (props) => {
 
   const onProductRedirect = ({ slug, category, product }) => {
     if (!category && !product) {
-      if (businessUrlTemplate === '/store/:business_slug' || businessUrlTemplate === '/:business_slug') {
-        return events.emit('go_to_page', { page: 'business', params: { business_slug: slug }, replace: false })
+      if (isCustomerMode) {
+        return events.emit('go_to_page', { page: 'business', params: { store: slug } })
       } else {
-        return events.emit('go_to_page', { page: 'business', search: `?${businessUrlTemplate.split('?')[1].replace(':business_slug', '')}${slug}`, replace: false })
+        if (businessUrlTemplate === '/store/:business_slug' || businessUrlTemplate === '/:business_slug') {
+          return events.emit('go_to_page', { page: 'business', params: { business_slug: slug }, replace: false })
+        } else {
+          return events.emit('go_to_page', { page: 'business', search: `?${businessUrlTemplate.split('?')[1].replace(':business_slug', '')}${slug}`, replace: false })
+        }
       }
     }
     events.emit('product_banner_clicked')
-    if (productUrlTemplate === '/store/:business_slug/:category_slug/:product_slug' || productUrlTemplate === '/:business_slug/:category_slug/:product_slug') {
+    if (isCustomerMode) {
       return events.emit('go_to_page', {
-        page: 'product',
-        params: {
-          business_slug: slug,
-          category_slug: category,
-          product_slug: product
-        },
-        replace: false
-      })
-    }
-    if (productUrlTemplate.includes('/store/:category_slug/:product_slug')) {
-      const businessParameter = businessUrlTemplate.replace('/store?', '').replace('=:business_slug', '')
-      return events.emit('go_to_page', {
-        page: 'product',
-        params: {
-          category_slug: category,
-          product_slug: product
-        },
-        search: `?${businessParameter}=${slug}`,
-        replace: false
-      })
-    }
-    if (productUrlTemplate.includes('/store/:business_slug') && productUrlTemplate.includes('category_id')) {
-      const ids = productUrlTemplate.split('?')[1].split('&')
-      const categoryParameter = ids[0].replace('=:category_id', '')
-      const productParameter = ids[1].replace('=:product_id', '')
-      return events.emit('go_to_page', {
-        page: 'product',
-        params: {
-          business_slug: slug
-        },
-        search: `?${categoryParameter}=${category}&${productParameter}=${product}`,
-        replace: false
-      })
-    }
-    if (productUrlTemplate.includes('/:business_slug') && !productUrlTemplate.includes('store')) {
-      const ids = productUrlTemplate.split('?')[1].split('&')
-      const categoryParameter = ids[0].replace('=:category_id', '')
-      const productParameter = ids[1].replace('=:product_id', '')
-      return events.emit('go_to_page', {
-        page: 'product',
-        params: {
-          business_slug: slug
-        },
-        search: `?${categoryParameter}=${category}&${productParameter}=${product}`,
-        replace: false
+        page: 'business',
+        params: { store: slug },
+        search: `?category=${category}&product=${product}`,
+        replace: true
       })
+    } else {
+      if (productUrlTemplate === '/store/:business_slug/:category_slug/:product_slug' || productUrlTemplate === '/:business_slug/:category_slug/:product_slug') {
+        return events.emit('go_to_page', {
+          page: 'product',
+          params: {
+            business_slug: slug,
+            category_slug: category,
+            product_slug: product
+          },
+          replace: false
+        })
+      }
+      if (productUrlTemplate.includes('/store/:category_slug/:product_slug')) {
+        const businessParameter = businessUrlTemplate.replace('/store?', '').replace('=:business_slug', '')
+        return events.emit('go_to_page', {
+          page: 'product',
+          params: {
+            category_slug: category,
+            product_slug: product
+          },
+          search: `?${businessParameter}=${slug}`,
+          replace: false
+        })
+      }
+      if (productUrlTemplate.includes('/store/:business_slug') && productUrlTemplate.includes('category_id')) {
+        const ids = productUrlTemplate.split('?')[1].split('&')
+        const categoryParameter = ids[0].replace('=:category_id', '')
+        const productParameter = ids[1].replace('=:product_id', '')
+        return events.emit('go_to_page', {
+          page: 'product',
+          params: {
+            business_slug: slug
+          },
+          search: `?${categoryParameter}=${category}&${productParameter}=${product}`,
+          replace: false
+        })
+      }
+      if (productUrlTemplate.includes('/:business_slug') && !productUrlTemplate.includes('store')) {
+        const ids = productUrlTemplate.split('?')[1].split('&')
+        const categoryParameter = ids[0].replace('=:category_id', '')
+        const productParameter = ids[1].replace('=:product_id', '')
+        return events.emit('go_to_page', {
+          page: 'product',
+          params: {
+            business_slug: slug
+          },
+          search: `?${categoryParameter}=${category}&${productParameter}=${product}`,
+          replace: false
+        })
+      }
     }
   }
 

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

@@ -279,7 +279,7 @@ export const ProductActions = styled.div`
   bottom: 0;
   right: 0;
   width: 100%;
-  background-color: #FFF;
+  background-color: ${(props) => props.theme?.colors?.backgroundPage};
 
   div.price {
     padding-top: 10px;

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

@@ -4,7 +4,7 @@ import {
   Pencil,
   Trash
 } from 'react-bootstrap-icons'
-import { useUtils, useLanguage, useOrder, useConfig, useOrderingTheme } from 'ordering-components-external'
+import { useUtils, useLanguage, useOrder, useConfig } from 'ordering-components-external'
 import { useWindowSize } from '../../../../../hooks/useWindowSize'
 import {
   AccordionSection,
@@ -52,7 +52,6 @@ export const ProductItemAccordion = (props) => {
   const [{ parsePrice, parseDate }] = useUtils()
   const windowSize = useWindowSize()
   const [{ configs }] = useConfig()
-  const [orderingTheme] = useOrderingTheme()
   const [setActive, setActiveState] = useState('')
   const [setHeight, setHeightState] = useState('0px')
   const [setRotate, setRotateState] = useState('accordion__icon')

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

@@ -12,7 +12,7 @@ export const WrapHeader = styled.div`
   display: flex;
   justify-content: space-between;
   align-items: center;
-  background-color: #FFF;
+  background-color: ${(props) => props.theme?.colors?.backgroundPage};
 `
 
 export const TitleContainer = styled.div`

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

@@ -1,6 +1,6 @@
 import React, { useState, useEffect } from 'react'
 import { useTheme } from 'styled-components'
-import { useLanguage, useConfig, useUtils, useOrderingTheme } from 'ordering-components-external'
+import { useLanguage, useConfig, useUtils } from 'ordering-components-external'
 import CgSearch from '@meronex/icons/cg/CgSearch'
 import { Cart3, ArrowLeft } from 'react-bootstrap-icons'
 import { BusinessBasicInformation } from '../BusinessBasicInformation'
@@ -88,14 +88,13 @@ export const RenderProductsLayout = (props) => {
     handleChangePriceFilterValues,
     priceFilterValues,
     handleUpdateProfessionals,
-    isCustomerMode,
+    isCustomerMode
   } = props
 
   const theme = useTheme()
   const [, t] = useLanguage()
   const [{ configs }] = useConfig()
   const [{ parsePrice }] = useUtils()
-  const [orderingTheme] = useOrderingTheme()
   const windowSize = useWindowSize()
   const [isCartModal, setisCartModal] = useState(false)
   const [openSearchProducts, setOpenSearchProducts] = useState(false)
@@ -121,7 +120,7 @@ export const RenderProductsLayout = (props) => {
   const businessLayout = {
     layoutOne: frontLayout === layoutOne && isUseParentCategory
   }
-  const showCartOnProductList = !orderingTheme?.theme?.business_view?.components?.cart?.components?.hidden
+  const showCartOnProductList = !theme?.business_view?.components?.cart?.components?.hidden
   const hideBusinessNearCity = theme?.business_view?.components?.near_business?.hidden ?? true
   const hidePreviousOrdered = theme?.business_view?.components?.products_ordered?.hidden
 
@@ -193,9 +192,13 @@ export const RenderProductsLayout = (props) => {
               />
             )}
 
-            {!isCustomerMode && (
+            {businessState?.business?.id && (
               <PageBannerWrapper>
-                <PageBanner position='web_business_page' />
+                <PageBanner
+                  position='web_business_page'
+                  businessId={businessState?.business?.id}
+                  isCustomerMode={isCustomerMode}
+                />
               </PageBannerWrapper>
             )}
 

package/src/themes/five/src/components/SingleProductCard/layouts/starbucks/index.js

@@ -1,6 +1,6 @@
 import React, { useRef, useState } from 'react'
 import Skeleton from 'react-loading-skeleton'
-import { useLanguage, useConfig, useOrder, useUtils, useSession, useOrderingTheme, SingleProductCard as SingleProductCardController } from 'ordering-components-external'
+import { useLanguage, useConfig, useOrder, useUtils, useSession, SingleProductCard as SingleProductCardController } from 'ordering-components-external'
 import { shape } from '../../../../../../../utils'
 import { useIntersectionObserver } from '../../../../../../../hooks/useIntersectionObserver'
 import { Heart as DisLike, HeartFill as Like } from 'react-bootstrap-icons'
@@ -52,7 +52,6 @@ const SingleProductCardUI = (props) => {
   const [{ parsePrice, optimizeImage, parseDate }] = useUtils()
   const [orderState] = useOrder()
   const [{ auth }, { login }] = useSession()
-  const [orderingTheme] = useOrderingTheme()
   const theme = useTheme()
   const favoriteRef = useRef(null)