ordering-ui-external 1.7.1 → 1.8.0

package/src/components/VerticalOrdersLayout/styles.js

@@ -6,26 +6,23 @@ export const SingleCard = styled.div`
   display: flex;
   max-height: 100px;
   height: auto;
-  border: none;
+  border-bottom: 1px solid #F5F6F6;
 
   ${props => (
     props.theme.colors.backgroundPage === '#FFF' ||
     props.theme.colors.backgroundPage === '#FFFFFF'
   ) && css`
-    box-shadow: rgba(0, 0, 0, 0.2) 0px 8px 24px;
-    border-radius: 16px;
     margin-bottom: 15px;
   `}
 
   @media(min-width: 480px){
     height: 140px;
     ${props => (
-      props.theme.colors.backgroundPage === '#FFF' ||
-      props.theme.colors.backgroundPage === '#FFFFFF'
-    ) && css`
+    props.theme.colors.backgroundPage === '#FFF' ||
+    props.theme.colors.backgroundPage === '#FFFFFF'
+  ) && css`
       border-top: none !important;
     `}
-    border-top: 1px solid #ccc;
   }
 `
 
@@ -43,33 +40,61 @@ export const OrderPastContent = styled.div`
   `}
 `
 
+export const FavoriteWrapper = styled.div`
+  cursor: pointer;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  svg {
+    color: ${props => props.theme.colors.danger500};
+    font-size: 16px;
+  }
+`
+
 export const PastLogo = styled.div`
-  width: 55px;
-  height: 80%;
+  width: 75px;
+  height: 100%;
   img {
     width: 100%;
     height: 100%;
     border-radius: 17px;
     object-fit: contain;
   }
-  @media (min-width: 480px){
-    width: 75px;
-  }
+  box-shadow: rgba(0, 0, 0, 0.2) 0px 1px 10px;
 `
 
 export const WrapperBusinessTitle = styled.div`
-  width: 95%
+  width: 95%;
+  display: flex;
+  gap: 10px;
 `
 
 export const Reorder = styled.div`
   display: flex;
   flex-direction: column;
-  width: 25%;
+  width: 20%;
   text-align: center;
   align-items: center;
   justify-content: center;
   font-size: 0.8em;
-  margin-right: 25px;
+
+  button {
+    border-radius: 8px;
+    font-size: 10px;
+    line-height: 15px;
+    padding: 10px;
+    overflow: inherit;
+    text-overflow: inherit;
+    border: 1px solid ${props => props.theme.colors.primaryContrast};
+    margin: 5px 0;
+
+    &.reorder {
+      background: ${props => props.theme.colors.primaryContrast};
+      &:hover {
+        background: ${props => props.theme.colors.primary};
+      }
+    }
+  }
 
   ${props => props.theme?.rtl && css`
       margin-left: 25px;
@@ -85,19 +110,15 @@ export const Reorder = styled.div`
     -webkit-line-clamp: 2; /* number of lines to show */
     -webkit-box-orient: vertical;
   }
-  button {
-    margin: 5px 0;
-    width: 100%;
-    font-size: 0.9em;
-    white-space: nowrap;
-  }
-
   @media (min-width: 480px){
     font-size: 1em;
     button{
       width: 90%;
       font-size: 0.9em;
     }
+    flex-direction: row;
+    gap: 10px;
+    margin-right: 25px;
   }
 
   @media (min-width: 768px){
@@ -118,6 +139,24 @@ export const Reorder = styled.div`
   }
 `
 
+export const OrderInfo = styled.div`
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+
+  .dot {
+    display: none;
+  }
+
+  @media (min-width: 480px){
+    flex-direction: row;
+    align-items: center;
+    .dot {
+      display: block;
+    }
+  }
+`
+
 export const WrappButton = styled.div`
   width: 80%;
   display: flex;
@@ -139,3 +178,8 @@ export const WrappButton = styled.div`
     }
   }
 `
+export const ReviewWrapper = styled.div`
+  .review-sent {
+    border-radius: 7.6px;
+  }
+`

package/src/index.js

@@ -58,6 +58,7 @@ import { OrderSuccessModal } from './components/OrderSuccessModal'
 import { OrderTypeSelectorHeader } from './components/OrderTypeSelectorHeader'
 import { PageNotFound } from './components/PageNotFound'
 import { PagesList } from './components/PagesList'
+import { Pagination } from './themes/five/src/components/Pagination'
 import { PaymentOptionCash } from './components/PaymentOptionCash'
 import { PaymentOptionPaypal } from './components/PaymentOptionPaypal'
 import { PaymentOptions } from './components/PaymentOptions'
