From 421683115c17dbc76961df1a527f4c78fac12585 Mon Sep 17 00:00:00 2001
From: Niek Otten <not@respellion.nl>
Date: Thu, 16 Jul 2026 14:28:19 +0200
Subject: [PATCH] feat(self-service): 'trek aanvraag in' withdraws the
 submitted registration (refs #12)

After submitting, a secondary action withdraws the registration via

postSelfServiceRegistrationsIdWithdraw(reference); success shows an ingetrokken confirmation, a

failure is surfaced and the action stays available to retry.

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
---
 .../app/registration/registration-page.html   | 26 ++++++++++++++++---
 .../src/app/registration/registration-page.ts | 26 ++++++++++++++++++-
 2 files changed, 48 insertions(+), 4 deletions(-)

diff --git a/apps/self-service/src/app/registration/registration-page.html b/apps/self-service/src/app/registration/registration-page.html
index a8b6627..d4739e5 100644
--- a/apps/self-service/src/app/registration/registration-page.html
+++ b/apps/self-service/src/app/registration/registration-page.html
@@ -3,9 +3,29 @@
     <utrecht-heading-1>Zelfservice — BIG-registratie</utrecht-heading-1>
 
     @if (submitted()) {
-      <p utrecht-paragraph role="status">
-        Uw registratie is ontvangen. Referentie: {{ reference() }}.
-      </p>
+      @if (withdrawn()) {
+        <p utrecht-paragraph role="status">
+          Uw registratie met referentie {{ reference() }} is ingetrokken.
+        </p>
+      } @else {
+        <p utrecht-paragraph role="status">
+          Uw registratie is ontvangen. Referentie: {{ reference() }}.
+        </p>
+        @if (withdrawFailed()) {
+          <p utrecht-paragraph role="alert">
+            Het intrekken van uw registratie is niet gelukt. Probeer het opnieuw.
+          </p>
+        }
+        <button
+          utrecht-button
+          appearance="secondary-action-button"
+          type="button"
+          [disabled]="withdrawing()"
+          (click)="withdraw()"
+        >
+          Trek aanvraag in
+        </button>
+      }
     } @else {
       <p utrecht-paragraph>U bent ingelogd met BSN {{ bsn() }}.</p>
       @if (failed()) {
diff --git a/apps/self-service/src/app/registration/registration-page.ts b/apps/self-service/src/app/registration/registration-page.ts
index da526be..a5380de 100644
--- a/apps/self-service/src/app/registration/registration-page.ts
+++ b/apps/self-service/src/app/registration/registration-page.ts
@@ -6,7 +6,8 @@ import { UtrechtComponentsModule } from 'ui';
 /**
  * The self-service submit page: a signed-in zorgprofessional confirms and submits their BIG
  * registration. The bsn comes from the DigiD token (not a form field), so this is a confirm-and-
- * submit flow that posts to the BFF and shows the returned reference (ADR-0010; S-08c).
+ * submit flow that posts to the BFF and shows the returned reference (ADR-0010; S-08c). After
+ * submitting they can withdraw it — "trek aanvraag in" — keyed by that reference (S-11c).
  */
 @Component({
   selector: 'app-registration-page',
@@ -22,6 +23,9 @@ export class RegistrationPage {
   protected readonly reference = signal<string | undefined>(undefined);
   protected readonly submitted = signal(false);
   protected readonly failed = signal(false);
+  protected readonly withdrawing = signal(false);
+  protected readonly withdrawn = signal(false);
+  protected readonly withdrawFailed = signal(false);
 
   submit(): void {
     this.submitting.set(true);
@@ -39,4 +43,24 @@ export class RegistrationPage {
       },
     });
   }
+
+  withdraw(): void {
+    const reference = this.reference();
+    if (!reference) {
+      return;
+    }
+    this.withdrawing.set(true);
+    this.withdrawFailed.set(false);
+    this.bff.postSelfServiceRegistrationsIdWithdraw(reference).subscribe({
+      next: () => {
+        this.withdrawn.set(true);
+        this.withdrawing.set(false);
+      },
+      // Surface the failure instead of swallowing it: keep the action so the user can retry.
+      error: () => {
+        this.withdrawFailed.set(true);
+        this.withdrawing.set(false);
+      },
+    });
+  }
 }