Mitre Actions Button

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 next: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 "react-phone-input-2/lib/style.css";
import dynamic from "next/dynamic";

const MitreActionsButton = dynamic(
() => import("../components/MitreActionsButton"),
{
ssr: false,
}
);

productId={process.env.NEXT_PUBLIC_PRODUCT_ID!}
apiUrl={process.env.NEXT_PUBLIC_REGISTER_LEADS_URL!}
apiToken={process.env.NEXT_PUBLIC_REGISTER_LEADS_TOKEN!}
utm_source="google"
utm_medium="cpc"
utm_campaign="mitre"
utm_term="mitre"
/>;
`

---

🛠️ Tecnologias utilizadas

- React
- Styled Components
- React Icons

---

⚙️ 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 MitreActionsButton aceita as seguintes props:

- productId (string): O ID do produto relacionado ao empreendimento.
- apiUrl (string): URL da API para registro dos leads.
- apiToken (string): Token de autenticação da API.
- utm_source (string): Parâmetro UTM de origem da campanha (ex: 'google').
- utm_medium (string): Parâmetro UTM de meio da campanha (ex: 'cpc').
- utm_campaign (string): Parâmetro UTM de nome da campanha (ex: 'mitre').
- utm_term (string): Parâmetro UTM de termo da campanha (ex: 'mitre').

---

🚨 Componente dentro de um MitreActionsButton

Recomendamos que o componente MitreActionsButton 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 assim como react-phone-input-2/lib/style.css para correta estilização do componente externamente.

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

`tsx
import { ErrorBoundary } from "react-error-boundary";
const MitreActionsButton = dynamic(
() => import("mitre-actions-button").then((mod) => mod.MitreActionsButton),
{ ssr: false }
);

Erro ao carregar o formulário