ordering-ui-external 1.2.2 → 1.3.0

package/src/themes/five/src/components/SignUpDriver/layouts/NewSignUpDriver/index.js

@@ -0,0 +1,382 @@
+import React, { useState, useEffect, useRef } from 'react'
+import { useForm } from 'react-hook-form'
+import Skeleton from 'react-loading-skeleton'
+import { Alert } from '../../../Confirm'
+import { InputPhoneNumber } from '../../../../../../../components/InputPhoneNumber'
+import parsePhoneNumber from 'libphonenumber-js'
+import { useTheme } from 'styled-components'
+import { Input } from '../../../../styles/Inputs'
+import { Button } from '../../../../styles/Buttons'
+import { Checkbox } from '../../../../../../../styles/Checkbox'
+import { sortInputFields } from '../../../../../../../utils'
+
+import AiOutlineEye from '@meronex/icons/ai/AiOutlineEye'
+import AiOutlineEyeInvisible from '@meronex/icons/ai/AiOutlineEyeInvisible'
+
+import {
+  SignupForm as SignUpController,
+  useLanguage,
+  useConfig,
+  ReCaptcha
+} from 'ordering-components-external'
+
+import {
+  SignUpDriverContainer,
+  SignupDescriptionContainer,
+  SignupDescriptionTitle,
+  SignupDescriptionContent,
+  SignUpTitle,
+  FormInput,
+  WrapperPassword,
+  TogglePassword,
+  ReCaptchaWrapper,
+  TermsConditionWrapper,
+  SkeletonWrapper,
+  FormSide,
+  PhoneNumberWrapper
+} from './styles'
+
+const notValidationFields = ['coupon', 'driver_tip', 'mobile_phone', 'address', 'address_notes']
+
+const SignUpDriverUI = (props) => {
+  const {
+    handleChangeInput,
+    handleButtonSignupClick,
+    handleReCaptcha,
+    useChekoutFileds,
+    validationFields,
+    showField,
+    isRequiredField,
+    formState,
+    handleSuccessSignup,
+    isPopup,
+    externalPhoneNumber,
+    saveCustomerUser,
+    fieldsNotValid,
+    signupData,
+    enableReCaptcha
+  } = props
+
+  const theme = useTheme()
+  const [, t] = useLanguage()
+  const [{ configs }] = useConfig()
+  const formMethods = useForm()
+  const [alertState, setAlertState] = useState({ open: false, content: [] })
+  const emailInput = useRef(null)
+
+  const [userPhoneNumber, setUserPhoneNumber] = useState('')
+  const [isValidPhoneNumber, setIsValidPhoneNumber] = useState(null)
+  const [passwordSee, setPasswordSee] = useState(false)
+
+  const showInputPhoneNumber = (validationFields?.fields?.checkout?.cellphone?.enabled ?? false) || configs?.verification_phone_required?.value === '1'
+
+  const togglePasswordView = () => {
+    setPasswordSee(!passwordSee)
+  }
+
+  const closeAlert = () => {
+    setAlertState({
+      open: false,
+      content: []
+    })
+  }
+
+  const onSubmit = () => {
+    const isPhoneNumberValid = userPhoneNumber ? isValidPhoneNumber : true
+    if (!userPhoneNumber &&
+      ((validationFields?.fields?.checkout?.cellphone?.enabled &&
+        validationFields?.fields?.checkout?.cellphone?.required) ||
+        configs?.verification_phone_required?.value === '1')
+    ) {
+      setAlertState({
+        open: true,
+        content: [t('VALIDATION_ERROR_MOBILE_PHONE_REQUIRED', 'The field Mobile phone is required.')]
+      })
+      return
+    }
+    if (!isPhoneNumberValid) {
+      setAlertState({
+        open: true,
+        content: [t('INVALID_ERROR_PHONE_NUMBER', 'The Phone Number field is invalid')]
+      })
+      return
+    }
+    handleButtonSignupClick && handleButtonSignupClick()
+    if (!formState.loading && formState.result.result && !formState.result.error) {
+      handleSuccessSignup(formState.result.result)
+    }
+  }
+
+  const handleChangePhoneNumber = (number, isValid) => {
+    setUserPhoneNumber(number)
+
+    let phoneNumberParser = null
+    let phoneNumber = {
+      country_phone_code: {
+        name: 'country_phone_code',
+        value: ''
+      },
+      cellphone: {
+        name: 'cellphone',
+        value: ''
+      }
+    }
+    if (isValid) {
+      phoneNumberParser = parsePhoneNumber(number)
+    }
+    if (phoneNumberParser) {
+      phoneNumber = {
+        country_phone_code: {
+          name: 'country_phone_code',
+          value: phoneNumberParser.countryCallingCode
+        },
+        cellphone: {
+          name: 'cellphone',
+          value: phoneNumberParser.nationalNumber
+        }
+      }
+    }
+    handleChangeInput(phoneNumber, true)
+  }
+
+  const handleChangeInputEmail = (e) => {
+    handleChangeInput({ target: { name: 'email', value: e.target.value.toLowerCase().replace(/[&,()%";:ç?<>{}\\[\]\s]/g, '') } })
+    formMethods.setValue('email', e.target.value.toLowerCase().replace(/[&,()%";:ç?<>{}\\[\]\s]/g, ''))
+    if (emailInput?.current) {
+      emailInput.current.value = e.target.value.toLowerCase().replace(/[&,()%";:ç?<>{}\\[\]\s]/g, '')
+    }
+  }
+
+  useEffect(() => {
+    if (!formState.loading && formState.result?.error) {
+      setAlertState({
+        open: true,
+        content: formState.result?.result || [t('ERROR', 'Error')]
+      })
+    } else if (!formState.loading && !formState.result?.error && formState.result?.result) {
+      saveCustomerUser && saveCustomerUser(formState.result?.result)
+    }
+  }, [formState])
+
+  useEffect(() => {
+    if (Object.keys(formMethods.errors).length > 0) {
+      setAlertState({
+        open: true,
+        content: Object.values(formMethods.errors).map(error => error.message)
+      })
+    }
+  }, [formMethods.errors])
+
+  useEffect(() => {
+    if (!validationFields.loading) {
+      Object.values(validationFields?.fields?.checkout).map(field => !notValidationFields.includes(field.code) && (
+        field.code === 'email' ? (
+          formMethods.register('email', {
+            required: isRequiredField(field.code)
+              ? t('VALIDATION_ERROR_EMAIL_REQUIRED', 'The field Email is required').replace('_attribute_', t('EMAIL', 'Email'))
+              : null,
+            pattern: {
+              value: /^[A-Z0-9._%+-]+@[A-Z0-9.-]+\.[A-Z]{2,}$/i,
+              message: t('INVALID_ERROR_EMAIL', 'Invalid email address').replace('_attribute_', t('EMAIL', 'Email'))
+            }
+          })
+        ) : (
+          formMethods.register(field.code, {
+            required: isRequiredField(field.code)
+              ? t(`VALIDATION_ERROR_${field.code.toUpperCase()}_REQUIRED`, `${field.name} is required`).replace('_attribute_', t(field.name, field.code))
+              : null
+          })
+        )
+      ))
+    }
+  }, [formMethods])
+
+  useEffect(() => {
+    Object.keys(signupData).map(fieldName => {
+      formMethods.setValue(fieldName, signupData[fieldName])
+    })
+  }, [signupData])
+
+  useEffect(() => {
+    if (externalPhoneNumber) {
+      setUserPhoneNumber(externalPhoneNumber)
+      handleChangePhoneNumber(externalPhoneNumber, true)
+    }
+  }, [externalPhoneNumber])
+
+  useEffect(() => {
+    handleChangeInput({
+      target: {
+        name: 'level',
+        value: 4
+      }
+    })
+  }, [])
+
+  return (
+    <SignUpDriverContainer bgImage={theme.images?.general?.driverSignUpBG}>
+      <SignupDescriptionContainer>
+        <SignupDescriptionTitle>{t('JOIN_OUR_FLEET_TODAY', 'Join our fleet today')}</SignupDescriptionTitle>
+        <SignupDescriptionContent>{t('REGISTER_AS_NEW_DRIVER', 'Register as a new driver and start delivering asap. After registering, you’ll download a driver app for iOS or Android, the orders will get assigned to you, and the driver will guide you through the process.')}</SignupDescriptionContent>
+      </SignupDescriptionContainer>
+      <FormSide>
+        <SignUpTitle>{t('SIGN_UP_NOW', 'Sign up now')}</SignUpTitle>
+        <FormInput
+          noValidate
+          isPopup={isPopup}
+          onSubmit={formMethods.handleSubmit(onSubmit)}
+          isSkeleton={useChekoutFileds && validationFields?.loading}
+        >
+          {props.beforeMidElements?.map((BeforeMidElements, i) => (
+            <React.Fragment key={i}>
+              {BeforeMidElements}
+            </React.Fragment>))}
+          {props.beforeMidComponents?.map((BeforeMidComponents, i) => (
+            <BeforeMidComponents key={i} {...props} />))}
+          {
+            !(useChekoutFileds && validationFields?.loading) ? (
+              <>
+                {validationFields?.fields?.checkout &&
+                  sortInputFields({ values: validationFields?.fields?.checkout }).map(field =>
+                    showField && showField(field.code) && (
+                      <React.Fragment key={field.id}>
+                        {field.code === 'email' ? (
+                          <Input
+                            type={field.type}
+                            name={field.code}
+                            aria-label={field.code}
+                            className='form'
+                            placeholder={t(field.code.toUpperCase(), field.name)}
+                            onChange={handleChangeInputEmail}
+                            ref={(e) => {
+                              emailInput.current = e
+                            }}
+                            required={!!field.required}
+                            autoComplete='off'
+                          />
+                        ) : (
+                          <Input
+                            type={field.type}
+                            name={field.code}
+                            aria-label={field.code}
+                            className='form'
+                            placeholder={t(field.code.toUpperCase(), field.name)}
+                            onChange={handleChangeInput}
+                            required={field.required}
+                            autoComplete='off'
+                          />
+                        )}
+                      </React.Fragment>
+                    )
+                  )}
+                {!!showInputPhoneNumber && (
+                  <PhoneNumberWrapper className='formStyle'>
+                    <InputPhoneNumber
+                      value={userPhoneNumber}
+                      setValue={handleChangePhoneNumber}
+                      handleIsValid={setIsValidPhoneNumber}
+                    />
+                  </PhoneNumberWrapper>
+                )}
+
+                {(!fieldsNotValid || (fieldsNotValid && !fieldsNotValid.includes('password'))) && (
+                  <WrapperPassword className='formStyle'>
+                    <Input
+                      type={!passwordSee ? 'password' : 'text'}
+                      name='password'
+                      aria-label='password'
+                      className='form'
+                      placeholder={t('PASSWORD', 'Password')}
+                      onChange={handleChangeInput}
+                      required
+                      ref={formMethods.register({
+                        required: isRequiredField('password') ? t('VALIDATION_ERROR_PASSWORD_REQUIRED', 'The field Password is required').replace('_attribute_', t('PASSWORD', 'password')) : null,
+                        minLength: {
+                          value: 8,
+                          message: t('VALIDATION_ERROR_PASSWORD_MIN_STRING', 'The Password must be at least 8 characters.').replace('_attribute_', t('PASSWORD', 'Password')).replace('_min_', 8)
+                        }
+                      })}
+                    />
+                    <TogglePassword onClick={togglePasswordView}>
+                      {!passwordSee ? <AiOutlineEye /> : <AiOutlineEyeInvisible />}
+                    </TogglePassword>
+                  </WrapperPassword>
+                )}
+
+                {props.afterMidElements?.map((MidElement, i) => (
+                  <React.Fragment key={i}>
+                    {MidElement}
+                  </React.Fragment>))}
+                {props.afterMidComponents?.map((MidComponent, i) => (
+                  <MidComponent key={i} {...props} />))}
+              </>
+            ) : (
+              <>
+                {[...Array(5)].map((_, i) => (
+                  <SkeletonWrapper key={i}>
+                    <Skeleton height={43} />
+                  </SkeletonWrapper>
+                ))}
+              </>
+            )
+          }
+          {props.isRecaptchaEnable && enableReCaptcha && (
+            <ReCaptchaWrapper>
+              <ReCaptcha handleReCaptcha={handleReCaptcha} />
+            </ReCaptchaWrapper>
+          )}
+
+          {configs?.terms_and_conditions?.value === 'true' && (
+            <TermsConditionWrapper>
+              <Checkbox
+                name='acceptTerms'
+                ref={formMethods.register({
+                  required: t('ERROR_ACCEPT_TERMS', 'You must accept the Terms & Conditions.')
+                })}
+                id='acceptTerms'
+              />
+              <label
+                htmlFor='acceptTerms'
+              >
+                <span>{t('TERMS_AND_CONDITIONS_TEXT', 'I’m agree with')}</span>
+                <a
+                  href={configs?.terms_and_conditions_url?.value}
+                  target='_blank'
+                  rel='noopener noreferrer'
+                >
+                  {t('TERMS_AND_CONDITIONS', 'Terms & Conditions')}
+                </a>
+              </label>
+            </TermsConditionWrapper>
+          )}
+
+          <Button
+            color='primary'
+            type='submit'
+            className='formButton'
+            disabled={formState.loading || validationFields?.loading}
+          >
+            {formState.loading ? `${t('LOADING', 'Loading')}...` : t('SUBMIT', 'Submit')}
+          </Button>
+        </FormInput>
+      </FormSide>
+      <Alert
+        title={t('SIGN_UP_FOR_BUSINESS', 'Sign up for business')}
+        content={alertState.content}
+        acceptText={t('ACCEPT', 'Accept')}
+        open={alertState.open}
+        onClose={() => closeAlert()}
+        onAccept={() => closeAlert()}
+        closeOnBackdrop={false}
+      />
+    </SignUpDriverContainer>
+  )
+}
+
+export const SignUpDriver = (props) => {
+  const signUpDriverProps = {
+    ...props,
+    UIComponent: SignUpDriverUI
+  }
+  return <SignUpController {...signUpDriverProps} />
+}

package/src/themes/five/src/components/SignUpDriver/layouts/NewSignUpDriver/styles.js

@@ -0,0 +1,262 @@
+import styled, { css } from 'styled-components'
+
+export const SignUpDriverContainer = styled.div`
+  ${({ bgImage }) => bgImage && css`
+    background-image: url(${bgImage});
+    background-repeat: no-repeat;
+    background-size: cover;
+    object-fit: cover;
+    background-position: center;
+  `}
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  flex-direction: column-reverse;
+  padding: 25px 30px 30px;
+
+  > div {
+    width: 100%;
+    max-width: 580px;
+    box-sizing: border-box;
+  }
+
+  @media (min-width: 993px) {
+    flex-direction: row;
+    align-items: center;
+    padding: 120px 130px;
+    > div {
+      width: calc(50% - 12px);
+    }
+  }
+`
+export const SignupDescriptionContainer = styled.div`
+  margin-right: 0;
+  margin-top: 45px;
+
+  @media (min-width: 993px) {
+    margin-right: 24px;
+    margin-top: 0;
+  }
+`
+
+export const SignupDescriptionTitle = styled.div`
+  font-style: normal;
+  font-weight: 600;
+  font-size: 28px;
+  line-height: 60px;
+  color: ${props => props.theme.colors.colorTextSignForm};
+
+  @media (min-width: 430px) {
+    font-size: 37px;
+  }
+
+  @media (min-width: 1275px) {
+    font-size: 48px;
+  }
+`
+
+export const SignupDescriptionContent = styled.div`
+  margin-top: 0;
+  font-style: normal;
+  font-weight: 400;
+  font-size: 16px;
+  line-height: 36px;
+  color: ${props => props.theme.colors.colorTextSignForm};
+
+  @media (min-width: 430px) {
+    font-size: 20px;
+  }
+
+  @media (min-width: 993px) {
+    margin-top: 15px;
+  }
+
+  @media (min-width: 1275px) {
+    font-size: 24px;
+  }
+`
+
+export const FormInput = styled.form`
+  width: 100%;
+  display: flex;
+  flex-direction: column;
+
+  div.phone_number {
+    margin: 10px 0px;
+    width: 100%;
+  }
+
+  input.form:not(:last-child) {
+    margin: 10px 0px;
+    padding: 8px 20px;
+  }
+
+  button {
+    margin-top: 10px;
+    padding: 5px;
+  }
+
+  > input {
+    font-size: 20px;
+    box-shadow: 0px 8px 35px rgba(0, 0, 0, 0.16);
+  }
+  
+  > .formStyle {
+    & > .phone_number {
+      border-radius: 7.6px;
+      font-size: 20px;
+      box-shadow: 0px 8px 35px rgba(0, 0, 0, 0.16);
+    }
+    & > input {
+      border-radius: 7.6px;
+      font-size: 20px;
+      box-shadow: 0px 8px 35px rgba(0, 0, 0, 0.16);
+    }
+  }
+
+  > .formButton {
+    width: 128px;
+    padding: 15px 0;
+    font-style: normal;
+    font-weight: 600;
+    font-size: 24px;
+    line-height: 30px;
+  }
+`
+
+export const PhoneNumberWrapper = styled.div`
+  .PhoneInput {
+    border: 1px solid #DEE2E6;
+    box-sizing: border-box;
+    border-radius: 7.6px;
+    background: white;
+
+    .PhoneInputCountry {
+      padding-left: 20px;
+      ${props => props.theme.rtl && css`
+        padding-left: 0;
+        padding-right: 20px;
+      `}
+    }
+
+    input {
+      border: none;
+    }
+  }
+`
+
+export const ReCaptchaWrapper = styled.div`
+  margin: 12px auto;
+`
+
+export const WrapperPassword = styled.div`
+  position: relative;
+  width: 100%;
+  input{
+    box-sizing: border-box;
+    width: 100%;
+    padding-right: 40px;
+  }
+`
+
+export const TogglePassword = styled.span`
+  position: absolute;
+  font-weight: 300;
+  padding: 10px 0;
+  color: #333;
+  font-size: 26px;
+  transform: translate(-150%, 10%);
+  max-height: 100%;
+  ${props => props.theme?.rtl && css`
+    transform: translate(150%, 10%);
+  `}
+  span{
+    cursor: pointer;
+  }
+`
+
+export const TermsConditionWrapper = styled.div`
+  display: flex;
+  align-items: center;
+  margin: 10px 0;
+
+  > label {
+    font-size: 14px;
+    ${props => props.theme?.rtl ? css`
+      margin-right: 20px;
+    ` : css`
+      margin-left: 20px;
+    `}
+
+    > span:first-child {
+      font-weight: 500;
+      ${props => props.theme?.rtl ? css`
+        margin-left: 7px;
+      ` : css`
+        margin-right: 7px;
+      `}
+    }
+
+    > a {
+      color: ${props => props.theme.colors.primary} !important;
+    }
+  }
+
+  @media (min-width: 768px) {
+    > label {
+      font-size: 16px;
+    }
+  }
+`
+
+export const SkeletonWrapper = styled.div`
+  span{
+    margin: 10px 0;
+    border-radius: 7.6px;
+  }
+`
+
+export const FormSide = styled.div`
+  background-color: ${props => props.theme.colors.colorTextSignForm};
+  box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
+  border-radius: 31px;
+  display: flex;
+  width: 100%;
+  flex-direction: column;
+  align-items: center;
+  margin: auto;
+  padding: 25px 30px 25px;
+
+  > h1 {
+    width: 100%;
+    margin-bottom: 25px;
+    margin-top: 15;
+    font-weight: 500;
+    font-size: 24px;
+  }
+
+  @media (min-width: 769px) {
+    padding: 42px 58px 65px;
+    ${({ isPopup }) => isPopup && css`
+      margin: 20px 0px;
+    `}
+  }
+
+  @media (min-width: 992px) {
+    width: 45%;
+    font-size: ${({ isPopup }) => isPopup ? '12px' : '1em'};
+  }
+
+  @media (min-width: 1200px){
+    font-size: ${({ isPopup }) => isPopup ? '0.9em' : '1em'};
+  }
+`
+export const SignUpTitle = styled.h1`
+  margin-top: 0;
+  margin-bottom: 10px !important;
+  font-style: normal;
+  font-weight: 600;
+  font-size: 36px;
+  line-height: 65px;
+  color: ${props => props.theme.colors.black};
+`