Merge pull request #1327 from thebiggive/DON-819-receive-updates-errors

DON-819: Use snackbar to show errors in stepper recieve updates step
thebiggive · Oct 5, 2023 · 31a196a · 31a196a
2 parents f85ea73 + 7be0d10
commit 31a196a
Show file tree

Hide file tree

Showing 2 changed files with 32 additions and 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
@@ -469,8 +469,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>
 
@@ -502,8 +502,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">
@@ -528,8 +528,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">
@@ -545,7 +545,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
@@ -1065,6 +1065,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.'