@internetarchive/donation-monthly-portal 7.0.1 → 7.0.2

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

@@ -2,6 +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/donation-section-info';
 import '../presentational/mgc-button';
 import '../presentational/mgc-update-status';
 export declare class MGCEditPlanAmount extends LitElement {

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

@@ -3,6 +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/donation-section-info';
 import '../presentational/mgc-button';
 import '../presentational/mgc-update-status';
 let MGCEditPlanAmount = class MGCEditPlanAmount extends LitElement {
@@ -35,22 +36,13 @@ let MGCEditPlanAmount = class MGCEditPlanAmount extends LitElement {
       <section>
         <donation-form-section badgemode="hidebadge" headline="Amount">
           ${!this.currentlyEditing
-            ? html ` <p class="current-amount">
-                  USD $${(_a = this.plan) === null || _a === void 0 ? void 0 : _a.amount}
-                  <ia-mgc-update-status .status=${this.updateStatus}
-                    >${this.updateMessage}</ia-mgc-update-status
-                  >
-                </p>
-                <ia-mgc-button
-                  id="edit-amount"
-                  class="ia-button link"
-                  .clickHandler=${() => {
+            ? html `<ia-mgc-form-section-info
+                @editingRequested=${() => {
                 this.currentlyEditing = true;
                 this.clearStatusMessaging();
             }}
-                >
-                  Edit...
-                </ia-mgc-button>`
+                ><span>USD $${(_a = this.plan) === null || _a === void 0 ? void 0 : _a.amount}</span>
+              </ia-mgc-form-section-info>`
             : nothing}
           ${this.currentlyEditing ? this.editAmountForm : nothing}
         </donation-form-section>

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/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"]}
+{"version":3,"file":"amount.js","sourceRoot":"","sources":["../../../src/form-sections/amount.ts"],"names":[],"mappings":";AAAA,OAAO,EACL,UAAU,EACV,IAAI,EAEJ,OAAO,EACP,GAAG,GAEJ,MAAM,KAAK,CAAC;AACb,OAAO,EAAE,aAAa,EAAE,QAAQ,EAAE,KAAK,EAAE,MAAM,mBAAmB,CAAC;AACnE,OAAO,wCAAwC,CAAC;AAChD,OAAO,EACL,mBAAmB,EACnB,YAAY,GACb,MAAM,4CAA4C,CAAC;AAGpD,OAAO,yCAAyC,CAAC;AACjD,OAAO,8BAA8B,CAAC;AAEtC,OAAO,qCAAqC,CAAC;AAG7C,IAAa,iBAAiB,GAA9B,MAAa,iBAAkB,SAAQ,UAAU;IAAjD;;QAM8B,cAAS,GAAW,CAAC,CAAC;QAEN,qBAAgB,GAAY,KAAK,CAAC;QAEjD,cAAS,GAAY,KAAK,CAAC;QAE5B,kBAAa,GAAW,EAAE,CAAC;QAE3B,iBAAY,GAAW,EAAE,CAAC;QAE1B,iBAAY,GAA4B,EAAE,CAAC;IA8SzE,CAAC;IA1SC,OAAO,CAAC,OAAuB;QAC7B,IAAI,OAAO,CAAC,GAAG,CAAC,MAAM,CAAC,IAAI,IAAI,CAAC,IAAI,EAAE;YACpC,IAAI,CAAC,oBAAoB,EAAE,CAAC;SAC7B;QACD,IAAI,OAAO,CAAC,GAAG,CAAC,WAAW,CAAC,EAAE;YAC5B,IAAI,CAAC,oBAAoB,EAAE,CAAC;SAC7B;QACD,IAAI,OAAO,CAAC,GAAG,CAAC,kBAAkB,CAAC,IAAI,IAAI,CAAC,gBAAgB,EAAE;YAC5D,IAAI,CAAC,IAAI,CAAC,KAAK,EAAE,CAAC;SACnB;QAED,IAAI,OAAO,CAAC,GAAG,CAAC,qBAAqB,CAAC,IAAI,CAAC,IAAI,CAAC,mBAAmB,EAAE;YACnE,IAAI,CAAC,oBAAoB,EAAE,CAAC;SAC7B;IACH,CAAC;IAES,MAAM;;QACd,OAAO,IAAI,CAAA;;;YAGH,CAAC,IAAI,CAAC,gBAAgB;YACtB,CAAC,CAAC,IAAI,CAAA;oCACkB,GAAG,EAAE;gBACvB,IAAI,CAAC,gBAAgB,GAAG,IAAI,CAAC;gBAC7B,IAAI,CAAC,oBAAoB,EAAE,CAAC;YAC9B,CAAC;8BACa,MAAA,IAAI,CAAC,IAAI,0CAAE,MAAM;0CACL;YAC9B,CAAC,CAAC,OAAO;YACT,IAAI,CAAC,gBAAgB,CAAC,CAAC,CAAC,IAAI,CAAC,cAAc,CAAC,CAAC,CAAC,OAAO;;;KAG5D,CAAC;IACJ,CAAC;IAED,8FAA8F;IAC9F,KAAK,CAAC,aAAa,CAAC,MAA0B;QAC5C,IAAI,CAAC,eAAe,EAAE,CAAC;QAEvB,IAAI,CAAC,YAAY,GAAG,MAAM,CAAC;QAC3B,IAAI,CAAC,aAAa;YAChB,MAAM,KAAK,SAAS,CAAC,CAAC,CAAC,gBAAgB,CAAC,CAAC,CAAC,oBAAoB,CAAC;QAEjE,IAAI,MAAM,KAAK,SAAS,EAAE;YACxB,IAAI,CAAC,SAAS,EAAE,CAAC;YACjB,MAAM,IAAI,CAAC,cAAc,CAAC;YAE1B,IAAI,CAAC,YAAY,GAAG,MAAM,CAAC;YAC3B,IAAI,CAAC,aAAa,GAAG,gBAAgB,CAAC;YAEtC,OAAO;SACR;QAGC,IAAI,CAAC,IAAI,CAAC,aAAa,CAAC,6BAA6B,CACtD,CAAC,UAAU,GAAG,KAAK,CAAC;QAErB,IAAI,CAAC,oBAAoB,EAAE,CAAC;QAE5B,MAAM,IAAI,CAAC,cAAc,CAAC;IAC5B,CAAC;IAED,sCAAsC;IACtC,mBAAmB,CAAC,CAAQ;;QAC1B,CAAC,CAAC,cAAc,EAAE,CAAC;QAEnB,MAAM,KAAK,GAAG,IAAI,CAAC,IAAI,CAAC,aAAa,CACnC,sBAAsB,CACH,CAAC;QACtB,IAAI,CAAC,SAAS,GAAG,MAAM,CAAC,KAAK,CAAC,KAAK,CAAC,CAAC;QAErC,IAAI,CAAC,oBAAoB,CAAC,IAAI,CAAC,SAAS,CAAC,CAAC;QAE1C,OAAO,CAAC,GAAG,CAAC,+BAA+B,EAAE;YAC3C,QAAQ,EAAE,IAAI,CAAC,SAAS;YACxB,QAAQ,EAAE,MAAA,IAAI,CAAC,IAAI,0CAAE,IAAI,CAAC,MAAM;YAChC,OAAO,EAAE,MAAA,IAAI,CAAC,mBAAmB,0CAAE,MAAM;SAC1C,CAAC,CAAC;QACH,MAAM,SAAS,GAAG,MAAM,CACtB,mBAAmB,CAAC,cAAc,CAChC,MAAM,CAAC,MAAA,IAAI,CAAC,mBAAmB,0CAAE,MAAM,CAAC,EACxC,IAAI,CAAC,SAAS,CACf,CACF,CAAC;QACF,IAAI,CAAC,aAAa,CAChB,IAAI,WAAW,CAAC,cAAc,EAAE;YAC9B,MAAM,EAAE;gBACN,IAAI,EAAE,IAAI,CAAC,IAAI;gBACf,MAAM,EAAE,SAAS;gBACjB,UAAU,EAAE,MAAA,IAAI,CAAC,mBAAmB,0CAAE,MAAM;gBAC5C,SAAS,EAAE,IAAI,CAAC,SAAS;gBACzB,UAAU,EAAE,MAAA,IAAI,CAAC,mBAAmB,0CAAE,gBAAgB;aACvD;SACF,CAAC,CACH,CAAC;IACJ,CAAC;IAED,2BAA2B;IAC3B,oBAAoB,CAAC,SAAkB;QACrC,IAAI,CAAC,IAAI,CAAC,mBAAmB,IAAI,IAAI,CAAC,IAAI,EAAE;YAC1C,IAAI,CAAC,mBAAmB,GAAG,IAAI,mBAAmB,CAAC;gBACjD,YAAY,EAAE,YAAY,CAAC,OAAO;gBAClC,MAAM,EAAE,CAAC;gBACT,SAAS,EAAE,IAAI;aAChB,CAAC,CAAC;YACH,OAAO;SACR;QAED,IAAI,OAAO,CAAC;QACZ,IAAI,SAAS,EAAE;YACb,OAAO,GAAG,IAAI,mBAAmB,CAAC;gBAChC,YAAY,EAAE,YAAY,CAAC,OAAO;gBAClC,MAAM,EAAE,SAAS;gBACjB,SAAS,EAAE,IAAI;aAChB,CAAC,CAAC;SACJ;aAAM;YACL,MAAM,MAAM,GAAG,IAAI,CAAC,mBAAmB;gBACrC,CAAC,CAAC,IAAI,CAAC,mBAAmB,CAAC,MAAM;gBACjC,CAAC,CAAC,IAAI,CAAC,IAAK,CAAC,MAAM,CAAC;YAEtB,OAAO,GAAG,IAAI,mBAAmB,CAAC;gBAChC,YAAY,EAAE,YAAY,CAAC,OAAO;gBAClC,MAAM;gBACN,SAAS,EAAE,IAAI;aAChB,CAAC,CAAC;SACJ;QAED,IAAI,CAAC,mBAAmB,GAAG,OAAO,CAAC;IACrC,CAAC;IAED,SAAS;QACP,IAAI,CAAC,eAAe,EAAE,CAAC;QACvB,IAAI,CAAC,oBAAoB,EAAE,CAAC;QAC5B,IAAI,CAAC,gBAAgB,GAAG,KAAK,CAAC;QAC9B,IAAI,CAAC,SAAS,GAAG,KAAK,CAAC;QACvB,IAAI,CAAC,YAAY,GAAG,EAAE,CAAC;IACzB,CAAC;IAED,eAAe;QACb,MAAM,KAAK,GAAG,IAAI,CAAC,IAAI,CAAC,aAAa,CACnC,sBAAsB,CACH,CAAC;QACtB,KAAK,CAAC,KAAK,GAAG,EAAE,CAAC;QACjB,IAAI,CAAC,SAAS,GAAG,CAAC,CAAC;QACnB,IAAI,CAAC,mBAAmB,GAAG,SAAS,CAAC;IACvC,CAAC;IAED,KAAK,CAAC,oBAAoB;QACxB,IAAI,CAAC,YAAY,GAAG,EAAE,CAAC;QACvB,IAAI,CAAC,aAAa,GAAG,EAAE,CAAC;QACxB,IAAI,CAAC,YAAY,GAAG,EAAE,CAAC;QACvB,MAAM,IAAI,CAAC,cAAc,CAAC;IAC5B,CAAC;IAED,aAAa;IACb,mBAAmB;QACjB,IAAI,IAAI,CAAC,SAAS,KAAK,CAAC,EAAE;YACxB,OAAO,CAAC,CAAC;SACV;QAED,OAAO,mBAAmB,CAAC,cAAc,CAAC,IAAI,CAAC,SAAS,EAAE,IAAI,CAAC,SAAS,CAAC,CAAC;IAC5E,CAAC;IAED,IAAI,eAAe;;QACjB,OAAO,wBAAwB,MAAA,IAAI,CAAC,mBAAmB,0CAAE,gBAAgB,iBAAiB,CAAC;IAC7F,CAAC;IAED,IAAI,cAAc;;QAChB,OAAO,IAAI,CAAA;;;yCAG0B,MAAA,IAAI,CAAC,IAAI,0CAAE,MAAM;;;;;;;;;;uBAUnC,GAAG,EAAE,CAAC,IAAI,CAAC,oBAAoB,EAAE;uBACjC,CAAC,CAAQ,EAAE,EAAE;YACpB,MAAM,SAAS,GAAG,MAAM,CAAE,CAAC,CAAC,MAA2B,CAAC,KAAK,CAAC,CAAC;YAC/D,IAAI,CAAC,oBAAoB,CAAC,SAAS,CAAC,CAAC;YACrC,IAAI,CAAC,SAAS,GAAG,SAAS,CAAC;QAC7B,CAAC;;;;;;;;;;0BAUW,CAAC,CAAQ,EAAE,EAAE;YACrB,MAAM,KAAK,GAAG,CAAC,CAAC,MAA0B,CAAC;YAC3C,MAAM,SAAS,GAAG,KAAK,CAAC,OAAO,CAAC;YAChC,IAAI,CAAC,SAAS,GAAG,SAAS,CAAC;YAC3B,IAAI,CAAC,oBAAoB,EAAE,CAAC;QAC9B,CAAC;;wCAEuB,IAAI,CAAC,eAAe;;6BAE/B,IAAI,CAAC,mBAAmB,EAAE;;;;gCAIvB,CAAC,CAAQ,EAAE,EAAE;YAC3B,CAAC,CAAC,cAAc,EAAE,CAAC;YACnB,IAAI,CAAC,SAAS,EAAE,CAAC;QACnB,CAAC;;;;;;;;gCAQe,KAAK,EAAE,CAAQ,EAAE,QAAmB,EAAE,EAAE;;YACtD,IAAI,CAAC,oBAAoB,EAAE,CAAC;YAE5B,IAAI,CAAC,IAAI,CAAC,SAAS,EAAE;gBACnB,IAAI,CAAC,YAAY,GAAG,2BAA2B,CAAC;gBAChD,OAAO;aACR;YAED,6CAA6C;YAC5C,QAAsB,CAAC,UAAU,GAAG,IAAI,CAAC;YAC1C,MAAM,QAAQ,CAAC,cAAc,CAAC;YAE9B,+BAA+B;YAC/B,MAAM,KAAK,GAAG,IAAI,CAAC,IAAI,CAAC,aAAa,CACnC,sBAAsB,CACH,CAAC;YACtB,MAAM,eAAe,GAAG,MAAA,MAAM,CAAC,KAAK,CAAC,KAAK,CAAC,mCAAI,CAAC,CAAC;YACjD,MAAM,YAAY,GAAG,eAAe,GAAG,CAAC,CAAC;YACzC,MAAM,aAAa,GAAG,eAAe,IAAI,IAAI,CAAC;YAC9C,IAAI,YAAY,EAAE;gBAChB,IAAI,CAAC,YAAY,GAAG,6BAA6B,CAAC;aACnD;YACD,IAAI,aAAa,EAAE;gBACjB,IAAI,CAAC,YAAY;oBACf,4GAA4G,CAAC;aAChH;YACD,IAAI,aAAa,IAAI,YAAY,EAAE;gBACjC,6CAA6C;gBAC5C,QAAsB,CAAC,UAAU,GAAG,KAAK,CAAC;gBAC3C,MAAM,QAAQ,CAAC,cAAc,CAAC;gBAC9B,OAAO;aACR;YAED,IAAI,CAAC,mBAAmB,CAAC,CAAC,CAAC,CAAC;QAC9B,CAAC;;;;8CAI6B,IAAI,CAAC,YAAY;mBAC5C,IAAI,CAAC,aAAa;;;;6BAIR,IAAI,CAAC,YAAY;;;KAGzC,CAAC;IACJ,CAAC;CA+BF,CAAA;AA7BQ,wBAAM,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA4BlB,CAAC;AA5T0B;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;+CAAoB;AAGnB;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;8DAA2C;AAE1C;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;oDAAuB;AAEN;IAA3C,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;2DAAmC;AAEjD;IAA5B,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,CAAC;oDAA4B;AAE5B;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;wDAA4B;AAE3B;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;uDAA2B;AAE1B;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;uDAA4C;AAExD;IAAd,KAAK,CAAC,MAAM,CAAC;+CAAwB;AAlB3B,iBAAiB;IAD7B,aAAa,CAAC,yBAAyB,CAAC;GAC5B,iBAAiB,CA8T7B;SA9TY,iBAAiB","sourcesContent":["import {\n  LitElement,\n  html,\n  PropertyValues,\n  nothing,\n  css,\n  TemplateResult,\n} from 'lit';\nimport { customElement, property, query } from 'lit/decorators.js';\nimport '@internetarchive/donation-form-section';\nimport {\n  DonationPaymentInfo,\n  DonationType,\n} from '@internetarchive/donation-form-data-models';\n\nimport type { MonthlyPlan } from '../models/plan';\nimport '../presentational/donation-section-info';\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`<ia-mgc-form-section-info\n                @editingRequested=${() => {\n                  this.currentlyEditing = true;\n                  this.clearStatusMessaging();\n                }}\n                ><span>USD $${this.plan?.amount}</span>\n              </ia-mgc-form-section-info>`\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/date.js

@@ -42,22 +42,13 @@ let MGCEditPlanDate = class MGCEditPlanDate extends LitElement {
           headline="Change next donation date"
         >
           ${!this.currentlyEditing
-            ? html ` <p class="current-date">
-                  ${(_a = this.plan) === null || _a === void 0 ? void 0 : _a.nextBillingDateLocale}
-                  <ia-mgc-update-status .status=${this.updateStatus}
-                    >${this.updateMessage}</ia-mgc-update-status
-                  >
-                </p>
-                <ia-mgc-button
-                  id="open-edit-date-form"
-                  class="ia-button link"
-                  .clickHandler=${() => {
+            ? html `<ia-mgc-form-section-info
+                @editingRequested=${() => {
                 this.currentlyEditing = true;
                 this.clearStatusMessaging();
             }}
-                >
-                  Edit...
-                </ia-mgc-button>`
+                ><span>${(_a = this.plan) === null || _a === void 0 ? void 0 : _a.nextBillingDateLocale}</span>
+              </ia-mgc-form-section-info>`
             : nothing}
           ${this.currentlyEditing ? this.editDateForm : nothing}
         </donation-form-section>

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/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"]}
+{"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`<ia-mgc-form-section-info\n                @editingRequested=${() => {\n                  this.currentlyEditing = true;\n                  this.clearStatusMessaging();\n                }}\n                ><span>${this.plan?.nextBillingDateLocale}</span>\n              </ia-mgc-form-section-info>`\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.js

@@ -117,7 +117,7 @@ let MonthlyGivingCircle = class MonthlyGivingCircle extends LitElement {
                 title = 'Recent donations';
                 titleStyle = 'default';
                 cta = html `<ia-mgc-button
-          class="link slim"
+          class="primary"
           id="close-receipts"
           .clickHandler=${async () => {
                     this.viewToDisplay = this.plans.length ? 'plans' : 'welcome';

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/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"]}
+{"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=\"primary\"\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.js

@@ -106,7 +106,7 @@ let IauxMgcPlans = class IauxMgcPlans extends LitElement {
 IauxMgcPlans.styles = css `
     :host {
       max-height: 500px;
-      overflow-y: scroll;
+      overflow-y: auto;
       display: block;
     }
 

package/dist/src/plans.js.map

@@ -1 +1 @@
-{"version":3,"file":"plans.js","sourceRoot":"","sources":["../../src/plans.ts"],"names":[],"mappings":";AAAA,sCAAsC;AACtC,OAAO,EAAE,UAAU,EAAE,IAAI,EAAE,GAAG,EAAE,OAAO,EAAE,MAAM,KAAK,CAAC;AACrD,OAAO,EAAE,aAAa,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAC;AAI5D,OAAO,6BAA6B,CAAC;AAIrC,IAAa,YAAY,GAAzB,MAAa,YAAa,SAAQ,UAAU;IAA5C;;QAC6B,UAAK,GAAG,EAAE,CAAC;QAEM,YAAO,GAAG,KAAK,CAAC;IA+L9D,CAAC;IA7LW,MAAM;QACd,OAAO,IAAI,CAAA;;;YAGH,IAAI,CAAC,KAAK,CAAC,GAAG,CAAC,CAAC,IAAiB,EAAE,EAAE;;YACrC,IAAI,UAAU,GACZ,MAAA,MAAA,IAAI,CAAC,OAAO,0CAAE,iBAAiB,mCAAI,kBAAkB,CAAC;YACxD,IAAI,UAAU,KAAK,YAAY,EAAE;gBAC/B,UAAU,GAAG,aAAa,CAAC;aAC5B;YACD,MAAM,QAAQ,GAAG,MAAA,MAAA,IAAI,CAAC,OAAO,0CAAE,QAAQ,mCAAI,qBAAqB,CAAC;YACjE,MAAM,KAAK,GAAG,CAAA,MAAA,IAAI,CAAC,OAAO,0CAAE,KAAK;gBAC/B,CAAC,CAAC,MAAM,MAAA,IAAI,CAAC,OAAO,0CAAE,KAAK,EAAE;gBAC7B,CAAC,CAAC,qBAAqB,CAAC;YAE1B,OAAO,IAAI,CAAA;0BACG,GAAG,IAAI,CAAC,IAAI,CAAC,WAAW,CAAC,CAAC,CAAC,WAAW,CAAC,CAAC,CAAC,EAAE,EAAE;;;;;wBAK/C,IAAI,CAAC,QAAQ;wBACb,IAAI,CAAC,cAAc,GAAG,IAAI,CAAC,MAAM;;sBAEnC,IAAI,CAAC,MAAM;gBACX,CAAC,CAAC,IAAI,CAAA,uCAAuC;gBAC7C,CAAC,CAAC,OAAO;;;;yBAIN,UAAU;sBACb,CAAA,MAAA,IAAI,CAAC,OAAO,0CAAE,iBAAiB,MAAK,YAAY;gBAChD,CAAC,CAAC,IAAI,CAAA,MAAM,QAAQ;+BACX,KAAK,MAAM;gBACpB,CAAC,CAAC,OAAO;sBACT,CAAA,MAAA,IAAI,CAAC,OAAO,0CAAE,iBAAiB,MAAK,QAAQ;gBAC5C,CAAC,CAAC,IAAI,CAAA;;oCAEQ,UAAU,MAAA,IAAI,CAAC,OAAO,0CAAE,WAAW,EAAE;+BAC1C,MAAA,IAAI,CAAC,OAAO,0CAAE,WAAW;;6BAE3B;gBACP,CAAC,CAAC,OAAO;sBACT,CAAA,MAAA,IAAI,CAAC,OAAO,0CAAE,iBAAiB,MAAK,OAAO;gBAC3C,CAAC,CAAC,IAAI,CAAA;;oCAEQ,UAAU,MAAA,IAAI,CAAC,OAAO,0CAAE,aAAa,EAAE;+BAC5C,MAAA,IAAI,CAAC,OAAO,0CAAE,WAAW;;6BAE3B;gBACP,CAAC,CAAC,OAAO;sBACT,CAAA,MAAA,IAAI,CAAC,OAAO,0CAAE,iBAAiB,MAAK,YAAY;gBAChD,CAAC,CAAC,IAAI,CAAA;;4BAEA,MAAA,MAAA,IAAI,CAAC,OAAO,0CAAE,eAAe,mCAC/B,iBAAiB,IAAI,MAAA,MAAA,IAAI,CAAC,OAAO,0CAAE,cAAc,mCACjD,gBAAgB;6BACb;gBACP,CAAC,CAAC,OAAO;;;;yBAIN,IAAI,CAAC,qBAAqB;;;kBAGjC,IAAI,CAAC,OAAO,CAAC,IAAI,CAAC;;aAEvB,CAAC;QACJ,CAAC,CAAC;;;KAGP,CAAC;IACJ,CAAC;IAED,OAAO,CAAC,IAAiB;QACvB,IAAI,CAAC,IAAI,CAAC,OAAO,EAAE;YACjB,MAAM,UAAU,GAAG,6EAA6E,CAAC;YACjG,OAAO,IAAI,CAAA;;kBAEC,UAAU;WACjB,CAAC;SACP;QAED,MAAM,OAAO,GAAG,IAAI,CAAC,IAAI,CAAC,WAAW;YACnC,CAAC,CAAC,mBAAmB;YACrB,CAAC,CAAC,8BAA8B,CAAC;QAEnC,OAAO,IAAI,CAAA;;oBAEK,IAAI,CAAC,IAAI,CAAC,WAAW;sBACnB,KAAK,EAAE,CAAQ,EAAE,QAAmB,EAAE,EAAE;YACtD,iBAAiB;YACjB,QAAQ,CAAC,UAAU,GAAG,IAAI,CAAC;YAC3B,YAAY;YACZ,IAAI,CAAC,aAAa,CAChB,IAAI,WAAW,CAAC,cAAc,EAAE,EAAE,MAAM,EAAE,EAAE,IAAI,EAAE,EAAE,CAAC,CACtD,CAAC;QACJ,CAAC;SACE,OAAO;MACV,CAAC;IACL,CAAC;CAyFF,CAAA;AAvFQ,mBAAM,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAsFlB,CAAC;AAhMyB;IAA1B,QAAQ,CAAC,EAAE,IAAI,EAAE,KAAK,EAAE,CAAC;2CAAY;AAEM;IAA3C,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;6CAAiB;AAHjD,YAAY;IADxB,aAAa,CAAC,cAAc,CAAC;GACjB,YAAY,CAkMxB;SAlMY,YAAY","sourcesContent":["/* eslint-disable no-param-reassign */\nimport { LitElement, html, css, nothing } from 'lit';\nimport { customElement, property } from 'lit/decorators.js';\n\nimport type { MonthlyPlan } from './models/plan';\n\nimport './presentational/mgc-button';\nimport type { MGCButton } from './presentational/mgc-button';\n\n@customElement('ia-mgc-plans')\nexport class IauxMgcPlans extends LitElement {\n  @property({ type: Array }) plans = [];\n\n  @property({ type: Boolean, reflect: true }) canEdit = false;\n\n  protected render() {\n    return html`\n      <section class=\"monthly-giving-circle\">\n        <ul>\n          ${this.plans.map((plan: MonthlyPlan) => {\n            let methodType =\n              plan.payment?.paymentMethodType ?? 'Method not found';\n            if (methodType === 'creditCard') {\n              methodType = 'Credit card';\n            }\n            const cardType = plan.payment?.cardType ?? 'Card type not found';\n            const last4 = plan.payment?.last4\n              ? `...${plan.payment?.last4}`\n              : 'CC number not found';\n\n            return html`\n              <li class=${`${plan.plan.isCancelled ? 'cancelled' : ''}`}>\n                <div class=\"info\">\n                  <div class=\"amount\">\n                    <h3>Amount</h3>\n                    <p>\n                      ${plan.currency}\n                      ${plan.currencySymbol}${plan.amount}/month\n                    </p>\n                    ${plan.isTest\n                      ? html`<p class=\"is-test\">(Test payment)</p>`\n                      : nothing}\n                  </div>\n                  <div class=\"payment-details\">\n                    <h3>Method</h3>\n                    <p>${methodType}</p>\n                    ${plan.payment?.paymentMethodType === 'creditCard'\n                      ? html`<p>${cardType}</p>\n                          <p>${last4}</p>`\n                      : nothing}\n                    ${plan.payment?.paymentMethodType === 'Paypal'\n                      ? html`<p>\n                          Paypal email:\n                          <a href=${`mailto:${plan.payment?.paypalEmail}`}\n                            >${plan.payment?.paypalEmail}</a\n                          >\n                        </p>`\n                      : nothing}\n                    ${plan.payment?.paymentMethodType === 'Venmo'\n                      ? html`<p>\n                          Venmo username:\n                          <a href=${`mailto:${plan.payment?.venmoUsername}`}\n                            >${plan.payment?.paypalEmail}</a\n                          >\n                        </p>`\n                      : nothing}\n                    ${plan.payment?.paymentMethodType !== 'creditCard'\n                      ? html`<p>\n                          Expires:\n                          ${plan.payment?.expirationMonth ??\n                          'month not found'}/${plan.payment?.expirationYear ??\n                          'year not found'}\n                        </p>`\n                      : nothing}\n                  </div>\n                  <div class=\"next-donation\">\n                    <h3>Next Donation</h3>\n                    <p>${plan.nextBillingDateLocale}</p>\n                  </div>\n                </div>\n                ${this.planCTA(plan)}\n              </li>\n            `;\n          })}\n        </ul>\n      </section>\n    `;\n  }\n\n  planCTA(plan: MonthlyPlan) {\n    if (!this.canEdit) {\n      const mailToText = `mailto:donations@archive.org?subject=I'd like to update my monthly donation`;\n      return html`<p class=\"email-edit-plan\">\n        Need to update your plan further? Please email us at\n        <a href=${mailToText}>donations@archive.org</a>.\n      </p>`;\n    }\n\n    const ctaText = plan.plan.isCancelled\n      ? 'Plan is cancelled'\n      : 'Manage this monthly donation';\n\n    return html`<ia-mgc-button\n      class=\"ia-button link edit-donation\"\n      .isDisabled=${plan.plan.isCancelled}\n      .clickHandler=${async (e: Event, iaButton: MGCButton) => {\n        // disable button\n        iaButton.isDisabled = true;\n        // open form\n        this.dispatchEvent(\n          new CustomEvent('editThisPlan', { detail: { plan } })\n        );\n      }}\n      >${ctaText}</ia-mgc-button\n    >`;\n  }\n\n  static styles = css`\n    :host {\n      max-height: 500px;\n      overflow-y: scroll;\n      display: block;\n    }\n\n    .is-test {\n      font-size: 0.8rem;\n    }\n\n    li {\n      border: 1px solid #23765d;\n      background-color: #eeffee;\n      display: block;\n      width: inherit;\n    }\n    li.cancelled {\n      background-color: lightgoldenrodyellow;\n    }\n    table {\n      width: 100%;\n      text-align: left;\n      max-width: 600px;\n    }\n\n    ul {\n      padding: 0;\n      list-style-type: none;\n      margin: 0;\n    }\n\n    ul li {\n      border: 1px solid #23765d;\n      background-color: #eeffee;\n      margin: 0.5rem 0;\n      padding: 0.5rem 0.5rem 1rem 0.5rem;\n      position: relative;\n    }\n\n    ul li button.edit-donation {\n      height: 30px;\n      display: block;\n      position: absolute;\n      bottom: 0;\n    }\n\n    ul li .info {\n      display: grid;\n      min-height: 90px;\n      grid-template-columns: 0.5fr 1fr 0.5fr;\n      grid-template-rows: 1fr;\n      gap: 0px 5px;\n      grid-auto-flow: row;\n      grid-template-areas: 'amount details next-donation';\n    }\n\n    ul li .info .amount {\n      grid-area: amount;\n    }\n\n    ul li .info .payment-details {\n      grid-area: details;\n    }\n\n    ul li .info .next-donation {\n      grid-area: next-donation;\n    }\n\n    ul li .info > * {\n      margin: 0 0 0.5rem 0;\n    }\n\n    ul li .info > * > * {\n      margin: 0;\n    }\n\n    .email-edit-plan {\n      margin-bottom: 0;\n    }\n\n    @media screen and (max-width: 500px) {\n      ul li .info {\n        display: block;\n      }\n    }\n  `;\n}\n"]}
+{"version":3,"file":"plans.js","sourceRoot":"","sources":["../../src/plans.ts"],"names":[],"mappings":"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","sourcesContent":["/* eslint-disable no-param-reassign */\nimport { LitElement, html, css, nothing } from 'lit';\nimport { customElement, property } from 'lit/decorators.js';\n\nimport type { MonthlyPlan } from './models/plan';\n\nimport './presentational/mgc-button';\nimport type { MGCButton } from './presentational/mgc-button';\n\n@customElement('ia-mgc-plans')\nexport class IauxMgcPlans extends LitElement {\n  @property({ type: Array }) plans = [];\n\n  @property({ type: Boolean, reflect: true }) canEdit = false;\n\n  protected render() {\n    return html`\n      <section class=\"monthly-giving-circle\">\n        <ul>\n          ${this.plans.map((plan: MonthlyPlan) => {\n            let methodType =\n              plan.payment?.paymentMethodType ?? 'Method not found';\n            if (methodType === 'creditCard') {\n              methodType = 'Credit card';\n            }\n            const cardType = plan.payment?.cardType ?? 'Card type not found';\n            const last4 = plan.payment?.last4\n              ? `...${plan.payment?.last4}`\n              : 'CC number not found';\n\n            return html`\n              <li class=${`${plan.plan.isCancelled ? 'cancelled' : ''}`}>\n                <div class=\"info\">\n                  <div class=\"amount\">\n                    <h3>Amount</h3>\n                    <p>\n                      ${plan.currency}\n                      ${plan.currencySymbol}${plan.amount}/month\n                    </p>\n                    ${plan.isTest\n                      ? html`<p class=\"is-test\">(Test payment)</p>`\n                      : nothing}\n                  </div>\n                  <div class=\"payment-details\">\n                    <h3>Method</h3>\n                    <p>${methodType}</p>\n                    ${plan.payment?.paymentMethodType === 'creditCard'\n                      ? html`<p>${cardType}</p>\n                          <p>${last4}</p>`\n                      : nothing}\n                    ${plan.payment?.paymentMethodType === 'Paypal'\n                      ? html`<p>\n                          Paypal email:\n                          <a href=${`mailto:${plan.payment?.paypalEmail}`}\n                            >${plan.payment?.paypalEmail}</a\n                          >\n                        </p>`\n                      : nothing}\n                    ${plan.payment?.paymentMethodType === 'Venmo'\n                      ? html`<p>\n                          Venmo username:\n                          <a href=${`mailto:${plan.payment?.venmoUsername}`}\n                            >${plan.payment?.paypalEmail}</a\n                          >\n                        </p>`\n                      : nothing}\n                    ${plan.payment?.paymentMethodType !== 'creditCard'\n                      ? html`<p>\n                          Expires:\n                          ${plan.payment?.expirationMonth ??\n                          'month not found'}/${plan.payment?.expirationYear ??\n                          'year not found'}\n                        </p>`\n                      : nothing}\n                  </div>\n                  <div class=\"next-donation\">\n                    <h3>Next Donation</h3>\n                    <p>${plan.nextBillingDateLocale}</p>\n                  </div>\n                </div>\n                ${this.planCTA(plan)}\n              </li>\n            `;\n          })}\n        </ul>\n      </section>\n    `;\n  }\n\n  planCTA(plan: MonthlyPlan) {\n    if (!this.canEdit) {\n      const mailToText = `mailto:donations@archive.org?subject=I'd like to update my monthly donation`;\n      return html`<p class=\"email-edit-plan\">\n        Need to update your plan further? Please email us at\n        <a href=${mailToText}>donations@archive.org</a>.\n      </p>`;\n    }\n\n    const ctaText = plan.plan.isCancelled\n      ? 'Plan is cancelled'\n      : 'Manage this monthly donation';\n\n    return html`<ia-mgc-button\n      class=\"ia-button link edit-donation\"\n      .isDisabled=${plan.plan.isCancelled}\n      .clickHandler=${async (e: Event, iaButton: MGCButton) => {\n        // disable button\n        iaButton.isDisabled = true;\n        // open form\n        this.dispatchEvent(\n          new CustomEvent('editThisPlan', { detail: { plan } })\n        );\n      }}\n      >${ctaText}</ia-mgc-button\n    >`;\n  }\n\n  static styles = css`\n    :host {\n      max-height: 500px;\n      overflow-y: auto;\n      display: block;\n    }\n\n    .is-test {\n      font-size: 0.8rem;\n    }\n\n    li {\n      border: 1px solid #23765d;\n      background-color: #eeffee;\n      display: block;\n      width: inherit;\n    }\n    li.cancelled {\n      background-color: lightgoldenrodyellow;\n    }\n    table {\n      width: 100%;\n      text-align: left;\n      max-width: 600px;\n    }\n\n    ul {\n      padding: 0;\n      list-style-type: none;\n      margin: 0;\n    }\n\n    ul li {\n      border: 1px solid #23765d;\n      background-color: #eeffee;\n      margin: 0.5rem 0;\n      padding: 0.5rem 0.5rem 1rem 0.5rem;\n      position: relative;\n    }\n\n    ul li button.edit-donation {\n      height: 30px;\n      display: block;\n      position: absolute;\n      bottom: 0;\n    }\n\n    ul li .info {\n      display: grid;\n      min-height: 90px;\n      grid-template-columns: 0.5fr 1fr 0.5fr;\n      grid-template-rows: 1fr;\n      gap: 0px 5px;\n      grid-auto-flow: row;\n      grid-template-areas: 'amount details next-donation';\n    }\n\n    ul li .info .amount {\n      grid-area: amount;\n    }\n\n    ul li .info .payment-details {\n      grid-area: details;\n    }\n\n    ul li .info .next-donation {\n      grid-area: next-donation;\n    }\n\n    ul li .info > * {\n      margin: 0 0 0.5rem 0;\n    }\n\n    ul li .info > * > * {\n      margin: 0;\n    }\n\n    .email-edit-plan {\n      margin-bottom: 0;\n    }\n\n    @media screen and (max-width: 500px) {\n      ul li .info {\n        display: block;\n      }\n    }\n  `;\n}\n"]}

package/dist/src/presentational/donation-section-info.d.ts

@@ -0,0 +1,5 @@
+import { LitElement } from 'lit';
+import './mgc-button';
+export declare class MGCFormSectionInfo extends LitElement {
+    protected render(): import("lit").TemplateResult<1>;
+}

package/dist/src/presentational/donation-section-info.js

@@ -0,0 +1,28 @@
+import { __decorate } from "tslib";
+import { LitElement, html } from 'lit';
+import { customElement } from 'lit/decorators.js';
+import './mgc-button';
+let MGCFormSectionInfo = class MGCFormSectionInfo extends LitElement {
+    render() {
+        return html `
+      <div class="mgc-donation-section-info">
+        <p><slot></slot></p>
+        <ia-mgc-button
+          class="ia-button link"
+          .clickHandler=${(_event, iaButton) => {
+            // eslint-disable-next-line no-param-reassign
+            iaButton.isDisabled = true;
+            this.dispatchEvent(new Event('editingRequested'));
+        }}
+        >
+          Edit...
+        </ia-mgc-button>
+      </div>
+    `;
+    }
+};
+MGCFormSectionInfo = __decorate([
+    customElement('ia-mgc-form-section-info')
+], MGCFormSectionInfo);
+export { MGCFormSectionInfo };
+//# sourceMappingURL=donation-section-info.js.map

package/dist/src/presentational/donation-section-info.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"donation-section-info.js","sourceRoot":"","sources":["../../../src/presentational/donation-section-info.ts"],"names":[],"mappings":";AAAA,OAAO,EAAE,UAAU,EAAE,IAAI,EAAE,MAAM,KAAK,CAAC;AACvC,OAAO,EAAE,aAAa,EAAE,MAAM,mBAAmB,CAAC;AAClD,OAAO,cAAc,CAAC;AAItB,IAAa,kBAAkB,GAA/B,MAAa,kBAAmB,SAAQ,UAAU;IACtC,MAAM;QACd,OAAO,IAAI,CAAA;;;;;0BAKW,CAAC,MAAa,EAAE,QAAmB,EAAE,EAAE;YACrD,6CAA6C;YAC7C,QAAQ,CAAC,UAAU,GAAG,IAAI,CAAC;YAC3B,IAAI,CAAC,aAAa,CAAC,IAAI,KAAK,CAAC,kBAAkB,CAAC,CAAC,CAAC;QACpD,CAAC;;;;;KAKN,CAAC;IACJ,CAAC;CACF,CAAA;AAlBY,kBAAkB;IAD9B,aAAa,CAAC,0BAA0B,CAAC;GAC7B,kBAAkB,CAkB9B;SAlBY,kBAAkB","sourcesContent":["import { LitElement, html } from 'lit';\nimport { customElement } from 'lit/decorators.js';\nimport './mgc-button';\nimport type { MGCButton } from './mgc-button';\n\n@customElement('ia-mgc-form-section-info')\nexport class MGCFormSectionInfo extends LitElement {\n  protected render() {\n    return html`\n      <div class=\"mgc-donation-section-info\">\n        <p><slot></slot></p>\n        <ia-mgc-button\n          class=\"ia-button link\"\n          .clickHandler=${(_event: Event, iaButton: MGCButton) => {\n            // eslint-disable-next-line no-param-reassign\n            iaButton.isDisabled = true;\n            this.dispatchEvent(new Event('editingRequested'));\n          }}\n        >\n          Edit...\n        </ia-mgc-button>\n      </div>\n    `;\n  }\n}\n"]}

package/dist/src/presentational/mgc-title.js

@@ -30,6 +30,7 @@ MGCTitle.styles = css `
     :host {
       padding-bottom: 5px;
       display: block;
+      --link-button-padding: 0.5rem;
     }
 
     :host([titlestyle='default']) h2 {
@@ -50,7 +51,7 @@ MGCTitle.styles = css `
       align-content: center;
       margin: 0;
       justify-content: space-between;
-      align-items: flex-end;
+      align-items: center;
       line-height: normal;
     }
 
@@ -76,6 +77,10 @@ MGCTitle.styles = css `
       align-items: flex-end;
     }
 
+    ia-mgc-button {
+      --link-button-padding: 0.5rem;
+    }
+
     @media screen and (max-width: 450px) {
       h2,
       slot[name='action'] {

package/dist/src/presentational/mgc-title.js.map

@@ -1 +1 @@
-{"version":3,"file":"mgc-title.js","sourceRoot":"","sources":["../../../src/presentational/mgc-title.ts"],"names":[],"mappings":";AAAA,OAAO,EAAE,UAAU,EAAE,IAAI,EAAE,GAAG,EAAkB,OAAO,EAAE,MAAM,KAAK,CAAC;AACrE,OAAO,EAAE,aAAa,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAC;AAE5D,OAAO,6CAA6C,CAAC;AAGrD,IAAa,QAAQ,GAArB,MAAa,QAAS,SAAQ,UAAU;IAAxC;;QAC8B,eAAU,GAAwB,OAAO,CAAC;IAkFxE,CAAC;IAhFC,IAAI,KAAK;QACP,OAAO,IAAI,CAAC,UAAU,KAAK,OAAO;YAChC,CAAC,CAAC,IAAI,CAAA,oEAAoE;YAC1E,CAAC,CAAC,OAAO,CAAC;IACd,CAAC;IAED,MAAM;QACJ,OAAO,IAAI,CAAA;;;;cAID,IAAI,CAAC,KAAK;;;;;;KAMnB,CAAC;IACJ,CAAC;CA8DF,CAAA;AA5DQ,eAAM,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA2DlB,CAAC;AAjF0B;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;4CAA2C;AAD3D,QAAQ;IADpB,aAAa,CAAC,cAAc,CAAC;GACjB,QAAQ,CAmFpB;SAnFY,QAAQ","sourcesContent":["import { LitElement, html, css, TemplateResult, nothing } from 'lit';\nimport { customElement, property } from 'lit/decorators.js';\n\nimport '@internetarchive/icon-donate/icon-donate.js';\n\n@customElement('ia-mgc-title')\nexport class MGCTitle extends LitElement {\n  @property({ type: String }) titleStyle: 'heart' | 'default' = 'heart';\n\n  get heart(): TemplateResult | typeof nothing {\n    return this.titleStyle === 'heart'\n      ? html` <div class=\"icon-donate\"><ia-icon-donate></ia-icon-donate></div> `\n      : nothing;\n  }\n\n  render() {\n    return html`\n      <div>\n        <h2>\n          <div class=\"title-section\">\n            ${this.heart}\n            <slot name=\"title\"></slot>\n          </div>\n          <slot name=\"action\"></slot>\n        </h2>\n      </div>\n    `;\n  }\n\n  static styles = css`\n    :host {\n      padding-bottom: 5px;\n      display: block;\n    }\n\n    :host([titlestyle='default']) h2 {\n      justify-content: flex-start;\n      gap: 20px;\n    }\n\n    :host([titlestyle='heart']) h2 .title-section {\n      width: 100%;\n      display: flex;\n    }\n\n    h2 {\n      font-size: 1.5em;\n      display: flex;\n      flex-direction: row;\n      flex-wrap: nowrap;\n      align-content: center;\n      margin: 0;\n      justify-content: space-between;\n      align-items: flex-end;\n      line-height: normal;\n    }\n\n    h2 .icon-donate {\n      display: flex;\n      flex-direction: row;\n      flex-wrap: nowrap;\n      align-content: flex-end;\n      align-items: center;\n      justify-content: flex-start;\n    }\n\n    h2 .icon-donate {\n      --iconFillColor: red;\n      --iconWidth: 1.2em;\n      --iconHeight: 1.2em;\n    }\n\n    slot[name='action'] {\n      padding: 0 !important;\n      display: flex;\n      justify-content: flex-end;\n      align-items: flex-end;\n    }\n\n    @media screen and (max-width: 450px) {\n      h2,\n      slot[name='action'] {\n        display: block;\n      }\n      slot[name='action'] {\n        margin-top: 10px;\n      }\n    }\n  `;\n}\n"]}
+{"version":3,"file":"mgc-title.js","sourceRoot":"","sources":["../../../src/presentational/mgc-title.ts"],"names":[],"mappings":";AAAA,OAAO,EAAE,UAAU,EAAE,IAAI,EAAE,GAAG,EAAkB,OAAO,EAAE,MAAM,KAAK,CAAC;AACrE,OAAO,EAAE,aAAa,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAC;AAE5D,OAAO,6CAA6C,CAAC;AAGrD,IAAa,QAAQ,GAArB,MAAa,QAAS,SAAQ,UAAU;IAAxC;;QAC8B,eAAU,GAAwB,OAAO,CAAC;IAuFxE,CAAC;IArFC,IAAI,KAAK;QACP,OAAO,IAAI,CAAC,UAAU,KAAK,OAAO;YAChC,CAAC,CAAC,IAAI,CAAA,oEAAoE;YAC1E,CAAC,CAAC,OAAO,CAAC;IACd,CAAC;IAED,MAAM;QACJ,OAAO,IAAI,CAAA;;;;cAID,IAAI,CAAC,KAAK;;;;;;KAMnB,CAAC;IACJ,CAAC;CAmEF,CAAA;AAjEQ,eAAM,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAgElB,CAAC;AAtF0B;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;4CAA2C;AAD3D,QAAQ;IADpB,aAAa,CAAC,cAAc,CAAC;GACjB,QAAQ,CAwFpB;SAxFY,QAAQ","sourcesContent":["import { LitElement, html, css, TemplateResult, nothing } from 'lit';\nimport { customElement, property } from 'lit/decorators.js';\n\nimport '@internetarchive/icon-donate/icon-donate.js';\n\n@customElement('ia-mgc-title')\nexport class MGCTitle extends LitElement {\n  @property({ type: String }) titleStyle: 'heart' | 'default' = 'heart';\n\n  get heart(): TemplateResult | typeof nothing {\n    return this.titleStyle === 'heart'\n      ? html` <div class=\"icon-donate\"><ia-icon-donate></ia-icon-donate></div> `\n      : nothing;\n  }\n\n  render() {\n    return html`\n      <div>\n        <h2>\n          <div class=\"title-section\">\n            ${this.heart}\n            <slot name=\"title\"></slot>\n          </div>\n          <slot name=\"action\"></slot>\n        </h2>\n      </div>\n    `;\n  }\n\n  static styles = css`\n    :host {\n      padding-bottom: 5px;\n      display: block;\n      --link-button-padding: 0.5rem;\n    }\n\n    :host([titlestyle='default']) h2 {\n      justify-content: flex-start;\n      gap: 20px;\n    }\n\n    :host([titlestyle='heart']) h2 .title-section {\n      width: 100%;\n      display: flex;\n    }\n\n    h2 {\n      font-size: 1.5em;\n      display: flex;\n      flex-direction: row;\n      flex-wrap: nowrap;\n      align-content: center;\n      margin: 0;\n      justify-content: space-between;\n      align-items: center;\n      line-height: normal;\n    }\n\n    h2 .icon-donate {\n      display: flex;\n      flex-direction: row;\n      flex-wrap: nowrap;\n      align-content: flex-end;\n      align-items: center;\n      justify-content: flex-start;\n    }\n\n    h2 .icon-donate {\n      --iconFillColor: red;\n      --iconWidth: 1.2em;\n      --iconHeight: 1.2em;\n    }\n\n    slot[name='action'] {\n      padding: 0 !important;\n      display: flex;\n      justify-content: flex-end;\n      align-items: flex-end;\n    }\n\n    ia-mgc-button {\n      --link-button-padding: 0.5rem;\n    }\n\n    @media screen and (max-width: 450px) {\n      h2,\n      slot[name='action'] {\n        display: block;\n      }\n      slot[name='action'] {\n        margin-top: 10px;\n      }\n    }\n  `;\n}\n"]}

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

@@ -32,10 +32,10 @@ describe('<ia-mgc-edit-plan-amount>', () => {
     it('displays with call to edit', async () => {
         var _a, _b;
         const el = await fixture(html `<ia-mgc-edit-plan-amount .plan=${plan}></ia-mgc-edit-plan-amount>`);
-        const amountLabel = (_a = el.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector('.current-amount');
-        expect(amountLabel).to.exist;
-        expect(amountLabel === null || amountLabel === void 0 ? void 0 : amountLabel.textContent).to.contain('$5');
-        const cta = (_b = el.shadowRoot) === null || _b === void 0 ? void 0 : _b.querySelector('ia-mgc-button#edit-amount');
+        const holder = (_a = el.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector('ia-mgc-form-section-info');
+        expect(holder).to.exist;
+        expect(holder === null || holder === void 0 ? void 0 : holder.textContent).to.contain('$5');
+        const cta = (_b = holder === null || holder === void 0 ? void 0 : holder.shadowRoot) === null || _b === void 0 ? void 0 : _b.querySelector('ia-mgc-button');
         expect(cta).to.exist;
         // do not show form
         expect(el.form).to.not.exist;

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

@@ -1 +1 @@
-{"version":3,"file":"amount.test.js","sourceRoot":"","sources":["../../../test/form-sections/amount.test.ts"],"names":[],"mappings":"AAAA,6DAA6D;AAC7D,OAAO,EAAE,IAAI,EAAE,OAAO,EAAE,MAAM,EAAE,MAAM,kBAAkB,CAAC;AAEzD,OAAO,gCAAgC,CAAC;AAExC,OAAO,EAAE,WAAW,EAAE,MAAM,uBAAuB,CAAC;AAEpD,MAAM,IAAI,GAAG,IAAI,WAAW,CAAC;IAC3B,KAAK,EAAE,gBAAgB;IACvB,MAAM,EAAE,CAAC;IACT,QAAQ,EAAE,KAAK;IACf,UAAU,EAAE,qBAAqB;IACjC,OAAO,EAAE,IAAI;IACb,MAAM,EAAE;QACN,iBAAiB,EAAE,EAAE;QACrB,eAAe,EAAE;YACf,IAAI,EAAE,4BAA4B;YAClC,aAAa,EAAE,CAAC;YAChB,QAAQ,EAAE,KAAK;SAChB;QACD,eAAe,EAAE;YACf,IAAI,EAAE,4BAA4B;YAClC,aAAa,EAAE,CAAC;YAChB,QAAQ,EAAE,KAAK;SAChB;QACD,MAAM,EAAE,QAAQ;QAChB,iBAAiB,EAAE,OAAO;QAC1B,KAAK,EAAE,IAAI;QACX,QAAQ,EAAE,IAAI;QACd,eAAe,EAAE,IAAI;QACrB,cAAc,EAAE,IAAI;KACrB;CACF,CAAC,CAAC;AAEH,QAAQ,CAAC,2BAA2B,EAAE,GAAG,EAAE;IACzC,EAAE,CAAC,4BAA4B,EAAE,KAAK,IAAI,EAAE;;QAC1C,MAAM,EAAE,GAAG,MAAM,OAAO,CACtB,IAAI,CAAA,kCAAkC,IAAI,6BAA6B,CACxE,CAAC;QAEF,MAAM,WAAW,GAAG,MAAA,EAAE,CAAC,UAAU,0CAAE,aAAa,CAAC,iBAAiB,CAAC,CAAC;QACpE,MAAM,CAAC,WAAW,CAAC,CAAC,EAAE,CAAC,KAAK,CAAC;QAC7B,MAAM,CAAC,WAAW,aAAX,WAAW,uBAAX,WAAW,CAAE,WAAW,CAAC,CAAC,EAAE,CAAC,OAAO,CAAC,IAAI,CAAC,CAAC;QAElD,MAAM,GAAG,GAAG,MAAA,EAAE,CAAC,UAAU,0CAAE,aAAa,CAAC,2BAA2B,CAAC,CAAC;QACtE,MAAM,CAAC,GAAG,CAAC,CAAC,EAAE,CAAC,KAAK,CAAC;QAErB,mBAAmB;QACnB,MAAM,CAAC,EAAE,CAAC,IAAI,CAAC,CAAC,EAAE,CAAC,GAAG,CAAC,KAAK,CAAC;QAE7B,GAAI,CAAC,UAAW,CAAC,aAAa,CAAC,QAAQ,CAAE,CAAC,KAAK,EAAE,CAAC;QAClD,MAAM,EAAE,CAAC,cAAc,CAAC;QAExB,MAAM,CAAC,EAAE,CAAC,YAAY,CAAC,kBAAkB,CAAC,CAAC,CAAC,EAAE,CAAC,EAAE,CAAC,IAAI,CAAC;QAEvD,oBAAoB;QACpB,MAAM,CAAC,EAAE,CAAC,IAAI,CAAC,YAAY,CAAC,IAAI,CAAC,CAAC,CAAC,EAAE,CAAC,KAAK,CAAC,kBAAkB,CAAC,CAAC;IAClE,CAAC,CAAC,CAAC;AACL,CAAC,CAAC,CAAC","sourcesContent":["// eslint-disable-next-line import/no-extraneous-dependencies\nimport { html, fixture, expect } from '@open-wc/testing';\n\nimport '../../src/form-sections/amount';\nimport type { MGCEditPlanAmount } from '../../src/form-sections/amount';\nimport { MonthlyPlan } from '../../src/models/plan';\n\nconst plan = new MonthlyPlan({\n  token: 'a.va.lid.T0ken',\n  amount: 5,\n  currency: 'USD',\n  start_date: '2024-07-01 00:00:00',\n  is_test: true,\n  btdata: {\n    billingDayOfMonth: 22,\n    nextBillingDate: {\n      date: '2024-08-22 00:00:00.000000',\n      timezone_type: 3,\n      timezone: 'UTC',\n    },\n    lastBillingDate: {\n      date: '2024-07-22 00:00:00.000000',\n      timezone_type: 3,\n      timezone: 'UTC',\n    },\n    status: 'Active',\n    paymentMethodType: 'Venmo',\n    last4: null,\n    cardType: null,\n    expirationMonth: null,\n    expirationYear: null,\n  },\n});\n\ndescribe('<ia-mgc-edit-plan-amount>', () => {\n  it('displays with call to edit', async () => {\n    const el = await fixture<MGCEditPlanAmount>(\n      html`<ia-mgc-edit-plan-amount .plan=${plan}></ia-mgc-edit-plan-amount>`\n    );\n\n    const amountLabel = el.shadowRoot?.querySelector('.current-amount');\n    expect(amountLabel).to.exist;\n    expect(amountLabel?.textContent).to.contain('$5');\n\n    const cta = el.shadowRoot?.querySelector('ia-mgc-button#edit-amount');\n    expect(cta).to.exist;\n\n    // do not show form\n    expect(el.form).to.not.exist;\n\n    cta!.shadowRoot!.querySelector('button')!.click();\n    await el.updateComplete;\n\n    expect(el.hasAttribute('currentlyediting')).to.be.true;\n\n    // form now displays\n    expect(el.form.getAttribute('id')).to.equal('edit-plan-amount');\n  });\n});\n"]}
+{"version":3,"file":"amount.test.js","sourceRoot":"","sources":["../../../test/form-sections/amount.test.ts"],"names":[],"mappings":"AAAA,6DAA6D;AAC7D,OAAO,EAAE,IAAI,EAAE,OAAO,EAAE,MAAM,EAAE,MAAM,kBAAkB,CAAC;AAEzD,OAAO,gCAAgC,CAAC;AAExC,OAAO,EAAE,WAAW,EAAE,MAAM,uBAAuB,CAAC;AAEpD,MAAM,IAAI,GAAG,IAAI,WAAW,CAAC;IAC3B,KAAK,EAAE,gBAAgB;IACvB,MAAM,EAAE,CAAC;IACT,QAAQ,EAAE,KAAK;IACf,UAAU,EAAE,qBAAqB;IACjC,OAAO,EAAE,IAAI;IACb,MAAM,EAAE;QACN,iBAAiB,EAAE,EAAE;QACrB,eAAe,EAAE;YACf,IAAI,EAAE,4BAA4B;YAClC,aAAa,EAAE,CAAC;YAChB,QAAQ,EAAE,KAAK;SAChB;QACD,eAAe,EAAE;YACf,IAAI,EAAE,4BAA4B;YAClC,aAAa,EAAE,CAAC;YAChB,QAAQ,EAAE,KAAK;SAChB;QACD,MAAM,EAAE,QAAQ;QAChB,iBAAiB,EAAE,OAAO;QAC1B,KAAK,EAAE,IAAI;QACX,QAAQ,EAAE,IAAI;QACd,eAAe,EAAE,IAAI;QACrB,cAAc,EAAE,IAAI;KACrB;CACF,CAAC,CAAC;AAEH,QAAQ,CAAC,2BAA2B,EAAE,GAAG,EAAE;IACzC,EAAE,CAAC,4BAA4B,EAAE,KAAK,IAAI,EAAE;;QAC1C,MAAM,EAAE,GAAG,MAAM,OAAO,CACtB,IAAI,CAAA,kCAAkC,IAAI,6BAA6B,CACxE,CAAC;QAEF,MAAM,MAAM,GAAG,MAAA,EAAE,CAAC,UAAU,0CAAE,aAAa,CAAC,0BAA0B,CAAC,CAAC;QACxE,MAAM,CAAC,MAAM,CAAC,CAAC,EAAE,CAAC,KAAK,CAAC;QACxB,MAAM,CAAC,MAAM,aAAN,MAAM,uBAAN,MAAM,CAAE,WAAW,CAAC,CAAC,EAAE,CAAC,OAAO,CAAC,IAAI,CAAC,CAAC;QAE7C,MAAM,GAAG,GAAG,MAAA,MAAM,aAAN,MAAM,uBAAN,MAAM,CAAE,UAAU,0CAAE,aAAa,CAAC,eAAe,CAAC,CAAC;QAC/D,MAAM,CAAC,GAAG,CAAC,CAAC,EAAE,CAAC,KAAK,CAAC;QAErB,mBAAmB;QACnB,MAAM,CAAC,EAAE,CAAC,IAAI,CAAC,CAAC,EAAE,CAAC,GAAG,CAAC,KAAK,CAAC;QAE7B,GAAI,CAAC,UAAW,CAAC,aAAa,CAAC,QAAQ,CAAE,CAAC,KAAK,EAAE,CAAC;QAClD,MAAM,EAAE,CAAC,cAAc,CAAC;QAExB,MAAM,CAAC,EAAE,CAAC,YAAY,CAAC,kBAAkB,CAAC,CAAC,CAAC,EAAE,CAAC,EAAE,CAAC,IAAI,CAAC;QAEvD,oBAAoB;QACpB,MAAM,CAAC,EAAE,CAAC,IAAI,CAAC,YAAY,CAAC,IAAI,CAAC,CAAC,CAAC,EAAE,CAAC,KAAK,CAAC,kBAAkB,CAAC,CAAC;IAClE,CAAC,CAAC,CAAC;AACL,CAAC,CAAC,CAAC","sourcesContent":["// eslint-disable-next-line import/no-extraneous-dependencies\nimport { html, fixture, expect } from '@open-wc/testing';\n\nimport '../../src/form-sections/amount';\nimport type { MGCEditPlanAmount } from '../../src/form-sections/amount';\nimport { MonthlyPlan } from '../../src/models/plan';\n\nconst plan = new MonthlyPlan({\n  token: 'a.va.lid.T0ken',\n  amount: 5,\n  currency: 'USD',\n  start_date: '2024-07-01 00:00:00',\n  is_test: true,\n  btdata: {\n    billingDayOfMonth: 22,\n    nextBillingDate: {\n      date: '2024-08-22 00:00:00.000000',\n      timezone_type: 3,\n      timezone: 'UTC',\n    },\n    lastBillingDate: {\n      date: '2024-07-22 00:00:00.000000',\n      timezone_type: 3,\n      timezone: 'UTC',\n    },\n    status: 'Active',\n    paymentMethodType: 'Venmo',\n    last4: null,\n    cardType: null,\n    expirationMonth: null,\n    expirationYear: null,\n  },\n});\n\ndescribe('<ia-mgc-edit-plan-amount>', () => {\n  it('displays with call to edit', async () => {\n    const el = await fixture<MGCEditPlanAmount>(\n      html`<ia-mgc-edit-plan-amount .plan=${plan}></ia-mgc-edit-plan-amount>`\n    );\n\n    const holder = el.shadowRoot?.querySelector('ia-mgc-form-section-info');\n    expect(holder).to.exist;\n    expect(holder?.textContent).to.contain('$5');\n\n    const cta = holder?.shadowRoot?.querySelector('ia-mgc-button');\n    expect(cta).to.exist;\n\n    // do not show form\n    expect(el.form).to.not.exist;\n\n    cta!.shadowRoot!.querySelector('button')!.click();\n    await el.updateComplete;\n\n    expect(el.hasAttribute('currentlyediting')).to.be.true;\n\n    // form now displays\n    expect(el.form.getAttribute('id')).to.equal('edit-plan-amount');\n  });\n});\n"]}

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

@@ -55,10 +55,10 @@ describe('<ia-mgc-edit-date>', () => {
     it('input validates before allowing form submission', async () => {
         var _a, _b, _c, _d;
         const el = await fixture(html `<ia-mgc-edit-date .plan=${plan}></ia-mgc-edit-date>`);
-        const amountLabel = (_a = el.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector('.current-date');
-        expect(amountLabel).to.exist;
-        expect(amountLabel === null || amountLabel === void 0 ? void 0 : amountLabel.textContent).to.contain(plan.nextBillingDateLocale);
-        const cta = (_b = el.shadowRoot) === null || _b === void 0 ? void 0 : _b.querySelector('ia-mgc-button#open-edit-date-form');
+        const holder = (_a = el.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector('ia-mgc-form-section-info');
+        expect(holder).to.equal(3);
+        expect(holder === null || holder === void 0 ? void 0 : holder.textContent).to.contain(plan.nextBillingDateLocale);
+        const cta = (_b = holder === null || holder === void 0 ? void 0 : holder.shadowRoot) === null || _b === void 0 ? void 0 : _b.querySelector('ia-mgc-button');
         expect(cta).to.exist;
         // does not show form
         expect(el.form).to.not.exist;

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

@@ -1 +1 @@
-{"version":3,"file":"date.test.js","sourceRoot":"","sources":["../../../test/form-sections/date.test.ts"],"names":[],"mappings":"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","sourcesContent":["// eslint-disable-next-line import/no-extraneous-dependencies\nimport { html, fixture, expect } from '@open-wc/testing';\n\nimport '../../src/form-sections/date';\nimport type { MGCEditPlanDate } from '../../src/form-sections/date';\nimport { MonthlyPlan } from '../../src/models/plan';\nimport type { MGCButton } from '../../src/presentational/mgc-button';\n\nconst lastPaymentWasOnTheFirstOfThisMonth = new Date();\nlastPaymentWasOnTheFirstOfThisMonth.setHours(0, 0, 0, 0);\nlastPaymentWasOnTheFirstOfThisMonth.setDate(1);\nconsole.log(\n  'lastPaymentWasOnTheFirstOfThisMonth',\n  lastPaymentWasOnTheFirstOfThisMonth.toISOString()\n);\n\nconst nextMonth = new Date();\nnextMonth.setMonth(nextMonth.getMonth() + 1);\n\nconst nextPaymentFirstOfMonth = new Date(nextMonth);\nnextPaymentFirstOfMonth.setHours(0, 0, 0, 0);\nnextPaymentFirstOfMonth.setDate(1);\nconsole.log('nextPaymentFirstOfMonth', nextPaymentFirstOfMonth.toISOString());\n\nconst twelveMonthsFromNow = new Date();\ntwelveMonthsFromNow.setMonth(twelveMonthsFromNow.getMonth() + 12);\n\nconst twoYearsFromNow = new Date();\ntwoYearsFromNow.setFullYear(twoYearsFromNow.getFullYear() + 2);\ntwoYearsFromNow.setHours(0, 0, 0, 0);\n\nconst tomorrow = new Date();\ntomorrow.setDate(tomorrow.getDate() + 1);\n\nconst today = new Date();\ntoday.setHours(0, 0, 0, 0);\n\nconst yesterday = new Date();\nyesterday.setDate(yesterday.getDate() - 1);\nyesterday.setHours(0, 0, 0, 0);\n\nconst plan = new MonthlyPlan({\n  token: 'a.va.lid.T0ken',\n  amount: 5,\n  currency: 'USD',\n  start_date: '2024-07-01 00:00:00',\n  is_test: true,\n  btdata: {\n    billingDayOfMonth: 22,\n    nextBillingDate: {\n      date: nextPaymentFirstOfMonth.toISOString(),\n      timezone_type: 3,\n      timezone: 'UTC',\n    },\n    lastBillingDate: {\n      date: lastPaymentWasOnTheFirstOfThisMonth.toISOString(),\n      timezone_type: 3,\n      timezone: 'UTC',\n    },\n    status: 'Active',\n    paymentMethodType: 'Venmo',\n    last4: null,\n    cardType: null,\n    expirationMonth: null,\n    expirationYear: null,\n  },\n});\n\nconst nextBillingDateYYYYMMDD = `${nextPaymentFirstOfMonth.getFullYear()}-${String(\n  nextPaymentFirstOfMonth.getMonth() + 1\n).padStart(2, '0')}-${String(nextPaymentFirstOfMonth.getDate()).padStart(\n  2,\n  '0'\n)}`;\n\ndescribe('<ia-mgc-edit-date>', () => {\n  it('input validates before allowing form submission', async () => {\n    const el = await fixture<MGCEditPlanDate>(\n      html`<ia-mgc-edit-date .plan=${plan}></ia-mgc-edit-date>`\n    );\n\n    const amountLabel = el.shadowRoot?.querySelector('.current-date');\n    expect(amountLabel).to.exist;\n    expect(amountLabel?.textContent).to.contain(plan.nextBillingDateLocale);\n\n    const cta = el.shadowRoot?.querySelector(\n      'ia-mgc-button#open-edit-date-form'\n    );\n    expect(cta).to.exist;\n\n    // does not show form\n    expect(el.form).to.not.exist;\n\n    // does show form on Edit... click\n    cta!.shadowRoot!.querySelector('button')!.click();\n    await el.updateComplete;\n\n    expect(el.form).to.exist;\n\n    expect(el.hasAttribute('currentlyediting')).to.be.true;\n\n    // form now displays\n    expect(el.form.getAttribute('id')).to.equal('edit-date');\n\n    const lastDateLabel = el.form.querySelector(\n      '#form-info-last-donation-date'\n    );\n    const nextDateLabel = el.form.querySelector(\n      '#form-info-next-donation-date'\n    );\n\n    expect(lastDateLabel).to.contain.text(plan.lastBillingDateLocale);\n    expect(nextDateLabel).to.contain.text(plan.nextBillingDateLocale);\n\n    const requestDateUpdateButton = el.form.querySelector(\n      'ia-mgc-button#edit-date'\n    ) as MGCButton;\n    expect(requestDateUpdateButton).to.exist;\n    expect(requestDateUpdateButton!.hasAttribute('isdisabled')).to.be.true;\n\n    expect(el.form.getAttribute('id')).to.equal('edit-date');\n\n    // input has min and max range set\n    // min is tomorrow, max is 12 months from now\n    const dateInput = el.form.querySelector('input');\n    expect(dateInput).to.exist;\n    expect(dateInput!.getAttribute('type')).to.equal('date');\n    expect(dateInput!.getAttribute('min')).to.equal(\n      `${tomorrow.getFullYear()}-${String(tomorrow.getMonth() + 1).padStart(\n        2,\n        '0'\n      )}-${String(tomorrow.getDate()).padStart(2, '0')}`\n    );\n    expect(dateInput!.getAttribute('max')).to.equal(\n      `${twelveMonthsFromNow.getFullYear()}-${String(\n        twelveMonthsFromNow.getMonth() + 1\n      ).padStart(2, '0')}-${String(twelveMonthsFromNow.getDate()).padStart(\n        2,\n        '0'\n      )}`\n    );\n    expect(dateInput!.value).to.equal(nextBillingDateYYYYMMDD);\n\n    // checks if input value is invalid\n    // date before today\n    dateInput!.value = '2008-11-11';\n    dateInput!.dispatchEvent(new Event('change'));\n    await el.updateComplete;\n\n    expect(el.errorMessage).to.contain('Date must be at least tomorrow.');\n    expect(requestDateUpdateButton!.hasAttribute('isdisabled')).to.be.true;\n\n    // date within 12 months\n    const twoYearsFromNowStr = `${twoYearsFromNow.getFullYear()}-${String(\n      twoYearsFromNow.getMonth() + 1\n    ).padStart(2, '0')}-${String(twoYearsFromNow.getDate()).padStart(2, '0')}`;\n    dateInput!.value = twoYearsFromNowStr;\n    dateInput!.dispatchEvent(new Event('change'));\n    await el.updateComplete;\n\n    expect(el.errorMessage).to.contain(\n      'New donation date must be within the next 12 months.'\n    );\n    expect(requestDateUpdateButton!.hasAttribute('isdisabled')).to.be.true;\n\n    // sets warning message when chosen date is in the same month as last payment\n    const lastDayOfCurrentMonth = new Date();\n    lastDayOfCurrentMonth.setHours(0, 0, 0, 0);\n    lastDayOfCurrentMonth.setMonth(lastDayOfCurrentMonth.getMonth() + 1);\n    lastDayOfCurrentMonth.setDate(0);\n\n    const lastDayOfCurrentMonthStr = `${lastDayOfCurrentMonth.getFullYear()}-${String(\n      lastDayOfCurrentMonth.getMonth() + 1\n    ).padStart(2, '0')}-${lastDayOfCurrentMonth.getDate()}`;\n    dateInput!.value = lastDayOfCurrentMonthStr;\n    dateInput!.dispatchEvent(new Event('change'));\n    await el.updateComplete;\n\n    expect(el.warningMessage).to.contain(\n      'You have already made a donation this month.'\n    );\n    expect(el.errorMessage).to.contain(\n      'The date you selected will result in an additional donation for this month.'\n    );\n    expect(el.allowEditing).to.be.true;\n    expect(requestDateUpdateButton!.hasAttribute('isdisabled')).to.be.true;\n    expect(el.newDate).to.contain(\n      `${lastDayOfCurrentMonth.getFullYear()}-${String(\n        lastDayOfCurrentMonth.getMonth() + 1\n      ).padStart(2, '0')}-${String(lastDayOfCurrentMonth.getDate()).padStart(\n        2,\n        '0'\n      )}`\n    );\n\n    // can submit when date is valid\n    const nextMonthStr = `${nextMonth.getFullYear()}-${String(\n      nextMonth.getMonth() + 1\n    ).padStart(2, '0')}-${String(nextMonth.getDate()).padStart(2, '0')}`;\n    dateInput!.value = nextMonthStr;\n    dateInput!.dispatchEvent(new Event('change'));\n\n    await el.updateComplete;\n\n    expect(el.errorMessage).to.contain('');\n    expect(el.newDate).to.contain(nextMonthStr);\n    expect(el.allowEditing).to.be.true;\n    expect(requestDateUpdateButton!.hasAttribute('isdisabled')).to.be.false;\n    console.log(' ~~~ last test, button: ', requestDateUpdateButton);\n\n    // clicking Update fires a Custom Event\n    el.addEventListener('updateDate', (event: Event) => {\n      console.log('updateDate event received ####', event);\n      const { newDate } = (event as CustomEvent).detail;\n      expect(newDate).to.contain(nextMonthStr);\n    });\n\n    requestDateUpdateButton.shadowRoot?.querySelector('button')?.click();\n    await el.updateComplete;\n  });\n});\n"]}
+{"version":3,"file":"date.test.js","sourceRoot":"","sources":["../../../test/form-sections/date.test.ts"],"names":[],"mappings":"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","sourcesContent":["// eslint-disable-next-line import/no-extraneous-dependencies\nimport { html, fixture, expect } from '@open-wc/testing';\n\nimport '../../src/form-sections/date';\nimport type { MGCEditPlanDate } from '../../src/form-sections/date';\nimport { MonthlyPlan } from '../../src/models/plan';\nimport type { MGCButton } from '../../src/presentational/mgc-button';\n\nconst lastPaymentWasOnTheFirstOfThisMonth = new Date();\nlastPaymentWasOnTheFirstOfThisMonth.setHours(0, 0, 0, 0);\nlastPaymentWasOnTheFirstOfThisMonth.setDate(1);\nconsole.log(\n  'lastPaymentWasOnTheFirstOfThisMonth',\n  lastPaymentWasOnTheFirstOfThisMonth.toISOString()\n);\n\nconst nextMonth = new Date();\nnextMonth.setMonth(nextMonth.getMonth() + 1);\n\nconst nextPaymentFirstOfMonth = new Date(nextMonth);\nnextPaymentFirstOfMonth.setHours(0, 0, 0, 0);\nnextPaymentFirstOfMonth.setDate(1);\nconsole.log('nextPaymentFirstOfMonth', nextPaymentFirstOfMonth.toISOString());\n\nconst twelveMonthsFromNow = new Date();\ntwelveMonthsFromNow.setMonth(twelveMonthsFromNow.getMonth() + 12);\n\nconst twoYearsFromNow = new Date();\ntwoYearsFromNow.setFullYear(twoYearsFromNow.getFullYear() + 2);\ntwoYearsFromNow.setHours(0, 0, 0, 0);\n\nconst tomorrow = new Date();\ntomorrow.setDate(tomorrow.getDate() + 1);\n\nconst today = new Date();\ntoday.setHours(0, 0, 0, 0);\n\nconst yesterday = new Date();\nyesterday.setDate(yesterday.getDate() - 1);\nyesterday.setHours(0, 0, 0, 0);\n\nconst plan = new MonthlyPlan({\n  token: 'a.va.lid.T0ken',\n  amount: 5,\n  currency: 'USD',\n  start_date: '2024-07-01 00:00:00',\n  is_test: true,\n  btdata: {\n    billingDayOfMonth: 22,\n    nextBillingDate: {\n      date: nextPaymentFirstOfMonth.toISOString(),\n      timezone_type: 3,\n      timezone: 'UTC',\n    },\n    lastBillingDate: {\n      date: lastPaymentWasOnTheFirstOfThisMonth.toISOString(),\n      timezone_type: 3,\n      timezone: 'UTC',\n    },\n    status: 'Active',\n    paymentMethodType: 'Venmo',\n    last4: null,\n    cardType: null,\n    expirationMonth: null,\n    expirationYear: null,\n  },\n});\n\nconst nextBillingDateYYYYMMDD = `${nextPaymentFirstOfMonth.getFullYear()}-${String(\n  nextPaymentFirstOfMonth.getMonth() + 1\n).padStart(2, '0')}-${String(nextPaymentFirstOfMonth.getDate()).padStart(\n  2,\n  '0'\n)}`;\n\ndescribe('<ia-mgc-edit-date>', () => {\n  it('input validates before allowing form submission', async () => {\n    const el = await fixture<MGCEditPlanDate>(\n      html`<ia-mgc-edit-date .plan=${plan}></ia-mgc-edit-date>`\n    );\n\n    const holder = el.shadowRoot?.querySelector('ia-mgc-form-section-info');\n    expect(holder).to.equal(3);\n    expect(holder?.textContent).to.contain(plan.nextBillingDateLocale);\n\n    const cta = holder?.shadowRoot?.querySelector('ia-mgc-button');\n    expect(cta).to.exist;\n\n    // does not show form\n    expect(el.form).to.not.exist;\n\n    // does show form on Edit... click\n    cta!.shadowRoot!.querySelector('button')!.click();\n    await el.updateComplete;\n\n    expect(el.form).to.exist;\n\n    expect(el.hasAttribute('currentlyediting')).to.be.true;\n\n    // form now displays\n    expect(el.form.getAttribute('id')).to.equal('edit-date');\n\n    const lastDateLabel = el.form.querySelector(\n      '#form-info-last-donation-date'\n    );\n    const nextDateLabel = el.form.querySelector(\n      '#form-info-next-donation-date'\n    );\n\n    expect(lastDateLabel).to.contain.text(plan.lastBillingDateLocale);\n    expect(nextDateLabel).to.contain.text(plan.nextBillingDateLocale);\n\n    const requestDateUpdateButton = el.form.querySelector(\n      'ia-mgc-button#edit-date'\n    ) as MGCButton;\n    expect(requestDateUpdateButton).to.exist;\n    expect(requestDateUpdateButton!.hasAttribute('isdisabled')).to.be.true;\n\n    expect(el.form.getAttribute('id')).to.equal('edit-date');\n\n    // input has min and max range set\n    // min is tomorrow, max is 12 months from now\n    const dateInput = el.form.querySelector('input');\n    expect(dateInput).to.exist;\n    expect(dateInput!.getAttribute('type')).to.equal('date');\n    expect(dateInput!.getAttribute('min')).to.equal(\n      `${tomorrow.getFullYear()}-${String(tomorrow.getMonth() + 1).padStart(\n        2,\n        '0'\n      )}-${String(tomorrow.getDate()).padStart(2, '0')}`\n    );\n    expect(dateInput!.getAttribute('max')).to.equal(\n      `${twelveMonthsFromNow.getFullYear()}-${String(\n        twelveMonthsFromNow.getMonth() + 1\n      ).padStart(2, '0')}-${String(twelveMonthsFromNow.getDate()).padStart(\n        2,\n        '0'\n      )}`\n    );\n    expect(dateInput!.value).to.equal(nextBillingDateYYYYMMDD);\n\n    // checks if input value is invalid\n    // date before today\n    dateInput!.value = '2008-11-11';\n    dateInput!.dispatchEvent(new Event('change'));\n    await el.updateComplete;\n\n    expect(el.errorMessage).to.contain('Date must be at least tomorrow.');\n    expect(requestDateUpdateButton!.hasAttribute('isdisabled')).to.be.true;\n\n    // date within 12 months\n    const twoYearsFromNowStr = `${twoYearsFromNow.getFullYear()}-${String(\n      twoYearsFromNow.getMonth() + 1\n    ).padStart(2, '0')}-${String(twoYearsFromNow.getDate()).padStart(2, '0')}`;\n    dateInput!.value = twoYearsFromNowStr;\n    dateInput!.dispatchEvent(new Event('change'));\n    await el.updateComplete;\n\n    expect(el.errorMessage).to.contain(\n      'New donation date must be within the next 12 months.'\n    );\n    expect(requestDateUpdateButton!.hasAttribute('isdisabled')).to.be.true;\n\n    // sets warning message when chosen date is in the same month as last payment\n    const lastDayOfCurrentMonth = new Date();\n    lastDayOfCurrentMonth.setHours(0, 0, 0, 0);\n    lastDayOfCurrentMonth.setMonth(lastDayOfCurrentMonth.getMonth() + 1);\n    lastDayOfCurrentMonth.setDate(0);\n\n    const lastDayOfCurrentMonthStr = `${lastDayOfCurrentMonth.getFullYear()}-${String(\n      lastDayOfCurrentMonth.getMonth() + 1\n    ).padStart(2, '0')}-${lastDayOfCurrentMonth.getDate()}`;\n    dateInput!.value = lastDayOfCurrentMonthStr;\n    dateInput!.dispatchEvent(new Event('change'));\n    await el.updateComplete;\n\n    expect(el.warningMessage).to.contain(\n      'You have already made a donation this month.'\n    );\n    expect(el.errorMessage).to.contain(\n      'The date you selected will result in an additional donation for this month.'\n    );\n    expect(el.allowEditing).to.be.true;\n    expect(requestDateUpdateButton!.hasAttribute('isdisabled')).to.be.true;\n    expect(el.newDate).to.contain(\n      `${lastDayOfCurrentMonth.getFullYear()}-${String(\n        lastDayOfCurrentMonth.getMonth() + 1\n      ).padStart(2, '0')}-${String(lastDayOfCurrentMonth.getDate()).padStart(\n        2,\n        '0'\n      )}`\n    );\n\n    // can submit when date is valid\n    const nextMonthStr = `${nextMonth.getFullYear()}-${String(\n      nextMonth.getMonth() + 1\n    ).padStart(2, '0')}-${String(nextMonth.getDate()).padStart(2, '0')}`;\n    dateInput!.value = nextMonthStr;\n    dateInput!.dispatchEvent(new Event('change'));\n\n    await el.updateComplete;\n\n    expect(el.errorMessage).to.contain('');\n    expect(el.newDate).to.contain(nextMonthStr);\n    expect(el.allowEditing).to.be.true;\n    expect(requestDateUpdateButton!.hasAttribute('isdisabled')).to.be.false;\n    console.log(' ~~~ last test, button: ', requestDateUpdateButton);\n\n    // clicking Update fires a Custom Event\n    el.addEventListener('updateDate', (event: Event) => {\n      console.log('updateDate event received ####', event);\n      const { newDate } = (event as CustomEvent).detail;\n      expect(newDate).to.contain(nextMonthStr);\n    });\n\n    requestDateUpdateButton.shadowRoot?.querySelector('button')?.click();\n    await el.updateComplete;\n  });\n});\n"]}

package/package.json

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

package/src/form-sections/amount.ts

@@ -14,6 +14,7 @@ import {
 } from '@internetarchive/donation-form-data-models';
 
 import type { MonthlyPlan } from '../models/plan';
+import '../presentational/donation-section-info';
 import '../presentational/mgc-button';
 import type { MGCButton } from '../presentational/mgc-button';
 import '../presentational/mgc-update-status';
@@ -60,22 +61,13 @@ export class MGCEditPlanAmount extends LitElement {
       <section>
         <donation-form-section badgemode="hidebadge" headline="Amount">
           ${!this.currentlyEditing
-            ? html` <p class="current-amount">
-                  USD $${this.plan?.amount}
-                  <ia-mgc-update-status .status=${this.updateStatus}
-                    >${this.updateMessage}</ia-mgc-update-status
-                  >
-                </p>
-                <ia-mgc-button
-                  id="edit-amount"
-                  class="ia-button link"
-                  .clickHandler=${() => {
-                    this.currentlyEditing = true;
-                    this.clearStatusMessaging();
-                  }}
-                >
-                  Edit...
-                </ia-mgc-button>`
+            ? html`<ia-mgc-form-section-info
+                @editingRequested=${() => {
+                  this.currentlyEditing = true;
+                  this.clearStatusMessaging();
+                }}
+                ><span>USD $${this.plan?.amount}</span>
+              </ia-mgc-form-section-info>`
             : nothing}
           ${this.currentlyEditing ? this.editAmountForm : nothing}
         </donation-form-section>

package/src/form-sections/date.ts

@@ -75,22 +75,13 @@ export class MGCEditPlanDate extends LitElement {
           headline="Change next donation date"
         >
           ${!this.currentlyEditing
-            ? html` <p class="current-date">
-                  ${this.plan?.nextBillingDateLocale}
-                  <ia-mgc-update-status .status=${this.updateStatus}
-                    >${this.updateMessage}</ia-mgc-update-status
-                  >
-                </p>
-                <ia-mgc-button
-                  id="open-edit-date-form"
-                  class="ia-button link"
-                  .clickHandler=${() => {
-                    this.currentlyEditing = true;
-                    this.clearStatusMessaging();
-                  }}
-                >
-                  Edit...
-                </ia-mgc-button>`
+            ? html`<ia-mgc-form-section-info
+                @editingRequested=${() => {
+                  this.currentlyEditing = true;
+                  this.clearStatusMessaging();
+                }}
+                ><span>${this.plan?.nextBillingDateLocale}</span>
+              </ia-mgc-form-section-info>`
             : nothing}
           ${this.currentlyEditing ? this.editDateForm : nothing}
         </donation-form-section>

package/src/monthly-giving-circle.ts

@@ -168,7 +168,7 @@ export class MonthlyGivingCircle extends LitElement {
         title = 'Recent donations';
         titleStyle = 'default';
         cta = html`<ia-mgc-button
-          class="link slim"
+          class="primary"
           id="close-receipts"
           .clickHandler=${async () => {
             this.viewToDisplay = this.plans.length ? 'plans' : 'welcome';

package/src/plans.ts

@@ -118,7 +118,7 @@ export class IauxMgcPlans extends LitElement {
   static styles = css`
     :host {
       max-height: 500px;
-      overflow-y: scroll;
+      overflow-y: auto;
       display: block;
     }
 

package/src/presentational/donation-section-info.ts

@@ -0,0 +1,25 @@
+import { LitElement, html } from 'lit';
+import { customElement } from 'lit/decorators.js';
+import './mgc-button';
+import type { MGCButton } from './mgc-button';
+
+@customElement('ia-mgc-form-section-info')
+export class MGCFormSectionInfo extends LitElement {
+  protected render() {
+    return html`
+      <div class="mgc-donation-section-info">
+        <p><slot></slot></p>
+        <ia-mgc-button
+          class="ia-button link"
+          .clickHandler=${(_event: Event, iaButton: MGCButton) => {
+            // eslint-disable-next-line no-param-reassign
+            iaButton.isDisabled = true;
+            this.dispatchEvent(new Event('editingRequested'));
+          }}
+        >
+          Edit...
+        </ia-mgc-button>
+      </div>
+    `;
+  }
+}

package/src/presentational/mgc-title.ts

@@ -31,6 +31,7 @@ export class MGCTitle extends LitElement {
     :host {
       padding-bottom: 5px;
       display: block;
+      --link-button-padding: 0.5rem;
     }
 
     :host([titlestyle='default']) h2 {
@@ -51,7 +52,7 @@ export class MGCTitle extends LitElement {
       align-content: center;
       margin: 0;
       justify-content: space-between;
-      align-items: flex-end;
+      align-items: center;
       line-height: normal;
     }
 
@@ -77,6 +78,10 @@ export class MGCTitle extends LitElement {
       align-items: flex-end;
     }
 
+    ia-mgc-button {
+      --link-button-padding: 0.5rem;
+    }
+
     @media screen and (max-width: 450px) {
       h2,
       slot[name='action'] {