Mitre Form Component

Componente de formulário de captação de leads para ser usado em projetos da Mitre Realty. Esta biblioteca oferece um componente pronto para facilitar a implementação de formulários em suas páginas, com validação e integração com APIs para registro de leads.

🚨 Avisos importantes

Este projeto foi desenvolvido para ser usado diretamente em projetos da Mitre Realty. Algumas partes da biblioteca são essenciais e não devem ser alteradas ou removidas.

• Exemplo de uso: Dentro de src/app/page.tsx, há um exemplo de uso do componente, disponível apenas para visualização. Para executar e ver o exemplo em funcionamento, execute o comando:

  yarn dev

📌 Componente Autossuficiente

Este componente é totalmente autossuficiente e não requer nenhuma configuração adicional no projeto host:

• ✅ Fonte Montserrat: Carregada automaticamente pelo componente
• ✅ Estilos isolados: Não interferem com estilos do projeto host
• ✅ Zero dependências externas: Funciona out-of-the-box

Nota: A fonte Montserrat é carregada automaticamente do Google Fonts quando o componente é montado. Não é necessário adicionar nenhum link ou import no projeto host.

❌ Itens que NÃO devem ser modificados

Código do componente

• O comportamento básico do componente, como a integração com a API e as interações de formulário, não devem ser alterados.

Dependências

• Certifique-se de que as dependências do package.json estão intactas para garantir o funcionamento correto da biblioteca. Alterações nas versões podem causar incompatibilidade com o sistema.

✅ Itens que DEVEM ser modificados

1. Configuração do Componente

Embora o componente esteja pronto para uso, você pode personalizá-lo ao passar as props adequadas.

2. Componente MitreFormComponent

Aqui está um exemplo de uso básico dentro do projeto:

import { MitreFormComponent } from "mitre-form-component-next";

// array de produtos 
const products = JSON.parse(process.env.VITE_PRODUCT_ID!);
// Exemplo de VITE_PRODUCT_ID: '[{"id":1,"name":"Apartamento 2 quartos"},{"id":2,"name":"Casa 3 quartos"}]'

<MitreFormComponent
  products={products}
  apiUrl={process.env.VITE_REGISTER_LEADS_URL!}
  apiToken={process.env.VITE_REGISTER_LEADS_TOKEN!}
  showHeader={true}  //[Opcional] Se irá exibir ou não o cabeçalho
  title="Atendimento por mensagem"  //[Opcional] Título do formulário
  subtitle="Informe seus dados e retornaremos a mensagem."  //[Opcional] Subtítulo do formulário
  backgroundColor="#000"  //[Opcional] 
  textColor="#ffffff"  //[Opcional] 
  buttonBackgroundColor="#FF5733"  //[Opcional]
  buttonTextColor="#FFF"  //[Opcional]
  innerPadding="0.2rem"  //[Opcional]
  inputBackgroundColor="#000"  //[Opcional]
  inputBorderColor="#000"  //[Opcional]
  inputFocusBorderColor="#76B"  //[Opcional]
  inputPlaceholderColor="#FFF"  //[Opcional]
  inputTextColor="#FFF"  //[Opcional]
  showPreferenciaContato={true}  //[Opcional] Exibe campo de preferência de contato
  onSuccess={(requestBody, leadId) => console.log('Formulário enviado com sucesso!', requestBody, leadId)}  //[Opcional]
  onError={(error) => console.error('Erro ao enviar formulário:', error)}  //[Opcional]
/>;

🛠️ Tecnologias utilizadas

• React
• React Hook Form
• Yup
• Styled Components
• Polished
• React Icons
• React Internation Phone
• Vite
• Tsup

🎨 Estilos Isolados

Este componente não injeta estilos globais no projeto host, evitando conflitos de CSS. Todos os estilos são aplicados de forma isolada usando styled-components, garantindo que:

• ✅ Não há poluição do escopo global com variáveis CSS
• ✅ Não há conflitos com classes utilitárias
• ✅ Não há reset CSS que afete o projeto host
• ✅ Fonte Montserrat carregada automaticamente (não afeta outros componentes)
• ✅ O componente pode ser usado em qualquer projeto React sem efeitos colaterais ou configurações adicionais

⚙️ Instalação

Este componente pode ser instalado em qualquer projeto React usando o gerenciador de pacotes de sua preferência (npm, yarn, pnpm, etc.).

# Usando npm
npm install mitre-form-component-next

# Usando yarn
yarn add mitre-form-component-next

# Usando pnpm
pnpm add mitre-form-component-next

Depois de instalar a biblioteca, você pode começar a usá-la diretamente no seu projeto.

🔧 Props do Componente

O MitreFormComponent aceita as seguintes props:

• products (array): Array de objetos contendo os produtos disponíveis. Cada produto deve ter id (number) e name (string).
  • Se o array contém apenas 1 produto: o formulário usa automaticamente esse produto
  • Se o array contém múltiplos produtos: é exibido um seletor para o usuário escolher
