@internetarchive/donation-form 0.5.6 → 0.5.8-alpha.1
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/braintree-manager/payment-clients.js +5 -5
- package/dist/src/braintree-manager/payment-clients.js.map +1 -1
- package/dist/src/form-elements/contact-form/contact-form.js +1 -1
- package/dist/src/form-elements/contact-form/contact-form.js.map +1 -1
- package/dist/test/mocks/mock-lazy-loader.d.ts +7 -7
- package/dist/test/mocks/mock-lazy-loader.js +22 -2
- package/dist/test/mocks/mock-lazy-loader.js.map +1 -1
- package/package.json +13 -13
- package/src/braintree-manager/payment-clients.ts +6 -6
- package/src/form-elements/contact-form/contact-form.ts +1 -2
|
@@ -91,10 +91,10 @@ export class PaymentClients {
|
|
|
91
91
|
generator: () => __awaiter(this, void 0, void 0, function* () {
|
|
92
92
|
yield this.lazyLoader.loadScript({
|
|
93
93
|
src: 'https://www.paypalobjects.com/api/checkout.js',
|
|
94
|
-
attributes:
|
|
95
|
-
|
|
96
|
-
|
|
97
|
-
|
|
94
|
+
attributes: {
|
|
95
|
+
'data-version-4': '',
|
|
96
|
+
'log-level': 'warn',
|
|
97
|
+
},
|
|
98
98
|
});
|
|
99
99
|
return window.paypal;
|
|
100
100
|
}),
|
|
@@ -110,7 +110,7 @@ export class PaymentClients {
|
|
|
110
110
|
const extension = this.environment === HostingEnvironment.Production ? 'min.js' : 'js';
|
|
111
111
|
const scriptWithSuffix = `${scriptName}.${extension}`;
|
|
112
112
|
const url = `https://js.braintreegateway.com/web/${this.braintreeVersion}/js/${scriptWithSuffix}`;
|
|
113
|
-
|
|
113
|
+
yield this.lazyLoader.loadScript({ src: url });
|
|
114
114
|
});
|
|
115
115
|
}
|
|
116
116
|
}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"payment-clients.js","sourceRoot":"","sources":["../../../src/braintree-manager/payment-clients.ts"],"names":[],"mappings":"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
|
|
1
|
+
{"version":3,"file":"payment-clients.js","sourceRoot":"","sources":["../../../src/braintree-manager/payment-clients.ts"],"names":[],"mappings":";AACA,OAAO,EAAE,iBAAiB,EAAE,MAAM,qCAAqC,CAAC;AACxE,OAAO,EAAE,kBAAkB,EAAE,MAAM,wBAAwB,CAAC;AAiB5D;;;;;;;;;;;;GAYG;AACH,MAAM,OAAO,cAAc;IAiGzB,YAAY,UAAsC,EAAE,WAA+B;QAhGnF,oBAAe,GAAG,IAAI,iBAAiB,CAAmB;YACxD,SAAS,EAAE,GAAoC,EAAE;gBAC/C,MAAM,IAAI,CAAC,mBAAmB,CAAC,QAAQ,CAAC,CAAC;gBACzC,OAAO,MAAM,CAAC,SAAS,CAAC,MAAM,CAAC;YACjC,CAAC,CAAA;SACF,CAAC,CAAC;QAEH,kBAAa,GAAG,IAAI,iBAAiB,CAA0B;YAC7D,SAAS,EAAE,GAA2C,EAAE;gBACtD,MAAM,IAAI,CAAC,mBAAmB,CAAC,gBAAgB,CAAC,CAAC;gBACjD,OAAO,MAAM,CAAC,SAAS,CAAC,aAAa,CAAC;YACxC,CAAC,CAAA;SACF,CAAC,CAAC;QAEH,iBAAY,GAAG,IAAI,iBAAiB,CAAyB;YAC3D,SAAS,EAAE,GAA0C,EAAE;gBACrD,MAAM,IAAI,CAAC,mBAAmB,CAAC,eAAe,CAAC,CAAC;gBAChD,OAAO,MAAM,CAAC,SAAS,CAAC,YAAY,CAAC;YACvC,CAAC,CAAA;SACF,CAAC,CAAC;QAEH,UAAK,GAAG,IAAI,iBAAiB,CAAkB;YAC7C,SAAS,EAAE,GAAmC,EAAE;gBAC9C,MAAM,IAAI,CAAC,mBAAmB,CAAC,OAAO,CAAC,CAAC;gBACxC,OAAO,MAAM,CAAC,SAAS,CAAC,KAAK,CAAC;YAChC,CAAC,CAAA;SACF,CAAC,CAAC;QAEH,WAAM,GAAG,IAAI,iBAAiB,CAA2B;YACvD,SAAS,EAAE,GAA4C,EAAE;gBACvD,MAAM,IAAI,CAAC,mBAAmB,CAAC,iBAAiB,CAAC,CAAC;gBAClD,OAAO,MAAM,CAAC,SAAS,CAAC,cAAc,CAAC;YACzC,CAAC,CAAA;SACF,CAAC,CAAC;QAEH,aAAQ,GAAG,IAAI,iBAAiB,CAAqB;YACnD,SAAS,EAAE,GAAsC,EAAE;gBACjD,MAAM,IAAI,CAAC,mBAAmB,CAAC,WAAW,CAAC,CAAC;gBAC5C,OAAO,MAAM,CAAC,SAAS,CAAC,QAAQ,CAAC;YACnC,CAAC,CAAA;SACF,CAAC,CAAC;QAEH,6BAAwB,GAAG,IAAI,iBAAiB,CAA0B;YACxE,SAAS,EAAE,GAA2C,EAAE;gBACtD,MAAM,IAAI,CAAC,mBAAmB,CAAC,gBAAgB,CAAC,CAAC;gBACjD,OAAO,MAAM,CAAC,SAAS,CAAC,aAAa,CAAC;YACxC,CAAC,CAAA;SACF,CAAC,CAAC;QAEH,yBAAoB,GAAG,IAAI,iBAAiB,CAAqC;YAC/E,SAAS,EAAE,GAAsD,EAAE;gBACjE,MAAM,IAAI,CAAC,UAAU,CAAC,UAAU,CAAC,EAAE,GAAG,EAAE,uCAAuC,EAAE,CAAC,CAAC;gBACnF,OAAO,IAAI,MAAM,CAAC,QAAQ,CAAC,GAAG,CAAC,cAAc,CAAC;oBAC5C,WAAW,EAAE,IAAI,CAAC,WAAW,KAAK,kBAAkB,CAAC,WAAW,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,YAAY;iBACzF,CAAC,CAAC;YACL,CAAC,CAAA;SACF,CAAC,CAAC;QAEH,qBAAgB,GAAG,IAAI,iBAAiB,CAAwB;YAC9D,SAAS,EAAE,GAAmC,EAAE,CAC9C,IAAI,OAAO,CAAC,OAAO,CAAC,EAAE;gBACpB,2FAA2F;gBAC3F,0EAA0E;gBAC1E,yFAAyF;gBACzF,4EAA4E;gBAC5E,8DAA8D;gBAC7D,MAAc,CAAC,oCAAoC,GAAG,GAAS,EAAE;oBAChE,UAAU,CAAC,GAAG,EAAE;wBACd,8DAA8D;wBAC9D,OAAQ,MAAc,CAAC,oCAAoC,CAAC;oBAC9D,CAAC,EAAE,EAAE,CAAC,CAAC;oBACP,OAAO,CAAC,MAAM,CAAC,UAAU,CAAC,CAAC;gBAC7B,CAAC,CAAC;gBAEF,IAAI,CAAC,UAAU,CAAC,UAAU,CAAC;oBACzB,GAAG,EACD,qGAAqG;iBACxG,CAAC,CAAC;YACL,CAAC,CAAC;SACL,CAAC,CAAC;QAEH,8DAA8D;QAC9D,kBAAa,GAAG,IAAI,iBAAiB,CAAM;YACzC,8DAA8D;YAC9D,SAAS,EAAE,GAAuB,EAAE;gBAClC,MAAM,IAAI,CAAC,UAAU,CAAC,UAAU,CAAC;oBAC/B,GAAG,EAAE,+CAA+C;oBACpD,UAAU,EAAE;wBACV,gBAAgB,EAAE,EAAE;wBACpB,WAAW,EAAE,MAAM;qBACpB;iBACF,CAAC,CAAC;gBACH,OAAO,MAAM,CAAC,MAAM,CAAC;YACvB,CAAC,CAAA;SACF,CAAC,CAAC;QAeK,qBAAgB,GAAG,QAAQ,CAAC;QAE5B,gBAAW,GAAuB,kBAAkB,CAAC,WAAW,CAAC;QAdvE,IAAI,CAAC,UAAU,GAAG,UAAU,CAAC;QAC7B,IAAI,CAAC,WAAW,GAAG,WAAW,CAAC;IACjC,CAAC;IAED,8DAA8D;IAChD,mBAAmB,CAAC,UAAkB;;YAClD,MAAM,SAAS,GAAG,IAAI,CAAC,WAAW,KAAK,kBAAkB,CAAC,UAAU,CAAC,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAC,IAAI,CAAC;YACvF,MAAM,gBAAgB,GAAG,GAAG,UAAU,IAAI,SAAS,EAAE,CAAC;YACtD,MAAM,GAAG,GAAG,uCAAuC,IAAI,CAAC,gBAAgB,OAAO,gBAAgB,EAAE,CAAC;YAClG,MAAM,IAAI,CAAC,UAAU,CAAC,UAAU,CAAC,EAAE,GAAG,EAAE,GAAG,EAAE,CAAC,CAAC;QACjD,CAAC;KAAA;CAOF","sourcesContent":["import { LazyLoaderServiceInterface } from '@internetarchive/lazy-loader-service';\nimport { PromisedSingleton } from '@internetarchive/promised-singleton';\nimport { HostingEnvironment } from './braintree-interfaces';\n\nexport interface PaymentClientsInterface {\n braintreeClient: PromisedSingleton<braintree.Client>;\n dataCollector: PromisedSingleton<braintree.DataCollector>;\n hostedFields: PromisedSingleton<braintree.HostedFields>;\n venmo: PromisedSingleton<braintree.Venmo>;\n payPal: PromisedSingleton<braintree.PayPalCheckout>;\n applePay: PromisedSingleton<braintree.ApplePay>;\n googlePayBraintreeClient: PromisedSingleton<braintree.GooglePayment>;\n\n googlePaymentsClient: PromisedSingleton<google.payments.api.PaymentsClient>;\n recaptchaLibrary: PromisedSingleton<ReCaptchaV2.ReCaptcha>;\n // eslint-disable-next-line @typescript-eslint/no-explicit-any\n paypalLibrary: PromisedSingleton<any>;\n}\n\n/**\n * The PaymentClients class is responsible for loading and passing around\n * all of the payment libraries. Internally it uses the LazyLoaderService to lazy load\n * the javascript clients.\n *\n * For instance, it carries around the braintree and paypal libraries, as well as the specific\n * payment-provider clients for each of the providers. This allows us to pass around typed\n * objects instead of the untyped libraries we get from the providers.\n *\n * @export\n * @class PaymentClients\n * @implements {PaymentClientsInterface}\n */\nexport class PaymentClients implements PaymentClientsInterface {\n braintreeClient = new PromisedSingleton<braintree.Client>({\n generator: async (): Promise<braintree.Client> => {\n await this.loadBraintreeScript('client');\n return window.braintree.client;\n },\n });\n\n dataCollector = new PromisedSingleton<braintree.DataCollector>({\n generator: async (): Promise<braintree.DataCollector> => {\n await this.loadBraintreeScript('data-collector');\n return window.braintree.dataCollector;\n },\n });\n\n hostedFields = new PromisedSingleton<braintree.HostedFields>({\n generator: async (): Promise<braintree.HostedFields> => {\n await this.loadBraintreeScript('hosted-fields');\n return window.braintree.hostedFields;\n },\n });\n\n venmo = new PromisedSingleton<braintree.Venmo>({\n generator: async (): Promise<braintree.Venmo> => {\n await this.loadBraintreeScript('venmo');\n return window.braintree.venmo;\n },\n });\n\n payPal = new PromisedSingleton<braintree.PayPalCheckout>({\n generator: async (): Promise<braintree.PayPalCheckout> => {\n await this.loadBraintreeScript('paypal-checkout');\n return window.braintree.paypalCheckout;\n },\n });\n\n applePay = new PromisedSingleton<braintree.ApplePay>({\n generator: async (): Promise<braintree.ApplePay> => {\n await this.loadBraintreeScript('apple-pay');\n return window.braintree.applePay;\n },\n });\n\n googlePayBraintreeClient = new PromisedSingleton<braintree.GooglePayment>({\n generator: async (): Promise<braintree.GooglePayment> => {\n await this.loadBraintreeScript('google-payment');\n return window.braintree.googlePayment;\n },\n });\n\n googlePaymentsClient = new PromisedSingleton<google.payments.api.PaymentsClient>({\n generator: async (): Promise<google.payments.api.PaymentsClient> => {\n await this.lazyLoader.loadScript({ src: 'https://pay.google.com/gp/p/js/pay.js' });\n return new google.payments.api.PaymentsClient({\n environment: this.environment === HostingEnvironment.Development ? 'TEST' : 'PRODUCTION',\n });\n },\n });\n\n recaptchaLibrary = new PromisedSingleton<ReCaptchaV2.ReCaptcha>({\n generator: (): Promise<ReCaptchaV2.ReCaptcha> =>\n new Promise(resolve => {\n // The loader for the recaptcha library is relying on an onload callback from the recaptcha\n // library because even when the library has loaded, it is still not ready\n // As recommended by Recaptcha, we attach a callback to the window object before starting\n // the load and remove it once the load is complete and resolve the promise.\n // eslint-disable-next-line @typescript-eslint/no-explicit-any\n (window as any).donationFormGrecaptchaLoadedCallback = (): void => {\n setTimeout(() => {\n // eslint-disable-next-line @typescript-eslint/no-explicit-any\n delete (window as any).donationFormGrecaptchaLoadedCallback;\n }, 10);\n resolve(window.grecaptcha);\n };\n\n this.lazyLoader.loadScript({\n src:\n 'https://www.google.com/recaptcha/api.js?onload=donationFormGrecaptchaLoadedCallback&render=explicit',\n });\n }),\n });\n\n // eslint-disable-next-line @typescript-eslint/no-explicit-any\n paypalLibrary = new PromisedSingleton<any>({\n // eslint-disable-next-line @typescript-eslint/no-explicit-any\n generator: async (): Promise<any> => {\n await this.lazyLoader.loadScript({\n src: 'https://www.paypalobjects.com/api/checkout.js',\n attributes: {\n 'data-version-4': '',\n 'log-level': 'warn',\n },\n });\n return window.paypal;\n },\n });\n\n constructor(lazyLoader: LazyLoaderServiceInterface, environment: HostingEnvironment) {\n this.lazyLoader = lazyLoader;\n this.environment = environment;\n }\n\n // eslint-disable-next-line @typescript-eslint/no-explicit-any\n private async loadBraintreeScript(scriptName: string): Promise<void> {\n const extension = this.environment === HostingEnvironment.Production ? 'min.js' : 'js';\n const scriptWithSuffix = `${scriptName}.${extension}`;\n const url = `https://js.braintreegateway.com/web/${this.braintreeVersion}/js/${scriptWithSuffix}`;\n await this.lazyLoader.loadScript({ src: url });\n }\n\n private braintreeVersion = '3.62.2';\n\n private environment: HostingEnvironment = HostingEnvironment.Development;\n\n private lazyLoader: LazyLoaderServiceInterface;\n}\n"]}
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
import { __decorate } from "tslib";
|
|
2
2
|
import { LitElement, html, css } from 'lit';
|
|
3
3
|
import { customElement, query } from 'lit/decorators.js';
|
|
4
|
-
import { ifDefined } from 'lit
|
|
4
|
+
import { ifDefined } from 'lit/directives/if-defined.js';
|
|
5
5
|
import { BillingInfo, CustomerInfo, DonorContactInfo, } from '@internetarchive/donation-form-data-models';
|
|
6
6
|
import { SpacerOption } from '../badged-input';
|
|
7
7
|
import '../badged-input';
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"contact-form.js","sourceRoot":"","sources":["../../../../src/form-elements/contact-form/contact-form.ts"],"names":[],"mappings":"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","sourcesContent":["import { LitElement, html, css, TemplateResult } from 'lit';\nimport { customElement, query } from 'lit/decorators.js';\n\nimport { ifDefined } from 'lit-html/directives/if-defined';\n\nimport {\n BillingInfo,\n CustomerInfo,\n DonorContactInfo,\n} from '@internetarchive/donation-form-data-models';\nimport { AutoCompleteFieldOptions } from './autocomplete-field-options';\nimport { SpacerOption } from '../badged-input';\nimport { BadgedInput } from '../badged-input';\nimport '../badged-input';\n\nimport emailImg from '@internetarchive/icon-email';\nimport localePinImg from '@internetarchive/icon-locale-pin';\nimport userIcon from '@internetarchive/icon-user';\n\nimport { countries } from './countries';\n\n@customElement('contact-form')\nexport class ContactForm extends LitElement {\n @query('badged-input.donation-contact-form-email') emailBadgedInput!: BadgedInput;\n @query('#donation-contact-form-email') emailField!: HTMLInputElement;\n\n @query('badged-input.donation-contact-form-first-name') firstNameBadgedInput!: BadgedInput;\n @query('#donation-contact-form-first-name') firstNameField!: HTMLInputElement;\n\n @query('badged-input.donation-contact-form-last-name') lastNameBadgedInput!: BadgedInput;\n @query('#donation-contact-form-last-name') lastNameField!: HTMLInputElement;\n\n @query('badged-input.donation-contact-form-postal-code') postalBadgedInput!: BadgedInput;\n @query('#donation-contact-form-postal-code') postalCodeField!: HTMLInputElement;\n\n @query('badged-input.donation-contact-form-street-address')\n streetAddressBadgedInput!: BadgedInput;\n @query('#donation-contact-form-street-address') streetAddressField!: HTMLInputElement;\n\n @query('badged-input.donation-contact-form-extended-address')\n extendedAddressBadgedInput!: BadgedInput;\n @query('#donation-contact-form-extended-address') extendedAddressField!: HTMLInputElement;\n\n @query('badged-input.donation-contact-form-locality') localityBadgedInput!: BadgedInput;\n @query('#donation-contact-form-locality') localityField!: HTMLInputElement;\n\n @query('badged-input.donation-contact-form-region') regionBadgedInput!: BadgedInput;\n @query('#donation-contact-form-region') regionField!: HTMLInputElement;\n\n @query('#donation-contact-form-countryCodeAlpha2') countryCodeAlpha2Field!: HTMLSelectElement;\n\n @query('#donation-contact-form-error-message') errorMessage!: HTMLDivElement;\n @query('form') form!: HTMLFormElement;\n\n reportValidity(): boolean {\n const fieldBadgedInputs: Array<[HTMLInputElement, BadgedInput]> = [\n [this.emailField, this.emailBadgedInput],\n [this.firstNameField, this.firstNameBadgedInput],\n [this.lastNameField, this.lastNameBadgedInput],\n [this.regionField, this.regionBadgedInput],\n [this.localityField, this.localityBadgedInput],\n [this.streetAddressField, this.streetAddressBadgedInput],\n [this.postalCodeField, this.postalBadgedInput],\n ];\n\n let isValid = true;\n fieldBadgedInputs.forEach(([inputElement, badgedInput]) => {\n const fieldValid = inputElement.checkValidity();\n isValid = isValid && fieldValid;\n if (!fieldValid) {\n badgedInput.error = true;\n }\n });\n\n if (!isValid) {\n this.errorMessage.innerText = 'Please enter any missing contact information below';\n } else {\n this.errorMessage.innerText = '';\n }\n\n return isValid;\n }\n\n focus(): void {\n this.emailField.focus();\n }\n\n /** @inheritdoc */\n render(): TemplateResult {\n return html`\n <div id=\"donation-contact-form-error-message\"></div>\n <form>\n <fieldset>\n <div class=\"row\">\n ${this.generateInput({\n id: 'donation-contact-form-email',\n placeholder: 'Email',\n required: true,\n fieldType: 'email',\n name: 'email',\n autocomplete: 'email',\n maxlength: 255,\n icon: emailImg,\n })}\n </div>\n </fieldset>\n\n <fieldset>\n <div class=\"row\">\n ${this.generateInput({\n id: 'donation-contact-form-first-name',\n placeholder: 'First name',\n name: 'fname',\n required: true,\n maxlength: 255,\n autocomplete: 'given-name',\n icon: userIcon,\n })}\n </div>\n <div class=\"row\">\n ${this.generateInput({\n id: 'donation-contact-form-last-name',\n placeholder: 'Last name',\n name: 'lname',\n autocomplete: 'family-name',\n required: true,\n maxlength: 255,\n })}\n </div>\n </fieldset>\n <fieldset>\n <div class=\"row\">\n ${this.generateInput({\n id: 'donation-contact-form-street-address',\n placeholder: 'Address Line 1',\n required: true,\n autocomplete: 'address-line1',\n icon: localePinImg,\n name: 'street-address',\n })}\n </div>\n <div class=\"row\">\n ${this.generateInput({\n id: 'donation-contact-form-extended-address',\n placeholder: 'Address Line 2 (optional)',\n autocomplete: 'address-line2',\n required: false,\n name: 'extended-address',\n })}\n </div>\n <div class=\"row\">\n ${this.generateInput({\n id: 'donation-contact-form-locality',\n placeholder: 'City',\n autocomplete: 'address-level2',\n required: true,\n name: 'locality',\n })}\n </div>\n <div class=\"row\">\n ${this.generateInput({\n id: 'donation-contact-form-region',\n placeholder: 'State / Province',\n autocomplete: 'address-level1',\n required: true,\n name: 'region',\n })}\n ${this.generateInput({\n id: 'donation-contact-form-postal-code',\n placeholder: 'Zip / Postal',\n autocomplete: 'postal-code',\n required: true,\n name: 'postal',\n maxlength: 9,\n // must start with a character, then may contain spaces\n validationPattern: '[a-zA-Z\\\\-\\\\d]+[a-zA-Z\\\\-\\\\d\\\\s]*',\n iconSpaceOption: SpacerOption.CompressSpace,\n })}\n </div>\n <div class=\"row\">\n ${this.countrySelectorTemplate}\n </div>\n </fieldset>\n </form>\n ${this.getStyles}\n `;\n }\n\n private get countrySelectorTemplate(): TemplateResult {\n const selectedCountry = 'US';\n\n return html`\n <badged-input>\n <select id=\"donation-contact-form-countryCodeAlpha2\">\n ${Object.keys(countries).map(key => {\n const name = countries[key];\n return html`\n <option value=${key} ?selected=${key === selectedCountry}>${name}</option>\n `;\n })}\n </select>\n </badged-input>\n `;\n }\n\n /** @inheritdoc */\n createRenderRoot(): this {\n // Render template without shadow DOM. Note that shadow DOM features like\n // encapsulated CSS and slots are unavailable.\n // Form autofill does not work properly in the shadow DOM\n // so we need our form fields in the light DOM\n return this;\n }\n\n // reset the error state when the user focuses the input\n private inputFocused(e: KeyboardEvent): void {\n this.errorMessage.innerText = '';\n const input = e.target as HTMLInputElement;\n const inputIdentifier = input.id;\n const badgedInput = this.querySelector(`badged-input.${inputIdentifier}`) as BadgedInput;\n badgedInput.error = false;\n }\n\n private generateInput(options: {\n id: string;\n placeholder: string;\n required?: boolean;\n fieldType?: 'text' | 'email';\n autocomplete?: AutoCompleteFieldOptions;\n maxlength?: number;\n name: string;\n icon?: TemplateResult;\n iconSpaceOption?: SpacerOption;\n validationPattern?: string;\n }): TemplateResult {\n const required = options.required ?? true;\n const fieldType = options.fieldType ?? 'text';\n const iconOption = options.iconSpaceOption ?? SpacerOption.LeaveSpace;\n\n return html`\n <badged-input\n class=${options.id}\n .icon=${options.icon}\n .iconSpaceOption=${iconOption}\n ?required=${options.required}\n >\n <label for=${options.id}>${options.placeholder}</label>\n <input\n type=${fieldType}\n id=${options.id}\n class=\"donation-contact-form-input\"\n name=${options.name}\n aria-label=${options.placeholder}\n placeholder=${options.placeholder}\n maxlength=${ifDefined(options.maxlength)}\n autocomplete=${options.autocomplete ?? 'on'}\n pattern=${ifDefined(options.validationPattern)}\n @focus=${this.inputFocused}\n ?required=${required}\n />\n </badged-input>\n `;\n }\n\n get donorContactInfo(): DonorContactInfo {\n return new DonorContactInfo({\n billing: this.billingInfo,\n customer: this.contactInfo,\n });\n }\n\n get billingInfo(): BillingInfo {\n const billingInfo = new BillingInfo({\n streetAddress: this.streetAddressField.value,\n extendedAddress: this.extendedAddressField.value,\n locality: this.localityField.value,\n region: this.regionField.value,\n postalCode: this.postalCodeField.value,\n countryCodeAlpha2: this.countryCodeAlpha2Field.value,\n });\n return billingInfo;\n }\n\n get contactInfo(): CustomerInfo {\n return new CustomerInfo({\n email: this.emailField.value,\n firstName: this.firstNameField.value,\n lastName: this.lastNameField.value,\n });\n }\n\n /**\n * This is not the normal LitElement styles block.\n *\n * This element uses the clear DOM instead of the shadow DOM so it can't use\n * the shadowRoot's isolated styling. This is a bit of a workaround to keep all of\n * the styling local by writing out our own <style> tag and just be careful about\n * the selectors since they will leak outside of this component.\n *\n * @readonly\n * @private\n * @type {TemplateResult}\n * @memberof ContactForm\n */\n private get getStyles(): TemplateResult {\n const noIconSpacerWidth = css`var(--badgedInputNoIconSpacerWidth, 3rem)`;\n const iconSpacerWidth = css`var(--badgedInputIconSpacerWidth, 5rem)`;\n\n const fieldSetSpacing = css`var(--fieldSetSpacing, 1rem)`;\n const fieldFontFamily = css`var(--fontFamily, \"Helvetica Neue\", Helvetica, Arial, sans-serif)`;\n const fieldFontSize = css`var(--contactFieldFontSize, 1.6rem)`;\n const fieldFontColor = css`var(--inputFieldFontColor, #333)`;\n\n const iconFieldWidth = css`calc(100% - ${iconSpacerWidth})`;\n const noIconFieldWidth = css`calc(100% - ${noIconSpacerWidth})`;\n\n return html`\n <style>\n /*\n **NOTE**\n This element is in the lightDOM so be sure to prefix all styles\n with \"contact-form\" so styles don't leak.\n */\n contact-form fieldset {\n border: 0;\n padding: 0;\n margin: 0;\n margin-bottom: ${fieldSetSpacing};\n }\n\n /* These 1px and 0 margins in the next few selectors are to account for the\n double outlines caused by the fields being right next to each other */\n contact-form .row {\n display: flex;\n margin: -1px 0 0 0;\n }\n\n contact-form fieldset .row:first-child {\n margin-top: 0;\n }\n\n contact-form badged-input.donation-contact-form-region {\n width: 60%;\n }\n\n contact-form badged-input.donation-contact-form-postal-code {\n width: 40%;\n }\n\n contact-form #donation-contact-form-region {\n width: ${iconFieldWidth};\n }\n\n contact-form #donation-contact-form-postal-code {\n width: ${noIconFieldWidth};\n }\n\n contact-form #donation-contact-form-error-message {\n color: red;\n font-size: 1.4rem;\n margin-bottom: 0.6rem;\n }\n\n contact-form #donation-contact-form-last-name {\n width: ${noIconFieldWidth};\n }\n\n /* only show for screen readers */\n contact-form label {\n position: absolute;\n left: -10000px;\n top: auto;\n width: 1px;\n height: 1px;\n overflow: hidden;\n }\n\n contact-form .donation-contact-form-input {\n width: ${iconFieldWidth};\n border: 0;\n outline: 0;\n background: transparent;\n font-weight: bold;\n color: ${fieldFontColor};\n font-size: ${fieldFontSize};\n padding: 0;\n font-family: ${fieldFontFamily};\n }\n\n contact-form .donation-contact-form-input::placeholder {\n color: revert;\n }\n\n contact-form #donation-contact-form-countryCodeAlpha2 {\n width: ${iconFieldWidth};\n height: 100%;\n box-sizing: border-box;\n font-weight: bold;\n font-size: ${fieldFontSize};\n font-family: ${fieldFontFamily};\n border: 0;\n background: #fff;\n -webkit-appearance: none;\n -moz-appearance: none;\n appearance: none;\n }\n </style>\n `;\n }\n}\n"]}
|
|
1
|
+
{"version":3,"file":"contact-form.js","sourceRoot":"","sources":["../../../../src/form-elements/contact-form/contact-form.ts"],"names":[],"mappings":"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","sourcesContent":["import { LitElement, html, css, TemplateResult } from 'lit';\nimport { customElement, query } from 'lit/decorators.js';\nimport { ifDefined } from 'lit/directives/if-defined.js';\n\nimport {\n BillingInfo,\n CustomerInfo,\n DonorContactInfo,\n} from '@internetarchive/donation-form-data-models';\nimport { AutoCompleteFieldOptions } from './autocomplete-field-options';\nimport { SpacerOption } from '../badged-input';\nimport { BadgedInput } from '../badged-input';\nimport '../badged-input';\n\nimport emailImg from '@internetarchive/icon-email';\nimport localePinImg from '@internetarchive/icon-locale-pin';\nimport userIcon from '@internetarchive/icon-user';\n\nimport { countries } from './countries';\n\n@customElement('contact-form')\nexport class ContactForm extends LitElement {\n @query('badged-input.donation-contact-form-email') emailBadgedInput!: BadgedInput;\n @query('#donation-contact-form-email') emailField!: HTMLInputElement;\n\n @query('badged-input.donation-contact-form-first-name') firstNameBadgedInput!: BadgedInput;\n @query('#donation-contact-form-first-name') firstNameField!: HTMLInputElement;\n\n @query('badged-input.donation-contact-form-last-name') lastNameBadgedInput!: BadgedInput;\n @query('#donation-contact-form-last-name') lastNameField!: HTMLInputElement;\n\n @query('badged-input.donation-contact-form-postal-code') postalBadgedInput!: BadgedInput;\n @query('#donation-contact-form-postal-code') postalCodeField!: HTMLInputElement;\n\n @query('badged-input.donation-contact-form-street-address')\n streetAddressBadgedInput!: BadgedInput;\n @query('#donation-contact-form-street-address') streetAddressField!: HTMLInputElement;\n\n @query('badged-input.donation-contact-form-extended-address')\n extendedAddressBadgedInput!: BadgedInput;\n @query('#donation-contact-form-extended-address') extendedAddressField!: HTMLInputElement;\n\n @query('badged-input.donation-contact-form-locality') localityBadgedInput!: BadgedInput;\n @query('#donation-contact-form-locality') localityField!: HTMLInputElement;\n\n @query('badged-input.donation-contact-form-region') regionBadgedInput!: BadgedInput;\n @query('#donation-contact-form-region') regionField!: HTMLInputElement;\n\n @query('#donation-contact-form-countryCodeAlpha2') countryCodeAlpha2Field!: HTMLSelectElement;\n\n @query('#donation-contact-form-error-message') errorMessage!: HTMLDivElement;\n @query('form') form!: HTMLFormElement;\n\n reportValidity(): boolean {\n const fieldBadgedInputs: Array<[HTMLInputElement, BadgedInput]> = [\n [this.emailField, this.emailBadgedInput],\n [this.firstNameField, this.firstNameBadgedInput],\n [this.lastNameField, this.lastNameBadgedInput],\n [this.regionField, this.regionBadgedInput],\n [this.localityField, this.localityBadgedInput],\n [this.streetAddressField, this.streetAddressBadgedInput],\n [this.postalCodeField, this.postalBadgedInput],\n ];\n\n let isValid = true;\n fieldBadgedInputs.forEach(([inputElement, badgedInput]) => {\n const fieldValid = inputElement.checkValidity();\n isValid = isValid && fieldValid;\n if (!fieldValid) {\n badgedInput.error = true;\n }\n });\n\n if (!isValid) {\n this.errorMessage.innerText = 'Please enter any missing contact information below';\n } else {\n this.errorMessage.innerText = '';\n }\n\n return isValid;\n }\n\n focus(): void {\n this.emailField.focus();\n }\n\n /** @inheritdoc */\n render(): TemplateResult {\n return html`\n <div id=\"donation-contact-form-error-message\"></div>\n <form>\n <fieldset>\n <div class=\"row\">\n ${this.generateInput({\n id: 'donation-contact-form-email',\n placeholder: 'Email',\n required: true,\n fieldType: 'email',\n name: 'email',\n autocomplete: 'email',\n maxlength: 255,\n icon: emailImg,\n })}\n </div>\n </fieldset>\n\n <fieldset>\n <div class=\"row\">\n ${this.generateInput({\n id: 'donation-contact-form-first-name',\n placeholder: 'First name',\n name: 'fname',\n required: true,\n maxlength: 255,\n autocomplete: 'given-name',\n icon: userIcon,\n })}\n </div>\n <div class=\"row\">\n ${this.generateInput({\n id: 'donation-contact-form-last-name',\n placeholder: 'Last name',\n name: 'lname',\n autocomplete: 'family-name',\n required: true,\n maxlength: 255,\n })}\n </div>\n </fieldset>\n <fieldset>\n <div class=\"row\">\n ${this.generateInput({\n id: 'donation-contact-form-street-address',\n placeholder: 'Address Line 1',\n required: true,\n autocomplete: 'address-line1',\n icon: localePinImg,\n name: 'street-address',\n })}\n </div>\n <div class=\"row\">\n ${this.generateInput({\n id: 'donation-contact-form-extended-address',\n placeholder: 'Address Line 2 (optional)',\n autocomplete: 'address-line2',\n required: false,\n name: 'extended-address',\n })}\n </div>\n <div class=\"row\">\n ${this.generateInput({\n id: 'donation-contact-form-locality',\n placeholder: 'City',\n autocomplete: 'address-level2',\n required: true,\n name: 'locality',\n })}\n </div>\n <div class=\"row\">\n ${this.generateInput({\n id: 'donation-contact-form-region',\n placeholder: 'State / Province',\n autocomplete: 'address-level1',\n required: true,\n name: 'region',\n })}\n ${this.generateInput({\n id: 'donation-contact-form-postal-code',\n placeholder: 'Zip / Postal',\n autocomplete: 'postal-code',\n required: true,\n name: 'postal',\n maxlength: 9,\n // must start with a character, then may contain spaces\n validationPattern: '[a-zA-Z\\\\-\\\\d]+[a-zA-Z\\\\-\\\\d\\\\s]*',\n iconSpaceOption: SpacerOption.CompressSpace,\n })}\n </div>\n <div class=\"row\">\n ${this.countrySelectorTemplate}\n </div>\n </fieldset>\n </form>\n ${this.getStyles}\n `;\n }\n\n private get countrySelectorTemplate(): TemplateResult {\n const selectedCountry = 'US';\n\n return html`\n <badged-input>\n <select id=\"donation-contact-form-countryCodeAlpha2\">\n ${Object.keys(countries).map(key => {\n const name = countries[key];\n return html`\n <option value=${key} ?selected=${key === selectedCountry}>${name}</option>\n `;\n })}\n </select>\n </badged-input>\n `;\n }\n\n /** @inheritdoc */\n createRenderRoot(): this {\n // Render template without shadow DOM. Note that shadow DOM features like\n // encapsulated CSS and slots are unavailable.\n // Form autofill does not work properly in the shadow DOM\n // so we need our form fields in the light DOM\n return this;\n }\n\n // reset the error state when the user focuses the input\n private inputFocused(e: KeyboardEvent): void {\n this.errorMessage.innerText = '';\n const input = e.target as HTMLInputElement;\n const inputIdentifier = input.id;\n const badgedInput = this.querySelector(`badged-input.${inputIdentifier}`) as BadgedInput;\n badgedInput.error = false;\n }\n\n private generateInput(options: {\n id: string;\n placeholder: string;\n required?: boolean;\n fieldType?: 'text' | 'email';\n autocomplete?: AutoCompleteFieldOptions;\n maxlength?: number;\n name: string;\n icon?: TemplateResult;\n iconSpaceOption?: SpacerOption;\n validationPattern?: string;\n }): TemplateResult {\n const required = options.required ?? true;\n const fieldType = options.fieldType ?? 'text';\n const iconOption = options.iconSpaceOption ?? SpacerOption.LeaveSpace;\n\n return html`\n <badged-input\n class=${options.id}\n .icon=${options.icon}\n .iconSpaceOption=${iconOption}\n ?required=${options.required}\n >\n <label for=${options.id}>${options.placeholder}</label>\n <input\n type=${fieldType}\n id=${options.id}\n class=\"donation-contact-form-input\"\n name=${options.name}\n aria-label=${options.placeholder}\n placeholder=${options.placeholder}\n maxlength=${ifDefined(options.maxlength)}\n autocomplete=${options.autocomplete ?? 'on'}\n pattern=${ifDefined(options.validationPattern)}\n @focus=${this.inputFocused}\n ?required=${required}\n />\n </badged-input>\n `;\n }\n\n get donorContactInfo(): DonorContactInfo {\n return new DonorContactInfo({\n billing: this.billingInfo,\n customer: this.contactInfo,\n });\n }\n\n get billingInfo(): BillingInfo {\n const billingInfo = new BillingInfo({\n streetAddress: this.streetAddressField.value,\n extendedAddress: this.extendedAddressField.value,\n locality: this.localityField.value,\n region: this.regionField.value,\n postalCode: this.postalCodeField.value,\n countryCodeAlpha2: this.countryCodeAlpha2Field.value,\n });\n return billingInfo;\n }\n\n get contactInfo(): CustomerInfo {\n return new CustomerInfo({\n email: this.emailField.value,\n firstName: this.firstNameField.value,\n lastName: this.lastNameField.value,\n });\n }\n\n /**\n * This is not the normal LitElement styles block.\n *\n * This element uses the clear DOM instead of the shadow DOM so it can't use\n * the shadowRoot's isolated styling. This is a bit of a workaround to keep all of\n * the styling local by writing out our own <style> tag and just be careful about\n * the selectors since they will leak outside of this component.\n *\n * @readonly\n * @private\n * @type {TemplateResult}\n * @memberof ContactForm\n */\n private get getStyles(): TemplateResult {\n const noIconSpacerWidth = css`var(--badgedInputNoIconSpacerWidth, 3rem)`;\n const iconSpacerWidth = css`var(--badgedInputIconSpacerWidth, 5rem)`;\n\n const fieldSetSpacing = css`var(--fieldSetSpacing, 1rem)`;\n const fieldFontFamily = css`var(--fontFamily, \"Helvetica Neue\", Helvetica, Arial, sans-serif)`;\n const fieldFontSize = css`var(--contactFieldFontSize, 1.6rem)`;\n const fieldFontColor = css`var(--inputFieldFontColor, #333)`;\n\n const iconFieldWidth = css`calc(100% - ${iconSpacerWidth})`;\n const noIconFieldWidth = css`calc(100% - ${noIconSpacerWidth})`;\n\n return html`\n <style>\n /*\n **NOTE**\n This element is in the lightDOM so be sure to prefix all styles\n with \"contact-form\" so styles don't leak.\n */\n contact-form fieldset {\n border: 0;\n padding: 0;\n margin: 0;\n margin-bottom: ${fieldSetSpacing};\n }\n\n /* These 1px and 0 margins in the next few selectors are to account for the\n double outlines caused by the fields being right next to each other */\n contact-form .row {\n display: flex;\n margin: -1px 0 0 0;\n }\n\n contact-form fieldset .row:first-child {\n margin-top: 0;\n }\n\n contact-form badged-input.donation-contact-form-region {\n width: 60%;\n }\n\n contact-form badged-input.donation-contact-form-postal-code {\n width: 40%;\n }\n\n contact-form #donation-contact-form-region {\n width: ${iconFieldWidth};\n }\n\n contact-form #donation-contact-form-postal-code {\n width: ${noIconFieldWidth};\n }\n\n contact-form #donation-contact-form-error-message {\n color: red;\n font-size: 1.4rem;\n margin-bottom: 0.6rem;\n }\n\n contact-form #donation-contact-form-last-name {\n width: ${noIconFieldWidth};\n }\n\n /* only show for screen readers */\n contact-form label {\n position: absolute;\n left: -10000px;\n top: auto;\n width: 1px;\n height: 1px;\n overflow: hidden;\n }\n\n contact-form .donation-contact-form-input {\n width: ${iconFieldWidth};\n border: 0;\n outline: 0;\n background: transparent;\n font-weight: bold;\n color: ${fieldFontColor};\n font-size: ${fieldFontSize};\n padding: 0;\n font-family: ${fieldFontFamily};\n }\n\n contact-form .donation-contact-form-input::placeholder {\n color: revert;\n }\n\n contact-form #donation-contact-form-countryCodeAlpha2 {\n width: ${iconFieldWidth};\n height: 100%;\n box-sizing: border-box;\n font-weight: bold;\n font-size: ${fieldFontSize};\n font-family: ${fieldFontFamily};\n border: 0;\n background: #fff;\n -webkit-appearance: none;\n -moz-appearance: none;\n appearance: none;\n }\n </style>\n `;\n }\n}\n"]}
|
|
@@ -1,15 +1,15 @@
|
|
|
1
|
-
import { LazyLoaderServiceInterface, BundleType } from '@internetarchive/lazy-loader-service';
|
|
1
|
+
import { LazyLoaderServiceEvents, LazyLoaderServiceInterface, BundleType } from '@internetarchive/lazy-loader-service';
|
|
2
|
+
import { Unsubscribe } from 'nanoevents';
|
|
2
3
|
export declare class MockLazyLoader implements LazyLoaderServiceInterface {
|
|
4
|
+
private emitter;
|
|
5
|
+
on<E extends keyof LazyLoaderServiceEvents>(event: E, callback: LazyLoaderServiceEvents[E]): Unsubscribe;
|
|
3
6
|
loadBundle(bundle: {
|
|
4
7
|
module?: string | undefined;
|
|
5
8
|
nomodule?: string | undefined;
|
|
6
|
-
}): Promise<
|
|
9
|
+
}): Promise<void>;
|
|
7
10
|
loadScript(options: {
|
|
8
11
|
src: string;
|
|
9
12
|
bundleType?: BundleType | undefined;
|
|
10
|
-
attributes?:
|
|
11
|
-
|
|
12
|
-
value: any;
|
|
13
|
-
}[] | undefined;
|
|
14
|
-
}): Promise<Event>;
|
|
13
|
+
attributes?: Record<string, string> | undefined;
|
|
14
|
+
}): Promise<void>;
|
|
15
15
|
}
|
|
@@ -1,13 +1,33 @@
|
|
|
1
1
|
import { __awaiter } from "tslib";
|
|
2
|
+
import { createNanoEvents } from 'nanoevents';
|
|
2
3
|
export class MockLazyLoader {
|
|
4
|
+
constructor() {
|
|
5
|
+
this.emitter = createNanoEvents();
|
|
6
|
+
// async loadBundle(bundle: {
|
|
7
|
+
// module?: string | undefined;
|
|
8
|
+
// nomodule?: string | undefined;
|
|
9
|
+
// }): Promise<Event | undefined> {
|
|
10
|
+
// return new Event('done');
|
|
11
|
+
// }
|
|
12
|
+
// async loadScript(options: {
|
|
13
|
+
// src: string;
|
|
14
|
+
// bundleType?: BundleType | undefined;
|
|
15
|
+
// attributes?: { key: string; value: any }[] | undefined;
|
|
16
|
+
// }): Promise<Event> {
|
|
17
|
+
// return new Event('done');
|
|
18
|
+
// }
|
|
19
|
+
}
|
|
20
|
+
on(event, callback) {
|
|
21
|
+
return this.emitter.on(event, callback);
|
|
22
|
+
}
|
|
3
23
|
loadBundle(bundle) {
|
|
4
24
|
return __awaiter(this, void 0, void 0, function* () {
|
|
5
|
-
return
|
|
25
|
+
return;
|
|
6
26
|
});
|
|
7
27
|
}
|
|
8
28
|
loadScript(options) {
|
|
9
29
|
return __awaiter(this, void 0, void 0, function* () {
|
|
10
|
-
return
|
|
30
|
+
return;
|
|
11
31
|
});
|
|
12
32
|
}
|
|
13
33
|
}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"mock-lazy-loader.js","sourceRoot":"","sources":["../../../test/mocks/mock-lazy-loader.ts"],"names":[],"mappings":";
|
|
1
|
+
{"version":3,"file":"mock-lazy-loader.js","sourceRoot":"","sources":["../../../test/mocks/mock-lazy-loader.ts"],"names":[],"mappings":";AAOA,OAAO,EAAE,gBAAgB,EAAe,MAAM,YAAY,CAAC;AAE3D,MAAM,OAAO,cAAc;IAA3B;QACU,YAAO,GAAG,gBAAgB,EAA2B,CAAC;QAuB9D,6BAA6B;QAC7B,iCAAiC;QACjC,mCAAmC;QACnC,mCAAmC;QACnC,8BAA8B;QAC9B,IAAI;QACJ,8BAA8B;QAC9B,iBAAiB;QACjB,yCAAyC;QACzC,4DAA4D;QAC5D,uBAAuB;QACvB,8BAA8B;QAC9B,IAAI;IACN,CAAC;IAlCC,EAAE,CACA,KAAQ,EACR,QAAoC;QAEpC,OAAO,IAAI,CAAC,OAAO,CAAC,EAAE,CAAC,KAAK,EAAE,QAAQ,CAAC,CAAC;IAC1C,CAAC;IAEK,UAAU,CAAC,MAGhB;;YACC,OAAO;QACT,CAAC;KAAA;IAEK,UAAU,CAAC,OAIhB;;YACC,OAAO;QACT,CAAC;KAAA;CAcF","sourcesContent":["/* eslint-disable @typescript-eslint/no-explicit-any */\n/* eslint-disable @typescript-eslint/no-unused-vars */\nimport {\n LazyLoaderServiceEvents,\n LazyLoaderServiceInterface,\n BundleType,\n} from '@internetarchive/lazy-loader-service';\nimport { createNanoEvents, Unsubscribe } from 'nanoevents';\n\nexport class MockLazyLoader implements LazyLoaderServiceInterface {\n private emitter = createNanoEvents<LazyLoaderServiceEvents>();\n\n on<E extends keyof LazyLoaderServiceEvents>(\n event: E,\n callback: LazyLoaderServiceEvents[E],\n ): Unsubscribe {\n return this.emitter.on(event, callback);\n }\n\n async loadBundle(bundle: {\n module?: string | undefined;\n nomodule?: string | undefined;\n }): Promise<void> {\n return;\n }\n\n async loadScript(options: {\n src: string;\n bundleType?: BundleType | undefined;\n attributes?: Record<string, string> | undefined;\n }): Promise<void> {\n return;\n }\n // async loadBundle(bundle: {\n // module?: string | undefined;\n // nomodule?: string | undefined;\n // }): Promise<Event | undefined> {\n // return new Event('done');\n // }\n // async loadScript(options: {\n // src: string;\n // bundleType?: BundleType | undefined;\n // attributes?: { key: string; value: any }[] | undefined;\n // }): Promise<Event> {\n // return new Event('done');\n // }\n}\n"]}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@internetarchive/donation-form",
|
|
3
|
-
"version": "0.5.
|
|
3
|
+
"version": "0.5.8-alpha.1",
|
|
4
4
|
"description": "The Internet Archive Donation Form",
|
|
5
5
|
"license": "AGPL-3.0-only",
|
|
6
6
|
"main": "dist/index.js",
|
|
@@ -32,18 +32,18 @@
|
|
|
32
32
|
"@internetarchive/donation-form-data-models": "^0.3.2",
|
|
33
33
|
"@internetarchive/donation-form-edit-donation": "^0.3.11",
|
|
34
34
|
"@internetarchive/donation-form-section": "^0.3.3",
|
|
35
|
-
"@internetarchive/icon-applepay": "^1.3.
|
|
36
|
-
"@internetarchive/icon-calendar": "^1.3.
|
|
37
|
-
"@internetarchive/icon-credit-card": "^1.3.
|
|
38
|
-
"@internetarchive/icon-email": "^1.3.
|
|
39
|
-
"@internetarchive/icon-googlepay": "^1.3.
|
|
40
|
-
"@internetarchive/icon-locale-pin": "^1.3.
|
|
41
|
-
"@internetarchive/icon-lock": "^1.3.
|
|
42
|
-
"@internetarchive/icon-paypal": "^1.3.
|
|
43
|
-
"@internetarchive/icon-user": "^1.3.
|
|
44
|
-
"@internetarchive/icon-venmo": "^1.3.
|
|
45
|
-
"@internetarchive/lazy-loader-service": "
|
|
46
|
-
"@internetarchive/modal-manager": "^0.2.
|
|
35
|
+
"@internetarchive/icon-applepay": "^1.3.2",
|
|
36
|
+
"@internetarchive/icon-calendar": "^1.3.2",
|
|
37
|
+
"@internetarchive/icon-credit-card": "^1.3.2",
|
|
38
|
+
"@internetarchive/icon-email": "^1.3.2",
|
|
39
|
+
"@internetarchive/icon-googlepay": "^1.3.2",
|
|
40
|
+
"@internetarchive/icon-locale-pin": "^1.3.2",
|
|
41
|
+
"@internetarchive/icon-lock": "^1.3.2",
|
|
42
|
+
"@internetarchive/icon-paypal": "^1.3.2",
|
|
43
|
+
"@internetarchive/icon-user": "^1.3.2",
|
|
44
|
+
"@internetarchive/icon-venmo": "^1.3.2",
|
|
45
|
+
"@internetarchive/lazy-loader-service": "0.2.0-alpha.1",
|
|
46
|
+
"@internetarchive/modal-manager": "^0.2.1",
|
|
47
47
|
"@internetarchive/promised-singleton": "^0.2.1",
|
|
48
48
|
"currency.js": "^2.0.2",
|
|
49
49
|
"lit": "^2.0.2",
|
|
@@ -118,10 +118,10 @@ export class PaymentClients implements PaymentClientsInterface {
|
|
|
118
118
|
generator: async (): Promise<any> => {
|
|
119
119
|
await this.lazyLoader.loadScript({
|
|
120
120
|
src: 'https://www.paypalobjects.com/api/checkout.js',
|
|
121
|
-
attributes:
|
|
122
|
-
|
|
123
|
-
|
|
124
|
-
|
|
121
|
+
attributes: {
|
|
122
|
+
'data-version-4': '',
|
|
123
|
+
'log-level': 'warn',
|
|
124
|
+
},
|
|
125
125
|
});
|
|
126
126
|
return window.paypal;
|
|
127
127
|
},
|
|
@@ -133,11 +133,11 @@ export class PaymentClients implements PaymentClientsInterface {
|
|
|
133
133
|
}
|
|
134
134
|
|
|
135
135
|
// eslint-disable-next-line @typescript-eslint/no-explicit-any
|
|
136
|
-
private async loadBraintreeScript(scriptName: string): Promise<
|
|
136
|
+
private async loadBraintreeScript(scriptName: string): Promise<void> {
|
|
137
137
|
const extension = this.environment === HostingEnvironment.Production ? 'min.js' : 'js';
|
|
138
138
|
const scriptWithSuffix = `${scriptName}.${extension}`;
|
|
139
139
|
const url = `https://js.braintreegateway.com/web/${this.braintreeVersion}/js/${scriptWithSuffix}`;
|
|
140
|
-
|
|
140
|
+
await this.lazyLoader.loadScript({ src: url });
|
|
141
141
|
}
|
|
142
142
|
|
|
143
143
|
private braintreeVersion = '3.62.2';
|
|
@@ -1,7 +1,6 @@
|
|
|
1
1
|
import { LitElement, html, css, TemplateResult } from 'lit';
|
|
2
2
|
import { customElement, query } from 'lit/decorators.js';
|
|
3
|
-
|
|
4
|
-
import { ifDefined } from 'lit-html/directives/if-defined';
|
|
3
|
+
import { ifDefined } from 'lit/directives/if-defined.js';
|
|
5
4
|
|
|
6
5
|
import {
|
|
7
6
|
BillingInfo,
|