Merge pull request #1326 from thebiggive/DON-819-gift-aid-errors

DON-819: Use snackbar to show errors in stepper gift aid step
thebiggive · Oct 4, 2023 · 7e559f7 · 7e559f7
2 parents 8f36d6e + c310af2
commit 7e559f7
Show file tree

Hide file tree

Showing 2 changed files with 74 additions and 27 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
@@ -226,8 +226,8 @@ <h3 class="b-rt-0 b-m-0 b-bold"><span class="span-hr"></span>How does Big Give u
             </div>
           </div>
 
-          <p class="error" *ngIf="triedToLeaveGiftAid && giftAidGroup.get('giftAid')?.hasError('required')" aria-live="assertive">
-            Please choose whether you wish to claim Gift Aid.
+          <p class="error" *ngIf="triedToLeaveGiftAid && giftAidRequiredRadioError()" aria-live="polite">
+            {{giftAidRequiredRadioError()}}
           </p>
         </mat-radio-group>
 
@@ -294,7 +294,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)="triedToLeaveGiftAid = true; next()"
+            (click)="progressFromStepGiftAid()"
           >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
@@ -3,17 +3,17 @@ import {DatePipe, getCurrencySymbol, isPlatformBrowser} from '@angular/common';
 import {flags} from "../../featureFlags";
 import {HttpErrorResponse} from '@angular/common/http';
 import {
-    AfterContentChecked,
-    AfterContentInit,
-    ChangeDetectorRef,
-    Component,
-    ElementRef,
-    Inject,
-    Input,
-    OnDestroy,
-    OnInit,
-    PLATFORM_ID,
-    ViewChild,
+  AfterContentChecked,
+  AfterContentInit,
+  ChangeDetectorRef,
+  Component,
+  ElementRef,
+  Inject,
+  Input,
+  OnDestroy,
+  OnInit,
+  PLATFORM_ID,
+  ViewChild,
 } from '@angular/core';
 import {FormBuilder, FormGroup, Validators} from '@angular/forms';
 import {MatAutocompleteSelectedEvent} from '@angular/material/autocomplete';
@@ -24,12 +24,12 @@ import {ActivatedRoute, Router} from '@angular/router';
 import {RecaptchaComponent} from 'ng-recaptcha';
 import {debounceTime, distinctUntilChanged, retryWhen, startWith, switchMap, tap} from 'rxjs/operators';
 import {
-    PaymentIntent,
-    PaymentMethod,
-    StripeElementChangeEvent,
-    StripeElements,
-    StripeError,
-    StripePaymentElement,
+  PaymentIntent,
+  PaymentMethod,
+  StripeElementChangeEvent,
+  StripeElements,
+  StripeError,
+  StripePaymentElement,
 } from '@stripe/stripe-js';
 import {EMPTY, firstValueFrom} from 'rxjs';
 
@@ -772,7 +772,7 @@ export class DonationStartFormComponent implements AfterContentChecked, AfterCon
         result = await firstValueFrom(this.donationService.confirmCardPayment(this.donation, paymentMethod));
       } catch (httpError) {
         this.matomoTracker.trackEvent(
-          'donate_error', 
+          'donate_error',
           'stripe_confirm_failed',
           httpError.error?.error?.code,
         );
@@ -957,7 +957,7 @@ export class DonationStartFormComponent implements AfterContentChecked, AfterCon
       return;
     }
     this.stripePaymentMethodReady = !!this.selectedSavedMethod || this.stripeManualCardInputValid || this.creditPenceToUse > 0;
-    
+
     const promptingForCaptcha = this.promptForCaptcha();
 
     if (promptingForCaptcha) {
@@ -976,18 +976,65 @@ export class DonationStartFormComponent implements AfterContentChecked, AfterCon
 
     const control = this.donationForm.controls['amounts'];
     if(! control!.valid) {
-        this.snackBar.open(
-          this.displayableAmountsStepErrors() || 'Sorry, there was an error with the donation amount',
-            undefined,
-            { duration: 5_000, panelClass: 'snack-bar' }
-        );
+      this.showErrorToast(this.displayableAmountsStepErrors() || 'Sorry, there was an error with the donation amount');
 
       return;
     }
 
     this.next();
   }
 
+  /**
+   * Displays a message on screen to let a donor know why they can't progress from the current step. Message should be
+   * an explanation, e.g. because they need to fill in a certain field or what they have entered isn't usable.
+   */
+  private showErrorToast(message: string) {
+    this.snackBar.open(
+      message,
+      undefined,
+      {duration: 5_000, panelClass: 'snack-bar'}
+    );
+  }
+
+  progressFromStepGiftAid(): void {
+    this.triedToLeaveGiftAid = true;
+    const giftAidRequiredRadioError = this.giftAidRequiredRadioError();
+    const errorMessages = giftAidRequiredRadioError ? [giftAidRequiredRadioError] : [];
+
+    const homeAddressErrors = this.giftAidGroup?.controls?.homeAddress?.errors;
+    if (homeAddressErrors?.required) {
+      errorMessages.push("Please enter your home address");
+    }
+
+    if (homeAddressErrors?.maxlength) {
+      errorMessages.push(`Please enter your address in ${homeAddressErrors.maxlength.requiredLength} characters or less`);
+    }
+
+    const homePostcodeErrors = this.giftAidGroup?.controls?.homePostcode?.errors;
+    if (homePostcodeErrors?.required) {
+      errorMessages.push("Please enter your home postcode");
+    }
+
+    if (homePostcodeErrors?.pattern) {
+      errorMessages.push("Please enter a UK postcode");
+    }
+
+    if (errorMessages.length > 0 && this.don819FlagEnabled) {
+      this.showErrorToast(errorMessages.join(". "));
+      return;
+    }
+
+    this.next()
+  }
+
+  public giftAidRequiredRadioError = (): string => {
+    if (this.giftAidGroup.get('giftAid')?.hasError('required')) {
+      return 'Please choose whether you wish to claim Gift Aid.'
+    }
+
+    return '';
+  }
+
     public displayableAmountsStepErrors = () => {
         const errors = this.donationAmountField?.errors;