ordering-ui-external 10.1.0 → 10.2.0

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