ordering-ui-external 10.1.0 → 10.2.0

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)
 

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

@@ -1,6 +1,6 @@
 import React, { useEffect, useState, useRef } from 'react'
 import Skeleton from 'react-loading-skeleton'
-import { useSession, useLanguage, useCustomer, useConfig, useOrderingTheme } from 'ordering-components-external'
+import { useSession, useLanguage, useCustomer, useConfig } from 'ordering-components-external'
 import { useForm } from 'react-hook-form'
 import parsePhoneNumber from 'libphonenumber-js'
 import { useTheme } from 'styled-components'
@@ -59,7 +59,6 @@ export const UserFormDetailsUI = (props) => {
   const [{ configs }] = useConfig()
   const theme = useTheme()
   const [{ user: userSession }, { login }] = useSession()
-  const [orderingTheme] = useOrderingTheme()
   const [isValidPhoneNumber, setIsValidPhoneNumber] = useState(null)
   const [userPhoneNumber, setUserPhoneNumber] = useState(null)
   const [alertState, setAlertState] = useState({ open: false, content: [] })
@@ -215,7 +214,7 @@ export const UserFormDetailsUI = (props) => {
   }
 
   const showFieldWithTheme = (name) => {
-    return !orderingTheme?.theme?.profile?.components?.[name]?.hidden
+    return !theme?.profile?.components?.[name]?.hidden
   }
 
   const _handleChangeDate = (date) => {
@@ -388,7 +387,7 @@ export const UserFormDetailsUI = (props) => {
                 <Input
                   borderBottom
                   className='form'
-                  value={moment(birthdate).format('YYYY/MM/DD')}
+                  value={birthdate ? moment(birthdate).format('YYYY/MM/DD') : ''}
                   autoComplete='off'
                   onFocus={() => setOpenCalendar(true)}
                 />

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

@@ -1,5 +1,5 @@
 import React, { useRef, useEffect } from 'react'
-import { useLanguage, useSession, LogoutAction as LogoutActionController, useEvent, useCustomer, useConfig, useOrderingTheme, useOrder } from 'ordering-components-external'
+import { useLanguage, useSession, LogoutAction as LogoutActionController, useEvent, useCustomer, useConfig, useOrder } from 'ordering-components-external'
 import { usePopper } from 'react-popper'
 import {
   HeaderItem,
@@ -31,7 +31,6 @@ export const UserPopover = (props) => {
   const [, t] = useLanguage()
   const [events] = useEvent()
   const [{ configs }] = useConfig()
-  const [orderingTheme] = useOrderingTheme()
   const [orderStatus] = useOrder()
   const theme = useTheme()
   const referenceElement = useRef()
@@ -40,8 +39,8 @@ export const UserPopover = (props) => {
 
   const isWalletEnabled = configs?.cash_wallet?.value && configs?.wallet_enabled?.value === '1' && (configs?.wallet_cash_enabled?.value === '1' || configs?.wallet_credit_point_enabled?.value === '1')
   const isPromotionsEnabled = configs?.advanced_offers_module?.value === '1' || configs?.advanced_offers_module?.value === true
-  const isAddressListNewPage = orderingTheme?.theme?.profile?.components?.address_list?.components?.layout?.position === 'new_page'
-  const isChew = orderingTheme?.theme?.header?.components?.layout?.type?.toLowerCase() === 'chew'
+  const isAddressListNewPage = theme?.profile?.components?.address_list?.components?.layout?.position === 'new_page'
+  const isChew = theme?.header?.components?.layout?.type?.toLowerCase() === 'chew'
 
   const hideBrowse = theme?.bar_menu?.components?.browse?.hidden
   const hideOrders = theme?.bar_menu?.components?.orders?.hidden

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

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

package/src/themes/five/src/components/UserProfileForm/ProfileOptions/index.js

@@ -4,15 +4,16 @@ import { Tabs, Tab } from '../../../styles/Tabs'
 import BsPerson from '@meronex/icons/bs/BsPerson'
 import AiOutlineUnorderedList from '@meronex/icons/ai/AiOutlineUnorderedList'
 import FaAddressBook from '@meronex/icons/fa/FaAddressBook'
-import { useEvent, useLanguage, useOrderingTheme } from 'ordering-components-external'
+import { useEvent, useLanguage } from 'ordering-components-external'
+import { useTheme } from 'styled-components'
 
 export const ProfileOptions = ({ value }) => {
   const [tabValue] = useState(value)
   const [, t] = useLanguage()
   const [events] = useEvent()
-  const [orderingTheme] = useOrderingTheme()
+  const theme = useTheme()
 
-  const showAddressListTab = orderingTheme?.theme?.profile?.components?.address_list?.components?.layout?.position === 'new_page'
+  const showAddressListTab = theme?.profile?.components?.address_list?.components?.layout?.position === 'new_page'
 
   const handleGoToPage = (data) => {
     events.emit('go_to_page', data)

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

@@ -9,8 +9,7 @@ import {
   useLanguage,
   useSession,
   DragAndDrop,
-  ExamineClick,
-  useOrderingTheme
+  ExamineClick
 } from 'ordering-components-external'
 
 import { UserFormDetailsUI } from '../UserFormDetails'
@@ -97,7 +96,6 @@ const UserProfileFormUI = (props) => {
   const [{ user }] = useSession()
   const [{ configs }] = useConfig()
   const theme = useTheme()
-  const [orderingTheme] = useOrderingTheme()
   const [willVerifyOtpState, setWillVerifyOtpState] = useState(false)
   const [otpLeftTime, , resetOtpLeftTime] = useCountdownTimer(
     600, willVerifyOtpState)
@@ -110,7 +108,7 @@ const UserProfileFormUI = (props) => {
   const userFormLayoutRow = theme?.profile?.components?.layout?.position === 'row'
 
   const isPromotionsEnabled = configs?.advanced_offers_module?.value === '1' || configs?.advanced_offers_module?.value === true
-  const isAddressListNewPage = orderingTheme?.theme?.profile?.components?.address_list?.components?.layout?.position === 'new_page'
+  const isAddressListNewPage = theme?.profile?.components?.address_list?.components?.layout?.position === 'new_page'
   const isWalletEnabled = configs?.cash_wallet?.value &&
     configs?.wallet_enabled?.value === '1' &&
     (configs?.wallet_cash_enabled?.value === '1' || configs?.wallet_credit_point_enabled?.value === '1')

package/src/themes/six/src/components/BusinessBasicInformation/index.js

@@ -4,7 +4,7 @@ import FiClock from '@meronex/icons/fi/FiClock'
 import GrLocation from '@meronex/icons/gr/GrLocation'
 import GrDeliver from '@meronex/icons/gr/GrDeliver'
 import FaStar from '@meronex/icons/fa/FaStar'
-import { useUtils, useOrder, useLanguage, useOrderingTheme } from 'ordering-components-external'
+import { useUtils, useOrder, useLanguage } from 'ordering-components-external'
 import { convertHoursToMinutes } from '../../../../../utils'
 
 import {
@@ -13,6 +13,7 @@ import {
   BusinessInfo,
   BusinessInfoItem
 } from './styles'
+import { useTheme } from 'styled-components'
 const types = ['food', 'laundry', 'alcohol', 'groceries']
 export const BusinessBasicInformation = (props) => {
   const {
@@ -23,7 +24,7 @@ export const BusinessBasicInformation = (props) => {
   const [orderState] = useOrder()
   const [, t] = useLanguage()
   const [{ parsePrice, parseDistance }] = useUtils()
-  const [orderingTheme] = useOrderingTheme()
+  const theme = useTheme()
   const getBusinessType = () => {
     if (Object.keys(business).length <= 0) return t('GENERAL', 'General')
     const _types = []
@@ -33,11 +34,11 @@ export const BusinessBasicInformation = (props) => {
     return _types.join(', ')
   }
 
-  const showDeliveryFee = !orderingTheme?.theme?.business_view?.components?.header?.components?.business?.components?.fee?.hidden
-  const showTime = !orderingTheme?.theme?.business_view?.components?.header?.components?.business?.components?.time?.hidden
-  const showBusinessInfo = !orderingTheme?.theme?.business_view?.components?.header?.components?.business?.components?.business_info?.hidden
-  const showReviews = !orderingTheme?.theme?.business_view?.components?.header?.components?.business?.components?.reviews?.hidden
-  const showDistance = !orderingTheme?.theme?.business_view?.components?.header?.components?.business?.components?.distance?.hidden
+  const showDeliveryFee = !theme?.business_view?.components?.header?.components?.business?.components?.fee?.hidden
+  const showTime = !theme?.business_view?.components?.header?.components?.business?.components?.time?.hidden
+  const showBusinessInfo = !theme?.business_view?.components?.header?.components?.business?.components?.business_info?.hidden
+  const showReviews = !theme?.business_view?.components?.header?.components?.business?.components?.reviews?.hidden
+  const showDistance = !theme?.business_view?.components?.header?.components?.business?.components?.distance?.hidden
 
   return (
     <>

package/src/themes/six/src/components/BusinessProductsListing/SearchProducts/index.js

@@ -3,7 +3,7 @@ import React from 'react'
 import { Select } from '../../../styles/Select'
 import { SearchBar } from '../../SearchBar'
 import { useTheme } from 'styled-components'
-import { useLanguage, useOrderingTheme } from 'ordering-components-external'
+import { useLanguage } from 'ordering-components-external'
 
 export const SearchProducts = (props) => {
   const {
@@ -17,8 +17,7 @@ export const SearchProducts = (props) => {
 
   const theme = useTheme()
   const [, t] = useLanguage()
-  const [orderingTheme] = useOrderingTheme()
-  const showSort = !orderingTheme?.theme?.business_view?.components?.header?.components?.business?.components?.sort?.hidden
+  const showSort = !theme?.business_view?.components?.header?.components?.business?.components?.sort?.hidden
   const searchLayout = theme?.business_view?.components?.product_search?.components?.layout?.type
 
   return (

package/template/app.js

@@ -1,6 +1,7 @@
 import React, { useEffect, useState } from 'react'
 import PWAPrompt from 'react-ios-pwa-prompt'
-import { useTheme, ThemeProvider } from 'styled-components'
+import { useTheme } from 'styled-components'
+import { ThemeProvider } from '../src/contexts/ThemeContext'
 import loadable from '@loadable/component'
 import {
   Switch,
@@ -28,7 +29,6 @@ import { useOnlineStatus } from '../src/hooks/useOnlineStatus'
 import { useWindowSize } from '../src/hooks/useWindowSize'
 
 import settings from './config'
-import { orderingThemeUpdated } from './components/OrderingThemeUpdated'
 
 import { SpinnerLoader } from '../src/components/SpinnerLoader'
 import { Input } from '../src/themes/five/src/styles/Inputs'
@@ -134,7 +134,8 @@ export const App = () => {
     colors: {
       ...theme.colors,
       ...(orderingTheme?.theme?.my_products?.components?.theme_settings?.components?.style?.primary_btn_color && { primary: orderingTheme?.theme?.my_products?.components?.theme_settings?.components?.style?.primary_btn_color }),
-      ...(orderingTheme?.theme?.my_products?.components?.theme_settings?.components?.style?.primary_link_color && { links: orderingTheme?.theme?.my_products?.components?.theme_settings?.components?.style?.primary_link_color })
+      ...(orderingTheme?.theme?.my_products?.components?.theme_settings?.components?.style?.primary_link_color && { links: orderingTheme?.theme?.my_products?.components?.theme_settings?.components?.style?.primary_link_color }),
+      ...(orderingTheme?.theme?.my_products?.components?.theme_settings?.components?.style?.background_page && { backgroundPage: orderingTheme?.theme?.my_products?.components?.theme_settings?.components?.style?.background_page })
     },
     images: {
       ...theme.images,
@@ -170,6 +171,10 @@ export const App = () => {
     }
   }
 
+  const websiteThemeType = themeUpdated?.theme?.my_products?.components?.website_theme?.components?.type
+  const websiteThemeBusinessSlug = themeUpdated?.theme?.my_products?.components?.website_theme?.components?.business_slug
+  const updatedBusinessSlug = (websiteThemeType === 'single_store' && websiteThemeBusinessSlug) || settings?.businessSlug
+
   const businessesSlug = {
     marketplace: 'marketplace',
     kiosk: settings?.businessSlug
@@ -180,21 +185,21 @@ export const App = () => {
     businessSlug: businessesSlug[isKioskApp ? 'kiosk' : 'marketplace']
   }
 
-  const signUpBusinesslayout = orderingTheme?.theme?.business_signup?.components?.layout?.type === 'old'
+  const signUpBusinesslayout = themeUpdated?.theme?.business_signup?.components?.layout?.type === 'old'
     ? 'old'
     : 'new'
 
-  const signUpDriverlayout = orderingTheme?.theme?.driver_signup?.components?.layout?.type === 'old'
+  const signUpDriverlayout = themeUpdated?.theme?.driver_signup?.components?.layout?.type === 'old'
     ? 'old'
     : 'new'
 
   const HeaderComponent =
     isKioskApp ? HeaderKiosk
-      : orderingTheme?.theme?.header?.components?.layout?.type === 'old'
+      : themeUpdated?.theme?.header?.components?.layout?.type === 'old'
         ? HeaderOld
-        : orderingTheme?.theme?.header?.components?.layout?.type === 'red'
+        : themeUpdated?.theme?.header?.components?.layout?.type === 'red'
           ? HeaderRed
-          : orderingTheme?.theme?.header?.components?.layout?.type === 'starbucks'
+          : themeUpdated?.theme?.header?.components?.layout?.type === 'starbucks'
             ? HeaderStarbucks
             : Header
 
@@ -205,7 +210,7 @@ export const App = () => {
   const isEmailVerifyRequired = auth && configs?.verification_email_required?.value === '1' && !user?.email_verified
   const isPhoneVerifyRequired = auth && configs?.verification_phone_required?.value === '1' && !user?.phone_verified
   const isUserVerifyRequired = (isEmailVerifyRequired || isPhoneVerifyRequired) && !isKioskApp
-  const isHideFooter = orderingTheme?.theme?.footer?.hidden
+  const isHideFooter = themeUpdated?.theme?.footer?.hidden
 
   const isHome = location.pathname === '/' || location.pathname === '/home'
   const isFooterPage = location.pathname === '/pages/footer' || isKioskApp || isHideFooter
@@ -524,7 +529,7 @@ export const App = () => {
       {
         loaded && (
           <ThemeProvider
-            theme={orderingThemeUpdated(theme, orderingTheme)}
+            theme={themeUpdated}
           >
             <ListenPageChanges />
             {!(isKioskApp && isHome) && (

package/template/components/HelmetTags/index.js

@@ -2,13 +2,14 @@ import React from 'react'
 import { Helmet } from 'react-helmet'
 import helmetData from '../../helmetdata.json'
 import settings from '../../config'
-import { useConfig, useOrderingTheme } from 'ordering-components-external'
+import { useConfig } from 'ordering-components-external'
+import { useTheme } from 'styled-components'
 
 export const HelmetTags = (props) => {
   const {
     page
   } = props
-  const [{ theme }] = useOrderingTheme()
+  const theme = useTheme()
   const [configs] = useConfig()
   const enabledPoweredByOrdering = configs?.powered_by_ordering_module?.value
   const metaTag = page ? helmetData[page] : helmetData.app

package/template/pages/AddressList/index.js

@@ -1,21 +1,22 @@
 import React from 'react'
 import { AddressList as AddressListController } from '../../../src/themes/five/src/components/AddressList'
 import { ProfileOptions } from '../../../src/themes/five/src/components/UserProfileForm/ProfileOptions'
-import { useLanguage, useSession, useOrderingTheme } from 'ordering-components-external'
+import { useLanguage, useSession } from 'ordering-components-external'
 import { HelmetTags } from '../../components/HelmetTags'
 import { SavedPlaces } from './styles'
+import { useTheme } from 'styled-components'
 
 export const AddressList = (props) => {
   const [{ user }] = useSession()
   const [, t] = useLanguage()
-  const [orderingTheme] = useOrderingTheme()
+  const theme = useTheme()
   const addressListParams = {
     ...props,
     addressList: user?.addresses,
     isProfile: true,
     isModal: true
   }
-  const showProfileOptions = orderingTheme?.theme?.profile?.components?.address_list?.components?.layout?.position === 'new_page'
+  const showProfileOptions = theme?.profile?.components?.address_list?.components?.layout?.position === 'new_page'
 
   return (
     <>

package/template/pages/BusinessProductsList/index.js

@@ -1,19 +1,20 @@
 import React, { useState, useEffect } from 'react'
 import { useParams, useLocation } from 'react-router-dom'
-import { useApi, useEvent, useSite, useOrderingTheme } from 'ordering-components-external'
+import { useApi, useEvent, useSite } from 'ordering-components-external'
 import { BusinessProductsListing } from '../../../src/themes/five/src/components/BusinessProductsListing'
 import { HelmetTags } from '../../components/HelmetTags'
 import { capitalize } from '../../../src/utils'
 import settings from '../../config'
 import { checkSiteUrl } from '../../Utils'
+import { useTheme } from 'styled-components'
 
 export const BusinessProductsList = (props) => {
   const [{ site }] = useSite()
   const { search } = useLocation()
-  const [orderingTheme] = useOrderingTheme()
+  const theme = useTheme()
 
-  const websiteThemeType = orderingTheme?.theme?.my_products?.components?.website_theme?.components?.type
-  const websiteThemeBusinessSlug = orderingTheme?.theme?.my_products?.components?.website_theme?.components?.business_slug
+  const websiteThemeType = theme?.my_products?.components?.website_theme?.components?.type
+  const websiteThemeBusinessSlug = theme?.my_products?.components?.website_theme?.components?.business_slug
   const updatedBusinessSlug = (websiteThemeType === 'single_store' && websiteThemeBusinessSlug) || settings?.businessSlug
 
   const [helmetMetaTags, setHelmetMetaTags] = useState({

package/template/pages/BusinessesList/index.js

@@ -1,21 +1,21 @@
 import React from 'react'
 import { BusinessesListing } from '../../../src/themes/five/src/components/BusinessesListing'
-import { useEvent, useSite, useOrderingTheme } from 'ordering-components-external'
+import { useEvent, useSite } from 'ordering-components-external'
 import { HelmetTags } from '../../components/HelmetTags'
 import settings from '../../config'
 import { checkSiteUrl } from '../../Utils'
+import { useTheme } from 'styled-components'
 
 export const BusinessesList = (props) => {
   const [events] = useEvent()
   const [{ site }] = useSite()
-  const [orderingTheme] = useOrderingTheme()
-
+  const theme = useTheme()
   const businessUrlTemplate = checkSiteUrl(site?.business_url_template, '/store/:business_slug')
 
-  const websiteThemeType = orderingTheme?.theme?.my_products?.components?.website_theme?.components?.type
-  const websiteThemeBusinessSlug = orderingTheme?.theme?.my_products?.components?.website_theme?.components?.business_slug
+  const websiteThemeType = theme?.my_products?.components?.website_theme?.components?.type
+  const websiteThemeBusinessSlug = theme?.my_products?.components?.website_theme?.components?.business_slug
   const updatedBusinessSlug = (websiteThemeType === 'single_store' && websiteThemeBusinessSlug) || settings?.businessSlug
-  const websiteThemeFranchiseSlug = orderingTheme?.theme?.my_products?.components?.website_theme?.components?.franchise_slug
+  const websiteThemeFranchiseSlug = theme?.my_products?.components?.website_theme?.components?.franchise_slug
   const updatedFranchiseSlug = (websiteThemeType === 'franchise' && websiteThemeFranchiseSlug) || settings?.franchiseSlug
 
   const businessListingProps = {

package/template/pages/Checkout/index.js

@@ -4,9 +4,10 @@ import { useParams, useLocation } from 'react-router-dom'
 import { HelmetTags } from '../../components/HelmetTags'
 
 import { Checkout } from '../../../src/themes/five/src/components/Checkout'
-import { useEvent, useOrder, useLanguage, useSite, useOrderingTheme } from 'ordering-components-external'
+import { useEvent, useOrder, useLanguage, useSite } from 'ordering-components-external'
 import settings from '../../config'
 import { checkSiteUrl } from '../../Utils'
+import { useTheme } from 'styled-components'
 
 export const CheckoutPage = (props) => {
   const { cartUuid } = useParams()
@@ -15,9 +16,10 @@ export const CheckoutPage = (props) => {
   const [orderState, { confirmCart, changeMoment }] = useOrder()
   const [, t] = useLanguage()
   const [{ site }] = useSite()
-  const [orderingTheme] = useOrderingTheme()
-  const websiteThemeType = orderingTheme?.theme?.my_products?.components?.website_theme?.components?.type
-  const websiteThemeBusinessSlug = orderingTheme?.theme?.my_products?.components?.website_theme?.components?.business_slug
+  const theme = useTheme()
+
+  const websiteThemeType = theme?.my_products?.components?.website_theme?.components?.type
+  const websiteThemeBusinessSlug = theme?.my_products?.components?.website_theme?.components?.business_slug
   const updatedBusinessSlug = (websiteThemeType === 'single_store' && websiteThemeBusinessSlug) || settings?.businessSlug
 
   const stripePayments = ['stripe', 'stripe_connect', 'stripe_direct', 'google_pay', 'apple_pay']