ordering-ui-external 4.0.6 → 5.0.0

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

@@ -1,12 +1,14 @@
 import React from 'react'
 import {
   CardWrapper,
-  CardsContainer
+  CardsContainer,
+  CardsContainerWrapper
 } from './styles'
 import { OrdersContainer } from '../OrdersOption/styles'
 
 import { SingleOrderCard } from '../SingleOrderCard'
 import { Pagination } from '../Pagination'
+import { AutoScroll } from '../AutoScroll'
 
 export const HorizontalOrdersLayout = (props) => {
   const {
@@ -38,15 +40,19 @@ export const HorizontalOrdersLayout = (props) => {
         isBusinessesPage={isBusinessesPage}
       >
         <CardWrapper>
-          <CardsContainer>
-            {orders.length > 0 && ordersToShow.map((order, i) => (
-              <SingleOrderCard
-                {...props}
-                key={order.id || order.id?.[0] || i}
-                order={order}
-              />
-            ))}
-          </CardsContainer>
+          <CardsContainerWrapper>
+            <CardsContainer>
+              <AutoScroll scrollId='orderScroll'>
+                {orders.length > 0 && ordersToShow.map((order, i) => (
+                  <SingleOrderCard
+                    {...props}
+                    key={order.id || order.id?.[0] || i}
+                    order={order}
+                  />
+                ))}
+              </AutoScroll>
+            </CardsContainer>
+          </CardsContainerWrapper>
           {orders.length > 0 && ordersToShow.length > 0 && (
             <Pagination
               currentPage={pagination.currentPage}

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

@@ -21,7 +21,22 @@ export const CardWrapper = styled.div`
 `
 export const CardsContainer = styled.div`
   display: flex;
-  overflow-x: auto;
+`
+
+export const CardsContainerWrapper = styled.div`
+  margin-bottom: 10px;
+  display: flex;
+  overflow: auto hidden;
+  ::-webkit-scrollbar {
+    width: 6px;
+    height: 6px;
+  }
+  ${({ isLoading }) => isLoading && css`
+    ::-webkit-scrollbar {
+      width: 0px;
+      height: 0px;
+    }
+  `}
 `
 
 export const Price = styled.div`

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

@@ -1,5 +1,5 @@
 import React, { useEffect, useState } from 'react'
-import { useLanguage, useOrder, useConfig, useSession } from 'ordering-components-external'
+import { useLanguage, useOrder, useConfig, useSession, useBusiness } from 'ordering-components-external'
 import { MomentPopover } from '../../../../pwa/src/components/MomentPopover'
 import { OrderTypeSelectorHeader } from '../../../../../components/OrderTypeSelectorHeader'
 import FaMapMarkerAlt from '@meronex/icons/fa/FaMapMarkerAlt'
@@ -14,24 +14,38 @@ import {
   ItemInline
 } from './styles'
 import { useWindowSize } from '../../../../../hooks/useWindowSize'
+import { MomentContent } from '../MomentContent'
+import { OrderTypeSelectorContent } from '../OrderTypeSelectorContent'
+import { getCateringValues } from '../../../../../utils'
+import { useLocation } from 'react-router-dom'
 
 export const OrderContextUI = (props) => {
   const { isCheckOut, setMapErrors, isCustomerMode, isBusinessList } = props
 
+  const { pathname } = useLocation()
   const [, t] = useLanguage()
   const [orderState] = useOrder()
   const [configState] = useConfig()
   const [{ auth }] = useSession()
+  const [{ business }] = useBusiness()
 
   const [openPopover, setOpenPopover] = useState({})
   const [modals, setModals] = useState({ listOpen: false, formOpen: false, citiesOpen: false })
   const [alertState, setAlertState] = useState({ open: false, content: [] })
+  const [modalSelected, setModalSelected] = useState(null)
+  const [modalIsOpen, setModalIsOpen] = useState(false)
   const windowSize = useWindowSize()
   const userCustomer = JSON.parse(window.localStorage.getItem('user-customer'))
 
   const configTypes = configState?.configs?.order_types_allowed?.value.split('|').map(value => Number(value)) || []
   const isPreOrderSetting = configState?.configs?.preorder_status_enabled?.value === '1'
+  const cateringTypeString = orderState?.options?.type === 7
+    ? 'catering_delivery'
+    : orderState?.options?.type === 8
+      ? 'catering_pickup'
+      : null
 
+  const cateringValues = getCateringValues(cateringTypeString, pathname.includes('store') && Object?.keys(business || {})?.length > 0 ? business?.configs : configState?.configs)
   const handleTogglePopover = (type) => {
     setOpenPopover({
       ...openPopover,
@@ -67,6 +81,11 @@ export const OrderContextUI = (props) => {
     }
   }
 
+  const openModal = (opt) => {
+    setModalSelected(opt)
+    setModalIsOpen(true)
+  }
+
   useEffect(() => {
     const handleCloseallPopovers = () => handleClosePopover('moment')
     window.addEventListener('scroll', handleCloseallPopovers)
@@ -84,13 +103,14 @@ export const OrderContextUI = (props) => {
           <span>{orderState.options?.address?.address || t('WHERE_DO_WE_DELIVERY', 'Where do we delivery?')}</span>
         </AddressMenu>
         <FeatureItems>
-          <ItemInline>
+          <ItemInline onClick={() => openModal('delivery')}>
             <OrderTypeSelectorHeader configTypes={configTypes} autoCloseWhenScroll={windowSize.width < 576} />
           </ItemInline>
           {isPreOrderSetting && (
-            <ItemInline>
+            <ItemInline onClick={() => openModal('moment')}>
               <MomentPopover
                 open={openPopover.moment}
+                onCustomClick={() => openModal('moment')}
                 onClick={() => handleTogglePopover('moment')}
                 onClose={() => handleClosePopover('moment')}
                 isBanner
@@ -99,6 +119,30 @@ export const OrderContextUI = (props) => {
           )}
         </FeatureItems>
       </Container>
+      {modalIsOpen && (
+        <Modal
+          open={modalIsOpen}
+          onClose={() => setModalIsOpen(false)}
+          width={orderState?.options?.user_id ? '70%' : '50%'}
+        >
+          {modalSelected === 'moment' && (
+            <MomentContent
+              onClose={() => setModalIsOpen(false)}
+              cateringPreorder={!!cateringTypeString}
+              isHeader
+              business={pathname.includes('store') && business}
+              {...cateringValues}
+            />
+          )}
+          {modalSelected === 'delivery' && (
+            <OrderTypeSelectorContent
+              onClose={() => setModalIsOpen(false)}
+              configTypes={!configState?.loading && configTypes?.length > 0 ? configTypes : null}
+              defaultValue={!(!configState?.loading && configTypes?.length > 0) && 1}
+            />
+          )}
+        </Modal>
+      )}
       <Modal
         title={t('ADDRESS_FORM', 'Address Form')}
         open={modals.formOpen}

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

@@ -50,6 +50,9 @@ export const FeatureItems = styled.div`
 `
 
 export const ItemInline = styled.div`
+  > * {
+    pointer-events: none;
+  }
   > span #select-input {
     background-color: ${props => props.theme.colors.grayDividerColor} !important;
     border: none;

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

@@ -120,15 +120,15 @@ const PageBannerUI = (props) => {
             <Swiper
               navigation
               spaceBetween={0}
+              shortSwipes={false}
               loop={pageBannerState.banner?.items.length > 1}
             >
               {pageBannerState.banner?.items.map((img, i) => (
                 <SwiperSlide
                   key={i}
+                  onClick={() => handleGoToPage(img?.action)}
                 >
-                  <ImageWrapper
-                    onClick={() => handleGoToPage(img?.action)}
-                  >
+                  <ImageWrapper>
                     <img src={img.url} className='banner-img' alt='' />
                   </ImageWrapper>
                 </SwiperSlide>

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

@@ -133,6 +133,10 @@ export const WrappBtn = styled.div`
 
   button {
     min-width: 130px;
+    max-width: 400px;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
   }
 `
 

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

@@ -294,22 +294,24 @@ const ProductOptionsUI = (props) => {
         })
         menuList.length && menuList.forEach(menu => {
           const elementTop = scrollElement.scrollTop
-          const topPos = document.getElementById(menu).offsetTop
-          if (Math.abs(elementTop - topPos) < extraHeight) {
-            setTabValue(menu)
-            const elementLeft = document.getElementById(`menu_${menu}`).offsetLeft
-            const scrollLeft = document.getElementById('all').scrollLeft
-            if (elementLeft < scrollLeft) {
-              document.getElementById('all').scrollTo({
-                left: elementLeft,
-                behavior: 'smooth'
-              })
-            }
-            if (elementLeft < scrollLeft + scrollElement.clientWidth) {
-              document.getElementById('all').scrollTo({
-                left: elementLeft - scrollElement.clientWidth / 2,
-                behavior: 'smooth'
-              })
+          if (document.getElementById(menu)) {
+            const topPos = document.getElementById(menu).offsetTop
+            if (Math.abs(elementTop - topPos) < extraHeight) {
+              setTabValue(menu)
+              const elementLeft = document.getElementById(`menu_${menu}`).offsetLeft
+              const scrollLeft = document.getElementById('all').scrollLeft
+              if (elementLeft < scrollLeft) {
+                document.getElementById('all').scrollTo({
+                  left: elementLeft,
+                  behavior: 'smooth'
+                })
+              }
+              if (elementLeft < scrollLeft + scrollElement.clientWidth) {
+                document.getElementById('all').scrollTo({
+                  left: elementLeft - scrollElement.clientWidth / 2,
+                  behavior: 'smooth'
+                })
+              }
             }
           }
         })
@@ -550,14 +552,16 @@ const ProductOptionsUI = (props) => {
                 </ProductDescription>
               )}
             </ProductFormTitle>
-            <ProductTagsListContainer>
-              {product.tags.map(tag => (
-                <ProductTagWrapper key={tag.id}>
-                  <img src={optimizeImage(tag?.image || theme.images?.dummies?.product, 'h_40,c_limit')} alt='' />
-                  <span>{tag.name}</span>
-                </ProductTagWrapper>
-              ))}
-            </ProductTagsListContainer>
+            {product?.tags?.length > 0 && (
+              <ProductTagsListContainer>
+                {product.tags.map(tag => (
+                  <ProductTagWrapper key={tag.id}>
+                    <img src={optimizeImage(tag?.image || theme.images?.dummies?.product, 'h_40,c_limit')} alt='' />
+                    <span>{tag.name}</span>
+                  </ProductTagWrapper>
+                ))}
+              </ProductTagsListContainer>
+            )}
             <Divider />
             <ProductEdition>
               {

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

@@ -61,7 +61,7 @@ const ProductShareUI = (props) => {
         )}
         <ShareButtons
           ref={contentElement}
-          className='a2a_kit a2a_kit_size_32 a2a_floating_style a2a_vertical_style'
+          className='a2a_kit a2a_kit_size_32 a2a_vertical_style'
           data-a2a-url={urlToShare}
           showShareButton={showShareButton}
         >

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

@@ -49,7 +49,6 @@ export const IconShare = styled.div`
 
     &:nth-child(1) > svg {
       background-color: white;
-      padding: 5px;
       border-radius: 9px;
       margin: 5px 0px;
     }
@@ -75,8 +74,7 @@ export const ShareButtons = styled.div`
 
   @media (min-width: 1201px) {
     top: 35px;
-    left: 0px;
-    right: 0px;
+    left: -8px;
   }
 `
 export const CopyButton = styled.a`

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

@@ -87,7 +87,8 @@ export const RenderProductsLayout = (props) => {
     onBusinessClick,
     handleChangePriceFilterValues,
     priceFilterValues,
-    handleUpdateProfessionals
+    handleUpdateProfessionals,
+    isCustomerMode,
   } = props
 
   const theme = useTheme()
@@ -192,9 +193,11 @@ export const RenderProductsLayout = (props) => {
               />
             )}
 
-            <PageBannerWrapper>
-              <PageBanner position='web_business_page' />
-            </PageBannerWrapper>
+              {!isCustomerMode && (
+                <PageBannerWrapper>
+                  <PageBanner position='web_business_page' />
+                </PageBannerWrapper>
+              )}
 
             {!errorQuantityProducts && SearchProductsComponent && !useKioskApp && (
               <>
@@ -473,6 +476,7 @@ export const RenderProductsLayout = (props) => {
                   isSkeleton
                   categories={[]}
                   openBusinessInformation={openBusinessInformation}
+                  isCustomerMode={isCustomerMode}
                 />
               </div>
             </BusinessCategoryProductWrapper>

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

@@ -70,7 +70,7 @@ const ResetPasswordUI = (props) => {
     } else if (!formState.loading && formState.result?.result?.length) {
       setAlertState({
         open: true,
-        content: formState.result?.result === 'OK' ? t('PASSWORD_RESET_SUCCESS', 'Password changed successfully') : t(formState.result?.result, 'Password changed successfully')
+        content: t('PASSWORD_RESET_SUCCESS', 'Password changed successfully')
       })
     }
     if (!formState.loading && formState.result?.result?.length > 0 && !formState.result.error) {

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

@@ -14,6 +14,10 @@ export const DropdownWrapper = styled.div`
   display: flex;
   align-items: center;
   gap: 10px;
+
+  > h4 {
+    font-size: 16px;
+  }
 `
 export const HoursWrappers = styled.div`
   flex-direction: column;

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

@@ -13,7 +13,7 @@ import BiHelpCircle from '@meronex/icons/bi/BiHelpCircle'
 import SiJsonwebtokens from '@meronex/icons/si/SiJsonwebtokens'
 import BiMessageDetail from '@meronex/icons/bi/BiMessageDetail'
 import BsSearch from '@meronex/icons/bs/BsSearch'
-import { Heart, Tag } from 'react-bootstrap-icons'
+import { Heart, Tag, X as CloseIcon } from 'react-bootstrap-icons'
 
 import { useEvent, useLanguage, useOrder, useSession, useConfig } from 'ordering-components-external'
 import { useTheme } from 'styled-components'
@@ -35,7 +35,8 @@ import {
   MenuLinkIcon,
   MenuLinkText,
   TextInfo,
-  MenuLinkSeparator
+  MenuLinkSeparator,
+  MobileMessage
 } from './styles'
 
 export const SidebarMenu = (props) => {

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

@@ -254,9 +254,9 @@ const SingleOrderCardUI = (props) => {
               }
             </Price>
           )}
-          {pastOrders && !isCustomerMode && (
-            <ButtonWrapper>
-              {!isOrderReviewed && !isFavorite && (!order?.review || (order.driver && !order?.user_review)) && !hideReviewOrderButton && (
+          {pastOrders && (
+            <ButtonWrapper isCustomerMode={isCustomerMode}>
+              {!isOrderReviewed && !isFavorite && (!order?.review || (order.driver && !order?.user_review)) && !hideReviewOrderButton && !isCustomerMode && (
                 <Button
                   outline
                   color='primary'
@@ -273,7 +273,7 @@ const SingleOrderCardUI = (props) => {
               )}
             </ButtonWrapper>
           )}
-          {!order?.business?.length && !hideFavorite && (
+          {!order?.business?.length && !hideFavorite && !isCustomerMode && (
             <FavoriteWrapper onClick={() => handleChangeFavorite(order)} className='favorite'>
               {isSkeleton ? <Skeleton width={20} height={20} /> : (
                 <>

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

@@ -200,7 +200,7 @@ export const BusinessLogoWrapper = (props) => {
 export const ButtonWrapper = styled.div`
   position: absolute;
   right: 0px;
-  top: 4px;
+  ${({ isCustomerMode }) => isCustomerMode ? css`bottom: 4px;` : css`top: 4px;`}
   display: flex;
   align-items: center;
 

package/src/themes/five/src/components/SingleProductCard/layouts/original/index.js

@@ -44,7 +44,8 @@ const SingleProductCardUI = (props) => {
     handleFavoriteProduct,
     isFavorite,
     isPreviously,
-    viewString
+    viewString,
+    isCustomerMode
   } = props
 
   const [, t] = useLanguage()
@@ -165,7 +166,7 @@ const SingleProductCardUI = (props) => {
                 <CardInfo soldOut={isSoldOut || maxProductQuantity <= 0} isBgimage={optimizeImage(product?.images || theme?.images?.dummies?.product, 'h_86,c_limit')} oneLine={isPreviously}>
                   <TitleWrapper>
                     {!isSkeleton ? (<h1>{product?.name}</h1>) : (<Skeleton width={100} />)}
-                    {!useKioskApp && !isPreviously && (
+                    {(!useKioskApp && !isPreviously && isCustomerMode) && (
                       !isSkeleton ? (
                         <span onClick={() => handleChangeFavorite()} ref={favoriteRef}>
                           {product?.favorite ? <Like /> : <DisLike />}

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

@@ -6,6 +6,9 @@ export const TaxInformationContainer = styled.div`
     margin: 10px;
     text-align: center;
   }
+  h3{
+    font-size: 18px;
+  }
 `
 
 export const ProductContainer = styled.div`

package/template/pages/BusinessProductsList/index.js

@@ -106,6 +106,7 @@ export const BusinessProductsList = (props) => {
       'ribbon',
       'description',
       'address',
+      'address_notes',
       'location',
       'timezone',
       'schedule',