@internetarchive/donation-monthly-portal 1.0.0 → 2.0.0

package/dist/index.d.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/dist/index.js

@@ -1,2 +1,3 @@
 export { MonthlyGivingCircle } from './src/monthly-giving-circle';
+export { Receipt } from './src/models/receipt';
 //# 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","sourcesContent":["export { MonthlyGivingCircle } from './src/monthly-giving-circle';\nexport type { anUpdate } from './src/monthly-giving-circle';\nexport { Receipt } from './src/models/receipt';\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,22 @@
-import { LitElement } from 'lit';
+import { LitElement, TemplateResult } from 'lit';
 import './welcome-message';
 import './presentational/mgc-title';
+import './receipts';
+import type { IauxMgcReceipts } from './receipts';
+import './presentational/iaux-button';
+export declare type anUpdate = {
+    message: string;
+    status: 'success' | 'fail';
+    donationId: string;
+};
 export declare class MonthlyGivingCircle extends LitElement {
     patronName: string;
+    receipts: never[];
+    updates: anUpdate[];
+    viewToDisplay: 'welcome' | 'receipts';
     protected createRenderRoot(): this;
-    protected render(): import("lit").TemplateResult<1>;
+    get receiptListElement(): IauxMgcReceipts;
+    updateReceived(update: anUpdate): void;
+    get showReceiptsCTA(): TemplateResult;
+    protected render(): TemplateResult<1>;
 }

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

