@nauticana/sail 1.1.9 → 1.1.11

package/src/component/login/sms_consent.ts

@@ -0,0 +1,38 @@
+import { ChangeDetectionStrategy, Component, ViewEncapsulation, computed, inject, input } from '@angular/core';
+import { SAIL_GUI_CONFIG, SailGuiConfig, DEFAULT_CONFIG } from '../../config';
+
+/**
+ * SmsConsent — the shared 10DLC / A2P SMS opt-in disclosure.
+ *
+ * Presentational only: renders the carrier-required consent language (recurring
+ * automated messages, frequency, rates, STOP/HELP, Terms + Privacy links) with
+ * the host app's brand and message purpose. Every SMS-sending app renders the
+ * same carrier-compliant copy — which must match the wording registered in its
+ * 10DLC campaign sample. Consent is *captured* server-side via keel's
+ * ConsentService (with the phone number); this component is only the disclosure
+ * shown at the point of opt-in. Styling is the consuming app's (sail ships no CSS).
+ */
+@Component({
+  selector: 'sail-sms-consent',
+  templateUrl: './sms_consent.html',
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  encapsulation: ViewEncapsulation.None,
+})
+export class SmsConsentComponent {
+  private readonly guiConfig: SailGuiConfig = inject(SAIL_GUI_CONFIG, { optional: true }) ?? DEFAULT_CONFIG;
+
+  /** Brand name in the disclosure. Defaults to config.appName. */
+  readonly brand = input<string>('');
+  /** What the messages are — e.g. "one-time verification codes" or "verification codes and trip updates". */
+  readonly messagePurpose = input<string>('one-time verification codes');
+  /** The action label the disclosure references (the opt-in button's text). */
+  readonly action = input<string>('the button below');
+  /** Terms URL. Defaults to config.termsUrl. */
+  readonly termsUrl = input<string>('');
+  /** Privacy URL. Defaults to config.privacyPolicyUrl. */
+  readonly privacyUrl = input<string>('');
+
+  protected readonly brandName = computed(() => this.brand() || this.guiConfig.appName || 'us');
+  protected readonly terms = computed(() => this.termsUrl() || this.guiConfig.termsUrl || '');
+  protected readonly privacy = computed(() => this.privacyUrl() || this.guiConfig.privacyPolicyUrl || '');
+}

package/src/component/login/social_login.html

@@ -1,8 +1,8 @@
 <div class="social-login">
