Shared Components

Shared UI lives under src/app/views/partials/, src/app/views/theme/, src/app/views/templates/ and src/app/core/pyb/components/.

Widgets — views/partials/widgets/

Store-connected cards, registered by WidgetModule.

Account and identity

Widget Permission Shows

your-account-widget

—

Account status and activation progress.

your-identity-widget

—

KYC status and the ID-upload prompt.

payments-config-widget

TRANSFER_INFORMATION

The configured payout method.

additional-documents-widget

—

Outstanding document requirements.

check-list

—

Onboarding progress checklist.

Financial products

Widget Permission Shows

advance-line-widget

ADVANCE_LINE.VIEW_ADVANCE_LINE_WIDGET

Available credit, outstanding balance, draw CTA.

advance-line-open-advances

ADVANCE_LINE.VIEW_ADVANCE_LINE_REPORT

Open drawdowns.

advance-line-past-advances

ADVANCE_LINE.VIEW_ADVANCE_LINE_REPORT

Historical drawdowns.

advance-rate-widget

—

The supplier’s advance rate.

instant-advance-widget

INSTANT_ADVANCE_REPORT_WIDGET

Active Instant Advance and repayment progress.

instant-access-widget

—

Instant Transfer eligibility CTA.

daily-summary

DAILY_SUMMARY

Recent daily transaction totals.

Cards and payments

seller-cards

SELLER_CARD

Card balance, last four, quick actions.

seller-cards-panel

SELLER_CARD

The unified "Your Cards" panel across both issuers.

vendorpay-incoming-payments-widget

VENDOR_PAY

Incoming vendor payments.

Security

password-widget

Last password change and the change link.

two-factor-widget

2FA status and the setup link.

two-factor-setup-widget

The enrolment wizard UI.

Generic

common-list-widget

Reusable list widget.

Modals — views/partials/modals/

Registered by ModalsModule, opened with MatDialog or PybDialogService.

Advance products

advance-line/

Draw input, confirmation and success dialogs.

instant-advance-details-modal/

Instant Advance terms.

instant-transfer-details-modal/

Instant Transfer fees and limits.

instant-transfer-setup/

InstantTransferSetupModal and InstantTransferSetupSuccessModal (TabaPay iframe).

transfer-funds-modal/

Transfer request.

Long Term Contract

ltc-options-modal/

Option list.

ltc-option-confirm-details-modal/

Confirm the chosen option.

ltc-sumarry-modal/

Post-signature summary. (Folder name is misspelled in the repo.)

generic-ltc-modal/

Shared LTC dialog shell.

Seller Card

seller-card-activate-modal/

Marqeta card activation.

seller-card-order-modal/

Order or replace a card.

seller-card-block-modal/ / seller-card-unblock-modal/

Block and unblock confirmations.

seller-card-view-modal/

Reveal Marqeta card details.

airwallex-card-view-modal/

Reveal Airwallex card details.

seller-card-transition-modal/

Marqeta → Airwallex migration, optionally including the terms step.

airwallex-pcard-terms-modal/

Airwallex cardholder terms acceptance.

Account and banking

transfer-information/

Payout method management.

bank-verification-info-modal/

Why bank verification is needed.

lost-bank-connection-modal/

Re-link a dropped Plaid connection.

switch-cd-dialog/

Switch between checking and deposit accounts.

confirm-password-modal/

Re-authenticate before a sensitive change.

confirm-login-modal/

Login confirmation.

two-factor/

2FA setup and SMS challenge dialogs.

entrust-verification-modal/

Hosts the Onfido SDK for identity verification.

Marketplaces

add-selling-info-modal/

Add marketplace credentials.

amazon-suspended/

The supplier’s Amazon account is suspended.

Notifications and messaging

welcome-modal/

First-session welcome (new_sd_welcome).

referral-banner/

Referral programme promotion.

legal-info-modal/

Legal disclosures.

cancellation-survey/

Multi-step cancellation survey. Registered globally in AppModule.

vendor-pay-success-modal/

Vendor Pay success. Currently superseded by PybMessageModalComponent.

message-modal/

MessageModalService, PybMessageModalComponent, MessageModalData, MessageModalIconColor, MessageModalIconType. The standard result dialog.

