Create

This section describes the BfmChargeCreateComponent component.

Composition

The BfmChargeCreateComponent is composed of the following components:

• BfmChargeThirdPartyInformationComponent - Third party information component.
• BfmChargeOfferedServiceInformationComponent - Offered service information component.
• BfmChargeInformationComponent - Charge information component.
• BfmChargeFinesAndDiscountsComponent - Fines and discounts component.
• BfmChargeSplitComponent - Split component.
• BfmChargeInstallmentsComponent - Installments component.
• BfmChargeTaxInformationComponent - Tax information component.
• BfmChargeSummaryComponent - Summary component.
• BfmChargeSuccessComponent - Success component.

Usage

You can import the BfmChargeCreateComponent directly in your route configuration.

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

const routes = [
  {
    path: 'create',
    component: BfmChargeCreateComponent,
  },
];

But if you need more customization, you need to import it in your module and use it in your template.

create.component.ts

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

@Component({
  standalone: true,
  selector: 'create',
  imports: [BfmChargeCreateComponent],
  templateUrl: './create.component.html',
})
export class CreateComponent {}

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

create.component.html

<bfm-charge-create 
  [availableSteps]="availableSteps"
  [backTitle]="'Tipos de Cobranças'"
  (onboardingEvent)="handleOnboardingEvent($event)"
/>

Inputs

The BfmChargeCreateComponent component has the following inputs:

availableSteps

Array of available charge steps

Type
Map<CHARGE_STEP, AvailableStep>

Reference:

• CHARGE_STEP
• AvailableStep

Default value:

new Map([
    [
      CHARGE_STEP.thirdParty,
      {
        icon: 'user',
        key: CHARGE_STEP.thirdParty,
        stepName: 'thirdParty',
        title: 'Informações do Cliente',
        progress: 0,
      },
    ],
    [
      CHARGE_STEP.renderedServices,
      {
        icon: 'wrench',
        key: CHARGE_STEP.renderedServices,
        stepName: 'renderedServices',
        title: 'Informações do Serviço',
        progress: 0,
      },
    ],
    [
      CHARGE_STEP.chargeInfo,
      {
        icon: 'charge',
        key: CHARGE_STEP.chargeInfo,
        stepName: 'chargeInfo',
        title: 'Informações da Cobrança',
        progress: 0,
      },
    ],
    [
      CHARGE_STEP.finesAndDiscounts,
      {
        icon: 'charge',
        key: CHARGE_STEP.finesAndDiscounts,
        stepName: 'finesAndDiscounts',
        title: 'Multas e Descontos',
        progress: 0,
      },
    ],
    [
      CHARGE_STEP.paymentSplit,
      {
        icon: 'charge',
        key: CHARGE_STEP.paymentSplit,
        stepName: 'paymentSplit',
        title: 'Split do Pagamento',
        progress: 0,
      },
    ],
    [
      CHARGE_STEP.taxInfo,
      {
        icon: 'charge',
        key: CHARGE_STEP.taxInfo,
        stepName: 'taxInfo',
        title: 'Informações de Tributos',
        progress: 0,
      },
    ],
    [
      CHARGE_STEP.summary,
      {
        icon: 'resume',
        key: CHARGE_STEP.summary,
        stepName: 'summary',
        title: 'Resumo da Cobrança',
        progress: 0,
      },
    ],
  ]);

backTitle

Header Back Title Component

Type	Default
string	'Tipos de Cobranças'

Events

The BfmChargeCreateComponent component has the following Events:

onboardingEvent

Onboarding Event - Call OnboardingModalService to open the next onboarding step

Type
EventEmitter

Configuration

To customize the BfmChargeCreateComponent, you can inject the CHARGE_CREATE_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
hasSplitPermission	Whether the charge's split functionality should be enabled	false

The CHARGE_CREATE_CONFIGS default values are:

{
  hasSplitPermission: false,
}

Example

To customize the BfmChargeCreateComponent, you can inject the CHARGE_CREATE_CONFIGS token in your module.

app.config.ts

import { ApplicationConfig } from "@angular/core";
import { CHARGE_CREATE_CONFIGS } from "@celerofinancas/ui-charges";
import { ChargeCreateService } from "./charge-create.service";

export const appConfig: ApplicationConfig = {
  providers: [
    {
      provide: CHARGE_CREATE_CONFIGS,
      useClass: ChargeCreateService,
    },
  ],
};

charge-create.service.ts

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

@Injectable({
  providedIn: 'root',
})
export class ChargeCreateService {
  private customService = inject(YourCustomService);

  public get hasSplitPermission(): boolean {
    return this.customService.splitPermission;
  }
}