DON-1065: Remove icons from my account page cards and add copy

thebiggive · Dec 18, 2024 · bd90164 · bd90164
1 parent 8c9adc0
commit bd90164
Show file tree

Hide file tree

Showing 4 changed files with 41 additions and 28 deletions.
diff --git a/src/app/highlight-cards/HighlightCard.spec.ts b/src/app/highlight-cards/HighlightCard.spec.ts
@@ -24,8 +24,8 @@ describe('highlightCard', () => {
       cardFromApi
     );
 
-    expect(highlightCardForHomepage.backgroundImageUrl.href).toBe('https://example.com/assets/images/wmg-purple-texture.jpg');
-    expect(highlightCardForHomepage.iconColor).toBe('brand-wgmf-purple');
+    expect(highlightCardForHomepage.background.image.href).toBe('https://example.com/assets/images/wmg-purple-texture.jpg');
+    expect(highlightCardForHomepage.icon?.color).toBe('brand-wgmf-purple');
   });
 
   it('should use appropriate colour for emergency campaign', () => {
@@ -47,8 +47,8 @@ describe('highlightCard', () => {
     );
 
     // todo - check what background we had for EMF cards in the past.
-    expect(highlightCardForHomepage.backgroundImageUrl.href).toBe('https://example.com/assets/images/emergency-card.webp');
-    expect(highlightCardForHomepage.iconColor).toBe('brand-emf-yellow');
+    expect(highlightCardForHomepage.background.image.href).toBe('https://example.com/assets/images/emergency-card.webp');
+    expect(highlightCardForHomepage.icon?.color).toBe('brand-emf-yellow');
   });
 
   it('should use blue primary colour by default', () => {
@@ -69,8 +69,8 @@ describe('highlightCard', () => {
       cardFromApi
     );
 
-    expect(highlightCardForHomepage.backgroundImageUrl.href).toBe('https://example.com/assets/images/blue-texture.jpg');
-    expect(highlightCardForHomepage.iconColor).toBe('primary');
+    expect(highlightCardForHomepage.background.image.href).toBe('https://example.com/assets/images/blue-texture.jpg');
+    expect(highlightCardForHomepage.icon?.color).toBe('primary');
   });
 
   function cardLinkingTo(href: string): SfApiHighlightCard {
@@ -160,8 +160,8 @@ describe('highlightCard', () => {
       cardFromApi
     );
 
-    expect(highlightCardForHomepage.backgroundImageUrl.href).toBe('https://example.com/assets/images/join-mailing-list.webp');
-    expect(highlightCardForHomepage.iconColor).toBe('primary');
+    expect(highlightCardForHomepage.background.image.href).toBe('https://example.com/assets/images/join-mailing-list.webp');
+    expect(highlightCardForHomepage.icon?.color).toBe('primary');
     });
 });
 

