Supplier Client

The Payability Supplier Client (pyb-ng2-supplier-client) is the customer-facing single-page application that Payability suppliers use to onboard, access financial products, manage their marketplace connections, run reports and administer their account.

This component documents the application end to end: its architecture, its routing and permission model, every NgRX slice, all business rules encoded in the client, every third-party integration, and the complete analytics event catalog.

At a glance

Repository

pyb-ng2-supplier-client

Type

Angular 12 single-page application

App version

1.47.0

Node

12

Routing

Hash-based (useHash: true)

State

NgRX 12 (store, effects, entity, router-store)

UI kit

Angular Material + @payability/pyb-ngx-components

API client

@payability/pyb-ng2-api (generated services, DTOs, models)

Delivery

AWS CodeBuild (buildspec.yaml) → static bundle in dist/

Technology stack

Area Library Role

Framework

@angular/* 12

SPA framework, DI, router, forms

State

@ngrx/store, @ngrx/effects, @ngrx/entity, @ngrx/router-store

Reactive state, side effects, normalized collections

Immutability

ngrx-store-freeze

Dev-only meta-reducer that throws on state mutation

Permissions

ngx-permissions

Template directives + route guard driven by calculated permissions

i18n

@ngx-translate/core

All user-facing copy is translated; keys live in src/assets/i18n/en.ts

Tables

ag-grid-enterprise

Every report grid, with custom cell renderers

Banking

ngx-plaid-link

Bank account linking during onboarding and payment setup

Contracts

DocuSign (via @payability/pyb-ng2-api)

Legally binding signature flows

Cards

Marqeta (MarqetaModule), Airwallex

Seller Card issuance and management

Identity

onfido-sdk-ui, Entrust

KYC document capture and identity re-verification

Analytics

ngx-segment-analytics, smartlook-client

Product analytics and session replay

Metrics

CloudWatchModule (in-repo vendor module)

Page-load timing and error counters

Bot defence

ng-recaptcha (v3)

Login, registration and password-reset forms

State machines

xstate

Used by selected multi-step UI flows

Where to start

If you want to… Read

Understand how the app is put together

Architecture Overview

Find out why a supplier can or cannot see a feature

Permissions System

Trace a URL to the module that serves it

Route Tree

Understand the financial products

Domain Model

Change a contract-signing flow

DocuSign Contract Flows

Add or rename an analytics event

Event Catalog

Build a form, or work out why one will not validate

Forms & Fields

Change the header, aside, subheader or a banner

Application Shell

Know which API service to call

API Client

Fix a colour, a dark-mode bug, or add a white-label brand

Styling & Theming

Run the app locally

Local Setup

Ship a new page

Adding a Feature

The five rules that explain most of the codebase

Permissions are computed on the client, at login

PermissionsService.getUserPermissions(user) derives the full permission set from the User object every time the user is loaded or their status changes. Nothing is stored server-side. Any behaviour that looks like "the backend decided" is almost always a rule in permissions.service.ts.
Only the Expedited schema unlocks products while pending

A supplier with schema === OnboardingSchemaEnum.Expedited (exp_onb) and a Pending / PendingActivation status can access Advance Line features before activation. Every other schema must wait for Active. See Onboarding.
DocuSign flows are guarded by a localStorage flag

docusignFlowInitialized is written to localStorage immediately before the browser leaves for DocuSign, and checked on return. Without the flag no business action runs, which prevents a bookmark or refresh from replaying a withdrawal. See DocuSign Contract Flows.
Seller Card eligibility is a three-way AND

hasPaymentHistory and (pcardAvailable or both addresses are US) and not currently onboarding. isFromUS() requires the business address and the residential address to be US. See Seller Card.
Every user-facing action emits a Segment event

All tracking goes through EventLoggerService. Adding a button without adding its event is a review-blocking omission. See Event Logger.

Scope of this component

This documents the client application only. It describes the API calls the client makes and the DTOs it consumes, but the services behind @payability/pyb-ng2-api are documented by their own components in the central Antora site.