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:

``bash
yarn dev
`

---

❌ Itens que NÃO devem ser modificados

$3

- 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.

$3

- 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

$3

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

$3

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

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

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

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

---

🛠️ Tecnologias utilizadas

- React
- Styled Components
- React Icons
- Vite
- Tsup

---

✨ Características

$3

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.).

`bash


Usando npm

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).

---

🚨 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:

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

Erro ao carregar o formulário