@internetarchive/donation-monthly-portal 1.0.0 → 3.0.0

package/dist/index.d.ts

@@ -1 +1,4 @@
 export { MonthlyGivingCircle } from './src/monthly-giving-circle';
+export type { AnUpdate } from './src/monthly-giving-circle';
+export { Receipt } from './src/models/receipt';
+export { MonthlyPlan } from './src/models/plan';

package/dist/index.js

@@ -1,2 +1,4 @@
 export { MonthlyGivingCircle } from './src/monthly-giving-circle';
+export { Receipt } from './src/models/receipt';
+export { MonthlyPlan } from './src/models/plan';
 //# sourceMappingURL=index.js.map

package/dist/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,mBAAmB,EAAE,MAAM,6BAA6B,CAAC","sourcesContent":["export { MonthlyGivingCircle } from './src/monthly-giving-circle';\n"]}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,mBAAmB,EAAE,MAAM,6BAA6B,CAAC;AAElE,OAAO,EAAE,OAAO,EAAE,MAAM,sBAAsB,CAAC;AAC/C,OAAO,EAAE,WAAW,EAAE,MAAM,mBAAmB,CAAC","sourcesContent":["export { MonthlyGivingCircle } from './src/monthly-giving-circle';\nexport type { AnUpdate } from './src/monthly-giving-circle';\nexport { Receipt } from './src/models/receipt';\nexport { MonthlyPlan } from './src/models/plan';\n"]}

package/dist/src/models/plan.d.ts

@@ -0,0 +1,41 @@
+declare type BtData = {
+    billingDayOfMonth: number;
+    nextBillingDate: {
+        date: string;
+        timezone_type: number;
+        timezone: string;
+    };
+    status: string;
+    paymentMethodType: string;
+    last4: string | null;
+    cardType: string | null;
+    expirationMonth: string | null;
+    expirationYear: string | null;
+    paypalEmail?: string;
+    venmoUsername?: string;
+};
+declare type Plan = {
+    token: string;
+    amount: number;
+    currency: string;
+    start_date: string;
+    is_test: boolean;
+    btdata: BtData;
+    oldAmount?: number;
+    oldDate?: string;
+    oldPaymentMethod?: string;
+    isCancelled?: boolean;
+};
+export declare class MonthlyPlan {
+    plan: Plan;
+    currency: string;
+    payment: BtData;
+    constructor(plan: Plan);
+    get id(): string;
+    get currencySymbol(): string;
+    get amount(): number;
+    get startDate(): string;
+    get nextBillingDate(): string;
+    get isTest(): boolean;
+}
+export {};

package/dist/src/models/plan.js

@@ -0,0 +1,59 @@
+export class MonthlyPlan {
+    constructor(plan) {
+        var _a;
+        this.plan = plan;
+        this.payment = plan.btdata;
+        this.currency = (_a = plan.currency) !== null && _a !== void 0 ? _a : 'USD'; // not in data
+    }
+    get id() {
+        // use token as unique id
+        return this.plan.token;
+    }
+    get currencySymbol() {
+        return this.currency === 'USD' ? '$' : '';
+    }
+    get amount() {
+        return this.plan.amount;
+    }
+    get startDate() {
+        const date = new Date(this.plan.start_date);
+        return date.toLocaleDateString();
+    }
+    get nextBillingDate() {
+        const nextBillingDate = new Date(this.payment.nextBillingDate.date).toLocaleDateString(undefined, {
+            year: 'numeric',
+            month: 'short',
+            day: 'numeric',
+        });
+        return nextBillingDate !== null && nextBillingDate !== void 0 ? nextBillingDate : 'not found';
+    }
+    get isTest() {
+        return this.plan.is_test;
+    }
+}
+/*
+
+{
+  "token": "eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJpc3MiOiJtYWlsc3luYyIsImlhdCI6MTczODYxNTY3NS41ODA4MTcsIm5iZiI6MTczODYxNTYxNS41ODA4MTcsImV4cCI6MTczODYxNjI3NS41ODA4MTcsImtleSI6eyJwaWQiOiJkd2NrN20iLCJjaWQiOjgwMzUzOCwiYW1vdW50Ijo1LCJwYXltZW50TWV0aG9kVG9rZW4iOiJxMXllYndoaiIsImN1c3RvbWVySWQiOiI4NTQ2MTk4MzUifSwidXNlciI6IkBpc2EtYXQtdGhlLWFyY2hpdmUifQ.TYlkU1ZZLHmj2ahrkTV7JGLmpCPN4BcOeDFPiXVj0pM",
+  "amount": 5,
+  "currency": "USD",
+  "start_date": "2022-12-09 00:00:00",
+  "contribution_status_id": 5,
+  "is_test": true,
+  "btdata": {
+    "billingDayOfMonth": 9,
+    "nextBillingDate": {
+      "date": "2025-02-09 00:00:00.000000",
+      "timezone_type": 3,
+      "timezone": "UTC"
+    },
+    "status": "Active",
+    "paymentMethodType": "creditCard",
+    "last4": "1111",
+    "cardType": "Visa",
+    "expirationMonth": "12",
+    "expirationYear": "2023"
+  }
+}
+  */
+//# sourceMappingURL=plan.js.map

