From 9ab3a47834200af44b8b28f75427d9e2117f936f Mon Sep 17 00:00:00 2001
From: Ben Stokes <benstokes@MacBook-Air.local>
Date: Tue, 7 Apr 2026 18:01:27 +0100
Subject: [PATCH] fix: detect and warn when DOB is entered in US date format
 (MM/DD/YYYY)

---
 .../person-form/person-form.component.html    | 15 ++++++++--
 .../person-form/person-form.component.scss    | 28 +++++++++++++++++++
 .../person-form/person-form.component.ts      | 21 ++++++++++++++
 3 files changed, 62 insertions(+), 2 deletions(-)

diff --git a/apps/web/src/app/shared/forms/person-form/person-form.component.html b/apps/web/src/app/shared/forms/person-form/person-form.component.html
index d9cd9b3..34db545 100644
--- a/apps/web/src/app/shared/forms/person-form/person-form.component.html
+++ b/apps/web/src/app/shared/forms/person-form/person-form.component.html
@@ -65,7 +65,10 @@ <h1>Verify your personal details</h1>
 
   <!-- Date of Birth -->
   <div class="field-group">
-    <div class="field-title">Date of birth</div>
+    <div class="field-title">
+      Date of birth
+      <span class="field-optional">DD / MM / YYYY</span>
+    </div>
     <div class="dob-fields">
       <div class="field dob-field">
         <input
@@ -105,7 +108,15 @@ <h1>Verify your personal details</h1>
         />
       </div>
     </div>
-    @if (showErrors && dobError()) {
+    @if (dobSwapWarning()) {
+    <div class="dob-swap-warning">
+      It looks like you may have entered month/day in US format. The order is
+      <strong>Day / Month / Year</strong>.
+      <button type="button" class="swap-btn" (click)="SwapDobDayMonth()">
+        Swap day &amp; month
+      </button>
+    </div>
+    } @if (showErrors && dobError()) {
     <div class="error">{{ dobError() }}</div>
     }
   </div>
diff --git a/apps/web/src/app/shared/forms/person-form/person-form.component.scss b/apps/web/src/app/shared/forms/person-form/person-form.component.scss
index caa86ed..f6839b1 100644
--- a/apps/web/src/app/shared/forms/person-form/person-form.component.scss
+++ b/apps/web/src/app/shared/forms/person-form/person-form.component.scss
@@ -57,6 +57,34 @@
   opacity: $dimmed-extra;
 }
 
+.dob-swap-warning {
+  margin-top: $spacing-small;
+  padding: $spacing-small;
+  font-size: $font-size-small;
+  color: #92400e;
+  background-color: #fffbeb;
+  border: 1px solid #fbbf24;
+  border-radius: $border-radius-small;
+  line-height: 1.5;
+
+  .swap-btn {
+    display: inline;
+    background: none;
+    border: none;
+    padding: 0;
+    margin: 0;
+    font-size: inherit;
+    color: inherit;
+    text-decoration: underline;
+    cursor: pointer;
+    font-weight: 600;
+
+    &:hover {
+      opacity: $dimmed;
+    }
+  }
+}
+
 select {
   width: 100%;
 }
diff --git a/apps/web/src/app/shared/forms/person-form/person-form.component.ts b/apps/web/src/app/shared/forms/person-form/person-form.component.ts
index 1314522..e6d0e79 100644
--- a/apps/web/src/app/shared/forms/person-form/person-form.component.ts
+++ b/apps/web/src/app/shared/forms/person-form/person-form.component.ts
@@ -76,6 +76,7 @@ export class PersonFormComponent implements OnInit, OnChanges {
   dobMonth: WritableSignal<number | null> = signal(null);
   dobYear: WritableSignal<number | null> = signal(null);
   dobError: WritableSignal<string> = signal('');
+  dobSwapWarning: WritableSignal<boolean> = signal(false);
 
   // Address fields
   addressLine1: WritableSignal<string> = signal('');
@@ -225,6 +226,7 @@ export class PersonFormComponent implements OnInit, OnChanges {
   OnDobDayChange(value: string): void {
     const numValue = value ? parseInt(value, 10) : null;
     this.dobDay.set(numValue);
+    this.CheckDobSwapWarning();
     this.ValidateDob();
     this.EmitFormChange();
   }
@@ -232,6 +234,7 @@ export class PersonFormComponent implements OnInit, OnChanges {
   OnDobMonthChange(value: string): void {
     const numValue = value ? parseInt(value, 10) : null;
     this.dobMonth.set(numValue);
+    this.CheckDobSwapWarning();
     this.ValidateDob();
     this.EmitFormChange();
   }
@@ -243,6 +246,24 @@ export class PersonFormComponent implements OnInit, OnChanges {
     this.EmitFormChange();
   }
 
+  SwapDobDayMonth(): void {
+    const day = this.dobDay();
+    const month = this.dobMonth();
+    this.dobDay.set(month);
+    this.dobMonth.set(day);
+    this.dobSwapWarning.set(false);
+    this.ValidateDob();
+    this.EmitFormChange();
+  }
+
+  private CheckDobSwapWarning(): void {
+    const day = this.dobDay();
+    const month = this.dobMonth();
+    const looksSwapped =
+      day !== null && month !== null && day <= 12 && month > 12;
+    this.dobSwapWarning.set(looksSwapped);
+  }
+
   // Address handlers
   OnAddressLine1Change(value: string): void {
     this.addressLine1.set(value);