ordering-ui-admin-external 1.6.2 → 1.6.4

package/src/components/Home/HomePage/styles.js

@@ -1,4 +1,6 @@
 import styled, { css } from 'styled-components'
+import { lighten } from 'polished'
+
 export const HomeContainer = styled.div`
   flex: 1;
   padding: 20px;
@@ -52,6 +54,7 @@ export const Breadcrumb = styled.div`
   }
 `
 export const HeaderContainer = styled.div`
+  margin-bottom: 25px;
 `
 export const WelcomeMsg = styled.h1`
   font-weight: bold;
@@ -64,7 +67,6 @@ export const WelcomeMsg = styled.h1`
 export const GuideMsg = styled.p`
   font-size: 16px;
   color: ${props => props.theme.colors.headingColor};
-  margin-bottom: 25px;
 `
 export const Reports = styled.div`
   display: flex;
@@ -422,3 +424,62 @@ export const ButtonWrapper = styled.div`
   justify-content: center;
   margin-top: 20px;
 `
+
+export const ProjectStatusContainer = styled.div`
+  box-shadow: 0px 1px 4px rgba(0, 0, 0, 0.1);
+  border-radius: 8px;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  margin-bottom: 60px;
+
+  > img {
+    max-height: 250px;
+  }
+
+  @media (min-width: 768px) {
+    flex-direction: row;
+    justify-content: space-between;
+  }
+`
+export const ProjectInfoWrapper = styled.div`
+  padding: 20px 30px;
+`
+export const GreetingText = styled.h1`
+  font-size: 32px;
+  font-weight: 700;
+  line-height: 48px;
+  margin: 0;
+`
+export const ProjectStatusDescription = styled.p`
+  font-size: 16px;
+  line-height: 24px;
+`
+export const ProjectCurrentStatus = styled.div`
+  width: fit-content;
+  /* margin-top: 15px; */
+  padding: 10px 16px;
+  border-radius: 8px;
+  font-size: 14px;
+  line-height: 24px;
+  color: ${props => props.theme.colors.warning};
+  background-color: ${(props) => lighten(0.4, props.theme.colors.warning)};
+  ${({ isActive }) => isActive && css`
+    color: ${props => props.theme.colors.success};
+    background-color: ${(props) => lighten(0.5, props.theme.colors.success)};
+  `}
+`
+
+export const ProjectStatusWrapper = styled.div`
+  display: flex;
+  align-items: center;
+
+  > button {
+    height: 44px;
+    margin-left: 15px;
+    ${props => props.theme.rtl && css`
+      margin-right: 15px;
+      margin-left: 0px;
+    `}
+  }
+`

package/src/components/LanguageSelector/index.js

