@internetarchive/donation-monthly-portal 0.0.0-amount2 → 0.0.0-amount4
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.d.ts +1 -1
- package/dist/src/form-sections/amount.js +32 -15
- package/dist/src/form-sections/amount.js.map +1 -1
- package/dist/src/form-sections/cancel.js +6 -2
- package/dist/src/form-sections/cancel.js.map +1 -1
- package/dist/src/form-sections/date.js +0 -4
- package/dist/src/form-sections/date.js.map +1 -1
- package/dist/src/monthly-giving-circle.js +1 -1
- package/dist/src/monthly-giving-circle.js.map +1 -1
- package/package.json +1 -1
- package/src/form-sections/amount.ts +35 -15
- package/src/form-sections/cancel.ts +6 -2
- package/src/form-sections/date.ts +0 -3
- package/src/monthly-giving-circle.ts +1 -1
|
@@ -19,7 +19,7 @@ export declare class MGCEditPlanAmount extends LitElement {
|
|
|
19
19
|
protected render(): import("lit").TemplateResult<1>;
|
|
20
20
|
totalAmountWithFees(): number;
|
|
21
21
|
get coveredFeesText(): string;
|
|
22
|
-
closeForm():
|
|
22
|
+
closeForm(): void;
|
|
23
23
|
requestAmountUpdate(e: Event): void;
|
|
24
24
|
amountUpdated(status: 'success' | 'fail'): Promise<void>;
|
|
25
25
|
get editAmountForm(): import("lit").TemplateResult<1>;
|
|
@@ -64,11 +64,18 @@ let MGCEditPlanAmount = class MGCEditPlanAmount extends LitElement {
|
|
|
64
64
|
<section>
|
|
65
65
|
<donation-form-section badgemode="hidebadge" headline="Amount">
|
|
66
66
|
${!this.currentlyEditing
|
|
67
|
-
? html
|
|
67
|
+
? html ` <p>
|
|
68
|
+
USD $${(_a = this.plan) === null || _a === void 0 ? void 0 : _a.amount}
|
|
69
|
+
<ia-mgc-update-status .status=${this.updateStatus}
|
|
70
|
+
>${this.updateMessage}</ia-mgc-update-status
|
|
71
|
+
>
|
|
72
|
+
</p>
|
|
68
73
|
<ia-button
|
|
69
74
|
class="ia-button link"
|
|
70
75
|
@click=${() => {
|
|
71
76
|
this.currentlyEditing = true;
|
|
77
|
+
this.updateStatus = '';
|
|
78
|
+
this.updateMessage = '';
|
|
72
79
|
}}
|
|
73
80
|
>
|
|
74
81
|
Edit...
|
|
@@ -94,7 +101,7 @@ let MGCEditPlanAmount = class MGCEditPlanAmount extends LitElement {
|
|
|
94
101
|
}
|
|
95
102
|
return `I'll generously add $${(_b = this.donationPaymentInfo) === null || _b === void 0 ? void 0 : _b.feeAmountCovered} to cover fees.`;
|
|
96
103
|
}
|
|
97
|
-
|
|
104
|
+
closeForm() {
|
|
98
105
|
const input = this.form.querySelector('input[name="amount"]');
|
|
99
106
|
input.value = '';
|
|
100
107
|
this.donationPaymentInfo = undefined;
|
|
@@ -104,7 +111,6 @@ let MGCEditPlanAmount = class MGCEditPlanAmount extends LitElement {
|
|
|
104
111
|
this.errorMessage = '';
|
|
105
112
|
this.updateMessage = '';
|
|
106
113
|
this.updateStatus = '';
|
|
107
|
-
await this.updateComplete;
|
|
108
114
|
}
|
|
109
115
|
requestAmountUpdate(e) {
|
|
110
116
|
var _a, _b, _c, _d, _e;
|
|
@@ -130,15 +136,22 @@ let MGCEditPlanAmount = class MGCEditPlanAmount extends LitElement {
|
|
|
130
136
|
this.errorMessage = '';
|
|
131
137
|
}
|
|
132
138
|
async amountUpdated(status) {
|
|
139
|
+
this.updateStatus = status;
|
|
140
|
+
this.updateMessage =
|
|
141
|
+
status === 'success' ? 'Amount updated' : 'Failed. Try again.';
|
|
142
|
+
if (status === 'success') {
|
|
143
|
+
this.closeForm();
|
|
144
|
+
await this.updateComplete;
|
|
145
|
+
this.updateStatus = status;
|
|
146
|
+
this.updateMessage = 'Amount updated';
|
|
147
|
+
return;
|
|
148
|
+
}
|
|
133
149
|
this.form.querySelector('ia-button#update-amount').isDisabled = false;
|
|
134
150
|
// empty the input field
|
|
135
151
|
const input = this.form.querySelector('input[name="amount"]');
|
|
136
152
|
input.value = '';
|
|
137
153
|
this.newAmount = 0;
|
|
138
154
|
this.captureAmountChanges();
|
|
139
|
-
this.updateStatus = status;
|
|
140
|
-
this.updateMessage =
|
|
141
|
-
status === 'success' ? 'Amount updated' : 'Failed. Try again.';
|
|
142
155
|
await this.updateComplete;
|
|
143
156
|
// setTimeout(() => {
|
|
144
157
|
// this.updateStatus = '';
|
|
@@ -146,23 +159,17 @@ let MGCEditPlanAmount = class MGCEditPlanAmount extends LitElement {
|
|
|
146
159
|
// }, 3000);
|
|
147
160
|
}
|
|
148
161
|
get editAmountForm() {
|
|
149
|
-
var _a
|
|
162
|
+
var _a;
|
|
150
163
|
return html `
|
|
151
164
|
<section>
|
|
152
165
|
<form id="edit-plan-amount">
|
|
153
166
|
<p>Current donation amount: $${(_a = this.plan) === null || _a === void 0 ? void 0 : _a.amount}</p>
|
|
154
|
-
${((_b = this.plan) === null || _b === void 0 ? void 0 : _b.plan.oldAmount)
|
|
155
|
-
? html `<p>
|
|
156
|
-
Previous donation amount: $${(_c = this.plan) === null || _c === void 0 ? void 0 : _c.plan.oldAmount}
|
|
157
|
-
</p>`
|
|
158
|
-
: nothing}
|
|
159
167
|
<div>
|
|
160
168
|
$
|
|
161
169
|
<input
|
|
162
170
|
type="number"
|
|
163
171
|
id="amount"
|
|
164
172
|
name="amount"
|
|
165
|
-
placeholder="Enter new amount"
|
|
166
173
|
required="true"
|
|
167
174
|
@input=${(e) => {
|
|
168
175
|
const newAmount = Number(e.target.value);
|
|
@@ -173,7 +180,7 @@ let MGCEditPlanAmount = class MGCEditPlanAmount extends LitElement {
|
|
|
173
180
|
/ month
|
|
174
181
|
</div>
|
|
175
182
|
<div>
|
|
176
|
-
<div class="checkbox-option-container"
|
|
183
|
+
<div class="checkbox-option-container">
|
|
177
184
|
<input
|
|
178
185
|
type="checkbox"
|
|
179
186
|
id="cover-fees"
|
|
@@ -204,7 +211,7 @@ let MGCEditPlanAmount = class MGCEditPlanAmount extends LitElement {
|
|
|
204
211
|
.clickHandler=${async (e, iaButton) => {
|
|
205
212
|
this.errorMessage = '';
|
|
206
213
|
if (!this.newAmount) {
|
|
207
|
-
this.errorMessage = 'Please enter a
|
|
214
|
+
this.errorMessage = 'Please enter a new amount';
|
|
208
215
|
return;
|
|
209
216
|
}
|
|
210
217
|
// eslint-disable-next-line no-param-reassign
|
|
@@ -254,6 +261,16 @@ MGCEditPlanAmount.styles = css `
|
|
|
254
261
|
p.error {
|
|
255
262
|
color: red;
|
|
256
263
|
}
|
|
264
|
+
|
|
265
|
+
ia-mgc-update-status {
|
|
266
|
+
display: inline-block;
|
|
267
|
+
margin-left: 1rem;
|
|
268
|
+
}
|
|
269
|
+
|
|
270
|
+
.checkbox-option-container {
|
|
271
|
+
margin: 10px 0;
|
|
272
|
+
display: flex;
|
|
273
|
+
}
|
|
257
274
|
`;
|
|
258
275
|
__decorate([
|
|
259
276
|
property({ type: Object })
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"amount.js","sourceRoot":"","sources":["../../../src/form-sections/amount.ts"],"names":[],"mappings":"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","sourcesContent":["import { LitElement, html, PropertyValues, nothing, css } 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/ia-button';\nimport type { IauxButton } from '../presentational/ia-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 }) 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 captureAmountChanges(newAmount?: number) {\n if (!this.donationPaymentInfo && this.plan) {\n this.donationPaymentInfo = new DonationPaymentInfo({\n donationType: DonationType.Monthly,\n amount: 0,\n coverFees: this.coverFees,\n });\n return;\n }\n\n let newPlan;\n if (newAmount) {\n newPlan = new DonationPaymentInfo({\n donationType: DonationType.Monthly,\n amount: newAmount,\n coverFees: this.coverFees,\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: this.coverFees,\n });\n }\n\n this.donationPaymentInfo = newPlan;\n }\n\n protected render() {\n return html`\n <section>\n <donation-form-section badgemode=\"hidebadge\" headline=\"Amount\">\n ${!this.currentlyEditing\n ? html`<p>USD $${this.plan?.amount}</p>\n <ia-button\n class=\"ia-button link\"\n @click=${() => {\n this.currentlyEditing = true;\n }}\n >\n Edit...\n </ia-button>`\n : nothing}\n ${this.currentlyEditing ? this.editAmountForm : nothing}\n </donation-form-section>\n </section>\n `;\n }\n\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 const newAmountInput = this.querySelector('input#amount');\n const noFees = !this.donationPaymentInfo?.feeAmountCovered;\n if (!newAmountInput || noFees) {\n return `I'll generously cover fees`;\n }\n return `I'll generously add $${this.donationPaymentInfo?.feeAmountCovered} to cover fees.`;\n }\n\n async closeForm() {\n const input = this.form.querySelector(\n 'input[name=\"amount\"]'\n ) as HTMLInputElement;\n input.value = '';\n this.donationPaymentInfo = undefined;\n this.currentlyEditing = false;\n this.coverFees = false;\n this.newAmount = 0;\n this.errorMessage = '';\n this.updateMessage = '';\n this.updateStatus = '';\n await this.updateComplete;\n }\n\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 this.errorMessage = '';\n }\n\n async amountUpdated(status: 'success' | 'fail') {\n (\n this.form.querySelector('ia-button#update-amount') as IauxButton\n ).isDisabled = false;\n\n // empty the input field\n const input = this.form.querySelector(\n 'input[name=\"amount\"]'\n ) as HTMLInputElement;\n input.value = '';\n this.newAmount = 0;\n this.captureAmountChanges();\n\n this.updateStatus = status;\n this.updateMessage =\n status === 'success' ? 'Amount updated' : 'Failed. Try again.';\n\n await this.updateComplete;\n\n // setTimeout(() => {\n // this.updateStatus = '';\n // this.updateMessage = '';\n // }, 3000);\n }\n\n get editAmountForm() {\n return html`\n <section>\n <form id=\"edit-plan-amount\">\n <p>Current donation amount: $${this.plan?.amount}</p>\n ${this.plan?.plan.oldAmount\n ? html`<p>\n Previous donation amount: $${this.plan?.plan.oldAmount}\n </p>`\n : nothing}\n <div>\n $\n <input\n type=\"number\"\n id=\"amount\"\n name=\"amount\"\n placeholder=\"Enter new amount\"\n required=\"true\"\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\" style=\"display: flex;\">\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 }}\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-button\n class=\"ia-button secondary\"\n .clickHandler=${(e: Event) => {\n e.preventDefault();\n this.closeForm();\n }}\n >\n Cancel\n </ia-button>\n <ia-button\n id=\"update-amount\"\n class=\"ia-button primary\"\n type=\"submit\"\n .clickHandler=${async (e: Event, iaButton: IauxButton) => {\n this.errorMessage = '';\n\n if (!this.newAmount) {\n this.errorMessage = 'Please enter a valid amount';\n return;\n }\n\n // eslint-disable-next-line no-param-reassign\n (iaButton as IauxButton).isDisabled = true;\n await iaButton.updateComplete;\n\n // check if request is in range\n const input = this.form.querySelector(\n 'input[name=\"amount\"]'\n ) as HTMLInputElement;\n const requestedAmount = Number(input.value);\n if ((requestedAmount ?? 0) >= 9999) {\n this.errorMessage = 'Amount must be less than $9,999';\n // eslint-disable-next-line no-param-reassign\n (iaButton as IauxButton).isDisabled = false;\n await iaButton.updateComplete;\n return;\n }\n\n this.requestAmountUpdate(e);\n }}\n >\n Update\n </ia-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: red;\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 { LitElement, html, PropertyValues, nothing, css } 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/ia-button';\nimport type { IauxButton } from '../presentational/ia-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 }) 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 captureAmountChanges(newAmount?: number) {\n if (!this.donationPaymentInfo && this.plan) {\n this.donationPaymentInfo = new DonationPaymentInfo({\n donationType: DonationType.Monthly,\n amount: 0,\n coverFees: this.coverFees,\n });\n return;\n }\n\n let newPlan;\n if (newAmount) {\n newPlan = new DonationPaymentInfo({\n donationType: DonationType.Monthly,\n amount: newAmount,\n coverFees: this.coverFees,\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: this.coverFees,\n });\n }\n\n this.donationPaymentInfo = newPlan;\n }\n\n protected render() {\n return html`\n <section>\n <donation-form-section badgemode=\"hidebadge\" headline=\"Amount\">\n ${!this.currentlyEditing\n ? html` <p>\n USD $${this.plan?.amount}\n <ia-mgc-update-status .status=${this.updateStatus}\n >${this.updateMessage}</ia-mgc-update-status\n >\n </p>\n <ia-button\n class=\"ia-button link\"\n @click=${() => {\n this.currentlyEditing = true;\n this.updateStatus = '';\n this.updateMessage = '';\n }}\n >\n Edit...\n </ia-button>`\n : nothing}\n ${this.currentlyEditing ? this.editAmountForm : nothing}\n </donation-form-section>\n </section>\n `;\n }\n\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 const newAmountInput = this.querySelector('input#amount');\n const noFees = !this.donationPaymentInfo?.feeAmountCovered;\n if (!newAmountInput || noFees) {\n return `I'll generously cover fees`;\n }\n return `I'll generously add $${this.donationPaymentInfo?.feeAmountCovered} to cover fees.`;\n }\n\n closeForm() {\n const input = this.form.querySelector(\n 'input[name=\"amount\"]'\n ) as HTMLInputElement;\n input.value = '';\n this.donationPaymentInfo = undefined;\n this.currentlyEditing = false;\n this.coverFees = false;\n this.newAmount = 0;\n this.errorMessage = '';\n this.updateMessage = '';\n this.updateStatus = '';\n }\n\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 this.errorMessage = '';\n }\n\n async amountUpdated(status: 'success' | 'fail') {\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-button#update-amount') as IauxButton\n ).isDisabled = false;\n\n // empty the input field\n const input = this.form.querySelector(\n 'input[name=\"amount\"]'\n ) as HTMLInputElement;\n input.value = '';\n this.newAmount = 0;\n this.captureAmountChanges();\n\n await this.updateComplete;\n\n // setTimeout(() => {\n // this.updateStatus = '';\n // this.updateMessage = '';\n // }, 3000);\n }\n\n get editAmountForm() {\n return html`\n <section>\n <form id=\"edit-plan-amount\">\n <p>Current donation amount: $${this.plan?.amount}</p>\n <div>\n $\n <input\n type=\"number\"\n id=\"amount\"\n name=\"amount\"\n required=\"true\"\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 }}\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-button\n class=\"ia-button secondary\"\n .clickHandler=${(e: Event) => {\n e.preventDefault();\n this.closeForm();\n }}\n >\n Cancel\n </ia-button>\n <ia-button\n id=\"update-amount\"\n class=\"ia-button primary\"\n type=\"submit\"\n .clickHandler=${async (e: Event, iaButton: IauxButton) => {\n this.errorMessage = '';\n\n if (!this.newAmount) {\n this.errorMessage = 'Please enter a new amount';\n return;\n }\n\n // eslint-disable-next-line no-param-reassign\n (iaButton as IauxButton).isDisabled = true;\n await iaButton.updateComplete;\n\n // check if request is in range\n const input = this.form.querySelector(\n 'input[name=\"amount\"]'\n ) as HTMLInputElement;\n const requestedAmount = Number(input.value);\n if ((requestedAmount ?? 0) >= 9999) {\n this.errorMessage = 'Amount must be less than $9,999';\n // eslint-disable-next-line no-param-reassign\n (iaButton as IauxButton).isDisabled = false;\n await iaButton.updateComplete;\n return;\n }\n\n this.requestAmountUpdate(e);\n }}\n >\n Update\n </ia-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: red;\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"]}
|
|
@@ -29,7 +29,7 @@ let IauxMgcCancelPlan = class IauxMgcCancelPlan extends LitElement {
|
|
|
29
29
|
}
|
|
30
30
|
return html `
|
|
31
31
|
<ia-button
|
|
32
|
-
class="clear-container"
|
|
32
|
+
class="clear-container slim"
|
|
33
33
|
.clickHandler=${(e, iaButton) => {
|
|
34
34
|
// eslint-disable-next-line no-param-reassign
|
|
35
35
|
iaButton.isDisabled = true;
|
|
@@ -104,6 +104,9 @@ let IauxMgcCancelPlan = class IauxMgcCancelPlan extends LitElement {
|
|
|
104
104
|
}
|
|
105
105
|
};
|
|
106
106
|
IauxMgcCancelPlan.styles = css `
|
|
107
|
+
:host {
|
|
108
|
+
--formSectionTitleFontSize: 1.4rem;
|
|
109
|
+
}
|
|
107
110
|
.warning > * {
|
|
108
111
|
margin: 5px 0;
|
|
109
112
|
}
|
|
@@ -141,7 +144,8 @@ IauxMgcCancelPlan.styles = css `
|
|
|
141
144
|
}
|
|
142
145
|
|
|
143
146
|
.checkbox-option-container {
|
|
144
|
-
|
|
147
|
+
display: flex;
|
|
148
|
+
margin: 10px 0;
|
|
145
149
|
}
|
|
146
150
|
`;
|
|
147
151
|
__decorate([
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"cancel.js","sourceRoot":"","sources":["../../../src/form-sections/cancel.ts"],"names":[],"mappings":";AAAA,OAAO,EACL,UAAU,EACV,IAAI,EAGJ,OAAO,EACP,GAAG,GACJ,MAAM,KAAK,CAAC;AACb,OAAO,EAAE,aAAa,EAAE,QAAQ,EAAE,KAAK,EAAE,MAAM,mBAAmB,CAAC;AAInE,OAAO,oFAAoF,CAAC;AAE5F,OAAO,wCAAwC,CAAC;AAGhD,IAAa,iBAAiB,GAA9B,MAAa,iBAAkB,SAAQ,UAAU;IAAjD;;QAG8C,0BAAqB,GAAG,IAAI,CAAC;QAE7B,yBAAoB,GAAG,KAAK,CAAC;
|
|
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 { IauxButton } from '../presentational/ia-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 <ia-button\n class=\"clear-container slim\"\n .clickHandler=${(e: CustomEvent, iaButton: IauxButton) => {\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 >\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 <p>Let's cancel my donation</p>\n </div>\n </donation-form-section>\n </ia-button>\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-button class='text exit-cancel' @click=${() => {\n this.initialCancelRequest = false;\n this.patronWantsToKeepPlan = true;\n }}>X</ia-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-button\n class=\"cancel\"\n .isDisabled=${this.patronWantsToKeepPlan}\n id=${`submit-${this.formId}`}\n type=\"submit\"\n .clickHandler=${(e: Event, iaButton: IauxButton) => {\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-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-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-button {\n --button-height: auto;\n }\n\n ia-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"]}
|
|
@@ -52,12 +52,8 @@ let MonthlyGivingCircle = class MonthlyGivingCircle extends LitElement {
|
|
|
52
52
|
`;
|
|
53
53
|
}
|
|
54
54
|
get editDateForm() {
|
|
55
|
-
var _a, _b;
|
|
56
55
|
return html `
|
|
57
56
|
<section>
|
|
58
|
-
${((_a = this.plan) === null || _a === void 0 ? void 0 : _a.plan.oldDate)
|
|
59
|
-
? html `<p>Previous date: ${(_b = this.plan) === null || _b === void 0 ? void 0 : _b.plan.oldDate}</p>`
|
|
60
|
-
: nothing}
|
|
61
57
|
<form id="edit-donation-date">
|
|
62
58
|
<p>${this.displayDate}</p>
|
|
63
59
|
<input
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"date.js","sourceRoot":"","sources":["../../../src/form-sections/date.ts"],"names":[],"mappings":";AAAA,OAAO,EAAE,UAAU,EAAE,IAAI,EAAkB,OAAO,EAAE,MAAM,KAAK,CAAC;AAChE,OAAO,EAAE,aAAa,EAAE,QAAQ,EAAE,KAAK,EAAE,MAAM,mBAAmB,CAAC;AAEnE,OAAO,iFAAiF,CAAC;AAIzF,IAAa,mBAAmB,GAAhC,MAAa,mBAAoB,SAAQ,UAAU;IAAnD;;QAC8B,gBAAW,GAAW,EAAE,CAAC;QAIxB,qBAAgB,GAAY,KAAK,CAAC;
|
|
1
|
+
{"version":3,"file":"date.js","sourceRoot":"","sources":["../../../src/form-sections/date.ts"],"names":[],"mappings":"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","sourcesContent":["import { LitElement, html, PropertyValues, nothing } from 'lit';\nimport { customElement, property, query } from 'lit/decorators.js';\n\nimport '@internetarchive/donation-form/dist/src/form-elements/contact-form/contact-form';\nimport type { MonthlyPlan } from '../models/plan';\n\n@customElement('ia-mgc-edit-plan-date')\nexport class MonthlyGivingCircle extends LitElement {\n @property({ type: String }) displayDate: string = '';\n\n @property({ type: Object }) plan?: MonthlyPlan;\n\n @property({ type: Boolean }) currentlyEditing: boolean = false;\n\n protected createRenderRoot() {\n return this;\n }\n\n get dateFormatted(): string {\n return '';\n }\n\n get maxDate(): string {\n return '';\n }\n\n get minDate(): string {\n return '';\n }\n\n get nextBillingDate(): string {\n const formatted = this.plan?.payment.nextBillingDate.date\n ? new Date(this.plan?.payment.nextBillingDate.date).toLocaleDateString()\n : 'not found';\n return formatted;\n }\n\n @query('form#edit-donation-date') form!: HTMLFormElement;\n\n updated(changed: PropertyValues) {\n if (changed.has('currentlyEditing') && this.currentlyEditing) {\n this.form.focus();\n }\n }\n\n protected render() {\n return html`\n <section>\n <h3>Donation date - Next billing date: ${this.nextBillingDate}</h3>\n ${!this.currentlyEditing\n ? html`<p>${this.nextBillingDate}</p>\n <button\n class=\"link ia-button\"\n @click=${() => {\n this.currentlyEditing = true;\n }}\n >\n Edit...\n </button>`\n : nothing}\n ${this.currentlyEditing ? this.editDateForm : nothing}\n </section>\n `;\n }\n\n get editDateForm() {\n return html`\n <section>\n <form id=\"edit-donation-date\">\n <p>${this.displayDate}</p>\n <input\n required\n type=\"date\"\n id=\"date\"\n name=\"new-date\"\n .value=${this.dateFormatted}\n min=${this.minDate}\n max=${this.maxDate}\n />\n <div>\n <button\n class=\"ia-button secondary\"\n type=\"button\"\n @click=${(e: Event) => {\n e.preventDefault();\n const newDate = this.form.querySelector(\n 'input[name=\"new-date\"]'\n ) as HTMLInputElement;\n const newDateValue = newDate!.value;\n console.log('cancel date', {\n newDateValue,\n displayDate: this.displayDate,\n });\n }}\n >\n Cancel\n </button>\n <button\n class=\"ia-button primary\"\n type=\"submit\"\n @click=${(e: Event) => {\n e.preventDefault();\n const newDate = this.form.querySelector(\n 'input[name=\"new-date\"]'\n ) as HTMLInputElement;\n const newDateValue = newDate!.value;\n if (!newDateValue) {\n return;\n }\n this.dispatchEvent(\n new CustomEvent('updateDate', {\n detail: { newDateValue, plan: this.plan },\n })\n );\n console.log('update date', {\n newDateValue,\n displayDate: this.displayDate,\n });\n }}\n >\n Update\n </button>\n </div>\n </form>\n </section>\n `;\n }\n}\n"]}
|
|
@@ -116,7 +116,7 @@ let MonthlyGivingCircle = class MonthlyGivingCircle extends LitElement {
|
|
|
116
116
|
</ia-button>`;
|
|
117
117
|
break;
|
|
118
118
|
case 'editPlan':
|
|
119
|
-
title = '
|
|
119
|
+
title = 'Monthly Giving Circle';
|
|
120
120
|
titleStyle = 'default';
|
|
121
121
|
cta = html `<ia-button
|
|
122
122
|
class="primary"
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"monthly-giving-circle.js","sourceRoot":"","sources":["../../src/monthly-giving-circle.ts"],"names":[],"mappings":"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","sourcesContent":["/* eslint-disable no-debugger */\n\nimport { LitElement, html, TemplateResult, PropertyValues } from 'lit';\nimport { customElement, property } from 'lit/decorators.js';\n\nimport './welcome-message';\nimport './plans';\nimport './presentational/mgc-title';\nimport './receipts';\nimport type { IauxMgcReceipts } from './receipts';\nimport './presentational/ia-button';\nimport type { MonthlyPlan } from './models/plan';\nimport './edit-plan-form';\nimport type { IauxEditPlanForm } from './edit-plan-form';\n\nexport type APlanUpdate = {\n plan?: MonthlyPlan;\n donationId?: string;\n status: 'success' | 'fail';\n action: 'receiptSent' | 'cancel' | 'amountUpdate';\n message: string;\n};\n\n@customElement('ia-monthly-giving-circle')\nexport class MonthlyGivingCircle extends LitElement {\n @property({ type: String }) patronName: string = '';\n\n @property({ type: Array }) receipts = [];\n\n @property({ type: Array }) updates: APlanUpdate[] = [];\n\n @property({ type: Array }) plans = [];\n\n @property({ type: Object }) editingThisPlan?: MonthlyPlan;\n\n @property({ type: String, reflect: true }) viewToDisplay:\n | 'welcome'\n | 'receipts'\n | 'plans'\n | 'editPlan' = 'welcome';\n\n protected createRenderRoot() {\n return this;\n }\n\n updated(changed: PropertyValues) {\n if (changed.has('plans')) {\n this.viewToDisplay = this.plans.length ? 'plans' : 'welcome';\n }\n }\n\n get receiptListElement(): IauxMgcReceipts {\n return this.querySelector('ia-mgc-receipts') as IauxMgcReceipts;\n }\n\n get editFormElement(): IauxEditPlanForm {\n return this.querySelector('ia-mgc-edit-plan') as IauxEditPlanForm;\n }\n\n /* Update Callback */\n updateReceived(update: APlanUpdate) {\n // log update\n this.updates.unshift(update);\n\n const { plan, donationId = '' } = update;\n const idToUse = plan?.id ?? donationId;\n\n const updateIsForEditingPlan =\n this.editingThisPlan && this.editingThisPlan.id === idToUse;\n\n if (!updateIsForEditingPlan) {\n // error, handle\n }\n\n if (update.action === 'amountUpdate') {\n this.editFormElement.amountUpdates(update.status);\n return;\n }\n\n if (update.action === 'cancel' || plan?.hasBeenCancelled) {\n this.editingThisPlan = undefined;\n this.viewToDisplay = 'plans';\n return;\n }\n\n this.receiptListElement.emailSent({\n id: idToUse,\n emailStatus: update.status,\n });\n }\n\n /* VIEWS */\n protected render() {\n const isEditingPlan =\n this.viewToDisplay === 'editPlan' && this.editingThisPlan;\n return html`\n ${this.sectionTitle}\n ${isEditingPlan\n ? html`<ia-mgc-edit-plan\n .plan=${this.editingThisPlan}\n .cancelPlanHandler=${(plan: MonthlyPlan) => {\n console.log('cancelPlan', plan);\n this.dispatchEvent(\n new CustomEvent('cancelPlan', {\n detail: { plan },\n })\n );\n }}\n .updateAmountHandler=${(\n plan: MonthlyPlan,\n options: {\n amount: number;\n baseAmount: number;\n coverFees: boolean;\n feeCovered: number;\n }\n ) => {\n console.log('updateAmount', plan, { ...options });\n this.dispatchEvent(\n new CustomEvent('updateAmount', {\n detail: { plan, amountOptions: options },\n })\n );\n }}\n ></ia-mgc-edit-plan>`\n : this.nonEditView}\n `;\n }\n\n get sectionTitle(): TemplateResult {\n let title = '';\n let titleStyle = '';\n let cta = html``;\n\n const receiptsCTA = html`\n <ia-button\n class=\"link slim\"\n .clickHandler=${async () => {\n this.viewToDisplay = 'receipts';\n await this.updateComplete;\n this.dispatchEvent(new CustomEvent('ShowReceipts'));\n }}\n >\n View recent donation history\n </ia-button>\n `;\n\n const displayReceiptsLink =\n this.receipts.length &&\n (this.viewToDisplay === 'plans' || this.viewToDisplay === 'welcome');\n\n switch (this.viewToDisplay) {\n case 'receipts':\n title = 'Recent donations';\n titleStyle = 'default';\n cta = html`<ia-button\n class=\"link slim\"\n id=\"close-receipts\"\n .clickHandler=${async () => {\n this.viewToDisplay = this.plans.length ? 'plans' : 'welcome';\n this.dispatchEvent(new CustomEvent('ShowWelcome'));\n this.updates = [];\n await this.updateComplete;\n }}\n >\n Back to account settings\n </ia-button>`;\n break;\n\n case 'editPlan':\n title = 'Edit plan';\n titleStyle = 'default';\n cta = html`<ia-button\n class=\"primary\"\n id=\"close-edit-plan\"\n .clickHandler=${async () => {\n this.viewToDisplay = this.plans.length ? 'plans' : 'welcome';\n this.dispatchEvent(new CustomEvent('ShowWelcome'));\n this.updates = [];\n await this.updateComplete;\n }}\n >\n Back to account settings\n </ia-button>`;\n break;\n\n default:\n title = 'Monthly Giving Circle';\n titleStyle = 'heart';\n if (displayReceiptsLink) {\n cta = receiptsCTA;\n }\n break;\n }\n\n return html`\n <ia-mgc-title titleStyle=${titleStyle}>\n <span slot=\"title\">${title}</span>\n <span slot=\"action\">${cta}</span>\n </ia-mgc-title>\n `;\n }\n\n get nonEditView(): TemplateResult {\n if (this.viewToDisplay === 'receipts') {\n return html`\n <ia-mgc-receipts\n .receipts=${this.receipts}\n @EmailReceiptRequest=${(event: CustomEvent) => {\n console.log('EmailReceiptRequest', event.detail);\n this.dispatchEvent(\n new CustomEvent('EmailReceiptRequest', {\n detail: { ...event.detail },\n })\n );\n }}\n ></ia-mgc-receipts>\n `;\n }\n\n return html`\n ${this.viewToDisplay === 'plans' && this.plans.length\n ? html`\n <ia-mgc-plans\n @editThisPlan=${async (event: CustomEvent) => {\n this.editingThisPlan = event.detail.plan;\n this.viewToDisplay = 'editPlan';\n this.dispatchEvent(new Event('ShowEditForm'));\n await this.updateComplete;\n }}\n .plans=${this.plans}\n ></ia-mgc-plans>\n `\n : html`<ia-mgc-welcome\n .patronName=${this.patronName}\n ></ia-mgc-welcome>`}\n `;\n }\n}\n"]}
|
|
1
|
+
{"version":3,"file":"monthly-giving-circle.js","sourceRoot":"","sources":["../../src/monthly-giving-circle.ts"],"names":[],"mappings":"AAAA,gCAAgC;;AAEhC,OAAO,EAAE,UAAU,EAAE,IAAI,EAAkC,MAAM,KAAK,CAAC;AACvE,OAAO,EAAE,aAAa,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAC;AAE5D,OAAO,mBAAmB,CAAC;AAC3B,OAAO,SAAS,CAAC;AACjB,OAAO,4BAA4B,CAAC;AACpC,OAAO,YAAY,CAAC;AAEpB,OAAO,4BAA4B,CAAC;AAEpC,OAAO,kBAAkB,CAAC;AAY1B,IAAa,mBAAmB,GAAhC,MAAa,mBAAoB,SAAQ,UAAU;IAAnD;;QAC8B,eAAU,GAAW,EAAE,CAAC;QAEzB,aAAQ,GAAG,EAAE,CAAC;QAEd,YAAO,GAAkB,EAAE,CAAC;QAE5B,UAAK,GAAG,EAAE,CAAC;QAIK,kBAAa,GAIvC,SAAS,CAAC;IAuM7B,CAAC;IArMW,gBAAgB;QACxB,OAAO,IAAI,CAAC;IACd,CAAC;IAED,OAAO,CAAC,OAAuB;QAC7B,IAAI,OAAO,CAAC,GAAG,CAAC,OAAO,CAAC,EAAE;YACxB,IAAI,CAAC,aAAa,GAAG,IAAI,CAAC,KAAK,CAAC,MAAM,CAAC,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,SAAS,CAAC;SAC9D;IACH,CAAC;IAED,IAAI,kBAAkB;QACpB,OAAO,IAAI,CAAC,aAAa,CAAC,iBAAiB,CAAoB,CAAC;IAClE,CAAC;IAED,IAAI,eAAe;QACjB,OAAO,IAAI,CAAC,aAAa,CAAC,kBAAkB,CAAqB,CAAC;IACpE,CAAC;IAED,qBAAqB;IACrB,cAAc,CAAC,MAAmB;;QAChC,aAAa;QACb,IAAI,CAAC,OAAO,CAAC,OAAO,CAAC,MAAM,CAAC,CAAC;QAE7B,MAAM,EAAE,IAAI,EAAE,UAAU,GAAG,EAAE,EAAE,GAAG,MAAM,CAAC;QACzC,MAAM,OAAO,GAAG,MAAA,IAAI,aAAJ,IAAI,uBAAJ,IAAI,CAAE,EAAE,mCAAI,UAAU,CAAC;QAEvC,MAAM,sBAAsB,GAC1B,IAAI,CAAC,eAAe,IAAI,IAAI,CAAC,eAAe,CAAC,EAAE,KAAK,OAAO,CAAC;QAE9D,IAAI,CAAC,sBAAsB,EAAE;YAC3B,gBAAgB;SACjB;QAED,IAAI,MAAM,CAAC,MAAM,KAAK,cAAc,EAAE;YACpC,IAAI,CAAC,eAAe,CAAC,aAAa,CAAC,MAAM,CAAC,MAAM,CAAC,CAAC;YAClD,OAAO;SACR;QAED,IAAI,MAAM,CAAC,MAAM,KAAK,QAAQ,KAAI,IAAI,aAAJ,IAAI,uBAAJ,IAAI,CAAE,gBAAgB,CAAA,EAAE;YACxD,IAAI,CAAC,eAAe,GAAG,SAAS,CAAC;YACjC,IAAI,CAAC,aAAa,GAAG,OAAO,CAAC;YAC7B,OAAO;SACR;QAED,IAAI,CAAC,kBAAkB,CAAC,SAAS,CAAC;YAChC,EAAE,EAAE,OAAO;YACX,WAAW,EAAE,MAAM,CAAC,MAAM;SAC3B,CAAC,CAAC;IACL,CAAC;IAED,WAAW;IACD,MAAM;QACd,MAAM,aAAa,GACjB,IAAI,CAAC,aAAa,KAAK,UAAU,IAAI,IAAI,CAAC,eAAe,CAAC;QAC5D,OAAO,IAAI,CAAA;QACP,IAAI,CAAC,YAAY;QACjB,aAAa;YACb,CAAC,CAAC,IAAI,CAAA;oBACM,IAAI,CAAC,eAAe;iCACP,CAAC,IAAiB,EAAE,EAAE;gBACzC,OAAO,CAAC,GAAG,CAAC,YAAY,EAAE,IAAI,CAAC,CAAC;gBAChC,IAAI,CAAC,aAAa,CAChB,IAAI,WAAW,CAAC,YAAY,EAAE;oBAC5B,MAAM,EAAE,EAAE,IAAI,EAAE;iBACjB,CAAC,CACH,CAAC;YACJ,CAAC;mCACsB,CACrB,IAAiB,EACjB,OAKC,EACD,EAAE;gBACF,OAAO,CAAC,GAAG,CAAC,cAAc,EAAE,IAAI,EAAE,EAAE,GAAG,OAAO,EAAE,CAAC,CAAC;gBAClD,IAAI,CAAC,aAAa,CAChB,IAAI,WAAW,CAAC,cAAc,EAAE;oBAC9B,MAAM,EAAE,EAAE,IAAI,EAAE,aAAa,EAAE,OAAO,EAAE;iBACzC,CAAC,CACH,CAAC;YACJ,CAAC;+BACkB;YACvB,CAAC,CAAC,IAAI,CAAC,WAAW;KACrB,CAAC;IACJ,CAAC;IAED,IAAI,YAAY;QACd,IAAI,KAAK,GAAG,EAAE,CAAC;QACf,IAAI,UAAU,GAAG,EAAE,CAAC;QACpB,IAAI,GAAG,GAAG,IAAI,CAAA,EAAE,CAAC;QAEjB,MAAM,WAAW,GAAG,IAAI,CAAA;;;wBAGJ,KAAK,IAAI,EAAE;YACzB,IAAI,CAAC,aAAa,GAAG,UAAU,CAAC;YAChC,MAAM,IAAI,CAAC,cAAc,CAAC;YAC1B,IAAI,CAAC,aAAa,CAAC,IAAI,WAAW,CAAC,cAAc,CAAC,CAAC,CAAC;QACtD,CAAC;;;;KAIJ,CAAC;QAEF,MAAM,mBAAmB,GACvB,IAAI,CAAC,QAAQ,CAAC,MAAM;YACpB,CAAC,IAAI,CAAC,aAAa,KAAK,OAAO,IAAI,IAAI,CAAC,aAAa,KAAK,SAAS,CAAC,CAAC;QAEvE,QAAQ,IAAI,CAAC,aAAa,EAAE;YAC1B,KAAK,UAAU;gBACb,KAAK,GAAG,kBAAkB,CAAC;gBAC3B,UAAU,GAAG,SAAS,CAAC;gBACvB,GAAG,GAAG,IAAI,CAAA;;;0BAGQ,KAAK,IAAI,EAAE;oBACzB,IAAI,CAAC,aAAa,GAAG,IAAI,CAAC,KAAK,CAAC,MAAM,CAAC,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,SAAS,CAAC;oBAC7D,IAAI,CAAC,aAAa,CAAC,IAAI,WAAW,CAAC,aAAa,CAAC,CAAC,CAAC;oBACnD,IAAI,CAAC,OAAO,GAAG,EAAE,CAAC;oBAClB,MAAM,IAAI,CAAC,cAAc,CAAC;gBAC5B,CAAC;;;qBAGU,CAAC;gBACd,MAAM;YAER,KAAK,UAAU;gBACb,KAAK,GAAG,uBAAuB,CAAC;gBAChC,UAAU,GAAG,SAAS,CAAC;gBACvB,GAAG,GAAG,IAAI,CAAA;;;0BAGQ,KAAK,IAAI,EAAE;oBACzB,IAAI,CAAC,aAAa,GAAG,IAAI,CAAC,KAAK,CAAC,MAAM,CAAC,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,SAAS,CAAC;oBAC7D,IAAI,CAAC,aAAa,CAAC,IAAI,WAAW,CAAC,aAAa,CAAC,CAAC,CAAC;oBACnD,IAAI,CAAC,OAAO,GAAG,EAAE,CAAC;oBAClB,MAAM,IAAI,CAAC,cAAc,CAAC;gBAC5B,CAAC;;;qBAGU,CAAC;gBACd,MAAM;YAER;gBACE,KAAK,GAAG,uBAAuB,CAAC;gBAChC,UAAU,GAAG,OAAO,CAAC;gBACrB,IAAI,mBAAmB,EAAE;oBACvB,GAAG,GAAG,WAAW,CAAC;iBACnB;gBACD,MAAM;SACT;QAED,OAAO,IAAI,CAAA;iCACkB,UAAU;6BACd,KAAK;8BACJ,GAAG;;KAE5B,CAAC;IACJ,CAAC;IAED,IAAI,WAAW;QACb,IAAI,IAAI,CAAC,aAAa,KAAK,UAAU,EAAE;YACrC,OAAO,IAAI,CAAA;;sBAEK,IAAI,CAAC,QAAQ;iCACF,CAAC,KAAkB,EAAE,EAAE;gBAC5C,OAAO,CAAC,GAAG,CAAC,qBAAqB,EAAE,KAAK,CAAC,MAAM,CAAC,CAAC;gBACjD,IAAI,CAAC,aAAa,CAChB,IAAI,WAAW,CAAC,qBAAqB,EAAE;oBACrC,MAAM,EAAE,EAAE,GAAG,KAAK,CAAC,MAAM,EAAE;iBAC5B,CAAC,CACH,CAAC;YACJ,CAAC;;OAEJ,CAAC;SACH;QAED,OAAO,IAAI,CAAA;QACP,IAAI,CAAC,aAAa,KAAK,OAAO,IAAI,IAAI,CAAC,KAAK,CAAC,MAAM;YACnD,CAAC,CAAC,IAAI,CAAA;;8BAEgB,KAAK,EAAE,KAAkB,EAAE,EAAE;gBAC3C,IAAI,CAAC,eAAe,GAAG,KAAK,CAAC,MAAM,CAAC,IAAI,CAAC;gBACzC,IAAI,CAAC,aAAa,GAAG,UAAU,CAAC;gBAChC,IAAI,CAAC,aAAa,CAAC,IAAI,KAAK,CAAC,cAAc,CAAC,CAAC,CAAC;gBAC9C,MAAM,IAAI,CAAC,cAAc,CAAC;YAC5B,CAAC;uBACQ,IAAI,CAAC,KAAK;;WAEtB;YACH,CAAC,CAAC,IAAI,CAAA;0BACY,IAAI,CAAC,UAAU;6BACZ;KACxB,CAAC;IACJ,CAAC;CACF,CAAA;AArN6B;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;uDAAyB;AAEzB;IAA1B,QAAQ,CAAC,EAAE,IAAI,EAAE,KAAK,EAAE,CAAC;qDAAe;AAEd;IAA1B,QAAQ,CAAC,EAAE,IAAI,EAAE,KAAK,EAAE,CAAC;oDAA6B;AAE5B;IAA1B,QAAQ,CAAC,EAAE,IAAI,EAAE,KAAK,EAAE,CAAC;kDAAY;AAEV;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;4DAA+B;AAEf;IAA1C,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;0DAIf;AAfhB,mBAAmB;IAD/B,aAAa,CAAC,0BAA0B,CAAC;GAC7B,mBAAmB,CAsN/B;SAtNY,mBAAmB","sourcesContent":["/* eslint-disable no-debugger */\n\nimport { LitElement, html, TemplateResult, PropertyValues } from 'lit';\nimport { customElement, property } from 'lit/decorators.js';\n\nimport './welcome-message';\nimport './plans';\nimport './presentational/mgc-title';\nimport './receipts';\nimport type { IauxMgcReceipts } from './receipts';\nimport './presentational/ia-button';\nimport type { MonthlyPlan } from './models/plan';\nimport './edit-plan-form';\nimport type { IauxEditPlanForm } from './edit-plan-form';\n\nexport type APlanUpdate = {\n plan?: MonthlyPlan;\n donationId?: string;\n status: 'success' | 'fail';\n action: 'receiptSent' | 'cancel' | 'amountUpdate';\n message: string;\n};\n\n@customElement('ia-monthly-giving-circle')\nexport class MonthlyGivingCircle extends LitElement {\n @property({ type: String }) patronName: string = '';\n\n @property({ type: Array }) receipts = [];\n\n @property({ type: Array }) updates: APlanUpdate[] = [];\n\n @property({ type: Array }) plans = [];\n\n @property({ type: Object }) editingThisPlan?: MonthlyPlan;\n\n @property({ type: String, reflect: true }) viewToDisplay:\n | 'welcome'\n | 'receipts'\n | 'plans'\n | 'editPlan' = 'welcome';\n\n protected createRenderRoot() {\n return this;\n }\n\n updated(changed: PropertyValues) {\n if (changed.has('plans')) {\n this.viewToDisplay = this.plans.length ? 'plans' : 'welcome';\n }\n }\n\n get receiptListElement(): IauxMgcReceipts {\n return this.querySelector('ia-mgc-receipts') as IauxMgcReceipts;\n }\n\n get editFormElement(): IauxEditPlanForm {\n return this.querySelector('ia-mgc-edit-plan') as IauxEditPlanForm;\n }\n\n /* Update Callback */\n updateReceived(update: APlanUpdate) {\n // log update\n this.updates.unshift(update);\n\n const { plan, donationId = '' } = update;\n const idToUse = plan?.id ?? donationId;\n\n const updateIsForEditingPlan =\n this.editingThisPlan && this.editingThisPlan.id === idToUse;\n\n if (!updateIsForEditingPlan) {\n // error, handle\n }\n\n if (update.action === 'amountUpdate') {\n this.editFormElement.amountUpdates(update.status);\n return;\n }\n\n if (update.action === 'cancel' || plan?.hasBeenCancelled) {\n this.editingThisPlan = undefined;\n this.viewToDisplay = 'plans';\n return;\n }\n\n this.receiptListElement.emailSent({\n id: idToUse,\n emailStatus: update.status,\n });\n }\n\n /* VIEWS */\n protected render() {\n const isEditingPlan =\n this.viewToDisplay === 'editPlan' && this.editingThisPlan;\n return html`\n ${this.sectionTitle}\n ${isEditingPlan\n ? html`<ia-mgc-edit-plan\n .plan=${this.editingThisPlan}\n .cancelPlanHandler=${(plan: MonthlyPlan) => {\n console.log('cancelPlan', plan);\n this.dispatchEvent(\n new CustomEvent('cancelPlan', {\n detail: { plan },\n })\n );\n }}\n .updateAmountHandler=${(\n plan: MonthlyPlan,\n options: {\n amount: number;\n baseAmount: number;\n coverFees: boolean;\n feeCovered: number;\n }\n ) => {\n console.log('updateAmount', plan, { ...options });\n this.dispatchEvent(\n new CustomEvent('updateAmount', {\n detail: { plan, amountOptions: options },\n })\n );\n }}\n ></ia-mgc-edit-plan>`\n : this.nonEditView}\n `;\n }\n\n get sectionTitle(): TemplateResult {\n let title = '';\n let titleStyle = '';\n let cta = html``;\n\n const receiptsCTA = html`\n <ia-button\n class=\"link slim\"\n .clickHandler=${async () => {\n this.viewToDisplay = 'receipts';\n await this.updateComplete;\n this.dispatchEvent(new CustomEvent('ShowReceipts'));\n }}\n >\n View recent donation history\n </ia-button>\n `;\n\n const displayReceiptsLink =\n this.receipts.length &&\n (this.viewToDisplay === 'plans' || this.viewToDisplay === 'welcome');\n\n switch (this.viewToDisplay) {\n case 'receipts':\n title = 'Recent donations';\n titleStyle = 'default';\n cta = html`<ia-button\n class=\"link slim\"\n id=\"close-receipts\"\n .clickHandler=${async () => {\n this.viewToDisplay = this.plans.length ? 'plans' : 'welcome';\n this.dispatchEvent(new CustomEvent('ShowWelcome'));\n this.updates = [];\n await this.updateComplete;\n }}\n >\n Back to account settings\n </ia-button>`;\n break;\n\n case 'editPlan':\n title = 'Monthly Giving Circle';\n titleStyle = 'default';\n cta = html`<ia-button\n class=\"primary\"\n id=\"close-edit-plan\"\n .clickHandler=${async () => {\n this.viewToDisplay = this.plans.length ? 'plans' : 'welcome';\n this.dispatchEvent(new CustomEvent('ShowWelcome'));\n this.updates = [];\n await this.updateComplete;\n }}\n >\n Back to account settings\n </ia-button>`;\n break;\n\n default:\n title = 'Monthly Giving Circle';\n titleStyle = 'heart';\n if (displayReceiptsLink) {\n cta = receiptsCTA;\n }\n break;\n }\n\n return html`\n <ia-mgc-title titleStyle=${titleStyle}>\n <span slot=\"title\">${title}</span>\n <span slot=\"action\">${cta}</span>\n </ia-mgc-title>\n `;\n }\n\n get nonEditView(): TemplateResult {\n if (this.viewToDisplay === 'receipts') {\n return html`\n <ia-mgc-receipts\n .receipts=${this.receipts}\n @EmailReceiptRequest=${(event: CustomEvent) => {\n console.log('EmailReceiptRequest', event.detail);\n this.dispatchEvent(\n new CustomEvent('EmailReceiptRequest', {\n detail: { ...event.detail },\n })\n );\n }}\n ></ia-mgc-receipts>\n `;\n }\n\n return html`\n ${this.viewToDisplay === 'plans' && this.plans.length\n ? html`\n <ia-mgc-plans\n @editThisPlan=${async (event: CustomEvent) => {\n this.editingThisPlan = event.detail.plan;\n this.viewToDisplay = 'editPlan';\n this.dispatchEvent(new Event('ShowEditForm'));\n await this.updateComplete;\n }}\n .plans=${this.plans}\n ></ia-mgc-plans>\n `\n : html`<ia-mgc-welcome\n .patronName=${this.patronName}\n ></ia-mgc-welcome>`}\n `;\n }\n}\n"]}
|
package/package.json
CHANGED
|
@@ -85,11 +85,18 @@ export class MGCEditPlanAmount extends LitElement {
|
|
|
85
85
|
<section>
|
|
86
86
|
<donation-form-section badgemode="hidebadge" headline="Amount">
|
|
87
87
|
${!this.currentlyEditing
|
|
88
|
-
? html
|
|
88
|
+
? html` <p>
|
|
89
|
+
USD $${this.plan?.amount}
|
|
90
|
+
<ia-mgc-update-status .status=${this.updateStatus}
|
|
91
|
+
>${this.updateMessage}</ia-mgc-update-status
|
|
92
|
+
>
|
|
93
|
+
</p>
|
|
89
94
|
<ia-button
|
|
90
95
|
class="ia-button link"
|
|
91
96
|
@click=${() => {
|
|
92
97
|
this.currentlyEditing = true;
|
|
98
|
+
this.updateStatus = '';
|
|
99
|
+
this.updateMessage = '';
|
|
93
100
|
}}
|
|
94
101
|
>
|
|
95
102
|
Edit...
|
|
@@ -118,7 +125,7 @@ export class MGCEditPlanAmount extends LitElement {
|
|
|
118
125
|
return `I'll generously add $${this.donationPaymentInfo?.feeAmountCovered} to cover fees.`;
|
|
119
126
|
}
|
|
120
127
|
|
|
121
|
-
|
|
128
|
+
closeForm() {
|
|
122
129
|
const input = this.form.querySelector(
|
|
123
130
|
'input[name="amount"]'
|
|
124
131
|
) as HTMLInputElement;
|
|
@@ -130,7 +137,6 @@ export class MGCEditPlanAmount extends LitElement {
|
|
|
130
137
|
this.errorMessage = '';
|
|
131
138
|
this.updateMessage = '';
|
|
132
139
|
this.updateStatus = '';
|
|
133
|
-
await this.updateComplete;
|
|
134
140
|
}
|
|
135
141
|
|
|
136
142
|
requestAmountUpdate(e: Event): void {
|
|
@@ -170,6 +176,20 @@ export class MGCEditPlanAmount extends LitElement {
|
|
|
170
176
|
}
|
|
171
177
|
|
|
172
178
|
async amountUpdated(status: 'success' | 'fail') {
|
|
179
|
+
this.updateStatus = status;
|
|
180
|
+
this.updateMessage =
|
|
181
|
+
status === 'success' ? 'Amount updated' : 'Failed. Try again.';
|
|
182
|
+
|
|
183
|
+
if (status === 'success') {
|
|
184
|
+
this.closeForm();
|
|
185
|
+
await this.updateComplete;
|
|
186
|
+
|
|
187
|
+
this.updateStatus = status;
|
|
188
|
+
this.updateMessage = 'Amount updated';
|
|
189
|
+
|
|
190
|
+
return;
|
|
191
|
+
}
|
|
192
|
+
|
|
173
193
|
(
|
|
174
194
|
this.form.querySelector('ia-button#update-amount') as IauxButton
|
|
175
195
|
).isDisabled = false;
|
|
@@ -182,10 +202,6 @@ export class MGCEditPlanAmount extends LitElement {
|
|
|
182
202
|
this.newAmount = 0;
|
|
183
203
|
this.captureAmountChanges();
|
|
184
204
|
|
|
185
|
-
this.updateStatus = status;
|
|
186
|
-
this.updateMessage =
|
|
187
|
-
status === 'success' ? 'Amount updated' : 'Failed. Try again.';
|
|
188
|
-
|
|
189
205
|
await this.updateComplete;
|
|
190
206
|
|
|
191
207
|
// setTimeout(() => {
|
|
@@ -199,18 +215,12 @@ export class MGCEditPlanAmount extends LitElement {
|
|
|
199
215
|
<section>
|
|
200
216
|
<form id="edit-plan-amount">
|
|
201
217
|
<p>Current donation amount: $${this.plan?.amount}</p>
|
|
202
|
-
${this.plan?.plan.oldAmount
|
|
203
|
-
? html`<p>
|
|
204
|
-
Previous donation amount: $${this.plan?.plan.oldAmount}
|
|
205
|
-
</p>`
|
|
206
|
-
: nothing}
|
|
207
218
|
<div>
|
|
208
219
|
$
|
|
209
220
|
<input
|
|
210
221
|
type="number"
|
|
211
222
|
id="amount"
|
|
212
223
|
name="amount"
|
|
213
|
-
placeholder="Enter new amount"
|
|
214
224
|
required="true"
|
|
215
225
|
@input=${(e: Event) => {
|
|
216
226
|
const newAmount = Number((e.target as HTMLInputElement).value);
|
|
@@ -221,7 +231,7 @@ export class MGCEditPlanAmount extends LitElement {
|
|
|
221
231
|
/ month
|
|
222
232
|
</div>
|
|
223
233
|
<div>
|
|
224
|
-
<div class="checkbox-option-container"
|
|
234
|
+
<div class="checkbox-option-container">
|
|
225
235
|
<input
|
|
226
236
|
type="checkbox"
|
|
227
237
|
id="cover-fees"
|
|
@@ -253,7 +263,7 @@ export class MGCEditPlanAmount extends LitElement {
|
|
|
253
263
|
this.errorMessage = '';
|
|
254
264
|
|
|
255
265
|
if (!this.newAmount) {
|
|
256
|
-
this.errorMessage = 'Please enter a
|
|
266
|
+
this.errorMessage = 'Please enter a new amount';
|
|
257
267
|
return;
|
|
258
268
|
}
|
|
259
269
|
|
|
@@ -308,5 +318,15 @@ export class MGCEditPlanAmount extends LitElement {
|
|
|
308
318
|
p.error {
|
|
309
319
|
color: red;
|
|
310
320
|
}
|
|
321
|
+
|
|
322
|
+
ia-mgc-update-status {
|
|
323
|
+
display: inline-block;
|
|
324
|
+
margin-left: 1rem;
|
|
325
|
+
}
|
|
326
|
+
|
|
327
|
+
.checkbox-option-container {
|
|
328
|
+
margin: 10px 0;
|
|
329
|
+
display: flex;
|
|
330
|
+
}
|
|
311
331
|
`;
|
|
312
332
|
}
|
|
@@ -47,7 +47,7 @@ export class IauxMgcCancelPlan extends LitElement {
|
|
|
47
47
|
|
|
48
48
|
return html`
|
|
49
49
|
<ia-button
|
|
50
|
-
class="clear-container"
|
|
50
|
+
class="clear-container slim"
|
|
51
51
|
.clickHandler=${(e: CustomEvent, iaButton: IauxButton) => {
|
|
52
52
|
// eslint-disable-next-line no-param-reassign
|
|
53
53
|
iaButton.isDisabled = true;
|
|
@@ -123,6 +123,9 @@ export class IauxMgcCancelPlan extends LitElement {
|
|
|
123
123
|
}
|
|
124
124
|
|
|
125
125
|
static styles = css`
|
|
126
|
+
:host {
|
|
127
|
+
--formSectionTitleFontSize: 1.4rem;
|
|
128
|
+
}
|
|
126
129
|
.warning > * {
|
|
127
130
|
margin: 5px 0;
|
|
128
131
|
}
|
|
@@ -160,7 +163,8 @@ export class IauxMgcCancelPlan extends LitElement {
|
|
|
160
163
|
}
|
|
161
164
|
|
|
162
165
|
.checkbox-option-container {
|
|
163
|
-
|
|
166
|
+
display: flex;
|
|
167
|
+
margin: 10px 0;
|
|
164
168
|
}
|
|
165
169
|
`;
|
|
166
170
|
}
|
|
@@ -66,9 +66,6 @@ export class MonthlyGivingCircle extends LitElement {
|
|
|
66
66
|
get editDateForm() {
|
|
67
67
|
return html`
|
|
68
68
|
<section>
|
|
69
|
-
${this.plan?.plan.oldDate
|
|
70
|
-
? html`<p>Previous date: ${this.plan?.plan.oldDate}</p>`
|
|
71
|
-
: nothing}
|
|
72
69
|
<form id="edit-donation-date">
|
|
73
70
|
<p>${this.displayDate}</p>
|
|
74
71
|
<input
|