From 3b373dcecab4ff4e410c885ea043055ac86588c2 Mon Sep 17 00:00:00 2001
From: Barney Laurance <barney@thebiggive.org.uk>
Date: Fri, 10 Jan 2025 12:25:35 +0000
Subject: [PATCH] DON-1014: Adjust metacampaign page to work with
 regular-giving campaign

---
 src/app/explore/explore.component.html | 68 ++++++++++++++++++--------
 src/app/explore/explore.component.ts   |  1 -
 src/app/navigation.service.ts          |  3 +-
 3 files changed, 48 insertions(+), 24 deletions(-)

diff --git a/src/app/explore/explore.component.html b/src/app/explore/explore.component.html
index 1dbd2f8c6..9ba48dc34 100644
--- a/src/app/explore/explore.component.html
+++ b/src/app/explore/explore.component.html
@@ -1,5 +1,5 @@
 <main>
-  @if (tickerMainMessage || tickerItems.length > 0) {
+  @if ((tickerMainMessage || tickerItems.length > 0) && ! metaCampaign?.isRegularGiving) {
     <biggive-totalizer
       primary-colour="primary"
       primary-text-colour="white"
@@ -67,26 +67,52 @@
           (scrolled)="onScroll()"
           [scrollWindow]="true"
           >
-          @for (campaign of individualCampaigns; track campaign.id) {
-            <div>
-              <biggive-campaign-card
-                [banner]="campaign.imageUri | optimisedImage:830 | async"
-                [campaignType]="campaign.isMatched ? 'Match Funded' : null"
-                [campaignTitle]="campaign.title"
-                [donateButtonUrl]="'/donate/' + campaign.id"
-                [moreInfoButtonUrl]="'/campaign/' + campaign.id"
-                [organisationName]="campaign.charity.name"
-                primary-figure-label="Match Funds Remaining"
-                [primaryFigureAmount]="this.metaCampaign?.usesSharedFunds ? null : (campaign.matchFundsRemaining | currency: campaign.currencyCode : 'symbol' : currencyPipeDigitsInfo)"
-                [progressBarCounter]="getPercentageRaised(campaign)"
-                secondary-figure-label="Total Funds Raised"
-                [secondaryFigureAmount]="this.metaCampaign?.usesSharedFunds ? null : (campaign.amountRaised | currency: campaign.currencyCode : 'symbol' : currencyPipeDigitsInfo)"
-                [isFutureCampaign]="isInFuture(campaign)"
-                [isPastCampaign]="isInPast(campaign)"
-                [datetime]="getRelevantDateAsStr(campaign)">
-                id="campaign-{{campaign.id}}"
-              </biggive-campaign-card>
-            </div>
+          @if (this.metaCampaign?.isRegularGiving) {
+            <!-- We assume that we show regular giving campaigns only iff we are looking at a regular giving
+            metacampaign page -->
+            @for (campaign of individualCampaigns; track campaign.id) {
+              <div>
+                <biggive-campaign-card
+                  [banner]="campaign.imageUri | optimisedImage:830 | async"
+                  [campaignType]="campaign.isMatched ? 'Match Funded' : null"
+                  [campaignTitle]="campaign.title"
+                  [donateButtonUrl]="'/regular-giving/' + campaign.id"
+                  [donateButtonLabel]="'Donate monthly'"
+                  [moreInfoButtonUrl]="'/charity/' + campaign.charity.id"
+                  [organisationName]="campaign.charity.name"
+                  [progressBarCounter]="getPercentageRaised(campaign)"
+                  primary-figure-label="Total Funds Raised"
+                  [primaryFigureAmount]="this.metaCampaign?.usesSharedFunds ? null : (campaign.amountRaised | currency: campaign.currencyCode : 'symbol' : currencyPipeDigitsInfo)"
+                  [isFutureCampaign]="isInFuture(campaign)"
+                  [isPastCampaign]="isInPast(campaign)"
+                  [datetime]="getRelevantDateAsStr(campaign)">
+                  id="campaign-{{campaign.id}}"
+                </biggive-campaign-card>
+              </div>
+            }
+          } @else {
+            @for (campaign of individualCampaigns; track campaign.id) {
+              <div>
+                <biggive-campaign-card
+                  [banner]="campaign.imageUri | optimisedImage:830 | async"
+                  [campaignType]="campaign.isMatched ? 'Match Funded' : null"
+                  [campaignTitle]="campaign.title"
+                  [donateButtonUrl]="('/donate/' + campaign.id) "
+                  [donateButtonLabel]="'Donate now'"
+                  [moreInfoButtonUrl]="'/campaign/' + campaign.id"
+                  [organisationName]="campaign.charity.name"
+                  primary-figure-label="Match Funds Remaining"
+                  [primaryFigureAmount]="this.metaCampaign?.usesSharedFunds ? null : (campaign.matchFundsRemaining | currency: campaign.currencyCode : 'symbol' : currencyPipeDigitsInfo)"
+                  [progressBarCounter]="getPercentageRaised(campaign)"
+                  secondary-figure-label="Total Funds Raised"
+                  [secondaryFigureAmount]="this.metaCampaign?.usesSharedFunds ? null : (campaign.amountRaised | currency: campaign.currencyCode : 'symbol' : currencyPipeDigitsInfo)"
+                  [isFutureCampaign]="isInFuture(campaign)"
+                  [isPastCampaign]="isInPast(campaign)"
+                  [datetime]="getRelevantDateAsStr(campaign)">
+                  id="campaign-{{campaign.id}}"
+                </biggive-campaign-card>
+              </div>
+            }
           }
         </biggive-grid>
       }
diff --git a/src/app/explore/explore.component.ts b/src/app/explore/explore.component.ts
index 5f842fbf3..096736422 100644
--- a/src/app/explore/explore.component.ts
+++ b/src/app/explore/explore.component.ts
@@ -35,7 +35,6 @@ import {SESSION_STORAGE, StorageService} from "ngx-webstorage-service";
 const openPipeToken = 'TimeLeftToOpenPipe';
 const endPipeToken = 'timeLeftToEndPipe';
 
-/** @todo Reduce overlap duplication w/ MetaCampaignComponent - see https://www.typescriptlang.org/docs/handbook/mixins.html */
 @Component({
   selector: 'app-explore',
   templateUrl: './explore.component.html',
diff --git a/src/app/navigation.service.ts b/src/app/navigation.service.ts
index dc7b0b264..63fe36789 100644
--- a/src/app/navigation.service.ts
+++ b/src/app/navigation.service.ts
@@ -1,7 +1,6 @@
 import { Injectable } from '@angular/core';
-
 /**
- * Support scroll resoration when using custom 'back' links e.g. to MetacampaignComponent.
+ * Support scroll resoration when using custom 'back' links e.g. to ExploreComponent showing campaign.
  */
 @Injectable({
   providedIn: 'root',