package/dist/src/models/plan.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"plan.js","sourceRoot":"","sources":["../../../src/models/plan.ts"],"names":[],"mappings":"AA8BA,MAAM,OAAO,WAAW;IAOtB,YAAY,IAAU;;QACpB,IAAI,CAAC,IAAI,GAAG,IAAI,CAAC;QACjB,IAAI,CAAC,OAAO,GAAG,IAAI,CAAC,MAAM,CAAC;QAC3B,IAAI,CAAC,QAAQ,GAAG,MAAA,IAAI,CAAC,QAAQ,mCAAI,KAAK,CAAC,CAAC,cAAc;IACxD,CAAC;IAED,IAAI,EAAE;QACJ,yBAAyB;QACzB,OAAO,IAAI,CAAC,IAAI,CAAC,KAAK,CAAC;IACzB,CAAC;IAED,IAAI,cAAc;QAChB,OAAO,IAAI,CAAC,QAAQ,KAAK,KAAK,CAAC,CAAC,CAAC,GAAG,CAAC,CAAC,CAAC,EAAE,CAAC;IAC5C,CAAC;IAED,IAAI,MAAM;QACR,OAAO,IAAI,CAAC,IAAI,CAAC,MAAM,CAAC;IAC1B,CAAC;IAED,IAAI,SAAS;QACX,MAAM,IAAI,GAAG,IAAI,IAAI,CAAC,IAAI,CAAC,IAAI,CAAC,UAAU,CAAC,CAAC;QAC5C,OAAO,IAAI,CAAC,kBAAkB,EAAE,CAAC;IACnC,CAAC;IAED,IAAI,eAAe;QACjB,MAAM,eAAe,GAAG,IAAI,IAAI,CAC9B,IAAI,CAAC,OAAO,CAAC,eAAe,CAAC,IAAI,CAClC,CAAC,kBAAkB,CAAC,SAAS,EAAE;YAC9B,IAAI,EAAE,SAAS;YACf,KAAK,EAAE,OAAO;YACd,GAAG,EAAE,SAAS;SACf,CAAC,CAAC;QAEH,OAAO,eAAe,aAAf,eAAe,cAAf,eAAe,GAAI,WAAW,CAAC;IACxC,CAAC;IAED,IAAI,MAAM;QACR,OAAO,IAAI,CAAC,IAAI,CAAC,OAAO,CAAC;IAC3B,CAAC;CACF;AAED;;;;;;;;;;;;;;;;;;;;;;;;IAwBI","sourcesContent":["type BtData = {\n  billingDayOfMonth: number;\n  nextBillingDate: {\n    date: string;\n    timezone_type: number;\n    timezone: string;\n  };\n  status: string; // active, inactive\n  paymentMethodType: string; // cc, paypal, venmo, etc\n  last4: string | null;\n  cardType: string | null;\n  expirationMonth: string | null;\n  expirationYear: string | null;\n  paypalEmail?: string;\n  venmoUsername?: string;\n};\n\ntype Plan = {\n  token: string;\n  amount: number;\n  currency: string;\n  start_date: string; // UTC\n  is_test: boolean;\n  btdata: BtData;\n  oldAmount?: number;\n  oldDate?: string;\n  oldPaymentMethod?: string;\n  isCancelled?: boolean;\n};\n\nexport class MonthlyPlan {\n  plan: Plan;\n\n  currency: string;\n\n  payment: BtData;\n\n  constructor(plan: Plan) {\n    this.plan = plan;\n    this.payment = plan.btdata;\n    this.currency = plan.currency ?? 'USD'; // not in data\n  }\n\n  get id(): string {\n    // use token as unique id\n    return this.plan.token;\n  }\n\n  get currencySymbol(): string {\n    return this.currency === 'USD' ? '$' : '';\n  }\n\n  get amount(): number {\n    return this.plan.amount;\n  }\n\n  get startDate(): string {\n    const date = new Date(this.plan.start_date);\n    return date.toLocaleDateString();\n  }\n\n  get nextBillingDate(): string {\n    const nextBillingDate = new Date(\n      this.payment.nextBillingDate.date\n    ).toLocaleDateString(undefined, {\n      year: 'numeric',\n      month: 'short',\n      day: 'numeric',\n    });\n\n    return nextBillingDate ?? 'not found';\n  }\n\n  get isTest(): boolean {\n    return this.plan.is_test;\n  }\n}\n\n/*\n\n{\n  \"token\": \"eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJpc3MiOiJtYWlsc3luYyIsImlhdCI6MTczODYxNTY3NS41ODA4MTcsIm5iZiI6MTczODYxNTYxNS41ODA4MTcsImV4cCI6MTczODYxNjI3NS41ODA4MTcsImtleSI6eyJwaWQiOiJkd2NrN20iLCJjaWQiOjgwMzUzOCwiYW1vdW50Ijo1LCJwYXltZW50TWV0aG9kVG9rZW4iOiJxMXllYndoaiIsImN1c3RvbWVySWQiOiI4NTQ2MTk4MzUifSwidXNlciI6IkBpc2EtYXQtdGhlLWFyY2hpdmUifQ.TYlkU1ZZLHmj2ahrkTV7JGLmpCPN4BcOeDFPiXVj0pM\",\n  \"amount\": 5,\n  \"currency\": \"USD\",\n  \"start_date\": \"2022-12-09 00:00:00\",\n  \"contribution_status_id\": 5,\n  \"is_test\": true,\n  \"btdata\": {\n    \"billingDayOfMonth\": 9,\n    \"nextBillingDate\": {\n      \"date\": \"2025-02-09 00:00:00.000000\",\n      \"timezone_type\": 3,\n      \"timezone\": \"UTC\"\n    },\n    \"status\": \"Active\",\n    \"paymentMethodType\": \"creditCard\",\n    \"last4\": \"1111\",\n    \"cardType\": \"Visa\",\n    \"expirationMonth\": \"12\",\n    \"expirationYear\": \"2023\"\n  }\n}\n  */\n"]}

package/dist/src/models/receipt.d.ts