-  @if (googleEnabled) {
+  @if (googleEnabled()) {
     <div #googleBtn class="social-google"></div>
   }
-  @if (appleEnabled) {
+  @if (appleEnabled()) {
     <button type="button" class="social-apple-btn" (click)="onAppleClick()" [disabled]="loading()">
       Sign in with Apple
     </button>

package/src/component/login/social_login.ts

@@ -1,6 +1,6 @@
 import {
-  ChangeDetectionStrategy, Component, ElementRef, OnInit, ViewChild, ViewEncapsulation,
-  inject, input, output,
+  ChangeDetectionStrategy, Component, computed, ElementRef, OnInit, ViewEncapsulation,
+  inject, input, output, viewChild,
 } from '@angular/core';
 import { BaseAsync } from '../abstract/base_async';
 import { BaseAuthService } from '../../service/auth.service';
@@ -45,15 +45,14 @@ export class SocialLoginComponent extends BaseAsync implements OnInit {
   readonly loginSuccess = output<LoginResponseSocial>();
   readonly loginError = output<Error>();
 
-  @ViewChild('googleBtn', { static: false }) googleBtn?: ElementRef<HTMLDivElement>;
+  private readonly googleBtn = viewChild<ElementRef<HTMLDivElement>>('googleBtn');
 
-  protected googleEnabled = false;
-  protected appleEnabled = false;
+  protected readonly googleEnabled = computed(() =>
+    this.providers().includes('google') && !!this.guiConfig.googleClientId);
+  protected readonly appleEnabled = computed(() =>
+    this.providers().includes('apple') && !!this.guiConfig.appleServiceId);
 
   ngOnInit() {
-    this.googleEnabled = this.providers().includes('google') && !!this.guiConfig.googleClientId;
-    this.appleEnabled  = this.providers().includes('apple')  && !!this.guiConfig.appleServiceId;
-
     if (this.providers().includes('google') && !this.guiConfig.googleClientId) {
       console.warn('SocialLoginComponent: googleClientId missing from SailGuiConfig — Google button hidden');
     }
@@ -61,8 +60,15 @@ export class SocialLoginComponent extends BaseAsync implements OnInit {
       console.warn('SocialLoginComponent: appleServiceId missing from SailGuiConfig — Apple button hidden');
     }
 
-    if (this.googleEnabled) this.initGoogle();
-    if (this.appleEnabled)  this.initApple();
+    // SDK load failures (CSP, ad-blockers) must surface, not leave a blank area.
+    if (this.googleEnabled()) this.initGoogle().catch((err) => this.onInitError('Google', err));
+    if (this.appleEnabled())  this.initApple().catch((err) => this.onInitError('Apple', err));
+  }
+
+  private onInitError(provider: string, err: unknown) {
+    console.error(`${provider} sign-in init failed:`, err);
+    this.errorMessage.set(`${provider} sign-in is unavailable right now.`);
+    this.loginError.emit(err instanceof Error ? err : new Error(String(err)));
   }
 
   private async initGoogle() {
@@ -75,8 +81,9 @@ export class SocialLoginComponent extends BaseAsync implements OnInit {
     });
     // Render into the template anchor once the view is ready.
     queueMicrotask(() => {
-      if (this.googleBtn?.nativeElement) {
-        google.accounts.id.renderButton(this.googleBtn.nativeElement, { theme: 'outline', size: 'large' });
+      const anchor = this.googleBtn()?.nativeElement;
+      if (anchor) {
+        google.accounts.id.renderButton(anchor, { theme: 'outline', size: 'large' });
       }
     });
   }
@@ -98,7 +105,7 @@ export class SocialLoginComponent extends BaseAsync implements OnInit {
       const res = await AppleID.auth.signIn();
       const token = res?.authorization?.id_token;
       if (token) this.onIdToken('apple', token);
-    } catch (err: any) {
+    } catch (err: unknown) {
       this.loginError.emit(err instanceof Error ? err : new Error(String(err)));
     }
   }

package/src/component/navigation/navigation.html

@@ -9,7 +9,7 @@
                 [attr.aria-label]="guiConfig.appTitle ? guiConfig.appTitle + ' home' : 'Home'">
                 @if (guiConfig.appLogoUrl) {
                     <img class="sail-navigation-logo"
-                        [src]="guiConfig.appLogoUrl"
+                        [ngSrc]="guiConfig.appLogoUrl"
                         width="40"
                         height="40"
                         alt="">
@@ -44,7 +44,7 @@
         <mat-toolbar class="primary">
             @if (isHandset()) {
                 <button type="button" aria-label="Toggle sidenav" matIconButton (click)="sidenav.toggle()">
-                    <mat-icon aria-label="Side nav toggle icon">menu</mat-icon>
+                    <mat-icon>menu</mat-icon>
                 </button>
             }
             <ng-content select="[toolbar-title]"></ng-content>

package/src/component/navigation/navigation.ts

@@ -1,4 +1,5 @@
 import { ChangeDetectionStrategy, Component, computed, inject, ViewEncapsulation } from "@angular/core";
+import { NgOptimizedImage } from "@angular/common";
 import { toSignal } from "@angular/core/rxjs-interop";
 import { RouterLink, RouterOutlet } from "@angular/router";
 import { MatSidenavModule } from '@angular/material/sidenav';
@@ -24,6 +25,7 @@ import { SAIL_GUI_CONFIG, SailGuiConfig, DEFAULT_CONFIG } from "../../config";
     MatListModule,
     MatIconModule,
     MatButtonModule,
+    NgOptimizedImage,
     RouterOutlet,
     RouterLink,
     MatExpansionModule,

package/src/component/oauth_connection/oauth_connection_panel.ts

@@ -1,4 +1,4 @@
-import { ChangeDetectionStrategy, Component, OnInit, computed, effect, inject, input, output, signal } from '@angular/core';
+import { ChangeDetectionStrategy, Component, DestroyRef, OnInit, computed, effect, inject, input, output, signal } from '@angular/core';
 import { NgOptimizedImage } from '@angular/common';
 import { Subscription } from 'rxjs';
 import { MatButtonModule } from '@angular/material/button';
@@ -40,6 +40,8 @@ export class OAuthConnectionPanelComponent implements OnInit {
   private readonly fieldValues = signal<Record<string, Record<string, string>>>({});
   private readonly pendingSuccess = signal<Set<string>>(new Set());
   private reloadSub?: Subscription;
+  private successRetries = 0;
+  private retryTimer: ReturnType<typeof setTimeout> | null = null;
 
   // The list is already scoped to entityId(), so a per-provider match is correct.
   readonly views = computed<OAuthConnectionView[]>(() => {
@@ -54,6 +56,10 @@ export class OAuthConnectionPanelComponent implements OnInit {
   constructor() {
     // Reload on init and whenever the entity scope changes.
     effect(() => this.reload(this.entityId()));
+    inject(DestroyRef).onDestroy(() => {
+      this.reloadSub?.unsubscribe();
+      if (this.retryTimer) clearTimeout(this.retryTimer);
+    });
   }
 
   // After an OAuth round-trip keel redirects back with ?<provider>=success. Record
@@ -91,13 +97,28 @@ export class OAuthConnectionPanelComponent implements OnInit {
     });
   }
 
-  // Emit `connected` only for a returned provider whose row is actually present now.
+  // Emit `connected` only for a returned provider whose row is actually present.
+  // Rows can lag the redirect (webhook/commit); retry twice before giving up loudly.
   private confirmSuccess(): void {
     const pending = this.pendingSuccess();
     if (!pending.size) return;
     const present = new Set(this.connections().map((c) => c.Provider));
+    const missing = [...pending].filter((code) => !present.has(code));
     for (const code of pending) if (present.has(code)) this.connected.emit(code);
-    this.pendingSuccess.set(new Set());
+    if (!missing.length) {
+      this.pendingSuccess.set(new Set());
+      this.successRetries = 0;
+      return;
+    }
+    this.pendingSuccess.set(new Set(missing));
+    if (this.successRetries < 2) {
+      this.successRetries++;
+      this.retryTimer = setTimeout(() => this.reload(this.entityId()), 1500 * this.successRetries);
+    } else {
+      this.pendingSuccess.set(new Set());
+      this.successRetries = 0;
+      this.error.set('The connection completed but is not visible yet — refresh to check.');
+    }
   }
 
   isIconUrl(icon?: string): boolean {

package/src/component/payment/user_payment_methods.html

@@ -40,7 +40,7 @@
     </mat-card>
   }
 
-  @if (errorMsg()) {
-    <p class="user-payment-methods__error">{{ errorMsg() }}</p>
+  @if (errorMessage()) {
+    <p class="user-payment-methods__error" role="alert">{{ errorMessage() }}</p>
   }
 </div>

package/src/component/payment/user_payment_methods.ts

@@ -16,6 +16,8 @@ import { UserPaymentMethod } from '../../model/appdata';
  * the consumer routes to its own SetupIntent flow (sail does not bundle
  * a SetupIntent UI today — providers vary too much).
  *
+ * Ships no CSS — the consuming app styles the classes globally.
+ *
  * Selector: <sail-user-payment-methods>
  */
 @Component({
@@ -24,20 +26,6 @@ import { UserPaymentMethod } from '../../model/appdata';
   encapsulation: ViewEncapsulation.None,
   imports: [MatButtonModule, MatCardModule, MatIconModule],
   templateUrl: './user_payment_methods.html',
-  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 {
   readonly title = input('Payment Methods');
@@ -55,7 +43,6 @@ export class UserPaymentMethodsComponent extends BaseAsync implements OnInit {
   private readonly service = inject(UserPaymentMethodService);
 
   readonly methods = signal<UserPaymentMethod[]>([]);
-  readonly errorMsg = signal<string>('');
 
   ngOnInit(): void {
     this.load();
@@ -77,25 +64,27 @@ export class UserPaymentMethodsComponent extends BaseAsync implements OnInit {
   }
 
   setDefault(m: UserPaymentMethod): void {
-    this.service.setDefault(m.Id).subscribe({
-      next: () => {
+    this.run(
+      this.service.setDefault(m.Id),
+      () => {
         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'),
-    });
+      'Failed to set default.',
+    );
   }
 
   remove(m: UserPaymentMethod): void {
-    this.service.delete(m.Id).subscribe({
-      next: () => {
+    this.run(
+      this.service.delete(m.Id),
+      () => {
         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'),
-    });
+      'Failed to delete.',
+    );
   }
 
   iconFor(m: UserPaymentMethod): string {

package/src/component/payout/bank_info_form.html

@@ -7,7 +7,7 @@
 
   <form [formGroup]="form" (ngSubmit)="submit()">
     <mat-form-field appearance="outline" class="full-width">
-      <mat-label>Country *</mat-label>
+      <mat-label>Country</mat-label>
       <mat-select formControlName="countryCode">
         @for (c of countryProfiles(); track c.code) {
           <mat-option [value]="c.code">{{ c.label }} ({{ c.currency }})</mat-option>
@@ -17,19 +17,19 @@
     <p class="hint">Sets your tax ID format + payout currency</p>
 
     <mat-form-field appearance="outline" class="full-width">
-      <mat-label>Account holder name *</mat-label>
+      <mat-label>Account holder name</mat-label>
       <input matInput formControlName="accountHolderName">
     </mat-form-field>
     <p class="hint">Legal name on the bank account (must match government ID)</p>
 
     <mat-form-field appearance="outline" class="full-width">
-      <mat-label>{{ taxIdLabel() }} *</mat-label>
+      <mat-label>{{ taxIdLabel() }}</mat-label>
       <input matInput formControlName="taxId" [placeholder]="taxIdPlaceholder()">
     </mat-form-field>
     <p class="hint">{{ taxIdHint() }}</p>
 
     <mat-form-field appearance="outline" class="full-width">
-      <mat-label>Billing address *</mat-label>
+      <mat-label>Billing address</mat-label>
       <input matInput formControlName="billingAddress">
     </mat-form-field>
     <p class="hint">Business or home address — used for tax correspondence</p>

package/src/component/payout/bank_info_form.ts

@@ -1,4 +1,4 @@
-import { ChangeDetectionStrategy, Component, computed, inject, input, output, signal } from '@angular/core';
+import { ChangeDetectionStrategy, Component, computed, effect, inject, input, linkedSignal, output } from '@angular/core';
 import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
 import { FormBuilder, ReactiveFormsModule, Validators } from '@angular/forms';
 import { MatButtonModule } from '@angular/material/button';
@@ -29,8 +29,7 @@ export const DEFAULT_COUNTRY_PROFILES: CountryProfile[] = [
  * `(submitted)` — the consumer decides whether to POST directly to
  * /api/v1/user_bank_info or pipe through its own registration service.
  *
- * `[provider]` defaults to "AW" (Airwallex) to match keel/payout's
- * default --payout_provider flag. Override per deployment if needed.
+ * Ships no CSS — the consuming app styles the classes globally.
  *
  * Selector: <sail-payout-bank-info-form>
  */
@@ -42,18 +41,6 @@ export const DEFAULT_COUNTRY_PROFILES: CountryProfile[] = [
     MatFormFieldModule, MatInputModule, MatSelectModule,
   ],
   templateUrl: './bank_info_form.html',
-  styles: `
-    .bank-info-form { display: flex; flex-direction: column; gap: 4px; padding: 0 24px 32px; }
-    .bank-info-form__title { margin: 0 0 16px; }
-    .bank-info-form__intro { font-size: 14px; color: var(--mat-app-on-surface-variant, #555); margin: 0 0 16px; }
-    .full-width { width: 100%; }
-    .hint { font-size: 12px; color: var(--mat-app-on-surface-variant, #555); margin: -4px 0 8px; }
-    .provider-note { font-size: 13px; color: var(--mat-app-on-surface-variant, #555); background: rgba(0,0,0,0.04); padding: 12px; border-radius: 4px; margin: 12px 0; }
-    .agreement { margin: 12px 0 16px; font-size: 14px; }
-    .nav-buttons { display: flex; gap: 12px; margin-top: 8px; }
-    .pill-btn { border-radius: 24px; height: 48px; font-size: 15px; font-weight: 600; flex: 1; }
-    .primary-btn { background: var(--mat-app-primary, #1976d2); color: white; }
-  `,
 })
 export class PayoutBankInfoFormComponent {
   /** Step title rendered above the form. */
@@ -62,8 +49,8 @@ export class PayoutBankInfoFormComponent {
   readonly intro = input('Tax + payout details. Bank account itself is set up with the payout provider in a separate step — only tax-reporting and dispute-correspondence fields are collected here.');
   /** Override the list of supported countries — keep the default for most apps. */
   readonly countryProfiles = input<CountryProfile[]>(DEFAULT_COUNTRY_PROFILES);
-  /** Provider code persisted on user_bank_info.provider. Default AW (Airwallex) matches keel's default --payout_provider. */
-  readonly provider = input('AW');
+  /** Provider code persisted on user_bank_info.provider — must match the app's keel --payout_provider. */
+  readonly provider = input.required<string>();
   /** Wording on the provider-agreement checkbox. Override to name the live provider. */
   readonly agreementLabel = input('I agree to the payout provider account agreement');
   /** Submit-button label — wizards usually use "Next >". */
@@ -79,33 +66,42 @@ export class PayoutBankInfoFormComponent {
   private readonly fb = inject(FormBuilder);
 
   readonly form = this.fb.group({
-    countryCode:       ['CA', Validators.required],
+    countryCode:       ['', Validators.required],
     accountHolderName: ['', Validators.required],
     taxId:             ['', Validators.required],
     billingAddress:    ['', Validators.required],
     providerAgreement: [false, Validators.requiredTrue],
   });
 
-  private readonly selectedCountry = signal<CountryProfile>(this.countryProfiles()[0]);
+  // linkedSignal, not a field initializer: the bound countryProfiles input
+  // isn't available yet during construction.
+  private readonly selectedCountry = linkedSignal<CountryProfile | undefined>(() => this.countryProfiles()[0]);
 
-  readonly taxIdLabel       = computed(() => this.selectedCountry().taxIdLabel);
-  readonly taxIdPlaceholder = computed(() => this.selectedCountry().taxIdPlaceholder);
-  readonly taxIdHint        = computed(() => this.selectedCountry().taxIdHint);
+  readonly taxIdLabel       = computed(() => this.selectedCountry()?.taxIdLabel ?? '');
+  readonly taxIdPlaceholder = computed(() => this.selectedCountry()?.taxIdPlaceholder ?? '');
+  readonly taxIdHint        = computed(() => this.selectedCountry()?.taxIdHint ?? '');
 
   constructor() {
+    // Keep the form's country in the bound profile list (never a phantom default).
+    effect(() => {
+      const profiles = this.countryProfiles();
+      const current = this.form.controls.countryCode.value;
+      if (!profiles.some((c) => c.code === current)) {
+        this.form.controls.countryCode.setValue(profiles[0]?.code ?? '');
+      }
+    });
     this.form.controls.countryCode.valueChanges
       .pipe(takeUntilDestroyed())
       .subscribe((code) => {
         const profiles = this.countryProfiles();
-        const profile = profiles.find((c) => c.code === code) ?? profiles[0];
-        this.selectedCountry.set(profile);
+        this.selectedCountry.set(profiles.find((c) => c.code === code) ?? profiles[0]);
       });
   }
 
   submit() {
-    if (this.form.invalid) return;
-    const v = this.form.value;
     const country = this.selectedCountry();
+    if (this.form.invalid || !country) return;
+    const v = this.form.value;
     this.submitted.emit({
       countryCode:       country.code,
       currency:          country.currency,

package/src/component/payout/provider_onboarding.html

@@ -18,7 +18,7 @@
           {{ reusable().length === 1 ? 'another partner' : 'other partners' }}.
           You can reuse it here (no KYC redo) if the currency matches.
         </p>
-        <mat-radio-group [value]="selectedAccountId()" (change)="selectAccount($any($event.value))">
+        <mat-radio-group [value]="selectedAccountId()" (change)="onAccountChange($event)">
           @for (acc of reusable(); track acc.providerAccountId) {
             <mat-radio-button [value]="acc.providerAccountId" class="reuse-option">
               <strong>{{ acc.partnerCaption }}</strong>
@@ -27,7 +27,7 @@
           }
         </mat-radio-group>
         <button matButton="filled" class="payout-onboarding__btn payout-onboarding__btn--primary"
-                [disabled]="!selectedAccountId() || busy()"
+                [disabled]="!selectedAccountId() || loading()"
                 (click)="linkExisting()">
           Use this account
         </button>
@@ -45,11 +45,11 @@
         for bank routing details and government ID. The process
         usually takes a few minutes.
       </p>
-      @if (errorMsg()) {
-        <p class="payout-onboarding__error">{{ errorMsg() }}</p>
+      @if (errorMessage()) {
+        <p class="payout-onboarding__error">{{ errorMessage() }}</p>
       }
       <button matButton="filled" class="payout-onboarding__btn payout-onboarding__btn--primary"
-              [disabled]="busy()"
+              [disabled]="loading()"
               (click)="startProviderKyc()">
         <mat-icon>open_in_new</mat-icon>
         Start onboarding

package/src/component/payout/provider_onboarding.ts

@@ -1,8 +1,9 @@
 import { ChangeDetectionStrategy, Component, OnInit, inject, input, output, signal } from '@angular/core';
+import { BaseAsync } from '../abstract/base_async';
 import { MatButtonModule } from '@angular/material/button';
 import { MatCardModule } from '@angular/material/card';
 import { MatIconModule } from '@angular/material/icon';
-import { MatRadioModule } from '@angular/material/radio';
+import { MatRadioChange, MatRadioModule } from '@angular/material/radio';
 import { PayoutService } from '../../service/payout.service';
 import { ReusableAccount } from '../../model/appdata';
 
@@ -13,13 +14,15 @@ import { ReusableAccount } from '../../model/appdata';
  * two paths:
  *   1. Reuse an existing provider account from another partner row
  *      (zero-KYC; calls /api/v1/payout/reusable/link).
- *   2. Launch the provider's hosted-KYC page in a new tab
+ *   2. Hand off to the provider's hosted-KYC page
  *      (/api/v1/payout/onboard/start).
  *
  * Routing is consumer-owned via the `(linked)` / `(skipped)` outputs —
  * the component itself never calls Router. Optional `title` and
  * `skipLabel` inputs cover the common UX strings.
  *
+ * Ships no CSS — the consuming app styles the classes globally.
+ *
  * Selector: <sail-payout-provider-onboarding>
  */
 @Component({
@@ -27,20 +30,8 @@ import { ReusableAccount } from '../../model/appdata';
   changeDetection: ChangeDetectionStrategy.OnPush,
   imports: [MatButtonModule, MatCardModule, MatIconModule, MatRadioModule],
   templateUrl: './provider_onboarding.html',
-  styles: `
-    .payout-onboarding { display: flex; flex-direction: column; gap: 16px; padding: 0 24px 32px; }
-    .payout-onboarding__title { margin: 0; }
-    .payout-onboarding__intro { font-size: 14px; color: var(--mat-app-on-surface-variant, #555); margin: 0; }
-    .reuse-card { background: var(--mat-app-surface-variant, #f5f5f5); }
-    .reuse-option { display: block; margin: 8px 0; }
-    .hint { font-size: 13px; color: var(--mat-app-on-surface-variant, #555); margin: 0 0 12px; }
-    .payout-onboarding__error { color: var(--mat-app-error, #b00020); font-size: 13px; margin: 0 0 12px; }
-    .payout-onboarding__nav { display: flex; gap: 12px; margin-top: 8px; }
-    .payout-onboarding__btn { border-radius: 24px; height: 48px; font-size: 15px; font-weight: 600; flex: 1; }
-    .payout-onboarding__btn--primary { background: var(--mat-app-primary, #1976d2); color: white; }
-  `,
 })
-export class PayoutProviderOnboardingComponent implements OnInit {
+export class PayoutProviderOnboardingComponent extends BaseAsync implements OnInit {
   /** Step title — defaults match the most common payout-step framing. */
   readonly title = input('Bank Account Setup');
   /** Skip-button label — covers wizards where skipping returns to the parent flow. */
@@ -54,58 +45,47 @@ export class PayoutProviderOnboardingComponent implements OnInit {
   readonly skipped = output<void>();
   /** Emitted when the user clicks Back. */
   readonly back = output<void>();
-  /** Emitted after the hosted page is opened in a new tab. Consumers can route away or show a "waiting on provider" screen. */
+  /** Emitted just before handing off to the hosted-KYC page. */
   readonly started = output<void>();
 
   private readonly payoutService = inject(PayoutService);
 
   readonly reusable = signal<ReusableAccount[]>([]);
   readonly selectedAccountId = signal<string>('');
-  readonly busy = signal<boolean>(false);
-  readonly errorMsg = signal<string>('');
 
   ngOnInit() {
-    this.payoutService.listReusable().subscribe({
-      next: ({ accounts }) => this.reusable.set(accounts ?? []),
-      error: () => this.reusable.set([]),
-    });
+    this.run(
+      this.payoutService.listReusable(),
+      ({ accounts }) => this.reusable.set(accounts ?? []),
+      'Could not check for reusable accounts.',
+    );
   }
 
-  selectAccount(id: string) {
-    this.selectedAccountId.set(id);
+  onAccountChange(event: MatRadioChange) {
+    this.selectedAccountId.set(String(event.value));
   }
 
   linkExisting() {
     const id = this.selectedAccountId();
     if (!id) return;
-    this.busy.set(true);
-    this.payoutService.linkReusable(id).subscribe({
-      next: () => {
-        this.busy.set(false);
-        this.linked.emit();
-      },
-      error: (err) => {
-        this.errorMsg.set(err?.error?.detail ?? 'Failed to link existing account');
-        this.busy.set(false);
-      },
-    });
+    this.run(
+      this.payoutService.linkReusable(id),
+      () => this.linked.emit(),
+      'Failed to link existing account',
+    );
   }
 
   startProviderKyc() {
-    this.busy.set(true);
-    this.payoutService.startOnboarding().subscribe({
-      next: (res) => {
-        this.busy.set(false);
-        // Open in the platform browser. Mobile webview wrappers
-        // intercept this and pop the system browser so the provider
-        // page works in its expected environment.
-        window.open(res.url, '_blank');
+    this.run(
+      this.payoutService.startOnboarding(),
+      (res) => {
         this.started.emit();
+        // Same-tab handoff: window.open from an async callback is popup-blocked
+        // (always on Safari), which used to leave users on a "waiting" screen
+        // with nothing open. Mobile webview wrappers intercept the navigation.
+        window.location.assign(res.url);
       },
-      error: (err) => {
-        this.errorMsg.set(err?.error?.detail ?? 'Failed to start onboarding');
-        this.busy.set(false);
-      },
-    });
+      'Failed to start onboarding',
+    );
   }
 }

package/src/component/security/trusted_devices.html

@@ -28,7 +28,7 @@
               <td>{{ formatDate(device.last_used_at) }}</td>
               <td>{{ formatDate(device.created_at) }}</td>
               <td>
-                <button matIconButton (click)="revokeDevice(device)" title="Revoke">
+                <button matIconButton (click)="revokeDevice(device)" title="Revoke" aria-label="Revoke device">
                   <mat-icon>delete</mat-icon>
                 </button>
               </td>

package/src/component/security/trusted_devices.ts

@@ -71,7 +71,6 @@ export class TrustedDevicesComponent extends BaseAsync implements OnInit {
     this.run(
       this.auth.logoutEverywhere({ password }),
       () => {
-        this.successMessage.set('Signed out of all devices.');
         this.logoutForm.reset();
         this.logoutOpen.set(false);
         this.auth.logout();

package/src/component/security/twofactor_setup.html

@@ -15,10 +15,14 @@
       }
       @case ('qr') {
         <p class="auth-instructions">Scan this QR code with your authenticator app (e.g., Google Authenticator, Authy).</p>
-        <div class="twofactor-qr">
-          <img [src]="qrUri()" alt="2FA QR Code" width="200" height="200">
-        </div>
-        <p class="auth-instructions">Or enter this secret manually: <code>{{ secret() }}</code></p>
+        @if (qrDataUrl()) {
+          <div class="twofactor-qr">
+            <img [src]="qrDataUrl()" alt="2FA QR Code" width="200" height="200">
+          </div>
+          <p class="auth-instructions">Or enter this secret manually: <code>{{ secret() }}</code></p>
+        } @else {
+          <p class="auth-instructions">Enter this secret in your authenticator app: <code>{{ secret() }}</code></p>
+        }
 
         @if (backupCodes().length > 0) {
           <div class="twofactor-backup">