simple-modal/

Title, body, dismiss.

simple-confirm-modal/

Yes/no confirmation. Registered globally in AppModule.

common-modals/

Shared modal base configuration.

Utility

preview-image-modal/

Full-size document preview.

pwa-ios-install-modal/

iOS add-to-home-screen instructions.

UI primitives — views/partials/components/

Registered by ComponentsModule.

Status and feedback

status-badge

Coloured pill status label.

status-chip

Compact chip variant.

banner

Full-width dismissible banner (rendered by BannerService).

update-app-banner

PWA update-available prompt.

two-factor-authentication-required-banner

2FA enrolment alert.

re-sign-contract-banner

Prompt to re-sign an updated agreement.

skeleton

Shimmer placeholders for loading states.

Forms and input

fields

Dynamic form field rendering from a config array.

image-upload / image-preview

Document capture with preview.

select-button

Button-styled selection control.

button

Styled button with a loading state.

go-back-button

Breadcrumb-style back navigation.

Display

html-render

Sanitized HTML rendering for CMS content.

icon-list

List with leading icons.

hint-popover

Info icon with tooltip, wired to help articles.

ad-card

Promotional card — the render target for CTA strategies (IAdCard).

punch-card

Reward/progress punch card.

advance-line-description

Formatted Advance Line terms block.

card-visual

Generic card artwork.

pcard

Marqeta card artwork.

awx-card

Airwallex card artwork.

contact-support

Support contact block.

contacts

Contact details from contact.const.ts.

reports-mobile-content-row

Mobile replacement for a grid row.

Content — views/partials/content/

cta/

CtaFactory, CtaComponent, the strategy set, session keys, and the standalone open-invoices CTA. See Dashboard Notifications & CTAs.

export-dialog/

ExportDialogModal — progress while a report is prepared.

export-form-dialog/

ExportFormDialogComponent — extended export options.

tabapay-iframe/

The TabaPay card-capture iframe and its event types.

general/, widgets/

Shared content blocks.

Grid — core/pyb/components/grid/

PybGridModule, imported by AppModule.

grid.component.ts

The AG Grid wrapper and GridOptions handling.

cells/cell/

CellComponent — the generic cell.

cells/base-cell.component.ts

Shared cell behaviour.

cells/currency/

Currency formatting.

cells/date/

Locale-aware dates.

cells/translate/

Values routed through @ngx-translate.

cells/progress-bar/

Inline progress.

cells/actions/

Per-row action buttons.

cells/toggle/

Row-level switches.

filter-popup/

Column-header filter overlay.

Lower-level renderers, headers, overlays, status bars and value formatters live in core/reports/ag-grid/.

Other core components

core/pyb/components/pagination/

PybPaginationModule — pagination below grids.

core/pyb/components/dynamic-container/

Runtime component loading via ViewContainerRef.

core/pyb/components/recaptcha/

RecaptchaComponent — badge visibility control. reCAPTCHA

Shell — views/theme/

base/

BaseComponent — the authenticated shell hosting the router outlet.

header/

Top navigation from MenuConfig, plus header-mobile/.

aside/

Side navigation and user-details/.

subheader/

Page title and breadcrumbs, fed by SubheaderService.

footer/

Footer with build version.

brand/

Logo and white-label branding.

views/partials/layout/ holds splash-screen/ and subheader/.

Templates — views/templates/

simple-address-form/

The reusable address form used by personal, business and shipping addresses.

Pipes and directives — core/_base/layout/

safe

Bypasses sanitization for trusted HTML.

join

Joins an array into a string.

getObject

Safe nested property access.

firstLetter

First character (initials).

addPercent

Appends a percent sign.

maskedBankAccount

Masks an account number.

replaceSentence

Token replacement in a sentence.

ktContentAnimate

Page transition animation on router navigation.

ktSticky

Sticky positioning with spacer and boundary support.

pybDisabled

Toggles the bound form control’s disabled state.

core/pyb/pipes/filter-by.pipe.ts provides filterBy. PybCurrencyAccountingModule comes from @payability/pyb-ngx-components.

Behaviour, inputs and gotchas for each: Utility Reference.