DON-1065: Replace button on "My Account" with cards

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

Hide file tree

Showing 3 changed files with 46 additions and 31 deletions.
diff --git a/src/app/my-account/my-account.component.html b/src/app/my-account/my-account.component.html
@@ -39,37 +39,10 @@ <h2>Your Details</h2>
 
     <biggive-page-section>
 
-      <div class="account-actions">
-        <biggive-button
-          space-above="5"
-          colour-scheme="white"
-          label="Transfer Donation Funds"
-          full-width="true"
-          size="medium"
-          url="/transfer-funds"
-          />
-
-        <biggive-button
-          space-above="5"
-          colour-scheme="white"
-          label="Your donations"
-          full-width="true"
-          size="medium"
-          url="/my-account/donations"
-        />
-
-        @if(flags.regularGivingEnabled) {
-          <biggive-button
-            space-above="5"
-            colour-scheme="white"
-            label="Your Regular Giving"
-            full-width="true"
-            size="medium"
-            url="/my-account/regular-giving"
-          />
-        }
-      </div>
-
+  <app-highlight-cards
+    [highlightCards]="actions"
+    space-above="5">
+  </app-highlight-cards>
 
     </biggive-page-section>
 

diff --git a/src/app/my-account/my-account.component.ts b/src/app/my-account/my-account.component.ts
@@ -11,6 +11,8 @@ import {MatDialog} from "@angular/material/dialog";
 import {faExclamationTriangle} from "@fortawesome/free-solid-svg-icons";
 import { HttpErrorResponse } from "@angular/common/http";
 import {flags} from "../featureFlags";
+import { HighlightCard } from '../highlight-cards/HighlightCard';
+import {environment} from "../../environments/environment";
 
 @Component({
   selector: 'app-my-account',
@@ -29,6 +31,8 @@ export class MyAccountComponent implements OnDestroy, OnInit {
   private savedCardsTimer: undefined | ReturnType<typeof setTimeout>; // https://stackoverflow.com/a/56239226
   protected readonly flags = flags;
 
+  protected readonly actions: HighlightCard[];
+
   constructor(
     private pageMeta: PageMetaService,
     public dialog: MatDialog,
@@ -38,6 +42,42 @@ export class MyAccountComponent implements OnDestroy, OnInit {
     private router: Router,
   ) {
     this.identityService = identityService;
+
+    this.actions = [
+      {
+        backgroundImageUrl: new URL(environment.donateUriPrefix + '/assets/images/red-coral-texture.png'),
+        iconColor: 'secondary',
+        headerText: 'Transfer Donation Funds',
+        bodyText: '',
+        button: {
+          text: '',
+          href: new URL(environment.donateUriPrefix + '/transfer-funds')
+        }
+      },
+      {
+        backgroundImageUrl: new URL(environment.donateUriPrefix + '/assets/images/red-coral-texture.png'),
+        iconColor: 'secondary',
+        headerText: 'Your donations',
+        bodyText: '',
+        button: {
+          text: '',
+          href: new URL(environment.donateUriPrefix + '/my-account/donations')
+        }
+      },
+    ];
+    if (flags.regularGivingEnabled) {
+      this.actions.push(
+        {
+          backgroundImageUrl: new URL(environment.donateUriPrefix + '/assets/images/red-coral-texture.png'),
+          iconColor: 'secondary',
+          headerText: 'Your Regular Giving',
+          bodyText: '',
+          button: {
+            text: '',
+            href: new URL(environment.donateUriPrefix + '/my-account/regular-giving')
+          }
+      })
+    }
   }
 
   ngOnInit() {

diff --git a/src/app/my-account/my-account.module.ts b/src/app/my-account/my-account.module.ts
@@ -10,6 +10,7 @@ import { ExactCurrencyPipe } from "../exact-currency.pipe";
 import { OptimisedImagePipe } from "../optimised-image.pipe";
 import { MyAccountRoutingModule } from "./my-account-routing.module";
 import { MyAccountComponent } from "./my-account.component";
+import {HighlightCardsComponent} from "../highlight-cards/highlight-cards.component";
 
 @NgModule({
   imports: [
@@ -22,6 +23,7 @@ import { MyAccountComponent } from "./my-account.component";
     MatButtonModule,
     MatDialogModule,
     FontAwesomeModule,
+    HighlightCardsComponent,
   ],
   declarations: [MyAccountComponent],
   providers: [DatePipe],