Feature Pages Overview

Feature pages live under src/app/views/pages/ (plus src/app/views/onboarding/ for the onboarding flow) and are lazy-loaded from src/app/app-routing.module.ts.

Page index

Route Module Gating Detail

/auth, /login

AuthModule

LogOutGuard

Authentication

/dashboard

DashboardModule

DocuSignGuard

Dashboard

/manage-account

ManageAccountModule

TwoFactorAuthenticationGuard with force2FAConfirmation

Manage Account

/reports

ReportsModule

REPORTS permission gates the menu entry

Reports

/daily-summary-report

DailySummaryModule

NgxPermissionsGuard on REPORTS.DAILY_SUMMARY

Reports

/seller-card

SellerCardModule

SellerCardListGuard

Seller Card Pages

/newcard

NewCardModule

—

Seller Card Pages

/my-marketplaces

MyMarketplacesPageModule

MY_MARKETPLACES (default permission)

My Marketplaces

/product-offerings

ProductOfferingsModule

DocuSignGuard

Product Offerings

/onboarding

OnboardingModule

—

Onboarding

/vendor-pay

VendorPayIncomingReportsModule

VENDOR_PAY

Vendor Pay

/send-money

SendMoneyModule

VENDOR_PAY

Vendor Pay

/partners

PartnersModule

—

Other Pages

/referral

MoreFromPayabilityModule

REFERRAL

Other Pages

/payshield-subscription

PayshieldSubscriptionModule

—

Other Pages

/blog

BlogPageModule

—

Other Pages

/sales-call-summary

SalesCallSummaryModule

—

Other Pages

/help-center

— (guard-only)

HelpCenterRedirectGuard

Route Guards

The shell

Every authenticated route renders inside BaseComponent (src/app/views/theme/base/), which provides:

theme/header/

Top navigation, built from MenuConfig and filtered by permission. Includes header-mobile/.

theme/aside/

Side navigation and user-details/.

theme/subheader/

Page title and breadcrumbs, fed by SubheaderService.

theme/footer/

Footer with build version.

theme/brand/

Logo and white-label branding.

partials/layout/splash-screen/

Bootstrap loading screen.

Global banners are rendered by the shell and managed by BannerService.

Common page anatomy

pages/<feature>/
├── <feature>.module.ts        declarations + RouterModule.forChild(routes)
├── <feature>.component.ts     the page component (or <feature>.page.ts)
├── <feature>.component.html
├── <feature>.component.scss
├── <feature>.service.ts       feature-scoped service (provided by the module)
├── <feature>.config.ts        route table / column config / constants
├── <feature>.enums.ts
├── <feature>.types.ts
└── <sub-feature>/             nested lazy modules

Page components typically:

  • extend Subscriber and pipe through takeUntil(this.ngUnsubscribe$),

  • use ChangeDetectionStrategy.OnPush,

  • set the page title through SubheaderService,

  • select from the store rather than calling services directly,

  • dispatch a load action in ngOnInit.

Shared building blocks

partials/widgets/

Store-connected cards, mostly for the dashboard.

partials/modals/

Dialogs opened by MatDialog or PybDialogService.

partials/components/

Presentational primitives.

partials/content/

CTA strategies, export dialogs, the TabaPay iframe.

templates/

Reusable form templates such as simple-address-form.

core/pyb/components/grid/

AG Grid cell renderers.

Full inventory: Shared Components.

Environment redirection

DashboardPageHelperService handles a supplier landing on the wrong environment host. It compares the environment segment of the current host with the supplier’s own site and, if they differ, rebuilds the URL and redirects:

redirectToSupplierSite(supplierSite: string, currentHost: string, token = ''): void {
    const hostPart  = this.generateHostPart(currentHost, supplierSite);
    const loginPart = token ? `/#/login/auth?token=${token}` : '';
    const protocol  = this.windowRef.nativeWindow.location.protocol;
    this.windowRef.nativeWindow.location.href = `${protocol}//${hostPart}${loginPart}`;
}

The host is split on . to take the environment segment, then on - to take the dashboard segment, so dev1-sd.payability.com and dev1-crm.payability.com are recognised as the same environment with different dashboards. When a token is supplied the supplier is dropped straight into an authenticated session on the correct host.