mitre-form-component 0.0.44 → 0.0.45

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,12 +39,8 @@ 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
- // Definir array de produtos (pode vir de variável de ambiente)
43
- const products = JSON.parse(process.env.VITE_PRODUCTS!);
44
- // Exemplo de VITE_PRODUCTS: '[{"id":1,"name":"Apartamento 2 quartos"},{"id":2,"name":"Casa 3 quartos"}]'
45
-
46
42
  <MitreFormComponent
47
- products={products}
43
+ productId={process.env.VITE_PRODUCT_ID!}
48
44
  apiUrl={process.env.VITE_REGISTER_LEADS_URL!}
49
45
  apiToken={process.env.VITE_REGISTER_LEADS_TOKEN!}
50
46
  showHeader={true} //[Opcional] Se irá exibir ou não o cabeçalho com "Atendimento por Mensagem - Informe seus dados e retornaremos a mensagem."
@@ -58,6 +54,8 @@ const products = JSON.parse(process.env.VITE_PRODUCTS!);
58
54
  inputFocusBorderColor="#76B" //[Opcional]
59
55
  inputPlaceholderColor="#FFF" //[Opcional]
60
56
  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]
61
59
  />;
62
60
  ```
63
61
 
@@ -100,9 +98,7 @@ Depois de instalar a biblioteca, você pode começar a usá-la diretamente no se
100
98
 
101
99
  O `MitreFormComponent` aceita as seguintes props:
102
100
 
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
101
+ - **`productId`** (string): O ID do produto relacionado ao empreendimento.
106
102
  - **`apiUrl`** (string): URL da API para registro dos leads.
107
103
  - **`apiToken`** (string): Token de autenticação da API.
108
104
  - **`showHeader`** (opcional, boolean): Controla se o cabeçalho será mostrado. Padrão: `false`.
@@ -116,35 +112,8 @@ O `MitreFormComponent` aceita as seguintes props:
116
112
  - **`inputFocusBorderColor`** (opcional, string): Cor da borda do input quando selecionado. Padrão: `#F6C76B`.
117
113
  - **`inputPlaceholderColor`** (opcional, string): Cor do placeholder do input. Padrão: `#B6B6B6`.
