ordering-ui-external 14.1.43 → 14.1.45

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

@@ -4,7 +4,7 @@ import PhoneInput from 'react-phone-number-input'
 import BsPhone from '@meronex/icons/bs/BsPhone'
 import { useLanguage, useConfig, useSession } from 'ordering-components-external'
 
-import { Container, ErrorMsg, InputBeforeIconWrapper } from './styles'
+import { Container, ErrorMsg, InputBeforeIconWrapper, ContainerUserForm } from './styles'
 
 export const InputPhoneNumber = (props) => {
   const {
@@ -13,7 +13,8 @@ export const InputPhoneNumber = (props) => {
     setValue,
     handleIsValid,
     disabled,
-    isError
+    isError,
+    useProfileFormStyle
   } = props
 
   const [, t] = useLanguage()
@@ -21,6 +22,7 @@ export const InputPhoneNumber = (props) => {
   const [{ configs }] = useConfig()
 
   const phoneRef = useRef(null)
+  const codesStartsWithZero = ['44']
 
   const isValidPhoneNumber = (number) => {
     if (!number) return
@@ -28,9 +30,43 @@ export const InputPhoneNumber = (props) => {
       return true
     }
     const numberParser = parsePhoneNumber(number)
-    return numberParser?.isValid()
+    let enableIspossibly = false
+    if (codesStartsWithZero.includes(numberParser?.countryCallingCode)) {
+      const inputNumber = returnRawNumber(number)
+      const validationsForUK = ['01', '02', '07', '0800', '0808', '0845', '0870', '0871']
+      const result = validationsForUK.some(areaCode => inputNumber?.number?.startsWith(areaCode))
+      enableIspossibly = result
+    }
+
+    return enableIspossibly ? numberParser?.isPossible?.() : numberParser?.isValid?.()
+  }
+
+  const returnRawNumber = (number) => {
+    if (!number) return null
+    if (!parseInt(configs?.validation_phone_number_lib?.value ?? 1, 10)) {
+      return null
+    }
+    const numberParser = parsePhoneNumber(number)
+    const validations = ['0', '+']
+    if (validations.includes(phoneRef?.current?.value[0]) && codesStartsWithZero.includes(numberParser?.countryCallingCode)) {
+      const numberInput = phoneRef?.current?.value.replace('-', '')
+      let numberRaw = ''
+      numberInput?.split(' ')?.filter((_splited, i) => i > 0 || (i === 0 && _splited[0] === '0'))?.map(splited => {
+        numberRaw = `${numberRaw}${splited}`
+        return numberRaw
+      })
+
+      return {
+        number: numberRaw,
+        countryCallingCode: numberParser?.countryCallingCode ? `+${numberParser?.countryCallingCode}` : null
+      }
+    }
+
+    return number
   }
 
+  const ContainerStyled = useProfileFormStyle ? ContainerUserForm : Container
+
   useEffect(() => {
     if (value) {
       handleIsValid && handleIsValid(isValidPhoneNumber(value))
@@ -38,10 +74,12 @@ export const InputPhoneNumber = (props) => {
   }, [value])
 
   return (
-    <Container className='phone_number' disabled={disabled} isValid={value ? isValidPhoneNumber(value) : true} isError={isError}>
-      <InputBeforeIconWrapper>
-        <BsPhone />
-      </InputBeforeIconWrapper>
+    <ContainerStyled className='phone_number' disabled={disabled} isValid={value ? isValidPhoneNumber(value) : true} isError={isError}>
+      {!useProfileFormStyle && (
+        <InputBeforeIconWrapper>
+          <BsPhone />
+        </InputBeforeIconWrapper>
+      )}
       <PhoneInput
         ref={phoneRef}
         disabled={disabled}
@@ -49,8 +87,8 @@ export const InputPhoneNumber = (props) => {
         defaultCountry={configs?.default_country_code?.value}
         value={value}
         name='telefono'
-        displayInitialValueAsLocalNumber
-        onChange={(val) => setValue && setValue(val, isValidPhoneNumber(val))}
+        initialValueFormat='national'
+        onChange={(val) => setValue && setValue(val, isValidPhoneNumber(val), returnRawNumber(val))}
       />
       {value && !isValidPhoneNumber(value) && !disabled && (
         <>
@@ -63,6 +101,6 @@ export const InputPhoneNumber = (props) => {
           )}
         </>
       )}
-    </Container>
+    </ContainerStyled>
   )
 }

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

@@ -178,3 +178,147 @@ export const InputBeforeIconWrapper = styled.div`
     font-size: 16px;
   }
 `
+
+export const ContainerUserForm = styled.div`
+  text-align: center;
+  select:focus {
+    outline: none;
+  }
+
+  .PhoneInput {
+    display: flex;
+    align-items: center;
+  }
+
+  .PhoneInputInput {
+    flex: 1;
+    min-width: 0;
+  }
+
+  .PhoneInputCountryIcon {
+    width: calc(1em * 1.5);
+    height: 1em;
+  }
+
+  .PhoneInputCountryIcon--square {
+    width: 1em;
+  }
+
+  .PhoneInputCountryIcon--border {
+    background-color: rgba(0,0,0,0.1);
+    box-shadow: 0 0 0 1px  rgba(0,0,0,0.5),
+    inset 0 0 0 1px  rgba(0,0,0,0.5);
+  }
+
+  .PhoneInputCountryIconImg {
+    display: block;
+    width: 100%;
+    height: 100%;
+  }
+
+  .PhoneInputInternationalIconPhone {
+    opacity: 0.8;
+  }
+
+  .PhoneInputInternationalIconGlobe {
+    opacity: 0.65;
+  }
+
+  .PhoneInputCountry {
+    position: relative;
+    align-self: stretch;
+    display: flex;
+    align-items: center;
+    margin-right: 0.35em;
+  }
+
+  .PhoneInputCountrySelect {
+    position: absolute;
+    top: 0;
+    left: 0;
+    height: 100%;
+    width: 100%;
+    z-index: 1;
+    border: 0;
+    opacity: 0;
+    cursor: pointer;
+  }
+
+  .PhoneInputCountrySelect[disabled] {
+    cursor: default;
+  }
+
+  .PhoneInputCountrySelectArrow {
+    display: block;
+    content: '';
+    width: 0.3em;
+    height: 0.3em;
+    margin-left: 0.35em;
+    border-style: solid;
+    border-color: inherit;
+    border-top-width: 0;
+    border-bottom-width: 1px;
+    border-left-width: 0;
+    border-right-width: 1px;
+    transform: rotate(45deg);
+    opacity: 0.45;
+  }
+
+  .PhoneInputCountrySelect:focus + .PhoneInputCountryIcon + .PhoneInputCountrySelectArrow {
+    opacity: 1;
+    color: #03b2cb;
+  }
+
+  .PhoneInputCountrySelect:focus + .PhoneInputCountryIcon--border {
+    box-shadow: 0 0 0 1px #03b2cb, inset 0 0 0 1px #03b2cb;
+  }
+
+  .PhoneInputCountrySelect:focus + .PhoneInputCountryIcon .PhoneInputInternationalIconGlobe {
+    opacity: 1;
+    color: #03b2cb;
+  }
+
+  .PhoneInputCountryIcon {
+    font-size: 20px;
+    background: transparent;
+    border: 0;
+    box-shadow: 0 0 black;
+    height: 30px;
+    width: 30px;
+    outline: none;
+
+    &.PhoneInputCountryIcon--border img {
+      border-radius: 10px;
+      outline: none;
+    }
+  }
+
+  ${props => props.theme?.rtl && css`
+    .PhoneInputCountrySelectArrow{
+        margin-right: 0.35em;
+    }
+  `}
+
+  input.PhoneInputInput {
+    border-radius: 30px;
+    border: 1px solid #DBDCDB;
+    font-size: 16px;
+    outline: none;
+    padding: 10px 15px;
+
+    &::placeholder {
+      color: #DBDCDB;
+      opacity: 1;
+    }
+    &:-ms-input-placeholder {
+      color: #DBDCDB;
+    }
+    &::-ms-input-placeholder {
+      color: #DBDCDB;
+    }
+
+    ${({ disabled }) => disabled && css`
+      cursor: not-allowed;
+    `}
+  }
+`

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

@@ -89,7 +89,8 @@ const LoginFormUI = (props) => {
     useLoginOtpEmail,
     useLoginOtpCellphone,
     handleLoginSpoonity,
-    useLoginSpoonity
+    useLoginSpoonity,
+    setCellphoneStartZero
   } = props
   const numOtpInputs = loginTab === 'otp' ? 6 : 4
   const [ordering, { setOrdering }] = useApi()
@@ -221,9 +222,10 @@ const LoginFormUI = (props) => {
     formMethods.setValue('email', e.target.value.toLowerCase().replace(/[&,()%";:ç?<>{}\\[\]\s]/g, ''))
   }
 
-  const handleChangePhoneNumber = (number, isValid) => {
+  const handleChangePhoneNumber = (number, isValid, rawNumber) => {
     setValidPhoneField(isValid)
     handleChangeInput({ target: { name: 'cellphone', value: number } })
+    setCellphoneStartZero && setCellphoneStartZero(rawNumber?.number && rawNumber?.countryCallingCode ? rawNumber?.number : null)
     formMethods.setValue('cellphone', number, '')
   }
 

package/src/themes/five/src/components/SignUpBusiness/layouts/NewSignUpBusiness/index.js

@@ -2,7 +2,7 @@ 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 { InputPhoneNumber } from '../../../InputPhoneNumber'
 import parsePhoneNumber from 'libphonenumber-js'
 import { useTheme } from 'styled-components'
 import { Input } from '../../../../styles/Inputs'
@@ -54,7 +54,8 @@ const SignUpBusinessUI = (props) => {
     saveCustomerUser,
     fieldsNotValid,
     signupData,
-    enableReCaptcha
+    enableReCaptcha,
+    setCellphoneStartZero
   } = props
 
   const theme = useTheme()
@@ -109,7 +110,7 @@ const SignUpBusinessUI = (props) => {
     }
   }
 
-  const handleChangePhoneNumber = (number, isValid) => {
+  const handleChangePhoneNumber = (number, isValid, rawNumber) => {
     setUserPhoneNumber(number)
 
     let phoneNumberParser = null
@@ -138,6 +139,7 @@ const SignUpBusinessUI = (props) => {
         }
       }
     }
+    setCellphoneStartZero && setCellphoneStartZero(rawNumber?.number && rawNumber?.countryCallingCode ? rawNumber?.number : null)
     handleChangeInput(phoneNumber, true)
   }
 
@@ -296,6 +298,7 @@ const SignUpBusinessUI = (props) => {
                 {!!showInputPhoneNumber && (
                   <PhoneNumberWrapper className='formStyle'>
                     <InputPhoneNumber
+                      useProfileFormStyle
                       value={userPhoneNumber}
                       setValue={handleChangePhoneNumber}
                       handleIsValid={setIsValidPhoneNumber}

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

@@ -2,7 +2,7 @@ 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 { InputPhoneNumber } from '../../../InputPhoneNumber'
 import parsePhoneNumber from 'libphonenumber-js'
 import { useTheme } from 'styled-components'
 import { Input } from '../../../../styles/Inputs'
@@ -55,7 +55,8 @@ const SignUpDriverUI = (props) => {
     fieldsNotValid,
     signupData,
     enableReCaptcha,
-    isDriverSignup
+    isDriverSignup,
+    setCellphoneStartZero
   } = props
 
   const theme = useTheme()
@@ -110,7 +111,7 @@ const SignUpDriverUI = (props) => {
     }
   }
 
-  const handleChangePhoneNumber = (number, isValid) => {
+  const handleChangePhoneNumber = (number, isValid, rawNumber) => {
     setUserPhoneNumber(number)
 
     let phoneNumberParser = null
@@ -139,6 +140,7 @@ const SignUpDriverUI = (props) => {
         }
       }
     }
+    setCellphoneStartZero && setCellphoneStartZero(rawNumber?.number && rawNumber?.countryCallingCode ? rawNumber?.number : null)
     handleChangeInput(phoneNumber, true)
   }
 
@@ -297,6 +299,7 @@ const SignUpDriverUI = (props) => {
                 {!!showInputPhoneNumber && (
                   <PhoneNumberWrapper className='formStyle'>
                     <InputPhoneNumber
+                      useProfileFormStyle
                       value={userPhoneNumber}
                       setValue={handleChangePhoneNumber}
                       handleIsValid={setIsValidPhoneNumber}

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

@@ -99,7 +99,8 @@ const SignUpFormUI = (props) => {
     useSignUpFullDetails,
     useSignUpOtpEmail,
     useSignUpOtpCellphone,
-    isGuest
+    isGuest,
+    setCellphoneStartZero
   } = props
   const [, t] = useLanguage()
   const [, { showToast }] = useToast()
@@ -215,7 +216,7 @@ const SignUpFormUI = (props) => {
     }
   }
 
-  const handleChangePhoneNumber = (number, isValid) => {
+  const handleChangePhoneNumber = (number, isValid, rawNumber) => {
     setUserPhoneNumber(number)
 
     let phoneNumberParser = null
@@ -247,6 +248,7 @@ const SignUpFormUI = (props) => {
         }
       }
     }
+    setCellphoneStartZero && setCellphoneStartZero(rawNumber?.number && rawNumber?.countryCallingCode ? rawNumber?.number : null)
     handleChangeInput(phoneNumber, true)
   }
 

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

@@ -23,7 +23,7 @@ import { Switch } from '../../../../../styles/Switch'
 
 import { Input } from '../../styles/Inputs'
 import { Button } from '../../styles/Buttons'
-import { InputPhoneNumber } from '../../../../../components/InputPhoneNumber'
+import { InputPhoneNumber } from '../InputPhoneNumber'
 import { LanguageSelector } from '../../../../../components/LanguageSelector'
 import { Alert } from '../Confirm'
 import { sortInputFields } from '../../../../../utils'
@@ -55,7 +55,8 @@ export const UserFormDetailsUI = (props) => {
     isAllowGuest,
     isOrderTypeValidationField,
     checkoutFields,
-    isCheckoutPlace
+    isCheckoutPlace,
+    setCellphoneStartZero
   } = props
 
   const formMethods = useForm()
@@ -190,7 +191,7 @@ export const UserFormDetailsUI = (props) => {
     }
   }
 
-  const handleChangePhoneNumber = (number, isValid) => {
+  const handleChangePhoneNumber = (number, isValid, rawNumber) => {
     setUserPhoneNumber(number)
     setIsChanged(true)
 
@@ -223,6 +224,7 @@ export const UserFormDetailsUI = (props) => {
         }
       }
     }
+    setCellphoneStartZero && setCellphoneStartZero(rawNumber?.number && rawNumber?.countryCallingCode ? rawNumber?.number : null)
     handleChangeInput(phoneNumber, true)
   }
 
@@ -412,6 +414,7 @@ export const UserFormDetailsUI = (props) => {
                 <InputPhoneNumberWrapper>
                   <p>{t('PHONE', 'Phone')}</p>
                   <InputPhoneNumber
+                    useProfileFormStyle
                     user={user}
                     value={userPhoneNumber}
                     setValue={handleChangePhoneNumber}

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

@@ -16,7 +16,7 @@ import { Input } from '../../styles/Inputs'
 import { Button } from '../../styles/Buttons'
 import { useCountdownTimer } from '../../../../../hooks/useCountdownTimer'
 import { formatSeconds } from '../../../../../utils'
-import { InputPhoneNumber } from '../../../../../components/InputPhoneNumber'
+import { InputPhoneNumber } from '../InputPhoneNumber'
 import { UserFormDetailsUI } from '../UserFormDetails'
 
 import {
@@ -279,11 +279,12 @@ const UserVerificationUI = (props) => {
               <>
                 <InputWrapper phone>
                   <InputPhoneNumber
+                    useProfileFormStyle
                     user={user}
                     value={phoneState?.formatted}
                     disabled={!!phoneState?.formatted}
-                    setValue={() => {}}
-                    handleIsValid={() => {}}
+                    setValue={() => { }}
+                    handleIsValid={() => { }}
                   />
                 </InputWrapper>
                 <Button