@@ -30,7 +30,7 @@ const LanguageSelectorUI = (props) => {
       <SelectWrapper>
         <Globe2 />
         <Select
-          optionInnerMaxHeight='60vh'
+          optionInnerMaxHeight='300px'
           options={languagesState?.loading ? defaultLanguages : _languages}
           defaultValue={languagesState?.loading ? defaultCurrentLanguage : currentLanguage}
           onChange={(languageId) => handleChangeLanguage(languageId, true)}

package/src/components/Login/LoginForm/index.js

@@ -8,14 +8,17 @@ import {
   useApi,
   useConfig
 } from 'ordering-components-admin-external'
+import { useCountdownTimer } from '../../../hooks/useCountdownTimer'
 import { Alert } from '../../Shared'
 import BsArrowRightShort from '@meronex/icons/bs/BsArrowRightShort'
 import MdExitToApp from '@meronex/icons/md/MdExitToApp'
-import { Button, Input, Tabs, Tab } from '../../../styles'
+import { Button, Input } from '../../../styles'
 import { useTheme } from 'styled-components'
 import HiOutlineMail from '@meronex/icons/hi/HiOutlineMail'
 import RiLockPasswordLine from '@meronex/icons/ri/RiLockPasswordLine'
 import { Eye, EyeSlash } from 'react-bootstrap-icons'
+import OtpInput from 'react-otp-input'
+import { formatSeconds } from '../../../utils'
 
 import {
   LoginContainer,
@@ -28,15 +31,19 @@ import {
   InputWithIcon,
   WrapperPassword,
   TogglePassword,
-  ReCAPTCHAWrapper
+  ReCAPTCHAWrapper,
+  Tabs,
+  Tab,
+  CountdownTimer,
+  OtpWrapper,
+  ResendCode
 } from './styles'
 
 const LoginFormUI = (props) => {
   const {
-    useLoginByEmail,
+    useLoginOtpEmail,
     useLoginByCellphone,
     handleChangeInput,
-    hanldeChangeTab,
     handleButtonLoginClick,
     elementLinkToSignup,
     elementLinkToForgotPassword,
@@ -45,7 +52,14 @@ const LoginFormUI = (props) => {
     isPopup,
     isReCaptchaEnable,
     handleReCaptcha,
-    useProjectDomain
+    useProjectDomain,
+    checkPhoneCodeState,
+    otpType,
+    setOtpType,
+    handleChangeTab,
+    generateOtpCode,
+    otpState,
+    setOtpState
   } = props
   const [, t] = useLanguage()
   const [ordering] = useApi()
@@ -58,6 +72,15 @@ const LoginFormUI = (props) => {
   const [reCaptchaVersion, setRecaptchaVersion] = useState({ version: 'v3', siteKey: '' })
   const [submitted, setSubmitted] = useState(false)
   const [passwordSee, setPasswordSee] = useState(false)
+  const [loginWithOtpState, setLoginWithOtpState] = useState(false)
+  const [willVerifyOtpState, setWillVerifyOtpState] = useState(false)
+
+  const numOtpInputs = loginTab === 'otp' ? 6 : 4
+  const otpPlaceholder = [...Array(numOtpInputs)].fill(0).join('')
+  const [otpLeftTime, , resetOtpLeftTime] = useCountdownTimer(
+    600, !checkPhoneCodeState?.loading && willVerifyOtpState)
+
+  const isOtpEmail = loginTab === 'otp' && otpType === 'email'
 
   const onSubmit = () => {
     setSubmitted(true)
@@ -73,9 +96,30 @@ const LoginFormUI = (props) => {
     }, 750)
   }
 
+  const handleChangeOtpType = (type) => {
+    handleChangeTab('otp')
+    setOtpType(type)
+  }
+
+  const handleSendOtp = () => {
+    if (willVerifyOtpState) {
+      setOtpState('')
+      resetOtpLeftTime()
+      if (loginTab === 'otp') {
+        generateOtpCode()
+        setWillVerifyOtpState(true)
+      }
+    }
+  }
+
   useEffect(() => {
     if (ordering.project === null || !submitted) return
-    handleButtonLoginClick()
+    if (loginTab === 'otp') {
+      generateOtpCode()
+      setWillVerifyOtpState(true)
+    } else {
+      handleButtonLoginClick()
+    }
   }, [ordering, submitted])
 
   useEffect(() => {
@@ -111,8 +155,41 @@ const LoginFormUI = (props) => {
       open: false,
       content: []
     })
+    setOtpState('')
   }
 
+  useEffect(() => {
+    if (otpState?.length === numOtpInputs) {
+      if (loginTab === 'otp') {
+        handleButtonLoginClick()
+      }
+    }
+  }, [otpState])
+
+  useEffect(() => {
+    if (checkPhoneCodeState?.result?.error) {
+      setAlertState({
+        open: true,
+        content: checkPhoneCodeState?.result?.result || [t('ERROR', 'Error')]
+      })
+    } else if (checkPhoneCodeState?.result?.result) {
+      setAlertState({
+        open: true,
+        content: t('CODE_SENT', 'The code has been sent')
+      })
+      resetOtpLeftTime()
+    }
+  }, [checkPhoneCodeState])
+
+  useEffect(() => {
+    if (otpLeftTime === 0) {
+      setAlertState({
+        open: true,
+        content: t('TIME_IS_UP_PLEASE_RESEND_CODE', 'Time is up. Please resend code again')
+      })
+    }
+  }, [otpLeftTime])
+
   useEffect(() => {
     if (configs && Object.keys(configs).length > 0 && configs?.security_recaptcha_auth?.value === '1') {
       if (configs?.security_recaptcha_type?.value === 'v3' &&
@@ -152,100 +229,96 @@ const LoginFormUI = (props) => {
           </p>
         </TitleFormSide>
 
-        {useLoginByEmail && useLoginByCellphone && (
-          <LoginWith isPopup={isPopup}>
-            <Tabs variant='primary'>
-              {useLoginByEmail && (
-                <Tab
-                  onClick={() => hanldeChangeTab('email')}
-                  active={loginTab === 'email'}
-                >
-                  {t('LOGIN_WITH_EMAIL', 'Login with Email')}
-                </Tab>
-              )}
-              {useLoginByCellphone && (
-                <Tab
-                  onClick={() => hanldeChangeTab('cellphone')}
-                  active={loginTab === 'cellphone'}
-                >
-                  {t('LOGIN_WITH_CELLPHONE', 'Login with Cellphone')}
-                </Tab>
-              )}
+        {(ordering?.project && useLoginOtpEmail) && !loginWithOtpState && !willVerifyOtpState && (
+          <LoginWith>
+            <Tabs>
+              <Tab
+                onClick={() => handleChangeTab('email')}
+                active={loginTab === 'email'}
+              >
+                {t('LOGIN_WITH_EMAIL', 'Login with Email')}
+              </Tab>
+              <Tab
+                onClick={() => handleChangeOtpType('email')}
+                active={isOtpEmail}
+              >
+                {t('BY_OTP_EMAIL', 'by Otp Email')}
+              </Tab>
             </Tabs>
           </LoginWith>
         )}
 
-        {(useLoginByCellphone || useLoginByEmail) && (
-          <FormInput
-            noValidate
-            isPopup={isPopup}
-            onSubmit={handleSubmit(onSubmit)}
-          >
-            {!useProjectDomain && (
-              <InputWithIcon>
-                <Input
-                  type='text'
-                  name='project'
-                  aria-label='project'
-                  placeholder={t('PROJECT', 'Project')}
-                  ref={register({
-                    required: t(
-                      'VALIDATION_ERROR_REQUIRED',
-                      'Project is required'
-                    ).replace('_attribute_', t('PROJECT', 'Project'))
-                  })}
-                  onChange={(e) => hanldeChangeProject(e)}
-                  autoComplete='off'
-                  autoCapitalize='off'
-                />
-                <MdExitToApp />
-              </InputWithIcon>
-            )}
+        <FormInput
+          noValidate
+          isPopup={isPopup}
+          onSubmit={handleSubmit(onSubmit)}
+        >
+          {!willVerifyOtpState && (
+            <InputWithIcon>
+              <Input
+                type='text'
+                name='project'
+                aria-label='project'
+                placeholder={t('PROJECT', 'Project')}
+                ref={register({
+                  required: t(
+                    'VALIDATION_ERROR_REQUIRED',
+                    'Project is required'
+                  ).replace('_attribute_', t('PROJECT', 'Project'))
+                })}
+                onChange={(e) => hanldeChangeProject(e)}
+                autoComplete='off'
+                autoCapitalize='off'
+              />
+              <MdExitToApp />
+            </InputWithIcon>
+          )}
 
-            {useLoginByEmail && loginTab === 'email' && (
-              <InputWithIcon>
-                <Input
-                  type='email'
-                  name='email'
-                  aria-label='email'
-                  placeholder={t('EMAIL')}
-                  ref={register({
-                    required: t(
-                      'VALIDATION_ERROR_REQUIRED',
-                      'Email is required'
-                    ).replace('_attribute_', t('EMAIL', 'Email')),
-                    pattern: {
-                      value: /^[A-Z0-9._%+-]+@[A-Z0-9.-]+\.[A-Z]{2,}$/i,
-                      message: t(
-                        'VALIDATION_ERROR_EMAIL',
-                        'Invalid email address'
-                      ).replace('_attribute_', t('EMAIL', 'Email'))
-                    }
-                  })}
-                  onChange={(e) => handleChangeInput(e)}
-                  autoComplete='off'
-                  autoCapitalize='off'
-                />
-                <HiOutlineMail />
-              </InputWithIcon>
-            )}
-            {useLoginByCellphone && loginTab === 'cellphone' && (
+          {!willVerifyOtpState && (
+            <InputWithIcon>
               <Input
-                type='tel'
-                name='cellphone'
-                aria-label='cellphone'
-                placeholder='Cellphone'
+                type='email'
+                name='email'
+                aria-label='email'
+                placeholder={t('EMAIL')}
                 ref={register({
                   required: t(
                     'VALIDATION_ERROR_REQUIRED',
-                    'Cellphone is required'
-                  ).replace('_attribute_', t('CELLPHONE', 'Cellphone'))
+                    'Email is required'
+                  ).replace('_attribute_', t('EMAIL', 'Email')),
+                  pattern: {
+                    value: /^[A-Z0-9._%+-]+@[A-Z0-9.-]+\.[A-Z]{2,}$/i,
+                    message: t(
+                      'VALIDATION_ERROR_EMAIL',
+                      'Invalid email address'
+                    ).replace('_attribute_', t('EMAIL', 'Email'))
+                  }
                 })}
                 onChange={(e) => handleChangeInput(e)}
                 autoComplete='off'
+                autoCapitalize='off'
               />
-            )}
+              <HiOutlineMail />
+            </InputWithIcon>
+          )}
+          {useLoginByCellphone && loginTab === 'cellphone' && !willVerifyOtpState && (
+            <Input
+              type='tel'
+              name='cellphone'
+              aria-label='cellphone'
+              placeholder='Cellphone'
+              ref={register({
+                required: t(
+                  'VALIDATION_ERROR_REQUIRED',
+                  'Cellphone is required'
+                ).replace('_attribute_', t('CELLPHONE', 'Cellphone'))
+              })}
+              onChange={(e) => handleChangeInput(e)}
+              autoComplete='off'
+            />
+          )}
 
+          {loginTab !== 'otp' && !willVerifyOtpState && (
             <WrapperPassword>
               <Input
                 type={!passwordSee ? 'password' : 'text'}
@@ -276,29 +349,73 @@ const LoginFormUI = (props) => {
                 {!passwordSee ? <Eye /> : <EyeSlash />}
               </TogglePassword>
             </WrapperPassword>
+          )}
 
-            {isReCaptchaEnable && (
-              <ReCAPTCHAWrapper>
-                <ReCaptcha handleReCaptcha={handleReCaptcha} reCaptchaVersion={reCaptchaVersion} />
-              </ReCAPTCHAWrapper>
-            )}
+          {isReCaptchaEnable && (
+            <ReCAPTCHAWrapper>
+              <ReCaptcha handleReCaptcha={handleReCaptcha} reCaptchaVersion={reCaptchaVersion} />
+            </ReCAPTCHAWrapper>
+          )}
 
+          {(!willVerifyOtpState &&
             <Button
               borderRadius='8px'
               color='primary'
               type='submit'
               disabled={formState.loading}
             >
-              {formState.loading ? t('LOADING') + '...' : t('LOGIN')}
+              {formState.loading
+                ? t('LOADING') + '...'
+                : loginWithOtpState || loginTab === 'otp'
+                  ? t('GET_VERIFY_CODE', 'Get verify code')
+                  : t('LOGIN', 'Login')}
               <BsArrowRightShort />
             </Button>
+          )}
+          {(willVerifyOtpState && !checkPhoneCodeState?.loading) && (
+            <>
+              <CountdownTimer>
+                <span>{formatSeconds(otpLeftTime)}</span>
+              </CountdownTimer>
 
+              <OtpWrapper>
+                <OtpInput
+                  value={otpState}
+                  onChange={otp => setOtpState(otp)}
+                  numInputs={numOtpInputs}
+                  containerStyle='otp-container'
+                  inputStyle='otp-input'
+                  placeholder={otpPlaceholder}
+                  isInputNum
+                  shouldAutoFocus
+                  isDisabled={otpLeftTime === 0}
+                />
+              </OtpWrapper>
+              <ResendCode disabled={otpLeftTime > 520} onClick={handleSendOtp}>
+                {t('RESEND_AGAIN', 'Resend again')}?
+              </ResendCode>
+              <Button
+                borderRadius='8px'
+                type='button'
+                color='primary'
+                disabled={formState.loading}
+                onClick={() => {
+                  setLoginWithOtpState(false)
+                  setWillVerifyOtpState(false)
+                }}
+              >
+                {t('CANCEL', 'Cancel')}
+              </Button>
+            </>
+          )}
+
+          {loginTab !== 'otp' && (
             <RedirectLink isPopup={isPopup}>
               <span>{t('FORGOT_YOUR_PASSWORD', 'Forgot your password?')}</span>
               {elementLinkToForgotPassword}
             </RedirectLink>
-          </FormInput>
-        )}
+          )}
+        </FormInput>
 
         {elementLinkToSignup && (
           <RedirectLink register isPopup={isPopup}>

package/src/components/Login/LoginForm/styles.js

@@ -1,5 +1,6 @@
 import React from 'react'
 import styled, { css } from 'styled-components'
+import { darken } from 'polished'
 
 export const LoginContainer = styled.div`
   width: 100%;
@@ -82,13 +83,7 @@ export const LoginWith = styled.div`
   }
 
   @media (min-width: 992px) {
-    font-size: ${({ isPopup }) => isPopup ? '13px' : '18px'};
-  }
-
-  @media (min-width: 1200px) {
-    ${({ isPopup }) => isPopup && css`
-      font-size: 17px;
-    `};
+    font-size: 18px;
   }
 `
 
@@ -203,7 +198,7 @@ export const SocialButtons = styled.div`
 `
 
 export const TitleFormSide = styled.div`
-  color: #fff;
+  color: ${props => props.theme.colors.white};
   
   h1 {
     text-transform: uppercase;
@@ -307,3 +302,74 @@ export const ReCAPTCHAWrapper = styled.div`
     padding: 0;
   }
 `
+
+export const Tabs = styled.div`
+  display: flex;  
+`
+
+export const Tab = styled.div`
+  padding: 10px 0;
+  cursor: pointer;
+  ${props => props.theme?.rtl ? css`
+    margin-left: 15px;
+  ` : css`
+    margin-right: 15px;
+  `}
+  ${({ active }) => active && css`
+    color: ${props => props.theme.colors.white};
+  `}
+
+  ${({ active }) => !active && css`
+    color: ${props => props.theme.colors.lightGray};
+  `}
+`
+
+export const CountdownTimer = styled.div`
+  margin: 15px;
+  display: flex;
+  justify-content: center;
+  
+  span {
+    font-size: 30px;
+    font-weight: 700;
+    color: ${props => props.theme.colors.white};
+  }
+`
+export const OtpWrapper = styled.div`
+  width: 100%;
+  .otp-container{
+    display: flex;
+    justify-content: space-evenly;
+    margin: 20px;
+    
+    .otp-input{
+      width: 50px !important;
+      height: 45px;
+      border-radius: 8px;
+      background-color: ${props => props.theme.colors.backgroundPage};
+      outline: none;
+      border: none;
+      font-size: 20px;
+      font-weight: bold; 
+
+      &:focus{
+        border-color: ${() => darken(0.07, '#CCC')} !important;
+      }
+
+      &::placeholder,
+      &::-webkit-input-placeholder {
+        color: #DBDCDB;
+      }
+      &:-ms-input-placeholder {
+        color: #DBDCDB;
+      }
+    }
+  }
+`
+export const ResendCode = styled.span`
+  color: ${props => props.disabled ? props.theme.colors.disabled : props.theme.colors.primary};
+  font-size: 20px;
+  align-self: center;
+  margin-bottom: 10px;
+  cursor: ${props => props.disabled ? 'not-allowed' : 'pointer'};
+`

package/src/components/Loyalty/RewardsPrograms/index.js

@@ -46,7 +46,7 @@ const RewardsProgramsUI = (props) => {
               <MenuIcon />
             </IconButton>
           )}
-          <h1>{t('LOYALTY', 'Loyalty')}</h1>
+          <h1>{t('LOYALTY_AUTOMATION', 'Loyalty automation')}</h1>
         </HeaderTitleContainer>
 
         <LoyaltyListContainer>

package/src/components/Marketing/CampaignSignUpOption/index.js

@@ -109,7 +109,7 @@ const CampaignSignUpOptionUI = (props) => {
   const scrollDown = (e) => {
     if (!e.target.closest('.ordering-calendar-btn')) return
 
-    const el = document.querySelector('.popup-dialog')
+    const el = document.querySelector('.dialog-inner')
     if (el?.scrollHeight > el?.clientHeight) {
       const top = contentEndRef.current.offsetTop
       el.scrollTo({

package/src/components/Marketing/EnterprisePromotionListing/index.js

@@ -82,7 +82,7 @@ const EnterprisePromotionListingUI = (props) => {
                 <MenuIcon />
               </IconButton>
             )}
-            <h1>{t('PROMOTIONS_ENTERPRISE', 'Promotions enterprise')}</h1>
+            <h1>{t('PROMOTION_AUTOMATION', 'Promotions automation')}</h1>
           </HeaderTitleContainer>
           <ActionsWrapper eventDisabled={advancedOfferModuleDisabled || isDisabledFeature}>
             <Button

package/src/components/Messages/MessagesListing/styles.js

@@ -5,11 +5,9 @@ export const MessagesListingContainer = styled.div`
   transition: all 0.5s;
   padding: 20px;
   box-sizing: border-box;
-
-
-  @media print {
-    display: none;
-  }
+  max-height: 100vh;
+  overflow: auto;
+  min-height: 100vh;
 `
 
 export const MessagesContent = styled.div`