ordering-ui-external 10.1.0 → 10.2.1

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

@@ -109,7 +109,6 @@ const OrdersOptionUI = (props) => {
     ? orders && orders.length > 0 && !orders.map(order => businessesIds && businessesIds.includes(order.business_id)).every(i => !i)
     : orders.length > 0
 
-  const [loadingOrders, setLoadingOrders] = useState(true)
   const [alertState, setAlertState] = useState({ open: false, content: [] })
   const closeOrderModal = (e) => {
     const outsideModal = !window.document.getElementById('app-modals') ||
@@ -142,18 +141,6 @@ const OrdersOptionUI = (props) => {
     }
   }
 
-  useEffect(() => {
-    let timeout
-    if (isCustomLayout) {
-      timeout = setTimeout(() => {
-        setLoadingOrders(false)
-      }, 2000)
-    }
-    return () => {
-      typeof timeout === 'number' && clearTimeout(timeout)
-    }
-  }, [])
-
   useEffect(() => {
     if (loading) return
 
@@ -203,7 +190,7 @@ const OrdersOptionUI = (props) => {
         </React.Fragment>))}
       {props.beforeComponents?.map((BeforeComponent, i) => (
         <BeforeComponent key={i} {...props} />))}
-      {(isCustomLayout ? ((isShowTitles || !isBusinessesPage) && !loadingOrders && !loading && !isBusinessesLoading) : ((isShowTitles || !isBusinessesPage) && !hideOrders)) && (
+      {(isCustomLayout ? ((isShowTitles || !isBusinessesPage) && !loading && !isBusinessesLoading) : ((isShowTitles || !isBusinessesPage) && !hideOrders)) && (
         <>
           {orders.length > 0 && (
             <OptionTitle isBusinessesPage={isBusinessesPage}>
@@ -241,7 +228,7 @@ const OrdersOptionUI = (props) => {
         />
       )}
 
-      {(isCustomLayout ? (loadingOrders || loading || businesses?.loading) : showSkeletons) && (
+      {(isCustomLayout ? (loading || businesses?.loading) : showSkeletons) && (
         <>
           {(businesses?.loading && isBusiness) ? (
             <BusinessControllerSkeleton>
@@ -316,8 +303,7 @@ const OrdersOptionUI = (props) => {
           )}
         </>
       )}
-
-      {(isCustomLayout ? !loadingOrders && !loading && !error && orders.length > 0 && !isBusinessesLoading && !hideOrders : !loading && !error && orders.length > 0 && !hideOrders) && (
+      {(isCustomLayout ? !loading && !error && orders.length > 0 && !isBusinessesLoading && !hideOrders : !loading && !error && orders.length > 0 && !hideOrders) && (
         horizontal ? (
           <HorizontalOrdersLayout
             businessesIds={businessesIds}

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

@@ -2,9 +2,8 @@ import styled, { css } from 'styled-components'
 
 export const OptionTitle = styled.div`
   width: 100%;
-  margin: ${({ isBusinessesPage }) => isBusinessesPage ? '10px 20px 0' : '0 auto'};
-  padding: ${({ isBusinessesPage }) => !isBusinessesPage && '0 15px'};
-
+  margin: ${({ isBusinessesPage }) => isBusinessesPage ? '0' : '0 auto'};
+  padding: ${({ isBusinessesPage }) => isBusinessesPage ? '10px 20px 0' : '0 15px'};
   h1{
     text-transform: capitalize;
     font-size: 18px;
@@ -12,7 +11,7 @@ export const OptionTitle = styled.div`
   }
 
   @media (min-width: 768px){
-    padding: 0;
+    padding: ${({ isBusinessesPage }) => isBusinessesPage ? '10px 20px 0' : '0'};
     width: 100%;
   }
 `

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
+        })
+      }
     }
   }
 
@@ -118,7 +132,7 @@ const PageBannerUI = (props) => {
         pageBannerState.banner?.items?.length > 0 && (
           <BannerContainer>
             <Swiper
-              navigation
+              navigation={pageBannerState.banner?.items?.length > 1}
               spaceBetween={0}
               shortSwipes={false}
               loop={pageBannerState.banner?.items.length > 1}

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

@@ -182,6 +182,7 @@ const PhoneAutocompleteUI = (props) => {
           fieldsNotValid={props.fieldsNotValid}
           useChekoutFileds
           isCustomerMode
+          isPopup
         />
       </Modal>
       <Modal

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

@@ -420,13 +420,13 @@ const SignUpFormUI = (props) => {
                                         placeholder={t(field.code.toUpperCase(), field.name)}
                                         onChange={handleChangeInputEmail}
                                         ref={formMethods.register({
-                                          required: isRequiredField(field.code)
+                                          required: !isCustomerMode && isRequiredField(field.code)
                                             ? t('VALIDATION_ERROR_EMAIL_REQUIRED', 'The field Email is required').replace('_attribute_', t('EMAIL', 'Email'))
                                             : null,
                                           pattern: /^[A-Z0-9._%+-]+@[A-Z0-9.-]+\.[A-Z]{2,}$/i
                                         })}
                                         onKeyDown={preventWhiteSpaceOnKeyDown}
-                                        required={!!field.required}
+                                        required={!!field.required && !isCustomerMode}
                                         autoComplete='on'
                                         isError={formMethods.errors?.email && !notValidationFields.includes(field.code)}
                                       />
@@ -551,7 +551,7 @@ const SignUpFormUI = (props) => {
               )}
 
               <CheckboxArea>
-                {(signUpTab === 'default') && (
+                {(signUpTab === 'default') && !isCustomerMode && (
                   <PromotionsWrapper>
                     <Checkbox
                       name='promotions'
@@ -566,7 +566,7 @@ const SignUpFormUI = (props) => {
                   </PromotionsWrapper>
                 )}
 
-                {configs?.terms_and_conditions?.value === 'true' && (
+                {configs?.terms_and_conditions?.value === 'true' && !isCustomerMode && (
                   <>
                     {formMethods.errors?.acceptTerms && (
                       <ValidationText>
@@ -672,14 +672,14 @@ const SignUpFormUI = (props) => {
                 )}
               </BussinessAndDriverSignUp>
             )}
-          {hasSocialLogin && hasSocialEnabled && (
+          {hasSocialLogin && hasSocialEnabled && !isCustomerMode && (
             <LoginDivider>
               <DividerLine />
               <p>{t('OR', 'or')}</p>
               <DividerLine />
             </LoginDivider>
           )}
-          {!externalPhoneNumber && (
+          {!externalPhoneNumber && !isCustomerMode && (
             <>
               {Object.keys(configs).length > 0 ? (
                 <SocialButtons isPopup={isPopup}>

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

@@ -127,7 +127,7 @@ const UserDetailsUI = (props) => {
   }, [willVerifyOtpState])
 
   useEffect(() => {
-    if (isCheckoutPlace && requiredFields?.length === 0) {
+    if (isCheckoutPlace && requiredFields?.length === 0 && !formState?.loading) {
       setIsSuccess && setIsSuccess(true)
       onClose && onClose()
     }

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

@@ -114,4 +114,7 @@ export const PhoneContainer = styled.div`
   display: flex;
   align-items: center;
   height: 30px;
+  p {
+    margin-bottom: 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 (