118
114
  - **`inputTextColor`** (opcional, string): Cor do texto do input. Padrão: `#2F2F2F`.
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
- ```
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.
148
117
 
149
118
  ---
150
119
 
@@ -166,10 +135,7 @@ const MitreFormComponent = dynamic(
166
135
 
167
136
  <ErrorBoundary fallback={<div>Erro ao carregar o formulário</div>}>
168
137
  <MitreFormComponent
169
- products={[
170
- { id: 1, name: "Apartamento 2 quartos" },
171
- { id: 2, name: "Casa 3 quartos" }
172
- ]}
138
+ productId={process.env.NEXT_PUBLIC_PRODUCT_ID!}
173
139
  apiUrl={process.env.NEXT_PUBLIC_REGISTER_LEADS_URL!}
174
140
  apiToken={process.env.NEXT_PUBLIC_REGISTER_LEADS_TOKEN!}
175
141
  />
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_react7 = __toESM(require("react"), 1);
38
+ var import_react6 = __toESM(require("react"), 1);
39
39
 
40
40
  // src/components/hooks/useError.ts
41
41
  var import_react = require("react");
@@ -1110,137 +1110,8 @@ var PhoneInputBase = ({
1110
1110
  };
1111
1111
  var PhoneInput2 = (0, import_react5.forwardRef)(PhoneInputBase);
1112
1112
 
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
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
1113
  // src/components/Form/index.tsx
1243
- var import_jsx_runtime6 = require("react/jsx-runtime");
1114
+ var import_jsx_runtime5 = require("react/jsx-runtime");
1244
1115
  var phoneUtil = import_google_libphonenumber.PhoneNumberUtil.getInstance();
1245
1116
  var isPhoneValid = (phone) => {
1246
1117
  try {
@@ -1250,7 +1121,7 @@ var isPhoneValid = (phone) => {
1250
1121
  return false;
1251
1122
  }
1252
1123
  };
1253
- var baseSchema = {
1124
+ var schema = yup.object().shape({
1254
1125
  name: yup.string().required("Nome \xE9 obrigat\xF3rio"),
1255
1126
  email: yup.string().required("Email \xE9 obrigat\xF3rio").email("Email inv\xE1lido"),
1256
1127
  phone: yup.object().shape({
@@ -1265,14 +1136,9 @@ var baseSchema = {
1265
1136
  inputValue: yup.string().required("Telefone \xE9 obrigat\xF3rio!"),
1266
1137
  dialCode: yup.string().required("C\xF3digo de pa\xEDs \xE9 obrigat\xF3rio")
1267
1138
  })
1268
- };
1269
- var schemaWithProduct = yup.object().shape({
1270
- ...baseSchema,
1271
- productId: yup.string().required("Produto \xE9 obrigat\xF3rio")
1272
1139
  });
1273
- var schema = yup.object().shape(baseSchema);
1274
- var MitreFormComponent = import_react7.default.forwardRef(({
1275
- products,
1140
+ var MitreFormComponent = import_react6.default.forwardRef(({
1141
+ productId,
1276
1142
  apiUrl,
1277
1143
  apiToken,
1278
1144
  showHeader = true,
@@ -1285,60 +1151,30 @@ var MitreFormComponent = import_react7.default.forwardRef(({
1285
1151
  inputBorderColor = "var(--transparent)",
1286
1152
  inputFocusBorderColor = "var(--yellow-500)",
1287
1153
  inputPlaceholderColor = "var(--gray-100)",
1288
- inputTextColor = "var(--black)"
1154
+ inputTextColor = "var(--black)",
1155
+ onSuccess,
1156
+ onError
1289
1157
  }, ref) => {
1290
- const [loading, setIsLoading] = (0, import_react7.useState)(false);
1158
+ const [loading, setIsLoading] = (0, import_react6.useState)(false);
1291
1159
  const { error, handleError, clearError } = useError();
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;
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() });
1322
1163
  const { control, register, handleSubmit, formState: { errors }, reset, clearErrors } = (0, import_react_hook_form.useForm)({
1323
- resolver: (0, import_yup.yupResolver)(formSchema),
1164
+ resolver: (0, import_yup.yupResolver)(schema),
1324
1165
  mode: "onSubmit"
1325
1166
  });
1326
- import_react7.default.useEffect(() => {
1167
+ import_react6.default.useEffect(() => {
1327
1168
  if (!isBrowser()) return;
1328
1169
  const { data } = resolveUtmWithPriority(/* @__PURE__ */ new Date());
1329
1170
  setUtm(data);
1330
1171
  }, []);
1331
1172
  const resetForm = () => {
1332
- const resetData = {
1173
+ reset({
1333
1174
  name: "",
1334
1175
  email: "",
1335
1176
  phone: { phone: "", inputValue: "", dialCode: "" }
1336
- };
1337
- if (products && products.length > 1) {
1338
- resetData.productId = "";
1339
- setSelectedProductId(null);
1340
- }
1341
- reset(resetData, {
1177
+ }, {
1342
1178
  keepErrors: false,
1343
1179
  keepDirty: false,
1344
1180
  keepTouched: false,
@@ -1351,40 +1187,26 @@ var MitreFormComponent = import_react7.default.forwardRef(({
1351
1187
  setFormKey((k) => k + 1);
1352
1188
  };
1353
1189
  const sendMessage = async (data) => {
1354
- const { name, email, phone, productId } = data;
1190
+ const { name, email, phone } = data;
1355
1191
  const phoneValue = phone.inputValue;
1356
1192
  const phoneDigitsOnly = phoneValue?.replace(/\D/g, "") || "";
1357
1193
  const message = "Gostaria de mais informa\xE7\xF5es sobre o produto";
1358
1194
  try {
1359
1195
  setIsLoading(true);
1360
- if (!products || products.length === 0 || !apiToken) {
1196
+ if (!productId || !apiToken) {
1361
1197
  throw new Error("Par\xE2metros obrigat\xF3rios n\xE3o informados");
1362
1198
  }
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
- }
1376
1199
  const requestBody = {
1377
1200
  name,
1378
1201
  email,
1379
1202
  phone: phoneDigitsOnly,
1380
1203
  message,
1381
- productId: selectedProduct.id.toString(),
1204
+ productId,
1382
1205
  utm_source: utm.utm_source,
1383
1206
  utm_campaign: utm.utm_campaign,
1384
1207
  utm_medium: utm.utm_medium,
1385
1208
  utm_term: utm.utm_term
1386
1209
  };
1387
- console.log("requestBody = " + JSON.stringify(requestBody));
1388
1210
  const response = await fetch(`${apiUrl}/leads`, {
1389
1211
  method: "POST",
1390
1212
  headers: {
@@ -1394,32 +1216,25 @@ var MitreFormComponent = import_react7.default.forwardRef(({
1394
1216
  body: JSON.stringify(requestBody)
1395
1217
  });
1396
1218
  if (!response.ok) {
1397
- console.log("response = " + JSON.stringify(response));
1398
1219
  throw new Error("Falha ao enviar a mensagem!");
1399
1220
  }
1221
+ const responseData = await response.json();
1222
+ const leadId = responseData.leadId || responseData.id || "";
1400
1223
  setSuccessMessage("Mensagem enviada com sucesso!");
1401
1224
  resetForm();
1225
+ onSuccess?.(requestBody, leadId);
1402
1226
  } catch (err) {
1227
+ const error2 = err instanceof Error ? err : new Error("Erro desconhecido");
1403
1228
  handleError(err);
1229
+ onError?.(error2);
1404
1230
  } finally {
1405
1231
  setIsLoading(false);
1406
1232
  }
1407
1233
  };
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)(
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)(
1423
1238
  Alert,
1424
1239
  {
1425
1240
  type: "error",
@@ -1429,7 +1244,7 @@ var MitreFormComponent = import_react7.default.forwardRef(({
1429
1244
  children: error.message
1430
1245
  }
1431
1246
  ),
1432
- successMessage && /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
1247
+ successMessage && /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
1433
1248
  Alert,
1434
1249
  {
1435
1250
  type: "success",
@@ -1439,30 +1254,13 @@ var MitreFormComponent = import_react7.default.forwardRef(({
1439
1254
  children: successMessage
1440
1255
  }
1441
1256
  ),
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." })
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." })
1446
1261
  ] }),
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)(
1262
+ /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(Form, { $textColor: textColor, onSubmit: handleSubmit(sendMessage), noValidate: true, children: [
1263
+ /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
1466
1264
  Input2,
1467
1265
  {
1468
1266
  id: "name",
@@ -1480,7 +1278,7 @@ var MitreFormComponent = import_react7.default.forwardRef(({
1480
1278
  inputTextColor
1481
1279
  }
1482
1280
  ),
1483
- /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
1281
+ /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
1484
1282
  Input2,
1485
1283
  {
1486
1284
  id: "email",
@@ -1499,7 +1297,7 @@ var MitreFormComponent = import_react7.default.forwardRef(({
1499
1297
  inputTextColor
1500
1298
  }
1501
1299
  ),
1502
- /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
1300
+ /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
1503
1301
  import_react_hook_form.Controller,
1504
1302
  {
1505
1303
  name: "phone",
@@ -1508,7 +1306,7 @@ var MitreFormComponent = import_react7.default.forwardRef(({
1508
1306
  shouldUnregister: true,
1509
1307
  render: ({ field }) => {
1510
1308
  const errorMsg = errors.phone?.inputValue?.message || errors.phone?.phone?.message || errors.phone?.message;
1511
- return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
1309
+ return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
1512
1310
  PhoneInput2,
1513
1311
  {
1514
1312
  id: "phone",
@@ -1531,12 +1329,12 @@ var MitreFormComponent = import_react7.default.forwardRef(({
1531
1329
  },
1532
1330
  formKey
1533
1331
  ),
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: [
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: [
1537
1335
  "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",
1538
1336
  " ",
1539
- /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
1337
+ /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
1540
1338
  "a",
1541
1339
  {
1542
1340
  href: "https://www.mitrerealty.com.br/politica-de-privacidade",