Vendor Pay

Vendor Pay ("forward payments") lets a supplier send part of their Payability balance directly to a vendor, and lets a vendor see payments arriving from suppliers.

Availability

Permission

VENDOR_PAY

Condition

status.hasForwardPaymentEnabled

Menu

MenuConfig entry MENU.REPORTS.VENDOR_PAY → URLS_ROUTER.REPORTS.VENDOR_PAY_INCOMING

Sending money — /send-money

SendMoneyModule (views/pages/send-money/). A single reactive form collecting the recipient and amount.

Component

SendMoneyComponent — extends Subscriber, OnPush.

Service

SendMoneyPageService, wrapping SendMoneyService from @payability/pyb-ng2-api.

Balance

Read from selectBalanceState so the supplier sees what is available.

Form rules

NAME_VALIDATORS = Validators.compose([
    Validators.required,
    Validators.minLength(3),
    Validators.maxLength(22),
    Validators.pattern('[A-Z]{1,1}[a-z]+'),   (1)
]);
1 Recipient names must be a single capitalised word of 3–22 characters. This rejects hyphenated names, names with apostrophes, and multi-part names — worth knowing when triaging "my recipient’s name won’t validate" reports.

Phone entry uses ngx-intl-tel-input with CountryISO.UnitedStates selected by default and the United States and United Kingdom as preferred countries. Country search matches on ISO2 code or name.

Notification method is chosen from a list keyed on SEND_MONEY.INPUTS.LABELS.NOTIFICATION_METHODS.* — the recipient is notified by email or SMS.

Submission

sendRequest(supplierKey: string, payload: any): any {
    this.sendMoneyService.requestSendMoney(supplierKey, { ...payload, supplier_key: supplierKey }).subscribe({
        next: () => {
            this.loading$.next(false);
            this.toastService.show('Successfully requested vendor pay!', PybColorPalette.Success, 5000, true, false);
            this.dialog.open(PybMessageModalComponent, { data: { title: 'Your payment has been sent!', … } });
        },
        // …
    });
}

The success toast and the confirmation modal text in SendMoneyPageService are hardcoded English strings, not translation keys. This is an outlier — the rest of the application routes all copy through TranslateService. See Internationalization.

VendorPaySuccessModal exists in views/partials/modals/vendor-pay-success-modal/ but the current implementation opens PybMessageModalComponent instead; the original call is commented out in the service.

Incoming payments — /vendor-pay

VendorPayIncomingReportsModule (views/pages/vendorpay-incoming-reports/). Shows payments arriving to this account from other suppliers.

vendorpay-reports.component.ts

The AG Grid page.

vendorpay-reports.service.ts

Data access.

vendorpay-reports-mapping.service.ts

DTO → row-model mapping.

grid-config.ts

Column definitions.

vendorpay-reports.types.ts

IVendorPayReportDto, IVendorPayStatus.

 
export interface IVendorPayReportDto {
    total: number;
    forwardPayments: IVendorPayStatus[];
}

export interface IVendorPayStatus {
    forwardPaymentKey: string;
    type: string;
    supplierKey?: string;
    xactKey: string;
    senderSupplierKey: string;
    recipientEmailAddress: string;
    fromTo: string;
    amount: number;
    dateRequested: string;
    forwardPaymentStatus: string;
}

fromTo is a display field that resolves to the counterparty — the sender on an incoming row, the recipient on an outgoing one — which is how one row model serves both reports.

Outgoing payments — /reports/vendor-pay-report

VendorpayReportsModule (views/pages/reports/vendorpay-reports/) — the mirror report inside the reports shell, showing payments sent from this account.

Additional components:

pyb-vendor-payment-filter

Filter bar for status and date range.

pyb-vendorpay-status-bag

Renders forwardPaymentStatus as a coloured chip.

Column configuration is provided through DI tokens declared by ReportsModule:

VENDOR_PAY_INCOMING_REPORT_COLUMNS_CONFIG_TOKEN

vendorPayIncomingColConfig

VENDOR_PAY_OUTGOING_REPORT_COLUMNS_CONFIG_TOKEN

vendorPayOutgoingColConfig

VENDOR_PAY_REPORT_AUTO_COLUMNS_CONFIG_TOKEN

vendorPayReportAutoColumnGroupConfig

The two reports share a component and differ only by injected column set.

Dashboard widget

widgets/vendorpay-incoming-payments-widget/ summarises incoming payments on the dashboard, gated on VENDOR_PAY.