mitre-form-component 0.0.45 → 0.0.48

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
package/README.md CHANGED
@@ -39,8 +39,12 @@ Aqui está um exemplo de uso básico dentro do projeto:
39
39
  ```tsx
40
40
  import { MitreFormComponent } from "mitre-form-component-next";
41
41
 
42
+ // array de produtos
43
+ const products = JSON.parse(process.env.VITE_PRODUCT_ID!);
44
+ // Exemplo de VITE_PRODUCT_ID: '[{"id":1,"name":"Apartamento 2 quartos"},{"id":2,"name":"Casa 3 quartos"}]'
45
+
42
46
  <MitreFormComponent
43
- productId={process.env.VITE_PRODUCT_ID!}
47
+ products={products}
44
48
  apiUrl={process.env.VITE_REGISTER_LEADS_URL!}
45
49
  apiToken={process.env.VITE_REGISTER_LEADS_TOKEN!}
46
50
  showHeader={true} //[Opcional] Se irá exibir ou não o cabeçalho com "Atendimento por Mensagem - Informe seus dados e retornaremos a mensagem."
@@ -54,8 +58,6 @@ import { MitreFormComponent } from "mitre-form-component-next";
54
58
  inputFocusBorderColor="#76B" //[Opcional]
55
59
  inputPlaceholderColor="#FFF" //[Opcional]
56
60
  inputTextColor="#FFF" //[Opcional]
57
- onSuccess={(requestBody, leadId) => console.log('Formulário enviado com sucesso!', requestBody, leadId)} //[Opcional]
58
- onError={(error) => console.error('Erro ao enviar formulário:', error)} //[Opcional]
59
61
  />;
60
62
  ```
61
63
 
@@ -98,7 +100,9 @@ Depois de instalar a biblioteca, você pode começar a usá-la diretamente no se
98
100
 
99
101
  O `MitreFormComponent` aceita as seguintes props:
100
102
 
101
- - **`productId`** (string): O ID do produto relacionado ao empreendimento.
103
+ - **`products`** (array): Array de objetos contendo os produtos disponíveis. Cada produto deve ter `id` (number) e `name` (string).
104
+ - Se o array contém apenas 1 produto: o formulário usa automaticamente esse produto
105
+ - Se o array contém múltiplos produtos: é exibido um seletor para o usuário escolher
102
106
  - **`apiUrl`** (string): URL da API para registro dos leads.
103
107
  - **`apiToken`** (string): Token de autenticação da API.
104
108
  - **`showHeader`** (opcional, boolean): Controla se o cabeçalho será mostrado. Padrão: `false`.
@@ -112,8 +116,35 @@ O `MitreFormComponent` aceita as seguintes props:
112
116
  - **`inputFocusBorderColor`** (opcional, string): Cor da borda do input quando selecionado. Padrão: `#F6C76B`.
113
117
  - **`inputPlaceholderColor`** (opcional, string): Cor do placeholder do input. Padrão: `#B6B6B6`.
114
118
  - **`inputTextColor`** (opcional, string): Cor do texto do input. Padrão: `#2F2F2F`.
115
- - **`onSuccess`** (opcional, função): Callback executado quando o formulário é enviado com sucesso. Recebe dois parâmetros: `requestBody` (objeto com os dados enviados) e `leadId` (string com o ID do lead retornado pela API).
116
- - **`onError`** (opcional, função): Callback executado quando ocorre um erro no envio do formulário. Recebe um objeto `Error` como parâmetro.
119
+
120
+ ---
121
+
122
+ ## 🎯 Comportamento dos Produtos
123
+
124
+ O componente possui comportamento inteligente baseado na quantidade de produtos fornecidos:
125
+
126
+ ### **Array com 1 produto:**
127
+ - O formulário usa automaticamente o único produto disponível
128
+ - Não é exibido seletor de produto
129
+ - O usuário preenche apenas nome, email e telefone
130
+
131
+ ### **Array com múltiplos produtos:**
132
+ - É exibido um campo de seleção "Produto de interesse" antes do campo nome
133
+ - O usuário deve selecionar um produto para prosseguir
134
+ - Validação obrigatória da seleção de produto
135
+
136
+ ### **Array inválido (vazio, nulo, etc.):**
137
+ - É exibida uma mensagem de erro no lugar do formulário
138
+ - O erro é logado no console para debug
139
+ - Mensagem amigável: "Erro no carregamento do formulário!"
140
+
141
+ ### **Estrutura do objeto Product:**
142
+ ```typescript
143
+ interface Product {
144
+ id: number; // ID único do produto
145
+ name: string; // Nome do produto para exibição
146
+ }
147
+ ```
117
148
 
