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 +7 -41
- package/dist/index.cjs +42 -244
- package/dist/index.cjs.map +1 -1
- package/dist/index.d.cts +15 -7
- package/dist/index.d.ts +15 -7
- package/dist/index.js +35 -239
- package/dist/index.js.map +1 -1
- package/package.json +1 -1
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
|
-
|
|
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
|
-
- **`
|
|
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
|
-
|
|
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
|
|
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
|
|
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
|
|
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
|
|
1274
|
-
|
|
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,
|
|
1158
|
+
const [loading, setIsLoading] = (0, import_react6.useState)(false);
|
|
1291
1159
|
const { error, handleError, clearError } = useError();
|
|
1292
|
-
const [successMessage, setSuccessMessage] = (0,
|
|
1293
|
-
const [formKey, setFormKey] = (0,
|
|
1294
|
-
const [
|
|
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)(
|
|
1164
|
+
resolver: (0, import_yup.yupResolver)(schema),
|
|
1324
1165
|
mode: "onSubmit"
|
|
1325
1166
|
});
|
|
1326
|
-
|
|
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
|
-
|
|
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
|
|
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 (!
|
|
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
|
|
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
|
-
|
|
1409
|
-
|
|
1410
|
-
|
|
1411
|
-
|
|
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,
|
|
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,
|
|
1443
|
-
showHeader && /* @__PURE__ */ (0,
|
|
1444
|
-
/* @__PURE__ */ (0,
|
|
1445
|
-
/* @__PURE__ */ (0,
|
|
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,
|
|
1448
|
-
|
|
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,
|
|
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,
|
|
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,
|
|
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,
|
|
1535
|
-
/* @__PURE__ */ (0,
|
|
1536
|
-
/* @__PURE__ */ (0,
|
|
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,
|
|
1337
|
+
/* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
|
|
1540
1338
|
"a",
|
|
1541
1339
|
{
|
|
1542
1340
|
href: "https://www.mitrerealty.com.br/politica-de-privacidade",
|