ordering-ui-external 1.1.6 → 1.2.0

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

@@ -11,7 +11,7 @@ import BiStore from '@meronex/icons/bi/BiStore'
 import FaUserCircle from '@meronex/icons/fa/FaUserCircle'
 import BiHelpCircle from '@meronex/icons/bi/BiHelpCircle'
 import SiJsonwebtokens from '@meronex/icons/si/SiJsonwebtokens'
-import { Heart } from 'react-bootstrap-icons'
+import { Heart, Tag } from 'react-bootstrap-icons'
 
 import { useEvent, useLanguage, useOrder, useSession, useConfig } from 'ordering-components-external'
 import { useTheme } from 'styled-components'
@@ -50,6 +50,7 @@ export const SidebarMenu = (props) => {
   const [modalPageToShow, setModalPageToShow] = useState(null)
 
   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 closeModal = () => {
     setModalIsOpen(false)
@@ -251,6 +252,36 @@ export const SidebarMenu = (props) => {
                   </WrappContent>
                 </MenuLink>
               )}
+              {isPromotionsEnabled && (
+                <MenuLink
+                  onClick={() => handleGoToPage({ page: 'promotions' })}
+                >
+                  <WrappContent>
+                    <MenuLinkIcon
+                      active={
+                        window.location.pathname === '/promotions'
+                      }
+                    >
+                      <Tag />
+                    </MenuLinkIcon>
+                    <MenuLinkText>
+                      <TextInfo
+                        active={
+                          window.location.pathname === '/promotions'
+                        }
+                      >
+                        {t('PROMOTIONS', 'Promotions')}
+                      </TextInfo>
+                    </MenuLinkText>
+                    <MenuLinkSeparator>
+                      <div>
+                        <hr />
+                      </div>
+                    </MenuLinkSeparator>
+                  </WrappContent>
+                </MenuLink>
+              )}
+
               <MenuLink
                 onClick={() => handleGoToPage({ page: 'help' })}
               >

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

@@ -28,7 +28,7 @@ import {
 import {
   BusinessInformation
 } from '../OrdersOption/styles'
-import { useOrderingTheme } from 'ordering-components-external/_modules/contexts/OrderingThemeContext'
+import { useOrderingTheme } from 'ordering-components/_modules/contexts/OrderingThemeContext'
 
 const SingleOrderCardUI = (props) => {
   const {

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

@@ -20,6 +20,7 @@ import {
   QuantityContainer,
   RibbonBox,
   TitleWrapper,
+  LastOrder,
   SkeletonCardInfo,
   SkeletonCardLogo
 } from './styles'
@@ -39,13 +40,14 @@ const SingleProductCardUI = (props) => {
     useKioskApp,
     productAddedToCartLength,
     handleFavoriteProduct,
-    isFavorite
+    isFavorite,
+    isPreviously
   } = props
 
   const [, t] = useLanguage()
   const [$element, isObserved] = useIntersectionObserver()
   const [stateConfig] = useConfig()
-  const [{ parsePrice, optimizeImage }] = useUtils()
+  const [{ parsePrice, optimizeImage, parseDate }] = useUtils()
   const [orderState] = useOrder()
   const [{ auth }, { login }] = useSession()
   const [orderingTheme] = useOrderingTheme()
@@ -67,7 +69,7 @@ const SingleProductCardUI = (props) => {
 
   const maxCartProductConfig = (stateConfig.configs.max_product_amount ? parseInt(stateConfig.configs.max_product_amount) : 100) - totalBalance
 
-  const hideAddButton = orderingTheme?.theme?.business_view?.components?.products?.components?.add_to_cart_button?.hidden
+  const hideAddButton = theme?.business_view?.components?.products?.components?.add_to_cart_button?.hidden ?? true
   // const productsRows = theme?.layouts?.business_view?.components?.products?.components?.layout?.rows
 
   let maxCartProductInventory = (product?.inventoried ? product?.quantity : undefined) - totalBalance
@@ -127,6 +129,7 @@ const SingleProductCardUI = (props) => {
         isCartOnProductsList={isCartOnProductsList}
         style={useCustomFunctionality && customStyle}
         className='product-card'
+        isShowAddButt={!useCustomFunctionality && !hideAddButton && !isSkeleton}
       // productsRows={productsRows}
       >
         {isObservedValidation ? (
@@ -138,10 +141,10 @@ const SingleProductCardUI = (props) => {
                     <span>{productAddedToCartLength}</span>
                   </QuantityContainer>
                 )}
-                <CardInfo soldOut={isSoldOut || maxProductQuantity <= 0} isBgimage={optimizeImage(product?.images, 'h_86,c_limit')}>
+                <CardInfo soldOut={isSoldOut || maxProductQuantity <= 0} isBgimage={optimizeImage(product?.images, 'h_86,c_limit')} oneLine={isPreviously}>
                   <TitleWrapper>
                     {!isSkeleton ? (<h1>{product?.name}</h1>) : (<Skeleton width={100} />)}
-                    {!useKioskApp && (
+                    {!useKioskApp && !isPreviously && (
                       !isSkeleton ? (
                         <span onClick={() => handleChangeFavorite()} ref={favoriteRef}>
                           {product?.favorite ? <Like /> : <DisLike />}
@@ -160,6 +163,7 @@ const SingleProductCardUI = (props) => {
                     <Skeleton width={100} />
                   )}
                   {!isSkeleton ? (<p>{product?.description}</p>) : (<Skeleton width={100} />)}
+                  {isPreviously && (!isSkeleton ? (<LastOrder>{t('LAST_ORDERED_ON', 'Last ordered on')} {parseDate(product?.last_ordered_date, { outputFormat: 'MMM DD, YYYY' })}</LastOrder>) : (<Skeleton width={80} />))}
                 </CardInfo>
                 {!isSkeleton ? (
                   <WrapLogo isBgimage={optimizeImage(product?.images, 'h_86,c_limit')}>
@@ -200,7 +204,7 @@ const SingleProductCardUI = (props) => {
             </SkeletonCardLogo>
           </div>
         )}
-        {!useCustomFunctionality && typeof hideAddButton !== 'undefined' && !hideAddButton && !isSkeleton && (
+        {!useCustomFunctionality && !hideAddButton && !isSkeleton && (
           <Button outline color='primary'>
             {t('ADD', 'Add')}
           </Button>

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

@@ -2,8 +2,10 @@ import React from 'react'
 import styled, { css } from 'styled-components'
 
 export const CardContainer = styled.div`
-  min-height: 162px;
-  max-height: 162px;
+  ${({ isShowAddButt }) => css`
+    min-height: ${isShowAddButt ? '162px' : '110px'};
+    max-height: ${isShowAddButt ? '162px' : '110px'};
+  `}
   background: ${({ soldOut }) => soldOut ? '#6c757d33' : '#FFF'};
   border: 1px solid #E9ECEF;
   padding: 10px;
@@ -21,18 +23,18 @@ export const CardContainer = styled.div`
     margin-top: 10px;
   }
   ${({ productsRows }) => productsRows ? css`
-    width: ${() => productsRows === 3 ? 'calc(33% - 40px)' : 'calc(50% - 40px)'};
+    width: ${() => productsRows === 3 ? 'calc(33% - 20px)' : 'calc(50% - 20px)'};
     margin: 10px;
   ` : css`
     width: 100%;
     margin: 10px 0px;
     @media (min-width: 576px) {
       margin: 10px;
-      width: calc(100% - 40px);
+      width: calc(100% - 20px);
     }
   ${({ isCartOnProductsList }) => isCartOnProductsList ? css`
     @media (min-width: 993px) {
-      width: calc(50% - 40px);
+      width: calc(50% - 20px);
       margin: 10px 20px 10px 0px;
       ${props => props.theme?.rtl && css`
         margin: 10px 0px 10px 20px;
@@ -40,10 +42,10 @@ export const CardContainer = styled.div`
     }
   ` : css`
     @media (min-width: 681px) {
-      width: calc(49% - 40px);
+      width: calc(49% - 20px);
     }
     @media (min-width: 1440px) {
-      width: calc(33% - 40px);
+      width: calc(33% - 20px);
       margin: 10px 20px 10px 0px;
       ${props => props.theme?.rtl && css`
         margin: 10px 0px 10px 20px;
@@ -103,6 +105,11 @@ export const CardInfo = styled.div`
     color: ${props => props.theme.colors.darkTextColor};
     font-size: 14px;
   }
+  ${({ oneLine }) => oneLine && css`
+    p {
+      -webkit-line-clamp: 1;
+    }
+  `}
   @media (min-width: 1024px) {
     p {
       font-size: 12px;
@@ -216,6 +223,13 @@ export const RibbonBox = styled.div`
   `}
 `
 
+export const LastOrder = styled.span`
+  color: ${props => props.theme.colors.primary};
+  font-weight: 400;
+  font-size: 10px !important;
+  margin: 0px 3px;
+`
+
 export const TitleWrapper = styled.div`
   display: flex;
   align-items: center;

package/src/themes/four/src/components/BusinessBasicInformation/index.js

@@ -159,23 +159,21 @@ export const BusinessBasicInformation = (props) => {
               </BusinessInfoItem>
             </BusinessInfo>
           </BusinessContent>
-          {!errorQuantityProducts && (
-            <WrapperSearch>
-              <SearchBar
-                onSearch={handleChangeSearch}
-                search={searchValue}
-                placeholder={t('SEARCH_PRODUCTS', theme?.defaultLanguages?.SEARCH_PRODUCTS || 'Search Products')}
-                lazyLoad={businessState?.business?.lazy_load_products_recommended}
-              />
-              <Select
-                notAsync
-                notReload
-                options={sortByOptions}
-                defaultValue={sortByValue}
-                onChange={(val) => handleChangeSortBy && handleChangeSortBy(val)}
-              />
-            </WrapperSearch>
-          )}
+          <WrapperSearch>
+            <SearchBar
+              onSearch={handleChangeSearch}
+              search={searchValue}
+              placeholder={t('SEARCH_PRODUCTS', theme?.defaultLanguages?.SEARCH_PRODUCTS || 'Search Products')}
+              lazyLoad={businessState?.business?.lazy_load_products_recommended}
+            />
+            <Select
+              notAsync
+              notReload
+              options={sortByOptions}
+              defaultValue={sortByValue}
+              onChange={(val) => handleChangeSortBy && handleChangeSortBy(val)}
+            />
+          </WrapperSearch>
         </BusinessInnerContainer>
 
         <Modal