ordering-ui-external 1.9.1 → 1.9.3

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

@@ -1,4 +1,3 @@
-
 import React, { useState, useEffect, useRef } from 'react'
 import { useLocation } from 'react-router-dom'
 import { useSession, useLanguage, useOrder, useEvent, useConfig, useCustomer, useUtils, useOrderingTheme } from 'ordering-components-external'
@@ -27,7 +26,8 @@ import {
   Divider,
   AddressFormWrapper,
   LanguageSelectorWrapper,
-  HeaderSearchMode
+  HeaderSearchMode,
+  LeftSide
 } from './styles'
 import { useWindowSize } from '../../../../../hooks/useWindowSize'
 import { useOnlineStatus } from '../../../../../hooks/useOnlineStatus'
@@ -97,6 +97,7 @@ export const Header = (props) => {
   const configTypes = configState?.configs?.order_types_allowed?.value.split('|').map(value => Number(value)) || []
   const isPreOrderSetting = configState?.configs?.preorder_status_enabled?.value === '1'
   const isChew = orderingTheme?.theme?.header?.components?.layout?.type?.toLowerCase() === 'chew'
+  const isHideLanguages = theme?.header?.components?.language_selector?.hidden
 
   const handleSuccessSignup = (user) => {
     login({
@@ -209,15 +210,9 @@ export const Header = (props) => {
   }, [orderState?.options?.address?.location, pathname])
 
   return (
-    <>
-      {props.beforeElements?.map((BeforeElement, i) => (
-        <React.Fragment key={i}>
-          {BeforeElement}
-        </React.Fragment>))}
-      {props.beforeComponents?.map((BeforeComponent, i) => (
-        <BeforeComponent key={i} {...props} />))}
-      <HeaderContainer isChew={isChew}>
-        <InnerHeader>
+    <HeaderContainer isChew={isChew}>
+      <InnerHeader>
+        <LeftSide>
           <LeftHeader id='left-side'>
             <SidebarMenu
               auth={auth}
@@ -233,7 +228,7 @@ export const Header = (props) => {
               <img alt='Isotype' width={isChew ? '70px' : '35px'} height={isChew ? '20px' : '45px'} src={isChew ? theme?.images?.logos?.chewLogo : orderingTheme?.my_products?.components?.images?.components?.logo?.components?.image || (isHome ? theme?.images?.logos?.isotypeInvert : theme?.images?.logos?.isotype)} loading='lazy' />
             </LogoHeader>
           </LeftHeader>
-          {isShowOrderOptions && !props.isCustomLayout && (
+          {isShowOrderOptions && !props.isCustomLayout && windowSize.width >= 576 && (
             <Menu id='center-side' className='left-header' isCustomerMode={isCustomerMode} isChew={isChew}>
               {windowSize.width > 820 && isFarAway && (
                 <FarAwayMessage>
@@ -313,106 +308,118 @@ export const Header = (props) => {
               )}
             </Menu>
           )}
-          {windowSize.width > 1200 && window.location.pathname === '/search' && (
-            <HeaderSearchMode>
-              <SearchBar
-                lazyLoad
-                search={searchValue}
-                placeholder={t('SEARCH_BUSINESSES', 'Search Businesses')}
-                starbucksStyle
-                onSearch={(value) => setSearchValue(value)}
-                handleCustomEnter={() => events.emit('go_to_page', { page: 'business_search' })}
-              />
-            </HeaderSearchMode>
-          )}
-          {onlineStatus && (
-            <RightHeader id='right-side'>
-              <Menu isCustomerMode={isCustomerMode}>
-                {
-                  !auth && windowSize.width > 920 && (
-                    <>
-                      <MenuLink onClick={() => handleOpenLoginSignUp('login')} style={{ whiteSpace: 'nowrap' }} name='signin'>{t('LOGIN', theme?.defaultLanguages?.LOGIN || 'Login')}</MenuLink>
-                      {!isHideSignup && (
-                        <MenuLink
-                          onClick={() => handleOpenLoginSignUp('signup')}
-                          highlight={1}
-                          style={{ whiteSpace: 'nowrap' }}
-                          name='signup'
-                        >
-                          {t('SIGN_UP', theme?.defaultLanguages?.SIGN_UP || 'Sign up')}
-                        </MenuLink>
-                      )}
-                    </>
-                  )
-                }
-                {
-                  auth && (
-                    <>
-                      {isShowOrderOptions && (
-                        windowSize.width > 768 ? (
-                          <CartPopover
-                            open={openPopover.cart}
-                            carts={cartsWithProducts}
-                            onClick={() => handleTogglePopover('cart')}
-                            onClose={() => handleClosePopover('cart')}
-                            auth={auth}
-                            location={location}
-                            isCustomerMode={isCustomerMode}
-                            setPreorderBusiness={setPreorderBusiness}
-                          />
-                        ) : (
-                          <HeaderOption
-                            variant='cart'
-                            totalCarts={cartsWithProducts?.length}
-                            onClick={(variant) => openModal(variant)}
-                          />
-                        )
-                      )}
-                      {windowSize.width > 768 && (
-                        <UserPopover
-                          withLogout
+        </LeftSide>
+        {windowSize.width > 1200 && window.location.pathname === '/search' && (
+          <HeaderSearchMode>
+            <SearchBar
+              lazyLoad
+              search={searchValue}
+              placeholder={t('SEARCH_BUSINESSES', 'Search Businesses')}
+              starbucksStyle
+              onSearch={(value) => setSearchValue(value)}
+              handleCustomEnter={() => events.emit('go_to_page', { page: 'business_search' })}
+            />
+          </HeaderSearchMode>
+        )}
+        {onlineStatus && (
+          <RightHeader id='right-side'>
+            <Menu isCustomerMode={isCustomerMode}>
+              {
+                !auth && windowSize.width > 920 && (
+                  <>
+                    <MenuLink
+                      name='signin'
+                      highlight={isChew && 1}
+                      style={{ whiteSpace: 'nowrap' }}
+                      onClick={() => handleOpenLoginSignUp('login')}
+                    >
+                      {t('LOGIN', theme?.defaultLanguages?.LOGIN || 'Login')}
+                    </MenuLink>
+                    {!isHideSignup && (
+                      <MenuLink
+                        name='signup'
+                        highlight={1}
+                        style={{ whiteSpace: 'nowrap' }}
+                        onClick={() => handleOpenLoginSignUp('signup')}
+                      >
+                        {t('SIGN_UP', theme?.defaultLanguages?.SIGN_UP || 'Sign up')}
+                      </MenuLink>
+                    )}
+                  </>
+                )
+              }
+              {
+                auth && (
+                  <>
+                    {isShowOrderOptions && (
+                      windowSize.width > 768 ? (
+                        <CartPopover
+                          open={openPopover.cart}
+                          carts={cartsWithProducts}
+                          onClick={() => handleTogglePopover('cart')}
+                          onClose={() => handleClosePopover('cart')}
+                          auth={auth}
+                          location={location}
                           isCustomerMode={isCustomerMode}
-                          open={openPopover.user}
-                          handleOpenAddressModal={() => openModal('address')}
-                          onClick={() => handleTogglePopover('user')}
-                          onClose={() => handleClosePopover('user')}
+                          setPreorderBusiness={setPreorderBusiness}
                         />
-                      )}
-                    </>
-                  )
-                }
+                      ) : (
+                        <HeaderOption
+                          variant='cart'
+                          totalCarts={cartsWithProducts?.length}
+                          onClick={(variant) => openModal(variant)}
+                        />
+                      )
+                    )}
+                    {windowSize.width > 768 && (
+                      <UserPopover
+                        withLogout
+                        isCustomerMode={isCustomerMode}
+                        open={openPopover.user}
+                        handleOpenAddressModal={() => openModal('address')}
+                        onClick={() => handleTogglePopover('user')}
+                        onClose={() => handleClosePopover('user')}
+                      />
+                    )}
+                  </>
+                )
+              }
+              {!isHideLanguages && (
                 <LanguageSelectorWrapper>
                   <LanguageSelector />
                 </LanguageSelectorWrapper>
-              </Menu>
-            </RightHeader>
-          )}
-        </InnerHeader>
-        {onlineStatus && isShowOrderOptions && !props.isCustomLayout && !isCustomerMode && (
-          windowSize.width > 768 && windowSize.width <= 820 ? (
-            <SubMenu>
-              {isFarAway && (
-                <FarAwayMessage>
-                  <TiWarningOutline />
-                  <span>{t('YOU_ARE_FAR_FROM_ADDRESS', 'You are far from this address')}</span>
-                </FarAwayMessage>
               )}
-              <AddressMenu
-                onClick={() => openModal('address')}
-              >
-                <GeoAlt /> {orderState.options?.address?.address || t('WHAT_IS_YOUR_ADDRESS', 'What\'s your address?')}
-              </AddressMenu>
-              {!isCustomerMode && (isPreOrderSetting || configState?.configs?.preorder_status_enabled?.value === undefined) && (
-                <HeaderOption
-                  variant='moment'
-                  momentState={orderState?.options?.moment}
-                  onClick={configState?.configs?.max_days_preorder?.value === -1 || configState?.configs?.max_days_preorder?.value === 0
-                    ? null
-                    : (variant) => openModal(variant)}
-                />
-              )}
-            </SubMenu>
-          ) : (
+            </Menu>
+          </RightHeader>
+        )}
+      </InnerHeader>
+      {onlineStatus && isShowOrderOptions && !props.isCustomLayout && !isCustomerMode && (
+        windowSize.width > 768 && windowSize.width <= 820 ? (
+          <SubMenu>
+            {isFarAway && (
+              <FarAwayMessage>
+                <TiWarningOutline />
+                <span>{t('YOU_ARE_FAR_FROM_ADDRESS', 'You are far from this address')}</span>
+              </FarAwayMessage>
+            )}
+            <AddressMenu
+              isChew={isChew}
+              onClick={() => openModal('address')}
+            >
+              <GeoAlt /> {orderState.options?.address?.address || t('WHAT_IS_YOUR_ADDRESS', 'What\'s your address?')}
+            </AddressMenu>
+            {!isCustomerMode && (isPreOrderSetting || configState?.configs?.preorder_status_enabled?.value === undefined) && (
+              <HeaderOption
+                variant='moment'
+                momentState={orderState?.options?.moment}
+                onClick={configState?.configs?.max_days_preorder?.value === -1 || configState?.configs?.max_days_preorder?.value === 0
+                  ? null
+                  : (variant) => openModal(variant)}
+              />
+            )}
+          </SubMenu>
+        ) : (
+          windowSize.width >= 576 && (
             <SubMenu>
               {isFarAway && (
                 <FarAwayMessage>
@@ -424,6 +431,7 @@ export const Header = (props) => {
                 variant='address'
                 addressState={orderState?.options?.address?.address}
                 onClick={(variant) => openModal(variant)}
+                containerStyle={{ width: '80%' }}
               />
               {!isCustomerMode && (isPreOrderSetting || configState?.configs?.preorder_status_enabled?.value === undefined) && (
                 <HeaderOption
@@ -436,190 +444,186 @@ export const Header = (props) => {
               )}
             </SubMenu>
           )
-        )}
-        {modalIsOpen && (
-          <Modal
-            {...(!auth && modalSelected === 'address' && { title: t('WHAT_IS_YOUR_ADDRESS', 'What\'s your address?') })}
-            open={modalIsOpen}
-            onClose={() => setModalIsOpen(false)}
-            width={modalSelected === 'address' ? orderState?.options?.user_id ? '70%' : '50%' : '700px'}
-          >
-            {modalSelected === 'cart' && (
-              <CartContent
-                carts={cartsWithProducts}
-                isOrderStateCarts={!!orderState.carts}
-                onClose={() => setModalIsOpen(false)}
+        )
+      )}
+      {modalIsOpen && (
+        <Modal
+          {...(!auth && modalSelected === 'address' && { title: t('WHAT_IS_YOUR_ADDRESS', 'What\'s your address?') })}
+          open={modalIsOpen}
+          onClose={() => setModalIsOpen(false)}
+          width={modalSelected === 'address' ? orderState?.options?.user_id ? '70%' : '50%' : '700px'}
+        >
+          {modalSelected === 'cart' && (
+            <CartContent
+              carts={cartsWithProducts}
+              isOrderStateCarts={!!orderState.carts}
+              onClose={() => setModalIsOpen(false)}
+            />
+          )}
+          {modalSelected === 'address' && (
+            auth ? (
+              <AddressList
+                isModal
+                changeOrderAddressWithDefault
+                userId={isNaN(userCustomer?.id) ? null : userCustomer?.id}
+                onCancel={() => setModalIsOpen(false)}
+                isCustomerMode={isCustomerMode}
               />
-            )}
-            {modalSelected === 'address' && (
-              auth ? (
+            ) : (
+              <AddressFormWrapper>
+                <AddressForm
+                  useValidationFileds
+                  address={orderState?.options?.address || {}}
+                  onCancel={() => setModalIsOpen(false)}
+                  onSaveAddress={() => setModalIsOpen(false)}
+                  isCustomerMode={isCustomerMode}
+                />
+              </AddressFormWrapper>
+            )
+          )}
+          {modalSelected === 'moment' && (
+            <MomentContent
+              onClose={() => setModalIsOpen(false)}
+            />
+          )}
+          {modalSelected === 'delivery' && (
+            <OrderTypeSelectorContent
+              onClose={() => setModalIsOpen(false)}
+              configTypes={!configState?.loading && configTypes?.length > 0 ? configTypes : null}
+              defaultValue={!(!configState?.loading && configTypes?.length > 0) && 1}
+            />
+          )}
+        </Modal>
+      )}
+      {isCustomerMode && customerModalOpen && (
+        <Modal
+          open={customerModalOpen}
+          width='80%'
+          onClose={() => setCustomerModalOpen(false)}
+          padding='20px'
+          hideCloseDefault
+        >
+          <UserEdit>
+            {!customerState?.loading && (
+              <>
+                <UserDetails
+                  isAddressFormOpen={isAddressFormOpen}
+                  userData={customerState?.user}
+                  userId={customerState?.user?.id}
+                  isOpenUserData={isOpenUserData}
+                  isCustomerMode
+                  isModal
+                  setIsOpenUserData={setIsOpenUserData}
+                  onClose={() => setCustomerModalOpen(false)}
+                />
                 <AddressList
                   isModal
+                  userId={customerState?.user?.id}
                   changeOrderAddressWithDefault
-                  userId={isNaN(userCustomer?.id) ? null : userCustomer?.id}
-                  onCancel={() => setModalIsOpen(false)}
+                  userCustomerSetup={customerState.user}
+                  isOpenUserData={isOpenUserData}
+                  setCustomerModalOpen={setCustomerModalOpen}
+                  setIsOpenUserData={setIsOpenUserData}
+                  setIsAddressFormOpen={setIsAddressFormOpen}
+                  isHeader
                   isCustomerMode={isCustomerMode}
                 />
-              ) : (
-                <AddressFormWrapper>
-                  <AddressForm
-                    useValidationFileds
-                    address={orderState?.options?.address || {}}
-                    onCancel={() => setModalIsOpen(false)}
-                    onSaveAddress={() => setModalIsOpen(false)}
-                    isCustomerMode={isCustomerMode}
-                  />
-                </AddressFormWrapper>
-              )
-            )}
-            {modalSelected === 'moment' && (
-              <MomentContent
-                onClose={() => setModalIsOpen(false)}
-              />
-            )}
-            {modalSelected === 'delivery' && (
-              <OrderTypeSelectorContent
-                onClose={() => setModalIsOpen(false)}
-                configTypes={!configState?.loading && configTypes?.length > 0 ? configTypes : null}
-                defaultValue={!(!configState?.loading && configTypes?.length > 0) && 1}
-              />
-            )}
-          </Modal>
-        )}
-        {isCustomerMode && customerModalOpen && (
-          <Modal
-            open={customerModalOpen}
-            width='80%'
-            onClose={() => setCustomerModalOpen(false)}
-            padding='20px'
-            hideCloseDefault
-          >
-            <UserEdit>
-              {!customerState?.loading && (
-                <>
-                  <UserDetails
-                    isAddressFormOpen={isAddressFormOpen}
-                    userData={customerState?.user}
-                    userId={customerState?.user?.id}
-                    isOpenUserData={isOpenUserData}
-                    isCustomerMode
-                    isModal
-                    setIsOpenUserData={setIsOpenUserData}
-                    onClose={() => setCustomerModalOpen(false)}
-                  />
-                  <AddressList
-                    isModal
-                    userId={customerState?.user?.id}
-                    changeOrderAddressWithDefault
-                    userCustomerSetup={customerState.user}
-                    isOpenUserData={isOpenUserData}
-                    setCustomerModalOpen={setCustomerModalOpen}
-                    setIsOpenUserData={setIsOpenUserData}
-                    setIsAddressFormOpen={setIsAddressFormOpen}
-                    isHeader
-                    isCustomerMode={isCustomerMode}
-                  />
-                </>
-              )}
-            </UserEdit>
-          </Modal>
-        )}
-        {authModalOpen && !auth && (
-          <Modal
-            open={authModalOpen}
-            onRemove={() => closeAuthModal()}
-            onClose={() => closeAuthModal()}
-            width='50%'
-            authModal
-            closeOnBackdrop
-          >
-            {modalPageToShow === 'login' && (
-              <LoginForm
-                handleSuccessLogin={handleSuccessLogin}
-                elementLinkToSignup={
-                  <a
-                    onClick={
-                      (e) => handleCustomModalClick(e, { page: 'signup' })
-                    } href='#'
-                  >{t('CREATE_ACCOUNT', theme?.defaultLanguages?.CREATE_ACCOUNT || 'Create account')}
-                  </a>
-                }
-                elementLinkToForgotPassword={
-                  <a
-                    onClick={
-                      (e) => handleCustomModalClick(e, { page: 'forgotpassword' })
-                    } href='#'
-                  >{t('RESET_PASSWORD', theme?.defaultLanguages?.RESET_PASSWORD || 'Reset password')}
-                  </a>
-                }
-                useLoginByCellphone
-                isPopup
-              />
+              </>
             )}
-            {modalPageToShow === 'signup' && (
-              <SignUpForm
-                elementLinkToLogin={
-                  <a
-                    onClick={
-                      (e) => handleCustomModalClick(e, { page: 'login' })
-                    } href='#'
-                  >{t('LOGIN', theme?.defaultLanguages?.LOGIN || 'Login')}
-                  </a>
-                }
-                useLoginByCellphone
-                useChekoutFileds
-                handleSuccessSignup={handleSuccessSignup}
-                isPopup
-                closeModal={() => closeAuthModal()}
-              />
-            )}
-            {modalPageToShow === 'forgotpassword' && (
-              <ForgotPasswordForm
-                elementLinkToLogin={
-                  <a
-                    onClick={
-                      (e) => handleCustomModalClick(e, { page: 'login' })
-                    } href='#'
-                  >{t('LOGIN', theme?.defaultLanguages?.LOGIN || 'Login')}
-                  </a>
-                }
-                isPopup
-              />
-            )}
-          </Modal>
-        )}
-        <Confirm
-          title={t('CUSTOMER', theme?.defaultLanguages?.CUSTOMER || 'Customer')}
-          content={confirm.content}
-          acceptText={t('ACCEPT', theme?.defaultLanguages?.ACCEPT || 'Accept')}
-          open={isCustomerMode && confirm.open}
-          onClose={() => setConfirm({ ...confirm, open: false })}
-          onCancel={() => setConfirm({ ...confirm, open: false })}
-          onAccept={confirm.handleOnAccept}
-          closeOnBackdrop={false}
-        />
+          </UserEdit>
+        </Modal>
+      )}
+      {authModalOpen && !auth && (
         <Modal
-          open={!!preorderBusiness}
-          width='760px'
-          onClose={() => handleClosePreorder()}
+          open={authModalOpen}
+          onRemove={() => closeAuthModal()}
+          onClose={() => closeAuthModal()}
+          width='50%'
+          authModal
+          closeOnBackdrop
         >
-          <BusinessPreorder
-            business={preorderBusiness}
-            handleClick={handleBusinessClick}
-            showButton
-          />
+          {modalPageToShow === 'login' && (
+            <LoginForm
+              handleSuccessLogin={handleSuccessLogin}
+              elementLinkToSignup={
+                <a
+                  onClick={
+                    (e) => handleCustomModalClick(e, { page: 'signup' })
+                  } href='#'
+                >{t('CREATE_ACCOUNT', theme?.defaultLanguages?.CREATE_ACCOUNT || 'Create account')}
+                </a>
+              }
+              elementLinkToForgotPassword={
+                <a
+                  onClick={
+                    (e) => handleCustomModalClick(e, { page: 'forgotpassword' })
+                  } href='#'
+                >{t('RESET_PASSWORD', theme?.defaultLanguages?.RESET_PASSWORD || 'Reset password')}
+                </a>
+              }
+              useLoginByCellphone
+              isPopup
+            />
+          )}
+          {modalPageToShow === 'signup' && (
+            <SignUpForm
+              elementLinkToLogin={
+                <a
+                  onClick={
+                    (e) => handleCustomModalClick(e, { page: 'login' })
+                  } href='#'
+                >{t('LOGIN', theme?.defaultLanguages?.LOGIN || 'Login')}
+                </a>
+              }
+              useLoginByCellphone
+              useChekoutFileds
+              handleSuccessSignup={handleSuccessSignup}
+              isPopup
+              closeModal={() => closeAuthModal()}
+            />
+          )}
+          {modalPageToShow === 'forgotpassword' && (
+            <ForgotPasswordForm
+              elementLinkToLogin={
+                <a
+                  onClick={
+                    (e) => handleCustomModalClick(e, { page: 'login' })
+                  } href='#'
+                >{t('LOGIN', theme?.defaultLanguages?.LOGIN || 'Login')}
+                </a>
+              }
+              isPopup
+            />
+          )}
         </Modal>
-      </HeaderContainer>
-      {props.afterComponents?.map((AfterComponent, i) => (
-        <AfterComponent key={i} {...props} />))}
-      {props.afterElements?.map((AfterElement, i) => (
-        <React.Fragment key={i}>
-          {AfterElement}
-        </React.Fragment>))}
-    </>
+      )}
+      <Confirm
+        title={t('CUSTOMER', theme?.defaultLanguages?.CUSTOMER || 'Customer')}
+        content={confirm.content}
+        acceptText={t('ACCEPT', theme?.defaultLanguages?.ACCEPT || 'Accept')}
+        open={isCustomerMode && confirm.open}
+        onClose={() => setConfirm({ ...confirm, open: false })}
+        onCancel={() => setConfirm({ ...confirm, open: false })}
+        onAccept={confirm.handleOnAccept}
+        closeOnBackdrop={false}
+      />
+      <Modal
+        open={!!preorderBusiness}
+        width='760px'
+        onClose={() => handleClosePreorder()}
+      >
+        <BusinessPreorder
+          business={preorderBusiness}
+          handleClick={handleBusinessClick}
+          showButton
+        />
+      </Modal>
+    </HeaderContainer>
   )
 }
 
 Header.defaultProps = {
   isShowOrderOptions: true
 }
+
+export default Header