feat(webpage): add mask to phone input number on pressure phone

Author: igr-santos

clients/packages/webpage-client/src/bonde-webpage/components/forms/InputField.tsx

@@ -1,6 +1,8 @@
 import React from 'react';
 import styled from '@emotion/styled';
 import { useField } from 'react-final-form';
+import InputMask from 'react-input-mask';
+
 import Box from './Box';
 import Label from './Label';
 import Raise from './Raise';
@@ -24,6 +26,7 @@ export interface InputFieldProperties {
   label?: string;
   validate?: any;
   disabled?: boolean;
+  mask?: string;
 }
 
 const InputField: React.FC<InputFieldProperties> = ({
@@ -32,7 +35,8 @@ const InputField: React.FC<InputFieldProperties> = ({
   type,
   label,
   disabled,
-  validate
+  validate,
+  mask
 }) => {
   const { input, meta } = useField(name, { validate });
 
@@ -42,12 +46,18 @@ const InputField: React.FC<InputFieldProperties> = ({
         {label && <Label>{label}</Label>}
         {meta.touched && meta.error && <Raise>{meta.error}</Raise>}
       </Box>
-      <InputStyled
-        {...input}
-        disabled={disabled}
-        placeholder={placeholder}
-        type={type || input.type}
-      />
+      {mask ? (
+        <InputMask mask={mask} value={input.value} onChange={input.onChange}>
+          {(inputProps) => <InputStyled {...inputProps} type="tel" disableUnderline />}
+        </InputMask>
+      ) : (
+        <InputStyled
+          {...input}
+          disabled={disabled}
+          placeholder={placeholder}
+          type={type || input.type}
+        />
+      )}
     </>
   );
 }

clients/packages/webpage-client/src/bonde-webpage/components/forms/Validators.ts

@@ -29,6 +29,8 @@ const regexPhoneE164 = /^\+\d{12,13}$/;
 
 const isValidPhoneE164 = ({ code, invalid }: { code: string; invalid: string }) =>
   (value: string) => {
+    value = value.replace("(", "").replace(")", "").replace("-", "").split(" ").join("")
+
     const phoneE164 = /^\+/.test(value) ? value : `+${value}`;
     const message = [11, 12].includes(phoneE164.length) ? code : invalid;
     return regexPhoneE164.test(phoneE164) ? undefined : message;

clients/packages/webpage-client/src/bonde-webpage/plugins/Phone/index.tsx

@@ -47,9 +47,14 @@ const PhoneWidget = (props: any) => {
     fetchData()
   }, [])
 
-  const submit = async (values) => {
+  const submit = async ({ person, ...values }) => {
+    const phone_number = person.phone_number.replace("(", "").replace(")", "").replace("-", "").split(" ").join("")
     const payload = {
       ...values,
+      person: {
+        ...person,
+        phone_number: phone_number
+      },
       targets: [target]
       // targets: campaign?.details.targets.map((target) => target.id)
     }
@@ -131,6 +136,7 @@ const PhoneWidget = (props: any) => {
                   name='person.phone_number'
                   label="Telefone"
                   placeholder="Insira seu telefone. Ex: +5511987654321"
+                  mask="+55 (99) 9 9999-9999"
                   validate={Validators.composeValidators(
                     Validators.required("Preenchimento obrigatório"),
                     Validators.isValidPhoneE164({