ordering-ui-external 2.4.6 → 2.5.1

package/src/components/VerticalOrdersLayout/SingleOrderCard/index.js

@@ -47,10 +47,18 @@ const SingleOrderCardUI = (props) => {
     onRedirectPage({ page, params })
   }
 
+  const hideBusinessLogo = theme?.orders?.components?.business_logo?.hidden
+  const hideDate = theme?.orders?.components?.date?.hidden
+  const hideBusinessName = theme?.orders?.components?.business_name?.hidden
+  const hideOrderNumber = theme?.orders?.components?.order_number?.hidden
+  const hideReviewOrderButton = theme?.orders?.components?.review_order_button?.hidden
+  const hideReorderButton = theme?.orders?.components?.reorder_button?.hidden
+  const hideOrderStatus = theme?.orders?.components?.order_status?.hidden
+
   return (
     <SingleCard key={order.id} id='order-card' onClick={(e) => handleClickCard(e, order)}>
       <OrderPastContent>
-        {(order.business?.logo || theme.images?.dummies?.businessLogo) && (
+        {!hideBusinessLogo && (order.business?.logo || theme.images?.dummies?.businessLogo) && (
           <>
             {order?.business?.length > 1 ? (
               <MultiLogosContainer>
@@ -77,7 +85,9 @@ const SingleOrderCardUI = (props) => {
         )}
         <BusinessInformation>
           <WrapperBusinessTitle>
-            <h2>{order?.business?.length > 1 ? `${t('GROUP_ORDER', 'Group Order')} ${t('No', 'No')}. ${order?.cart_group_id}` : order.business?.name}</h2>
+            {!hideBusinessName && (
+              <h2>{order?.business?.length > 1 ? `${t('GROUP_ORDER', 'Group Order')} ${t('No', 'No')}. ${order?.cart_group_id}` : order.business?.name}</h2>
+            )}
             {!order?.business?.length && (
               <FavoriteWrapper onClick={() => handleChangeFavorite(order)} className='favorite'>
                 {order?.favorite ? <Like /> : <DisLike />}
@@ -85,30 +95,38 @@ const SingleOrderCardUI = (props) => {
             )}
           </WrapperBusinessTitle>
           <OrderInfo>
-            {order?.id && (
+            {!hideOrderNumber && order?.id && (
               <>
                 <p name='order_number'>{order?.business?.length > 1 ? `${order?.business?.length} ${t('ORDERS', 'orders')}` : `${t('ORDER_NUM', 'Order No.')} ${order.id}`}</p>
                 <BsDot className='dot' />
               </>
             )}
-            <p>{order?.delivery_datetime_utc ? parseDate(order?.delivery_datetime_utc) : parseDate(order?.delivery_datetime, { utc: false })}</p>
+            {!hideDate && (
+              <p>{order?.delivery_datetime_utc ? parseDate(order?.delivery_datetime_utc) : parseDate(order?.delivery_datetime, { utc: false })}</p>
+            )}
           </OrderInfo>
-          <p className='status'>{getOrderStatus(order.status)?.value}</p>
+          {!hideOrderStatus && (
+            <p className='status'>{getOrderStatus(order.status)?.value}</p>
+          )}
         </BusinessInformation>
       </OrderPastContent>
       <Reorder>
-        <Button
-          outline
-          disabled={!!order?.review}
-          color='primary'
-          className='review'
-          onClick={() => setOrderSelected(order)}
-        >
-          {!!order?.review ? t('REVIEWED', 'Reviewed') : t('REVIEW', 'Review')}
-        </Button>
-        <Button color='primary' className='reorder' outline onClick={() => handleReorder(order.id)}>
-          {orderID === order.id && reorderLoading ? t('LOADING', 'Loading...') : t('REORDER', 'Reorder')}
-        </Button>
+        {!hideReviewOrderButton && (
+          <Button
+            outline
+            disabled={!!order?.review}
+            color='primary'
+            className='review'
+            onClick={() => setOrderSelected(order)}
+          >
+            {!!order?.review ? t('REVIEWED', 'Reviewed') : t('REVIEW', 'Review')}
+          </Button>
+        )}
+        {!hideReorderButton && typeof order?.id === 'number' && (
+          <Button color='primary' className='reorder' outline onClick={() => handleReorder(order.id)}>
+            {orderID === order.id && reorderLoading ? t('LOADING', 'Loading...') : t('REORDER', 'Reorder')}
+          </Button>
+        )}
       </Reorder>
     </SingleCard>
   )

package/src/components/VerticalOrdersLayout/styles.js

@@ -76,12 +76,21 @@ export const PastLogo = styled.div`
     object-fit: contain;
   }
   box-shadow: rgba(0, 0, 0, 0.2) 0px 1px 10px;
+  display: none;
+
+  @media (min-width: 480px) {
+    display: block;
+  }
 `
 
 export const WrapperBusinessTitle = styled.div`
   width: 95%;
   display: flex;
   gap: 10px;
+
+  @media (min-width: 480px) {
+    width: 80%;
+  }
 `
 
 export const Reorder = styled.div`

package/src/contexts/ThemeContext/index.js

@@ -101,6 +101,7 @@ export const ThemeProvider = ({ children, ...props }) => {
         font.rel = 'stylesheet'
         font.async = true
         font.defer = true
+        font.name = fontFamily.name
         font.href = `https://fonts.googleapis.com/css2?family=${fontFamily.name}:wght@${fontFamily.weights.join(';')}&display=swap`
 
         window.document.body.appendChild(font)

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

@@ -88,11 +88,11 @@ const AddressListUI = (props) => {
         address.internal_number === obj.internal_number
       )))) || []
 
-  const showAddress = !orderingTheme?.theme?.profile?.components?.address_list?.components?.address?.hidden
-  const showIcons = !orderingTheme?.theme?.profile?.components?.address_list?.components?.icons?.hidden
-  const showZipcode = !orderingTheme?.theme?.profile?.components?.address_list?.components?.zipcode?.hidden
-  const showInternalNumber = !orderingTheme?.theme?.profile?.components?.address_list?.components?.internal_number?.hidden
-  const notFoundImage = orderingTheme?.theme?.profile?.components?.address_list?.components?.image
+  const showAddress = !theme?.profile?.components?.address_list?.components?.address?.hidden
+  const showIcons = !theme?.profile?.components?.address_list?.components?.icons?.hidden
+  const showZipcode = !theme?.profile?.components?.address_list?.components?.zipcode?.hidden
+  const showInternalNumber = !theme?.profile?.components?.address_list?.components?.internal_number?.hidden
+  const notFoundImage = theme?.profile?.components?.address_list?.components?.image
   const openAddress = (address) => {
     setCurAddress(address)
     setAddressOpen(true)
@@ -193,7 +193,7 @@ const AddressListUI = (props) => {
   const AddressListCallcenterLayout = ({ children }) => {
     return (
       <AddressHalfContainer>
-        <List halfWidth={addressOpen}>
+        <List halfWidth={addressOpen} id='address_list'>
           {children}
         </List>
         {addressOpen && (

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

@@ -36,7 +36,6 @@ import {
   IconWrapper,
   BusinessInfoWrapper,
   WrapperFloatingSearch,
-  CategorySelectedContainer,
   SearchWrapper
 } from './styles'
 import { BusinessPreorder } from '../BusinessPreorder'
@@ -45,7 +44,6 @@ import dayjs from 'dayjs'
 import timezone from 'dayjs/plugin/timezone'
 import isBetween from 'dayjs/plugin/isBetween'
 import { useWindowSize } from '../../../../../hooks/useWindowSize'
-import BsCaretLeftFill from '@meronex/icons/bs/BsCaretLeftFill'
 
 dayjs.extend(timezone)
 dayjs.extend(isBetween)
@@ -65,10 +63,7 @@ export const BusinessBasicInformation = (props) => {
     handleChangeSortBy,
     categoryState,
     errorQuantityProducts,
-    isCustomerMode,
-    categoryClicked,
-    categorySelected,
-    setCategoryClicked
+    isCustomerMode
   } = props
   const { business, loading } = businessState
 
@@ -137,20 +132,32 @@ export const BusinessBasicInformation = (props) => {
 
   const handleScroll = () => {
     const searchElement = document.getElementById('search-component')
-    if (!searchElement) return
-    const limit = window.pageYOffset >= searchElement?.offsetTop && window.pageYOffset > 0
-    if (limit) {
-      const classAdded = searchElement.classList.contains('fixed-search')
-      !classAdded && searchElement.classList.add('fixed-search')
-    } else {
-      searchElement && searchElement.classList.remove('fixed-search')
+    if (searchElement) {
+      const limit = window.pageYOffset >= searchElement?.offsetTop && window.pageYOffset > 0
+      if (limit) {
+        const classAdded = searchElement.classList.contains('fixed-search')
+        !classAdded && searchElement.classList.add('fixed-search')
+      } else {
+        searchElement && searchElement.classList.remove('fixed-search')
+      }
+    }
+
+    const businessNameElement = document.getElementById('business_name')
+    if (businessNameElement) {
+      const limit = window.pageYOffset >= (businessNameElement?.offsetTop - 55) && window.pageYOffset > 0
+      if (limit && windowSize.width < 993) {
+        const classAdded = businessNameElement.classList.contains('fixed-name')
+        !classAdded && businessNameElement.classList.add('fixed-name')
+      } else {
+        businessNameElement && businessNameElement.classList.remove('fixed-name')
+      }
     }
   }
 
   useEffect(() => {
     window.addEventListener('scroll', handleScroll)
     return () => window.removeEventListener('scroll', handleScroll)
-  }, [])
+  }, [windowSize?.width])
 
   useEffect(() => {
     window.scroll({
@@ -161,12 +168,7 @@ export const BusinessBasicInformation = (props) => {
 
   const SearchComponent = () => {
     return (
-      <WrapperSearch id='search-component' isFlexEnd={windowSize.width >= 768}>
-        {categorySelected?.name && windowSize.width < 768 && (
-          <CategorySelectedContainer onClick={() => setCategoryClicked(false)}>
-            <BsCaretLeftFill /> {categorySelected?.name}
-          </CategorySelectedContainer>
-        )}
+      <WrapperSearch id='search-component'>
         <SearchWrapper>
           <SearchIconWrapper
             onClick={() => setOpenSearchProducts(true)}
@@ -203,7 +205,7 @@ export const BusinessBasicInformation = (props) => {
             <BusinessInfoItem isInfoShrunken={isInfoShrunken}>
               {!loading ? (
                 <TitleWrapper>
-                  <h2 className='bold'>{business?.name}</h2>
+                  <h2 className='bold' id='business_name'>{business?.name}</h2>
                   {business?.ribbon?.enabled && (
                     <RibbonBox
                       bgColor={business?.ribbon?.color}
@@ -367,7 +369,7 @@ export const BusinessBasicInformation = (props) => {
           !errorQuantityProducts &&
           !isInfoShrunken &&
           !business?.professionals?.length &&
-          (categoryClicked || windowSize.width >= 993) &&
+          // (categoryClicked || windowSize.width >= 993) &&
           (
             <SearchComponent />
           )}

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

@@ -203,8 +203,9 @@ export const WrapperSearch = styled.div`
   margin: 15px 0px 0px;
   display: flex;
   align-items: center;
-  justify-content: ${props => props.isFlexEnd ? 'flex-end' : 'space-between'};
+  justify-content: flex-end;
   box-sizing: border-box;
+  z-index: 1002;
 
   .search-bar {
     margin-right: 10px;
@@ -241,13 +242,20 @@ export const WrapperSearch = styled.div`
   &.fixed-search {
     position: fixed;
     top: 0;
-    left: 0;
+    right: 0;
     z-index: 1002;
-    width: 100vw;
+    width: fit-content;
     margin-top: 0px;
     background-color: ${props => props.theme.colors.backgroundPage};
     padding: 10px;
   }
+
+  @media (min-width: 993px) {
+    &.fixed-search {
+      left: 0;
+      width: 100vw;
+    }
+  }
 `
 
 export const BusinessDetail = styled.div`
@@ -356,6 +364,19 @@ export const TitleWrapper = styled.div`
     overflow: hidden;
     white-space: nowrap;
     text-overflow: ellipsis;
+    &.fixed-name {
+      z-index: 1002;
+      position: fixed;
+      top: 0;
+      width: calc(100vw - 190px);
+      padding: 10px 0;
+      font-size: 18px;
+      ${props => props.theme?.rtl ? css`
+        right: 50px;
+      ` : css`
+        left: 50px;
+      `}
+    }
     @media (min-width: 768px) {
       font-size: 32px;
     }

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

@@ -86,6 +86,8 @@ const BusinessControllerUI = (props) => {
   const hideBusinessReviews = theme?.business_listing_view?.components?.business?.components?.reviews?.hidden
   const hideBusinessFavorite = theme?.business_listing_view?.components?.business?.components?.favorite?.hidden
   const hideBusinessOffer = theme?.business_listing_view?.components?.business?.components?.offer?.hidden
+  const hideBusinessHeader = theme?.business_listing_view?.components?.business?.components?.header?.hidden
+  const hideBusinessFavoriteBadge = theme?.business_listing_view?.components?.business?.components?.featured_badge?.hidden
 
   // const handleShowAlert = () => {
   //   setAlertState({ open: true, content: [t('ERROR_ADD_PRODUCT_BUSINESS_CLOSED', 'The Business is closed at the moment')] })
@@ -165,9 +167,9 @@ const BusinessControllerUI = (props) => {
             {isSkeleton ? (
               <Skeleton height={isCustomerMode ? 100 : 140} />
             ) : (
-              <BusinessHeader bgimage={optimizeImage((businessHeader || business?.header || theme.images?.dummies?.businessHeader), 'h_400,c_limit')} isClosed={!isBusinessOpen}>
+              <BusinessHeader bgimage={!hideBusinessHeader ? optimizeImage((businessHeader || business?.header || theme.images?.dummies?.businessHeader), 'h_400,c_limit') : ''} isClosed={!isBusinessOpen}>
                 <BusinessTags>
-                  {(businessFeatured ?? business?.featured) &&
+                  {(businessFeatured ?? business?.featured) && !hideBusinessFavoriteBadge &&
                     <span className='crown'>
                       <FaCrown />
                     </span>}

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

@@ -26,6 +26,7 @@ import {
 } from './styles'
 import MdClose from '@meronex/icons/md/MdClose'
 import { ScheduleAccordion } from '../ScheduleAccordion'
+import { useTheme } from 'styled-components'
 
 export const BusinessInformationUI = (props) => {
   const {
@@ -41,10 +42,17 @@ export const BusinessInformationUI = (props) => {
   const [{ configs }] = useConfig()
   const [modalImage, setModalImage] = useState(false)
   const [image, setImage] = useState('')
-  const [orderingTheme] = useOrderingTheme()
+  const theme = useTheme()
 
-  const showLocation = !orderingTheme?.theme?.business_view?.components?.information?.components?.location?.hidden
-  const showSchedule = !orderingTheme?.theme?.business_view?.components?.information?.components?.schedule?.hidden
+  const hideLocation = theme?.business_view?.components?.information?.components?.location?.hidden
+  const hideSchedule = theme?.business_view?.components?.information?.components?.schedule?.hidden
+  const hideDescription = theme?.business_view?.components?.information?.components?.description?.hidden
+  const hideAbout = theme?.business_view?.components?.information?.components?.about?.hidden
+  const hideVideos = theme?.business_view?.components?.information?.components?.videos?.hidden
+  const hideDeliveryTime = theme?.business_view?.components?.information?.components?.delivery_time?.hidden
+  const hidePickupTime = theme?.business_view?.components?.information?.components?.pickup_time?.hidden
+  const hideImages = theme?.business_view?.components?.information?.components?.images?.hidden
+  const hideAddress = theme?.business_view?.components?.information?.components?.address?.hidden
 
   const scheduleFormatted = ({ hour, minute }) => {
     const checkTime = (val) => val < 10 ? `0${val}` : val
@@ -70,20 +78,20 @@ export const BusinessInformationUI = (props) => {
         </ModalIcon>
         <BusinessContent>
           <BusinessTitle>{business?.name}</BusinessTitle>
-          {business.about && (
+          {!hideAbout && business.about && (
             <>
               <SectionTitle>{t('BUSINESS_ABOUT', 'Business short description')}</SectionTitle>
               <Description>{business.about}</Description>
             </>
           )}
-          {business.description && (
+          {!hideDescription && business.description && (
             <>
               <SectionTitle>{t('BUSINESS_DESCRIPTION', 'Business description')}</SectionTitle>
               <Description>{business.description}</Description>
             </>
           )}
           {
-            showLocation && (
+            !hideLocation && (
               <>
                 {businessLocation.location && (
                   <>
@@ -100,7 +108,7 @@ export const BusinessInformationUI = (props) => {
                   </>
                 )}
                 {
-                  business?.address && <BusinessAddress>{business?.address}</BusinessAddress>
+                  !hideAddress && business?.address && <BusinessAddress>{business?.address}</BusinessAddress>
                 }
                 <Divider />
               </>
@@ -108,7 +116,7 @@ export const BusinessInformationUI = (props) => {
           }
           {businessSchedule?.length > 0 && (
             <>
-              {showSchedule && (
+              {!hideSchedule && (
                 <>
                   <SectionTitle>{t('OPENING_TIME', 'Opening time')}</SectionTitle>
                   <ScheduleSection>
@@ -128,14 +136,18 @@ export const BusinessInformationUI = (props) => {
               )}
               <DeliveryInfo>
                 <div>
-                  <h5>{t('DELIVERY_TIME', 'Delivery Time')}: {convertHoursToMinutes(business?.delivery_time)}</h5>
-                  <h5>{t('PICKUP_TIME', 'Pickup Time')}: {convertHoursToMinutes(business?.pickup_time)}</h5>
+                  {!hideDeliveryTime && (
+                    <h5>{t('DELIVERY_TIME', 'Delivery Time')}: {convertHoursToMinutes(business?.delivery_time)}</h5>
+                  )}
+                  {!hidePickupTime && (
+                    <h5>{t('PICKUP_TIME', 'Pickup Time')}: {convertHoursToMinutes(business?.pickup_time)}</h5>
+                  )}
                 </div>
               </DeliveryInfo>
               <Divider />
             </>
           )}
-          {businessVideos?.length > 0 && (
+          {!hideVideos && businessVideos?.length > 0 && (
             <BusinessMediaContent>
               <SectionTitle>{t('VIDEOS', 'Videos')}</SectionTitle>
               <div>
@@ -146,7 +158,7 @@ export const BusinessInformationUI = (props) => {
             </BusinessMediaContent>
           )}
           <Divider />
-          {businessPhotos?.length > 0 && (
+          {!hideImages && businessPhotos?.length > 0 && (
             <BusinessMediaContent>
               <SectionTitle>{t('IMAGES', 'Images')}</SectionTitle>
               <div>

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

@@ -1,6 +1,6 @@
 import React, { useState, useRef, useEffect } from 'react'
 import TiArrowSortedUp from '@meronex/icons/ti/TiArrowSortedUp'
-import { useOrder, useLanguage, useEvent, useUtils, useConfig, useOrderingTheme } from 'ordering-components-external'
+import { useOrder, useLanguage, useEvent, useUtils, useConfig } from 'ordering-components-external'
 import { useTheme } from 'styled-components'
 import FiClock from '@meronex/icons/fi/FiClock'
 import {
@@ -49,7 +49,6 @@ export const BusinessItemAccordion = (props) => {
   const [{ parsePrice }] = useUtils()
   const [{ configs }] = useConfig()
   const theme = useTheme()
-  const [orderingTheme] = useOrderingTheme()
   const [setActive, setActiveState] = useState('')
   const [setHeight, setHeightState] = useState('0px')
   const [setRotate, setRotateState] = useState('accordion__icon')
@@ -63,8 +62,8 @@ export const BusinessItemAccordion = (props) => {
   const changeStore = useRef(null)
 
   const viewString = isStore ? 'business_view' : 'header'
-  const showBusinessLogo = !orderingTheme?.theme?.[viewString]?.components?.cart?.components?.business?.components?.logo?.hidden
-  const showBusinessTime = !orderingTheme?.theme?.[viewString]?.components?.cart?.components?.business?.components?.time?.hidden
+  const hideBusinessLogo = theme?.[viewString]?.components?.cart?.components?.business?.components?.logo?.hidden
+  const hideBusinessTime = theme?.[viewString]?.components?.cart?.components?.business?.components?.time?.hidden
 
   const toggleAccordion = (e) => {
     const isActionsClick = businessStore.current?.contains(e?.target) || businessDelete.current?.contains(e?.target) || changeStore.current?.contains(e?.target)
@@ -146,14 +145,14 @@ export const BusinessItemAccordion = (props) => {
               onClick={(e) => toggleAccordion(e)}
             >
               <BusinessInfo>
-                {!showBusinessLogo && (
+                {!hideBusinessLogo && (
                   <WrapperBusinessLogo>
                     <BusinessLogo bgimage={business?.logo || theme.images?.dummies?.businessLogo} />
                   </WrapperBusinessLogo>
                 )}
                 <ContentInfo className='info' isStore={isStore}>
                   <h2>{business?.name}</h2>
-                  {!showBusinessTime && (
+                  {!hideBusinessTime && (
                     <TimeContainer>
                       {orderState?.options?.type === 1 ? (
                         <span>