Merge pull request #1807 from thebiggive/DON-1108-df-tip-ux

DON-1108 – improve Donation Funds transfer page's post-transfer UX

src/app/person.model.ts

@@ -23,6 +23,11 @@ export interface Person {
      */
     pending_tip_balance?: { [currencyCode: string]: number };
 
+    /**
+     * The total of donor fund form-created succeeded tips for the given Person, set up in the past 10 days, counted in minor-currency units i.e. pence
+     */
+    recently_confirmed_tips_total?: { [currencyCode: string]: number };
+
     /**
      * These 3 expected on first update.
      */

src/app/transfer-funds/transfer-funds.component.html

@@ -2,6 +2,14 @@
   <div class="b-container">
     <h3 class="b-rh-1 b-bold">Transfer Donation Funds</h3>
 
+    @if (hasDonationFunds) {
+      <div class="existing-balance-info">
+        <p>Existing available balance: <strong>{{ ((donor?.cash_balance?.gbp || 0) / 100) | exactCurrency:'GBP' }}</strong></p>
+        <p>Ready to donate to charities? <a routerLink="/explore">Explore campaigns</a> &ndash; your Funds will be used for logged in donations automatically.</p>
+        <p>Want to add more to your balance first? Continue with the form below to get bank details for another transfer.</p>
+      </div>
+    }
+
     @if (donor && !isLoading && !isPurchaseComplete) {
       <form [formGroup]="creditForm">
         <mat-stepper orientation="vertical" [linear]="true" #stepper>
@@ -23,15 +31,20 @@ <h3 class="b-rh-1 b-bold">Transfer Donation Funds</h3>
             }
             @if (donorHasPendingTipBalance) {
               <div>
-                <p>Thank you for choosing to tip Big Give {{ (pendingTipBalance / 100) | exactCurrency:"GBP" }} </p>
+                <p>Thank you for choosing to tip Big Give {{ (pendingTipBalance / 100) | exactCurrency:"GBP" }}.</p>
 
                 <p>We will collect this tip when you make your bank transfer. Need to change this? You can
                   <a (click)="cancelPendingTips()">cancel the tip</a>
                   and then optionally make a new one.
               </div>
             }
+            @if (donorHasRecentlyTipped) {
+              <div>
+                <p>Thank you for tipping Big Give {{ (recentlyConfirmedTipsTotal / 100) | exactCurrency:"GBP" }}. This was confirmed from your balance when you transferred funds.</p>
+              </div>
+            }
             <!-- All tip bits are shown iff the pending bank-funded tip balance in GBP is £0 or undefined -->
-            @if (!donor.pending_tip_balance?.gbp) {
+            @if (!donorHasPendingTipBalance && !donorHasRecentlyTipped) {
               <div>
                 <p><strong>Tip Big Give</strong></p>
                 <p class="tip-text">Big Give has a 0% platform fee. That means we're able to continue offering our services thanks to donors who leave an optional tip amount here:</p>

src/app/transfer-funds/transfer-funds.component.scss

@@ -8,6 +8,12 @@
     margin-bottom: 2rem;
 }
 
+.existing-balance-info {
+    @include make-card($box-shadow-hard);
+    padding: 1rem;
+    margin-bottom: 3rem;
+}
+
 .mat-stepper-vertical {
     margin-top: 8px;
 }

src/app/transfer-funds/transfer-funds.component.ts

@@ -303,7 +303,7 @@ export class TransferFundsComponent implements AfterContentInit, OnInit {
       return false;
     }
 
-    if (this.donor?.pending_tip_balance?.gbp) {
+    if (this.donorHasPendingTipBalance || this.donorHasRecentlyTipped) {
       return false;
     }
 
@@ -355,6 +355,14 @@ export class TransferFundsComponent implements AfterContentInit, OnInit {
     return this.pendingTipBalance > 0;
   }
 
+  get recentlyConfirmedTipsTotal(): number {
+    return this.donor?.recently_confirmed_tips_total?.gbp || 0;
+  }
+
+  get donorHasRecentlyTipped(): boolean {
+    return this.recentlyConfirmedTipsTotal > 0;
+  }
+
   private loadPerson() {
     const idAndJWT = this.identityService.getIdAndJWT();
     if (idAndJWT !== undefined) {
@@ -373,7 +381,7 @@ export class TransferFundsComponent implements AfterContentInit, OnInit {
 
       this.setConditionalValidators();
 
-      if (this.donorHasPendingTipBalance) {
+      if (this.donorHasPendingTipBalance || this.donorHasRecentlyTipped) {
         this.amountsGroup.patchValue({
           customTipAmount: 0,
           tipPercentage: 0,
@@ -422,7 +430,7 @@ export class TransferFundsComponent implements AfterContentInit, OnInit {
 
     // If user didn't tip, OR if an existing tip's detected but we somehow have tip numbers
     // set, do not create a new tip.
-    if (donationAmount <= 0 || this.donorHasPendingTipBalance) {
+    if (donationAmount <= 0 || this.donorHasPendingTipBalance || this.donorHasRecentlyTipped) {
       return;
     }
 
@@ -507,4 +515,12 @@ export class TransferFundsComponent implements AfterContentInit, OnInit {
     this.matomoTracker.trackEvent('donate_error', 'credit_tip_donation_create_failed', errorMessage);
     this.toast.showError('Could not prepare your tip; please try again later or contact us to investigate');
   }
+
+  /**
+   * We only check for GBP balances for now, as we only support UK bank transfers rn
+   */
+  protected get hasDonationFunds()
+  {
+    return this.donor?.cash_balance?.gbp;
+  }
 }