Merge pull request #1827 from thebiggive/BG2-2776-highlight-cards-tidy

BG2-2776 – update home cards & redirect logic

package.json

@@ -44,8 +44,8 @@
     "@angular/platform-server": "^18.2.8",
     "@angular/router": "^18.2.8",
     "@angular/ssr": "^18.2.8",
-    "@biggive/components": "^202412181555.0.0",
-    "@biggive/components-angular": "^202412181555.0.0",
+    "@biggive/components": "^202501170933.0.0",
+    "@biggive/components-angular": "^202501170933.0.0",
     "@fortawesome/angular-fontawesome": "~0.15.0",
     "@fortawesome/free-brands-svg-icons": "^6.6.0",
     "@fortawesome/free-solid-svg-icons": "^6.6.0",

src/app/app-routing.ts

@@ -171,6 +171,7 @@ const routes: Routes = [
     pathMatch: 'full',
     resolve: {
       campaign: CampaignResolver,
+      highlights: highlightCardsResolver,
     },
     loadChildren: () => import('./explore/explore.module')
       .then(c => c.ExploreModule),
@@ -180,6 +181,7 @@ const routes: Routes = [
     pathMatch: 'full',
     resolve: {
       campaign: CampaignResolver,
+      highlights: highlightCardsResolver,
     },
     loadChildren: () => import('./explore/explore.module')
       .then(c => c.ExploreModule),
@@ -226,6 +228,7 @@ const routes: Routes = [
     pathMatch: 'full',
     resolve: {
       campaign: CampaignResolver,
+      highlights: highlightCardsResolver,
     },
     loadChildren: () => import('./explore/explore.module')
       .then(c => c.ExploreModule),
@@ -299,6 +302,7 @@ const routes: Routes = [
     pathMatch: 'full',
     resolve: {
       campaign: CampaignResolver,
+      highlights: highlightCardsResolver,
     },
     loadChildren: () => import('./explore/explore.module')
       .then(c => c.ExploreModule),

src/app/app.component.html

@@ -24,6 +24,7 @@ <h2>Unsupported Browser</h2>
     [experienceUrlPrefix]="experienceUriPrefix"
     [isLoggedIn]="isLoggedIn"
     [myAccountFlagEnabled]="true"
+    [someCampaignHasHomePageRedirect]="someCampaignHasHomePageRedirect()"
   ></biggive-main-menu>
 }
 

src/app/app.component.ts

@@ -1,5 +1,5 @@
-import {APP_BASE_HREF, isPlatformBrowser} from '@angular/common';
-import {AfterViewInit, Component, HostListener, Inject, OnDestroy, OnInit, PLATFORM_ID, ViewChild} from '@angular/core';
+import {isPlatformBrowser} from '@angular/common';
+import {AfterViewInit, Component, HostListener, Inject, OnDestroy, OnInit, PLATFORM_ID, signal, ViewChild, WritableSignal} from '@angular/core';
 import {Event as RouterEvent, NavigationEnd, NavigationStart, Router,} from '@angular/router';
 import {BiggiveMainMenu} from '@biggive/components-angular';
 import {MatomoTracker} from "ngx-matomo-client";
@@ -60,13 +60,14 @@ export class AppComponent implements AfterViewInit, OnDestroy, OnInit {
 
   public currentUrlWithoutHash$: Observable<URL>;
 
+  public isPlatformBrowser: boolean;
+  public someCampaignHasHomePageRedirect: WritableSignal<boolean> = signal(false);
   private getPersonSubscription: Subscription;
   private loginStatusChangeSubscription: Subscription;
   protected showingDedicatedCookiePreferencesPage: boolean;
 
   constructor(
     private identityService: IdentityService,
-    @Inject(APP_BASE_HREF) private baseHref: string,
     private donationService: DonationService,
     private getSiteControlService: GetSiteControlService,
     private navigationService: NavigationService,
@@ -75,6 +76,10 @@ export class AppComponent implements AfterViewInit, OnDestroy, OnInit {
     private matomoTracker: MatomoTracker,
     private router: Router,
   ) {
+    this.isPlatformBrowser = isPlatformBrowser(this.platformId);
+
+    navigationService.setPossibleRedirectSignal(this.someCampaignHasHomePageRedirect);
+
     // https://www.amadousall.com/angular-routing-how-to-display-a-loading-indicator-when-navigating-between-routes/
     this.router.events.subscribe((event: RouterEvent) => {
       if (event instanceof NavigationEnd) {
@@ -112,9 +117,7 @@ export class AppComponent implements AfterViewInit, OnDestroy, OnInit {
     // no-op
     // @to-do: Either restore and fix, or remove this function entirely and remove the event emitter it depends on
     // from https://github.com/thebiggive/components/blob/cf6175ea0272eac2219e87db78389df0eeb87ca8/src/components/biggive-button/biggive-button.tsx#L15
-  }
-
-  public isPlatformBrowser = isPlatformBrowser(this.platformId);
+  }  
 
   ngOnInit() {
     if (this.isPlatformBrowser) {

src/app/donation-start/donation-start-container/donation-start-container.component.spec.ts

@@ -2,7 +2,7 @@ import { provideHttpClientTesting } from "@angular/common/http/testing";
 import {Component, CUSTOM_ELEMENTS_SCHEMA} from "@angular/core";
 import { ComponentFixture, TestBed } from "@angular/core/testing";
 import { MatDialogModule } from "@angular/material/dialog";
-import { ActivatedRoute } from "@angular/router";
+import { ActivatedRoute, RouterLink } from "@angular/router";
 import { InMemoryStorageService } from "ngx-webstorage-service";
 import { of } from "rxjs";
 
@@ -48,6 +48,7 @@ describe("DonationStartContainer", () => {
           siteId: "",
           trackerUrl: "",
         }),
+        RouterLink,
       ],
       providers: [
         {

src/app/explore/explore.component.spec.ts

@@ -57,7 +57,9 @@ describe("ExploreComponent", () => {
           provide: ActivatedRoute,
           useValue: {
             snapshot: {
-              data: {},
+              data: {
+                highlights: [],
+              },
             },
             queryParams: of({}), // Let `loadQueryParamsAndRun()` subscribe without crashing.
           },
@@ -142,7 +144,9 @@ describe("ExploreComponent", () => {
     const dummyCampaignService = {} as CampaignService;
     const dummyDatePipe = {} as DatePipe;
     const dummyFundService = {} as FundService;
-    const dummyNavigationService = {} as NavigationService;
+    const dummyNavigationService = {
+      getPotentialRedirectPathAndUpdateSignal: () => null,
+    } as unknown as NavigationService;
     const dummyPageMeta = { setCommon: noop } as unknown as PageMetaService;
     const dummyPLATFORM_ID = {} as Object;
     const dummyRouter = { events: NEVER } as unknown as Router;

src/app/explore/explore.component.ts

@@ -76,7 +76,9 @@ export class ExploreComponent implements AfterViewChecked, OnDestroy, OnInit {
   beneficiaryOptions: string[] = [];
   categoryOptions: string[] = [];
   locationOptions: string[] = [];
-  protected highlightCards: HighlightCard[] | undefined;
+  // While only /explore may render the cards, all Explore component routes now provide the resolver for these. It's used
+  // to determine whether the menu needs a `?noredirect`, via NavigationService.
+  protected highlightCards: HighlightCard[];
 
   private queryParamsSubscription: Subscription;
   public fund?: Fund;
@@ -184,6 +186,8 @@ export class ExploreComponent implements AfterViewChecked, OnDestroy, OnInit {
     this.queryParamsSubscription = this.scrollToSearchWhenParamsChange();
 
     this.highlightCards = this.route.snapshot.data.highlights;
+    // Call for the main menu update side effect to possibly add `?noredirect`.
+    void this.navigationService.getPotentialRedirectPathAndUpdateSignal(this.highlightCards);
 
     if (!this.fund && this.fundSlug && this.metaCampaign) {
       this.fundService.getOneBySlug(this.fundSlug).subscribe(fund => {

src/app/highlight-cards/HighlightCard.spec.ts

@@ -112,23 +112,6 @@ describe('highlightCard', () => {
     expect(highlightCardForHomepage.button.href.href).toBe('https://example-blog.com/some-path');
   });
 
-  it('should replace CC24 link with metacampaign page', () => {
-    if (new Date() > new Date('2025-02-01')) {
-      pending('Implementation was only made for 2024');
-    }
-
-    const cardFromApi = cardLinkingTo("https://example-blog.com/christmas-challenge/");
-
-    const highlightCardForHomepage = SFAPIHighlightCardToHighlightCard(
-      'https://example-experience.com',
-      'https://example-blog.com',
-      'https://example-donate.com',
-      cardFromApi
-    );
-
-    expect(highlightCardForHomepage.button.href.href).toBe('https://example-donate.com/christmas-challenge-2024');
-  });
-
   it('should replace experience origins with origin for relevant environment', () => {
     const cardFromApi = cardLinkingTo("https://community.biggive.org/some-path");
 

src/app/highlight-cards/HighlightCard.ts

@@ -2,6 +2,7 @@ import {brandColour} from "@biggive/components/dist/types/globals/brand-colour"
 import {environment} from "../../environments/environment";
 
 export type HighlightCard = {
+  campaignFamily?: campaignFamilyName | null, // SF may return null; some Donate code leaves it undefined for now
   background: {
     // colour appears 'behind' the image, only seen if image doesn't load or during loading.
     color?: brandColour;
@@ -30,7 +31,6 @@ export type campaignFamilyName =
   |'emergencyMatch';
 
 export type SfApiHighlightCard = Omit<HighlightCard, 'background'|'icon'|'button'> & {
-  campaignFamily: campaignFamilyName | null
   cardStyle: 'DONATE_NOW' | 'SEE_RESULTS' | 'APPLY_NOW' | 'SAVE_THE_DATE' | 'JOIN_MAILING_LIST' | 'REGISTER_INTEREST' | 'EXPLORE',
   button: {
     text: string,
@@ -65,13 +65,9 @@ export const SFAPIHighlightCardToHighlightCard = (experienceUriPrefix: string, b
 
   let href = replaceURLOrigin(experienceUriPrefix, blogUriPrefix, donateUriPrefix, sfApiHighlightCard.button.href);
 
-  // temp fix for 2024. Will need to think of something better and probably move this logic to SF for next year.
-  if (href.pathname.includes('christmas-challenge') && (new Date() < new Date('2025-02-01')))  {
-    href = new URL(donateUriPrefix + '/christmas-challenge-2024');
-  }
-
   const color = iconColor(sfApiHighlightCard, campaignFamilyColours);
   return {
+    campaignFamily: sfApiHighlightCard.campaignFamily,
     headerText: sfApiHighlightCard.headerText,
     bodyText: sfApiHighlightCard.bodyText,
     icon: {color},

src/app/home/home.component.ts

@@ -7,6 +7,7 @@ import { Response } from "express";
 import {PageMetaService} from '../page-meta.service';
 import {HighlightCard} from "../highlight-cards/HighlightCard";
 import {environment} from "../../environments/environment";
+import {NavigationService} from "../navigation.service";
 
 @Component({
   selector: 'app-home',
@@ -19,8 +20,6 @@ export class HomeComponent implements OnInit {
     totalCountFormatted: string
   };
 
-  private currentTime = new Date();
-
   /**
    * Prevents the user seeing the content if we're about to redirect them to a different page.
    * As suggested at https://stackoverflow.com/a/58962726/2526181
@@ -30,6 +29,7 @@ export class HomeComponent implements OnInit {
   protected highlightCards: HighlightCard[];
 
   public constructor(
+    private navigationService: NavigationService,
     private pageMeta: PageMetaService,
     private route: ActivatedRoute,
     private router: Router,
@@ -48,41 +48,22 @@ export class HomeComponent implements OnInit {
     this.stats = this.route.snapshot.data.stats;
     this.highlightCards = this.route.snapshot.data.highlights;
     const queryParams = this.route.snapshot.queryParams;
-
-    if (environment.environmentId !== 'production') {
-      if (queryParams?.simulatedDate) {
-        const simulatedDate = new Date(queryParams.simulatedDate);
-        if (isNaN(simulatedDate.getTime())) {
-          alert("cant parse simulated date given");
-          throw new Error("Invalid date");
-        }
-        this.currentTime = simulatedDate;
-      }
-    }
-
-    // start the redirect 12 hours in advance of CC open:
-    const startRedirectingToCCAt = new Date('2024-12-03T00:00:00+00:00');
-
-    // end the redirect exactly at the time CC closes.
-    const CCCloseDate = new Date('2024-12-10T12:00:00+00:00');
+    const redirectPath = this.navigationService.getPotentialRedirectPathAndUpdateSignal(this.highlightCards);
 
     if (
       environment.environmentId !== 'regression' &&
       !queryParams.hasOwnProperty('noredirect') &&
-      this.currentTime >= startRedirectingToCCAt &&
-      this.currentTime < CCCloseDate
-      ) {
-        const redirectSlugIncSlash = '/christmas-challenge-2024';
+      redirectPath !== null
+    ) {
         if (isPlatformBrowser(this.platformId)) {
           void this.router.navigate(
-            [redirectSlugIncSlash],
+            [redirectPath],
             {
               replaceUrl: true, // As we are redirecting immediately it would be confusing to leave a page the user hasn't seen in their history.
-
             }
           );
         } else {
-          this.response.redirect(302, redirectSlugIncSlash);
+          this.response.redirect(302, redirectPath);
         }
     } else {
       this.mayBeAboutToRedirect = false;