ordering-ui-external 1.4.5 → 1.5.1

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

@@ -12,9 +12,38 @@ export const InnerHeader = styled.div`
   width: 100%;
   color: #FFF;
   justify-content: space-between;
-  width: 98%;
-  margin: 15px auto;
+  margin: 15px 0;
   align-items: center;
+
+  #left-side {
+    width: 20%;
+    justify-content: flex-start;
+  }
+  #right-side {
+    width: 20%;
+    justify-content: flex-end;
+  }
+  #center-side {
+    width: calc(60% - 30px);
+  }
+
+  @media (min-width: 1024px) {
+    #center-side {
+      width: calc(60% - 140px);
+    }
+  }
+
+  @media (min-width: 1200px) {
+    #center-side {
+      width: calc(60% - 200px);
+    }
+  }
+
+  @media (min-width: 1500px) {
+    #center-side {
+      width: calc(60% - 260px);
+    }
+  }
 `
 
 export const LogoHeader = styled.div`
@@ -75,7 +104,7 @@ export const Menu = styled.div`
 
   #select-input {
     border-radius: 7.6px;
-    
+
     #list {
       border-radius: 7.6px;
     }
@@ -85,7 +114,7 @@ export const Menu = styled.div`
       height: 40px;
       border-color: #CCC;
       background-color: #CCC !important;
-      
+
       svg {
         font-size: 16px;
       }
@@ -126,7 +155,7 @@ export const Menu = styled.div`
       padding: 0 20px;
       margin: 0 70px;
     }
-    
+
     @media (min-width: 1200px) {
       padding: 0 30px;
       margin: 0 100px;
@@ -275,10 +304,21 @@ export const AddressMenu = styled.div`
   align-items: center;
   position: relative;
 
+  span {
+    width: 85%;
+    p {
+      margin: 0;
+      padding: 0;
+      text-overflow: ellipsis;
+      white-space: nowrap;
+      overflow: hidden;
+    }
+  }
+
   ${({ isCustomerMode }) => isCustomerMode ? css`
-  flex: 0.8;
+    flex: 0.8;
   ` : css`
-    width: 100%;
+    width: 50%;
   `}
 
   svg {
@@ -297,7 +337,7 @@ export const AddressMenu = styled.div`
   }
   @media (min-width: 820px) {
     ${({ isCustomerMode }) => !isCustomerMode && css`
-      width: 100%;
+      width: 50%;
     `}
   }
 `
@@ -339,6 +379,7 @@ export const FarAwayMessage = styled.div`
   position: absolute;
   display: flex;
   align-items: center;
+  z-index: 2000;
   top: 100%;
   background: ${props => props.theme.colors.warning100};
   border: 1px solid ${props => props.theme.colors.warning500};

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

@@ -1,14 +1,9 @@
 import React from 'react'
