From 7be0d10d0f1abf2f87702cb46b987eec221ce66c Mon Sep 17 00:00:00 2001
From: Barney Laurance <barney@thebiggive.org.uk>
Date: Wed, 4 Oct 2023 11:49:24 +0100
Subject: [PATCH] DON-819: Use snackbar to show errors in stepper recieve
 updates step

---
 .../donation-start-form.component.html        | 14 +++++------
 .../donation-start-form.component.ts          | 25 +++++++++++++++++++
 2 files changed, 32 insertions(+), 7 deletions(-)

diff --git a/src/app/donation-start/donation-start-form/donation-start-form.component.html b/src/app/donation-start/donation-start-form/donation-start-form.component.html
index ab07394eb..4731135ff 100644
--- a/src/app/donation-start/donation-start-form/donation-start-form.component.html
+++ b/src/app/donation-start/donation-start-form/donation-start-form.component.html
@@ -449,8 +449,8 @@ <h3 class="b-rt-0 b-m-0 b-bold"><span class="span-hr"></span>How does Big Give u
               </mat-radio-button>
             </div>
           </div>
-          <p class="error" *ngIf="triedToLeaveMarketing && marketingGroup.get('optInCharityEmail')?.hasError('required')" aria-live="assertive">
-            Please choose whether you wish to receive updates from {{ campaign.charity.name }}.
+          <p class="error" *ngIf="triedToLeaveMarketing && errorMessagesForMarketingStep().optInCharityEmailRequired" aria-live="assertive">
+            {{errorMessagesForMarketingStep().optInCharityEmailRequired}}.
           </p>
         </mat-radio-group>
 
@@ -482,8 +482,8 @@ <h3 class="b-rt-0 b-m-0 b-bold"><span class="span-hr"></span>How does Big Give u
               </mat-radio-button>
             </div>
           </div>
-          <p class="error" *ngIf="triedToLeaveMarketing && marketingGroup.get('optInTbgEmail')?.hasError('required')" aria-live="assertive">
-            Please choose whether you wish to receive updates from Big Give.
+          <p class="error" *ngIf="triedToLeaveMarketing && errorMessagesForMarketingStep().optInTbgEmailRequired" aria-live="assertive">
+            {{errorMessagesForMarketingStep().optInTbgEmailRequired}}
           </p>
         </mat-radio-group>
         <mat-hint *ngIf="marketingGroup.value.optInTbgEmail === false" aria-live="polite">
@@ -508,8 +508,8 @@ <h3 class="b-rt-0 b-m-0 b-bold"><span class="span-hr"></span>How does Big Give u
                 </mat-radio-button>
               </div>
             </div>
-            <p class="error" *ngIf="triedToLeaveMarketing && marketingGroup.get('optInChampionEmail')?.hasError('required')" aria-live="assertive">
-              Please choose whether you wish to receive updates from {{ campaign.championName }}.
+            <p class="error" *ngIf="triedToLeaveMarketing && errorMessagesForMarketingStep().optInChampionEmailRequired" aria-live="polite">
+              {{errorMessagesForMarketingStep().optInChampionEmailRequired}}
             </p>
           </mat-radio-group>
           <mat-hint *ngIf="marketingGroup.value.optInChampionEmail === false" aria-live="polite">
@@ -525,7 +525,7 @@ <h3 class="b-rt-0 b-m-0 b-bold"><span class="span-hr"></span>How does Big Give u
             class="continue b-w-100 b-rt-0"
             mat-raised-button
             color="primary"
-            (click)="triedToLeaveMarketing = true; next()"
+            (click)="progressFromStepReceiveUpdates()"
           >Continue</button>
         </div>
       </mat-step>
diff --git a/src/app/donation-start/donation-start-form/donation-start-form.component.ts b/src/app/donation-start/donation-start-form/donation-start-form.component.ts
index b01f15c29..ea9a09004 100644
--- a/src/app/donation-start/donation-start-form/donation-start-form.component.ts
+++ b/src/app/donation-start/donation-start-form/donation-start-form.component.ts
@@ -1027,6 +1027,31 @@ export class DonationStartFormComponent implements AfterContentChecked, AfterCon
     this.next()
   }
 
+  progressFromStepReceiveUpdates(): void {
+    this.triedToLeaveMarketing = true;
+    const errorMessages = Object.values(this.errorMessagesForMarketingStep()).filter(Boolean)
+    if (errorMessages.length > 0 && this.don819FlagEnabled) {
+      this.showErrorToast(errorMessages.join(" "));
+      return;
+    }
+
+    this.next()
+  }
+
+  public errorMessagesForMarketingStep = () => {
+    return {
+      optInChampionEmailRequired: this.marketingGroup.get('optInChampionEmail')?.hasError('required') ?
+        `Please choose whether you wish to receive updates from ${this.campaign.championName}.` : null,
+
+      optInTbgEmailRequired: this.marketingGroup.get('optInTbgEmail')?.hasError('required') ?
+        'Please choose whether you wish to receive updates from Big Give.' : null,
+
+      optInCharityEmailRequired: this.marketingGroup.get('optInCharityEmail')?.hasError('required') ?
+        `Please choose whether you wish to receive updates from ${this.campaign.charity.name}.` : null
+    };
+  }
+
+
   public giftAidRequiredRadioError = (): string => {
     if (this.giftAidGroup.get('giftAid')?.hasError('required')) {
       return 'Please choose whether you wish to claim Gift Aid.'