@internetarchive/donation-monthly-portal 4.0.0 → 5.0.0

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

@@ -6,7 +6,6 @@ import './receipts';
 import type { IauxMgcReceipts } from './receipts';
 import './presentational/ia-button';
 import type { MonthlyPlan } from './models/plan';
-import './edit-plan-form';
 export declare type APlanUpdate = {
     plan?: MonthlyPlan;
     donationId?: string;
@@ -20,12 +19,14 @@ export declare class MonthlyGivingCircle extends LitElement {
     updates: APlanUpdate[];
     plans: never[];
     editingThisPlan?: MonthlyPlan;
-    viewToDisplay: 'welcome' | 'receipts' | 'plans' | 'editPlan';
+    viewToDisplay: 'welcome' | 'receipts' | 'plans';
     protected createRenderRoot(): this;
     updated(changed: PropertyValues): void;
+    protected render(): TemplateResult<1>;
     get receiptListElement(): IauxMgcReceipts;
     updateReceived(update: APlanUpdate): void;
-    protected render(): TemplateResult<1>;
+    get currentView(): TemplateResult;
+    get receiptsView(): TemplateResult;
+    get plansView(): TemplateResult;
     get sectionTitle(): TemplateResult;
-    get nonEditView(): TemplateResult;
 }

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

@@ -7,7 +7,6 @@ import './plans';
 import './presentational/mgc-title';
 import './receipts';
 import './presentational/ia-button';
-import './edit-plan-form';
 let MonthlyGivingCircle = class MonthlyGivingCircle extends LitElement {
     constructor() {
         super(...arguments);
@@ -25,51 +24,49 @@ let MonthlyGivingCircle = class MonthlyGivingCircle extends LitElement {
             this.viewToDisplay = this.plans.length ? 'plans' : 'welcome';
         }
     }
+    render() {
+        return html ` ${this.sectionTitle} ${this.currentView} `;
+    }
     get receiptListElement() {
         return this.querySelector('ia-mgc-receipts');
     }
     /* Update Callback */
     updateReceived(update) {
-        var _a, _b;
+        var _a;
         // log update
         this.updates.unshift(update);
         const { plan, donationId = '' } = update;
         const idToUse = (_a = plan === null || plan === void 0 ? void 0 : plan.id) !== null && _a !== void 0 ? _a : donationId;
-        const editingPlanIsUpdating = ((_b = this.editingThisPlan) === null || _b === void 0 ? void 0 : _b.id) === idToUse;
-        if (editingPlanIsUpdating) {
-            console.log('edit received, mismatch plans', {
-                planCurrentlyEditing: this.editingThisPlan,
-                planReceived: update.plan,
-            });
-            return;
-        }
-        if (plan === null || plan === void 0 ? void 0 : plan.hasBeenCancelled) {
-            this.editingThisPlan = undefined;
-            this.viewToDisplay = 'plans';
-            return;
-        }
         this.receiptListElement.emailSent({
             id: idToUse,
             emailStatus: update.status,
         });
     }
     /* VIEWS */
-    render() {
-        const isEditingPlan = this.viewToDisplay === 'editPlan' && this.editingThisPlan;
-        return html `
-      ${this.sectionTitle}
-      ${isEditingPlan
-            ? html `<ia-mgc-edit-plan
-            .plan=${this.editingThisPlan}
-            .cancelPlanHandler=${(plan) => {
-                console.log('cancelPlan', plan);
-                this.dispatchEvent(new CustomEvent('cancelPlan', {
-                    detail: { plan },
-                }));
-            }}
-          ></ia-mgc-edit-plan>`
-            : this.nonEditView}
-    `;
+    get currentView() {
+        if (this.viewToDisplay === 'receipts') {
+            return this.receiptsView;
+        }
+        if (this.viewToDisplay === 'plans' && this.plans.length) {
+            return this.plansView;
+        }
+        return html `<ia-mgc-welcome
+      .patronName=${this.patronName}
+    ></ia-mgc-welcome>`;
+    }
+    get receiptsView() {
+        return 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>`;
+    }
+    get plansView() {
+        return html ` <ia-mgc-plans .plans=${this.plans}></ia-mgc-plans> `;
     }
     get sectionTitle() {
         let title = '';
@@ -104,22 +101,6 @@ let MonthlyGivingCircle = class MonthlyGivingCircle extends LitElement {
                 }}
         >
           Back to account settings
-        </ia-button>`;
-                break;
-            case 'editPlan':
-                title = 'Edit plan';
-                titleStyle = 'default';
-                cta = html `<ia-button
-          class="primary"
-          id="close-edit-plan"
-          .clickHandler=${async () => {
-                    this.viewToDisplay = this.plans.length ? 'plans' : 'welcome';
-                    this.dispatchEvent(new CustomEvent('ShowWelcome'));
-                    this.updates = [];
-                    await this.updateComplete;
-                }}
-        >
-          Back to account settings
         </ia-button>`;
                 break;
             default:
@@ -137,38 +118,6 @@ let MonthlyGivingCircle = class MonthlyGivingCircle extends LitElement {
       </ia-mgc-title>
     `;
     }
-    get nonEditView() {
-        if (this.viewToDisplay === 'receipts') {
-            return 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>
-      `;
-        }
-        return html `
-      ${this.viewToDisplay === 'plans' && this.plans.length
-            ? html `
-            <ia-mgc-plans
-              @editThisPlan=${async (event) => {
-                this.editingThisPlan = event.detail.plan;
-                this.viewToDisplay = 'editPlan';
-                this.dispatchEvent(new Event('ShowEditForm'));
-                await this.updateComplete;
-            }}
-              .plans=${this.plans}
-            ></ia-mgc-plans>
-          `
-            : html `<ia-mgc-welcome
-            .patronName=${this.patronName}
-          ></ia-mgc-welcome>`}
-    `;
-    }
 };
 __decorate([
     property({ type: String })

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":"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","sourcesContent":["/* eslint-disable no-debugger */\n\nimport { LitElement, html, TemplateResult, 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';\nimport type { MonthlyPlan } from './models/plan';\nimport './edit-plan-form';\n\nexport type APlanUpdate = {\n  plan?: MonthlyPlan;\n  donationId?: string;\n  status: 'success' | 'fail';\n  action: 'receiptSent' | 'cancel';\n  message: 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: APlanUpdate[] = [];\n\n  @property({ type: Array }) plans = [];\n\n  @property({ type: Object }) editingThisPlan?: MonthlyPlan;\n\n  @property({ type: String, reflect: true }) viewToDisplay:\n    | 'welcome'\n    | 'receipts'\n    | 'plans'\n    | 'editPlan' = '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  /* Update Callback */\n  updateReceived(update: APlanUpdate) {\n    // log update\n    this.updates.unshift(update);\n\n    const { plan, donationId = '' } = update;\n    const idToUse = plan?.id ?? donationId;\n    const editingPlanIsUpdating = this.editingThisPlan?.id === idToUse;\n\n    if (editingPlanIsUpdating) {\n      console.log('edit received, mismatch plans', {\n        planCurrentlyEditing: this.editingThisPlan,\n        planReceived: update.plan,\n      });\n      return;\n    }\n\n    if (plan?.hasBeenCancelled) {\n      this.editingThisPlan = undefined;\n      this.viewToDisplay = 'plans';\n      return;\n    }\n\n    this.receiptListElement.emailSent({\n      id: idToUse,\n      emailStatus: update.status,\n    });\n  }\n\n  /* VIEWS */\n  protected render() {\n    const isEditingPlan =\n      this.viewToDisplay === 'editPlan' && this.editingThisPlan;\n    return html`\n      ${this.sectionTitle}\n      ${isEditingPlan\n        ? html`<ia-mgc-edit-plan\n            .plan=${this.editingThisPlan}\n            .cancelPlanHandler=${(plan: MonthlyPlan) => {\n              console.log('cancelPlan', plan);\n              this.dispatchEvent(\n                new CustomEvent('cancelPlan', {\n                  detail: { plan },\n                })\n              );\n            }}\n          ></ia-mgc-edit-plan>`\n        : this.nonEditView}\n    `;\n  }\n\n  get sectionTitle(): TemplateResult {\n    let title = '';\n    let titleStyle = '';\n    let cta = html``;\n\n    const receiptsCTA = html`\n      <ia-button\n        class=\"link slim\"\n        .clickHandler=${async () => {\n          this.viewToDisplay = 'receipts';\n          await this.updateComplete;\n          this.dispatchEvent(new CustomEvent('ShowReceipts'));\n        }}\n      >\n        View recent donation history\n      </ia-button>\n    `;\n\n    const displayReceiptsLink =\n      this.receipts.length &&\n      (this.viewToDisplay === 'plans' || this.viewToDisplay === 'welcome');\n\n    switch (this.viewToDisplay) {\n      case 'receipts':\n        title = 'Recent donations';\n        titleStyle = 'default';\n        cta = html`<ia-button\n          class=\"link slim\"\n          id=\"close-receipts\"\n          .clickHandler=${async () => {\n            this.viewToDisplay = this.plans.length ? 'plans' : '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        break;\n\n      case 'editPlan':\n        title = 'Edit plan';\n        titleStyle = 'default';\n        cta = html`<ia-button\n          class=\"primary\"\n          id=\"close-edit-plan\"\n          .clickHandler=${async () => {\n            this.viewToDisplay = this.plans.length ? 'plans' : '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        break;\n\n      default:\n        title = 'Monthly Giving Circle';\n        titleStyle = 'heart';\n        if (displayReceiptsLink) {\n          cta = receiptsCTA;\n        }\n        break;\n    }\n\n    return html`\n      <ia-mgc-title titleStyle=${titleStyle}>\n        <span slot=\"title\">${title}</span>\n        <span slot=\"action\">${cta}</span>\n      </ia-mgc-title>\n    `;\n  }\n\n  get nonEditView(): TemplateResult {\n    if (this.viewToDisplay === 'receipts') {\n      return 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    }\n\n    return html`\n      ${this.viewToDisplay === 'plans' && this.plans.length\n        ? html`\n            <ia-mgc-plans\n              @editThisPlan=${async (event: CustomEvent) => {\n                this.editingThisPlan = event.detail.plan;\n                this.viewToDisplay = 'editPlan';\n                this.dispatchEvent(new Event('ShowEditForm'));\n                await this.updateComplete;\n              }}\n              .plans=${this.plans}\n            ></ia-mgc-plans>\n          `\n        : html`<ia-mgc-welcome\n            .patronName=${this.patronName}\n          ></ia-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, 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';\nimport type { MonthlyPlan } from './models/plan';\n\nexport type APlanUpdate = {\n  plan?: MonthlyPlan;\n  donationId?: string;\n  status: 'success' | 'fail';\n  action: 'receiptSent' | 'cancel';\n  message: 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: APlanUpdate[] = [];\n\n  @property({ type: Array }) plans = [];\n\n  @property({ type: Object }) editingThisPlan?: MonthlyPlan;\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  protected render() {\n    return html` ${this.sectionTitle} ${this.currentView} `;\n  }\n\n  get receiptListElement(): IauxMgcReceipts {\n    return this.querySelector('ia-mgc-receipts') as IauxMgcReceipts;\n  }\n\n  /* Update Callback */\n  updateReceived(update: APlanUpdate) {\n    // log update\n    this.updates.unshift(update);\n\n    const { plan, donationId = '' } = update;\n    const idToUse = plan?.id ?? donationId;\n\n    this.receiptListElement.emailSent({\n      id: idToUse,\n      emailStatus: update.status,\n    });\n  }\n\n  /* VIEWS */\n  get currentView(): TemplateResult {\n    if (this.viewToDisplay === 'receipts') {\n      return this.receiptsView;\n    }\n\n    if (this.viewToDisplay === 'plans' && this.plans.length) {\n      return this.plansView;\n    }\n\n    return html`<ia-mgc-welcome\n      .patronName=${this.patronName}\n    ></ia-mgc-welcome>`;\n  }\n\n  get receiptsView(): TemplateResult {\n    return html` <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\n  get plansView(): TemplateResult {\n    return html` <ia-mgc-plans .plans=${this.plans}></ia-mgc-plans> `;\n  }\n\n  get sectionTitle(): TemplateResult {\n    let title = '';\n    let titleStyle = '';\n    let cta = html``;\n\n    const receiptsCTA = html`\n      <ia-button\n        class=\"link slim\"\n        .clickHandler=${async () => {\n          this.viewToDisplay = 'receipts';\n          await this.updateComplete;\n          this.dispatchEvent(new CustomEvent('ShowReceipts'));\n        }}\n      >\n        View recent donation history\n      </ia-button>\n    `;\n\n    const displayReceiptsLink =\n      this.receipts.length &&\n      (this.viewToDisplay === 'plans' || this.viewToDisplay === 'welcome');\n\n    switch (this.viewToDisplay) {\n      case 'receipts':\n        title = 'Recent donations';\n        titleStyle = 'default';\n        cta = html`<ia-button\n          class=\"link slim\"\n          id=\"close-receipts\"\n          .clickHandler=${async () => {\n            this.viewToDisplay = this.plans.length ? 'plans' : '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        break;\n\n      default:\n        title = 'Monthly Giving Circle';\n        titleStyle = 'heart';\n        if (displayReceiptsLink) {\n          cta = receiptsCTA;\n        }\n        break;\n    }\n\n    return html`\n      <ia-mgc-title titleStyle=${titleStyle}>\n        <span slot=\"title\">${title}</span>\n        <span slot=\"action\">${cta}</span>\n      </ia-mgc-title>\n    `;\n  }\n}\n"]}

package/dist/src/plans.d.ts

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

package/dist/src/plans.js

@@ -2,12 +2,14 @@ import { __decorate } from "tslib";
 /* eslint-disable no-param-reassign */
 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 = [];
     }
+    mailToText() {
+        return `mailto:donations@archive.org?subject=I'd like to update my monthly donation`;
+    }
     render() {
         return html `
       <section class="monthly-giving-circle">
@@ -22,9 +24,6 @@ let IauxMgcPlans = class IauxMgcPlans extends LitElement {
             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';
-            const ctaText = plan.plan.isCancelled
-                ? 'Plan is cancelled'
-                : 'Manage this monthly donation';
             return html `
               <li class=${`${plan.plan.isCancelled ? 'cancelled' : ''}`}>
                 <div class="info">
@@ -73,18 +72,10 @@ let IauxMgcPlans = class IauxMgcPlans extends LitElement {
                     <p>${plan.nextBillingDate}</p>
                   </div>
                 </div>
-                <ia-button
-                  class="ia-button link edit-donation"
-                  .isDisabled=${plan.plan.isCancelled}
-                  .clickHandler=${async (e, iaButton) => {
-                // disable button
-                iaButton.isDisabled = true;
-                // open form
-                this.dispatchEvent(new CustomEvent('editThisPlan', { detail: { plan } }));
-            }}
-                >
-                  ${ctaText}
-                </ia-button>
+                <p class="email-edit-plan">
+                  To update your monthly plan, please email us at
+                  <a href=${this.mailToText}>donations@archive.org</a>.
+                </p>
               </li>
             `;
         })}
@@ -170,6 +161,9 @@ IauxMgcPlans.styles = css `
       margin: 0;
     }
 
+    p.email-edit-plan {
+      margin: 10px 0 0;
+    }
     @media screen and (max-width: 500px) {
       ul li .info {
         display: block;

package/dist/src/plans.js.map

@@ -1 +1 @@
-{"version":3,"file":"plans.js","sourceRoot":"","sources":["../../src/plans.ts"],"names":[],"mappings":"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","sourcesContent":["/* eslint-disable no-param-reassign */\nimport { 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';\nimport type { IauxButton } from './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            let methodType =\n              plan.payment?.paymentMethodType ?? 'Method not found';\n            if (methodType === 'creditCard') {\n              methodType = 'Credit card';\n            }\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            const ctaText = plan.plan.isCancelled\n              ? 'Plan is cancelled'\n              : 'Manage this monthly donation';\n\n            return html`\n              <li class=${`${plan.plan.isCancelled ? 'cancelled' : ''}`}>\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?.paymentMethodType === '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?.paymentMethodType !== '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=${plan.plan.isCancelled}\n                  .clickHandler=${async (e: Event, iaButton: IauxButton) => {\n                    // disable button\n                    iaButton.isDisabled = true;\n                    // open form\n                    this.dispatchEvent(\n                      new CustomEvent('editThisPlan', { detail: { plan } })\n                    );\n                  }}\n                >\n                  ${ctaText}\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    li.cancelled {\n      background-color: lightgoldenrodyellow;\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"]}
+{"version":3,"file":"plans.js","sourceRoot":"","sources":["../../src/plans.ts"],"names":[],"mappings":"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","sourcesContent":["/* eslint-disable no-param-reassign */\nimport { LitElement, html, css, nothing } from 'lit';\nimport { customElement, property } from 'lit/decorators.js';\n\nimport type { MonthlyPlan } from './models/plan';\n\n@customElement('ia-mgc-plans')\nexport class IauxMgcPlans extends LitElement {\n  @property({ type: Array }) plans = [];\n\n  mailToText(): string {\n    return `mailto:donations@archive.org?subject=I'd like to update my monthly donation`;\n  }\n\n  protected render() {\n    return html`\n      <section class=\"monthly-giving-circle\">\n        <ul>\n          ${this.plans.map((plan: MonthlyPlan) => {\n            let methodType =\n              plan.payment?.paymentMethodType ?? 'Method not found';\n            if (methodType === 'creditCard') {\n              methodType = 'Credit card';\n            }\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 class=${`${plan.plan.isCancelled ? 'cancelled' : ''}`}>\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?.paymentMethodType === '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?.paymentMethodType !== '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                <p class=\"email-edit-plan\">\n                  To update your monthly plan, please email us at\n                  <a href=${this.mailToText}>donations@archive.org</a>.\n                </p>\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    li.cancelled {\n      background-color: lightgoldenrodyellow;\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    p.email-edit-plan {\n      margin: 10px 0 0;\n    }\n    @media screen and (max-width: 500px) {\n      ul li .info {\n        display: block;\n      }\n    }\n  `;\n}\n"]}

package/dist/src/receipts.js

@@ -118,7 +118,7 @@ let IauxMgcReceipts = class IauxMgcReceipts extends LitElement {
                         <ia-button
                           class="link slim"
                           style="--link-button-flex-align-items: center;"
-                          .clickHandler=${async (iauxButton) => {
+                          .clickHandler=${async (e, iauxButton) => {
                     const initialClick = !emailUnavailable;
                     if (initialClick) {
                         // eslint-disable-next-line no-param-reassign

package/dist/src/receipts.js.map

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

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

@@ -18,8 +18,7 @@ describe('IauxMonthlyGivingCircle', () => {
         expect(joinLink.href).to.equal('https://archive.org/donate/?amt=5&contrib_type=monthly&origin=iawww-usrsttng');
     });
     describe('Plans View:', () => {
-        it('displays list & shows form', async () => {
-            var _a, _b;
+        it('displays list', async () => {
             const el = await fixture(html `<ia-monthly-giving-circle
           .plans=${[
                 new MonthlyPlan({
@@ -48,21 +47,6 @@ describe('IauxMonthlyGivingCircle', () => {
         ></ia-monthly-giving-circle>`);
             expect(el.viewToDisplay).to.equal('plans');
             expect(el.plans.length).to.equal(1);
-            // displays edit plan form
-            el.addEventListener('ShowEditForm', () => {
-                expect(el.viewToDisplay).to.equal('editPlan');
-            });
-            const mgcPlans = el.querySelector('ia-mgc-plans');
-            expect(mgcPlans).to.exist;
-            const editPlanButton = (_a = mgcPlans.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector('ia-button.edit-donation');
-            expect(editPlanButton).to.exist;
-            const innerButton = (_b = editPlanButton.shadowRoot) === null || _b === void 0 ? void 0 : _b.querySelector('button');
-            expect(innerButton).to.exist;
-            innerButton.click();
-            await el.updateComplete;
-            expect(el.viewToDisplay).to.equal('editPlan');
-            const editPlanForm = el.querySelector('ia-mgc-edit-plan');
-            expect(editPlanForm).to.exist;
         });
     });
     describe('Receipts View - CTA & onclick display:', () => {

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

@@ -1 +1 @@
-{"version":3,"file":"monthly-giving-circle.test.js","sourceRoot":"","sources":["../../test/monthly-giving-circle.test.ts"],"names":[],"mappings":"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","sourcesContent":["// eslint-disable-next-line import/no-extraneous-dependencies\nimport { html, fixture, expect } from '@open-wc/testing';\n\nimport type { MonthlyGivingCircle } from '../src/monthly-giving-circle';\n\nimport '../src/monthly-giving-circle';\nimport type { IauxButton } from '../src/presentational/ia-button';\nimport { MonthlyPlan } from '../src/models/plan';\n\ndescribe('IauxMonthlyGivingCircle', () => {\n  it('displays welcome message on load', async () => {\n    const el = await fixture<MonthlyGivingCircle>(\n      html`<ia-monthly-giving-circle></ia-monthly-giving-circle>`\n    );\n\n    expect(el.viewToDisplay).to.equal('welcome');\n\n    const titleEl = el.querySelector('ia-mgc-title');\n    expect(titleEl).to.not.be.null;\n    expect(titleEl!.getAttribute('titlestyle')).to.equal('heart');\n    expect(titleEl!.children.length).to.equal(2);\n    expect((titleEl!.children[0] as HTMLElement).innerText).to.equal(\n      'Monthly Giving Circle'\n    );\n\n    const welcomeEl = el.querySelector('ia-mgc-welcome');\n    const joinLink = welcomeEl!.shadowRoot?.querySelector(\n      'a.join-mgc'\n    ) as HTMLAnchorElement;\n    expect(joinLink).to.not.be.null;\n    expect(joinLink.href).to.equal(\n      'https://archive.org/donate/?amt=5&contrib_type=monthly&origin=iawww-usrsttng'\n    );\n  });\n\n  describe('Plans View:', () => {\n    it('displays list & shows form', async () => {\n      const el = await fixture<MonthlyGivingCircle>(\n        html`<ia-monthly-giving-circle\n          .plans=${[\n            new MonthlyPlan({\n              token: 'a.va.lid.T0ken',\n              amount: 5,\n              currency: 'USD',\n              start_date: '2024-07-01 00:00:00',\n              is_test: true,\n              btdata: {\n                billingDayOfMonth: 22,\n                nextBillingDate: {\n                  date: '2024-08-22 00:00:00.000000',\n                  timezone_type: 3,\n                  timezone: 'UTC',\n                },\n                status: 'Active',\n                paymentMethodType: 'Venmo',\n                last4: null,\n                cardType: null,\n                expirationMonth: null,\n                expirationYear: null,\n                venmoUsername: 'venmojoe',\n              },\n            }),\n          ]}\n        ></ia-monthly-giving-circle>`\n      );\n\n      expect(el.viewToDisplay).to.equal('plans');\n      expect(el.plans.length).to.equal(1);\n\n      // displays edit plan form\n      el.addEventListener('ShowEditForm', () => {\n        expect(el.viewToDisplay).to.equal('editPlan');\n      });\n\n      const mgcPlans = el.querySelector('ia-mgc-plans');\n      expect(mgcPlans).to.exist;\n\n      const editPlanButton = mgcPlans!.shadowRoot?.querySelector(\n        'ia-button.edit-donation'\n      ) as IauxButton;\n      expect(editPlanButton).to.exist;\n      const innerButton = editPlanButton.shadowRoot?.querySelector('button');\n      expect(innerButton).to.exist;\n      innerButton!.click();\n\n      await el.updateComplete;\n\n      expect(el.viewToDisplay).to.equal('editPlan');\n\n      const editPlanForm = el.querySelector('ia-mgc-edit-plan');\n      expect(editPlanForm).to.exist;\n    });\n  });\n\n  describe('Receipts View - CTA & onclick display:', () => {\n    it('Displays receipts CTA when receipts are available', async () => {\n      const el = await fixture<MonthlyGivingCircle>(\n        html`<ia-monthly-giving-circle\n          .receipts=${[\n            {\n              amount: 9999.99,\n              date: '2020-09-01',\n              donor: 'John Doe',\n              paymentMethod: 'Credit Card',\n              status: 'Completed',\n              id: 'foo-id-1',\n            },\n          ]}\n        ></ia-monthly-giving-circle>`\n      );\n\n      const titleEl = el.querySelector('ia-mgc-title');\n      const receiptsButton = titleEl!.querySelector('ia-button') as IauxButton;\n      expect(receiptsButton).to.exist;\n      expect(receiptsButton!.innerText).to.equal(\n        'View recent donation history'\n      );\n\n      el.receipts = [];\n      await el.updateComplete;\n\n      const newTitleEl = el.querySelector('ia-mgc-title');\n      expect(newTitleEl).to.exist;\n\n      const newReceiptsButton = newTitleEl!.querySelector('button');\n      expect(newReceiptsButton).to.not.exist;\n    });\n\n    it('Display receipts table when receipts CTA is clicked', async () => {\n      const el = await fixture<MonthlyGivingCircle>(\n        html`<ia-monthly-giving-circle\n          .receipts=${[\n            {\n              amount: 9999.99,\n              date: '2020-09-01',\n              donor: 'John Doe',\n              paymentMethod: 'Credit Card',\n              status: 'Completed',\n              id: 'foo-id-1',\n            },\n          ]}\n        ></ia-monthly-giving-circle>`\n      );\n\n      const titleEl = el.querySelector('ia-mgc-title');\n      expect(titleEl).to.exist;\n\n      const receiptsButton = titleEl!.querySelector('ia-button') as IauxButton;\n\n      expect(receiptsButton.innerText).to.equal('View recent donation history');\n\n      const innerButton = receiptsButton.shadowRoot?.querySelector(\n        'button'\n      ) as HTMLButtonElement;\n      innerButton.click();\n\n      await el.updateComplete;\n\n      expect(el.viewToDisplay).to.equal('receipts');\n\n      const welcomeEl = el.querySelector('ia-mgc-welcome');\n      expect(welcomeEl).to.not.exist;\n\n      // shows proper title\n      const titleEl2 = el.querySelector('ia-mgc-title');\n      expect(titleEl2).to.exist;\n      expect(titleEl2!.getAttribute('titlestyle')).to.equal('default');\n      const titleValueEl = titleEl2?.querySelector(\n        'span[slot=\"title\"]'\n      ) as HTMLSpanElement;\n      expect(titleValueEl).to.exist;\n      expect(titleValueEl.innerText).to.equal('Recent donations');\n\n      // shows back button\n      const backButton = titleEl2?.querySelector(\n        'ia-button#close-receipts'\n      ) as IauxButton;\n      expect(backButton!.innerText).to.equal('Back to account settings');\n\n      // shows receipts element\n      const receiptsEl = el.querySelector('ia-mgc-receipts');\n      expect(receiptsEl).to.exist;\n\n      // goes back to welcome page if back button is clicked\n      // dig into the shadowRoot to get the button\n      backButton.shadowRoot?.querySelector('button')?.click();\n      await el.updateComplete;\n\n      expect(el.viewToDisplay).to.equal('welcome');\n\n      const titleEl3 = el.querySelector('ia-mgc-title');\n      expect(titleEl3).to.exist;\n      expect(titleEl3!.getAttribute('titlestyle')).to.equal('heart');\n      const welcomeTitle = titleEl3?.querySelector(\n        'span[slot=\"title\"]'\n      ) as HTMLSpanElement;\n      expect(welcomeTitle.innerText).to.equal('Monthly Giving Circle');\n    });\n  });\n});\n"]}
+{"version":3,"file":"monthly-giving-circle.test.js","sourceRoot":"","sources":["../../test/monthly-giving-circle.test.ts"],"names":[],"mappings":"AAAA,6DAA6D;AAC7D,OAAO,EAAE,IAAI,EAAE,OAAO,EAAE,MAAM,EAAE,MAAM,kBAAkB,CAAC;AAIzD,OAAO,8BAA8B,CAAC;AAEtC,OAAO,EAAE,WAAW,EAAE,MAAM,oBAAoB,CAAC;AAEjD,QAAQ,CAAC,yBAAyB,EAAE,GAAG,EAAE;IACvC,EAAE,CAAC,kCAAkC,EAAE,KAAK,IAAI,EAAE;;QAChD,MAAM,EAAE,GAAG,MAAM,OAAO,CACtB,IAAI,CAAA,uDAAuD,CAC5D,CAAC;QAEF,MAAM,CAAC,EAAE,CAAC,aAAa,CAAC,CAAC,EAAE,CAAC,KAAK,CAAC,SAAS,CAAC,CAAC;QAE7C,MAAM,OAAO,GAAG,EAAE,CAAC,aAAa,CAAC,cAAc,CAAC,CAAC;QACjD,MAAM,CAAC,OAAO,CAAC,CAAC,EAAE,CAAC,GAAG,CAAC,EAAE,CAAC,IAAI,CAAC;QAC/B,MAAM,CAAC,OAAQ,CAAC,YAAY,CAAC,YAAY,CAAC,CAAC,CAAC,EAAE,CAAC,KAAK,CAAC,OAAO,CAAC,CAAC;QAC9D,MAAM,CAAC,OAAQ,CAAC,QAAQ,CAAC,MAAM,CAAC,CAAC,EAAE,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC;QAC7C,MAAM,CAAE,OAAQ,CAAC,QAAQ,CAAC,CAAC,CAAiB,CAAC,SAAS,CAAC,CAAC,EAAE,CAAC,KAAK,CAC9D,uBAAuB,CACxB,CAAC;QAEF,MAAM,SAAS,GAAG,EAAE,CAAC,aAAa,CAAC,gBAAgB,CAAC,CAAC;QACrD,MAAM,QAAQ,GAAG,MAAA,SAAU,CAAC,UAAU,0CAAE,aAAa,CACnD,YAAY,CACQ,CAAC;QACvB,MAAM,CAAC,QAAQ,CAAC,CAAC,EAAE,CAAC,GAAG,CAAC,EAAE,CAAC,IAAI,CAAC;QAChC,MAAM,CAAC,QAAQ,CAAC,IAAI,CAAC,CAAC,EAAE,CAAC,KAAK,CAC5B,8EAA8E,CAC/E,CAAC;IACJ,CAAC,CAAC,CAAC;IAEH,QAAQ,CAAC,aAAa,EAAE,GAAG,EAAE;QAC3B,EAAE,CAAC,eAAe,EAAE,KAAK,IAAI,EAAE;YAC7B,MAAM,EAAE,GAAG,MAAM,OAAO,CACtB,IAAI,CAAA;mBACO;gBACP,IAAI,WAAW,CAAC;oBACd,KAAK,EAAE,gBAAgB;oBACvB,MAAM,EAAE,CAAC;oBACT,QAAQ,EAAE,KAAK;oBACf,UAAU,EAAE,qBAAqB;oBACjC,OAAO,EAAE,IAAI;oBACb,MAAM,EAAE;wBACN,iBAAiB,EAAE,EAAE;wBACrB,eAAe,EAAE;4BACf,IAAI,EAAE,4BAA4B;4BAClC,aAAa,EAAE,CAAC;4BAChB,QAAQ,EAAE,KAAK;yBAChB;wBACD,MAAM,EAAE,QAAQ;wBAChB,iBAAiB,EAAE,OAAO;wBAC1B,KAAK,EAAE,IAAI;wBACX,QAAQ,EAAE,IAAI;wBACd,eAAe,EAAE,IAAI;wBACrB,cAAc,EAAE,IAAI;wBACpB,aAAa,EAAE,UAAU;qBAC1B;iBACF,CAAC;aACH;qCAC0B,CAC9B,CAAC;YAEF,MAAM,CAAC,EAAE,CAAC,aAAa,CAAC,CAAC,EAAE,CAAC,KAAK,CAAC,OAAO,CAAC,CAAC;YAC3C,MAAM,CAAC,EAAE,CAAC,KAAK,CAAC,MAAM,CAAC,CAAC,EAAE,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC;QACtC,CAAC,CAAC,CAAC;IACL,CAAC,CAAC,CAAC;IAEH,QAAQ,CAAC,wCAAwC,EAAE,GAAG,EAAE;QACtD,EAAE,CAAC,mDAAmD,EAAE,KAAK,IAAI,EAAE;YACjE,MAAM,EAAE,GAAG,MAAM,OAAO,CACtB,IAAI,CAAA;sBACU;gBACV;oBACE,MAAM,EAAE,OAAO;oBACf,IAAI,EAAE,YAAY;oBAClB,KAAK,EAAE,UAAU;oBACjB,aAAa,EAAE,aAAa;oBAC5B,MAAM,EAAE,WAAW;oBACnB,EAAE,EAAE,UAAU;iBACf;aACF;qCAC0B,CAC9B,CAAC;YAEF,MAAM,OAAO,GAAG,EAAE,CAAC,aAAa,CAAC,cAAc,CAAC,CAAC;YACjD,MAAM,cAAc,GAAG,OAAQ,CAAC,aAAa,CAAC,WAAW,CAAe,CAAC;YACzE,MAAM,CAAC,cAAc,CAAC,CAAC,EAAE,CAAC,KAAK,CAAC;YAChC,MAAM,CAAC,cAAe,CAAC,SAAS,CAAC,CAAC,EAAE,CAAC,KAAK,CACxC,8BAA8B,CAC/B,CAAC;YAEF,EAAE,CAAC,QAAQ,GAAG,EAAE,CAAC;YACjB,MAAM,EAAE,CAAC,cAAc,CAAC;YAExB,MAAM,UAAU,GAAG,EAAE,CAAC,aAAa,CAAC,cAAc,CAAC,CAAC;YACpD,MAAM,CAAC,UAAU,CAAC,CAAC,EAAE,CAAC,KAAK,CAAC;YAE5B,MAAM,iBAAiB,GAAG,UAAW,CAAC,aAAa,CAAC,QAAQ,CAAC,CAAC;YAC9D,MAAM,CAAC,iBAAiB,CAAC,CAAC,EAAE,CAAC,GAAG,CAAC,KAAK,CAAC;QACzC,CAAC,CAAC,CAAC;QAEH,EAAE,CAAC,qDAAqD,EAAE,KAAK,IAAI,EAAE;;YACnE,MAAM,EAAE,GAAG,MAAM,OAAO,CACtB,IAAI,CAAA;sBACU;gBACV;oBACE,MAAM,EAAE,OAAO;oBACf,IAAI,EAAE,YAAY;oBAClB,KAAK,EAAE,UAAU;oBACjB,aAAa,EAAE,aAAa;oBAC5B,MAAM,EAAE,WAAW;oBACnB,EAAE,EAAE,UAAU;iBACf;aACF;qCAC0B,CAC9B,CAAC;YAEF,MAAM,OAAO,GAAG,EAAE,CAAC,aAAa,CAAC,cAAc,CAAC,CAAC;YACjD,MAAM,CAAC,OAAO,CAAC,CAAC,EAAE,CAAC,KAAK,CAAC;YAEzB,MAAM,cAAc,GAAG,OAAQ,CAAC,aAAa,CAAC,WAAW,CAAe,CAAC;YAEzE,MAAM,CAAC,cAAc,CAAC,SAAS,CAAC,CAAC,EAAE,CAAC,KAAK,CAAC,8BAA8B,CAAC,CAAC;YAE1E,MAAM,WAAW,GAAG,MAAA,cAAc,CAAC,UAAU,0CAAE,aAAa,CAC1D,QAAQ,CACY,CAAC;YACvB,WAAW,CAAC,KAAK,EAAE,CAAC;YAEpB,MAAM,EAAE,CAAC,cAAc,CAAC;YAExB,MAAM,CAAC,EAAE,CAAC,aAAa,CAAC,CAAC,EAAE,CAAC,KAAK,CAAC,UAAU,CAAC,CAAC;YAE9C,MAAM,SAAS,GAAG,EAAE,CAAC,aAAa,CAAC,gBAAgB,CAAC,CAAC;YACrD,MAAM,CAAC,SAAS,CAAC,CAAC,EAAE,CAAC,GAAG,CAAC,KAAK,CAAC;YAE/B,qBAAqB;YACrB,MAAM,QAAQ,GAAG,EAAE,CAAC,aAAa,CAAC,cAAc,CAAC,CAAC;YAClD,MAAM,CAAC,QAAQ,CAAC,CAAC,EAAE,CAAC,KAAK,CAAC;YAC1B,MAAM,CAAC,QAAS,CAAC,YAAY,CAAC,YAAY,CAAC,CAAC,CAAC,EAAE,CAAC,KAAK,CAAC,SAAS,CAAC,CAAC;YACjE,MAAM,YAAY,GAAG,QAAQ,aAAR,QAAQ,uBAAR,QAAQ,CAAE,aAAa,CAC1C,oBAAoB,CACF,CAAC;YACrB,MAAM,CAAC,YAAY,CAAC,CAAC,EAAE,CAAC,KAAK,CAAC;YAC9B,MAAM,CAAC,YAAY,CAAC,SAAS,CAAC,CAAC,EAAE,CAAC,KAAK,CAAC,kBAAkB,CAAC,CAAC;YAE5D,oBAAoB;YACpB,MAAM,UAAU,GAAG,QAAQ,aAAR,QAAQ,uBAAR,QAAQ,CAAE,aAAa,CACxC,0BAA0B,CACb,CAAC;YAChB,MAAM,CAAC,UAAW,CAAC,SAAS,CAAC,CAAC,EAAE,CAAC,KAAK,CAAC,0BAA0B,CAAC,CAAC;YAEnE,yBAAyB;YACzB,MAAM,UAAU,GAAG,EAAE,CAAC,aAAa,CAAC,iBAAiB,CAAC,CAAC;YACvD,MAAM,CAAC,UAAU,CAAC,CAAC,EAAE,CAAC,KAAK,CAAC;YAE5B,sDAAsD;YACtD,4CAA4C;YAC5C,MAAA,MAAA,UAAU,CAAC,UAAU,0CAAE,aAAa,CAAC,QAAQ,CAAC,0CAAE,KAAK,EAAE,CAAC;YACxD,MAAM,EAAE,CAAC,cAAc,CAAC;YAExB,MAAM,CAAC,EAAE,CAAC,aAAa,CAAC,CAAC,EAAE,CAAC,KAAK,CAAC,SAAS,CAAC,CAAC;YAE7C,MAAM,QAAQ,GAAG,EAAE,CAAC,aAAa,CAAC,cAAc,CAAC,CAAC;YAClD,MAAM,CAAC,QAAQ,CAAC,CAAC,EAAE,CAAC,KAAK,CAAC;YAC1B,MAAM,CAAC,QAAS,CAAC,YAAY,CAAC,YAAY,CAAC,CAAC,CAAC,EAAE,CAAC,KAAK,CAAC,OAAO,CAAC,CAAC;YAC/D,MAAM,YAAY,GAAG,QAAQ,aAAR,QAAQ,uBAAR,QAAQ,CAAE,aAAa,CAC1C,oBAAoB,CACF,CAAC;YACrB,MAAM,CAAC,YAAY,CAAC,SAAS,CAAC,CAAC,EAAE,CAAC,KAAK,CAAC,uBAAuB,CAAC,CAAC;QACnE,CAAC,CAAC,CAAC;IACL,CAAC,CAAC,CAAC;AACL,CAAC,CAAC,CAAC","sourcesContent":["// eslint-disable-next-line import/no-extraneous-dependencies\nimport { html, fixture, expect } from '@open-wc/testing';\n\nimport type { MonthlyGivingCircle } from '../src/monthly-giving-circle';\n\nimport '../src/monthly-giving-circle';\nimport type { IauxButton } from '../src/presentational/ia-button';\nimport { MonthlyPlan } from '../src/models/plan';\n\ndescribe('IauxMonthlyGivingCircle', () => {\n  it('displays welcome message on load', async () => {\n    const el = await fixture<MonthlyGivingCircle>(\n      html`<ia-monthly-giving-circle></ia-monthly-giving-circle>`\n    );\n\n    expect(el.viewToDisplay).to.equal('welcome');\n\n    const titleEl = el.querySelector('ia-mgc-title');\n    expect(titleEl).to.not.be.null;\n    expect(titleEl!.getAttribute('titlestyle')).to.equal('heart');\n    expect(titleEl!.children.length).to.equal(2);\n    expect((titleEl!.children[0] as HTMLElement).innerText).to.equal(\n      'Monthly Giving Circle'\n    );\n\n    const welcomeEl = el.querySelector('ia-mgc-welcome');\n    const joinLink = welcomeEl!.shadowRoot?.querySelector(\n      'a.join-mgc'\n    ) as HTMLAnchorElement;\n    expect(joinLink).to.not.be.null;\n    expect(joinLink.href).to.equal(\n      'https://archive.org/donate/?amt=5&contrib_type=monthly&origin=iawww-usrsttng'\n    );\n  });\n\n  describe('Plans View:', () => {\n    it('displays list', async () => {\n      const el = await fixture<MonthlyGivingCircle>(\n        html`<ia-monthly-giving-circle\n          .plans=${[\n            new MonthlyPlan({\n              token: 'a.va.lid.T0ken',\n              amount: 5,\n              currency: 'USD',\n              start_date: '2024-07-01 00:00:00',\n              is_test: true,\n              btdata: {\n                billingDayOfMonth: 22,\n                nextBillingDate: {\n                  date: '2024-08-22 00:00:00.000000',\n                  timezone_type: 3,\n                  timezone: 'UTC',\n                },\n                status: 'Active',\n                paymentMethodType: 'Venmo',\n                last4: null,\n                cardType: null,\n                expirationMonth: null,\n                expirationYear: null,\n                venmoUsername: 'venmojoe',\n              },\n            }),\n          ]}\n        ></ia-monthly-giving-circle>`\n      );\n\n      expect(el.viewToDisplay).to.equal('plans');\n      expect(el.plans.length).to.equal(1);\n    });\n  });\n\n  describe('Receipts View - CTA & onclick display:', () => {\n    it('Displays receipts CTA when receipts are available', async () => {\n      const el = await fixture<MonthlyGivingCircle>(\n        html`<ia-monthly-giving-circle\n          .receipts=${[\n            {\n              amount: 9999.99,\n              date: '2020-09-01',\n              donor: 'John Doe',\n              paymentMethod: 'Credit Card',\n              status: 'Completed',\n              id: 'foo-id-1',\n            },\n          ]}\n        ></ia-monthly-giving-circle>`\n      );\n\n      const titleEl = el.querySelector('ia-mgc-title');\n      const receiptsButton = titleEl!.querySelector('ia-button') as IauxButton;\n      expect(receiptsButton).to.exist;\n      expect(receiptsButton!.innerText).to.equal(\n        'View recent donation history'\n      );\n\n      el.receipts = [];\n      await el.updateComplete;\n\n      const newTitleEl = el.querySelector('ia-mgc-title');\n      expect(newTitleEl).to.exist;\n\n      const newReceiptsButton = newTitleEl!.querySelector('button');\n      expect(newReceiptsButton).to.not.exist;\n    });\n\n    it('Display receipts table when receipts CTA is clicked', async () => {\n      const el = await fixture<MonthlyGivingCircle>(\n        html`<ia-monthly-giving-circle\n          .receipts=${[\n            {\n              amount: 9999.99,\n              date: '2020-09-01',\n              donor: 'John Doe',\n              paymentMethod: 'Credit Card',\n              status: 'Completed',\n              id: 'foo-id-1',\n            },\n          ]}\n        ></ia-monthly-giving-circle>`\n      );\n\n      const titleEl = el.querySelector('ia-mgc-title');\n      expect(titleEl).to.exist;\n\n      const receiptsButton = titleEl!.querySelector('ia-button') as IauxButton;\n\n      expect(receiptsButton.innerText).to.equal('View recent donation history');\n\n      const innerButton = receiptsButton.shadowRoot?.querySelector(\n        'button'\n      ) as HTMLButtonElement;\n      innerButton.click();\n\n      await el.updateComplete;\n\n      expect(el.viewToDisplay).to.equal('receipts');\n\n      const welcomeEl = el.querySelector('ia-mgc-welcome');\n      expect(welcomeEl).to.not.exist;\n\n      // shows proper title\n      const titleEl2 = el.querySelector('ia-mgc-title');\n      expect(titleEl2).to.exist;\n      expect(titleEl2!.getAttribute('titlestyle')).to.equal('default');\n      const titleValueEl = titleEl2?.querySelector(\n        'span[slot=\"title\"]'\n      ) as HTMLSpanElement;\n      expect(titleValueEl).to.exist;\n      expect(titleValueEl.innerText).to.equal('Recent donations');\n\n      // shows back button\n      const backButton = titleEl2?.querySelector(\n        'ia-button#close-receipts'\n      ) as IauxButton;\n      expect(backButton!.innerText).to.equal('Back to account settings');\n\n      // shows receipts element\n      const receiptsEl = el.querySelector('ia-mgc-receipts');\n      expect(receiptsEl).to.exist;\n\n      // goes back to welcome page if back button is clicked\n      // dig into the shadowRoot to get the button\n      backButton.shadowRoot?.querySelector('button')?.click();\n      await el.updateComplete;\n\n      expect(el.viewToDisplay).to.equal('welcome');\n\n      const titleEl3 = el.querySelector('ia-mgc-title');\n      expect(titleEl3).to.exist;\n      expect(titleEl3!.getAttribute('titlestyle')).to.equal('heart');\n      const welcomeTitle = titleEl3?.querySelector(\n        'span[slot=\"title\"]'\n      ) as HTMLSpanElement;\n      expect(welcomeTitle.innerText).to.equal('Monthly Giving Circle');\n    });\n  });\n});\n"]}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@internetarchive/donation-monthly-portal",
-  "version": "4.0.0",
+  "version": "5.0.0",
   "description": "The Internet Archive Monthly Portal",
   "license": "AGPL-3.0-only",
   "main": "dist/index.js",

package/src/monthly-giving-circle.ts

@@ -10,7 +10,6 @@ import './receipts';
 import type { IauxMgcReceipts } from './receipts';
 import './presentational/ia-button';
 import type { MonthlyPlan } from './models/plan';
-import './edit-plan-form';
 
 export type APlanUpdate = {
   plan?: MonthlyPlan;
@@ -35,8 +34,7 @@ export class MonthlyGivingCircle extends LitElement {
   @property({ type: String, reflect: true }) viewToDisplay:
     | 'welcome'
     | 'receipts'
-    | 'plans'
-    | 'editPlan' = 'welcome';
+    | 'plans' = 'welcome';
 
   protected createRenderRoot() {
     return this;
@@ -48,6 +46,10 @@ export class MonthlyGivingCircle extends LitElement {
     }
   }
 
+  protected render() {
+    return html` ${this.sectionTitle} ${this.currentView} `;
+  }
+
   get receiptListElement(): IauxMgcReceipts {
     return this.querySelector('ia-mgc-receipts') as IauxMgcReceipts;
   }
@@ -59,21 +61,6 @@ export class MonthlyGivingCircle extends LitElement {
 
     const { plan, donationId = '' } = update;
     const idToUse = plan?.id ?? donationId;
-    const editingPlanIsUpdating = this.editingThisPlan?.id === idToUse;
-
-    if (editingPlanIsUpdating) {
-      console.log('edit received, mismatch plans', {
-        planCurrentlyEditing: this.editingThisPlan,
-        planReceived: update.plan,
-      });
-      return;
-    }
-
-    if (plan?.hasBeenCancelled) {
-      this.editingThisPlan = undefined;
-      this.viewToDisplay = 'plans';
-      return;
-    }
 
     this.receiptListElement.emailSent({
       id: idToUse,
@@ -82,25 +69,36 @@ export class MonthlyGivingCircle extends LitElement {
   }
 
   /* VIEWS */
-  protected render() {
-    const isEditingPlan =
-      this.viewToDisplay === 'editPlan' && this.editingThisPlan;
-    return html`
-      ${this.sectionTitle}
-      ${isEditingPlan
-        ? html`<ia-mgc-edit-plan
-            .plan=${this.editingThisPlan}
-            .cancelPlanHandler=${(plan: MonthlyPlan) => {
-              console.log('cancelPlan', plan);
-              this.dispatchEvent(
-                new CustomEvent('cancelPlan', {
-                  detail: { plan },
-                })
-              );
-            }}
-          ></ia-mgc-edit-plan>`
-        : this.nonEditView}
-    `;
+  get currentView(): TemplateResult {
+    if (this.viewToDisplay === 'receipts') {
+      return this.receiptsView;
+    }
+
+    if (this.viewToDisplay === 'plans' && this.plans.length) {
+      return this.plansView;
+    }
+
+    return html`<ia-mgc-welcome
+      .patronName=${this.patronName}
+    ></ia-mgc-welcome>`;
+  }
+
+  get receiptsView(): TemplateResult {
+    return html` <ia-mgc-receipts
+      .receipts=${this.receipts}
+      @EmailReceiptRequest=${(event: CustomEvent) => {
+        console.log('EmailReceiptRequest', event.detail);
+        this.dispatchEvent(
+          new CustomEvent('EmailReceiptRequest', {
+            detail: { ...event.detail },
+          })
+        );
+      }}
+    ></ia-mgc-receipts>`;
+  }
+
+  get plansView(): TemplateResult {
+    return html` <ia-mgc-plans .plans=${this.plans}></ia-mgc-plans> `;
   }
 
   get sectionTitle(): TemplateResult {
@@ -143,23 +141,6 @@ export class MonthlyGivingCircle extends LitElement {
         </ia-button>`;
         break;
 
-      case 'editPlan':
-        title = 'Edit plan';
-        titleStyle = 'default';
-        cta = html`<ia-button
-          class="primary"
-          id="close-edit-plan"
-          .clickHandler=${async () => {
-            this.viewToDisplay = this.plans.length ? 'plans' : 'welcome';
-            this.dispatchEvent(new CustomEvent('ShowWelcome'));
-            this.updates = [];
-            await this.updateComplete;
-          }}
-        >
-          Back to account settings
-        </ia-button>`;
-        break;
-
       default:
         title = 'Monthly Giving Circle';
         titleStyle = 'heart';
@@ -176,40 +157,4 @@ export class MonthlyGivingCircle extends LitElement {
       </ia-mgc-title>
     `;
   }
-
-  get nonEditView(): TemplateResult {
-    if (this.viewToDisplay === 'receipts') {
-      return html`
-        <ia-mgc-receipts
-          .receipts=${this.receipts}
-          @EmailReceiptRequest=${(event: CustomEvent) => {
-            console.log('EmailReceiptRequest', event.detail);
-            this.dispatchEvent(
-              new CustomEvent('EmailReceiptRequest', {
-                detail: { ...event.detail },
-              })
-            );
-          }}
-        ></ia-mgc-receipts>
-      `;
-    }
-
-    return html`
-      ${this.viewToDisplay === 'plans' && this.plans.length
-        ? html`
-            <ia-mgc-plans
-              @editThisPlan=${async (event: CustomEvent) => {
-                this.editingThisPlan = event.detail.plan;
-                this.viewToDisplay = 'editPlan';
-                this.dispatchEvent(new Event('ShowEditForm'));
-                await this.updateComplete;
-              }}
-              .plans=${this.plans}
-            ></ia-mgc-plans>
-          `
-        : html`<ia-mgc-welcome
-            .patronName=${this.patronName}
-          ></ia-mgc-welcome>`}
-    `;
-  }
 }

package/src/plans.ts

@@ -4,13 +4,14 @@ import { customElement, property } from 'lit/decorators.js';
 
 import type { MonthlyPlan } from './models/plan';
 
-import './presentational/ia-button';
-import type { IauxButton } from './presentational/ia-button';
-
 @customElement('ia-mgc-plans')
 export class IauxMgcPlans extends LitElement {
   @property({ type: Array }) plans = [];
 
+  mailToText(): string {
+    return `mailto:donations@archive.org?subject=I'd like to update my monthly donation`;
+  }
+
   protected render() {
     return html`
       <section class="monthly-giving-circle">
@@ -26,10 +27,6 @@ export class IauxMgcPlans extends LitElement {
               ? `...${plan.payment?.last4}`
               : 'CC number not found';
 
-            const ctaText = plan.plan.isCancelled
-              ? 'Plan is cancelled'
-              : 'Manage this monthly donation';
-
             return html`
               <li class=${`${plan.plan.isCancelled ? 'cancelled' : ''}`}>
                 <div class="info">
@@ -80,20 +77,10 @@ export class IauxMgcPlans extends LitElement {
                     <p>${plan.nextBillingDate}</p>
                   </div>
                 </div>
-                <ia-button
-                  class="ia-button link edit-donation"
-                  .isDisabled=${plan.plan.isCancelled}
-                  .clickHandler=${async (e: Event, iaButton: IauxButton) => {
-                    // disable button
-                    iaButton.isDisabled = true;
-                    // open form
-                    this.dispatchEvent(
-                      new CustomEvent('editThisPlan', { detail: { plan } })
-                    );
-                  }}
-                >
-                  ${ctaText}
-                </ia-button>
+                <p class="email-edit-plan">
+                  To update your monthly plan, please email us at
+                  <a href=${this.mailToText}>donations@archive.org</a>.
+                </p>
               </li>
             `;
           })}
@@ -179,6 +166,9 @@ export class IauxMgcPlans extends LitElement {
       margin: 0;
     }
 
+    p.email-edit-plan {
+      margin: 10px 0 0;
+    }
     @media screen and (max-width: 500px) {
       ul li .info {
         display: block;

package/src/receipts.ts

@@ -148,7 +148,10 @@ export class IauxMgcReceipts extends LitElement {
                         <ia-button
                           class="link slim"
                           style="--link-button-flex-align-items: center;"
-                          .clickHandler=${async (iauxButton: IauxButton) => {
+                          .clickHandler=${async (
+                            e: Event,
+                            iauxButton: IauxButton
+                          ) => {
                             const initialClick = !emailUnavailable;
                             if (initialClick) {
                               // eslint-disable-next-line no-param-reassign