@internetarchive/donation-monthly-portal 7.0.0 → 7.0.1

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;
     }
@@ -198,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();
@@ -206,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"
@@ -243,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              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-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

@@ -1,8 +1,8 @@
 import { LitElement, PropertyValues, TemplateResult } from 'lit';
 import '@internetarchive/donation-form-section';
 import type { MonthlyPlan } from '../models/plan';
-import '../presentational/ia-button';
-import type { IauxButton } from '../presentational/ia-button';
+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 {
@@ -15,7 +15,7 @@ export declare class MGCEditPlanDate extends LitElement {
     warningMessage: string;
     updateStatus: 'success' | 'fail' | '';
     form: HTMLFormElement;
-    formSubmitButton: IauxButton;
+    formSubmitButton: MGCButton;
     dateInput: HTMLInputElement;
     willUpdate(changed: PropertyValues): void;
     updated(changed: PropertyValues): void;

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

@@ -2,7 +2,7 @@ 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 '../presentational/ia-button';
+import '../presentational/mgc-button';
 import '../presentational/mgc-update-status';
 var InvalidDateErrorMessages;
 (function (InvalidDateErrorMessages) {
@@ -48,7 +48,7 @@ let MGCEditPlanDate = class MGCEditPlanDate extends LitElement {
                     >${this.updateMessage}</ia-mgc-update-status
                   >
                 </p>
-                <ia-button
+                <ia-mgc-button
                   id="open-edit-date-form"
                   class="ia-button link"
                   .clickHandler=${() => {
@@ -57,7 +57,7 @@ let MGCEditPlanDate = class MGCEditPlanDate extends LitElement {
             }}
                 >
                   Edit...
-                </ia-button>`
+                </ia-mgc-button>`
             : nothing}
           ${this.currentlyEditing ? this.editDateForm : nothing}
         </donation-form-section>
@@ -256,7 +256,7 @@ let MGCEditPlanDate = class MGCEditPlanDate extends LitElement {
           </div>
           <div>
             <div class="cta-container">
-              <ia-button
+              <ia-mgc-button
                 class="ia-button secondary"
                 .clickHandler=${(e) => {
             e.preventDefault();
@@ -264,8 +264,8 @@ let MGCEditPlanDate = class MGCEditPlanDate extends LitElement {
         }}
               >
                 Cancel
-              </ia-button>
-              <ia-button
+              </ia-mgc-button>
+              <ia-mgc-button
                 id="edit-date"
                 class="ia-button primary"
                 type="submit"
@@ -283,7 +283,7 @@ let MGCEditPlanDate = class MGCEditPlanDate extends LitElement {
         }}
               >
                 Update
-              </ia-button>
+              </ia-mgc-button>
               <ia-mgc-update-status .status=${this.updateStatus}
                 >${this.updateMessage}</ia-mgc-update-status
               >
@@ -358,7 +358,7 @@ __decorate([
     query('form')
 ], MGCEditPlanDate.prototype, "form", void 0);
 __decorate([
-    query('form ia-button#edit-date')
+    query('form ia-mgc-button#edit-date')
 ], MGCEditPlanDate.prototype, "formSubmitButton", void 0);
 __decorate([
     query('form input[name="edit-date"]')

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

@@ -1 +1 @@
-{"version":3,"file":"date.js","sourceRoot":"","sources":["../../../src/form-sections/date.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';\n\nimport type { MonthlyPlan } from '../models/plan';\nimport '../presentational/ia-button';\nimport type { IauxButton } from '../presentational/ia-button';\nimport '../presentational/mgc-update-status';\n\ntype InvalidDateErrorCode =\n  | 'invalid_date'\n  | 'date_too_early'\n  | 'second_donation_this_month'\n  | 'date_out_of_range'\n  | 'same_next_billing_date'\n  | '';\n\nenum InvalidDateErrorMessages {\n  invalid_date = 'Please enter a valid date format (YYYY-MM-DD)',\n  date_too_early = 'Date must be at least tomorrow.',\n  second_donation_this_month = 'The date you selected will result in an additional donation for this month.',\n  date_out_of_range = 'New donation date must be within the next 12 months.',\n  same_next_billing_date = '',\n}\n@customElement('ia-mgc-edit-date')\nexport class MGCEditPlanDate extends LitElement {\n  @property({ type: Object }) plan?: MonthlyPlan;\n\n  @property({ type: String }) newDate?: string;\n\n  @property({ type: Boolean, reflect: true }) currentlyEditing: boolean = false;\n\n  @property({ type: Boolean }) allowEditing: boolean = false;\n\n  @property({ type: String }) updateMessage: string = '';\n\n  @property({ type: String }) errorMessage: string = '';\n\n  @property({ type: String }) warningMessage: string = '';\n\n  @property({ type: String }) updateStatus: 'success' | 'fail' | '' = '';\n\n  @query('form') form!: HTMLFormElement;\n\n  @query('form ia-button#edit-date') formSubmitButton!: IauxButton;\n\n  @query('form input[name=\"edit-date\"]')\n  dateInput!: HTMLInputElement;\n\n  willUpdate(changed: PropertyValues) {\n    if (this.dateInput && changed.has('plan') && this.plan) {\n      this.dateInput.setAttribute('min', this.minDate);\n      this.dateInput.setAttribute('max', this.maxDate);\n    }\n  }\n\n  updated(changed: PropertyValues) {\n    if (changed.has('currentlyEditing') && this.currentlyEditing) {\n      this.dateInput.focus();\n    }\n  }\n\n  protected render() {\n    return html`\n      <section>\n        <donation-form-section\n          badgemode=\"hidebadge\"\n          headline=\"Change next donation date\"\n        >\n          ${!this.currentlyEditing\n            ? html` <p class=\"current-date\">\n                  ${this.plan?.nextBillingDateLocale}\n                  <ia-mgc-update-status .status=${this.updateStatus}\n                    >${this.updateMessage}</ia-mgc-update-status\n                  >\n                </p>\n                <ia-button\n                  id=\"open-edit-date-form\"\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.editDateForm : 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 dateUpdated(status: 'success' | 'fail') {\n    this.clearInputField();\n\n    this.updateStatus = status;\n    this.updateMessage =\n      status === 'success'\n        ? 'Date updated'\n        : 'Failed to update date, please try again';\n\n    if (status === 'success') {\n      this.closeForm();\n      await this.updateComplete;\n      return;\n    }\n\n    this.allowEditing = false;\n    await this.updateComplete;\n  }\n\n  /* Dispatches edit-date change request */\n  requestDateUpdate(e: Event): void {\n    e.preventDefault();\n    this.dispatchEvent(\n      new CustomEvent('updateDate', {\n        detail: {\n          plan: this.plan,\n          newDate: this.newDate,\n        },\n      })\n    );\n  }\n\n  closeForm() {\n    this.clearInputField();\n    this.clearStatusMessaging();\n    this.currentlyEditing = false;\n    this.allowEditing = false;\n  }\n\n  clearInputField() {\n    this.dateInput.value = '';\n    this.newDate = undefined;\n  }\n\n  formatDateToYYYYMMDD(date: Date): string {\n    const year = date.getFullYear();\n    const month = String(date.getMonth() + 1).padStart(2, '0'); // Months are 0-indexed\n    const dateNum = String(date.getDate()).padStart(2, '0');\n    return `${year}-${month}-${dateNum}`;\n  }\n\n  async clearStatusMessaging() {\n    this.errorMessage = '';\n    this.warningMessage = '';\n    this.updateMessage = '';\n    this.updateStatus = '';\n    await this.updateComplete;\n  }\n\n  /* @param string dateString -  YYYYY-MM-DD */\n  validateChosenDate(dateString: string): {\n    valid: boolean;\n    errorCode: InvalidDateErrorCode | '';\n  } {\n    if (!dateString) {\n      return {\n        valid: false,\n        errorCode: 'invalid_date',\n      };\n    }\n\n    let validDate;\n    try {\n      validDate = new Date(`${dateString}T00:00:00`);\n    } catch (error) {\n      return {\n        valid: false,\n        errorCode: 'invalid_date',\n      };\n    }\n\n    // Check if minimum date is at least tomorrow\n    const today = new Date();\n    today.setHours(0, 0, 0, 0);\n    const tomorrow = new Date(today);\n    tomorrow.setDate(today.getDate() + 1); // Set to tomorrow\n\n    const chosenDate = new Date(validDate);\n    chosenDate.setHours(0, 0, 0, 0);\n\n    // check input value against next billing date\n    const isNextBillingDate = this.plan?.nextBillingDate\n      ? this.formatDateToYYYYMMDD(new Date(this.plan.nextBillingDate)) ===\n        this.formatDateToYYYYMMDD(chosenDate)\n      : false;\n    if (isNextBillingDate) {\n      return {\n        valid: false,\n        errorCode: 'same_next_billing_date',\n      };\n    }\n\n    if (chosenDate < today) {\n      return {\n        valid: false,\n        errorCode: 'date_too_early',\n      };\n    }\n\n    // Check if the new date is within the next 12 months\n    const twelveMonthsFromNow = new Date(today);\n    twelveMonthsFromNow.setFullYear(twelveMonthsFromNow.getFullYear() + 1);\n\n    if (chosenDate > twelveMonthsFromNow) {\n      return {\n        valid: false,\n        errorCode: 'date_out_of_range',\n      };\n    }\n\n    // Check if there has been a donation in the last month\n    const lastDonationDate = this.plan?.payment.lastBillingDate.date\n      ? new Date(this.plan?.payment.lastBillingDate.date)\n      : null;\n\n    if (lastDonationDate) {\n      const lastDonationMonth = lastDonationDate.getMonth();\n      const lastDonationYear = lastDonationDate.getFullYear();\n\n      const thisYear = validDate.getFullYear();\n      const thisMonth = validDate.getMonth();\n      const isInLastMonth =\n        thisYear === lastDonationYear && thisMonth === lastDonationMonth;\n\n      if (isInLastMonth) {\n        return {\n          valid: true,\n          errorCode: 'second_donation_this_month',\n        };\n      }\n    }\n\n    return {\n      valid: true,\n      errorCode: '',\n    };\n  }\n\n  /* DISPLAY */\n  get minDate(): string {\n    const today = new Date();\n    const tomorrow = new Date(today);\n    tomorrow.setDate(today.getDate() + 1); // Set to tomorrow\n    const year = tomorrow.getFullYear();\n    const month = String(tomorrow.getMonth() + 1).padStart(2, '0'); // Months are 0-indexed\n    const dateString = String(tomorrow.getDate()).padStart(2, '0');\n    return `${year}-${month}-${dateString}`;\n  }\n\n  get maxDate(): string {\n    const today = new Date();\n    const year = today.getFullYear() + 1; // Allow up to one year in the future\n    const month = String(today.getMonth() + 1).padStart(2, '0'); // Months are 0-indexed\n    const dateString = String(today.getDate()).padStart(2, '0');\n    return `${year}-${month}-${dateString}`;\n  }\n\n  get editDateForm(): TemplateResult {\n    const nextBillingDateYYYYMMDD = this.plan?.nextBillingDate\n      ? this.formatDateToYYYYMMDD(new Date(this.plan.nextBillingDate))\n      : '';\n    const inputValueToUse = this.dateInput?.value ?? nextBillingDateYYYYMMDD;\n    return html`\n      <section>\n        <form id=\"edit-date\">\n          <p id=\"form-info-last-donation-date\">\n            Last donation date: ${this.plan?.lastBillingDateLocale}\n          </p>\n\n          <p id=\"form-info-next-donation-date\">\n            Next donation date: ${this.plan?.nextBillingDateLocale}\n          </p>\n          <div class=\"date-holder\">\n            <input\n              required\n              type=\"date\"\n              id=\"edit-date\"\n              name=\"edit-date\"\n              min=${this.minDate}\n              max=${this.maxDate}\n              .value=${inputValueToUse}\n              @focus=${() => this.clearStatusMessaging()}\n              @change=${async () => {\n                this.clearStatusMessaging();\n                await this.updateComplete;\n\n                const inputValue = this.dateInput.value;\n                const { valid, errorCode } =\n                  this.validateChosenDate(inputValue);\n\n                this.allowEditing = valid;\n\n                if (errorCode) {\n                  if (errorCode === 'second_donation_this_month') {\n                    this.errorMessage = InvalidDateErrorMessages[errorCode];\n                    this.warningMessage =\n                      'You have already made a donation this month.';\n                  } else {\n                    this.errorMessage = InvalidDateErrorMessages[errorCode];\n                    this.newDate = undefined;\n                    return;\n                  }\n                }\n\n                const chosenDate = new Date(`${inputValue}T00:00:00`);\n                const newDate = new Date(chosenDate).toISOString();\n                this.newDate = newDate;\n              }}\n            />\n          </div>\n          <div>\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=\"edit-date\"\n                class=\"ia-button primary\"\n                type=\"submit\"\n                .isDisabled=${!this.allowEditing}\n                .clickHandler=${async (e: Event, iaButton: IauxButton) => {\n                  this.clearStatusMessaging();\n\n                  if (!this.newDate) {\n                    this.errorMessage = 'Please enter a valid date';\n                    return;\n                  }\n\n                  // eslint-disable-next-line no-param-reassign\n                  (iaButton as IauxButton).isDisabled = true;\n                  await iaButton.updateComplete;\n\n                  this.requestDateUpdate(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 error-msg\">\n            ${this.warningMessage\n              ? html`<span>${this.warningMessage}</span><br />`\n              : ''}\n            ${this.errorMessage}\n          </p>\n        </form>\n      </section>\n    `;\n  }\n\n  static styles = css`\n    input[name='edit-date'] {\n      margin: 10px 0;\n      min-width: 140px;\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":"date.js","sourceRoot":"","sources":["../../../src/form-sections/date.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';\n\nimport type { MonthlyPlan } from '../models/plan';\nimport '../presentational/mgc-button';\nimport type { MGCButton } from '../presentational/mgc-button';\nimport '../presentational/mgc-update-status';\n\ntype InvalidDateErrorCode =\n  | 'invalid_date'\n  | 'date_too_early'\n  | 'second_donation_this_month'\n  | 'date_out_of_range'\n  | 'same_next_billing_date'\n  | '';\n\nenum InvalidDateErrorMessages {\n  invalid_date = 'Please enter a valid date format (YYYY-MM-DD)',\n  date_too_early = 'Date must be at least tomorrow.',\n  second_donation_this_month = 'The date you selected will result in an additional donation for this month.',\n  date_out_of_range = 'New donation date must be within the next 12 months.',\n  same_next_billing_date = '',\n}\n@customElement('ia-mgc-edit-date')\nexport class MGCEditPlanDate extends LitElement {\n  @property({ type: Object }) plan?: MonthlyPlan;\n\n  @property({ type: String }) newDate?: string;\n\n  @property({ type: Boolean, reflect: true }) currentlyEditing: boolean = false;\n\n  @property({ type: Boolean }) allowEditing: boolean = false;\n\n  @property({ type: String }) updateMessage: string = '';\n\n  @property({ type: String }) errorMessage: string = '';\n\n  @property({ type: String }) warningMessage: string = '';\n\n  @property({ type: String }) updateStatus: 'success' | 'fail' | '' = '';\n\n  @query('form') form!: HTMLFormElement;\n\n  @query('form ia-mgc-button#edit-date') formSubmitButton!: MGCButton;\n\n  @query('form input[name=\"edit-date\"]')\n  dateInput!: HTMLInputElement;\n\n  willUpdate(changed: PropertyValues) {\n    if (this.dateInput && changed.has('plan') && this.plan) {\n      this.dateInput.setAttribute('min', this.minDate);\n      this.dateInput.setAttribute('max', this.maxDate);\n    }\n  }\n\n  updated(changed: PropertyValues) {\n    if (changed.has('currentlyEditing') && this.currentlyEditing) {\n      this.dateInput.focus();\n    }\n  }\n\n  protected render() {\n    return html`\n      <section>\n        <donation-form-section\n          badgemode=\"hidebadge\"\n          headline=\"Change next donation date\"\n        >\n          ${!this.currentlyEditing\n            ? html` <p class=\"current-date\">\n                  ${this.plan?.nextBillingDateLocale}\n                  <ia-mgc-update-status .status=${this.updateStatus}\n                    >${this.updateMessage}</ia-mgc-update-status\n                  >\n                </p>\n                <ia-mgc-button\n                  id=\"open-edit-date-form\"\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.editDateForm : 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 dateUpdated(status: 'success' | 'fail') {\n    this.clearInputField();\n\n    this.updateStatus = status;\n    this.updateMessage =\n      status === 'success'\n        ? 'Date updated'\n        : 'Failed to update date, please try again';\n\n    if (status === 'success') {\n      this.closeForm();\n      await this.updateComplete;\n      return;\n    }\n\n    this.allowEditing = false;\n    await this.updateComplete;\n  }\n\n  /* Dispatches edit-date change request */\n  requestDateUpdate(e: Event): void {\n    e.preventDefault();\n    this.dispatchEvent(\n      new CustomEvent('updateDate', {\n        detail: {\n          plan: this.plan,\n          newDate: this.newDate,\n        },\n      })\n    );\n  }\n\n  closeForm() {\n    this.clearInputField();\n    this.clearStatusMessaging();\n    this.currentlyEditing = false;\n    this.allowEditing = false;\n  }\n\n  clearInputField() {\n    this.dateInput.value = '';\n    this.newDate = undefined;\n  }\n\n  formatDateToYYYYMMDD(date: Date): string {\n    const year = date.getFullYear();\n    const month = String(date.getMonth() + 1).padStart(2, '0'); // Months are 0-indexed\n    const dateNum = String(date.getDate()).padStart(2, '0');\n    return `${year}-${month}-${dateNum}`;\n  }\n\n  async clearStatusMessaging() {\n    this.errorMessage = '';\n    this.warningMessage = '';\n    this.updateMessage = '';\n    this.updateStatus = '';\n    await this.updateComplete;\n  }\n\n  /* @param string dateString -  YYYYY-MM-DD */\n  validateChosenDate(dateString: string): {\n    valid: boolean;\n    errorCode: InvalidDateErrorCode | '';\n  } {\n    if (!dateString) {\n      return {\n        valid: false,\n        errorCode: 'invalid_date',\n      };\n    }\n\n    let validDate;\n    try {\n      validDate = new Date(`${dateString}T00:00:00`);\n    } catch (error) {\n      return {\n        valid: false,\n        errorCode: 'invalid_date',\n      };\n    }\n\n    // Check if minimum date is at least tomorrow\n    const today = new Date();\n    today.setHours(0, 0, 0, 0);\n    const tomorrow = new Date(today);\n    tomorrow.setDate(today.getDate() + 1); // Set to tomorrow\n\n    const chosenDate = new Date(validDate);\n    chosenDate.setHours(0, 0, 0, 0);\n\n    // check input value against next billing date\n    const isNextBillingDate = this.plan?.nextBillingDate\n      ? this.formatDateToYYYYMMDD(new Date(this.plan.nextBillingDate)) ===\n        this.formatDateToYYYYMMDD(chosenDate)\n      : false;\n    if (isNextBillingDate) {\n      return {\n        valid: false,\n        errorCode: 'same_next_billing_date',\n      };\n    }\n\n    if (chosenDate < today) {\n      return {\n        valid: false,\n        errorCode: 'date_too_early',\n      };\n    }\n\n    // Check if the new date is within the next 12 months\n    const twelveMonthsFromNow = new Date(today);\n    twelveMonthsFromNow.setFullYear(twelveMonthsFromNow.getFullYear() + 1);\n\n    if (chosenDate > twelveMonthsFromNow) {\n      return {\n        valid: false,\n        errorCode: 'date_out_of_range',\n      };\n    }\n\n    // Check if there has been a donation in the last month\n    const lastDonationDate = this.plan?.payment.lastBillingDate.date\n      ? new Date(this.plan?.payment.lastBillingDate.date)\n      : null;\n\n    if (lastDonationDate) {\n      const lastDonationMonth = lastDonationDate.getMonth();\n      const lastDonationYear = lastDonationDate.getFullYear();\n\n      const thisYear = validDate.getFullYear();\n      const thisMonth = validDate.getMonth();\n      const isInLastMonth =\n        thisYear === lastDonationYear && thisMonth === lastDonationMonth;\n\n      if (isInLastMonth) {\n        return {\n          valid: true,\n          errorCode: 'second_donation_this_month',\n        };\n      }\n    }\n\n    return {\n      valid: true,\n      errorCode: '',\n    };\n  }\n\n  /* DISPLAY */\n  get minDate(): string {\n    const today = new Date();\n    const tomorrow = new Date(today);\n    tomorrow.setDate(today.getDate() + 1); // Set to tomorrow\n    const year = tomorrow.getFullYear();\n    const month = String(tomorrow.getMonth() + 1).padStart(2, '0'); // Months are 0-indexed\n    const dateString = String(tomorrow.getDate()).padStart(2, '0');\n    return `${year}-${month}-${dateString}`;\n  }\n\n  get maxDate(): string {\n    const today = new Date();\n    const year = today.getFullYear() + 1; // Allow up to one year in the future\n    const month = String(today.getMonth() + 1).padStart(2, '0'); // Months are 0-indexed\n    const dateString = String(today.getDate()).padStart(2, '0');\n    return `${year}-${month}-${dateString}`;\n  }\n\n  get editDateForm(): TemplateResult {\n    const nextBillingDateYYYYMMDD = this.plan?.nextBillingDate\n      ? this.formatDateToYYYYMMDD(new Date(this.plan.nextBillingDate))\n      : '';\n    const inputValueToUse = this.dateInput?.value ?? nextBillingDateYYYYMMDD;\n    return html`\n      <section>\n        <form id=\"edit-date\">\n          <p id=\"form-info-last-donation-date\">\n            Last donation date: ${this.plan?.lastBillingDateLocale}\n          </p>\n\n          <p id=\"form-info-next-donation-date\">\n            Next donation date: ${this.plan?.nextBillingDateLocale}\n          </p>\n          <div class=\"date-holder\">\n            <input\n              required\n              type=\"date\"\n              id=\"edit-date\"\n              name=\"edit-date\"\n              min=${this.minDate}\n              max=${this.maxDate}\n              .value=${inputValueToUse}\n              @focus=${() => this.clearStatusMessaging()}\n              @change=${async () => {\n                this.clearStatusMessaging();\n                await this.updateComplete;\n\n                const inputValue = this.dateInput.value;\n                const { valid, errorCode } =\n                  this.validateChosenDate(inputValue);\n\n                this.allowEditing = valid;\n\n                if (errorCode) {\n                  if (errorCode === 'second_donation_this_month') {\n                    this.errorMessage = InvalidDateErrorMessages[errorCode];\n                    this.warningMessage =\n                      'You have already made a donation this month.';\n                  } else {\n                    this.errorMessage = InvalidDateErrorMessages[errorCode];\n                    this.newDate = undefined;\n                    return;\n                  }\n                }\n\n                const chosenDate = new Date(`${inputValue}T00:00:00`);\n                const newDate = new Date(chosenDate).toISOString();\n                this.newDate = newDate;\n              }}\n            />\n          </div>\n          <div>\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=\"edit-date\"\n                class=\"ia-button primary\"\n                type=\"submit\"\n                .isDisabled=${!this.allowEditing}\n                .clickHandler=${async (e: Event, iaButton: MGCButton) => {\n                  this.clearStatusMessaging();\n\n                  if (!this.newDate) {\n                    this.errorMessage = 'Please enter a valid date';\n                    return;\n                  }\n\n                  // eslint-disable-next-line no-param-reassign\n                  (iaButton as MGCButton).isDisabled = true;\n                  await iaButton.updateComplete;\n\n                  this.requestDateUpdate(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 error-msg\">\n            ${this.warningMessage\n              ? html`<span>${this.warningMessage}</span><br />`\n              : ''}\n            ${this.errorMessage}\n          </p>\n        </form>\n      </section>\n    `;\n  }\n\n  static styles = css`\n    input[name='edit-date'] {\n      margin: 10px 0;\n      min-width: 140px;\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/monthly-giving-circle.d.ts

@@ -4,7 +4,7 @@ import './plans';
 import './presentational/mgc-title';
 import './receipts';
 import type { IauxMgcReceipts } from './receipts';
-import './presentational/ia-button';
+import './presentational/mgc-button';
 import type { MonthlyPlan } from './models/plan';
 import './edit-plan-form';
 import type { IauxEditPlanForm } from './edit-plan-form';

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

@@ -5,7 +5,7 @@ import './welcome-message';
 import './plans';
 import './presentational/mgc-title';
 import './receipts';
-import './presentational/ia-button';
+import './presentational/mgc-button';
 import './edit-plan-form';
 var DisplayChangeEvents;
 (function (DisplayChangeEvents) {
@@ -99,7 +99,7 @@ let MonthlyGivingCircle = class MonthlyGivingCircle extends LitElement {
         let titleStyle = '';
         let cta = html ``;
         const receiptsCTA = html `
-      <ia-button
+      <ia-mgc-button
         class="link slim"
         .clickHandler=${async () => {
             this.viewToDisplay = 'receipts';
@@ -108,7 +108,7 @@ let MonthlyGivingCircle = class MonthlyGivingCircle extends LitElement {
         }}
       >
         View recent donation history
-      </ia-button>
+      </ia-mgc-button>
     `;
         const displayReceiptsLink = this.receipts.length &&
             (this.viewToDisplay === 'plans' || this.viewToDisplay === 'welcome');
@@ -116,7 +116,7 @@ let MonthlyGivingCircle = class MonthlyGivingCircle extends LitElement {
             case 'receipts':
                 title = 'Recent donations';
                 titleStyle = 'default';
-                cta = html `<ia-button
+                cta = html `<ia-mgc-button
           class="link slim"
           id="close-receipts"
           .clickHandler=${async () => {
@@ -130,12 +130,12 @@ let MonthlyGivingCircle = class MonthlyGivingCircle extends LitElement {
                 }}
         >
           Back to account settings
-        </ia-button>`;
+        </ia-mgc-button>`;
                 break;
             case 'editPlan':
                 title = 'Monthly Giving Circle';
                 titleStyle = 'default';
-                cta = html `<ia-button
+                cta = html `<ia-mgc-button
           class="primary"
           id="close-edit-plan"
           .clickHandler=${async () => {
@@ -149,7 +149,7 @@ let MonthlyGivingCircle = class MonthlyGivingCircle extends LitElement {
                 }}
         >
           Back to account settings
-        </ia-button>`;
+        </ia-mgc-button>`;
                 break;
             default:
                 title = 'Monthly Giving Circle';

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

@@ -1 +1 @@
-{"version":3,"file":"monthly-giving-circle.js","sourceRoot":"","sources":["../../src/monthly-giving-circle.ts"],"names":[],"mappings":"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","sourcesContent":["import { LitElement, html, TemplateResult, PropertyValues } from 'lit';\nimport { customElement, property } from 'lit/decorators.js';\n\nimport './welcome-message';\nimport './plans';\nimport './presentational/mgc-title';\nimport './receipts';\nimport type { IauxMgcReceipts } from './receipts';\nimport './presentational/ia-button';\nimport type { MonthlyPlan } from './models/plan';\nimport './edit-plan-form';\nimport type { IauxEditPlanForm } from './edit-plan-form';\n\nexport type APlanUpdate = {\n  plan?: MonthlyPlan;\n  donationId?: string;\n  status: 'success' | 'fail';\n  action: 'receiptSent' | 'cancel' | 'amountUpdate' | 'dateUpdate';\n  message: string;\n};\n\nenum DisplayChangeEvents {\n  welcome = 'ShowWelcome',\n  receipts = 'ShowReceipts',\n  plans = 'ShowPlans',\n  editPlan = 'ShowEditForm',\n}\n\n@customElement('ia-monthly-giving-circle')\nexport class MonthlyGivingCircle extends LitElement {\n  @property({ type: String }) patronName: string = '';\n\n  @property({ type: Array }) receipts = [];\n\n  @property({ type: Array }) updates: APlanUpdate[] = [];\n\n  @property({ type: Array }) plans = [];\n\n  @property({ type: Object }) editingThisPlan?: MonthlyPlan;\n\n  @property({ type: String, reflect: true }) viewToDisplay:\n    | 'welcome'\n    | 'receipts'\n    | 'plans'\n    | 'editPlan' = 'welcome';\n\n  @property({ type: Boolean, reflect: true }) canEdit = false;\n\n  protected createRenderRoot() {\n    return this;\n  }\n\n  updated(changed: PropertyValues) {\n    if (changed.has('plans')) {\n      this.viewToDisplay = this.plans.length ? 'plans' : 'welcome';\n    }\n  }\n\n  get receiptListElement(): IauxMgcReceipts {\n    return this.querySelector('ia-mgc-receipts') as IauxMgcReceipts;\n  }\n\n  get editFormElement(): IauxEditPlanForm {\n    return this.querySelector('ia-mgc-edit-plan') as IauxEditPlanForm;\n  }\n\n  /* Update Callback */\n  updateReceived(update: APlanUpdate) {\n    // log update\n    this.updates.unshift(update);\n\n    const { plan, donationId = '' } = update;\n    const idToUse = plan?.id ?? donationId;\n\n    if (update.action === 'amountUpdate') {\n      this.editFormElement.amountUpdates(update.status);\n      return;\n    }\n\n    if (update.action === 'dateUpdate') {\n      this.editingThisPlan = plan;\n      this.editFormElement.dateUpdates(update.status);\n      return;\n    }\n\n    if (update.action === 'cancel' || plan?.hasBeenCancelled) {\n      this.editingThisPlan = undefined;\n      this.viewToDisplay = 'plans';\n      return;\n    }\n\n    this.receiptListElement.emailSent({\n      id: idToUse,\n      emailStatus: update.status,\n    });\n  }\n\n  /* VIEWS */\n  protected render() {\n    const isEditingPlan =\n      this.viewToDisplay === 'editPlan' && this.editingThisPlan;\n    return html`\n      ${this.sectionTitle}\n      ${isEditingPlan\n        ? html`<ia-mgc-edit-plan\n            .plan=${this.editingThisPlan}\n            @cancelPlan=${() => {\n              this.dispatchEvent(\n                new CustomEvent('cancelPlan', {\n                  detail: { plan: this.editingThisPlan },\n                })\n              );\n            }}\n            .updateAmountHandler=${(\n              plan: MonthlyPlan,\n              options: {\n                amount: number;\n                baseAmount: number;\n                coverFees: boolean;\n                feeCovered: number;\n              }\n            ) => {\n              console.log('updateAmount', plan, { ...options });\n              this.dispatchEvent(\n                new CustomEvent('updateAmount', {\n                  detail: { plan, amountOptions: options },\n                })\n              );\n            }}\n            @updateDate=${(event: CustomEvent) => {\n              const { newDate } = event.detail;\n              console.log('updateDate', newDate);\n              this.dispatchEvent(\n                new CustomEvent('updateDate', {\n                  detail: { plan: this.editingThisPlan, newDate },\n                })\n              );\n            }}\n          ></ia-mgc-edit-plan>`\n        : this.nonEditView}\n    `;\n  }\n\n  get sectionTitle(): TemplateResult {\n    let title = '';\n    let titleStyle = '';\n    let cta = html``;\n\n    const receiptsCTA = html`\n      <ia-button\n        class=\"link slim\"\n        .clickHandler=${async () => {\n          this.viewToDisplay = 'receipts';\n          await this.updateComplete;\n          this.dispatchEvent(new Event(DisplayChangeEvents.receipts));\n        }}\n      >\n        View recent donation history\n      </ia-button>\n    `;\n\n    const displayReceiptsLink =\n      this.receipts.length &&\n      (this.viewToDisplay === 'plans' || this.viewToDisplay === 'welcome');\n\n    switch (this.viewToDisplay) {\n      case 'receipts':\n        title = 'Recent donations';\n        titleStyle = 'default';\n        cta = html`<ia-button\n          class=\"link slim\"\n          id=\"close-receipts\"\n          .clickHandler=${async () => {\n            this.viewToDisplay = this.plans.length ? 'plans' : 'welcome';\n            const eventType = this.plans.length\n              ? DisplayChangeEvents.plans\n              : DisplayChangeEvents.welcome;\n            this.dispatchEvent(new Event(eventType));\n            this.updates = [];\n            await this.updateComplete;\n          }}\n        >\n          Back to account settings\n        </ia-button>`;\n        break;\n\n      case 'editPlan':\n        title = 'Monthly Giving Circle';\n        titleStyle = 'default';\n        cta = html`<ia-button\n          class=\"primary\"\n          id=\"close-edit-plan\"\n          .clickHandler=${async () => {\n            this.viewToDisplay = this.plans.length ? 'plans' : 'welcome';\n            const eventType = this.plans.length\n              ? DisplayChangeEvents.plans\n              : DisplayChangeEvents.welcome;\n            this.dispatchEvent(new Event(eventType));\n            this.updates = [];\n            await this.updateComplete;\n          }}\n        >\n          Back to account settings\n        </ia-button>`;\n        break;\n\n      default:\n        title = 'Monthly Giving Circle';\n        titleStyle = 'heart';\n        if (displayReceiptsLink) {\n          cta = receiptsCTA;\n        }\n        break;\n    }\n\n    return html`\n      <ia-mgc-title titleStyle=${titleStyle}>\n        <span slot=\"title\">${title}</span>\n        <span slot=\"action\">${cta}</span>\n      </ia-mgc-title>\n    `;\n  }\n\n  get nonEditView(): TemplateResult {\n    if (this.viewToDisplay === 'receipts') {\n      return html`\n        <ia-mgc-receipts\n          .receipts=${this.receipts}\n          @EmailReceiptRequest=${(event: CustomEvent) => {\n            console.log('EmailReceiptRequest', event.detail);\n            this.dispatchEvent(\n              new CustomEvent('EmailReceiptRequest', {\n                detail: { ...event.detail },\n              })\n            );\n          }}\n        ></ia-mgc-receipts>\n      `;\n    }\n\n    return html`\n      ${this.viewToDisplay === 'plans' && this.plans.length\n        ? html`\n            <ia-mgc-plans\n              @editThisPlan=${async (event: CustomEvent) => {\n                this.editingThisPlan = event.detail.plan;\n                this.viewToDisplay = 'editPlan';\n                this.dispatchEvent(new Event(DisplayChangeEvents.editPlan));\n                await this.updateComplete;\n              }}\n              .plans=${this.plans}\n              .canEdit=${this.canEdit}\n            ></ia-mgc-plans>\n          `\n        : html`<ia-mgc-welcome\n            .patronName=${this.patronName}\n          ></ia-mgc-welcome>`}\n    `;\n  }\n}\n"]}
+{"version":3,"file":"monthly-giving-circle.js","sourceRoot":"","sources":["../../src/monthly-giving-circle.ts"],"names":[],"mappings":"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","sourcesContent":["import { LitElement, html, TemplateResult, PropertyValues } from 'lit';\nimport { customElement, property } from 'lit/decorators.js';\n\nimport './welcome-message';\nimport './plans';\nimport './presentational/mgc-title';\nimport './receipts';\nimport type { IauxMgcReceipts } from './receipts';\nimport './presentational/mgc-button';\nimport type { MonthlyPlan } from './models/plan';\nimport './edit-plan-form';\nimport type { IauxEditPlanForm } from './edit-plan-form';\n\nexport type APlanUpdate = {\n  plan?: MonthlyPlan;\n  donationId?: string;\n  status: 'success' | 'fail';\n  action: 'receiptSent' | 'cancel' | 'amountUpdate' | 'dateUpdate';\n  message: string;\n};\n\nenum DisplayChangeEvents {\n  welcome = 'ShowWelcome',\n  receipts = 'ShowReceipts',\n  plans = 'ShowPlans',\n  editPlan = 'ShowEditForm',\n}\n\n@customElement('ia-monthly-giving-circle')\nexport class MonthlyGivingCircle extends LitElement {\n  @property({ type: String }) patronName: string = '';\n\n  @property({ type: Array }) receipts = [];\n\n  @property({ type: Array }) updates: APlanUpdate[] = [];\n\n  @property({ type: Array }) plans = [];\n\n  @property({ type: Object }) editingThisPlan?: MonthlyPlan;\n\n  @property({ type: String, reflect: true }) viewToDisplay:\n    | 'welcome'\n    | 'receipts'\n    | 'plans'\n    | 'editPlan' = 'welcome';\n\n  @property({ type: Boolean, reflect: true }) canEdit = false;\n\n  protected createRenderRoot() {\n    return this;\n  }\n\n  updated(changed: PropertyValues) {\n    if (changed.has('plans')) {\n      this.viewToDisplay = this.plans.length ? 'plans' : 'welcome';\n    }\n  }\n\n  get receiptListElement(): IauxMgcReceipts {\n    return this.querySelector('ia-mgc-receipts') as IauxMgcReceipts;\n  }\n\n  get editFormElement(): IauxEditPlanForm {\n    return this.querySelector('ia-mgc-edit-plan') as IauxEditPlanForm;\n  }\n\n  /* Update Callback */\n  updateReceived(update: APlanUpdate) {\n    // log update\n    this.updates.unshift(update);\n\n    const { plan, donationId = '' } = update;\n    const idToUse = plan?.id ?? donationId;\n\n    if (update.action === 'amountUpdate') {\n      this.editFormElement.amountUpdates(update.status);\n      return;\n    }\n\n    if (update.action === 'dateUpdate') {\n      this.editingThisPlan = plan;\n      this.editFormElement.dateUpdates(update.status);\n      return;\n    }\n\n    if (update.action === 'cancel' || plan?.hasBeenCancelled) {\n      this.editingThisPlan = undefined;\n      this.viewToDisplay = 'plans';\n      return;\n    }\n\n    this.receiptListElement.emailSent({\n      id: idToUse,\n      emailStatus: update.status,\n    });\n  }\n\n  /* VIEWS */\n  protected render() {\n    const isEditingPlan =\n      this.viewToDisplay === 'editPlan' && this.editingThisPlan;\n    return html`\n      ${this.sectionTitle}\n      ${isEditingPlan\n        ? html`<ia-mgc-edit-plan\n            .plan=${this.editingThisPlan}\n            @cancelPlan=${() => {\n              this.dispatchEvent(\n                new CustomEvent('cancelPlan', {\n                  detail: { plan: this.editingThisPlan },\n                })\n              );\n            }}\n            .updateAmountHandler=${(\n              plan: MonthlyPlan,\n              options: {\n                amount: number;\n                baseAmount: number;\n                coverFees: boolean;\n                feeCovered: number;\n              }\n            ) => {\n              console.log('updateAmount', plan, { ...options });\n              this.dispatchEvent(\n                new CustomEvent('updateAmount', {\n                  detail: { plan, amountOptions: options },\n                })\n              );\n            }}\n            @updateDate=${(event: CustomEvent) => {\n              const { newDate } = event.detail;\n              console.log('updateDate', newDate);\n              this.dispatchEvent(\n                new CustomEvent('updateDate', {\n                  detail: { plan: this.editingThisPlan, newDate },\n                })\n              );\n            }}\n          ></ia-mgc-edit-plan>`\n        : this.nonEditView}\n    `;\n  }\n\n  get sectionTitle(): TemplateResult {\n    let title = '';\n    let titleStyle = '';\n    let cta = html``;\n\n    const receiptsCTA = html`\n      <ia-mgc-button\n        class=\"link slim\"\n        .clickHandler=${async () => {\n          this.viewToDisplay = 'receipts';\n          await this.updateComplete;\n          this.dispatchEvent(new Event(DisplayChangeEvents.receipts));\n        }}\n      >\n        View recent donation history\n      </ia-mgc-button>\n    `;\n\n    const displayReceiptsLink =\n      this.receipts.length &&\n      (this.viewToDisplay === 'plans' || this.viewToDisplay === 'welcome');\n\n    switch (this.viewToDisplay) {\n      case 'receipts':\n        title = 'Recent donations';\n        titleStyle = 'default';\n        cta = html`<ia-mgc-button\n          class=\"link slim\"\n          id=\"close-receipts\"\n          .clickHandler=${async () => {\n            this.viewToDisplay = this.plans.length ? 'plans' : 'welcome';\n            const eventType = this.plans.length\n              ? DisplayChangeEvents.plans\n              : DisplayChangeEvents.welcome;\n            this.dispatchEvent(new Event(eventType));\n            this.updates = [];\n            await this.updateComplete;\n          }}\n        >\n          Back to account settings\n        </ia-mgc-button>`;\n        break;\n\n      case 'editPlan':\n        title = 'Monthly Giving Circle';\n        titleStyle = 'default';\n        cta = html`<ia-mgc-button\n          class=\"primary\"\n          id=\"close-edit-plan\"\n          .clickHandler=${async () => {\n            this.viewToDisplay = this.plans.length ? 'plans' : 'welcome';\n            const eventType = this.plans.length\n              ? DisplayChangeEvents.plans\n              : DisplayChangeEvents.welcome;\n            this.dispatchEvent(new Event(eventType));\n            this.updates = [];\n            await this.updateComplete;\n          }}\n        >\n          Back to account settings\n        </ia-mgc-button>`;\n        break;\n\n      default:\n        title = 'Monthly Giving Circle';\n        titleStyle = 'heart';\n        if (displayReceiptsLink) {\n          cta = receiptsCTA;\n        }\n        break;\n    }\n\n    return html`\n      <ia-mgc-title titleStyle=${titleStyle}>\n        <span slot=\"title\">${title}</span>\n        <span slot=\"action\">${cta}</span>\n      </ia-mgc-title>\n    `;\n  }\n\n  get nonEditView(): TemplateResult {\n    if (this.viewToDisplay === 'receipts') {\n      return html`\n        <ia-mgc-receipts\n          .receipts=${this.receipts}\n          @EmailReceiptRequest=${(event: CustomEvent) => {\n            console.log('EmailReceiptRequest', event.detail);\n            this.dispatchEvent(\n              new CustomEvent('EmailReceiptRequest', {\n                detail: { ...event.detail },\n              })\n            );\n          }}\n        ></ia-mgc-receipts>\n      `;\n    }\n\n    return html`\n      ${this.viewToDisplay === 'plans' && this.plans.length\n        ? html`\n            <ia-mgc-plans\n              @editThisPlan=${async (event: CustomEvent) => {\n                this.editingThisPlan = event.detail.plan;\n                this.viewToDisplay = 'editPlan';\n                this.dispatchEvent(new Event(DisplayChangeEvents.editPlan));\n                await this.updateComplete;\n              }}\n              .plans=${this.plans}\n              .canEdit=${this.canEdit}\n            ></ia-mgc-plans>\n          `\n        : html`<ia-mgc-welcome\n            .patronName=${this.patronName}\n          ></ia-mgc-welcome>`}\n    `;\n  }\n}\n"]}

package/dist/src/plans.d.ts

@@ -1,6 +1,6 @@
 import { LitElement } from 'lit';
 import type { MonthlyPlan } from './models/plan';
-import './presentational/ia-button';
+import './presentational/mgc-button';
 export declare class IauxMgcPlans extends LitElement {
     plans: never[];
     canEdit: boolean;