@internetarchive/donation-monthly-portal 7.1.0 → 7.1.1-payment-method-1

package/dist/index.d.ts

@@ -4,3 +4,4 @@ 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';
+export type { PaymentMethodRequest } from './src/models/payment-method-request';

package/dist/index.js.map

@@ -1 +1 @@
-{"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"]}
+{"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';\nexport type { PaymentMethodRequest } from './src/models/payment-method-request';\n"]}

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

@@ -1,17 +1,36 @@
 import { LitElement } from 'lit';
+import '@internetarchive/donation-form/dist/src/form-elements/badged-input';
+import { PaymentClientsInterface } from '@internetarchive/donation-form/dist/src/braintree-manager/payment-clients.js';
 import type { MonthlyPlan } from './models/plan';
 import './form-sections/amount';
 import './form-sections/date';
 import './form-sections/cancel';
+import './form-sections/payment-method';
 export declare class IauxEditPlanForm extends LitElement {
     plan?: MonthlyPlan;
+    patronEmail: string;
     updateAmountHandler?: (plan: MonthlyPlan, amountUpdates: {
         amount: number;
         baseAmount: number;
         coverFees: boolean;
         feeCovered: number;
     }) => void;
+    paymentConfig: {
+        referrer: string;
+        origin: string;
+        braintreeAuthToken: string;
+        venmoProfileId: string;
+        googlePayMerchantId: string;
+        environment: string;
+        paymentClients: PaymentClientsInterface | undefined;
+        endpointManager: object;
+    };
+    braintreeNumberInput: HTMLDivElement;
+    braintreeExpirationDateInput: HTMLDivElement;
+    braintreeCVVInput: HTMLDivElement;
+    braintreeErrorMessage: HTMLDivElement;
     createRenderRoot(): this;
+    paymentMethodUpdates(status: 'success' | 'fail'): void;
     amountUpdates(status: 'success' | 'fail'): void;
     dateUpdates(status: 'success' | 'fail'): void;
     render(): import("lit").TemplateResult<1>;

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

@@ -1,13 +1,47 @@
 import { __decorate } from "tslib";
 import { LitElement, html } from 'lit';
-import { customElement, property } from 'lit/decorators.js';
+import { customElement, property, query } from 'lit/decorators.js';
+import '@internetarchive/donation-form/dist/src/form-elements/badged-input';
+import { LazyLoaderService } from '@internetarchive/lazy-loader-service';
+import { HostingEnvironment, } from '@internetarchive/donation-form/dist/src/braintree-manager/braintree-interfaces.js';
+import { PaymentClients, } from '@internetarchive/donation-form/dist/src/braintree-manager/payment-clients.js';
 import './form-sections/amount';
 import './form-sections/date';
 import './form-sections/cancel';
+import './form-sections/payment-method';
 let IauxEditPlanForm = class IauxEditPlanForm extends LitElement {
+    constructor() {
+        super(...arguments);
+        this.patronEmail = '';
+        this.paymentConfig = {
+            referrer: '',
+            origin: '',
+            braintreeAuthToken: 'sandbox_x634jsj7_7zybks4ybp63pbmd',
+            venmoProfileId: '1953896702662410263',
+            googlePayMerchantId: '',
+            environment: 'dev',
+            paymentClients: new PaymentClients(new LazyLoaderService(), HostingEnvironment.Development),
+            endpointManager: {
+                // eslint-disable-next-line arrow-body-style, @typescript-eslint/no-unused-vars
+                submitData: async (_request) => {
+                    // eslint-disable-next-line no-debugger
+                    debugger;
+                },
+                // eslint-disable-next-line @typescript-eslint/no-unused-vars
+                donationSuccessful: (_response) => {
+                    // eslint-disable-next-line no-debugger
+                    debugger;
+                },
+            },
+        };
+    }
     createRenderRoot() {
         return this;
     }
+    paymentMethodUpdates(status) {
+        const paymentMethodForm = this.querySelector('ia-mgc-edit-payment-method');
+        paymentMethodForm.paymentMethodUpdated(status);
+    }
     amountUpdates(status) {
         const amountForm = this.querySelector('ia-mgc-edit-plan-amount');
         amountForm.amountUpdated(status);
@@ -35,6 +69,21 @@ let IauxEditPlanForm = class IauxEditPlanForm extends LitElement {
         }}
         ></ia-mgc-edit-plan-amount>
         <hr />
+        <ia-mgc-edit-payment-method
+          .plan=${this.plan}
+          .patronEmail=${this.patronEmail}
+          .paymentConfig=${this.paymentConfig}
+          @UpdatePaymentMethod=${(e) => {
+            const { newPaymentMethodRequest } = e.detail;
+            if (this.plan) {
+                this.dispatchEvent(new CustomEvent('UpdatePaymentMethod', {
+                    detail: { plan: this.plan, newPaymentMethodRequest },
+                }));
+            }
+        }}
+        >
+        </ia-mgc-edit-payment-method>
+        <hr />
         <ia-mgc-edit-date
           @updateDate=${(e) => {
             const { newDate } = e.detail;
@@ -68,9 +117,27 @@ let IauxEditPlanForm = class IauxEditPlanForm extends LitElement {
 __decorate([
     property({ type: Object })
 ], IauxEditPlanForm.prototype, "plan", void 0);
+__decorate([
+    property({ type: String })
+], IauxEditPlanForm.prototype, "patronEmail", void 0);
 __decorate([
     property({ type: Object })
 ], IauxEditPlanForm.prototype, "updateAmountHandler", void 0);
+__decorate([
+    property({ type: Object })
+], IauxEditPlanForm.prototype, "paymentConfig", void 0);
+__decorate([
+    query('#braintree-creditcard')
+], IauxEditPlanForm.prototype, "braintreeNumberInput", void 0);
+__decorate([
+    query('#braintree-expiration')
+], IauxEditPlanForm.prototype, "braintreeExpirationDateInput", void 0);
+__decorate([
+    query('#braintree-cvv')
+], IauxEditPlanForm.prototype, "braintreeCVVInput", void 0);
+__decorate([
+    query('#braintree-error-message')
+], IauxEditPlanForm.prototype, "braintreeErrorMessage", void 0);
 IauxEditPlanForm = __decorate([
     customElement('ia-mgc-edit-plan')
 ], IauxEditPlanForm);

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

@@ -1 +1 @@
-{"version":3,"file":"edit-plan-form.js","sourceRoot":"","sources":["../../src/edit-plan-form.ts"],"names":[],"mappings":";AAAA,OAAO,EAAE,UAAU,EAAE,IAAI,EAAE,MAAM,KAAK,CAAC;AACvC,OAAO,EAAE,aAAa,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAC;AAG5D,OAAO,wBAAwB,CAAC;AAChC,OAAO,sBAAsB,CAAC;AAC9B,OAAO,wBAAwB,CAAC;AAKzB,IAAM,gBAAgB,GAAtB,MAAM,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,CAAC;gBACd,MAAA,IAAI,CAAC,mBAAmB,qDAAG,IAAI,CAAC,IAAI,EAAE;oBACpC,MAAM;oBACN,UAAU;oBACV,SAAS;oBACT,UAAU;iBACX,CAAC,CAAC;YACL,CAAC;QACH,CAAC;;;;wBAIa,CAAC,CAAc,EAAE,EAAE;YAC/B,MAAM,EAAE,OAAO,EAAE,GAAG,CAAC,CAAC,MAAM,CAAC;YAC7B,IAAI,IAAI,CAAC,IAAI,EAAE,CAAC;gBACd,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;YACJ,CAAC;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,EAAE;;;KAGhC,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","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"]}
+{"version":3,"file":"edit-plan-form.js","sourceRoot":"","sources":["../../src/edit-plan-form.ts"],"names":[],"mappings":"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","sourcesContent":["import { LitElement, html } from 'lit';\nimport { customElement, property, query } from 'lit/decorators.js';\n\nimport '@internetarchive/donation-form/dist/src/form-elements/badged-input';\n\nimport { LazyLoaderService } from '@internetarchive/lazy-loader-service';\nimport {\n  BraintreeEndpointManagerInterface,\n  HostingEnvironment,\n} from '@internetarchive/donation-form/dist/src/braintree-manager/braintree-interfaces.js';\nimport {\n  PaymentClients,\n  PaymentClientsInterface,\n} from '@internetarchive/donation-form/dist/src/braintree-manager/payment-clients.js';\nimport type { DonationRequest } from '@internetarchive/donation-form-data-models';\n\nimport type { MonthlyPlan } from './models/plan';\nimport './form-sections/amount';\nimport './form-sections/date';\nimport './form-sections/cancel';\nimport './form-sections/payment-method';\nimport type { MGCEditPlanAmount } from './form-sections/amount';\nimport type { MGCEditPlanDate } from './form-sections/date';\nimport type { MGCEditPaymentMethod } from './form-sections/payment-method';\n\n@customElement('ia-mgc-edit-plan')\nexport class IauxEditPlanForm extends LitElement {\n  @property({ type: Object }) plan?: MonthlyPlan;\n\n  @property({ type: String }) patronEmail: string = '';\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  @property({ type: Object }) paymentConfig: {\n    referrer: string;\n    origin: string;\n    braintreeAuthToken: string;\n    venmoProfileId: string;\n    googlePayMerchantId: string;\n    environment: string;\n    paymentClients: PaymentClientsInterface | undefined;\n    endpointManager: object;\n  } = {\n    referrer: '',\n    origin: '',\n    braintreeAuthToken: 'sandbox_x634jsj7_7zybks4ybp63pbmd',\n    venmoProfileId: '1953896702662410263',\n    googlePayMerchantId: '',\n    environment: 'dev',\n    paymentClients: new PaymentClients(\n      new LazyLoaderService(),\n      HostingEnvironment.Development,\n    ),\n    endpointManager: {\n      // eslint-disable-next-line arrow-body-style, @typescript-eslint/no-unused-vars\n      submitData: async (_request: DonationRequest) => {\n        // eslint-disable-next-line no-debugger\n        debugger;\n      },\n      // eslint-disable-next-line @typescript-eslint/no-unused-vars\n      donationSuccessful: (_response: any) => {\n        // eslint-disable-next-line no-debugger\n        debugger;\n      },\n    } as unknown as BraintreeEndpointManagerInterface,\n  };\n\n  @query('#braintree-creditcard') braintreeNumberInput!: HTMLDivElement;\n\n  @query('#braintree-expiration') braintreeExpirationDateInput!: HTMLDivElement;\n\n  @query('#braintree-cvv') braintreeCVVInput!: HTMLDivElement;\n\n  @query('#braintree-error-message') braintreeErrorMessage!: HTMLDivElement;\n\n  createRenderRoot() {\n    return this;\n  }\n\n  paymentMethodUpdates(status: 'success' | 'fail') {\n    const paymentMethodForm = this.querySelector(\n      'ia-mgc-edit-payment-method',\n    ) as MGCEditPaymentMethod;\n    paymentMethodForm!.paymentMethodUpdated(status);\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-payment-method\n          .plan=${this.plan}\n          .patronEmail=${this.patronEmail}\n          .paymentConfig=${this.paymentConfig}\n          @UpdatePaymentMethod=${(e: CustomEvent) => {\n            const { newPaymentMethodRequest } = e.detail;\n            if (this.plan) {\n              this.dispatchEvent(\n                new CustomEvent('UpdatePaymentMethod', {\n                  detail: { plan: this.plan, newPaymentMethodRequest },\n                }),\n              );\n            }\n          }}\n        >\n        </ia-mgc-edit-payment-method>\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.js

@@ -54,7 +54,9 @@ let MGCEditPlanAmount = class MGCEditPlanAmount extends LitElement {
         this.clearInputField();
         this.updateStatus = status;
         this.updateMessage =
-            status === 'success' ? 'Amount updated' : 'Failed. Try again.';
+            status === 'success'
+                ? 'Amount updated'
+                : 'Failed to update date, please try again';
         if (status === 'success') {
             this.closeForm();
             await this.updateComplete;

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

@@ -1 +1 @@
-{"version":3,"file":"amount.js","sourceRoot":"","sources":["../../../src/form-sections/amount.ts"],"names":[],"mappings":";AAAA,OAAO,EACL,UAAU,EACV,IAAI,EAEJ,OAAO,EACP,GAAG,GAEJ,MAAM,KAAK,CAAC;AACb,OAAO,EAAE,aAAa,EAAE,QAAQ,EAAE,KAAK,EAAE,MAAM,mBAAmB,CAAC;AACnE,OAAO,wCAAwC,CAAC;AAChD,OAAO,EACL,mBAAmB,EACnB,YAAY,GACb,MAAM,4CAA4C,CAAC;AAGpD,OAAO,yCAAyC,CAAC;AACjD,OAAO,8BAA8B,CAAC;AAEtC,OAAO,qCAAqC,CAAC;AAGtC,IAAM,iBAAiB,GAAvB,MAAM,iBAAkB,SAAQ,UAAU;IAA1C;;QAMuB,cAAS,GAAW,CAAC,CAAC;QAEN,qBAAgB,GAAY,KAAK,CAAC;QAEjD,cAAS,GAAY,KAAK,CAAC;QAE5B,kBAAa,GAAW,EAAE,CAAC;QAE3B,iBAAY,GAAW,EAAE,CAAC;QAE1B,iBAAY,GAA4B,EAAE,CAAC;IA6TzE,CAAC;IAzTC,OAAO,CAAC,OAAuB;QAC7B,IAAI,OAAO,CAAC,GAAG,CAAC,MAAM,CAAC,IAAI,IAAI,CAAC,IAAI,EAAE,CAAC;YACrC,IAAI,CAAC,oBAAoB,EAAE,CAAC;QAC9B,CAAC;QACD,IAAI,OAAO,CAAC,GAAG,CAAC,WAAW,CAAC,EAAE,CAAC;YAC7B,IAAI,CAAC,oBAAoB,EAAE,CAAC;QAC9B,CAAC;QACD,IAAI,OAAO,CAAC,GAAG,CAAC,kBAAkB,CAAC,IAAI,IAAI,CAAC,gBAAgB,EAAE,CAAC;YAC7D,IAAI,CAAC,IAAI,CAAC,KAAK,EAAE,CAAC;QACpB,CAAC;QAED,IAAI,OAAO,CAAC,GAAG,CAAC,qBAAqB,CAAC,IAAI,CAAC,IAAI,CAAC,mBAAmB,EAAE,CAAC;YACpE,IAAI,CAAC,oBAAoB,EAAE,CAAC;QAC9B,CAAC;IACH,CAAC;IAES,MAAM;;QACd,OAAO,IAAI,CAAA;;;YAGH,CAAC,IAAI,CAAC,gBAAgB;YACtB,CAAC,CAAC,IAAI,CAAA;oCACkB,GAAG,EAAE;gBACvB,IAAI,CAAC,gBAAgB,GAAG,IAAI,CAAC;gBAC7B,IAAI,CAAC,oBAAoB,EAAE,CAAC;YAC9B,CAAC;8BACa,MAAA,IAAI,CAAC,IAAI,0CAAE,eAAe;0CACd;YAC9B,CAAC,CAAC,OAAO;YACT,IAAI,CAAC,gBAAgB,CAAC,CAAC,CAAC,IAAI,CAAC,cAAc,CAAC,CAAC,CAAC,OAAO;;;KAG5D,CAAC;IACJ,CAAC;IAED,8FAA8F;IAC9F,KAAK,CAAC,aAAa,CAAC,MAA0B;QAC5C,IAAI,CAAC,eAAe,EAAE,CAAC;QAEvB,IAAI,CAAC,YAAY,GAAG,MAAM,CAAC;QAC3B,IAAI,CAAC,aAAa;YAChB,MAAM,KAAK,SAAS,CAAC,CAAC,CAAC,gBAAgB,CAAC,CAAC,CAAC,oBAAoB,CAAC;QAEjE,IAAI,MAAM,KAAK,SAAS,EAAE,CAAC;YACzB,IAAI,CAAC,SAAS,EAAE,CAAC;YACjB,MAAM,IAAI,CAAC,cAAc,CAAC;YAE1B,IAAI,CAAC,YAAY,GAAG,MAAM,CAAC;YAC3B,IAAI,CAAC,aAAa,GAAG,gBAAgB,CAAC;YAEtC,OAAO;QACT,CAAC;QAGC,IAAI,CAAC,IAAI,CAAC,aAAa,CAAC,6BAA6B,CACtD,CAAC,UAAU,GAAG,KAAK,CAAC;QAErB,IAAI,CAAC,oBAAoB,EAAE,CAAC;QAE5B,MAAM,IAAI,CAAC,cAAc,CAAC;IAC5B,CAAC;IAED,sCAAsC;IACtC,mBAAmB,CAAC,CAAQ;;QAC1B,CAAC,CAAC,cAAc,EAAE,CAAC;QAEnB,MAAM,KAAK,GAAG,IAAI,CAAC,IAAI,CAAC,aAAa,CACnC,sBAAsB,CACH,CAAC;QACtB,IAAI,CAAC,SAAS,GAAG,MAAM,CAAC,KAAK,CAAC,KAAK,CAAC,CAAC;QAErC,IAAI,CAAC,oBAAoB,CAAC,IAAI,CAAC,SAAS,CAAC,CAAC;QAE1C,OAAO,CAAC,GAAG,CAAC,+BAA+B,EAAE;YAC3C,QAAQ,EAAE,IAAI,CAAC,SAAS;YACxB,QAAQ,EAAE,MAAA,IAAI,CAAC,IAAI,0CAAE,IAAI,CAAC,MAAM;YAChC,OAAO,EAAE,MAAA,IAAI,CAAC,mBAAmB,0CAAE,MAAM;SAC1C,CAAC,CAAC;QACH,MAAM,SAAS,GAAG,MAAM,CACtB,mBAAmB,CAAC,cAAc,CAChC,MAAM,CAAC,MAAA,IAAI,CAAC,mBAAmB,0CAAE,MAAM,CAAC,EACxC,IAAI,CAAC,SAAS,CACf,CACF,CAAC;QACF,IAAI,CAAC,aAAa,CAChB,IAAI,WAAW,CAAC,cAAc,EAAE;YAC9B,MAAM,EAAE;gBACN,IAAI,EAAE,IAAI,CAAC,IAAI;gBACf,MAAM,EAAE,SAAS;gBACjB,UAAU,EAAE,MAAA,IAAI,CAAC,mBAAmB,0CAAE,MAAM;gBAC5C,SAAS,EAAE,IAAI,CAAC,SAAS;gBACzB,UAAU,EAAE,MAAA,IAAI,CAAC,mBAAmB,0CAAE,gBAAgB;aACvD;SACF,CAAC,CACH,CAAC;IACJ,CAAC;IAED,2BAA2B;IAC3B,oBAAoB,CAAC,SAAkB;QACrC,IAAI,CAAC,IAAI,CAAC,mBAAmB,IAAI,IAAI,CAAC,IAAI,EAAE,CAAC;YAC3C,IAAI,CAAC,mBAAmB,GAAG,IAAI,mBAAmB,CAAC;gBACjD,YAAY,EAAE,YAAY,CAAC,OAAO;gBAClC,MAAM,EAAE,CAAC;gBACT,SAAS,EAAE,IAAI;aAChB,CAAC,CAAC;YACH,OAAO;QACT,CAAC;QAED,IAAI,OAAO,CAAC;QACZ,IAAI,SAAS,EAAE,CAAC;YACd,OAAO,GAAG,IAAI,mBAAmB,CAAC;gBAChC,YAAY,EAAE,YAAY,CAAC,OAAO;gBAClC,MAAM,EAAE,SAAS;gBACjB,SAAS,EAAE,IAAI;aAChB,CAAC,CAAC;QACL,CAAC;aAAM,CAAC;YACN,MAAM,MAAM,GAAG,IAAI,CAAC,mBAAmB;gBACrC,CAAC,CAAC,IAAI,CAAC,mBAAmB,CAAC,MAAM;gBACjC,CAAC,CAAC,IAAI,CAAC,IAAK,CAAC,MAAM,CAAC;YAEtB,OAAO,GAAG,IAAI,mBAAmB,CAAC;gBAChC,YAAY,EAAE,YAAY,CAAC,OAAO;gBAClC,MAAM;gBACN,SAAS,EAAE,IAAI;aAChB,CAAC,CAAC;QACL,CAAC;QAED,IAAI,CAAC,mBAAmB,GAAG,OAAO,CAAC;IACrC,CAAC;IAED,SAAS;QACP,IAAI,CAAC,eAAe,EAAE,CAAC;QACvB,IAAI,CAAC,oBAAoB,EAAE,CAAC;QAC5B,IAAI,CAAC,gBAAgB,GAAG,KAAK,CAAC;QAC9B,IAAI,CAAC,SAAS,GAAG,KAAK,CAAC;QACvB,IAAI,CAAC,YAAY,GAAG,EAAE,CAAC;IACzB,CAAC;IAED,eAAe;QACb,MAAM,KAAK,GAAG,IAAI,CAAC,IAAI,CAAC,aAAa,CACnC,sBAAsB,CACH,CAAC;QACtB,KAAK,CAAC,KAAK,GAAG,EAAE,CAAC;QACjB,IAAI,CAAC,SAAS,GAAG,CAAC,CAAC;QACnB,IAAI,CAAC,mBAAmB,GAAG,SAAS,CAAC;IACvC,CAAC;IAED,YAAY,CAAC,CAAQ,EAAE,QAAoB;;QACzC,CAAC,CAAC,cAAc,EAAE,CAAC;QACnB,IAAI,CAAC,oBAAoB,EAAE,CAAC;QAE5B,MAAM,MAAM,GACV,QAAQ,aAAR,QAAQ,cAAR,QAAQ,GAAK,IAAI,CAAC,IAAI,CAAC,aAAa,CAAC,gBAAgB,CAAe,CAAC;QACvE,IAAI,MAAM;YAAE,IAAI,CAAC,iBAAiB,CAAC,MAAM,CAAC,CAAC;QAE3C,IAAI,CAAC,IAAI,CAAC,SAAS,EAAE,CAAC;YACpB,IAAI,CAAC,YAAY,GAAG,2BAA2B,CAAC;YAChD,IAAI,MAAM;gBAAE,MAAM,CAAC,UAAU,GAAG,KAAK,CAAC;YACtC,OAAO;QACT,CAAC;QAED,MAAM,KAAK,GAAG,IAAI,CAAC,IAAI,CAAC,aAAa,CACnC,sBAAsB,CACH,CAAC;QACtB,MAAM,eAAe,GAAG,MAAA,MAAM,CAAC,KAAK,CAAC,KAAK,CAAC,mCAAI,CAAC,CAAC;QACjD,MAAM,YAAY,GAAG,eAAe,GAAG,CAAC,CAAC;QACzC,MAAM,aAAa,GAAG,eAAe,IAAI,IAAI,CAAC;QAE9C,IAAI,YAAY,EAAE,CAAC;YACjB,IAAI,CAAC,YAAY,GAAG,6BAA6B,CAAC;QACpD,CAAC;QAED,IAAI,aAAa,EAAE,CAAC;YAClB,IAAI,CAAC,YAAY;gBACf,4GAA4G,CAAC;QACjH,CAAC;QAED,IAAI,aAAa,IAAI,YAAY,EAAE,CAAC;YAClC,IAAI,MAAM;gBAAE,IAAI,CAAC,iBAAiB,CAAC,MAAM,CAAC,CAAC;YAC3C,OAAO;QACT,CAAC;QAED,IAAI,CAAC,mBAAmB,CAAC,CAAC,CAAC,CAAC;IAC9B,CAAC;IAEO,KAAK,CAAC,iBAAiB,CAAC,QAAmB;QACjD,6CAA6C;QAC5C,QAAsB,CAAC,UAAU,GAAG,IAAI,CAAC;QAC1C,MAAM,CAAA,QAAQ,aAAR,QAAQ,uBAAR,QAAQ,CAAE,cAAc,CAAA,CAAC;IACjC,CAAC;IAED,KAAK,CAAC,oBAAoB;QACxB,IAAI,CAAC,YAAY,GAAG,EAAE,CAAC;QACvB,IAAI,CAAC,aAAa,GAAG,EAAE,CAAC;QACxB,IAAI,CAAC,YAAY,GAAG,EAAE,CAAC;QACvB,MAAM,IAAI,CAAC,cAAc,CAAC;IAC5B,CAAC;IAED,aAAa;IACb,mBAAmB;QACjB,IAAI,IAAI,CAAC,SAAS,KAAK,CAAC,EAAE,CAAC;YACzB,OAAO,CAAC,CAAC;QACX,CAAC;QAED,OAAO,mBAAmB,CAAC,cAAc,CAAC,IAAI,CAAC,SAAS,EAAE,IAAI,CAAC,SAAS,CAAC,CAAC;IAC5E,CAAC;IAED,IAAI,eAAe;;QACjB,OAAO,wBAAwB,MAAA,IAAI,CAAC,mBAAmB,0CAAE,gBAAgB,iBAAiB,CAAC;IAC7F,CAAC;IAED,IAAI,cAAc;;QAChB,OAAO,IAAI,CAAA;;;;oBAIK,CAAC,CAAQ,EAAE,EAAE,CAAC,IAAI,CAAC,YAAY,CAAC,CAAC,CAAC;;yCAEb,MAAA,IAAI,CAAC,IAAI,0CAAE,eAAe;;;;;;;;;0BASzC,IAAI;uBACP,GAAG,EAAE,CAAC,IAAI,CAAC,oBAAoB,EAAE;uBACjC,CAAC,CAAQ,EAAE,EAAE;YACpB,MAAM,SAAS,GAAG,MAAM,CAAE,CAAC,CAAC,MAA2B,CAAC,KAAK,CAAC,CAAC;YAC/D,IAAI,CAAC,oBAAoB,CAAC,SAAS,CAAC,CAAC;YACrC,IAAI,CAAC,SAAS,GAAG,SAAS,CAAC;QAC7B,CAAC;;;;;;;;;;0BAUW,CAAC,CAAQ,EAAE,EAAE;YACrB,MAAM,KAAK,GAAG,CAAC,CAAC,MAA0B,CAAC;YAC3C,MAAM,SAAS,GAAG,KAAK,CAAC,OAAO,CAAC;YAChC,IAAI,CAAC,SAAS,GAAG,SAAS,CAAC;YAC3B,IAAI,CAAC,oBAAoB,EAAE,CAAC;QAC9B,CAAC;;wCAEuB,IAAI,CAAC,eAAe;;6BAE/B,IAAI,CAAC,mBAAmB,EAAE;;;;gCAIvB,CAAC,CAAQ,EAAE,EAAE;YAC3B,CAAC,CAAC,cAAc,EAAE,CAAC;YACnB,IAAI,CAAC,SAAS,EAAE,CAAC;QACnB,CAAC;;;;;;;;8BAQa,CAAC,IAAI,CAAC,SAAS;gCACb,CAAC,CAAQ,EAAE,QAAmB,EAAE,EAAE,CAChD,IAAI,CAAC,YAAY,CAAC,CAAC,EAAE,QAAQ,CAAC;;;;8CAIF,IAAI,CAAC,YAAY;mBAC5C,IAAI,CAAC,aAAa;;;;6BAIR,IAAI,CAAC,YAAY;;;KAGzC,CAAC;IACJ,CAAC;;AAEM,wBAAM,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA4BlB,AA5BY,CA4BX;AA3U0B;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;+CAAoB;AAGnB;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;8DAA2C;AAE1C;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;oDAAuB;AAEN;IAA3C,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;2DAAmC;AAEjD;IAA5B,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,CAAC;oDAA4B;AAE5B;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;wDAA4B;AAE3B;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;uDAA2B;AAE1B;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;uDAA4C;AAExD;IAAd,KAAK,CAAC,MAAM,CAAC;+CAAwB;AAlB3B,iBAAiB;IAD7B,aAAa,CAAC,yBAAyB,CAAC;GAC5B,iBAAiB,CA6U7B","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' ? '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?.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 '../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"]}

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

@@ -1,6 +1,5 @@
 import { LitElement, TemplateResult, PropertyValues, nothing } from 'lit';
 import type { MonthlyPlan } from '../models/plan';
-import '@internetarchive/donation-form/dist/src/form-elements/contact-form/contact-form.js';
 import '@internetarchive/donation-form-section';
 export declare class IauxMgcCancelPlan extends LitElement {
     plan?: MonthlyPlan;

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

@@ -1,7 +1,6 @@
 import { __decorate } from "tslib";
 import { LitElement, html, nothing, css, } from 'lit';
 import { customElement, property, query } from 'lit/decorators.js';
-import '@internetarchive/donation-form/dist/src/form-elements/contact-form/contact-form.js';
 import '@internetarchive/donation-form-section';
 let IauxMgcCancelPlan = class IauxMgcCancelPlan extends LitElement {
     constructor() {

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

@@ -1 +1 @@
-{"version":3,"file":"cancel.js","sourceRoot":"","sources":["../../../src/form-sections/cancel.ts"],"names":[],"mappings":"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","sourcesContent":["import {\n  LitElement,\n  html,\n  TemplateResult,\n  PropertyValues,\n  nothing,\n  css,\n} from 'lit';\nimport { customElement, property, query } from 'lit/decorators.js';\nimport type { MonthlyPlan } from '../models/plan';\n\nimport type { MGCButton } from '../presentational/mgc-button';\nimport '@internetarchive/donation-form/dist/src/form-elements/contact-form/contact-form.js';\n\nimport '@internetarchive/donation-form-section';\n\n@customElement('ia-mgc-cancel-plan')\nexport class IauxMgcCancelPlan extends LitElement {\n  @property({ type: Object }) plan?: MonthlyPlan;\n\n  @property({ type: Boolean, reflect: true }) patronWantsToKeepPlan = true;\n\n  @property({ type: Boolean, reflect: true }) initialCancelRequest = false;\n\n  @query('form') form!: HTMLFormElement;\n\n  updated(changed: PropertyValues) {\n    if (changed.has('plan')) {\n      console.log('plan updated', this.plan);\n    }\n  }\n\n  async cancelThisPlan(e: Event) {\n    e.preventDefault();\n    this.patronWantsToKeepPlan = false;\n    this.dispatchEvent(new Event('cancelPlan'));\n  }\n\n  get formId(): string {\n    return `cancel-donation-form-${this.plan?.id}`;\n  }\n\n  protected render() {\n    if (this.initialCancelRequest) {\n      return this.confirmCancelation;\n    }\n\n    return html`\n      <donation-form-section\n        badgemode=\"hidebadge\"\n        headline=\"Cancel recurring donation (requires confirmation)\"\n      >\n        <div class=\"warning\">\n          <p>\n            You can also pause your recurring donation by setting the next\n            donation date up to 12 months in the future.\n          </p>\n          <ia-mgc-button\n            class=\"link cancel\"\n            .clickHandler=${(e: Event, iaButton: MGCButton) => {\n              // eslint-disable-next-line no-param-reassign\n              iaButton.isDisabled = true;\n              if (this.initialCancelRequest) {\n                this.initialCancelRequest = false;\n                this.patronWantsToKeepPlan = true;\n                return;\n              }\n              this.initialCancelRequest = true;\n            }}\n            >Let's cancel my donation</ia-mgc-button\n          >\n        </div>\n      </donation-form-section>\n\n      ${this.initialCancelRequest ? this.confirmCancelation : nothing}\n    `;\n  }\n\n  get confirmCancelation(): TemplateResult | typeof nothing {\n    return html`\n    <section class=\"cancel-donation\">\n    <donation-form-section badgemode=\"hidebadge\" headline=\"Cancel recurring donation\">\n\n      <ia-mgc-button class='text exit-cancel'  @click=${() => {\n        this.initialCancelRequest = false;\n        this.patronWantsToKeepPlan = true;\n      }}>X</ia-mgc-button>\n\n      <p>Canceling ends your monthly recurring donation to the Internet Archive, effective immediately. You will not be charged moving forward.</p>\n      <p>Canceling does not affect your account or access to the Internet Archive, although you will no longer have access to any of the Monthly Giving Circle perks.</p>\n      <p>If you have any questions regarding donations, contact us at <a href=\"mailto:donations@archive.org\">donations@archive.org</a></p>\n\n      <form id=${this.formId} @submit=${(e: Event) => this.cancelThisPlan(e)}>\n        <div class=\"checkbox-option-container\">\n          <input\n            id=${`confirm-${this.formId}`}\n            type=\"checkbox\"\n            required\n            @change=${async (e: Event) => {\n              e.preventDefault();\n              this.patronWantsToKeepPlan = !(e.target as HTMLInputElement)\n                .checked;\n              await this.updateComplete;\n            }}>\n          <label for=${`confirm-${this.formId}`}><b>I'm sure I want to cancel my subscription</b></label>\n        </div>\n\n        <ia-mgc-button\n          class=\"cancel\"\n          .isDisabled=${this.patronWantsToKeepPlan}\n          id=${`submit-${this.formId}`}\n          type=\"submit\"\n          .clickHandler=${(e: Event, iaButton: MGCButton) => {\n            // eslint-disable-next-line no-param-reassign\n            iaButton.isDisabled = true;\n            this.cancelThisPlan(e);\n          }}\n        >I'm sure I want to cancel my recurring donation.</ia-mgc-button>\n      </form>\n    </section>\n    `;\n  }\n\n  static styles = css`\n    :host {\n      --formSectionTitleFontSize: 1.4rem;\n    }\n    .warning > * {\n      margin: 5px 0;\n    }\n\n    .cancel-donation {\n      display: block;\n      border: 2px solid #d9534f;\n      background-color: #ffeeee;\n    }\n\n    .cancel-donation > * {\n      padding: 5px;\n      position: relative;\n    }\n\n    ia-mgc-button.exit-cancel {\n      --button-border: 1px solid;\n      --button-border-radius: 50%;\n      position: absolute;\n      top: -5px;\n      right: -10px;\n    }\n\n    ia-mgc-button.link.cancel {\n      --link-cancel-color: var(--mgc-warning-color-dark, #bb0505);\n    }\n\n    ia-mgc-button {\n      --button-height: auto;\n    }\n\n    ia-mgc-button > * {\n      text-align: left;\n      text-wrap: wrap;\n    }\n\n    h3 {\n      position: relative;\n    }\n\n    .checkbox-option-container {\n      display: flex;\n      margin: 10px 0;\n    }\n  `;\n}\n"]}
+{"version":3,"file":"cancel.js","sourceRoot":"","sources":["../../../src/form-sections/cancel.ts"],"names":[],"mappings":"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","sourcesContent":["import {\n  LitElement,\n  html,\n  TemplateResult,\n  PropertyValues,\n  nothing,\n  css,\n} from 'lit';\nimport { customElement, property, query } from 'lit/decorators.js';\nimport type { MonthlyPlan } from '../models/plan';\n\nimport type { MGCButton } from '../presentational/mgc-button';\n\nimport '@internetarchive/donation-form-section';\n\n@customElement('ia-mgc-cancel-plan')\nexport class IauxMgcCancelPlan extends LitElement {\n  @property({ type: Object }) plan?: MonthlyPlan;\n\n  @property({ type: Boolean, reflect: true }) patronWantsToKeepPlan = true;\n\n  @property({ type: Boolean, reflect: true }) initialCancelRequest = false;\n\n  @query('form') form!: HTMLFormElement;\n\n  updated(changed: PropertyValues) {\n    if (changed.has('plan')) {\n      console.log('plan updated', this.plan);\n    }\n  }\n\n  async cancelThisPlan(e: Event) {\n    e.preventDefault();\n    this.patronWantsToKeepPlan = false;\n    this.dispatchEvent(new Event('cancelPlan'));\n  }\n\n  get formId(): string {\n    return `cancel-donation-form-${this.plan?.id}`;\n  }\n\n  protected render() {\n    if (this.initialCancelRequest) {\n      return this.confirmCancelation;\n    }\n\n    return html`\n      <donation-form-section\n        badgemode=\"hidebadge\"\n        headline=\"Cancel recurring donation (requires confirmation)\"\n      >\n        <div class=\"warning\">\n          <p>\n            You can also pause your recurring donation by setting the next\n            donation date up to 12 months in the future.\n          </p>\n          <ia-mgc-button\n            class=\"link cancel\"\n            .clickHandler=${(e: Event, iaButton: MGCButton) => {\n              // eslint-disable-next-line no-param-reassign\n              iaButton.isDisabled = true;\n              if (this.initialCancelRequest) {\n                this.initialCancelRequest = false;\n                this.patronWantsToKeepPlan = true;\n                return;\n              }\n              this.initialCancelRequest = true;\n            }}\n            >Let's cancel my donation</ia-mgc-button\n          >\n        </div>\n      </donation-form-section>\n\n      ${this.initialCancelRequest ? this.confirmCancelation : nothing}\n    `;\n  }\n\n  get confirmCancelation(): TemplateResult | typeof nothing {\n    return html`\n    <section class=\"cancel-donation\">\n    <donation-form-section badgemode=\"hidebadge\" headline=\"Cancel recurring donation\">\n\n      <ia-mgc-button class='text exit-cancel'  @click=${() => {\n        this.initialCancelRequest = false;\n        this.patronWantsToKeepPlan = true;\n      }}>X</ia-mgc-button>\n\n      <p>Canceling ends your monthly recurring donation to the Internet Archive, effective immediately. You will not be charged moving forward.</p>\n      <p>Canceling does not affect your account or access to the Internet Archive, although you will no longer have access to any of the Monthly Giving Circle perks.</p>\n      <p>If you have any questions regarding donations, contact us at <a href=\"mailto:donations@archive.org\">donations@archive.org</a></p>\n\n      <form id=${this.formId} @submit=${(e: Event) => this.cancelThisPlan(e)}>\n        <div class=\"checkbox-option-container\">\n          <input\n            id=${`confirm-${this.formId}`}\n            type=\"checkbox\"\n            required\n            @change=${async (e: Event) => {\n              e.preventDefault();\n              this.patronWantsToKeepPlan = !(e.target as HTMLInputElement)\n                .checked;\n              await this.updateComplete;\n            }}>\n          <label for=${`confirm-${this.formId}`}><b>I'm sure I want to cancel my subscription</b></label>\n        </div>\n\n        <ia-mgc-button\n          class=\"cancel\"\n          .isDisabled=${this.patronWantsToKeepPlan}\n          id=${`submit-${this.formId}`}\n          type=\"submit\"\n          .clickHandler=${(e: Event, iaButton: MGCButton) => {\n            // eslint-disable-next-line no-param-reassign\n            iaButton.isDisabled = true;\n            this.cancelThisPlan(e);\n          }}\n        >I'm sure I want to cancel my recurring donation.</ia-mgc-button>\n      </form>\n    </section>\n    `;\n  }\n\n  static styles = css`\n    :host {\n      --formSectionTitleFontSize: 1.4rem;\n    }\n    .warning > * {\n      margin: 5px 0;\n    }\n\n    .cancel-donation {\n      display: block;\n      border: 2px solid #d9534f;\n      background-color: #ffeeee;\n    }\n\n    .cancel-donation > * {\n      padding: 5px;\n      position: relative;\n    }\n\n    ia-mgc-button.exit-cancel {\n      --button-border: 1px solid;\n      --button-border-radius: 50%;\n      position: absolute;\n      top: -5px;\n      right: -10px;\n    }\n\n    ia-mgc-button.link.cancel {\n      --link-cancel-color: var(--mgc-warning-color-dark, #bb0505);\n    }\n\n    ia-mgc-button {\n      --button-height: auto;\n    }\n\n    ia-mgc-button > * {\n      text-align: left;\n      text-wrap: wrap;\n    }\n\n    h3 {\n      position: relative;\n    }\n\n    .checkbox-option-container {\n      display: flex;\n      margin: 10px 0;\n    }\n  `;\n}\n"]}

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

@@ -158,8 +158,8 @@ let MGCEditPlanDate = class MGCEditPlanDate extends LitElement {
             };
         }
         // Check if there has been a donation in the last month
-        const lastDonationDate = ((_b = this.plan) === null || _b === void 0 ? void 0 : _b.payment.lastBillingDate.date)
-            ? new Date((_c = this.plan) === null || _c === void 0 ? void 0 : _c.payment.lastBillingDate.date)
+        const lastDonationDate = ((_b = this.plan) === null || _b === void 0 ? void 0 : _b.payment) && ((_c = this.plan.payment.lastBillingDate) === null || _c === void 0 ? void 0 : _c.date)
+            ? new Date(this.plan.payment.lastBillingDate.date)
             : null;
         if (lastDonationDate) {
             const lastDonationMonth = lastDonationDate.getMonth();

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

@@ -1 +1 @@
-{"version":3,"file":"date.js","sourceRoot":"","sources":["../../../src/form-sections/date.ts"],"names":[],"mappings":";AAAA,OAAO,EACL,UAAU,EACV,IAAI,EAEJ,OAAO,EACP,GAAG,GAEJ,MAAM,KAAK,CAAC;AACb,OAAO,EAAE,aAAa,EAAE,QAAQ,EAAE,KAAK,EAAE,MAAM,mBAAmB,CAAC;AACnE,OAAO,wCAAwC,CAAC;AAGhD,OAAO,8BAA8B,CAAC;AAEtC,OAAO,qCAAqC,CAAC;AAC7C,OAAO,yCAAyC,CAAC;AAUjD,IAAK,wBAMJ;AAND,WAAK,wBAAwB;IAC3B,0FAA8D,CAAA;IAC9D,8EAAkD,CAAA;IAClD,sIAA0G,CAAA;IAC1G,sGAA0E,CAAA;IAC1E,uDAA2B,CAAA;AAC7B,CAAC,EANI,wBAAwB,KAAxB,wBAAwB,QAM5B;AAEM,IAAM,eAAe,GAArB,MAAM,eAAgB,SAAQ,UAAU;IAAxC;;QAKuC,qBAAgB,GAAY,KAAK,CAAC;QAEjD,iBAAY,GAAY,KAAK,CAAC;QAE/B,kBAAa,GAAW,EAAE,CAAC;QAE3B,iBAAY,GAAW,EAAE,CAAC;QAE1B,mBAAc,GAAW,EAAE,CAAC;QAE5B,iBAAY,GAA4B,EAAE,CAAC;IAyVzE,CAAC;IAhVC,UAAU,CAAC,OAAuB;QAChC,IAAI,IAAI,CAAC,SAAS,IAAI,OAAO,CAAC,GAAG,CAAC,MAAM,CAAC,IAAI,IAAI,CAAC,IAAI,EAAE,CAAC;YACvD,IAAI,CAAC,SAAS,CAAC,YAAY,CAAC,KAAK,EAAE,IAAI,CAAC,OAAO,CAAC,CAAC;YACjD,IAAI,CAAC,SAAS,CAAC,YAAY,CAAC,KAAK,EAAE,IAAI,CAAC,OAAO,CAAC,CAAC;QACnD,CAAC;IACH,CAAC;IAED,OAAO,CAAC,OAAuB;QAC7B,IAAI,OAAO,CAAC,GAAG,CAAC,kBAAkB,CAAC,IAAI,IAAI,CAAC,gBAAgB,EAAE,CAAC;YAC7D,IAAI,CAAC,SAAS,CAAC,KAAK,EAAE,CAAC;QACzB,CAAC;IACH,CAAC;IAES,MAAM;;QACd,OAAO,IAAI,CAAA;;;;;;YAMH,CAAC,IAAI,CAAC,gBAAgB;YACtB,CAAC,CAAC,IAAI,CAAA;oCACkB,GAAG,EAAE;gBACvB,IAAI,CAAC,gBAAgB,GAAG,IAAI,CAAC;gBAC7B,IAAI,CAAC,oBAAoB,EAAE,CAAC;YAC9B,CAAC;yBACQ,MAAA,IAAI,CAAC,IAAI,0CAAE,qBAAqB;0CACf;YAC9B,CAAC,CAAC,OAAO;YACT,IAAI,CAAC,gBAAgB,CAAC,CAAC,CAAC,IAAI,CAAC,YAAY,CAAC,CAAC,CAAC,OAAO;;;KAG1D,CAAC;IACJ,CAAC;IAED,8FAA8F;IAC9F,KAAK,CAAC,WAAW,CAAC,MAA0B;QAC1C,IAAI,CAAC,eAAe,EAAE,CAAC;QAEvB,IAAI,CAAC,YAAY,GAAG,MAAM,CAAC;QAC3B,IAAI,CAAC,aAAa;YAChB,MAAM,KAAK,SAAS;gBAClB,CAAC,CAAC,cAAc;gBAChB,CAAC,CAAC,yCAAyC,CAAC;QAEhD,IAAI,MAAM,KAAK,SAAS,EAAE,CAAC;YACzB,IAAI,CAAC,SAAS,EAAE,CAAC;YACjB,MAAM,IAAI,CAAC,cAAc,CAAC;YAC1B,OAAO;QACT,CAAC;QAED,IAAI,CAAC,YAAY,GAAG,KAAK,CAAC;QAC1B,MAAM,IAAI,CAAC,cAAc,CAAC;IAC5B,CAAC;IAED,yCAAyC;IACzC,iBAAiB,CAAC,CAAQ;QACxB,CAAC,CAAC,cAAc,EAAE,CAAC;QACnB,IAAI,CAAC,aAAa,CAChB,IAAI,WAAW,CAAC,YAAY,EAAE;YAC5B,MAAM,EAAE;gBACN,IAAI,EAAE,IAAI,CAAC,IAAI;gBACf,OAAO,EAAE,IAAI,CAAC,OAAO;aACtB;SACF,CAAC,CACH,CAAC;IACJ,CAAC;IAED,SAAS;QACP,IAAI,CAAC,eAAe,EAAE,CAAC;QACvB,IAAI,CAAC,oBAAoB,EAAE,CAAC;QAC5B,IAAI,CAAC,gBAAgB,GAAG,KAAK,CAAC;QAC9B,IAAI,CAAC,YAAY,GAAG,KAAK,CAAC;IAC5B,CAAC;IAED,eAAe;QACb,IAAI,CAAC,SAAS,CAAC,KAAK,GAAG,EAAE,CAAC;QAC1B,IAAI,CAAC,OAAO,GAAG,SAAS,CAAC;IAC3B,CAAC;IAED,oBAAoB,CAAC,IAAU;QAC7B,MAAM,IAAI,GAAG,IAAI,CAAC,WAAW,EAAE,CAAC;QAChC,MAAM,KAAK,GAAG,MAAM,CAAC,IAAI,CAAC,QAAQ,EAAE,GAAG,CAAC,CAAC,CAAC,QAAQ,CAAC,CAAC,EAAE,GAAG,CAAC,CAAC,CAAC,uBAAuB;QACnF,MAAM,OAAO,GAAG,MAAM,CAAC,IAAI,CAAC,OAAO,EAAE,CAAC,CAAC,QAAQ,CAAC,CAAC,EAAE,GAAG,CAAC,CAAC;QACxD,OAAO,GAAG,IAAI,IAAI,KAAK,IAAI,OAAO,EAAE,CAAC;IACvC,CAAC;IAED,KAAK,CAAC,oBAAoB;QACxB,IAAI,CAAC,YAAY,GAAG,EAAE,CAAC;QACvB,IAAI,CAAC,cAAc,GAAG,EAAE,CAAC;QACzB,IAAI,CAAC,aAAa,GAAG,EAAE,CAAC;QACxB,IAAI,CAAC,YAAY,GAAG,EAAE,CAAC;QACvB,MAAM,IAAI,CAAC,cAAc,CAAC;IAC5B,CAAC;IAED,6CAA6C;IAC7C,kBAAkB,CAAC,UAAkB;;QAInC,IAAI,CAAC,UAAU,EAAE,CAAC;YAChB,OAAO;gBACL,KAAK,EAAE,KAAK;gBACZ,SAAS,EAAE,cAAc;aAC1B,CAAC;QACJ,CAAC;QAED,IAAI,SAAS,CAAC;QACd,IAAI,CAAC;YACH,SAAS,GAAG,IAAI,IAAI,CAAC,GAAG,UAAU,WAAW,CAAC,CAAC;QACjD,CAAC;QAAC,OAAO,KAAK,EAAE,CAAC;YACf,OAAO;gBACL,KAAK,EAAE,KAAK;gBACZ,SAAS,EAAE,cAAc;aAC1B,CAAC;QACJ,CAAC;QAED,6CAA6C;QAC7C,MAAM,KAAK,GAAG,IAAI,IAAI,EAAE,CAAC;QACzB,KAAK,CAAC,QAAQ,CAAC,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE,CAAC,CAAC,CAAC;QAC3B,MAAM,QAAQ,GAAG,IAAI,IAAI,CAAC,KAAK,CAAC,CAAC;QACjC,QAAQ,CAAC,OAAO,CAAC,KAAK,CAAC,OAAO,EAAE,GAAG,CAAC,CAAC,CAAC,CAAC,kBAAkB;QAEzD,MAAM,UAAU,GAAG,IAAI,IAAI,CAAC,SAAS,CAAC,CAAC;QACvC,UAAU,CAAC,QAAQ,CAAC,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE,CAAC,CAAC,CAAC;QAEhC,8CAA8C;QAC9C,MAAM,iBAAiB,GAAG,CAAA,MAAA,IAAI,CAAC,IAAI,0CAAE,eAAe;YAClD,CAAC,CAAC,IAAI,CAAC,oBAAoB,CAAC,IAAI,IAAI,CAAC,IAAI,CAAC,IAAI,CAAC,eAAe,CAAC,CAAC;gBAC9D,IAAI,CAAC,oBAAoB,CAAC,UAAU,CAAC;YACvC,CAAC,CAAC,KAAK,CAAC;QACV,IAAI,iBAAiB,EAAE,CAAC;YACtB,OAAO;gBACL,KAAK,EAAE,KAAK;gBACZ,SAAS,EAAE,wBAAwB;aACpC,CAAC;QACJ,CAAC;QAED,IAAI,UAAU,GAAG,KAAK,EAAE,CAAC;YACvB,OAAO;gBACL,KAAK,EAAE,KAAK;gBACZ,SAAS,EAAE,gBAAgB;aAC5B,CAAC;QACJ,CAAC;QAED,qDAAqD;QACrD,MAAM,mBAAmB,GAAG,IAAI,IAAI,CAAC,KAAK,CAAC,CAAC;QAC5C,mBAAmB,CAAC,WAAW,CAAC,mBAAmB,CAAC,WAAW,EAAE,GAAG,CAAC,CAAC,CAAC;QAEvE,IAAI,UAAU,GAAG,mBAAmB,EAAE,CAAC;YACrC,OAAO;gBACL,KAAK,EAAE,KAAK;gBACZ,SAAS,EAAE,mBAAmB;aAC/B,CAAC;QACJ,CAAC;QAED,uDAAuD;QACvD,MAAM,gBAAgB,GAAG,CAAA,MAAA,IAAI,CAAC,IAAI,0CAAE,OAAO,CAAC,eAAe,CAAC,IAAI;YAC9D,CAAC,CAAC,IAAI,IAAI,CAAC,MAAA,IAAI,CAAC,IAAI,0CAAE,OAAO,CAAC,eAAe,CAAC,IAAI,CAAC;YACnD,CAAC,CAAC,IAAI,CAAC;QAET,IAAI,gBAAgB,EAAE,CAAC;YACrB,MAAM,iBAAiB,GAAG,gBAAgB,CAAC,QAAQ,EAAE,CAAC;YACtD,MAAM,gBAAgB,GAAG,gBAAgB,CAAC,WAAW,EAAE,CAAC;YAExD,MAAM,QAAQ,GAAG,SAAS,CAAC,WAAW,EAAE,CAAC;YACzC,MAAM,SAAS,GAAG,SAAS,CAAC,QAAQ,EAAE,CAAC;YACvC,MAAM,aAAa,GACjB,QAAQ,KAAK,gBAAgB,IAAI,SAAS,KAAK,iBAAiB,CAAC;YAEnE,IAAI,aAAa,EAAE,CAAC;gBAClB,OAAO;oBACL,KAAK,EAAE,IAAI;oBACX,SAAS,EAAE,4BAA4B;iBACxC,CAAC;YACJ,CAAC;QACH,CAAC;QAED,OAAO;YACL,KAAK,EAAE,IAAI;YACX,SAAS,EAAE,EAAE;SACd,CAAC;IACJ,CAAC;IAED,aAAa;IACb,IAAI,OAAO;QACT,MAAM,KAAK,GAAG,IAAI,IAAI,EAAE,CAAC;QACzB,MAAM,QAAQ,GAAG,IAAI,IAAI,CAAC,KAAK,CAAC,CAAC;QACjC,QAAQ,CAAC,OAAO,CAAC,KAAK,CAAC,OAAO,EAAE,GAAG,CAAC,CAAC,CAAC,CAAC,kBAAkB;QACzD,MAAM,IAAI,GAAG,QAAQ,CAAC,WAAW,EAAE,CAAC;QACpC,MAAM,KAAK,GAAG,MAAM,CAAC,QAAQ,CAAC,QAAQ,EAAE,GAAG,CAAC,CAAC,CAAC,QAAQ,CAAC,CAAC,EAAE,GAAG,CAAC,CAAC,CAAC,uBAAuB;QACvF,MAAM,UAAU,GAAG,MAAM,CAAC,QAAQ,CAAC,OAAO,EAAE,CAAC,CAAC,QAAQ,CAAC,CAAC,EAAE,GAAG,CAAC,CAAC;QAC/D,OAAO,GAAG,IAAI,IAAI,KAAK,IAAI,UAAU,EAAE,CAAC;IAC1C,CAAC;IAED,IAAI,OAAO;QACT,MAAM,KAAK,GAAG,IAAI,IAAI,EAAE,CAAC;QACzB,MAAM,IAAI,GAAG,KAAK,CAAC,WAAW,EAAE,GAAG,CAAC,CAAC,CAAC,qCAAqC;QAC3E,MAAM,KAAK,GAAG,MAAM,CAAC,KAAK,CAAC,QAAQ,EAAE,GAAG,CAAC,CAAC,CAAC,QAAQ,CAAC,CAAC,EAAE,GAAG,CAAC,CAAC,CAAC,uBAAuB;QACpF,MAAM,UAAU,GAAG,MAAM,CAAC,KAAK,CAAC,OAAO,EAAE,CAAC,CAAC,QAAQ,CAAC,CAAC,EAAE,GAAG,CAAC,CAAC;QAC5D,OAAO,GAAG,IAAI,IAAI,KAAK,IAAI,UAAU,EAAE,CAAC;IAC1C,CAAC;IAED,IAAI,YAAY;;QACd,MAAM,uBAAuB,GAAG,CAAA,MAAA,IAAI,CAAC,IAAI,0CAAE,eAAe;YACxD,CAAC,CAAC,IAAI,CAAC,oBAAoB,CAAC,IAAI,IAAI,CAAC,IAAI,CAAC,IAAI,CAAC,eAAe,CAAC,CAAC;YAChE,CAAC,CAAC,EAAE,CAAC;QACP,MAAM,eAAe,GAAG,MAAA,MAAA,IAAI,CAAC,SAAS,0CAAE,KAAK,mCAAI,uBAAuB,CAAC;QACzE,OAAO,IAAI,CAAA;;;;kCAImB,MAAA,IAAI,CAAC,IAAI,0CAAE,qBAAqB;;;;kCAIhC,MAAA,IAAI,CAAC,IAAI,0CAAE,qBAAqB;;;;;;;;oBAQ9C,IAAI,CAAC,OAAO;oBACZ,IAAI,CAAC,OAAO;uBACT,eAAe;uBACf,GAAG,EAAE,CAAC,IAAI,CAAC,oBAAoB,EAAE;wBAChC,KAAK,IAAI,EAAE;YACnB,IAAI,CAAC,oBAAoB,EAAE,CAAC;YAC5B,MAAM,IAAI,CAAC,cAAc,CAAC;YAE1B,MAAM,UAAU,GAAG,IAAI,CAAC,SAAS,CAAC,KAAK,CAAC;YACxC,MAAM,EAAE,KAAK,EAAE,SAAS,EAAE,GACxB,IAAI,CAAC,kBAAkB,CAAC,UAAU,CAAC,CAAC;YAEtC,IAAI,CAAC,YAAY,GAAG,KAAK,CAAC;YAE1B,IAAI,SAAS,EAAE,CAAC;gBACd,IAAI,SAAS,KAAK,4BAA4B,EAAE,CAAC;oBAC/C,IAAI,CAAC,YAAY,GAAG,wBAAwB,CAAC,SAAS,CAAC,CAAC;oBACxD,IAAI,CAAC,cAAc;wBACjB,8CAA8C,CAAC;gBACnD,CAAC;qBAAM,CAAC;oBACN,IAAI,CAAC,YAAY,GAAG,wBAAwB,CAAC,SAAS,CAAC,CAAC;oBACxD,IAAI,CAAC,OAAO,GAAG,SAAS,CAAC;oBACzB,OAAO;gBACT,CAAC;YACH,CAAC;YAED,MAAM,UAAU,GAAG,IAAI,IAAI,CAAC,GAAG,UAAU,WAAW,CAAC,CAAC;YACtD,MAAM,OAAO,GAAG,IAAI,IAAI,CAAC,UAAU,CAAC,CAAC,WAAW,EAAE,CAAC;YACnD,IAAI,CAAC,OAAO,GAAG,OAAO,CAAC;QACzB,CAAC;;;;;;;gCAOiB,CAAC,CAAQ,EAAE,EAAE;YAC3B,CAAC,CAAC,cAAc,EAAE,CAAC;YACnB,IAAI,CAAC,SAAS,EAAE,CAAC;QACnB,CAAC;;;;;;;;8BAQa,CAAC,IAAI,CAAC,YAAY;gCAChB,KAAK,EAAE,CAAQ,EAAE,QAAmB,EAAE,EAAE;YACtD,IAAI,CAAC,oBAAoB,EAAE,CAAC;YAE5B,IAAI,CAAC,IAAI,CAAC,OAAO,EAAE,CAAC;gBAClB,IAAI,CAAC,YAAY,GAAG,2BAA2B,CAAC;gBAChD,OAAO;YACT,CAAC;YAED,6CAA6C;YAC5C,QAAsB,CAAC,UAAU,GAAG,IAAI,CAAC;YAC1C,MAAM,QAAQ,CAAC,cAAc,CAAC;YAE9B,IAAI,CAAC,iBAAiB,CAAC,CAAC,CAAC,CAAC;QAC5B,CAAC;;;;8CAI6B,IAAI,CAAC,YAAY;mBAC5C,IAAI,CAAC,aAAa;;;;;cAKvB,IAAI,CAAC,cAAc;YACnB,CAAC,CAAC,IAAI,CAAA,SAAS,IAAI,CAAC,cAAc,eAAe;YACjD,CAAC,CAAC,EAAE;cACJ,IAAI,CAAC,YAAY;;;;KAI1B,CAAC;IACJ,CAAC;;AAEM,sBAAM,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA8BlB,AA9BY,CA8BX;AAtW0B;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;6CAAoB;AAEnB;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;gDAAkB;AAED;IAA3C,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;yDAAmC;AAEjD;IAA5B,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,CAAC;qDAA+B;AAE/B;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;sDAA4B;AAE3B;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;qDAA2B;AAE1B;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;uDAA6B;AAE5B;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;qDAA4C;AAExD;IAAd,KAAK,CAAC,MAAM,CAAC;6CAAwB;AAEC;IAAtC,KAAK,CAAC,8BAA8B,CAAC;yDAA8B;AAGpE;IADC,KAAK,CAAC,8BAA8B,CAAC;kDACT;AAtBlB,eAAe;IAD3B,aAAa,CAAC,kBAAkB,CAAC;GACrB,eAAe,CAwW3B","sourcesContent":["import {\n  LitElement,\n  html,\n  PropertyValues,\n  nothing,\n  css,\n  TemplateResult,\n} from 'lit';\nimport { customElement, property, query } from 'lit/decorators.js';\nimport '@internetarchive/donation-form-section';\n\nimport type { MonthlyPlan } from '../models/plan';\nimport '../presentational/mgc-button';\nimport type { MGCButton } from '../presentational/mgc-button';\nimport '../presentational/mgc-update-status';\nimport '../presentational/donation-section-info';\n\ntype InvalidDateErrorCode =\n  | 'invalid_date'\n  | 'date_too_early'\n  | 'second_donation_this_month'\n  | 'date_out_of_range'\n  | 'same_next_billing_date'\n  | '';\n\nenum InvalidDateErrorMessages {\n  invalid_date = 'Please enter a valid date format (YYYY-MM-DD)',\n  date_too_early = 'Date must be at least tomorrow.',\n  second_donation_this_month = 'The date you selected will result in an additional donation for this month.',\n  date_out_of_range = 'New donation date must be within the next 12 months.',\n  same_next_billing_date = '',\n}\n@customElement('ia-mgc-edit-date')\nexport class MGCEditPlanDate extends LitElement {\n  @property({ type: Object }) plan?: MonthlyPlan;\n\n  @property({ type: String }) newDate?: string;\n\n  @property({ type: Boolean, reflect: true }) currentlyEditing: boolean = false;\n\n  @property({ type: Boolean }) allowEditing: boolean = false;\n\n  @property({ type: String }) updateMessage: string = '';\n\n  @property({ type: String }) errorMessage: string = '';\n\n  @property({ type: String }) warningMessage: string = '';\n\n  @property({ type: String }) updateStatus: 'success' | 'fail' | '' = '';\n\n  @query('form') form!: HTMLFormElement;\n\n  @query('form ia-mgc-button#edit-date') formSubmitButton!: MGCButton;\n\n  @query('form input[name=\"edit-date\"]')\n  dateInput!: HTMLInputElement;\n\n  willUpdate(changed: PropertyValues) {\n    if (this.dateInput && changed.has('plan') && this.plan) {\n      this.dateInput.setAttribute('min', this.minDate);\n      this.dateInput.setAttribute('max', this.maxDate);\n    }\n  }\n\n  updated(changed: PropertyValues) {\n    if (changed.has('currentlyEditing') && this.currentlyEditing) {\n      this.dateInput.focus();\n    }\n  }\n\n  protected render() {\n    return html`\n      <section>\n        <donation-form-section\n          badgemode=\"hidebadge\"\n          headline=\"Change next donation date\"\n        >\n          ${!this.currentlyEditing\n            ? html`<ia-mgc-form-section-info\n                @editingRequested=${() => {\n                  this.currentlyEditing = true;\n                  this.clearStatusMessaging();\n                }}\n                ><span>${this.plan?.nextBillingDateLocale}</span>\n              </ia-mgc-form-section-info>`\n            : nothing}\n          ${this.currentlyEditing ? this.editDateForm : nothing}\n        </donation-form-section>\n      </section>\n    `;\n  }\n\n  /* External Function that is called by consumer to tell the form there has been data update */\n  async dateUpdated(status: 'success' | 'fail') {\n    this.clearInputField();\n\n    this.updateStatus = status;\n    this.updateMessage =\n      status === 'success'\n        ? 'Date updated'\n        : 'Failed to update date, please try again';\n\n    if (status === 'success') {\n      this.closeForm();\n      await this.updateComplete;\n      return;\n    }\n\n    this.allowEditing = false;\n    await this.updateComplete;\n  }\n\n  /* Dispatches edit-date change request */\n  requestDateUpdate(e: Event): void {\n    e.preventDefault();\n    this.dispatchEvent(\n      new CustomEvent('updateDate', {\n        detail: {\n          plan: this.plan,\n          newDate: this.newDate,\n        },\n      }),\n    );\n  }\n\n  closeForm() {\n    this.clearInputField();\n    this.clearStatusMessaging();\n    this.currentlyEditing = false;\n    this.allowEditing = false;\n  }\n\n  clearInputField() {\n    this.dateInput.value = '';\n    this.newDate = undefined;\n  }\n\n  formatDateToYYYYMMDD(date: Date): string {\n    const year = date.getFullYear();\n    const month = String(date.getMonth() + 1).padStart(2, '0'); // Months are 0-indexed\n    const dateNum = String(date.getDate()).padStart(2, '0');\n    return `${year}-${month}-${dateNum}`;\n  }\n\n  async clearStatusMessaging() {\n    this.errorMessage = '';\n    this.warningMessage = '';\n    this.updateMessage = '';\n    this.updateStatus = '';\n    await this.updateComplete;\n  }\n\n  /* @param string dateString -  YYYYY-MM-DD */\n  validateChosenDate(dateString: string): {\n    valid: boolean;\n    errorCode: InvalidDateErrorCode | '';\n  } {\n    if (!dateString) {\n      return {\n        valid: false,\n        errorCode: 'invalid_date',\n      };\n    }\n\n    let validDate;\n    try {\n      validDate = new Date(`${dateString}T00:00:00`);\n    } catch (error) {\n      return {\n        valid: false,\n        errorCode: 'invalid_date',\n      };\n    }\n\n    // Check if minimum date is at least tomorrow\n    const today = new Date();\n    today.setHours(0, 0, 0, 0);\n    const tomorrow = new Date(today);\n    tomorrow.setDate(today.getDate() + 1); // Set to tomorrow\n\n    const chosenDate = new Date(validDate);\n    chosenDate.setHours(0, 0, 0, 0);\n\n    // check input value against next billing date\n    const isNextBillingDate = this.plan?.nextBillingDate\n      ? this.formatDateToYYYYMMDD(new Date(this.plan.nextBillingDate)) ===\n        this.formatDateToYYYYMMDD(chosenDate)\n      : false;\n    if (isNextBillingDate) {\n      return {\n        valid: false,\n        errorCode: 'same_next_billing_date',\n      };\n    }\n\n    if (chosenDate < today) {\n      return {\n        valid: false,\n        errorCode: 'date_too_early',\n      };\n    }\n\n    // Check if the new date is within the next 12 months\n    const twelveMonthsFromNow = new Date(today);\n    twelveMonthsFromNow.setFullYear(twelveMonthsFromNow.getFullYear() + 1);\n\n    if (chosenDate > twelveMonthsFromNow) {\n      return {\n        valid: false,\n        errorCode: 'date_out_of_range',\n      };\n    }\n\n    // Check if there has been a donation in the last month\n    const lastDonationDate = this.plan?.payment.lastBillingDate.date\n      ? new Date(this.plan?.payment.lastBillingDate.date)\n      : null;\n\n    if (lastDonationDate) {\n      const lastDonationMonth = lastDonationDate.getMonth();\n      const lastDonationYear = lastDonationDate.getFullYear();\n\n      const thisYear = validDate.getFullYear();\n      const thisMonth = validDate.getMonth();\n      const isInLastMonth =\n        thisYear === lastDonationYear && thisMonth === lastDonationMonth;\n\n      if (isInLastMonth) {\n        return {\n          valid: true,\n          errorCode: 'second_donation_this_month',\n        };\n      }\n    }\n\n    return {\n      valid: true,\n      errorCode: '',\n    };\n  }\n\n  /* DISPLAY */\n  get minDate(): string {\n    const today = new Date();\n    const tomorrow = new Date(today);\n    tomorrow.setDate(today.getDate() + 1); // Set to tomorrow\n    const year = tomorrow.getFullYear();\n    const month = String(tomorrow.getMonth() + 1).padStart(2, '0'); // Months are 0-indexed\n    const dateString = String(tomorrow.getDate()).padStart(2, '0');\n    return `${year}-${month}-${dateString}`;\n  }\n\n  get maxDate(): string {\n    const today = new Date();\n    const year = today.getFullYear() + 1; // Allow up to one year in the future\n    const month = String(today.getMonth() + 1).padStart(2, '0'); // Months are 0-indexed\n    const dateString = String(today.getDate()).padStart(2, '0');\n    return `${year}-${month}-${dateString}`;\n  }\n\n  get editDateForm(): TemplateResult {\n    const nextBillingDateYYYYMMDD = this.plan?.nextBillingDate\n      ? this.formatDateToYYYYMMDD(new Date(this.plan.nextBillingDate))\n      : '';\n    const inputValueToUse = this.dateInput?.value ?? nextBillingDateYYYYMMDD;\n    return html`\n      <section>\n        <form id=\"edit-date\">\n          <p id=\"form-info-last-donation-date\">\n            Last donation date: ${this.plan?.lastBillingDateLocale}\n          </p>\n\n          <p id=\"form-info-next-donation-date\">\n            Next donation date: ${this.plan?.nextBillingDateLocale}\n          </p>\n          <div class=\"date-holder\">\n            <input\n              required\n              type=\"date\"\n              id=\"edit-date\"\n              name=\"edit-date\"\n              min=${this.minDate}\n              max=${this.maxDate}\n              .value=${inputValueToUse}\n              @focus=${() => this.clearStatusMessaging()}\n              @change=${async () => {\n                this.clearStatusMessaging();\n                await this.updateComplete;\n\n                const inputValue = this.dateInput.value;\n                const { valid, errorCode } =\n                  this.validateChosenDate(inputValue);\n\n                this.allowEditing = valid;\n\n                if (errorCode) {\n                  if (errorCode === 'second_donation_this_month') {\n                    this.errorMessage = InvalidDateErrorMessages[errorCode];\n                    this.warningMessage =\n                      'You have already made a donation this month.';\n                  } else {\n                    this.errorMessage = InvalidDateErrorMessages[errorCode];\n                    this.newDate = undefined;\n                    return;\n                  }\n                }\n\n                const chosenDate = new Date(`${inputValue}T00:00:00`);\n                const newDate = new Date(chosenDate).toISOString();\n                this.newDate = newDate;\n              }}\n            />\n          </div>\n          <div>\n            <div class=\"cta-container\">\n              <ia-mgc-button\n                class=\"ia-button secondary\"\n                .clickHandler=${(e: Event) => {\n                  e.preventDefault();\n                  this.closeForm();\n                }}\n              >\n                Cancel\n              </ia-mgc-button>\n              <ia-mgc-button\n                id=\"edit-date\"\n                class=\"ia-button primary\"\n                type=\"submit\"\n                .isDisabled=${!this.allowEditing}\n                .clickHandler=${async (e: Event, iaButton: MGCButton) => {\n                  this.clearStatusMessaging();\n\n                  if (!this.newDate) {\n                    this.errorMessage = 'Please enter a valid date';\n                    return;\n                  }\n\n                  // eslint-disable-next-line no-param-reassign\n                  (iaButton as MGCButton).isDisabled = true;\n                  await iaButton.updateComplete;\n\n                  this.requestDateUpdate(e);\n                }}\n              >\n                Update\n              </ia-mgc-button>\n              <ia-mgc-update-status .status=${this.updateStatus}\n                >${this.updateMessage}</ia-mgc-update-status\n              >\n            </div>\n          </div>\n          <p class=\"error error-msg\">\n            ${this.warningMessage\n              ? html`<span>${this.warningMessage}</span><br />`\n              : ''}\n            ${this.errorMessage}\n          </p>\n        </form>\n      </section>\n    `;\n  }\n\n  static styles = css`\n    input[name='edit-date'] {\n      margin: 10px 0;\n      min-width: 140px;\n      font-family: inherit;\n    }\n\n    .cta-container {\n      display: flex;\n      flex-direction: row;\n      flex-wrap: wrap;\n      align-content: center;\n      justify-content: flex-start;\n      align-items: center;\n      gap: 10px;\n    }\n\n    p.error {\n      color: var(--mgc-warning-color-dark, #bb0505);\n    }\n\n    ia-mgc-update-status {\n      display: inline-block;\n      margin-left: 1rem;\n    }\n\n    .checkbox-option-container {\n      margin: 10px 0;\n      display: flex;\n    }\n  `;\n}\n"]}
+{"version":3,"file":"date.js","sourceRoot":"","sources":["../../../src/form-sections/date.ts"],"names":[],"mappings":"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","sourcesContent":["import {\n  LitElement,\n  html,\n  PropertyValues,\n  nothing,\n  css,\n  TemplateResult,\n} from 'lit';\nimport { customElement, property, query } from 'lit/decorators.js';\nimport '@internetarchive/donation-form-section';\n\nimport type { MonthlyPlan } from '../models/plan';\nimport '../presentational/mgc-button';\nimport type { MGCButton } from '../presentational/mgc-button';\nimport '../presentational/mgc-update-status';\nimport '../presentational/donation-section-info';\n\ntype InvalidDateErrorCode =\n  | 'invalid_date'\n  | 'date_too_early'\n  | 'second_donation_this_month'\n  | 'date_out_of_range'\n  | 'same_next_billing_date'\n  | '';\n\nenum InvalidDateErrorMessages {\n  invalid_date = 'Please enter a valid date format (YYYY-MM-DD)',\n  date_too_early = 'Date must be at least tomorrow.',\n  second_donation_this_month = 'The date you selected will result in an additional donation for this month.',\n  date_out_of_range = 'New donation date must be within the next 12 months.',\n  same_next_billing_date = '',\n}\n@customElement('ia-mgc-edit-date')\nexport class MGCEditPlanDate extends LitElement {\n  @property({ type: Object }) plan?: MonthlyPlan;\n\n  @property({ type: String }) newDate?: string;\n\n  @property({ type: Boolean, reflect: true }) currentlyEditing: boolean = false;\n\n  @property({ type: Boolean }) allowEditing: boolean = false;\n\n  @property({ type: String }) updateMessage: string = '';\n\n  @property({ type: String }) errorMessage: string = '';\n\n  @property({ type: String }) warningMessage: string = '';\n\n  @property({ type: String }) updateStatus: 'success' | 'fail' | '' = '';\n\n  @query('form') form!: HTMLFormElement;\n\n  @query('form ia-mgc-button#edit-date') formSubmitButton!: MGCButton;\n\n  @query('form input[name=\"edit-date\"]')\n  dateInput!: HTMLInputElement;\n\n  willUpdate(changed: PropertyValues) {\n    if (this.dateInput && changed.has('plan') && this.plan) {\n      this.dateInput.setAttribute('min', this.minDate);\n      this.dateInput.setAttribute('max', this.maxDate);\n    }\n  }\n\n  updated(changed: PropertyValues) {\n    if (changed.has('currentlyEditing') && this.currentlyEditing) {\n      this.dateInput.focus();\n    }\n  }\n\n  protected render() {\n    return html`\n      <section>\n        <donation-form-section\n          badgemode=\"hidebadge\"\n          headline=\"Change next donation date\"\n        >\n          ${!this.currentlyEditing\n            ? html`<ia-mgc-form-section-info\n                @editingRequested=${() => {\n                  this.currentlyEditing = true;\n                  this.clearStatusMessaging();\n                }}\n                ><span>${this.plan?.nextBillingDateLocale}</span>\n              </ia-mgc-form-section-info>`\n            : nothing}\n          ${this.currentlyEditing ? this.editDateForm : nothing}\n        </donation-form-section>\n      </section>\n    `;\n  }\n\n  /* External Function that is called by consumer to tell the form there has been data update */\n  async dateUpdated(status: 'success' | 'fail') {\n    this.clearInputField();\n\n    this.updateStatus = status;\n    this.updateMessage =\n      status === 'success'\n        ? 'Date updated'\n        : 'Failed to update date, please try again';\n\n    if (status === 'success') {\n      this.closeForm();\n      await this.updateComplete;\n      return;\n    }\n\n    this.allowEditing = false;\n    await this.updateComplete;\n  }\n\n  /* Dispatches edit-date change request */\n  requestDateUpdate(e: Event): void {\n    e.preventDefault();\n    this.dispatchEvent(\n      new CustomEvent('updateDate', {\n        detail: {\n          plan: this.plan,\n          newDate: this.newDate,\n        },\n      }),\n    );\n  }\n\n  closeForm() {\n    this.clearInputField();\n    this.clearStatusMessaging();\n    this.currentlyEditing = false;\n    this.allowEditing = false;\n  }\n\n  clearInputField() {\n    this.dateInput.value = '';\n    this.newDate = undefined;\n  }\n\n  formatDateToYYYYMMDD(date: Date): string {\n    const year = date.getFullYear();\n    const month = String(date.getMonth() + 1).padStart(2, '0'); // Months are 0-indexed\n    const dateNum = String(date.getDate()).padStart(2, '0');\n    return `${year}-${month}-${dateNum}`;\n  }\n\n  async clearStatusMessaging() {\n    this.errorMessage = '';\n    this.warningMessage = '';\n    this.updateMessage = '';\n    this.updateStatus = '';\n    await this.updateComplete;\n  }\n\n  /* @param string dateString -  YYYYY-MM-DD */\n  validateChosenDate(dateString: string): {\n    valid: boolean;\n    errorCode: InvalidDateErrorCode | '';\n  } {\n    if (!dateString) {\n      return {\n        valid: false,\n        errorCode: 'invalid_date',\n      };\n    }\n\n    let validDate;\n    try {\n      validDate = new Date(`${dateString}T00:00:00`);\n    } catch (error) {\n      return {\n        valid: false,\n        errorCode: 'invalid_date',\n      };\n    }\n\n    // Check if minimum date is at least tomorrow\n    const today = new Date();\n    today.setHours(0, 0, 0, 0);\n    const tomorrow = new Date(today);\n    tomorrow.setDate(today.getDate() + 1); // Set to tomorrow\n\n    const chosenDate = new Date(validDate);\n    chosenDate.setHours(0, 0, 0, 0);\n\n    // check input value against next billing date\n    const isNextBillingDate = this.plan?.nextBillingDate\n      ? this.formatDateToYYYYMMDD(new Date(this.plan.nextBillingDate)) ===\n        this.formatDateToYYYYMMDD(chosenDate)\n      : false;\n    if (isNextBillingDate) {\n      return {\n        valid: false,\n        errorCode: 'same_next_billing_date',\n      };\n    }\n\n    if (chosenDate < today) {\n      return {\n        valid: false,\n        errorCode: 'date_too_early',\n      };\n    }\n\n    // Check if the new date is within the next 12 months\n    const twelveMonthsFromNow = new Date(today);\n    twelveMonthsFromNow.setFullYear(twelveMonthsFromNow.getFullYear() + 1);\n\n    if (chosenDate > twelveMonthsFromNow) {\n      return {\n        valid: false,\n        errorCode: 'date_out_of_range',\n      };\n    }\n\n    // Check if there has been a donation in the last month\n    const lastDonationDate =\n      this.plan?.payment && this.plan.payment.lastBillingDate?.date\n        ? new Date(this.plan.payment.lastBillingDate.date)\n        : null;\n\n    if (lastDonationDate) {\n      const lastDonationMonth = lastDonationDate.getMonth();\n      const lastDonationYear = lastDonationDate.getFullYear();\n\n      const thisYear = validDate.getFullYear();\n      const thisMonth = validDate.getMonth();\n      const isInLastMonth =\n        thisYear === lastDonationYear && thisMonth === lastDonationMonth;\n\n      if (isInLastMonth) {\n        return {\n          valid: true,\n          errorCode: 'second_donation_this_month',\n        };\n      }\n    }\n\n    return {\n      valid: true,\n      errorCode: '',\n    };\n  }\n\n  /* DISPLAY */\n  get minDate(): string {\n    const today = new Date();\n    const tomorrow = new Date(today);\n    tomorrow.setDate(today.getDate() + 1); // Set to tomorrow\n    const year = tomorrow.getFullYear();\n    const month = String(tomorrow.getMonth() + 1).padStart(2, '0'); // Months are 0-indexed\n    const dateString = String(tomorrow.getDate()).padStart(2, '0');\n    return `${year}-${month}-${dateString}`;\n  }\n\n  get maxDate(): string {\n    const today = new Date();\n    const year = today.getFullYear() + 1; // Allow up to one year in the future\n    const month = String(today.getMonth() + 1).padStart(2, '0'); // Months are 0-indexed\n    const dateString = String(today.getDate()).padStart(2, '0');\n    return `${year}-${month}-${dateString}`;\n  }\n\n  get editDateForm(): TemplateResult {\n    const nextBillingDateYYYYMMDD = this.plan?.nextBillingDate\n      ? this.formatDateToYYYYMMDD(new Date(this.plan.nextBillingDate))\n      : '';\n    const inputValueToUse = this.dateInput?.value ?? nextBillingDateYYYYMMDD;\n    return html`\n      <section>\n        <form id=\"edit-date\">\n          <p id=\"form-info-last-donation-date\">\n            Last donation date: ${this.plan?.lastBillingDateLocale}\n          </p>\n\n          <p id=\"form-info-next-donation-date\">\n            Next donation date: ${this.plan?.nextBillingDateLocale}\n          </p>\n          <div class=\"date-holder\">\n            <input\n              required\n              type=\"date\"\n              id=\"edit-date\"\n              name=\"edit-date\"\n              min=${this.minDate}\n              max=${this.maxDate}\n              .value=${inputValueToUse}\n              @focus=${() => this.clearStatusMessaging()}\n              @change=${async () => {\n                this.clearStatusMessaging();\n                await this.updateComplete;\n\n                const inputValue = this.dateInput.value;\n                const { valid, errorCode } =\n                  this.validateChosenDate(inputValue);\n\n                this.allowEditing = valid;\n\n                if (errorCode) {\n                  if (errorCode === 'second_donation_this_month') {\n                    this.errorMessage = InvalidDateErrorMessages[errorCode];\n                    this.warningMessage =\n                      'You have already made a donation this month.';\n                  } else {\n                    this.errorMessage = InvalidDateErrorMessages[errorCode];\n                    this.newDate = undefined;\n                    return;\n                  }\n                }\n\n                const chosenDate = new Date(`${inputValue}T00:00:00`);\n                const newDate = new Date(chosenDate).toISOString();\n                this.newDate = newDate;\n              }}\n            />\n          </div>\n          <div>\n            <div class=\"cta-container\">\n              <ia-mgc-button\n                class=\"ia-button secondary\"\n                .clickHandler=${(e: Event) => {\n                  e.preventDefault();\n                  this.closeForm();\n                }}\n              >\n                Cancel\n              </ia-mgc-button>\n              <ia-mgc-button\n                id=\"edit-date\"\n                class=\"ia-button primary\"\n                type=\"submit\"\n                .isDisabled=${!this.allowEditing}\n                .clickHandler=${async (e: Event, iaButton: MGCButton) => {\n                  this.clearStatusMessaging();\n\n                  if (!this.newDate) {\n                    this.errorMessage = 'Please enter a valid date';\n                    return;\n                  }\n\n                  // eslint-disable-next-line no-param-reassign\n                  (iaButton as MGCButton).isDisabled = true;\n                  await iaButton.updateComplete;\n\n                  this.requestDateUpdate(e);\n                }}\n              >\n                Update\n              </ia-mgc-button>\n              <ia-mgc-update-status .status=${this.updateStatus}\n                >${this.updateMessage}</ia-mgc-update-status\n              >\n            </div>\n          </div>\n          <p class=\"error error-msg\">\n            ${this.warningMessage\n              ? html`<span>${this.warningMessage}</span><br />`\n              : ''}\n            ${this.errorMessage}\n          </p>\n        </form>\n      </section>\n    `;\n  }\n\n  static styles = css`\n    input[name='edit-date'] {\n      margin: 10px 0;\n      min-width: 140px;\n      font-family: inherit;\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/parts/braintree-manager.d.ts

@@ -0,0 +1,40 @@
+import { LitElement, CSSResult, PropertyValueMap } from 'lit';
+import { BraintreeManagerInterface, HostingEnvironment } from '@internetarchive/donation-form';
+import type { BraintreeEndpointManagerInterface } from '@internetarchive/donation-form/dist/src/braintree-manager/braintree-interfaces.js';
+import type { PaymentClientsInterface } from '@internetarchive/donation-form/dist/src/braintree-manager/payment-clients.js';
+import type { MonthlyPlan } from '../../models/plan';
+type PaymentConfig = {
+    braintreeAuthToken?: string;
+    endpointManager?: BraintreeEndpointManagerInterface;
+    paymentClients?: PaymentClientsInterface;
+    environment?: HostingEnvironment;
+    venmoProfileId?: string;
+    googlePayMerchantId?: string;
+};
+export declare class MGCBraintreeManager extends LitElement {
+    plan?: MonthlyPlan;
+    displayCreditCard: boolean;
+    patronEmail: string;
+    paymentConfig?: PaymentConfig;
+    braintreeManager?: BraintreeManagerInterface;
+    private elementConnected;
+    get braintreeInputs(): {
+        errorMessage: HTMLDivElement | null;
+        number: HTMLDivElement | null;
+        cvv: HTMLDivElement | null;
+        expirationDate: HTMLDivElement | null;
+    };
+    createRenderRoot(): this;
+    disconnectedCallback(): void;
+    connectedCallback(): void;
+    protected updated(changed: PropertyValueMap<any> | Map<PropertyKey, unknown>): void;
+    validateCreditCardFields(): Promise<any>;
+    setupCreditCardHandler(): Promise<void>;
+    render(): import("lit").TemplateResult<1>;
+    lightDomCSS(): CSSResult;
+    get creditCardTemplate(): import("lit").TemplateResult<1>;
+    private setupBraintreeManager;
+    get contactForm(): HTMLFormElement | null;
+    setupPaymentHandlers(): Promise<void>;
+}
+export {};