@internetarchive/donation-monthly-portal 0.0.0-monthly8 → 0.0.0-processorid2

package/README.md

@@ -1,115 +1,20 @@
-# \<donation-form>
+@@ -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)
 
-The Internet Archive Donation Form
+# \<iaux-monthly-giving-circle>
 
-![Donation Form](./assets/img/screenshot.png "Donation Form")
+The Internet Archive monthly donation management, web components.
 
 ## Installation
 ```bash
-yarn add @internetarchive/donation-form
+npm i @internetarchive/donation-monthly-portal
 ```
 
 ## Usage
 ```html
-<script type="module">
-  import '@internetarchive/donation-form';
-  import '@internetarchive/modal-manager';
-  // create an endpoint manager that conforms to `BraintreeEndpointManagerInterface`
-  import BraintreeEndpointManager from  './braintree-endpoint-manager.js';
-
-  // instantiate the endpoint manager
-  const endpointManager = new BraintreeEndpointManager();
-  const formController = document.querySelector('donation-form-controller');
-  const modalManager = document.querySelector('modal-manager');
-  const recaptchaElement = document.querySelector('#recaptcha');
-
-  // pass in all of the dependencies to the <donation-form-controller>
-  formController.endpointManager = endpointManager;
-  formController.modalManager = modalManager;
-  formController.recaptchaElement = recaptchaElement;
-  formController.analyticsHandler = window.archive_analytics;
-</script>
-
-<!--
-  There's some environment-specific styling, depending on the host
-  layout and configuration
--->
-<style>
-  donation-form-controller {
-    min-height: 362px;
-    display: block;
-  }
-
-  body.modal-manager-open {
-    overflow: hidden;
-  }
-
-  modal-manager {
-    display: none;
-    --modalBottomMargin: 10px;
-    --modalWidth: 320px;
-  }
-
-  modal-manager[mode='open'] {
-    display: block;
-  }
-
-  #recaptcha {
-    position: absolute;
-    z-index: 10;
-  }
-</style>
-
-<!--
-  The <donation-form-controller> orchestrates the interactions
-  between the donation-form itself and other dependencies like
-  the modal manager, recaptcha, and some clear DOM dependencies
-  like the PayPal button and Braintree hosted fields.
-
-  The <donation-form> component can be used independently of the
-  controller, but will need something to handle some of the interactions.
- -->
-<donation-form-controller
-  environment='dev/prod'
-  braintreeAuthToken='{braintree_auth_token}'
-  recaptchaSiteKey='{recaptcha_key}'
-  venmoProfileId='{venmo_profile_id}'
-  googlePayMerchantId='{google_merchant_id}'
-  referrer='{referrer}'
-  loggedInUser='{logged_in_user}'>
-</donation-form-controller>
-
-<div id="recaptcha"></div>
-
-<modal-manager>
-  <!--
-    The PayPal button does not work in the shadow DOM so it
-    must be slotted in from the top.
-   -->
-  <div slot="paypal-upsell-button">
-    <div id="paypal-upsell-button"></div>
-  </div>
-</modal-manager>
-```
-
-# Development
-
-## Prerequisite
-```bash
-yarn install
-```
-
-## Start Development Server
-```bash
-yarn run start
-```
-
-## Testing
-```bash
-yarn run test
+please see demo.
 ```
 
-## Linting
 ```bash
-yarn lint
+npm i && npm start
 ```

package/dist/index.d.ts

