@internetarchive/donation-monthly-portal 7.5.0 → 7.6.0

package/README.md

@@ -1,5 +1,5 @@
 @@ -1,144 +1,17 @@
-![Build Status](https://github.com/internetarchive/iaux-monthly-giving-circle/actions/workflows/ci.yml/badge.svg) [![codecov](https://codecov.io/gh/internetarchive/iaux-monthly-giving-circle/branch/main/graph/badge.svg?token=ZOYRJ2BV9W)](https://codecov.io/gh/internetarchive/iaux-monthly-giving-circle)
+![Build Status](https://github.com/internetarchive/iaux-monthly-giving-circle/actions/workflows/ci.yml/badge.svg) [![codecov](https://codecov.io/github/internetarchive/iaux-monthly-giving-circle/branch/main/graph/badge.svg?token=3CT3C9SL73)](https://codecov.io/github/internetarchive/iaux-monthly-giving-circle)
 
 # \<iaux-monthly-giving-circle>
 

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 { formatCurrency, currencyToSymbol } from '../utils/currency-format';
 import '../presentational/donation-section-info';
 import '../presentational/mgc-button';
 import '../presentational/mgc-update-status';
@@ -31,7 +32,7 @@ let MGCEditPlanAmount = class MGCEditPlanAmount extends LitElement {
         }
     }
     render() {
-        var _a;
+        var _a, _b;
         return html `
       <section>
         <donation-form-section badgemode="hidebadge" headline="Amount">
@@ -41,7 +42,9 @@ let MGCEditPlanAmount = class MGCEditPlanAmount extends LitElement {
                 this.currentlyEditing = true;
                 this.clearStatusMessaging();
             }}
-                ><span>USD $${(_a = this.plan) === null || _a === void 0 ? void 0 : _a.amountFormatted}</span>
+                ><span
+                  >${(_a = this.plan) === null || _a === void 0 ? void 0 : _a.currency} ${(_b = this.plan) === null || _b === void 0 ? void 0 : _b.amountFormatted}</span
+                >
               </ia-mgc-form-section-info>`
             : nothing}
           ${this.currentlyEditing ? this.editAmountForm : nothing}
@@ -184,20 +187,26 @@ let MGCEditPlanAmount = class MGCEditPlanAmount extends LitElement {
         return DonationPaymentInfo.calculateTotal(this.newAmount, this.coverFees);
     }
     get coveredFeesText() {
-        var _a;
-        return `I'll generously add $${(_a = this.donationPaymentInfo) === null || _a === void 0 ? void 0 : _a.feeAmountCovered} to cover fees.`;
+        if (!this.newAmount) {
+            return "I'll generously cover the fees.";
+        }
+        const fee = DonationPaymentInfo.calculateFeeAmount(this.newAmount);
+        return `I'll generously add ${formatCurrency(fee)} to cover fees.`;
     }
     get editAmountForm() {
-        var _a;
+        var _a, _b, _c, _d, _e;
         return html `
       <section>
         <form
           id="edit-plan-amount"
           @submit=${(e) => this.handleSubmit(e)}
         >
-          <p>Current donation amount: $${(_a = this.plan) === null || _a === void 0 ? void 0 : _a.amountFormatted}</p>
+          <p>
+            Current donation amount: ${(_a = this.plan) === null || _a === void 0 ? void 0 : _a.currency}
+            ${(_b = this.plan) === null || _b === void 0 ? void 0 : _b.amountFormatted}
+          </p>
           <div>
-            $
+            ${currencyToSymbol[(_d = (_c = this.plan) === null || _c === void 0 ? void 0 : _c.currency) !== null && _d !== void 0 ? _d : 'USD']}
             <input
               min="1"
               max="9999"
@@ -229,7 +238,10 @@ let MGCEditPlanAmount = class MGCEditPlanAmount extends LitElement {
               />
               <label for="cover-fees">${this.coveredFeesText}</label>
             </div>
-            <p>Total: USD $${this.totalAmountWithFees()}</p>
+            <p>
+              Total: ${(_e = this.plan) === null || _e === void 0 ? void 0 : _e.currency}
+              ${formatCurrency(this.totalAmountWithFees())}
+            </p>
             <div class="cta-container">
               <ia-mgc-button
                 class="ia-button secondary"

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/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?.amountFormatted}</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'\n        ? 'Amount updated'\n        : 'Failed to update date, please 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  handleSubmit(e: Event, iaButton?: MGCButton) {\n    e.preventDefault();\n    this.clearStatusMessaging();\n\n    const button =\n      iaButton ?? (this.form.querySelector('#update-amount') as MGCButton);\n    if (button) this.updateButtonState(button);\n\n    if (!this.newAmount) {\n      this.errorMessage = 'Please enter a new amount';\n      if (button) button.isDisabled = false;\n      return;\n    }\n\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\n    if (amountTooLow) {\n      this.errorMessage = 'Please enter a valid amount';\n    }\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\n    if (amountTooHigh || amountTooLow) {\n      if (button) this.updateButtonState(button);\n      return;\n    }\n\n    this.requestAmountUpdate(e);\n  }\n\n  private async updateButtonState(iaButton: MGCButton) {\n    // eslint-disable-next-line no-param-reassign\n    (iaButton as MGCButton).isDisabled = true;\n    await iaButton?.updateComplete;\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\n          id=\"edit-plan-amount\"\n          @submit=${(e: Event) => this.handleSubmit(e)}\n        >\n          <p>Current donation amount: $${this.plan?.amountFormatted}</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                ?isDisabled=${!this.newAmount}\n                .clickHandler=${(e: Event, iaButton: MGCButton) =>\n                  this.handleSubmit(e, iaButton)}\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":"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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 { formatCurrency, currencyToSymbol } from '../utils/currency-format';\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\n                  >${this.plan?.currency} ${this.plan?.amountFormatted}</span\n                >\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'\n        ? 'Amount updated'\n        : 'Failed to update date, please 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  handleSubmit(e: Event, iaButton?: MGCButton) {\n    e.preventDefault();\n    this.clearStatusMessaging();\n\n    const button =\n      iaButton ?? (this.form.querySelector('#update-amount') as MGCButton);\n    if (button) this.updateButtonState(button);\n\n    if (!this.newAmount) {\n      this.errorMessage = 'Please enter a new amount';\n      if (button) button.isDisabled = false;\n      return;\n    }\n\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\n    if (amountTooLow) {\n      this.errorMessage = 'Please enter a valid amount';\n    }\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\n    if (amountTooHigh || amountTooLow) {\n      if (button) this.updateButtonState(button);\n      return;\n    }\n\n    this.requestAmountUpdate(e);\n  }\n\n  private async updateButtonState(iaButton: MGCButton) {\n    // eslint-disable-next-line no-param-reassign\n    (iaButton as MGCButton).isDisabled = true;\n    await iaButton?.updateComplete;\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    if (!this.newAmount) {\n      return \"I'll generously cover the fees.\";\n    }\n    const fee = DonationPaymentInfo.calculateFeeAmount(this.newAmount);\n    return `I'll generously add ${formatCurrency(fee)} to cover fees.`;\n  }\n\n  get editAmountForm(): TemplateResult {\n    return html`\n      <section>\n        <form\n          id=\"edit-plan-amount\"\n          @submit=${(e: Event) => this.handleSubmit(e)}\n        >\n          <p>\n            Current donation amount: ${this.plan?.currency}\n            ${this.plan?.amountFormatted}\n          </p>\n          <div>\n            ${currencyToSymbol[this.plan?.currency ?? 'USD']}\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>\n              Total: ${this.plan?.currency}\n              ${formatCurrency(this.totalAmountWithFees())}\n            </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                ?isDisabled=${!this.newAmount}\n                .clickHandler=${(e: Event, iaButton: MGCButton) =>\n                  this.handleSubmit(e, iaButton)}\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/payment-method.d.ts

@@ -3,14 +3,14 @@ import '@internetarchive/donation-form-section';
 import '@internetarchive/donation-form/dist/src/form-elements/contact-form/contact-form.js';
 import '@internetarchive/donation-form/dist/src/form-elements/payment-selector.js';
 import '../form-sections/parts/braintree-manager';
-import type { BraintreeManagerInterface, PaymentClientsInterface, BraintreeEndpointManagerInterface, HostingEnvironment } from '@internetarchive/donation-form';
+import type { BraintreeManagerInterface } from '@internetarchive/donation-form';
 import type { ContactForm } from '@internetarchive/donation-form/dist/src/form-elements/contact-form/contact-form.js';
 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';
-import type { MGCBraintreeManager } from '../form-sections/parts/braintree-manager';
+import type { MGCBraintreeManager, PaymentConfig } from '../form-sections/parts/braintree-manager';
 /**
  * <ia-mgc-edit-payment-method>
  * - collecting the data to send to the service
@@ -23,14 +23,7 @@ import type { MGCBraintreeManager } from '../form-sections/parts/braintree-manag
  */
 export declare class MGCEditPaymentMethod extends LitElement {
     plan?: MonthlyPlan;
-    paymentConfig: {
-        braintreeAuthToken?: string;
-        endpointManager?: BraintreeEndpointManagerInterface;
-        paymentClients?: PaymentClientsInterface;
-        environment?: HostingEnvironment.Development | HostingEnvironment.Production;
-        venmoProfileId?: string;
-        googlePayMerchantId?: string;
-    } | undefined;
+    paymentConfig: PaymentConfig;
     patronEmail: string;
     currentlyEditing?: boolean;
     newPaymentMethod: string;

package/dist/src/form-sections/payment-method.js

@@ -32,6 +32,8 @@ let MGCEditPaymentMethod = class MGCEditPaymentMethod extends LitElement {
             environment: 'Development',
             venmoProfileId: '',
             googlePayMerchantId: '',
+            referrer: '',
+            origin: '',
         };
         this.patronEmail = '';
         this.currentlyEditing = false;

package/dist/src/form-sections/payment-method.js.map

@@ -1 +1 @@
-{"version":3,"file":"payment-method.js","sourceRoot":"","sources":["../../../src/form-sections/payment-method.ts"],"names":[],"mappings":"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","sourcesContent":["/* eslint-disable arrow-body-style */\nimport { LitElement, html, nothing, css, TemplateResult } from 'lit';\nimport { customElement, property } from 'lit/decorators.js';\nimport '@internetarchive/donation-form-section';\nimport '@internetarchive/donation-form/dist/src/form-elements/contact-form/contact-form.js';\n\nimport lockImg from '@internetarchive/icon-lock/index.js';\n\nimport '@internetarchive/donation-form/dist/src/form-elements/payment-selector.js';\n\nimport '../form-sections/parts/braintree-manager';\n\nimport { PaymentProvider } from '@internetarchive/donation-form-data-models';\n\nimport type {\n  BraintreeManagerInterface,\n  PaymentClientsInterface,\n  BraintreeEndpointManagerInterface,\n  HostingEnvironment,\n} from '@internetarchive/donation-form';\nimport type { ContactForm } from '@internetarchive/donation-form/dist/src/form-elements/contact-form/contact-form.js';\nimport type { MonthlyPlan } from '../models/plan';\nimport '../presentational/donation-section-info';\nimport '../presentational/mgc-button';\n\nimport type { MGCButton } from '../presentational/mgc-button';\nimport '../presentational/mgc-update-status';\nimport type { MGCBraintreeManager } from '../form-sections/parts/braintree-manager';\nimport { PaymentMethodRequest } from '../models/payment-method-request';\n\n/**\n * <ia-mgc-edit-payment-method>\n * - collecting the data to send to the service\n *   - contact form\n *   - braintree manager\n *\n * - handles submission\n * - handles toggling the view between display and edit modes\n *\n */\n@customElement('ia-mgc-edit-payment-method')\nexport class MGCEditPaymentMethod extends LitElement {\n  @property({ type: Object }) plan?: MonthlyPlan;\n\n  @property({ type: Object }) paymentConfig:\n    | {\n        braintreeAuthToken?: string;\n        endpointManager?: BraintreeEndpointManagerInterface;\n        paymentClients?: PaymentClientsInterface;\n        environment?:\n          | HostingEnvironment.Development\n          | HostingEnvironment.Production;\n        venmoProfileId?: string;\n        googlePayMerchantId?: string;\n      }\n    | undefined = {\n    braintreeAuthToken: '',\n    endpointManager: undefined,\n    paymentClients: undefined,\n    environment: 'Development' as HostingEnvironment.Development,\n    venmoProfileId: '',\n    googlePayMerchantId: '',\n  };\n\n  @property({ type: String }) patronEmail: string = '';\n\n  @property({ type: Boolean, reflect: true }) currentlyEditing?: boolean =\n    false;\n\n  @property({ type: String, reflect: true }) newPaymentMethod: string = '';\n\n  @property({ type: Object }) braintreeManager?: BraintreeManagerInterface;\n\n  @property({ type: String, reflect: true }) selectedPaymentProvider: string =\n    '';\n\n  @property({ type: Boolean }) paymentSelectorFirstUpdated: boolean = false;\n\n  @property({ type: String }) updateMessage: string = '';\n\n  @property({ type: String }) updateStatus: 'success' | 'fail' | '' = '';\n\n  createRenderRoot() {\n    return this;\n  }\n\n  submitPaymentMethodChange(e: Event) {\n    e.preventDefault();\n  }\n\n  clearStatusMessaging() {\n    this.updateMessage = '';\n    this.updateStatus = '';\n  }\n\n  async paymentMethodUpdated(status: 'success' | 'fail') {\n    this.updateStatus = status;\n    this.updateMessage =\n      status === 'success'\n        ? 'Payment method updated'\n        : 'Failed to update date, please try again';\n\n    if (status === 'success') {\n      this.currentlyEditing = false;\n      this.selectedPaymentProvider = '';\n      return;\n    }\n    this.updateRequestButton.isDisabled = false;\n  }\n\n  get updateRequestButton(): MGCButton {\n    return this.querySelector(\n      'ia-mgc-button#edit-plan-payment-method-submit',\n    ) as MGCButton;\n  }\n\n  get contactFormElement(): ContactForm | null {\n    return this.querySelector('contact-form');\n  }\n\n  get contactFormSection(): TemplateResult {\n    const headline =\n      this.selectedPaymentProvider === PaymentProvider.Venmo\n        ? 'Help us stay in touch'\n        : 'Enter payment information';\n\n    const displayContactForm =\n      this.selectedPaymentProvider === PaymentProvider.CreditCard ||\n      this.selectedPaymentProvider === PaymentProvider.Venmo;\n\n    console.log('contactFormSectioncontactFormSection', { displayContactForm });\n    return html`\n      <donation-form-section\n        badgemode=\"hidebadge\"\n        headline=${headline}\n        id=\"contactFormSection\"\n      >\n        <div class=\"credit-card-fields\">\n          <slot\n            style=\"\n              display: block;\n              width: 100%;\n              border: 1px solid blue;\n              height: inherit;\n          \"\n          ></slot>\n        </div>\n      </donation-form-section>\n    `;\n  }\n\n  get paymentFormSection(): TemplateResult | typeof nothing {\n    return html``;\n  }\n\n  get creditCardElement(): ContactForm | null {\n    return this.querySelector('contact-form');\n  }\n\n  get braintreeManagerElement(): MGCBraintreeManager | null {\n    return this.querySelector('ia-mgc-braintree-manager');\n  }\n\n  render() {\n    const displayContactForm =\n      this.selectedPaymentProvider === PaymentProvider.CreditCard ||\n      this.selectedPaymentProvider === PaymentProvider.Venmo;\n\n    const displayCCFields =\n      this.selectedPaymentProvider === PaymentProvider.CreditCard;\n\n    console.log('selectedPaymentProvider', {\n      selectedPaymentProvider: this.selectedPaymentProvider,\n    });\n    return html`\n      <style>\n        ${this.styles}\n      </style>\n      <donation-form-section badgemode=\"hidebadge\" headline=\"Payment method\">\n        ${!this.currentlyEditing\n          ? html`<ia-mgc-form-section-info\n              @editingRequested=${() => {\n                this.currentlyEditing = true;\n                this.clearStatusMessaging();\n              }}\n              ><span>\n                ${this.plan?.payment?.paymentMethodType === 'creditCard'\n                  ? 'Credit Card'\n                  : this.plan?.payment?.paymentMethodType}:\n                ${this.plan?.payment?.cardType} - ${this.plan?.payment?.last4}\n              </span></ia-mgc-form-section-info\n            >`\n          : nothing}\n        ${this.currentlyEditing\n          ? html`\n            <form id=\"edit-plan-payment-method\" @submit=${this.submitPaymentMethodChange}>\n              <payment-selector\n                .paymentProviders=${this.braintreeManager?.paymentProviders}\n                @firstUpdated=${() => {\n                  this.paymentSelectorFirstUpdated = true;\n                }}\n                @creditCardSelected=${() => {\n                  this.selectedPaymentProvider = PaymentProvider.CreditCard;\n                }}\n                @venmoSelected=${() => {\n                  this.selectedPaymentProvider = PaymentProvider.Venmo;\n                }}\n                @applePaySelected=${() => {\n                  this.selectedPaymentProvider = PaymentProvider.ApplePay;\n                }}\n                @googlePaySelected=${() => {\n                  this.selectedPaymentProvider = PaymentProvider.GooglePay;\n                }}\n                @paypalBlockerSelected=${() => {\n                  this.selectedPaymentProvider = 'paypalBlocker';\n                }}\n                @resetPaymentMethod=${async () => {\n                  this.selectedPaymentProvider = '';\n                }}\n                tabindex=\"0\"\n              >\n                <slot name=\"paypal-button\" slot=\"paypal-button\"></slot>\n              </payment-selector>\n\n              <div class=\"${displayContactForm ? '' : 'hidden'}\">\n                <contact-form .donorEmail=${this.patronEmail}></contact-form>\n              </div>\n              \n\n              <ia-mgc-braintree-manager\n                class=\"${displayCCFields ? '' : 'hidden'}\"\n                .displayCreditCard=${this.selectedPaymentProvider === PaymentProvider.CreditCard}\n                .plan=${this.plan}\n                .paymentConfig=${this.paymentConfig}\n                @BraintreeManagerSetupComplete=${() => {\n                  console.log('BraintreeManagerSetupComplete');\n                }}\n              ></ia-mgc-braintree-manager>\n\n              <ia-mgc-button\n                id=\"edit-plan-payment-method-cancel\"\n                class=\"secondary\"\n                .clickHandler=${() => {\n                  this.currentlyEditing = false;\n                  this.selectedPaymentProvider = '';\n                  this.clearStatusMessaging();\n                }}\n                >Cancel</ia-mgc-button\n              >\n              <ia-mgc-button\n                id=\"edit-plan-payment-method-submit\"\n                class=\"primary\"\n                type=\"submit\"\n                .isDisabled=${!this.selectedPaymentProvider}\n                .clickHandler=${async (event: Event, iaButton: MGCButton) => {\n                  console.log({ iaButton, event });\n\n                  const button = iaButton;\n                  button.isDisabled = true;\n                  // validate credit card\n                  // if not valid, show error and return\n                  const isContactFormValid =\n                    this.creditCardElement?.reportValidity();\n\n                  if (!isContactFormValid) {\n                    button.isDisabled = false;\n                    return;\n                  }\n\n                  const paymentMethodInfo =\n                    (await this.braintreeManagerElement?.validateCreditCardFields()) as unknown as any;\n\n                  if (!paymentMethodInfo) {\n                    button.isDisabled = false;\n                    return;\n                  }\n\n                  const newPaymentMethodRequest = new PaymentMethodRequest({\n                    paymentMethodInfo,\n                    donorContactInfo: this.contactFormElement?.donorContactInfo,\n                    paymentProvider: this\n                      .selectedPaymentProvider as PaymentProvider,\n                  });\n\n                  this.dispatchEvent(\n                    new CustomEvent('UpdatePaymentMethod', {\n                      detail: { newPaymentMethodRequest },\n                    }),\n                  );\n                }}\n                >Update payment method</ia-mgc-button\n              >\n              <ia-mgc-update-status .status=${this.updateStatus}\n                >${this.updateMessage}</ia-mgc-update-status\n              ></ia-mgc-form-section-info>\n              <div class=\"secure-process-note\">\n                ${lockImg} Your payment will be securely processed\n              </div>\n            </form>\n          `\n          : nothing}\n      </donation-form-section>\n    `;\n  }\n\n  get styles() {\n    return css`\n      payment-selector {\n        display: block;\n        margin-bottom: 5px;\n        padding-bottom: 10px;\n      }\n\n      ia-mgc-braintree-manager {\n        display: block;\n        margin: 10px 0;\n      }\n\n      .secure-process-note {\n        margin-top: 0.5em;\n        font-size: 0.75em;\n      }\n\n      .secure-process-note svg {\n        width: 1.2rem;\n        height: 1.5rem;\n        vertical-align: bottom;\n      }\n\n      .hidden {\n        visibility: hidden;\n        height: 1px;\n        width: 1px;\n      }\n    `;\n  }\n}\n"]}
+{"version":3,"file":"payment-method.js","sourceRoot":"","sources":["../../../src/form-sections/payment-method.ts"],"names":[],"mappings":"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","sourcesContent":["/* eslint-disable arrow-body-style */\nimport { LitElement, html, nothing, css, TemplateResult } from 'lit';\nimport { customElement, property } from 'lit/decorators.js';\nimport '@internetarchive/donation-form-section';\nimport '@internetarchive/donation-form/dist/src/form-elements/contact-form/contact-form.js';\n\nimport lockImg from '@internetarchive/icon-lock/index.js';\n\nimport '@internetarchive/donation-form/dist/src/form-elements/payment-selector.js';\n\nimport '../form-sections/parts/braintree-manager';\n\nimport { PaymentProvider } from '@internetarchive/donation-form-data-models';\n\nimport type {\n  BraintreeManagerInterface,\n  HostingEnvironment,\n} from '@internetarchive/donation-form';\nimport type { ContactForm } from '@internetarchive/donation-form/dist/src/form-elements/contact-form/contact-form.js';\nimport type { MonthlyPlan } from '../models/plan';\nimport '../presentational/donation-section-info';\nimport '../presentational/mgc-button';\n\nimport type { MGCButton } from '../presentational/mgc-button';\nimport '../presentational/mgc-update-status';\nimport type {\n  MGCBraintreeManager,\n  PaymentConfig,\n} from '../form-sections/parts/braintree-manager';\nimport { PaymentMethodRequest } from '../models/payment-method-request';\n\n/**\n * <ia-mgc-edit-payment-method>\n * - collecting the data to send to the service\n *   - contact form\n *   - braintree manager\n *\n * - handles submission\n * - handles toggling the view between display and edit modes\n *\n */\n@customElement('ia-mgc-edit-payment-method')\nexport class MGCEditPaymentMethod extends LitElement {\n  @property({ type: Object }) plan?: MonthlyPlan;\n\n  @property({ type: Object }) paymentConfig: PaymentConfig = {\n    braintreeAuthToken: '',\n    endpointManager: undefined,\n    paymentClients: undefined,\n    environment: 'Development' as HostingEnvironment.Development,\n    venmoProfileId: '',\n    googlePayMerchantId: '',\n    referrer: '',\n    origin: '',\n  };\n\n  @property({ type: String }) patronEmail: string = '';\n\n  @property({ type: Boolean, reflect: true }) currentlyEditing?: boolean =\n    false;\n\n  @property({ type: String, reflect: true }) newPaymentMethod: string = '';\n\n  @property({ type: Object }) braintreeManager?: BraintreeManagerInterface;\n\n  @property({ type: String, reflect: true }) selectedPaymentProvider: string =\n    '';\n\n  @property({ type: Boolean }) paymentSelectorFirstUpdated: boolean = false;\n\n  @property({ type: String }) updateMessage: string = '';\n\n  @property({ type: String }) updateStatus: 'success' | 'fail' | '' = '';\n\n  createRenderRoot() {\n    return this;\n  }\n\n  submitPaymentMethodChange(e: Event) {\n    e.preventDefault();\n  }\n\n  clearStatusMessaging() {\n    this.updateMessage = '';\n    this.updateStatus = '';\n  }\n\n  async paymentMethodUpdated(status: 'success' | 'fail') {\n    this.updateStatus = status;\n    this.updateMessage =\n      status === 'success'\n        ? 'Payment method updated'\n        : 'Failed to update date, please try again';\n\n    if (status === 'success') {\n      this.currentlyEditing = false;\n      this.selectedPaymentProvider = '';\n      return;\n    }\n    this.updateRequestButton.isDisabled = false;\n  }\n\n  get updateRequestButton(): MGCButton {\n    return this.querySelector(\n      'ia-mgc-button#edit-plan-payment-method-submit',\n    ) as MGCButton;\n  }\n\n  get contactFormElement(): ContactForm | null {\n    return this.querySelector('contact-form');\n  }\n\n  get contactFormSection(): TemplateResult {\n    const headline =\n      this.selectedPaymentProvider === PaymentProvider.Venmo\n        ? 'Help us stay in touch'\n        : 'Enter payment information';\n\n    const displayContactForm =\n      this.selectedPaymentProvider === PaymentProvider.CreditCard ||\n      this.selectedPaymentProvider === PaymentProvider.Venmo;\n\n    console.log('contactFormSectioncontactFormSection', { displayContactForm });\n    return html`\n      <donation-form-section\n        badgemode=\"hidebadge\"\n        headline=${headline}\n        id=\"contactFormSection\"\n      >\n        <div class=\"credit-card-fields\">\n          <slot\n            style=\"\n              display: block;\n              width: 100%;\n              border: 1px solid blue;\n              height: inherit;\n          \"\n          ></slot>\n        </div>\n      </donation-form-section>\n    `;\n  }\n\n  get paymentFormSection(): TemplateResult | typeof nothing {\n    return html``;\n  }\n\n  get creditCardElement(): ContactForm | null {\n    return this.querySelector('contact-form');\n  }\n\n  get braintreeManagerElement(): MGCBraintreeManager | null {\n    return this.querySelector('ia-mgc-braintree-manager');\n  }\n\n  render() {\n    const displayContactForm =\n      this.selectedPaymentProvider === PaymentProvider.CreditCard ||\n      this.selectedPaymentProvider === PaymentProvider.Venmo;\n\n    const displayCCFields =\n      this.selectedPaymentProvider === PaymentProvider.CreditCard;\n\n    console.log('selectedPaymentProvider', {\n      selectedPaymentProvider: this.selectedPaymentProvider,\n    });\n    return html`\n      <style>\n        ${this.styles}\n      </style>\n      <donation-form-section badgemode=\"hidebadge\" headline=\"Payment method\">\n        ${!this.currentlyEditing\n          ? html`<ia-mgc-form-section-info\n              @editingRequested=${() => {\n                this.currentlyEditing = true;\n                this.clearStatusMessaging();\n              }}\n              ><span>\n                ${this.plan?.payment?.paymentMethodType === 'creditCard'\n                  ? 'Credit Card'\n                  : this.plan?.payment?.paymentMethodType}:\n                ${this.plan?.payment?.cardType} - ${this.plan?.payment?.last4}\n              </span></ia-mgc-form-section-info\n            >`\n          : nothing}\n        ${this.currentlyEditing\n          ? html`\n            <form id=\"edit-plan-payment-method\" @submit=${this.submitPaymentMethodChange}>\n              <payment-selector\n                .paymentProviders=${this.braintreeManager?.paymentProviders}\n                @firstUpdated=${() => {\n                  this.paymentSelectorFirstUpdated = true;\n                }}\n                @creditCardSelected=${() => {\n                  this.selectedPaymentProvider = PaymentProvider.CreditCard;\n                }}\n                @venmoSelected=${() => {\n                  this.selectedPaymentProvider = PaymentProvider.Venmo;\n                }}\n                @applePaySelected=${() => {\n                  this.selectedPaymentProvider = PaymentProvider.ApplePay;\n                }}\n                @googlePaySelected=${() => {\n                  this.selectedPaymentProvider = PaymentProvider.GooglePay;\n                }}\n                @paypalBlockerSelected=${() => {\n                  this.selectedPaymentProvider = 'paypalBlocker';\n                }}\n                @resetPaymentMethod=${async () => {\n                  this.selectedPaymentProvider = '';\n                }}\n                tabindex=\"0\"\n              >\n                <slot name=\"paypal-button\" slot=\"paypal-button\"></slot>\n              </payment-selector>\n\n              <div class=\"${displayContactForm ? '' : 'hidden'}\">\n                <contact-form .donorEmail=${this.patronEmail}></contact-form>\n              </div>\n              \n\n              <ia-mgc-braintree-manager\n                class=\"${displayCCFields ? '' : 'hidden'}\"\n                .displayCreditCard=${this.selectedPaymentProvider === PaymentProvider.CreditCard}\n                .plan=${this.plan}\n                .paymentConfig=${this.paymentConfig}\n                @BraintreeManagerSetupComplete=${() => {\n                  console.log('BraintreeManagerSetupComplete');\n                }}\n              ></ia-mgc-braintree-manager>\n\n              <ia-mgc-button\n                id=\"edit-plan-payment-method-cancel\"\n                class=\"secondary\"\n                .clickHandler=${() => {\n                  this.currentlyEditing = false;\n                  this.selectedPaymentProvider = '';\n                  this.clearStatusMessaging();\n                }}\n                >Cancel</ia-mgc-button\n              >\n              <ia-mgc-button\n                id=\"edit-plan-payment-method-submit\"\n                class=\"primary\"\n                type=\"submit\"\n                .isDisabled=${!this.selectedPaymentProvider}\n                .clickHandler=${async (event: Event, iaButton: MGCButton) => {\n                  console.log({ iaButton, event });\n\n                  const button = iaButton;\n                  button.isDisabled = true;\n                  // validate credit card\n                  // if not valid, show error and return\n                  const isContactFormValid =\n                    this.creditCardElement?.reportValidity();\n\n                  if (!isContactFormValid) {\n                    button.isDisabled = false;\n                    return;\n                  }\n\n                  const paymentMethodInfo =\n                    (await this.braintreeManagerElement?.validateCreditCardFields()) as unknown as any;\n\n                  if (!paymentMethodInfo) {\n                    button.isDisabled = false;\n                    return;\n                  }\n\n                  const newPaymentMethodRequest = new PaymentMethodRequest({\n                    paymentMethodInfo,\n                    donorContactInfo: this.contactFormElement?.donorContactInfo,\n                    paymentProvider: this\n                      .selectedPaymentProvider as PaymentProvider,\n                  });\n\n                  this.dispatchEvent(\n                    new CustomEvent('UpdatePaymentMethod', {\n                      detail: { newPaymentMethodRequest },\n                    }),\n                  );\n                }}\n                >Update payment method</ia-mgc-button\n              >\n              <ia-mgc-update-status .status=${this.updateStatus}\n                >${this.updateMessage}</ia-mgc-update-status\n              ></ia-mgc-form-section-info>\n              <div class=\"secure-process-note\">\n                ${lockImg} Your payment will be securely processed\n              </div>\n            </form>\n          `\n          : nothing}\n      </donation-form-section>\n    `;\n  }\n\n  get styles() {\n    return css`\n      payment-selector {\n        display: block;\n        margin-bottom: 5px;\n        padding-bottom: 10px;\n      }\n\n      ia-mgc-braintree-manager {\n        display: block;\n        margin: 10px 0;\n      }\n\n      .secure-process-note {\n        margin-top: 0.5em;\n        font-size: 0.75em;\n      }\n\n      .secure-process-note svg {\n        width: 1.2rem;\n        height: 1.5rem;\n        vertical-align: bottom;\n      }\n\n      .hidden {\n        visibility: hidden;\n        height: 1px;\n        width: 1px;\n      }\n    `;\n  }\n}\n"]}

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

@@ -41,7 +41,6 @@ export declare class MonthlyPlan {
     currency: string;
     constructor(plan: Plan);
     get id(): string;
-    get currencySymbol(): string;
     get amount(): number;
     get amountFormatted(): string;
     get payment(): BtData | null;

package/dist/src/models/plan.js

@@ -1,3 +1,4 @@
+import { formatCurrency } from '../utils/currency-format';
 export class MonthlyPlan {
     constructor(plan) {
         var _a;
@@ -8,14 +9,11 @@ export class MonthlyPlan {
         // use token as unique id
         return this.plan.token;
     }
-    get currencySymbol() {
-        return this.currency === 'USD' ? '$' : '';
-    }
     get amount() {
         return this.plan.amount;
     }
     get amountFormatted() {
-        return this.plan.amount.toFixed(2);
+        return formatCurrency(this.plan.amount, this.currency);
     }
     get payment() {
         return this.plan.btdata;

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

@@ -1 +1 @@
-{"version":3,"file":"plan.js","sourceRoot":"","sources":["../../../src/models/plan.ts"],"names":[],"mappings":"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","sourcesContent":["import type { PaymentMethodRequest } from './payment-method-request';\n\nexport type BtData = {\n  billingDayOfMonth: number;\n  nextBillingDate: {\n    date: string;\n    timezone_type: number;\n    timezone: string;\n    oldDate?: string; // optional for updates ISO UTC date string\n  };\n  lastBillingDate: {\n    date: string | null;\n    timezone_type: number;\n    timezone: string;\n  };\n  status: string; // active, inactive\n  paymentMethodType: string; // cc, paypal, venmo, etc\n  last4: string | null;\n  cardType: string | null;\n  expirationMonth: string | null;\n  expirationYear: string | null;\n  paypalEmail?: string;\n  venmoUsername?: string;\n};\n\nexport type Plan = {\n  token: string;\n  amount: number;\n  currency: string;\n  start_date: string; // UTC\n  is_test: boolean;\n  btdata: BtData;\n  oldAmount?: number;\n  oldDate?: string;\n  isCancelled?: boolean;\n  processor_id?: string; // used when editing date\n  oldProcessorId?: string;\n  old_btData?: any;\n  new_payment_method_details?: PaymentMethodRequest; // used when updating payment method\n};\n\nexport class MonthlyPlan {\n  plan: Plan;\n\n  currency: string;\n\n  constructor(plan: Plan) {\n    this.plan = plan;\n    this.currency = plan.currency ?? 'USD'; // not in data\n  }\n\n  get id(): string {\n    // use token as unique id\n    return this.plan.token;\n  }\n\n  get currencySymbol(): string {\n    return this.currency === 'USD' ? '$' : '';\n  }\n\n  get amount(): number {\n    return this.plan.amount;\n  }\n\n  get amountFormatted(): string {\n    return this.plan.amount.toFixed(2);\n  }\n\n  get payment(): BtData | null {\n    return this.plan.btdata;\n  }\n\n  setAmount(newAmount: number) {\n    this.plan.oldAmount = this.plan.amount;\n    this.plan.amount = newAmount;\n  }\n\n  get nextBillingDate(): string {\n    // iso08601 date string\n    return this.payment?.nextBillingDate?.date ?? '';\n  }\n\n  setNextBillingDate(newDate: string) {\n    // iso08601 date string\n    if (this.payment) {\n      this.payment.nextBillingDate.oldDate = this.payment.nextBillingDate.date;\n      this.payment.nextBillingDate.date = newDate;\n    }\n  }\n\n  get nextBillingDateLocale(): string {\n    const dateStr = this.payment?.nextBillingDate.date ?? '';\n    const nextBillingDate = dateStr\n      ? new Date(dateStr).toLocaleDateString(undefined, {\n          year: 'numeric',\n          month: 'short',\n          day: 'numeric',\n        })\n      : 'not found';\n    return nextBillingDate;\n  }\n\n  get lastBillingDateLocale(): string {\n    if (!this.payment?.lastBillingDate.date) {\n      return '';\n    }\n\n    const lastBillingDate = new Date(\n      this.payment.lastBillingDate.date,\n    ).toLocaleDateString(undefined, {\n      year: 'numeric',\n      month: 'short',\n      day: 'numeric',\n    });\n    return lastBillingDate ?? 'not found';\n  }\n\n  get hasBeenCancelled(): boolean {\n    return this.plan.isCancelled === true;\n  }\n\n  get isTest(): boolean {\n    return this.plan.is_test;\n  }\n\n  cancelPlan(): void {\n    this.plan.isCancelled = true;\n  }\n\n  setNewProcessorId(newProcessorId: string): void {\n    const currentProcessorId = this.plan.processor_id;\n    this.plan.processor_id = newProcessorId;\n    this.plan.oldProcessorId = currentProcessorId;\n  }\n\n  setNewPaymentMethod(newPaymentMethodRequest: PaymentMethodRequest): void {\n    const currentPaymentMethod = this.payment;\n    const mergedBtData = {\n      ...this.plan.btdata,\n      ...newPaymentMethodRequest.paymentMethodInfo.details,\n      ...{\n        last4:\n          newPaymentMethodRequest.paymentMethodInfo.details.lastFour ??\n          'unknown',\n      },\n    };\n    this.plan.old_btData = currentPaymentMethod;\n    this.plan.btdata = mergedBtData;\n  }\n}\n"]}
+{"version":3,"file":"plan.js","sourceRoot":"","sources":["../../../src/models/plan.ts"],"names":[],"mappings":"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","sourcesContent":["import type { PaymentMethodRequest } from './payment-method-request';\nimport { formatCurrency } from '../utils/currency-format';\n\nexport type BtData = {\n  billingDayOfMonth: number;\n  nextBillingDate: {\n    date: string;\n    timezone_type: number;\n    timezone: string;\n    oldDate?: string; // optional for updates ISO UTC date string\n  };\n  lastBillingDate: {\n    date: string | null;\n    timezone_type: number;\n    timezone: string;\n  };\n  status: string; // active, inactive\n  paymentMethodType: string; // cc, paypal, venmo, etc\n  last4: string | null;\n  cardType: string | null;\n  expirationMonth: string | null;\n  expirationYear: string | null;\n  paypalEmail?: string;\n  venmoUsername?: string;\n};\n\nexport type Plan = {\n  token: string;\n  amount: number;\n  currency: string;\n  start_date: string; // UTC\n  is_test: boolean;\n  btdata: BtData;\n  oldAmount?: number;\n  oldDate?: string;\n  isCancelled?: boolean;\n  processor_id?: string; // used when editing date\n  oldProcessorId?: string;\n  old_btData?: any;\n  new_payment_method_details?: PaymentMethodRequest; // used when updating payment method\n};\n\nexport class MonthlyPlan {\n  plan: Plan;\n\n  currency: string;\n\n  constructor(plan: Plan) {\n    this.plan = plan;\n    this.currency = plan.currency ?? 'USD'; // not in data\n  }\n\n  get id(): string {\n    // use token as unique id\n    return this.plan.token;\n  }\n\n  get amount(): number {\n    return this.plan.amount;\n  }\n\n  get amountFormatted(): string {\n    return formatCurrency(this.plan.amount, this.currency);\n  }\n\n  get payment(): BtData | null {\n    return this.plan.btdata;\n  }\n\n  setAmount(newAmount: number) {\n    this.plan.oldAmount = this.plan.amount;\n    this.plan.amount = newAmount;\n  }\n\n  get nextBillingDate(): string {\n    // iso08601 date string\n    return this.payment?.nextBillingDate?.date ?? '';\n  }\n\n  setNextBillingDate(newDate: string) {\n    // iso08601 date string\n    if (this.payment) {\n      this.payment.nextBillingDate.oldDate = this.payment.nextBillingDate.date;\n      this.payment.nextBillingDate.date = newDate;\n    }\n  }\n\n  get nextBillingDateLocale(): string {\n    const dateStr = this.payment?.nextBillingDate.date ?? '';\n    const nextBillingDate = dateStr\n      ? new Date(dateStr).toLocaleDateString(undefined, {\n          year: 'numeric',\n          month: 'short',\n          day: 'numeric',\n        })\n      : 'not found';\n    return nextBillingDate;\n  }\n\n  get lastBillingDateLocale(): string {\n    if (!this.payment?.lastBillingDate.date) {\n      return '';\n    }\n\n    const lastBillingDate = new Date(\n      this.payment.lastBillingDate.date,\n    ).toLocaleDateString(undefined, {\n      year: 'numeric',\n      month: 'short',\n      day: 'numeric',\n    });\n    return lastBillingDate ?? 'not found';\n  }\n\n  get hasBeenCancelled(): boolean {\n    return this.plan.isCancelled === true;\n  }\n\n  get isTest(): boolean {\n    return this.plan.is_test;\n  }\n\n  cancelPlan(): void {\n    this.plan.isCancelled = true;\n  }\n\n  setNewProcessorId(newProcessorId: string): void {\n    const currentProcessorId = this.plan.processor_id;\n    this.plan.processor_id = newProcessorId;\n    this.plan.oldProcessorId = currentProcessorId;\n  }\n\n  setNewPaymentMethod(newPaymentMethodRequest: PaymentMethodRequest): void {\n    const currentPaymentMethod = this.payment;\n    const mergedBtData = {\n      ...this.plan.btdata,\n      ...newPaymentMethodRequest.paymentMethodInfo.details,\n      ...{\n        last4:\n          newPaymentMethodRequest.paymentMethodInfo.details.lastFour ??\n          'unknown',\n      },\n    };\n    this.plan.old_btData = currentPaymentMethod;\n    this.plan.btdata = mergedBtData;\n  }\n}\n"]}

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

@@ -12,10 +12,8 @@ export type AReceipt = {
 export declare class Receipt {
     receipt: AReceipt;
     constructor(receipt: AReceipt);
-    get amountFormatted(): string;
     get amount(): string;
     get isTest(): boolean;
     get id(): string;
     get date(): string;
-    get currencySymbol(): string;
 }

package/dist/src/models/receipt.js

@@ -1,18 +1,11 @@
+import { formatCurrency } from '../utils/currency-format';
 export class Receipt {
     constructor(receipt) {
         this.receipt = receipt;
     }
-    get amountFormatted() {
-        var _a;
-        const value = this.receipt.total_amount.toFixed(2);
-        const currencyType = (_a = this.receipt.currency) !== null && _a !== void 0 ? _a : 'CURR not found';
-        if (value) {
-            return `${currencyType} ${this.currencySymbol}${value}`;
-        }
-        return "no amount found, can't find total_amount or net_amount";
-    }
     get amount() {
-        return this.receipt.total_amount.toFixed(2);
+        var _a;
+        return formatCurrency(this.receipt.total_amount, (_a = this.receipt.currency) !== null && _a !== void 0 ? _a : 'USD');
     }
     get isTest() {
         var _a;
@@ -26,11 +19,5 @@ export class Receipt {
         var _a;
         return (_a = this.receipt.date) !== null && _a !== void 0 ? _a : 'no date found';
     }
-    get currencySymbol() {
-        if (this.receipt.currency === 'USD') {
-            return '$';
-        }
-        return '';
-    }
 }
 //# sourceMappingURL=receipt.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"receipt.js","sourceRoot":"","sources":["../../../src/models/receipt.ts"],"names":[],"mappings":"AAYA,MAAM,OAAO,OAAO;IAGlB,YAAY,OAAiB;QAC3B,IAAI,CAAC,OAAO,GAAG,OAAO,CAAC;IACzB,CAAC;IAED,IAAI,eAAe;;QACjB,MAAM,KAAK,GAAG,IAAI,CAAC,OAAO,CAAC,YAAY,CAAC,OAAO,CAAC,CAAC,CAAC,CAAC;QACnD,MAAM,YAAY,GAAG,MAAA,IAAI,CAAC,OAAO,CAAC,QAAQ,mCAAI,gBAAgB,CAAC;QAC/D,IAAI,KAAK,EAAE,CAAC;YACV,OAAO,GAAG,YAAY,IAAI,IAAI,CAAC,cAAc,GAAG,KAAK,EAAE,CAAC;QAC1D,CAAC;QACD,OAAO,wDAAwD,CAAC;IAClE,CAAC;IAED,IAAI,MAAM;QACR,OAAO,IAAI,CAAC,OAAO,CAAC,YAAY,CAAC,OAAO,CAAC,CAAC,CAAC,CAAC;IAC9C,CAAC;IAED,IAAI,MAAM;;QACR,OAAO,MAAA,IAAI,CAAC,OAAO,CAAC,MAAM,mCAAI,KAAK,CAAC;IACtC,CAAC;IAED,IAAI,EAAE;;QACJ,OAAO,MAAA,IAAI,CAAC,OAAO,CAAC,KAAK,mCAAI,gBAAgB,CAAC;IAChD,CAAC;IAED,IAAI,IAAI;;QACN,OAAO,MAAA,IAAI,CAAC,OAAO,CAAC,IAAI,mCAAI,eAAe,CAAC;IAC9C,CAAC;IAED,IAAI,cAAc;QAChB,IAAI,IAAI,CAAC,OAAO,CAAC,QAAQ,KAAK,KAAK,EAAE,CAAC;YACpC,OAAO,GAAG,CAAC;QACb,CAAC;QAED,OAAO,EAAE,CAAC;IACZ,CAAC;CACF","sourcesContent":["export type AReceipt = {\n  currency: string;\n  net_amount: number;\n  total_amount: number;\n  fee_amount: number;\n  fee_covered: boolean;\n  receive_date: Date;\n  date: string;\n  isTest: boolean;\n  token: string;\n};\n\nexport class Receipt {\n  receipt: AReceipt;\n\n  constructor(receipt: AReceipt) {\n    this.receipt = receipt;\n  }\n\n  get amountFormatted(): string {\n    const value = this.receipt.total_amount.toFixed(2);\n    const currencyType = this.receipt.currency ?? 'CURR not found';\n    if (value) {\n      return `${currencyType} ${this.currencySymbol}${value}`;\n    }\n    return \"no amount found, can't find total_amount or net_amount\";\n  }\n\n  get amount(): string {\n    return this.receipt.total_amount.toFixed(2);\n  }\n\n  get isTest(): boolean {\n    return this.receipt.isTest ?? false;\n  }\n\n  get id(): string {\n    return this.receipt.token ?? 'no token found';\n  }\n\n  get date(): string {\n    return this.receipt.date ?? 'no date found';\n  }\n\n  get currencySymbol(): string {\n    if (this.receipt.currency === 'USD') {\n      return '$';\n    }\n\n    return '';\n  }\n}\n"]}
+{"version":3,"file":"receipt.js","sourceRoot":"","sources":["../../../src/models/receipt.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,cAAc,EAAE,MAAM,0BAA0B,CAAC;AAc1D,MAAM,OAAO,OAAO;IAGlB,YAAY,OAAiB;QAC3B,IAAI,CAAC,OAAO,GAAG,OAAO,CAAC;IACzB,CAAC;IAED,IAAI,MAAM;;QACR,OAAO,cAAc,CACnB,IAAI,CAAC,OAAO,CAAC,YAAY,EACzB,MAAA,IAAI,CAAC,OAAO,CAAC,QAAQ,mCAAI,KAAK,CAC/B,CAAC;IACJ,CAAC;IAED,IAAI,MAAM;;QACR,OAAO,MAAA,IAAI,CAAC,OAAO,CAAC,MAAM,mCAAI,KAAK,CAAC;IACtC,CAAC;IAED,IAAI,EAAE;;QACJ,OAAO,MAAA,IAAI,CAAC,OAAO,CAAC,KAAK,mCAAI,gBAAgB,CAAC;IAChD,CAAC;IAED,IAAI,IAAI;;QACN,OAAO,MAAA,IAAI,CAAC,OAAO,CAAC,IAAI,mCAAI,eAAe,CAAC;IAC9C,CAAC;CACF","sourcesContent":["import { formatCurrency } from '../utils/currency-format';\n\nexport type AReceipt = {\n  currency: string;\n  net_amount: number;\n  total_amount: number;\n  fee_amount: number;\n  fee_covered: boolean;\n  receive_date: Date;\n  date: string;\n  isTest: boolean;\n  token: string;\n};\n\nexport class Receipt {\n  receipt: AReceipt;\n\n  constructor(receipt: AReceipt) {\n    this.receipt = receipt;\n  }\n\n  get amount(): string {\n    return formatCurrency(\n      this.receipt.total_amount,\n      this.receipt.currency ?? 'USD',\n    );\n  }\n\n  get isTest(): boolean {\n    return this.receipt.isTest ?? false;\n  }\n\n  get id(): string {\n    return this.receipt.token ?? 'no token found';\n  }\n\n  get date(): string {\n    return this.receipt.date ?? 'no date found';\n  }\n}\n"]}

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

@@ -9,6 +9,7 @@ import './presentational/mgc-button';
 import type { MonthlyPlan } from './models/plan';
 import './edit-plan-form';
 import type { IauxEditPlanForm } from './edit-plan-form';
+import { Receipt } from './models/receipt';
 export type APlanUpdate = {
     plan?: MonthlyPlan;
     donationId?: string;
@@ -20,7 +21,7 @@ export declare class MonthlyGivingCircle extends LitElement {
     patronName: string;
     patronEmail: string;
     canEditPaymentMethod: boolean;
-    receipts: never[];
+    receipts: Receipt[];
     updates: APlanUpdate[];
     plans: never[];
     editingThisPlan?: MonthlyPlan;

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 {\n  HostingEnvironment,\n  PaymentClientsInterface,\n} from '@internetarchive/donation-form';\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:\n    | 'receiptSent'\n    | 'cancel'\n    | 'amountUpdate'\n    | 'dateUpdate'\n    | 'paymentMethodUpdate';\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: String }) patronEmail: string = '';\n\n  @property({ type: Boolean }) canEditPaymentMethod: boolean = false;\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 = true;\n\n  @property({ type: Object }) paymentConfig: {\n    referrer: string;\n    origin: string;\n    braintreeAuthToken: string;\n    venmoProfileId: string;\n    googlePayMerchantId: string;\n    paymentClients: PaymentClientsInterface | undefined;\n    environment: HostingEnvironment;\n    endpointManager: object;\n  } = {\n    referrer: '',\n    origin: '',\n    braintreeAuthToken: '',\n    venmoProfileId: '',\n    googlePayMerchantId: '',\n    environment: HostingEnvironment.Development,\n    paymentClients: undefined,\n    endpointManager: {},\n  };\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 === 'paymentMethodUpdate') {\n      this.editFormElement.paymentMethodUpdates(update.status);\n      return;\n    }\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            .canEditPaymentMethod=${this.canEditPaymentMethod}\n            .patronEmail=${this.patronEmail}\n            .plan=${this.editingThisPlan}\n            .paymentConfig=${this.paymentConfig}\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            @UpdatePaymentMethod=${(event: CustomEvent) => {\n              const { newPaymentMethodRequest } = event.detail;\n              console.log('UpdatePaymentMethod', newPaymentMethodRequest);\n              console.warn('UPDATE PAYMENT METHOD', {\n                plan: this.editingThisPlan,\n                newPaymentMethodRequest,\n              });\n              this.dispatchEvent(\n                new CustomEvent('UpdatePaymentMethod', {\n                  detail: {\n                    plan: this.editingThisPlan,\n                    newPaymentMethodRequest,\n                  },\n                }),\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"]}
+{"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 {\n  HostingEnvironment,\n  PaymentClientsInterface,\n} from '@internetarchive/donation-form';\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';\nimport { Receipt } from './models/receipt';\n\nexport type APlanUpdate = {\n  plan?: MonthlyPlan;\n  donationId?: string;\n  status: 'success' | 'fail';\n  action:\n    | 'receiptSent'\n    | 'cancel'\n    | 'amountUpdate'\n    | 'dateUpdate'\n    | 'paymentMethodUpdate';\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: String }) patronEmail: string = '';\n\n  @property({ type: Boolean }) canEditPaymentMethod: boolean = false;\n\n  @property({ type: Array }) receipts: Receipt[] = [];\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 = true;\n\n  @property({ type: Object }) paymentConfig: {\n    referrer: string;\n    origin: string;\n    braintreeAuthToken: string;\n    venmoProfileId: string;\n    googlePayMerchantId: string;\n    paymentClients: PaymentClientsInterface | undefined;\n    environment: HostingEnvironment;\n    endpointManager: object;\n  } = {\n    referrer: '',\n    origin: '',\n    braintreeAuthToken: '',\n    venmoProfileId: '',\n    googlePayMerchantId: '',\n    environment: HostingEnvironment.Development,\n    paymentClients: undefined,\n    endpointManager: {},\n  };\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 === 'paymentMethodUpdate') {\n      this.editFormElement.paymentMethodUpdates(update.status);\n      return;\n    }\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            .canEditPaymentMethod=${this.canEditPaymentMethod}\n            .patronEmail=${this.patronEmail}\n            .plan=${this.editingThisPlan}\n            .paymentConfig=${this.paymentConfig}\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            @UpdatePaymentMethod=${(event: CustomEvent) => {\n              const { newPaymentMethodRequest } = event.detail;\n              console.log('UpdatePaymentMethod', newPaymentMethodRequest);\n              console.warn('UPDATE PAYMENT METHOD', {\n                plan: this.editingThisPlan,\n                newPaymentMethodRequest,\n              });\n              this.dispatchEvent(\n                new CustomEvent('UpdatePaymentMethod', {\n                  detail: {\n                    plan: this.editingThisPlan,\n                    newPaymentMethodRequest,\n                  },\n                }),\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

@@ -28,10 +28,7 @@ let IauxMgcPlans = class IauxMgcPlans extends LitElement {
                 <div class="info">
                   <div class="amount">
                     <h3>Amount</h3>
-                    <p>
-                      ${plan.currency}
-                      ${plan.currencySymbol}${plan.amountFormatted}/month
-                    </p>
+                    <p>${plan.currency} ${plan.amountFormatted}/month</p>
                     ${plan.isTest
                 ? html `<p class="is-test">(Test payment)</p>`
                 : nothing}

package/dist/src/plans.js.map

@@ -1 +1 @@
-{"version":3,"file":"plans.js","sourceRoot":"","sources":["../../src/plans.ts"],"names":[],"mappings":"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","sourcesContent":["/* eslint-disable no-param-reassign */\nimport { LitElement, html, css, nothing } from 'lit';\nimport { customElement, property } from 'lit/decorators.js';\n\nimport type { MonthlyPlan } from './models/plan';\n\nimport './presentational/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 = true;\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.amountFormatted}/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"]}
+{"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 = true;\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>${plan.currency} ${plan.amountFormatted}/month</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"]}