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 +41 -7
- package/dist/index.cjs +244 -42
- package/dist/index.cjs.map +1 -1
- package/dist/index.d.cts +7 -15
- package/dist/index.d.ts +7 -15
- package/dist/index.js +239 -35
- package/dist/index.js.map +1 -1
- package/package.json +1 -1
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
|
-
|
|
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
|
-
- **`
|
|
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
|
-
|
|
116
|
-
|
|
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
|
-
|
|
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
|
|
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/
|
|
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
|
|
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
|
|
1141
|
-
|
|
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,
|
|
1290
|
+
const [loading, setIsLoading] = (0, import_react7.useState)(false);
|
|
1159
1291
|
const { error, handleError, clearError } = useError();
|
|
1160
|
-
const [successMessage, setSuccessMessage] = (0,
|
|
1161
|
-
const [formKey, setFormKey] = (0,
|
|
1162
|
-
const [
|
|
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)(
|
|
1323
|
+
resolver: (0, import_yup.yupResolver)(formSchema),
|
|
1165
1324
|
mode: "onSubmit"
|
|
1166
1325
|
});
|
|
1167
|
-
|
|
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
|
-
|
|
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 (!
|
|
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
|
-
|
|
1235
|
-
|
|
1236
|
-
/* @__PURE__ */ (0,
|
|
1237
|
-
|
|
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,
|
|
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,
|
|
1258
|
-
showHeader && /* @__PURE__ */ (0,
|
|
1259
|
-
/* @__PURE__ */ (0,
|
|
1260
|
-
/* @__PURE__ */ (0,
|
|
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,
|
|
1263
|
-
/* @__PURE__ */ (0,
|
|
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,
|
|
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,
|
|
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,
|
|
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,
|
|
1333
|
-
/* @__PURE__ */ (0,
|
|
1334
|
-
/* @__PURE__ */ (0,
|
|
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,
|
|
1539
|
+
/* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
|
|
1338
1540
|
"a",
|
|
1339
1541
|
{
|
|
1340
1542
|
href: "https://www.mitrerealty.com.br/politica-de-privacidade",
|