@internetarchive/donation-monthly-portal 2.0.0 → 3.0.0

package/dist/index.d.ts

@@ -1,3 +1,4 @@
 export { MonthlyGivingCircle } from './src/monthly-giving-circle';
-export type { anUpdate } 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,3 +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;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"]}
+{"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/monthly-giving-circle.d.ts

@@ -1,10 +1,11 @@
-import { LitElement, TemplateResult } 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/iaux-button';
-export declare type anUpdate = {
+import './presentational/ia-button';
+export declare type AnUpdate = {
     message: string;
     status: 'success' | 'fail';
     donationId: string;
@@ -12,11 +13,14 @@ export declare type anUpdate = {
 export declare class MonthlyGivingCircle extends LitElement {
     patronName: string;
     receipts: never[];
-    updates: anUpdate[];
-    viewToDisplay: 'welcome' | 'receipts';
+    updates: AnUpdate[];
+    plans: never[];
+    viewToDisplay: 'welcome' | 'receipts' | 'plans';
     protected createRenderRoot(): this;
+    updated(changed: PropertyValues): void;
     get receiptListElement(): IauxMgcReceipts;
-    updateReceived(update: anUpdate): void;
+    updateReceived(update: AnUpdate): void;
     get showReceiptsCTA(): TemplateResult;
+    get headerSection(): TemplateResult;
     protected render(): TemplateResult<1>;
 }

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

@@ -3,22 +3,29 @@ import { __decorate } from "tslib";
 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/iaux-button';
+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('iaux-mgc-receipts');
+        return this.querySelector('ia-mgc-receipts');
     }
     updateReceived(update) {
         this.receiptListElement.emailSent({
@@ -29,25 +36,24 @@ let MonthlyGivingCircle = class MonthlyGivingCircle extends LitElement {
     }
     get showReceiptsCTA() {
         return html `
-      <iaux-button
-        class="link"
-        style="--button-padding: 0;"
+      <ia-button
+        class="link slim"
         .clickHandler=${() => {
             this.viewToDisplay = 'receipts';
             this.dispatchEvent(new CustomEvent('ShowReceipts'));
         }}
       >
         View recent donation history
-      </iaux-button>
+      </ia-button>
     `;
     }
-    render() {
+    get headerSection() {
         if (this.viewToDisplay === 'receipts') {
             return html `
-        <iaux-mgc-title titleStyle="default">
+        <ia-mgc-title titleStyle="default">
           <span slot="title">Recent donations</span>
           <span slot="action">
-            <iaux-button
+            <ia-button
               class="link slim"
               id="close-receipts"
               .clickHandler=${async () => {
@@ -58,28 +64,54 @@ let MonthlyGivingCircle = class MonthlyGivingCircle extends LitElement {
             }}
             >
               Back to account settings
-            </iaux-button>
+            </ia-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>
+        </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 `
-      <iaux-mgc-title titleStyle="heart">
+      <ia-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>
+      </ia-mgc-title>
+    `;
+    }
+    render() {
+        return html `
+      ${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}
     `;
     }
 };
@@ -92,11 +124,14 @@ __decorate([
 __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,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"]}
+{"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/{iaux-button.js → ia-button.js}

@@ -95,7 +95,7 @@ __decorate([
     query('button')
 ], IauxButton.prototype, "button", void 0);
 IauxButton = __decorate([
-    customElement('iaux-button')
+    customElement('ia-button')
 ], IauxButton);
 export { IauxButton };
-//# sourceMappingURL=iaux-button.js.map
+//# sourceMappingURL=ia-button.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"ia-button.js","sourceRoot":"","sources":["../../../src/presentational/ia-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,WAAW,CAAC;GACd,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('ia-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

@@ -75,12 +75,19 @@ MonthlyGivingCircle.styles = css `
       justify-content: flex-end;
       align-items: flex-end;
     }
+
+    @media screen and (max-width: 500px) {
+      h2,
+      slot[name='action'] {
+        display: block;
+      }
+    }
   `;
 __decorate([
     property({ type: String })
 ], MonthlyGivingCircle.prototype, "titleStyle", void 0);
 MonthlyGivingCircle = __decorate([
-    customElement('iaux-mgc-title')
+    customElement('ia-mgc-title')
 ], MonthlyGivingCircle);
 export { MonthlyGivingCircle };
 //# sourceMappingURL=mgc-title.js.map

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;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"]}
+{"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;IA+ExE,CAAC;IA7EC,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;CA2DF,CAAA;AAzDQ,0BAAM,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAwDlB,CAAC;AA9E0B;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;uDAA2C;AAD3D,mBAAmB;IAD/B,aAAa,CAAC,cAAc,CAAC;GACjB,mBAAmB,CAgF/B;SAhFY,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('ia-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    @media screen and (max-width: 500px) {\n      h2,\n      slot[name='action'] {\n        display: block;\n      }\n    }\n  `;\n}\n"]}

package/dist/src/receipts.d.ts

@@ -1,6 +1,6 @@
 import { LitElement, PropertyValues } from 'lit';
 import type { Receipt } from './models/receipt';
-import './presentational/iaux-button';
+import './presentational/ia-button';
 declare type ReceiptEmailStatus = {
     id: string;
     emailStatus: 'success' | 'fail' | 'pending' | '';