@@ -0,0 +1,20 @@
+declare type AReceipt = {
+    currency: string;
+    net_amount: number;
+    total_amount: number;
+    receive_date?: Date;
+    date: string;
+    isTest: boolean;
+    token: string;
+};
+export declare class Receipt {
+    receipt: AReceipt;
+    constructor(receipt: AReceipt);
+    get amountFormatted(): string;
+    get amount(): string;
+    get isTest(): boolean;
+    get id(): string;
+    get date(): string;
+    get currencySymbol(): string;
+}
+export {};

package/dist/src/models/receipt.js

@@ -0,0 +1,37 @@
+export class Receipt {
+    constructor(receipt) {
+        this.receipt = receipt;
+    }
+    get amountFormatted() {
+        var _a, _b;
+        const value = (_a = this.receipt.total_amount) !== null && _a !== void 0 ? _a : this.receipt.net_amount;
+        const currencyType = (_b = this.receipt.currency) !== null && _b !== void 0 ? _b : 'CURR not found';
+        if (value) {
+            return `${currencyType} ${this.currencySymbol}${value}`;
+        }
+        return "no amount found, can't find total_amount or net_amount";
+    }
+    get amount() {
+        var _a, _b;
+        return ((_b = (_a = `${this.receipt.total_amount}`) !== null && _a !== void 0 ? _a : `${this.receipt.net_amount}`) !== null && _b !== void 0 ? _b : "no amount found, can't find total_amount or net_amount");
+    }
+    get isTest() {
+        var _a;
+        return (_a = this.receipt.isTest) !== null && _a !== void 0 ? _a : false;
+    }
+    get id() {
+        var _a;
+        return (_a = this.receipt.token) !== null && _a !== void 0 ? _a : 'no token found';
+    }
+    get date() {
+        var _a;
+        return (_a = this.receipt.date) !== null && _a !== void 0 ? _a : 'no date found';
+    }
+    get currencySymbol() {
+        if (this.receipt.currency === 'USD') {
+            return '$';
+        }
+        return '';
+    }
+}
+//# sourceMappingURL=receipt.js.map

package/dist/src/models/receipt.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"receipt.js","sourceRoot":"","sources":["../../../src/models/receipt.ts"],"names":[],"mappings":"AASA,MAAM,OAAO,OAAO;IAGlB,YAAY,OAAiB;QAC3B,IAAI,CAAC,OAAO,GAAG,OAAO,CAAC;IACzB,CAAC;IAED,IAAI,eAAe;;QACjB,MAAM,KAAK,GAAG,MAAA,IAAI,CAAC,OAAO,CAAC,YAAY,mCAAI,IAAI,CAAC,OAAO,CAAC,UAAU,CAAC;QACnE,MAAM,YAAY,GAAG,MAAA,IAAI,CAAC,OAAO,CAAC,QAAQ,mCAAI,gBAAgB,CAAC;QAC/D,IAAI,KAAK,EAAE;YACT,OAAO,GAAG,YAAY,IAAI,IAAI,CAAC,cAAc,GAAG,KAAK,EAAE,CAAC;SACzD;QACD,OAAO,wDAAwD,CAAC;IAClE,CAAC;IAED,IAAI,MAAM;;QACR,OAAO,CACL,MAAA,MAAA,GAAG,IAAI,CAAC,OAAO,CAAC,YAAY,EAAE,mCAC9B,GAAG,IAAI,CAAC,OAAO,CAAC,UAAU,EAAE,mCAC5B,wDAAwD,CACzD,CAAC;IACJ,CAAC;IAED,IAAI,MAAM;;QACR,OAAO,MAAA,IAAI,CAAC,OAAO,CAAC,MAAM,mCAAI,KAAK,CAAC;IACtC,CAAC;IAED,IAAI,EAAE;;QACJ,OAAO,MAAA,IAAI,CAAC,OAAO,CAAC,KAAK,mCAAI,gBAAgB,CAAC;IAChD,CAAC;IAED,IAAI,IAAI;;QACN,OAAO,MAAA,IAAI,CAAC,OAAO,CAAC,IAAI,mCAAI,eAAe,CAAC;IAC9C,CAAC;IAED,IAAI,cAAc;QAChB,IAAI,IAAI,CAAC,OAAO,CAAC,QAAQ,KAAK,KAAK,EAAE;YACnC,OAAO,GAAG,CAAC;SACZ;QAED,OAAO,EAAE,CAAC;IACZ,CAAC;CACF","sourcesContent":["type AReceipt = {\n  currency: string;\n  net_amount: number;\n  total_amount: number;\n  receive_date?: Date;\n  date: string;\n  isTest: boolean;\n  token: string;\n};\nexport class Receipt {\n  receipt: AReceipt;\n\n  constructor(receipt: AReceipt) {\n    this.receipt = receipt;\n  }\n\n  get amountFormatted(): string {\n    const value = this.receipt.total_amount ?? this.receipt.net_amount;\n    const currencyType = this.receipt.currency ?? 'CURR not found';\n    if (value) {\n      return `${currencyType} ${this.currencySymbol}${value}`;\n    }\n    return \"no amount found, can't find total_amount or net_amount\";\n  }\n\n  get amount(): string {\n    return (\n      `${this.receipt.total_amount}` ??\n      `${this.receipt.net_amount}` ??\n      \"no amount found, can't find total_amount or net_amount\"\n    );\n  }\n\n  get isTest(): boolean {\n    return this.receipt.isTest ?? false;\n  }\n\n  get id(): string {\n    return this.receipt.token ?? 'no token found';\n  }\n\n  get date(): string {\n    return this.receipt.date ?? 'no date found';\n  }\n\n  get currencySymbol(): string {\n    if (this.receipt.currency === 'USD') {\n      return '$';\n    }\n\n    return '';\n  }\n}\n"]}

