@nauticana/sail 0.6.0 → 0.6.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nauticana/sail",
-  "version": "0.6.0",
+  "version": "0.6.1",
   "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/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/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

@@ -328,3 +328,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/rest_url.ts

@@ -31,11 +31,15 @@ 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; only set-default has a
+  // custom endpoint (atomic multi-row UPDATE).
+  paymentMethodSetDefaultURL: '/api/v1/payment-methods/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 },
+    );
+  }
+}