mitre-form-component 2.0.0 → 2.2.1
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 +57 -53
- package/dist/index.cjs +319 -145
- package/dist/index.cjs.map +1 -1
- package/dist/index.d.cts +31 -17
- package/dist/index.d.ts +31 -17
- package/dist/index.js +320 -146
- package/dist/index.js.map +1 -1
- package/package.json +1 -1
package/README.md
CHANGED
|
@@ -55,11 +55,11 @@ const products = JSON.parse(process.env.VITE_PRODUCT_ID!);
|
|
|
55
55
|
|
|
56
56
|
<MitreFormComponent
|
|
57
57
|
products={products}
|
|
58
|
-
|
|
59
|
-
|
|
58
|
+
environment="prod" //[Opcional] "homol" (padrão) | "prod". Define de onde sai apiUrl/apiToken/whatsappPhone/chatUrl (config interno).
|
|
59
|
+
channel="form" //[Opcional] "form" (padrão) | "chat" | "whatsapp". Ver "🔀 Modos de submit (channel)".
|
|
60
60
|
showHeader={true} //[Opcional] Se irá exibir ou não o cabeçalho
|
|
61
|
-
title="Atendimento por mensagem" //[Opcional] Título do formulário (ignorado em
|
|
62
|
-
subtitle="Informe seus dados e retornaremos a mensagem." //[Opcional] Subtítulo (ignorado em
|
|
61
|
+
title="Atendimento por mensagem" //[Opcional] Título do formulário (ignorado em channel=whatsapp/chat)
|
|
62
|
+
subtitle="Informe seus dados e retornaremos a mensagem." //[Opcional] Subtítulo (ignorado em channel=whatsapp/chat)
|
|
63
63
|
backgroundColor="#000" //[Opcional]
|
|
64
64
|
textColor="#ffffff" //[Opcional]
|
|
65
65
|
buttonBackgroundColor="#FF5733" //[Opcional]
|
|
@@ -70,10 +70,12 @@ const products = JSON.parse(process.env.VITE_PRODUCT_ID!);
|
|
|
70
70
|
inputFocusBorderColor="#76B" //[Opcional]
|
|
71
71
|
inputPlaceholderColor="#FFF" //[Opcional]
|
|
72
72
|
inputTextColor="#FFF" //[Opcional]
|
|
73
|
-
|
|
74
|
-
// idProdutoTerceiro={produto.idTerceiro} //[Opcional, quando
|
|
75
|
-
// idEmpreendimento={produto.id} //[Opcional, quando
|
|
73
|
+
showContactPreference={true} //[Opcional] Exibe campo de preferência de contato (ignorado em channel=whatsapp/chat)
|
|
74
|
+
// idProdutoTerceiro={produto.idTerceiro} //[Opcional, quando channel !== "form"]
|
|
75
|
+
// idEmpreendimento={produto.id} //[Opcional, quando channel !== "form"]
|
|
76
76
|
// naoCriarEvento={false} //[Opcional] Override do default (que é true em chat/whatsapp).
|
|
77
|
+
onSuccess={(requestBody, leadId) => console.log('Formulário enviado com sucesso!', requestBody, leadId)} //[Opcional] Callback de sucesso, útil para tracking
|
|
78
|
+
onError={(error) => console.error('Erro ao enviar formulário:', error)} //[Opcional] Callback de erro
|
|
77
79
|
/>;
|
|
78
80
|
```
|
|
79
81
|
|
|
@@ -129,10 +131,10 @@ O `MitreFormComponent` aceita as seguintes props:
|
|
|
129
131
|
- **`products`** (array): Array de objetos contendo os produtos disponíveis. Cada produto deve ter `id` (number) e `name` (string).
|
|
130
132
|
- Se o array contém apenas 1 produto: o formulário usa automaticamente esse produto
|
|
131
133
|
- Se o array contém múltiplos produtos: é exibido um seletor para o usuário escolher
|
|
132
|
-
- **`
|
|
134
|
+
- **`environment`** (opcional, `"homol" | "prod"`): Define de qual config interno o componente lê `apiUrl`, `apiToken`, `whatsappPhone` e `chatUrl`. Padrão: `"homol"`. Ver §"🌐 Environment".
|
|
133
135
|
- **`showHeader`** (opcional, boolean): Controla se o cabeçalho será mostrado. Padrão: `true`.
|
|
134
|
-
- **`title`** (opcional, string): Título do formulário. Padrão: `"Atendimento por mensagem"`. **Quando `
|
|
135
|
-
- **`subtitle`** (opcional, string): Subtítulo do formulário. Padrão: `"Informe seus dados e retornaremos a mensagem."`. **Quando `
|
|
136
|
+
- **`title`** (opcional, string): Título do formulário. Padrão: `"Atendimento por mensagem"`. **Quando `channel="whatsapp"` esta prop é ignorada e o título é forçado para `"Fale com um corretor por WhatsApp"`; quando `channel="chat"` é forçado para `"Fale com um corretor por chat"`** (ver §"Modos de submit").
|
|
137
|
+
- **`subtitle`** (opcional, string): Subtítulo do formulário. Padrão: `"Informe seus dados e retornaremos a mensagem."`. **Quando `channel="whatsapp"` ou `channel="chat"` esta prop é ignorada e o subtítulo é forçado para `"Informe seus dados para contato."`** (ver §"Modos de submit").
|
|
136
138
|
- **`backgroundColor`** (opcional, string): Cor de fundo do formulário. Padrão: `#CECECE`.
|
|
137
139
|
- **`textColor`** (opcional, string): Cor dos textos do cabeçalho, do label dos inputs e do texto de privacidade. Padrão: `#2F2F2F`.
|
|
138
140
|
- **`buttonBackgroundColor`** (opcional, string): Define a cor de fundo do botão. Padrão: `#F6C76B`.
|
|
@@ -143,11 +145,13 @@ O `MitreFormComponent` aceita as seguintes props:
|
|
|
143
145
|
- **`inputFocusBorderColor`** (opcional, string): Cor da borda do input quando selecionado. Padrão: `#F6C76B`.
|
|
144
146
|
- **`inputPlaceholderColor`** (opcional, string): Cor do placeholder do input. Padrão: `#B6B6B6`.
|
|
145
147
|
- **`inputTextColor`** (opcional, string): Cor do texto do input. Padrão: `#2F2F2F`.
|
|
146
|
-
- **`
|
|
147
|
-
- **`
|
|
148
|
-
- **`idProdutoTerceiro`** (opcional, `string | number`): Repassado no body do POST `/leads` e no `virtual_obj` (modo chat) quando `
|
|
149
|
-
- **`idEmpreendimento`** (opcional, `string | number`): Repassado no body do POST `/leads` e no `virtual_obj` (modo chat) quando `
|
|
150
|
-
- **`naoCriarEvento`** (opcional, boolean): Se `true`, envia `naoCriarEvento: true` no body do POST `/leads` (e no `virtual_obj` no modo chat) para instruir o CRM a não criar evento associado ao lead. **Default automático:** `true` quando `
|
|
148
|
+
- **`showContactPreference`** (opcional, boolean): Exibe um campo de seleção "Preferência de Contato" com as opções `Whatsapp`, `Email` e `Ligação`. Quando selecionado, o valor é enviado à API como `preferencia_contato`. Padrão: `false`. **Quando `channel="whatsapp"` esta prop é ignorada e tratada como `false`**, e o componente injeta `preferencia_contato: "Whatsapp"` automaticamente no body do POST (ver §"Modos de submit").
|
|
149
|
+
- **`channel`** (opcional, `"form" | "chat" | "whatsapp"`): Define o comportamento do submit. `"form"` (padrão) preserva o comportamento histórico (apenas POST `/leads`). `"chat"` e `"whatsapp"` continuam fazendo o POST `/leads` e, em sucesso, abrem o atendimento em **nova aba**. Ver seção "🔀 Modos de submit (`channel`)" abaixo. Padrão: `"form"`.
|
|
150
|
+
- **`idProdutoTerceiro`** (opcional, `string | number`): Repassado no body do POST `/leads` e no `virtual_obj` (modo chat) quando `channel !== "form"`.
|
|
151
|
+
- **`idEmpreendimento`** (opcional, `string | number`): Repassado no body do POST `/leads` e no `virtual_obj` (modo chat) quando `channel !== "form"`.
|
|
152
|
+
- **`naoCriarEvento`** (opcional, boolean): Se `true`, envia `naoCriarEvento: true` no body do POST `/leads` (e no `virtual_obj` no modo chat) para instruir o CRM a não criar evento associado ao lead. **Default automático:** `true` quando `channel === "chat"` ou `channel === "whatsapp"` (paridade com o fluxo antigo do `atendimento.html`); `false` quando `channel === "form"`. Passe `false` explicitamente para forçar a criação do evento mesmo em chat/whatsapp.
|
|
153
|
+
- **`onSuccess`** (opcional, função): Callback executado quando o POST `/leads` retorna sucesso, em qualquer channel. Recebe `(requestBody, leadId)`. Útil para tracking (GTM, Analytics), redirect customizado ou logging. O componente continua exibindo a UI de sucesso (mensagem em `channel=form`, modal em `channel=whatsapp`/`channel=chat`) independente do callback.
|
|
154
|
+
- **`onError`** (opcional, função): Callback executado quando o POST `/leads` falha. Recebe `Error`. Útil para tracking de erro (Sentry, Datadog, GTM). O componente continua exibindo a UI de erro independente do callback.
|
|
151
155
|
|
|
152
156
|
---
|
|
153
157
|
|
|
@@ -182,76 +186,76 @@ interface Product {
|
|
|
182
186
|
|
|
183
187
|
## 📞 Preferência de Contato
|
|
184
188
|
|
|
185
|
-
Quando `
|
|
189
|
+
Quando `showContactPreference={true}`, um campo de seleção é exibido no formulário com as seguintes opções:
|
|
186
190
|
|
|
187
191
|
| Valor do enum | Valor enviado à API |
|
|
188
192
|
|--------------------------|---------------------|
|
|
189
|
-
| `
|
|
190
|
-
| `
|
|
191
|
-
| `
|
|
193
|
+
| `ContactPreference.Whatsapp` | `"Whatsapp"` |
|
|
194
|
+
| `ContactPreference.Email` | `"Email"` |
|
|
195
|
+
| `ContactPreference.Ligacao` | `"Ligação"` |
|
|
192
196
|
|
|
193
197
|
O campo é opcional: se o usuário não selecionar nenhuma opção, `preferencia_contato` não é enviado no body da requisição.
|
|
194
198
|
|
|
195
|
-
O enum `
|
|
199
|
+
O enum `ContactPreference` é exportado pela biblioteca para uso externo, se necessário:
|
|
196
200
|
|
|
197
201
|
```tsx
|
|
198
|
-
import { MitreFormComponent,
|
|
202
|
+
import { MitreFormComponent, ContactPreference } from "mitre-form-component";
|
|
199
203
|
|
|
200
204
|
<MitreFormComponent
|
|
201
205
|
products={products}
|
|
202
|
-
|
|
203
|
-
|
|
206
|
+
environment="prod"
|
|
207
|
+
showContactPreference={true}
|
|
204
208
|
/>
|
|
205
209
|
```
|
|
206
210
|
|
|
207
211
|
---
|
|
208
212
|
|
|
209
|
-
## 🌐
|
|
213
|
+
## 🌐 Environment
|
|
210
214
|
|
|
211
|
-
A partir da
|
|
215
|
+
A partir da v2.0, o componente gerencia internamente `apiUrl`, `apiToken`, `whatsappPhone` e `chatUrl`. A landing **não passa mais essas props** — apenas escolhe o environment:
|
|
212
216
|
|
|
213
217
|
```tsx
|
|
214
|
-
<MitreFormComponent products={products}
|
|
215
|
-
<MitreFormComponent products={products}
|
|
218
|
+
<MitreFormComponent products={products} environment="prod" /> // produção
|
|
219
|
+
<MitreFormComponent products={products} environment="homol" /> // homologação (padrão)
|
|
216
220
|
```
|
|
217
221
|
|
|
218
|
-
Os valores de cada
|
|
222
|
+
Os valores de cada environment vivem em `src/config/environments.ts`. Mudanças nessas URLs/tokens exigem nova versão da lib publicada no npm e atualização das landings consumidoras.
|
|
219
223
|
|
|
220
|
-
|
|
|
224
|
+
| Environment | apiUrl | chatUrl |
|
|
221
225
|
|---|---|---|
|
|
222
226
|
| `"homol"` | `https://leads-hml.mitrerealty.com.br/api-leads` | `https://crm-hml.mitrerealty.com.br/wcc/UserLoginSubmit.do` |
|
|
223
227
|
| `"prod"` | `https://leads.mitrerealty.com.br/api-leads` | `https://crm.mitrerealty.com.br/wcc/UserLoginSubmit.do` |
|
|
224
228
|
|
|
225
|
-
Se `
|
|
229
|
+
Se `environment` for um valor desconhecido ou se os campos resolvidos vierem vazios, o componente exibe a tela genérica de erro ("Erro no carregamento do formulário!") no lugar do form.
|
|
226
230
|
|
|
227
231
|
---
|
|
228
232
|
|
|
229
|
-
## 🔀 Modos de submit (`
|
|
233
|
+
## 🔀 Modos de submit (`channel`)
|
|
230
234
|
|
|
231
|
-
Por padrão (`
|
|
235
|
+
Por padrão (`channel="form"`), ao enviar o formulário o componente faz apenas o `POST /leads` e exibe uma mensagem de sucesso — o consumidor continua na mesma página. **Esse é o comportamento histórico e segue inalterado para todos os usos atuais.**
|
|
232
236
|
|
|
233
|
-
Para casos em que, após salvar o lead, o usuário precisa ser direcionado para um
|
|
237
|
+
Para casos em que, após salvar o lead, o usuário precisa ser direcionado para um channel de atendimento (chat ou WhatsApp), o componente expõe a prop `channel` com mais dois modos: `"chat"` e `"whatsapp"`. Nesses dois modos:
|
|
234
238
|
|
|
235
239
|
- O `POST /leads` é feito normalmente.
|
|
236
240
|
- Em sucesso, é exibido um **modal de confirmação** ("Cadastro realizado! Clique abaixo para continuar...") e o clique no botão do modal abre o atendimento **em uma nova aba**, mantendo a landing page do consumidor aberta.
|
|
237
241
|
- Em caso de falha no POST `/leads`, é exibido um **modal de erro** ("Não foi possível completar seu contato.") e a segunda aba **não é aberta**.
|
|
238
|
-
- O número do WhatsApp e a URL do chat vêm da config interna do `
|
|
242
|
+
- O número do WhatsApp e a URL do chat vêm da config interna do `environment` selecionado — não precisam ser passados como props.
|
|
239
243
|
|
|
240
|
-
O tipo `
|
|
244
|
+
O tipo `Channel` é exportado pela biblioteca:
|
|
241
245
|
|
|
242
246
|
```tsx
|
|
243
|
-
import { MitreFormComponent, type
|
|
247
|
+
import { MitreFormComponent, type Channel } from "mitre-form-component";
|
|
244
248
|
```
|
|
245
249
|
|
|
246
250
|
### Modo `"chat"`
|
|
247
251
|
|
|
248
|
-
Após salvar o lead, o botão do modal de sucesso submete (em nova aba) um POST `application/x-www-form-urlencoded` para a `chatUrl` do
|
|
252
|
+
Após salvar o lead, o botão do modal de sucesso submete (em nova aba) um POST `application/x-www-form-urlencoded` para a `chatUrl` do environment, com um único campo `virtual_obj` contendo o JSON do lead acrescido de `externalOriginId`, `pagina`, `idProdutoTerceiro`/`idEmpreendimento` (se informados) e `naoCriarEvento` (quando o flag efetivo é `true`).
|
|
249
253
|
|
|
250
254
|
```tsx
|
|
251
255
|
<MitreFormComponent
|
|
252
256
|
products={products}
|
|
253
|
-
|
|
254
|
-
|
|
257
|
+
environment="prod"
|
|
258
|
+
channel="chat"
|
|
255
259
|
idProdutoTerceiro={produto.idTerceiro}
|
|
256
260
|
idEmpreendimento={produto.id}
|
|
257
261
|
/>
|
|
@@ -264,32 +268,32 @@ Após salvar o lead, o botão do modal de sucesso abre `https://api.whatsapp.com
|
|
|
264
268
|
```tsx
|
|
265
269
|
<MitreFormComponent
|
|
266
270
|
products={products}
|
|
267
|
-
|
|
268
|
-
|
|
271
|
+
environment="prod"
|
|
272
|
+
channel="whatsapp"
|
|
269
273
|
/>
|
|
270
274
|
```
|
|
271
275
|
|
|
272
276
|
### Campos extras enviados ao `/leads`
|
|
273
277
|
|
|
274
|
-
Quando `
|
|
278
|
+
Quando `channel !== "form"`, o componente injeta automaticamente os seguintes campos no body do `POST /leads`:
|
|
275
279
|
|
|
276
280
|
| Campo | Quando | Origem |
|
|
277
281
|
|---|---|---|
|
|
278
|
-
| `
|
|
279
|
-
| `pagina` | sempre que `
|
|
280
|
-
| `is_chat` | sempre que `
|
|
282
|
+
| `channel` | sempre que `channel !== "form"` | valor da prop |
|
|
283
|
+
| `pagina` | sempre que `channel !== "form"` | `window.location.href` no momento do submit |
|
|
284
|
+
| `is_chat` | sempre que `channel !== "form"` (paridade com `atendimento.html` legado) | constante `true` |
|
|
281
285
|
| `idProdutoTerceiro` | se a prop foi informada | valor da prop |
|
|
282
286
|
| `idEmpreendimento` | se a prop foi informada | valor da prop |
|
|
283
287
|
| `naoCriarEvento` | quando o flag efetivo é `true` (default em chat/whatsapp; ver prop `naoCriarEvento`) | constante `true` |
|
|
284
|
-
| `preferencia_contato` | apenas em `
|
|
288
|
+
| `preferencia_contato` | apenas em `channel === "whatsapp"` | constante `"Whatsapp"` (em `channel === "whatsapp"` e `channel === "chat"` a prop `showContactPreference` é ignorada e o select não é exibido) |
|
|
285
289
|
|
|
286
290
|
Esses campos são aceitos pelo backend `api-leads` sem nenhuma alteração — o `LeadDTO` possui `@JsonAlias` para os campos conhecidos e `@JsonAnySetter` para o restante.
|
|
287
291
|
|
|
288
|
-
### Textos fixos em `
|
|
292
|
+
### Textos fixos em `channel="whatsapp"` e `channel="chat"`
|
|
289
293
|
|
|
290
|
-
Quando `
|
|
294
|
+
Quando `channel="whatsapp"` ou `channel="chat"`, os seguintes textos do formulário são forçados, independente das props passadas:
|
|
291
295
|
|
|
292
|
-
| Elemento | `
|
|
296
|
+
| Elemento | `channel="whatsapp"` | `channel="chat"` |
|
|
293
297
|
|---|---|---|
|
|
294
298
|
| Título (prop `title`) | `"Fale com um corretor por WhatsApp"` | `"Fale com um corretor por chat"` |
|
|
295
299
|
| Subtítulo (prop `subtitle`) | `"Informe seus dados para contato."` | `"Informe seus dados para contato."` |
|
|
@@ -301,9 +305,9 @@ Paridade com o fluxo legado `atendimento.html` (título e botão), com subtítul
|
|
|
301
305
|
|
|
302
306
|
Em render-time o componente valida:
|
|
303
307
|
|
|
304
|
-
- **
|
|
305
|
-
- **
|
|
306
|
-
- **
|
|
308
|
+
- **Environment**: se a prop `environment` for desconhecida, ou se a config interna resolvida não tiver `apiUrl`/`apiToken` → tela genérica de erro.
|
|
309
|
+
- **channel=chat**: a `chatUrl` do environment precisa ser URL absoluta com protocolo `http(s)`; caso contrário, tela genérica de erro.
|
|
310
|
+
- **channel=whatsapp**: o `whatsappPhone` do environment precisa ser número válido segundo `google-libphonenumber`; caso contrário, tela genérica de erro.
|
|
307
311
|
|
|
308
312
|
Todas essas validações rodam **antes do submit** e substituem a renderização do formulário pela tela "Erro no carregamento do formulário!" + `console.error` técnico.
|
|
309
313
|
|
|
@@ -331,7 +335,7 @@ const MitreFormComponent = dynamic(
|
|
|
331
335
|
{ id: 1, name: "Apartamento 2 quartos" },
|
|
332
336
|
{ id: 2, name: "Casa 3 quartos" }
|
|
333
337
|
]}
|
|
334
|
-
|
|
338
|
+
environment="prod"
|
|
335
339
|
/>
|
|
336
340
|
</ErrorBoundary>;
|
|
337
341
|
```
|