ordering-ui-external 1.4.5 → 1.5.1

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;

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

@@ -4,7 +4,8 @@ import {
   Messages as MessagesController,
   useUtils,
   useLanguage,
-  useSession
+  useSession,
+  useEvent
 } from 'ordering-components-external'
 import { useForm } from 'react-hook-form'
 import IosSend from '@meronex/icons/ios/IosSend'
@@ -90,6 +91,7 @@ const MessagesUI = (props) => {
   const { handleSubmit, register, errors, setValue } = useForm()
   const [alertState, setAlertState] = useState({ open: false, content: [] })
   const [{ user }] = useSession()
+  const [events] = useEvent()
   const [{ parseDate, parseTime }] = useUtils()
   const buttonRef = useRef(null)
   const [modalImage, setModalImage] = useState({ open: false, src: '' })
@@ -299,6 +301,10 @@ const MessagesUI = (props) => {
     })
   }
 
+  const goToBusiness = (slug) => {
+    events.emit('go_to_page', { page: 'business', params: { business_slug: slug} })
+  }
+
   const MapMessages = ({ messages }) => {
     return (
       <>
@@ -575,7 +581,7 @@ const MessagesUI = (props) => {
                       onClick={() => onMessages({ business: true, driver: false })}
                       isCursor
                     >
-                      <Image>
+                      <Image onClick={() => goToBusiness(order?.business?.slug)}>
                         <ImageWithFallback
                           src={order.business?.logo || theme.images?.dummies?.businessLogo}
                           fallback={<FaUserAlt />}

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

@@ -47,17 +47,30 @@ export const CustomerInfoContainer = styled.div`
   padding: 30px 25px;
   margin-top: 48px;
   display: flex;
+  flex-wrap: wrap;
+  flex-direction: column;
+  @media (min-width: 576px) {
+    flex-direction: row;
+  }
 `
+
 export const CustomerDetails = styled.div`
   flex: 1;
   > div {
     display: flex;
+    flex-direction: column;
     margin-top: 24px;
   }
+
+  @media (min-width: 576px) {
+    > div {
+      flex-direction: row;
+    }
+  }
 `
 export const PaymentDetails = styled.div`
   flex: 1;
-  h3.address {
+  h3 {
     margin-top: 30px;
   }
   p {
@@ -65,6 +78,12 @@ export const PaymentDetails = styled.div`
     line-height: 24px;
     margin: 10px 0;
   }
+
+  @media (min-width: 576px) {
+    h3:not(.address) {
+      margin-top: 0;
+    }
+  }
 `
 export const PhotoWrapper = styled.div`
   width: 75px;
@@ -154,6 +173,7 @@ export const SingleOrderHeader = styled.div`
   display: flex;
   align-items: center;
   justify-content: space-between;
+  flex-direction: column;
 
   > div {
     > div {
@@ -173,6 +193,10 @@ export const SingleOrderHeader = styled.div`
   button {
     height: 43px;
   }
+
+  @media (min-width: 576px) {
+    flex-direction: row;
+  }
 `
 export const OrderBusinessDetails = styled.div`
   display: flex;
@@ -181,8 +205,14 @@ export const OrderBusinessDetails = styled.div`
 `
 export const OrderBusinessWrapper = styled.div`
   display: flex;
+  flex-direction: column;
+
+  @media (min-width: 576px) {
+    flex-direction: row;
+  }
 `
 export const BusinessData = styled.div`
+  margin-top: 10px;
   p {
     font-size: 14px;
     line-height: 21px;
@@ -191,6 +221,9 @@ export const BusinessData = styled.div`
       font-weight: 500;
     }
   }
+  @media (min-width: 576px) {
+    margin-top: 0px;
+  }
 `
 export const ActionsBlock = styled.div`
   display: flex;

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

@@ -67,7 +67,7 @@ export const MyOrders = (props) => {
       {hideOrders && !allEmpty && (
         <h2>{t('PREVIOUSLY_ORDERED', 'Previously ordered')}</h2>
       )}
-      {!hideOrders && (
+      {!hideOrders && !props.hideOptions && (
         <ProfileOptions value='orders' />
       )}
       <Container hideOrders={hideOrders}>
@@ -135,7 +135,7 @@ export const MyOrders = (props) => {
                       setIsEmptyPreorder={setIsEmptyPreorder}
                       selectItem={selectItem}
                     />
-                    <Divider />
+                    {!isEmptyPreorder && <Divider />}
                   </>
                 )}
                 {(selectItem === 'all' || selectItem === 'active') && (
@@ -147,7 +147,7 @@ export const MyOrders = (props) => {
                       setIsEmptyActive={setIsEmptyActive}
                       selectItem={selectItem}
                     />
-                    <Divider />
+                    {!isEmptyActive && <Divider />}
                   </>
                 )}
                 {(selectItem === 'all' || selectItem === 'past') && (
@@ -159,7 +159,7 @@ export const MyOrders = (props) => {
                       setIsEmptyPast={setIsEmptyPast}
                       selectItem={selectItem}
                     />
-                    <Divider />
+                    {!isEmptyPast && <Divider />}
                   </>
                 )}
               </>