WIP: Summary view

demo/index.html

@@ -37,14 +37,169 @@
   </header>
   <div class="dev-tools">
     <div id="options">
+      <button id="toggle-receipts">Toggle receipts</button>
+      <button id="clear-updates">Clear updates</button>
+      <button id="toggle-plans">Toggle plans</button>
     </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">
+    let updateNotices = [];
 
+    const plans = [
+        {
+        "41": {
+          "token": "eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJpc3MiOiJtYWlsc3luYyIsImlhdCI6MTcyMzc1MDI3OS41MjgwMjksIm5iZiI6MTcyMzc1MDIxOS41MjgwMjksImV4cCI6MTcyMzc1MDg3OS41MjgwMjksImtleSI6eyJwaWQiOiI1czUzazYiLCJjaWQiOjgwMzUzOCwiYW1vdW50IjoxMCwicGF5bWVudE1ldGhvZFRva2VuIjoiZ3l3ZnA5IiwiY3VzdG9tZXJJZCI6IjY5OTk2NjAyNiJ9LCJ1c2VyIjoiQGlzYS1hdC10aGUtYXJjaGl2ZSJ9.drnp9oK-UVsuzuRAW_MTFjdWjiS630B88P-c0jDzzVw",
+          "amount": 10,
+          "start_date": "2024-05-22 00:00:00",
+          "contribution_status_id": 5,
+          "is_test": true,
+          "btdata": {
+            "billingDayOfMonth": 22,
+            "nextBillingDate": {
+              "date": "2024-08-22 00:00:00.000000",
+              "timezone_type": 3,
+              "timezone": "UTC"
+            },
+            "status": "Active",
+            "paymentMethodType": "Paypal",
+            "last4": null,
+            "cardType": null,
+            "expirationMonth": null,
+            "expirationYear": null,
+            "paypalEmail": "[email protected]"
+          }
+        },
+        "23764": {
+          "token": "eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJpc3MiOiJtYWlsc3luYyIsImlhdCI6MTcyMzc1MDI3OS41Mjg3NzEsIm5iZiI6MTcyMzc1MDIxOS41Mjg3NzEsImV4cCI6MTcyMzc1MDg3OS41Mjg3NzEsImtleSI6eyJwaWQiOiI4NWRyNzIiLCJjaWQiOjgwMzUzOCwiYW1vdW50Ijo1LCJwYXltZW50TWV0aG9kVG9rZW4iOiJjZXBha256ZCIsImN1c3RvbWVySWQiOiIyOTY3MjM2OTUifSwidXNlciI6IkBpc2EtYXQtdGhlLWFyY2hpdmUifQ.csGjSCrk3FV-mm7O1SwoUKCghwTQCRaD8_LJemo4YhQ",
+          "amount": 5,
+          "start_date": "2022-12-09 00:00:00",
+          "contribution_status_id": 5,
+          "is_test": true,
+          "btdata": {
+            "billingDayOfMonth": 9,
+            "nextBillingDate": {
+              "date": "2024-09-09 00:00:00.000000",
+              "timezone_type": 3,
+              "timezone": "UTC"
+            },
+            "status": "Active",
+            "paymentMethodType": "creditCard",
+            "last4": "1111",
+            "cardType": "Visa",
+            "expirationMonth": "12",
+            "expirationYear": "2023"
+          }
+        },
+        "35406": {
+          "token": "eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJpc3MiOiJtYWlsc3luYyIsImlhdCI6MTcyMzc1MDI3OS41MjcyMTYsIm5iZiI6MTcyMzc1MDIxOS41MjcyMTYsImV4cCI6MTcyMzc1MDg3OS41MjcyMTYsImtleSI6eyJwaWQiOiIyN21yNnIiLCJjaWQiOjgwMzUzOCwiYW1vdW50Ijo1LCJwYXltZW50TWV0aG9kVG9rZW4iOiI4dDduenFnIiwiY3VzdG9tZXJJZCI6Ijg1MzkzMjIxMyJ9LCJ1c2VyIjoiQGlzYS1hdC10aGUtYXJjaGl2ZSJ9.Si-IBV0VhSwTL1SDXpn5bfuFP4qp-r9Jkoe4bw4eRyw",
+          "amount": 5,
+          "start_date": "2024-07-01 00:00:00",
+          "contribution_status_id": 5,
+          "is_test": true,
+          "btdata": {
+            "billingDayOfMonth": 22,
+            "nextBillingDate": {
+              "date": "2024-08-22 00:00:00.000000",
+              "timezone_type": 3,
+              "timezone": "UTC"
+            },
+            "status": "Active",
+            "paymentMethodType": "Venmo",
+            "last4": null,
+            "cardType": null,
+            "expirationMonth": null,
+            "expirationYear": null,
+            "venmoUsername": "venmojoe"
+          }
+        }
+      }
+    ]
+
+    const receiptsData = [
+        {
+          amount: 100,
+          date: '2020-01-01',
+          donor: 'John Doe',
+          paymentMethod: 'Credit Card',
+          status: 'Completed'
+        },
+        {
+          amount: 100,
+          date: '2023-02-01',
+          donor: 'John Doe',
+          paymentMethod: 'Credit Card',
+          status: 'Completed',
+          is_test: true,
+        },
+        {
+          amount: 100,
+          date: '2024-03-01',
+          donor: 'John Doe',
+          paymentMethod: 'Credit Card',
+          status: 'Pending',
+          is_test: true,
+        },
+      ];
+
+
+    let showReceipts = true;
+
+    const mgcComponent = document.querySelector('iaux-monthly-giving-circle');
+
+    // load start data
+    mgcComponent.receipts = receiptsData;
+
+    // event handlers
+    mgcComponent.addEventListener('EmailReceiptRequest', async () => {
+      const randomizer = Math.floor(Math.random() + 0.5);
+      const successOrFail = randomizer === 1 ? 'success' : 'fail';
+      const message = successOrFail === 'success' ? 'Email receipt sent' : 'Email receipt failed';
+
+      const update = {
+        message,
+        status: successOrFail,
+      }
+
+      updateNotices = [update, ...updateNotices];
+
+      mgcComponent.updates = updateNotices;
+      await mgcComponent.updateComplete;
+    });
+
+    // options hooks
+    document.getElementById('toggle-receipts').addEventListener('click', async () => {
+      if (showReceipts) {
+        mgcComponent.receipts = [];
+        showReceipts = false;
+        return;
+      }
+      mgcComponent.receipts = receiptsData;
+      await mgcComponent.updateComplete;
+
+      showReceipts = true;
+    });
+    document.getElementById('clear-updates').addEventListener('click', async () => {
+      updateNotices = [];
+      mgcComponent.updates = updateNotices;
+      await mgcComponent.updateComplete;
+    });
+    document.getElementById('toggle-plans').addEventListener('click', async () => {
+      mgcComponent.plans = mgcComponent.plans.length ? [] : plans;
+      await mgcComponent.updateComplete;
+    });
+  </script>
 </body>
 </html>

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@internetarchive/donation-monthly-portal",
-  "version": "1.0.0",
+  "version": "0.0.0-receipts5",
   "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"
   },

