mitre-form-component 0.0.42 → 0.0.44

package/dist/index.js

@@ -1079,8 +1079,139 @@ 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 jsx5, jsxs as jsxs5 } from "react/jsx-runtime";
+import { Fragment, jsx as jsx6, jsxs as jsxs6 } from "react/jsx-runtime";
 var phoneUtil = PhoneNumberUtil.getInstance();
 var isPhoneValid = (phone) => {
   try {
@@ -1090,7 +1221,7 @@ var isPhoneValid = (phone) => {
     return false;
   }
 };
-var schema = yup.object().shape({
+var baseSchema = {
   name: yup.string().required("Nome \xE9 obrigat\xF3rio"),
   email: yup.string().required("Email \xE9 obrigat\xF3rio").email("Email inv\xE1lido"),
   phone: yup.object().shape({
@@ -1105,9 +1236,14 @@ var schema = yup.object().shape({
     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(({
-  productId,
+  products,
   apiUrl,
   apiToken,
   showHeader = true,
@@ -1126,9 +1262,36 @@ var MitreFormComponent = React3.forwardRef(({
   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(schema),
+    resolver: yupResolver(formSchema),
     mode: "onSubmit"
   });
   React3.useEffect(() => {
@@ -1137,11 +1300,16 @@ var MitreFormComponent = React3.forwardRef(({
     setUtm(data);
   }, []);
   const resetForm = () => {
-    reset({
+    const resetData = {
       name: "",
       email: "",
       phone: { phone: "", inputValue: "", dialCode: "" }
-    }, {
+    };
+    if (products && products.length > 1) {
+      resetData.productId = "";
+      setSelectedProductId(null);
+    }
+    reset(resetData, {
       keepErrors: false,
       keepDirty: false,
       keepTouched: false,
@@ -1154,23 +1322,36 @@ var MitreFormComponent = React3.forwardRef(({
     setFormKey((k) => k + 1);
   };
   const sendMessage = async (data) => {
-    const { name, email, phone } = data;
+    const { name, email, phone, productId } = 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 (!productId || !apiToken) {
+      if (!products || products.length === 0 || !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,
+        productId: selectedProduct.id.toString(),
         utm_source: utm.utm_source,
-        utm_campaing: utm.utm_campaign,
+        utm_campaign: utm.utm_campaign,
         utm_medium: utm.utm_medium,
         utm_term: utm.utm_term
       };
@@ -1195,10 +1376,21 @@ var MitreFormComponent = React3.forwardRef(({
       setIsLoading(false);
     }
   };
-  return /* @__PURE__ */ jsxs5(Fragment, { children: [
-    /* @__PURE__ */ jsx5(global_default, {}),
-    /* @__PURE__ */ jsx5(GlobalStyles, {}),
-    error && /* @__PURE__ */ jsx5(
+  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(
       Alert,
       {
         type: "error",
@@ -1208,7 +1400,7 @@ var MitreFormComponent = React3.forwardRef(({
         children: error.message
       }
     ),
-    successMessage && /* @__PURE__ */ jsx5(
+    successMessage && /* @__PURE__ */ jsx6(
       Alert,
       {
         type: "success",
@@ -1218,13 +1410,30 @@ var MitreFormComponent = React3.forwardRef(({
         children: successMessage
       }
     ),
-    /* @__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(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(Form, { $textColor: textColor, onSubmit: handleSubmit(sendMessage), noValidate: true, children: [
-        /* @__PURE__ */ jsx5(
+      /* @__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(
           Input2,
           {
             id: "name",
@@ -1242,7 +1451,7 @@ var MitreFormComponent = React3.forwardRef(({
             inputTextColor
           }
         ),
-        /* @__PURE__ */ jsx5(
+        /* @__PURE__ */ jsx6(
           Input2,
           {
             id: "email",
@@ -1261,7 +1470,7 @@ var MitreFormComponent = React3.forwardRef(({
             inputTextColor
           }
         ),
-        /* @__PURE__ */ jsx5(
+        /* @__PURE__ */ jsx6(
           Controller,
           {
             name: "phone",
@@ -1270,7 +1479,7 @@ var MitreFormComponent = React3.forwardRef(({
             shouldUnregister: true,
             render: ({ field }) => {
               const errorMsg = errors.phone?.inputValue?.message || errors.phone?.phone?.message || errors.phone?.message;
-              return /* @__PURE__ */ jsx5(
+              return /* @__PURE__ */ jsx6(
                 PhoneInput2,
                 {
                   id: "phone",
@@ -1293,12 +1502,12 @@ var MitreFormComponent = React3.forwardRef(({
           },
           formKey
         ),
-        /* @__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: [
+        /* @__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: [
           "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__ */ jsx5(
+          /* @__PURE__ */ jsx6(
             "a",
             {
               href: "https://www.mitrerealty.com.br/politica-de-privacidade",