@@ -197,6 +198,7 @@ export {
   OrderTypeSelectorHeader,
   PageNotFound,
   PagesList,
+  Pagination,
   PaymentOptionCash,
   PaymentOptions,
   PaymentOptionStripe,

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

@@ -1,7 +1,8 @@
 import React from 'react'
 import BiCaretUp from '@meronex/icons/bi/BiCaretUp'
-
-import { CategoryTab } from './styles'
+import AiOutlineCheck from '@meronex/icons/ai/AiOutlineCheck'
+import { CategoryTab, SelectCategory } from './styles'
+import { useWindowSize } from '../../../../../hooks/useWindowSize'
 
 export const AccordionDropdown = (props) => {
   const {
@@ -13,21 +14,33 @@ export const AccordionDropdown = (props) => {
     IterateCategories
   } = props
 
+  const handleClick = (e, isSelectCategory) => {
+    e.stopPropagation()
+    handleClickItem(isSelectCategory)
+  }
+  const windowSize = useWindowSize()
   return (
     <div className='accordion-item'>
       <CategoryTab
         active={isSelected}
         className='accordion-title'
         categorySpace={spaceTab}
-        onClick={() => handleClickItem()}
+        onClick={(e) => handleClick(e, false)}
         isOpen={isOpen}
       >
-        <BiCaretUp
-          className={`accordion__icon ${isOpen ? 'rotate' : ''}`}
-        />
         <span>
           {item.name}
         </span>
+        <div>
+          {windowSize.width < 993 && (
+            <SelectCategory onClick={(e) => handleClick(e, true)}>
+              <AiOutlineCheck />
+            </SelectCategory>
+          )}
+          <BiCaretUp
+            className={`accordion__icon ${isOpen ? 'rotate' : ''}`}
+          />
+        </div>
       </CategoryTab>
       {isOpen && (
         <div className='accordion-content'>

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

@@ -19,10 +19,34 @@ export const CategoryTab = styled.div`
   }
 
   span {
-    width: 90%;
+    width: 9
+    0%;
+  }
+
+  > div {
+    display: flex;
+    align-items: center;
   }
 
   ${({ active }) => active && css`
     background-color: ${props => props.theme.colors.primaryContrast};
   `}
+  
+`
+
+export const SelectCategory = styled.div`
+  width: 40px;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  border-radius: 30px;
+  border: 1px solid ${({ theme }) => theme?.colors?.primary};
+  margin-right: 10px;
+  height: 20px;
+  svg {
+    color: ${({ theme }) => theme?.colors?.primary}
+  }
+  &:hover{
+    opacity: 0.8;
+  }
 `

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

@@ -4,6 +4,7 @@ import { darken } from 'polished'
 export const AddressListContainer = styled.div`
   display: flex;
   flex-direction: column;
+  gap: 20px;
   padding: 0;
   @media (min-width: 768px) {
         padding: 0px 10px;
@@ -20,6 +21,7 @@ export const AddressListContainer = styled.div`
     height: 50px;
     ${({ isProfile }) => !isProfile && css`
       min-width: 100px;
+      padding: 7px 70px;
     `}
   }
 `

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

@@ -42,6 +42,7 @@ import { BusinessPreorder } from '../BusinessPreorder'
 import dayjs from 'dayjs'
 import timezone from 'dayjs/plugin/timezone'
 import isBetween from 'dayjs/plugin/isBetween'
+import { useWindowSize } from '../../../../../hooks/useWindowSize'
 
 dayjs.extend(timezone)
 dayjs.extend(isBetween)
@@ -61,7 +62,8 @@ export const BusinessBasicInformation = (props) => {
     handleChangeSortBy,
     categoryState,
     errorQuantityProducts,
-    isCustomerMode
+    isCustomerMode,
+    categoryClicked
   } = props
   const { business, loading } = businessState
 
@@ -69,6 +71,7 @@ export const BusinessBasicInformation = (props) => {
   const [orderState] = useOrder()
   const [, t] = useLanguage()
   const [{ parsePrice, parseDistance, optimizeImage }] = useUtils()
+  const windowSize = useWindowSize()
   const [orderingTheme] = useOrderingTheme()
   const [isBusinessReviews, setIsBusinessReviews] = useState(false)
   const [isPreOrder, setIsPreOrder] = useState(false)
@@ -86,8 +89,9 @@ export const BusinessBasicInformation = (props) => {
   const isInfoShrunken = orderingTheme?.theme?.business_view?.components?.header?.components?.business?.components?.layout?.position === 'shrunken'
   const searchLayout = theme?.business_view?.components?.product_search?.components?.layout?.type
   const hideCity = orderingTheme?.theme?.business_view?.components?.header?.components?.business?.components?.city?.hidden
-  const layoutsWithOldSearch = ['starbucks', 'old']
-  const hideSearch = layoutsWithOldSearch.includes(orderingTheme?.theme?.business_view?.components?.product_search?.components?.layout?.type)
+  const isChew = orderingTheme?.theme?.header?.components?.layout?.type === 'Chew'
+  const layoutsWithOldSearch = ['starbucks', 'old', 'floating']
+  const hideSearch = layoutsWithOldSearch.includes(theme?.business_view?.components?.product_search?.components?.layout?.type)
   const getBusinessType = () => {
     if (Object.keys(business).length <= 0) return t('GENERAL', 'General')
     const _types = []
@@ -180,7 +184,7 @@ export const BusinessBasicInformation = (props) => {
 
   const BusinessInfoComponent = () => {
     return (
-      <BusinessInfoContainer>
+      <BusinessInfoContainer isChew={isChew}>
         <BusinessInfoContent>
           <BusinessInfo className='info'>
             <BusinessInfoItem isInfoShrunken={isInfoShrunken}>
@@ -354,9 +358,15 @@ export const BusinessBasicInformation = (props) => {
             </BusinessInfoItem>
           </BusinessInfo>
         </BusinessInfoContent>
-        {!hideSearch && (categoryState?.products?.length !== 0 || searchValue) && !errorQuantityProducts && !isInfoShrunken && !business?.professionals?.length && (
-          <SearchComponent />
-        )}
+        {!hideSearch &&
+          (categoryState?.products?.length !== 0 || searchValue) &&
+          !errorQuantityProducts &&
+          !isInfoShrunken &&
+          !business?.professionals?.length &&
+          (categoryClicked || windowSize.width >= 993) &&
+          (
+            <SearchComponent />
+          )}
       </BusinessInfoContainer>
     )
   }
@@ -384,13 +394,13 @@ export const BusinessBasicInformation = (props) => {
         />
       )}
       <BusinessInfoWrapper>
-        {!isInfoShrunken && (
+        {(!isInfoShrunken && !isChew) && (
           <BusinessInfoComponent />
         )}
         {(business?.header || business?.logo || loading || isInfoShrunken) && (
-          <BusinessContainer bgimage={business?.header} isSkeleton={isSkeleton} id='container' isClosed={!business?.open}>
+          <BusinessContainer bgimage={business?.header} isSkeleton={isSkeleton} id='container' isClosed={!business?.open} isChew={isChew}>
             {(!loading && !business?.open) && <h1>{t('CLOSED', 'Closed')}</h1>}
-            {showLogo && business?.logo && (
+            {(showLogo && business?.logo && !isChew) && (
               <BusinessContent>
                 <WrapperBusinessLogo>
                   {!loading && (
@@ -399,7 +409,7 @@ export const BusinessBasicInformation = (props) => {
                 </WrapperBusinessLogo>
               </BusinessContent>
             )}
-            {isInfoShrunken && (
+            {(isInfoShrunken || isChew) && (
               <BusinessInfoComponent />
             )}
             {!loading && (

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

@@ -21,14 +21,18 @@ export const BusinessContainer = styled.div`
     background-color: #cccccc;
   `}
 
-  ${props => props.bgimage && !props.isClosed && css`
+  ${props => props.bgimage && (!props.isClosed && !props.isChew) && css`
     background-image: url(${props.bgimage});
   `}
 
-  ${props => props.bgimage && props.isClosed && css`
+  ${props => props.bgimage && (props.isClosed && !props.isChew) && css`
     background-image: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url(${props.bgimage});
   `}
 
+  ${props => props.bgimage && props.isChew && css`
+    background-image: linear-gradient(rgba(255, 255, 255, 0.3), rgba(255, 255, 255, 0.3)), url(${props.bgimage});
+  `}
+
   h1 {
     color: #FFF;
     opacity: 0.5;
@@ -71,7 +75,7 @@ export const WrapperBusinessLogo = styled.div`
   max-height: 80px;
   width: 80px;
   height: 80px;
-  
+
   @media (min-width: 576px) {
     max-width: 124px;
     max-height: 124px;
@@ -161,6 +165,7 @@ export const BusinessInfoItem = styled.div`
 `
 
 export const BusinessInfoContainer = styled.div`
+  width: ${props => props.isChew && '100%'};
   padding-top: 40px;
   padding-left: 5px;
   padding-right: 5px;
@@ -180,6 +185,7 @@ export const BusinessInfoContainer = styled.div`
   @media (min-width: 768px) {
     flex-direction: row;
     margin-bottom: 25px;
+    margin-left: ${props => props.isChew && '25px'};
   }
 `
 

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

@@ -424,6 +424,7 @@ export const BusinessListingSearchUI = (props) => {
             categoryId={curProduct?.product?.category_id}
             productId={curProduct?.product?.id}
             onSave={handleRedirectToCart}
+            handleUpdateProducts={(productId, changes) => handleUpdateProducts(productId, curProduct?.product?.category_id, curProduct?.business?.id, changes)}
           />
         )}
       </Modal>

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

@@ -3,7 +3,6 @@ import Skeleton from 'react-loading-skeleton'
 import { BusinessProductsCategories as ProductsCategories } from 'ordering-components-external'
 import { AutoScroll } from '../../../../../components/AutoScroll'
 import { useTheme } from 'styled-components'
-import { useWindowSize } from '../../../../../hooks/useWindowSize'
 
 import { CategoriesContainer } from './styles'
 import { Tabs, Tab } from '../../styles/Tabs'
@@ -23,7 +22,6 @@ const BusinessProductsCategoriesUI = (props) => {
 
   const theme = useTheme()
   const [selectedCategory, setSelectedCateogry] = useState({ id: null })
-  const { width } = useWindowSize()
   const scrollTopSpan = 60
 
   const handleChangeCategory = (category) => {

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

@@ -6,13 +6,14 @@ import { AccordionDropdown } from '../../../AccordionDropdown'
 import {
   CategoriesContainer,
   CategoriesWrap,
-  CategoryTab
+  CategoryTab,
+  IterateCategoriesContainer
 } from './styles'
 
-const SPACE_CONTANT = 25
+const SPACE_CONTANT = 5
 
 const categorySpace = {
-  1: 1,
+  1: 0,
   2: 2 * SPACE_CONTANT,
   3: 3 * SPACE_CONTANT,
   4: 4 * SPACE_CONTANT,
@@ -26,25 +27,33 @@ const BusinessProductsCategoriesUI = (props) => {
     handlerClickCategory,
     categorySelected,
     featured,
-    openCategories
+    openCategories,
+    setCategoryClicked
   } = props
 
+  const handleClickItem = (category, isSelectCategory) => {
+    handlerClickCategory(category)
+    if (isSelectCategory) {
+      setCategoryClicked(true)
+    }
+  }
+
   const IterateCategories = ({ list, isSub, currentCat }) => {
     return (
       <>
-        {list?.length && list?.map(category => (
-          <div key={category?.id ?? category?.name}>
+        {list?.length && list?.map((category, i) => (
+          <IterateCategoriesContainer key={category?.id ?? category?.name}>
             {(category?.subcategories?.length > 0 || isSub) ? (
               <>
                 {category?.subcategories?.length > 0 && (
                   <>
-                    <div className='accordion'>
+                    <div className={`accordion ${category?.level === 1 ? 'level-1' : ''}`}>
                       <AccordionDropdown
                         item={category}
                         isSelected={categorySelected?.id === category.id}
                         isOpen={openCategories?.includes(category.id)}
                         spaceTab={categorySpace[category?.level ?? 1]}
-                        handleClickItem={() => handlerClickCategory(category)}
+                        handleClickItem={(isSelectCategory) => handleClickItem(category, isSelectCategory)}
                         IterateCategories={IterateCategories}
                       />
                     </div>
@@ -55,7 +64,8 @@ const BusinessProductsCategoriesUI = (props) => {
                     active={categorySelected?.id === category.id}
                     className={`${category.id === 'featured' ? 'special' : ''}`}
                     categorySpace={categorySpace[category?.level ?? 1]}
-                    onClick={() => handlerClickCategory(category)}
+                    onClick={() => handleClickItem(category, true)}
+                    isSub={isSub || i + 1 === list?.length}
                   >
                     <span>
                       {category.name}
@@ -68,14 +78,15 @@ const BusinessProductsCategoriesUI = (props) => {
                 active={categorySelected?.id === category.id}
                 className={`${category.id === 'featured' ? 'special' : ''}`}
                 categorySpace={categorySpace[category?.level ?? 1]}
-                onClick={() => handlerClickCategory(category)}
+                onClick={() => handleClickItem(category, true)}
+                isSub={isSub || i + 1 === list?.length}
               >
                 <span>
                   {category.name}
                 </span>
               </CategoryTab>
             )}
-          </div>
+          </IterateCategoriesContainer>
         ))}
 
         {list && list?.length === 0 && isSub && (
@@ -83,7 +94,7 @@ const BusinessProductsCategoriesUI = (props) => {
             active={categorySelected?.id === category.id}
             className={`${category.id === 'featured' ? 'special' : ''}`}
             categorySpace={categorySpace[category?.level ?? 1]}
-            onClick={() => handlerClickCategory(category)}
+            onClick={() => handleClickItem(category, true)}
           >
             <span>
               {currentCat.name}

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

@@ -4,8 +4,12 @@ export const CategoriesWrap = styled.div`
   display: flex;
   flex-direction: column;
   width: 100%;
-  @media (min-width: 933px){
+  border: 1px solid #ccc;
+  border-radius: 7.6px;
+  @media (min-width: 993){
     width: calc(100% - 40px);
+    border: 0;
+    padding: 0;
   }
 `
 
@@ -20,7 +24,6 @@ export const CategoriesContainer = styled.div`
   width: 100%;
   top: 45px;
   position: sticky;
-
   div.category {
     text-overflow: ellipsis;
     white-space: nowrap;
@@ -45,9 +48,8 @@ export const CategoryTab = styled.div`
   justify-content: space-between;
   align-items: center;
   margin-left: ${props => props.categorySpace ?? 0}px;
-  border-radius: 8px;
   text-align: left;
-
+  border-bottom: ${({ isSub }) => !isSub ? '1px solid #ccc' : ''};
   span {
     width: 90%;
     text-overflow: ellipsis;
@@ -59,3 +61,9 @@ export const CategoryTab = styled.div`
     background-color: ${props => props.theme.colors.primaryContrast};
   `}
 `
+
+export const IterateCategoriesContainer = styled.div`
+  div.level-1 {
+    border-bottom: ${({ isSub }) => !isSub ? '1px solid #ccc' : ''} !important;
+  }
+`

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

@@ -438,6 +438,9 @@ const BusinessProductsListingUI = (props) => {
                 useKioskApp={props.useKioskApp}
                 product={productModal.product || curProduct}
                 businessId={business?.id}
+                categoryId={curProduct?.category_id}
+                productId={curProduct?.id}
+                handleUpdateProducts={handleUpdateProducts}
                 onSave={handlerProductAction}
                 productAddedToCartLength={currentCart?.products?.reduce((productsLength, Cproduct) => { return productsLength + (Cproduct?.id === (productModal.product || curProduct)?.id ? Cproduct?.quantity : 0) }, 0) || 0}
               />

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

@@ -1,7 +1,8 @@
-import React, { useState } from 'react'
+import React, { useEffect, useState } from 'react'
 import Skeleton from 'react-loading-skeleton'
 import { XLg as Close } from 'react-bootstrap-icons'
 import { BusinessTypeFilter as BusinessTypeFilterController, useLanguage } from 'ordering-components-external'
+import { useTheme } from 'styled-components'
 
 import { Tabs, Tab } from '../../styles/Tabs'
 
@@ -22,9 +23,11 @@ const BusinessTypeFilterUI = (props) => {
   const { loading, error, types } = typesState
   const [, t] = useLanguage()
   const [load, setLoad] = useState(false)
+  const theme = useTheme()
+  const isCategoriesHidden = theme?.business_listing_view?.components?.categories?.components?.all?.hidden
 
   const handleChangeCategory = (category) => {
-    if (isAppoint && category === currentTypeSelected) {
+    if (isAppoint && category === currentTypeSelected && !isCategoriesHidden) {
       handleChangeBusinessType(null)
       return
     }
@@ -46,6 +49,14 @@ const BusinessTypeFilterUI = (props) => {
     }
   }
 
+  useEffect(() => {
+    if (isCategoriesHidden && currentTypeSelected === null) {
+      if (types && types?.length > 0) {
+        (!isSearchMode && !isAppoint) && handleChangeCategory(types[1]?.id)
+      }
+    }
+  }, [types, currentTypeSelected])
+
   return (
     <>
       {props.beforeElements?.map((BeforeElement, i) => (
@@ -102,11 +113,10 @@ const BusinessTypeFilterUI = (props) => {
           {!loading && !error && types && types.length > 0 && (
             <Tabs variant='primary'>
               <AutoScroll>
-                {types.map((type, i) => type.enabled && (
+                {types.map((type, i) => (isCategoriesHidden ? type.enabled && type.name !== 'All' : type.enabled) && (
                   <Tab
                     key={type.id}
-                    active={type.id === currentTypeSelected}
-                    className='category'
+                    active={type.id === currentTypeSelected || i === 0}
                   >
                     <BusinessCategoryTitle
                       active={type.id === currentTypeSelected}

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

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