ordering-ui-external 10.0.1 → 10.2.0

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/src/utils/index.js

@@ -1,5 +1,6 @@
-import { useLanguage } from 'ordering-components-external'
+import { CODES, useLanguage } from 'ordering-components-external'
 import { useTheme } from 'styled-components'
+import { CURRENCY } from '../config/currency.js'
 
 export const getIconCard = (brand = '') => {
   const value = brand.toLowerCase()
@@ -724,3 +725,37 @@ export const getCateringValues = (cateringTypeString, configs) => {
     preorderMinimumDays
   }
 }
+
+export const getCurrenySymbol = (code) => {
+  return CURRENCY?.[code]?.symbol ?? code
+}
+
+/**
+ * Function to get unique id
+ */
+export const getUniqueId = () => {
+  const dateString = Date.now().toString(36)
+  const randomness = Math.random().toString(36).substr(2)
+  return dateString + randomness
+}
+
+/**
+ * Function to get language settins by language code
+ * @param {string} code // language code
+ * @param {any} locales // language settings
+ */
+export const getLocale = (code, locales) => {
+  let locale = locales?.[code]
+  if (code === 'es-419-1' || code === 'es-419-2') locale = locales?.es
+  if (code === 'zh-CN') locale = locales?.zhCN
+  if (code === 'ar') locale = locales?.arSA
+  if (code === 'kn') locale = locales?.ta
+  if (code === 'km') locale = locales?.th
+  if (!locale) return locales?.enUS
+  return locale
+}
+
+export const findExitingCode = (countryCode) => {
+  const code = CODES.find(code => code.countryCode === (countryCode || '').toUpperCase())
+  return code?.countryCode
+}

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']

package/template/pages/Home/index.js

@@ -1,5 +1,5 @@
 import React, { useEffect, useState } from 'react'
-import { useApi, useEvent, useSite, useOrderingTheme } from 'ordering-components-external'
+import { useApi, useEvent, useSite } from 'ordering-components-external'
 import { HomeHero } from '../../../src/themes/five/src/components/HomeHero'
 import { KioskHomeHero } from '../../../src/themes/five/src/components/HomeHero/layouts/KioskHomeHero'
 import { useHistory } from 'react-router-dom'
@@ -18,6 +18,7 @@ import {
   SkeletonSide
 } from './styles'
 import { checkSiteUrl } from '../../Utils'
+import { useTheme } from 'styled-components'
 
 export const HomePage = (props) => {
   const history = useHistory()
@@ -25,7 +26,8 @@ export const HomePage = (props) => {
   const [ordering] = useApi()
   const [events] = useEvent()
   const [{ site }] = useSite()
-  const [{ theme }] = useOrderingTheme()
+  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

package/template/pages/MessagesList/index.js

@@ -2,14 +2,15 @@ import React from 'react'
 import { MessagesListing } from '../../../src/themes/five/src/components/MessagesListing'
 
 import { HelmetTags } from '../../components/HelmetTags'
-import { useEvent, useOrderingTheme } from 'ordering-components-external'
+import { useEvent } from 'ordering-components-external'
 import settings from '../../config'
+import { useTheme } from 'styled-components'
 
 export const MessagesList = (props) => {
   const [events] = useEvent()
-  const [orderingTheme] = useOrderingTheme()
-  const websiteThemeType = orderingTheme?.theme?.my_products?.components?.website_theme?.components?.type
-  const websiteThemeFranchiseSlug = orderingTheme?.theme?.my_products?.components?.website_theme?.components?.franchise_slug
+  const theme = useTheme()
+  const websiteThemeType = theme?.my_products?.components?.website_theme?.components?.type
+  const websiteThemeFranchiseSlug = theme?.my_products?.components?.website_theme?.components?.franchise_slug
   const updatedFranchiseSlug = (websiteThemeType === 'franchise' && websiteThemeFranchiseSlug) || settings?.franchiseSlug
 
   const messageprops = {

package/template/pages/MyOrders/index.js

@@ -1,19 +1,20 @@
 import React from 'react'
-import { useSite, useEvent, useOrderingTheme } from 'ordering-components-external'
+import { useSite, useEvent } from 'ordering-components-external'
 import { MyOrders as MyOrdersController } from '../../../src/themes/five/src/components/MyOrders'
 import { HelmetTags } from '../../components/HelmetTags'
 import settings from '../../config'
 import { checkSiteUrl } from '../../Utils'
 import { useWindowSize } from '../../../src/hooks/useWindowSize'
+import { useTheme } from 'styled-components'
 
 export const MyOrders = (props) => {
   const [events] = useEvent()
   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 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 windowSize = useWindowSize()

package/template/pages/OrderDetails/index.js

@@ -1,25 +1,26 @@
 import React from 'react'
 import { useHistory, useParams, useLocation } from 'react-router-dom'
 import { HelmetTags } from '../../components/HelmetTags'
-import { useOrderingTheme, useSite, useEvent } from 'ordering-components-external'
+import { useSite, useEvent } from 'ordering-components-external'
 import { OrderDetails } from '../../../src/themes/five/src/components/OrderDetails'
 import { OrderDetails as OrderDetailsKiosk } from '../../../src/themes/five/src/components/OrderDetails/layouts/Kiosk'
 import { OrderDetails as OrderDetailsOld } from '../../../src/components/OrderDetails'
 import settings from '../../config'
 import { checkSiteUrl } from '../../Utils'
+import { useTheme } from 'styled-components'
 
 export const OrderDetailsPage = (props) => {
   const history = useHistory()
   const { orderId } = useParams()
   const hashKey = new URLSearchParams(useLocation()?.search)?.get('hash') || null
-  const [orderingTheme] = useOrderingTheme()
   const [events] = useEvent()
   const [{ site }] = useSite()
+  const theme = useTheme()
   const businessUrlTemplate = checkSiteUrl(site?.business_url_template, '/store/:business_slug')
 
   const useKioskApp = settings?.use_kiosk
   const OrderDetailsComponent = useKioskApp ? OrderDetailsKiosk
-    : orderingTheme?.theme?.confirmation?.components?.layout?.type === 'old'
+    : theme?.confirmation?.components?.layout?.type === 'old'
       ? OrderDetailsOld
       : OrderDetails