@@ -1,20 +1,84 @@
 /* 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 './presentational/mgc-title';
+import './receipts';
+import './presentational/iaux-button';
 let MonthlyGivingCircle = class MonthlyGivingCircle extends LitElement {
     constructor() {
         super(...arguments);
         this.patronName = '';
+        this.receipts = [];
+        this.updates = [];
+        this.viewToDisplay = 'welcome';
     }
     createRenderRoot() {
         return this;
     }
+    get receiptListElement() {
+        return this.querySelector('iaux-mgc-receipts');
+    }
+    updateReceived(update) {
+        this.receiptListElement.emailSent({
+            id: update.donationId,
+            emailStatus: update.status,
+        });
+        this.updates.unshift(update);
+    }
+    get showReceiptsCTA() {
+        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>
+    `;
+    }
     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) => {
+                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>
     `;
     }
@@ -22,6 +86,15 @@ let MonthlyGivingCircle = class MonthlyGivingCircle extends LitElement {
 __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: String, reflect: true })
+], MonthlyGivingCircle.prototype, "viewToDisplay", void 0);
 MonthlyGivingCircle = __decorate([
     customElement('iaux-monthly-giving-circle')
 ], MonthlyGivingCircle);

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":"AAAA,gCAAgC;;AAEhC,OAAO,EAAE,UAAU,EAAE,IAAI,EAAkB,OAAO,EAAE,MAAM,KAAK,CAAC;AAChE,OAAO,EAAE,aAAa,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAC;AAE5D,OAAO,mBAAmB,CAAC;AAC3B,OAAO,4BAA4B,CAAC;AACpC,OAAO,YAAY,CAAC;AAEpB,OAAO,8BAA8B,CAAC;AAStC,IAAa,mBAAmB,GAAhC,MAAa,mBAAoB,SAAQ,UAAU;IAAnD;;QAC8B,eAAU,GAAW,EAAE,CAAC;QAEzB,aAAQ,GAAG,EAAE,CAAC;QAEd,YAAO,GAAe,EAAE,CAAC;QAET,kBAAa,GAEvC,SAAS,CAAC;IA6E7B,CAAC;IA3EW,gBAAgB;QACxB,OAAO,IAAI,CAAC;IACd,CAAC;IAED,IAAI,kBAAkB;QACpB,OAAO,IAAI,CAAC,aAAa,CAAC,mBAAmB,CAAoB,CAAC;IACpE,CAAC;IAED,cAAc,CAAC,MAAgB;QAC7B,IAAI,CAAC,kBAAkB,CAAC,SAAS,CAAC;YAChC,EAAE,EAAE,MAAM,CAAC,UAAU;YACrB,WAAW,EAAE,MAAM,CAAC,MAAM;SAC3B,CAAC,CAAC;QACH,IAAI,CAAC,OAAO,CAAC,OAAO,CAAC,MAAM,CAAC,CAAC;IAC/B,CAAC;IAED,IAAI,eAAe;QACjB,OAAO,IAAI,CAAA;;;;wBAIS,GAAG,EAAE;YACnB,IAAI,CAAC,aAAa,GAAG,UAAU,CAAC;YAChC,IAAI,CAAC,aAAa,CAAC,IAAI,WAAW,CAAC,cAAc,CAAC,CAAC,CAAC;QACtD,CAAC;;;;KAIJ,CAAC;IACJ,CAAC;IAES,MAAM;QACd,IAAI,IAAI,CAAC,aAAa,KAAK,UAAU,EAAE;YACrC,OAAO,IAAI,CAAA;;;;;;;8BAOa,KAAK,IAAI,EAAE;gBACzB,IAAI,CAAC,aAAa,GAAG,SAAS,CAAC;gBAC/B,IAAI,CAAC,aAAa,CAAC,IAAI,WAAW,CAAC,aAAa,CAAC,CAAC,CAAC;gBACnD,IAAI,CAAC,OAAO,GAAG,EAAE,CAAC;gBAClB,MAAM,IAAI,CAAC,cAAc,CAAC;YAC5B,CAAC;;;;;;;sBAOO,IAAI,CAAC,QAAQ;iCACF,CAAC,KAAkB,EAAE,EAAE;gBAC5C,OAAO,CAAC,GAAG,CAAC,qBAAqB,EAAE,KAAK,CAAC,MAAM,CAAC,CAAC;gBACjD,IAAI,CAAC,aAAa,CAChB,IAAI,WAAW,CAAC,qBAAqB,EAAE;oBACrC,MAAM,EAAE,EAAE,GAAG,KAAK,CAAC,MAAM,EAAE;iBAC5B,CAAC,CACH,CAAC;YACJ,CAAC;;OAEJ,CAAC;SACH;QAED,OAAO,IAAI,CAAA;;;;aAIF,IAAI,CAAC,QAAQ,CAAC,MAAM,CAAC,CAAC,CAAC,IAAI,CAAC,eAAe,CAAC,CAAC,CAAC,OAAO;;;sCAG5B,IAAI,CAAC,UAAU;KAChD,CAAC;IACJ,CAAC;CACF,CAAA;AArF6B;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;uDAAyB;AAEzB;IAA1B,QAAQ,CAAC,EAAE,IAAI,EAAE,KAAK,EAAE,CAAC;qDAAe;AAEd;IAA1B,QAAQ,CAAC,EAAE,IAAI,EAAE,KAAK,EAAE,CAAC;oDAA0B;AAET;IAA1C,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;0DAEf;AAThB,mBAAmB;IAD/B,aAAa,CAAC,4BAA4B,CAAC;GAC/B,mBAAmB,CAsF/B;SAtFY,mBAAmB","sourcesContent":["/* eslint-disable no-debugger */\n\nimport { LitElement, html, TemplateResult, nothing } from 'lit';\nimport { customElement, property } from 'lit/decorators.js';\n\nimport './welcome-message';\nimport './presentational/mgc-title';\nimport './receipts';\nimport type { IauxMgcReceipts } from './receipts';\nimport './presentational/iaux-button';\n\nexport type anUpdate = {\n  message: string;\n  status: 'success' | 'fail';\n  donationId: string;\n};\n\n@customElement('iaux-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: String, reflect: true }) viewToDisplay:\n    | 'welcome'\n    | 'receipts' = 'welcome';\n\n  protected createRenderRoot() {\n    return this;\n  }\n\n  get receiptListElement(): IauxMgcReceipts {\n    return this.querySelector('iaux-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      <iaux-button\n        class=\"link\"\n        style=\"--button-padding: 0;\"\n        .clickHandler=${() => {\n          this.viewToDisplay = 'receipts';\n          this.dispatchEvent(new CustomEvent('ShowReceipts'));\n        }}\n      >\n        View recent donation history\n      </iaux-button>\n    `;\n  }\n\n  protected render() {\n    if (this.viewToDisplay === 'receipts') {\n      return html`\n        <iaux-mgc-title titleStyle=\"default\">\n          <span slot=\"title\">Recent donations</span>\n          <span slot=\"action\">\n            <iaux-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            </iaux-button>\n          </span>\n        </iaux-mgc-title>\n        <iaux-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        ></iaux-mgc-receipts>\n      `;\n    }\n\n    return html`\n      <iaux-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      </iaux-mgc-title>\n      <iaux-mgc-welcome .patronName=${this.patronName}></iaux-mgc-welcome>\n    `;\n  }\n}\n"]}

