ordering-ui-external 1.1.7 → 1.2.1

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

@@ -0,0 +1,60 @@
+import styled, { css } from 'styled-components'
+
+export const Container = styled.div`
+  padding-top: 30px;
+  margin-right: 30px;
+  ${props => props.theme.rtl && css`
+    margin-left: 30px;
+    margin-right: 0px;
+  `}
+  ${({ isGroceries }) => isGroceries && css`
+    padding-top: 0px;
+    margin-right: 0px;
+    margin-left: 0px;
+  `}
+`
+
+export const ContentHeader = styled.div`
+  margin-bottom: 27px;
+
+  > h2 {
+    font-weight: 600;
+    font-size: 24px;
+    line-height: 36px;
+    margin: 0px;
+  }
+  p {
+    font-weight: 400;
+    font-size: 14px;
+    line-height: 24px;
+    margin: 0px;
+    color: ${props => props.theme.colors.darkGray};
+  }
+  ${({ isGroceries }) => isGroceries && css`
+    ${props => props.theme.rtl ? css`
+      margin-right: 10px;
+    ` : css`
+      margin-left: 10px;
+    `}
+  `}
+`
+
+export const ProductListWrapper = styled.div`
+  overflow: auto hidden;
+  width: 100%;
+  ::-webkit-scrollbar {
+    width: 6px;
+    height: 6px;
+  }
+`
+
+export const ProductList = styled.div`
+  display: flex;
+  flex-direction: row;
+  box-sizing: border-box;
+  align-items: center;
+
+  #orderItAgain > div {
+    width: 350px;
+  }
+`

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

@@ -817,6 +817,7 @@ const ProductOptionsUI = (props) => {
 export const ProductForm = (props) => {
   const productOptionsProps = {
     ...props,
+    productCart: { quantity: props?.product?.minimum_per_order || 1 },
     UIComponent: ProductOptionsUI
   }
 

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

@@ -1,12 +1,15 @@
 import React, { useState } from 'react'
 import { useLanguage } from 'ordering-components-external'
 import FaUserAlt from '@meronex/icons/fa/FaUserAlt'
+import { Heart as DisLike, HeartFill as Like } from 'react-bootstrap-icons'
 import {
   Container,
   ProfessionalItem,
   ProfessionalPhoto,
   ContentWrapper,
-  ProfessionalListing
+  ProfessionalListing,
+  InfoWrapper,
+  HeartIconWrapper
 } from './styles'
 import { Modal } from '../Modal'
 import { ProfessionalProfile } from '../ProfessionalProfile'
@@ -53,7 +56,12 @@ export const ProfessionalFilter = (props) => {
                   onClick={() => handleOpenProfile(professional)}
                 >
                   {professional?.photo ? <ProfessionalPhoto bgimage={professional?.photo} /> : <FaUserAlt />}
-                  <p className='name'>{professional?.name} {professional?.lastname}</p>
+                  <InfoWrapper>
+                    <p className='name'>{professional?.name} {professional?.lastname}</p>
+                    <HeartIconWrapper>
+                      {professional?.favorite ? <Like /> : <DisLike />}
+                    </HeartIconWrapper>
+                  </InfoWrapper>
                 </ProfessionalItem>
               ))}
             </AutoScroll>

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

@@ -32,9 +32,14 @@ export const ProfessionalItem = styled.div`
     height: 42px;
     width: 42px;
     min-width: 42px;
+    margin-right: 12px;
+    ${props => props.theme.rtl && css`
+      margin-left: 12px;
+      margin-right: 0px;
+    `}
   }
 
-  > p {
+  p {
     font-weight: 400;
     font-size: 14px;
     line-height: 24px;
@@ -42,14 +47,6 @@ export const ProfessionalItem = styled.div`
     white-space: nowrap;
     overflow: hidden;
     text-overflow: ellipsis;
-
-    &.name {
-      margin-left: 12px;
-      ${props => props.theme.rtl && css`
-        margin-right: 12px;
-        margin-left: 0px;
-      `}
-    }
   }
 
   ${({ active }) => active && css`
@@ -68,6 +65,11 @@ const ProfessionalPhotoStyled = styled.div`
   width: 42px;
   min-width: 42px;
   border-radius: 7.6px;
+  margin-right: 12px;
+  ${props => props.theme.rtl && css`
+    margin-left: 12px;
+    margin-right: 0px;
+  `}
 `
 export const ProfessionalPhoto = (props) => {
   const style = {}
@@ -89,3 +91,16 @@ export const ContentWrapper = styled.div`
 export const ProfessionalListing = styled.div`
   display: flex;
 `
+
+export const InfoWrapper = styled.div`
+  width: calc(100% - 54px);
+`
+
+export const HeartIconWrapper = styled.div`
+  display: flex;
+  justify-content: flex-end;
+  svg {
+    color: ${props => props.theme.colors.danger500};
+      font-size: 16px;
+  }
+`

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

@@ -40,6 +40,7 @@ import { SearchProducts as SearchProductsOld } from '../../../../../components/R
 import { SearchProducts as SearchProductsStarbucks } from '../../../../six/src/components/BusinessProductsListing/SearchProducts'
 import { ProfessionalFilter } from '../ProfessionalFilter'
 import { SearchIconWrapper } from '../BusinessBasicInformation/styles'
+import { OrderItAgain } from '../OrderItAgain'
 
 const layoutOne = 'groceries'
 
@@ -234,6 +235,13 @@ export const RenderProductsLayout = (props) => {
                         />
                       </ProfessionalFilterWrapper>
                     )}
