Mehrstufige Angular-Wizards als diskriminierte Union-Zustandsmaschine modellieren

type WizardState =
  | { step: 'account'; email: string }
  | { step: 'billing'; email: string; cardToken: string }
  | { step: 'confirm'; email: string; cardToken: string; agreed: boolean }
  | { step: 'done'; orderId: string };
 
import { Injectable, signal } from '@angular/core';
 
@Injectable({ providedIn: 'root' })
export class CheckoutWizardStore {
  private readonly state = signal<WizardState>({
    step: 'account',
    email: '',
  });
 
  readonly current = this.state.asReadonly();
 
  submitAccount(email: string): void {
    // The compiler forbids constructing a 'billing' state without
    // the fields that 'account' never had, e.g. cardToken.
    this.state.set({ step: 'billing', email, cardToken: '' });
  }
 
  submitBilling(cardToken: string): void {
    const s = this.state();
    if (s.step !== 'billing') {
      throw new Error(`Cannot submit billing from step '${s.step}'`);
    }
    this.state.set({ ...s, step: 'confirm', cardToken, agreed: false });
  }
 
  confirmOrder(orderId: string): void {
    const s = this.state();
    if (s.step !== 'confirm' || !s.agreed) {
      throw new Error('Order cannot be confirmed yet');
    }
    this.state.set({ step: 'done', orderId });
  }
}