diff --git a/src/app/highlight-cards/HighlightCard.ts b/src/app/highlight-cards/HighlightCard.ts
@@ -2,12 +2,16 @@ import {brandColour} from "@biggive/components/dist/types/globals/brand-colour"
 import {environment} from "../../environments/environment";
 
 export type HighlightCard = {
-  backgroundImageUrl: URL,
+  background: {
+    // colour appears 'behind' the image, only seen if image doesn't load or during loading.
+    color?: brandColour;
+    image: URL
+  },
   // There is ambiguity in the components library about whether brand-6 is grey or turquoise. Best to avoid using brand-6 and
   // use brand-mhf-turquoise instead.
   // See https://github.com/thebiggive/donate-frontend/pull/1076#issuecomment-1523472452
   // For other colour details see https://github.com/thebiggive/components/blob/develop/src/globals/brand-colour.ts
-  iconColor: brandColour,
+  icon?: {color: brandColour},
   headerText: string,
   bodyText: string,
   button: {
@@ -25,7 +29,7 @@ export type campaignFamilyName =
   |'artsforImpact'
   |'emergencyMatch';
 
-export type SfApiHighlightCard = Omit<HighlightCard, 'backgroundImageUrl'|'iconColor'|'button'> & {
+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: {
@@ -66,11 +70,12 @@ export const SFAPIHighlightCardToHighlightCard = (experienceUriPrefix: string, b
     href = new URL(donateUriPrefix + '/christmas-challenge-2024');
   }
 
+  const color = iconColor(sfApiHighlightCard, campaignFamilyColours);
   return {
     headerText: sfApiHighlightCard.headerText,
     bodyText: sfApiHighlightCard.bodyText,
-    iconColor: iconColor(sfApiHighlightCard, campaignFamilyColours),
-    backgroundImageUrl,
+    icon: {color},
+    background: {image: backgroundImageUrl, color },
     button: {
       text: sfApiHighlightCard.button.text,
       href: href,

diff --git a/src/app/highlight-cards/highlight-cards.component.html b/src/app/highlight-cards/highlight-cards.component.html
@@ -8,9 +8,10 @@
       [headingLevel]="2"
       [buttonColourScheme]="'clear-primary'"
       [class]="'basic-card-padding'"
-      [iconColour]="highlightCards[0]!.iconColor"
-      [backgroundColour]="highlightCards[0]!.iconColor"
-      [backgroundImageUrl]="highlightCards[0]!.backgroundImageUrl.toString()"
+      [iconColour]="highlightCards[0]!.icon?.color"
+      [icon]="!! highlightCards[0]!.icon"
+      [backgroundColour]="highlightCards[0]!.icon?.color"
+      [backgroundImageUrl]="highlightCards[0]!.background.image.toString()"
       [mainTitle]="highlightCards[0]!.headerText"
       [subtitle]="highlightCards[0]!.bodyText"
       [buttonLabel]="highlightCards[0]!.button.text"
@@ -25,9 +26,10 @@
         [headingLevel]="2"
         [buttonColourScheme]="'clear-primary'"
         [class]="'basic-card-padding'"
-        [iconColour]="card.iconColor"
-        [backgroundColour]="card.iconColor"
-        [backgroundImageUrl]="card.backgroundImageUrl.toString()"
+        [iconColour]="card.icon?.color"
+        [icon]="!! card.icon"
+        [backgroundColour]="card.background.color"
+        [backgroundImageUrl]="card.background.image.toString()"
         [mainTitle]="card.headerText"
         [subtitle]="card.bodyText"
         [buttonLabel]="card.button.text"

diff --git a/src/app/my-account/my-account.component.ts b/src/app/my-account/my-account.component.ts
@@ -45,20 +45,24 @@ export class MyAccountComponent implements OnDestroy, OnInit {
 
     this.actions = [
       {
-        backgroundImageUrl: new URL(environment.donateUriPrefix + '/assets/images/red-coral-texture.png'),
-        iconColor: 'secondary',
+        background: {
+          color: 'brand-mhf-turquoise',
+          image: new URL(environment.donateUriPrefix + '/assets/images/turquoise-texture.jpg')
+        },
         headerText: 'Transfer Donation Funds',
-        bodyText: '',
+        bodyText: 'Use a bank transfer to make donations to charities on our platform.',
         button: {
           text: '',
           href: new URL(environment.donateUriPrefix + '/transfer-funds')
         }
       },
       {
-        backgroundImageUrl: new URL(environment.donateUriPrefix + '/assets/images/red-coral-texture.png'),
-        iconColor: 'secondary',
+        background: {
+          color: 'brand-c4c-orange',
+          image: new URL(environment.donateUriPrefix + '/assets/images/red-coral-texture.png')
+        },
         headerText: 'Your donations',
-        bodyText: '',
+        bodyText: 'View all the donations you\'ve made while logged in',
         button: {
           text: '',
           href: new URL(environment.donateUriPrefix + '/my-account/donations')
@@ -68,10 +72,12 @@ export class MyAccountComponent implements OnDestroy, OnInit {
     if (flags.regularGivingEnabled) {
       this.actions.push(
         {
-          backgroundImageUrl: new URL(environment.donateUriPrefix + '/assets/images/red-coral-texture.png'),
-          iconColor: 'secondary',
+          background: {
+            color: 'brand-afa-pink',
+            image: new URL(environment.donateUriPrefix + '/assets/images/peach-texture.jpg')
+          },
           headerText: 'Your Regular Giving',
-          bodyText: '',
+          bodyText: 'View and manage your regular giving mandates',
           button: {
             text: '',
             href: new URL(environment.donateUriPrefix + '/my-account/regular-giving')