mitre-form-component 0.0.42 → 0.0.44

package/README.md

@@ -39,8 +39,12 @@ Aqui está um exemplo de uso básico dentro do projeto:
 ```tsx
 import { MitreFormComponent } from "mitre-form-component-next";
 
+// Definir array de produtos (pode vir de variável de ambiente)
+const products = JSON.parse(process.env.VITE_PRODUCTS!);
+// Exemplo de VITE_PRODUCTS: '[{"id":1,"name":"Apartamento 2 quartos"},{"id":2,"name":"Casa 3 quartos"}]'
+
 <MitreFormComponent
-  productId={process.env.VITE_PRODUCT_ID!}
+  products={products}
   apiUrl={process.env.VITE_REGISTER_LEADS_URL!}
   apiToken={process.env.VITE_REGISTER_LEADS_TOKEN!}
   showHeader={true}  //[Opcional] Se irá exibir ou não o cabeçalho com "Atendimento por Mensagem - Informe seus dados e retornaremos a mensagem."
@@ -96,7 +100,9 @@ Depois de instalar a biblioteca, você pode começar a usá-la diretamente no se
 
 O `MitreFormComponent` aceita as seguintes props:
 
-- **`productId`** (string): O ID do produto relacionado ao empreendimento.
+- **`products`** (array): Array de objetos contendo os produtos disponíveis. Cada produto deve ter `id` (number) e `name` (string).
+  - Se o array contém apenas 1 produto: o formulário usa automaticamente esse produto
+  - Se o array contém múltiplos produtos: é exibido um seletor para o usuário escolher
 - **`apiUrl`** (string): URL da API para registro dos leads.
 - **`apiToken`** (string): Token de autenticação da API.
 - **`showHeader`** (opcional, boolean): Controla se o cabeçalho será mostrado. Padrão: `false`.
@@ -113,6 +119,35 @@ O `MitreFormComponent` aceita as seguintes props:
 
 ---
 
+## 🎯 Comportamento dos Produtos
+
+O componente possui comportamento inteligente baseado na quantidade de produtos fornecidos:
+
+### **Array com 1 produto:**
+- O formulário usa automaticamente o único produto disponível
+- Não é exibido seletor de produto
+- O usuário preenche apenas nome, email e telefone
+
+### **Array com múltiplos produtos:**
+- É exibido um campo de seleção "Produto de interesse" antes do campo nome
+- O usuário deve selecionar um produto para prosseguir
+- Validação obrigatória da seleção de produto
+
+### **Array inválido (vazio, nulo, etc.):**
+- É exibida uma mensagem de erro no lugar do formulário
+- O erro é logado no console para debug
+- Mensagem amigável: "Erro no carregamento do formulário!"
+
+### **Estrutura do objeto Product:**
+```typescript
+interface Product {
+  id: number;    // ID único do produto
+  name: string;  // Nome do produto para exibição
+}
+```
+
+---
+
 ## 🚨 Componente dentro de um `ErrorBoundary`
 
 Recomendamos que o componente `MitreFormComponent` seja sempre utilizado dentro de um `ErrorBoundary` para garantir que a aplicação não quebre em caso de falha no carregamento do componente. Também é preciso usar dynamic do next/dynamics para a importação.
@@ -131,7 +166,10 @@ const MitreFormComponent = dynamic(
 
 <ErrorBoundary fallback={<div>Erro ao carregar o formulário</div>}>
   <MitreFormComponent
-    productId={process.env.NEXT_PUBLIC_PRODUCT_ID!}
+    products={[
+      { id: 1, name: "Apartamento 2 quartos" },
+      { id: 2, name: "Casa 3 quartos" }
+    ]}
     apiUrl={process.env.NEXT_PUBLIC_REGISTER_LEADS_URL!}
     apiToken={process.env.NEXT_PUBLIC_REGISTER_LEADS_TOKEN!}
   />

package/dist/index.cjs

@@ -35,7 +35,7 @@ __export(index_exports, {
 module.exports = __toCommonJS(index_exports);
 
 // src/components/Form/index.tsx
-var import_react6 = __toESM(require("react"), 1);
+var import_react7 = __toESM(require("react"), 1);
 
 // src/components/hooks/useError.ts
 var import_react = require("react");
@@ -1110,8 +1110,137 @@ var PhoneInputBase = ({
 };
 var PhoneInput2 = (0, import_react5.forwardRef)(PhoneInputBase);
 
-// src/components/Form/index.tsx
+// src/components/ProductSelect/index.tsx
+var import_react6 = require("react");
+
+// src/components/ProductSelect/styles.ts
+var import_styled_components7 = __toESM(require("styled-components"), 1);
+var FormLabel3 = import_styled_components7.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 Select = import_styled_components7.default.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 = import_styled_components7.default.small`
+  font-size: 0.75rem;
+  line-height: 1.125rem;
+  color: var(--red);
+  margin-top: 0.25rem;
+  display: block;
+`;
+var FormControl3 = import_styled_components7.default.div.withConfig({
+  shouldForwardProp: (prop) => !["isInvalid"].includes(prop)
+})`
+  ${FormLabel3} {
+    ${(props) => props.isInvalid && import_styled_components7.css`
+        color: var(--red);
+      `};
+  }
+
+  ${Select} {
+    ${(props) => props.isInvalid && import_styled_components7.css`
+        border: 1px solid var(--red);
+      `};
+
+    &:focus {
+      ${(props) => props.isInvalid && import_styled_components7.css`
+          border: 1px solid var(--red);
+        `};
+    }
+  }
+`;
+
+// src/components/ProductSelect/index.tsx
 var import_jsx_runtime5 = require("react/jsx-runtime");
+var ProductSelectBase = ({
+  id,
+  label,
+  error,
+  showErrorMessage = true,
+  labelTextColor,
+  backgroundColor,
+  borderColor,
+  focusBorderColor,
+  textColor,
+  products,
+  placeholder = "Selecione um produto",
+  ...rest
+}, ref) => {
+  return /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(FormControl3, { isInvalid: !!error, children: [
+    !!label && /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(FormLabel3, { htmlFor: id, $textColor: labelTextColor, children: label }),
+    /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(
+      Select,
+      {
+        id,
+        ref,
+        "aria-invalid": !!error && showErrorMessage ? "true" : "false",
+        $backgroundColor: backgroundColor,
+        $borderColor: borderColor,
+        $focusBorderColor: focusBorderColor,
+        $textColor: textColor,
+        ...rest,
+        children: [
+          /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("option", { value: "", disabled: true, children: placeholder }),
+          products.map((product) => /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("option", { value: product.id, children: product.name }, product.id))
+        ]
+      }
+    ),
+    !!error && showErrorMessage && /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(FormErrorMessage3, { "data-testid": "error-message", children: typeof error === "string" ? error : error.message })
+  ] });
+};
+var ProductSelect = (0, import_react6.forwardRef)(ProductSelectBase);
+
+// src/components/Form/index.tsx
+var import_jsx_runtime6 = require("react/jsx-runtime");
 var phoneUtil = import_google_libphonenumber.PhoneNumberUtil.getInstance();
 var isPhoneValid = (phone) => {
   try {
@@ -1121,7 +1250,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({
@@ -1136,9 +1265,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 MitreFormComponent = import_react6.default.forwardRef(({
-  productId,
+var schema = yup.object().shape(baseSchema);
+var MitreFormComponent = import_react7.default.forwardRef(({
+  products,
   apiUrl,
   apiToken,
   showHeader = true,
@@ -1153,26 +1287,58 @@ var MitreFormComponent = import_react6.default.forwardRef(({
   inputPlaceholderColor = "var(--gray-100)",
   inputTextColor = "var(--black)"
 }, ref) => {
-  const [loading, setIsLoading] = (0, import_react6.useState)(false);
+  const [loading, setIsLoading] = (0, import_react7.useState)(false);
   const { error, handleError, clearError } = useError();
-  const [successMessage, setSuccessMessage] = (0, import_react6.useState)("");
-  const [formKey, setFormKey] = (0, import_react6.useState)(0);
-  const [utm, setUtm] = (0, import_react6.useState)({ utm_source: "direto", createdAt: (/* @__PURE__ */ new Date()).toISOString() });
+  const [successMessage, setSuccessMessage] = (0, import_react7.useState)("");
+  const [formKey, setFormKey] = (0, import_react7.useState)(0);
+  const [selectedProductId, setSelectedProductId] = (0, import_react7.useState)(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] = (0, import_react7.useState)({ utm_source: "direto", createdAt: (/* @__PURE__ */ new Date()).toISOString() });
+  const formSchema = products && products.length > 1 ? schemaWithProduct : schema;
   const { control, register, handleSubmit, formState: { errors }, reset, clearErrors } = (0, import_react_hook_form.useForm)({
-    resolver: (0, import_yup.yupResolver)(schema),
+    resolver: (0, import_yup.yupResolver)(formSchema),
     mode: "onSubmit"
   });
-  import_react6.default.useEffect(() => {
+  import_react7.default.useEffect(() => {
     if (!isBrowser()) return;
     const { data } = resolveUtmWithPriority(/* @__PURE__ */ new Date());
     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,
@@ -1185,23 +1351,36 @@ var MitreFormComponent = import_react6.default.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
       };
@@ -1226,10 +1405,21 @@ var MitreFormComponent = import_react6.default.forwardRef(({
       setIsLoading(false);
     }
   };
-  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)(
+  if (productsValidationError) {
+    console.error("Erro na valida\xE7\xE3o dos produtos:", productsValidationError);
+    return /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(import_jsx_runtime6.Fragment, { children: [
+      /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(global_default, {}),
+      /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(GlobalStyles, {}),
+      /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(FormContainer, { $backgroundColor: backgroundColor, $innerPadding: innerPadding, ref, children: /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(HeaderContainer, { children: [
+        /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(Title, { $textColor: textColor, children: "Erro no carregamento do formul\xE1rio!" }),
+        /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(Text, { $textColor: textColor, children: "N\xE3o foi poss\xEDvel carregar o formul\xE1rio. Tente novamente mais tarde." })
+      ] }) })
+    ] });
+  }
+  return /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(import_jsx_runtime6.Fragment, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(global_default, {}),
+    /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(GlobalStyles, {}),
+    error && /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
       Alert,
       {
         type: "error",
@@ -1239,7 +1429,7 @@ var MitreFormComponent = import_react6.default.forwardRef(({
         children: error.message
       }
     ),
-    successMessage && /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+    successMessage && /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
       Alert,
       {
         type: "success",
@@ -1249,13 +1439,30 @@ var MitreFormComponent = import_react6.default.forwardRef(({
         children: successMessage
       }
     ),
-    /* @__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_runtime6.jsxs)(FormContainer, { $backgroundColor: backgroundColor, $innerPadding: innerPadding, ref, children: [
+      showHeader && /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(HeaderContainer, { children: [
+        /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(Title, { $textColor: textColor, children: "Atendimento por mensagem" }),
+        /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(Text, { $textColor: textColor, children: "Informe seus dados e retornaremos a mensagem." })
       ] }),
-      /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(Form, { $textColor: textColor, onSubmit: handleSubmit(sendMessage), noValidate: true, children: [
-        /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+      /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(Form, { $textColor: textColor, onSubmit: handleSubmit(sendMessage), noValidate: true, children: [
+        products.length > 1 && /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+          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__ */ (0, import_jsx_runtime6.jsx)(
           Input2,
           {
             id: "name",
@@ -1273,7 +1480,7 @@ var MitreFormComponent = import_react6.default.forwardRef(({
             inputTextColor
           }
         ),
-        /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
           Input2,
           {
             id: "email",
@@ -1292,7 +1499,7 @@ var MitreFormComponent = import_react6.default.forwardRef(({
             inputTextColor
           }
         ),
-        /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
           import_react_hook_form.Controller,
           {
             name: "phone",
@@ -1301,7 +1508,7 @@ var MitreFormComponent = import_react6.default.forwardRef(({
             shouldUnregister: true,
             render: ({ field }) => {
               const errorMsg = errors.phone?.inputValue?.message || errors.phone?.phone?.message || errors.phone?.message;
-              return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+              return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
                 PhoneInput2,
                 {
                   id: "phone",
@@ -1324,12 +1531,12 @@ var MitreFormComponent = import_react6.default.forwardRef(({
           },
           formKey
         ),
-        /* @__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: buttonBackgroundColor, color: buttonTextColor, type: "submit", isSubmitting: loading, children: "Enviar mensagem" }) }),
-        /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("p", { children: [
+        /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("h6", { children: "* Campos de preenchimento obrigat\xF3rio." }),
+        /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(ButtonContainer, { children: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(Button2, { bgColor: buttonBackgroundColor, color: buttonTextColor, type: "submit", isSubmitting: loading, children: "Enviar mensagem" }) }),
+        /* @__PURE__ */ (0, import_jsx_runtime6.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_runtime5.jsx)(
+          /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
             "a",
             {
               href: "https://www.mitrerealty.com.br/politica-de-privacidade",