ordering-ui-external 2.1.4 → 2.2.1

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

@@ -139,7 +139,6 @@ export const BusinessInfoItem = styled.div`
       cursor: pointer;
       font-size: 14px;
       color: ${props => props.theme?.colors.primary};
-      text-decoration: underline;
       &:not(:last-child) {
         margin-right: 5px;
         ${props => props.theme?.rtl && css`
@@ -147,6 +146,9 @@ export const BusinessInfoItem = styled.div`
           margin-right: 0;
         `}
       }
+      &:hover {
+        text-decoration: underline;
+      }
 
       &.dot {
         font-size: 12px;

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

@@ -54,18 +54,19 @@ export const ContentInfo = styled.div`
 
     .go-store {
       user-select: none;
-      text-decoration: underline;
       color: ${props => props.theme.colors.primary};
       margin-right: 5px;
       ${props => props.theme?.rtl && css`
         margin-left: 5px;
         margin-right: 0;
       `}
+      &:hover {
+        text-decoration: underline;
+      }
     }
 
     .clear-cart {
       user-select: none;
-      text-decoration: underline;
       color: #d81212;
       margin-left: 5px;
       ${props => props.theme?.rtl && css`
@@ -75,6 +76,9 @@ export const ContentInfo = styled.div`
       &:first-letter {
         text-transform: uppercase;
       }
+      &:hover {
+        text-decoration: underline;
+      }
     }
 
     ${({ isStore }) => isStore && css`
@@ -85,12 +89,14 @@ export const ContentInfo = styled.div`
   }
   .change-store {
     cursor: pointer;
-    text-decoration: underline;
     color: ${props => props.theme.colors.primary};
     font-size: 12px;
     &:first-letter {
       text-transform: uppercase;
     }
+    &:hover {
+        text-decoration: underline;
+      }
   }
   ${props => props.theme?.rtl && css`
     margin-right: 10px;

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

@@ -0,0 +1,23 @@
+import React, { useState } from "react"
+import { Title } from "../styles"
+import BisUpArrow from "@meronex/icons/bi/BisUpArrow"
+
+export const FilterAccordion = ({ title, children }) => {
+  const [open, setOpen] = useState(false)
+  const [setRotate, setRotateState] = useState("accordion__icon")
+
+  const activeAccordion = (value) => {
+    setRotateState(value ? 'accordion__icon rotate' : 'accordion__icon')
+    setOpen(value)
+  }
+
+  return (
+    <>
+      <Title onClick={() => activeAccordion(!open)}>
+        <h3>{title}</h3>
+        <BisUpArrow className={`${setRotate}`} />
+      </Title>
+      {open && children}
+    </>
+  )
+}

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

@@ -1,6 +1,8 @@
-import { useLanguage, useUtils } from 'ordering-components-external'
+import { useConfig, useLanguage, useUtils } from 'ordering-components-external'
 import React from 'react'
 import { MaxFilterContainer, MaxItem, MaxItemContainer, ProgressBar, ProgressContentWrapper } from '../styles'
+import { capitalize } from '../../../../../../utils'
+import { FilterAccordion } from '../Accordion'
 
 export const MaxSectionItem = (props) => {
   const {
@@ -13,10 +15,18 @@ export const MaxSectionItem = (props) => {
 
   const [, t] = useLanguage()
   const [{ parsePrice }] = useUtils()
+  const [{ configs }] = useConfig()
+
+  const distanceUnit = configs?.distance_unit?.value
+
+  const units = {
+    mi: 1609,
+    km: 1000
+  }
 
   const parseValue = (option) => {
     return filter === 'max_distance'
-      ? `${option / 1000} ${t('KM', 'Km')}`
+      ? `${(option / units[distanceUnit]).toFixed(0)} ${t(`${distanceUnit?.toUpperCase()}`, capitalize(distanceUnit))}`
       : filter === 'max_eta'
         ? `${option} ${t('MIN', 'min')}`
         : parsePrice(option)
@@ -24,21 +34,22 @@ export const MaxSectionItem = (props) => {
 
   return (
     <MaxFilterContainer>
-      <h3>{title}</h3>
-      <ProgressContentWrapper>
-        <ProgressBar style={{ width: `${((options.indexOf(filters?.[filter]) / 3) * 100) ?? 100}%` }} />
-      </ProgressContentWrapper>
-      <MaxItemContainer>
-        {options.map((option, i) => (
-          <MaxItem
-            key={option}
-            active={filters?.[filter] === option || (option === 'default' && (filters?.[filter] === 'default' || !filters?.[filter]))}
-            onClick={() => handleChangeFilters(filter, option)}
-          >
-            {option === 'default' ? `${parseValue(options[i - 1])}+` : parseValue(option)}
-          </MaxItem>
-        ))}
-      </MaxItemContainer>
+      <FilterAccordion title={title}>
+        <ProgressContentWrapper>
+          <ProgressBar style={{ width: `${((options.indexOf(filters?.[filter]) / 3) * 100) ?? 100}%` }} />
+        </ProgressContentWrapper>
+        <MaxItemContainer>
+          {options.map((option, i) => (
+            <MaxItem
+              key={option}
+              active={filters?.[filter] === option || (option === 'default' && (filters?.[filter] === 'default' || !filters?.[filter]))}
+              onClick={() => handleChangeFilters(filter, option)}
+            >
+              {option === 'default' ? `${parseValue(options[i - 1])}+` : parseValue(option)}
+            </MaxItem>
+          ))}
+        </MaxItemContainer>
+      </FilterAccordion>
     </MaxFilterContainer>
   )
 }

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

@@ -37,7 +37,7 @@ import {
 import Skeleton from 'react-loading-skeleton'
 import { Check2, XLg as Close } from 'react-bootstrap-icons'
 import { SearchBar } from '../SearchBar'
-import { useLanguage, useOrder, useUtils, useSession, BusinessSearchList } from 'ordering-components-external'
+import { useLanguage, useOrder, useUtils, useSession, BusinessSearchList, useConfig } from 'ordering-components-external'
 import { BusinessController } from '../BusinessController'
 import { AutoScroll } from '../AutoScroll'
 import { BusinessTypeFilter } from '../BusinessTypeFilter'
@@ -54,6 +54,7 @@ import BisUpArrow from '@meronex/icons/bi/BisUpArrow'
 import { Modal } from '../Modal'
 import { ProductForm } from '../ProductForm'
 import { MaxSectionItem } from './MaxSectionItem'
+import { FilterAccordion } from './Accordion'
 
 const PIXELS_TO_SCROLL = 300
 
@@ -81,9 +82,11 @@ export const BusinessListingSearchUI = (props) => {
   const [{ parsePrice, optimizeImage, parseDistance }] = useUtils()
   const [{ auth }] = useSession()
   const { width } = useWindowSize()
+  const [{ configs }] = useConfig()
   const maxDeliveryFeeOptions = [15, 25, 35, 'default']
   // const maxProductPriceOptions = [5, 10, 15, 'default']
-  const maxDistanceOptions = [1000, 2000, 5000, 'default']
+  const currency = configs.format_number_currency?.value
+  const maxDistanceOptions = configs?.distance_unit?.value === 'km' ? [1000, 2000, 5000, 'default'] : [1609, 3218, 8046, 'default']
   const maxTimeOptions = [5, 15, 30, 'default']
   const sortItems = [
     { text: t('PICKED_FOR_YOU', 'Picked for you (default)'), value: 'distance' },
@@ -92,11 +95,11 @@ export const BusinessListingSearchUI = (props) => {
   ]
 
   const priceList = [
-    { level: '1', content: '$' },
-    { level: '2', content: '$$' },
-    { level: '3', content: '$$$' },
-    { level: '4', content: '$$$$' },
-    { level: '5', content: '$$$$$' }
+    { level: '1', content: `${currency}` },
+    { level: '2', content: `${Array(2).fill(currency).join('')}` },
+    { level: '3', content: `${Array(3).fill(currency).join('')}` },
+    { level: '4', content: `${Array(4).fill(currency).join('')}` },
+    { level: '5', content: `${Array(5).fill(currency).join('')}` }
   ]
 
   const noResults = (!businessesSearchList.loading && !businessesSearchList.lengthError && businessesSearchList?.businesses?.length === 0)
@@ -157,58 +160,58 @@ export const BusinessListingSearchUI = (props) => {
       <FiltersContainer>
         <Filters>
           <SortContainer>
-            <h3>{t('SORT', 'Sort')}</h3>
-            {sortItems?.filter(item => !(orderState?.options?.type === 1 && item?.value === 'pickup_time') && !(orderState?.options?.type === 2 && item?.value === 'delivery_time'))?.map(item => (
-              <SortItem
-                key={item?.value}
-                onClick={() => handleChangeFilters('orderBy', item?.value)}
-                active={filters?.orderBy?.includes(item?.value)}
-              >
-                {item?.text}  {(filters?.orderBy?.includes(item?.value)) && <>{filters?.orderBy?.includes('-') ? <BisUpArrow /> : <BisDownArrow />}</>}
-              </SortItem>
-            ))}
-            {/* <SortItem onClick={() => handleChangeFilters('orderBy', 'default')}>{t('MOST_POPULAR', 'Most popular')}</SortItem>
-            <SortItem onClick={() => handleChangeFilters('orderBy', 'default')}>{t('RATING', 'Rating')}</SortItem> */}
-
+            <FilterAccordion title={t('SORT', 'Sort')}>
+              {sortItems?.filter(item => !(orderState?.options?.type === 1 && item?.value === 'pickup_time') && !(orderState?.options?.type === 2 && item?.value === 'delivery_time'))?.map(item => (
+                <SortItem
+                  key={item?.value}
+                  onClick={() => handleChangeFilters('orderBy', item?.value)}
+                  active={filters?.orderBy?.includes(item?.value)}
+                >
+                  {item?.text}  {(filters?.orderBy?.includes(item?.value)) && <>{filters?.orderBy?.includes('-') ? <BisUpArrow /> : <BisDownArrow />}</>}
+                </SortItem>
+              ))}
+            </FilterAccordion>
           </SortContainer>
           <BrandContainer>
-            <h3>{t('BRANDS', 'Brands')}</h3>
-            <BrandListWrapper>
-              {brandList?.loading && (
-                <>
-                  {[...Array(5).keys()].map(index => (
-                    <BrandItem key={index}>
-                      <Skeleton width={120} height={15} />
-                      <Skeleton width={16} height={16} />
-                    </BrandItem>
-                  ))}
-                </>
-              )}
-              {!brandList?.loading && brandList?.brands.map((brand, i) => brand?.enabled && (
-                <BrandItem key={i} onClick={() => handleChangeBrandFilter(brand?.id)}>
-                  <span>{brand?.name}</span>
-                  {filters?.franchise_ids?.includes(brand?.id) && <Check2 />}
-                </BrandItem>
-              ))}
-              {!brandList?.loading && ((brandList?.brands?.filter(brand => brand?.enabled))?.length === 0) && (
-                <NoResult>{t('NO_RESULTS_FOUND', 'Sorry, no results found')}</NoResult>
-              )}
-            </BrandListWrapper>
+            <FilterAccordion title={t('BRANDS', 'Brands')}>
+              <BrandListWrapper>
+                {brandList?.loading && (
+                  <>
+                    {[...Array(5).keys()].map(index => (
+                      <BrandItem key={index}>
+                        <Skeleton width={120} height={15} />
+                        <Skeleton width={16} height={16} />
+                      </BrandItem>
+                    ))}
+                  </>
+                )}
+                {!brandList?.loading && brandList?.brands.map((brand, i) => brand?.enabled && (
+                  <BrandItem key={i} onClick={() => handleChangeBrandFilter(brand?.id)}>
+                    <span>{brand?.name}</span>
+                    {filters?.franchise_ids?.includes(brand?.id) && <Check2 />}
+                  </BrandItem>
+                ))}
+                {!brandList?.loading && ((brandList?.brands?.filter(brand => brand?.enabled))?.length === 0) && (
+                  <NoResult>{t('NO_RESULTS_FOUND', 'Sorry, no results found')}</NoResult>
+                )}
+              </BrandListWrapper>
+            </FilterAccordion>
           </BrandContainer>
           <PriceFilterWrapper>
-            <h3>{t('PRICE_RANGE', 'Price range')}</h3>
-            <PriceFilterListWrapper>
-              {priceList.map((price, i) => (
-                <Button
-                  key={i}
-                  color={(filters?.price_level === price?.level) ? 'primary' : 'lightGray'}
-                  onClick={() => handleChangePriceRange(price?.level)}
-                >
-                  {price.content}
-                  {(filters?.price_level === price?.level) && <Close />}
-                </Button>
-              ))}
-            </PriceFilterListWrapper>
+            <FilterAccordion title={t('PRICE_RANGE', 'Price range')}>
+              <PriceFilterListWrapper>
+                {priceList.map((price, i) => (
+                  <Button
+                    key={i}
+                    color={(filters?.price_level === price?.level) ? 'primary' : 'lightGray'}
+                    onClick={() => handleChangePriceRange(price?.level)}
+                  >
+                    {price.content}
+                    {(filters?.price_level === price?.level) && <Close />}
+                  </Button>
+                ))}
+              </PriceFilterListWrapper>
+            </FilterAccordion>
           </PriceFilterWrapper>
           {orderState?.options?.type === 1 && (
             <MaxSectionItem
@@ -235,18 +238,14 @@ export const BusinessListingSearchUI = (props) => {
             filters={filters}
             handleChangeFilters={handleChangeFilters}
           />
-          {/* <MaxSectionItem
-              title={t('MAX_PRODUCT_PRICE', 'Max product price')}
-              options={maxProductPriceOptions}
-              filter='max_product_price'
-            /> */}
           <TagsContainer>
-            <h3>{t('BUSINESS_CATEGORIES', 'Business categories')}</h3>
-            <BusinessTypeFilter
-              isSearchMode
-              filters={filters}
-              handleChangeFilters={handleChangeFilters}
-            />
+            <FilterAccordion title={t('BUSINESS_CATEGORIES', 'Business categories')}>
+              <BusinessTypeFilter
+                isSearchMode
+                filters={filters}
+                handleChangeFilters={handleChangeFilters}
+              />
+            </FilterAccordion>
           </TagsContainer>
         </Filters>
         <FiltersResultContainer>

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

@@ -16,8 +16,27 @@ export const BusinessListingSearchContainer = styled.div`
   }
 `
 
+export const Title = styled.div`
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  margin: 20px 0;
+  cursor: pointer;
+
+  h3 {
+    margin: 0 10px 0 0;
+  }
+
+  .rotate {
+    transform: rotate(180deg);
+  }
+
+  .accordion__icon {
+    transition: transform 0.6s ease;
+  }
+`
+
 export const FiltersContainer = styled.div`
-  
   flex-direction: column;
   @media (min-width: 993px){
     flex-direction: row;
@@ -32,7 +51,7 @@ export const Filters = styled.div`
   @media (min-width: 993px){
     width: 25%;
     max-width: 25%;
-    margin-right: 20px;
+    margin-right: 70px;
   }
 `
 

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

@@ -93,6 +93,28 @@ const BusinessPreorderUI = (props) => {
     setIsEnabled(menu.schedule[day].enabled || false)
   }
 
+  const getMomentTime = (time) => {
+    const _moment = moment(`${moment(dateSelected).format('YYYY-MM-DD')} ${time}`, 'YYYY-MM-DD HH:mm').toDate()
+    return _moment
+  }
+
+  const isBusyTime = (professional, selectedMoment) => {
+    if (!selectedMoment) return false
+    const startDay = moment(selectedMoment).utc().format('d')
+    const isStartScheduleEnabled = professional?.schedule?.[startDay]?.enabled
+    if (!isStartScheduleEnabled) return true
+
+    if (professional?.busy_times?.length === 0) return false
+
+    const busyTimes = professional?.busy_times
+
+    const valid = busyTimes.some(item => {
+      return (moment.utc(item?.start).local().valueOf() <= moment(selectedMoment).valueOf() &&
+        moment(selectedMoment).valueOf() < moment.utc(item?.end).local().valueOf())
+    })
+    return valid
+  }
+
   const getTimeList = (curdate, menu) => {
     validateSelectedDate(curdate, menu)
     const dateParts = curdate.split('-')
@@ -208,6 +230,8 @@ const BusinessPreorderUI = (props) => {
                     active={timeSelected === time.value}
                     onClick={() => handleChangeTime(time.value)}
                     isDisabled={isDisabled}
+                    isProfessional={isProfessional}
+                    busyTime={isProfessional && isBusyTime(business, getMomentTime(time.value))}
                   >
                     <span>{time.text}</span>
                   </TimeItem>

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

@@ -155,7 +155,12 @@ export const TimeItem = styled.div`
   display: flex;
   justify-content: center;
   align-items: center;
-  background: #E9ECEF;
+  ${({ isProfessional }) => isProfessional ? css`
+    background: ${props => props.theme.colors.primaryContrast};
+    color: ${props => props.theme.colors.primary};
+  ` : css`
+    background: ${props => props.theme.colors.gray200};
+  `}
   border-radius: 7.6px;
   padding: 5px 15px;
   margin: 12px;
@@ -172,6 +177,11 @@ export const TimeItem = styled.div`
   ${({ isDisabled }) => isDisabled && css`
     pointer-events: none;
   `}
+  
+  ${({ busyTime }) => busyTime && css`
+    background: ${props => props.theme.colors.gray200};
+    color: ${props => props.theme.colors.lightGray};
+  `}
 
   span {
     font-size: 14px;

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

@@ -47,10 +47,12 @@ export const WrapAllCategories = styled.div`
       white-space: pre;
     }
     span {
-      color: ${props => props.theme.colors.primary};
-      text-decoration: underline;
+      color: ${props => props.theme.colors.primary};=
       margin-left: 10px;
       cursor: pointer;
+      &:hover {
+        text-decoration: underline;
+      }
     }
   }
 
@@ -150,11 +152,13 @@ export const CategoryDescripion = styled.div`
     }
     span {
       color: ${props => props.theme.colors.primary};
-      text-decoration: underline;
       margin-left: 10px;
       cursor: pointer;
       white-space: nowrap;
       overflow: visible;
+      &:hover {
+        text-decoration: underline;
+      }
     }
 `
 

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

@@ -80,10 +80,12 @@ export const CategoryDescription = styled.div`
     }
     span {
       color: ${props => props.theme.colors.primary};
-      text-decoration: underline;
       margin-left: 10px;
       cursor: pointer;
       white-space: nowrap;
+      &:hover {
+        text-decoration: underline;
+      }
     }
 `
 

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

@@ -243,6 +243,16 @@ const BusinessProductsListingUI = (props) => {
     events.emit('get_current_view')
   }, [])
 
+  useEffect(() => {
+    const handleClickedBannerProduct = () => {
+      handleUpdateInitialRender(true)
+    }
+    events.on('product_banner_clicked', handleClickedBannerProduct)
+    return () => {
+      events.off('product_banner_clicked', handleClickedBannerProduct)
+    }
+  }, [])
+
   useEffect(() => {
     if (loading) return
     if (openProduct) {
@@ -442,7 +452,7 @@ const BusinessProductsListingUI = (props) => {
         disableOverflowX
       >
 
-        {productModal.loading && !productModal.error && (
+        {productModal.loading && !productModal.error && !productModal.product && (
           <ProductLoading>
             <SkeletonItem>
               <Skeleton height={45} count={props.useKioskApp ? 12 : 8} />

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

@@ -47,6 +47,7 @@ import { AutoScroll } from '../../../AutoScroll'
 import { CitiesControl } from '../../../CitiesControl'
 import { OrderContextUI } from '../../../OrderContextUI'
 import { OrdersSection } from './OrdersSection'
+import { getCateringValues } from '../../../../../../../utils'
 
 const PIXELS_TO_SCROLL = 300
 
@@ -97,6 +98,13 @@ const BusinessesListingUI = (props) => {
   const businessesIds = businessesList.businesses &&
     businessesList.businesses?.map(business => business.id)
   const isChew = orderingTheme?.theme?.header?.components?.layout?.type?.toLowerCase() === 'chew'
+  const cateringTypeString = orderState?.options?.type === 7
+    ? 'catering_delivery'
+    : orderState?.options?.type === 8
+      ? 'catering_pickup'
+      : null
+
+  const cateringValues = preorderBusiness?.configs && getCateringValues(cateringTypeString, preorderBusiness?.configs)
 
   const handleScroll = useCallback(() => {
     const innerHeightScrolltop = window.innerHeight + document.documentElement?.scrollTop + PIXELS_TO_SCROLL
@@ -210,7 +218,7 @@ const BusinessesListingUI = (props) => {
       {(windowSize.width < 576 || (configs?.business_listing_hide_image?.value !== '1' && !isChew)) && (
         <BusinessBanner>
           {windowSize.width < 576 && (
-            <OrderContextUI isBusinessList />
+            <OrderContextUI isBusinessList hideHero={!hideHero} />
           )}
           {(configs?.business_listing_hide_image?.value !== '1' && !isChew) && !hideHero && (
             <BusinessHeroImg
@@ -415,6 +423,8 @@ const BusinessesListingUI = (props) => {
           business={preorderBusiness}
           handleClick={handleBusinessClick}
           showButton
+          cateringPreorder={!!cateringTypeString}
+          {...cateringValues}
         />
       </Modal>
       <Modal

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

@@ -70,6 +70,7 @@ const CartUI = (props) => {
     cart: cartMulticart,
     hideDeliveryFee,
     hideDriverTip,
+    hideCouponInput,
     businessConfigs
   } = props
 
@@ -467,7 +468,10 @@ const CartUI = (props) => {
                     )}
                   </tbody>
                 </table>
-                {isCouponEnabled && !isCartPending && ((isCheckout || isCartPopover || isMultiCheckout) && !(isCheckout && isCartPopover)) && !hideCartDiscount && (
+                {isCouponEnabled && !isCartPending &&
+                  ((isCheckout || isCartPopover || isMultiCheckout) &&
+                  !(isCheckout && isCartPopover)) && !hideCartDiscount && !hideCouponInput &&
+                (
                   <CouponContainer>
                     <CouponControl
                       businessId={cart?.business_id}

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

@@ -76,8 +76,10 @@ export const OrderBill = styled.div`
       td:nth-child(2) {
         font-weight: bold;
         color: ${({ theme }) => theme.colors.primary};
-        text-decoration: underline;
         cursor: pointer;
+        &:hover {
+        text-decoration: underline;
+      }
       }
     }
   }