mitre-form-component 0.0.34 → 0.0.36

package/README.md

@@ -50,6 +50,8 @@ import { MitreFormComponent } from "mitre-form-component-next";
   showHeader={true} // opcional
   colorPrimary="#FF5733" // opcional
   textColor="#ffffff" // opcional
+  backgroundColor="#000" // opcional
+  innerPadding="0.2rem" // opcional
 />;
 ```
 
@@ -63,7 +65,7 @@ import { MitreFormComponent } from "mitre-form-component-next";
 - [Styled Components](https://styled-components.com/)
 - [Polished](https://polished.js.org/)
 - [React Icons](https://react-icons.github.io/react-icons/)
-- [React Phone Input](https://github.com/bl00mber/react-phone-input-2)
+- [React Internation Phone](https://github.com/ybrusentsov/react-international-phone)
 - [Vite](https://vitejs.dev/)
 - [Tsup](https://tsup.egoist.dev/)
 
@@ -102,6 +104,8 @@ O `MitreFormComponent` aceita as seguintes props:
 - **`showHeader`** (opcional, boolean): Controla se o cabeçalho será mostrado. Padrão: `false`.
 - **`colorPrimary`** (opcional, string): Cor primária do componente. Exemplo: `#FF5733`.
 - **`textColor`** (opcional, string): Cor do texto do componente. Exemplo: `#ffffff`.
+- **`backgroundColor`** (opcional, string): Cor do fundo do componente. Exemplo: `#CECECE`.
+- **`innerPadding`** (opcional, string): Espaçamento interno do componente. Exemplo: `1rem`.
 
 ---
 

package/dist/index.cjs