• apiUrl (string): URL da API para registro dos leads.
• apiToken (string): Token de autenticação da API.
• showHeader (opcional, boolean): Controla se o cabeçalho será mostrado. Padrão: true.
• title (opcional, string): Título do formulário. Padrão: "Atendimento por mensagem".
• subtitle (opcional, string): Subtítulo do formulário. Padrão: "Informe seus dados e retornaremos a mensagem.".
• backgroundColor (opcional, string): Cor de fundo do formulário. Padrão: #CECECE.
• textColor (opcional, string): Cor dos textos do cabeçalho, do label dos inputs e do texto de privacidade. Padrão: #2F2F2F.
• buttonBackgroundColor (opcional, string): Define a cor de fundo do botão. Padrão: #F6C76B.
• buttonTextColor (opcional, string): Define a cor do texto do botão. Padrão: #2F2F2F.
• innerPadding (opcional, string): Espaçamento interno do componente com relação às bordas. Padrão 1rem.
• inputBackgroundColor (opcional, string): Cor de fundo do input. Padrão: #FFF.
• inputBorderColor (opcional, string): Cor da borda do input. Padrão: transparent.
• inputFocusBorderColor (opcional, string): Cor da borda do input quando selecionado. Padrão: #F6C76B.
• inputPlaceholderColor (opcional, string): Cor do placeholder do input. Padrão: #B6B6B6.
• inputTextColor (opcional, string): Cor do texto do input. Padrão: #2F2F2F.
• showPreferenciaContato (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.
• 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).
• onError (opcional, função): Callback executado quando ocorre um erro no envio do formulário. Recebe um objeto Error como parâmetro.

🎯 Comportamento dos Produtos

O componente possui comportamento inteligente baseado na quantidade de produtos fornecidos:

Array com 1 produto:

• O formulário usa automaticamente o único produto disponível
• Não é exibido seletor de produto
• O usuário preenche apenas nome, email e telefone

Array com múltiplos produtos:

• É exibido um campo de seleção "Produto de interesse" antes do campo nome
• O usuário deve selecionar um produto para prosseguir
• Validação obrigatória da seleção de produto

Array inválido (vazio, nulo, etc.):

• É exibida uma mensagem de erro no lugar do formulário
• O erro é logado no console para debug
• Mensagem amigável: "Erro no carregamento do formulário!"

Estrutura do objeto Product:

interface Product {
  id: number;    // ID único do produto
  name: string;  // Nome do produto para exibição
}

📞 Preferência de Contato

Quando showPreferenciaContato={true}, um campo de seleção é exibido no formulário com as seguintes opções:

| Valor do enum | Valor enviado à API | |--------------------------|---------------------| | PreferenciaContato.Whatsapp | "Whatsapp" | | PreferenciaContato.Email | "Email" | | PreferenciaContato.Ligacao | "Ligação" |

O campo é opcional: se o usuário não selecionar nenhuma opção, preferencia_contato não é enviado no body da requisição.

O enum PreferenciaContato é exportado pela biblioteca para uso externo, se necessário:

import { MitreFormComponent, PreferenciaContato } from "mitre-form-component-next";

<MitreFormComponent
  products={products}
  apiUrl={process.env.NEXT_PUBLIC_REGISTER_LEADS_URL!}
  apiToken={process.env.NEXT_PUBLIC_REGISTER_LEADS_TOKEN!}
  showPreferenciaContato={true}
  onSuccess={(requestBody) => {
    // requestBody.preferencia_contato estará presente se o usuário selecionou uma opção
    console.log(requestBody.preferencia_contato); // ex: "Whatsapp"
  }}
/>

🚨 Componente dentro de um ErrorBoundary

Recomendamos que o componente MitreFormComponent seja sempre utilizado dentro de um ErrorBoundary para garantir que a aplicação não quebre em caso de falha no carregamento do componente. Também é preciso usar dynamic do next/dynamics para a importação.

Exemplo de uso básico como biblioteca em projetos Nextjs externos:

import dynamic from "next/dynamic";

import { ErrorBoundary } from "react-error-boundary";
const MitreFormComponent = dynamic(
  () =>
    import("mitre-form-component-next").then((mod) => mod.MitreFormComponent),
  { ssr: false }
);

<ErrorBoundary fallback={<div>Erro ao carregar o formulário</div>}>
  <MitreFormComponent
    products={[
      { id: 1, name: "Apartamento 2 quartos" },
      { id: 2, name: "Casa 3 quartos" }
    ]}
    apiUrl={process.env.NEXT_PUBLIC_REGISTER_LEADS_URL!}
    apiToken={process.env.NEXT_PUBLIC_REGISTER_LEADS_TOKEN!}
  />
</ErrorBoundary>;

Para uso em outros frameworks, fazer o import básico conforme Artigo 2

🏗️ Como gerar o build e publicar no npm

Para gerar o build da biblioteca e publicá-la no npm, siga estas etapas:

1. Incrementar a versão no package.json: No arquivo package.json, atualize a versão da biblioteca.

2. Executar o build:

yarn build

3. Publicar no npm:

yarn publish --new-version 0.x.xxx

📄 Licença

Este projeto é mantido pela Mitre Realty. Uso restrito aos colaboradores e parceiros autorizados.

🧑‍💻 Contato

Para dúvidas ou suporte sobre o uso desta biblioteca, entre em contato com o time de desenvolvimento interno da Mitre Realty.

Mitre Realty © Todos os direitos reservados.