@internetarchive/donation-monthly-portal 7.0.5 → 7.0.6
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/src/form-sections/amount.js +2 -2
- package/dist/src/form-sections/amount.js.map +1 -1
- package/dist/src/models/plan.d.ts +1 -0
- package/dist/src/models/plan.js +3 -0
- package/dist/src/models/plan.js.map +1 -1
- package/dist/src/plans.js +1 -1
- package/dist/src/plans.js.map +1 -1
- package/package.json +1 -1
- package/src/form-sections/amount.ts +2 -2
- package/src/models/plan.ts +4 -0
- package/src/plans.ts +1 -1
- package/dist/src/form-sections/payment-method.d.ts +0 -0
- package/dist/src/form-sections/payment-method.js +0 -2
- package/dist/src/form-sections/payment-method.js.map +0 -1
- package/src/form-sections/payment-method.ts +0 -0
|
@@ -41,7 +41,7 @@ let MGCEditPlanAmount = class MGCEditPlanAmount extends LitElement {
|
|
|
41
41
|
this.currentlyEditing = true;
|
|
42
42
|
this.clearStatusMessaging();
|
|
43
43
|
}}
|
|
44
|
-
><span>USD $${(_a = this.plan) === null || _a === void 0 ? void 0 : _a.
|
|
44
|
+
><span>USD $${(_a = this.plan) === null || _a === void 0 ? void 0 : _a.amountFormatted}</span>
|
|
45
45
|
</ia-mgc-form-section-info>`
|
|
46
46
|
: nothing}
|
|
47
47
|
${this.currentlyEditing ? this.editAmountForm : nothing}
|
|
@@ -193,7 +193,7 @@ let MGCEditPlanAmount = class MGCEditPlanAmount extends LitElement {
|
|
|
193
193
|
id="edit-plan-amount"
|
|
194
194
|
@submit=${(e) => this.handleSubmit(e)}
|
|
195
195
|
>
|
|
196
|
-
<p>Current donation amount: $${(_a = this.plan) === null || _a === void 0 ? void 0 : _a.
|
|
196
|
+
<p>Current donation amount: $${(_a = this.plan) === null || _a === void 0 ? void 0 : _a.amountFormatted}</p>
|
|
197
197
|
<div>
|
|
198
198
|
$
|
|
199
199
|
<input
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"amount.js","sourceRoot":"","sources":["../../../src/form-sections/amount.ts"],"names":[],"mappings":"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","sourcesContent":["import {\n LitElement,\n html,\n PropertyValues,\n nothing,\n css,\n TemplateResult,\n} from 'lit';\nimport { customElement, property, query } from 'lit/decorators.js';\nimport '@internetarchive/donation-form-section';\nimport {\n DonationPaymentInfo,\n DonationType,\n} from '@internetarchive/donation-form-data-models';\n\nimport type { MonthlyPlan } from '../models/plan';\nimport '../presentational/donation-section-info';\nimport '../presentational/mgc-button';\nimport type { MGCButton } from '../presentational/mgc-button';\nimport '../presentational/mgc-update-status';\n\n@customElement('ia-mgc-edit-plan-amount')\nexport class MGCEditPlanAmount extends LitElement {\n @property({ type: Object }) plan?: MonthlyPlan;\n\n // captures the changes made to the amount && calculates the total amount with fees\n @property({ type: Object }) donationPaymentInfo?: DonationPaymentInfo;\n\n @property({ type: Number }) newAmount: number = 0;\n\n @property({ type: Boolean, reflect: true }) currentlyEditing: boolean = false;\n\n @property({ type: Boolean }) coverFees: boolean = false;\n\n @property({ type: String }) updateMessage: string = '';\n\n @property({ type: String }) errorMessage: string = '';\n\n @property({ type: String }) updateStatus: 'success' | 'fail' | '' = '';\n\n @query('form') form!: HTMLFormElement;\n\n updated(changed: PropertyValues) {\n if (changed.has('plan') && this.plan) {\n this.captureAmountChanges();\n }\n if (changed.has('coverFees')) {\n this.captureAmountChanges();\n }\n if (changed.has('currentlyEditing') && this.currentlyEditing) {\n this.form.focus();\n }\n\n if (changed.has('donationPaymentInfo') && !this.donationPaymentInfo) {\n this.captureAmountChanges();\n }\n }\n\n protected render() {\n return html`\n <section>\n <donation-form-section badgemode=\"hidebadge\" headline=\"Amount\">\n ${!this.currentlyEditing\n ? html`<ia-mgc-form-section-info\n @editingRequested=${() => {\n this.currentlyEditing = true;\n this.clearStatusMessaging();\n }}\n ><span>USD $${this.plan?.amount}</span>\n </ia-mgc-form-section-info>`\n : nothing}\n ${this.currentlyEditing ? this.editAmountForm : nothing}\n </donation-form-section>\n </section>\n `;\n }\n\n /* External Function that is called by consumer to tell the form there has been data update */\n async amountUpdated(status: 'success' | 'fail') {\n this.clearInputField();\n\n this.updateStatus = status;\n this.updateMessage =\n status === 'success' ? 'Amount updated' : 'Failed. Try again.';\n\n if (status === 'success') {\n this.closeForm();\n await this.updateComplete;\n\n this.updateStatus = status;\n this.updateMessage = 'Amount updated';\n\n return;\n }\n\n (\n this.form.querySelector('ia-mgc-button#update-amount') as MGCButton\n ).isDisabled = false;\n\n this.captureAmountChanges();\n\n await this.updateComplete;\n }\n\n /* Dispatches amount change request */\n requestAmountUpdate(e: Event): void {\n e.preventDefault();\n\n const input = this.form.querySelector(\n 'input[name=\"amount\"]'\n ) as HTMLInputElement;\n this.newAmount = Number(input.value);\n\n this.captureAmountChanges(this.newAmount);\n\n console.log('<plan-amount> - update amount', {\n newValue: this.newAmount,\n oldValue: this.plan?.plan.amount,\n display: this.donationPaymentInfo?.amount,\n });\n const newAmount = Number(\n DonationPaymentInfo.calculateTotal(\n Number(this.donationPaymentInfo?.amount),\n this.coverFees\n )\n );\n this.dispatchEvent(\n new CustomEvent('updateAmount', {\n detail: {\n plan: this.plan,\n amount: newAmount,\n baseAmount: this.donationPaymentInfo?.amount,\n coverFees: this.coverFees,\n feeCovered: this.donationPaymentInfo?.feeAmountCovered,\n },\n })\n );\n }\n\n /* captures form changes */\n captureAmountChanges(newAmount?: number) {\n if (!this.donationPaymentInfo && this.plan) {\n this.donationPaymentInfo = new DonationPaymentInfo({\n donationType: DonationType.Monthly,\n amount: 0,\n coverFees: true,\n });\n return;\n }\n\n let newPlan;\n if (newAmount) {\n newPlan = new DonationPaymentInfo({\n donationType: DonationType.Monthly,\n amount: newAmount,\n coverFees: true,\n });\n } else {\n const amount = this.donationPaymentInfo\n ? this.donationPaymentInfo.amount\n : this.plan!.amount;\n\n newPlan = new DonationPaymentInfo({\n donationType: DonationType.Monthly,\n amount,\n coverFees: true,\n });\n }\n\n this.donationPaymentInfo = newPlan;\n }\n\n closeForm() {\n this.clearInputField();\n this.clearStatusMessaging();\n this.currentlyEditing = false;\n this.coverFees = false;\n this.errorMessage = '';\n }\n\n clearInputField() {\n const input = this.form.querySelector(\n 'input[name=\"amount\"]'\n ) as HTMLInputElement;\n input.value = '';\n this.newAmount = 0;\n this.donationPaymentInfo = undefined;\n }\n\n handleSubmit(e: Event, iaButton?: MGCButton) {\n e.preventDefault();\n this.clearStatusMessaging();\n\n const button =\n iaButton ?? (this.form.querySelector('#update-amount') as MGCButton);\n if (button) this.updateButtonState(button);\n\n if (!this.newAmount) {\n this.errorMessage = 'Please enter a new amount';\n if (button) button.isDisabled = false;\n return;\n }\n\n const input = this.form.querySelector(\n 'input[name=\"amount\"]'\n ) as HTMLInputElement;\n const requestedAmount = Number(input.value) ?? 0;\n const amountTooLow = requestedAmount < 1;\n const amountTooHigh = requestedAmount >= 9999;\n\n if (amountTooLow) {\n this.errorMessage = 'Please enter a valid amount';\n }\n\n if (amountTooHigh) {\n this.errorMessage =\n 'Amount must be less than $9,999. Would you like to donate more? Please contact us at donations@archive.org';\n }\n\n if (amountTooHigh || amountTooLow) {\n if (button) this.updateButtonState(button);\n return;\n }\n\n this.requestAmountUpdate(e);\n }\n\n private async updateButtonState(iaButton: MGCButton) {\n // eslint-disable-next-line no-param-reassign\n (iaButton as MGCButton).isDisabled = true;\n await iaButton?.updateComplete;\n }\n\n async clearStatusMessaging() {\n this.errorMessage = '';\n this.updateMessage = '';\n this.updateStatus = '';\n await this.updateComplete;\n }\n\n /* DISPLAY */\n totalAmountWithFees(): number {\n if (this.newAmount === 0) {\n return 0;\n }\n\n return DonationPaymentInfo.calculateTotal(this.newAmount, this.coverFees);\n }\n\n get coveredFeesText() {\n return `I'll generously add $${this.donationPaymentInfo?.feeAmountCovered} to cover fees.`;\n }\n\n get editAmountForm(): TemplateResult {\n return html`\n <section>\n <form\n id=\"edit-plan-amount\"\n @submit=${(e: Event) => this.handleSubmit(e)}\n >\n <p>Current donation amount: $${this.plan?.amount}</p>\n <div>\n $\n <input\n min=\"1\"\n max=\"9999\"\n type=\"number\"\n id=\"amount\"\n name=\"amount\"\n ?required=${true}\n @focus=${() => this.clearStatusMessaging()}\n @input=${(e: Event) => {\n const newAmount = Number((e.target as HTMLInputElement).value);\n this.captureAmountChanges(newAmount);\n this.newAmount = newAmount;\n }}\n />\n / month\n </div>\n <div>\n <div class=\"checkbox-option-container\">\n <input\n type=\"checkbox\"\n id=\"cover-fees\"\n tabindex=\"0\"\n @change=${(e: Event) => {\n const input = e.target as HTMLInputElement;\n const coverFees = input.checked;\n this.coverFees = coverFees;\n this.captureAmountChanges();\n }}\n />\n <label for=\"cover-fees\">${this.coveredFeesText}</label>\n </div>\n <p>Total: USD $${this.totalAmountWithFees()}</p>\n <div class=\"cta-container\">\n <ia-mgc-button\n class=\"ia-button secondary\"\n .clickHandler=${(e: Event) => {\n e.preventDefault();\n this.closeForm();\n }}\n >\n Cancel\n </ia-mgc-button>\n <ia-mgc-button\n id=\"update-amount\"\n class=\"ia-button primary\"\n type=\"submit\"\n .clickHandler=${(e: Event, iaButton: MGCButton) =>\n this.handleSubmit(e, iaButton)}\n >\n Update\n </ia-mgc-button>\n <ia-mgc-update-status .status=${this.updateStatus}\n >${this.updateMessage}</ia-mgc-update-status\n >\n </div>\n </div>\n <p class=\"error\">${this.errorMessage}</p>\n </form>\n </section>\n `;\n }\n\n static styles = css`\n input#amount {\n width: 50px;\n }\n\n .cta-container {\n display: flex;\n flex-direction: row;\n flex-wrap: wrap;\n align-content: center;\n justify-content: flex-start;\n align-items: center;\n gap: 10px;\n }\n\n p.error {\n color: var(--mgc-warning-color-dark, #bb0505);\n }\n\n ia-mgc-update-status {\n display: inline-block;\n margin-left: 1rem;\n }\n\n .checkbox-option-container {\n margin: 10px 0;\n display: flex;\n }\n `;\n}\n"]}
|
|
1
|
+
{"version":3,"file":"amount.js","sourceRoot":"","sources":["../../../src/form-sections/amount.ts"],"names":[],"mappings":"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","sourcesContent":["import {\n LitElement,\n html,\n PropertyValues,\n nothing,\n css,\n TemplateResult,\n} from 'lit';\nimport { customElement, property, query } from 'lit/decorators.js';\nimport '@internetarchive/donation-form-section';\nimport {\n DonationPaymentInfo,\n DonationType,\n} from '@internetarchive/donation-form-data-models';\n\nimport type { MonthlyPlan } from '../models/plan';\nimport '../presentational/donation-section-info';\nimport '../presentational/mgc-button';\nimport type { MGCButton } from '../presentational/mgc-button';\nimport '../presentational/mgc-update-status';\n\n@customElement('ia-mgc-edit-plan-amount')\nexport class MGCEditPlanAmount extends LitElement {\n @property({ type: Object }) plan?: MonthlyPlan;\n\n // captures the changes made to the amount && calculates the total amount with fees\n @property({ type: Object }) donationPaymentInfo?: DonationPaymentInfo;\n\n @property({ type: Number }) newAmount: number = 0;\n\n @property({ type: Boolean, reflect: true }) currentlyEditing: boolean = false;\n\n @property({ type: Boolean }) coverFees: boolean = false;\n\n @property({ type: String }) updateMessage: string = '';\n\n @property({ type: String }) errorMessage: string = '';\n\n @property({ type: String }) updateStatus: 'success' | 'fail' | '' = '';\n\n @query('form') form!: HTMLFormElement;\n\n updated(changed: PropertyValues) {\n if (changed.has('plan') && this.plan) {\n this.captureAmountChanges();\n }\n if (changed.has('coverFees')) {\n this.captureAmountChanges();\n }\n if (changed.has('currentlyEditing') && this.currentlyEditing) {\n this.form.focus();\n }\n\n if (changed.has('donationPaymentInfo') && !this.donationPaymentInfo) {\n this.captureAmountChanges();\n }\n }\n\n protected render() {\n return html`\n <section>\n <donation-form-section badgemode=\"hidebadge\" headline=\"Amount\">\n ${!this.currentlyEditing\n ? html`<ia-mgc-form-section-info\n @editingRequested=${() => {\n this.currentlyEditing = true;\n this.clearStatusMessaging();\n }}\n ><span>USD $${this.plan?.amountFormatted}</span>\n </ia-mgc-form-section-info>`\n : nothing}\n ${this.currentlyEditing ? this.editAmountForm : nothing}\n </donation-form-section>\n </section>\n `;\n }\n\n /* External Function that is called by consumer to tell the form there has been data update */\n async amountUpdated(status: 'success' | 'fail') {\n this.clearInputField();\n\n this.updateStatus = status;\n this.updateMessage =\n status === 'success' ? '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 .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"]}
|
|
@@ -42,6 +42,7 @@ export declare class MonthlyPlan {
|
|
|
42
42
|
get id(): string;
|
|
43
43
|
get currencySymbol(): string;
|
|
44
44
|
get amount(): number;
|
|
45
|
+
get amountFormatted(): string;
|
|
45
46
|
setAmount(newAmount: number): void;
|
|
46
47
|
get nextBillingDate(): string;
|
|
47
48
|
setNextBillingDate(newDate: string): void;
|
package/dist/src/models/plan.js
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"plan.js","sourceRoot":"","sources":["../../../src/models/plan.ts"],"names":[],"mappings":"AAsCA,MAAM,OAAO,WAAW;IAOtB,YAAY,IAAU;;QACpB,IAAI,CAAC,IAAI,GAAG,IAAI,CAAC;QACjB,IAAI,CAAC,OAAO,GAAG,IAAI,CAAC,MAAM,CAAC;QAC3B,IAAI,CAAC,QAAQ,GAAG,MAAA,IAAI,CAAC,QAAQ,mCAAI,KAAK,CAAC,CAAC,cAAc;IACxD,CAAC;IAED,IAAI,EAAE;QACJ,yBAAyB;QACzB,OAAO,IAAI,CAAC,IAAI,CAAC,KAAK,CAAC;IACzB,CAAC;IAED,IAAI,cAAc;QAChB,OAAO,IAAI,CAAC,QAAQ,KAAK,KAAK,CAAC,CAAC,CAAC,GAAG,CAAC,CAAC,CAAC,EAAE,CAAC;IAC5C,CAAC;IAED,IAAI,MAAM;QACR,OAAO,IAAI,CAAC,IAAI,CAAC,MAAM,CAAC;IAC1B,CAAC;IAED,SAAS,CAAC,SAAiB;QACzB,IAAI,CAAC,IAAI,CAAC,SAAS,GAAG,IAAI,CAAC,IAAI,CAAC,MAAM,CAAC;QACvC,IAAI,CAAC,IAAI,CAAC,MAAM,GAAG,SAAS,CAAC;IAC/B,CAAC;IAED,IAAI,eAAe;QACjB,uBAAuB;QACvB,OAAO,IAAI,CAAC,OAAO,CAAC,eAAe,CAAC,IAAI,CAAC;IAC3C,CAAC;IAED,kBAAkB,CAAC,OAAe;QAChC,uBAAuB;QACvB,IAAI,CAAC,OAAO,CAAC,eAAe,CAAC,OAAO,GAAG,IAAI,CAAC,OAAO,CAAC,eAAe,CAAC,IAAI,CAAC;QACzE,IAAI,CAAC,OAAO,CAAC,eAAe,CAAC,IAAI,GAAG,OAAO,CAAC;IAC9C,CAAC;IAED,IAAI,qBAAqB;QACvB,MAAM,eAAe,GAAG,IAAI,IAAI,CAC9B,IAAI,CAAC,OAAO,CAAC,eAAe,CAAC,IAAI,CAClC,CAAC,kBAAkB,CAAC,SAAS,EAAE;YAC9B,IAAI,EAAE,SAAS;YACf,KAAK,EAAE,OAAO;YACd,GAAG,EAAE,SAAS;SACf,CAAC,CAAC;QAEH,OAAO,eAAe,aAAf,eAAe,cAAf,eAAe,GAAI,WAAW,CAAC;IACxC,CAAC;IAED,IAAI,qBAAqB;QACvB,IAAI,CAAC,IAAI,CAAC,OAAO,CAAC,eAAe,CAAC,IAAI,EAAE;YACtC,OAAO,EAAE,CAAC;SACX;QAED,MAAM,eAAe,GAAG,IAAI,IAAI,CAC9B,IAAI,CAAC,OAAO,CAAC,eAAe,CAAC,IAAI,CAClC,CAAC,kBAAkB,CAAC,SAAS,EAAE;YAC9B,IAAI,EAAE,SAAS;YACf,KAAK,EAAE,OAAO;YACd,GAAG,EAAE,SAAS;SACf,CAAC,CAAC;QAEH,OAAO,CAAC,GAAG,CAAC,4BAA4B,EAAE,eAAe,CAAC,CAAC;QAE3D,OAAO,eAAe,aAAf,eAAe,cAAf,eAAe,GAAI,WAAW,CAAC;IACxC,CAAC;IAED,IAAI,gBAAgB;QAClB,OAAO,IAAI,CAAC,IAAI,CAAC,WAAW,KAAK,IAAI,CAAC;IACxC,CAAC;IAED,IAAI,MAAM;QACR,OAAO,IAAI,CAAC,IAAI,CAAC,OAAO,CAAC;IAC3B,CAAC;IAED,UAAU;QACR,IAAI,CAAC,IAAI,CAAC,WAAW,GAAG,IAAI,CAAC;IAC/B,CAAC;IAED,iBAAiB,CAAC,cAAsB;QACtC,MAAM,kBAAkB,GAAG,IAAI,CAAC,IAAI,CAAC,YAAY,CAAC;QAClD,IAAI,CAAC,IAAI,CAAC,YAAY,GAAG,cAAc,CAAC;QACxC,IAAI,CAAC,IAAI,CAAC,cAAc,GAAG,kBAAkB,CAAC;IAChD,CAAC;CACF;AAED;;;;;;;;;;;;;;;;;;;;;;;;IAwBI","sourcesContent":["export type BtData = {\n billingDayOfMonth: number;\n nextBillingDate: {\n date: string;\n timezone_type: number;\n timezone: string;\n oldDate?: string; // optional for updates ISO UTC date string\n };\n lastBillingDate: {\n date: string | null;\n timezone_type: number;\n timezone: string;\n };\n status: string; // active, inactive\n paymentMethodType: string; // cc, paypal, venmo, etc\n last4: string | null;\n cardType: string | null;\n expirationMonth: string | null;\n expirationYear: string | null;\n paypalEmail?: string;\n venmoUsername?: string;\n};\n\nexport type Plan = {\n token: string;\n amount: number;\n currency: string;\n start_date: string; // UTC\n is_test: boolean;\n btdata: BtData;\n oldAmount?: number;\n oldDate?: string;\n oldPaymentMethod?: string;\n isCancelled?: boolean;\n processor_id?: string; // used when editing date\n oldProcessorId?: string;\n};\n\nexport class MonthlyPlan {\n plan: Plan;\n\n currency: string;\n\n payment: BtData;\n\n constructor(plan: Plan) {\n this.plan = plan;\n this.payment = plan.btdata;\n this.currency = plan.currency ?? 'USD'; // not in data\n }\n\n get id(): string {\n // use token as unique id\n return this.plan.token;\n }\n\n get currencySymbol(): string {\n return this.currency === 'USD' ? '$' : '';\n }\n\n get amount(): number {\n return this.plan.amount;\n }\n\n setAmount(newAmount: number) {\n this.plan.oldAmount = this.plan.amount;\n this.plan.amount = newAmount;\n }\n\n get nextBillingDate(): string {\n // iso08601 date string\n return this.payment.nextBillingDate.date;\n }\n\n setNextBillingDate(newDate: string) {\n // iso08601 date string\n this.payment.nextBillingDate.oldDate = this.payment.nextBillingDate.date;\n this.payment.nextBillingDate.date = newDate;\n }\n\n get nextBillingDateLocale(): string {\n const nextBillingDate = new Date(\n this.payment.nextBillingDate.date\n ).toLocaleDateString(undefined, {\n year: 'numeric',\n month: 'short',\n day: 'numeric',\n });\n\n return nextBillingDate ?? 'not found';\n }\n\n get lastBillingDateLocale(): string {\n if (!this.payment.lastBillingDate.date) {\n return '';\n }\n\n const lastBillingDate = new Date(\n this.payment.lastBillingDate.date\n ).toLocaleDateString(undefined, {\n year: 'numeric',\n month: 'short',\n day: 'numeric',\n });\n\n console.log('lastBillingDate from model', lastBillingDate);\n\n return lastBillingDate ?? 'not found';\n }\n\n get hasBeenCancelled(): boolean {\n return this.plan.isCancelled === true;\n }\n\n get isTest(): boolean {\n return this.plan.is_test;\n }\n\n cancelPlan(): void {\n this.plan.isCancelled = true;\n }\n\n setNewProcessorId(newProcessorId: string): void {\n const currentProcessorId = this.plan.processor_id;\n this.plan.processor_id = newProcessorId;\n this.plan.oldProcessorId = currentProcessorId;\n }\n}\n\n/*\n\n{\n \"token\": \"eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJpc3MiOiJtYWlsc3luYyIsImlhdCI6MTczODYxNTY3NS41ODA4MTcsIm5iZiI6MTczODYxNTYxNS41ODA4MTcsImV4cCI6MTczODYxNjI3NS41ODA4MTcsImtleSI6eyJwaWQiOiJkd2NrN20iLCJjaWQiOjgwMzUzOCwiYW1vdW50Ijo1LCJwYXltZW50TWV0aG9kVG9rZW4iOiJxMXllYndoaiIsImN1c3RvbWVySWQiOiI4NTQ2MTk4MzUifSwidXNlciI6IkBpc2EtYXQtdGhlLWFyY2hpdmUifQ.TYlkU1ZZLHmj2ahrkTV7JGLmpCPN4BcOeDFPiXVj0pM\",\n \"amount\": 5,\n \"currency\": \"USD\",\n \"start_date\": \"2022-12-09 00:00:00\",\n \"contribution_status_id\": 5,\n \"is_test\": true,\n \"btdata\": {\n \"billingDayOfMonth\": 9,\n \"nextBillingDate\": {\n \"date\": \"2025-02-09 00:00:00.000000\",\n \"timezone_type\": 3,\n \"timezone\": \"UTC\"\n },\n \"status\": \"Active\",\n \"paymentMethodType\": \"creditCard\",\n \"last4\": \"1111\",\n \"cardType\": \"Visa\",\n \"expirationMonth\": \"12\",\n \"expirationYear\": \"2023\"\n }\n}\n */\n"]}
|
|
1
|
+
{"version":3,"file":"plan.js","sourceRoot":"","sources":["../../../src/models/plan.ts"],"names":[],"mappings":"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","sourcesContent":["export type BtData = {\n billingDayOfMonth: number;\n nextBillingDate: {\n date: string;\n timezone_type: number;\n timezone: string;\n oldDate?: string; // optional for updates ISO UTC date string\n };\n lastBillingDate: {\n date: string | null;\n timezone_type: number;\n timezone: string;\n };\n status: string; // active, inactive\n paymentMethodType: string; // cc, paypal, venmo, etc\n last4: string | null;\n cardType: string | null;\n expirationMonth: string | null;\n expirationYear: string | null;\n paypalEmail?: string;\n venmoUsername?: string;\n};\n\nexport type Plan = {\n token: string;\n amount: number;\n currency: string;\n start_date: string; // UTC\n is_test: boolean;\n btdata: BtData;\n oldAmount?: number;\n oldDate?: string;\n oldPaymentMethod?: string;\n isCancelled?: boolean;\n processor_id?: string; // used when editing date\n oldProcessorId?: string;\n};\n\nexport class MonthlyPlan {\n plan: Plan;\n\n currency: string;\n\n payment: BtData;\n\n constructor(plan: Plan) {\n this.plan = plan;\n this.payment = plan.btdata;\n this.currency = plan.currency ?? 'USD'; // not in data\n }\n\n get id(): string {\n // use token as unique id\n return this.plan.token;\n }\n\n get currencySymbol(): string {\n return this.currency === 'USD' ? '$' : '';\n }\n\n get amount(): number {\n return this.plan.amount;\n }\n\n get amountFormatted(): string {\n return this.plan.amount.toFixed(2);\n }\n\n setAmount(newAmount: number) {\n this.plan.oldAmount = this.plan.amount;\n this.plan.amount = newAmount;\n }\n\n get nextBillingDate(): string {\n // iso08601 date string\n return this.payment.nextBillingDate.date;\n }\n\n setNextBillingDate(newDate: string) {\n // iso08601 date string\n this.payment.nextBillingDate.oldDate = this.payment.nextBillingDate.date;\n this.payment.nextBillingDate.date = newDate;\n }\n\n get nextBillingDateLocale(): string {\n const nextBillingDate = new Date(\n this.payment.nextBillingDate.date\n ).toLocaleDateString(undefined, {\n year: 'numeric',\n month: 'short',\n day: 'numeric',\n });\n\n return nextBillingDate ?? 'not found';\n }\n\n get lastBillingDateLocale(): string {\n if (!this.payment.lastBillingDate.date) {\n return '';\n }\n\n const lastBillingDate = new Date(\n this.payment.lastBillingDate.date\n ).toLocaleDateString(undefined, {\n year: 'numeric',\n month: 'short',\n day: 'numeric',\n });\n\n console.log('lastBillingDate from model', lastBillingDate);\n\n return lastBillingDate ?? 'not found';\n }\n\n get hasBeenCancelled(): boolean {\n return this.plan.isCancelled === true;\n }\n\n get isTest(): boolean {\n return this.plan.is_test;\n }\n\n cancelPlan(): void {\n this.plan.isCancelled = true;\n }\n\n setNewProcessorId(newProcessorId: string): void {\n const currentProcessorId = this.plan.processor_id;\n this.plan.processor_id = newProcessorId;\n this.plan.oldProcessorId = currentProcessorId;\n }\n}\n\n/*\n\n{\n \"token\": \"eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJpc3MiOiJtYWlsc3luYyIsImlhdCI6MTczODYxNTY3NS41ODA4MTcsIm5iZiI6MTczODYxNTYxNS41ODA4MTcsImV4cCI6MTczODYxNjI3NS41ODA4MTcsImtleSI6eyJwaWQiOiJkd2NrN20iLCJjaWQiOjgwMzUzOCwiYW1vdW50Ijo1LCJwYXltZW50TWV0aG9kVG9rZW4iOiJxMXllYndoaiIsImN1c3RvbWVySWQiOiI4NTQ2MTk4MzUifSwidXNlciI6IkBpc2EtYXQtdGhlLWFyY2hpdmUifQ.TYlkU1ZZLHmj2ahrkTV7JGLmpCPN4BcOeDFPiXVj0pM\",\n \"amount\": 5,\n \"currency\": \"USD\",\n \"start_date\": \"2022-12-09 00:00:00\",\n \"contribution_status_id\": 5,\n \"is_test\": true,\n \"btdata\": {\n \"billingDayOfMonth\": 9,\n \"nextBillingDate\": {\n \"date\": \"2025-02-09 00:00:00.000000\",\n \"timezone_type\": 3,\n \"timezone\": \"UTC\"\n },\n \"status\": \"Active\",\n \"paymentMethodType\": \"creditCard\",\n \"last4\": \"1111\",\n \"cardType\": \"Visa\",\n \"expirationMonth\": \"12\",\n \"expirationYear\": \"2023\"\n }\n}\n */\n"]}
|
package/dist/src/plans.js
CHANGED
|
@@ -30,7 +30,7 @@ let IauxMgcPlans = class IauxMgcPlans extends LitElement {
|
|
|
30
30
|
<h3>Amount</h3>
|
|
31
31
|
<p>
|
|
32
32
|
${plan.currency}
|
|
33
|
-
${plan.currencySymbol}${plan.
|
|
33
|
+
${plan.currencySymbol}${plan.amountFormatted}/month
|
|
34
34
|
</p>
|
|
35
35
|
${plan.isTest
|
|
36
36
|
? html `<p class="is-test">(Test payment)</p>`
|
package/dist/src/plans.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"plans.js","sourceRoot":"","sources":["../../src/plans.ts"],"names":[],"mappings":";AAAA,sCAAsC;AACtC,OAAO,EAAE,UAAU,EAAE,IAAI,EAAE,GAAG,EAAE,OAAO,EAAE,MAAM,KAAK,CAAC;AACrD,OAAO,EAAE,aAAa,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAC;AAI5D,OAAO,6BAA6B,CAAC;AAIrC,IAAa,YAAY,GAAzB,MAAa,YAAa,SAAQ,UAAU;IAA5C;;QAC6B,UAAK,GAAG,EAAE,CAAC;QAEM,YAAO,GAAG,KAAK,CAAC;IA+L9D,CAAC;IA7LW,MAAM;QACd,OAAO,IAAI,CAAA;;;YAGH,IAAI,CAAC,KAAK,CAAC,GAAG,CAAC,CAAC,IAAiB,EAAE,EAAE;;YACrC,IAAI,UAAU,GACZ,MAAA,MAAA,IAAI,CAAC,OAAO,0CAAE,iBAAiB,mCAAI,kBAAkB,CAAC;YACxD,IAAI,UAAU,KAAK,YAAY,EAAE;gBAC/B,UAAU,GAAG,aAAa,CAAC;aAC5B;YACD,MAAM,QAAQ,GAAG,MAAA,MAAA,IAAI,CAAC,OAAO,0CAAE,QAAQ,mCAAI,qBAAqB,CAAC;YACjE,MAAM,KAAK,GAAG,CAAA,MAAA,IAAI,CAAC,OAAO,0CAAE,KAAK;gBAC/B,CAAC,CAAC,MAAM,MAAA,IAAI,CAAC,OAAO,0CAAE,KAAK,EAAE;gBAC7B,CAAC,CAAC,qBAAqB,CAAC;YAE1B,OAAO,IAAI,CAAA;0BACG,GAAG,IAAI,CAAC,IAAI,CAAC,WAAW,CAAC,CAAC,CAAC,WAAW,CAAC,CAAC,CAAC,EAAE,EAAE;;;;;wBAK/C,IAAI,CAAC,QAAQ;wBACb,IAAI,CAAC,cAAc,GAAG,IAAI,CAAC,
|
|
1
|
+
{"version":3,"file":"plans.js","sourceRoot":"","sources":["../../src/plans.ts"],"names":[],"mappings":"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","sourcesContent":["/* eslint-disable no-param-reassign */\nimport { LitElement, html, css, nothing } from 'lit';\nimport { customElement, property } from 'lit/decorators.js';\n\nimport type { MonthlyPlan } from './models/plan';\n\nimport './presentational/mgc-button';\nimport type { MGCButton } from './presentational/mgc-button';\n\n@customElement('ia-mgc-plans')\nexport class IauxMgcPlans extends LitElement {\n @property({ type: Array }) plans = [];\n\n @property({ type: Boolean, reflect: true }) canEdit = false;\n\n protected render() {\n return html`\n <section class=\"monthly-giving-circle\">\n <ul>\n ${this.plans.map((plan: MonthlyPlan) => {\n let methodType =\n plan.payment?.paymentMethodType ?? 'Method not found';\n if (methodType === 'creditCard') {\n methodType = 'Credit card';\n }\n const cardType = plan.payment?.cardType ?? 'Card type not found';\n const last4 = plan.payment?.last4\n ? `...${plan.payment?.last4}`\n : 'CC number not found';\n\n return html`\n <li class=${`${plan.plan.isCancelled ? 'cancelled' : ''}`}>\n <div class=\"info\">\n <div class=\"amount\">\n <h3>Amount</h3>\n <p>\n ${plan.currency}\n ${plan.currencySymbol}${plan.amountFormatted}/month\n </p>\n ${plan.isTest\n ? html`<p class=\"is-test\">(Test payment)</p>`\n : nothing}\n </div>\n <div class=\"payment-details\">\n <h3>Method</h3>\n <p>${methodType}</p>\n ${plan.payment?.paymentMethodType === 'creditCard'\n ? html`<p>${cardType}</p>\n <p>${last4}</p>`\n : nothing}\n ${plan.payment?.paymentMethodType === 'Paypal'\n ? html`<p>\n Paypal email:\n <a href=${`mailto:${plan.payment?.paypalEmail}`}\n >${plan.payment?.paypalEmail}</a\n >\n </p>`\n : nothing}\n ${plan.payment?.paymentMethodType === 'Venmo'\n ? html`<p>\n Venmo username:\n <a href=${`mailto:${plan.payment?.venmoUsername}`}\n >${plan.payment?.paypalEmail}</a\n >\n </p>`\n : nothing}\n ${plan.payment?.paymentMethodType !== 'creditCard'\n ? html`<p>\n Expires:\n ${plan.payment?.expirationMonth ??\n 'month not found'}/${plan.payment?.expirationYear ??\n 'year not found'}\n </p>`\n : nothing}\n </div>\n <div class=\"next-donation\">\n <h3>Next Donation</h3>\n <p>${plan.nextBillingDateLocale}</p>\n </div>\n </div>\n ${this.planCTA(plan)}\n </li>\n `;\n })}\n </ul>\n </section>\n `;\n }\n\n planCTA(plan: MonthlyPlan) {\n if (!this.canEdit) {\n const mailToText = `mailto:donations@archive.org?subject=I'd like to update my monthly donation`;\n return html`<p class=\"email-edit-plan\">\n Need to update your plan further? Please email us at\n <a href=${mailToText}>donations@archive.org</a>.\n </p>`;\n }\n\n const ctaText = plan.plan.isCancelled\n ? 'Plan is cancelled'\n : 'Manage this monthly donation';\n\n return html`<ia-mgc-button\n class=\"ia-button link edit-donation\"\n .isDisabled=${plan.plan.isCancelled}\n .clickHandler=${async (e: Event, iaButton: MGCButton) => {\n // disable button\n iaButton.isDisabled = true;\n // open form\n this.dispatchEvent(\n new CustomEvent('editThisPlan', { detail: { plan } })\n );\n }}\n >${ctaText}</ia-mgc-button\n >`;\n }\n\n static styles = css`\n :host {\n max-height: 500px;\n overflow-y: auto;\n display: block;\n }\n\n .is-test {\n font-size: 0.8rem;\n }\n\n li {\n border: 1px solid #23765d;\n background-color: #eeffee;\n display: block;\n width: inherit;\n }\n li.cancelled {\n background-color: lightgoldenrodyellow;\n }\n table {\n width: 100%;\n text-align: left;\n max-width: 600px;\n }\n\n ul {\n padding: 0;\n list-style-type: none;\n margin: 0;\n }\n\n ul li {\n border: 1px solid #23765d;\n background-color: #eeffee;\n margin: 0.5rem 0;\n padding: 0.5rem 0.5rem 1rem 0.5rem;\n position: relative;\n }\n\n ul li button.edit-donation {\n height: 30px;\n display: block;\n position: absolute;\n bottom: 0;\n }\n\n ul li .info {\n display: grid;\n min-height: 90px;\n grid-template-columns: 0.5fr 1fr 0.5fr;\n grid-template-rows: 1fr;\n gap: 0px 5px;\n grid-auto-flow: row;\n grid-template-areas: 'amount details next-donation';\n }\n\n ul li .info .amount {\n grid-area: amount;\n }\n\n ul li .info .payment-details {\n grid-area: details;\n }\n\n ul li .info .next-donation {\n grid-area: next-donation;\n }\n\n ul li .info > * {\n margin: 0 0 0.5rem 0;\n }\n\n ul li .info > * > * {\n margin: 0;\n }\n\n .email-edit-plan {\n margin-bottom: 0;\n }\n\n @media screen and (max-width: 500px) {\n ul li .info {\n display: block;\n }\n }\n `;\n}\n"]}
|
package/package.json
CHANGED
|
@@ -66,7 +66,7 @@ export class MGCEditPlanAmount extends LitElement {
|
|
|
66
66
|
this.currentlyEditing = true;
|
|
67
67
|
this.clearStatusMessaging();
|
|
68
68
|
}}
|
|
69
|
-
><span>USD $${this.plan?.
|
|
69
|
+
><span>USD $${this.plan?.amountFormatted}</span>
|
|
70
70
|
</ia-mgc-form-section-info>`
|
|
71
71
|
: nothing}
|
|
72
72
|
${this.currentlyEditing ? this.editAmountForm : nothing}
|
|
@@ -258,7 +258,7 @@ export class MGCEditPlanAmount extends LitElement {
|
|
|
258
258
|
id="edit-plan-amount"
|
|
259
259
|
@submit=${(e: Event) => this.handleSubmit(e)}
|
|
260
260
|
>
|
|
261
|
-
<p>Current donation amount: $${this.plan?.
|
|
261
|
+
<p>Current donation amount: $${this.plan?.amountFormatted}</p>
|
|
262
262
|
<div>
|
|
263
263
|
$
|
|
264
264
|
<input
|
package/src/models/plan.ts
CHANGED
package/src/plans.ts
CHANGED
|
@@ -35,7 +35,7 @@ export class IauxMgcPlans extends LitElement {
|
|
|
35
35
|
<h3>Amount</h3>
|
|
36
36
|
<p>
|
|
37
37
|
${plan.currency}
|
|
38
|
-
${plan.currencySymbol}${plan.
|
|
38
|
+
${plan.currencySymbol}${plan.amountFormatted}/month
|
|
39
39
|
</p>
|
|
40
40
|
${plan.isTest
|
|
41
41
|
? html`<p class="is-test">(Test payment)</p>`
|
|
File without changes
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"payment-method.js","sourceRoot":"","sources":["../../../src/form-sections/payment-method.ts"],"names":[],"mappings":"","sourcesContent":[""]}
|
|
File without changes
|