Merge pull request #1800 from thebiggive/DON-1066-show-mandate-on-don…

…ation DON-1066: Link to regular giving agreement from card payment
thebiggive · Dec 16, 2024 · 6bb8ddf · 6bb8ddf
2 parents a1b1d3f + d28cc01
commit 6bb8ddf
Show file tree

Hide file tree

Showing 5 changed files with 23 additions and 11 deletions.
diff --git a/src/app/donation.model.ts b/src/app/donation.model.ts
@@ -22,6 +22,16 @@ export const maximumDonationAmountForFundedDonation = 200_000;
  * * after the donation is fully processed and webhook returned (e.g. `matchedAmount`).
  */
 export interface Donation {
+    /**
+     * The regular giving agreement relating to this donation, if any. Optional property because production
+     * matchbot doesn't yet send it. Not a full representation of the mandate, just enough to be able to render
+     * a link to it etc.
+     */
+    mandate?: {
+      'uuid': string,
+      'activeFrom': string,
+    },
+
     autoConfirmFromCashBalance?: boolean;
 
     /**

diff --git a/src/app/my-donations/my-donations.component.html b/src/app/my-donations/my-donations.component.html
@@ -46,8 +46,13 @@
               >
                 <div class="donation">
                   <div>
-                    <p>{{this.displayMethodType(donation)}}</p>
-                    <h3><a href="/campaign/{{donation.projectId}}">{{ donation.charityName }}</a></h3>
+                    <p>{{this.displayMethodType(donation)}}
+                    @if (donation.mandate) {
+                      <br />
+                      <a href="{{myRegularGivingPath + '/' + donation.mandate.uuid}}">Regular giving since {{donation.mandate.activeFrom  | date: 'mediumDate'}}</a>
+                    }
+                    </p>
+                    <h3>{{ donation.charityName }}</h3>
                   </div>
                     <ul>
                       <li>Amount: {{ donation.donationAmount | exactCurrency:donation.currencyCode }}</li>

diff --git a/src/app/my-donations/my-donations.component.scss b/src/app/my-donations/my-donations.component.scss
@@ -6,7 +6,10 @@
 main > div {
   color: white;
   background-color: $colour-primary;
+}
 
+p:not(biggive-container-card *) {
+  // biggive-container-cards have white backgrounds so white links in there would be invisible.
   a:link, a:visited, a:hover {
     color: white;
   }
@@ -24,10 +27,6 @@ div.donation {
   height: 100%;
   justify-content: space-between;
   flex-direction: column;
-  a:link, a:visited, a:hover {
-    color: inherit !important;
-    text-decoration: none;
-  }
   *:first-child {
     margin-top: 0;
     flex-grow: 1;

diff --git a/src/app/my-donations/my-donations.component.ts b/src/app/my-donations/my-donations.component.ts
@@ -6,6 +6,7 @@ import {AsyncPipe, DatePipe} from "@angular/common";
 import {ExactCurrencyPipe} from "../exact-currency.pipe";
 import {MatProgressSpinner} from "@angular/material/progress-spinner";
 import {allChildComponentImports} from "../../allChildComponentImports";
+import {myRegularGivingPath} from "../app-routing";
 
 @Component({
   selector: 'app-my-donations',
@@ -23,6 +24,7 @@ import {allChildComponentImports} from "../../allChildComponentImports";
 export class MyDonationsComponent implements OnInit{
   protected donations: EnrichedDonation[];
   protected atLeastOneLargeRecentDonation: boolean;
+  protected readonly myRegularGivingPath = myRegularGivingPath;
 
   constructor(
     private pageMeta: PageMetaService,

diff --git a/src/app/regular-giving/regular-giving.component.ts b/src/app/regular-giving/regular-giving.component.ts
@@ -62,15 +62,11 @@ export class RegularGivingComponent implements OnInit {
     this.donor = donor;
 
     if ( !this.campaign.isRegularGiving ) {
-      throw new Error("Campaign " + this.campaign.id + " is not a regular giving campaign");
+      console.error("Campaign " + this.campaign.id + " is not a regular giving campaign");
     }
 
     this.campaign = this.route.snapshot.data.campaign;
 
-    if ( !this.campaign.isRegularGiving ) {
-      throw new Error("Campaign " + this.campaign.id + " is not a regular giving campaign");
-    }
-
     this.mandateForm = this.formBuilder.group({
         donationAmount: ['', [
           requiredNotBlankValidator,