Platform Guide

This section describes the BfmPlatformGuideComponent component.

Composition

The BfmPlatformGuideComponent is composed of the following components:

• BfmTutorialCardComponent - Component for displaying tutorial cards.
• BfmOnboardingTourTestComponent - Component for managing onboarding tours.
• BfmThemedProgressBarComponent - Component for displaying themed progress bars.
• BfmPlatformGuideTaskComponent - Component for managing platform guide tasks.

Usage

You can import the BfmPlatformGuideComponent directly in your route configuration.

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

const routes = [
  {
    path: 'platform-guide',
    component: BfmPlatformGuideComponent,
  },
];

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

platform-guide.component.ts

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

@Component({
  standalone: true,
  selector: 'platform-guide',
  imports: [BfmPlatformGuideComponent],
  templateUrl: './platform-guide.component.html',
})
export class CustomPlatformGuideComponent {}

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

platform-guide.component.html

<bfm-platform-guide />

Inputs

The BfmPlatformGuideComponent component has no inputs.

Events

The BfmPlatformGuideComponent component has no events.

Configuration

To customize the BfmPlatformGuideComponent, you can inject the PLATFORM_GUIDE_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
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 PLATFORM_GUIDE_CONFIGS default values are:

{
  "blackList": [
    "chargeIntegrationArticle",
    "registerDDA",
    "createConcessionaireTaxes",
  ],
  "tasksSubstitution": {},
}

Example

To customize the BfmPlatformGuideComponent, you can inject the PLATFORM_GUIDE_CONFIGS token in your module.

app.config.ts

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

export const appConfig: ApplicationConfig = {
  providers: [
    {
      provide: PLATFORM_GUIDE_CONFIGS,
      useValue:{
        blackList: [
          'itemBlacklist'
        ],
        tasksSubstitution: {
          dataManagement: {
            knowingFinancialData: {
              knowingFinancialRecords: {
                youtubeId: '',
              },
              creatingFinancialRecords: {
                youtubeId: '',
              },
            },
            improveReportData: {
              whyToClassify: {
                youtubeId: '',
              },
            },
          },
        },
      },
    },
  ],
};