payment card redesign (#6327)

global-121 · Dec 19, 2024 · 2e5b58b · 2e5b58b
1 parent 80f0db8
commit 2e5b58b
Show file tree

Hide file tree

Showing 3 changed files with 46 additions and 19 deletions.
diff --git a/.../pages/project-payments/components/payment-summary-card/payment-summary-card.component.ts b/.../pages/project-payments/components/payment-summary-card/payment-summary-card.component.ts
@@ -1,4 +1,4 @@
-import { DatePipe } from '@angular/common';
+import { CurrencyPipe, DatePipe } from '@angular/common';
 import {
   ChangeDetectionStrategy,
   Component,
@@ -16,6 +16,7 @@ import { CardWithLinkComponent } from '~/components/card-with-link/card-with-lin
 import { ColoredChipComponent } from '~/components/colored-chip/colored-chip.component';
 import { SkeletonInlineComponent } from '~/components/skeleton-inline/skeleton-inline.component';
 import { PaymentApiService } from '~/domains/payment/payment.api.service';
+import { ProjectApiService } from '~/domains/project/project.api.service';
 import { Locale } from '~/utils/locale';
 
 @Component({
@@ -27,13 +28,16 @@ import { Locale } from '~/utils/locale';
     CardWithLinkComponent,
     CardSummaryMetricsContainerComponent,
   ],
+  providers: [CurrencyPipe],
   templateUrl: './payment-summary-card.component.html',
   styles: ``,
   changeDetection: ChangeDetectionStrategy.OnPush,
 })
 export class PaymentSummaryCardComponent {
   private locale = inject<Locale>(LOCALE_ID);
   private paymentApiService = inject(PaymentApiService);
+  private currencyPipe = inject(CurrencyPipe);
+  private projectApiService = inject(ProjectApiService);
 
   projectId = input.required<number>();
   paymentId = input.required<number>();
@@ -52,7 +56,7 @@ export class PaymentSummaryCardComponent {
     return successCount + waitingCount + failedCount;
   });
 
-  totalAmount = computed(() => {
+  expectedAmount = computed(() => {
     const successAmount = this.metrics.data()?.success.amount ?? 0;
     const waitingAmount = this.metrics.data()?.waiting.amount ?? 0;
     const failedAmount = this.metrics.data()?.failed.amount ?? 0;
@@ -64,6 +68,8 @@ export class PaymentSummaryCardComponent {
     () => (this.metrics.data()?.failed.count ?? 0) > 0,
   );
 
+  successAmount = computed(() => this.metrics.data()?.success.amount ?? 0);
+
   paymentInProgress = injectQuery(
     this.paymentApiService.getPaymentStatus(this.projectId),
   );
@@ -76,6 +82,10 @@ export class PaymentSummaryCardComponent {
     paymentId,
   ];
 
+  public project = injectQuery(
+    this.projectApiService.getProject(this.projectId),
+  );
+
   paymentTitle = computed(
     () =>
       $localize`:@@page-title-project-payment:Payment` +
@@ -94,18 +104,28 @@ export class PaymentSummaryCardComponent {
         label: $localize`Included reg.`,
       },
       {
-        value: this.totalAmount(),
-        label: $localize`Total amount`,
-      },
-      {
-        value: this.metrics.data()?.success.count,
-        label: $localize`Successful transfers`,
+        value: this.currencyPipe.transform(
+          this.expectedAmount(),
+          this.project.data()?.currency ?? 'EUR',
+          'symbol-narrow',
+          '1.2-2',
+        ),
+        label: $localize`Expected total amount`,
       },
       {
         value: this.metrics.data()?.failed.count,
         label: $localize`Failed transfers`,
         showAlert: this.showFailedAlert(),
       },
+      {
+        value: this.currencyPipe.transform(
+          this.successAmount(),
+          this.project.data()?.currency ?? 'EUR',
+          'symbol-narrow',
+          '1.2-2',
+        ),
+        label: $localize`Amount successfully sent`,
+      },
     ];
   });
 }
diff --git a/interfaces/Portalicious/src/locale/messages.nl.xlf b/interfaces/Portalicious/src/locale/messages.nl.xlf
@@ -533,10 +533,6 @@
         <source>You&apos;re about to download an Excel file for <x equiv-text="{{ exportSelectedActionData()?.count }}" id="INTERPOLATION"/> selected registrations.</source>
         <target>U staat op het punt een Excel-bestand te downloaden voor <x equiv-text="{{ exportSelectedActionData()?.count }}" id="INTERPOLATION"/> geselecteerde registraties.</target>
       </trans-unit>
-      <trans-unit id="5836528780566781670" datatype="html">
-        <source>Successful transfers</source>
-        <target>Succesvolle transfers</target>
-      </trans-unit>
       <trans-unit id="5847820864343475107" datatype="html">
         <source>There are no payments for this project yet.</source>
         <target>Er zijn nog geen betalingen uitgevoerd in dit project.</target>
@@ -1672,6 +1668,14 @@
         <source>Turkish</source>
         <target state="new">Turkish</target>
       </trans-unit>
+      <trans-unit id="8116905776887232271" datatype="html">
+        <source>Expected total amount</source>
+        <target state="new">Expected total amount</target>
+      </trans-unit>
+      <trans-unit id="4957123542385348986" datatype="html">
+        <source>Amount successfully sent</source>
+        <target state="new">Amount successfully sent</target>
+      </trans-unit>
     </body>
   </file>
-</xliff>
+</xliff>
diff --git a/interfaces/Portalicious/src/locale/messages.xlf b/interfaces/Portalicious/src/locale/messages.xlf
@@ -1,4 +1,4 @@
-<?xml version="1.0" encoding="UTF-8"?>
+<?xml version="1.0" encoding="UTF-8" ?>
 <xliff version="1.2" xmlns="urn:oasis:names:tc:xliff:document:1.2">
   <file source-language="en-GB" datatype="plaintext" original="ng2.template">
     <body>
@@ -896,9 +896,6 @@
       <trans-unit id="5004550577313573215" datatype="html">
         <source>Total amount</source>
       </trans-unit>
-      <trans-unit id="5836528780566781670" datatype="html">
-        <source>Successful transfers</source>
-      </trans-unit>
       <trans-unit id="5847820864343475107" datatype="html">
         <source>There are no payments for this project yet.</source>
       </trans-unit>
@@ -1198,7 +1195,7 @@
       </trans-unit>
       <trans-unit id="5533720489917693962" datatype="html">
         <source>You&apos;re about to download an Excel file with the FSP instructions for this payment.</source>
-        </trans-unit>
+      </trans-unit>
       <trans-unit id="attribute-label-inclusionScore" datatype="html">
         <source>Inclusion Score</source>
       </trans-unit>
@@ -1256,6 +1253,12 @@
       <trans-unit id="8312065814232621608" datatype="html">
         <source>Indonesian</source>
       </trans-unit>
+      <trans-unit id="4957123542385348986" datatype="html">
+        <source>Amount successfully sent</source>
+      </trans-unit>
+      <trans-unit id="8116905776887232271" datatype="html">
+        <source>Expected total amount</source>
+      </trans-unit>
     </body>
   </file>
-</xliff>
+</xliff>