ordering-ui-external 1.7.2 → 1.8.0

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

@@ -14,7 +14,8 @@ import {
   OfferData,
   Code,
   BusinessInfo,
-  OfferView
+  OfferView,
+  OfferInfoWrapper
 } from './styles'
 import { SearchBar } from '../SearchBar'
 import { Button } from '../../styles/Buttons'
@@ -22,6 +23,7 @@ import { Modal } from '../Modal'
 import Skeleton from 'react-loading-skeleton'
 import { NotFoundSource } from '../NotFoundSource'
 import { checkSiteUrl } from '../../../../../utils'
+import { useTheme } from 'styled-components'
 
 const PromotionsUI = (props) => {
   const {
@@ -32,6 +34,7 @@ const PromotionsUI = (props) => {
     setOfferSelected
   } = props
   const [, t] = useLanguage()
+  const theme = useTheme()
   const [{ parseDate, parsePrice }] = useUtils()
   const [events] = useEvent()
   const [openModal, setOpenModal] = useState(false)
@@ -93,21 +96,24 @@ const PromotionsUI = (props) => {
       )}
       {!offersState?.loading && offersState.offers?.length > 0 && filteredOffers?.map(offer => (
         <SingleOfferContainer key={offer.id}>
-          <OfferInformation>
-            <h2>{offer?.name}</h2>
-            <Description>{offer?.description}</Description>
-            <ExpiresAt>
-              {t('EXPIRES', 'Expires')} {parseDate(offer?.end, { outputFormat: 'MMM DD, YYYY' })}
-            </ExpiresAt>
-            <AvailableBusinesses>
-              <p>{t('APPLY_FOR', 'Apply for')}:</p>
-              <p>
-                {offer.businesses.map((business, i) => (
-                  <React.Fragment key={business?.id}>{' '}{business?.name}{i + 1 < offer.businesses?.length ? ',' : ''}</React.Fragment>
-                ))}
-              </p>
-            </AvailableBusinesses>
-          </OfferInformation>
+          <OfferInfoWrapper>
+            <BusinessLogo bgimage={offer?.image || theme.images?.dummies?.businessLogo} />
+            <OfferInformation>
+              <h2>{offer?.name}</h2>
+              <Description>{offer?.description}</Description>
+              <ExpiresAt>
+                {t('EXPIRES', 'Expires')} {parseDate(offer?.end, { outputFormat: 'MMM DD, YYYY' })}
+              </ExpiresAt>
+              <AvailableBusinesses>
+                <p>{t('APPLY_FOR', 'Apply for')}:</p>
+                <p>
+                  {offer.businesses.map((business, i) => (
+                    <React.Fragment key={business?.id}>{' '}{business?.name}{i + 1 < offer.businesses?.length ? ',' : ''}</React.Fragment>
+                  ))}
+                </p>
+              </AvailableBusinesses>
+            </OfferInformation>
+          </OfferInfoWrapper>
           <Button
             color='primary'
             onClick={() => handleClickOffer(offer)}

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

@@ -63,11 +63,18 @@ export const ExpiresAt = styled.p`
   color: #414954;
 `
 
+export const OfferInfoWrapper = styled.div`
+  display: flex;
+  gap: 10px;
+  max-width: 70%;
+  align-items: center;
+`
+
 export const OfferInformation = styled.div`
   display: flex;
   flex-direction: column;
   justify-content: space-between;
-  width: 70%;
+  width: 50%;
   ${({ isSkeleton }) => isSkeleton && css`
     width: 100%;
   `}
@@ -76,12 +83,12 @@ export const OfferInformation = styled.div`
     text-overflow: ellipsis;
     display: -webkit-box;
     -webkit-line-clamp: 2;
-    line-clamp: 2; 
+    line-clamp: 2;
     -webkit-box-orient: vertical;
     font-size: 14px;
   }
   @media (min-width: 720px){
-    width: 80%;
+    width: 70%;
     h2{
       font-size: 16px;
     }
@@ -105,7 +112,6 @@ export const SearchBarContainer = styled.div`
 `
 
 const BusinessLogoStyled = styled.div`
-  display: flex;
   width: 65px;
   height: 65px;
   box-sizing: border-box;

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

@@ -2,8 +2,8 @@ import React, { useState, useEffect } from 'react'
 import { useTheme } from 'styled-components'
 import { useLanguage, useConfig, useUtils, useOrderingTheme } from 'ordering-components-external'
 import CgSearch from '@meronex/icons/cg/CgSearch'
+import BsCaretLeftFill from '@meronex/icons/bs/BsCaretLeftFill'
 import { Cart3 } from 'react-bootstrap-icons'
-
 import { BusinessBasicInformation } from '../BusinessBasicInformation'
 import { BusinessBasicInformation as BusinessBasicInformationRed } from '../../../../seven'
 import { BusinessBasicInformation as BusinessBasicInformationStarbucks } from '../../../../six'
@@ -32,7 +32,9 @@ import {
   WrapperSearch,
   ProfessionalFilterWrapper,
   WrapperSearchAbsolute,
-  NearBusiness
+  NearBusiness,
+  PageBannerWrapper,
+  CategorySelectedContainer
 } from './styles'
 
 import { SearchProducts as SearchProductsOriginal } from '../../../../../themes/five/src/components/SearchProducts'
@@ -42,6 +44,8 @@ import { ProfessionalFilter } from '../ProfessionalFilter'
 import { SearchIconWrapper } from '../BusinessBasicInformation/styles'
 import { OrderItAgain } from '../OrderItAgain'
 import { ProfessionalBusinessFilter } from '../ProfessionalBusinessFilter'
+import { PageBanner } from '../PageBanner'
+import { useWindowSize } from '../../../../../hooks/useWindowSize'
 
 const layoutOne = 'groceries'
 
@@ -90,9 +94,10 @@ export const RenderProductsLayout = (props) => {
   const [{ configs }] = useConfig()
   const [{ parsePrice }] = useUtils()
   const [orderingTheme] = useOrderingTheme()
+  const windowSize = useWindowSize()
   const [isCartModal, setisCartModal] = useState(false)
   const [openSearchProducts, setOpenSearchProducts] = useState(false)
-
+  const [categoryClicked, setCategoryClicked] = useState(false)
   const isUseParentCategory = (configs?.use_parent_category?.value === 'true' || configs?.use_parent_category?.value === '1') && !useKioskApp
   const BusinessBasicInformationComponent =
     orderingTheme?.theme?.business_view?.components?.header?.components?.layout?.type === 'red'
@@ -104,9 +109,9 @@ export const RenderProductsLayout = (props) => {
           : BusinessBasicInformation
 
   const SearchProductsComponent =
-    orderingTheme?.theme?.business_view?.components?.product_search?.components?.layout?.type === 'old'
+    theme?.business_view?.components?.product_search?.components?.layout?.type === 'old'
       ? SearchProductsOld
-      : orderingTheme?.theme?.business_view?.components?.product_search?.components?.layout?.type === 'starbucks'
+      : theme?.business_view?.components?.product_search?.components?.layout?.type === 'starbucks'
         ? SearchProductsStarbucks
         : null
 
@@ -126,6 +131,9 @@ export const RenderProductsLayout = (props) => {
     : BusinessProductsList
 
   const handleSaveProduct = () => {
+    if (windowSize.width < 993) {
+      return
+    }
     const productContainer = document.getElementsByClassName('bp-list')[0]
     scrollTo(productContainer, 500, 1250)
   }
@@ -163,8 +171,14 @@ export const RenderProductsLayout = (props) => {
                 categoryState={categoryState}
                 errorQuantityProducts={errorQuantityProducts}
                 sortByValue={sortByValue}
+                categoryClicked={categoryClicked}
               />
             )}
+
+            <PageBannerWrapper>
+              <PageBanner position='web_business_page' />
+            </PageBannerWrapper>
+
             {!errorQuantityProducts && SearchProductsComponent && !useKioskApp && (
               <>
                 <WrapperSearch>
@@ -340,61 +354,72 @@ export const RenderProductsLayout = (props) => {
                 <BusinessContent>
                   <BusinessCategoriesContainer offSticky>
                     {!(business?.categories?.length === 0 && !categoryId) && (
-                      <BusinessLayoutCategories
-                        component='categories'
-                        categories={[
-                          { id: null, name: t('ALL', theme?.defaultLanguages?.ALL || 'All') },
-                          { id: 'featured', name: t('FEATURED', theme?.defaultLanguages?.FEATURED || 'Featured') },
-                          ...business?.categories.sort((a, b) => a.rank - b.rank)
-                        ]}
-                        categorySelected={categorySelected}
-                        onClickCategory={onClickCategory}
-                        featured={featuredProducts}
-                        openBusinessInformation={openBusinessInformation}
-                        openCategories={openCategories}
-                        business={business}
-                        currentCart={currentCart}
-                        useKioskApp={useKioskApp}
-                      />
+                      <>
+                        {(!categoryClicked || windowSize.width >= 993) ? (
+                          <BusinessLayoutCategories
+                            component='categories'
+                            categories={[
+                              { id: null, name: t('ALL', theme?.defaultLanguages?.ALL || 'All') },
+                              { id: 'featured', name: t('FEATURED', theme?.defaultLanguages?.FEATURED || 'Featured') },
+                              ...business?.categories.sort((a, b) => a.rank - b.rank)
+                            ]}
+                            categorySelected={categorySelected}
+                            onClickCategory={onClickCategory}
+                            featured={featuredProducts}
+                            openBusinessInformation={openBusinessInformation}
+                            openCategories={openCategories}
+                            business={business}
+                            currentCart={currentCart}
+                            useKioskApp={useKioskApp}
+                            setCategoryClicked={setCategoryClicked}
+                          />
+                        ) : (
+                          <CategorySelectedContainer onClick={() => setCategoryClicked(false)}>
+                            <BsCaretLeftFill /> {categorySelected?.name}
+                          </CategorySelectedContainer>
+                        )}
+                      </>
                     )}
                   </BusinessCategoriesContainer>
-                  <BusinessCategoryProductWrapper>
-                    <WrapContent isGroceries>
-                      {!business?.loading && business?.previously_products?.length > 0 && (
-                        <OrderItAgain
-                          onProductClick={onProductClick}
-                          productList={business?.previously_products}
+                  {(categoryClicked || windowSize.width >= 993) && (
+                    <BusinessCategoryProductWrapper>
+                      <WrapContent isGroceries id='groceries'>
+                        {!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') },
+                            { id: 'featured', name: t('FEATURED', theme?.defaultLanguages?.FEATURED || 'Featured') },
+                            ...business?.categories.sort((a, b) => a.rank - b.rank)
+                          ]}
+                          category={categorySelected}
+                          onClickCategory={onClickCategory}
+                          categoriesState={props.categoriesState}
+                          categoryState={categoryState}
                           businessId={business?.id}
-                          isGroceries
+                          errors={errors}
+                          onProductClick={onProductClick}
+                          handleSearchRedirect={handleSearchRedirect}
+                          featured={featuredProducts}
+                          searchValue={searchValue}
+                          isCartOnProductsList={isCartOnProductsList && currentCart?.products?.length > 0}
+                          handleClearSearch={handleChangeSearch}
+                          errorQuantityProducts={errorQuantityProducts}
+                          business={business}
+                          currentCart={currentCart}
+                          handleUpdateProducts={handleUpdateProducts}
+                          professionalSelected={professionalSelected}
+                          handleChangeProfessionalSelected={handleChangeProfessionalSelected}
                         />
-                      )}
-                      <BusinessLayoutProductsList
-                        categories={[
-                          { id: null, name: t('ALL', theme?.defaultLanguages?.ALL || 'All') },
-                          { id: 'featured', name: t('FEATURED', theme?.defaultLanguages?.FEATURED || 'Featured') },
-                          ...business?.categories.sort((a, b) => a.rank - b.rank)
-                        ]}
-                        category={categorySelected}
-                        onClickCategory={onClickCategory}
-                        categoriesState={props.categoriesState}
-                        categoryState={categoryState}
-                        businessId={business?.id}
-                        errors={errors}
-                        onProductClick={onProductClick}
-                        handleSearchRedirect={handleSearchRedirect}
-                        featured={featuredProducts}
-                        searchValue={searchValue}
-                        isCartOnProductsList={isCartOnProductsList && currentCart?.products?.length > 0}
-                        handleClearSearch={handleChangeSearch}
-                        errorQuantityProducts={errorQuantityProducts}
-                        business={business}
-                        currentCart={currentCart}
-                        handleUpdateProducts={handleUpdateProducts}
-                        professionalSelected={professionalSelected}
-                        handleChangeProfessionalSelected={handleChangeProfessionalSelected}
-                      />
-                    </WrapContent>
-                  </BusinessCategoryProductWrapper>
+                      </WrapContent>
+                    </BusinessCategoryProductWrapper>
+                  )}
                 </BusinessContent>
               </>
 
@@ -424,16 +449,19 @@ export const RenderProductsLayout = (props) => {
               </div>
             </BusinessCategoryProductWrapper>
           </BusinessContent>
-          <WrapContent>
-            <BusinessProductsList
-              categories={[]}
-              useKioskApp={useKioskApp}
-              category={categorySelected}
-              categoryState={categoryState}
-              isBusinessLoading={isLoading}
-              errorQuantityProducts={errorQuantityProducts}
-            />
-          </WrapContent>
+          {(categoryClicked || windowSize.width >= 993) && (
+            <WrapContent>
+              <BusinessProductsList
+                categories={[]}
+                useKioskApp={useKioskApp}
+                category={categorySelected}
+                categoryState={categoryState}
+                isBusinessLoading={isLoading}
+                handleUpdateProducts={handleUpdateProducts}
+                errorQuantityProducts={errorQuantityProducts}
+              />
+            </WrapContent>
+          )}
         </>
       )}
       <Modal

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

@@ -13,15 +13,12 @@ export const WrappLayout = styled.div``
 export const WrapContent = styled.div`
   padding: 5px;
   background: ${props => props.theme.colors.backgroundPage};
-
   ${({ isGroceries }) => !isGroceries && css`
     margin-top: 70px;
   `}
-
   @media (min-width: 576px) {
     padding: 0px;
   }
-
   &#businessProductList {
     > div {
       margin-top: 30px;
@@ -33,7 +30,6 @@ export const BusinessContent = styled.div`
   margin-top: ${props => props.isCustomLayout ? 0 : 30}px;
   display: flex;
   flex-direction: column;
-
   @media (min-width: 993px) {
     flex-direction: row;
   }
@@ -41,18 +37,15 @@ export const BusinessContent = styled.div`
 
 export const BusinessCategoryProductWrapper = styled.div`
   width: 100%;
-
   /* Hide scrollbar for Chrome, Safari and Opera */
   .category-lists::-webkit-scrollbar {
     display: none;
   }
-
   /* Hide scrollbar for IE, Edge and Firefox */
   .category-lists {
     -ms-overflow-style: none;
     scrollbar-width: none;
   }
-
   @media (min-width: 1000px) {
     width: ${({ showCartOnProductList }) => showCartOnProductList ? '70%' : '85%'};
   }
@@ -93,26 +86,21 @@ export const BusinessCartContent = styled.div`
   margin-bottom: 30px;
   max-height: ${({ maxHeight }) => `${maxHeight}px`};
   overflow: auto;
-
   .product.accordion {
     margin: 0;
   }
-
   /* .accordion.active {
     padding-bottom: 10px;
   } */
-
   ${({ isModal }) => !isModal && css`
     border: 1px solid #E9ECEF;
     box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.12);
     border-radius: 7.6px;
   `}
-
   @media (min-width: 1200px) {
     position: sticky;
     top: 0;
   }
-
   @media (min-width: 768px) {
     padding: 35px 30px;
   }
@@ -123,13 +111,11 @@ export const EmptyCart = styled.div`
     display: flex;
     flex-direction: column;
     align-items: center;
-
     svg {
       font-size: 45px;
       color: #B1BCCC;
       margin-top: 10px;
     }
-
     p {
       font-size: 14px;
       color: #B1BCCC;
@@ -143,13 +129,11 @@ export const EmptyBtnWrapper = styled.div`
   align-items: center;
   justify-content: space-between;
   margin-top: 20px;
-
   span {
     font-weight: 600;
     font-size: 16px;
     color: ${props => props.theme.colors.darkTextColor};
   }
-
   button {
     color: #748194;
     background: #F8F9FA;
@@ -175,12 +159,10 @@ export const MobileCartViewWrapper = styled.div`
   box-sizing: border-box;
   z-index: 1000;
   box-shadow: 0px 4px 10px rgb(0 0 0 / 12%);
-
   span {
     font-weight: 600;
     font-size: 16px;
   }
-
   button {
     height: 44px;
     border-radius: 7.6px;
@@ -192,7 +174,6 @@ export const WrapperSearch = styled.div`
   display: flex;
   align-items: center;
   justify-content: flex-end;
-
   .search-bar {
     margin-right: 10px;
     ${props => props.theme?.rtl && css`
@@ -201,16 +182,13 @@ export const WrapperSearch = styled.div`
     `}
     input {
       width: 100%;
-
       @media (min-width: 500px) {
         width: 250px;
       }
     }
   }
-
   div:last-child {
     text-align: right;
-
     ${props => props.theme?.rtl && css`
       text-align: left;
     `}
@@ -241,3 +219,26 @@ export const WrapperSearchAbsolute = styled.div`
 export const NearBusiness = styled.div`
   width: 100%;
 `
+export const PageBannerWrapper = styled.div`
+  > div {
+    border-radius: 8px;
+  }
+`
+
+export const CategorySelectedContainer = styled.div`
+  display: inline;
+  margin-left: 10px;
+  color: ${({ theme }) => theme?.colors?.primary};
+  padding-right: 5px;
+  cursor: pointer;
+  p{
+    margin: 0;
+  }
+  svg {
+    position: relative;
+    top: 2px;
+    margin-right: 3px;
+    width: 14px;
+    height: 14px;
+  }
+`

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

@@ -54,7 +54,7 @@ export const SidebarContent = styled.div`
   height: 100%;
   width: 0;
   position: fixed;
-  z-index: 1005;
+  z-index: 2050;
   top: 0;
   background-color: ${({ theme }) => theme.colors.backgroundPage};
   overflow-x: hidden;

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

@@ -374,6 +374,7 @@ const SignUpFormUI = (props) => {
               isPopup={isPopup}
               onSubmit={formMethods.handleSubmit(onSubmit)}
               isSkeleton={useChekoutFileds && validationFields?.loading}
+              autoComplete='on'
             >
               {props.beforeMidElements?.map((BeforeMidElements, i) => (
                 <React.Fragment key={i}>
@@ -417,7 +418,7 @@ const SignUpFormUI = (props) => {
                                           pattern: /^[A-Z0-9._%+-]+@[A-Z0-9.-]+\.[A-Z]{2,}$/i
                                         })}
                                         required={!!field.required}
-                                        autoComplete='off'
+                                        autoComplete='on'
                                         isError={formMethods.errors?.email && !notValidationFields.includes(field.code)}
                                       />
                                       <InputBeforeIcon>

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

@@ -128,7 +128,6 @@ const SingleOrderCardUI = (props) => {
 
   const showBusinessLogo = !orderingTheme?.theme?.orders?.components?.business_logo?.hidden
   const showDate = !orderingTheme?.theme?.orders?.components?.date?.hidden
-  const showMap = !orderingTheme?.theme?.orders?.components?.map?.hidden
 
   return (
     <>
@@ -144,26 +143,6 @@ const SingleOrderCardUI = (props) => {
         isCustomerMode={isCustomerMode}
         onClick={(e) => handleClickCard(e, order?.uuid)}
       >
-        {(configs?.google_maps_api_key?.value || isBusinessesPage) && showMap && (
-          <>
-            {isSkeleton ? (
-              <Skeleton height={80} />
-            ) : (
-              <Map isBusinessesPage={isBusinessesPage}>
-                <img
-                  src={
-                    isBusinessesPage
-                      ? (order?.business?.header || order?.business?.logo || theme.images?.dummies?.businessLogo)
-                      : getGoogleMapImage(order?.business?.location, configs?.google_maps_api_key?.value)
-                  }
-                  alt={isBusinessesPage ? 'business_header' : 'google-maps-img'}
-                  height={isBusinessesPage ? '200px' : '100px'}
-                  width='400px'
-                />
-              </Map>
-            )}
-          </>
-        )}
         <Content isCustomerMode={isCustomerMode}>
           {isSkeleton ? (
             <Skeleton width={60} height={60} />