+                    {!business?.loading && business?.previously_products?.length > 0 && (
+                      <OrderItAgain
+                        onProductClick={onProductClick}
+                        productList={business?.previously_products}
+                        businessId={business?.id}
+                      />
+                    )}
                     <BusinessLayoutProductsList
                       categories={[
                         { id: null, name: t('ALL', theme?.defaultLanguages?.ALL || 'All') },
@@ -333,7 +341,15 @@ export const RenderProductsLayout = (props) => {
                     )}
                   </BusinessCategoriesContainer>
                   <BusinessCategoryProductWrapper>
-                    <WrapContent>
+                    <WrapContent isGroceries>
+                      {!business?.loading && business?.previously_products?.length > 0 && (
+                        <OrderItAgain
+                          onProductClick={onProductClick}
+                          productList={business?.previously_products}
+                          businessId={business?.id}
+                          isGroceries
+                        />
+                      )}
                       <BusinessLayoutProductsList
                         categories={[
                           { id: null, name: t('ALL', theme?.defaultLanguages?.ALL || 'All') },

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

@@ -12,9 +12,12 @@ export const WrappLayout = styled.div``
 
 export const WrapContent = styled.div`
   padding: 5px;
-  margin-top: 70px;
   background: ${props => props.theme.colors.backgroundPage};
 
+  ${({ isGroceries }) => !isGroceries && css`
+    margin-top: 70px;
+  `}
+
   @media (min-width: 576px) {
     padding: 0px;
   }
@@ -51,7 +54,7 @@ export const BusinessCategoryProductWrapper = styled.div`
   }
 
   @media (min-width: 1000px) {
-    width: ${({ showCartOnProductList }) => showCartOnProductList ? '70%' : '100%'};
+    width: ${({ showCartOnProductList }) => showCartOnProductList ? '70%' : '85%'};
   }
 `
 

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

@@ -9,15 +9,18 @@ export const ActionBlock = styled.div`
   justify-content: space-between;
   margin-top: 30px;
   width: 100%;
+
   span {
     cursor: pointer;
     font-weight: 600;
     font-size: 16px;
     user-select: none;
   }
+
   button {
     font-size: 14px;
     padding: 6px 20px;
+
     svg {
       color: white;
       font-size: 21px;
@@ -40,6 +43,7 @@ export const HandReviewWrapper = styled.div`
   display: flex;
   align-items: center;
   justify-content: space-between;
+
   p {
     font-size: 15px;
     color: ${props => props.theme?.colors.headingColor};
@@ -58,16 +62,19 @@ export const HandReviewContent = styled.div`
 
 export const HandIconWrapper = styled.span`
   margin-left: 15px;
+
   ${props => props.theme?.rtl && css`
     margin-right: 15px;
     margin-left: 0;
   `}
+
   svg {
     font-size: 24px;
     color: #B1BCCC;
     cursor: pointer;
     transition: all 0.3s linear;
   }
+
   ${({ active }) => active && css`
     svg {
       color: ${props => props.theme?.colors.primary};
@@ -86,6 +93,7 @@ export const AddCommentHideShow = styled.p`
   transition: all 0.3s linear;
   color: #909BA9;
   font-size: 13px;
+
   &:hover {
     color: ${props => props.theme?.colors.primary};
   }
@@ -97,12 +105,14 @@ export const AddCommentHideShow = styled.p`
 
 export const Comments = styled.div`
   margin-top: 50px;
+
   p {
     margin-top: 0;
     margin-bottom: 8px;
     font-size: 14px;
     color: #344050;
   }
+
   textarea {
     width: 100%;
     box-sizing: border-box;
@@ -124,18 +134,22 @@ export const ButtonCustomized = styled(Button)`
   background: #E9ECEF;
   border: 1px solid #E9ECEF;
   transition: all 0.3s linear;
+
   ${props => props.theme?.rtl && css`
     margin-left: 18px;
     margin-right: 0;
   `}
+
   svg {
     vertical-align: middle;
     margin-left: 5px;
+
     ${props => props.theme?.rtl && css`
       margin-right: 5px;
       margin-left: 0;
     `}
   }
+
   ${({ active }) => active && css`
     background: ${props => props.theme?.colors.primary};
     border: 1px solid ${props => props.theme?.colors.primary};

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

@@ -33,7 +33,8 @@ import {
   NameWrapper,
   StatusInfo,
   DropDownWrapper,
-  DropDownTitle
+  DropDownTitle,
+  EmptyProfessional
 } from './styles'
 import moment from 'moment'
 SwiperCore.use([Navigation])
@@ -201,31 +202,35 @@ const ServiceFormUI = (props) => {
           </SectionHeader>
           <ProfessionalSelectWrapper ref={dropDownRef}>
             <SelectedItem onClick={() => setIsDropDown(prev => !prev)}>
-              <InfoWrapper>
-                {currentProfessional?.photo ? (
-                  <ProfessionalPhoto
-                    bgimage={currentProfessional?.photo}
-                  />
-                ) : <FaUserAlt />}
-                <NameWrapper>
-                  <p>{currentProfessional?.name} {currentProfessional?.lastname}</p>
-                  <StatusInfo available={!isBusyTime()}>
-                    {isBusyTime(currentProfessional) ? (
-                      <>
-                        <span className='status'>{t('BUSY_ON_SELECTED_TIME', 'Busy on selected time')}</span>
-                      </>
-                    ) : (
-                      <span className='status'>{t('AVAILABLE', 'Available')}</span>
-                    )}
-                  </StatusInfo>
-                </NameWrapper>
-              </InfoWrapper>
+              {currentProfessional ? (
+                <InfoWrapper>
+                  {currentProfessional?.photo ? (
+                    <ProfessionalPhoto
+                      bgimage={currentProfessional?.photo}
+                    />
+                  ) : <FaUserAlt />}
+                  <NameWrapper>
+                    <p>{currentProfessional?.name} {currentProfessional?.lastname}</p>
+                    <StatusInfo available={!isBusyTime()}>
+                      {isBusyTime(currentProfessional) ? (
+                        <>
+                          <span className='status'>{t('BUSY_ON_SELECTED_TIME', 'Busy on selected time')}</span>
+                        </>
+                      ) : (
+                        <span className='status'>{t('AVAILABLE', 'Available')}</span>
+                      )}
+                    </StatusInfo>
+                  </NameWrapper>
+                </InfoWrapper>
+              ) : (
+                <p>{t('SELECT_PROFESSIONAL', 'Select professional')}</p>
+              )}
               <ChevronDown />
             </SelectedItem>
             {isDropDown && (
               <DropDownWrapper>
                 <DropDownTitle>{t('ANY_PROFESSIONAL_MEMBER', 'Any professional member')}</DropDownTitle>
-                {professionalList?.map((professional) => professional?.products?.includes(product?.id) && (
+                {professionalList?.map((professional) => (
                   <SelectedItem
                     key={professional?.id}
                     isDropDown
@@ -263,7 +268,7 @@ const ServiceFormUI = (props) => {
             <h2>{t('SCHEDULE', 'Schedule')}</h2>
             <span>{t('REQUIRED', 'Required')}</span>
           </SectionHeader>
-          {currentProfessional && (
+          {currentProfessional ? (
             <BusinessPreorder
               business={currentProfessional}
               isProfessional
@@ -271,6 +276,10 @@ const ServiceFormUI = (props) => {
               onChangeMoment={setDateSelected}
               useOrderContext={false}
             />
+          ) : (
+            <EmptyProfessional>
+              {t('NO_SCHEDULE', 'No schedule')}
+            </EmptyProfessional>
           )}
         </ScheduleWrapper>
         <ButtonWrapper>

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

@@ -190,6 +190,8 @@ export const DropDownWrapper = styled.div`
   width: 100%;
   z-index: 10;
   box-sizing: border-box;
+  max-height: 263px;
+  overflow: auto;
 `
 
 export const SelectedItem = styled.div`
@@ -203,6 +205,11 @@ export const SelectedItem = styled.div`
   cursor: pointer;
   transition: all 0.3s linear;
 
+  > p {
+    margin: 0px;
+    line-height: 42px;
+  }
+
   ${({ isDropDown }) => isDropDown && css`
     border: none;
     padding: 12px 0px;
@@ -295,3 +302,12 @@ export const StatusInfo = styled.div`
     }
   `}
 `
+
+export const EmptyProfessional = styled.div`
+  min-height: 100px;
+  margin-bottom: 100px;
+  text-align: center;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+`

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

@@ -1,5 +1,5 @@
 import React, { useState } from 'react'
-import { useLanguage, useUtils, useConfig, useOrder, SingleOrderCard as SingleOrderCardController } from 'ordering-components-external'
+import { useLanguage, useUtils, useConfig, useOrder, useOrderingTheme, SingleOrderCard as SingleOrderCardController } from 'ordering-components-external'
 import { Heart as DisLike, HeartFill as Like } from 'react-bootstrap-icons'
 import { ReviewOrder } from '../ReviewOrder'
 import { ReviewProduct } from '../ReviewProduct'
@@ -28,7 +28,6 @@ import {
 import {
   BusinessInformation
 } from '../OrdersOption/styles'
-import { useOrderingTheme } from 'ordering-components-external/_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()
@@ -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