@nauticana/sail 0.7.0 → 0.8.1

package/src/component/login/chpass_component.ts

@@ -7,9 +7,10 @@ import { MatFormFieldModule } from '@angular/material/form-field';
 import { MatInputModule } from '@angular/material/input';
 import { MatCheckboxModule } from '@angular/material/checkbox';
 import { SAIL_GUI_CONFIG, SailGuiConfig, DEFAULT_CONFIG } from '../../config';
+import { BaseAsync } from '../abstract/base_async';
 
 @Component({
-  selector: 'app-chpass',
+  selector: 'sail-chpass',
   templateUrl: './chpass_component.html',
   changeDetection: ChangeDetectionStrategy.OnPush,
   encapsulation: ViewEncapsulation.None,
@@ -22,15 +23,13 @@ import { SAIL_GUI_CONFIG, SailGuiConfig, DEFAULT_CONFIG } from '../../config';
     RouterLink,
   ],
 })
-export class ChpassComponent {
+export class ChpassComponent extends BaseAsync {
   private auth = inject(BaseAuthService);
   private fb = inject(FormBuilder);
   private router = inject(Router);
   protected readonly guiConfig: SailGuiConfig = inject(SAIL_GUI_CONFIG, {optional: true}) ?? DEFAULT_CONFIG;
 
   forgotPassword = signal(false);
-  errorMessage = signal('');
-  successMessage = signal('');
 
   chpassForm = this.fb.group({
     username: ['', Validators.required],
@@ -62,9 +61,6 @@ export class ChpassComponent {
   }
 
   changePassword(): void {
-    this.errorMessage.set('');
-    this.successMessage.set('');
-
     if (this.chpassForm.invalid) return;
 
     const { username, old_password, new_password, confirm_password } = this.chpassForm.value;
@@ -74,23 +70,22 @@ export class ChpassComponent {
       return;
     }
 
-    const request = this.forgotPassword()
+    const isForgot = this.forgotPassword();
+    const request = isForgot
       ? this.auth.forgotPassword(username!)
       : this.auth.chpass(username!, new_password!, old_password!);
 
-    request.subscribe({
-      next: () => {
-        if (this.forgotPassword()) {
+    this.run(
+      request,
+      () => {
+        if (isForgot) {
           this.successMessage.set('A confirmation code has been sent to your email.');
           this.router.navigate(['/confirm/password'], { queryParams: { username } });
         } else {
           this.successMessage.set('Password changed successfully.');
         }
       },
-      error: (err) => {
-        const msg = typeof err.error === 'string' ? err.error : err.error?.message;
-        this.errorMessage.set(msg || 'Password change failed. Please try again.');
-      },
-    });
+      'Password change failed. Please try again.',
+    );
   }
 }

package/src/component/login/confirm_chpass_component.html

@@ -36,7 +36,7 @@
         <div class="auth-success" role="status">{{ successMessage() }}</div>
       }
 
-      <button mat-raised-button class="primary" type="submit" [disabled]="!confirmForm.valid">
+      <button matButton="elevated" class="primary" type="submit" [disabled]="!confirmForm.valid">
         Confirm Password Change
       </button>
     </form>

package/src/component/login/confirm_chpass_component.ts

@@ -1,4 +1,4 @@
-import { ChangeDetectionStrategy, Component, inject, signal, OnInit, ViewEncapsulation } from '@angular/core';
+import { ChangeDetectionStrategy, Component, inject, OnInit, ViewEncapsulation } from '@angular/core';
 import { FormBuilder, ReactiveFormsModule, Validators } from '@angular/forms';
 import { BaseAuthService } from '../../service/auth.service';
 import { ActivatedRoute, Router, RouterLink } from '@angular/router';
@@ -6,9 +6,10 @@ import { MatButtonModule } from '@angular/material/button';
 import { MatFormFieldModule } from '@angular/material/form-field';
 import { MatInputModule } from '@angular/material/input';
 import { SAIL_GUI_CONFIG, SailGuiConfig, DEFAULT_CONFIG } from '../../config';
+import { BaseAsync } from '../abstract/base_async';
 
 @Component({
-  selector: 'app-confirm-chpass',
+  selector: 'sail-confirm-chpass',
   templateUrl: './confirm_chpass_component.html',
   changeDetection: ChangeDetectionStrategy.OnPush,
   encapsulation: ViewEncapsulation.None,
@@ -20,16 +21,13 @@ import { SAIL_GUI_CONFIG, SailGuiConfig, DEFAULT_CONFIG } from '../../config';
     RouterLink,
   ],
 })
-export class ConfirmChpassComponent implements OnInit {
+export class ConfirmChpassComponent extends BaseAsync implements OnInit {
   private auth = inject(BaseAuthService);
   private fb = inject(FormBuilder);
   private router = inject(Router);
   private route = inject(ActivatedRoute);
   protected readonly guiConfig: SailGuiConfig = inject(SAIL_GUI_CONFIG, {optional: true}) ?? DEFAULT_CONFIG;
 
-  errorMessage = signal('');
-  successMessage = signal('');
-
   confirmForm = this.fb.group({
     username: ['', Validators.required],
     code: ['', Validators.required],
@@ -45,9 +43,6 @@ export class ConfirmChpassComponent implements OnInit {
   }
 
   confirm(): void {
-    this.errorMessage.set('');
-    this.successMessage.set('');
-
     if (this.confirmForm.invalid) return;
 
     const { username, code, new_password, confirm_password } = this.confirmForm.value;
@@ -57,14 +52,13 @@ export class ConfirmChpassComponent implements OnInit {
       return;
     }
 
-    this.auth.confirmChpass(username!, code!, new_password!).subscribe({
-      next: () => {
+    this.run(
+      this.auth.confirmChpass(username!, code!, new_password!),
+      () => {
         this.successMessage.set('Password changed successfully. Redirecting to login...');
         this.router.navigate(['/login/local']);
       },
-      error: (err) => {
-        this.errorMessage.set(err.error?.message ?? 'Confirmation failed. Please try again.');
-      },
-    });
+      'Confirmation failed. Please try again.',
+    );
   }
 }

package/src/component/login/confirm_register_component.html

@@ -26,7 +26,7 @@
         <div class="auth-success" role="status">{{ successMessage() }}</div>
       }
 
-      <button mat-raised-button class="primary" type="submit" [disabled]="!confirmForm.valid">
+      <button matButton="elevated" class="primary" type="submit" [disabled]="!confirmForm.valid">
         Confirm
       </button>
     </form>

package/src/component/login/confirm_register_component.ts

@@ -1,4 +1,4 @@
-import { ChangeDetectionStrategy, Component, inject, signal, OnInit, ViewEncapsulation } from '@angular/core';
+import { ChangeDetectionStrategy, Component, inject, OnInit, ViewEncapsulation } from '@angular/core';
 import { FormBuilder, ReactiveFormsModule, Validators } from '@angular/forms';
 import { BaseAuthService } from '../../service/auth.service';
 import { ActivatedRoute, Router, RouterLink } from '@angular/router';
@@ -6,9 +6,10 @@ import { MatButtonModule } from '@angular/material/button';
 import { MatFormFieldModule } from '@angular/material/form-field';
 import { MatInputModule } from '@angular/material/input';
 import { SAIL_GUI_CONFIG, SailGuiConfig, DEFAULT_CONFIG } from '../../config';
+import { BaseAsync } from '../abstract/base_async';
 
 @Component({
-  selector: 'app-confirm-register',
+  selector: 'sail-confirm-register',
   templateUrl: './confirm_register_component.html',
   changeDetection: ChangeDetectionStrategy.OnPush,
   encapsulation: ViewEncapsulation.None,
@@ -20,16 +21,13 @@ import { SAIL_GUI_CONFIG, SailGuiConfig, DEFAULT_CONFIG } from '../../config';
     RouterLink,
   ],
 })
-export class ConfirmRegisterComponent implements OnInit {
+export class ConfirmRegisterComponent extends BaseAsync implements OnInit {
   private auth = inject(BaseAuthService);
   private fb = inject(FormBuilder);
   private router = inject(Router);
   private route = inject(ActivatedRoute);
   protected readonly guiConfig: SailGuiConfig = inject(SAIL_GUI_CONFIG, {optional: true}) ?? DEFAULT_CONFIG;
 
-  errorMessage = signal('');
-  successMessage = signal('');
-
   confirmForm = this.fb.group({
     email: ['', [Validators.required, Validators.email]],
     code: ['', Validators.required],
@@ -43,15 +41,13 @@ export class ConfirmRegisterComponent implements OnInit {
   }
 
   confirm(): void {
-    this.errorMessage.set('');
-    this.successMessage.set('');
-
     if (this.confirmForm.invalid) return;
 
     const { email, code } = this.confirmForm.value;
 
-    this.auth.confirmRegister(email!, code!).subscribe({
-      next: (resp) => {
+    this.run(
+      this.auth.confirmRegister(email!, code!),
+      (resp) => {
         this.successMessage.set('Registration confirmed.');
         if (resp?.paymentRequired && resp.paymentUrl) {
           // Paid plan: go straight to payment. Subscription is 'P' until paid.
@@ -63,9 +59,7 @@ export class ConfirmRegisterComponent implements OnInit {
         // Free plan: land on login.
         this.router.navigate(['/login/local']);
       },
-      error: (err) => {
-        this.errorMessage.set(err.error?.message ?? 'Confirmation failed. Please try again.');
-      },
-    });
+      'Confirmation failed. Please try again.',
+    );
   }
 }

package/src/component/login/consent_gate.ts

@@ -22,7 +22,7 @@ import { SAIL_GUI_CONFIG, SailGuiConfig, DEFAULT_CONFIG } from '../../config';
  * See keel/README.md → "Consent Capture" for the backend-side contract.
  */
 @Component({
-  selector: 'app-consent-gate',
+  selector: 'sail-consent-gate',
   templateUrl: './consent_gate.html',
   changeDetection: ChangeDetectionStrategy.OnPush,
   encapsulation: ViewEncapsulation.None,

package/src/component/login/login_component.html

@@ -18,13 +18,13 @@
         <mat-label>Password</mat-label>
         <input matInput type="password" formControlName="password" required>
       </mat-form-field>
-      <button mat-raised-button class="primary" type="submit" [disabled]="!loginForm.valid">
+      <button matButton="elevated" class="primary" type="submit" [disabled]="!loginForm.valid">
         Login
       </button>
     </form>
     @if (showSocialLogin()) {
       <hr class="auth-divider">
-      <app-social-login
+      <sail-social-login
         [providers]="enabledSocialProviders()"
         (loginSuccess)="onSocialSuccess($event)"
         (loginError)="onSocialError($event)" />

package/src/component/login/login_component.ts

@@ -10,7 +10,7 @@ import { LoginResponseSocial, SocialProvider } from '../../model/auth';
 import { SocialLoginComponent } from './social_login';
 
 @Component({
-  selector: 'app-login',
+  selector: 'sail-login',
   templateUrl: './login_component.html',
   changeDetection: ChangeDetectionStrategy.OnPush,
   encapsulation: ViewEncapsulation.None,

package/src/component/login/otp_input.html

@@ -16,7 +16,7 @@
 
   <p class="otp-resend">
     @if (canResend()) {
-      <button mat-button class="resend-btn" type="button" (click)="onResend()">Resend code</button>
+      <button matButton class="resend-btn" type="button" (click)="onResend()">Resend code</button>
     } @else {
       Resend code in {{ countdown() }}s
     }
@@ -27,11 +27,11 @@
       @if (key === '') {
         <div class="keypad-spacer"></div>
       } @else if (key === 'back') {
-        <button mat-button class="keypad-key" type="button" (click)="onBackspace()" aria-label="Backspace" [disabled]="disabled()">
+        <button matButton class="keypad-key" type="button" (click)="onBackspace()" aria-label="Backspace" [disabled]="disabled()">
           <mat-icon>backspace</mat-icon>
         </button>
       } @else {
-        <button mat-button class="keypad-key" type="button" (click)="onKeyPress(key)" [disabled]="disabled()">{{ key }}</button>
+        <button matButton class="keypad-key" type="button" (click)="onKeyPress(key)" [disabled]="disabled()">{{ key }}</button>
       }
     }
   </div>

package/src/component/login/otp_input.ts

@@ -13,7 +13,7 @@ import { MatIconModule } from '@angular/material/icon';
  * call verifyOtp / resendOtp. See README "Phone / email OTP login".
  */
 @Component({
-  selector: 'app-otp-input',
+  selector: 'sail-otp-input',
   templateUrl: './otp_input.html',
   changeDetection: ChangeDetectionStrategy.OnPush,
   encapsulation: ViewEncapsulation.None,

package/src/component/login/register_component.html

@@ -120,7 +120,7 @@
         <div class="geocode-status geocode-error" role="alert">{{ registerError() }}</div>
       }
 
-      <button mat-raised-button class="primary" type="submit"
+      <button matButton="elevated" class="primary" type="submit"
         [disabled]="!registerForm.valid || geocodeStatus() !== 'success'">
         Create Account
       </button>

package/src/component/login/register_component.ts

@@ -15,7 +15,7 @@ import { PartnerRegistration, PublicPlan } from '../../model/appdata';
 import { SAIL_GUI_CONFIG, SailGuiConfig, DEFAULT_CONFIG } from '../../config';
 
 @Component({
-  selector: 'app-register',
+  selector: 'sail-register',
   templateUrl: './register_component.html',
   changeDetection: ChangeDetectionStrategy.OnPush,
   encapsulation: ViewEncapsulation.None,

package/src/component/login/social_login.ts

@@ -27,7 +27,7 @@ const APPLE_URL = 'https://appleid.cdn-apple.com/appleauth/static/jsapi/appleid/
  * without config are hidden (with a console.warn for diagnostics).
  */
 @Component({
-  selector: 'app-social-login',
+  selector: 'sail-social-login',
   templateUrl: './social_login.html',
   changeDetection: ChangeDetectionStrategy.OnPush,
   encapsulation: ViewEncapsulation.None,

package/src/component/navigation/navigation.html

@@ -29,7 +29,7 @@
     <mat-sidenav-content>
         <mat-toolbar class="primary">
             @if (isHandset()) {
-                <button type="button" aria-label="Toggle sidenav" mat-icon-button (click)="sidenav.toggle()">
+                <button type="button" aria-label="Toggle sidenav" matIconButton (click)="sidenav.toggle()">
                     <mat-icon aria-label="Side nav toggle icon">menu</mat-icon>
                 </button>
             }
@@ -37,10 +37,10 @@
             <span class="toolbar-spacer"></span>
             <ng-content select="[toolbar-actions]"></ng-content>
             @if (isLoggedIn()) {
-                <button mat-button (click)="logout()">Logout</button>
+                <button matButton (click)="logout()">Logout</button>
             } @else if (guiConfig.publicRouteLinks) {
                 @for (link of guiConfig.publicRouteLinks; track link.routerLink) {
-                    <a mat-button [routerLink]="link.routerLink">{{ link.label }}</a>
+                    <a matButton [routerLink]="link.routerLink">{{ link.label }}</a>
                 }
             }
         </mat-toolbar>

package/src/component/navigation/navigation.ts

@@ -1,4 +1,4 @@
-import { ChangeDetectionStrategy, Component, computed, inject, OnInit, signal, ViewEncapsulation } from "@angular/core";
+import { ChangeDetectionStrategy, Component, computed, inject, ViewEncapsulation } from "@angular/core";
 import { toSignal } from "@angular/core/rxjs-interop";
 import { RouterLink, RouterOutlet } from "@angular/router";
 import { MatSidenavModule } from '@angular/material/sidenav';
@@ -14,7 +14,7 @@ import { BaseAuthService } from "../../service/auth.service";
 import { SAIL_GUI_CONFIG, SailGuiConfig, DEFAULT_CONFIG } from "../../config";
 
 @Component({
-  selector: 'app-navigation',
+  selector: 'sail-navigation',
   templateUrl: './navigation.html',
   changeDetection: ChangeDetectionStrategy.OnPush,
   encapsulation: ViewEncapsulation.None,
@@ -29,16 +29,20 @@ import { SAIL_GUI_CONFIG, SailGuiConfig, DEFAULT_CONFIG } from "../../config";
     MatExpansionModule,
   ],
 })
-export class Navigation implements OnInit {
+export class Navigation {
   private readonly authService = inject(BaseAuthService);
   private readonly breakpointObserver = inject(BreakpointObserver);
   protected readonly guiConfig: SailGuiConfig = inject(SAIL_GUI_CONFIG, {optional: true}) ?? DEFAULT_CONFIG;
 
-  private readonly allMenuItems = signal<ApplicationMenu[]>([]);
+  // Restore the stored JWT before the menu stream fires so `canAccess()` checks
+  // resolve against the right user. Done at field-init time (runs in injection
+  // context) rather than ngOnInit, so the toSignal below can read from it.
+  private readonly _sessionLoaded = (this.authService.loadStoredSession(), true);
+
+  private readonly allMenuItems = toSignal(this.authService.getMenus(), { initialValue: [] as ApplicationMenu[] });
 
   readonly menuItems = computed(() => {
-    const menus = this.allMenuItems();
-    return menus
+    return this.allMenuItems()
       .map(menu => ({
         ...menu,
         ApplicationMenuItems: (menu.ApplicationMenuItems ?? [])
@@ -54,11 +58,6 @@ export class Navigation implements OnInit {
 
   readonly isLoggedIn = this.authService.isLoggedIn;
 
-  ngOnInit() {
-    this.authService.loadStoredSession();
-    this.authService.getMenus().subscribe((menuItems: ApplicationMenu[]) => { this.allMenuItems.set(menuItems); });
-  }
-
   logout() {
     this.authService.logout();
   }

package/src/component/payment/user_payment_methods.html

@@ -0,0 +1,46 @@
+<div class="user-payment-methods">
+  <h2 class="user-payment-methods__title">{{ title() }}</h2>
+
+  @if (showAdd()) {
+    <button matButton="elevated"
+            class="user-payment-methods__add accent"
+            (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 matButton (click)="setDefault(m)">Set default</button>
+            }
+            <button matIconButton (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>

package/src/component/payment/user_payment_methods.ts

@@ -1,5 +1,4 @@
-import { ChangeDetectionStrategy, Component, EventEmitter, Input, OnInit, Output, ViewEncapsulation, inject, signal } from '@angular/core';
-import { CommonModule } from '@angular/common';
+import { ChangeDetectionStrategy, Component, OnInit, ViewEncapsulation, inject, input, output, signal } from '@angular/core';
 import { MatButtonModule } from '@angular/material/button';
 import { MatCardModule } from '@angular/material/card';
 import { MatIconModule } from '@angular/material/icon';
@@ -23,55 +22,8 @@ import { UserPaymentMethod } from '../../model/appdata';
   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>
-  `,
+  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; }
@@ -88,17 +40,17 @@ import { UserPaymentMethod } from '../../model/appdata';
   `,
 })
 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;
+  readonly title = input('Payment Methods');
+  readonly addLabel = input('Add Payment Method');
+  readonly emptyLabel = input('No saved payment methods yet.');
+  readonly showAdd = input(true);
 
   /** Emitted when the "Add" button is tapped. Consumer routes to its SetupIntent flow. */
-  @Output() addClicked = new EventEmitter<void>();
+  readonly addClicked = output<void>();
   /** Emitted after a successful set-default flip. */
-  @Output() defaultChanged = new EventEmitter<UserPaymentMethod>();
+  readonly defaultChanged = output<UserPaymentMethod>();
   /** Emitted after a successful delete. */
-  @Output() deleted = new EventEmitter<UserPaymentMethod>();
+  readonly deleted = output<UserPaymentMethod>();
 
   private readonly service = inject(UserPaymentMethodService);
 

package/src/component/payout/bank_info_form.html

@@ -0,0 +1,59 @@
+<div class="bank-info-form">
+  <h2 class="bank-info-form__title">{{ title() }}</h2>
+
+  @if (intro()) {
+    <p class="bank-info-form__intro">{{ intro() }}</p>
+  }
+
+  <form [formGroup]="form" (ngSubmit)="submit()">
+    <mat-form-field appearance="outline" class="full-width">
+      <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>
+        }
+      </mat-select>
+    </mat-form-field>
+    <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>
+      <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>
+      <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>
+      <input matInput formControlName="billingAddress">
+    </mat-form-field>
+    <p class="hint">Business or home address — used for tax correspondence</p>
+
+    <p class="provider-note">
+      Bank routing details (account number + institution / ABA /
+      IBAN) are collected by the payout provider in the next step;
+      this application does not store them.
+    </p>
+
+    <mat-checkbox formControlName="providerAgreement" class="agreement">
+      {{ agreementLabel() }}
+    </mat-checkbox>
+
+    <div class="nav-buttons">
+      @if (showBack()) {
+        <button matButton="outlined" class="pill-btn" type="button" (click)="back.emit()">
+          &lt; Back
+        </button>
+      }
+      <button matButton="filled" class="pill-btn primary-btn" type="submit"
+              [disabled]="form.invalid">
+        {{ submitLabel() }}
+      </button>
+    </div>
+  </form>
+</div>