Mitre Actions Widget

Componente flutuante com botões de ações rápidas para ser usado em projetos da Mitre Realty. Esta biblioteca oferece um botão fixo que permite o acesso rápido a canais de contato como WhatsApp e ligação telefônica.

🚨 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

❌ 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 MitreActionsWidget

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

import { MitreActionsWidget } from "mitre-actions-widget";

// 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"}]'

<MitreActionsWidget
  products={products}
  apiUrl={process.env.VITE_REGISTER_LEADS_URL!}
  apiToken={process.env.VITE_REGISTER_LEADS_TOKEN!}
/>

// Com cor personalizada
<MitreActionsWidget
  products={products}
  apiUrl={process.env.VITE_REGISTER_LEADS_URL!}
  apiToken={process.env.VITE_REGISTER_LEADS_TOKEN!}
  backgroundColor="#FF5733"
/>

// Com customização do formulário e callback de sucesso (props opcionais)
<MitreActionsWidget
  products={products}
  apiUrl={process.env.VITE_REGISTER_LEADS_URL!}
  apiToken={process.env.VITE_REGISTER_LEADS_TOKEN!}
  // formShowHeader={true}
  // formTitle="Fale conosco"
  // formSubtitle="Preencha o formulário abaixo"
  // formShowPreferenciaContato={true}
  // onFormSuccess={(body, leadId) => console.log("Lead criado:", leadId)}
/>

🛠️ Tecnologias utilizadas

• React
• Styled Components
• React Icons
• Vite
• Tsup

✨ Características

Estilos Isolados

A partir da versão 1.0.0, todos os estilos do componente são completamente encapsulados e não afetam outros elementos da aplicação. Isso significa:

• ✅ Sem conflitos de CSS: As variáveis e estilos do componente não interferem com o projeto host
• ✅ Sem dependências globais: Não é necessário adicionar fontes ou resets CSS no projeto
• ✅ Fonte integrada: A fonte Montserrat é carregada automaticamente pelo componente (verificando se já existe para evitar duplicação)
• ✅ Reset CSS scoped: Regras de reset aplicadas apenas ao escopo do componente

O componente gerencia internamente:

• Fonte Google (Montserrat) com fallbacks para fontes do sistema
• Paleta de cores própria
• Reset CSS localizado
• Customização de scrollbar apenas nos elementos internos

Importante: Esta é uma mudança que melhora significativamente a integração do componente em projetos externos, eliminando side effects indesejados.

⚙️ 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-actions-widget

# Usando yarn
yarn add mitre-actions-widget

# Usando pnpm
pnpm add mitre-actions-widget

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

🔧 Props do Componente

O MitreActionsWidget aceita as seguintes props:

• products (Product[]): Array de produtos do empreendimento.
• apiUrl (string): URL da API para registro dos leads.
• apiToken (string): Token de autenticação da API.
• backgroundColor (string, opcional): Cor de fundo personalizada para o botão flutuante. Padrão: #2DCE68 (verde).
• formShowHeader (boolean, opcional): Exibe ou oculta o cabeçalho do formulário.
• formTitle (string, opcional): Título exibido no cabeçalho do formulário.
• formSubtitle (string, opcional): Subtítulo exibido no cabeçalho do formulário.
• formShowPreferenciaContato (boolean, opcional): Exibe ou oculta o campo de preferência de contato no formulário.
• onFormSuccess ((requestBody, leadId) => void, opcional): Callback chamado após o envio bem-sucedido do formulário. Recebe o corpo da requisição (RequestBody) e o ID do lead gerado.

🚨 Componente dentro de um ErrorBoundary

Recomendamos que o componente MitreActionsWidget 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 MitreActionsWidget = dynamic(
  () => import("mitre-actions-widget").then((mod) => mod.MitreActionsWidget),
  { ssr: false }
);

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

<ErrorBoundary fallback={<div>Erro ao carregar o formulário</div>}>
  <MitreActionsWidget
    products={products}
    apiUrl={process.env.NEXT_PUBLIC_REGISTER_LEADS_URL!}
    apiToken={process.env.NEXT_PUBLIC_REGISTER_LEADS_TOKEN!}
    backgroundColor="#2DCE68" // Opcional: cor personalizada
    // formShowHeader={true}
    // formTitle="Fale conosco"
    // formSubtitle="Preencha o formulário abaixo"
    // formShowPreferenciaContato={true}
    // onFormSuccess={(body, leadId) => console.log("Lead criado:", leadId)}
  />
</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.