Integrations Page

This section describes the BfmIntegrationsComponent component.

Usage

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

integrations.component.ts

import { BfmIntegrationsComponent } from '@celerofinancas/ui-user-kit';

@Component({
  standalone: true,
  selector: 'bfm-integrations',
  imports: [BfmIntegrationsComponent],
  templateUrl: './integrations.component.html',
})
export class IntegrationsPageComponent {}

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

integrations.component.html

<bfm-integrations />

Inputs

The BfmIntegrationsComponent component has no inputs.

Events

The BfmIntegrationsComponent component has no events.

Configuration

To customize the BfmIntegrationsComponent, you can inject the INTEGRATION_MODAL_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
blackList	A list of keys to exclude from specific operations.	["chargeIntegrationArticle", "registerDDA", "createConcessionaireTaxes"]
tasksSubstitution	An object for task-specific substitutions, allowing customization of tasks.	{}

The INTEGRATION_MODAL_CONFIG default values are:

{
  "integrationSetup": new Map(),
}

Example

To customize the BfmIntegrationsComponent, you can inject the INTEGRATION_MODAL_CONFIG token in your module.

app.config.ts

import { ApplicationConfig } from '@angular/core';
import { INTEGRATION_MODAL_CONFIG } from '@celerofinancas/ui-user-kit';

export const appConfig: ApplicationConfig = {
  providers: [
    {
      provide: INTEGRATION_MODAL_CONFIG,
      useClass: IntegrationModalService,
    },
  ],
};

integration-modal-service.service.ts

import { YourComponentModal } from './your-component-modal'; 
import { KEYCHAINS } from '@celerofinancas/core-ts';
import { IntegrationOptions } from '@celerofinancas/ui-user-kit';

export class IntegrationModalService {

  public integrationSetup = new Map<KEYCHAINS, IntegrationOptions>([
    [KEYCHAINS.yourKeyChain, {
      id: 'youId',
      label: 'Cobrança por boleto',
      image: `assets/integrations/bill.svg`,
      modal: YourComponentModal,
      modalParams: (keychain: Keychain) => (),
    }]
  ]);
}