-import { useConfig } from 'ordering-components-external'
 import { OriginalHomeHero } from './layouts/OriginalHomeHero'
 import { RedHomeHero } from './layouts/RedHomeHero'
 import { StarbucksHomeHero } from './layouts/StarbucksHomeHero'
 
 export const HomeHero = (props) => {
-  const [{ configs }] = useConfig()
-
-  // *****************************
-  // HomeLayout = configs
   const HomeLayoutConfig = {
     homepage_settings: {
       layout: 'original', // 'original', 'starbucks', 'red'
@@ -17,7 +12,6 @@ export const HomeHero = (props) => {
   }
   const layout = HomeLayoutConfig?.homepage_settings?.layout !== undefined
     ? HomeLayoutConfig?.homepage_settings?.layout : 'original'
-  // *****************************
 
   const homeLayoutProps = {
     ...props,

package/src/themes/five/src/components/HomeHero/layouts/OriginalHomeHero/index.js

@@ -8,23 +8,33 @@ import {
   Title,
   Slogan,
   WrapInput,
-  Overlay
+  LogoWrapper,
+  UseAccount,
+  HeroContent,
+  SectionHeader
 } from './styles'
 
 import { Modal } from '../../../Modal'
 import { Button } from '../../../../styles/Buttons'
 import { AddressForm } from '../../../AddressForm'
+import { LoginForm } from '../../../LoginForm'
+import { SignUpForm } from '../../../SignUpForm'
+import { ForgotPasswordForm } from '../../../ForgotPasswordForm'
 import { AddressList } from '../../../AddressList'
+import { useWindowSize } from '../../../../../../../hooks/useWindowSize'
 
 export const OriginalHomeHero = (props) => {
-  const { onFindBusiness, contentPosition } = props
+  const { onFindBusiness } = props
 
-  const [{ auth }] = useSession()
+  const [{ auth }, { login }] = useSession()
   const [orderState] = useOrder()
   const [, t] = useLanguage()
   const [modals, setModals] = useState({ listOpen: false, formOpen: false })
   const theme = useTheme()
   const userCustomer = parseInt(window.localStorage.getItem('user-customer'))
+  const windowSize = useWindowSize()
+  const [authModalOpen, setAuthModalOpen] = useState(false)
+  const [modalPageToShow, setModalPageToShow] = useState(null)
 
   const handleFindBusinesses = () => {
     if (!orderState?.options?.address?.location) {
@@ -43,71 +53,164 @@ export const OriginalHomeHero = (props) => {
     }
   }
 
+  const handleOpenLoginSignUp = (index) => {
+    setModalPageToShow(index)
+    setAuthModalOpen(true)
+  }
+
+  const handleCustomModalClick = (e, { page }) => {
+    e.preventDefault()
+    setModalPageToShow(page)
+  }
+
+  const closeAuthModal = () => {
+    setAuthModalOpen(false)
+    setModalPageToShow(null)
+  }
+
+  const handleSuccessLogin = (user) => {
+    if (user) {
+      closeAuthModal()
+    }
+  }
+
+  const handleSuccessSignup = (user) => {
+    login({
+      user,
+      token: user?.session?.access_token
+    })
+  }
+
   useEffect(() => {
     return () => setModals({ listOpen: false, formOpen: false })
   }, [])
 
   return (
-    <>
-      {props.beforeElements?.map((BeforeElement, i) => (
-        <React.Fragment key={i}>
-          {BeforeElement}
-        </React.Fragment>))}
-      {props.beforeComponents?.map((BeforeComponent, i) => (
-        <BeforeComponent key={i} {...props} />))}
-      <HeroContainer bgimage={theme.images?.general?.homeHero}>
-        <ContentWrapper contentPosition={contentPosition}>
-          <div>
-            <Title>{t('TITLE_HOME', theme?.defaultLanguages?.TITLE_HOME || 'All We need is Food.')}</Title>
-            <Slogan>{t('SUBTITLE_HOME', theme?.defaultLanguages?.SUBTITLE_HOME || 'Let\'s start to order food now')}</Slogan>
-            <WrapInput onClick={handleAddressInput} withIcon>
-              <HiOutlineLocationMarker />
-              <p>
-                {orderState?.options?.address?.address || t('WHAT_IS_YOUR_ADDRESS', 'What\'s your address?')}
-              </p>
-            </WrapInput>
-            <Button
-              color='primary'
-              name='find-business'
-              onClick={handleFindBusinesses}
-            >
-              {t('FIND_BUSINESSES', theme?.defaultLanguages?.FIND_BUSINESSES || 'Find businesses')}
-            </Button>
-          </div>
-        </ContentWrapper>
-        <Modal
-          title={t('WHAT_IS_YOUR_ADDRESS', 'What\'s your address?')}
-          open={modals.formOpen}
+    <HeroContainer bgimage={theme.images?.general?.homeHero} mb={!auth && '30vh'}>
+      <ContentWrapper>
+        {windowSize.width < 576 && (
+          <LogoWrapper>
+            <img alt='Logotype' src={theme?.images?.logos?.logotypeInvert} loading='lazy' />
+          </LogoWrapper>
+        )}
+        <HeroContent>
+          <Title>{t('TITLE_HOME', theme?.defaultLanguages?.TITLE_HOME || 'All We need is Food.')}</Title>
+          <Slogan>{t('SUBTITLE_HOME', theme?.defaultLanguages?.SUBTITLE_HOME || 'Let\'s start to order food now')}</Slogan>
+          <WrapInput onClick={handleAddressInput} withIcon>
+            <HiOutlineLocationMarker />
+            <p>
+              {orderState?.options?.address?.address || t('WHERE_DO_WE_DELIVERY', theme?.defaultLanguages?.WHERE_DO_WE_DELIVERY || 'Where do we delivery?')}
+            </p>
+          </WrapInput>
+
+          <Button
+            color='primary'
+            name='find-business'
+            onClick={handleFindBusinesses}
+          >
+            {t('FIND_BUSINESSES', theme?.defaultLanguages?.FIND_BUSINESSES || 'Find businesses')}
+          </Button>
+        </HeroContent>
+      </ContentWrapper>
+
+      {windowSize.width < 576 && !auth && (
+        <UseAccount>
+          <SectionHeader>
+            {t('YOUR_ACCOUNT', 'Use your account')}
+          </SectionHeader>
+          <Button color='primary' onClick={() => handleOpenLoginSignUp('login')}>login</Button>
+          <Button color='primary' onClick={() => handleOpenLoginSignUp('signup')}>signUp</Button>
+        </UseAccount>
+      )}
+
+      <Modal
+        title={t('WHERE_DO_WE_DELIVERY', theme?.defaultLanguages?.WHERE_DO_WE_DELIVERY || 'Where do we delivery?')}
+        open={modals.formOpen}
+        onClose={() => setModals({ ...modals, formOpen: false })}
+      >
+        <AddressForm
+          useValidationFileds
+          address={orderState?.options?.address || {}}
           onClose={() => setModals({ ...modals, formOpen: false })}
-        >
-          <AddressForm
-            useValidationFileds
-            address={orderState?.options?.address || {}}
-            onClose={() => setModals({ ...modals, formOpen: false })}
-            onSaveAddress={() => setModals({ ...modals, formOpen: false })}
-            onCancel={() => setModals({ ...modals, formOpen: false })}
-          />
-        </Modal>
+          onSaveAddress={() => setModals({ ...modals, formOpen: false })}
+          onCancel={() => setModals({ ...modals, formOpen: false })}
+        />
+      </Modal>
+      <Modal
+        title={t('WHERE_DO_WE_DELIVERY', theme?.defaultLanguages?.WHERE_DO_WE_DELIVERY || 'Where do we delivery?')}
+        open={modals.listOpen}
+        width='70%'
+        onClose={() => setModals({ ...modals, listOpen: false })}
+      >
+        <AddressList
+          isModal
+          changeOrderAddressWithDefault
+          userId={isNaN(userCustomer) ? null : userCustomer}
+          onCancel={() => setModals({ ...modals, listOpen: false })}
+          onAccept={() => handleFindBusinesses()}
+        />
+      </Modal>
+      {authModalOpen && !auth && (
         <Modal
-          open={modals.listOpen}
-          width='70%'
-          onClose={() => setModals({ ...modals, listOpen: false })}
+          open={authModalOpen}
+          onRemove={() => closeAuthModal()}
+          width='50%'
+          authModal
         >
-          <AddressList
-            isModal
-            changeOrderAddressWithDefault
-            userId={isNaN(userCustomer) ? null : userCustomer}
-            onCancel={() => setModals({ ...modals, listOpen: false })}
-            onAccept={() => handleFindBusinesses()}
-          />
+          {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
+            />
+          )}
+          {modalPageToShow === 'forgotpassword' && (
+            <ForgotPasswordForm
+              elementLinkToLogin={
+                <a
+                  onClick={
+                    (e) => handleCustomModalClick(e, { page: 'login' })
+                  } href='#'
+                >{t('LOGIN', theme?.defaultLanguages?.LOGIN || 'Login')}
+                </a>
+              }
+              isPopup
+            />
+          )}
         </Modal>
-      </HeroContainer>
-      {props.afterComponents?.map((AfterComponent, i) => (
-        <AfterComponent key={i} {...props} />))}
-      {props.afterElements?.map((AfterElement, i) => (
-        <React.Fragment key={i}>
-          {AfterElement}
-        </React.Fragment>))}
-    </>
+      )}
+    </HeroContainer>
   )
 }