@internetarchive/donation-monthly-portal 7.0.4 → 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 +5 -2
- package/dist/src/models/plan.js +11 -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 +17 -2
- package/src/plans.ts +1 -1
|
@@ -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"]}
|
|
@@ -7,7 +7,7 @@ export declare type BtData = {
|
|
|
7
7
|
oldDate?: string;
|
|
8
8
|
};
|
|
9
9
|
lastBillingDate: {
|
|
10
|
-
date: string;
|
|
10
|
+
date: string | null;
|
|
11
11
|
timezone_type: number;
|
|
12
12
|
timezone: string;
|
|
13
13
|
};
|
|
@@ -19,7 +19,6 @@ export declare type BtData = {
|
|
|
19
19
|
expirationYear: string | null;
|
|
20
20
|
paypalEmail?: string;
|
|
21
21
|
venmoUsername?: string;
|
|
22
|
-
processorId?: string;
|
|
23
22
|
};
|
|
24
23
|
export declare type Plan = {
|
|
25
24
|
token: string;
|
|
@@ -32,6 +31,8 @@ export declare type Plan = {
|
|
|
32
31
|
oldDate?: string;
|
|
33
32
|
oldPaymentMethod?: string;
|
|
34
33
|
isCancelled?: boolean;
|
|
34
|
+
processor_id?: string;
|
|
35
|
+
oldProcessorId?: string;
|
|
35
36
|
};
|
|
36
37
|
export declare class MonthlyPlan {
|
|
37
38
|
plan: Plan;
|
|
@@ -41,6 +42,7 @@ export declare class MonthlyPlan {
|
|
|
41
42
|
get id(): string;
|
|
42
43
|
get currencySymbol(): string;
|
|
43
44
|
get amount(): number;
|
|
45
|
+
get amountFormatted(): string;
|
|
44
46
|
setAmount(newAmount: number): void;
|
|
45
47
|
get nextBillingDate(): string;
|
|
46
48
|
setNextBillingDate(newDate: string): void;
|
|
@@ -49,4 +51,5 @@ export declare class MonthlyPlan {
|
|
|
49
51
|
get hasBeenCancelled(): boolean;
|
|
50
52
|
get isTest(): boolean;
|
|
51
53
|
cancelPlan(): void;
|
|
54
|
+
setNewProcessorId(newProcessorId: string): void;
|
|
52
55
|
}
|
package/dist/src/models/plan.js
CHANGED
|
@@ -15,6 +15,9 @@ export class MonthlyPlan {
|
|
|
15
15
|
get amount() {
|
|
16
16
|
return this.plan.amount;
|
|
17
17
|
}
|
|
18
|
+
get amountFormatted() {
|
|
19
|
+
return this.plan.amount.toFixed(2);
|
|
20
|
+
}
|
|
18
21
|
setAmount(newAmount) {
|
|
19
22
|
this.plan.oldAmount = this.plan.amount;
|
|
20
23
|
this.plan.amount = newAmount;
|
|
@@ -37,6 +40,9 @@ export class MonthlyPlan {
|
|
|
37
40
|
return nextBillingDate !== null && nextBillingDate !== void 0 ? nextBillingDate : 'not found';
|
|
38
41
|
}
|
|
39
42
|
get lastBillingDateLocale() {
|
|
43
|
+
if (!this.payment.lastBillingDate.date) {
|
|
44
|
+
return '';
|
|
45
|
+
}
|
|
40
46
|
const lastBillingDate = new Date(this.payment.lastBillingDate.date).toLocaleDateString(undefined, {
|
|
41
47
|
year: 'numeric',
|
|
42
48
|
month: 'short',
|
|
@@ -54,6 +60,11 @@ export class MonthlyPlan {
|
|
|
54
60
|
cancelPlan() {
|
|
55
61
|
this.plan.isCancelled = true;
|
|
56
62
|
}
|
|
63
|
+
setNewProcessorId(newProcessorId) {
|
|
64
|
+
const currentProcessorId = this.plan.processor_id;
|
|
65
|
+
this.plan.processor_id = newProcessorId;
|
|
66
|
+
this.plan.oldProcessorId = currentProcessorId;
|
|
67
|
+
}
|
|
57
68
|
}
|
|
58
69
|
/*
|
|
59
70
|
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"plan.js","sourceRoot":"","sources":["../../../src/models/plan.ts"],"names":[],"mappings":"
|
|
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
|
@@ -7,7 +7,7 @@ export type BtData = {
|
|
|
7
7
|
oldDate?: string; // optional for updates ISO UTC date string
|
|
8
8
|
};
|
|
9
9
|
lastBillingDate: {
|
|
10
|
-
date: string;
|
|
10
|
+
date: string | null;
|
|
11
11
|
timezone_type: number;
|
|
12
12
|
timezone: string;
|
|
13
13
|
};
|
|
@@ -19,7 +19,6 @@ export type BtData = {
|
|
|
19
19
|
expirationYear: string | null;
|
|
20
20
|
paypalEmail?: string;
|
|
21
21
|
venmoUsername?: string;
|
|
22
|
-
processorId?: string; // used when editing date
|
|
23
22
|
};
|
|
24
23
|
|
|
25
24
|
export type Plan = {
|
|
@@ -33,6 +32,8 @@ export type Plan = {
|
|
|
33
32
|
oldDate?: string;
|
|
34
33
|
oldPaymentMethod?: string;
|
|
35
34
|
isCancelled?: boolean;
|
|
35
|
+
processor_id?: string; // used when editing date
|
|
36
|
+
oldProcessorId?: string;
|
|
36
37
|
};
|
|
37
38
|
|
|
38
39
|
export class MonthlyPlan {
|
|
@@ -61,6 +62,10 @@ export class MonthlyPlan {
|
|
|
61
62
|
return this.plan.amount;
|
|
62
63
|
}
|
|
63
64
|
|
|
65
|
+
get amountFormatted(): string {
|
|
66
|
+
return this.plan.amount.toFixed(2);
|
|
67
|
+
}
|
|
68
|
+
|
|
64
69
|
setAmount(newAmount: number) {
|
|
65
70
|
this.plan.oldAmount = this.plan.amount;
|
|
66
71
|
this.plan.amount = newAmount;
|
|
@@ -90,6 +95,10 @@ export class MonthlyPlan {
|
|
|
90
95
|
}
|
|
91
96
|
|
|
92
97
|
get lastBillingDateLocale(): string {
|
|
98
|
+
if (!this.payment.lastBillingDate.date) {
|
|
99
|
+
return '';
|
|
100
|
+
}
|
|
101
|
+
|
|
93
102
|
const lastBillingDate = new Date(
|
|
94
103
|
this.payment.lastBillingDate.date
|
|
95
104
|
).toLocaleDateString(undefined, {
|
|
@@ -114,6 +123,12 @@ export class MonthlyPlan {
|
|
|
114
123
|
cancelPlan(): void {
|
|
115
124
|
this.plan.isCancelled = true;
|
|
116
125
|
}
|
|
126
|
+
|
|
127
|
+
setNewProcessorId(newProcessorId: string): void {
|
|
128
|
+
const currentProcessorId = this.plan.processor_id;
|
|
129
|
+
this.plan.processor_id = newProcessorId;
|
|
130
|
+
this.plan.oldProcessorId = currentProcessorId;
|
|
131
|
+
}
|
|
117
132
|
}
|
|
118
133
|
|
|
119
134
|
/*
|
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>`
|