ordering-ui-external 1.0.0 → 1.1.1

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

@@ -1,8 +1,9 @@
 import React, { useEffect, useState, useRef } from 'react'
 import Skeleton from 'react-loading-skeleton'
-import { useSession, useLanguage, useCustomer, useConfig } from 'ordering-components-external'
+import { useSession, useLanguage, useCustomer, useConfig, useOrderingTheme } from 'ordering-components-external'
 import { useForm } from 'react-hook-form'
 import parsePhoneNumber from 'libphonenumber-js'
+import { useTheme } from 'styled-components'
 
 import {
   FormInput,
@@ -38,22 +39,32 @@ export const UserFormDetailsUI = (props) => {
     isCheckout,
     userData,
     isCustomerMode,
-    handleChangePromotions
+    setWillVerifyOtpState,
+    handleChangePromotions,
+    isOldLayout,
+    requiredFields
   } = props
 
   const formMethods = useForm()
   const [, t] = useLanguage()
   const [{ configs }] = useConfig()
-
+  const theme = useTheme()
   const [{ user: userSession }] = useSession()
+  const [orderingTheme] = useOrderingTheme()
   const [isValidPhoneNumber, setIsValidPhoneNumber] = useState(null)
   const [userPhoneNumber, setUserPhoneNumber] = useState(null)
   const [alertState, setAlertState] = useState({ open: false, content: [] })
   const [, { setUserCustomer }] = useCustomer()
+  const [isChanged, setIsChanged] = useState(false)
   const emailInput = useRef(null)
 
   const user = userData || userSession
 
+  const showCustomerCellphone = !orderingTheme?.theme?.profile?.components?.cellphone?.hidden
+  const showCustomerPassword = !orderingTheme?.theme?.profile?.components?.password?.hidden
+  const showCustomerPromotions = !orderingTheme?.theme?.profile?.components?.promotions?.hidden
+  const showLangauges = !orderingTheme?.theme?.profile?.components?.languages?.hidden
+
   const closeAlert = () => {
     setAlertState({
       open: false,
@@ -131,6 +142,7 @@ export const UserFormDetailsUI = (props) => {
 
   const handleChangePhoneNumber = (number, isValid) => {
     setUserPhoneNumber(number)
+    setIsChanged(true)
 
     let phoneNumberParser = null
     let phoneNumber = {
@@ -169,6 +181,10 @@ export const UserFormDetailsUI = (props) => {
     }
   }
 
+  const showFieldWithTheme = (name) => {
+    return !orderingTheme?.theme?.profile?.components?.[name]?.hidden
+  }
+
   useEffect(() => {
     if (Object.keys(formMethods.errors).length > 0) {
       const content = Object.values(formMethods.errors).map(error => error.message)
@@ -197,9 +213,8 @@ export const UserFormDetailsUI = (props) => {
     }
     if ((user || !isEdit) && !formState?.loading) {
       setUserCellPhone()
-      if (!isEdit && !formState?.loading) {
+      if (!isEdit) {
         cleanFormState && cleanFormState({ changes: {} })
-        setUserCellPhone(true)
       }
     }
     if (!isEdit) onCancel && onCancel()
@@ -214,6 +229,7 @@ export const UserFormDetailsUI = (props) => {
   }, [validationFields, emailInput.current])
 
   useEffect(() => {
+    if (requiredFields) return
     formMethods.register('email', {
       required: isRequiredField('email')
         ? t('VALIDATION_ERROR_EMAIL_REQUIRED', 'The field Email is required').replace('_attribute_', t('EMAIL', 'Email'))
@@ -225,6 +241,16 @@ export const UserFormDetailsUI = (props) => {
     })
   }, [formMethods])
 
+  useEffect(() => {
+    if (isChanged && userPhoneNumber && isValidPhoneNumber && formState?.changes?.country_phone_code && formState?.changes?.cellphone && configs?.verification_phone_required?.value === '1') {
+      setWillVerifyOtpState(true)
+    }
+  }, [isValidPhoneNumber, userPhoneNumber, configs?.verification_phone_required?.value, isChanged])
+
+  useEffect(() => {
+    if (requiredFields && !requiredFields.includes('cellphone')) setIsValidPhoneNumber(true)
+  }, [requiredFields])
+
   return (
     <>
       {props.beforeElements?.map((BeforeElement, i) => (
@@ -246,64 +272,59 @@ export const UserFormDetailsUI = (props) => {
               props.beforeMidComponents?.map((BeforeMidComponents, i) => (
                 <BeforeMidComponents key={i} {...props} />))
             }
-            <Divider />
+            {!requiredFields && <Divider />}
             {sortInputFields({ values: validationFields?.fields?.checkout }).map(field =>
-              showField && showField(field.code) && (
+              showField && showField(field.code) && showFieldWithTheme(field.code) && (
                 <React.Fragment key={field.id}>
                   {field.code === 'email' ? (
-                    <InputGroup>
-                      <p>{t(field.code.toUpperCase(), field?.name)}</p>
-                      <Input
-                        key={field.id}
-                        type={field.type}
-                        name={field.code}
-                        className='form'
-                        borderBottom
-                        disabled={!isEdit}
-                        placeholder={t(field.code.toUpperCase(), field?.name)}
-                        defaultValue={
-                          formState?.result?.result
-                            ? formState?.result?.result[field.code]
-                            : formState?.changes[field.code] ?? (user && user[field.code]) ?? ''
-                        }
-                        onChange={handleChangeInputEmail}
-                        ref={(e) => {
-                          emailInput.current = e
-                        }}
-                        autoComplete='off'
-                      />
-                    </InputGroup>
+                    ((requiredFields && requiredFields.includes(field.code)) || !requiredFields) && (
+                      <InputGroup>
+                        <p>{t(field.code.toUpperCase(), field?.name)}</p>
+                        <Input
+                          key={field.id}
+                          type={field.type}
+                          name={field.code}
+                          className='form'
+                          borderBottom
+                          disabled={!isEdit}
+                          placeholder={t(field.code.toUpperCase(), field?.name)}
+                          defaultValue={formState?.changes[field.code] ?? (user && user[field.code]) ?? ''}
+                          onChange={handleChangeInputEmail}
+                          ref={(e) => {
+                            emailInput.current = e
+                          }}
+                          autoComplete='off'
+                        />
+                      </InputGroup>
+                    )
                   ) : (
-                    <InputGroup>
-                      <p>{t(field.code.toUpperCase(), field?.name)}</p>
-                      <Input
-                        key={field.id}
-                        type={field.type}
-                        borderBottom
-                        name={field.code}
-                        className='form'
-                        disabled={!isEdit}
-                        placeholder={t(field.code.toUpperCase(), field?.name)}
-                        defaultValue={
-                          formState?.result?.result
-                            ? formState?.result?.result[field.code]
-                            : formState?.changes[field.code] ?? (user && user[field.code]) ?? ''
-                        }
-                        onChange={handleChangeInput}
-                        ref={formMethods.register({
-                          required: isRequiredField(field.code)
-                            ? t(`VALIDATION_ERROR_${field.code.toUpperCase()}_REQUIRED`, `${field?.name} is required`).replace('_attribute_', t(field?.name, field.code))
-                            : null
-                        })}
-                        autoComplete='off'
-                      />
-                    </InputGroup>
+                    ((requiredFields && requiredFields.includes(field.code)) || !requiredFields) && (
+                      <InputGroup>
+                        <p>{t(field.code.toUpperCase(), field?.name)}</p>
+                        <Input
+                          key={field.id}
+                          type={field.type}
+                          borderBottom
+                          name={field.code}
+                          className='form'
+                          disabled={!isEdit}
+                          placeholder={t(field.code.toUpperCase(), field?.name)}
+                          defaultValue={formState?.changes[field.code] ?? (user && user[field.code]) ?? ''}
+                          onChange={handleChangeInput}
+                          ref={formMethods.register({
+                            required: isRequiredField(field.code)
+                              ? t(`VALIDATION_ERROR_${field.code.toUpperCase()}_REQUIRED`, `${field?.name} is required`).replace('_attribute_', t(field?.name, field.code))
+                              : null
+                          })}
+                          autoComplete='off'
+                        />
+                      </InputGroup>
+                    )
                   )}
-
                 </React.Fragment>
               )
             )}
-            {!!showInputPhoneNumber && (
+            {!!showInputPhoneNumber && showCustomerCellphone && ((requiredFields && requiredFields.includes('cellphone')) || !requiredFields) && (
               <InputPhoneNumberWrapper>
                 <p>{t('PHONE', 'Phone')}</p>
                 <InputPhoneNumber
@@ -315,7 +336,7 @@ export const UserFormDetailsUI = (props) => {
                 />
               </InputPhoneNumberWrapper>
             )}
-            {!isCheckout && (
+            {!isCheckout && showCustomerPassword && !requiredFields && (
               <InputGroup>
                 <p>{t('PASSWORD', 'Password')}</p>
                 <Input
@@ -338,7 +359,7 @@ export const UserFormDetailsUI = (props) => {
                 />
               </InputGroup>
             )}
-            {!isCheckout && (
+            {!isCheckout && showCustomerPromotions && (
               <PromotionsWrapper>
                 <Checkbox
                   name='promotions'
@@ -357,11 +378,15 @@ export const UserFormDetailsUI = (props) => {
                 </label>
               </PromotionsWrapper>
             )}
-            <Divider />
-            <LanguageSelectorWrapper>
-              <p>{t('LANGUAGE', 'Language')}</p>
-              <LanguageSelector />
-            </LanguageSelectorWrapper>
+            {showLangauges && !requiredFields && (
+              <>
+                <Divider />
+                <LanguageSelectorWrapper>
+                  <p>{t('LANGUAGE', 'Language')}</p>
+                  <LanguageSelector />
+                </LanguageSelectorWrapper>
+              </>
+            )}
             {
               props.afterMidElements?.map((MidElement, i) => (
                 <React.Fragment key={i}>
@@ -373,7 +398,17 @@ export const UserFormDetailsUI = (props) => {
                 <MidComponent key={i} {...props} />))
             }
             <ActionsForm>
-              {((formState && Object.keys(formState?.changes).length > 0 && isEdit) || formState?.loading) && (
+              {onCancel && isOldLayout && (
+                <Button
+                  outline
+                  type='button'
+                  onClick={() => onCancel(false)}
+                  disabled={formState.loading}
+                >
+                  {t('CANCEL', 'Cancel')}
+                </Button>
+              )}
+              {!requiredFields && ((formState && Object.keys(formState?.changes).length > 0 && isEdit) || formState?.loading) && (
                 <Button
                   id='form-btn'
                   color='primary'
@@ -383,6 +418,16 @@ export const UserFormDetailsUI = (props) => {
                   {formState.loading ? t('UPDATING', 'Updating...') : t('UPDATE', 'Update')}
                 </Button>
               )}
+              {requiredFields && (
+                <Button
+                  id='form-btn'
+                  color='primary'
+                  type='submit'
+                  disabled={formState.loading}
+                >
+                  {formState.loading ? t('UPDATING', 'Updating...') : t('CONTINUE', 'Continue')}
+                </Button>
+              )}
             </ActionsForm>
           </>
         ) : (

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

@@ -1,5 +1,5 @@
 import React, { useRef, useEffect } from 'react'
-import { useLanguage, useSession, LogoutAction as LogoutActionController, useEvent, useCustomer, useConfig } from 'ordering-components-external'
+import { useLanguage, useSession, LogoutAction as LogoutActionController, useEvent, useCustomer, useConfig, useOrderingTheme } from 'ordering-components-external'
 import { usePopper } from 'react-popper'
 import {
   HeaderItem,
@@ -16,11 +16,11 @@ import { DropDownCircleImage } from '../../../../../components/Dropdown/style'
 import FaUserAlt from '@meronex/icons/fa/FaUserAlt'
 import { capitalize } from '../../../../../utils'
 import AiOutlineMenu from '@meronex/icons/ai/AiOutlineMenu'
-import { useTheme } from 'styled-components'
 
 const optionsDefault = [
-  { name: 'search', pathname: '/explore', displayName: 'explore', key: 'explore' },
-  { name: 'orders', pathname: '/profile/orders', displayName: 'orders', key: 'orders' }
+  { name: 'search', pathname: '/explore', displayName: 'My home', key: 'my_home' },
+  { name: 'business_search', pathname: '/business_search', displayName: 'Browse & Search', key: 'browse_search' },
+  { name: 'orders', pathname: '/profile/orders', displayName: 'orders', key: 'orders' },
 ]
 
 export const UserPopover = (props) => {
@@ -35,14 +35,14 @@ export const UserPopover = (props) => {
   const [, t] = useLanguage()
   const [events] = useEvent()
   const [{ configs }] = useConfig()
-  const theme = useTheme()
+  const [orderingTheme] = useOrderingTheme()
   const referenceElement = useRef()
   const popperElement = useRef()
   const arrowElement = useRef()
 
   const isWalletEnabled = configs?.cash_wallet?.value && configs?.wallet_enabled?.value === '1' && (configs?.wallet_cash_enabled?.value === '1' || configs?.wallet_credit_point_enabled?.value === '1')
   const isPromotionsEnabled = configs?.advanced_offers_module?.value === '1' || configs?.advanced_offers_module?.value === true
-  const isAddressListNewPage = theme.layouts?.profile?.components?.address_list?.components?.layout?.position === 'new_page'
+  const isAddressListNewPage = orderingTheme?.theme?.profile?.components?.address_list?.components?.layout?.position === 'new_page'
 
   const extraOptions = [
     { name: 'profile', pathname: '/profile', displayName: 'view account', key: 'view_account', isActive: true },

package/src/themes/five/src/components/UserProfileForm/ProfileOptions/index.js

@@ -3,12 +3,16 @@ import { FlexTabs } from './styles'
 import { Tabs, Tab } from '../../../styles/Tabs'
 import BsPerson from '@meronex/icons/bs/BsPerson'
 import AiOutlineUnorderedList from '@meronex/icons/ai/AiOutlineUnorderedList'
-import { useEvent, useLanguage } from 'ordering-components-external'
+import FaAddressBook from '@meronex/icons/fa/FaAddressBook'
+import { useEvent, useLanguage, useOrderingTheme } from 'ordering-components-external'
 
 export const ProfileOptions = ({ value }) => {
   const [tabValue] = useState(value)
   const [, t] = useLanguage()
   const [events] = useEvent()
+  const [orderingTheme] = useOrderingTheme()
+
+  const showAddressListTab = orderingTheme?.theme?.profile?.components?.address_list?.components?.layout?.position === 'new_page'
 
   const handleGoToPage = (data) => {
     events.emit('go_to_page', data)
@@ -22,6 +26,13 @@ export const ProfileOptions = ({ value }) => {
             <BsPerson /> {t('MY_ACCOUNT', 'My Account')}
           </a>
         </Tab>
+        {showAddressListTab && (
+          <Tab active={tabValue === 'addresses'}>
+            <a onClick={() => handleGoToPage({ page: 'addresses' })}>
+              <FaAddressBook /> {t('MY_ADDRESSES', 'My Addresses')}
+            </a>
+          </Tab>
+        )}
         <Tab active={tabValue === 'orders'}>
           <a onClick={() => handleGoToPage({ page: 'orders' })}>
             <AiOutlineUnorderedList /> {t('MY_ORDERS', 'My orders')}

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

@@ -5,20 +5,23 @@ import {
   useLanguage,
   useSession,
   DragAndDrop,
-  ExamineClick
+  ExamineClick,
+  useOrderingTheme
 } from 'ordering-components-external'
 
 import { UserFormDetailsUI } from '../UserFormDetails'
+import { UserFormDetailsUI as UserFormDetailsOldUI } from '../../../../../components/UserFormDetails'
+import { Modal } from '../Modal'
+import { VerifyCodeForm } from '../VerifyCodeForm'
+import { useCountdownTimer } from '../../../../../hooks/useCountdownTimer'
 import { AddressList } from '../AddressList'
 import { Alert } from '../Confirm'
 
 import { ProfileOptions } from './ProfileOptions'
-
 import { bytesConverter } from '../../../../../utils'
-
 import FiCamera from '@meronex/icons/fi/FiCamera'
 import BiImage from '@meronex/icons/bi/BiImage'
-
+import { useTheme } from 'styled-components'
 import {
   Container,
   UserProfileContainer,
@@ -26,7 +29,6 @@ import {
   Image,
   SideForm,
   Camera,
-  UserData,
   SavedPlaces,
   UploadImageIcon,
   SkeletonWrapper,
@@ -41,15 +43,26 @@ const UserProfileFormUI = (props) => {
     formState,
     cleanFormState,
     toggleIsEdit,
-    isHiddenAddress
+    isHiddenAddress,
+    handleSendVerifyCode,
+    verifyPhoneState,
+    setFormState
   } = props
 
   const [, t] = useLanguage()
+  const theme = useTheme()
   const [{ user }] = useSession()
-  const [edit, setEdit] = useState(false)
+  const [orderingTheme] = useOrderingTheme()
+  const [willVerifyOtpState, setWillVerifyOtpState] = useState(false)
+  const [otpLeftTime, , resetOtpLeftTime] = useCountdownTimer(
+    600, willVerifyOtpState)
   const [alertState, setAlertState] = useState({ open: false, content: [] })
   const inputRef = useRef(null)
 
+  const showCustomerPicture = !orderingTheme?.theme?.profile?.components?.picture?.hidden
+  const showAddressList = !orderingTheme?.theme?.profile?.components?.address_list?.hidden
+  const userFormLayoutRow = orderingTheme?.theme?.profile?.components?.layout?.position === 'row'
+
   const handleFiles = (files) => {
     if (files.length === 1) {
       const type = files[0].type.split('/')[0]
@@ -73,7 +86,6 @@ const UserProfileFormUI = (props) => {
   }
 
   const toggleEditState = (val) => {
-    setEdit(val)
     toggleIsEdit()
     if (!val) {
       cleanFormState({ changes: {} })
@@ -91,6 +103,19 @@ const UserProfileFormUI = (props) => {
     })
   }
 
+  const handleSendOtp = () => {
+    if (willVerifyOtpState && formState?.changes?.cellphone && formState?.changes?.country_phone_code) {
+      const { cellphone, country_phone_code: countryPhoneCode } = formState?.changes
+
+      resetOtpLeftTime()
+
+      handleSendVerifyCode({
+        cellphone: cellphone,
+        country_phone_code: countryPhoneCode
+      })
+    }
+  }
+
   useEffect(() => {
     if (formState.changes?.photo) {
       const isImage = true
@@ -98,10 +123,43 @@ const UserProfileFormUI = (props) => {
     }
   }, [formState.changes?.photo])
 
+  useEffect(() => {
+    if (verifyPhoneState?.result?.error) {
+      setAlertState({
+        open: true,
+        content: verifyPhoneState?.result?.result || [t('ERROR', 'Error')]
+      })
+    } else { resetOtpLeftTime() }
+  }, [verifyPhoneState?.result?.result])
+
   useEffect(() => {
     toggleIsEdit()
   }, [])
 
+  useEffect(() => {
+    handleSendOtp()
+  }, [willVerifyOtpState])
+
+  useEffect(() => {
+    if (otpLeftTime === 0) {
+      setAlertState({
+        open: true,
+        content: t('TIME_IS_UP_PLEASE_RESEND_CODE', 'Time is up. Please resend code again')
+      })
+    }
+  }, [otpLeftTime])
+
+  const handleSendPhoneCode = (values) => {
+    setWillVerifyOtpState(false)
+    setFormState({
+      ...formState,
+      changes: {
+        ...formState?.changes,
+        verification_code: values?.code
+      }
+    })
+  }
+
   return (
     <>
       {props.beforeElements?.map((BeforeElement, i) => (
@@ -115,44 +173,62 @@ const UserProfileFormUI = (props) => {
       )}
       <Container>
         <UserProfileContainer mbottom={isHiddenAddress && 25}>
-          <UserImage className='user-image'>
-            <Image onClick={() => handleClickImage()} isImage={user?.photo || (formState?.changes?.photo && !formState.result.error)}>
-              <ExamineClick onFiles={handleFiles} childRef={(e) => { inputRef.current = e }} accept='image/png, image/jpeg, image/jpg' disabled={formState.loading}>
-                <DragAndDrop onDrop={dataTransfer => handleFiles(dataTransfer.files)} accept='image/png, image/jpeg, image/jpg' disabled={formState.loading}>
-                  {formState.changes?.photo && formState.loading
-                    ? (<SkeletonWrapper><Skeleton /></SkeletonWrapper>)
-                    : ((!formState.changes?.photo || formState.result?.result === 'Network Error' || formState.result.error)
-                      ? user?.photo
-                        ? (<img src={user?.photo} alt='user image' width='200px' height='200px' loading='lazy' />)
-                        : (
-                          <UploadImageIcon>
-                            <BiImage />
-                            <span>{t('DRAG_DROP_IMAGE_HERE', 'Put your image here')}</span>
-                          </UploadImageIcon>
+          {showCustomerPicture && (
+            <UserImage className='user-image'>
+              <Image onClick={() => handleClickImage()} isImage={user?.photo || (formState?.changes?.photo && !formState.result.error)}>
+                <ExamineClick onFiles={handleFiles} childRef={(e) => { inputRef.current = e }} accept='image/png, image/jpeg, image/jpg' disabled={formState.loading}>
+                  <DragAndDrop onDrop={dataTransfer => handleFiles(dataTransfer.files)} accept='image/png, image/jpeg, image/jpg' disabled={formState.loading}>
+                    {formState.changes?.photo && formState.loading
+                      ? (<SkeletonWrapper><Skeleton /></SkeletonWrapper>)
+                      : ((!formState.changes?.photo || formState.result?.result === 'Network Error' || formState.result.error)
+                        ? user?.photo
+                          ? (<img src={user?.photo} alt='user image' width='200px' height='200px' loading='lazy' />)
+                          : (
+                            <UploadImageIcon>
+                              <BiImage />
+                              <span>{t('DRAG_DROP_IMAGE_HERE', 'Put your image here')}</span>
+                            </UploadImageIcon>
+                          )
+                        : formState?.changes?.photo && formState.result.error &&
+                        (
+                          <img
+                            src={formState?.changes?.photo}
+                            alt='user image'
+                            loading='lazy'
+                          />
                         )
-                      : formState?.changes?.photo && formState.result.error &&
-                        <img src={formState?.changes?.photo} alt='user image' loading='lazy' />
-                    )}
-                </DragAndDrop>
-              </ExamineClick>
-            </Image>
-            <Camera><FiCamera /></Camera>
-          </UserImage>
+                      )}
+                  </DragAndDrop>
+                </ExamineClick>
+              </Image>
+              <Camera><FiCamera /></Camera>
+            </UserImage>
+          )}
           <SideForm className='user-form'>
             <WrapperForm>
-              <UserFormDetailsUI
-                {...props}
-                onCancel={toggleEditState}
-                onCloseProfile={() => setEdit(false)}
-                isHiddenAddress={isHiddenAddress}
-              />
+              {userFormLayoutRow ? (
+                <UserFormDetailsOldUI
+                  {...props}
+                  onCancel={toggleEditState}
+                  isOriginalLayout
+                  isHiddenAddress={isHiddenAddress}
+                  isOldLayout
+                />
+              ) : (
+                <UserFormDetailsUI
+                  {...props}
+                  onCancel={toggleEditState}
+                  isHiddenAddress={isHiddenAddress}
+                  setWillVerifyOtpState={setWillVerifyOtpState}
+                />
+              )}
             </WrapperForm>
           </SideForm>
         </UserProfileContainer>
-        {(userData?.addresses || user?.addresses) && !isHiddenAddress && (
+        {(userData?.addresses || user?.addresses) && !isHiddenAddress && showAddressList && (
           <SavedPlaces>
             <h1>{t('MY_ADDRESSES', 'My Saved places')}</h1>
-            <AddressList isModal addressList={user?.addresses} />
+            <AddressList isModal addressList={user?.addresses} isProfile />
           </SavedPlaces>
         )}
       </Container>
@@ -165,6 +241,22 @@ const UserProfileFormUI = (props) => {
         onAccept={() => closeAlert()}
         closeOnBackdrop={false}
       />
+      <Modal
+        title={t('ENTER_VERIFICATION_CODE', 'Enter verification code')}
+        open={willVerifyOtpState}
+        width='700px'
+        height='420px'
+        onClose={() => setWillVerifyOtpState(false)}
+      >
+        <VerifyCodeForm
+          otpLeftTime={otpLeftTime}
+          credentials={formState?.changes}
+          handleSendOtp={handleSendOtp}
+          handleCheckPhoneCode={handleSendPhoneCode}
+          email={(userData?.email || user?.email)}
+          isPhone
+        />
+      </Modal>
       {props.afterComponents?.map((AfterComponent, i) => (
         <AfterComponent key={i} {...props} />))}
       {props.afterElements?.map((AfterElement, i) => (

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

@@ -0,0 +1,64 @@
+import React, { useState, useEffect } from 'react'
+import { useLanguage } from 'ordering-components-external'
+import OtpInput from 'react-otp-input'
+import { Button } from '../../styles/Buttons'
+import { formatSeconds } from '../../../../../utils'
+
+import {
+  Container,
+  OtpWrapper,
+  DownTimer
+} from './styles'
+
+export const VerifyCodeForm = (props) => {
+  const {
+    otpLeftTime,
+    handleSendOtp,
+    handleCheckPhoneCode,
+    credentials,
+    email,
+    isPhone
+  } = props
+
+  const [, t] = useLanguage()
+  const [otpState, setOtpState] = useState('')
+
+  const numOtpInputs = 4
+
+  useEffect(() => {
+    if (otpState?.length === numOtpInputs) {
+      const { cellphone, country_phone_code: countryPhoneCode } = credentials
+
+      handleCheckPhoneCode({
+        cellphone: cellphone,
+        country_phone_code: countryPhoneCode,
+        code: otpState
+      })
+    }
+  }, [otpState])
+
+  return (
+    <Container>
+      <p>{t('SENT_VERIFY_CODE_ON_EMAIL', 'We sent you a verication code on _email_').replace('_email_', isPhone ? credentials?.cellphone : email)}</p>
+      <DownTimer>{formatSeconds(otpLeftTime)}</DownTimer>
+      <OtpWrapper>
+        <OtpInput
+          value={otpState}
+          onChange={otp => setOtpState(otp)}
+          numInputs={numOtpInputs}
+          containerStyle='otp-container'
+          inputStyle='otp-input'
+          isInputNum
+          shouldAutoFocus
+        />
+      </OtpWrapper>
+      <Button
+        color='primaryContrast'
+        naked
+        onClick={handleSendOtp}
+      >
+        {t('RESEND_CODE', 'Resend code')}
+      </Button>
+    </Container>
+  )
+}