@internetarchive/donation-monthly-portal 7.0.4-alpha1 → 7.0.4

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.
Files changed (8) hide show
  1. package/dist/src/form-sections/amount.d.ts +3 -0
  2. package/dist/src/form-sections/amount.js +42 -32
  3. package/dist/src/form-sections/amount.js.map +1 -1
  4. package/dist/src/monthly-giving-circle.js +4 -13
  5. package/dist/src/monthly-giving-circle.js.map +1 -1
  6. package/package.json +1 -1
  7. package/src/form-sections/amount.ts +51 -37
  8. package/src/monthly-giving-circle.ts +4 -19
package/dist/src/form-sections/amount.d.ts CHANGED
@@ -4,6 +4,7 @@ import { DonationPaymentInfo } from '@internetarchive/donation-form-data-models'
4
4
  import type { MonthlyPlan } from '../models/plan';
5
5
  import '../presentational/donation-section-info';
6
6
  import '../presentational/mgc-button';
7
+ import type { MGCButton } from '../presentational/mgc-button';
7
8
  import '../presentational/mgc-update-status';
8
9
  export declare class MGCEditPlanAmount extends LitElement {
9
10
  plan?: MonthlyPlan;
@@ -22,6 +23,8 @@ export declare class MGCEditPlanAmount extends LitElement {
22
23
  captureAmountChanges(newAmount?: number): void;
23
24
  closeForm(): void;
24
25
  clearInputField(): void;
26
+ handleSubmit(e: Event, iaButton?: MGCButton): void;
27
+ private updateButtonState;
25
28
  clearStatusMessaging(): Promise<void>;
26
29
  totalAmountWithFees(): number;
27
30
  get coveredFeesText(): string;
package/dist/src/form-sections/amount.js CHANGED
@@ -132,6 +132,42 @@ let MGCEditPlanAmount = class MGCEditPlanAmount extends LitElement {
132
132
  this.newAmount = 0;
133
133
  this.donationPaymentInfo = undefined;
134
134
  }
135
+ handleSubmit(e, iaButton) {
136
+ var _a;
137
+ e.preventDefault();
138
+ this.clearStatusMessaging();
139
+ const button = iaButton !== null && iaButton !== void 0 ? iaButton : this.form.querySelector('#update-amount');
140
+ if (button)
141
+ this.updateButtonState(button);
142
+ if (!this.newAmount) {
143
+ this.errorMessage = 'Please enter a new amount';
144
+ if (button)
145
+ button.isDisabled = false;
146
+ return;
147
+ }
148
+ const input = this.form.querySelector('input[name="amount"]');
149
+ const requestedAmount = (_a = Number(input.value)) !== null && _a !== void 0 ? _a : 0;
150
+ const amountTooLow = requestedAmount < 1;
151
+ const amountTooHigh = requestedAmount >= 9999;
152
+ if (amountTooLow) {
153
+ this.errorMessage = 'Please enter a valid amount';
154
+ }
155
+ if (amountTooHigh) {
156
+ this.errorMessage =
157
+ 'Amount must be less than $9,999. Would you like to donate more? Please contact us at donations@archive.org';
158
+ }
159
+ if (amountTooHigh || amountTooLow) {
160
+ if (button)
161
+ this.updateButtonState(button);
162
+ return;
163
+ }
164
+ this.requestAmountUpdate(e);
165
+ }
166
+ async updateButtonState(iaButton) {
167
+ // eslint-disable-next-line no-param-reassign
168
+ iaButton.isDisabled = true;
169
+ await (iaButton === null || iaButton === void 0 ? void 0 : iaButton.updateComplete);
170
+ }
135
171
  async clearStatusMessaging() {
136
172
  this.errorMessage = '';
137
173
  this.updateMessage = '';
@@ -153,7 +189,10 @@ let MGCEditPlanAmount = class MGCEditPlanAmount extends LitElement {
153
189
  var _a;
154
190
  return html `
155
191
  <section>
156
- <form id="edit-plan-amount">
192
+ <form
193
+ id="edit-plan-amount"
194
+ @submit=${(e) => this.handleSubmit(e)}
195
+ >
157
196
  <p>Current donation amount: $${(_a = this.plan) === null || _a === void 0 ? void 0 : _a.amount}</p>
158
197
  <div>
159
198
  $
@@ -163,7 +202,7 @@ let MGCEditPlanAmount = class MGCEditPlanAmount extends LitElement {
163
202
  type="number"
164
203
  id="amount"
165
204
  name="amount"
166
- required="true"
205
+ ?required=${true}
167
206
  @focus=${() => this.clearStatusMessaging()}
168
207
  @input=${(e) => {
169
208
  const newAmount = Number(e.target.value);
@@ -203,36 +242,7 @@ let MGCEditPlanAmount = class MGCEditPlanAmount extends LitElement {
203
242
  id="update-amount"
204
243
  class="ia-button primary"
205
244
  type="submit"
206
- .clickHandler=${async (e, iaButton) => {
207
- var _a;
208
- this.clearStatusMessaging();
209
- if (!this.newAmount) {
210
- this.errorMessage = 'Please enter a new amount';
211
- return;
212
- }
213
- // eslint-disable-next-line no-param-reassign
214
- iaButton.isDisabled = true;
215
- await iaButton.updateComplete;
216
- // check if request is in range
217
- const input = this.form.querySelector('input[name="amount"]');
218
- const requestedAmount = (_a = Number(input.value)) !== null && _a !== void 0 ? _a : 0;
219
- const amountTooLow = requestedAmount < 1;
220
- const amountTooHigh = requestedAmount >= 9999;
221
- if (amountTooLow) {
222
- this.errorMessage = 'Please enter a valid amount';
223
- }
224
- if (amountTooHigh) {
225
- this.errorMessage =
226
- 'Amount must be less than $9,999. Would you like to donate more? Please contact us at donations@archive.org';
227
- }
228
- if (amountTooHigh || amountTooLow) {
229
- // eslint-disable-next-line no-param-reassign
230
- iaButton.isDisabled = false;
231
- await iaButton.updateComplete;
232
- return;
233
- }
234
- this.requestAmountUpdate(e);
235
- }}
245
+ .clickHandler=${(e, iaButton) => this.handleSubmit(e, iaButton)}
236
246
  >
237
247
  Update
238
248
  </ia-mgc-button>
package/dist/src/form-sections/amount.js.map CHANGED
@@ -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 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 id=\"edit-plan-amount\">\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=${async (e: Event, iaButton: MGCButton) => {\n this.clearStatusMessaging();\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 MGCButton).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) ?? 0;\n const amountTooLow = requestedAmount < 1;\n const amountTooHigh = requestedAmount >= 9999;\n if (amountTooLow) {\n this.errorMessage = 'Please enter a valid amount';\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 if (amountTooHigh || amountTooLow) {\n // eslint-disable-next-line no-param-reassign\n (iaButton as MGCButton).isDisabled = false;\n await iaButton.updateComplete;\n return;\n }\n\n this.requestAmountUpdate(e);\n }}\n >\n Update\n </ia-mgc-button>\n <ia-mgc-update-status .status=${this.updateStatus}\n >${this.updateMessage}</ia-mgc-update-status\n >\n </div>\n </div>\n <p class=\"error\">${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":";AAAA,OAAO,EACL,UAAU,EACV,IAAI,EAEJ,OAAO,EACP,GAAG,GAEJ,MAAM,KAAK,CAAC;AACb,OAAO,EAAE,aAAa,EAAE,QAAQ,EAAE,KAAK,EAAE,MAAM,mBAAmB,CAAC;AACnE,OAAO,wCAAwC,CAAC;AAChD,OAAO,EACL,mBAAmB,EACnB,YAAY,GACb,MAAM,4CAA4C,CAAC;AAGpD,OAAO,yCAAyC,CAAC;AACjD,OAAO,8BAA8B,CAAC;AAEtC,OAAO,qCAAqC,CAAC;AAG7C,IAAa,iBAAiB,GAA9B,MAAa,iBAAkB,SAAQ,UAAU;IAAjD;;QAM8B,cAAS,GAAW,CAAC,CAAC;QAEN,qBAAgB,GAAY,KAAK,CAAC;QAEjD,cAAS,GAAY,KAAK,CAAC;QAE5B,kBAAa,GAAW,EAAE,CAAC;QAE3B,iBAAY,GAAW,EAAE,CAAC;QAE1B,iBAAY,GAA4B,EAAE,CAAC;IA4TzE,CAAC;IAxTC,OAAO,CAAC,OAAuB;QAC7B,IAAI,OAAO,CAAC,GAAG,CAAC,MAAM,CAAC,IAAI,IAAI,CAAC,IAAI,EAAE;YACpC,IAAI,CAAC,oBAAoB,EAAE,CAAC;SAC7B;QACD,IAAI,OAAO,CAAC,GAAG,CAAC,WAAW,CAAC,EAAE;YAC5B,IAAI,CAAC,oBAAoB,EAAE,CAAC;SAC7B;QACD,IAAI,OAAO,CAAC,GAAG,CAAC,kBAAkB,CAAC,IAAI,IAAI,CAAC,gBAAgB,EAAE;YAC5D,IAAI,CAAC,IAAI,CAAC,KAAK,EAAE,CAAC;SACnB;QAED,IAAI,OAAO,CAAC,GAAG,CAAC,qBAAqB,CAAC,IAAI,CAAC,IAAI,CAAC,mBAAmB,EAAE;YACnE,IAAI,CAAC,oBAAoB,EAAE,CAAC;SAC7B;IACH,CAAC;IAES,MAAM;;QACd,OAAO,IAAI,CAAA;;;YAGH,CAAC,IAAI,CAAC,gBAAgB;YACtB,CAAC,CAAC,IAAI,CAAA;oCACkB,GAAG,EAAE;gBACvB,IAAI,CAAC,gBAAgB,GAAG,IAAI,CAAC;gBAC7B,IAAI,CAAC,oBAAoB,EAAE,CAAC;YAC9B,CAAC;8BACa,MAAA,IAAI,CAAC,IAAI,0CAAE,MAAM;0CACL;YAC9B,CAAC,CAAC,OAAO;YACT,IAAI,CAAC,gBAAgB,CAAC,CAAC,CAAC,IAAI,CAAC,cAAc,CAAC,CAAC,CAAC,OAAO;;;KAG5D,CAAC;IACJ,CAAC;IAED,8FAA8F;IAC9F,KAAK,CAAC,aAAa,CAAC,MAA0B;QAC5C,IAAI,CAAC,eAAe,EAAE,CAAC;QAEvB,IAAI,CAAC,YAAY,GAAG,MAAM,CAAC;QAC3B,IAAI,CAAC,aAAa;YAChB,MAAM,KAAK,SAAS,CAAC,CAAC,CAAC,gBAAgB,CAAC,CAAC,CAAC,oBAAoB,CAAC;QAEjE,IAAI,MAAM,KAAK,SAAS,EAAE;YACxB,IAAI,CAAC,SAAS,EAAE,CAAC;YACjB,MAAM,IAAI,CAAC,cAAc,CAAC;YAE1B,IAAI,CAAC,YAAY,GAAG,MAAM,CAAC;YAC3B,IAAI,CAAC,aAAa,GAAG,gBAAgB,CAAC;YAEtC,OAAO;SACR;QAGC,IAAI,CAAC,IAAI,CAAC,aAAa,CAAC,6BAA6B,CACtD,CAAC,UAAU,GAAG,KAAK,CAAC;QAErB,IAAI,CAAC,oBAAoB,EAAE,CAAC;QAE5B,MAAM,IAAI,CAAC,cAAc,CAAC;IAC5B,CAAC;IAED,sCAAsC;IACtC,mBAAmB,CAAC,CAAQ;;QAC1B,CAAC,CAAC,cAAc,EAAE,CAAC;QAEnB,MAAM,KAAK,GAAG,IAAI,CAAC,IAAI,CAAC,aAAa,CACnC,sBAAsB,CACH,CAAC;QACtB,IAAI,CAAC,SAAS,GAAG,MAAM,CAAC,KAAK,CAAC,KAAK,CAAC,CAAC;QAErC,IAAI,CAAC,oBAAoB,CAAC,IAAI,CAAC,SAAS,CAAC,CAAC;QAE1C,OAAO,CAAC,GAAG,CAAC,+BAA+B,EAAE;YAC3C,QAAQ,EAAE,IAAI,CAAC,SAAS;YACxB,QAAQ,EAAE,MAAA,IAAI,CAAC,IAAI,0CAAE,IAAI,CAAC,MAAM;YAChC,OAAO,EAAE,MAAA,IAAI,CAAC,mBAAmB,0CAAE,MAAM;SAC1C,CAAC,CAAC;QACH,MAAM,SAAS,GAAG,MAAM,CACtB,mBAAmB,CAAC,cAAc,CAChC,MAAM,CAAC,MAAA,IAAI,CAAC,mBAAmB,0CAAE,MAAM,CAAC,EACxC,IAAI,CAAC,SAAS,CACf,CACF,CAAC;QACF,IAAI,CAAC,aAAa,CAChB,IAAI,WAAW,CAAC,cAAc,EAAE;YAC9B,MAAM,EAAE;gBACN,IAAI,EAAE,IAAI,CAAC,IAAI;gBACf,MAAM,EAAE,SAAS;gBACjB,UAAU,EAAE,MAAA,IAAI,CAAC,mBAAmB,0CAAE,MAAM;gBAC5C,SAAS,EAAE,IAAI,CAAC,SAAS;gBACzB,UAAU,EAAE,MAAA,IAAI,CAAC,mBAAmB,0CAAE,gBAAgB;aACvD;SACF,CAAC,CACH,CAAC;IACJ,CAAC;IAED,2BAA2B;IAC3B,oBAAoB,CAAC,SAAkB;QACrC,IAAI,CAAC,IAAI,CAAC,mBAAmB,IAAI,IAAI,CAAC,IAAI,EAAE;YAC1C,IAAI,CAAC,mBAAmB,GAAG,IAAI,mBAAmB,CAAC;gBACjD,YAAY,EAAE,YAAY,CAAC,OAAO;gBAClC,MAAM,EAAE,CAAC;gBACT,SAAS,EAAE,IAAI;aAChB,CAAC,CAAC;YACH,OAAO;SACR;QAED,IAAI,OAAO,CAAC;QACZ,IAAI,SAAS,EAAE;YACb,OAAO,GAAG,IAAI,mBAAmB,CAAC;gBAChC,YAAY,EAAE,YAAY,CAAC,OAAO;gBAClC,MAAM,EAAE,SAAS;gBACjB,SAAS,EAAE,IAAI;aAChB,CAAC,CAAC;SACJ;aAAM;YACL,MAAM,MAAM,GAAG,IAAI,CAAC,mBAAmB;gBACrC,CAAC,CAAC,IAAI,CAAC,mBAAmB,CAAC,MAAM;gBACjC,CAAC,CAAC,IAAI,CAAC,IAAK,CAAC,MAAM,CAAC;YAEtB,OAAO,GAAG,IAAI,mBAAmB,CAAC;gBAChC,YAAY,EAAE,YAAY,CAAC,OAAO;gBAClC,MAAM;gBACN,SAAS,EAAE,IAAI;aAChB,CAAC,CAAC;SACJ;QAED,IAAI,CAAC,mBAAmB,GAAG,OAAO,CAAC;IACrC,CAAC;IAED,SAAS;QACP,IAAI,CAAC,eAAe,EAAE,CAAC;QACvB,IAAI,CAAC,oBAAoB,EAAE,CAAC;QAC5B,IAAI,CAAC,gBAAgB,GAAG,KAAK,CAAC;QAC9B,IAAI,CAAC,SAAS,GAAG,KAAK,CAAC;QACvB,IAAI,CAAC,YAAY,GAAG,EAAE,CAAC;IACzB,CAAC;IAED,eAAe;QACb,MAAM,KAAK,GAAG,IAAI,CAAC,IAAI,CAAC,aAAa,CACnC,sBAAsB,CACH,CAAC;QACtB,KAAK,CAAC,KAAK,GAAG,EAAE,CAAC;QACjB,IAAI,CAAC,SAAS,GAAG,CAAC,CAAC;QACnB,IAAI,CAAC,mBAAmB,GAAG,SAAS,CAAC;IACvC,CAAC;IAED,YAAY,CAAC,CAAQ,EAAE,QAAoB;;QACzC,CAAC,CAAC,cAAc,EAAE,CAAC;QACnB,IAAI,CAAC,oBAAoB,EAAE,CAAC;QAE5B,MAAM,MAAM,GACV,QAAQ,aAAR,QAAQ,cAAR,QAAQ,GAAK,IAAI,CAAC,IAAI,CAAC,aAAa,CAAC,gBAAgB,CAAe,CAAC;QACvE,IAAI,MAAM;YAAE,IAAI,CAAC,iBAAiB,CAAC,MAAM,CAAC,CAAC;QAE3C,IAAI,CAAC,IAAI,CAAC,SAAS,EAAE;YACnB,IAAI,CAAC,YAAY,GAAG,2BAA2B,CAAC;YAChD,IAAI,MAAM;gBAAE,MAAM,CAAC,UAAU,GAAG,KAAK,CAAC;YACtC,OAAO;SACR;QAED,MAAM,KAAK,GAAG,IAAI,CAAC,IAAI,CAAC,aAAa,CACnC,sBAAsB,CACH,CAAC;QACtB,MAAM,eAAe,GAAG,MAAA,MAAM,CAAC,KAAK,CAAC,KAAK,CAAC,mCAAI,CAAC,CAAC;QACjD,MAAM,YAAY,GAAG,eAAe,GAAG,CAAC,CAAC;QACzC,MAAM,aAAa,GAAG,eAAe,IAAI,IAAI,CAAC;QAE9C,IAAI,YAAY,EAAE;YAChB,IAAI,CAAC,YAAY,GAAG,6BAA6B,CAAC;SACnD;QAED,IAAI,aAAa,EAAE;YACjB,IAAI,CAAC,YAAY;gBACf,4GAA4G,CAAC;SAChH;QAED,IAAI,aAAa,IAAI,YAAY,EAAE;YACjC,IAAI,MAAM;gBAAE,IAAI,CAAC,iBAAiB,CAAC,MAAM,CAAC,CAAC;YAC3C,OAAO;SACR;QAED,IAAI,CAAC,mBAAmB,CAAC,CAAC,CAAC,CAAC;IAC9B,CAAC;IAEO,KAAK,CAAC,iBAAiB,CAAC,QAAmB;QACjD,6CAA6C;QAC5C,QAAsB,CAAC,UAAU,GAAG,IAAI,CAAC;QAC1C,MAAM,CAAA,QAAQ,aAAR,QAAQ,uBAAR,QAAQ,CAAE,cAAc,CAAA,CAAC;IACjC,CAAC;IAED,KAAK,CAAC,oBAAoB;QACxB,IAAI,CAAC,YAAY,GAAG,EAAE,CAAC;QACvB,IAAI,CAAC,aAAa,GAAG,EAAE,CAAC;QACxB,IAAI,CAAC,YAAY,GAAG,EAAE,CAAC;QACvB,MAAM,IAAI,CAAC,cAAc,CAAC;IAC5B,CAAC;IAED,aAAa;IACb,mBAAmB;QACjB,IAAI,IAAI,CAAC,SAAS,KAAK,CAAC,EAAE;YACxB,OAAO,CAAC,CAAC;SACV;QAED,OAAO,mBAAmB,CAAC,cAAc,CAAC,IAAI,CAAC,SAAS,EAAE,IAAI,CAAC,SAAS,CAAC,CAAC;IAC5E,CAAC;IAED,IAAI,eAAe;;QACjB,OAAO,wBAAwB,MAAA,IAAI,CAAC,mBAAmB,0CAAE,gBAAgB,iBAAiB,CAAC;IAC7F,CAAC;IAED,IAAI,cAAc;;QAChB,OAAO,IAAI,CAAA;;;;oBAIK,CAAC,CAAQ,EAAE,EAAE,CAAC,IAAI,CAAC,YAAY,CAAC,CAAC,CAAC;;yCAEb,MAAA,IAAI,CAAC,IAAI,0CAAE,MAAM;;;;;;;;;0BAShC,IAAI;uBACP,GAAG,EAAE,CAAC,IAAI,CAAC,oBAAoB,EAAE;uBACjC,CAAC,CAAQ,EAAE,EAAE;YACpB,MAAM,SAAS,GAAG,MAAM,CAAE,CAAC,CAAC,MAA2B,CAAC,KAAK,CAAC,CAAC;YAC/D,IAAI,CAAC,oBAAoB,CAAC,SAAS,CAAC,CAAC;YACrC,IAAI,CAAC,SAAS,GAAG,SAAS,CAAC;QAC7B,CAAC;;;;;;;;;;0BAUW,CAAC,CAAQ,EAAE,EAAE;YACrB,MAAM,KAAK,GAAG,CAAC,CAAC,MAA0B,CAAC;YAC3C,MAAM,SAAS,GAAG,KAAK,CAAC,OAAO,CAAC;YAChC,IAAI,CAAC,SAAS,GAAG,SAAS,CAAC;YAC3B,IAAI,CAAC,oBAAoB,EAAE,CAAC;QAC9B,CAAC;;wCAEuB,IAAI,CAAC,eAAe;;6BAE/B,IAAI,CAAC,mBAAmB,EAAE;;;;gCAIvB,CAAC,CAAQ,EAAE,EAAE;YAC3B,CAAC,CAAC,cAAc,EAAE,CAAC;YACnB,IAAI,CAAC,SAAS,EAAE,CAAC;QACnB,CAAC;;;;;;;;gCAQe,CAAC,CAAQ,EAAE,QAAmB,EAAE,EAAE,CAChD,IAAI,CAAC,YAAY,CAAC,CAAC,EAAE,QAAQ,CAAC;;;;8CAIF,IAAI,CAAC,YAAY;mBAC5C,IAAI,CAAC,aAAa;;;;6BAIR,IAAI,CAAC,YAAY;;;KAGzC,CAAC;IACJ,CAAC;CA+BF,CAAA;AA7BQ,wBAAM,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA4BlB,CAAC;AA1U0B;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;+CAAoB;AAGnB;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;8DAA2C;AAE1C;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;oDAAuB;AAEN;IAA3C,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;2DAAmC;AAEjD;IAA5B,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,CAAC;oDAA4B;AAE5B;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;wDAA4B;AAE3B;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;uDAA2B;AAE1B;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;uDAA4C;AAExD;IAAd,KAAK,CAAC,MAAM,CAAC;+CAAwB;AAlB3B,iBAAiB;IAD7B,aAAa,CAAC,yBAAyB,CAAC;GAC5B,iBAAiB,CA4U7B;SA5UY,iBAAiB","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"]}
package/dist/src/monthly-giving-circle.js CHANGED
@@ -104,7 +104,7 @@ let MonthlyGivingCircle = class MonthlyGivingCircle extends LitElement {
104
104
  .clickHandler=${async () => {
105
105
  this.viewToDisplay = 'receipts';
106
106
  await this.updateComplete;
107
- this.dispatchEvent(new CustomEvent(DisplayChangeEvents.receipts));
107
+ this.dispatchEvent(new Event(DisplayChangeEvents.receipts));
108
108
  }}
109
109
  >
110
110
  View recent donation history
@@ -124,10 +124,7 @@ let MonthlyGivingCircle = class MonthlyGivingCircle extends LitElement {
124
124
  const eventType = this.plans.length
125
125
  ? DisplayChangeEvents.plans
126
126
  : DisplayChangeEvents.welcome;
127
- this.dispatchEvent(new CustomEvent(eventType, {
128
- bubbles: true,
129
- composed: true,
130
- }));
127
+ this.dispatchEvent(new Event(eventType));
131
128
  this.updates = [];
132
129
  await this.updateComplete;
133
130
  }}
@@ -146,10 +143,7 @@ let MonthlyGivingCircle = class MonthlyGivingCircle extends LitElement {
146
143
  const eventType = this.plans.length
147
144
  ? DisplayChangeEvents.plans
148
145
  : DisplayChangeEvents.welcome;
149
- this.dispatchEvent(new CustomEvent(eventType, {
150
- bubbles: true,
151
- composed: true,
152
- }));
146
+ this.dispatchEvent(new Event(eventType));
153
147
  this.updates = [];
154
148
  await this.updateComplete;
155
149
  }}
@@ -193,10 +187,7 @@ let MonthlyGivingCircle = class MonthlyGivingCircle extends LitElement {
193
187
  @editThisPlan=${async (event) => {
194
188
  this.editingThisPlan = event.detail.plan;
195
189
  this.viewToDisplay = 'editPlan';
196
- this.dispatchEvent(new CustomEvent(DisplayChangeEvents.editPlan, {
197
- bubbles: true,
198
- composed: true,
199
- }));
190
+ this.dispatchEvent(new Event(DisplayChangeEvents.editPlan));
200
191
  await this.updateComplete;
201
192
  }}
202
193
  .plans=${this.plans}
package/dist/src/monthly-giving-circle.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"monthly-giving-circle.js","sourceRoot":"","sources":["../../src/monthly-giving-circle.ts"],"names":[],"mappings":"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","sourcesContent":["import { 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/mgc-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' | 'dateUpdate';\n message: string;\n};\n\nenum DisplayChangeEvents {\n welcome = 'ShowWelcome',\n receipts = 'ShowReceipts',\n plans = 'ShowPlans',\n editPlan = 'ShowEditForm',\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 @property({ type: Boolean, reflect: true }) canEdit = false;\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 if (update.action === 'amountUpdate') {\n this.editFormElement.amountUpdates(update.status);\n return;\n }\n\n if (update.action === 'dateUpdate') {\n this.editingThisPlan = plan;\n this.editFormElement.dateUpdates(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 @cancelPlan=${() => {\n this.dispatchEvent(\n new CustomEvent('cancelPlan', {\n detail: { plan: this.editingThisPlan },\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 @updateDate=${(event: CustomEvent) => {\n const { newDate } = event.detail;\n console.log('updateDate', newDate);\n this.dispatchEvent(\n new CustomEvent('updateDate', {\n detail: { plan: this.editingThisPlan, newDate },\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-mgc-button\n class=\"link slim\"\n .clickHandler=${async () => {\n this.viewToDisplay = 'receipts';\n await this.updateComplete;\n this.dispatchEvent(new CustomEvent(DisplayChangeEvents.receipts));\n }}\n >\n View recent donation history\n </ia-mgc-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-mgc-button\n class=\"primary\"\n id=\"close-receipts\"\n .clickHandler=${async () => {\n this.viewToDisplay = this.plans.length ? 'plans' : 'welcome';\n const eventType = this.plans.length\n ? DisplayChangeEvents.plans\n : DisplayChangeEvents.welcome;\n this.dispatchEvent(\n new CustomEvent(eventType, {\n bubbles: true,\n composed: true,\n })\n );\n this.updates = [];\n await this.updateComplete;\n }}\n >\n Back to account settings\n </ia-mgc-button>`;\n break;\n\n case 'editPlan':\n title = 'Monthly Giving Circle';\n titleStyle = 'default';\n cta = html`<ia-mgc-button\n class=\"primary\"\n id=\"close-edit-plan\"\n .clickHandler=${async () => {\n this.viewToDisplay = this.plans.length ? 'plans' : 'welcome';\n const eventType = this.plans.length\n ? DisplayChangeEvents.plans\n : DisplayChangeEvents.welcome;\n this.dispatchEvent(\n new CustomEvent(eventType, {\n bubbles: true,\n composed: true,\n })\n );\n this.updates = [];\n await this.updateComplete;\n }}\n >\n Back to account settings\n </ia-mgc-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(\n new CustomEvent(DisplayChangeEvents.editPlan, {\n bubbles: true,\n composed: true,\n })\n );\n await this.updateComplete;\n }}\n .plans=${this.plans}\n .canEdit=${this.canEdit}\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":"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","sourcesContent":["import { 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/mgc-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' | 'dateUpdate';\n message: string;\n};\n\nenum DisplayChangeEvents {\n welcome = 'ShowWelcome',\n receipts = 'ShowReceipts',\n plans = 'ShowPlans',\n editPlan = 'ShowEditForm',\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 @property({ type: Boolean, reflect: true }) canEdit = false;\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 if (update.action === 'amountUpdate') {\n this.editFormElement.amountUpdates(update.status);\n return;\n }\n\n if (update.action === 'dateUpdate') {\n this.editingThisPlan = plan;\n this.editFormElement.dateUpdates(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 @cancelPlan=${() => {\n this.dispatchEvent(\n new CustomEvent('cancelPlan', {\n detail: { plan: this.editingThisPlan },\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 @updateDate=${(event: CustomEvent) => {\n const { newDate } = event.detail;\n console.log('updateDate', newDate);\n this.dispatchEvent(\n new CustomEvent('updateDate', {\n detail: { plan: this.editingThisPlan, newDate },\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-mgc-button\n class=\"link slim\"\n .clickHandler=${async () => {\n this.viewToDisplay = 'receipts';\n await this.updateComplete;\n this.dispatchEvent(new Event(DisplayChangeEvents.receipts));\n }}\n >\n View recent donation history\n </ia-mgc-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-mgc-button\n class=\"primary\"\n id=\"close-receipts\"\n .clickHandler=${async () => {\n this.viewToDisplay = this.plans.length ? 'plans' : 'welcome';\n const eventType = this.plans.length\n ? DisplayChangeEvents.plans\n : DisplayChangeEvents.welcome;\n this.dispatchEvent(new Event(eventType));\n this.updates = [];\n await this.updateComplete;\n }}\n >\n Back to account settings\n </ia-mgc-button>`;\n break;\n\n case 'editPlan':\n title = 'Monthly Giving Circle';\n titleStyle = 'default';\n cta = html`<ia-mgc-button\n class=\"primary\"\n id=\"close-edit-plan\"\n .clickHandler=${async () => {\n this.viewToDisplay = this.plans.length ? 'plans' : 'welcome';\n const eventType = this.plans.length\n ? DisplayChangeEvents.plans\n : DisplayChangeEvents.welcome;\n this.dispatchEvent(new Event(eventType));\n this.updates = [];\n await this.updateComplete;\n }}\n >\n Back to account settings\n </ia-mgc-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(DisplayChangeEvents.editPlan));\n await this.updateComplete;\n }}\n .plans=${this.plans}\n .canEdit=${this.canEdit}\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
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@internetarchive/donation-monthly-portal",
3
- "version": "7.0.4-alpha1",
3
+ "version": "7.0.4",
4
4
  "description": "The Internet Archive Monthly Portal",
5
5
  "license": "AGPL-3.0-only",
6
6
  "main": "dist/index.js",
package/src/form-sections/amount.ts CHANGED
@@ -187,6 +187,50 @@ export class MGCEditPlanAmount extends LitElement {
187
187
  this.donationPaymentInfo = undefined;
188
188
  }
189
189
 
190
+ handleSubmit(e: Event, iaButton?: MGCButton) {
191
+ e.preventDefault();
192
+ this.clearStatusMessaging();
193
+
194
+ const button =
195
+ iaButton ?? (this.form.querySelector('#update-amount') as MGCButton);
196
+ if (button) this.updateButtonState(button);
197
+
198
+ if (!this.newAmount) {
199
+ this.errorMessage = 'Please enter a new amount';
200
+ if (button) button.isDisabled = false;
201
+ return;
202
+ }
203
+
204
+ const input = this.form.querySelector(
205
+ 'input[name="amount"]'
206
+ ) as HTMLInputElement;
207
+ const requestedAmount = Number(input.value) ?? 0;
208
+ const amountTooLow = requestedAmount < 1;
209
+ const amountTooHigh = requestedAmount >= 9999;
210
+
211
+ if (amountTooLow) {
212
+ this.errorMessage = 'Please enter a valid amount';
213
+ }
214
+
215
+ if (amountTooHigh) {
216
+ this.errorMessage =
217
+ 'Amount must be less than $9,999. Would you like to donate more? Please contact us at donations@archive.org';
218
+ }
219
+
220
+ if (amountTooHigh || amountTooLow) {
221
+ if (button) this.updateButtonState(button);
222
+ return;
223
+ }
224
+
225
+ this.requestAmountUpdate(e);
226
+ }
227
+
228
+ private async updateButtonState(iaButton: MGCButton) {
229
+ // eslint-disable-next-line no-param-reassign
230
+ (iaButton as MGCButton).isDisabled = true;
231
+ await iaButton?.updateComplete;
232
+ }
233
+
190
234
  async clearStatusMessaging() {
191
235
  this.errorMessage = '';
192
236
  this.updateMessage = '';
@@ -210,7 +254,10 @@ export class MGCEditPlanAmount extends LitElement {
210
254
  get editAmountForm(): TemplateResult {
211
255
  return html`
212
256
  <section>
213
- <form id="edit-plan-amount">
257
+ <form
258
+ id="edit-plan-amount"
259
+ @submit=${(e: Event) => this.handleSubmit(e)}
260
+ >
214
261
  <p>Current donation amount: $${this.plan?.amount}</p>
215
262
  <div>
216
263
  $
@@ -220,7 +267,7 @@ export class MGCEditPlanAmount extends LitElement {
220
267
  type="number"
221
268
  id="amount"
222
269
  name="amount"
223
- required="true"
270
+ ?required=${true}
224
271
  @focus=${() => this.clearStatusMessaging()}
225
272
  @input=${(e: Event) => {
226
273
  const newAmount = Number((e.target as HTMLInputElement).value);
@@ -260,41 +307,8 @@ export class MGCEditPlanAmount extends LitElement {
260
307
  id="update-amount"
261
308
  class="ia-button primary"
262
309
  type="submit"
263
- .clickHandler=${async (e: Event, iaButton: MGCButton) => {
264
- this.clearStatusMessaging();
265
-
266
- if (!this.newAmount) {
267
- this.errorMessage = 'Please enter a new amount';
268
- return;
269
- }
270
-
271
- // eslint-disable-next-line no-param-reassign
272
- (iaButton as MGCButton).isDisabled = true;
273
- await iaButton.updateComplete;
274
-
275
- // check if request is in range
276
- const input = this.form.querySelector(
277
- 'input[name="amount"]'
278
- ) as HTMLInputElement;
279
- const requestedAmount = Number(input.value) ?? 0;
280
- const amountTooLow = requestedAmount < 1;
281
- const amountTooHigh = requestedAmount >= 9999;
282
- if (amountTooLow) {
283
- this.errorMessage = 'Please enter a valid amount';
284
- }
285
- if (amountTooHigh) {
286
- this.errorMessage =
287
- 'Amount must be less than $9,999. Would you like to donate more? Please contact us at donations@archive.org';
288
- }
289
- if (amountTooHigh || amountTooLow) {
290
- // eslint-disable-next-line no-param-reassign
291
- (iaButton as MGCButton).isDisabled = false;
292
- await iaButton.updateComplete;
293
- return;
294
- }
295
-
296
- this.requestAmountUpdate(e);
297
- }}
310
+ .clickHandler=${(e: Event, iaButton: MGCButton) =>
311
+ this.handleSubmit(e, iaButton)}
298
312
  >
299
313
  Update
300
314
  </ia-mgc-button>
package/src/monthly-giving-circle.ts CHANGED
@@ -152,7 +152,7 @@ export class MonthlyGivingCircle extends LitElement {
152
152
  .clickHandler=${async () => {
153
153
  this.viewToDisplay = 'receipts';
154
154
  await this.updateComplete;
155
- this.dispatchEvent(new CustomEvent(DisplayChangeEvents.receipts));
155
+ this.dispatchEvent(new Event(DisplayChangeEvents.receipts));
156
156
  }}
157
157
  >
158
158
  View recent donation history
@@ -175,12 +175,7 @@ export class MonthlyGivingCircle extends LitElement {
175
175
  const eventType = this.plans.length
176
176
  ? DisplayChangeEvents.plans
177
177
  : DisplayChangeEvents.welcome;
178
- this.dispatchEvent(
179
- new CustomEvent(eventType, {
180
- bubbles: true,
181
- composed: true,
182
- })
183
- );
178
+ this.dispatchEvent(new Event(eventType));
184
179
  this.updates = [];
185
180
  await this.updateComplete;
186
181
  }}
@@ -200,12 +195,7 @@ export class MonthlyGivingCircle extends LitElement {
200
195
  const eventType = this.plans.length
201
196
  ? DisplayChangeEvents.plans
202
197
  : DisplayChangeEvents.welcome;
203
- this.dispatchEvent(
204
- new CustomEvent(eventType, {
205
- bubbles: true,
206
- composed: true,
207
- })
208
- );
198
+ this.dispatchEvent(new Event(eventType));
209
199
  this.updates = [];
210
200
  await this.updateComplete;
211
201
  }}
@@ -255,12 +245,7 @@ export class MonthlyGivingCircle extends LitElement {
255
245
  @editThisPlan=${async (event: CustomEvent) => {
256
246
  this.editingThisPlan = event.detail.plan;
257
247
  this.viewToDisplay = 'editPlan';
258
- this.dispatchEvent(
259
- new CustomEvent(DisplayChangeEvents.editPlan, {
260
- bubbles: true,
261
- composed: true,
262
- })
263
- );
248
+ this.dispatchEvent(new Event(DisplayChangeEvents.editPlan));
264
249
  await this.updateComplete;
265
250
  }}
266
251
  .plans=${this.plans}