ordering-ui-external 1.4.5 → 1.5.0

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>
   )
 }

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

@@ -3,9 +3,13 @@ import styled, { css } from 'styled-components'
 
 export const HeroContainerStyled = styled.div`
   width: 100%;
-  height: calc(100vh - 97px);
-  padding-top: 0px;
-  position: relative;
+  height: fit-content;
+  height: 374px;
+  position:relative;
+  ${({ mb }) => mb && css`
+    margin-bottom: ${mb};
+  `}
+
 
   ${({ bgimage }) => bgimage && css`
     background-repeat: no-repeat, repeat;
@@ -14,13 +18,13 @@ export const HeroContainerStyled = styled.div`
     background-position: center;
   `}
 
-  @media (min-width: 576px) {
-    height: calc(100vh - 65px);
+  @media (min-width: 375px) {
+    height: 374px;
   }
 
-  @media (min-width: 993px) {
-    height: auto;
-    padding-top: 53%;
+  @media (min-width: 567px) {
+    height: calc(100vh - 65px);
+    margin-bottom: 0;
   }
 `
 
@@ -39,24 +43,60 @@ export const HeroContainer = (props) => {
   )
 }
 
+export const ContentWrapper = styled.div`
+    display: flex;
+    flex-direction: column;
+    justify-content: space-around;
+    height: 100%;
+    padding: 0px 10vw 0px;
+    background-color: #0000004D;
+
+    input {
+      width: 90%;
+      margin-bottom: 15px;
+    }
+
+    @media (min-width: 576px) {
+      justify-content: center;
+      padding: 0px 40px 0px;
+      input {
+        width: 97%;
+      }
+    }
+
+    @media (min-width: 768px) {
+      ${props => props.theme?.rtl && css`
+        padding: 0px 40px 0px;
+      `}
+    }
+`
+
 export const Title = styled.h1`
   margin: 0px;
   text-align: left;
-  font-weight: 500;
-  font-size: 50px;
+  font-weight: 600;
+  font-size: 30px;
+  line-height: 36px;
   letter-spacing: 0px;
-  color: ${props => props.theme.colors.titleHomeColor ?? '#FFFFFF'};
+  color: #FFFFFF;
+  text-shadow: 0px 3px 6px #2c2e33;
   opacity: 1;
 
   ${props => props.theme?.rtl && css`
       text-align: right;
   `}
 
-  @media (min-width: 400px) {
-    font-size: 65px;
+  @media (min-width: 381px) {
+    font-size: 35px;
   }
 
+
   @media (min-width: 576px) {
+    font-size: 40px;
+    line-height: initial;
+  }
+
+  @media (min-width: 850px) {
     font-size: 72px;
   }
 `
@@ -64,11 +104,13 @@ export const Title = styled.h1`
 export const Slogan = styled.p`
   margin: 0px;
   text-align: left;
-  font-size: 24px;
+  font-size: .96rem;
+  line-height: 24px;
   letter-spacing: 0px;
-  color: ${props => props.theme.colors.subtitleHomeColor ?? '#FFFFFF'};
+  color: #FFFFFF;
   opacity: 1;
-  margin-bottom: 37px;
+  text-shadow: 0px 3px 6px #2c2e33;
+  margin-bottom: 30px;
 
   ${props => props.theme?.rtl && css`
       text-align: right;
@@ -76,21 +118,23 @@ export const Slogan = styled.p`
 
   @media (min-width: 480px) {
     font-size: 24px;
+    line-height: initial;
+    margin-bottom: 37px;
   }
 `
 
 export const WrapInput = styled.div`
   position: relative;
   cursor: pointer;
-  padding: 10px 25px;
   background: #FFFFFF;
+  padding: 8px 16px;
   border: 1px solid #DEE2E6;
   box-sizing: border-box;
   box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.12);
   border-radius: 50px;
   display: flex;
   align-items: center;
-  margin-bottom: 27px;
+  margin-bottom: 22px;
 
   ${({ withIcon }) => withIcon && css`
     width: calc(100% - 20px);
@@ -109,97 +153,116 @@ export const WrapInput = styled.div`
         right: initial;
      `}
     }
+
+    @media (min-width: 576px) {
+      padding: 10px 25px;
+      margin-bottom: 27px;
+    }
+
+    @media (min-width: 1024px) {
+      width: calc(50% - 20px);
+    }
   `}
-  
-  p {
+
+  p{
     color: ${props => props.theme.colors.darkTextColor};
     position: relative;
     margin: 0;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    font-size: 12px;
+    line-height: 18px;
+    @media (min-width: 576px) {
+      font-size: 1rem;
+      line-height: initial;
+    }
   }
 
   svg {
     color: ${props => props.theme.colors.primary};
-    width: 22px;
-    height: 22px;
-    min-width: 22px;
-
+    font-size: 22px;
     ${props => props.theme?.rtl ? css`
-      margin-left: 20px;
+      margin-left: 12px;
     ` : css`
-      margin-right: 20px;
+      margin-right: 12px;
     `}
 
+    @media (min-width: 576px) {
+      ${props => props.theme?.rtl ? css`
+        margin-left: 20px;
+      ` : css`
+        margin-right: 20px;
+      `}
+    }
   }
 `
 
-export const ContentWrapper = styled.div`
+export const UseAccount = styled.div`
   position: absolute;
-  display: flex;
   left: 0;
-  top: 0;
   width: 100%;
-  height: 100%;
-  background-color: #0000004D;
-  align-items: center;
+  min-height: 30vh;
+  padding: 10vw;
+  box-sizing: border-box;
+  display: flex;
+  flex-direction: column;
   justify-content: center;
-  
-  ${props => props.contentPosition === 'left' && css`
-    align-items: center;
-    justify-content: left;
-  `}
+  align-items: center;
 
-  ${props => props.contentPosition === 'right' && css`
-    align-items: center;
-    justify-content: right;
-  `}
+  > button {
+    width: 100%;
+    padding-top: 10px;
+    padding-bottom: 10px;
+    font-size: 14px;
+    line-height: 24px;
+  }
 
-  ${props => props.contentPosition === 'top' && css`
-    align-items: start;
-    justify-content: center;
-  `}
+  > *:last-child {
+    margin-top: 14px;
+    background-color: #E9F2FE;
+    color: ${props => props.theme.colors.primary};
+  }
 
-  ${props => props.contentPosition === 'bottom' && css`
-    align-items: end;
-    justify-content: center;
-  `}
+  @media (min-width: 576px) {
+    display: none;
+  }
+`
 
-  > div {
-    display: flex;
-    flex-direction: column;
-    justify-content: center;
-    width: calc(100% - 40px);
-    position: relative;
-    padding: 20px;
+export const SectionHeader = styled.div`
+  font-size: 24px;
+  font-weight: 600;
+  line-height: 30px;
+  color: #344050;
+  margin: 0;
+  margin-bottom: 27px;
+  width: 100%;
+`
 
-    ${props => props.theme?.rtl && css`
-      padding: 20px;
-    `}
+export const LogoWrapper = styled.div`
+  width: 150px;
+  margin: 53px auto;
+  display: flex;
+  justify-content: center;
+  img {
+    width: 100%;
+    object-fit: fill;
+  }
+`
+export const HeroContent = styled.div`
+  button{
+    font-size: 12px;
+    line-height: 18px;
+    padding: 10px 16px;
+    margin-bottom: 45px;
+    white-space: nowrap;
 
-    button {
-      width: 180px;
-      font-size: 18px;
+    @media (min-width: 576px) {
       padding-top: 5px;
       padding-bottom: 5px;
-    }
-
-    input {
-      width: 90%;
-      margin-bottom: 15px;
-    }
-
-    @media (min-width: 425px) {
-      input {
-        width: 97%;
-      }
-    }
-
-    @media (min-width: 768px) {
-      padding: 40px;
-      width: 50%;
-      ${props => props.theme?.rtl && css`
-        padding: 40px;
-      `}
+      font-size: 18px;
+      width: 180px;
+      line-height: initial;
     }
   }
-
 `

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

@@ -46,6 +46,8 @@ import { FacebookLoginButton } from '../FacebookLogin'
 import { AppleLogin } from '../AppleLogin'
 import { SmsLoginButton } from '../../../../../components/SmsLogin'
 import { useCountdownTimer } from '../../../../../hooks/useCountdownTimer'
+import { useRecaptcha } from '../../../../../hooks/useRecaptcha'
+
 import { formatSeconds } from '../../../../../utils'
 import { GoogleLoginButton } from '../GoogleLogin'
 import {
@@ -92,8 +94,9 @@ const LoginFormUI = (props) => {
   const theme = useTheme()
   const [{ configs }] = useConfig()
   const formMethods = useForm()
-
+  const [recaptchaConfig] = useRecaptcha(enableReCaptcha)
   const [alertState, setAlertState] = useState({ open: false, content: [] })
+  const [reCaptchaVersion, setRecaptchaVersion] = useState({ version: '', siteKey: '' })
   const [, { login }] = useSession()
   const [passwordSee, setPasswordSee] = useState(false)
   const [loginWithOtpState, setLoginWithOtpState] = useState(false)
@@ -102,7 +105,7 @@ const LoginFormUI = (props) => {
   const [projectName, setProjectName] = useState(null)
   const [submitted, setSubmitted] = useState(false)
 
-  const [otpLeftTime, _, resetOtpLeftTime] = useCountdownTimer(
+  const [otpLeftTime, , resetOtpLeftTime] = useCountdownTimer(
     600, !checkPhoneCodeState?.loading && willVerifyOtpState)
   const isOtpEmail = loginTab === 'otp' && otpType === 'email'
   const isOtpCellphone = loginTab === 'otp' && otpType === 'cellphone'
@@ -241,6 +244,23 @@ const LoginFormUI = (props) => {
 
   useEffect(() => {
     if (!formState.loading && formState.result?.error) {
+      if (formState.result?.result?.[0] === 'ERROR_AUTH_VERIFICATION_CODE') {
+        if (configs?.security_recaptcha_site_key?.value) {
+          setRecaptchaVersion({ version: 'v2', siteKey: configs?.security_recaptcha_site_key?.value })
+          setAlertState({
+            open: true,
+            content: [t('TRY_AGAIN', 'Please try again')]
+          })
+          setSubmitted(false)
+          return
+        }
+        setAlertState({
+          open: true,
+          content: [t('CONFIG_DOESNOT_RECAPTCHA_KEY', 'the config doesn\'t have recaptcha site key')]
+        })
+        setSubmitted(false)
+        return
+      }
       setAlertState({
         open: true,
         content: formState.result?.result || [t('ERROR', 'Error')]
@@ -325,6 +345,12 @@ const LoginFormUI = (props) => {
     handleButtonLoginClick()
   }, [ordering, submitted])
 
+  useEffect(() => {
+    if (recaptchaConfig?.siteKey) {
+      setRecaptchaVersion({ version: recaptchaConfig?.version, siteKey: recaptchaConfig?.siteKey })
+    }
+  }, [recaptchaConfig])
+
   return (
     <>
       {props.beforeElements?.map((BeforeElement, i) => (
@@ -564,7 +590,7 @@ const LoginFormUI = (props) => {
             )}
             {props.isRecaptchaEnable && enableReCaptcha && (
               <ReCaptchaWrapper>
-                <ReCaptcha handleReCaptcha={handleReCaptcha} />
+                <ReCaptcha handleReCaptcha={handleReCaptcha} reCaptchaVersion={reCaptchaVersion} />
               </ReCaptchaWrapper>
             )}
             {(!willVerifyOtpState &&
@@ -594,7 +620,7 @@ const LoginFormUI = (props) => {
             )}
           </FormInput>
 
-          {(elementLinkToSignup && !loginWithOtpState) && (
+          {(elementLinkToSignup && !loginWithOtpState && loginTab !== 'otp') && (
             <RedirectLink register isPopup={isPopup} className='new-account'>
               <span>{t('NEW_ON_PLATFORM', theme?.defaultLanguages?.NEW_ON_PLATFORM || 'New on Ordering?')}</span>
               {elementLinkToSignup}

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

@@ -51,6 +51,14 @@ export const LoginWith = styled.div`
   border-bottom: 1px solid #E9ECEF;
   font-size: 14px;
   margin-bottom: 10px;
+  overflow-x: auto;
+
+  -ms-overflow-style: none;  /* IE and Edge */
+  scrollbar-width: none;  /* Firefox */
+
+  &::-webkit-scrollbar {
+    display: none;
+  }
 
   @media (min-width: 425px) {
     font-size: 18px;