receipts view (#15)

demo/index.html

@@ -37,14 +37,132 @@
   </header>
   <div class="dev-tools">
     <div id="options">
+      <button id="toggle-receipts">Toggle receipts</button>
+      <button id="toggle-buttons">Toggle button types</button>
+
+      <p id="interaction-status-area" style="min-height: 50px;margin: 10px;"></p>
     </div>
   </div>
 
   <div id="demo">
+    <style>
+      iaux-monthly-giving-circle {
+        display: block;
+        margin: 0 auto;
+        max-width: 800px;
+      }
+    </style>
     <iaux-monthly-giving-circle></iaux-monthly-giving-circle>
   </div>
 
   <script type="module" src="../dist/src/monthly-giving-circle.js"></script>
+  <script type="module">
+    import { Receipt } from '../dist/src/models/receipt.js';
+
+    let updateNotices = [];
+
+    const receiptsData = [
+        new Receipt({
+
+          net_amount: 9999.99,
+          total_amount: 9999.99,
+          fee_amount: 0,
+          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: 100,
+          total_amount: 105.86,
+          fee_amount: 5.86,
+          date: (new Date('2022-09-22 14:26:34')).toLocaleString('US-EN', {
+            year: 'numeric',
+            month: 'short',
+            day: 'numeric',
+          }),
+          donor: 'John Doe',
+          paymentMethod: 'Credit Card',
+          status: 'Completed',
+          id: 'foo-id-2',
+          token: 'foo-token-2',
+          is_test: true,
+        }),
+        new Receipt({
+          currency: 'USD',
+          net_amount: 100,
+          total_amount: 222.88,
+          fee_amount: 122.88,
+          date: (new Date('2023-12-23 14:26:34')).toLocaleString('US-EN', {
+            year: 'numeric',
+            month: 'short',
+            day: 'numeric',
+          }),
+          donor: 'John Doe',
+          paymentMethod: 'Credit Card',
+          status: 'Completed',
+          id: 'foo-id-3',
+          token: 'foo-token-3',
+          is_test: false,
+        }),
+      ];
+
+
+    let showReceipts = true;
+
+    const mgcComponent = document.querySelector('iaux-monthly-giving-circle');
+
+    // load start data
+    mgcComponent.receipts = receiptsData;
+
+    // event handlers
+    mgcComponent.addEventListener('EmailReceiptRequest', (e) => {
+      const uxMessageInfoArea = document.getElementById('interaction-status-area');
+
+      const { donation } = e.detail;
+      const randomizer = Math.floor(Math.random() + 0.5);
+      const successOrFail = randomizer === 1 ? 'success' : 'fail';
+      const returnTiming = randomizer === 1 ? 3000 : 8000;
+
+      uxMessageInfoArea.innerText = `Email receipt request for donation ${donation.id} will return ${successOrFail} in ${returnTiming} ms.`;
+
+      const message = successOrFail === 'success' ? 'Email receipt sent' : 'Email receipt failed';
+
+      const update = {
+        message,
+        status: successOrFail,
+        donationId: donation.id
+      };
+
+      updateNotices = [update, ...updateNotices];
+
+      setTimeout(() => {
+        mgcComponent.updateReceived(update);
+        console.log('EmailReceiptRequest index.html ----', update);
+        uxMessageInfoArea.innerText = '';
+      }, returnTiming);
+    });
+
+    // options hooks
+    document.getElementById('toggle-receipts').addEventListener('click', async () => {
+      if (showReceipts) {
+        mgcComponent.receipts = [];
+        showReceipts = false;
+        return;
+      }
+      mgcComponent.receipts = receiptsData;
+      await mgcComponent.updateComplete;
 
+      showReceipts = true;
+    });
+  </script>
 </body>
 </html>

index.ts

@@ -1 +1,3 @@
 export { MonthlyGivingCircle } from './src/monthly-giving-circle';
+export type { anUpdate } from './src/monthly-giving-circle';
+export { Receipt } from './src/models/receipt';

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@internetarchive/donation-monthly-portal",
-  "version": "1.0.0",
+  "version": "0.0.0-receipts10",
   "description": "The Internet Archive Monthly Portal",
   "license": "AGPL-3.0-only",
   "main": "dist/index.js",
@@ -27,6 +27,7 @@
     "ghpages:generate": "gh-pages -t -d ghpages -m \"Build for $(git log --pretty=format:\"%h %an %ai %s\" -n1) [skip ci]\""
   },
   "dependencies": {
+    "@internetarchive/iaux-notification-toast": "^0.0.0-alpha2",
     "@internetarchive/icon-donate": "^1.3.4",
     "lit": "^2.8.0"
   },
@@ -52,7 +53,7 @@
     "madge": "^6.0.0",
     "prettier": "^2.7.1",
     "rimraf": "^5.0.0",