package/dist/src/presentational/iaux-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;
+}

package/dist/src/presentational/iaux-button.js

@@ -0,0 +1,101 @@
+import { __decorate } from "tslib";
+import { LitElement, html, css } from 'lit';
+import { customElement, property, query } from 'lit/decorators.js';
+import '@internetarchive/icon-donate/icon-donate.js';
+let IauxButton = class IauxButton extends LitElement {
+    constructor() {
+        super(...arguments);
+        this.isDisabled = false;
+    }
+    render() {
+        return html `
+      <button
+        ?disabled=${this.isDisabled}
+        @click=${() => {
+            if (this.clickHandler) {
+                this === null || this === void 0 ? void 0 : this.clickHandler(this);
+            }
+        }}
+      >
+        <slot></slot>
+      </button>
+    `;
+    }
+};
+IauxButton.styles = css `
+    :host {
+      display: inline-block;
+      height: var(--button-height, 30px);
+    }
+
+    button {
+      border: none;
+      cursor: pointer;
+      line-height: normal;
+      border-radius: 0.4rem;
+      text-align: center;
+      vertical-align: middle;
+      display: inline-block;
+      padding: 0.6rem 1.2rem;
+      border: 1px solid transparent;
+
+      white-space: nowrap;
+      -webkit-user-select: none;
+      -moz-user-select: none;
+      -ms-user-select: none;
+      -o-user-select: none;
+      user-select: none;
+    }
+
+    :host(.transparent) button {
+      background-color: transparent;
+    }
+
+    :host(.slim) button {
+      padding: 0;
+    }
+
+    :host(.primary) button {
+      background-color: #194880;
+      border-color: #c5d1df;
+    }
+
+    :host(.secondary) button {
+      background: #333;
+    }
+
+    :host(.cancel) button {
+      background-color: #e51c26;
+      border-color: #f8c6c8;
+    }
+
+    :host(.link) button {
+      color: #4b64ff;
+      border: none;
+      background: transparent;
+      display: flex;
+      align-items: var(--link-button-flex-align-items, flex-end);
+      padding: var(--link-button-padding, inherit);
+      height: inherit;
+    }
+
+    :host([isdisabled]) button {
+      cursor: not-allowed;
+      opacity: 0.5;
+      color: #222 !important;
+    }
+  `;
+__decorate([
+    property({ type: Boolean, reflect: true })
+], IauxButton.prototype, "isDisabled", void 0);
+__decorate([
+    property({ type: Object })
+], IauxButton.prototype, "clickHandler", void 0);
+__decorate([
+    query('button')
+], IauxButton.prototype, "button", void 0);
+IauxButton = __decorate([
+    customElement('iaux-button')
+], IauxButton);
+export { IauxButton };
+//# sourceMappingURL=iaux-button.js.map

