WIP: Summary view

demo/index.html

@@ -39,6 +39,7 @@
     <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>
 
@@ -57,6 +58,76 @@
   <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,
@@ -125,6 +196,10 @@
       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

@@ -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

@@ -4,8 +4,9 @@
 import { customElement, property } from 'lit/decorators.js';
 
 import './welcome-message';
-import './presentational/mgc-title';
 import './receipts';
+import './plans';
+import './presentational/mgc-title';
 import './presentational/button-style';
 import './presentational/update-queue';
 
@@ -17,6 +18,8 @@
 
   @property({ type: Array }) updates = [];
 
+  @property({ type: Array }) plans = [];
+
   @property({ type: String }) viewToDisplay: 'welcome' | 'receipts' = 'welcome';
 
   protected createRenderRoot() {
@@ -38,7 +41,7 @@
   }
 
   protected render() {
     console.log('***', this.viewToDisplay, this.receipts);
     if (this.viewToDisplay === 'receipts') {
       return html`
         <iaux-mgc-title titleStyle="default">
@@ -63,7 +66,6 @@
         <iaux-mgc-receipts
           .donations=${this.receipts}
           @EmailReceiptRequest=${(event: CustomEvent) => {
-            console.log('EmailReceiptRequest', event.detail);
             this.dispatchEvent(
               new CustomEvent('EmailReceiptRequest', {
                 detail: { ...event.detail },
@@ -74,6 +76,18 @@
       `;
     }
 
+    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">
         <span slot="title">Monthly Giving Circle</span>

src/plans.ts

@@ -0,0 +1,129 @@
+import { LitElement, html, css, nothing } from 'lit';
+import { customElement, property } from 'lit/decorators.js';
+
+import './presentational/button-style';
+import type SubscriptionSummary from './models/subscription-summary';
+
+// type donation = {
+//   status: string;
+//   amount: number;
+//   date: string;
+//   id: string;
+// };
+
+@customElement('iaux-mgc-plans')
+export class MGCPlans extends LitElement {
+  @property({ type: Array }) plans = [];
+
+  donationAmountFormatted(amount: number) {
+    return `USD ${amount}`;
+  }
+
+  dateFormatted(date: string) {
+    const splitDate = date.split('-');
+    const year = splitDate[0];
+    const month = parseInt(splitDate[1], 10);
+    const day = splitDate[2];
+
+    const monthMap: { [key: number]: string } = {
+      1: 'January',
+      2: 'February',
+      3: 'March',
+      4: 'April',
+      5: 'May',
+      6: 'June',
+      7: 'July',
+      8: 'August',
+      9: 'September',
+      10: 'October',
+      11: 'November',
+      12: 'December',
+    };
+
+    const displayMonth = monthMap[month];
+    return `${displayMonth} ${day}, ${year}`;
+  }
+
+  protected render() {
+    return html`
+      <section class="monthly-giving-circle">
+        <ul>
+          ${this.plans.map((plan: SubscriptionSummary) => {
+            const methodType =
+              plan.payment.paymentMethodType ?? 'Method not found';
+            const cardType = plan.payment.cardType ?? 'Card type not found';
+            const last4 = plan.payment.last4
+              ? `...${plan.payment.last4}`
+              : 'CC number not found';
+            const nextBillingDate = plan.payment.nextBillingDate ?? '';
+            console.log(' ******** ');
+            console.log('plan: ', plan);
+            return html`
+              <li>
+                <div class="info">
+                  <div class="amount">
+                    <h3>Amount</h3>
+                    <p>${plan.currencyType} ${plan.amount}/month</p>
+                    ${plan.isTest ? html`<p>(Test payment)</p>` : nothing}
+                  </div>
+                  <div class="payment-details">
+                    <h3>Method</h3>
+                    <p>${methodType}</p>
+                    ${plan.payment.cardType === 'creditCard'
+                      ? html`<p>${cardType}</p>
+                          <p>${last4}</p>`
+                      : nothing}
+                    ${plan.payment.paymentMethodType === 'Paypal'
+                      ? html`<p>
+                          Paypal email:
+                          <a href=${`mailto:${plan.payment.paypalEmail}`}
+                            >${plan.payment.paypalEmail}</a
+                          >
+                        </p>`
+                      : nothing}
+                    ${plan.payment.paymentMethodType === 'Venmo'
+                      ? html`<p>
+                          Venmo username:
+                          <a href=${`mailto:${plan.payment.venmoUsername}`}
+                            >${plan.payment.paypalEmail}</a
+                          >
+                        </p>`
+                      : nothing}
+                    <p>
+                      Expires:
+                      ${plan.payment.expirationMonth ??
+                      'month not found'}/${plan.payment.expirationYear ??
+                      'year not found'}
+                    </p>
+                  </div>
+                  <div class="next-donation">
+                    <h3>Next Donation</h3>
+                    <p>
+                      ${nextBillingDate
+                        ? html`${nextBillingDate}`
+                        : 'not found'}
+                    </p>
+                  </div>
+                </div>
+                <button
+                  class="ia-button link edit-donation"
+                  @click=${() => console.log(plan)}
+                >
+                  Manage this monthly donation
+                </button>
+              </li>
+            `;
+          })}
+        </ul>
+      </section>
+    `;
+  }
+
+  static styles = css`
+    table {
+      width: 100%;
+      text-align: left;
+      max-width: 600px;
+    }
+  `;
+}