mitre-form-component 2.1.0 → 2.2.2
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 +55 -55
- package/dist/index.cjs +314 -145
- package/dist/index.cjs.map +1 -1
- package/dist/index.d.cts +23 -23
- package/dist/index.d.ts +23 -23
- package/dist/index.js +315 -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] "staging" (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,9 +70,9 @@ 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
77
|
onSuccess={(requestBody, leadId) => console.log('Formulário enviado com sucesso!', requestBody, leadId)} //[Opcional] Callback de sucesso, útil para tracking
|
|
78
78
|
onError={(error) => console.error('Erro ao enviar formulário:', error)} //[Opcional] Callback de erro
|
|
@@ -131,10 +131,10 @@ O `MitreFormComponent` aceita as seguintes props:
|
|
|
131
131
|
- **`products`** (array): Array de objetos contendo os produtos disponíveis. Cada produto deve ter `id` (number) e `name` (string).
|
|
132
132
|
- Se o array contém apenas 1 produto: o formulário usa automaticamente esse produto
|
|
133
133
|
- Se o array contém múltiplos produtos: é exibido um seletor para o usuário escolher
|
|
134
|
-
- **`
|
|
134
|
+
- **`environment`** (opcional, `"staging" | "prod"`): Define de qual config interno o componente lê `apiUrl`, `apiToken`, `whatsappPhone` e `chatUrl`. Padrão: `"staging"`. Ver §"🌐 Environment".
|
|
135
135
|
- **`showHeader`** (opcional, boolean): Controla se o cabeçalho será mostrado. Padrão: `true`.
|
|
136
|
-
- **`title`** (opcional, string): Título do formulário. Padrão: `"Atendimento por mensagem"`. **Quando `
|
|
137
|
-
- **`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").
|
|
138
138
|
- **`backgroundColor`** (opcional, string): Cor de fundo do formulário. Padrão: `#CECECE`.
|
|
139
139
|
- **`textColor`** (opcional, string): Cor dos textos do cabeçalho, do label dos inputs e do texto de privacidade. Padrão: `#2F2F2F`.
|
|
140
140
|
- **`buttonBackgroundColor`** (opcional, string): Define a cor de fundo do botão. Padrão: `#F6C76B`.
|
|
@@ -145,12 +145,12 @@ O `MitreFormComponent` aceita as seguintes props:
|
|
|
145
145
|
- **`inputFocusBorderColor`** (opcional, string): Cor da borda do input quando selecionado. Padrão: `#F6C76B`.
|
|
146
146
|
- **`inputPlaceholderColor`** (opcional, string): Cor do placeholder do input. Padrão: `#B6B6B6`.
|
|
147
147
|
- **`inputTextColor`** (opcional, string): Cor do texto do input. Padrão: `#2F2F2F`.
|
|
148
|
-
- **`
|
|
149
|
-
- **`
|
|
150
|
-
- **`idProdutoTerceiro`** (opcional, `string | number`): Repassado no body do POST `/leads` e no `virtual_obj` (modo chat) quando `
|
|
151
|
-
- **`idEmpreendimento`** (opcional, `string | number`): Repassado no body do POST `/leads` e no `virtual_obj` (modo chat) quando `
|
|
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 `
|
|
153
|
-
- **`onSuccess`** (opcional, função): Callback executado quando o POST `/leads` retorna sucesso, em qualquer
|
|
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
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.
|
|
155
155
|
|
|
156
156
|
---
|
|
@@ -186,76 +186,76 @@ interface Product {
|
|
|
186
186
|
|
|
187
187
|
## 📞 Preferência de Contato
|
|
188
188
|
|
|
189
|
-
Quando `
|
|
189
|
+
Quando `showContactPreference={true}`, um campo de seleção é exibido no formulário com as seguintes opções:
|
|
190
190
|
|
|
191
191
|
| Valor do enum | Valor enviado à API |
|
|
192
192
|
|--------------------------|---------------------|
|
|
193
|
-
| `
|
|
194
|
-
| `
|
|
195
|
-
| `
|
|
193
|
+
| `ContactPreference.Whatsapp` | `"Whatsapp"` |
|
|
194
|
+
| `ContactPreference.Email` | `"Email"` |
|
|
195
|
+
| `ContactPreference.Ligacao` | `"Ligação"` |
|
|
196
196
|
|
|
197
197
|
O campo é opcional: se o usuário não selecionar nenhuma opção, `preferencia_contato` não é enviado no body da requisição.
|
|
198
198
|
|
|
199
|
-
O enum `
|
|
199
|
+
O enum `ContactPreference` é exportado pela biblioteca para uso externo, se necessário:
|
|
200
200
|
|
|
201
201
|
```tsx
|
|
202
|
-
import { MitreFormComponent,
|
|
202
|
+
import { MitreFormComponent, ContactPreference } from "mitre-form-component";
|
|
203
203
|
|
|
204
204
|
<MitreFormComponent
|
|
205
205
|
products={products}
|
|
206
|
-
|
|
207
|
-
|
|
206
|
+
environment="prod"
|
|
207
|
+
showContactPreference={true}
|
|
208
208
|
/>
|
|
209
209
|
```
|
|
210
210
|
|
|
211
211
|
---
|
|
212
212
|
|
|
213
|
-
## 🌐
|
|
213
|
+
## 🌐 Environment
|
|
214
214
|
|
|
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
|
|
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:
|
|
216
216
|
|
|
217
217
|
```tsx
|
|
218
|
-
<MitreFormComponent products={products}
|
|
219
|
-
<MitreFormComponent products={products}
|
|
218
|
+
<MitreFormComponent products={products} environment="prod" /> // produção
|
|
219
|
+
<MitreFormComponent products={products} environment="staging" /> // staging/homologação (padrão)
|
|
220
220
|
```
|
|
221
221
|
|
|
222
|
-
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.
|
|
223
223
|
|
|
224
|
-
|
|
|
224
|
+
| Environment | apiUrl | chatUrl |
|
|
225
225
|
|---|---|---|
|
|
226
|
-
| `"
|
|
226
|
+
| `"staging"` | `https://leads-hml.mitrerealty.com.br/api-leads` | `https://crm-hml.mitrerealty.com.br/wcc/UserLoginSubmit.do` |
|
|
227
227
|
| `"prod"` | `https://leads.mitrerealty.com.br/api-leads` | `https://crm.mitrerealty.com.br/wcc/UserLoginSubmit.do` |
|
|
228
228
|
|
|
229
|
-
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.
|
|
230
230
|
|
|
231
231
|
---
|
|
232
232
|
|
|
233
|
-
## 🔀 Modos de submit (`
|
|
233
|
+
## 🔀 Modos de submit (`channel`)
|
|
234
234
|
|
|
235
|
-
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.**
|
|
236
236
|
|
|
237
|
-
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:
|
|
238
238
|
|
|
239
239
|
- O `POST /leads` é feito normalmente.
|
|
240
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.
|
|
241
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**.
|
|
242
|
-
- 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.
|
|
243
243
|
|
|
244
|
-
O tipo `
|
|
244
|
+
O tipo `Channel` é exportado pela biblioteca:
|
|
245
245
|
|
|
246
246
|
```tsx
|
|
247
|
-
import { MitreFormComponent, type
|
|
247
|
+
import { MitreFormComponent, type Channel } from "mitre-form-component";
|
|
248
248
|
```
|
|
249
249
|
|
|
250
250
|
### Modo `"chat"`
|
|
251
251
|
|
|
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
|
|
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`).
|
|
253
253
|
|
|
254
254
|
```tsx
|
|
255
255
|
<MitreFormComponent
|
|
256
256
|
products={products}
|
|
257
|
-
|
|
258
|
-
|
|
257
|
+
environment="prod"
|
|
258
|
+
channel="chat"
|
|
259
259
|
idProdutoTerceiro={produto.idTerceiro}
|
|
260
260
|
idEmpreendimento={produto.id}
|
|
261
261
|
/>
|
|
@@ -268,32 +268,32 @@ Após salvar o lead, o botão do modal de sucesso abre `https://api.whatsapp.com
|
|
|
268
268
|
```tsx
|
|
269
269
|
<MitreFormComponent
|
|
270
270
|
products={products}
|
|
271
|
-
|
|
272
|
-
|
|
271
|
+
environment="prod"
|
|
272
|
+
channel="whatsapp"
|
|
273
273
|
/>
|
|
274
274
|
```
|
|
275
275
|
|
|
276
276
|
### Campos extras enviados ao `/leads`
|
|
277
277
|
|
|
278
|
-
Quando `
|
|
278
|
+
Quando `channel !== "form"`, o componente injeta automaticamente os seguintes campos no body do `POST /leads`:
|
|
279
279
|
|
|
280
280
|
| Campo | Quando | Origem |
|
|
281
281
|
|---|---|---|
|
|
282
|
-
| `
|
|
283
|
-
| `pagina` | sempre que `
|
|
284
|
-
| `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` |
|
|
285
285
|
| `idProdutoTerceiro` | se a prop foi informada | valor da prop |
|
|
286
286
|
| `idEmpreendimento` | se a prop foi informada | valor da prop |
|
|
287
287
|
| `naoCriarEvento` | quando o flag efetivo é `true` (default em chat/whatsapp; ver prop `naoCriarEvento`) | constante `true` |
|
|
288
|
-
| `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) |
|
|
289
289
|
|
|
290
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.
|
|
291
291
|
|
|
292
|
-
### Textos fixos em `
|
|
292
|
+
### Textos fixos em `channel="whatsapp"` e `channel="chat"`
|
|
293
293
|
|
|
294
|
-
Quando `
|
|
294
|
+
Quando `channel="whatsapp"` ou `channel="chat"`, os seguintes textos do formulário são forçados, independente das props passadas:
|
|
295
295
|
|
|
296
|
-
| Elemento | `
|
|
296
|
+
| Elemento | `channel="whatsapp"` | `channel="chat"` |
|
|
297
297
|
|---|---|---|
|
|
298
298
|
| Título (prop `title`) | `"Fale com um corretor por WhatsApp"` | `"Fale com um corretor por chat"` |
|
|
299
299
|
| Subtítulo (prop `subtitle`) | `"Informe seus dados para contato."` | `"Informe seus dados para contato."` |
|
|
@@ -305,9 +305,9 @@ Paridade com o fluxo legado `atendimento.html` (título e botão), com subtítul
|
|
|
305
305
|
|
|
306
306
|
Em render-time o componente valida:
|
|
307
307
|
|
|
308
|
-
- **
|
|
309
|
-
- **
|
|
310
|
-
- **
|
|
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.
|
|
311
311
|
|
|
312
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.
|
|
313
313
|
|
|
@@ -335,7 +335,7 @@ const MitreFormComponent = dynamic(
|
|
|
335
335
|
{ id: 1, name: "Apartamento 2 quartos" },
|
|
336
336
|
{ id: 2, name: "Casa 3 quartos" }
|
|
337
337
|
]}
|
|
338
|
-
|
|
338
|
+
environment="prod"
|
|
339
339
|
/>
|
|
340
340
|
</ErrorBoundary>;
|
|
341
341
|
```
|