src/models/subscription-summary.ts

@@ -0,0 +1,62 @@
+type BtNextBillingDate = {
+  date: string;
+  timezone_type: number;
+  timezone: string;
+};
+
+type BtData = {
+  billingDayOfMonth: number;
+  nextBillingDate: BtNextBillingDate;
+  status: string; // active, inactive
+  paymentMethodType: string; // cc, paypal, venmo, etc
+  last4: string | null;
+  cardType: string | null;
+  expirationMonth: string | null;
+  expirationYear: string | null;
+  paypalEmail?: string;
+  venmoUsername?: string;
+};
+
+type aSummary = {
+  id: string;
+  token: string;
+  amount: number;
+  start_date: string;
+  contribution_status_id: number;
+  is_test: boolean;
+  btdata: BtData;
+  oldAmount?: number;
+  oldDate?: string;
+  oldPaymentMethod?: string;
+  isCancelled?: boolean;
+};
+export default class SubscriptionSummary {
+  summary: aSummary;
+
+  currencyType: string;
+
+  payment: BtData;
+
+  constructor(summary: aSummary) {
+    this.summary = summary;
+    this.payment = summary.btdata;
+    this.currencyType = 'USD'; // not in data
+  }
+
+  get id(): string {
+    // use token as unique id
+    return this.summary.token;
+  }
+
+  get amount(): number {
+    return this.summary.amount;
+  }
+
+  get startDate(): string {
+    return this.summary.start_date;
+  }
+
+  get isTest(): boolean {
+    return this.summary.is_test;
+  }
+}

src/monthly-giving-circle.ts

@@ -1,22 +1,100 @@
 /* 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 './receipts';
+import './plans';
 import './presentational/mgc-title';
+import './presentational/button-style';
+import './presentational/update-queue';
 
 @customElement('iaux-monthly-giving-circle')
 export class MonthlyGivingCircle extends LitElement {
   @property({ type: String }) patronName: string = '';
 
+  @property({ type: Array }) receipts = [];
+
+  @property({ type: Array }) updates = [];
+
+  @property({ type: Array }) plans = [];
+
+  @property({ type: String }) viewToDisplay: 'welcome' | 'receipts' = 'welcome';
+
   protected createRenderRoot() {
     return this;
   }
 
+  get showReceiptsCTA(): TemplateResult {
+    return html`
+      <iaux-button-style class="link">
+        <button
+          @click=${() => {
+            this.viewToDisplay = 'receipts';
+          }}
+        >
+          Show receipts
+        </button>
+      </iaux-button-style>
+    `;
+  }
+
   protected render() {
+    console.log('***', this.viewToDisplay, this.receipts);
+    if (this.viewToDisplay === 'receipts') {
+      return html`
+        <iaux-mgc-title titleStyle="default">
+          <span slot="title">Recent donations</span>
+          <span slot="action">
+            <iaux-button-style class="link">
+              <button
+                @click=${(event: Event) => {
+                  const btn = event.target as HTMLButtonElement;
+                  btn.disabled = true;
+
+                  this.viewToDisplay = 'welcome';
+                  this.updates = [];
+                }}
+              >
+                Back to account settings
+              </button>
+            </iaux-button-style>
+          </span>
+        </iaux-mgc-title>
+        <iaux-update-queue .updates=${this.updates}></iaux-update-queue>
+        <iaux-mgc-receipts
+          .donations=${this.receipts}
+          @EmailReceiptRequest=${(event: CustomEvent) => {
+            this.dispatchEvent(
+              new CustomEvent('EmailReceiptRequest', {
+                detail: { ...event.detail },
+              })
+            );
+          }}
+        ></iaux-mgc-receipts>
+      `;
+    }
+
+    if (this.plans.length) {
+      return html`
+        <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>
+      `;
+    }
+
     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>
     `;
   }