@sail-team/react-balance-checker

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

Installation

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

Setup

Initialize the custom elements before using any components. Add this to your main App component:

import React, { useEffect } from 'react';
import { defineCustomElements } from '@sail-team/balance-checker/loader';

function App() {
  useEffect(() => {
    defineCustomElements();
  }, []);

  return (
    // Your app content
  );
}

Components

OnboardFlow

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

import { OnboardFlow } from '@sail-team/react-balance-checker';

function App() {
  const [linkToken, setLinkToken] = useState<string>('your-link-token');

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

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

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

  const handleClose = () => {
    setLinkToken(null);
  };

  return (
    <OnboardFlow
      linkToken={linkToken}
      modal={true}
      onOnboardComplete={handleOnboardComplete}
      onSdkError={handleError}
      onPublicTokenReceived={handlePublicToken}
      onCloseModal={handleClose}
    />
  );
}

AccountManagement

Manage connected accounts, including reconnection and deletion.

import { AccountManagement } from '@sail-team/react-balance-checker';

function AccountSettings() {
  const [linkToken, setLinkToken] = useState<string>('your-link-token');

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

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

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

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

  const handleClose = () => {
    setLinkToken(null);
  };

  return (
    <AccountManagement
      linkToken={linkToken}
      onCloseModal={handleClose}
      onSettingsUpdated={handleSettingsUpdated}
      onAccountDeleted={handleAccountDeleted}
      onOnboardComplete={handleOnboardComplete}
      onPublicTokenReceived={handlePublicToken}
    />
  );
}

BalanceDisplay

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

import { BalanceDisplay } from '@sail-team/react-balance-checker';

function BalanceSidebar() {
  const [linkToken, setLinkToken] = useState<string>('your-link-token');

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

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

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

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

  return (
    <BalanceDisplay
      linkToken={linkToken}
      width="100%"
      height="300px"
      onBalanceUpdated={handleBalanceUpdated}
      onSdkError={handleError}
      onSettingsUpdated={handleSettingsUpdated}
      onAccountDeleted={handleAccountDeleted}
    />
  );
}

ConnectFlow

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

import { ConnectFlow } from '@sail-team/react-balance-checker';

function AdministratorReconnect() {
  const [linkToken, setLinkToken] = useState<string>('your-link-token');

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

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

  const handleClose = () => {
    setLinkToken(null);
  };

  return (
    <ConnectFlow
      linkToken={linkToken}
      modal={true}
      onConnectComplete={handleConnectComplete}
      onSdkError={handleError}
      onCloseModal={handleClose}
    />
  );
}

Props

Common Props

All components accept:

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

OnboardFlow Props

• modal: Display as modal (boolean)
• onOnboardComplete: Callback when onboarding completes
• onSdkError: Callback for errors
• onPublicTokenReceived: Callback when public token is received
• onCloseModal: Callback when modal closes

AccountManagement Props

• onCloseModal: Callback when modal closes
• onSettingsUpdated: Callback when account settings change
• onAccountDeleted: Callback when account is deleted
• onOnboardComplete: Callback when reconnection completes
• onPublicTokenReceived: Callback when public token is received

BalanceDisplay Props

• width: Component width (string)
• height: Component height (string)
• onBalanceUpdated: Callback when balance updates
• onSdkError: Callback for errors
• onSettingsUpdated: Callback when account settings change
• onAccountDeleted: Callback when account is deleted

ConnectFlow Props

• modal: Display as modal (boolean)
• onConnectComplete: Callback when connection completes
• onSdkError: Callback for errors
• onCloseModal: Callback when modal closes

License

MIT