ordering-ui-external 1.0.0 → 1.1.1

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

@@ -18,8 +18,12 @@ const BusinessProductsCategoriesUI = (props) => {
   } = props
 
   const [selectedCategory, setSelectedCateogry] = useState({ id: null })
+  const scrollTopSpan = 60
 
   const handleChangeCategory = (category) => {
+    const isBlockScroll = window.location.search.includes('category') &&
+      window.location.search.includes('product')
+
     if (business?.lazy_load_products_recommended) {
       handlerClickCategory({ ...category })
       return
@@ -27,11 +31,13 @@ const BusinessProductsCategoriesUI = (props) => {
     let topPos = 0
     if (!category?.id) topPos = document.getElementById('businessProductList')?.offsetTop
     else topPos = document.getElementById(`category${category.id}`)?.offsetTop
-    window.scroll({
-      top: topPos - 60,
-      left: 0,
-      behavior: 'smooth'
-    })
+    if (!isBlockScroll) {
+      window.scroll({
+        top: topPos - scrollTopSpan,
+        left: 0,
+        behavior: 'smooth'
+      })
+    }
   }
 
   const ProductCategories = () => {
@@ -39,6 +45,7 @@ const BusinessProductsCategoriesUI = (props) => {
       categories && categories.length && categories.map((category, i) => (
         <Tab
           key={i}
+          id={`category-menu${category?.id || '-all'}`}
           className={`category ${category.id === 'featured' ? 'special' : ''}`}
           active={business?.lazy_load_products_recommended ? (categorySelected?.id === category.id) : (selectedCategory?.id === category.id)}
           onClick={() => handleChangeCategory(category)}
@@ -50,66 +57,90 @@ const BusinessProductsCategoriesUI = (props) => {
     )
   }
 
-  useEffect(() => {
-    const handleScroll = () => {
-      if (business?.lazy_load_products_recommended) return
-      const featuredElement = document.getElementById('categoryfeatured')
-      const _categories = featuredElement ? [...categories] : categories.filter(category => category.id !== 'featured')
-      _categories?.length && _categories.forEach(category => {
-        const windowTop = window.scrollY
-        let topPos = 0
-        if (!category?.id) topPos = document.getElementById('businessProductList')?.offsetTop
-        else topPos = document.getElementById(`category${category.id}`)?.offsetTop
-
-        if (windowTop >= (topPos - 60)) {
-          setSelectedCateogry(category)
+  const handleScroll = () => {
+    if (business?.lazy_load_products_recommended) return
+    const featuredElement = document.getElementById('categoryfeatured')
+    const _categories = featuredElement ? [...categories] : categories.filter(category => category.id !== 'featured')
+
+    const windowTop = window.scrollY
+    const categoryListsElement = document.getElementById('category-lists')
+    const categoryAreaWidth = categoryListsElement?.clientWidth || 0
+    const categoryScrollChange = categoryListsElement?.scrollLeft
+
+    const _diff = -50
+    const _moveDiff = 30
+
+    _categories?.length && _categories.some(category => {
+      const topPos = category?.id ? document.getElementById(`category${category.id}`)?.offsetTop
+        : document.getElementById('businessProductList')?.offsetTop
+
+      if (topPos - windowTop < scrollTopSpan + 5 && topPos - windowTop > 0 && category?.id) {
+        const choosedCategory = document.getElementById(`category-menu${category?.id || '-all'}`)
+        const choosedCategoryLeft = choosedCategory?.offsetLeft || 0
+
+        if (choosedCategoryLeft - categoryAreaWidth - categoryScrollChange > _diff || categoryScrollChange - choosedCategoryLeft > 0) {
+          const moveAmount = (choosedCategoryLeft < 100) ? 0 : choosedCategoryLeft - _moveDiff
+          categoryListsElement.scrollTo({
+            top: 0,
+            left: moveAmount,
+            behavior: 'smooth'
+          })
         }
-      })
+        setSelectedCateogry(category)
+        return true
+      }
+    })
+
+    const navbar = document.getElementById('category-lists')
+    const cart = document.getElementById('BusinessCartContainer')
+    const search = document.getElementById('WrapperSearchAbsolute')
+    const wrapperCategories = document.getElementById('wrapper-categories')
+    const limit = window.pageYOffset >= wrapperCategories?.offsetTop && window.pageYOffset > 0
 
-      const navbar = document.getElementById('category-lists')
-      const cart = document.getElementById('BusinessCartContainer')
-      const search = document.getElementById('WrapperSearchAbsolute')
-      const wrapperCategories = document.getElementById('wrapper-categories')
-
-      const styleSheet = document.getElementById('styles').sheet
-
-      let style0 = '.sticky-prod-cat {'
-      style0 += 'position: fixed !important;'
-      style0 += 'top: 0 !important;'
-      style0 += 'width: 65.5% !important;'
-      style0 += '}'
-
-      let style1 = '.sticky-prod-cart {'
-      style1 += 'position: fixed !important;'
-      style1 += 'top: 0 !important;'
-      style1 += 'right: 2.5% !important;'
-      style1 += 'width: 28.5% !important;'
-      style1 += '}'
-
-      let style2 = '.sticky-search {'
-      style2 += 'position: fixed !important;'
-      style2 += 'top: 10px !important;'
-      style2 += 'right: 32% !important;'
-      style2 += 'height: 50px !important;'
-      style2 += 'z-index: 9999 !important;'
-      style2 += '}'
-
-      styleSheet.insertRule(style0, 0)
-      styleSheet.insertRule(style1, 1)
-      styleSheet.insertRule(style2, 2)
-
-      const limit = window.pageYOffset >= wrapperCategories?.offsetTop && window.pageYOffset > 0
-
-      if (limit) {
+    if (limit) {
+      const classAdded = navbar.classList.contains('sticky-prod-cat')
+      if (!classAdded) {
         navbar && navbar.classList.add('sticky-prod-cat')
         cart && cart.classList.add('sticky-prod-cart')
         search && search.classList.add('sticky-search')
-      } else {
-        navbar && navbar.classList.remove('sticky-prod-cat')
-        cart && cart.classList.remove('sticky-prod-cart')
-        search && search.classList.remove('sticky-search')
       }
+    } else {
+      navbar && navbar.classList.remove('sticky-prod-cat')
+      cart && cart.classList.remove('sticky-prod-cart')
+      search && search.classList.remove('sticky-search')
     }
+  }
+
+  useEffect(() => {
+    const styleSheet = document.getElementById('styles').sheet
+
+    let style0 = '.sticky-prod-cat {'
+    style0 += 'position: fixed !important;'
+    style0 += 'top: 0 !important;'
+    style0 += 'width: 97% !important;'
+    style0 += 'padding: 15px 5px 0px 0px;'
+    style0 += '}'
+
+    let style1 = '.sticky-prod-cart {'
+    style1 += 'position: fixed !important;'
+    style1 += 'top: 0 !important;'
+    style1 += 'right: 2.5% !important;'
+    style1 += 'width: 28.5% !important;'
+    style1 += 'margin-top: 32px !important;'
+    style1 += '}'
+
+    let style2 = '.sticky-search {'
+    style2 += 'position: fixed !important;'
+    style2 += 'top: 10px !important;'
+    style2 += 'right: 32% !important;'
+    style2 += 'height: 50px !important;'
+    style2 += 'z-index: 9999 !important;'
+    style2 += '}'
+
+    styleSheet.insertRule(style0, 0)
+    styleSheet.insertRule(style1, 1)
+    styleSheet.insertRule(style2, 2)
+
     window.addEventListener('scroll', handleScroll)
     return () => window.removeEventListener('scroll', handleScroll)
   }, [])

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

@@ -6,7 +6,7 @@ export const CategoriesContainer = styled.div`
   padding: 5px 0px 0px 0px;
   background: ${props => props.theme.colors.backgroundPage};
   z-index: 1000;
-  position: sticky;
+  position: absolute;
   top: 0;
   border-bottom: 1px solid #D9D9D9;
   text-align: center;

package/src/themes/five/src/components/BusinessProductsList/layouts/groceries/index.js

@@ -50,7 +50,7 @@ const BusinessProductsListUI = (props) => {
   return (
     <ProductsContainer>
       {category?.id && (
-        <WrapAllCategories id='container'>
+        <WrapAllCategories id='container' isCategorySelected>
           <HeaderWrapper>
             <div className='category-title'>
               {

package/src/themes/five/src/components/BusinessProductsList/layouts/groceries/styles.js

@@ -22,12 +22,13 @@ export const WrapAllCategories = styled.div`
   .category-title {
     display: flex;
     align-items: center;
+    justify-content: ${({ isCategorySelected }) => isCategorySelected ? 'flex-start' : 'space-between'};
     margin-left: 10px;
-    width: 100%;
     ${props => props.theme?.rtl && css`
       margin-right: 10px;
       margin-left: 0;
     `}
+
     img {
       border-radius: 7.6px;
       min-width: 41px;
@@ -52,6 +53,7 @@ export const WrapAllCategories = styled.div`
       cursor: pointer;
     }
   }
+
   .wrap-header {
     display: flex;
     justify-content: space-between;
@@ -114,16 +116,20 @@ export const RibbonBox = styled.div`
   -webkit-line-clamp: 2;
   overflow: hidden;
   margin-left: 5px;
+
   ${props => props.theme.rtl && css`
     margin-left: 0px;
     margin-right: 5px;
   `}
+
   ${({ bgColor }) => bgColor && css`
     background-color: ${bgColor};
   `}
+
   ${({ isRoundRect }) => isRoundRect && css`
     border-radius: 7.6px;
   `}
+
   ${({ isCapsule }) => isCapsule && css`
     border-radius: 50px;
   `}

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

@@ -31,6 +31,7 @@ export const WrapAllCategories = styled.div`
       margin-right: 10px;
       margin-left: 0;
     `}
+
     img {
       border-radius: 7.6px;
       min-width: 41px;
@@ -43,10 +44,12 @@ export const WrapAllCategories = styled.div`
         margin-right: 0;
       `}
     }
+
     @media (min-width: 993px) {
       margin: 0px;
     }
   }
+
   h3 {
     font-weight: 600;
     font-size: 24px;
@@ -55,6 +58,7 @@ export const WrapAllCategories = styled.div`
     ${props => props.theme?.rtl && css`
       margin: 0px 10px 0px 0px;
     `}
+
     @media (min-width: 993px) {
       margin: 0px;
     }
@@ -104,9 +108,6 @@ export const DescriptionModalContainer = styled.div`
     min-height: 200px;
     margin-bottom: 20px;
   }
-  p{
-    white-space: pre;
-  }
 `
 
 export const DescriptionContainer = styled.div`
@@ -141,16 +142,20 @@ export const RibbonBox = styled.div`
   -webkit-line-clamp: 2;
   overflow: hidden;
   margin-left: 5px;
+
   ${props => props.theme.rtl && css`
     margin-left: 0px;
     margin-right: 5px;
   `}
+
   ${({ bgColor }) => bgColor && css`
     background-color: ${bgColor};
   `}
+
   ${({ isRoundRect }) => isRoundRect && css`
     border-radius: 7.6px;
   `}
+
   ${({ isCapsule }) => isCapsule && css`
     border-radius: 50px;
   `}

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

@@ -1,6 +1,6 @@
 import React from 'react'
 import Skeleton from 'react-loading-skeleton'
-import { BusinessReviews as BusinessReviewController, useLanguage } from 'ordering-components-external'
+import { BusinessReviews as BusinessReviewController, useLanguage, useOrderingTheme } from 'ordering-components-external'
 import { useTheme } from '../../../../../contexts/ThemeContext'
 import moment from 'moment'
 
@@ -28,12 +28,20 @@ export const BusinessReviewsUI = (props) => {
   const { stars, reviewsList, handleClickOption } = props
   const [, t] = useLanguage()
   const [theme] = useTheme()
-
+  const [orderingTheme] = useOrderingTheme()
   const handleOnChange = (evt) => {
     if (evt.target.value === '') handleClickOption('all')
     else handleClickOption(evt.target.value)
   }
 
+  const showRanking = !orderingTheme?.theme?.business_view?.components?.reviews?.components?.ranking?.hidden
+  const showReviewDate = !orderingTheme?.theme?.business_view?.components?.reviews?.components?.review_date?.hidden
+  const showCustomerComments = !orderingTheme?.theme?.business_view?.components?.reviews?.components?.customer_comments?.hidden
+  const showSearch = !orderingTheme?.theme?.business_view?.components?.reviews?.components?.search?.hidden
+  const hideElement = !(!showReviewDate && !showCustomerComments)
+
+  const reviewPoints = [t('TERRIBLE', 'Terrible'), t('BAD', 'Bad'), t('OKAY', 'Okay'), t('GOOD', 'Good'), t('GREAT', 'Great')]
+
   return (
     <>
       {props.beforeElements?.map((BeforeElement, i) => (
@@ -57,61 +65,81 @@ export const BusinessReviewsUI = (props) => {
                 )
               }
             </ReviewsHeaderWrapper>
-            <ReviewOf>
-              {!reviewsList.loading
-                ? (
-                  <SearchContainer>
-                    <input
-                      type='number'
-                      min='1'
-                      max='5'
-                      onChange={handleOnChange}
-                      placeholder={t('SEARCH', 'Search')}
-                      style={{ backgroundImage: `url(${theme?.images?.general?.searchIcon})` }}
-                    />
-                  </SearchContainer>
-                )
-                : <Skeleton width={200} height={30} />}
-            </ReviewOf>
-            <ReviewsProgressWrapper>
-              <p>{t('REVIEW_ORDER', 'Review order')}</p>
-              <ReviewsProgressContent>
-                <ReviewsProgressBar style={{ width: `${(stars / 5) * 100}%` }} />
-                <ReviewsMarkPoint style={{ left: theme.rtl ? 'initial' : '0', right: theme?.rtl ? '0' : 'initial' }}>{t('TERRIBLE', 'Terrible')}</ReviewsMarkPoint>
-                <ReviewsMarkPoint style={{ left: theme.rtl ? 'initial' : '25%', right: theme?.rtl ? '25%' : 'initial' }}>{t('BAD', 'Bad')}</ReviewsMarkPoint>
-                <ReviewsMarkPoint style={{ left: theme.rtl ? 'initial' : '50%', right: theme?.rtl ? '50%' : 'initial' }}>{t('OKAY', 'Okay')}</ReviewsMarkPoint>
-                <ReviewsMarkPoint style={{ left: theme.rtl ? 'initial' : '75%', right: theme?.rtl ? '75%' : 'initial' }}>{t('GOOD', 'Good')}</ReviewsMarkPoint>
-                <ReviewsMarkPoint style={{ left: theme.rtl ? '0' : 'initial', right: theme?.rtl ? 'initial' : '0' }}>{t('GREAT', 'Great')}</ReviewsMarkPoint>
-              </ReviewsProgressContent>
-            </ReviewsProgressWrapper>
-            <Content id='content'>
-              {!reviewsList.loading ? reviewsList?.reviews.map((review) => (
-                <Review key={review.id} id='review'>
-                  <ReviewItemHeader>
-                    <ReviewTime>{moment(review?.created_at).format('LLL')}</ReviewTime>
-                  </ReviewItemHeader>
-                  <ReviewItemContent>{review?.comment}</ReviewItemContent>
-                </Review>
-              )) : (
-                <>
-                  {[...Array(2)].map((item, i) => (
-                    <SkeletonContainer key={i}>
-                      <div>
-                        <Skeleton width={100} height={30} />
-                        <Skeleton width={100} />
-                      </div>
-                      <div>
-                        <Skeleton width={150} height={50} />
-                      </div>
-                    </SkeletonContainer>
-                  ))}
+            {showSearch && (
+              <ReviewOf>
+                {!reviewsList.loading
+                  ? (
+                    <SearchContainer>
+                      <input
+                        type='number'
+                        min='1'
+                        max='5'
+                        onChange={handleOnChange}
+                        placeholder={t('SEARCH', 'Search')}
+                        style={{ backgroundImage: `url(${theme?.images?.general?.searchIcon})` }}
+                      />
+                    </SearchContainer>
+                  )
+                  : <Skeleton width={200} height={30} />}
+              </ReviewOf>
+            )}
+            {showRanking && (
+              <ReviewsProgressWrapper>
+                <p>{t('REVIEW_ORDER', 'Review order')}</p>
+                <ReviewsProgressContent>
+                  <ReviewsProgressBar style={{ width: `${(stars / 5) * 100}%` }} />
+                  {reviewPoints.map((reviewPoint, i) => {
+                    const isLastReviewPoint = i === reviewPoints?.length - 1
+                    return (
+                      <ReviewsMarkPoint
+                        key={i}
+                        style={{
+                          left: theme.rtl !== isLastReviewPoint ? 'initial' : `${25 * (isLastReviewPoint ? 0 : i)}%`,
+                          right: theme.rtl !== isLastReviewPoint ? `${25 * (isLastReviewPoint ? 0 : i)}%` : 'initial'
+                        }}
+                      >
+                        {reviewPoint}
+                      </ReviewsMarkPoint>
+                    )
+                  })}
+                </ReviewsProgressContent>
+              </ReviewsProgressWrapper>
+            )}
+            {hideElement && (
+              <Content id='content'>
+                {!reviewsList.loading ? reviewsList?.reviews.map((review) => (
+                  <Review key={review.id} id='review'>
+                    {showReviewDate && (
+                      <ReviewItemHeader>
+                        <ReviewTime>{moment(review?.created_at).format('LLL')}</ReviewTime>
+                      </ReviewItemHeader>
+                    )}
+                    {showCustomerComments && (
+                      <ReviewItemContent>{review?.comment}</ReviewItemContent>
+                    )}
+                  </Review>
+                )) : (
+                  <>
+                    {[...Array(2)].map((item, i) => (
+                      <SkeletonContainer key={i}>
+                        <div>
+                          <Skeleton width={100} height={30} />
+                          <Skeleton width={100} />
+                        </div>
+                        <div>
+                          <Skeleton width={150} height={50} />
+                        </div>
+                      </SkeletonContainer>
+                    ))}
+
+                  </>
+                )}
+                {!reviewsList.loading && reviewsList?.reviews.length === 0 && (
+                  <ReviewsNotFound>{t('NO_REVIEWS', 'No reviews')}</ReviewsNotFound>
+                )}
+              </Content>
+            )}
 
-                </>
-              )}
-              {!reviewsList.loading && reviewsList?.reviews.length === 0 && (
-                <ReviewsNotFound>{t('NO_REVIEWS', 'No reviews')}</ReviewsNotFound>
-              )}
-            </Content>
           </>
         )}
       </BusinessReviewsContainer>

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

@@ -3,18 +3,19 @@ import { OriginalBusinessesListing } from './layouts/OriginalBusinessesListing'
 import { RedBusinessesListing } from './layouts/RedBusinessesListing'
 import { StarbucksBusinessesListing } from './layouts/StarbucksBusinessesListing'
 import { BusinessListing as AppointmentsBusinessListing } from './layouts/AppointmentsBusinessListing'
-import { useTheme } from 'styled-components'
+import { useOrderingTheme } from 'ordering-components-external'
 
 export const BusinessesListing = (props) => {
-  const theme = useTheme()
-  const layout = theme?.layouts?.business_view?.components?.layout?.type || 'original'
+  const { logosLayout } = props
+  const [orderingTheme] = useOrderingTheme()
+  const layout = orderingTheme?.theme?.business_listing_view?.components?.layout?.type || 'original'
 
   return (
     <>
-      {(layout === 'original') && <OriginalBusinessesListing {...props} />}
-      {(layout === 'starbucks') && <StarbucksBusinessesListing {...props} />}
-      {(layout === 'red') && <RedBusinessesListing {...props} />}
-      {(layout === 'appointments') && <AppointmentsBusinessListing {...props} />}
+      {(layout === 'original' || logosLayout) && <OriginalBusinessesListing {...props} />}
+      {(layout === 'starbucks') && !logosLayout && <StarbucksBusinessesListing {...props} />}
+      {(layout === 'red') && !logosLayout && <RedBusinessesListing {...props} />}
+      {(layout === 'appointments') && !logosLayout && <AppointmentsBusinessListing {...props} />}
     </>
   )
 }

package/src/themes/five/src/components/BusinessesListing/layouts/AppointmentsBusinessListing/index.js

@@ -1,5 +1,6 @@
 import React, { useState, useEffect, useCallback } from 'react'
 import { SearchBar } from '../../../SearchBar'
+import FiFilter from '@meronex/icons/fi/FiFilter'
 import {
   useLanguage,
   useOrder,
@@ -63,7 +64,8 @@ const BusinessListingUI = (props) => {
     handleChangeSearch,
     handleBusinessClick,
     businessTypeSelected,
-    handleUpdateBusinessList
+    handleUpdateBusinessList,
+    onRedirectPage
   } = props
 
   const [, t] = useLanguage()
@@ -137,7 +139,11 @@ const BusinessListingUI = (props) => {
             search={searchValue}
             onSearch={handleChangeSearch}
             placeholder={t('SEARCH_BUSINESSES', 'Search Businesses')}
+            handleCustomEnter={term => configState?.configs?.advanced_business_search_enabled?.value === '1' && onRedirectPage({ page: 'business_search' })}
           />
+          {configState?.configs?.advanced_business_search_enabled?.value === '1' && (
+            <FiFilter onClick={() => onRedirectPage({ page: 'business_search' })} />
+          )}
         </WrapperSearch>
         <FilterWrapper>
           <TypeFilterWrapper>
@@ -152,7 +158,7 @@ const BusinessListingUI = (props) => {
           <PriceFilterWrapper>
             <h3>{t('PRICE', 'Price')}</h3>
             <PriceFilterListWrapper>
-              {priceList.slice(0, 3).map((price, i) => (
+              {priceList.map((price, i) => (
                 <Button
                   key={i}
                   color={(priceLevelSelected === price?.level) ? 'primary' : 'lightGray'}
@@ -168,7 +174,7 @@ const BusinessListingUI = (props) => {
         <PreorderAndBusinessWrapper>
           <PreorderWrapper>
             <PreorderContent>
-              <h2>{t('AVAILABLE_POINTS', 'Available points')}</h2>
+              <h2>{t('AVAILABLE_APPOINTMENTS', 'Available appointments')}</h2>
               <AddressWrapper>
                 <AddressHeader>
                   <h2>{t('ADDRESS', 'Address')}</h2>

package/src/themes/five/src/components/BusinessesListing/layouts/AppointmentsBusinessListing/styles.js

@@ -12,6 +12,11 @@ export const BusinessListContainer = styled.div`
 `
 
 export const WrapperSearch = styled.div`
+  display: flex;
+  align-items: center;
+  > svg {
+    margin: 0px 5px
+  }
   input {
     width: 100%;
   }
@@ -118,7 +123,8 @@ export const PreorderWrapper = styled.div`
   }
 
   @media (min-width: 800px) {
-    width: 300px;
+    width: 350px;
+    min-width: 350px;
   }
 `
 
@@ -222,7 +228,7 @@ export const BusinessList = styled.div`
 
   @media (min-width: 576px) {
     margin-left: -20px;
-    width: calc(100% + 40px);
+    width: 100%;
   }
 `
 

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

@@ -1,5 +1,5 @@
 import React, { useState, useEffect } from 'react'
-import { Cart as CartController, useOrder, useLanguage, useEvent, useUtils, useValidationFields, useConfig } from 'ordering-components-external'
+import { Cart as CartController, useOrder, useLanguage, useEvent, useUtils, useValidationFields, useConfig, useOrderingTheme, useSite } from 'ordering-components-external'
 import { Button } from '../../styles/Buttons'
 import { ProductItemAccordion } from '../ProductItemAccordion'
 import { BusinessItemAccordion } from '../BusinessItemAccordion'
@@ -61,8 +61,10 @@ const CartUI = (props) => {
   const [orderState] = useOrder()
   const [events] = useEvent()
   const [{ parsePrice, parseNumber, parseDate }] = useUtils()
+  const [orderingTheme] = useOrderingTheme()
   const [validationFields] = useValidationFields()
   const [{ configs }] = useConfig()
+  const [{ site }] = useSite()
   const windowSize = useWindowSize()
 
   const [confirm, setConfirm] = useState({ open: false, content: null, handleOnAccept: null })
@@ -74,12 +76,15 @@ const CartUI = (props) => {
   const [isUpselling, setIsUpselling] = useState(false)
   const [openChangeStore, setOpenChangeStore] = useState(false)
 
+  const businessUrlTemplate = site?.business_url_template || '/store/:business_slug'
+
   const isCouponEnabled = validationFields?.fields?.checkout?.coupon?.enabled
   const checkoutMultiBusinessEnabled = configs?.checkout_multi_business_enabled?.value === '1'
   const openCarts = (Object.values(orderState?.carts)?.filter(cart => cart?.products && cart?.products?.length && cart?.status !== 2 && cart?.valid_schedule && cart?.valid_products && cart?.valid_address && cart?.valid_maximum && cart?.valid_minimum) || null) || []
 
   const cart = orderState?.carts?.[`businessId:${props.cart.business_id}`]
-
+  const viewString = isStore ? 'business_view' : 'header'
+  const hideCartComments = orderingTheme?.theme?.[viewString]?.components?.cart?.components?.comments?.hidden
   const walletName = {
     cash: {
       name: t('PAY_WITH_CASH_WALLET', 'Pay with Cash Wallet')
@@ -120,7 +125,12 @@ const CartUI = (props) => {
   }
 
   const handleStoreRedirect = (slug) => {
-    events.emit('go_to_page', { page: 'business', params: { store: slug } })
+    if (businessUrlTemplate === '/store/:business_slug' || businessUrlTemplate === '/:business_slug') {
+      events.emit('go_to_page', { page: 'business', params: { business_slug: slug } })
+    } else {
+      events.emit('go_to_page', { page: 'business', search: `?${businessUrlTemplate.split('?')[1].replace(':business_slug', '')}${slug}` })
+    }
+
     if (windowSize.width <= 768) {
       onClickCheckout && onClickCheckout()
     }
@@ -240,6 +250,7 @@ const CartUI = (props) => {
                 offsetDisabled={offsetDisabled}
                 onDeleteProduct={handleDeleteClick}
                 onEditProduct={handleEditProduct}
+                isStore={isStore}
               />
             ))}
             {!cart?.valid_products && (
@@ -407,7 +418,7 @@ const CartUI = (props) => {
                     </tr>
                   </tbody>
                 </table>
-                {cart?.status !== 2 && (
+                {cart?.status !== 2 && !hideCartComments && (
                   <table className='comments'>
                     <tbody>
                       <tr>