ordering-ui-external 4.0.7 → 5.0.0

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

@@ -19,6 +19,7 @@ import { Modal } from '../Modal'
 import { SignUpForm } from '../SignUpForm'
 import { LoginForm } from '../LoginForm'
 import { ForgotPasswordForm } from '../ForgotPasswordForm'
+import { X as CloseIcon } from 'react-bootstrap-icons'
 
 import {
   Container,
@@ -30,7 +31,8 @@ import {
   MenuLinkIcon,
   MenuLinkText,
   TextInfo,
-  MenuLinkSeparator
+  MenuLinkSeparator,
+  MobileMessage
 } from './styles'
 
 export const SidebarMenu = (props) => {
@@ -44,6 +46,7 @@ export const SidebarMenu = (props) => {
   const [isMenuOpen, setIsMenuOpen] = useState(false)
   const [modalIsOpen, setModalIsOpen] = useState(false)
   const [modalPageToShow, setModalPageToShow] = useState(null)
+  const [showMessage, setShowMessage] = useState(false)
 
   const isHome = window.location.pathname === '/' || window.location.pathname === '/home'
 
@@ -100,6 +103,13 @@ export const SidebarMenu = (props) => {
     }
   }, [width])
 
+  useEffect(() => {
+    if(!isCustomerMode) return
+    if (/Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent)) {
+      setShowMessage(true)
+    }
+  }, [])
+
   return (
     <>
       {props.beforeElements?.map((BeforeElement, i) => (
@@ -108,6 +118,14 @@ export const SidebarMenu = (props) => {
         </React.Fragment>))}
       {props.beforeComponents?.map((BeforeComponent, i) => (
         <BeforeComponent key={i} {...props} />))}
+        {showMessage && (
+        <MobileMessage>
+          <div>
+            <CloseIcon onClick={() => setShowMessage(false)} />
+            {t('FOR_THE_BEST_EXPERIENCE_WHILE_SETTING_UP', 'For the best experience while setting up your project, we recommend using a computer.')}
+          </div>
+        </MobileMessage>
+      )}
       <Container auth={auth}>
         <IconContent
           isHome={isHome}

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

@@ -226,3 +226,30 @@ export const MenuLinkSeparator = styled.div`
     }
   }
 `
+
+export const MobileMessage = styled.div`
+  position: fixed;
+  top: 100px;
+  left: calc(50% - 130px);
+  z-index: 999;
+  background: ${props => props.theme.colors.primaryContrast};
+  border: 1px solid ${props => props.theme.colors.primary};
+  box-sizing: border-box;
+  box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.12);
+  border-radius: 7.6px;
+  width: 260px;
+  color: ${props => props.theme.colors.black};
+  > div {
+    padding: 15px 15px 10px 15px;
+    font-size: 12px;
+    line-height: 18px;
+    position: relative;
+    > svg {
+      position: absolute;
+      top: 3px;
+      right: 3px;
+      cursor: pointer;
+      font-size: 21px;
+    }
+  }
+`

package/src/themes/callcenterOriginal/src/components/UserDetails/index.js

@@ -116,7 +116,7 @@ const UserDetailsUI = (props) => {
                   <CountryFlag>
                     {
                       userData?.country_phone_code && (
-                        <PhoneInput onChange={() => {}} defaultCountry={parsePhoneNumber(`+${(userData?.country_phone_code?.replace('+', ''))} ${userData?.cellphone}`)?.country} />
+                        <PhoneInput onChange={() => { }} defaultCountry={parsePhoneNumber(`+${(userData?.country_phone_code?.replace('+', ''))} ${userData?.cellphone.replace(`+${userData?.country_phone_code}`, '')}`)?.country} />
                       )
                     }
                   </CountryFlag>

package/src/themes/callcenterOriginal/src/components/UserDetails/styles.js

@@ -89,7 +89,7 @@ export const TitleContainer = styled.div`
     font-size: 24px;
   }
   ${({ isAddressFormOpen }) => isAddressFormOpen && css`
-      h1{ 
+      h1{
         width: 75%;
       }
   `}
@@ -112,4 +112,8 @@ export const PhoneContainer = styled.div`
   display: flex;
   align-items: center;
   height: 30px;
+  
+  p {
+    margin: 0;
+  }
 `

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

@@ -22,6 +22,7 @@ import {
   ImageContainer,
   BusinessTitle,
   BusinessAddress,
+  BusinessAddressNotes,
   Divider
 } from './styles'
 import MdClose from '@meronex/icons/md/MdClose'
@@ -112,6 +113,7 @@ export const BusinessInformationUI = (props) => {
                 {
                   !hideAddress && business?.address && <BusinessAddress>{business?.address}</BusinessAddress>
                 }
+                {business?.address_notes && <BusinessAddressNotes>{business?.address_notes}</BusinessAddressNotes>}
                 <Divider />
               </>
             )

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

@@ -163,6 +163,10 @@ export const DeliveryInfo = styled.div`
   justify-content: flex-start;
   margin-top: 10px;
 
+  h5 {
+    font-size: 16px;
+  }
+
   div {
     width: 100%;
     &:last-child {
@@ -276,7 +280,12 @@ export const BusinessTitle = styled.h2`
 export const BusinessAddress = styled.p`
   font-size: 14px;
   color: ${props => props.theme.colors.darkTextColor};
-  margin-bottom: 25px;
+  margin: 15px 0;
+`
+export const BusinessAddressNotes = styled.p`
+  font-size: 14px;
+  color: ${props => props.theme.colors.darkTextColor};
+  margin: 15px 0 25px 0;
 `
 
 export const Divider = styled.div`

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

@@ -220,6 +220,9 @@ export const PriceContainer = styled.div`
   display: flex;
   justify-content: space-between;
   align-items: center;
+  h4 {
+    font-size: 16px;
+  }
   button{ 
     padding: 10px 30px;
     min-width: 150px;

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

@@ -125,8 +125,7 @@ const BusinessProductsCategoriesUI = (props) => {
   }
 
   useEffect(() => {
-    if (typeof useKioskApp === 'undefined') return
-    const styleSheet = document.getElementById('styles').sheet
+    const styleSheet = document.getElementById('styles')?.sheet
 
     if (Object.values(styleSheet.cssRules)?.length) {
       styleSheet?.deleteRule(0)

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

@@ -38,7 +38,8 @@ const BusinessProductsListUI = (props) => {
     categoriesState,
     onClickCategory,
     currentCart,
-    handleUpdateProducts
+    handleUpdateProducts,
+    isCustomerMode
   } = props
 
   const [, t] = useLanguage()
@@ -92,6 +93,7 @@ const BusinessProductsListUI = (props) => {
                   isCartOnProductsList={isCartOnProductsList}
                   handleUpdateProducts={handleUpdateProducts}
                   productAddedToCartLength={currentCart?.products?.reduce((productsLength, Cproduct) => { return productsLength + (Cproduct?.id === product?.id ? Cproduct?.quantity : 0) }, 0)}
+                  isCustomerMode={isCustomerMode}
                 />
               ))
             }
@@ -129,6 +131,7 @@ const BusinessProductsListUI = (props) => {
                     handleUpdateProducts={handleUpdateProducts}
                     isCartOnProductsList={isCartOnProductsList}
                     productAddedToCartLength={currentCart?.products?.reduce((productsLength, Cproduct) => { return productsLength + (Cproduct?.id === product?.id ? Cproduct?.quantity : 0) }, 0)}
+                    isCustomerMode={isCustomerMode}
                   />
                 ))}
                 {!business?.food && !categoryState?.loading && featProducts?.length > 9 && (
@@ -216,6 +219,7 @@ const BusinessProductsListUI = (props) => {
                             handleUpdateProducts={handleUpdateProducts}
                             isCartOnProductsList={isCartOnProductsList}
                             productAddedToCartLength={currentCart?.products?.reduce((productsLength, Cproduct) => { return productsLength + (Cproduct?.id === product?.id ? Cproduct?.quantity : 0) }, 0)}
+                            isCustomerMode={isCustomerMode}
                           />
                         ))
                       }

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

@@ -84,6 +84,7 @@ const BusinessProductsListingUI = (props) => {
     handleChangePriceFilterValues,
     priceFilterValues,
     handleUpdateProfessionals,
+    isCustomerMode,
     isCustomLayout
   } = props
 
@@ -132,9 +133,10 @@ const BusinessProductsListingUI = (props) => {
       setProductIdToLoading(product.id)
       const isProductAddedToCart = currentCart?.products?.find(Cproduct => Cproduct.id === product.id)
       const productQuantity = isProductAddedToCart?.quantity
+      const minimumPerOrder = product?.minimum_per_order || 1
       const addCurrentProduct = {
         ...product,
-        quantity: 1
+        quantity: minimumPerOrder
       }
       const updateCurrentProduct = {
         id: product.id,
@@ -381,6 +383,7 @@ const BusinessProductsListingUI = (props) => {
           handleChangePriceFilterValues={handleChangePriceFilterValues}
           productToIdLoading={productToIdLoading}
           handleUpdateProfessionals={handleUpdateProfessionals}
+          isCustomerMode={isCustomerMode}
         />
 
         {
@@ -529,6 +532,7 @@ const BusinessProductsListingUI = (props) => {
                 productId={curProduct?.id}
                 handleUpdateProducts={handleUpdateProducts}
                 onSave={handlerProductAction}
+                isCustomerMode={isCustomerMode}
                 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/Checkout/index.js

@@ -219,7 +219,7 @@ const CheckoutUI = (props) => {
   const checkValidationFields = () => {
     setUserErrors([])
     const errors = []
-    const notFields = ['coupon', 'driver_tip', 'mobile_phone', 'address', 'zipcode', 'address_notes']
+    const notFields = ['coupon', 'driver_tip', 'mobile_phone', 'address', 'zipcode', 'address_notes', 'comments']
     const userSelected = isCustomerMode ? customerState.user : user
     const _requiredFields = []
 
@@ -423,6 +423,7 @@ const CheckoutUI = (props) => {
                         <p>{businessDetails?.business?.name}</p>
                         <p>{businessDetails?.business?.email}</p>
                         <p>{businessDetails?.business?.cellphone}</p>
+                        {businessDetails?.business?.address_notes && <p>{businessDetails?.business?.address_notes}</p>}
                       </div>
                     </div>
                   )}

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) => {