@internetarchive/donation-monthly-portal 4.0.0 → 6.0.0

package/dist/src/edit-plan-form.d.ts

@@ -1,8 +1,18 @@
 import { LitElement } from 'lit';
 import type { MonthlyPlan } from './models/plan';
 import './form-sections/cancel';
+import './form-sections/amount';
 export declare class IauxEditPlanForm extends LitElement {
     plan?: MonthlyPlan;
     cancelPlanHandler?: (plan: MonthlyPlan) => void;
+    updateAmountHandler?: (plan: MonthlyPlan, amountUpdates: {
+        amount: number;
+        baseAmount: number;
+        coverFees: boolean;
+        feeCovered: number;
+    }) => void;
+    createRenderRoot(): this;
+    amountUpdates(status: 'success' | 'fail'): void;
     render(): import("lit").TemplateResult<1>;
+    mailToText(): string;
 }

package/dist/src/edit-plan-form.js

@@ -2,23 +2,44 @@ import { __decorate } from "tslib";
 import { LitElement, html } from 'lit';
 import { customElement, property } from 'lit/decorators.js';
 import './form-sections/cancel';
+import './form-sections/amount';
 let IauxEditPlanForm = class IauxEditPlanForm extends LitElement {
+    createRenderRoot() {
+        return this;
+    }
+    amountUpdates(status) {
+        const amountForm = this.querySelector('ia-mgc-edit-plan-amount');
+        amountForm.amountUpdated(status);
+    }
     render() {
         return html `
       <section class="mgc-edit-plan">
-        <hr />
-        <ia-mgc-cancel-plan
+        <ia-mgc-edit-plan-amount
           .plan=${this.plan}
-          @cancelPlan=${() => {
+          @updateAmount=${(e) => {
             var _a;
+            const { amount, baseAmount, coverFees, feeCovered } = e.detail;
             if (this.plan) {
-                (_a = this.cancelPlanHandler) === null || _a === void 0 ? void 0 : _a.call(this, this.plan);
+                (_a = this.updateAmountHandler) === null || _a === void 0 ? void 0 : _a.call(this, this.plan, {
+                    amount,
+                    baseAmount,
+                    coverFees,
+                    feeCovered,
+                });
             }
         }}
-        ></ia-mgc-cancel-plan>
+        ></ia-mgc-edit-plan-amount>
+        <hr />
+        <p class="email-edit-plan">
+          Need to update your plan further? Please email us at
+          <a href=${this.mailToText}>donations@archive.org</a>.
+        </p>
       </section>
     `;
     }
+    mailToText() {
+        return `mailto:donations@archive.org?subject=I'd like to update my monthly donation`;
+    }
 };
 __decorate([
     property({ type: Object })
@@ -26,6 +47,9 @@ __decorate([
 __decorate([
     property({ type: Object })
 ], IauxEditPlanForm.prototype, "cancelPlanHandler", void 0);
+__decorate([
+    property({ type: Object })
+], IauxEditPlanForm.prototype, "updateAmountHandler", void 0);
 IauxEditPlanForm = __decorate([
     customElement('ia-mgc-edit-plan')
 ], IauxEditPlanForm);

package/dist/src/edit-plan-form.js.map

@@ -1 +1 @@
-{"version":3,"file":"edit-plan-form.js","sourceRoot":"","sources":["../../src/edit-plan-form.ts"],"names":[],"mappings":";AAAA,OAAO,EAAE,UAAU,EAAE,IAAI,EAAE,MAAM,KAAK,CAAC;AACvC,OAAO,EAAE,aAAa,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAC;AAG5D,OAAO,wBAAwB,CAAC;AAGhC,IAAa,gBAAgB,GAA7B,MAAa,gBAAiB,SAAQ,UAAU;IAK9C,MAAM;QACJ,OAAO,IAAI,CAAA;;;;kBAIG,IAAI,CAAC,IAAI;wBACH,GAAG,EAAE;;YACjB,IAAI,IAAI,CAAC,IAAI,EAAE;gBACb,MAAA,IAAI,CAAC,iBAAiB,qDAAG,IAAI,CAAC,IAAI,CAAC,CAAC;aACrC;QACH,CAAC;;;KAGN,CAAC;IACJ,CAAC;CACF,CAAA;AAnB6B;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;8CAAoB;AAEnB;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;2DAAiD;AAHjE,gBAAgB;IAD5B,aAAa,CAAC,kBAAkB,CAAC;GACrB,gBAAgB,CAoB5B;SApBY,gBAAgB","sourcesContent":["import { LitElement, html } from 'lit';\nimport { customElement, property } from 'lit/decorators.js';\n\nimport type { MonthlyPlan } from './models/plan';\nimport './form-sections/cancel';\n\n@customElement('ia-mgc-edit-plan')\nexport class IauxEditPlanForm extends LitElement {\n  @property({ type: Object }) plan?: MonthlyPlan;\n\n  @property({ type: Object }) cancelPlanHandler?: (plan: MonthlyPlan) => void;\n\n  render() {\n    return html`\n      <section class=\"mgc-edit-plan\">\n        <hr />\n        <ia-mgc-cancel-plan\n          .plan=${this.plan}\n          @cancelPlan=${() => {\n            if (this.plan) {\n              this.cancelPlanHandler?.(this.plan);\n            }\n          }}\n        ></ia-mgc-cancel-plan>\n      </section>\n    `;\n  }\n}\n"]}
+{"version":3,"file":"edit-plan-form.js","sourceRoot":"","sources":["../../src/edit-plan-form.ts"],"names":[],"mappings":";AAAA,OAAO,EAAE,UAAU,EAAE,IAAI,EAAE,MAAM,KAAK,CAAC;AACvC,OAAO,EAAE,aAAa,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAC;AAG5D,OAAO,wBAAwB,CAAC;AAChC,OAAO,wBAAwB,CAAC;AAIhC,IAAa,gBAAgB,GAA7B,MAAa,gBAAiB,SAAQ,UAAU;IAe9C,gBAAgB;QACd,OAAO,IAAI,CAAC;IACd,CAAC;IAED,aAAa,CAAC,MAA0B;QACtC,MAAM,UAAU,GAAG,IAAI,CAAC,aAAa,CACnC,yBAAyB,CACL,CAAC;QACvB,UAAW,CAAC,aAAa,CAAC,MAAM,CAAC,CAAC;IACpC,CAAC;IAED,MAAM;QACJ,OAAO,IAAI,CAAA;;;kBAGG,IAAI,CAAC,IAAI;0BACD,CAAC,CAAc,EAAE,EAAE;;YACjC,MAAM,EAAE,MAAM,EAAE,UAAU,EAAE,SAAS,EAAE,UAAU,EAAE,GAAG,CAAC,CAAC,MAAM,CAAC;YAC/D,IAAI,IAAI,CAAC,IAAI,EAAE;gBACb,MAAA,IAAI,CAAC,mBAAmB,qDAAG,IAAI,CAAC,IAAI,EAAE;oBACpC,MAAM;oBACN,UAAU;oBACV,SAAS;oBACT,UAAU;iBACX,CAAC,CAAC;aACJ;QACH,CAAC;;;;;oBAKS,IAAI,CAAC,UAAU;;;KAG9B,CAAC;IACJ,CAAC;IAED,UAAU;QACR,OAAO,6EAA6E,CAAC;IACvF,CAAC;CACF,CAAA;AAtD6B;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;8CAAoB;AAEnB;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;2DAAiD;AAEhD;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;6DAQjB;AAbC,gBAAgB;IAD5B,aAAa,CAAC,kBAAkB,CAAC;GACrB,gBAAgB,CAuD5B;SAvDY,gBAAgB","sourcesContent":["import { LitElement, html } from 'lit';\nimport { customElement, property } from 'lit/decorators.js';\n\nimport type { MonthlyPlan } from './models/plan';\nimport './form-sections/cancel';\nimport './form-sections/amount';\nimport type { MGCEditPlanAmount } from './form-sections/amount';\n\n@customElement('ia-mgc-edit-plan')\nexport class IauxEditPlanForm extends LitElement {\n  @property({ type: Object }) plan?: MonthlyPlan;\n\n  @property({ type: Object }) cancelPlanHandler?: (plan: MonthlyPlan) => void;\n\n  @property({ type: Object }) updateAmountHandler?: (\n    plan: MonthlyPlan,\n    amountUpdates: {\n      amount: number;\n      baseAmount: number;\n      coverFees: boolean;\n      feeCovered: number;\n    }\n  ) => void;\n\n  createRenderRoot() {\n    return this;\n  }\n\n  amountUpdates(status: 'success' | 'fail') {\n    const amountForm = this.querySelector(\n      'ia-mgc-edit-plan-amount'\n    ) as MGCEditPlanAmount;\n    amountForm!.amountUpdated(status);\n  }\n\n  render() {\n    return html`\n      <section class=\"mgc-edit-plan\">\n        <ia-mgc-edit-plan-amount\n          .plan=${this.plan}\n          @updateAmount=${(e: CustomEvent) => {\n            const { amount, baseAmount, coverFees, feeCovered } = e.detail;\n            if (this.plan) {\n              this.updateAmountHandler?.(this.plan, {\n                amount,\n                baseAmount,\n                coverFees,\n                feeCovered,\n              });\n            }\n          }}\n        ></ia-mgc-edit-plan-amount>\n        <hr />\n        <p class=\"email-edit-plan\">\n          Need to update your plan further? Please email us at\n          <a href=${this.mailToText}>donations@archive.org</a>.\n        </p>\n      </section>\n    `;\n  }\n\n  mailToText(): string {\n    return `mailto:donations@archive.org?subject=I'd like to update my monthly donation`;\n  }\n}\n"]}

package/dist/src/form-sections/amount.d.ts

@@ -0,0 +1,29 @@
+import { LitElement, PropertyValues, TemplateResult } from 'lit';
+import '@internetarchive/donation-form-section';
+import { DonationPaymentInfo } from '@internetarchive/donation-form-data-models';
+import type { MonthlyPlan } from '../models/plan';
+import '../presentational/ia-button';
+import '../presentational/mgc-update-status';
+export declare class MGCEditPlanAmount extends LitElement {
+    plan?: MonthlyPlan;
+    donationPaymentInfo?: DonationPaymentInfo;
+    newAmount: number;
+    currentlyEditing: boolean;
+    coverFees: boolean;
+    updateMessage: string;
+    errorMessage: string;
+    updateStatus: 'success' | 'fail' | '';
+    form: HTMLFormElement;
+    updated(changed: PropertyValues): void;
+    protected render(): TemplateResult<1>;
+    amountUpdated(status: 'success' | 'fail'): Promise<void>;
+    requestAmountUpdate(e: Event): void;
+    captureAmountChanges(newAmount?: number): void;
+    closeForm(): void;
+    clearInputField(): void;
+    clearStatusMessaging(): Promise<void>;
+    totalAmountWithFees(): number;
+    get coveredFeesText(): string;
+    get editAmountForm(): TemplateResult;
+    static styles: import("lit").CSSResult;
+}

package/dist/src/form-sections/amount.js

@@ -0,0 +1,316 @@
+import { __decorate } from "tslib";
+import { LitElement, html, nothing, css, } from 'lit';
+import { customElement, property, query } from 'lit/decorators.js';
+import '@internetarchive/donation-form-section';
+import { DonationPaymentInfo, DonationType, } from '@internetarchive/donation-form-data-models';
+import '../presentational/ia-button';
+import '../presentational/mgc-update-status';
+let MGCEditPlanAmount = class MGCEditPlanAmount extends LitElement {
+    constructor() {
+        super(...arguments);
+        this.newAmount = 0;
+        this.currentlyEditing = false;
+        this.coverFees = false;
+        this.updateMessage = '';
+        this.errorMessage = '';
+        this.updateStatus = '';
+    }
+    updated(changed) {
+        if (changed.has('plan') && this.plan) {
+            this.captureAmountChanges();
+        }
+        if (changed.has('coverFees')) {
+            this.captureAmountChanges();
+        }
+        if (changed.has('currentlyEditing') && this.currentlyEditing) {
+            this.form.focus();
+        }
+        if (changed.has('donationPaymentInfo') && !this.donationPaymentInfo) {
+            this.captureAmountChanges();
+        }
+    }
+    render() {
+        var _a;
+        return html `
+      <section>
+        <donation-form-section badgemode="hidebadge" headline="Amount">
+          ${!this.currentlyEditing
+            ? html ` <p class="current-amount">
+                  USD $${(_a = this.plan) === null || _a === void 0 ? void 0 : _a.amount}
+                  <ia-mgc-update-status .status=${this.updateStatus}
+                    >${this.updateMessage}</ia-mgc-update-status
+                  >
+                </p>
+                <ia-button
+                  id="edit-amount"
+                  class="ia-button link"
+                  .clickHandler=${() => {
+                this.currentlyEditing = true;
+                this.clearStatusMessaging();
+            }}
+                >
+                  Edit...
+                </ia-button>`
+            : nothing}
+          ${this.currentlyEditing ? this.editAmountForm : nothing}
+        </donation-form-section>
+      </section>
+    `;
+    }
+    /* External Function that is called by consumer to tell the form there has been data update */
+    async amountUpdated(status) {
+        this.clearInputField();
+        this.updateStatus = status;
+        this.updateMessage =
+            status === 'success' ? 'Amount updated' : 'Failed. Try again.';
+        if (status === 'success') {
+            this.closeForm();
+            await this.updateComplete;
+            this.updateStatus = status;
+            this.updateMessage = 'Amount updated';
+            return;
+        }
+        this.form.querySelector('ia-button#update-amount').isDisabled = false;
+        this.captureAmountChanges();
+        await this.updateComplete;
+    }
+    /* Dispatches amount change request */
+    requestAmountUpdate(e) {
+        var _a, _b, _c, _d, _e;
+        e.preventDefault();
+        const input = this.form.querySelector('input[name="amount"]');
+        this.newAmount = Number(input.value);
+        this.captureAmountChanges(this.newAmount);
+        console.log('<plan-amount> - update amount', {
+            newValue: this.newAmount,
+            oldValue: (_a = this.plan) === null || _a === void 0 ? void 0 : _a.plan.amount,
+            display: (_b = this.donationPaymentInfo) === null || _b === void 0 ? void 0 : _b.amount,
+        });
+        const newAmount = Number(DonationPaymentInfo.calculateTotal(Number((_c = this.donationPaymentInfo) === null || _c === void 0 ? void 0 : _c.amount), this.coverFees));
+        this.dispatchEvent(new CustomEvent('updateAmount', {
+            detail: {
+                plan: this.plan,
+                amount: newAmount,
+                baseAmount: (_d = this.donationPaymentInfo) === null || _d === void 0 ? void 0 : _d.amount,
+                coverFees: this.coverFees,
+                feeCovered: (_e = this.donationPaymentInfo) === null || _e === void 0 ? void 0 : _e.feeAmountCovered,
+            },
+        }));
+    }
+    /* captures form changes */
+    captureAmountChanges(newAmount) {
+        if (!this.donationPaymentInfo && this.plan) {
+            this.donationPaymentInfo = new DonationPaymentInfo({
+                donationType: DonationType.Monthly,
+                amount: 0,
+                coverFees: true,
+            });
+            return;
+        }
+        let newPlan;
+        if (newAmount) {
+            newPlan = new DonationPaymentInfo({
+                donationType: DonationType.Monthly,
+                amount: newAmount,
+                coverFees: true,
+            });
+        }
+        else {
+            const amount = this.donationPaymentInfo
+                ? this.donationPaymentInfo.amount
+                : this.plan.amount;
+            newPlan = new DonationPaymentInfo({
+                donationType: DonationType.Monthly,
+                amount,
+                coverFees: true,
+            });
+        }
+        this.donationPaymentInfo = newPlan;
+    }
+    closeForm() {
+        this.clearInputField();
+        this.clearStatusMessaging();
+        this.currentlyEditing = false;
+        this.coverFees = false;
+        this.errorMessage = '';
+    }
+    clearInputField() {
+        const input = this.form.querySelector('input[name="amount"]');
+        input.value = '';
+        this.newAmount = 0;
+        this.donationPaymentInfo = undefined;
+    }
+    async clearStatusMessaging() {
+        this.errorMessage = '';
+        this.updateMessage = '';
+        this.updateStatus = '';
+        await this.updateComplete;
+    }
+    /* DISPLAY */
+    totalAmountWithFees() {
+        if (this.newAmount === 0) {
+            return 0;
+        }
+        return DonationPaymentInfo.calculateTotal(this.newAmount, this.coverFees);
+    }
+    get coveredFeesText() {
+        var _a;
+        return `I'll generously add $${(_a = this.donationPaymentInfo) === null || _a === void 0 ? void 0 : _a.feeAmountCovered} to cover fees.`;
+    }
+    get editAmountForm() {
+        var _a;
+        return html `
+      <section>
+        <form id="edit-plan-amount">
+          <p>Current donation amount: $${(_a = this.plan) === null || _a === void 0 ? void 0 : _a.amount}</p>
+          <div>
+            $
+            <input
+              type="number"
+              id="amount"
+              name="amount"
+              required="true"
+              @focus=${() => this.clearStatusMessaging()}
+              @input=${(e) => {
+            const newAmount = Number(e.target.value);
+            this.captureAmountChanges(newAmount);
+            this.newAmount = newAmount;
+        }}
+            />
+            / month
+          </div>
+          <div>
+            <div class="checkbox-option-container">
+              <input
+                type="checkbox"
+                id="cover-fees"
+                tabindex="0"
+                @change=${(e) => {
+            const input = e.target;
+            const coverFees = input.checked;
+            this.coverFees = coverFees;
+            this.captureAmountChanges();
+        }}
+              />
+              <label for="cover-fees">${this.coveredFeesText}</label>
+            </div>
+            <p>Total: USD $${this.totalAmountWithFees()}</p>
+            <div class="cta-container">
+              <ia-button
+                class="ia-button secondary"
+                .clickHandler=${(e) => {
+            e.preventDefault();
+            this.closeForm();
+        }}
+              >
+                Cancel
+              </ia-button>
+              <ia-button
+                id="update-amount"
+                class="ia-button primary"
+                type="submit"
+                .clickHandler=${async (e, iaButton) => {
+            var _a;
+            this.clearStatusMessaging();
+            if (!this.newAmount) {
+                this.errorMessage = 'Please enter a new amount';
+                return;
+            }
+            // eslint-disable-next-line no-param-reassign
+            iaButton.isDisabled = true;
+            await iaButton.updateComplete;
+            // check if request is in range
+            const input = this.form.querySelector('input[name="amount"]');
+            const requestedAmount = (_a = Number(input.value)) !== null && _a !== void 0 ? _a : 0;
+            const amountTooLow = requestedAmount < 1;
+            const amountTooHigh = requestedAmount >= 9999;
+            if (amountTooLow) {
+                this.errorMessage = 'Please enter a valid amount';
+            }
+            if (amountTooHigh) {
+                this.errorMessage =
+                    'Amount must be less than $9,999. Would you like to donate more? Please contact us at donations@archive.org';
+            }
+            if (amountTooHigh || amountTooLow) {
+                // eslint-disable-next-line no-param-reassign
+                iaButton.isDisabled = false;
+                await iaButton.updateComplete;
+                return;
+            }
+            this.requestAmountUpdate(e);
+        }}
+              >
+                Update
+              </ia-button>
+              <ia-mgc-update-status .status=${this.updateStatus}
+                >${this.updateMessage}</ia-mgc-update-status
+              >
+            </div>
+          </div>
+          <p class="error">${this.errorMessage}</p>
+        </form>
+      </section>
+    `;
+    }
+};
+MGCEditPlanAmount.styles = css `
+    input#amount {
+      width: 50px;
+    }
+
+    .cta-container {
+      display: flex;
+      flex-direction: row;
+      flex-wrap: wrap;
+      align-content: center;
+      justify-content: flex-start;
+      align-items: center;
+      gap: 10px;
+    }
+
+    p.error {
+      color: var(--mgc-warning-color-dark, #bb0505);
+    }
+
+    ia-mgc-update-status {
+      display: inline-block;
+      margin-left: 1rem;
+    }
+
+    .checkbox-option-container {
+      margin: 10px 0;
+      display: flex;
+    }
+  `;
+__decorate([
+    property({ type: Object })
+], MGCEditPlanAmount.prototype, "plan", void 0);
+__decorate([
+    property({ type: Object })
+], MGCEditPlanAmount.prototype, "donationPaymentInfo", void 0);
+__decorate([
+    property({ type: Number })
+], MGCEditPlanAmount.prototype, "newAmount", void 0);
+__decorate([
+    property({ type: Boolean, reflect: true })
+], MGCEditPlanAmount.prototype, "currentlyEditing", void 0);
+__decorate([
+    property({ type: Boolean })
+], MGCEditPlanAmount.prototype, "coverFees", void 0);
+__decorate([
+    property({ type: String })
+], MGCEditPlanAmount.prototype, "updateMessage", void 0);
+__decorate([
+    property({ type: String })
+], MGCEditPlanAmount.prototype, "errorMessage", void 0);
+__decorate([
+    property({ type: String })
+], MGCEditPlanAmount.prototype, "updateStatus", void 0);
+__decorate([
+    query('form')
+], MGCEditPlanAmount.prototype, "form", void 0);
+MGCEditPlanAmount = __decorate([
+    customElement('ia-mgc-edit-plan-amount')
+], MGCEditPlanAmount);
+export { MGCEditPlanAmount };
+//# sourceMappingURL=amount.js.map

package/dist/src/form-sections/amount.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"amount.js","sourceRoot":"","sources":["../../../src/form-sections/amount.ts"],"names":[],"mappings":";AAAA,OAAO,EACL,UAAU,EACV,IAAI,EAEJ,OAAO,EACP,GAAG,GAEJ,MAAM,KAAK,CAAC;AACb,OAAO,EAAE,aAAa,EAAE,QAAQ,EAAE,KAAK,EAAE,MAAM,mBAAmB,CAAC;AACnE,OAAO,wCAAwC,CAAC;AAChD,OAAO,EACL,mBAAmB,EACnB,YAAY,GACb,MAAM,4CAA4C,CAAC;AAGpD,OAAO,6BAA6B,CAAC;AAErC,OAAO,qCAAqC,CAAC;AAG7C,IAAa,iBAAiB,GAA9B,MAAa,iBAAkB,SAAQ,UAAU;IAAjD;;QAM8B,cAAS,GAAW,CAAC,CAAC;QAEN,qBAAgB,GAAY,KAAK,CAAC;QAEjD,cAAS,GAAY,KAAK,CAAC;QAE5B,kBAAa,GAAW,EAAE,CAAC;QAE3B,iBAAY,GAAW,EAAE,CAAC;QAE1B,iBAAY,GAA4B,EAAE,CAAC;IAqTzE,CAAC;IAjTC,OAAO,CAAC,OAAuB;QAC7B,IAAI,OAAO,CAAC,GAAG,CAAC,MAAM,CAAC,IAAI,IAAI,CAAC,IAAI,EAAE;YACpC,IAAI,CAAC,oBAAoB,EAAE,CAAC;SAC7B;QACD,IAAI,OAAO,CAAC,GAAG,CAAC,WAAW,CAAC,EAAE;YAC5B,IAAI,CAAC,oBAAoB,EAAE,CAAC;SAC7B;QACD,IAAI,OAAO,CAAC,GAAG,CAAC,kBAAkB,CAAC,IAAI,IAAI,CAAC,gBAAgB,EAAE;YAC5D,IAAI,CAAC,IAAI,CAAC,KAAK,EAAE,CAAC;SACnB;QAED,IAAI,OAAO,CAAC,GAAG,CAAC,qBAAqB,CAAC,IAAI,CAAC,IAAI,CAAC,mBAAmB,EAAE;YACnE,IAAI,CAAC,oBAAoB,EAAE,CAAC;SAC7B;IACH,CAAC;IAES,MAAM;;QACd,OAAO,IAAI,CAAA;;;YAGH,CAAC,IAAI,CAAC,gBAAgB;YACtB,CAAC,CAAC,IAAI,CAAA;yBACO,MAAA,IAAI,CAAC,IAAI,0CAAE,MAAM;kDACQ,IAAI,CAAC,YAAY;uBAC5C,IAAI,CAAC,aAAa;;;;;;kCAMP,GAAG,EAAE;gBACnB,IAAI,CAAC,gBAAgB,GAAG,IAAI,CAAC;gBAC7B,IAAI,CAAC,oBAAoB,EAAE,CAAC;YAC9B,CAAC;;;6BAGU;YACjB,CAAC,CAAC,OAAO;YACT,IAAI,CAAC,gBAAgB,CAAC,CAAC,CAAC,IAAI,CAAC,cAAc,CAAC,CAAC,CAAC,OAAO;;;KAG5D,CAAC;IACJ,CAAC;IAED,8FAA8F;IAC9F,KAAK,CAAC,aAAa,CAAC,MAA0B;QAC5C,IAAI,CAAC,eAAe,EAAE,CAAC;QAEvB,IAAI,CAAC,YAAY,GAAG,MAAM,CAAC;QAC3B,IAAI,CAAC,aAAa;YAChB,MAAM,KAAK,SAAS,CAAC,CAAC,CAAC,gBAAgB,CAAC,CAAC,CAAC,oBAAoB,CAAC;QAEjE,IAAI,MAAM,KAAK,SAAS,EAAE;YACxB,IAAI,CAAC,SAAS,EAAE,CAAC;YACjB,MAAM,IAAI,CAAC,cAAc,CAAC;YAE1B,IAAI,CAAC,YAAY,GAAG,MAAM,CAAC;YAC3B,IAAI,CAAC,aAAa,GAAG,gBAAgB,CAAC;YAEtC,OAAO;SACR;QAGC,IAAI,CAAC,IAAI,CAAC,aAAa,CAAC,yBAAyB,CAClD,CAAC,UAAU,GAAG,KAAK,CAAC;QAErB,IAAI,CAAC,oBAAoB,EAAE,CAAC;QAE5B,MAAM,IAAI,CAAC,cAAc,CAAC;IAC5B,CAAC;IAED,sCAAsC;IACtC,mBAAmB,CAAC,CAAQ;;QAC1B,CAAC,CAAC,cAAc,EAAE,CAAC;QAEnB,MAAM,KAAK,GAAG,IAAI,CAAC,IAAI,CAAC,aAAa,CACnC,sBAAsB,CACH,CAAC;QACtB,IAAI,CAAC,SAAS,GAAG,MAAM,CAAC,KAAK,CAAC,KAAK,CAAC,CAAC;QAErC,IAAI,CAAC,oBAAoB,CAAC,IAAI,CAAC,SAAS,CAAC,CAAC;QAE1C,OAAO,CAAC,GAAG,CAAC,+BAA+B,EAAE;YAC3C,QAAQ,EAAE,IAAI,CAAC,SAAS;YACxB,QAAQ,EAAE,MAAA,IAAI,CAAC,IAAI,0CAAE,IAAI,CAAC,MAAM;YAChC,OAAO,EAAE,MAAA,IAAI,CAAC,mBAAmB,0CAAE,MAAM;SAC1C,CAAC,CAAC;QACH,MAAM,SAAS,GAAG,MAAM,CACtB,mBAAmB,CAAC,cAAc,CAChC,MAAM,CAAC,MAAA,IAAI,CAAC,mBAAmB,0CAAE,MAAM,CAAC,EACxC,IAAI,CAAC,SAAS,CACf,CACF,CAAC;QACF,IAAI,CAAC,aAAa,CAChB,IAAI,WAAW,CAAC,cAAc,EAAE;YAC9B,MAAM,EAAE;gBACN,IAAI,EAAE,IAAI,CAAC,IAAI;gBACf,MAAM,EAAE,SAAS;gBACjB,UAAU,EAAE,MAAA,IAAI,CAAC,mBAAmB,0CAAE,MAAM;gBAC5C,SAAS,EAAE,IAAI,CAAC,SAAS;gBACzB,UAAU,EAAE,MAAA,IAAI,CAAC,mBAAmB,0CAAE,gBAAgB;aACvD;SACF,CAAC,CACH,CAAC;IACJ,CAAC;IAED,2BAA2B;IAC3B,oBAAoB,CAAC,SAAkB;QACrC,IAAI,CAAC,IAAI,CAAC,mBAAmB,IAAI,IAAI,CAAC,IAAI,EAAE;YAC1C,IAAI,CAAC,mBAAmB,GAAG,IAAI,mBAAmB,CAAC;gBACjD,YAAY,EAAE,YAAY,CAAC,OAAO;gBAClC,MAAM,EAAE,CAAC;gBACT,SAAS,EAAE,IAAI;aAChB,CAAC,CAAC;YACH,OAAO;SACR;QAED,IAAI,OAAO,CAAC;QACZ,IAAI,SAAS,EAAE;YACb,OAAO,GAAG,IAAI,mBAAmB,CAAC;gBAChC,YAAY,EAAE,YAAY,CAAC,OAAO;gBAClC,MAAM,EAAE,SAAS;gBACjB,SAAS,EAAE,IAAI;aAChB,CAAC,CAAC;SACJ;aAAM;YACL,MAAM,MAAM,GAAG,IAAI,CAAC,mBAAmB;gBACrC,CAAC,CAAC,IAAI,CAAC,mBAAmB,CAAC,MAAM;gBACjC,CAAC,CAAC,IAAI,CAAC,IAAK,CAAC,MAAM,CAAC;YAEtB,OAAO,GAAG,IAAI,mBAAmB,CAAC;gBAChC,YAAY,EAAE,YAAY,CAAC,OAAO;gBAClC,MAAM;gBACN,SAAS,EAAE,IAAI;aAChB,CAAC,CAAC;SACJ;QAED,IAAI,CAAC,mBAAmB,GAAG,OAAO,CAAC;IACrC,CAAC;IAED,SAAS;QACP,IAAI,CAAC,eAAe,EAAE,CAAC;QACvB,IAAI,CAAC,oBAAoB,EAAE,CAAC;QAC5B,IAAI,CAAC,gBAAgB,GAAG,KAAK,CAAC;QAC9B,IAAI,CAAC,SAAS,GAAG,KAAK,CAAC;QACvB,IAAI,CAAC,YAAY,GAAG,EAAE,CAAC;IACzB,CAAC;IAED,eAAe;QACb,MAAM,KAAK,GAAG,IAAI,CAAC,IAAI,CAAC,aAAa,CACnC,sBAAsB,CACH,CAAC;QACtB,KAAK,CAAC,KAAK,GAAG,EAAE,CAAC;QACjB,IAAI,CAAC,SAAS,GAAG,CAAC,CAAC;QACnB,IAAI,CAAC,mBAAmB,GAAG,SAAS,CAAC;IACvC,CAAC;IAED,KAAK,CAAC,oBAAoB;QACxB,IAAI,CAAC,YAAY,GAAG,EAAE,CAAC;QACvB,IAAI,CAAC,aAAa,GAAG,EAAE,CAAC;QACxB,IAAI,CAAC,YAAY,GAAG,EAAE,CAAC;QACvB,MAAM,IAAI,CAAC,cAAc,CAAC;IAC5B,CAAC;IAED,aAAa;IACb,mBAAmB;QACjB,IAAI,IAAI,CAAC,SAAS,KAAK,CAAC,EAAE;YACxB,OAAO,CAAC,CAAC;SACV;QAED,OAAO,mBAAmB,CAAC,cAAc,CAAC,IAAI,CAAC,SAAS,EAAE,IAAI,CAAC,SAAS,CAAC,CAAC;IAC5E,CAAC;IAED,IAAI,eAAe;;QACjB,OAAO,wBAAwB,MAAA,IAAI,CAAC,mBAAmB,0CAAE,gBAAgB,iBAAiB,CAAC;IAC7F,CAAC;IAED,IAAI,cAAc;;QAChB,OAAO,IAAI,CAAA;;;yCAG0B,MAAA,IAAI,CAAC,IAAI,0CAAE,MAAM;;;;;;;;uBAQnC,GAAG,EAAE,CAAC,IAAI,CAAC,oBAAoB,EAAE;uBACjC,CAAC,CAAQ,EAAE,EAAE;YACpB,MAAM,SAAS,GAAG,MAAM,CAAE,CAAC,CAAC,MAA2B,CAAC,KAAK,CAAC,CAAC;YAC/D,IAAI,CAAC,oBAAoB,CAAC,SAAS,CAAC,CAAC;YACrC,IAAI,CAAC,SAAS,GAAG,SAAS,CAAC;QAC7B,CAAC;;;;;;;;;;0BAUW,CAAC,CAAQ,EAAE,EAAE;YACrB,MAAM,KAAK,GAAG,CAAC,CAAC,MAA0B,CAAC;YAC3C,MAAM,SAAS,GAAG,KAAK,CAAC,OAAO,CAAC;YAChC,IAAI,CAAC,SAAS,GAAG,SAAS,CAAC;YAC3B,IAAI,CAAC,oBAAoB,EAAE,CAAC;QAC9B,CAAC;;wCAEuB,IAAI,CAAC,eAAe;;6BAE/B,IAAI,CAAC,mBAAmB,EAAE;;;;gCAIvB,CAAC,CAAQ,EAAE,EAAE;YAC3B,CAAC,CAAC,cAAc,EAAE,CAAC;YACnB,IAAI,CAAC,SAAS,EAAE,CAAC;QACnB,CAAC;;;;;;;;gCAQe,KAAK,EAAE,CAAQ,EAAE,QAAoB,EAAE,EAAE;;YACvD,IAAI,CAAC,oBAAoB,EAAE,CAAC;YAE5B,IAAI,CAAC,IAAI,CAAC,SAAS,EAAE;gBACnB,IAAI,CAAC,YAAY,GAAG,2BAA2B,CAAC;gBAChD,OAAO;aACR;YAED,6CAA6C;YAC5C,QAAuB,CAAC,UAAU,GAAG,IAAI,CAAC;YAC3C,MAAM,QAAQ,CAAC,cAAc,CAAC;YAE9B,+BAA+B;YAC/B,MAAM,KAAK,GAAG,IAAI,CAAC,IAAI,CAAC,aAAa,CACnC,sBAAsB,CACH,CAAC;YACtB,MAAM,eAAe,GAAG,MAAA,MAAM,CAAC,KAAK,CAAC,KAAK,CAAC,mCAAI,CAAC,CAAC;YACjD,MAAM,YAAY,GAAG,eAAe,GAAG,CAAC,CAAC;YACzC,MAAM,aAAa,GAAG,eAAe,IAAI,IAAI,CAAC;YAC9C,IAAI,YAAY,EAAE;gBAChB,IAAI,CAAC,YAAY,GAAG,6BAA6B,CAAC;aACnD;YACD,IAAI,aAAa,EAAE;gBACjB,IAAI,CAAC,YAAY;oBACf,4GAA4G,CAAC;aAChH;YACD,IAAI,aAAa,IAAI,YAAY,EAAE;gBACjC,6CAA6C;gBAC5C,QAAuB,CAAC,UAAU,GAAG,KAAK,CAAC;gBAC5C,MAAM,QAAQ,CAAC,cAAc,CAAC;gBAC9B,OAAO;aACR;YAED,IAAI,CAAC,mBAAmB,CAAC,CAAC,CAAC,CAAC;QAC9B,CAAC;;;;8CAI6B,IAAI,CAAC,YAAY;mBAC5C,IAAI,CAAC,aAAa;;;;6BAIR,IAAI,CAAC,YAAY;;;KAGzC,CAAC;IACJ,CAAC;CA+BF,CAAA;AA7BQ,wBAAM,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA4BlB,CAAC;AAnU0B;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;+CAAoB;AAGnB;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;8DAA2C;AAE1C;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;oDAAuB;AAEN;IAA3C,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;2DAAmC;AAEjD;IAA5B,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,CAAC;oDAA4B;AAE5B;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;wDAA4B;AAE3B;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;uDAA2B;AAE1B;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;uDAA4C;AAExD;IAAd,KAAK,CAAC,MAAM,CAAC;+CAAwB;AAlB3B,iBAAiB;IAD7B,aAAa,CAAC,yBAAyB,CAAC;GAC5B,iBAAiB,CAqU7B;SArUY,iBAAiB","sourcesContent":["import {\n  LitElement,\n  html,\n  PropertyValues,\n  nothing,\n  css,\n  TemplateResult,\n} from 'lit';\nimport { customElement, property, query } from 'lit/decorators.js';\nimport '@internetarchive/donation-form-section';\nimport {\n  DonationPaymentInfo,\n  DonationType,\n} from '@internetarchive/donation-form-data-models';\n\nimport type { MonthlyPlan } from '../models/plan';\nimport '../presentational/ia-button';\nimport type { IauxButton } from '../presentational/ia-button';\nimport '../presentational/mgc-update-status';\n\n@customElement('ia-mgc-edit-plan-amount')\nexport class MGCEditPlanAmount extends LitElement {\n  @property({ type: Object }) plan?: MonthlyPlan;\n\n  // captures the changes made to the amount && calculates the total amount with fees\n  @property({ type: Object }) donationPaymentInfo?: DonationPaymentInfo;\n\n  @property({ type: Number }) newAmount: number = 0;\n\n  @property({ type: Boolean, reflect: true }) currentlyEditing: boolean = false;\n\n  @property({ type: Boolean }) coverFees: boolean = false;\n\n  @property({ type: String }) updateMessage: string = '';\n\n  @property({ type: String }) errorMessage: string = '';\n\n  @property({ type: String }) updateStatus: 'success' | 'fail' | '' = '';\n\n  @query('form') form!: HTMLFormElement;\n\n  updated(changed: PropertyValues) {\n    if (changed.has('plan') && this.plan) {\n      this.captureAmountChanges();\n    }\n    if (changed.has('coverFees')) {\n      this.captureAmountChanges();\n    }\n    if (changed.has('currentlyEditing') && this.currentlyEditing) {\n      this.form.focus();\n    }\n\n    if (changed.has('donationPaymentInfo') && !this.donationPaymentInfo) {\n      this.captureAmountChanges();\n    }\n  }\n\n  protected render() {\n    return html`\n      <section>\n        <donation-form-section badgemode=\"hidebadge\" headline=\"Amount\">\n          ${!this.currentlyEditing\n            ? html` <p class=\"current-amount\">\n                  USD $${this.plan?.amount}\n                  <ia-mgc-update-status .status=${this.updateStatus}\n                    >${this.updateMessage}</ia-mgc-update-status\n                  >\n                </p>\n                <ia-button\n                  id=\"edit-amount\"\n                  class=\"ia-button link\"\n                  .clickHandler=${() => {\n                    this.currentlyEditing = true;\n                    this.clearStatusMessaging();\n                  }}\n                >\n                  Edit...\n                </ia-button>`\n            : nothing}\n          ${this.currentlyEditing ? this.editAmountForm : nothing}\n        </donation-form-section>\n      </section>\n    `;\n  }\n\n  /* External Function that is called by consumer to tell the form there has been data update */\n  async amountUpdated(status: 'success' | 'fail') {\n    this.clearInputField();\n\n    this.updateStatus = status;\n    this.updateMessage =\n      status === 'success' ? 'Amount updated' : 'Failed. Try again.';\n\n    if (status === 'success') {\n      this.closeForm();\n      await this.updateComplete;\n\n      this.updateStatus = status;\n      this.updateMessage = 'Amount updated';\n\n      return;\n    }\n\n    (\n      this.form.querySelector('ia-button#update-amount') as IauxButton\n    ).isDisabled = false;\n\n    this.captureAmountChanges();\n\n    await this.updateComplete;\n  }\n\n  /* Dispatches amount change request */\n  requestAmountUpdate(e: Event): void {\n    e.preventDefault();\n\n    const input = this.form.querySelector(\n      'input[name=\"amount\"]'\n    ) as HTMLInputElement;\n    this.newAmount = Number(input.value);\n\n    this.captureAmountChanges(this.newAmount);\n\n    console.log('<plan-amount> - update amount', {\n      newValue: this.newAmount,\n      oldValue: this.plan?.plan.amount,\n      display: this.donationPaymentInfo?.amount,\n    });\n    const newAmount = Number(\n      DonationPaymentInfo.calculateTotal(\n        Number(this.donationPaymentInfo?.amount),\n        this.coverFees\n      )\n    );\n    this.dispatchEvent(\n      new CustomEvent('updateAmount', {\n        detail: {\n          plan: this.plan,\n          amount: newAmount,\n          baseAmount: this.donationPaymentInfo?.amount,\n          coverFees: this.coverFees,\n          feeCovered: this.donationPaymentInfo?.feeAmountCovered,\n        },\n      })\n    );\n  }\n\n  /* captures form changes */\n  captureAmountChanges(newAmount?: number) {\n    if (!this.donationPaymentInfo && this.plan) {\n      this.donationPaymentInfo = new DonationPaymentInfo({\n        donationType: DonationType.Monthly,\n        amount: 0,\n        coverFees: true,\n      });\n      return;\n    }\n\n    let newPlan;\n    if (newAmount) {\n      newPlan = new DonationPaymentInfo({\n        donationType: DonationType.Monthly,\n        amount: newAmount,\n        coverFees: true,\n      });\n    } else {\n      const amount = this.donationPaymentInfo\n        ? this.donationPaymentInfo.amount\n        : this.plan!.amount;\n\n      newPlan = new DonationPaymentInfo({\n        donationType: DonationType.Monthly,\n        amount,\n        coverFees: true,\n      });\n    }\n\n    this.donationPaymentInfo = newPlan;\n  }\n\n  closeForm() {\n    this.clearInputField();\n    this.clearStatusMessaging();\n    this.currentlyEditing = false;\n    this.coverFees = false;\n    this.errorMessage = '';\n  }\n\n  clearInputField() {\n    const input = this.form.querySelector(\n      'input[name=\"amount\"]'\n    ) as HTMLInputElement;\n    input.value = '';\n    this.newAmount = 0;\n    this.donationPaymentInfo = undefined;\n  }\n\n  async clearStatusMessaging() {\n    this.errorMessage = '';\n    this.updateMessage = '';\n    this.updateStatus = '';\n    await this.updateComplete;\n  }\n\n  /* DISPLAY */\n  totalAmountWithFees(): number {\n    if (this.newAmount === 0) {\n      return 0;\n    }\n\n    return DonationPaymentInfo.calculateTotal(this.newAmount, this.coverFees);\n  }\n\n  get coveredFeesText() {\n    return `I'll generously add $${this.donationPaymentInfo?.feeAmountCovered} to cover fees.`;\n  }\n\n  get editAmountForm(): TemplateResult {\n    return html`\n      <section>\n        <form id=\"edit-plan-amount\">\n          <p>Current donation amount: $${this.plan?.amount}</p>\n          <div>\n            $\n            <input\n              type=\"number\"\n              id=\"amount\"\n              name=\"amount\"\n              required=\"true\"\n              @focus=${() => this.clearStatusMessaging()}\n              @input=${(e: Event) => {\n                const newAmount = Number((e.target as HTMLInputElement).value);\n                this.captureAmountChanges(newAmount);\n                this.newAmount = newAmount;\n              }}\n            />\n            / month\n          </div>\n          <div>\n            <div class=\"checkbox-option-container\">\n              <input\n                type=\"checkbox\"\n                id=\"cover-fees\"\n                tabindex=\"0\"\n                @change=${(e: Event) => {\n                  const input = e.target as HTMLInputElement;\n                  const coverFees = input.checked;\n                  this.coverFees = coverFees;\n                  this.captureAmountChanges();\n                }}\n              />\n              <label for=\"cover-fees\">${this.coveredFeesText}</label>\n            </div>\n            <p>Total: USD $${this.totalAmountWithFees()}</p>\n            <div class=\"cta-container\">\n              <ia-button\n                class=\"ia-button secondary\"\n                .clickHandler=${(e: Event) => {\n                  e.preventDefault();\n                  this.closeForm();\n                }}\n              >\n                Cancel\n              </ia-button>\n              <ia-button\n                id=\"update-amount\"\n                class=\"ia-button primary\"\n                type=\"submit\"\n                .clickHandler=${async (e: Event, iaButton: IauxButton) => {\n                  this.clearStatusMessaging();\n\n                  if (!this.newAmount) {\n                    this.errorMessage = 'Please enter a new amount';\n                    return;\n                  }\n\n                  // eslint-disable-next-line no-param-reassign\n                  (iaButton as IauxButton).isDisabled = true;\n                  await iaButton.updateComplete;\n\n                  // check if request is in range\n                  const input = this.form.querySelector(\n                    'input[name=\"amount\"]'\n                  ) as HTMLInputElement;\n                  const requestedAmount = Number(input.value) ?? 0;\n                  const amountTooLow = requestedAmount < 1;\n                  const amountTooHigh = requestedAmount >= 9999;\n                  if (amountTooLow) {\n                    this.errorMessage = 'Please enter a valid amount';\n                  }\n                  if (amountTooHigh) {\n                    this.errorMessage =\n                      'Amount must be less than $9,999. Would you like to donate more? Please contact us at donations@archive.org';\n                  }\n                  if (amountTooHigh || amountTooLow) {\n                    // eslint-disable-next-line no-param-reassign\n                    (iaButton as IauxButton).isDisabled = false;\n                    await iaButton.updateComplete;\n                    return;\n                  }\n\n                  this.requestAmountUpdate(e);\n                }}\n              >\n                Update\n              </ia-button>\n              <ia-mgc-update-status .status=${this.updateStatus}\n                >${this.updateMessage}</ia-mgc-update-status\n              >\n            </div>\n          </div>\n          <p class=\"error\">${this.errorMessage}</p>\n        </form>\n      </section>\n    `;\n  }\n\n  static styles = css`\n    input#amount {\n      width: 50px;\n    }\n\n    .cta-container {\n      display: flex;\n      flex-direction: row;\n      flex-wrap: wrap;\n      align-content: center;\n      justify-content: flex-start;\n      align-items: center;\n      gap: 10px;\n    }\n\n    p.error {\n      color: var(--mgc-warning-color-dark, #bb0505);\n    }\n\n    ia-mgc-update-status {\n      display: inline-block;\n      margin-left: 1rem;\n    }\n\n    .checkbox-option-container {\n      margin: 10px 0;\n      display: flex;\n    }\n  `;\n}\n"]}

package/dist/src/form-sections/cancel.js

@@ -29,7 +29,7 @@ let IauxMgcCancelPlan = class IauxMgcCancelPlan extends LitElement {
         }
         return html `
       <ia-button
-        class="clear-container"
+        class="clear-container slim"
         .clickHandler=${(e, iaButton) => {
             // eslint-disable-next-line no-param-reassign
             iaButton.isDisabled = true;
@@ -104,6 +104,9 @@ let IauxMgcCancelPlan = class IauxMgcCancelPlan extends LitElement {
     }
 };
 IauxMgcCancelPlan.styles = css `
+    :host {
+      --formSectionTitleFontSize: 1.4rem;
+    }
     .warning > * {
       margin: 5px 0;
     }
@@ -141,7 +144,8 @@ IauxMgcCancelPlan.styles = css `
     }
 
     .checkbox-option-container {
-      margin-bottom: 5px;
+      display: flex;
+      margin: 10px 0;
     }
   `;
 __decorate([

package/dist/src/form-sections/cancel.js.map

@@ -1 +1 @@
-{"version":3,"file":"cancel.js","sourceRoot":"","sources":["../../../src/form-sections/cancel.ts"],"names":[],"mappings":"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","sourcesContent":["import {\n  LitElement,\n  html,\n  TemplateResult,\n  PropertyValues,\n  nothing,\n  css,\n} from 'lit';\nimport { customElement, property, query } from 'lit/decorators.js';\nimport type { MonthlyPlan } from '../models/plan';\n\nimport type { IauxButton } from '../presentational/ia-button';\nimport '@internetarchive/donation-form/dist/src/form-elements/contact-form/contact-form.js';\n\nimport '@internetarchive/donation-form-section';\n\n@customElement('ia-mgc-cancel-plan')\nexport class IauxMgcCancelPlan extends LitElement {\n  @property({ type: Object }) plan?: MonthlyPlan;\n\n  @property({ type: Boolean, reflect: true }) patronWantsToKeepPlan = true;\n\n  @property({ type: Boolean, reflect: true }) initialCancelRequest = false;\n\n  @query('form') form!: HTMLFormElement;\n\n  updated(changed: PropertyValues) {\n    if (changed.has('plan')) {\n      console.log('plan updated', this.plan);\n    }\n  }\n\n  async cancelThisPlan(e: Event) {\n    e.preventDefault();\n    this.patronWantsToKeepPlan = false;\n    this.dispatchEvent(new Event('cancelPlan'));\n  }\n\n  get formId(): string {\n    return `cancel-donation-form-${this.plan?.id}`;\n  }\n\n  protected render() {\n    if (this.initialCancelRequest) {\n      return this.confirmCancelation;\n    }\n\n    return html`\n      <ia-button\n        class=\"clear-container\"\n        .clickHandler=${(e: CustomEvent, iaButton: IauxButton) => {\n          // eslint-disable-next-line no-param-reassign\n          iaButton.isDisabled = true;\n          if (this.initialCancelRequest) {\n            this.initialCancelRequest = false;\n            this.patronWantsToKeepPlan = true;\n            return;\n          }\n          this.initialCancelRequest = true;\n        }}\n      >\n        <donation-form-section\n          badgemode=\"hidebadge\"\n          headline=\"Cancel recurring donation (requires confirmation)\"\n        >\n          <div class=\"warning\">\n            <p>\n              You can also pause your recurring donation by setting the next\n              donation date up to 12 months in the future.\n            </p>\n            <p>Let's cancel my donation</p>\n          </div>\n        </donation-form-section>\n      </ia-button>\n\n      ${this.initialCancelRequest ? this.confirmCancelation : nothing}\n    `;\n  }\n\n  get confirmCancelation(): TemplateResult | typeof nothing {\n    return html`\n    <section class=\"cancel-donation\">\n    <donation-form-section badgemode=\"hidebadge\" headline=\"Cancel recurring donation\">\n\n      <ia-button class='text exit-cancel'  @click=${() => {\n        this.initialCancelRequest = false;\n        this.patronWantsToKeepPlan = true;\n      }}>X</ia-button>\n\n      <p>Canceling ends your monthly recurring donation to the Internet Archive, effective immediately. You will not be charged moving forward.</p>\n      <p>Canceling does not affect your account or access to the Internet Archive, although you will no longer have access to any of the Monthly Giving Circle perks.</p>\n      <p>If you have any questions regarding donations, contact us at <a href=\"mailto:donations@archive.org\">donations@archive.org</a></p>\n\n      <form id=${this.formId} @submit=${(e: Event) => this.cancelThisPlan(e)}>\n        <div class=\"checkbox-option-container\">\n          <input\n            id=${`confirm-${this.formId}`}\n            type=\"checkbox\"\n            required\n            @change=${async (e: Event) => {\n              e.preventDefault();\n              this.patronWantsToKeepPlan = !(e.target as HTMLInputElement)\n                .checked;\n              await this.updateComplete;\n            }}>\n          <label for=${`confirm-${this.formId}`}><b>I'm sure I want to cancel my subscription</b></label>\n        </div>\n\n        <ia-button\n          class=\"cancel\"\n          .isDisabled=${this.patronWantsToKeepPlan}\n          id=${`submit-${this.formId}`}\n          type=\"submit\"\n          .clickHandler=${(e: Event, iaButton: IauxButton) => {\n            // eslint-disable-next-line no-param-reassign\n            iaButton.isDisabled = true;\n            this.cancelThisPlan(e);\n          }}\n        >I'm sure I want to cancel my recurring donation.</ia-button>\n      </form>\n    </section>\n    `;\n  }\n\n  static styles = css`\n    .warning > * {\n      margin: 5px 0;\n    }\n\n    .cancel-donation {\n      display: block;\n      border: 2px solid #d9534f;\n      background-color: #ffeeee;\n    }\n\n    .cancel-donation > * {\n      padding: 5px;\n      position: relative;\n    }\n\n    ia-button.exit-cancel {\n      --button-border: 1px solid;\n      --button-border-radius: 50%;\n      position: absolute;\n      top: -5px;\n      right: -10px;\n    }\n\n    ia-button {\n      --button-height: auto;\n    }\n\n    ia-button > * {\n      text-align: left;\n      text-wrap: wrap;\n    }\n\n    h3 {\n      position: relative;\n    }\n\n    .checkbox-option-container {\n      margin-bottom: 5px;\n    }\n  `;\n}\n"]}
+{"version":3,"file":"cancel.js","sourceRoot":"","sources":["../../../src/form-sections/cancel.ts"],"names":[],"mappings":"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","sourcesContent":["import {\n  LitElement,\n  html,\n  TemplateResult,\n  PropertyValues,\n  nothing,\n  css,\n} from 'lit';\nimport { customElement, property, query } from 'lit/decorators.js';\nimport type { MonthlyPlan } from '../models/plan';\n\nimport type { IauxButton } from '../presentational/ia-button';\nimport '@internetarchive/donation-form/dist/src/form-elements/contact-form/contact-form.js';\n\nimport '@internetarchive/donation-form-section';\n\n@customElement('ia-mgc-cancel-plan')\nexport class IauxMgcCancelPlan extends LitElement {\n  @property({ type: Object }) plan?: MonthlyPlan;\n\n  @property({ type: Boolean, reflect: true }) patronWantsToKeepPlan = true;\n\n  @property({ type: Boolean, reflect: true }) initialCancelRequest = false;\n\n  @query('form') form!: HTMLFormElement;\n\n  updated(changed: PropertyValues) {\n    if (changed.has('plan')) {\n      console.log('plan updated', this.plan);\n    }\n  }\n\n  async cancelThisPlan(e: Event) {\n    e.preventDefault();\n    this.patronWantsToKeepPlan = false;\n    this.dispatchEvent(new Event('cancelPlan'));\n  }\n\n  get formId(): string {\n    return `cancel-donation-form-${this.plan?.id}`;\n  }\n\n  protected render() {\n    if (this.initialCancelRequest) {\n      return this.confirmCancelation;\n    }\n\n    return html`\n      <ia-button\n        class=\"clear-container slim\"\n        .clickHandler=${(e: Event, iaButton: IauxButton) => {\n          // eslint-disable-next-line no-param-reassign\n          iaButton.isDisabled = true;\n          if (this.initialCancelRequest) {\n            this.initialCancelRequest = false;\n            this.patronWantsToKeepPlan = true;\n            return;\n          }\n          this.initialCancelRequest = true;\n        }}\n      >\n        <donation-form-section\n          badgemode=\"hidebadge\"\n          headline=\"Cancel recurring donation (requires confirmation)\"\n        >\n          <div class=\"warning\">\n            <p>\n              You can also pause your recurring donation by setting the next\n              donation date up to 12 months in the future.\n            </p>\n            <p>Let's cancel my donation</p>\n          </div>\n        </donation-form-section>\n      </ia-button>\n\n      ${this.initialCancelRequest ? this.confirmCancelation : nothing}\n    `;\n  }\n\n  get confirmCancelation(): TemplateResult | typeof nothing {\n    return html`\n    <section class=\"cancel-donation\">\n    <donation-form-section badgemode=\"hidebadge\" headline=\"Cancel recurring donation\">\n\n      <ia-button class='text exit-cancel'  @click=${() => {\n        this.initialCancelRequest = false;\n        this.patronWantsToKeepPlan = true;\n      }}>X</ia-button>\n\n      <p>Canceling ends your monthly recurring donation to the Internet Archive, effective immediately. You will not be charged moving forward.</p>\n      <p>Canceling does not affect your account or access to the Internet Archive, although you will no longer have access to any of the Monthly Giving Circle perks.</p>\n      <p>If you have any questions regarding donations, contact us at <a href=\"mailto:donations@archive.org\">donations@archive.org</a></p>\n\n      <form id=${this.formId} @submit=${(e: Event) => this.cancelThisPlan(e)}>\n        <div class=\"checkbox-option-container\">\n          <input\n            id=${`confirm-${this.formId}`}\n            type=\"checkbox\"\n            required\n            @change=${async (e: Event) => {\n              e.preventDefault();\n              this.patronWantsToKeepPlan = !(e.target as HTMLInputElement)\n                .checked;\n              await this.updateComplete;\n            }}>\n          <label for=${`confirm-${this.formId}`}><b>I'm sure I want to cancel my subscription</b></label>\n        </div>\n\n        <ia-button\n          class=\"cancel\"\n          .isDisabled=${this.patronWantsToKeepPlan}\n          id=${`submit-${this.formId}`}\n          type=\"submit\"\n          .clickHandler=${(e: Event, iaButton: IauxButton) => {\n            // eslint-disable-next-line no-param-reassign\n            iaButton.isDisabled = true;\n            this.cancelThisPlan(e);\n          }}\n        >I'm sure I want to cancel my recurring donation.</ia-button>\n      </form>\n    </section>\n    `;\n  }\n\n  static styles = css`\n    :host {\n      --formSectionTitleFontSize: 1.4rem;\n    }\n    .warning > * {\n      margin: 5px 0;\n    }\n\n    .cancel-donation {\n      display: block;\n      border: 2px solid #d9534f;\n      background-color: #ffeeee;\n    }\n\n    .cancel-donation > * {\n      padding: 5px;\n      position: relative;\n    }\n\n    ia-button.exit-cancel {\n      --button-border: 1px solid;\n      --button-border-radius: 50%;\n      position: absolute;\n      top: -5px;\n      right: -10px;\n    }\n\n    ia-button {\n      --button-height: auto;\n    }\n\n    ia-button > * {\n      text-align: left;\n      text-wrap: wrap;\n    }\n\n    h3 {\n      position: relative;\n    }\n\n    .checkbox-option-container {\n      display: flex;\n      margin: 10px 0;\n    }\n  `;\n}\n"]}

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

@@ -34,6 +34,7 @@ export declare class MonthlyPlan {
     get id(): string;
     get currencySymbol(): string;
     get amount(): number;
+    setAmount(newAmount: number): void;
     get startDate(): string;
     get nextBillingDate(): string;
     get hasBeenCancelled(): boolean;

package/dist/src/models/plan.js

@@ -15,6 +15,10 @@ export class MonthlyPlan {
     get amount() {
         return this.plan.amount;
     }
+    setAmount(newAmount) {
+        this.plan.oldAmount = this.plan.amount;
+        this.plan.amount = newAmount;
+    }
     get startDate() {
         const date = new Date(this.plan.start_date);
         return date.toLocaleDateString();

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

@@ -1 +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,gBAAgB;QAClB,OAAO,IAAI,CAAC,IAAI,CAAC,WAAW,KAAK,IAAI,CAAC;IACxC,CAAC;IAED,IAAI,MAAM;QACR,OAAO,IAAI,CAAC,IAAI,CAAC,OAAO,CAAC;IAC3B,CAAC;IAED,UAAU;QACR,IAAI,CAAC,IAAI,CAAC,WAAW,GAAG,IAAI,CAAC;IAC/B,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 hasBeenCancelled(): boolean {\n    return this.plan.isCancelled === true;\n  }\n\n  get isTest(): boolean {\n    return this.plan.is_test;\n  }\n\n  cancelPlan(): void {\n    this.plan.isCancelled = true;\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"]}
+{"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,SAAS,CAAC,SAAiB;QACzB,IAAI,CAAC,IAAI,CAAC,SAAS,GAAG,IAAI,CAAC,IAAI,CAAC,MAAM,CAAC;QACvC,IAAI,CAAC,IAAI,CAAC,MAAM,GAAG,SAAS,CAAC;IAC/B,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,gBAAgB;QAClB,OAAO,IAAI,CAAC,IAAI,CAAC,WAAW,KAAK,IAAI,CAAC;IACxC,CAAC;IAED,IAAI,MAAM;QACR,OAAO,IAAI,CAAC,IAAI,CAAC,OAAO,CAAC;IAC3B,CAAC;IAED,UAAU;QACR,IAAI,CAAC,IAAI,CAAC,WAAW,GAAG,IAAI,CAAC;IAC/B,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  setAmount(newAmount: number) {\n    this.plan.oldAmount = this.plan.amount;\n    this.plan.amount = newAmount;\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 hasBeenCancelled(): boolean {\n    return this.plan.isCancelled === true;\n  }\n\n  get isTest(): boolean {\n    return this.plan.is_test;\n  }\n\n  cancelPlan(): void {\n    this.plan.isCancelled = true;\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

@@ -7,11 +7,12 @@ import type { IauxMgcReceipts } from './receipts';
 import './presentational/ia-button';
 import type { MonthlyPlan } from './models/plan';
 import './edit-plan-form';
+import type { IauxEditPlanForm } from './edit-plan-form';
 export declare type APlanUpdate = {
     plan?: MonthlyPlan;
     donationId?: string;
     status: 'success' | 'fail';
-    action: 'receiptSent' | 'cancel';
+    action: 'receiptSent' | 'cancel' | 'amountUpdate';
     message: string;
 };
 export declare class MonthlyGivingCircle extends LitElement {
@@ -21,9 +22,11 @@ export declare class MonthlyGivingCircle extends LitElement {
     plans: never[];
     editingThisPlan?: MonthlyPlan;
     viewToDisplay: 'welcome' | 'receipts' | 'plans' | 'editPlan';
+    canEdit: boolean;
     protected createRenderRoot(): this;
     updated(changed: PropertyValues): void;
     get receiptListElement(): IauxMgcReceipts;
+    get editFormElement(): IauxEditPlanForm;
     updateReceived(update: APlanUpdate): void;
     protected render(): TemplateResult<1>;
     get sectionTitle(): TemplateResult;