@@ -1,7 +1,6 @@
-export { BraintreeManagerInterface, BraintreeEndpointManagerInterface, HostingEnvironment, } from './src/braintree-manager/braintree-interfaces';
-export { DonationFormController } from './src/donation-form-controller';
-export { DonationForm } from './src/donation-form';
-export { RecaptchaManager, RecaptchaManagerInterface, } from './src/recaptcha-manager/recaptcha-manager';
-export { PaymentFlowHandlers, PaymentFlowHandlersInterface, } from './src/payment-flow-handlers/payment-flow-handlers';
-export { PaymentClients, PaymentClientsInterface } from './src/braintree-manager/payment-clients';
-export { BraintreeManager } from './src/braintree-manager/braintree-manager';
+export { MonthlyGivingCircle } from './src/monthly-giving-circle';
+export type { APlanUpdate } from './src/monthly-giving-circle';
+export { Receipt } from './src/models/receipt';
+export type { AReceipt } from './src/models/receipt';
+export { MonthlyPlan } from './src/models/plan';
+export type { Plan, BtData } from './src/models/plan';

package/dist/index.js

@@ -1,8 +1,4 @@
-export { HostingEnvironment, } from './src/braintree-manager/braintree-interfaces';
-export { DonationFormController } from './src/donation-form-controller';
-export { DonationForm } from './src/donation-form';
-export { RecaptchaManager, } from './src/recaptcha-manager/recaptcha-manager';
-export { PaymentFlowHandlers, } from './src/payment-flow-handlers/payment-flow-handlers';
-export { PaymentClients } from './src/braintree-manager/payment-clients';
-export { BraintreeManager } from './src/braintree-manager/braintree-manager';
+export { MonthlyGivingCircle } from './src/monthly-giving-circle';
+export { Receipt } from './src/models/receipt';
+export { MonthlyPlan } from './src/models/plan';
 //# sourceMappingURL=index.js.map

package/dist/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../index.ts"],"names":[],"mappings":"AAAA,OAAO,EAGL,kBAAkB,GACnB,MAAM,8CAA8C,CAAC;AAEtD,OAAO,EAAE,sBAAsB,EAAE,MAAM,gCAAgC,CAAC;AACxE,OAAO,EAAE,YAAY,EAAE,MAAM,qBAAqB,CAAC;AACnD,OAAO,EACL,gBAAgB,GAEjB,MAAM,2CAA2C,CAAC;AACnD,OAAO,EACL,mBAAmB,GAEpB,MAAM,mDAAmD,CAAC;AAC3D,OAAO,EAAE,cAAc,EAA2B,MAAM,yCAAyC,CAAC;AAClG,OAAO,EAAE,gBAAgB,EAAE,MAAM,2CAA2C,CAAC","sourcesContent":["export {\n  BraintreeManagerInterface,\n  BraintreeEndpointManagerInterface,\n  HostingEnvironment,\n} from './src/braintree-manager/braintree-interfaces';\n\nexport { DonationFormController } from './src/donation-form-controller';\nexport { DonationForm } from './src/donation-form';\nexport {\n  RecaptchaManager,\n  RecaptchaManagerInterface,\n} from './src/recaptcha-manager/recaptcha-manager';\nexport {\n  PaymentFlowHandlers,\n  PaymentFlowHandlersInterface,\n} from './src/payment-flow-handlers/payment-flow-handlers';\nexport { PaymentClients, PaymentClientsInterface } from './src/braintree-manager/payment-clients';\nexport { BraintreeManager } from './src/braintree-manager/braintree-manager';\n"]}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,mBAAmB,EAAE,MAAM,6BAA6B,CAAC;AAElE,OAAO,EAAE,OAAO,EAAE,MAAM,sBAAsB,CAAC;AAE/C,OAAO,EAAE,WAAW,EAAE,MAAM,mBAAmB,CAAC","sourcesContent":["export { MonthlyGivingCircle } from './src/monthly-giving-circle';\nexport type { APlanUpdate } from './src/monthly-giving-circle';\nexport { Receipt } from './src/models/receipt';\nexport type { AReceipt } from './src/models/receipt';\nexport { MonthlyPlan } from './src/models/plan';\nexport type { Plan, BtData } from './src/models/plan';\n"]}

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

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

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

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

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