package/dist/src/monthly-giving-circle.d.ts

@@ -1,8 +1,26 @@
-import { LitElement } from 'lit';
+import { LitElement, TemplateResult, PropertyValues } from 'lit';
 import './welcome-message';
+import './plans';
 import './presentational/mgc-title';
+import './receipts';
+import type { IauxMgcReceipts } from './receipts';
+import './presentational/ia-button';
+export declare type AnUpdate = {
+    message: string;
+    status: 'success' | 'fail';
+    donationId: string;
+};
 export declare class MonthlyGivingCircle extends LitElement {
     patronName: string;
+    receipts: never[];
+    updates: AnUpdate[];
+    plans: never[];
+    viewToDisplay: 'welcome' | 'receipts' | 'plans';
     protected createRenderRoot(): this;
-    protected render(): import("lit").TemplateResult<1>;
+    updated(changed: PropertyValues): void;
+    get receiptListElement(): IauxMgcReceipts;
+    updateReceived(update: AnUpdate): void;
+    get showReceiptsCTA(): TemplateResult;
+    get headerSection(): TemplateResult;
+    protected render(): TemplateResult<1>;
 }

package/dist/src/monthly-giving-circle.js

@@ -1,29 +1,137 @@
 /* eslint-disable no-debugger */
 import { __decorate } from "tslib";
-import { LitElement, html } from 'lit';
+import { LitElement, html, nothing } from 'lit';
 import { customElement, property } from 'lit/decorators.js';
 import './welcome-message';
+import './plans';
 import './presentational/mgc-title';
+import './receipts';
+import './presentational/ia-button';
 let MonthlyGivingCircle = class MonthlyGivingCircle extends LitElement {
     constructor() {
         super(...arguments);
         this.patronName = '';
+        this.receipts = [];
+        this.updates = [];
+        this.plans = [];
+        this.viewToDisplay = 'welcome';
     }
     createRenderRoot() {
         return this;
     }
+    updated(changed) {
+        if (changed.has('plans')) {
+            this.viewToDisplay = this.plans.length ? 'plans' : 'welcome';
+        }
+    }
+    get receiptListElement() {
+        return this.querySelector('ia-mgc-receipts');
+    }
+    updateReceived(update) {
+        this.receiptListElement.emailSent({
+            id: update.donationId,
+            emailStatus: update.status,
+        });
+        this.updates.unshift(update);
+    }
+    get showReceiptsCTA() {
+        return html `
+      <ia-button
+        class="link slim"
+        .clickHandler=${() => {
+            this.viewToDisplay = 'receipts';
+            this.dispatchEvent(new CustomEvent('ShowReceipts'));
+        }}
+      >
+        View recent donation history
+      </ia-button>
+    `;
+    }
+    get headerSection() {
+        if (this.viewToDisplay === 'receipts') {
+            return html `
+        <ia-mgc-title titleStyle="default">
+          <span slot="title">Recent donations</span>
+          <span slot="action">
+            <ia-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
+            </ia-button>
+          </span>
+        </ia-mgc-title>
+      `;
+        }
+        if (this.plans.length) {
+            return html `
+        <ia-mgc-title titleStyle="heart">
+          <span slot="title">Monthly Giving Circle</span>
+          <span slot="action"
+            >${this.receipts.length ? this.showReceiptsCTA : nothing}</span
+          >
+        </ia-mgc-title>
+      `;
+        }
+        return html `
+      <ia-mgc-title titleStyle="heart">
+        <span slot="title">Monthly Giving Circle</span>
+        <span slot="action"
+          >${this.receipts.length ? this.showReceiptsCTA : nothing}</span
+        >
+      </ia-mgc-title>
+    `;
+    }
     render() {
         return html `
-      <iaux-mgc-title titleStyle="heart"></iaux-mgc-title>
-      <iaux-mgc-welcome .patronName=${this.patronName}></iaux-mgc-welcome>
+      ${this.headerSection}
+      ${this.viewToDisplay === 'receipts'
+            ? html `
+            <ia-mgc-receipts
+              .receipts=${this.receipts}
+              @EmailReceiptRequest=${(event) => {
+                console.log('EmailReceiptRequest', event.detail);
+                this.dispatchEvent(new CustomEvent('EmailReceiptRequest', {
+                    detail: { ...event.detail },
+                }));
+            }}
+            ></ia-mgc-receipts>
+          `
+            : nothing}
+      ${this.viewToDisplay === 'plans'
+            ? html ` <ia-mgc-plans .plans=${this.plans}></ia-mgc-plans> `
+            : nothing}
+      ${this.viewToDisplay === 'welcome'
+            ? html `
+            <ia-mgc-welcome .patronName=${this.patronName}></ia-mgc-welcome>
+          `
+            : nothing}
     `;
     }
 };
 __decorate([
     property({ type: String })
 ], MonthlyGivingCircle.prototype, "patronName", void 0);
+__decorate([
+    property({ type: Array })
+], MonthlyGivingCircle.prototype, "receipts", void 0);
+__decorate([
+    property({ type: Array })
+], MonthlyGivingCircle.prototype, "updates", void 0);
+__decorate([
+    property({ type: Array })
+], MonthlyGivingCircle.prototype, "plans", void 0);
+__decorate([
+    property({ type: String, reflect: true })
+], MonthlyGivingCircle.prototype, "viewToDisplay", void 0);
 MonthlyGivingCircle = __decorate([
-    customElement('iaux-monthly-giving-circle')
+    customElement('ia-monthly-giving-circle')
 ], MonthlyGivingCircle);
 export { MonthlyGivingCircle };
 //# sourceMappingURL=monthly-giving-circle.js.map

