Payment Info

This section describes the BfmFinancialRecordPaymentInfoComponent component.

Composition

The BfmFinancialRecordPaymentInfoComponent has no any composition components.

Usage

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

financial-record-payment-info.component.ts

import { BfmFinancialRecordPaymentInfoComponent } from '@celerofinancas/ui-cash-flow';

@Component({
  standalone: true,
  selector: 'financial-record-payment-info',
  imports: [BfmFinancialRecordPaymentInfoComponent],
  templateUrl: './financial-record-payment-info.component.html',
}) 
export class FinancialRecordPaymentInfoComponent {}

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

financial-record-payment-info.component.html

<bfm-financial-record-payment-info 
  [chargeType]="chargeTypeValue"
  [enableDeletion]="true"
  [initialLoading]="false"
/>

Inputs

The BfmFinancialRecordPaymentInfoComponent component has the following inputs:

chargeType

Verify if it's from charge list and which type it is.

Type	Default
CHARGE_LIST_TYPE enum from @celerofinancas/state-management	null

enableDeletion

Whether the component is able to delete dates.

Type	Default
boolean	true

initialLoading

Initial loading reference.

Type	Default
boolean	false

fields

The fields to be displayed in the component.

Type	Default
PaymentInfoFields[]	[]

Events

The BfmFinancialRecordPaymentInfoComponent component has no events.

Configurations

TOKEN FINANCIAL_RECORD_PAYMENT_INFO_CONFIGS

To customize the BfmFinancialRecordPaymentInfoComponent, you can inject the FINANCIAL_RECORD_PAYMENT_INFO_CONFIGS 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
fields	The fields to be displayed in the component.	[]

The FINANCIAL_RECORD_PAYMENT_INFO_CONFIGS default values are:

{
    "fields": [
    [
      {
        key: FINANCIAL_RECORD_PAYMENT_INFO_FIELDS.DUE_AT,
        order: 1,
        editable: true,
        label: 'Vencimento',
      },
      {
        key: FINANCIAL_RECORD_PAYMENT_INFO_FIELDS.SCHEDULED_AT_DATE,
        order: 2,
        editable: true,
        label: ['Agendar para', 'Agendado para'],
      },
      {
        key: FINANCIAL_RECORD_PAYMENT_INFO_FIELDS.SCHEDULED_IN_DATE,
        order: 3,
        editable: true,
        label: 'Agendado em',
      },
      {
        key: FINANCIAL_RECORD_PAYMENT_INFO_FIELDS.PAID_AT,
        order: 4,
        editable: true,
        label: 'Pago em',
      },
      {
        key: FINANCIAL_RECORD_PAYMENT_INFO_FIELDS.COMPENSATION_DATE,
        order: 5,
        editable: true,
        label: 'Compensação',
      },
    ],
    [
      {
        key: FINANCIAL_RECORD_PAYMENT_INFO_FIELDS.PAYMENT_METHOD,
        order: 1,
        editable: true,
        label: 'Método de pagamento',
      },
      {
        key: FINANCIAL_RECORD_PAYMENT_INFO_FIELDS.CHECKING_ACCOUNT,
        order: 2,
        editable: true,
        label: 'Sua conta',
      },
    ],
  ],
}

Example

To customize the BfmFinancialRecordPaymentInfoComponent, you can inject the FINANCIAL_RECORD_PAYMENT_INFO_CONFIGS token in your module.

app.config.ts

import { ApplicationConfig } from '@angular/core';
import { FINANCIAL_RECORD_PAYMENT_INFO_CONFIGS } from '@celerofinancas/ui-cash-flow';

export const appConfig: ApplicationConfig = {
  providers: [
    {
      provide: FINANCIAL_RECORD_PAYMENT_INFO_CONFIGS,
      useValue: {
        fields: [
          [
            {
              key: FINANCIAL_RECORD_PAYMENT_INFO_FIELDS.DUE_AT,
              order: 1,
              editable: true,
              label: 'Vencimento',
            },
            {
              key: FINANCIAL_RECORD_PAYMENT_INFO_FIELDS.SCHEDULED_AT_DATE,
              order: 2,
              editable: true,
              label: ['Agendar para', 'Agendado para'],
            },
            {
              key: FINANCIAL_RECORD_PAYMENT_INFO_FIELDS.SCHEDULED_IN_DATE,
              order: 3,
              editable: true,
              label: 'Agendado em',
            },
            {
              key: FINANCIAL_RECORD_PAYMENT_INFO_FIELDS.PAID_AT,
              order: 4,
              editable: true,
              label: 'Pago em',
            },
            {
              key: FINANCIAL_RECORD_PAYMENT_INFO_FIELDS.COMPENSATION_DATE,
              order: 5,
              editable: true,
              label: 'Compensação',
            },
          ],
          [
            {
              key: FINANCIAL_RECORD_PAYMENT_INFO_FIELDS.PAYMENT_METHOD,
              order: 1,
              editable: true,
              label: 'Método de pagamento',
            },
            {
              key: FINANCIAL_RECORD_PAYMENT_INFO_FIELDS.CHECKING_ACCOUNT,
              order: 2,
              editable: true,
              label: 'Sua conta',
            },
          ],
        ],
      },
    },
  ],
};