ordering-ui-external 10.1.0 → 10.2.1

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