package/dist/src/monthly-giving-circle.js.map

@@ -1 +1 @@
-{"version":3,"file":"monthly-giving-circle.js","sourceRoot":"","sources":["../../src/monthly-giving-circle.ts"],"names":[],"mappings":"AAAA,gCAAgC;;AAEhC,OAAO,EAAE,UAAU,EAAE,IAAI,EAAE,MAAM,KAAK,CAAC;AACvC,OAAO,EAAE,aAAa,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAC;AAE5D,OAAO,mBAAmB,CAAC;AAC3B,OAAO,4BAA4B,CAAC;AAGpC,IAAa,mBAAmB,GAAhC,MAAa,mBAAoB,SAAQ,UAAU;IAAnD;;QAC8B,eAAU,GAAW,EAAE,CAAC;IAYtD,CAAC;IAVW,gBAAgB;QACxB,OAAO,IAAI,CAAC;IACd,CAAC;IAES,MAAM;QACd,OAAO,IAAI,CAAA;;sCAEuB,IAAI,CAAC,UAAU;KAChD,CAAC;IACJ,CAAC;CACF,CAAA;AAZ6B;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;uDAAyB;AADzC,mBAAmB;IAD/B,aAAa,CAAC,4BAA4B,CAAC;GAC/B,mBAAmB,CAa/B;SAbY,mBAAmB","sourcesContent":["/* eslint-disable no-debugger */\n\nimport { LitElement, html } from 'lit';\nimport { customElement, property } from 'lit/decorators.js';\n\nimport './welcome-message';\nimport './presentational/mgc-title';\n\n@customElement('iaux-monthly-giving-circle')\nexport class MonthlyGivingCircle extends LitElement {\n  @property({ type: String }) patronName: string = '';\n\n  protected createRenderRoot() {\n    return this;\n  }\n\n  protected render() {\n    return html`\n      <iaux-mgc-title titleStyle=\"heart\"></iaux-mgc-title>\n      <iaux-mgc-welcome .patronName=${this.patronName}></iaux-mgc-welcome>\n    `;\n  }\n}\n"]}
+{"version":3,"file":"monthly-giving-circle.js","sourceRoot":"","sources":["../../src/monthly-giving-circle.ts"],"names":[],"mappings":"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","sourcesContent":["/* eslint-disable no-debugger */\n\nimport { LitElement, html, TemplateResult, nothing, PropertyValues } from 'lit';\nimport { customElement, property } from 'lit/decorators.js';\n\nimport './welcome-message';\nimport './plans';\nimport './presentational/mgc-title';\nimport './receipts';\nimport type { IauxMgcReceipts } from './receipts';\nimport './presentational/ia-button';\n\nexport type AnUpdate = {\n  message: string;\n  status: 'success' | 'fail';\n  donationId: string;\n};\n\n@customElement('ia-monthly-giving-circle')\nexport class MonthlyGivingCircle extends LitElement {\n  @property({ type: String }) patronName: string = '';\n\n  @property({ type: Array }) receipts = [];\n\n  @property({ type: Array }) updates: AnUpdate[] = [];\n\n  @property({ type: Array }) plans = [];\n\n  @property({ type: String, reflect: true }) viewToDisplay:\n    | 'welcome'\n    | 'receipts'\n    | 'plans' = 'welcome';\n\n  protected createRenderRoot() {\n    return this;\n  }\n\n  updated(changed: PropertyValues) {\n    if (changed.has('plans')) {\n      this.viewToDisplay = this.plans.length ? 'plans' : 'welcome';\n    }\n  }\n\n  get receiptListElement(): IauxMgcReceipts {\n    return this.querySelector('ia-mgc-receipts') as IauxMgcReceipts;\n  }\n\n  updateReceived(update: AnUpdate) {\n    this.receiptListElement.emailSent({\n      id: update.donationId,\n      emailStatus: update.status,\n    });\n    this.updates.unshift(update);\n  }\n\n  get showReceiptsCTA(): TemplateResult {\n    return html`\n      <ia-button\n        class=\"link slim\"\n        .clickHandler=${() => {\n          this.viewToDisplay = 'receipts';\n          this.dispatchEvent(new CustomEvent('ShowReceipts'));\n        }}\n      >\n        View recent donation history\n      </ia-button>\n    `;\n  }\n\n  get headerSection(): TemplateResult {\n    if (this.viewToDisplay === 'receipts') {\n      return html`\n        <ia-mgc-title titleStyle=\"default\">\n          <span slot=\"title\">Recent donations</span>\n          <span slot=\"action\">\n            <ia-button\n              class=\"link slim\"\n              id=\"close-receipts\"\n              .clickHandler=${async () => {\n                this.viewToDisplay = 'welcome';\n                this.dispatchEvent(new CustomEvent('ShowWelcome'));\n                this.updates = [];\n                await this.updateComplete;\n              }}\n            >\n              Back to account settings\n            </ia-button>\n          </span>\n        </ia-mgc-title>\n      `;\n    }\n\n    if (this.plans.length) {\n      return html`\n        <ia-mgc-title titleStyle=\"heart\">\n          <span slot=\"title\">Monthly Giving Circle</span>\n          <span slot=\"action\"\n            >${this.receipts.length ? this.showReceiptsCTA : nothing}</span\n          >\n        </ia-mgc-title>\n      `;\n    }\n\n    return html`\n      <ia-mgc-title titleStyle=\"heart\">\n        <span slot=\"title\">Monthly Giving Circle</span>\n        <span slot=\"action\"\n          >${this.receipts.length ? this.showReceiptsCTA : nothing}</span\n        >\n      </ia-mgc-title>\n    `;\n  }\n\n  protected render() {\n    return html`\n      ${this.headerSection}\n      ${this.viewToDisplay === 'receipts'\n        ? html`\n            <ia-mgc-receipts\n              .receipts=${this.receipts}\n              @EmailReceiptRequest=${(event: CustomEvent) => {\n                console.log('EmailReceiptRequest', event.detail);\n                this.dispatchEvent(\n                  new CustomEvent('EmailReceiptRequest', {\n                    detail: { ...event.detail },\n                  })\n                );\n              }}\n            ></ia-mgc-receipts>\n          `\n        : nothing}\n      ${this.viewToDisplay === 'plans'\n        ? html` <ia-mgc-plans .plans=${this.plans}></ia-mgc-plans> `\n        : nothing}\n      ${this.viewToDisplay === 'welcome'\n        ? html`\n            <ia-mgc-welcome .patronName=${this.patronName}></ia-mgc-welcome>\n          `\n        : nothing}\n    `;\n  }\n}\n"]}

