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 14aa25d59..ab07394eb 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 @@ -226,8 +226,8 @@

How does Big Give u -

- Please choose whether you wish to claim Gift Aid. +

+ {{giftAidRequiredRadioError()}}

@@ -294,7 +294,7 @@

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 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 7e224d901..b01f15c29 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 @@ -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,11 +976,7 @@ 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; } @@ -988,6 +984,57 @@ export class DonationStartFormComponent implements AfterContentChecked, AfterCon 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;