@nauticana/sail 0.6.0 → 0.7.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nauticana/sail",
-  "version": "0.6.0",
+  "version": "0.7.0",
   "description": "Metadata-driven Angular component library for CRUD admin frontends backed by the keel Go backend. Tables, forms, navigation, OTP/2FA/social auth, billing, payout onboarding.",
   "main": "src/index.ts",
   "files": [

package/src/component/abstract/base_table.ts

@@ -1,5 +1,5 @@
 import { inject } from "@angular/core";
-import { ForeignKey, TableColumn, TableDefinition } from "../../model/appdata";
+import { ForeignKey, TableAction, TableColumn, TableDefinition } from "../../model/appdata";
 import { ConstantValue } from "../../model/common";
 import { BaseAuthService } from "../../service/auth.service";
 import { SAIL_GUI_CONFIG, SailGuiConfig, DEFAULT_CONFIG } from "../../config";
@@ -56,6 +56,48 @@ export abstract class BaseTable {
         return this.cacheService.canDelete(this.tableName);
     }
 
+    /**
+     * Returns the table's registered TableAction list — populated by
+     * keel's REST engine from the basis `table_action` table. Empty
+     * when the table has no custom actions.
+     */
+    getActions(recordSpecific?: boolean): TableAction[] {
+        const tableDef = this.cacheService.getTableDefinition(this.tableName);
+        const actions = tableDef?.Actions ?? [];
+        if (recordSpecific === undefined) return [...actions].sort(this.sortActions);
+        return actions.filter((a) => a.recordSpecific === recordSpecific).sort(this.sortActions);
+    }
+
+    private sortActions = (a: TableAction, b: TableAction) =>
+        (a.displayOrder ?? 0) - (b.displayOrder ?? 0);
+
+    /**
+     * Authorization gate for a TableAction. Mirrors canRead/canCreate
+     * etc. — looks up the caller's grant against (authorityObject,
+     * authorityCheck) scoped to the table name. Returns true when the
+     * action button should render.
+     */
+    canExecuteAction(action: TableAction): boolean {
+        return this.cacheService.canExecute(action.authorityObject, action.authorityCheck, this.tableName);
+    }
+
+    /**
+     * Pulls the primary-key column values off a record into a plain
+     * object keyed by the columns' PascalName. Used as the request
+     * body when a record-specific TableAction fires — the backend
+     * handler receives the row's PK exactly the way generic CRUD
+     * does for get / delete.
+     */
+    primaryKeyValues(record: Record<string, unknown>): Record<string, unknown> {
+        const tableDef = this.cacheService.getTableDefinition(this.tableName);
+        const pk: Record<string, unknown> = {};
+        if (!tableDef?.Keys) return pk;
+        for (const key of tableDef.Keys) {
+            pk[key.PascalName] = record[key.PascalName];
+        }
+        return pk;
+    }
+
     emptyRecord(): any {
         const record : any = {[this.config.opField]: 'I'}
         const tableDef = this.cacheService.getTableDefinition(this.tableName);

package/src/component/payment/user_payment_methods.ts

@@ -0,0 +1,159 @@
+import { ChangeDetectionStrategy, Component, EventEmitter, Input, OnInit, Output, ViewEncapsulation, inject, signal } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { MatButtonModule } from '@angular/material/button';
+import { MatCardModule } from '@angular/material/card';
+import { MatIconModule } from '@angular/material/icon';
+import { BaseAsync } from '../abstract/base_async';
+import { UserPaymentMethodService } from '../../service/user_payment_method.service';
+import { UserPaymentMethod } from '../../model/appdata';
+
+/**
+ * End-user saved payment methods.
+ *
+ * Drop-in screen that lists the caller's cards/wallets, with set-default
+ * + delete actions. Inherits loading/error state from BaseAsync.
+ *
+ * Customise the heading and "add" CTA via inputs; emit (addClicked) so
+ * the consumer routes to its own SetupIntent flow (sail does not bundle
+ * a SetupIntent UI today — providers vary too much).
+ *
+ * Selector: <sail-user-payment-methods>
+ */
+@Component({
+  selector: 'sail-user-payment-methods',
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  encapsulation: ViewEncapsulation.None,
+  imports: [CommonModule, MatButtonModule, MatCardModule, MatIconModule],
+  template: `
+    <div class="user-payment-methods">
+      <h2 class="user-payment-methods__title">{{ title }}</h2>
+
+      @if (showAdd) {
+        <button mat-raised-button color="accent"
+                class="user-payment-methods__add"
+                (click)="addClicked.emit()">
+          <mat-icon>add</mat-icon> {{ addLabel }}
+        </button>
+      }
+
+      @if (methods().length === 0 && !loading()) {
+        <p class="user-payment-methods__empty">{{ emptyLabel }}</p>
+      }
+
+      @for (m of methods(); track m.Id) {
+        <mat-card class="user-payment-methods__item">
+          <mat-card-content>
+            <div class="user-payment-methods__row">
+              <div class="user-payment-methods__info">
+                <mat-icon>{{ iconFor(m) }}</mat-icon>
+                <span class="user-payment-methods__brand">{{ m.Brand || m.MethodType }}</span>
+                @if (m.LastFour) {
+                  <span class="user-payment-methods__last4">•••• {{ m.LastFour }}</span>
+                }
+                @if (m.IsDefault) {
+                  <span class="user-payment-methods__default">Default</span>
+                }
+              </div>
+              <div class="user-payment-methods__actions">
+                @if (!m.IsDefault) {
+                  <button mat-button (click)="setDefault(m)">Set default</button>
+                }
+                <button mat-icon-button (click)="remove(m)" aria-label="Delete payment method">
+                  <mat-icon>delete</mat-icon>
+                </button>
+              </div>
+            </div>
+          </mat-card-content>
+        </mat-card>
+      }
+
+      @if (errorMsg()) {
+        <p class="user-payment-methods__error">{{ errorMsg() }}</p>
+      }
+    </div>
+  `,
+  styles: `
+    .user-payment-methods { display: flex; flex-direction: column; gap: 12px; }
+    .user-payment-methods__title { margin: 0; }
+    .user-payment-methods__add { align-self: flex-start; }
+    .user-payment-methods__empty { color: var(--mat-app-on-surface-variant, #555); }
+    .user-payment-methods__item { background: var(--mat-app-surface, #fff); }
+    .user-payment-methods__row { display: flex; justify-content: space-between; align-items: center; gap: 12px; }
+    .user-payment-methods__info { display: flex; align-items: center; gap: 8px; }
+    .user-payment-methods__brand { font-weight: 600; }
+    .user-payment-methods__last4 { color: var(--mat-app-on-surface-variant, #555); }
+    .user-payment-methods__default { color: var(--mat-app-primary, #1976d2); margin-left: 8px; font-size: 12px; font-weight: 600; }
+    .user-payment-methods__actions { display: flex; align-items: center; gap: 4px; }
+    .user-payment-methods__error { color: var(--mat-app-error, #b00020); font-size: 13px; margin: 0; }
+  `,
+})
+export class UserPaymentMethodsComponent extends BaseAsync implements OnInit {
+  @Input() title = 'Payment Methods';
+  @Input() addLabel = 'Add Payment Method';
+  @Input() emptyLabel = 'No saved payment methods yet.';
+  @Input() showAdd = true;
+
+  /** Emitted when the "Add" button is tapped. Consumer routes to its SetupIntent flow. */
+  @Output() addClicked = new EventEmitter<void>();
+  /** Emitted after a successful set-default flip. */
+  @Output() defaultChanged = new EventEmitter<UserPaymentMethod>();
+  /** Emitted after a successful delete. */
+  @Output() deleted = new EventEmitter<UserPaymentMethod>();
+
+  private readonly service = inject(UserPaymentMethodService);
+
+  readonly methods = signal<UserPaymentMethod[]>([]);
+  readonly errorMsg = signal<string>('');
+
+  ngOnInit(): void {
+    this.load();
+  }
+
+  load(): void {
+    this.run(
+      this.service.list(),
+      (rows) => {
+        // Sort default-first locally — keel's generic CRUD doesn't
+        // honour a sort hint without rest_api_header config.
+        const sorted = [...(rows ?? [])].sort((a, b) =>
+          Number(b.IsDefault) - Number(a.IsDefault),
+        );
+        this.methods.set(sorted);
+      },
+      'Failed to load payment methods.',
+    );
+  }
+
+  setDefault(m: UserPaymentMethod): void {
+    this.service.setDefault(m.Id).subscribe({
+      next: () => {
+        this.methods.update((list) =>
+          list.map((row) => ({ ...row, IsDefault: row.Id === m.Id })),
+        );
+        this.defaultChanged.emit(m);
+      },
+      error: (err) => this.errorMsg.set(err?.error?.detail ?? 'Failed to set default'),
+    });
+  }
+
+  remove(m: UserPaymentMethod): void {
+    this.service.delete(m.Id).subscribe({
+      next: () => {
+        this.methods.update((list) => list.filter((row) => row.Id !== m.Id));
+        this.deleted.emit(m);
+      },
+      error: (err) => this.errorMsg.set(err?.error?.detail ?? 'Failed to delete'),
+    });
+  }
+
+  iconFor(m: UserPaymentMethod): string {
+    switch (m.MethodType) {
+      case 'card':       return 'credit_card';
+      case 'bank':       return 'account_balance';
+      case 'apple_pay':
+      case 'google_pay':
+      case 'wallet':     return 'wallet';
+      default:           return 'credit_card';
+    }
+  }
+}

package/src/component/table/table_detail.html

@@ -4,6 +4,16 @@
     @if (canCreate()) {
         <button mat-raised-button class="accent" (click)="addRecord()">New Record</button>
     }
+    @for (action of getActions(false); track action.action) {
+        @if (canExecuteAction(action)) {
+            <button mat-stroked-button type="button"
+                    [title]="action.caption"
+                    (click)="executeAction(action)">
+                @if (action.icon) { <mat-icon>{{ action.icon }}</mat-icon> }
+                {{ action.caption }}
+            </button>
+        }
+    }
 </div>
 <table class="mat-table">
     <thead>
@@ -44,6 +54,17 @@
                         } @else if (canDelete()) {
                             <button mat-icon-button (click)="deleteRow(record)" title="Delete"><mat-icon>delete</mat-icon></button>
                         }
+                        @if (record[config.opField] !== 'I') {
+                            @for (action of getActions(true); track action.action) {
+                                @if (canExecuteAction(action)) {
+                                    <button mat-icon-button type="button"
+                                            [title]="action.caption"
+                                            (click)="executeAction(action, record)">
+                                        <mat-icon>{{ action.icon || 'play_arrow' }}</mat-icon>
+                                    </button>
+                                }
+                            }
+                        }
                     </td>
                 }
             </tr>