package/dist/src/plans.d.ts

@@ -0,0 +1,7 @@
+import { LitElement } from 'lit';
+import './presentational/ia-button';
+export declare class IauxMgcPlans extends LitElement {
+    plans: never[];
+    protected render(): import("lit").TemplateResult<1>;
+    static styles: import("lit").CSSResult;
+}

package/dist/src/plans.js

@@ -0,0 +1,171 @@
+import { __decorate } from "tslib";
+import { LitElement, html, css, nothing } from 'lit';
+import { customElement, property } from 'lit/decorators.js';
+import './presentational/ia-button';
+let IauxMgcPlans = class IauxMgcPlans extends LitElement {
+    constructor() {
+        super(...arguments);
+        this.plans = [];
+    }
+    render() {
+        return html `
+      <section class="monthly-giving-circle">
+        <ul>
+          ${this.plans.map((plan) => {
+            var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _t;
+            const methodType = (_b = (_a = plan.payment) === null || _a === void 0 ? void 0 : _a.paymentMethodType) !== null && _b !== void 0 ? _b : 'Method not found';
+            const cardType = (_d = (_c = plan.payment) === null || _c === void 0 ? void 0 : _c.cardType) !== null && _d !== void 0 ? _d : 'Card type not found';
+            const last4 = ((_e = plan.payment) === null || _e === void 0 ? void 0 : _e.last4)
+                ? `...${(_f = plan.payment) === null || _f === void 0 ? void 0 : _f.last4}`
+                : 'CC number not found';
+            return html `
+              <li>
+                <div class="info">
+                  <div class="amount">
+                    <h3>Amount</h3>
+                    <p>
+                      ${plan.currency}
+                      ${plan.currencySymbol}${plan.amount}/month
+                    </p>
+                    ${plan.isTest
+                ? html `<p class="is-test">(Test payment)</p>`
+                : nothing}
+                  </div>
+                  <div class="payment-details">
+                    <h3>Method</h3>
+                    <p>${methodType}</p>
+                    ${((_g = plan.payment) === null || _g === void 0 ? void 0 : _g.cardType) === 'creditCard'
+                ? html `<p>${cardType}</p>
+                          <p>${last4}</p>`
+                : nothing}
+                    ${((_h = plan.payment) === null || _h === void 0 ? void 0 : _h.paymentMethodType) === 'Paypal'
+                ? html `<p>
+                          Paypal email:
+                          <a href=${`mailto:${(_j = plan.payment) === null || _j === void 0 ? void 0 : _j.paypalEmail}`}
+                            >${(_k = plan.payment) === null || _k === void 0 ? void 0 : _k.paypalEmail}</a
+                          >
+                        </p>`
+                : nothing}
+                    ${((_l = plan.payment) === null || _l === void 0 ? void 0 : _l.paymentMethodType) === 'Venmo'
+                ? html `<p>
+                          Venmo username:
+                          <a href=${`mailto:${(_m = plan.payment) === null || _m === void 0 ? void 0 : _m.venmoUsername}`}
+                            >${(_o = plan.payment) === null || _o === void 0 ? void 0 : _o.paypalEmail}</a
+                          >
+                        </p>`
+                : nothing}
+                    ${((_p = plan.payment) === null || _p === void 0 ? void 0 : _p.cardType) !== 'creditCard'
+                ? html `<p>
+                          Expires:
+                          ${(_r = (_q = plan.payment) === null || _q === void 0 ? void 0 : _q.expirationMonth) !== null && _r !== void 0 ? _r : 'month not found'}/${(_t = (_s = plan.payment) === null || _s === void 0 ? void 0 : _s.expirationYear) !== null && _t !== void 0 ? _t : 'year not found'}
+                        </p>`
+                : nothing}
+                  </div>
+                  <div class="next-donation">
+                    <h3>Next Donation</h3>
+                    <p>${plan.nextBillingDate}</p>
+                  </div>
+                </div>
+                <ia-button
+                  class="ia-button link edit-donation"
+                  isdisabled
+                  .clickHandler=${() => console.log(plan)}
+                >
+                  Manage this monthly donation
+                </ia-button>
+              </li>
+            `;
+        })}
+        </ul>
+      </section>
+    `;
+    }
+};
+IauxMgcPlans.styles = css `
+    :host {
+      max-height: 500px;
+      overflow-y: scroll;
+      display: block;
+    }
+
+    .is-test {
+      font-size: 0.8rem;
+    }
+
+    li {
+      border: 1px solid #23765d;
+      background-color: #eeffee;
+      display: block;
+      width: inherit;
+    }
+    table {
+      width: 100%;
+      text-align: left;
+      max-width: 600px;
+    }
+
+    ul {
+      padding: 0;
+      list-style-type: none;
+      margin: 0;
+    }
+
+    ul li {
+      border: 1px solid #23765d;
+      background-color: #eeffee;
+      margin: 0.5rem 0;
+      padding: 0.5rem 0.5rem 1rem 0.5rem;
+      position: relative;
+    }
+
+    ul li button.edit-donation {
+      height: 30px;
+      display: block;
+      position: absolute;
+      bottom: 0;
+    }
+
+    ul li .info {
+      display: grid;
+      min-height: 90px;
+      grid-template-columns: 0.5fr 1fr 0.5fr;
+      grid-template-rows: 1fr;
+      gap: 0px 5px;
+      grid-auto-flow: row;
+      grid-template-areas: 'amount details next-donation';
+    }
+
+    ul li .info .amount {
+      grid-area: amount;
+    }
+
+    ul li .info .payment-details {
+      grid-area: details;
+    }
+
+    ul li .info .next-donation {
+      grid-area: next-donation;
+    }
+
+    ul li .info > * {
+      margin: 0 0 0.5rem 0;
+    }
+
+    ul li .info > * > * {
+      margin: 0;
+    }
+
+    @media screen and (max-width: 500px) {
+      ul li .info {
+        display: block;
+      }
+    }
+  `;
+__decorate([
+    property({ type: Array })
+], IauxMgcPlans.prototype, "plans", void 0);
+IauxMgcPlans = __decorate([
+    customElement('ia-mgc-plans')
+], IauxMgcPlans);
+export { IauxMgcPlans };
+//# sourceMappingURL=plans.js.map