@@ -35,7 +35,7 @@ __export(index_exports, {
 module.exports = __toCommonJS(index_exports);
 
 // src/components/Form/index.tsx
-var import_react5 = __toESM(require("react"), 1);
+var import_react6 = __toESM(require("react"), 1);
 
 // src/components/hooks/useError.ts
 var import_react = require("react");
@@ -54,6 +54,7 @@ function useError() {
 var import_react_hook_form = require("react-hook-form");
 var import_yup = require("@hookform/resolvers/yup");
 var yup = __toESM(require("yup"), 1);
+var import_google_libphonenumber = require("google-libphonenumber");
 
 // src/components/styles/utils.ts
 function flex(direction = "row", alignItems, justifyContent) {
@@ -377,14 +378,12 @@ function date(e) {
 
 // src/components/Input/styles.ts
 var import_styled_components3 = __toESM(require("styled-components"), 1);
-var import_react_international_phone = require("react-international-phone");
-var import_style = require("react-international-phone/style.css");
 var FormLabel = import_styled_components3.default.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;
@@ -439,7 +438,7 @@ var FormErrorMessage = import_styled_components3.default.small`
   display: block;
 `;
 var FormControl = import_styled_components3.default.div.withConfig({
-  shouldForwardProp: (prop) => !["isInvalid", "$bordercolor"].includes(prop)
+  shouldForwardProp: (prop) => !["isInvalid"].includes(prop)
 })`
   ${FormLabel} {
     ${(props) => props.isInvalid && import_styled_components3.css`
@@ -464,74 +463,6 @@ var FormControl = import_styled_components3.default.div.withConfig({
     }
   }
 `;
-var StyledPhoneInput = (0, import_styled_components3.default)(import_react_international_phone.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
 var import_jsx_runtime = require("react/jsx-runtime");
@@ -558,34 +489,6 @@ var InputBase = ({ id, label, error, showErrorMessage = true, borderColor, textC
         autoComplete: rest.autoComplete || "on",
         ...rest
       }
-    ) : mask === "phone" ? /* @__PURE__ */ (0, import_jsx_runtime.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__ */ (0, import_jsx_runtime.jsx)(
       Input,
       {
@@ -891,21 +794,209 @@ var Alert = ({
   );
 };
 
-// src/components/Form/index.tsx
+// src/components/PhoneInput/index.tsx
+var import_react5 = require("react");
+
+// src/components/PhoneInput/styles.ts
+var import_styled_components6 = __toESM(require("styled-components"), 1);
+var import_react_international_phone = require("react-international-phone");
+var import_style = require("react-international-phone/style.css");
+var FormLabel2 = import_styled_components6.default.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 = (0, import_styled_components6.default)(import_react_international_phone.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 = import_styled_components6.default.small`
+  font-size: 0.75rem;
+  line-height: 1.125rem;
+  color: var(--red);
+  margin-top: 0.25rem;
+  display: block;
+`;
+var FormControl2 = import_styled_components6.default.div.withConfig({
+  shouldForwardProp: (prop) => !["isInvalid"].includes(prop)
+})`
+  ${FormLabel2} {
+    ${(props) => props.isInvalid && import_styled_components6.css`
+        color: var(--red);
+      `};
+  }
+
+  ${StyledPhoneInput} {
+    ${(props) => props.isInvalid && import_styled_components6.css`
+        border: 1px solid var(--red);
+
+        &:not(:focus)::placeholder {
+          color: var(--red);
+          font-weight: 600;
+        }
+      `};
+
+    .react-international-phone-input-container {
+      ${(props) => props.isInvalid && import_styled_components6.css`
+          border: 1px solid var(--red);
+
+          &:not(:focus)::placeholder {
+            color: var(--red);
+            font-weight: 600;
+          }
+        `};
+    }
+  }
+`;
+
+// src/components/PhoneInput/index.tsx
 var import_jsx_runtime4 = require("react/jsx-runtime");
+var PhoneInputBase = ({ id, label, error, showErrorMessage = true, borderColor, textColor, value, ...rest }, ref) => {
+  return /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(FormControl2, { isInvalid: !!error, children: [
+    !!label && /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(FormLabel2, { htmlFor: id, $textColor: textColor, children: label }),
+    /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+      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__ */ (0, import_jsx_runtime4.jsx)(FormErrorMessage2, { "data-testid": "error-message", children: typeof error === "string" ? error : error?.message })
+  ] });
+};
+var PhoneInput2 = (0, import_react5.forwardRef)(PhoneInputBase);
+
+// src/components/Form/index.tsx
+var import_jsx_runtime5 = require("react/jsx-runtime");
+var phoneUtil = import_google_libphonenumber.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 = import_react5.default.forwardRef(({
+var MitreFormComponent = import_react6.default.forwardRef(({
   productId,
   apiUrl,
   apiToken,
@@ -916,18 +1007,38 @@ var MitreFormComponent = import_react5.default.forwardRef(({
   showHeader = true,
   colorPrimary = "#F6C76B",
   textColor = "#2F2F2F",
-  backgroundColor = "#cecece",
+  backgroundColor = "#CECECE",
   innerPadding = "1rem"
 }, ref) => {
-  const [loading, setIsLoading] = (0, import_react5.useState)(false);
+  const [loading, setIsLoading] = (0, import_react6.useState)(false);
   const { error, handleError, clearError } = useError();
-  const [successMessage, setSuccessMessage] = (0, import_react5.useState)("");
-  const { control, register, handleSubmit, formState: { errors }, reset, watch } = (0, import_react_hook_form.useForm)({
-    resolver: (0, import_yup.yupResolver)(schema)
+  const [successMessage, setSuccessMessage] = (0, import_react6.useState)("");
+  const [formKey, setFormKey] = (0, import_react6.useState)(0);
+  const { control, register, handleSubmit, formState: { errors }, reset, clearErrors } = (0, import_react_hook_form.useForm)({
+    resolver: (0, import_yup.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);
@@ -943,7 +1054,7 @@ var MitreFormComponent = import_react5.default.forwardRef(({
         body: JSON.stringify({
           name,
           email,
-          phone,
+          phone: phoneDigitsOnly,
           message,
           productId,
           utm_source,
@@ -953,24 +1064,21 @@ var MitreFormComponent = import_react5.default.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__ */ (0, import_jsx_runtime4.jsxs)(import_jsx_runtime4.Fragment, { children: [
-    /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(global_default, {}),
-    /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(GlobalStyles, {}),
-    error && /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(import_jsx_runtime5.Fragment, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(global_default, {}),
+    /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(GlobalStyles, {}),
+    error && /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
       Alert,
       {
         type: "error",
@@ -980,7 +1088,7 @@ var MitreFormComponent = import_react5.default.forwardRef(({
         children: error.message
       }
     ),
-    successMessage && /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+    successMessage && /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
       Alert,
       {
         type: "success",
@@ -990,13 +1098,13 @@ var MitreFormComponent = import_react5.default.forwardRef(({
         children: successMessage
       }
     ),
-    /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(FormContainer, { $backgroundColor: backgroundColor, $innerPadding: innerPadding, ref, children: [
-      showHeader && /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(HeaderContainer, { children: [
-        /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(Title, { $textColor: textColor, children: "Atendimento por mensagem" }),
-        /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(Text, { $textColor: textColor, children: "Informe seus dados e retornaremos a mensagem." })
+    /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(FormContainer, { $backgroundColor: backgroundColor, $innerPadding: innerPadding, ref, children: [
+      showHeader && /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(HeaderContainer, { children: [
+        /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(Title, { $textColor: textColor, children: "Atendimento por mensagem" }),
+        /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(Text, { $textColor: textColor, children: "Informe seus dados e retornaremos a mensagem." })
       ] }),
-      /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(Form, { $textColor: textColor, onSubmit: handleSubmit(sendMessage), noValidate: true, children: [
-        /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+      /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(Form, { $textColor: textColor, onSubmit: handleSubmit(sendMessage), noValidate: true, children: [
+        /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
           Input2,
           {
             id: "name",
@@ -1010,7 +1118,7 @@ var MitreFormComponent = import_react5.default.forwardRef(({
             required: true
           }
         ),
-        /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
           Input2,
           {
             id: "email",
@@ -1025,24 +1133,40 @@ var MitreFormComponent = import_react5.default.forwardRef(({
             required: true
           }
         ),
-        /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
-          Input2,
+        /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+          import_react_hook_form.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__ */ (0, import_jsx_runtime5.jsx)(
+                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__ */ (0, import_jsx_runtime4.jsx)("h6", { children: "* Campos de preenchimento obrigat\xF3rio." }),
-        /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(ButtonContainer, { children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(Button2, { bgColor: colorPrimary, color: textColor, type: "submit", isSubmitting: loading, children: "Enviar mensagem" }) }),
-        /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("p", { children: [
+        /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("h6", { children: "* Campos de preenchimento obrigat\xF3rio." }),
+        /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(ButtonContainer, { children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(Button2, { bgColor: colorPrimary, color: textColor, type: "submit", isSubmitting: loading, children: "Enviar mensagem" }) }),
+        /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("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__ */ (0, import_jsx_runtime4.jsx)(
+          /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
             "a",
             {
               href: "https://www.mitrerealty.com.br/politica-de-privacidade",