package/src/component/table/table_detail.ts

@@ -5,6 +5,8 @@ import { BaseForm } from "../abstract/base_form";
 import { MatDialog } from "@angular/material/dialog";
 import { TableForm } from "../form/form_table";
 import { MatIconModule } from "@angular/material/icon";
+import { BackendService } from "../../service/rest_service";
+import { TableAction } from "../../model/appdata";
 
 @Component({
     selector: 'table-detail',
@@ -31,6 +33,34 @@ export class TableDetail extends BaseForm implements OnInit {
     fkColumns: string[] = [];
 
     private readonly dialog = inject(MatDialog);
+    private readonly backendService = inject(BackendService);
+
+    /**
+     * Fire a TableAction. Per-row actions require the record to be
+     * server-side (not 'I' inserted-locally-not-saved); table-level
+     * actions only need the parent to be writable. Action POSTs hit
+     * the resolved URL directly — no need to round-trip through the
+     * parent form.
+     */
+    executeAction(action: TableAction, record?: {[key: string]: unknown}): void {
+        if (!this.canExecuteAction(action)) {
+            alert(`Missing authorization for action ${action.authorityObject}/${action.authorityCheck}`);
+            return;
+        }
+        if (action.recordSpecific && record && record[this.config.opField] === 'I') {
+            alert('Save the record first before running this action.');
+            return;
+        }
+        if (action.confirmMessage && !confirm(action.confirmMessage)) return;
+        const body = action.recordSpecific && record ? this.primaryKeyValues(record) : {};
+        this.backendService.executeAction(action.method, body).subscribe({
+            next: () => {/* parent form re-fetches on its own save */},
+            error: (err) => {
+                console.error(`Action ${action.action} failed`, err);
+                alert(err?.error?.detail ?? `Failed to ${action.caption}`);
+            },
+        });
+    }
 
     override canCreate() { return !this.parentReadOnly() && super.canCreate(); }
     override canUpdate() { return !this.parentReadOnly() && super.canUpdate(); }

package/src/component/table/table_list.html

@@ -1,8 +1,20 @@
 <h2>{{ getCaption() }}</h2>
 
-@if (canCreate()) {
-    <button mat-raised-button class="accent" (click)="addRecord()">New Record</button>
-}
+<div class="table-list__toolbar">
+    @if (canCreate()) {
+        <button mat-raised-button class="accent" (click)="addRecord()">New Record</button>
+    }
+    @for (action of getActions(false); track action.action) {
+        @if (canExecuteAction(action)) {
+            <button mat-stroked-button type="button"
+                    [title]="action.caption"
+                    (click)="executeAction(action)">
+                @if (action.icon) { <mat-icon>{{ action.icon }}</mat-icon> }
+                {{ action.caption }}
+            </button>
+        }
+    }
+</div>
 
 <table>
     <thead>
@@ -27,6 +39,15 @@
             } @else {
                 <button mat-icon-button type="button" (click)="editRecord(record)" title="Edit"><mat-icon>edit</mat-icon></button>
                 <button mat-icon-button type="button" (click)="deleteRecord(record)" title="Delete"><mat-icon>delete</mat-icon></button>
+                @for (action of getActions(true); track action.action) {
+                    @if (canExecuteAction(action)) {
+                        <button mat-icon-button type="button"
+                                [title]="action.caption"
+                                (click)="executeAction(action, record)">
+                            <mat-icon>{{ action.icon || 'play_arrow' }}</mat-icon>
+                        </button>
+                    }
+                }
             }
             </td>
         }

package/src/component/table/table_list.ts

@@ -4,6 +4,7 @@ import { ActivatedRoute, Params } from "@angular/router";
 import { BaseView } from "../abstract/base_view";
 import { TableEdit } from "./table_edit";
 import { BackendService } from "../../service/rest_service";
+import { TableAction } from "../../model/appdata";
 import { MatButtonModule } from "@angular/material/button";
 import { MatCheckboxModule } from "@angular/material/checkbox";
 import { MatIconModule } from "@angular/material/icon";
@@ -77,6 +78,29 @@ export class TableList extends BaseView implements OnInit {
         });
     }
 
