@internetarchive/donation-monthly-portal 6.0.0 → 7.0.1-alpha1

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

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

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

@@ -1,8 +1,9 @@
 import { __decorate } from "tslib";
 import { LitElement, html } from 'lit';
 import { customElement, property } from 'lit/decorators.js';
-import './form-sections/cancel';
 import './form-sections/amount';
+import './form-sections/date';
+import './form-sections/cancel';
 let IauxEditPlanForm = class IauxEditPlanForm extends LitElement {
     createRenderRoot() {
         return this;
@@ -11,6 +12,10 @@ let IauxEditPlanForm = class IauxEditPlanForm extends LitElement {
         const amountForm = this.querySelector('ia-mgc-edit-plan-amount');
         amountForm.amountUpdated(status);
     }
+    dateUpdates(status) {
+        const dateForm = this.querySelector('ia-mgc-edit-date');
+        dateForm.dateUpdated(status);
+    }
     render() {
         return html `
       <section class="mgc-edit-plan">
@@ -30,6 +35,25 @@ let IauxEditPlanForm = class IauxEditPlanForm extends LitElement {
         }}
         ></ia-mgc-edit-plan-amount>
         <hr />
+        <ia-mgc-edit-date
+          @updateDate=${(e) => {
+            const { newDate } = e.detail;
+            if (this.plan) {
+                this.dispatchEvent(new CustomEvent('updateDate', {
+                    detail: { plan: this.plan, newDate },
+                }));
+            }
+        }}
+          .plan=${this.plan}
+        ></ia-mgc-edit-date>
+        <hr />
+        <ia-mgc-cancel-plan
+          .plan=${this.plan}
+          @cancelPlan=${() => {
+            this.dispatchEvent(new Event('cancelPlan'));
+        }}
+        ></ia-mgc-cancel-plan>
+        <hr />
         <p class="email-edit-plan">
           Need to update your plan further? Please email us at
           <a href=${this.mailToText}>donations@archive.org</a>.
@@ -44,9 +68,6 @@ let IauxEditPlanForm = class IauxEditPlanForm extends LitElement {
 __decorate([
     property({ type: Object })
 ], IauxEditPlanForm.prototype, "plan", void 0);
-__decorate([
-    property({ type: Object })
-], IauxEditPlanForm.prototype, "cancelPlanHandler", void 0);
 __decorate([
     property({ type: Object })
 ], IauxEditPlanForm.prototype, "updateAmountHandler", void 0);

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;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"]}
+{"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,sBAAsB,CAAC;AAC9B,OAAO,wBAAwB,CAAC;AAKhC,IAAa,gBAAgB,GAA7B,MAAa,gBAAiB,SAAQ,UAAU;IAa9C,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,WAAW,CAAC,MAA0B;QACpC,MAAM,QAAQ,GAAG,IAAI,CAAC,aAAa,CAAC,kBAAkB,CAAoB,CAAC;QAC3E,QAAS,CAAC,WAAW,CAAC,MAAM,CAAC,CAAC;IAChC,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;;;;wBAIa,CAAC,CAAc,EAAE,EAAE;YAC/B,MAAM,EAAE,OAAO,EAAE,GAAG,CAAC,CAAC,MAAM,CAAC;YAC7B,IAAI,IAAI,CAAC,IAAI,EAAE;gBACb,IAAI,CAAC,aAAa,CAChB,IAAI,WAAW,CAAC,YAAY,EAAE;oBAC5B,MAAM,EAAE,EAAE,IAAI,EAAE,IAAI,CAAC,IAAI,EAAE,OAAO,EAAE;iBACrC,CAAC,CACH,CAAC;aACH;QACH,CAAC;kBACO,IAAI,CAAC,IAAI;;;;kBAIT,IAAI,CAAC,IAAI;wBACH,GAAG,EAAE;YACjB,IAAI,CAAC,aAAa,CAAC,IAAI,KAAK,CAAC,YAAY,CAAC,CAAC,CAAC;QAC9C,CAAC;;;;;oBAKS,IAAI,CAAC,UAAU;;;KAG9B,CAAC;IACJ,CAAC;IAED,UAAU;QACR,OAAO,6EAA6E,CAAC;IACvF,CAAC;CACF,CAAA;AA9E6B;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;8CAAoB;AAEnB;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;6DAQjB;AAXC,gBAAgB;IAD5B,aAAa,CAAC,kBAAkB,CAAC;GACrB,gBAAgB,CA+E5B;SA/EY,gBAAgB","sourcesContent":["import { LitElement, html } from 'lit';\nimport { customElement, property } from 'lit/decorators.js';\n\nimport type { MonthlyPlan } from './models/plan';\nimport './form-sections/amount';\nimport './form-sections/date';\nimport './form-sections/cancel';\nimport type { MGCEditPlanAmount } from './form-sections/amount';\nimport type { MGCEditPlanDate } from './form-sections/date';\n\n@customElement('ia-mgc-edit-plan')\nexport class IauxEditPlanForm extends LitElement {\n  @property({ type: Object }) plan?: MonthlyPlan;\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  dateUpdates(status: 'success' | 'fail') {\n    const dateForm = this.querySelector('ia-mgc-edit-date') as MGCEditPlanDate;\n    dateForm!.dateUpdated(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        <ia-mgc-edit-date\n          @updateDate=${(e: CustomEvent) => {\n            const { newDate } = e.detail;\n            if (this.plan) {\n              this.dispatchEvent(\n                new CustomEvent('updateDate', {\n                  detail: { plan: this.plan, newDate },\n                })\n              );\n            }\n          }}\n          .plan=${this.plan}\n        ></ia-mgc-edit-date>\n        <hr />\n        <ia-mgc-cancel-plan\n          .plan=${this.plan}\n          @cancelPlan=${() => {\n            this.dispatchEvent(new Event('cancelPlan'));\n          }}\n        ></ia-mgc-cancel-plan>\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

@@ -2,7 +2,7 @@ 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-button';
 import '../presentational/mgc-update-status';
 export declare class MGCEditPlanAmount extends LitElement {
     plan?: MonthlyPlan;

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

@@ -3,7 +3,7 @@ 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-button';
 import '../presentational/mgc-update-status';
 let MGCEditPlanAmount = class MGCEditPlanAmount extends LitElement {
     constructor() {
@@ -41,7 +41,7 @@ let MGCEditPlanAmount = class MGCEditPlanAmount extends LitElement {
                     >${this.updateMessage}</ia-mgc-update-status
                   >
                 </p>
-                <ia-button
+                <ia-mgc-button
                   id="edit-amount"
                   class="ia-button link"
                   .clickHandler=${() => {
@@ -50,7 +50,7 @@ let MGCEditPlanAmount = class MGCEditPlanAmount extends LitElement {
             }}
                 >
                   Edit...
-                </ia-button>`
+                </ia-mgc-button>`
             : nothing}
           ${this.currentlyEditing ? this.editAmountForm : nothing}
         </donation-form-section>
@@ -70,7 +70,7 @@ let MGCEditPlanAmount = class MGCEditPlanAmount extends LitElement {
             this.updateMessage = 'Amount updated';
             return;
         }
-        this.form.querySelector('ia-button#update-amount').isDisabled = false;
+        this.form.querySelector('ia-mgc-button#update-amount').isDisabled = false;
         this.captureAmountChanges();
         await this.updateComplete;
     }
@@ -166,6 +166,8 @@ let MGCEditPlanAmount = class MGCEditPlanAmount extends LitElement {
           <div>
             $
             <input
+              min="1"
+              max="9999"
               type="number"
               id="amount"
               name="amount"
@@ -196,7 +198,7 @@ let MGCEditPlanAmount = class MGCEditPlanAmount extends LitElement {
             </div>
             <p>Total: USD $${this.totalAmountWithFees()}</p>
             <div class="cta-container">
-              <ia-button
+              <ia-mgc-button
                 class="ia-button secondary"
                 .clickHandler=${(e) => {
             e.preventDefault();
@@ -204,8 +206,8 @@ let MGCEditPlanAmount = class MGCEditPlanAmount extends LitElement {
         }}
               >
                 Cancel
-              </ia-button>
-              <ia-button
+              </ia-mgc-button>
+              <ia-mgc-button
                 id="update-amount"
                 class="ia-button primary"
                 type="submit"
@@ -241,7 +243,7 @@ let MGCEditPlanAmount = class MGCEditPlanAmount extends LitElement {
         }}
               >
                 Update
-              </ia-button>
+              </ia-mgc-button>
               <ia-mgc-update-status .status=${this.updateStatus}
                 >${this.updateMessage}</ia-mgc-update-status
               >

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

@@ -1 +1 @@
-{"version":3,"file":"amount.js","sourceRoot":"","sources":["../../../src/form-sections/amount.ts"],"names":[],"mappings":"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","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"]}
+{"version":3,"file":"amount.js","sourceRoot":"","sources":["../../../src/form-sections/amount.ts"],"names":[],"mappings":"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","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/mgc-button';\nimport type { MGCButton } from '../presentational/mgc-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-mgc-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-mgc-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-mgc-button#update-amount') as MGCButton\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              min=\"1\"\n              max=\"9999\"\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-mgc-button\n                class=\"ia-button secondary\"\n                .clickHandler=${(e: Event) => {\n                  e.preventDefault();\n                  this.closeForm();\n                }}\n              >\n                Cancel\n              </ia-mgc-button>\n              <ia-mgc-button\n                id=\"update-amount\"\n                class=\"ia-button primary\"\n                type=\"submit\"\n                .clickHandler=${async (e: Event, iaButton: MGCButton) => {\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 MGCButton).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 MGCButton).isDisabled = false;\n                    await iaButton.updateComplete;\n                    return;\n                  }\n\n                  this.requestAmountUpdate(e);\n                }}\n              >\n                Update\n              </ia-mgc-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

@@ -28,7 +28,7 @@ let IauxMgcCancelPlan = class IauxMgcCancelPlan extends LitElement {
             return this.confirmCancelation;
         }
         return html `
-      <ia-button
+      <ia-mgc-button
         class="clear-container slim"
         .clickHandler=${(e, iaButton) => {
             // eslint-disable-next-line no-param-reassign
@@ -53,7 +53,7 @@ let IauxMgcCancelPlan = class IauxMgcCancelPlan extends LitElement {
             <p>Let's cancel my donation</p>
           </div>
         </donation-form-section>
-      </ia-button>
+      </ia-mgc-button>
 
       ${this.initialCancelRequest ? this.confirmCancelation : nothing}
     `;
@@ -63,10 +63,10 @@ let IauxMgcCancelPlan = class IauxMgcCancelPlan extends LitElement {
     <section class="cancel-donation">
     <donation-form-section badgemode="hidebadge" headline="Cancel recurring donation">
 
-      <ia-button class='text exit-cancel'  @click=${() => {
+      <ia-mgc-button class='text exit-cancel'  @click=${() => {
             this.initialCancelRequest = false;
             this.patronWantsToKeepPlan = true;
-        }}>X</ia-button>
+        }}>X</ia-mgc-button>
 
       <p>Canceling ends your monthly recurring donation to the Internet Archive, effective immediately. You will not be charged moving forward.</p>
       <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>
@@ -87,7 +87,7 @@ let IauxMgcCancelPlan = class IauxMgcCancelPlan extends LitElement {
           <label for=${`confirm-${this.formId}`}><b>I'm sure I want to cancel my subscription</b></label>
         </div>
 
-        <ia-button
+        <ia-mgc-button
           class="cancel"
           .isDisabled=${this.patronWantsToKeepPlan}
           id=${`submit-${this.formId}`}
@@ -97,7 +97,7 @@ let IauxMgcCancelPlan = class IauxMgcCancelPlan extends LitElement {
             iaButton.isDisabled = true;
             this.cancelThisPlan(e);
         }}
-        >I'm sure I want to cancel my recurring donation.</ia-button>
+        >I'm sure I want to cancel my recurring donation.</ia-mgc-button>
       </form>
     </section>
     `;
@@ -122,7 +122,7 @@ IauxMgcCancelPlan.styles = css `
       position: relative;
     }
 
-    ia-button.exit-cancel {
+    ia-mgc-button.exit-cancel {
       --button-border: 1px solid;
       --button-border-radius: 50%;
       position: absolute;
@@ -130,11 +130,11 @@ IauxMgcCancelPlan.styles = css `
       right: -10px;
     }
 
-    ia-button {
+    ia-mgc-button {
       --button-height: auto;
     }
 
-    ia-button > * {
+    ia-mgc-button > * {
       text-align: left;
       text-wrap: wrap;
     }

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 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"]}
+{"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 { MGCButton } from '../presentational/mgc-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-mgc-button\n        class=\"clear-container slim\"\n        .clickHandler=${(e: Event, iaButton: MGCButton) => {\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-mgc-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-mgc-button class='text exit-cancel'  @click=${() => {\n        this.initialCancelRequest = false;\n        this.patronWantsToKeepPlan = true;\n      }}>X</ia-mgc-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-mgc-button\n          class=\"cancel\"\n          .isDisabled=${this.patronWantsToKeepPlan}\n          id=${`submit-${this.formId}`}\n          type=\"submit\"\n          .clickHandler=${(e: Event, iaButton: MGCButton) => {\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-mgc-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-mgc-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-mgc-button {\n      --button-height: auto;\n    }\n\n    ia-mgc-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/form-sections/date.d.ts

@@ -0,0 +1,38 @@
+import { LitElement, PropertyValues, TemplateResult } from 'lit';
+import '@internetarchive/donation-form-section';
+import type { MonthlyPlan } from '../models/plan';
+import '../presentational/mgc-button';
+import type { MGCButton } from '../presentational/mgc-button';
+import '../presentational/mgc-update-status';
+declare type InvalidDateErrorCode = 'invalid_date' | 'date_too_early' | 'second_donation_this_month' | 'date_out_of_range' | 'same_next_billing_date' | '';
+export declare class MGCEditPlanDate extends LitElement {
+    plan?: MonthlyPlan;
+    newDate?: string;
+    currentlyEditing: boolean;
+    allowEditing: boolean;
+    updateMessage: string;
+    errorMessage: string;
+    warningMessage: string;
+    updateStatus: 'success' | 'fail' | '';
+    form: HTMLFormElement;
+    formSubmitButton: MGCButton;
+    dateInput: HTMLInputElement;
+    willUpdate(changed: PropertyValues): void;
+    updated(changed: PropertyValues): void;
+    protected render(): TemplateResult<1>;
+    dateUpdated(status: 'success' | 'fail'): Promise<void>;
+    requestDateUpdate(e: Event): void;
+    closeForm(): void;
+    clearInputField(): void;
+    formatDateToYYYYMMDD(date: Date): string;
+    clearStatusMessaging(): Promise<void>;
+    validateChosenDate(dateString: string): {
+        valid: boolean;
+        errorCode: InvalidDateErrorCode | '';
+    };
+    get minDate(): string;
+    get maxDate(): string;
+    get editDateForm(): TemplateResult;
+    static styles: import("lit").CSSResult;
+}
+export {};