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 @@
Verify your personal details
-
Date of birth
+
+ Date of birth
+ DD / MM / YYYY
+
- @if (showErrors && dobError()) {
+ @if (dobSwapWarning()) {
+
+ It looks like you may have entered month/day in US format. The order is
+ Day / Month / Year.
+
+
+ } @if (showErrors && dobError()) {
{{ dobError() }}
}
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 = signal(null);
dobYear: WritableSignal = signal(null);
dobError: WritableSignal = signal('');
+ dobSwapWarning: WritableSignal = signal(false);
// Address fields
addressLine1: WritableSignal = 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);