Componente flutuante de botões com ações de contato para ser usado em projetos da Mitre Realty.
npm install mitre-actions-buttonComponente 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.
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
---
- 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.
- 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.
---
Embora o componente esteja pronto para uso, você pode personalizá-lo ao passar as props adequadas.
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,
}
);
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"
/>;
`
---
- React
- Styled Components
- React Icons
---
Este componente pode ser instalado em qualquer projeto React usando o gerenciador de pacotes de sua preferência (npm, yarn, pnpm, etc.).
`bashUsando npm
npm install 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
MitreActionsButtonRecomendamos 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
---
🏗️ 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:
Execute o comando para gerar o build da biblioteca:
`bash
yarn build
`3. Publicar no npm:
Após o build, publique a nova versão da biblioteca no npm com o comando:
`bash
yarn publish --new-version 0.x.xxx
``---
Este projeto é mantido pela Mitre Realty. Uso restrito aos colaboradores e parceiros autorizados.
---
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.