118
149
  ---
119
150
 
@@ -135,7 +166,10 @@ const MitreFormComponent = dynamic(
135
166
 
136
167
  <ErrorBoundary fallback={<div>Erro ao carregar o formulário</div>}>
137
168
  <MitreFormComponent
138
- productId={process.env.NEXT_PUBLIC_PRODUCT_ID!}
169
+ products={[
170
+ { id: 1, name: "Apartamento 2 quartos" },
171
+ { id: 2, name: "Casa 3 quartos" }
172
+ ]}
139
173
  apiUrl={process.env.NEXT_PUBLIC_REGISTER_LEADS_URL!}
140
174
  apiToken={process.env.NEXT_PUBLIC_REGISTER_LEADS_TOKEN!}
141
175
  />
package/dist/index.cjs CHANGED
@@ -35,7 +35,7 @@ __export(index_exports, {
35
35
  module.exports = __toCommonJS(index_exports);
36
36
 
37
37
  // src/components/Form/index.tsx
38
- var import_react6 = __toESM(require("react"), 1);
38
+ var import_react7 = __toESM(require("react"), 1);
39
39
 
40
40
  // src/components/hooks/useError.ts
41
41
  var import_react = require("react");
@@ -1110,8 +1110,137 @@ var PhoneInputBase = ({
1110
1110
  };
1111
1111
  var PhoneInput2 = (0, import_react5.forwardRef)(PhoneInputBase);
1112
1112
 
1113
- // src/components/Form/index.tsx
1113
+ // src/components/ProductSelect/index.tsx
1114
+ var import_react6 = require("react");
1115
+
1116
+ // src/components/ProductSelect/styles.ts
1117
+ var import_styled_components7 = __toESM(require("styled-components"), 1);
1118
+ var FormLabel3 = import_styled_components7.default.label`
1119
+ font-family: "Montserrat", sans-serif;
1120
+ font-style: normal;
1121
+ font-weight: 500;
1122
+ font-size: 1rem;
1123
+ color: ${(props) => props.$textColor || "var(--black)"};
1124
+ display: block;
1125
+ margin-bottom: 0.5rem;
1126
+ text-align: left;
1127
+ `;
1128
+ var Select = import_styled_components7.default.select`
1129
+ font-family: "Montserrat", sans-serif;
1130
+ font-style: normal;
1131
+ font-weight: 500;
1132
+ font-size: 1rem;
1133
+ line-height: 1.5rem;
1134
+ background: ${(props) => props.$backgroundColor || "var(--white)"};
1135
+ color: ${(props) => props.$textColor || "var(--black)"};
1136
+ padding: 0.5rem 3rem 0.5rem 0.5rem; /* Aumentado padding-right para 3rem */
1137
+ border-radius: 0.125rem;
1138
+ border: 1px solid ${(props) => props.$borderColor || "transparent"};
1139
+ display: block;
1140
+ height: 3.125rem;
1141
+ width: 100%;
1142
+ cursor: pointer;
1143
+
1144
+ /* Remover a seta padrão do navegador */
1145
+ -webkit-appearance: none;
1146
+ -moz-appearance: none;
1147
+ appearance: none;
1148
+
1149
+ /* Adicionar seta personalizada maior */
1150
+ 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");
1151
+ background-repeat: no-repeat;
1152
+ background-position: right 1rem center; /* Posicionado a 1rem da direita */
1153
+ background-size: 1.25rem; /* Tamanho da seta aumentado para 1.25rem */
1154
+
1155
+ &:focus {
1156
+ border-radius: 0.125rem;
1157
+ border: 2px solid ${(props) => props.$focusBorderColor || "var(--yellow-500)"};
1158
+ outline: none;
1159
+ }
1160
+
1161
+ /* Estilo para option disabled (placeholder) */
1162
+ option:disabled {
1163
+ color: var(--gray-100);
1164
+ font-weight: 800;
1165
+ }
1166
+
1167
+ /* Estilo para options normais */
1168
+ option:not(:disabled) {
1169
+ color: ${(props) => props.$textColor || "var(--black)"};
1170
+ font-weight: 500;
1171
+ }
1172
+ `;
1173
+ var FormErrorMessage3 = import_styled_components7.default.small`
1174
+ font-size: 0.75rem;
1175
+ line-height: 1.125rem;
1176
+ color: var(--red);
1177
+ margin-top: 0.25rem;
1178
+ display: block;
1179
+ `;
1180
+ var FormControl3 = import_styled_components7.default.div.withConfig({
1181
+ shouldForwardProp: (prop) => !["isInvalid"].includes(prop)
1182
+ })`
1183
+ ${FormLabel3} {
1184
+ ${(props) => props.isInvalid && import_styled_components7.css`
1185
+ color: var(--red);
1186
+ `};
1187
+ }
1188
+
1189
+ ${Select} {
1190
+ ${(props) => props.isInvalid && import_styled_components7.css`
1191
+ border: 1px solid var(--red);
1192
+ `};
1193
+
1194
+ &:focus {
1195
+ ${(props) => props.isInvalid && import_styled_components7.css`
1196
+ border: 1px solid var(--red);
1197
+ `};
1198
+ }
1199
+ }
1200
+ `;
1201
+
1202
+ // src/components/ProductSelect/index.tsx
1114
1203
  var import_jsx_runtime5 = require("react/jsx-runtime");
1204
+ var ProductSelectBase = ({
1205
+ id,
1206
+ label,
1207
+ error,
1208
+ showErrorMessage = true,
1209
+ labelTextColor,
1210
+ backgroundColor,
1211
+ borderColor,
1212
+ focusBorderColor,
1213
+ textColor,
1214
+ products,
1215
+ placeholder = "Selecione um produto",
1216
+ ...rest
1217
+ }, ref) => {
1218
+ return /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(FormControl3, { isInvalid: !!error, children: [
1219
+ !!label && /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(FormLabel3, { htmlFor: id, $textColor: labelTextColor, children: label }),
1220
+ /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(
1221
+ Select,
1222
+ {
1223
+ id,
1224
+ ref,
1225
+ "aria-invalid": !!error && showErrorMessage ? "true" : "false",
1226
+ $backgroundColor: backgroundColor,
1227
+ $borderColor: borderColor,
1228
+ $focusBorderColor: focusBorderColor,
1229
+ $textColor: textColor,
1230
+ ...rest,
1231
+ children: [
1232
+ /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("option", { value: "", disabled: true, children: placeholder }),
1233
+ products.map((product) => /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("option", { value: product.id, children: product.name }, product.id))
1234
+ ]
1235
+ }
1236
+ ),
1237
+ !!error && showErrorMessage && /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(FormErrorMessage3, { "data-testid": "error-message", children: typeof error === "string" ? error : error.message })
1238
+ ] });
1239
+ };
1240
+ var ProductSelect = (0, import_react6.forwardRef)(ProductSelectBase);
1241
+
1242
+ // src/components/Form/index.tsx
1243
+ var import_jsx_runtime6 = require("react/jsx-runtime");
1115
1244
  var phoneUtil = import_google_libphonenumber.PhoneNumberUtil.getInstance();
1116
1245
  var isPhoneValid = (phone) => {
1117
1246
  try {
@@ -1121,7 +1250,7 @@ var isPhoneValid = (phone) => {
1121
1250
  return false;
1122
1251
  }
1123
1252
  };
1124
- var schema = yup.object().shape({
1253
+ var baseSchema = {
1125
1254
  name: yup.string().required("Nome \xE9 obrigat\xF3rio"),
1126
1255
  email: yup.string().required("Email \xE9 obrigat\xF3rio").email("Email inv\xE1lido"),
1127
1256
  phone: yup.object().shape({
@@ -1136,9 +1265,14 @@ var schema = yup.object().shape({
1136
1265
  inputValue: yup.string().required("Telefone \xE9 obrigat\xF3rio!"),
1137
1266
  dialCode: yup.string().required("C\xF3digo de pa\xEDs \xE9 obrigat\xF3rio")
1138
1267
  })
1268
+ };
1269
+ var schemaWithProduct = yup.object().shape({
1270
+ ...baseSchema,
1271
+ productId: yup.string().required("Produto \xE9 obrigat\xF3rio")
1139
1272
  });
1140
- var MitreFormComponent = import_react6.default.forwardRef(({
1141
- productId,
1273
+ var schema = yup.object().shape(baseSchema);
1274
+ var MitreFormComponent = import_react7.default.forwardRef(({
1275
+ products,
1142
1276
  apiUrl,
1143
1277
  apiToken,
1144
1278
  showHeader = true,
@@ -1151,30 +1285,60 @@ var MitreFormComponent = import_react6.default.forwardRef(({
1151
1285
  inputBorderColor = "var(--transparent)",
1152
1286
  inputFocusBorderColor = "var(--yellow-500)",
1153
1287
  inputPlaceholderColor = "var(--gray-100)",
1154
- inputTextColor = "var(--black)",
1155
- onSuccess,
1156
- onError
1288
+ inputTextColor = "var(--black)"
1157
1289
  }, ref) => {
1158
- const [loading, setIsLoading] = (0, import_react6.useState)(false);
1290
+ const [loading, setIsLoading] = (0, import_react7.useState)(false);
1159
1291
  const { error, handleError, clearError } = useError();
1160
- const [successMessage, setSuccessMessage] = (0, import_react6.useState)("");
1161
- const [formKey, setFormKey] = (0, import_react6.useState)(0);
1162
- const [utm, setUtm] = (0, import_react6.useState)({ utm_source: "direto", createdAt: (/* @__PURE__ */ new Date()).toISOString() });
1292
+ const [successMessage, setSuccessMessage] = (0, import_react7.useState)("");
1293
+ const [formKey, setFormKey] = (0, import_react7.useState)(0);
1294
+ const [selectedProductId, setSelectedProductId] = (0, import_react7.useState)(null);
1295
+ const validateProducts = () => {
1296
+ if (!products) {
1297
+ return "Lista de produtos n\xE3o foi fornecida";
1298
+ }
1299
+ if (!Array.isArray(products)) {
1300
+ return "Lista de produtos deve ser um array";
1301
+ }
1302
+ if (products.length === 0) {
1303
+ return "Lista de produtos n\xE3o pode estar vazia";
1304
+ }
1305
+ for (let i = 0; i < products.length; i++) {
1306
+ const product = products[i];
1307
+ if (!product) {
1308
+ return `Produto na posi\xE7\xE3o ${i} \xE9 inv\xE1lido (nulo/undefined)`;
1309
+ }
1310
+ if (typeof product.id !== "number" || product.id <= 0) {
1311
+ return `Produto na posi\xE7\xE3o ${i} possui ID inv\xE1lido (deve ser um n\xFAmero positivo)`;
1312
+ }
1313
+ if (typeof product.name !== "string" || product.name.trim().length === 0) {
1314
+ return `Produto na posi\xE7\xE3o ${i} possui nome inv\xE1lido (deve ser uma string n\xE3o vazia)`;
1315
+ }
1316
+ }
1317
+ return null;
1318
+ };
1319
+ const productsValidationError = validateProducts();
1320
+ const [utm, setUtm] = (0, import_react7.useState)({ utm_source: "direto", createdAt: (/* @__PURE__ */ new Date()).toISOString() });
1321
+ const formSchema = products && products.length > 1 ? schemaWithProduct : schema;
1163
1322
  const { control, register, handleSubmit, formState: { errors }, reset, clearErrors } = (0, import_react_hook_form.useForm)({
1164
- resolver: (0, import_yup.yupResolver)(schema),
1323
+ resolver: (0, import_yup.yupResolver)(formSchema),
1165
1324
  mode: "onSubmit"
1166
1325
  });
1167
- import_react6.default.useEffect(() => {
1326
+ import_react7.default.useEffect(() => {
1168
1327
  if (!isBrowser()) return;
1169
1328
  const { data } = resolveUtmWithPriority(/* @__PURE__ */ new Date());
1170
1329
  setUtm(data);
1171
1330
  }, []);
1172
1331
  const resetForm = () => {
1173
- reset({
1332
+ const resetData = {
1174
1333
  name: "",
1175
1334
  email: "",
1176
1335
  phone: { phone: "", inputValue: "", dialCode: "" }
1177
- }, {
1336
+ };
1337
+ if (products && products.length > 1) {
1338
+ resetData.productId = "";
1339
+ setSelectedProductId(null);
1340
+ }
1341
+ reset(resetData, {
1178
1342
  keepErrors: false,
1179
1343
  keepDirty: false,
1180
1344
  keepTouched: false,
@@ -1187,26 +1351,40 @@ var MitreFormComponent = import_react6.default.forwardRef(({
1187
1351
  setFormKey((k) => k + 1);
1188
1352
  };
1189
1353
  const sendMessage = async (data) => {
1190
- const { name, email, phone } = data;
1354
+ const { name, email, phone, productId } = data;
1191
1355
  const phoneValue = phone.inputValue;
1192
1356
  const phoneDigitsOnly = phoneValue?.replace(/\D/g, "") || "";
1193
1357
  const message = "Gostaria de mais informa\xE7\xF5es sobre o produto";
1194
1358
  try {
1195
1359
  setIsLoading(true);
1196
- if (!productId || !apiToken) {
1360
+ if (!products || products.length === 0 || !apiToken) {
1197
1361
  throw new Error("Par\xE2metros obrigat\xF3rios n\xE3o informados");
1198
1362
  }
1363
+ let selectedProduct;
1364
+ if (products.length === 1) {
1365
+ selectedProduct = products[0];
1366
+ } else {
1367
+ if (!productId) {
1368
+ throw new Error("Produto deve ser selecionado");
1369
+ }
1370
+ const foundProduct = products.find((p) => p.id.toString() === productId);
1371
+ if (!foundProduct) {
1372
+ throw new Error("Produto selecionado n\xE3o encontrado");
1373
+ }
1374
+ selectedProduct = foundProduct;
1375
+ }
1199
1376
  const requestBody = {
1200
1377
  name,
1201
1378
  email,
1202
1379
  phone: phoneDigitsOnly,
1203
1380
  message,
1204
- productId,
1381
+ productId: selectedProduct.id.toString(),
1205
1382
  utm_source: utm.utm_source,
1206
1383
  utm_campaign: utm.utm_campaign,
1207
1384
  utm_medium: utm.utm_medium,
1208
1385
  utm_term: utm.utm_term
1209
1386
  };
1387
+ console.log("requestBody = " + JSON.stringify(requestBody));
1210
1388
  const response = await fetch(`${apiUrl}/leads`, {
1211
1389
  method: "POST",
1212
1390
  headers: {
@@ -1216,25 +1394,32 @@ var MitreFormComponent = import_react6.default.forwardRef(({
1216
1394
  body: JSON.stringify(requestBody)
1217
1395
  });
1218
1396
  if (!response.ok) {
1397
+ console.log("response = " + JSON.stringify(response));
1219
1398
  throw new Error("Falha ao enviar a mensagem!");
1220
1399
  }
1221
- const responseData = await response.json();
1222
- const leadId = responseData.leadId || responseData.id || "";
1223
1400
  setSuccessMessage("Mensagem enviada com sucesso!");
1224
1401
  resetForm();
1225
- onSuccess?.(requestBody, leadId);
1226
1402
  } catch (err) {
1227
- const error2 = err instanceof Error ? err : new Error("Erro desconhecido");
1228
1403
  handleError(err);
1229
- onError?.(error2);
1230
1404
  } finally {
1231
1405
  setIsLoading(false);
1232
1406
  }
1233
1407
  };
1234
- return /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(import_jsx_runtime5.Fragment, { children: [
1235
- /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(global_default, {}),
1236
- /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(GlobalStyles, {}),
1237
- error && /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
1408
+ if (productsValidationError) {
1409
+ console.error("Erro na valida\xE7\xE3o dos produtos:", productsValidationError);
1410
+ return /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(import_jsx_runtime6.Fragment, { children: [
1411
+ /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(global_default, {}),
1412
+ /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(GlobalStyles, {}),
1413
+ /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(FormContainer, { $backgroundColor: backgroundColor, $innerPadding: innerPadding, ref, children: /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(HeaderContainer, { children: [
1414
+ /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(Title, { $textColor: textColor, children: "Erro no carregamento do formul\xE1rio!" }),
1415
+ /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(Text, { $textColor: textColor, children: "N\xE3o foi poss\xEDvel carregar o formul\xE1rio. Tente novamente mais tarde." })
1416
+ ] }) })
1417
+ ] });
1418
+ }
1419
+ return /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(import_jsx_runtime6.Fragment, { children: [
1420
+ /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(global_default, {}),
1421
+ /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(GlobalStyles, {}),
1422
+ error && /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
1238
1423
  Alert,
1239
1424
  {
1240
1425
  type: "error",
@@ -1244,7 +1429,7 @@ var MitreFormComponent = import_react6.default.forwardRef(({
1244
1429
  children: error.message
1245
1430
  }
1246
1431
  ),
1247
- successMessage && /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
1432
+ successMessage && /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
1248
1433
  Alert,
1249
1434
  {
1250
1435
  type: "success",
@@ -1254,13 +1439,30 @@ var MitreFormComponent = import_react6.default.forwardRef(({
1254
1439
  children: successMessage
1255
1440
  }
1256
1441
  ),
1257
- /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(FormContainer, { $backgroundColor: backgroundColor, $innerPadding: innerPadding, ref, children: [
1258
- showHeader && /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(HeaderContainer, { children: [
1259
- /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(Title, { $textColor: textColor, children: "Atendimento por mensagem" }),
1260
- /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(Text, { $textColor: textColor, children: "Informe seus dados e retornaremos a mensagem." })
1442
+ /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(FormContainer, { $backgroundColor: backgroundColor, $innerPadding: innerPadding, ref, children: [
1443
+ showHeader && /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(HeaderContainer, { children: [
1444
+ /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(Title, { $textColor: textColor, children: "Atendimento por mensagem" }),
1445
+ /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(Text, { $textColor: textColor, children: "Informe seus dados e retornaremos a mensagem." })
1261
1446
  ] }),
1262
- /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(Form, { $textColor: textColor, onSubmit: handleSubmit(sendMessage), noValidate: true, children: [
1263
- /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
1447
+ /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(Form, { $textColor: textColor, onSubmit: handleSubmit(sendMessage), noValidate: true, children: [
1448
+ products.length > 1 && /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
1449
+ ProductSelect,
1450
+ {
1451
+ id: "productId",
1452
+ label: "Produto de interesse *",
1453
+ placeholder: "Selecione um produto",
1454
+ ...register("productId"),
1455
+ error: errors.productId?.message,
1456
+ products,
1457
+ required: true,
1458
+ labelTextColor: textColor,
1459
+ backgroundColor: inputBackgroundColor,
1460
+ borderColor: inputBorderColor,
1461
+ focusBorderColor: inputFocusBorderColor,
1462
+ textColor: inputTextColor
1463
+ }
1464
+ ),
1465
+ /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
1264
1466
  Input2,
1265
1467
  {
1266
1468
  id: "name",
@@ -1278,7 +1480,7 @@ var MitreFormComponent = import_react6.default.forwardRef(({
1278
1480
  inputTextColor
1279
1481
  }
1280
1482
  ),
1281
- /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
1483
+ /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
1282
1484
  Input2,
1283
1485
  {
1284
1486
  id: "email",
@@ -1297,7 +1499,7 @@ var MitreFormComponent = import_react6.default.forwardRef(({
1297
1499
  inputTextColor
1298
1500
  }
1299
1501
  ),
1300
- /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
1502
+ /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
1301
1503
  import_react_hook_form.Controller,
1302
1504
  {
1303
1505
  name: "phone",
@@ -1306,7 +1508,7 @@ var MitreFormComponent = import_react6.default.forwardRef(({
1306
1508
  shouldUnregister: true,
1307
1509
  render: ({ field }) => {
1308
1510
  const errorMsg = errors.phone?.inputValue?.message || errors.phone?.phone?.message || errors.phone?.message;
1309
- return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
1511
+ return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
1310
1512
  PhoneInput2,
1311
1513
  {
1312
1514
  id: "phone",
@@ -1329,12 +1531,12 @@ var MitreFormComponent = import_react6.default.forwardRef(({
1329
1531
  },
1330
1532
  formKey
1331
1533
  ),
1332
- /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("h6", { children: "* Campos de preenchimento obrigat\xF3rio." }),
1333
- /* @__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" }) }),
1334
- /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("p", { children: [
1534
+ /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("h6", { children: "* Campos de preenchimento obrigat\xF3rio." }),
1535
+ /* @__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" }) }),
1536
+ /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("p", { children: [
1335
1537
  "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",
1336
1538
  " ",
1337
- /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
1539
+ /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
1338
1540
  "a",
1339
1541
  {
1340
1542
  href: "https://www.mitrerealty.com.br/politica-de-privacidade",