package/dist/src/presentational/iaux-button.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"iaux-button.js","sourceRoot":"","sources":["../../../src/presentational/iaux-button.ts"],"names":[],"mappings":";AAAA,OAAO,EAAE,UAAU,EAAE,IAAI,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAC5C,OAAO,EAAE,aAAa,EAAE,QAAQ,EAAE,KAAK,EAAE,MAAM,mBAAmB,CAAC;AAEnE,OAAO,6CAA6C,CAAC;AAGrD,IAAa,UAAU,GAAvB,MAAa,UAAW,SAAQ,UAAU;IAA1C;;QAC8C,eAAU,GAAG,KAAK,CAAC;IAqFjE,CAAC;IA9EC,MAAM;QACJ,OAAO,IAAI,CAAA;;oBAEK,IAAI,CAAC,UAAU;iBAClB,GAAG,EAAE;YACZ,IAAI,IAAI,CAAC,YAAY,EAAE;gBACrB,IAAI,aAAJ,IAAI,uBAAJ,IAAI,CAAE,YAAY,CAAC,IAAI,CAAC,CAAC;aAC1B;QACH,CAAC;;;;KAIJ,CAAC;IACJ,CAAC;CAiEF,CAAA;AA/DQ,iBAAM,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA8DlB,CAAC;AApF0C;IAA3C,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;8CAAoB;AAGnC;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;gDAA2C;AAErD;IAAhB,KAAK,CAAC,QAAQ,CAAC;0CAA4B;AANjC,UAAU;IADtB,aAAa,CAAC,aAAa,CAAC;GAChB,UAAU,CAsFtB;SAtFY,UAAU","sourcesContent":["import { LitElement, html, css } from 'lit';\nimport { customElement, property, query } from 'lit/decorators.js';\n\nimport '@internetarchive/icon-donate/icon-donate.js';\n\n@customElement('iaux-button')\nexport class IauxButton extends LitElement {\n  @property({ type: Boolean, reflect: true }) isDisabled = false;\n\n  // eslint-disable-next-line no-use-before-define\n  @property({ type: Object }) clickHandler?: (self: IauxButton) => void;\n\n  @query('button') button!: HTMLButtonElement;\n\n  render() {\n    return html`\n      <button\n        ?disabled=${this.isDisabled}\n        @click=${() => {\n          if (this.clickHandler) {\n            this?.clickHandler(this);\n          }\n        }}\n      >\n        <slot></slot>\n      </button>\n    `;\n  }\n\n  static styles = css`\n    :host {\n      display: inline-block;\n      height: var(--button-height, 30px);\n    }\n\n    button {\n      border: none;\n      cursor: pointer;\n      line-height: normal;\n      border-radius: 0.4rem;\n      text-align: center;\n      vertical-align: middle;\n      display: inline-block;\n      padding: 0.6rem 1.2rem;\n      border: 1px solid transparent;\n\n      white-space: nowrap;\n      -webkit-user-select: none;\n      -moz-user-select: none;\n      -ms-user-select: none;\n      -o-user-select: none;\n      user-select: none;\n    }\n\n    :host(.transparent) button {\n      background-color: transparent;\n    }\n\n    :host(.slim) button {\n      padding: 0;\n    }\n\n    :host(.primary) button {\n      background-color: #194880;\n      border-color: #c5d1df;\n    }\n\n    :host(.secondary) button {\n      background: #333;\n    }\n\n    :host(.cancel) button {\n      background-color: #e51c26;\n      border-color: #f8c6c8;\n    }\n\n    :host(.link) button {\n      color: #4b64ff;\n      border: none;\n      background: transparent;\n      display: flex;\n      align-items: var(--link-button-flex-align-items, flex-end);\n      padding: var(--link-button-padding, inherit);\n      height: inherit;\n    }\n\n    :host([isdisabled]) button {\n      cursor: not-allowed;\n      opacity: 0.5;\n      color: #222 !important;\n    }\n  `;\n}\n"]}

package/dist/src/presentational/mgc-title.js

