@sail-team/angular-balance-checker

Angular components for integrating Sail Balance Checker functionality into your application.

Installation

npm install @sail-team/angular-balance-checker

Setup

Initialize the custom elements in your main.ts file before bootstrapping your application:

import { bootstrapApplication } from '@angular/platform-browser';
import { AppComponent } from './app/app.component';
import { defineCustomElements } from '@sail-team/balance-checker/loader';

defineCustomElements();

bootstrapApplication(AppComponent, appConfig)
  .catch((err) => console.error(err));

In your component, add CUSTOM_ELEMENTS_SCHEMA to use the web components:

import { Component, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
import { CommonModule } from '@angular/common';

@Component({
  selector: 'app-root',
  standalone: true,
  imports: [CommonModule],
  schemas: [CUSTOM_ELEMENTS_SCHEMA],
  // ...
})
export class AppComponent { }

Components

onboard-flow

The onboarding component guides users through connecting their HSA/FSA account.

import { Component } from '@angular/core';

@Component({
  selector: 'app-onboarding',
  template: `
    <onboard-flow
      *ngIf="linkToken"
      [modal]="true"
      [linkToken]="linkToken"
      (onboardComplete)="handleOnboardComplete($event)"
      (sdkError)="handleError($event)"
      (publicTokenReceived)="handlePublicToken($event)"
      (closeModal)="handleClose()"
    />
  `
})
export class OnboardingComponent {
  linkToken: string = 'your-link-token';

  handleOnboardComplete(event: any) {
    const publicToken = event.detail?.public_token || event.public_token;
    console.log('Onboarding complete:', publicToken);
    // Exchange public token with your backend
  }

  handleError(event: any) {
    const error = event.detail?.error || event.error;
    console.error('Onboarding error:', error);
  }

  handlePublicToken(event: any) {
    const publicToken = event.detail?.public_token || event.public_token;
    console.log('Public token received:', publicToken);
  }

  handleClose() {
    this.linkToken = null;
  }
}

account-management

Manage connected accounts, including reconnection and deletion.

import { Component } from '@angular/core';

@Component({
  selector: 'app-account-settings',
  template: `
    <account-management
      *ngIf="linkToken"
      [linkToken]="linkToken"
      (closeModal)="handleClose()"
      (settingsUpdated)="handleSettingsUpdated($event)"
      (accountDeleted)="handleAccountDeleted($event)"
      (onboardComplete)="handleOnboardComplete($event)"
      (publicTokenReceived)="handlePublicToken($event)"
    />
  `
})
export class AccountSettingsComponent {
  linkToken: string = 'your-link-token';

  handleSettingsUpdated(event: any) {
    console.log('Settings updated:', event.detail || event);
    // Handle account disconnection
  }

  handleAccountDeleted(event: any) {
    console.log('Account deleted:', event.detail || event);
    // Handle account deletion
  }

  handleOnboardComplete(event: any) {
    const publicToken = event.detail?.public_token || event.public_token;
    console.log('Reconnection complete:', publicToken);
    // Exchange public token with your backend
  }

  handlePublicToken(event: any) {
    const publicToken = event.detail?.public_token || event.public_token;
    console.log('Public token received:', publicToken);
  }

  handleClose() {
    this.linkToken = null;
  }
}

balance-display

Display user's HSA/FSA balance with account management options.

import { Component } from '@angular/core';

@Component({
  selector: 'app-balance-sidebar',
  template: `
    <balance-display
      *ngIf="linkToken"
      [linkToken]="linkToken"
      width="100%"
      height="300px"
      (balanceUpdated)="handleBalanceUpdated($event)"
      (sdkError)="handleError($event)"
      (settingsUpdated)="handleSettingsUpdated($event)"
      (accountDeleted)="handleAccountDeleted($event)"
    />
  `
})
export class BalanceSidebarComponent {
  linkToken: string = 'your-link-token';

  handleBalanceUpdated(event: any) {
    console.log('Balance updated:', event.detail || event);
  }

  handleError(event: any) {
    const error = event.detail?.error || event.error;
    console.error('Balance error:', error);
  }

  handleSettingsUpdated(event: any) {
    console.log('Settings updated:', event.detail || event);
    // Handle account disconnection
  }

  handleAccountDeleted(event: any) {
    console.log('Account deleted:', event.detail || event);
    // Handle account deletion
  }
}

connect-flow

Refresh or reconnect users' HSA/FSA account connection with their administrator.

import { Component } from '@angular/core';

@Component({
  selector: 'app-administrator-reconnect',
  template: `
    <connect-flow
      *ngIf="linkToken"
      [modal]="true"
      [linkToken]="linkToken"
      (connectComplete)="handleConnectComplete($event)"
      (sdkError)="handleError($event)"
      (closeModal)="handleClose()"
    />
  `
})
export class AdministratorReconnectComponent {
  linkToken: string = 'your-link-token';

  handleConnectComplete(event: any) {
    const publicToken = event.detail?.public_token || event.public_token;
    console.log('Connection refreshed:', publicToken);
    // Exchange public token with your backend
  }

  handleError(event: any) {
    const error = event.detail?.error || event.error;
    console.error('Connection error:', error);
  }

  handleClose() {
    this.linkToken = null;
  }
}

Inputs & Outputs

Common Inputs

All components accept:

• linkToken (required): Token from your backend to authenticate the session

onboard-flow

Inputs:

• modal: Display as modal (boolean)

Outputs:

• onboardComplete: Emits when onboarding completes
• sdkError: Emits on errors
• publicTokenReceived: Emits when public token is received
• closeModal: Emits when modal closes

account-management

Outputs:

• closeModal: Emits when modal closes
• settingsUpdated: Emits when account settings change
• accountDeleted: Emits when account is deleted
• onboardComplete: Emits when reconnection completes
• publicTokenReceived: Emits when public token is received

balance-display

Inputs:

• width: Component width (string)
• height: Component height (string)

Outputs:

• balanceUpdated: Emits when balance updates
• sdkError: Emits on errors
• settingsUpdated: Emits when account settings change
• accountDeleted: Emits when account is deleted

connect-flow

Inputs:

• modal: Display as modal (boolean)

Outputs:

• connectComplete: Emits when connection completes
• sdkError: Emits on errors
• closeModal: Emits when modal closes

License

MIT