mitre-actions-button

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:

  yarn next: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 MitreActionsButton

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

import "react-phone-input-2/lib/style.css";
import dynamic from "next/dynamic";

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

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

# Usando npm
npm install mitre-actions-button

# Usando yarn
yarn add mitre-actions-button

# Usando pnpm
pnpm add mitre-actions-button

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

🔧 Props do Componente

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:

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

<ErrorBoundary fallback={<div>Erro ao carregar o formulário</div>}>
  <MitreActionsButton
    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"
  />
</ErrorBoundary>;

🏗️ Como gerar o build e publicar no npm

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

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

• Executar o build:

  Execute o comando para gerar o build da biblioteca:

  yarn build
  

• Publicar no npm:

  Após o build, publique a nova versão da biblioteca no npm com o comando:

  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.