Options

This section describes the BfmChargeSetupOptionsComponent component.

Usage

You can import the BfmChargeSetupOptionsComponent directly in your route configuration.

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

const routes = [
  {
    path: 'options',
    component: BfmChargeSetupOptionsComponent,
  },
];

Inputs

The BfmChargeSetupOptionsComponent component has the following inputs:

headerTitle

Header Component Title

Type	Default
string	'Cadastro para Emissão de Cobranças'

Events

The BfmChargeSetupOptionsComponent component has no events.

Configuration

TOKEN CHARGE_SETUP_OPTIONS_CONFIG

To customize the BfmChargeSetupOptionsComponent, you can inject the CHARGE_SETUP_OPTIONS_CONFIG token in your module.

This token is used to provide custom values to the component. If is not provided, the default values will be used.

Properties

Key	Description	Default
visibleCreditCardBilling	Indicates whether the credit card billing option is visible.	true

The CHARGE_SETUP_OPTIONS_CONFIG default values are:

{
  "visibleCreditCardBilling": "true",
}

Example

To customize the BfmChargeSetupOptionsComponent, you can inject the CHARGE_SETUP_OPTIONS_CONFIG token in your module.

app.config.ts

import { ApplicationConfig } from "@angular/core";
import { CHARGE_SETUP_OPTIONS_CONFIG } from "@celerofinancas/ui-charges";

export const appConfig: ApplicationConfig = {
  providers: [
    {
      provide: CHARGE_SETUP_OPTIONS_CONFIG,
      useValue: {
        visibleCreditCardBilling: true,
      },
    },
  ],
};

TOKEN CHARGE_DYNAMIC_PAGE_PARAMS

To customize the BfmChargeSetupOptionsComponent, you can inject the CHARGE_DYNAMIC_PAGE_PARAMS token in your module.

This token is used to provide custom values to the component. If is not provided, the default values will be used.

Properties

Key	Description	Default
imagePath	Path to the image asset used in the UI.	assets/charges/your-imagem.svg
title	Title displayed in the header.	'Cadastre a sua Cobrança'
subtitle	Subtitle providing additional instructions.	Para ter acesso à lista de cobranças, selecione abaixo a modalidade de cobrança que deseja cadastrar.
helpCenter.label	Label for the help center link.	'Saiba como fazer a integração da sua cobrança'
helpCenter.link	Dynamic link to the help center.	link.com.br

The CHARGE_DYNAMIC_PAGE_PARAMS default values are:

{
  "imagePath": "assets/charges/your-imagem.svg",
  "title": "Cadastre a sua Cobrança",
  "subtitle": "Para ter acesso à lista de cobranças, selecione abaixo a modalidade de cobrança que deseja cadastrar.",
  "helpCenter": {
    "label": "Saiba como fazer a integração da sua cobrança",
    "link": "link.com.br"
  }
}

Example

To customize the BfmChargeSetupOptionsComponent, you can inject the CHARGE_DYNAMIC_PAGE_PARAMS token in your module.

app.config.ts

import { ApplicationConfig } from '@angular/core';
import { ChargeDynamicParamsService } from './charge-dynamic-params.service';

export const appConfig: ApplicationConfig = {
  providers: [
    {
      provide: CHARGE_DYNAMIC_PAGE_PARAMS,
      useClass: ChargeDynamicParamsService
    },
  ],
};

charge-dynamic-params.service.ts

import { ApplicationConfig } from '@angular/core';
import { YourCustomService } from './your-custom-service';

@Injectable({
  providedIn: 'root',
})
export class ChargeDynamicParamsService {
  private readonly customService = inject(YourCustomService);
  
  public dynamicParams = {
      imagePath: 'assets/charges/your-imagem.svg',
      title: 'Cadastre a sua Cobrança',
      subtitle: `
        Para ter acesso à lista de cobranças, selecione abaixo a modalidade de cobrança que deseja cadastrar.
      `,
      helpCenter: {
        label: 'Saiba como fazer a integração da sua cobrança',
        link: this.customService.helpCenterLink,
      },
    }
 }

TOKEN CUSTOM_KEYCHAIN_TOKEN

To customize the BfmChargeSetupOptionsComponent, you can inject the CUSTOM_KEYCHAIN_TOKEN token in your module.

This token is used to provide custom values to the component. If is not provided, the default values will be used.

Example

To customize the BfmChargeSetupOptionsComponent, you can inject the CUSTOM_KEYCHAIN_TOKEN token in your module.

app.config.ts

import { ApplicationConfig } from '@angular/core';
import { CUSTOM_KEYCHAIN_TOKEN } from '@celerofinancas/state-management';
import { KEYCHAINS } from '@celerofinancas/core-ts';

export const appConfig: ApplicationConfig = {
  providers: [
    {
      provide: CUSTOM_KEYCHAIN_TOKEN,
      useValue: KEYCHAINS.key,
    },
  ],
};