Fiscal Document - Certificate Setup Banner

This section describes the BfmCertificateSetupBannerComponent component.

It renders the activation banner shown before the digital certificate is configured, inviting the user to enable the automatic fiscal document management.

When the action button is clicked, the component fires a tracking event and automatically opens the certificate configuration modal (BfmCertificateConfigModalComponent) — no handler is required on the consumer side.

Visibility

This banner is meant to be shown only while the fiscal document module is not activated for the active company. The component does not decide its own visibility — the consumer renders it based on the activation status exposed by the FinancialManagementService, typically with @if (nfModuleActivated() === false). Once the module is activated, the consumer should render the BfmFinancialDashboardComponent and the NFe/NFSe tables instead. See Module activation status for the full rule and example.

Usage

You need to import it in your module and use it in your template.

certificate-setup-banner.component.ts

import { BfmCertificateSetupBannerComponent } from '@celerofinancas/ui-charges';

@Component({
  standalone: true,
  selector: 'certificate-setup-banner',
  imports: [BfmCertificateSetupBannerComponent],
  templateUrl: './certificate-setup-banner.component.html',
})
export class CertificateSetupBannerComponent {}

Then, in your template, you can use the component like this:

certificate-setup-banner.component.html

<bfm-certificate-setup-banner />

Inputs

The BfmCertificateSetupBannerComponent component has the following inputs:

title

Title of the banner.

Type	Default
string	'Ative o controle automático das suas Notas Fiscais'

subtitle

Subtitle of the banner.

Type	Default
string	'Insira seu Certificado Digital para buscar as notas de entrada e saída do seu CNPJ diretamente da Secretaria da Fazenda e do Portal Nacional.'

image

Image path for the banner.

Type	Default
string	'assets/shared/invoice.svg'

features

List of feature highlights displayed with an icon.

Type	Default
string[]	['Visão total em um só lugar.', 'Dados das NFs em tempo real.', 'Automação para economia de tempo.']

titleButton

Title of the action button.

Type	Default
string	'Ativar gestão de notas'

iconItem

Icon name used for each feature highlight.

Type	Default
string	'cds-icon-star'

activationContext

Context used to determine which activation-start tracking event should be fired.

Type	Default
TypeFinancialManagement	undefined