mitre-form-component 0.0.34 → 0.0.36

package/dist/index.js

@@ -15,9 +15,10 @@ function useError() {
 }
 
 // src/components/Form/index.tsx
-import { useForm } from "react-hook-form";
+import { useForm, Controller } from "react-hook-form";
 import { yupResolver } from "@hookform/resolvers/yup";
 import * as yup from "yup";
+import { PhoneNumberUtil } from "google-libphonenumber";
 
 // src/components/styles/utils.ts
 function flex(direction = "row", alignItems, justifyContent) {
@@ -344,14 +345,12 @@ function date(e) {
 
 // src/components/Input/styles.ts
 import styled2, { css } from "styled-components";
-import { PhoneInput } from "react-international-phone";
-import "react-international-phone/style.css";
 var FormLabel = styled2.label`
   font-family: "Montserrat", sans-serif;
   font-style: normal;
   font-weight: 500;
   font-size: 1rem;
-  color: ${(props) => props.isInvalid ? "var(--red)" : props.$textColor || "var(--black)"};
+  color: ${(props) => props.$textColor || "var(--black)"};
   display: block;
   margin-bottom: 0.5rem;
   text-align: left;
@@ -406,7 +405,7 @@ var FormErrorMessage = styled2.small`
   display: block;
 `;
 var FormControl = styled2.div.withConfig({
-  shouldForwardProp: (prop) => !["isInvalid", "$bordercolor"].includes(prop)
+  shouldForwardProp: (prop) => !["isInvalid"].includes(prop)
 })`
   ${FormLabel} {
     ${(props) => props.isInvalid && css`
@@ -431,74 +430,6 @@ var FormControl = styled2.div.withConfig({
     }
   }
 `;
-var StyledPhoneInput = styled2(PhoneInput)`
-  width: 100%;
-  height: 3.125rem;
-
-  &:focus-within {
-    border: 2px solid ${(props) => props.$bordercolor || "var(--yellow-500)"};
-    border-radius: 0.5rem;
-  }
-
-  .react-international-phone-input-container {
-    width: 100%;
-    height: 100%;
-    border: 1px solid transparent;
-    display: flex;
-    align-items: center;
-    overflow: hidden;
-    font-family: "Montserrat", sans-serif;
-    font-size: 1rem;
-    font-weight: 500;
-    color: var(--black);
-  }
-
-  .react-international-phone-country-selector-button {
-    height: 100%;
-    background: var(--gray-500);
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    font-family: "Montserrat", sans-serif;
-    font-size: 1rem;
-    font-weight: 500;
-    cursor: pointer;
-  }
-
-  input.react-international-phone-input {
-    flex: 1;
-    height: 100%;
-    padding: 0 0.5rem;
-    margin: 0;
-    background: var(--gray-500);
-    font-family: "Montserrat", sans-serif;
-    font-style: normal;
-    font-weight: 500;
-    font-size: 1rem;
-    line-height: 1.5rem;
-    color: var(--black);
-    outline: none;
-
-    &::placeholder {
-      font-size: 1rem;
-      line-height: 1.5rem;
-      color: #b6b6b6;
-      font-weight: 800;
-    }
-
-    &:-webkit-autofill {
-      background: var(--gray-500) !important;
-      -webkit-text-fill-color: var(--black) !important;
-      transition: background-color 5000s ease-in-out 0s;
-    }
-
-    &:-webkit-autofill::first-line {
-      font-family: "Montserrat", sans-serif;
-      font-size: 1rem;
-      font-weight: 500;
-    }
-  }
-`;
 
 // src/components/Input/index.tsx
 import { jsx, jsxs } from "react/jsx-runtime";
@@ -525,34 +456,6 @@ var InputBase = ({ id, label, error, showErrorMessage = true, borderColor, textC
         autoComplete: rest.autoComplete || "on",
         ...rest
       }
-    ) : mask === "phone" ? /* @__PURE__ */ jsx(
-      StyledPhoneInput,
-      {
-        defaultCountry: "br",
-        disableCountryGuess: true,
-        disableDialCodeAndPrefix: true,
-        $bordercolor: borderColor,
-        placeholder: rest.placeholder,
-        "aria-invalid": !!error && showErrorMessage ? "true" : "false",
-        onChange: (value) => {
-          if (typeof rest.onChange === "function") {
-            const event = {
-              target: {
-                name: rest.name,
-                value
-              }
-            };
-            rest.onChange(event);
-          }
-        },
-        inputProps: {
-          id,
-          name: "phone",
-          required: true,
-          autoFocus: true,
-          autoComplete: "tel"
-        }
-      }
     ) : /* @__PURE__ */ jsx(
       Input,
       {
@@ -858,19 +761,209 @@ var Alert = ({
   );
 };
 
+// src/components/PhoneInput/index.tsx
+import {
+  forwardRef as forwardRef2
+} from "react";
+
+// src/components/PhoneInput/styles.ts
+import styled5, { css as css4 } from "styled-components";
+import { PhoneInput } from "react-international-phone";
+import "react-international-phone/style.css";
+var FormLabel2 = styled5.label`
+  font-family: "Montserrat", sans-serif;
+  font-style: normal;
+  font-weight: 500;
+  font-size: 1rem;
+  color: ${(props) => props.$textColor || "var(--black)"};
+  display: block;
+  margin-bottom: 0.5rem;
+  text-align: left;
+`;
+var StyledPhoneInput = styled5(PhoneInput)`
+  width: 100%;
+  height: 3.125rem;
+  background: var(--gray-500);
+  font-family: "Montserrat", sans-serif;
+
+  &:focus-within {
+    border-radius: 0.125rem;
+    border: 2px solid ${(props) => props.$bordercolor || "var(--yellow-500)"};
+    outline: none;
+  }
+
+  /* Style for the inner phone input container */
+  .react-international-phone-input-container {
+    width: 100%;
+    height: 100%;
+    display: flex;
+    align-items: center;
+    overflow: hidden;
+    font-family: "Montserrat", sans-serif;
+    font-size: 1rem;
+    font-weight: 500;
+    color: var(--black);
+    background: var(--white);
+  }
+
+  /* Style for the country selector button */
+  .react-international-phone-country-selector-button {
+    height: 100%;
+    background: var(--white);
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    font-family: "Montserrat", sans-serif;
+    font-size: 1rem;
+    font-weight: 500;
+    cursor: pointer;
+    outline: none;
+    border: none;
+    border-right: 2px solid var(--gray-300);
+  }
+
+  /* Style for the input itself */
+  input.react-international-phone-input {
+    flex: 1;
+    height: 100%;
+    padding: 0 0.5rem;
+    margin: 0;
+    background: var(--white);
+    font-family: "Montserrat", sans-serif;
+    font-style: normal;
+    font-weight: 500;
+    font-size: 1rem;
+    line-height: 1.5rem;
+    color: var(--black);
+    outline: none;
+    border: none;
+    border-radius: 0.125rem;
+
+    &::placeholder {
+      font-size: 1rem;
+      line-height: 1.5rem;
+      color: #b6b6b6;
+      font-weight: 800;
+    }
+
+    &:-webkit-autofill {
+      background: var(--gray-500) !important;
+      -webkit-text-fill-color: var(--black) !important;
+      transition: background-color 5000s ease-in-out 0s;
+    }
+
+    &:-webkit-autofill::first-line {
+      font-family: "Montserrat", sans-serif;
+      font-size: 1rem;
+      font-weight: 500;
+    }
+  }
+`;
+var FormErrorMessage2 = styled5.small`
+  font-size: 0.75rem;
+  line-height: 1.125rem;
+  color: var(--red);
+  margin-top: 0.25rem;
+  display: block;
+`;
+var FormControl2 = styled5.div.withConfig({
+  shouldForwardProp: (prop) => !["isInvalid"].includes(prop)
+})`
+  ${FormLabel2} {
+    ${(props) => props.isInvalid && css4`
+        color: var(--red);
+      `};
+  }
+
+  ${StyledPhoneInput} {
+    ${(props) => props.isInvalid && css4`
+        border: 1px solid var(--red);
+
+        &:not(:focus)::placeholder {
+          color: var(--red);
+          font-weight: 600;
+        }
+      `};
+
+    .react-international-phone-input-container {
+      ${(props) => props.isInvalid && css4`
+          border: 1px solid var(--red);
+
+          &:not(:focus)::placeholder {
+            color: var(--red);
+            font-weight: 600;
+          }
+        `};
+    }
+  }
+`;
+
+// src/components/PhoneInput/index.tsx
+import { jsx as jsx4, jsxs as jsxs4 } from "react/jsx-runtime";
+var PhoneInputBase = ({ id, label, error, showErrorMessage = true, borderColor, textColor, value, ...rest }, ref) => {
+  return /* @__PURE__ */ jsxs4(FormControl2, { isInvalid: !!error, children: [
+    !!label && /* @__PURE__ */ jsx4(FormLabel2, { htmlFor: id, $textColor: textColor, children: label }),
+    /* @__PURE__ */ jsx4(
+      StyledPhoneInput,
+      {
+        ref,
+        defaultCountry: "br",
+        disableCountryGuess: true,
+        disableDialCodeAndPrefix: true,
+        showDisabledDialCodeAndPrefix: false,
+        $bordercolor: borderColor,
+        placeholder: rest.placeholder,
+        "aria-invalid": !!error && showErrorMessage ? "true" : "false",
+        value: String(value),
+        onChange: (phone, meta) => {
+          if (typeof rest.onChange === "function") {
+            rest.onChange({
+              phone,
+              dialCode: meta.country.dialCode,
+              inputValue: meta.inputValue
+            });
+          }
+        },
+        inputProps: {
+          id,
+          name: rest.name || "phone",
+          required: rest.required,
+          autoFocus: rest.autoFocus,
+          autoComplete: rest.autoComplete || "tel"
+        }
+      }
+    ),
+    !!error && showErrorMessage && /* @__PURE__ */ jsx4(FormErrorMessage2, { "data-testid": "error-message", children: typeof error === "string" ? error : error?.message })
+  ] });
+};
+var PhoneInput2 = forwardRef2(PhoneInputBase);
+
 // src/components/Form/index.tsx
-import { Fragment, jsx as jsx4, jsxs as jsxs4 } from "react/jsx-runtime";
+import { Fragment, jsx as jsx5, jsxs as jsxs5 } from "react/jsx-runtime";
+var phoneUtil = PhoneNumberUtil.getInstance();
+var isPhoneValid = (phone) => {
+  try {
+    return phoneUtil.isValidNumber(phoneUtil.parseAndKeepRawInput(phone));
+  } catch (error) {
+    console.log("erro ao validar telefone = " + error);
+    return false;
+  }
+};
 var schema = yup.object().shape({
   name: yup.string().required("Nome \xE9 obrigat\xF3rio"),
   email: yup.string().required("Email \xE9 obrigat\xF3rio").email("Email inv\xE1lido"),
-  phone: yup.string().required("Telefone \xE9 obrigat\xF3rio").test(
-    "min-digits",
-    "N\xFAmero de telefone inv\xE1lido!",
-    (value) => {
-      const digitsOnly = value?.replace(/\D/g, "") || "";
-      return digitsOnly.length >= 8;
-    }
-  )
+  phone: yup.object().shape({
+    phone: yup.string().required("Telefone \xE9 obrigat\xF3rio!").test(
+      "is-valid-phone",
+      "N\xFAmero de telefone inv\xE1lido!",
+      function(value) {
+        const digitsOnly = value?.replace(/\D/g, "") || "";
+        return digitsOnly.length >= 8 && isPhoneValid(value);
+      }
+    ),
+    inputValue: yup.string().required("Telefone \xE9 obrigat\xF3rio!"),
+    dialCode: yup.string().required("C\xF3digo de pa\xEDs \xE9 obrigat\xF3rio")
+  })
 });
 var MitreFormComponent = React3.forwardRef(({
   productId,
@@ -883,18 +976,38 @@ var MitreFormComponent = React3.forwardRef(({
   showHeader = true,
   colorPrimary = "#F6C76B",
   textColor = "#2F2F2F",
-  backgroundColor = "#cecece",
+  backgroundColor = "#CECECE",
   innerPadding = "1rem"
 }, ref) => {
   const [loading, setIsLoading] = useState3(false);
   const { error, handleError, clearError } = useError();
   const [successMessage, setSuccessMessage] = useState3("");
-  const { control, register, handleSubmit, formState: { errors }, reset, watch } = useForm({
-    resolver: yupResolver(schema)
+  const [formKey, setFormKey] = useState3(0);
+  const { control, register, handleSubmit, formState: { errors }, reset, clearErrors } = useForm({
+    resolver: yupResolver(schema),
+    mode: "onSubmit"
   });
-  const phoneValue = watch("phone");
+  const resetForm = () => {
+    reset({
+      name: "",
+      email: "",
+      phone: { phone: "", inputValue: "", dialCode: "" }
+    }, {
+      keepErrors: false,
+      keepDirty: false,
+      keepTouched: false,
+      keepIsSubmitted: false,
+      keepSubmitCount: false,
+      keepValues: false,
+      keepDefaultValues: false
+    });
+    clearErrors();
+    setFormKey((k) => k + 1);
+  };
   const sendMessage = async (data) => {
     const { name, email, phone } = data;
+    const phoneValue = phone.inputValue;
+    const phoneDigitsOnly = phoneValue?.replace(/\D/g, "") || "";
     const message = "Gostaria de mais informa\xE7\xF5es sobre o produto";
     try {
       setIsLoading(true);
@@ -910,7 +1023,7 @@ var MitreFormComponent = React3.forwardRef(({
         body: JSON.stringify({
           name,
           email,
-          phone,
+          phone: phoneDigitsOnly,
           message,
           productId,
           utm_source,
@@ -920,24 +1033,21 @@ var MitreFormComponent = React3.forwardRef(({
         })
       });
       if (!response.ok) {
+        console.log("response = " + JSON.stringify(response));
         throw new Error("Falha ao enviar a mensagem!");
       }
       setSuccessMessage("Mensagem enviada com sucesso!");
-      reset({
-        name: "",
-        email: "",
-        phone: ""
-      });
+      resetForm();
     } catch (err) {
       handleError(err);
     } finally {
       setIsLoading(false);
     }
   };
-  return /* @__PURE__ */ jsxs4(Fragment, { children: [
-    /* @__PURE__ */ jsx4(global_default, {}),
-    /* @__PURE__ */ jsx4(GlobalStyles, {}),
-    error && /* @__PURE__ */ jsx4(
+  return /* @__PURE__ */ jsxs5(Fragment, { children: [
+    /* @__PURE__ */ jsx5(global_default, {}),
+    /* @__PURE__ */ jsx5(GlobalStyles, {}),
+    error && /* @__PURE__ */ jsx5(
       Alert,
       {
         type: "error",
@@ -947,7 +1057,7 @@ var MitreFormComponent = React3.forwardRef(({
         children: error.message
       }
     ),
-    successMessage && /* @__PURE__ */ jsx4(
+    successMessage && /* @__PURE__ */ jsx5(
       Alert,
       {
         type: "success",
@@ -957,13 +1067,13 @@ var MitreFormComponent = React3.forwardRef(({
         children: successMessage
       }
     ),
-    /* @__PURE__ */ jsxs4(FormContainer, { $backgroundColor: backgroundColor, $innerPadding: innerPadding, ref, children: [
-      showHeader && /* @__PURE__ */ jsxs4(HeaderContainer, { children: [
-        /* @__PURE__ */ jsx4(Title, { $textColor: textColor, children: "Atendimento por mensagem" }),
-        /* @__PURE__ */ jsx4(Text, { $textColor: textColor, children: "Informe seus dados e retornaremos a mensagem." })
+    /* @__PURE__ */ jsxs5(FormContainer, { $backgroundColor: backgroundColor, $innerPadding: innerPadding, ref, children: [
+      showHeader && /* @__PURE__ */ jsxs5(HeaderContainer, { children: [
+        /* @__PURE__ */ jsx5(Title, { $textColor: textColor, children: "Atendimento por mensagem" }),
+        /* @__PURE__ */ jsx5(Text, { $textColor: textColor, children: "Informe seus dados e retornaremos a mensagem." })
       ] }),
-      /* @__PURE__ */ jsxs4(Form, { $textColor: textColor, onSubmit: handleSubmit(sendMessage), noValidate: true, children: [
-        /* @__PURE__ */ jsx4(
+      /* @__PURE__ */ jsxs5(Form, { $textColor: textColor, onSubmit: handleSubmit(sendMessage), noValidate: true, children: [
+        /* @__PURE__ */ jsx5(
           Input2,
           {
             id: "name",
@@ -977,7 +1087,7 @@ var MitreFormComponent = React3.forwardRef(({
             required: true
           }
         ),
-        /* @__PURE__ */ jsx4(
+        /* @__PURE__ */ jsx5(
           Input2,
           {
             id: "email",
@@ -992,24 +1102,40 @@ var MitreFormComponent = React3.forwardRef(({
             required: true
           }
         ),
-        /* @__PURE__ */ jsx4(
-          Input2,
+        /* @__PURE__ */ jsx5(
+          Controller,
           {
-            id: "phone",
-            label: "Telefone *",
-            placeholder: "(11) 00000-0000",
-            mask: "phone",
-            borderColor: colorPrimary,
-            textColor,
-            required: true
-          }
+            name: "phone",
+            control,
+            defaultValue: { phone: "", inputValue: "", dialCode: "" },
+            shouldUnregister: true,
+            render: ({ field }) => {
+              const errorMsg = errors.phone?.inputValue?.message || errors.phone?.phone?.message || errors.phone?.message;
+              return /* @__PURE__ */ jsx5(
+                PhoneInput2,
+                {
+                  id: "phone",
+                  label: "Telefone *",
+                  placeholder: "(11) 00000-0000",
+                  borderColor: colorPrimary,
+                  textColor,
+                  error: errorMsg,
+                  required: true,
+                  value: field.value.phone,
+                  onChange: field.onChange,
+                  name: field.name
+                }
+              );
+            }
+          },
+          formKey
         ),
-        /* @__PURE__ */ jsx4("h6", { children: "* Campos de preenchimento obrigat\xF3rio." }),
-        /* @__PURE__ */ jsx4(ButtonContainer, { children: /* @__PURE__ */ jsx4(Button2, { bgColor: colorPrimary, color: textColor, type: "submit", isSubmitting: loading, children: "Enviar mensagem" }) }),
-        /* @__PURE__ */ jsxs4("p", { children: [
+        /* @__PURE__ */ jsx5("h6", { children: "* Campos de preenchimento obrigat\xF3rio." }),
+        /* @__PURE__ */ jsx5(ButtonContainer, { children: /* @__PURE__ */ jsx5(Button2, { bgColor: colorPrimary, color: textColor, type: "submit", isSubmitting: loading, children: "Enviar mensagem" }) }),
+        /* @__PURE__ */ jsxs5("p", { children: [
           "A Mitre Realty respeita a sua privacidade e utiliza os seus dados pessoais para contat\xE1-lo por e-mail ou telefone aqui registrados. Para saber mais, acesse a nossa",
           " ",
-          /* @__PURE__ */ jsx4(
+          /* @__PURE__ */ jsx5(
             "a",
             {
               href: "https://www.mitrerealty.com.br/politica-de-privacidade",