ordering-ui-external 14.1.19 → 14.1.21

package/src/components/Header/index.js

@@ -1,552 +1,552 @@
-import React, { useState, useEffect, useRef } from 'react'
-import { useLocation } from 'react-router-dom'
-import { useSession, useLanguage, useOrder, useEvent, useConfig, useCustomer } from 'ordering-components-external'
-import { useTheme } from 'styled-components'
-import FaUserCircle from '@meronex/icons/fa/FaUserCircle'
-import MdClose from '@meronex/icons/md/MdClose'
-import TiWarningOutline from '@meronex/icons/ti/TiWarningOutline'
-
-import {
-  Header as HeaderContainer,
-  InnerHeader,
-  LogoHeader,
-  LeftHeader,
-  RightHeader,
-  Menu,
-  MenuLink,
-  SubMenu,
-  CustomerInfo,
-  UserEdit,
-  FarAwayMessage,
-  AddressWrapper
-} from './styles'
-import { useWindowSize } from '../../hooks/useWindowSize'
-import { useOnlineStatus } from '../../hooks/useOnlineStatus'
-import { capitalize, getDistance } from '../../utils'
-
-import { LanguageSelector } from '../LanguageSelector'
-import { AddressesPopover } from '../AddressesPopover'
-import { UserPopover } from '../UserPopover'
-import { MomentPopover } from '../MomentPopover'
-import { CartPopover } from '../CartPopover'
-import { OrderTypeSelectorHeader } from '../OrderTypeSelectorHeader'
-import { CartContent } from '../CartContent'
-import { Modal } from '../Modal'
-import { MomentControl } from '../MomentControl'
-import { AddressList } from '../AddressList'
-import { AddressForm } from '../AddressForm'
-import { HeaderOption } from '../HeaderOption'
-import { SidebarMenu } from '../SidebarMenu'
-import { UserDetails } from '../UserDetails'
-import { Confirm } from '../Confirm'
-import { LoginForm } from '../../themes/five/src/components/LoginForm'
-import { SignUpForm } from '../../themes/five/src/components/SignUpForm'
-import { ForgotPasswordForm } from '../../themes/five/src/components/ForgotPasswordForm'
-
-export const Header = (props) => {
-  const {
-    isHome,
-    location,
-    closeCartPopover,
-    isShowOrderOptions,
-    isHideSignup,
-    isCustomerMode,
-    isLinkedToAdmin,
-    notificationState,
-    useModalMode
-  } = props
-
-  const { pathname } = useLocation()
-  const [events] = useEvent()
-  const [, t] = useLanguage()
-  const [{ auth }, { login }] = useSession()
-  const [orderState, { refreshOrderOptions }] = useOrder()
-  const [openPopover, setOpenPopover] = useState({})
-  const theme = useTheme()
-  const [configState] = useConfig()
-  const [customerState, { deleteUserCustomer }] = useCustomer()
-
-  const clearCustomer = useRef(null)
-  const [modalIsOpen, setModalIsOpen] = useState(false)
-  const [customerModalOpen, setCustomerModalOpen] = useState(false)
-  const [modalSelected, setModalSelected] = useState(null)
-  const [confirm, setConfirm] = useState({ open: false, content: null, handleOnAccept: null })
-  const [isFarAway, setIsFarAway] = useState(false)
-  const [authModalOpen, setAuthModalOpen] = useState(false)
-  const [modalPageToShow, setModalPageToShow] = useState(null)
-
-  const cartsWithProducts = (orderState?.carts && Object.values(orderState?.carts).filter(cart => cart.products && cart.products?.length > 0)) || null
-
-  const windowSize = useWindowSize()
-  const onlineStatus = useOnlineStatus()
-
-  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 handleClickUserCustomer = (e) => {
-    const isActionsClick = clearCustomer.current?.contains(e?.target)
-    if (isActionsClick) {
-      setConfirm({
-        open: true,
-        content: t('QUESTION_CLEAR_CUSTOMER', theme?.defaultLanguages?.QUESTION_CLEAR_CUSTOMER || 'Are you sure that you want to clear the customer?'),
-        handleOnAccept: () => {
-          deleteUserCustomer(true)
-          refreshOrderOptions()
-          handleGoToPage({ page: 'home' })
-          setConfirm({ ...confirm, open: false })
-        }
-      })
-      return
-    }
-    setCustomerModalOpen(true)
-  }
-
-  const openModal = (opt) => {
-    setModalSelected(opt)
-    setModalIsOpen(true)
-  }
-
-  const handleCustomModalClick = (e, { page }) => {
-    e.preventDefault()
-    setModalPageToShow(page)
-  }
-
-  const closeAuthModal = () => {
-    setAuthModalOpen(false)
-    setModalPageToShow(null)
-  }
-
-  const handleTogglePopover = (type) => {
-    setOpenPopover({
-      ...openPopover,
-      [type]: !openPopover[type]
-    })
-  }
-
-  const handleClosePopover = (type) => {
-    setOpenPopover({
-      ...openPopover,
-      [type]: false
-    })
-  }
-
-  const handleAddProduct = () => {
-    if (!closeCartPopover) {
-      handleTogglePopover('cart')
-    }
-  }
-
-  const handleGoToPage = (data) => {
-    events.emit('go_to_page', data)
-    if (isCustomerMode && pathname.includes('/orders')) {
-      deleteUserCustomer(true)
-      refreshOrderOptions()
-    }
-  }
-
-  const handleSuccessSignup = (user) => {
-    login({
-      user,
-      token: user?.session?.access_token
-    })
-  }
-
-  const handleSuccessLogin = (user) => {
-    if (user) {
-      closeAuthModal()
-    }
-  }
-
-  const handleOpenLoginSignUp = (index) => {
-    if (isCustomerMode) {
-      events.emit('go_to_page', { page: 'home' })
-    } else {
-      setModalPageToShow(index)
-      setAuthModalOpen(true)
-    }
-  }
-
-  useEffect(() => {
-    events.on('cart_product_added', handleAddProduct)
-    return () => events.off('cart_product_added', handleAddProduct)
-  }, [])
-
-  useEffect(() => {
-    if (isCustomerMode) {
-      setCustomerModalOpen(false)
-    }
-  }, [customerState?.user?.address])
-
-  useEffect(() => {
-    if (!(pathname.includes('/search') || pathname.includes('/checkout'))) {
-      setIsFarAway(false)
-      return
-    }
-    navigator.geolocation.getCurrentPosition((pos) => {
-      const crd = pos.coords
-      const distance = getDistance(crd.latitude, crd.longitude, orderState?.options?.address?.location?.lat, orderState?.options?.address?.location?.lng)
-      if (distance > 20) setIsFarAway(true)
-      else setIsFarAway(false)
-    }, (err) => {
-      console.warn(`ERROR(${err.code}): ${err.message}`)
-    }, {
-      enableHighAccuracy: true,
-      timeout: 5000,
-      maximumAge: 0
-    })
-  }, [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 home={isHome}>
-        <InnerHeader>
-          <LeftHeader>
-            <SidebarMenu
-              auth={auth}
-              isHideSignup={isHideSignup}
-              userCustomer={userCustomer}
-              isCustomerMode={isCustomerMode}
-            />
-            <LogoHeader
-              onClick={() => handleGoToPage({ page: orderState?.options?.address?.location && !isCustomerMode ? 'search' : 'home' })}
-            >
-              <img alt='Logotype' width='170px' height='45px' src={theme?.my_products?.components?.images?.components?.logo?.components?.image || (isHome ? theme?.images?.logos?.logotypeInvert : theme?.images?.logos?.logotype)} loading='lazy' />
-              <img alt='Isotype' width='35px' height='45px' src={theme?.my_products?.components?.images?.components?.logo?.components?.image || (isHome ? theme?.images?.logos?.isotypeInvert : theme?.images?.logos?.isotype)} loading='lazy' />
-            </LogoHeader>
-            {isShowOrderOptions && (
-              <Menu className='left-header'>
-                {isCustomerMode && windowSize.width > 450 && (
-                  <CustomerInfo
-                    isHome={isHome}
-                    onClick={(e) => handleClickUserCustomer(e)}
-                  >
-                    <span>
-                      <FaUserCircle />
-                      <p>{userCustomer?.name} {userCustomer?.lastname}</p>
-                    </span>
-                    <span
-                      style={styles.headCustomer}
-                      ref={clearCustomer}
-                    >
-                      <MdClose style={styles.clearCustomer} />
-                    </span>
-                  </CustomerInfo>
-                )}
-                <OrderTypeSelectorHeader
-                  configTypes={!configState?.loading && configTypes?.length > 0 ? configTypes : null}
-                  defaultValue={!(!configState?.loading && configTypes?.length > 0) && 1}
-                />
-                {onlineStatus && windowSize.width > 820 && (
-                  <>
-                    {!isCustomerMode && (isPreOrderSetting || configState?.configs?.preorder_status_enabled?.value === undefined) && (
-                      <MomentPopover
-                        open={openPopover.moment}
-                        onClick={() => handleTogglePopover('moment')}
-                        onClose={() => handleClosePopover('moment')}
-                        isHome={isHome}
-                      />
-                    )}
-                    <AddressWrapper>
-                      <AddressesPopover
-                        auth={auth}
-                        addressState={orderState?.options?.address}
-                        open={openPopover.addresses}
-                        onClick={() => handleTogglePopover('addresses')}
-                        onClose={() => handleClosePopover('addresses')}
-                        isHome={isHome}
-                        isCustomerMode={isCustomerMode}
-                      />
-                      {isFarAway && (
-                        <FarAwayMessage>
-                          <TiWarningOutline />
-                          <span>{t('YOU_ARE_FAR_FROM_ADDRESS', 'You are far from this address')}</span>
-                        </FarAwayMessage>
-                      )}
-                    </AddressWrapper>
-                  </>
-                )}
-              </Menu>
-            )}
-          </LeftHeader>
-          {onlineStatus && (
-            <RightHeader>
-              <Menu>
-                {
-                  !auth && windowSize.width > 870 && !isCustomerMode && (
-                    <>
-                      <MenuLink onClick={() => useModalMode ? handleOpenLoginSignUp('login') : handleGoToPage({ page: 'signin' })} name='signin'>{t('SIGN_IN', theme?.defaultLanguages?.SIGN_IN || 'Sign in')}</MenuLink>
-                      {!isHideSignup && (
-                        <MenuLink onClick={() => useModalMode ? handleOpenLoginSignUp('signup') : handleGoToPage({ page: 'signup' })} highlight={1} name='signup'>{t('SIGN_UP', theme?.defaultLanguages?.SIGN_UP || 'Sign up')}</MenuLink>
-                      )}
-                    </>
-                  )
-                }
-                {
-                  auth && (
-                    <>
-                      {windowSize.width > 768 && (
-                        <UserPopover
-                          withLogout
-                          isCustomerMode={isCustomerMode}
-                          open={openPopover.user}
-                          isHome={isHome}
-                          onClick={() => handleTogglePopover('user')}
-                          onClose={() => handleClosePopover('user')}
-                          isLinkedToAdmin={isLinkedToAdmin}
-                        />
-                      )}
-                      {isShowOrderOptions && (
-                        windowSize.width > 768 ? (
-                          <CartPopover
-                            open={openPopover.cart}
-                            carts={cartsWithProducts}
-                            onClick={() => handleTogglePopover('cart')}
-                            onClose={() => handleClosePopover('cart')}
-                            auth={auth}
-                            location={location}
-                            isCustomerMode={isCustomerMode}
-                          />
-                        ) : (
-                          <HeaderOption
-                            variant='cart'
-                            totalCarts={cartsWithProducts?.length}
-                            onClick={(variant) => openModal(variant)}
-                          />
-                        )
-                      )}
-                    </>
-                  )
-                }
-                <LanguageSelector />
-              </Menu>
-            </RightHeader>
-          )}
-        </InnerHeader>
-        {onlineStatus && isShowOrderOptions && (
-          windowSize.width > 768 && windowSize.width <= 820 ? (
-            <SubMenu>
-              <AddressWrapper>
-                <AddressesPopover
-                  auth={auth}
-                  addressState={orderState?.options?.address}
-                  open={openPopover.addresses}
-                  onClick={() => handleTogglePopover('addresses')}
-                  onClose={() => handleClosePopover('addresses')}
-                  isHome={isHome}
-                />
-                {isFarAway && (
-                  <FarAwayMessage>
-                    <TiWarningOutline />
-                    <span>{t('YOU_ARE_FAR_FROM_ADDRESS', 'You are far from this address')}</span>
-                  </FarAwayMessage>
-                )}
-              </AddressWrapper>
-              {!isCustomerMode && (isPreOrderSetting || configState?.configs?.preorder_status_enabled?.value === undefined) && (
-                <MomentPopover
-                  open={openPopover.moment}
-                  onClick={() => handleTogglePopover('moment')}
-                  onClose={() => handleClosePopover('moment')}
-                  isHome={isHome}
-                />
-              )}
-            </SubMenu>
-          ) : (
-            <SubMenu>
-              <AddressWrapper>
-                <HeaderOption
-                  variant='address'
-                  addressState={orderState?.options?.address?.address?.split(',')?.[0]}
-                  onClick={(variant) => openModal(variant)}
-                  isHome={isHome}
-                />
-                {isFarAway && (
-                  <FarAwayMessage>
-                    <TiWarningOutline />
-                    <span>{t('YOU_ARE_FAR_FROM_ADDRESS', 'You are far from this address')}</span>
-                  </FarAwayMessage>
-                )}
-              </AddressWrapper>
-              {!isCustomerMode && (isPreOrderSetting || configState?.configs?.preorder_status_enabled?.value === undefined) && (
-                <MomentControl
-                  isModalBehavior
-                />
-              )}
-            </SubMenu>
-          )
-        )}
-        {modalIsOpen && (
-          <Modal
-            title={t(modalSelected.toUpperCase(), capitalize(modalSelected))}
-            open={modalIsOpen}
-            onClose={() => setModalIsOpen(false)}
-            width='70%'
-            padding={modalSelected === 'address' ? '20px' : '5px'}
-          >
-            {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)}
-                  onAccept={() => setModalIsOpen(false)}
-                />
-              ) : (
-                <AddressForm
-                  useValidationFileds
-                  address={orderState?.options?.address || {}}
-                  onCancel={() => setModalIsOpen(false)}
-                  onSaveAddress={() => setModalIsOpen(false)}
-                />
-              )
-            )}
-          </Modal>
-        )}
-        {isCustomerMode && customerModalOpen && (
-          <Modal
-            open={customerModalOpen}
-            width='60%'
-            onClose={() => setCustomerModalOpen(false)}
-          >
-            <UserEdit>
-              {!customerState?.loading && (
-                <>
-                  <UserDetails
-                    userData={customerState?.user}
-                    userId={customerState?.user?.id}
-                    isCustomerMode
-                  />
-                  <AddressList
-                    isModal
-                    userId={customerState?.user?.id}
-                    changeOrderAddressWithDefault
-                    userCustomerSetup={customerState.user}
-                    setCustomerModalOpen={setCustomerModalOpen}
-                  />
-                </>
-              )}
-            </UserEdit>
-          </Modal>
-        )}
-        {authModalOpen && !auth && (
-          <Modal
-            open={authModalOpen}
-            onRemove={() => closeAuthModal()}
-            onClose={() => closeAuthModal()}
-            width='50%'
-            authModal
-            closeOnBackdrop
-          >
-            {modalPageToShow === 'login' && (
-              <LoginForm
-                notificationState={notificationState}
-                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
-                notificationState={notificationState}
-                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}
-        />
-      </HeaderContainer>
-      {props.afterComponents?.map((AfterComponent, i) => (
-        <AfterComponent key={i} {...props} />))}
-      {props.afterElements?.map((AfterElement, i) => (
-        <React.Fragment key={i}>
-          {AfterElement}
-        </React.Fragment>))}
-    </>
-  )
-}
-
-const styles = {
-  headCustomer: {
-    margin: 0,
-    height: 20,
-    width: 20,
-    backgroundColor: '#CCCCCC',
-    borderRadius: '100%',
-    marginLeft: 5
-  },
-  clearCustomer: {
-    margin: 0,
-    fontSize: 20
-  }
-}
-
-Header.defaultProps = {
-  isShowOrderOptions: true
-}
-
-export default Header
+import React, { useState, useEffect, useRef } from 'react'
+import { useLocation } from 'react-router-dom'
+import { useSession, useLanguage, useOrder, useEvent, useConfig, useCustomer } from 'ordering-components-external'
+import { useTheme } from 'styled-components'
+import FaUserCircle from '@meronex/icons/fa/FaUserCircle'
+import MdClose from '@meronex/icons/md/MdClose'
+import TiWarningOutline from '@meronex/icons/ti/TiWarningOutline'
+
+import {
+  Header as HeaderContainer,
+  InnerHeader,
+  LogoHeader,
+  LeftHeader,
+  RightHeader,
+  Menu,
+  MenuLink,
+  SubMenu,
+  CustomerInfo,
+  UserEdit,
+  FarAwayMessage,
+  AddressWrapper
+} from './styles'
+import { useWindowSize } from '../../hooks/useWindowSize'
+import { useOnlineStatus } from '../../hooks/useOnlineStatus'
+import { capitalize, getDistance } from '../../utils'
+
+import { LanguageSelector } from '../LanguageSelector'
+import { AddressesPopover } from '../AddressesPopover'
+import { UserPopover } from '../UserPopover'
+import { MomentPopover } from '../MomentPopover'
+import { CartPopover } from '../CartPopover'
+import { OrderTypeSelectorHeader } from '../OrderTypeSelectorHeader'
+import { CartContent } from '../CartContent'
+import { Modal } from '../Modal'
+import { MomentControl } from '../MomentControl'
+import { AddressList } from '../AddressList'
+import { AddressForm } from '../AddressForm'
+import { HeaderOption } from '../HeaderOption'
+import { SidebarMenu } from '../SidebarMenu'
+import { UserDetails } from '../UserDetails'
+import { Confirm } from '../Confirm'
+import { LoginForm } from '../../themes/five/src/components/LoginForm'
+import { SignUpForm } from '../../themes/five/src/components/SignUpForm'
+import { ForgotPasswordForm } from '../../themes/five/src/components/ForgotPasswordForm'
+
+export const Header = (props) => {
+  const {
+    isHome,
+    location,
+    closeCartPopover,
+    isShowOrderOptions,
+    isHideSignup,
+    isCustomerMode,
+    isLinkedToAdmin,
+    notificationState,
+    useModalMode
+  } = props
+
+  const { pathname } = useLocation()
+  const [events] = useEvent()
+  const [, t] = useLanguage()
+  const [{ auth }, { login }] = useSession()
+  const [orderState, { refreshOrderOptions }] = useOrder()
+  const [openPopover, setOpenPopover] = useState({})
+  const theme = useTheme()
+  const [configState] = useConfig()
+  const [customerState, { deleteUserCustomer }] = useCustomer()
+
+  const clearCustomer = useRef(null)
+  const [modalIsOpen, setModalIsOpen] = useState(false)
+  const [customerModalOpen, setCustomerModalOpen] = useState(false)
+  const [modalSelected, setModalSelected] = useState(null)
+  const [confirm, setConfirm] = useState({ open: false, content: null, handleOnAccept: null })
+  const [isFarAway, setIsFarAway] = useState(false)
+  const [authModalOpen, setAuthModalOpen] = useState(false)
+  const [modalPageToShow, setModalPageToShow] = useState(null)
+
+  const cartsWithProducts = (orderState?.carts && Object.values(orderState?.carts).filter(cart => cart.products && cart.products?.length > 0)) || null
+
+  const windowSize = useWindowSize()
+  const onlineStatus = useOnlineStatus()
+
+  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 handleClickUserCustomer = (e) => {
+    const isActionsClick = clearCustomer.current?.contains(e?.target)
+    if (isActionsClick) {
+      setConfirm({
+        open: true,
+        content: t('QUESTION_CLEAR_CUSTOMER', theme?.defaultLanguages?.QUESTION_CLEAR_CUSTOMER || 'Are you sure that you want to clear the customer?'),
+        handleOnAccept: () => {
+          deleteUserCustomer(true)
+          refreshOrderOptions()
+          handleGoToPage({ page: 'home' })
+          setConfirm({ ...confirm, open: false })
+        }
+      })
+      return
+    }
+    setCustomerModalOpen(true)
+  }
+
+  const openModal = (opt) => {
+    setModalSelected(opt)
+    setModalIsOpen(true)
+  }
+
+  const handleCustomModalClick = (e, { page }) => {
+    e.preventDefault()
+    setModalPageToShow(page)
+  }
+
+  const closeAuthModal = () => {
+    setAuthModalOpen(false)
+    setModalPageToShow(null)
+  }
+
+  const handleTogglePopover = (type) => {
+    setOpenPopover({
+      ...openPopover,
+      [type]: !openPopover[type]
+    })
+  }
+
+  const handleClosePopover = (type) => {
+    setOpenPopover({
+      ...openPopover,
+      [type]: false
+    })
+  }
+
+  const handleAddProduct = () => {
+    if (!closeCartPopover) {
+      handleTogglePopover('cart')
+    }
+  }
+
+  const handleGoToPage = (data) => {
+    events.emit('go_to_page', data)
+    if (isCustomerMode && pathname.includes('/orders')) {
+      deleteUserCustomer(true)
+      refreshOrderOptions()
+    }
+  }
+
+  const handleSuccessSignup = (user) => {
+    login({
+      user,
+      token: user?.session?.access_token
+    })
+  }
+
+  const handleSuccessLogin = (user) => {
+    if (user) {
+      closeAuthModal()
+    }
+  }
+
+  const handleOpenLoginSignUp = (index) => {
+    if (isCustomerMode) {
+      events.emit('go_to_page', { page: 'home' })
+    } else {
+      setModalPageToShow(index)
+      setAuthModalOpen(true)
+    }
+  }
+
+  useEffect(() => {
+    events.on('cart_product_added', handleAddProduct)
+    return () => events.off('cart_product_added', handleAddProduct)
+  }, [])
+
+  useEffect(() => {
+    if (isCustomerMode) {
+      setCustomerModalOpen(false)
+    }
+  }, [customerState?.user?.address])
+
+  useEffect(() => {
+    if (!(pathname.includes('/search') || pathname.includes('/checkout'))) {
+      setIsFarAway(false)
+      return
+    }
+    navigator.geolocation.getCurrentPosition((pos) => {
+      const crd = pos.coords
+      const distance = getDistance(crd.latitude, crd.longitude, orderState?.options?.address?.location?.lat, orderState?.options?.address?.location?.lng)
+      if (distance > 20) setIsFarAway(true)
+      else setIsFarAway(false)
+    }, (err) => {
+      console.warn(`ERROR(${err.code}): ${err.message}`)
+    }, {
+      enableHighAccuracy: true,
+      timeout: 5000,
+      maximumAge: 0
+    })
+  }, [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 home={isHome}>
+        <InnerHeader>
+          <LeftHeader>
+            <SidebarMenu
+              auth={auth}
+              isHideSignup={isHideSignup}
+              userCustomer={userCustomer}
+              isCustomerMode={isCustomerMode}
+            />
+            <LogoHeader
+              onClick={() => handleGoToPage({ page: orderState?.options?.address?.location && !isCustomerMode ? 'search' : 'home' })}
+            >
+              <img alt='Logotype' width='170px' height='45px' src={theme?.my_products?.components?.images?.components?.logo?.components?.image || (isHome ? theme?.images?.logos?.logotypeInvert : theme?.images?.logos?.logotype)} loading='lazy' />
+              <img alt='Isotype' width='35px' height='45px' src={theme?.my_products?.components?.images?.components?.logo?.components?.image || (isHome ? theme?.images?.logos?.isotypeInvert : theme?.images?.logos?.isotype)} loading='lazy' />
+            </LogoHeader>
+            {isShowOrderOptions && (
+              <Menu className='left-header'>
+                {isCustomerMode && windowSize.width > 450 && (
+                  <CustomerInfo
+                    isHome={isHome}
+                    onClick={(e) => handleClickUserCustomer(e)}
+                  >
+                    <span>
+                      <FaUserCircle />
+                      <p>{userCustomer?.name} {userCustomer?.lastname}</p>
+                    </span>
+                    <span
+                      style={styles.headCustomer}
+                      ref={clearCustomer}
+                    >
+                      <MdClose style={styles.clearCustomer} />
+                    </span>
+                  </CustomerInfo>
+                )}
+                <OrderTypeSelectorHeader
+                  configTypes={!configState?.loading && configTypes?.length > 0 ? configTypes : null}
+                  defaultValue={!(!configState?.loading && configTypes?.length > 0) && 1}
+                />
+                {onlineStatus && windowSize.width > 820 && (
+                  <>
+                    {!isCustomerMode && (isPreOrderSetting || configState?.configs?.preorder_status_enabled?.value === undefined) && (
+                      <MomentPopover
+                        open={openPopover.moment}
+                        onClick={() => handleTogglePopover('moment')}
+                        onClose={() => handleClosePopover('moment')}
+                        isHome={isHome}
+                      />
+                    )}
+                    <AddressWrapper>
+                      <AddressesPopover
+                        auth={auth}
+                        addressState={orderState?.options?.address}
+                        open={openPopover.addresses}
+                        onClick={() => handleTogglePopover('addresses')}
+                        onClose={() => handleClosePopover('addresses')}
+                        isHome={isHome}
+                        isCustomerMode={isCustomerMode}
+                      />
+                      {isFarAway && (
+                        <FarAwayMessage>
+                          <TiWarningOutline />
+                          <span>{t('YOU_ARE_FAR_FROM_ADDRESS', 'You are far from this address')}</span>
+                        </FarAwayMessage>
+                      )}
+                    </AddressWrapper>
+                  </>
+                )}
+              </Menu>
+            )}
+          </LeftHeader>
+          {onlineStatus && (
+            <RightHeader>
+              <Menu>
+                {
+                  !auth && windowSize.width > 870 && !isCustomerMode && (
+                    <>
+                      <MenuLink onClick={() => useModalMode ? handleOpenLoginSignUp('login') : handleGoToPage({ page: 'signin' })} name='signin'>{t('SIGN_IN', theme?.defaultLanguages?.SIGN_IN || 'Sign in')}</MenuLink>
+                      {!isHideSignup && (
+                        <MenuLink onClick={() => useModalMode ? handleOpenLoginSignUp('signup') : handleGoToPage({ page: 'signup' })} highlight={1} name='signup'>{t('SIGN_UP', theme?.defaultLanguages?.SIGN_UP || 'Sign up')}</MenuLink>
+                      )}
+                    </>
+                  )
+                }
+                {
+                  auth && (
+                    <>
+                      {windowSize.width > 768 && (
+                        <UserPopover
+                          withLogout
+                          isCustomerMode={isCustomerMode}
+                          open={openPopover.user}
+                          isHome={isHome}
+                          onClick={() => handleTogglePopover('user')}
+                          onClose={() => handleClosePopover('user')}
+                          isLinkedToAdmin={isLinkedToAdmin}
+                        />
+                      )}
+                      {isShowOrderOptions && (
+                        windowSize.width > 768 ? (
+                          <CartPopover
+                            open={openPopover.cart}
+                            carts={cartsWithProducts}
+                            onClick={() => handleTogglePopover('cart')}
+                            onClose={() => handleClosePopover('cart')}
+                            auth={auth}
+                            location={location}
+                            isCustomerMode={isCustomerMode}
+                          />
+                        ) : (
+                          <HeaderOption
+                            variant='cart'
+                            totalCarts={cartsWithProducts?.length}
+                            onClick={(variant) => openModal(variant)}
+                          />
+                        )
+                      )}
+                    </>
+                  )
+                }
+                <LanguageSelector />
+              </Menu>
+            </RightHeader>
+          )}
+        </InnerHeader>
+        {onlineStatus && isShowOrderOptions && (
+          windowSize.width > 768 && windowSize.width <= 820 ? (
+            <SubMenu>
+              <AddressWrapper>
+                <AddressesPopover
+                  auth={auth}
+                  addressState={orderState?.options?.address}
+                  open={openPopover.addresses}
+                  onClick={() => handleTogglePopover('addresses')}
+                  onClose={() => handleClosePopover('addresses')}
+                  isHome={isHome}
+                />
+                {isFarAway && (
+                  <FarAwayMessage>
+                    <TiWarningOutline />
+                    <span>{t('YOU_ARE_FAR_FROM_ADDRESS', 'You are far from this address')}</span>
+                  </FarAwayMessage>
+                )}
+              </AddressWrapper>
+              {!isCustomerMode && (isPreOrderSetting || configState?.configs?.preorder_status_enabled?.value === undefined) && (
+                <MomentPopover
+                  open={openPopover.moment}
+                  onClick={() => handleTogglePopover('moment')}
+                  onClose={() => handleClosePopover('moment')}
+                  isHome={isHome}
+                />
+              )}
+            </SubMenu>
+          ) : (
+            <SubMenu>
+              <AddressWrapper>
+                <HeaderOption
+                  variant='address'
+                  addressState={orderState?.options?.address?.address?.split(',')?.[0]}
+                  onClick={(variant) => openModal(variant)}
+                  isHome={isHome}
+                />
+                {isFarAway && (
+                  <FarAwayMessage>
+                    <TiWarningOutline />
+                    <span>{t('YOU_ARE_FAR_FROM_ADDRESS', 'You are far from this address')}</span>
+                  </FarAwayMessage>
+                )}
+              </AddressWrapper>
+              {!isCustomerMode && (isPreOrderSetting || configState?.configs?.preorder_status_enabled?.value === undefined) && (
+                <MomentControl
+                  isModalBehavior
+                />
+              )}
+            </SubMenu>
+          )
+        )}
+        {modalIsOpen && (
+          <Modal
+            title={t(modalSelected.toUpperCase(), capitalize(modalSelected))}
+            open={modalIsOpen}
+            onClose={() => setModalIsOpen(false)}
+            width='70%'
+            padding={modalSelected === 'address' ? '20px' : '5px'}
+          >
+            {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)}
+                  onAccept={() => setModalIsOpen(false)}
+                />
+              ) : (
+                <AddressForm
+                  useValidationFileds
+                  address={orderState?.options?.address || {}}
+                  onCancel={() => setModalIsOpen(false)}
+                  onSaveAddress={() => setModalIsOpen(false)}
+                />
+              )
+            )}
+          </Modal>
+        )}
+        {isCustomerMode && customerModalOpen && (
+          <Modal
+            open={customerModalOpen}
+            width='60%'
+            onClose={() => setCustomerModalOpen(false)}
+          >
+            <UserEdit>
+              {!customerState?.loading && (
+                <>
+                  <UserDetails
+                    userData={customerState?.user}
+                    userId={customerState?.user?.id}
+                    isCustomerMode
+                  />
+                  <AddressList
+                    isModal
+                    userId={customerState?.user?.id}
+                    changeOrderAddressWithDefault
+                    userCustomerSetup={customerState.user}
+                    setCustomerModalOpen={setCustomerModalOpen}
+                  />
+                </>
+              )}
+            </UserEdit>
+          </Modal>
+        )}
+        {authModalOpen && !auth && (
+          <Modal
+            open={authModalOpen}
+            onRemove={() => closeAuthModal()}
+            onClose={() => closeAuthModal()}
+            width='50%'
+            authModal
+            closeOnBackdrop
+          >
+            {modalPageToShow === 'login' && (
+              <LoginForm
+                notificationState={notificationState}
+                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
+                notificationState={notificationState}
+                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}
+        />
+      </HeaderContainer>
+      {props.afterComponents?.map((AfterComponent, i) => (
+        <AfterComponent key={i} {...props} />))}
+      {props.afterElements?.map((AfterElement, i) => (
+        <React.Fragment key={i}>
+          {AfterElement}
+        </React.Fragment>))}
+    </>
+  )
+}
+
+const styles = {
+  headCustomer: {
+    margin: 0,
+    height: 20,
+    width: 20,
+    backgroundColor: '#CCCCCC',
+    borderRadius: '100%',
+    marginLeft: 5
+  },
+  clearCustomer: {
+    margin: 0,
+    fontSize: 20
+  }
+}
+
+Header.defaultProps = {
+  isShowOrderOptions: true
+}
+
+export default Header