ordering-ui-external 1.9.2 → 1.9.4

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

@@ -1,6 +1,6 @@
 import React, { useEffect, useState } from 'react'
 import Skeleton from 'react-loading-skeleton'
-import { BusinessProductsCategories as ProductsCategories } from 'ordering-components-external'
+import { BusinessProductsCategories as ProductsCategories, useOrderingTheme } from 'ordering-components-external'
 import { AutoScroll } from '../../../../../components/AutoScroll'
 import { useTheme } from 'styled-components'
 
@@ -21,9 +21,12 @@ const BusinessProductsCategoriesUI = (props) => {
   } = props
 
   const theme = useTheme()
+  const [orderingTheme] = useOrderingTheme()
   const [selectedCategory, setSelectedCateogry] = useState({ id: null })
   const scrollTopSpan = 60
 
+  const isChew = orderingTheme?.theme?.header?.components?.layout?.type?.toLowerCase() === 'chew'
+
   const handleChangeCategory = (category) => {
     const isBlockScroll = window.location.search.includes('category') &&
       window.location.search.includes('product')
@@ -118,12 +121,14 @@ const BusinessProductsCategoriesUI = (props) => {
     if (typeof useKioskApp === 'undefined') return
     const styleSheet = document.getElementById('styles').sheet
 
+    const disabledCustomWidth = isChew
+
     let style0 = '.sticky-prod-cat {'
     style0 += 'position: fixed !important;'
     style0 += 'top: 0px !important;'
     style0 += 'left: 0px !important;'
     style0 += 'padding: 5px 5px 0px 5px !important;'
-    style0 += `width: calc(100% - ${useKioskApp ? '50px' : '155px'}) !important;`
+    !disabledCustomWidth && (style0 += `width: calc(100% - ${useKioskApp ? '50px' : '155px'}) !important;`)
     style0 += '}'
 
     let style1 = '.sticky-search {'
@@ -140,7 +145,7 @@ const BusinessProductsCategoriesUI = (props) => {
 
     window.addEventListener('scroll', handleScroll)
     return () => window.removeEventListener('scroll', handleScroll)
-  }, [useKioskApp])
+  }, [useKioskApp, isChew])
 
   useEffect(() => {
     if (business?.professionals?.length > 0 && !useKioskApp) {

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

@@ -134,22 +134,19 @@ const BusinessProductsListUI = (props) => {
               )}
             </HeaderWrapper>
             <ProductsListing>
-              {
-                productsCategorySelected
-                  ?.filter(product => product?.category_id === category?.id)
-                  ?.map((product, i) => (
-                    <SingleProductCard
-                      key={i}
-                      isSoldOut={(product.inventoried && !product.quantity)}
-                      product={product}
-                      useKioskApp={useKioskApp}
-                      businessId={businessId}
-                      onProductClick={onProductClick}
-                      isCartOnProductsList={isCartOnProductsList}
-                      handleUpdateProducts={handleUpdateProducts}
-                      productAddedToCartLength={currentCart?.products?.reduce((productsLength, Cproduct) => { return productsLength + (Cproduct?.id === product?.id ? Cproduct?.quantity : 0) }, 0)}
-                    />
-                  ))
+              {productsCategorySelected.map((product, i) => (
+                <SingleProductCard
+                  key={i}
+                  isSoldOut={(product.inventoried && !product.quantity)}
+                  product={product}
+                  useKioskApp={useKioskApp}
+                  businessId={businessId}
+                  onProductClick={onProductClick}
+                  isCartOnProductsList={isCartOnProductsList}
+                  handleUpdateProducts={handleUpdateProducts}
+                  productAddedToCartLength={currentCart?.products?.reduce((productsLength, Cproduct) => { return productsLength + (Cproduct?.id === product?.id ? Cproduct?.quantity : 0) }, 0)}
+                />
+              ))
               }
             </ProductsListing>
             {isSearchMode && category?.subcategories?.length > 0 && category?.subcategories?.filter(subcategory => productsCategorySelected?.some(product => product?.category_id === subcategory?.id))?.map(subcategory => (
@@ -196,6 +193,19 @@ const BusinessProductsListUI = (props) => {
                           productAddedToCartLength={currentCart?.products?.reduce((productsLength, Cproduct) => { return productsLength + (Cproduct?.id === product?.id ? Cproduct?.quantity : 0) }, 0)}
                         />
                       ))}
+                      {!categoryState?.loading && categoryState?.products?.length > 9 && (
+                        <SingleProductCard
+                          useCustomFunctionality
+                          onCustomClick={() => onClickCategory(category)}
+                          isCartOnProductsList={isCartOnProductsList}
+                          handleUpdateProducts={handleUpdateProducts}
+                          customText={t('MORE', 'More')}
+                          customStyle={{
+                            display: 'flex',
+                            justifyContent: 'center'
+                          }}
+                        />
+                      )}
                     </ProductsListing>
                   </WrapAllCategories>
                 )
@@ -256,7 +266,7 @@ const BusinessProductsListUI = (props) => {
                       <ProductsListing isSubcategorySearch={isSubcategorySearch}>
                         {isSearchMode && category?.subcategories?.length > 0 ? (
                           <>
-                            {products?.filter(product => product?.category_id === category?.id)?.map((product, i) => (
+                            {products?.filter((product, i) => i < 9 && product?.category_id === category?.id)?.map((product, i) => (
                               <SingleProductCard
                                 key={i}
                                 isSoldOut={product.inventoried && !product.quantity}
@@ -269,11 +279,24 @@ const BusinessProductsListUI = (props) => {
                                 productAddedToCartLength={currentCart?.products?.reduce((productsLength, Cproduct) => { return productsLength + (Cproduct?.id === product?.id ? Cproduct?.quantity : 0) }, 0)}
                               />
                             ))}
+                            {!categoryState?.loading && products?.length > 9 && (
+                              <SingleProductCard
+                                useCustomFunctionality
+                                onCustomClick={() => onClickCategory(category)}
+                                isCartOnProductsList={isCartOnProductsList}
+                                handleUpdateProducts={handleUpdateProducts}
+                                customText={t('MORE', 'More')}
+                                customStyle={{
+                                  display: 'flex',
+                                  justifyContent: 'center'
+                                }}
+                              />
+                            )}
                           </>
                         ) : (
                           <>
                             {
-                              products.map((product, i) => (
+                              products.filter((_, i) => i < 9).map((product, i) => (
                                 <SingleProductCard
                                   key={i}
                                   isSoldOut={product.inventoried && !product.quantity}
@@ -287,6 +310,19 @@ const BusinessProductsListUI = (props) => {
                                 />
                               ))
                             }
+                            {!categoryState?.loading && products?.length > 9 && (
+                              <SingleProductCard
+                                useCustomFunctionality
+                                onCustomClick={() => onClickCategory(category)}
+                                isCartOnProductsList={isCartOnProductsList}
+                                handleUpdateProducts={handleUpdateProducts}
+                                customText={t('MORE', 'More')}
+                                customStyle={{
+                                  display: 'flex',
+                                  justifyContent: 'center'
+                                }}
+                              />
+                            )}
                           </>
                         )}
                         {

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

@@ -26,7 +26,9 @@ import {
   BusinessCartContent,
   EmptyCart,
   EmptyBtnWrapper,
-  Title
+  Title,
+  HeaderContent,
+  OrderContextUIWrapper
 } from './styles'
 
 import { NotFoundSource } from '../NotFoundSource'
@@ -42,6 +44,8 @@ import { Alert } from '../../../../../components/Confirm'
 import { FloatingButton } from '../../../../../components/FloatingButton'
 import { UpsellingPage } from '../../../../../components/UpsellingPage'
 import { ServiceForm } from '../ServiceForm'
+import { OrderContextUI } from '../OrderContextUI'
+
 const PIXELS_TO_SCROLL = 300
 
 const BusinessProductsListingUI = (props) => {
@@ -284,7 +288,15 @@ const BusinessProductsListingUI = (props) => {
     <>
       <ProductsContainer>
         {!props.useKioskApp && (
-          <ArrowLeft onClick={() => handleGoToBusinessList()} />
+          // <ArrowLeft onClick={() => handleGoToBusinessList()} />
+          <HeaderContent>
+            <ArrowLeft className='back-arrow' onClick={() => handleGoToBusinessList()} />
+            {windowSize?.width < 576 && (
+              <OrderContextUIWrapper>
+                <OrderContextUI isCheckOut />
+              </OrderContextUIWrapper>
+            )}
+          </HeaderContent>
         )}
         <RenderProductsLayout
           errors={errors}

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

@@ -3,12 +3,6 @@ import styled, { css } from 'styled-components'
 export const ProductsContainer = styled.div`
   width: 95%;
   margin: 20px auto 0px;
-  > svg {
-    color: ${props => props.theme.colors.headingColor};
-    font-size: 24px;
-    cursor: pointer;
-    margin-bottom: 5px;
-  }
 `
 
 export const ProductLoading = styled.div`
@@ -135,3 +129,21 @@ export const EmptyBtnWrapper = styled.div`
     padding-right: 25px;
   }
 `
+
+export const HeaderContent = styled.div`
+  display: flex;
+  align-items: center;
+  margin-bottom: 10px;
+  .back-arrow {
+    font-size: 24px;
+    cursor: pointer;
+  }
+`
+export const OrderContextUIWrapper = styled.div`
+  flex: 1;
+  width: 100%;
+  ${props => props.theme.rtl && css`
+    margin-left: 0px;
+    margin-right: 15px;
+  `}
+`