v7.0.8 - display amount with 2 decimals (#35)

Author: iisa

demo/index.html

@@ -107,7 +107,7 @@
     const plans = {
       "41": {
         "token": "Acbdcdcadsfdasf.1234alphanumeric.3foobarXyZ",
-        "amount": 10,
+        "amount": 10.3,
         "start_date": "2024-05-22 00:00:00",
         "is_test": true,
         "btdata": {
@@ -133,7 +133,7 @@
       },
       "23764": {
         "token": "Acbdcdcadsfdasf.1234alphanumeric.3foobar",
-        "amount": 5,
+        "amount": 2.5,
         "start_date": "2022-12-09 00:00:00",
         "is_test": true,
         "btdata": {
@@ -183,11 +183,30 @@
     const plansArray = Object.keys(plans).map((key) => new MonthlyPlan(plans[key]));
 
     const receiptsData = [
+          new Receipt({
+          currency: 'USD',
+          total_amount: 1,
+          net_amount: 1,
+          fee_amount: 0,
+          fee_covered: false,
+          date: (new Date('2019-01-22 14:26:34')).toLocaleString('US-EN', {
+            year: 'numeric',
+            month: 'short',
+            day: 'numeric',
+          }),
+          donor: 'John Doe',
+          paymentMethod: 'Credit Card',
+          status: 'Completed',
+          id: 'eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJpc3MiOiJtYWlsc3luYyIsImlhdCI6MTczNzk3MTgyNy45MDY1NDksIm5iZiI6MTczNzk3MTc2Ny45MDY1NDksImV4cCI6MTczNzk3MjQyNy45MDY1NDksImtleSI6IjEwOTY4MjEiLCJ1c2VyIjoiQGlzYS1hdC10aGUtYXJjaGl2ZSJ9.pMbayUlFgRhm3wDoJG1IPoltliTHDq0xH2W369JtdQA',
+          token: 'eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJpc3MiOiJtYWlsc3luYyIsImlhdCI6MTczNzk3MTgyNy45MDY1NDksIm5iZiI6MTczNzk3MTc2Ny45MDY1NDksImV4cCI6MTczNzk3MjQyNy45MDY1NDksImtleSI6IjEwOTY4MjEiLCJ1c2VyIjoiQGlzYS1hdC10aGUtYXJjaGl2ZSJ9.pMbayUlFgRhm3wDoJG1IPoltliTHDq0xH2W369JtdQA',
+          is_test: false,
+        }),
         new Receipt({
           currency: 'USD',
           net_amount: 9999.99,
           total_amount: 9999.99,
           fee_amount: 0,
+          fee_covered: false,
           date: (new Date('2019-01-22 14:26:34')).toLocaleString('US-EN', {
             year: 'numeric',
             month: 'short',
@@ -205,6 +224,7 @@
           net_amount: 100,
           total_amount: 105.86,
           fee_amount: 5.86,
+          fee_covered: true,
           date: (new Date('2022-09-22 14:26:34')).toLocaleString('US-EN', {
             year: 'numeric',
             month: 'short',

package-lock.json

@@ -1,6 +1,6 @@
 {
   "name": "@internetarchive/donation-monthly-portal",
-  "version": "7.0.5",
+  "version": "7.0.8",
   "description": "The Internet Archive Monthly Portal",
   "license": "AGPL-3.0-only",
   "main": "dist/index.js",

package.json

@@ -66,7 +66,7 @@ export class MGCEditPlanAmount extends LitElement {
                   this.currentlyEditing = true;
                   this.clearStatusMessaging();
                 }}
-                ><span>USD $${this.plan?.amount}</span>
+                ><span>USD $${this.plan?.amountFormatted}</span>
               </ia-mgc-form-section-info>`
             : nothing}
           ${this.currentlyEditing ? this.editAmountForm : nothing}
@@ -258,7 +258,7 @@ export class MGCEditPlanAmount extends LitElement {
           id="edit-plan-amount"
           @submit=${(e: Event) => this.handleSubmit(e)}
         >
-          <p>Current donation amount: $${this.plan?.amount}</p>
+          <p>Current donation amount: $${this.plan?.amountFormatted}</p>
           <div>
             $
             <input

src/form-sections/amount.ts

@@ -62,6 +62,10 @@ export class MonthlyPlan {
     return this.plan.amount;
   }
 
+  get amountFormatted(): string {
+    return this.plan.amount.toFixed(2);
+  }
+
   setAmount(newAmount: number) {
     this.plan.oldAmount = this.plan.amount;
     this.plan.amount = newAmount;

src/models/plan.ts

@@ -3,12 +3,13 @@ export type AReceipt = {
   net_amount: number;
   total_amount: number;
   fee_amount: number;
-  receive_date?: Date;
+  fee_covered: boolean;
+  receive_date: Date;
   date: string;
   isTest: boolean;
   token: string;
-  id?: string;
 };
+
 export class Receipt {
   receipt: AReceipt;
 
@@ -17,7 +18,7 @@ export class Receipt {
   }
 
   get amountFormatted(): string {
-    const value = this.receipt.total_amount ?? this.receipt.net_amount;
+    const value = this.receipt.total_amount.toFixed(2);
     const currencyType = this.receipt.currency ?? 'CURR not found';
     if (value) {
       return `${currencyType} ${this.currencySymbol}${value}`;
@@ -26,11 +27,7 @@ export class Receipt {
   }
 
   get amount(): string {
-    return (
-      `${this.receipt.total_amount}` ??
-      `${this.receipt.net_amount}` ??
-      "no amount found, can't find total_amount or net_amount"
-    );
+    return this.receipt.total_amount.toFixed(2);
   }
 
   get isTest(): boolean {

src/models/receipt.ts

@@ -35,7 +35,7 @@ export class IauxMgcPlans extends LitElement {
                     <h3>Amount</h3>
                     <p>
                       ${plan.currency}
-                      ${plan.currencySymbol}${plan.amount}/month
+                      ${plan.currencySymbol}${plan.amountFormatted}/month
                     </p>
                     ${plan.isTest
                       ? html`<p class="is-test">(Test payment)</p>`

src/plans.ts

@@ -30,6 +30,8 @@ describe('Receipts: When requesting an email', () => {
               }),
               isTest: false,
               token: 'foo-token-3',
+              fee_covered: true,
+              receive_date: new Date('2023-12-23 14:26:34'),
             }),
           ]}
         ></ia-monthly-giving-circle>`