Route Tree

Routing is declared in src/app/app-routing.module.ts with RouterModule.forRoot(routes, { useHash: true, relativeLinkResolution: 'legacy' }). Hash routing means every URL carries a , e.g. https://app.payability.com//dashboard.

Route strings are centralised in src/app/core/_config/urls-route.const.ts as the frozen URLS_ROUTER object.

Top level

Path Target Guards

/auth/**

AuthModule (lazy)

—

/login/**

AuthModule (lazy)

—

/login/confirm/email/:emailcode

redirect → manage-account/two-factor/confirm/:emailcode

—

/ (shell)

BaseComponent

AuthGuard

/** (unmatched, outside the shell)

redirect → error/403

—

Auth module (/auth, /login)

Path Component Guards

`` (empty)

redirect → login

—

login

LoginComponent

LogOutGuard

auth

LoginAsSupplierComponent

—

register

RegisterComponent

LogOutGuard

reset-password

RecoverPasswordComponent

LogOutGuard

new-password

NewPasswordComponent

NewPasswordTokenGuard

login carries data: { returnUrl: window.location.pathname } so the user is returned to where they were after signing in.

auth (LoginAsSupplierComponent) is the internal impersonation entry point — staff arrive with a token and are dropped straight into the supplier’s session.

Authenticated shell (BaseComponent, AuthGuard)

Path Module Guards / data

dashboard

DashboardModule

DocuSignGuard

daily-summary-report

DailySummaryModule

NgxPermissionsGuard, permissions.only: ['REPORTS.DAILY_SUMMARY']

my-marketplaces

MyMarketplacesPageModule

—

sales-call-summary

SalesCallSummaryModule

—

seller-card

SellerCardModule

—

newcard

NewCardModule

—

vendor-pay

VendorPayIncomingReportsModule

—

send-money

SendMoneyModule

—

reports

ReportsModule

—

manage-account

ManageAccountModule

—

partners

PartnersModule

—

product-offerings

ProductOfferingsModule

DocuSignGuard

referral

MoreFromPayabilityModule

—

help-center

DashboardComponent (never rendered)

HelpCenterRedirectGuard

payshield-subscription

PayshieldSubscriptionModule

—

blog

BlogPageModule

—

onboarding

OnboardingModule

—

`` (empty)

redirect → dashboard

—

**

redirect → dashboard

—

help-center declares DashboardComponent purely to satisfy the router’s requirement for a target. HelpCenterRedirectGuard navigates away and returns false, so the component is never instantiated.

Reports (/reports)

Declared in src/app/views/pages/reports/reports-routing.module.ts under the ReportsComponent shell.

Path Module / component

/reports/card-transactions

CardTransactionsPageComponent (eager within the module)

/reports/transfer

TransferReportPageModule

/reports/marketplace-transaction-details

MarketplaceTransactionPageModule

/reports/instant-advance-report

InstantAdvanceReportPageModule

/reports/reconciliation-view

ReconciliationViewReportModule

/reports/fee-report

FeeReportPageModule

/reports/outstanding-balance

OutstandingBalancePageModule

/reports/vendor-pay-report

VendorpayReportsModule

/reports/marketplace-payment-report

MarketplacePaymentPageModule

/reports/daily-summary-report

DailySummaryModule

/reports/contracts-overview-report

ContractsOverviewPageModule

The Daily Summary report is reachable at two URLs. /reports/daily-summary-report sits inside the reports shell; /daily-summary-report is a top-level route additionally gated by NgxPermissionsGuard on REPORTS.DAILY_SUMMARY.

Manage Account (/manage-account)

Declared in src/app/views/pages/manage-account/manage-account.module.ts under ManageAccountComponent. The parent route applies:

const force2FAConfirmationGuard = {
    canActivate: [TwoFactorAuthenticationGuard],
    data: { force2FAConfirmation: true },
};

Child paths come from manage-account.config.ts (manageAccountRoutes):

Path Module

` (empty, `pathMatch: 'full')

YourInformationModule

your-information

YourInformationModule

your-information/upload-id

UploadIdModule

business-information

BusinessInformationModule

transfer-information

TransferInformationModule (reused from pages/settings/)

security

SecurityModule

security/change-password

ChangePasswordModule

security/two-factor

TwoFactorModule

A sibling route two-factor/confirm/:emailcode renders ManageAccountComponent directly. It is the landing target for the email-confirmation link redirected from /login/confirm/email/:emailcode.

Onboarding (/onboarding)

Declared in src/app/views/onboarding/onboarding.module.ts under OnboardingComponent, which routes the supplier to the correct step based on dashboardStatus.

Path Module

repayment-information

RepaymentInformationModule

underwriting-review

UnderwritingReviewModule

product-offering

ProductOfferingModule

sign-agreement

SignAgreementModule

See Onboarding.

Seller Card (/seller-card)

Path Component Guard

``

SellerCardPage → SellerCardListComponent

SellerCardListGuard

ActiveUserGuard is also defined in pages/seller-card/guards/ for card operations that require an active supplier.

URLS_ROUTER reference

export const URLS_ROUTER = {
    AUTH:            { LOGIN: 'auth/login' },
    DASHBOARDS:      { ROOT: 'dashboard' },
    PRODUCT_OFFERINGS: { ROOT: 'product-offerings' },
    UNSUPPORTED:     { ROOT: 'unsupported' },
    SELLER_CARD:     { ROOT: 'seller-card' },
    NEW_CARD:        { ROOT: 'newcard' },
    MARKETPLACE:     { ROOT: 'marketplaces', MY_MARKETPLACES: 'my-marketplaces' },
    REPORTS: {
        ROOT: 'reports',
        DAILY_SUMMARY_REPORT: 'reports/daily-summary-report',
        INSTANT_ADVANCE_REPORT: 'reports/instant-advance-report',
        TRANSFER: 'reports/transfer',
        MARKETPLACE_PAYMENT_REPORT: 'reports/marketplace-payment-report',
        MARKETPLACE_TRANSACTION_DETAILS: 'reports/marketplace-transaction-details',
        RECONCILIATION_VIEW: 'reports/reconciliation-view',
        FEE_REPORT: 'reports/fee-report',
        OUTSTANDING_BALANCE: 'reports/outstanding-balance',
        CARD_TRANSACTIONS: 'reports/card-transactions',
        CONTRACTS_OVERVIEW_REPORT: 'reports/contracts-overview-report',
        VENDOR_PAY_INCOMING: 'vendor-pay',
        VENDOR_PAY: 'reports/vendor-pay-report',
    },
    SETTINGS: {
        PERSONAL_INFORMATION: 'settings/personal-information',
        BUSINESS_INFORMATION: 'settings/business-information',
        AGREEMENT: 'settings/agreement',
        TRANSFER_INFORMATION: 'settings/transfer-information',
        TWO_FACTOR_AUTHENTICATION: 'settings/two-factor-authentication',
    },
    HELP_CENTER:     { ROOT: 'help-center' },
    MANAGE_ACCOUNT:  { ROOT: 'manage-account', TWO_FACTOR: 'manage-account/two-factor' },
    REFERRAL:        { ROOT: 'referral' },
    PARTNERS:        { ROOT: 'partners' },
    PAYSHIELD_SUBSCRIPTION: { ROOT: 'payshield-subscription' },
    BLOG:            { ROOT: 'blog' },
} as const;

MenuConfig (src/app/core/_config/menu.config.ts) declares the header menu tree. Each item carries a page (from URLS_ROUTER), a translate key and an optional permission string. Items whose permission the user lacks are hidden, so the menu and the guards are driven by the same permission names.