mitre-form-component 0.0.44 → 0.0.45

package/dist/index.js

@@ -1079,139 +1079,8 @@ var PhoneInputBase = ({
 };
 var PhoneInput2 = forwardRef2(PhoneInputBase);
 
-// src/components/ProductSelect/index.tsx
-import {
-  forwardRef as forwardRef3
-} from "react";
-
-// src/components/ProductSelect/styles.ts
-import styled6, { css as css5 } from "styled-components";
-var FormLabel3 = styled6.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 Select = styled6.select`
-  font-family: "Montserrat", sans-serif;
-  font-style: normal;
-  font-weight: 500;
-  font-size: 1rem;
-  line-height: 1.5rem;
-  background: ${(props) => props.$backgroundColor || "var(--white)"};
-  color: ${(props) => props.$textColor || "var(--black)"};
-  padding: 0.5rem 3rem 0.5rem 0.5rem; /* Aumentado padding-right para 3rem */
-  border-radius: 0.125rem;
-  border: 1px solid ${(props) => props.$borderColor || "transparent"};
-  display: block;
-  height: 3.125rem;
-  width: 100%;
-  cursor: pointer;
-  
-  /* Remover a seta padrão do navegador */
-  -webkit-appearance: none;
-  -moz-appearance: none;
-  appearance: none;
-  
-  /* Adicionar seta personalizada maior */
-  background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3cpolyline points='6,9 12,15 18,9'%3e%3c/polyline%3e%3c/svg%3e");
-  background-repeat: no-repeat;
-  background-position: right 1rem center; /* Posicionado a 1rem da direita */
-  background-size: 1.25rem; /* Tamanho da seta aumentado para 1.25rem */
-
-  &:focus {
-    border-radius: 0.125rem;
-    border: 2px solid ${(props) => props.$focusBorderColor || "var(--yellow-500)"};
-    outline: none;
-  }
-
-  /* Estilo para option disabled (placeholder) */
-  option:disabled {
-    color: var(--gray-100);
-    font-weight: 800;
-  }
-
-  /* Estilo para options normais */
-  option:not(:disabled) {
-    color: ${(props) => props.$textColor || "var(--black)"};
-    font-weight: 500;
-  }
-`;
-var FormErrorMessage3 = styled6.small`
-  font-size: 0.75rem;
-  line-height: 1.125rem;
-  color: var(--red);
-  margin-top: 0.25rem;
-  display: block;
-`;
-var FormControl3 = styled6.div.withConfig({
-  shouldForwardProp: (prop) => !["isInvalid"].includes(prop)
-})`
-  ${FormLabel3} {
-    ${(props) => props.isInvalid && css5`
-        color: var(--red);
-      `};
-  }
-
-  ${Select} {
-    ${(props) => props.isInvalid && css5`
-        border: 1px solid var(--red);
-      `};
-
-    &:focus {
-      ${(props) => props.isInvalid && css5`
-          border: 1px solid var(--red);
-        `};
-    }
-  }
-`;
-
-// src/components/ProductSelect/index.tsx
-import { jsx as jsx5, jsxs as jsxs5 } from "react/jsx-runtime";
-var ProductSelectBase = ({
-  id,
-  label,
-  error,
-  showErrorMessage = true,
-  labelTextColor,
-  backgroundColor,
-  borderColor,
-  focusBorderColor,
-  textColor,
-  products,
-  placeholder = "Selecione um produto",
-  ...rest
-}, ref) => {
-  return /* @__PURE__ */ jsxs5(FormControl3, { isInvalid: !!error, children: [
-    !!label && /* @__PURE__ */ jsx5(FormLabel3, { htmlFor: id, $textColor: labelTextColor, children: label }),
-    /* @__PURE__ */ jsxs5(
-      Select,
-      {
-        id,
-        ref,
-        "aria-invalid": !!error && showErrorMessage ? "true" : "false",
-        $backgroundColor: backgroundColor,
-        $borderColor: borderColor,
-        $focusBorderColor: focusBorderColor,
-        $textColor: textColor,
-        ...rest,
-        children: [
-          /* @__PURE__ */ jsx5("option", { value: "", disabled: true, children: placeholder }),
-          products.map((product) => /* @__PURE__ */ jsx5("option", { value: product.id, children: product.name }, product.id))
-        ]
-      }
-    ),
-    !!error && showErrorMessage && /* @__PURE__ */ jsx5(FormErrorMessage3, { "data-testid": "error-message", children: typeof error === "string" ? error : error.message })
-  ] });
-};
-var ProductSelect = forwardRef3(ProductSelectBase);
-
 // src/components/Form/index.tsx
-import { Fragment, jsx as jsx6, jsxs as jsxs6 } from "react/jsx-runtime";
+import { Fragment, jsx as jsx5, jsxs as jsxs5 } from "react/jsx-runtime";
 var phoneUtil = PhoneNumberUtil.getInstance();
 var isPhoneValid = (phone) => {
   try {
@@ -1221,7 +1090,7 @@ var isPhoneValid = (phone) => {
     return false;
   }
 };
-var baseSchema = {
+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.object().shape({
@@ -1236,14 +1105,9 @@ var baseSchema = {
     inputValue: yup.string().required("Telefone \xE9 obrigat\xF3rio!"),
     dialCode: yup.string().required("C\xF3digo de pa\xEDs \xE9 obrigat\xF3rio")
   })
-};
-var schemaWithProduct = yup.object().shape({
-  ...baseSchema,
-  productId: yup.string().required("Produto \xE9 obrigat\xF3rio")
 });
-var schema = yup.object().shape(baseSchema);
 var MitreFormComponent = React3.forwardRef(({
-  products,
+  productId,
   apiUrl,
   apiToken,
   showHeader = true,
@@ -1256,42 +1120,17 @@ var MitreFormComponent = React3.forwardRef(({
   inputBorderColor = "var(--transparent)",
   inputFocusBorderColor = "var(--yellow-500)",
   inputPlaceholderColor = "var(--gray-100)",
-  inputTextColor = "var(--black)"
+  inputTextColor = "var(--black)",
+  onSuccess,
+  onError
 }, ref) => {
   const [loading, setIsLoading] = useState3(false);
   const { error, handleError, clearError } = useError();
   const [successMessage, setSuccessMessage] = useState3("");
   const [formKey, setFormKey] = useState3(0);
-  const [selectedProductId, setSelectedProductId] = useState3(null);
-  const validateProducts = () => {
-    if (!products) {
-      return "Lista de produtos n\xE3o foi fornecida";
-    }
-    if (!Array.isArray(products)) {
-      return "Lista de produtos deve ser um array";
-    }
-    if (products.length === 0) {
-      return "Lista de produtos n\xE3o pode estar vazia";
-    }
-    for (let i = 0; i < products.length; i++) {
-      const product = products[i];
-      if (!product) {
-        return `Produto na posi\xE7\xE3o ${i} \xE9 inv\xE1lido (nulo/undefined)`;
-      }
-      if (typeof product.id !== "number" || product.id <= 0) {
-        return `Produto na posi\xE7\xE3o ${i} possui ID inv\xE1lido (deve ser um n\xFAmero positivo)`;
-      }
-      if (typeof product.name !== "string" || product.name.trim().length === 0) {
-        return `Produto na posi\xE7\xE3o ${i} possui nome inv\xE1lido (deve ser uma string n\xE3o vazia)`;
-      }
-    }
-    return null;
-  };
-  const productsValidationError = validateProducts();
   const [utm, setUtm] = useState3({ utm_source: "direto", createdAt: (/* @__PURE__ */ new Date()).toISOString() });
-  const formSchema = products && products.length > 1 ? schemaWithProduct : schema;
   const { control, register, handleSubmit, formState: { errors }, reset, clearErrors } = useForm({
-    resolver: yupResolver(formSchema),
+    resolver: yupResolver(schema),
     mode: "onSubmit"
   });
   React3.useEffect(() => {
@@ -1300,16 +1139,11 @@ var MitreFormComponent = React3.forwardRef(({
     setUtm(data);
   }, []);
   const resetForm = () => {
-    const resetData = {
+    reset({
       name: "",
       email: "",
       phone: { phone: "", inputValue: "", dialCode: "" }
-    };
-    if (products && products.length > 1) {
-      resetData.productId = "";
-      setSelectedProductId(null);
-    }
-    reset(resetData, {
+    }, {
       keepErrors: false,
       keepDirty: false,
       keepTouched: false,
@@ -1322,40 +1156,26 @@ var MitreFormComponent = React3.forwardRef(({
     setFormKey((k) => k + 1);
   };
   const sendMessage = async (data) => {
-    const { name, email, phone, productId } = 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);
-      if (!products || products.length === 0 || !apiToken) {
+      if (!productId || !apiToken) {
         throw new Error("Par\xE2metros obrigat\xF3rios n\xE3o informados");
       }
-      let selectedProduct;
-      if (products.length === 1) {
-        selectedProduct = products[0];
-      } else {
-        if (!productId) {
-          throw new Error("Produto deve ser selecionado");
-        }
-        const foundProduct = products.find((p) => p.id.toString() === productId);
-        if (!foundProduct) {
-          throw new Error("Produto selecionado n\xE3o encontrado");
-        }
-        selectedProduct = foundProduct;
-      }
       const requestBody = {
         name,
         email,
         phone: phoneDigitsOnly,
         message,
-        productId: selectedProduct.id.toString(),
+        productId,
         utm_source: utm.utm_source,
         utm_campaign: utm.utm_campaign,
         utm_medium: utm.utm_medium,
         utm_term: utm.utm_term
       };
-      console.log("requestBody = " + JSON.stringify(requestBody));
       const response = await fetch(`${apiUrl}/leads`, {
         method: "POST",
         headers: {
@@ -1365,32 +1185,25 @@ var MitreFormComponent = React3.forwardRef(({
         body: JSON.stringify(requestBody)
       });
       if (!response.ok) {
-        console.log("response = " + JSON.stringify(response));
         throw new Error("Falha ao enviar a mensagem!");
       }
+      const responseData = await response.json();
+      const leadId = responseData.leadId || responseData.id || "";
       setSuccessMessage("Mensagem enviada com sucesso!");
       resetForm();
+      onSuccess?.(requestBody, leadId);
     } catch (err) {
+      const error2 = err instanceof Error ? err : new Error("Erro desconhecido");
       handleError(err);
+      onError?.(error2);
     } finally {
       setIsLoading(false);
     }
   };
-  if (productsValidationError) {
-    console.error("Erro na valida\xE7\xE3o dos produtos:", productsValidationError);
-    return /* @__PURE__ */ jsxs6(Fragment, { children: [
-      /* @__PURE__ */ jsx6(global_default, {}),
-      /* @__PURE__ */ jsx6(GlobalStyles, {}),
-      /* @__PURE__ */ jsx6(FormContainer, { $backgroundColor: backgroundColor, $innerPadding: innerPadding, ref, children: /* @__PURE__ */ jsxs6(HeaderContainer, { children: [
-        /* @__PURE__ */ jsx6(Title, { $textColor: textColor, children: "Erro no carregamento do formul\xE1rio!" }),
-        /* @__PURE__ */ jsx6(Text, { $textColor: textColor, children: "N\xE3o foi poss\xEDvel carregar o formul\xE1rio. Tente novamente mais tarde." })
-      ] }) })
-    ] });
-  }
-  return /* @__PURE__ */ jsxs6(Fragment, { children: [
-    /* @__PURE__ */ jsx6(global_default, {}),
-    /* @__PURE__ */ jsx6(GlobalStyles, {}),
-    error && /* @__PURE__ */ jsx6(
+  return /* @__PURE__ */ jsxs5(Fragment, { children: [
+    /* @__PURE__ */ jsx5(global_default, {}),
+    /* @__PURE__ */ jsx5(GlobalStyles, {}),
+    error && /* @__PURE__ */ jsx5(
       Alert,
       {
         type: "error",
@@ -1400,7 +1213,7 @@ var MitreFormComponent = React3.forwardRef(({
         children: error.message
       }
     ),
-    successMessage && /* @__PURE__ */ jsx6(
+    successMessage && /* @__PURE__ */ jsx5(
       Alert,
       {
         type: "success",
@@ -1410,30 +1223,13 @@ var MitreFormComponent = React3.forwardRef(({
         children: successMessage
       }
     ),
-    /* @__PURE__ */ jsxs6(FormContainer, { $backgroundColor: backgroundColor, $innerPadding: innerPadding, ref, children: [
-      showHeader && /* @__PURE__ */ jsxs6(HeaderContainer, { children: [
-        /* @__PURE__ */ jsx6(Title, { $textColor: textColor, children: "Atendimento por mensagem" }),
-        /* @__PURE__ */ jsx6(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__ */ jsxs6(Form, { $textColor: textColor, onSubmit: handleSubmit(sendMessage), noValidate: true, children: [
-        products.length > 1 && /* @__PURE__ */ jsx6(
-          ProductSelect,
-          {
-            id: "productId",
-            label: "Produto de interesse *",
-            placeholder: "Selecione um produto",
-            ...register("productId"),
-            error: errors.productId?.message,
-            products,
-            required: true,
-            labelTextColor: textColor,
-            backgroundColor: inputBackgroundColor,
-            borderColor: inputBorderColor,
-            focusBorderColor: inputFocusBorderColor,
-            textColor: inputTextColor
-          }
-        ),
-        /* @__PURE__ */ jsx6(
+      /* @__PURE__ */ jsxs5(Form, { $textColor: textColor, onSubmit: handleSubmit(sendMessage), noValidate: true, children: [
+        /* @__PURE__ */ jsx5(
           Input2,
           {
             id: "name",
@@ -1451,7 +1247,7 @@ var MitreFormComponent = React3.forwardRef(({
             inputTextColor
           }
         ),
-        /* @__PURE__ */ jsx6(
+        /* @__PURE__ */ jsx5(
           Input2,
           {
             id: "email",
@@ -1470,7 +1266,7 @@ var MitreFormComponent = React3.forwardRef(({
             inputTextColor
           }
         ),
-        /* @__PURE__ */ jsx6(
+        /* @__PURE__ */ jsx5(
           Controller,
           {
             name: "phone",
@@ -1479,7 +1275,7 @@ var MitreFormComponent = React3.forwardRef(({
             shouldUnregister: true,
             render: ({ field }) => {
               const errorMsg = errors.phone?.inputValue?.message || errors.phone?.phone?.message || errors.phone?.message;
-              return /* @__PURE__ */ jsx6(
+              return /* @__PURE__ */ jsx5(
                 PhoneInput2,
                 {
                   id: "phone",
@@ -1502,12 +1298,12 @@ var MitreFormComponent = React3.forwardRef(({
           },
           formKey
         ),
-        /* @__PURE__ */ jsx6("h6", { children: "* Campos de preenchimento obrigat\xF3rio." }),
-        /* @__PURE__ */ jsx6(ButtonContainer, { children: /* @__PURE__ */ jsx6(Button2, { bgColor: buttonBackgroundColor, color: buttonTextColor, type: "submit", isSubmitting: loading, children: "Enviar mensagem" }) }),
-        /* @__PURE__ */ jsxs6("p", { children: [
+        /* @__PURE__ */ jsx5("h6", { children: "* Campos de preenchimento obrigat\xF3rio." }),
+        /* @__PURE__ */ jsx5(ButtonContainer, { children: /* @__PURE__ */ jsx5(Button2, { bgColor: buttonBackgroundColor, color: buttonTextColor, 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__ */ jsx6(
+          /* @__PURE__ */ jsx5(
             "a",
             {
               href: "https://www.mitrerealty.com.br/politica-de-privacidade",