@@ -9,10 +9,7 @@ let MonthlyGivingCircle = class MonthlyGivingCircle extends LitElement {
     }
     get heart() {
         return this.titleStyle === 'heart'
-            ? html `
-          <div class="icon-donate"><ia-icon-donate></ia-icon-donate></div>
-          <span>Monthly Giving Circle</span>
-        `
+            ? html ` <div class="icon-donate"><ia-icon-donate></ia-icon-donate></div> `
             : nothing;
     }
     render() {
@@ -30,6 +27,21 @@ let MonthlyGivingCircle = class MonthlyGivingCircle extends LitElement {
     }
 };
 MonthlyGivingCircle.styles = css `
+    :host {
+      padding-bottom: 5px;
+      display: block;
+    }
+
+    :host([titlestyle='default']) h2 {
+      justify-content: flex-start;
+      gap: 20px;
+    }
+
+    :host([titlestyle='heart']) h2 .title-section {
+      width: 100%;
+      display: flex;
+    }
+
     h2 {
       font-size: 1.5em;
       display: flex;
@@ -38,13 +50,8 @@ MonthlyGivingCircle.styles = css `
       align-content: center;
       margin: 0;
       justify-content: space-between;
-      gap: 10px;
       align-items: flex-end;
-    }
-
-    h2 .title-section {
-      width: 100%;
-      display: flex;
+      line-height: normal;
     }
 
     h2 .icon-donate {

package/dist/src/presentational/mgc-title.js.map

@@ -1 +1 @@
-{"version":3,"file":"mgc-title.js","sourceRoot":"","sources":["../../../src/presentational/mgc-title.ts"],"names":[],"mappings":";AAAA,OAAO,EAAE,UAAU,EAAE,IAAI,EAAE,GAAG,EAAkB,OAAO,EAAE,MAAM,KAAK,CAAC;AACrE,OAAO,EAAE,aAAa,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAC;AAE5D,OAAO,6CAA6C,CAAC;AAGrD,IAAa,mBAAmB,GAAhC,MAAa,mBAAoB,SAAQ,UAAU;IAAnD;;QAC8B,eAAU,GAAwB,OAAO,CAAC;IAiExE,CAAC;IA/DC,IAAI,KAAK;QACP,OAAO,IAAI,CAAC,UAAU,KAAK,OAAO;YAChC,CAAC,CAAC,IAAI,CAAA;;;SAGH;YACH,CAAC,CAAC,OAAO,CAAC;IACd,CAAC;IAED,MAAM;QACJ,OAAO,IAAI,CAAA;;;;cAID,IAAI,CAAC,KAAK;;;;;;KAMnB,CAAC;IACJ,CAAC;CA0CF,CAAA;AAxCQ,0BAAM,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAuClB,CAAC;AAhE0B;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;uDAA2C;AAD3D,mBAAmB;IAD/B,aAAa,CAAC,gBAAgB,CAAC;GACnB,mBAAmB,CAkE/B;SAlEY,mBAAmB","sourcesContent":["import { LitElement, html, css, TemplateResult, nothing } from 'lit';\nimport { customElement, property } from 'lit/decorators.js';\n\nimport '@internetarchive/icon-donate/icon-donate.js';\n\n@customElement('iaux-mgc-title')\nexport class MonthlyGivingCircle extends LitElement {\n  @property({ type: String }) titleStyle: 'heart' | 'default' = 'heart';\n\n  get heart(): TemplateResult | typeof nothing {\n    return this.titleStyle === 'heart'\n      ? html`\n          <div class=\"icon-donate\"><ia-icon-donate></ia-icon-donate></div>\n          <span>Monthly Giving Circle</span>\n        `\n      : nothing;\n  }\n\n  render() {\n    return html`\n      <div>\n        <h2>\n          <div class=\"title-section\">\n            ${this.heart}\n            <slot name=\"title\"></slot>\n          </div>\n          <slot name=\"action\"></slot>\n        </h2>\n      </div>\n    `;\n  }\n\n  static styles = css`\n    h2 {\n      font-size: 1.5em;\n      display: flex;\n      flex-direction: row;\n      flex-wrap: nowrap;\n      align-content: center;\n      margin: 0;\n      justify-content: space-between;\n      gap: 10px;\n      align-items: flex-end;\n    }\n\n    h2 .title-section {\n      width: 100%;\n      display: flex;\n    }\n\n    h2 .icon-donate {\n      display: flex;\n      flex-direction: row;\n      flex-wrap: nowrap;\n      align-content: flex-end;\n      align-items: center;\n      justify-content: flex-start;\n    }\n\n    h2 .icon-donate {\n      --iconFillColor: red;\n      --iconWidth: 1.2em;\n      --iconHeight: 1.2em;\n    }\n\n    slot[name='action'] {\n      padding: 0 !important;\n      display: flex;\n      justify-content: flex-end;\n      align-items: flex-end;\n    }\n  `;\n}\n"]}
+{"version":3,"file":"mgc-title.js","sourceRoot":"","sources":["../../../src/presentational/mgc-title.ts"],"names":[],"mappings":";AAAA,OAAO,EAAE,UAAU,EAAE,IAAI,EAAE,GAAG,EAAkB,OAAO,EAAE,MAAM,KAAK,CAAC;AACrE,OAAO,EAAE,aAAa,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAC;AAE5D,OAAO,6CAA6C,CAAC;AAGrD,IAAa,mBAAmB,GAAhC,MAAa,mBAAoB,SAAQ,UAAU;IAAnD;;QAC8B,eAAU,GAAwB,OAAO,CAAC;IAwExE,CAAC;IAtEC,IAAI,KAAK;QACP,OAAO,IAAI,CAAC,UAAU,KAAK,OAAO;YAChC,CAAC,CAAC,IAAI,CAAA,oEAAoE;YAC1E,CAAC,CAAC,OAAO,CAAC;IACd,CAAC;IAED,MAAM;QACJ,OAAO,IAAI,CAAA;;;;cAID,IAAI,CAAC,KAAK;;;;;;KAMnB,CAAC;IACJ,CAAC;CAoDF,CAAA;AAlDQ,0BAAM,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAiDlB,CAAC;AAvE0B;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;uDAA2C;AAD3D,mBAAmB;IAD/B,aAAa,CAAC,gBAAgB,CAAC;GACnB,mBAAmB,CAyE/B;SAzEY,mBAAmB","sourcesContent":["import { LitElement, html, css, TemplateResult, nothing } from 'lit';\nimport { customElement, property } from 'lit/decorators.js';\n\nimport '@internetarchive/icon-donate/icon-donate.js';\n\n@customElement('iaux-mgc-title')\nexport class MonthlyGivingCircle extends LitElement {\n  @property({ type: String }) titleStyle: 'heart' | 'default' = 'heart';\n\n  get heart(): TemplateResult | typeof nothing {\n    return this.titleStyle === 'heart'\n      ? html` <div class=\"icon-donate\"><ia-icon-donate></ia-icon-donate></div> `\n      : nothing;\n  }\n\n  render() {\n    return html`\n      <div>\n        <h2>\n          <div class=\"title-section\">\n            ${this.heart}\n            <slot name=\"title\"></slot>\n          </div>\n          <slot name=\"action\"></slot>\n        </h2>\n      </div>\n    `;\n  }\n\n  static styles = css`\n    :host {\n      padding-bottom: 5px;\n      display: block;\n    }\n\n    :host([titlestyle='default']) h2 {\n      justify-content: flex-start;\n      gap: 20px;\n    }\n\n    :host([titlestyle='heart']) h2 .title-section {\n      width: 100%;\n      display: flex;\n    }\n\n    h2 {\n      font-size: 1.5em;\n      display: flex;\n      flex-direction: row;\n      flex-wrap: nowrap;\n      align-content: center;\n      margin: 0;\n      justify-content: space-between;\n      align-items: flex-end;\n      line-height: normal;\n    }\n\n    h2 .icon-donate {\n      display: flex;\n      flex-direction: row;\n      flex-wrap: nowrap;\n      align-content: flex-end;\n      align-items: center;\n      justify-content: flex-start;\n    }\n\n    h2 .icon-donate {\n      --iconFillColor: red;\n      --iconWidth: 1.2em;\n      --iconHeight: 1.2em;\n    }\n\n    slot[name='action'] {\n      padding: 0 !important;\n      display: flex;\n      justify-content: flex-end;\n      align-items: flex-end;\n    }\n  `;\n}\n"]}

package/dist/src/receipts.d.ts

@@ -0,0 +1,25 @@
+import { LitElement, PropertyValues } from 'lit';
+import type { Receipt } from './models/receipt';
+import './presentational/iaux-button';
+declare type ReceiptEmailStatus = {
+    id: string;
+    emailStatus: 'success' | 'fail' | 'pending' | '';
+};
+declare type receiptDispatcherMap = {
+    [id: string]: ReceiptEmailStatus;
+};
+export declare class IauxMgcReceipts extends LitElement {
+    receipts: never[];
+    receiptDispatcher: receiptDispatcherMap | null;
+    shouldUpdate(changed: PropertyValues): boolean;
+    updated(changed: PropertyValues): void;
+    updateReceiptSentMap(): void;
+    emailReceipt(receipt: Receipt): void;
+    /** callback that confirms status of an receipt email request  */
+    emailSent(receiptEmailed: ReceiptEmailStatus): Promise<void>;
+    emailStatusMessageToDisplay(receiptSentStatus: ReceiptEmailStatus): string;
+    ctaButtonText(donation: Receipt, emailStatus?: ReceiptEmailStatus): "Sending..." | "Email receipt";
+    protected render(): import("lit").TemplateResult<1>;
+    static styles: import("lit").CSSResult;
+}
+export {};

package/dist/src/receipts.js

@@ -0,0 +1,217 @@
+import { __decorate } from "tslib";
+/* eslint-disable no-console */
+import { LitElement, html, css, nothing } from 'lit';
+import { customElement, property } from 'lit/decorators.js';
+import './presentational/iaux-button';
+let IauxMgcReceipts = class IauxMgcReceipts extends LitElement {
+    constructor() {
+        super(...arguments);
+        this.receipts = [];
+        this.receiptDispatcher = null;
+    }
+    shouldUpdate(changed) {
+        if (changed.has('receiptDispatcher')) {
+            return true;
+        }
+        return false;
+    }
+    updated(changed) {
+        if (changed.has('receipts')) {
+            this.updateReceiptSentMap();
+        }
+        if (changed.has('receiptDispatcher')) {
+            console.log('receiptDispatcher UPDATED ---- ', this.receiptDispatcher);
+        }
+    }
+    updateReceiptSentMap() {
+        if (!this.receipts.length) {
+            this.receiptDispatcher = null;
+        }
+        else {
+            const receiptDispatcher = {};
+            this.receipts.forEach((receipt) => {
+                receiptDispatcher[receipt.id] = {
+                    id: receipt.id,
+                    emailStatus: '',
+                };
+            });
+            this.receiptDispatcher = receiptDispatcher;
+        }
+    }
+    emailReceipt(receipt) {
+        this.dispatchEvent(new CustomEvent('EmailReceiptRequest', {
+            detail: {
+                donation: receipt,
+            },
+        }));
+    }
+    /** callback that confirms status of an receipt email request  */
+    async emailSent(receiptEmailed) {
+        var _a;
+        const currStatusMap = this.receiptDispatcher;
+        this.receiptDispatcher = null;
+        await this.updateComplete;
+        const statusMap = {
+            ...currStatusMap,
+        };
+        const { id } = receiptEmailed;
+        statusMap[id] = receiptEmailed;
+        this.receiptDispatcher = { ...statusMap };
+        console.log('RECEIPTS -- emailSent', this.receiptDispatcher, receiptEmailed);
+        // re-enable email request button
+        const escapedId = CSS.escape(id);
+        const button = (_a = this.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector(`#donation-${escapedId} iaux-button`);
+        button.isDisabled = false;
+    }
+    /* renderings */
+    emailStatusMessageToDisplay(receiptSentStatus) {
+        switch (receiptSentStatus.emailStatus) {
+            case 'success':
+                return '✓ Sent';
+            case 'fail':
+                return '✖ Failed';
+            default:
+                return '';
+        }
+    }
+    ctaButtonText(donation, emailStatus) {
+        if ((emailStatus === null || emailStatus === void 0 ? void 0 : emailStatus.emailStatus) === 'pending') {
+            return 'Sending...';
+        }
+        return 'Email receipt';
+    }
+    render() {
+        return html `
+      <section id="recent-donations-list">
+        <table>
+          <tr>
+            <th class="date">Date</th>
+            <th class="amount">Amount</th>
+            <th class="action">Action</th>
+          </tr>
+          ${this.receipts.length
+            ? this.receipts.map((donation) => {
+                var _a;
+                const emailStatus = (_a = this.receiptDispatcher) === null || _a === void 0 ? void 0 : _a[donation.id];
+                const emailUnavailable = (emailStatus === null || emailStatus === void 0 ? void 0 : emailStatus.emailStatus) === 'pending';
+                const emailStatusToDisplay = !emailStatus || !emailStatus.emailStatus
+                    ? nothing
+                    : html `<span
+                        class=${`sent-status ${emailStatus.emailStatus}`}
+                        >${this.emailStatusMessageToDisplay(emailStatus)}</span
+                      >`;
+                return html `
+                  <tr
+                    id=${`donation-${donation.id}`}
+                    class=${`${donation.isTest ? 'test' : ''}`}
+                  >
+                    <td>
+                      <div class="donation-date">${donation.date}</div>
+                    </td>
+                    <td>
+                      <div class="donation-amount">
+                        ${donation.amountFormatted}
+                      </div>
+                    </td>
+                    <td>
+                      <div class="request-receipt">
+                        <iaux-button
+                          class="link slim"
+                          style="--link-button-flex-align-items: center;"
+                          .clickHandler=${async (iauxButton) => {
+                    const initialClick = !emailUnavailable;
+                    if (initialClick) {
+                        // eslint-disable-next-line no-param-reassign
+                        iauxButton.isDisabled = true;
+                        await iauxButton.updateComplete;
+                    }
+                    if (emailUnavailable)
+                        return;
+                    this.emailReceipt(donation);
+                    if (this.receiptDispatcher) {
+                        const statusMap = {
+                            ...this.receiptDispatcher,
+                        };
+                        statusMap[donation.id].emailStatus = 'pending';
+                        this.receiptDispatcher = statusMap;
+                    }
+                }}
+                        >
+                          ${this.ctaButtonText(donation, emailStatus)}
+                        </iaux-button>
+                        ${emailStatusToDisplay}
+                      </div>
+                    </td>
+                  </tr>
+                `;
+            })
+            : html `<p>No recent donations found</p>`}
+        </table>
+      </section>
+    `;
+    }
+};
+IauxMgcReceipts.styles = css `
+    table {
+      text-align: left;
+      table-layout: fixed;
+      min-width: 600px;
+    }
+
+    button {
+      padding: 1rem 0;
+    }
+
+    td {
+      padding: 0;
+    }
+
+    th.date {
+      width: 55px;
+    }
+    th.amount {
+      width: 55px;
+    }
+    th.action {
+      width: 200px;
+    }
+    iaux-button-style {
+      display: inline-block;
+    }
+
+    .request-receipt {
+      display: flex;
+      flex-wrap: nowrap;
+      align-content: center;
+      justify-content: flex-start;
+      align-items: center;
+      gap: 10px;
+    }
+
+    .sent-status.success,
+    .sent-status.fail {
+      padding: 5px;
+      background: rgb(238, 253, 238);
+      width: 55px;
+      min-height: 20px;
+    }
+    .sent-status.success {
+      color: rgb(33, 149, 24);
+      border-left: 5px solid rgb(33, 149, 24);
+    }
+    .sent-status.fail {
+      color: #bb0505;
+      border-left: 5px solid #bb0505;
+    }
+  `;
+__decorate([
+    property({ type: Array })
+], IauxMgcReceipts.prototype, "receipts", void 0);
+__decorate([
+    property({ type: Object })
+], IauxMgcReceipts.prototype, "receiptDispatcher", void 0);
+IauxMgcReceipts = __decorate([
+    customElement('iaux-mgc-receipts')
+], IauxMgcReceipts);
+export { IauxMgcReceipts };
+//# sourceMappingURL=receipts.js.map