+    /**
+     * Fire a TableAction. For record-specific actions, `record` carries
+     * the row's primary key columns (lifted via BaseTable.primaryKeyValues).
+     * For table-level actions, `record` is undefined and the body is empty.
+     * Refreshes the row list on success — most actions mutate visible
+     * state (set_default flipping defaults, etc.).
+     */
+    executeAction(action: TableAction, record?: {[key: string]: unknown}): void {
+        if (!this.canExecuteAction(action)) {
+            alert(`Missing authorization for action ${action.authorityObject}/${action.authorityCheck}`);
+            return;
+        }
+        if (action.confirmMessage && !confirm(action.confirmMessage)) return;
+        const body = action.recordSpecific && record ? this.primaryKeyValues(record) : {};
+        this.backendService.executeAction(action.method, body).subscribe({
+            next: () => this.fetchRecords(),
+            error: (err) => {
+                console.error(`Action ${action.action} failed`, err);
+                alert(err?.error?.detail ?? `Failed to ${action.caption}`);
+            },
+        });
+    }
+
     handleQueryParams(params: Params) {
         const newSearchTerms: {[key: string]: string} = {};
         let hasSearchTerms = false;

package/src/component/table/table_search.html

@@ -14,4 +14,14 @@
     @if (canCreate()) {
         <button mat-raised-button class="accent" (click)="onAddRecord()">New Record</button>
     }
+    @for (action of getActions(false); track action.action) {
+        @if (canExecuteAction(action)) {
+            <button mat-stroked-button type="button"
+                    [title]="action.caption"
+                    (click)="executeAction(action)">
+                @if (action.icon) { <mat-icon>{{ action.icon }}</mat-icon> }
+                {{ action.caption }}
+            </button>
+        }
+    }
 </div>

package/src/component/table/table_search.ts

@@ -1,9 +1,12 @@
 import { ChangeDetectionStrategy, ChangeDetectorRef, Component, inject, Input, OnInit, ViewEncapsulation } from "@angular/core";
 import { MatButtonModule } from "@angular/material/button";
+import { MatIconModule } from "@angular/material/icon";
 import { ActivatedRoute, Router } from "@angular/router";
 import { BaseForm } from "../abstract/base_form";
 import { RecordForm } from "../form/form_record";
 import { ApplicationMenu } from "../../model/common";
+import { TableAction } from "../../model/appdata";
+import { BackendService } from "../../service/rest_service";
 
 @Component({
     selector: 'table-search',
@@ -12,6 +15,7 @@ import { ApplicationMenu } from "../../model/common";
     templateUrl: './table_search.html',
     imports: [
         MatButtonModule,
+        MatIconModule,
         RecordForm,
     ],
 })
@@ -24,6 +28,27 @@ export class TableSearch extends BaseForm implements OnInit {
     private readonly router = inject(Router);
     private readonly route = inject(ActivatedRoute);
     private readonly cdr = inject(ChangeDetectorRef);
+    private readonly backendService = inject(BackendService);
+
+    /**
+     * Fire a table-level TableAction from the search-screen toolbar.
+     * Record-specific actions never show up here — search has no
+     * row context.
+     */
+    executeAction(action: TableAction): void {
+        if (!this.canExecuteAction(action)) {
+            alert(`Missing authorization for action ${action.authorityObject}/${action.authorityCheck}`);
+            return;
+        }
+        if (action.confirmMessage && !confirm(action.confirmMessage)) return;
+        this.backendService.executeAction(action.method, {}).subscribe({
+            next: () => {/* no-op — search screen has no list to refresh */},
+            error: (err) => {
+                console.error(`Action ${action.action} failed`, err);
+                alert(err?.error?.detail ?? `Failed to ${action.caption}`);
+            },
+        });
+    }
 
     ngOnInit() {
         const data = this.route.snapshot.data;

package/src/index.ts

@@ -34,9 +34,11 @@ export * from './component/billing/checkout_button';
 export * from './component/billing/payment_methods';
 export * from './component/payout/provider_onboarding';
 export * from './component/payout/bank_info_form';
+export * from './component/payment/user_payment_methods';
 export * from './service/auth.service';
 export * from './service/billing.service';
 export * from './service/payout.service';
+export * from './service/user_payment_method.service';
 export * from './service/script_loader';
 export * from './service/auth.interceptor';
 export * from './service/api-response.interceptor';

package/src/model/appdata.ts

@@ -56,13 +56,27 @@ export interface TableColumn {
   Validators?:  AbstractControlOptions['validators'];
 }
 
+// One custom button registered against a table via the basis
+// table_action seed. Auth gating uses the existing
+// authorization_role_permission path against (authorityObject,
+// authorityCheck, low_limit=tableName) — see canExecute() in
+// BaseAuthService.
+//
+// recordSpecific=true  → button renders next to per-row edit/delete.
+// recordSpecific=false → button renders next to the "New Record" toolbar.
+//
+// `method` is the URL POST target the click should hit (resolved by
+// keel from table_name + action_name + optional method_name override).
 export interface TableAction {
-  action:         string;
-  caption:        string;
-  method:         string;
-  enable:         string;
-  authorityCheck: string;
-  recordSpecific: string;
+  action:           string;   // lowercase action_name
+  caption:          string;
+  method:           string;   // resolved URL path (POST target)
+  icon?:            string;   // Material icon name; falsy → label-only
+  recordSpecific:   boolean;
+  displayOrder?:    number;
+  confirmMessage?:  string;
+  authorityObject:  string;   // uppercased table_name — for canExecute()
+  authorityCheck:   string;   // uppercased action_name — for canExecute()
 }
 
 export interface ForeignKey {
@@ -328,3 +342,27 @@ export interface CountryProfile {
 	taxIdPlaceholder: string;
 	taxIdHint:        string;
 }
+
+// ── User payment methods ──
+// Consumer-side saved cards/wallets. Mirrors basis user_payment_method
+// one-to-one. Distinct from PaymentMethod (partner-scoped SaaS billing
+// card).
+//
+// PascalCase fields match keel's generic REST CRUD response shape —
+// list and delete go through that path (the table is UserSpecific so
+// the auto-filter scopes reads + owner-locks DELETE). Only set-default
+// has a custom endpoint because it needs atomic multi-row UPDATE.
+
+export interface UserPaymentMethod {
+	Id:           number;
+	UserId?:      number;
+	MethodType:   string;   // matches basis constant_header 'payment_method_type' — card / bank / wallet / apple_pay / google_pay
+	Provider:     string;   // 'stripe', ...
+	LastFour?:    string;
+	Brand?:       string;
+	ExpiryMonth?: number;
+	ExpiryYear?:  number;
+	Currency:     string;
+	IsDefault:    boolean;
+	CreatedAt:    string;
+}

package/src/service/auth.service.ts

@@ -471,6 +471,15 @@ export abstract class BaseAuthService {
   canCreate(tableName: string) { return this.checkPermission('TABLE', 'INSERT', tableName); }
   canUpdate(tableName: string) { return this.checkPermission('TABLE', 'UPDATE', tableName); }
   canDelete(tableName: string) { return this.checkPermission('TABLE', 'DELETE', tableName); }
+  /**
+   * Authorization check for a custom TableAction. authorityObject is the
+   * uppercased table_name; activity is the uppercased action_name. The
+   * grant's low_limit is checked against the table_name (lowercase) —
+   * matching the convention populated by keel's loadTableActions.
+   */
+  canExecute(authorityObject: string, activity: string, tableName: string): boolean {
+    return this.checkPermission(authorityObject, activity, tableName);
+  }
   canAccess(pageName: string)  { return this.checkPermission('PAGE', 'ACCESS', pageName); }
   canReport(reportName: string) { return this.checkPermission('REPORT', 'ACCESS', reportName); }
 

package/src/service/rest_service.ts

@@ -91,4 +91,16 @@ export class BackendService {
     delete(apiName: string, filter?: {[key: string]: string}): Observable<{message: string}> {
         return this.http.delete<{message: string}>(this.apiUrl(apiName + '/delete'), {params: this.toParams(filter)}).pipe(catchError(this.handleError));
     }
+
+    /**
+     * Fire a TableAction button. `actionPath` is the resolved URL path
+     * the keel REST engine pre-computed onto TableAction.method
+     * (e.g. "/user_payment_method/set_default"); pass it verbatim and
+     * the call will POST to {host}{api_prefix}{actionPath} with the
+     * supplied body. For record-specific actions the body carries the
+     * primary key values; for table-level actions it is typically `{}`.
+     */
+    executeAction<T = unknown>(actionPath: string, body: Record<string, unknown> = {}): Observable<T> {
+        return this.http.post<T>(this.apiUrl(actionPath), body).pipe(catchError(this.handleError));
+    }
 }

package/src/service/rest_url.ts

@@ -31,11 +31,16 @@ export const RestURL = {
   deleteAccountURL:    '/api/user/account',
   pushRegisterURL:     '/api/push/register',
   pushRevokeURL:       '/api/push/revoke',
-  // Payout — keel/payout endpoints (B5b + A3 interface).
+  // Payout — keel/payout endpoints.
   payoutOnboardStartURL: '/api/v1/payout/onboard/start',
   payoutReusableURL:     '/api/v1/payout/reusable',
   payoutReusableLinkURL: '/api/v1/payout/reusable/link',
   payoutStatusURL:       '/api/v1/payout/status',
+  // User payment methods — list/delete go through keel's generic REST
+  // CRUD against the UserSpecific basis table; set-default is a
+  // TableAction (basis table_action row), mounted at the conventional
+  // URL POST /api/v1/user_payment_method/set_default.
+  paymentMethodSetDefaultURL: '/api/v1/user_payment_method/set_default',
 };
 
 /** Call this at app startup to set the backend host URL */

package/src/service/user_payment_method.service.ts

@@ -0,0 +1,48 @@
+import { inject, Injectable } from '@angular/core';
+import { HttpClient } from '@angular/common/http';
+import { Observable } from 'rxjs';
+import { RestURL } from './rest_url';
+import { BackendService } from './rest_service';
+import { UserPaymentMethod } from '../model/appdata';
+
+/**
+ * UserPaymentMethodService — consumer-side saved-payment-methods API.
+ *
+ * list and delete go through keel's generic REST CRUD against the
+ * basis user_payment_method table — that table is UserSpecific (FK
+ * column `user_id`), so the auto-filter scopes reads + owner-locks
+ * DELETE without any custom server-side glue. setDefault has a custom
+ * endpoint because it needs an atomic multi-row UPDATE
+ * (`SET is_default = (id = ?) WHERE user_id = session`) that abstract
+ * single-row CRUD can't express.
+ */
+@Injectable({ providedIn: 'root' })
+export class UserPaymentMethodService {
+  private readonly http = inject(HttpClient);
+  private readonly backend = inject(BackendService);
+
+  /**
+   * List the caller's saved payment methods. Returns rows with PascalCase
+   * fields per the generic-CRUD convention; the default row sorts first
+   * server-side (filter ordering is set on rest_api_header).
+   */
+  list(): Observable<UserPaymentMethod[]> {
+    return this.backend.list<UserPaymentMethod>('user_payment_method');
+  }
+
+  /** Delete a saved payment method. user_id is auto-scoped by keel. */
+  delete(id: number): Observable<{ message: string }> {
+    return this.backend.delete('user_payment_method', { Id: String(id) });
+  }
+
+  /**
+   * Mark one row as default; clears every other row in the same call.
+   * Custom endpoint — see service-class doc for the rationale.
+   */
+  setDefault(id: number): Observable<{ message: string }> {
+    return this.http.post<{ message: string }>(
+      RestURL.httpHost + RestURL.paymentMethodSetDefaultURL,
+      { id },
+    );
+  }
+}