@internetarchive/donation-monthly-portal 7.0.3 → 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 (5) 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/package.json +1 -1
  5. package/src/form-sections/amount.ts +51 -37
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":";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;IA8SzE,CAAC;IA1SC,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,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;;;yCAG0B,MAAA,IAAI,CAAC,IAAI,0CAAE,MAAM;;;;;;;;;;uBAUnC,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,KAAK,EAAE,CAAQ,EAAE,QAAmB,EAAE,EAAE;;YACtD,IAAI,CAAC,oBAAoB,EAAE,CAAC;YAE5B,IAAI,CAAC,IAAI,CAAC,SAAS,EAAE;gBACnB,IAAI,CAAC,YAAY,GAAG,2BAA2B,CAAC;gBAChD,OAAO;aACR;YAED,6CAA6C;YAC5C,QAAsB,CAAC,UAAU,GAAG,IAAI,CAAC;YAC1C,MAAM,QAAQ,CAAC,cAAc,CAAC;YAE9B,+BAA+B;YAC/B,MAAM,KAAK,GAAG,IAAI,CAAC,IAAI,CAAC,aAAa,CACnC,sBAAsB,CACH,CAAC;YACtB,MAAM,eAAe,GAAG,MAAA,MAAM,CAAC,KAAK,CAAC,KAAK,CAAC,mCAAI,CAAC,CAAC;YACjD,MAAM,YAAY,GAAG,eAAe,GAAG,CAAC,CAAC;YACzC,MAAM,aAAa,GAAG,eAAe,IAAI,IAAI,CAAC;YAC9C,IAAI,YAAY,EAAE;gBAChB,IAAI,CAAC,YAAY,GAAG,6BAA6B,CAAC;aACnD;YACD,IAAI,aAAa,EAAE;gBACjB,IAAI,CAAC,YAAY;oBACf,4GAA4G,CAAC;aAChH;YACD,IAAI,aAAa,IAAI,YAAY,EAAE;gBACjC,6CAA6C;gBAC5C,QAAsB,CAAC,UAAU,GAAG,KAAK,CAAC;gBAC3C,MAAM,QAAQ,CAAC,cAAc,CAAC;gBAC9B,OAAO;aACR;YAED,IAAI,CAAC,mBAAmB,CAAC,CAAC,CAAC,CAAC;QAC9B,CAAC;;;;8CAI6B,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;AA5T0B;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,CA8T7B;SA9TY,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 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":"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","sourcesContent":["import {\n LitElement,\n html,\n PropertyValues,\n nothing,\n css,\n TemplateResult,\n} from 'lit';\nimport { customElement, property, query } from 'lit/decorators.js';\nimport '@internetarchive/donation-form-section';\nimport {\n DonationPaymentInfo,\n DonationType,\n} from '@internetarchive/donation-form-data-models';\n\nimport type { MonthlyPlan } from '../models/plan';\nimport '../presentational/donation-section-info';\nimport '../presentational/mgc-button';\nimport type { MGCButton } from '../presentational/mgc-button';\nimport '../presentational/mgc-update-status';\n\n@customElement('ia-mgc-edit-plan-amount')\nexport class MGCEditPlanAmount extends LitElement {\n @property({ type: Object }) plan?: MonthlyPlan;\n\n // captures the changes made to the amount && calculates the total amount with fees\n @property({ type: Object }) donationPaymentInfo?: DonationPaymentInfo;\n\n @property({ type: Number }) newAmount: number = 0;\n\n @property({ type: Boolean, reflect: true }) currentlyEditing: boolean = false;\n\n @property({ type: Boolean }) coverFees: boolean = false;\n\n @property({ type: String }) updateMessage: string = '';\n\n @property({ type: String }) errorMessage: string = '';\n\n @property({ type: String }) updateStatus: 'success' | 'fail' | '' = '';\n\n @query('form') form!: HTMLFormElement;\n\n updated(changed: PropertyValues) {\n if (changed.has('plan') && this.plan) {\n this.captureAmountChanges();\n }\n if (changed.has('coverFees')) {\n this.captureAmountChanges();\n }\n if (changed.has('currentlyEditing') && this.currentlyEditing) {\n this.form.focus();\n }\n\n if (changed.has('donationPaymentInfo') && !this.donationPaymentInfo) {\n this.captureAmountChanges();\n }\n }\n\n protected render() {\n return html`\n <section>\n <donation-form-section badgemode=\"hidebadge\" headline=\"Amount\">\n ${!this.currentlyEditing\n ? html`<ia-mgc-form-section-info\n @editingRequested=${() => {\n this.currentlyEditing = true;\n this.clearStatusMessaging();\n }}\n ><span>USD $${this.plan?.amount}</span>\n </ia-mgc-form-section-info>`\n : nothing}\n ${this.currentlyEditing ? this.editAmountForm : nothing}\n </donation-form-section>\n </section>\n `;\n }\n\n /* External Function that is called by consumer to tell the form there has been data update */\n async amountUpdated(status: 'success' | 'fail') {\n this.clearInputField();\n\n this.updateStatus = status;\n this.updateMessage =\n status === 'success' ? 'Amount updated' : 'Failed. Try again.';\n\n if (status === 'success') {\n this.closeForm();\n await this.updateComplete;\n\n this.updateStatus = status;\n this.updateMessage = 'Amount updated';\n\n return;\n }\n\n (\n this.form.querySelector('ia-mgc-button#update-amount') as MGCButton\n ).isDisabled = false;\n\n this.captureAmountChanges();\n\n await this.updateComplete;\n }\n\n /* Dispatches amount change request */\n requestAmountUpdate(e: Event): void {\n e.preventDefault();\n\n const input = this.form.querySelector(\n 'input[name=\"amount\"]'\n ) as HTMLInputElement;\n this.newAmount = Number(input.value);\n\n this.captureAmountChanges(this.newAmount);\n\n console.log('<plan-amount> - update amount', {\n newValue: this.newAmount,\n oldValue: this.plan?.plan.amount,\n display: this.donationPaymentInfo?.amount,\n });\n const newAmount = Number(\n DonationPaymentInfo.calculateTotal(\n Number(this.donationPaymentInfo?.amount),\n this.coverFees\n )\n );\n this.dispatchEvent(\n new CustomEvent('updateAmount', {\n detail: {\n plan: this.plan,\n amount: newAmount,\n baseAmount: this.donationPaymentInfo?.amount,\n coverFees: this.coverFees,\n feeCovered: this.donationPaymentInfo?.feeAmountCovered,\n },\n })\n );\n }\n\n /* captures form changes */\n captureAmountChanges(newAmount?: number) {\n if (!this.donationPaymentInfo && this.plan) {\n this.donationPaymentInfo = new DonationPaymentInfo({\n donationType: DonationType.Monthly,\n amount: 0,\n coverFees: true,\n });\n return;\n }\n\n let newPlan;\n if (newAmount) {\n newPlan = new DonationPaymentInfo({\n donationType: DonationType.Monthly,\n amount: newAmount,\n coverFees: true,\n });\n } else {\n const amount = this.donationPaymentInfo\n ? this.donationPaymentInfo.amount\n : this.plan!.amount;\n\n newPlan = new DonationPaymentInfo({\n donationType: DonationType.Monthly,\n amount,\n coverFees: true,\n });\n }\n\n this.donationPaymentInfo = newPlan;\n }\n\n closeForm() {\n this.clearInputField();\n this.clearStatusMessaging();\n this.currentlyEditing = false;\n this.coverFees = false;\n this.errorMessage = '';\n }\n\n clearInputField() {\n const input = this.form.querySelector(\n 'input[name=\"amount\"]'\n ) as HTMLInputElement;\n input.value = '';\n this.newAmount = 0;\n this.donationPaymentInfo = undefined;\n }\n\n handleSubmit(e: Event, iaButton?: MGCButton) {\n e.preventDefault();\n this.clearStatusMessaging();\n\n const button =\n iaButton ?? (this.form.querySelector('#update-amount') as MGCButton);\n if (button) this.updateButtonState(button);\n\n if (!this.newAmount) {\n this.errorMessage = 'Please enter a new amount';\n if (button) button.isDisabled = false;\n return;\n }\n\n const input = this.form.querySelector(\n 'input[name=\"amount\"]'\n ) as HTMLInputElement;\n const requestedAmount = Number(input.value) ?? 0;\n const amountTooLow = requestedAmount < 1;\n const amountTooHigh = requestedAmount >= 9999;\n\n if (amountTooLow) {\n this.errorMessage = 'Please enter a valid amount';\n }\n\n if (amountTooHigh) {\n this.errorMessage =\n 'Amount must be less than $9,999. Would you like to donate more? Please contact us at donations@archive.org';\n }\n\n if (amountTooHigh || amountTooLow) {\n if (button) this.updateButtonState(button);\n return;\n }\n\n this.requestAmountUpdate(e);\n }\n\n private async updateButtonState(iaButton: MGCButton) {\n // eslint-disable-next-line no-param-reassign\n (iaButton as MGCButton).isDisabled = true;\n await iaButton?.updateComplete;\n }\n\n async clearStatusMessaging() {\n this.errorMessage = '';\n this.updateMessage = '';\n this.updateStatus = '';\n await this.updateComplete;\n }\n\n /* DISPLAY */\n totalAmountWithFees(): number {\n if (this.newAmount === 0) {\n return 0;\n }\n\n return DonationPaymentInfo.calculateTotal(this.newAmount, this.coverFees);\n }\n\n get coveredFeesText() {\n return `I'll generously add $${this.donationPaymentInfo?.feeAmountCovered} to cover fees.`;\n }\n\n get editAmountForm(): TemplateResult {\n return html`\n <section>\n <form\n id=\"edit-plan-amount\"\n @submit=${(e: Event) => this.handleSubmit(e)}\n >\n <p>Current donation amount: $${this.plan?.amount}</p>\n <div>\n $\n <input\n min=\"1\"\n max=\"9999\"\n type=\"number\"\n id=\"amount\"\n name=\"amount\"\n ?required=${true}\n @focus=${() => this.clearStatusMessaging()}\n @input=${(e: Event) => {\n const newAmount = Number((e.target as HTMLInputElement).value);\n this.captureAmountChanges(newAmount);\n this.newAmount = newAmount;\n }}\n />\n / month\n </div>\n <div>\n <div class=\"checkbox-option-container\">\n <input\n type=\"checkbox\"\n id=\"cover-fees\"\n tabindex=\"0\"\n @change=${(e: Event) => {\n const input = e.target as HTMLInputElement;\n const coverFees = input.checked;\n this.coverFees = coverFees;\n this.captureAmountChanges();\n }}\n />\n <label for=\"cover-fees\">${this.coveredFeesText}</label>\n </div>\n <p>Total: USD $${this.totalAmountWithFees()}</p>\n <div class=\"cta-container\">\n <ia-mgc-button\n class=\"ia-button secondary\"\n .clickHandler=${(e: Event) => {\n e.preventDefault();\n this.closeForm();\n }}\n >\n Cancel\n </ia-mgc-button>\n <ia-mgc-button\n id=\"update-amount\"\n class=\"ia-button primary\"\n type=\"submit\"\n .clickHandler=${(e: Event, iaButton: MGCButton) =>\n this.handleSubmit(e, iaButton)}\n >\n Update\n </ia-mgc-button>\n <ia-mgc-update-status .status=${this.updateStatus}\n >${this.updateMessage}</ia-mgc-update-status\n >\n </div>\n </div>\n <p class=\"error\">${this.errorMessage}</p>\n </form>\n </section>\n `;\n }\n\n static styles = css`\n input#amount {\n width: 50px;\n }\n\n .cta-container {\n display: flex;\n flex-direction: row;\n flex-wrap: wrap;\n align-content: center;\n justify-content: flex-start;\n align-items: center;\n gap: 10px;\n }\n\n p.error {\n color: var(--mgc-warning-color-dark, #bb0505);\n }\n\n ia-mgc-update-status {\n display: inline-block;\n margin-left: 1rem;\n }\n\n .checkbox-option-container {\n margin: 10px 0;\n display: flex;\n }\n `;\n}\n"]}
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@internetarchive/donation-monthly-portal",
3
- "version": "7.0.3",
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>