-    "sinon": "^17.0.0",
+    "sinon": "^17.0.1",
     "ts-lit-plugin": "^2.0.0",
     "tslib": "^2.7.0",
     "typescript": "^4.7.4",

src/models/receipt.ts

@@ -0,0 +1,53 @@
+type AReceipt = {
+  currency: string;
+  net_amount: number;
+  total_amount: number;
+  receive_date?: Date;
+  date: string;
+  isTest: boolean;
+  token: string;
+};
+export class Receipt {
+  receipt: AReceipt;
+
+  constructor(receipt: AReceipt) {
+    this.receipt = receipt;
+  }
+
+  get amountFormatted(): string {
+    const value = this.receipt.total_amount ?? this.receipt.net_amount;
+    const currencyType = this.receipt.currency ?? 'CURR not found';
+    if (value) {
+      return `${currencyType} ${this.currencySymbol}${value}`;
+    }
+    return "no amount found, can't find total_amount or net_amount";
+  }
+
+  get amount(): string {
+    return (
+      `${this.receipt.total_amount}` ??
+      `${this.receipt.net_amount}` ??
+      "no amount found, can't find total_amount or net_amount"
+    );
+  }
+
+  get isTest(): boolean {
+    return this.receipt.isTest ?? false;
+  }
+
+  get id(): string {
+    return this.receipt.token ?? 'no token found';
+  }
+
+  get date(): string {
+    return this.receipt.date ?? 'no date found';
+  }
+
+  get currencySymbol(): string {
+    if (this.receipt.currency === 'USD') {
+      return '$';
+    }
+
+    return '';
+  }
+}

src/monthly-giving-circle.ts

@@ -1,22 +1,104 @@
 /* eslint-disable no-debugger */
 
-import { LitElement, html } from 'lit';
+import { LitElement, html, TemplateResult, nothing } from 'lit';
 import { customElement, property } from 'lit/decorators.js';
 
 import './welcome-message';
 import './presentational/mgc-title';
+import './receipts';
+import type { IauxMgcReceipts } from './receipts';
+import './presentational/iaux-button';
+
+export type anUpdate = {
+  message: string;
+  status: 'success' | 'fail';
+  donationId: string;
+};
 
 @customElement('iaux-monthly-giving-circle')
 export class MonthlyGivingCircle extends LitElement {
   @property({ type: String }) patronName: string = '';
 
+  @property({ type: Array }) receipts = [];
+
+  @property({ type: Array }) updates: anUpdate[] = [];
+
+  @property({ type: String, reflect: true }) viewToDisplay:
+    | 'welcome'
+    | 'receipts' = 'welcome';
+
   protected createRenderRoot() {
     return this;
   }
 
+  get receiptListElement(): IauxMgcReceipts {
+    return this.querySelector('iaux-mgc-receipts') as IauxMgcReceipts;
+  }
+
+  updateReceived(update: anUpdate) {
+    this.receiptListElement.emailSent({
+      id: update.donationId,
+      emailStatus: update.status,
+    });
+    this.updates.unshift(update);
+  }
+
+  get showReceiptsCTA(): TemplateResult {
+    return html`
+      <iaux-button
+        class="link"
+        style="--button-padding: 0;"
+        .clickHandler=${() => {
+          this.viewToDisplay = 'receipts';
+          this.dispatchEvent(new CustomEvent('ShowReceipts'));
+        }}
+      >
+        View recent donation history
+      </iaux-button>
+    `;
+  }
+
   protected render() {
+    if (this.viewToDisplay === 'receipts') {
+      return html`
+        <iaux-mgc-title titleStyle="default">
+          <span slot="title">Recent donations</span>
+          <span slot="action">
+            <iaux-button
+              class="link slim"
+              id="close-receipts"
+              .clickHandler=${async () => {
+                this.viewToDisplay = 'welcome';
+                this.dispatchEvent(new CustomEvent('ShowWelcome'));
+                this.updates = [];
+                await this.updateComplete;
+              }}
+            >
+              Back to account settings
+            </iaux-button>
+          </span>
+        </iaux-mgc-title>
+        <iaux-mgc-receipts
+          .receipts=${this.receipts}
+          @EmailReceiptRequest=${(event: CustomEvent) => {
+            console.log('EmailReceiptRequest', event.detail);
+            this.dispatchEvent(
+              new CustomEvent('EmailReceiptRequest', {
+                detail: { ...event.detail },
+              })
+            );
+          }}
+        ></iaux-mgc-receipts>
+      `;
+    }
+
     return html`
-      <iaux-mgc-title titleStyle="heart"></iaux-mgc-title>
+      <iaux-mgc-title titleStyle="heart">
+        <span slot="title">Monthly Giving Circle</span>
+        <span slot="action"
+          >${this.receipts.length ? this.showReceiptsCTA : nothing}</span
+        >
+      </iaux-mgc-title>
       <iaux-mgc-welcome .patronName=${this.patronName}></iaux-mgc-welcome>
     `;
   }