@@ -0,0 +1 @@
+{"version":3,"file":"edit-plan-form.js","sourceRoot":"","sources":["../../src/edit-plan-form.ts"],"names":[],"mappings":";AAAA,OAAO,EAAE,UAAU,EAAE,IAAI,EAAE,MAAM,KAAK,CAAC;AACvC,OAAO,EAAE,aAAa,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAC;AAG5D,OAAO,wBAAwB,CAAC;AAChC,OAAO,sBAAsB,CAAC;AAC9B,OAAO,wBAAwB,CAAC;AAKhC,IAAa,gBAAgB,GAA7B,MAAa,gBAAiB,SAAQ,UAAU;IAa9C,gBAAgB;QACd,OAAO,IAAI,CAAC;IACd,CAAC;IAED,aAAa,CAAC,MAA0B;QACtC,MAAM,UAAU,GAAG,IAAI,CAAC,aAAa,CACnC,yBAAyB,CACL,CAAC;QACvB,UAAW,CAAC,aAAa,CAAC,MAAM,CAAC,CAAC;IACpC,CAAC;IAED,WAAW,CAAC,MAA0B;QACpC,MAAM,QAAQ,GAAG,IAAI,CAAC,aAAa,CAAC,kBAAkB,CAAoB,CAAC;QAC3E,QAAS,CAAC,WAAW,CAAC,MAAM,CAAC,CAAC;IAChC,CAAC;IAED,MAAM;QACJ,OAAO,IAAI,CAAA;;;kBAGG,IAAI,CAAC,IAAI;0BACD,CAAC,CAAc,EAAE,EAAE;;YACjC,MAAM,EAAE,MAAM,EAAE,UAAU,EAAE,SAAS,EAAE,UAAU,EAAE,GAAG,CAAC,CAAC,MAAM,CAAC;YAC/D,IAAI,IAAI,CAAC,IAAI,EAAE;gBACb,MAAA,IAAI,CAAC,mBAAmB,qDAAG,IAAI,CAAC,IAAI,EAAE;oBACpC,MAAM;oBACN,UAAU;oBACV,SAAS;oBACT,UAAU;iBACX,CAAC,CAAC;aACJ;QACH,CAAC;;;;wBAIa,CAAC,CAAc,EAAE,EAAE;YAC/B,MAAM,EAAE,OAAO,EAAE,GAAG,CAAC,CAAC,MAAM,CAAC;YAC7B,IAAI,IAAI,CAAC,IAAI,EAAE;gBACb,IAAI,CAAC,aAAa,CAChB,IAAI,WAAW,CAAC,YAAY,EAAE;oBAC5B,MAAM,EAAE,EAAE,IAAI,EAAE,IAAI,CAAC,IAAI,EAAE,OAAO,EAAE;iBACrC,CAAC,CACH,CAAC;aACH;QACH,CAAC;kBACO,IAAI,CAAC,IAAI;;;;kBAIT,IAAI,CAAC,IAAI;wBACH,GAAG,EAAE;YACjB,IAAI,CAAC,aAAa,CAAC,IAAI,KAAK,CAAC,YAAY,CAAC,CAAC,CAAC;QAC9C,CAAC;;;;;oBAKS,IAAI,CAAC,UAAU;;;KAG9B,CAAC;IACJ,CAAC;IAED,UAAU;QACR,OAAO,6EAA6E,CAAC;IACvF,CAAC;CACF,CAAA;AA9E6B;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;8CAAoB;AAEnB;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;6DAQjB;AAXC,gBAAgB;IAD5B,aAAa,CAAC,kBAAkB,CAAC;GACrB,gBAAgB,CA+E5B;SA/EY,gBAAgB","sourcesContent":["import { LitElement, html } from 'lit';\nimport { customElement, property } from 'lit/decorators.js';\n\nimport type { MonthlyPlan } from './models/plan';\nimport './form-sections/amount';\nimport './form-sections/date';\nimport './form-sections/cancel';\nimport type { MGCEditPlanAmount } from './form-sections/amount';\nimport type { MGCEditPlanDate } from './form-sections/date';\n\n@customElement('ia-mgc-edit-plan')\nexport class IauxEditPlanForm extends LitElement {\n  @property({ type: Object }) plan?: MonthlyPlan;\n\n  @property({ type: Object }) updateAmountHandler?: (\n    plan: MonthlyPlan,\n    amountUpdates: {\n      amount: number;\n      baseAmount: number;\n      coverFees: boolean;\n      feeCovered: number;\n    }\n  ) => void;\n\n  createRenderRoot() {\n    return this;\n  }\n\n  amountUpdates(status: 'success' | 'fail') {\n    const amountForm = this.querySelector(\n      'ia-mgc-edit-plan-amount'\n    ) as MGCEditPlanAmount;\n    amountForm!.amountUpdated(status);\n  }\n\n  dateUpdates(status: 'success' | 'fail') {\n    const dateForm = this.querySelector('ia-mgc-edit-date') as MGCEditPlanDate;\n    dateForm!.dateUpdated(status);\n  }\n\n  render() {\n    return html`\n      <section class=\"mgc-edit-plan\">\n        <ia-mgc-edit-plan-amount\n          .plan=${this.plan}\n          @updateAmount=${(e: CustomEvent) => {\n            const { amount, baseAmount, coverFees, feeCovered } = e.detail;\n            if (this.plan) {\n              this.updateAmountHandler?.(this.plan, {\n                amount,\n                baseAmount,\n                coverFees,\n                feeCovered,\n              });\n            }\n          }}\n        ></ia-mgc-edit-plan-amount>\n        <hr />\n        <ia-mgc-edit-date\n          @updateDate=${(e: CustomEvent) => {\n            const { newDate } = e.detail;\n            if (this.plan) {\n              this.dispatchEvent(\n                new CustomEvent('updateDate', {\n                  detail: { plan: this.plan, newDate },\n                })\n              );\n            }\n          }}\n          .plan=${this.plan}\n        ></ia-mgc-edit-date>\n        <hr />\n        <ia-mgc-cancel-plan\n          .plan=${this.plan}\n          @cancelPlan=${() => {\n            this.dispatchEvent(new Event('cancelPlan'));\n          }}\n        ></ia-mgc-cancel-plan>\n        <hr />\n        <p class=\"email-edit-plan\">\n          Need to update your plan further? Please email us at\n          <a href=${this.mailToText}>donations@archive.org</a>.\n        </p>\n      </section>\n    `;\n  }\n\n  mailToText(): string {\n    return `mailto:donations@archive.org?subject=I'd like to update my monthly donation`;\n  }\n}\n"]}

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

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

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

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

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