package/dist/src/plans.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"plans.js","sourceRoot":"","sources":["../../src/plans.ts"],"names":[],"mappings":";AAAA,OAAO,EAAE,UAAU,EAAE,IAAI,EAAE,GAAG,EAAE,OAAO,EAAE,MAAM,KAAK,CAAC;AACrD,OAAO,EAAE,aAAa,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAC;AAI5D,OAAO,4BAA4B,CAAC;AAGpC,IAAa,YAAY,GAAzB,MAAa,YAAa,SAAQ,UAAU;IAA5C;;QAC6B,UAAK,GAAG,EAAE,CAAC;IA+JxC,CAAC;IA7JW,MAAM;QACd,OAAO,IAAI,CAAA;;;YAGH,IAAI,CAAC,KAAK,CAAC,GAAG,CAAC,CAAC,IAAiB,EAAE,EAAE;;YACrC,MAAM,UAAU,GACd,MAAA,MAAA,IAAI,CAAC,OAAO,0CAAE,iBAAiB,mCAAI,kBAAkB,CAAC;YACxD,MAAM,QAAQ,GAAG,MAAA,MAAA,IAAI,CAAC,OAAO,0CAAE,QAAQ,mCAAI,qBAAqB,CAAC;YACjE,MAAM,KAAK,GAAG,CAAA,MAAA,IAAI,CAAC,OAAO,0CAAE,KAAK;gBAC/B,CAAC,CAAC,MAAM,MAAA,IAAI,CAAC,OAAO,0CAAE,KAAK,EAAE;gBAC7B,CAAC,CAAC,qBAAqB,CAAC;YAE1B,OAAO,IAAI,CAAA;;;;;;wBAMC,IAAI,CAAC,QAAQ;wBACb,IAAI,CAAC,cAAc,GAAG,IAAI,CAAC,MAAM;;sBAEnC,IAAI,CAAC,MAAM;gBACX,CAAC,CAAC,IAAI,CAAA,uCAAuC;gBAC7C,CAAC,CAAC,OAAO;;;;yBAIN,UAAU;sBACb,CAAA,MAAA,IAAI,CAAC,OAAO,0CAAE,QAAQ,MAAK,YAAY;gBACvC,CAAC,CAAC,IAAI,CAAA,MAAM,QAAQ;+BACX,KAAK,MAAM;gBACpB,CAAC,CAAC,OAAO;sBACT,CAAA,MAAA,IAAI,CAAC,OAAO,0CAAE,iBAAiB,MAAK,QAAQ;gBAC5C,CAAC,CAAC,IAAI,CAAA;;oCAEQ,UAAU,MAAA,IAAI,CAAC,OAAO,0CAAE,WAAW,EAAE;+BAC1C,MAAA,IAAI,CAAC,OAAO,0CAAE,WAAW;;6BAE3B;gBACP,CAAC,CAAC,OAAO;sBACT,CAAA,MAAA,IAAI,CAAC,OAAO,0CAAE,iBAAiB,MAAK,OAAO;gBAC3C,CAAC,CAAC,IAAI,CAAA;;oCAEQ,UAAU,MAAA,IAAI,CAAC,OAAO,0CAAE,aAAa,EAAE;+BAC5C,MAAA,IAAI,CAAC,OAAO,0CAAE,WAAW;;6BAE3B;gBACP,CAAC,CAAC,OAAO;sBACT,CAAA,MAAA,IAAI,CAAC,OAAO,0CAAE,QAAQ,MAAK,YAAY;gBACvC,CAAC,CAAC,IAAI,CAAA;;4BAEA,MAAA,MAAA,IAAI,CAAC,OAAO,0CAAE,eAAe,mCAC/B,iBAAiB,IAAI,MAAA,MAAA,IAAI,CAAC,OAAO,0CAAE,cAAc,mCACjD,gBAAgB;6BACb;gBACP,CAAC,CAAC,OAAO;;;;yBAIN,IAAI,CAAC,eAAe;;;;;;kCAMX,GAAG,EAAE,CAAC,OAAO,CAAC,GAAG,CAAC,IAAI,CAAC;;;;;aAK5C,CAAC;QACJ,CAAC,CAAC;;;KAGP,CAAC;IACJ,CAAC;CAkFF,CAAA;AAhFQ,mBAAM,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA+ElB,CAAC;AA9JyB;IAA1B,QAAQ,CAAC,EAAE,IAAI,EAAE,KAAK,EAAE,CAAC;2CAAY;AAD3B,YAAY;IADxB,aAAa,CAAC,cAAc,CAAC;GACjB,YAAY,CAgKxB;SAhKY,YAAY","sourcesContent":["import { LitElement, html, css, nothing } from 'lit';\nimport { customElement, property } from 'lit/decorators.js';\n\nimport type { MonthlyPlan } from './models/plan';\n\nimport './presentational/ia-button';\n\n@customElement('ia-mgc-plans')\nexport class IauxMgcPlans extends LitElement {\n  @property({ type: Array }) plans = [];\n\n  protected render() {\n    return html`\n      <section class=\"monthly-giving-circle\">\n        <ul>\n          ${this.plans.map((plan: MonthlyPlan) => {\n            const methodType =\n              plan.payment?.paymentMethodType ?? 'Method not found';\n            const cardType = plan.payment?.cardType ?? 'Card type not found';\n            const last4 = plan.payment?.last4\n              ? `...${plan.payment?.last4}`\n              : 'CC number not found';\n\n            return html`\n              <li>\n                <div class=\"info\">\n                  <div class=\"amount\">\n                    <h3>Amount</h3>\n                    <p>\n                      ${plan.currency}\n                      ${plan.currencySymbol}${plan.amount}/month\n                    </p>\n                    ${plan.isTest\n                      ? html`<p class=\"is-test\">(Test payment)</p>`\n                      : nothing}\n                  </div>\n                  <div class=\"payment-details\">\n                    <h3>Method</h3>\n                    <p>${methodType}</p>\n                    ${plan.payment?.cardType === 'creditCard'\n                      ? html`<p>${cardType}</p>\n                          <p>${last4}</p>`\n                      : nothing}\n                    ${plan.payment?.paymentMethodType === 'Paypal'\n                      ? html`<p>\n                          Paypal email:\n                          <a href=${`mailto:${plan.payment?.paypalEmail}`}\n                            >${plan.payment?.paypalEmail}</a\n                          >\n                        </p>`\n                      : nothing}\n                    ${plan.payment?.paymentMethodType === 'Venmo'\n                      ? html`<p>\n                          Venmo username:\n                          <a href=${`mailto:${plan.payment?.venmoUsername}`}\n                            >${plan.payment?.paypalEmail}</a\n                          >\n                        </p>`\n                      : nothing}\n                    ${plan.payment?.cardType !== 'creditCard'\n                      ? html`<p>\n                          Expires:\n                          ${plan.payment?.expirationMonth ??\n                          'month not found'}/${plan.payment?.expirationYear ??\n                          'year not found'}\n                        </p>`\n                      : nothing}\n                  </div>\n                  <div class=\"next-donation\">\n                    <h3>Next Donation</h3>\n                    <p>${plan.nextBillingDate}</p>\n                  </div>\n                </div>\n                <ia-button\n                  class=\"ia-button link edit-donation\"\n                  isdisabled\n                  .clickHandler=${() => console.log(plan)}\n                >\n                  Manage this monthly donation\n                </ia-button>\n              </li>\n            `;\n          })}\n        </ul>\n      </section>\n    `;\n  }\n\n  static styles = css`\n    :host {\n      max-height: 500px;\n      overflow-y: scroll;\n      display: block;\n    }\n\n    .is-test {\n      font-size: 0.8rem;\n    }\n\n    li {\n      border: 1px solid #23765d;\n      background-color: #eeffee;\n      display: block;\n      width: inherit;\n    }\n    table {\n      width: 100%;\n      text-align: left;\n      max-width: 600px;\n    }\n\n    ul {\n      padding: 0;\n      list-style-type: none;\n      margin: 0;\n    }\n\n    ul li {\n      border: 1px solid #23765d;\n      background-color: #eeffee;\n      margin: 0.5rem 0;\n      padding: 0.5rem 0.5rem 1rem 0.5rem;\n      position: relative;\n    }\n\n    ul li button.edit-donation {\n      height: 30px;\n      display: block;\n      position: absolute;\n      bottom: 0;\n    }\n\n    ul li .info {\n      display: grid;\n      min-height: 90px;\n      grid-template-columns: 0.5fr 1fr 0.5fr;\n      grid-template-rows: 1fr;\n      gap: 0px 5px;\n      grid-auto-flow: row;\n      grid-template-areas: 'amount details next-donation';\n    }\n\n    ul li .info .amount {\n      grid-area: amount;\n    }\n\n    ul li .info .payment-details {\n      grid-area: details;\n    }\n\n    ul li .info .next-donation {\n      grid-area: next-donation;\n    }\n\n    ul li .info > * {\n      margin: 0 0 0.5rem 0;\n    }\n\n    ul li .info > * > * {\n      margin: 0;\n    }\n\n    @media screen and (max-width: 500px) {\n      ul li .info {\n        display: block;\n      }\n    }\n  `;\n}\n"]}

package/dist/src/presentational/ia-button.d.ts

@@ -0,0 +1,9 @@
+import { LitElement } from 'lit';
+import '@internetarchive/icon-donate/icon-donate.js';
+export declare class IauxButton extends LitElement {
+    isDisabled: boolean;
+    clickHandler?: (self: IauxButton) => void;
+    button: HTMLButtonElement;
+    render(): import("lit").TemplateResult<1>;
+    static styles: import("lit").CSSResult;
+}