@@ -0,0 +1 @@
+{"version":3,"file":"amount.js","sourceRoot":"","sources":["../../../src/form-sections/amount.ts"],"names":[],"mappings":"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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?.amount}</span>\n              </ia-mgc-form-section-info>`\n            : nothing}\n          ${this.currentlyEditing ? this.editAmountForm : nothing}\n        </donation-form-section>\n      </section>\n    `;\n  }\n\n  /* External Function that is called by consumer to tell the form there has been data update */\n  async amountUpdated(status: 'success' | 'fail') {\n    this.clearInputField();\n\n    this.updateStatus = status;\n    this.updateMessage =\n      status === 'success' ? 'Amount updated' : 'Failed. Try again.';\n\n    if (status === 'success') {\n      this.closeForm();\n      await this.updateComplete;\n\n      this.updateStatus = status;\n      this.updateMessage = 'Amount updated';\n\n      return;\n    }\n\n    (\n      this.form.querySelector('ia-mgc-button#update-amount') as MGCButton\n    ).isDisabled = false;\n\n    this.captureAmountChanges();\n\n    await this.updateComplete;\n  }\n\n  /* Dispatches amount change request */\n  requestAmountUpdate(e: Event): void {\n    e.preventDefault();\n\n    const input = this.form.querySelector(\n      'input[name=\"amount\"]'\n    ) as HTMLInputElement;\n    this.newAmount = Number(input.value);\n\n    this.captureAmountChanges(this.newAmount);\n\n    console.log('<plan-amount> - update amount', {\n      newValue: this.newAmount,\n      oldValue: this.plan?.plan.amount,\n      display: this.donationPaymentInfo?.amount,\n    });\n    const newAmount = Number(\n      DonationPaymentInfo.calculateTotal(\n        Number(this.donationPaymentInfo?.amount),\n        this.coverFees\n      )\n    );\n    this.dispatchEvent(\n      new CustomEvent('updateAmount', {\n        detail: {\n          plan: this.plan,\n          amount: newAmount,\n          baseAmount: this.donationPaymentInfo?.amount,\n          coverFees: this.coverFees,\n          feeCovered: this.donationPaymentInfo?.feeAmountCovered,\n        },\n      })\n    );\n  }\n\n  /* captures form changes */\n  captureAmountChanges(newAmount?: number) {\n    if (!this.donationPaymentInfo && this.plan) {\n      this.donationPaymentInfo = new DonationPaymentInfo({\n        donationType: DonationType.Monthly,\n        amount: 0,\n        coverFees: true,\n      });\n      return;\n    }\n\n    let newPlan;\n    if (newAmount) {\n      newPlan = new DonationPaymentInfo({\n        donationType: DonationType.Monthly,\n        amount: newAmount,\n        coverFees: true,\n      });\n    } else {\n      const amount = this.donationPaymentInfo\n        ? this.donationPaymentInfo.amount\n        : this.plan!.amount;\n\n      newPlan = new DonationPaymentInfo({\n        donationType: DonationType.Monthly,\n        amount,\n        coverFees: true,\n      });\n    }\n\n    this.donationPaymentInfo = newPlan;\n  }\n\n  closeForm() {\n    this.clearInputField();\n    this.clearStatusMessaging();\n    this.currentlyEditing = false;\n    this.coverFees = false;\n    this.errorMessage = '';\n  }\n\n  clearInputField() {\n    const input = this.form.querySelector(\n      'input[name=\"amount\"]'\n    ) as HTMLInputElement;\n    input.value = '';\n    this.newAmount = 0;\n    this.donationPaymentInfo = undefined;\n  }\n\n  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?.amount}</p>\n          <div>\n            $\n            <input\n              min=\"1\"\n              max=\"9999\"\n              type=\"number\"\n              id=\"amount\"\n              name=\"amount\"\n              ?required=${true}\n              @focus=${() => this.clearStatusMessaging()}\n              @input=${(e: Event) => {\n                const newAmount = Number((e.target as HTMLInputElement).value);\n                this.captureAmountChanges(newAmount);\n                this.newAmount = newAmount;\n              }}\n            />\n            / month\n          </div>\n          <div>\n            <div class=\"checkbox-option-container\">\n              <input\n                type=\"checkbox\"\n                id=\"cover-fees\"\n                tabindex=\"0\"\n                @change=${(e: Event) => {\n                  const input = e.target as HTMLInputElement;\n                  const coverFees = input.checked;\n                  this.coverFees = coverFees;\n                  this.captureAmountChanges();\n                }}\n              />\n              <label for=\"cover-fees\">${this.coveredFeesText}</label>\n            </div>\n            <p>Total: USD $${this.totalAmountWithFees()}</p>\n            <div class=\"cta-container\">\n              <ia-mgc-button\n                class=\"ia-button secondary\"\n                .clickHandler=${(e: Event) => {\n                  e.preventDefault();\n                  this.closeForm();\n                }}\n              >\n                Cancel\n              </ia-mgc-button>\n              <ia-mgc-button\n                id=\"update-amount\"\n                class=\"ia-button primary\"\n                type=\"submit\"\n                .clickHandler=${(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"]}