@internetarchive/donation-form 0.6.2 → 0.6.3
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/demo/braintree-endpoint-manager.js.map +1 -1
- package/dist/demo/submit-form-with.js.map +1 -1
- package/dist/src/braintree-manager/braintree-manager.js.map +1 -1
- package/dist/src/braintree-manager/payment-clients.d.ts +0 -2
- package/dist/src/braintree-manager/payment-clients.js +0 -1
- package/dist/src/braintree-manager/payment-clients.js.map +1 -1
- package/dist/src/braintree-manager/payment-providers/apple-pay/apple-pay-session-datasource-interface.d.ts +0 -1
- package/dist/src/braintree-manager/payment-providers/apple-pay/apple-pay-session-datasource.d.ts +0 -1
- package/dist/src/braintree-manager/payment-providers/apple-pay/apple-pay-session-datasource.js +2 -2
- package/dist/src/braintree-manager/payment-providers/apple-pay/apple-pay-session-datasource.js.map +1 -1
- package/dist/src/braintree-manager/payment-providers/apple-pay/apple-pay-session-manager.d.ts +0 -1
- package/dist/src/braintree-manager/payment-providers/apple-pay/apple-pay.js +0 -1
- package/dist/src/braintree-manager/payment-providers/apple-pay/apple-pay.js.map +1 -1
- package/dist/src/braintree-manager/payment-providers/credit-card/credit-card.js +2 -2
- package/dist/src/braintree-manager/payment-providers/credit-card/credit-card.js.map +1 -1
- package/dist/src/braintree-manager/payment-providers/credit-card/hosted-field-container.js.map +1 -1
- package/dist/src/braintree-manager/payment-providers/google-pay-interface.d.ts +0 -1
- package/dist/src/braintree-manager/payment-providers/google-pay.d.ts +0 -1
- package/dist/src/braintree-manager/payment-providers/paypal/paypal-button-datasource.js +3 -3
- package/dist/src/braintree-manager/payment-providers/paypal/paypal-button-datasource.js.map +1 -1
- package/dist/src/braintree-manager/payment-providers/paypal/paypal.js.map +1 -1
- package/dist/src/braintree-manager/payment-providers/venmo.js +1 -1
- package/dist/src/braintree-manager/payment-providers/venmo.js.map +1 -1
- package/dist/src/braintree-manager/payment-providers.js.map +1 -1
- package/dist/src/donation-form-controller.js +0 -1
- package/dist/src/donation-form-controller.js.map +1 -1
- package/dist/src/donation-form.js +18 -15
- package/dist/src/donation-form.js.map +1 -1
- package/dist/src/form-elements/badged-input.js.map +1 -1
- package/dist/src/form-elements/contact-form/contact-form.js.map +1 -1
- package/dist/src/form-elements/header/donation-form-header.js.map +1 -1
- package/dist/src/form-elements/header/donation-summary.js.map +1 -1
- package/dist/src/form-elements/payment-selector.js +1 -1
- package/dist/src/form-elements/payment-selector.js.map +1 -1
- package/dist/src/form-elements/total-amount.js.map +1 -1
- package/dist/src/modals/confirm-donation-modal-content.js +0 -2
- package/dist/src/modals/confirm-donation-modal-content.js.map +1 -1
- package/dist/src/modals/error-modal-content.js.map +1 -1
- package/dist/src/modals/upsell-modal-content.js.map +1 -1
- package/dist/src/payment-flow-handlers/donation-flow-modal-manager.js +0 -1
- package/dist/src/payment-flow-handlers/donation-flow-modal-manager.js.map +1 -1
- package/dist/src/payment-flow-handlers/handlers/applepay-flow-handler.js +1 -1
- package/dist/src/payment-flow-handlers/handlers/applepay-flow-handler.js.map +1 -1
- package/dist/src/payment-flow-handlers/handlers/creditcard-flow-handler.js +1 -1
- package/dist/src/payment-flow-handlers/handlers/creditcard-flow-handler.js.map +1 -1
- package/dist/src/payment-flow-handlers/handlers/googlepay-flow-handler.js +1 -1
- package/dist/src/payment-flow-handlers/handlers/googlepay-flow-handler.js.map +1 -1
- package/dist/src/payment-flow-handlers/handlers/paypal-flow-handler.js +6 -14
- package/dist/src/payment-flow-handlers/handlers/paypal-flow-handler.js.map +1 -1
- package/dist/src/payment-flow-handlers/handlers/venmo-flow-handler.js.map +1 -1
- package/dist/src/payment-flow-handlers/handlers/venmo-restoration-state-handler.js +1 -1
- package/dist/src/payment-flow-handlers/handlers/venmo-restoration-state-handler.js.map +1 -1
- package/dist/src/payment-flow-handlers/payment-flow-handlers.js +1 -1
- package/dist/src/payment-flow-handlers/payment-flow-handlers.js.map +1 -1
- package/dist/src/recaptcha-manager/recaptcha-manager.d.ts +0 -1
- package/dist/src/recaptcha-manager/recaptcha-manager.js.map +1 -1
- package/dist/test/mocks/flow-handlers/individual-handlers/mock-creditcard-flow-handler.js +0 -1
- package/dist/test/mocks/flow-handlers/individual-handlers/mock-creditcard-flow-handler.js.map +1 -1
- package/dist/test/mocks/flow-handlers/mock-payment-flow-handlers.js +1 -1
- package/dist/test/mocks/flow-handlers/mock-payment-flow-handlers.js.map +1 -1
- package/dist/test/mocks/mock-braintree-manager.js.map +1 -1
- package/dist/test/mocks/mock-lazy-loader.js.map +1 -1
- package/dist/test/mocks/mock-modal-manager.js +0 -1
- package/dist/test/mocks/mock-modal-manager.js.map +1 -1
- package/dist/test/mocks/mock-payment-clients.d.ts +0 -2
- package/dist/test/mocks/mock-payment-clients.js +0 -1
- package/dist/test/mocks/mock-payment-clients.js.map +1 -1
- package/dist/test/mocks/mock-recaptcha-manager.d.ts +0 -1
- package/dist/test/mocks/payment-clients/mock-applepay-client.js.map +1 -1
- package/dist/test/mocks/payment-clients/mock-applepay-payment.d.ts +0 -1
- package/dist/test/mocks/payment-clients/mock-applepay-paymentauthorizedevent.d.ts +0 -1
- package/dist/test/mocks/payment-clients/mock-applepay-session.d.ts +0 -1
- package/dist/test/mocks/payment-clients/mock-applepay-session.js +0 -2
- package/dist/test/mocks/payment-clients/mock-applepay-session.js.map +1 -1
- package/dist/test/mocks/payment-clients/mock-applepay-sessionmanager.d.ts +0 -1
- package/dist/test/mocks/payment-clients/mock-applepay-validatemerchantevent.d.ts +0 -1
- package/dist/test/mocks/payment-clients/mock-data-collector.js.map +1 -1
- package/dist/test/mocks/payment-clients/mock-googlepay-client.d.ts +0 -1
- package/dist/test/mocks/payment-clients/mock-googlepay-library.d.ts +0 -1
- package/dist/test/mocks/payment-clients/mock-grecaptcha.d.ts +0 -1
- package/dist/test/mocks/payment-clients/mock-grecaptcha.js +0 -1
- package/dist/test/mocks/payment-clients/mock-grecaptcha.js.map +1 -1
- package/dist/test/mocks/payment-clients/mock-hostedfields-client.js.map +1 -1
- package/dist/test/mocks/payment-clients/mock-hostedfieldtokenizepayload.d.ts +1 -1
- package/dist/test/mocks/payment-providers/individual-providers/mock-googlepay-handler.d.ts +0 -1
- package/dist/test/mocks/payment-providers/individual-providers/mock-paypal-button-datasource.js +2 -2
- package/dist/test/mocks/payment-providers/individual-providers/mock-paypal-button-datasource.js.map +1 -1
- package/dist/test/tests/braintree-manager.test.js +12 -13
- package/dist/test/tests/braintree-manager.test.js.map +1 -1
- package/dist/test/tests/donation-form-controller.test.js +21 -21
- package/dist/test/tests/donation-form.test.js +7 -7
- package/dist/test/tests/flow-handlers/donation-flow-modal-manager.test.js +8 -8
- package/dist/test/tests/form-elements/donation-summary.test.js +2 -2
- package/dist/test/tests/form-elements/payment-selector.test.js +8 -8
- package/dist/test/tests/modals/upsell-modal-content.test.js +21 -21
- package/dist/test/tests/models/donation-payment-info.test.js +7 -7
- package/dist/test/tests/models/donation-payment-info.test.js.map +1 -1
- package/dist/test/tests/payment-providers/applepay-sessiondatasource.test.js.map +1 -1
- package/dist/test/tests/payment-providers/creditcard.test.js.map +1 -1
- package/dist/test/tests/recaptcha-manager.test.js.map +1 -1
- package/package.json +40 -40
- package/src/braintree-manager/payment-clients.ts +0 -1
- package/src/braintree-manager/payment-providers/apple-pay/apple-pay.ts +0 -1
- package/src/donation-form-controller.ts +0 -1
- package/src/donation-form.ts +9 -6
- package/src/modals/confirm-donation-modal-content.ts +0 -2
- package/src/payment-flow-handlers/donation-flow-modal-manager.ts +0 -1
- package/src/payment-flow-handlers/handlers/paypal-flow-handler.ts +2 -4
- package/src/payment-flow-handlers/payment-flow-handlers.ts +0 -1
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"donation-form-header.js","sourceRoot":"","sources":["../../../../src/form-elements/header/donation-form-header.ts"],"names":[],"mappings":";AAAA,OAAO,EAAE,UAAU,EAAE,IAAI,EAAE,GAAG,EAA6B,MAAM,KAAK,CAAC;AACvE,OAAO,EAAE,aAAa,EAAE,QAAQ,EAAE,KAAK,EAAE,MAAM,mBAAmB,CAAC;AAEnE,OAAO,EACL,sBAAsB,GAEvB,MAAM,4CAA4C,CAAC;AAEpD,OAAO,8CAA8C,CAAC;AACtD,OAAO,EAEL,iCAAiC,EACjC,kCAAkC,GACnC,MAAM,8CAA8C,CAAC;AAEtD,MAAM,CAAN,IAAY,sBAGX;AAHD,WAAY,sBAAsB;IAChC,6CAAmB,CAAA;IACnB,uCAAa,CAAA;AACf,CAAC,EAHW,sBAAsB,KAAtB,sBAAsB,QAGjC;AAGM,IAAM,kBAAkB,GAAxB,MAAM,kBAAmB,SAAQ,UAAU;IAA3C;;QAGuB,SAAI,GAA2B,sBAAsB,CAAC,IAAI,CAAC;QAE5D,kBAAa,GAAa,sBAAsB,CAAC;QAEhD,0BAAqB,GAC/C,iCAAiC,CAAC,SAAS,CAAC;QAElB,2BAAsB,GAChD,kCAAkC,CAAC,MAAM,CAAC;IAiE9C,CAAC;IA7DC,kBAAkB;IAClB,MAAM;QACJ,OAAO,IAAI,CAAA,IAAI,IAAI,CAAC,eAAe,GAAG,CAAC;IACzC,CAAC;IAED,IAAY,eAAe;QACzB,QAAQ,IAAI,CAAC,IAAI,EAAE;
|
|
1
|
+
{"version":3,"file":"donation-form-header.js","sourceRoot":"","sources":["../../../../src/form-elements/header/donation-form-header.ts"],"names":[],"mappings":"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","sourcesContent":["import { LitElement, html, css, CSSResult, TemplateResult } from 'lit';\nimport { customElement, property, query } from 'lit/decorators.js';\n\nimport {\n defaultDonationAmounts,\n DonationPaymentInfo,\n} from '@internetarchive/donation-form-data-models';\n\nimport '@internetarchive/donation-form-edit-donation';\nimport {\n DonationFormEditDonation,\n EditDonationAmountSelectionLayout,\n EditDonationFrequencySelectionMode,\n} from '@internetarchive/donation-form-edit-donation';\n\nexport enum DonationFormHeaderMode {\n Summary = 'summary',\n Edit = 'edit',\n}\n\n@customElement('donation-form-header')\nexport class DonationFormHeader extends LitElement {\n @property({ type: Object }) donationInfo?: DonationPaymentInfo;\n\n @property({ type: String }) mode: DonationFormHeaderMode = DonationFormHeaderMode.Edit;\n\n @property({ type: Array }) amountOptions: number[] = defaultDonationAmounts;\n\n @property({ type: String }) amountSelectionLayout: EditDonationAmountSelectionLayout =\n EditDonationAmountSelectionLayout.MultiLine;\n\n @property({ type: String }) frequencySelectionMode: EditDonationFrequencySelectionMode =\n EditDonationFrequencySelectionMode.Button;\n\n @query('edit-donation') editDonation?: DonationFormEditDonation;\n\n /** @inheritdoc */\n render(): TemplateResult {\n return html` ${this.currentTemplate} `;\n }\n\n private get currentTemplate(): TemplateResult {\n switch (this.mode) {\n case DonationFormHeaderMode.Summary:\n return this.donationSummaryTemplate;\n case DonationFormHeaderMode.Edit:\n return this.editDonationTemplate;\n }\n }\n\n private get editDonationTemplate(): TemplateResult {\n return html`\n <donation-form-edit-donation\n .donationInfo=${this.donationInfo}\n .amountOptions=${this.amountOptions}\n .amountSelectionLayout=${this.amountSelectionLayout}\n .frequencySelectionMode=${this.frequencySelectionMode}\n @donationInfoChanged=${this.donationInfoChanged}\n @showSummaryClicked=${this.showSummaryClicked}\n @editDonationError=${this.editDonationError}\n >\n </donation-form-edit-donation>\n `;\n }\n\n private get donationSummaryTemplate(): TemplateResult {\n return html`\n <donation-summary .donationInfo=${this.donationInfo} @editClicked=${this.summaryEditClicked}>\n </donation-summary>\n `;\n }\n\n private donationInfoChanged(e: CustomEvent): void {\n this.donationInfo = e.detail.donationInfo as DonationPaymentInfo;\n const event = new CustomEvent('donationInfoChanged', {\n detail: { donationInfo: this.donationInfo },\n });\n this.dispatchEvent(event);\n }\n\n private editDonationError(e: CustomEvent): void {\n const event = new CustomEvent('editDonationError', { detail: e.detail });\n this.dispatchEvent(event);\n }\n\n private summaryEditClicked(): void {\n this.mode = DonationFormHeaderMode.Edit;\n }\n\n private showSummaryClicked(): void {\n this.mode = DonationFormHeaderMode.Summary;\n }\n\n /** @inheritdoc */\n static get styles(): CSSResult {\n return css``;\n }\n}\n"]}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"donation-summary.js","sourceRoot":"","sources":["../../../../src/form-elements/header/donation-summary.ts"],"names":[],"mappings":";AAAA,OAAO,EAAE,UAAU,EAAE,IAAI,EAAE,GAAG,EAA6B,MAAM,KAAK,CAAC;AACvE,OAAO,EAAE,aAAa,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAC;AAE5D,OAAO,QAAQ,MAAM,aAAa,CAAC;AAEnC,OAAO,EAAE,YAAY,EAAuB,MAAM,4CAA4C,CAAC;AAGxF,IAAM,eAAe,GAArB,MAAM,eAAgB,SAAQ,UAAU;IAG7C,kBAAkB;IAClB,MAAM;QACJ,OAAO,IAAI,CAAA;YACH,IAAI,CAAC,YAAY;uBACN,IAAI,CAAC,WAAW;KAClC,CAAC;IACJ,CAAC;IAED,IAAI,YAAY;QACd,IAAI,CAAC,IAAI,CAAC,YAAY,EAAE;
|
|
1
|
+
{"version":3,"file":"donation-summary.js","sourceRoot":"","sources":["../../../../src/form-elements/header/donation-summary.ts"],"names":[],"mappings":";AAAA,OAAO,EAAE,UAAU,EAAE,IAAI,EAAE,GAAG,EAA6B,MAAM,KAAK,CAAC;AACvE,OAAO,EAAE,aAAa,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAC;AAE5D,OAAO,QAAQ,MAAM,aAAa,CAAC;AAEnC,OAAO,EAAE,YAAY,EAAuB,MAAM,4CAA4C,CAAC;AAGxF,IAAM,eAAe,GAArB,MAAM,eAAgB,SAAQ,UAAU;IAG7C,kBAAkB;IAClB,MAAM;QACJ,OAAO,IAAI,CAAA;YACH,IAAI,CAAC,YAAY;uBACN,IAAI,CAAC,WAAW;KAClC,CAAC;IACJ,CAAC;IAED,IAAI,YAAY;QACd,IAAI,CAAC,IAAI,CAAC,YAAY,EAAE,CAAC;YACvB,OAAO,EAAE,CAAC;QACZ,CAAC;QAED,MAAM,aAAa,GAAG,IAAI,CAAC,YAAY,CAAC,YAAY,KAAK,YAAY,CAAC,OAAO,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,EAAE,CAAC;QAC/F,MAAM,MAAM,GAAG,IAAI,CAAC,YAAY,CAAC,MAAM,CAAC;QACxC,IAAI,SAAS,GAAG,CAAC,CAAC;QAClB,mCAAmC;QACnC,IAAI,MAAM,KAAK,IAAI,CAAC,KAAK,CAAC,MAAM,CAAC,EAAE,CAAC;YAClC,SAAS,GAAG,CAAC,CAAC;QAChB,CAAC;QAED,MAAM,aAAa,GAAG,QAAQ,CAAC,IAAI,CAAC,YAAY,CAAC,MAAM,EAAE;YACvD,MAAM,EAAE,GAAG;YACX,SAAS,EAAE,SAAS;SACrB,CAAC,CAAC,MAAM,EAAE,CAAC;QAEZ,OAAO,GAAG,aAAa,IAAI,aAAa,WAAW,CAAC;IACtD,CAAC;IAEO,WAAW;QACjB,IAAI,CAAC,aAAa,CAAC,IAAI,KAAK,CAAC,aAAa,CAAC,CAAC,CAAC;IAC/C,CAAC;IAED,kBAAkB;IAClB,MAAM,KAAK,MAAM;QACf,OAAO,GAAG,CAAA;;;;;;;;;;;;KAYT,CAAC;IACJ,CAAC;CACF,CAAA;AAnD6B;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;qDAAoC;AADpD,eAAe;IAD3B,aAAa,CAAC,kBAAkB,CAAC;GACrB,eAAe,CAoD3B","sourcesContent":["import { LitElement, html, css, CSSResult, TemplateResult } from 'lit';\nimport { customElement, property } from 'lit/decorators.js';\n\nimport currency from 'currency.js';\n\nimport { DonationType, DonationPaymentInfo } from '@internetarchive/donation-form-data-models';\n\n@customElement('donation-summary')\nexport class DonationSummary extends LitElement {\n @property({ type: Object }) donationInfo?: DonationPaymentInfo;\n\n /** @inheritdoc */\n render(): TemplateResult {\n return html`\n <h1>${this.displayTitle}</h1>\n <button @click=${this.editClicked}>Edit this amount</button>\n `;\n }\n\n get displayTitle(): string {\n if (!this.donationInfo) {\n return '';\n }\n\n const monthlyString = this.donationInfo.donationType === DonationType.Monthly ? 'Monthly' : '';\n const amount = this.donationInfo.amount;\n let precision = 2;\n // whole number, don't use decimals\n if (amount === Math.round(amount)) {\n precision = 0;\n }\n\n const displayAmount = currency(this.donationInfo.amount, {\n symbol: '$',\n precision: precision,\n }).format();\n\n return `${displayAmount} ${monthlyString} Donation`;\n }\n\n private editClicked(): void {\n this.dispatchEvent(new Event('editClicked'));\n }\n\n /** @inheritdoc */\n static get styles(): CSSResult {\n return css`\n :host {\n display: flex;\n justify-content: center;\n align-content: center;\n }\n\n button {\n border: 0;\n background: none;\n color: blue;\n }\n `;\n }\n}\n"]}
|
|
@@ -139,8 +139,8 @@ let PaymentSelector = class PaymentSelector extends LitElement {
|
|
|
139
139
|
this.payPalMode = PaymentButtonMode.Available;
|
|
140
140
|
}
|
|
141
141
|
setButtonVisibility() {
|
|
142
|
-
var _a, _b, _c;
|
|
143
142
|
return __awaiter(this, void 0, void 0, function* () {
|
|
143
|
+
var _a, _b, _c;
|
|
144
144
|
(_a = this.paymentProviders) === null || _a === void 0 ? void 0 : _a.venmoHandler.get().then(handler => {
|
|
145
145
|
if (!handler) {
|
|
146
146
|
this.venmoMode = PaymentButtonMode.Unavailable;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"payment-selector.js","sourceRoot":"","sources":["../../../src/form-elements/payment-selector.ts"],"names":[],"mappings":"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","sourcesContent":["import { LitElement, html, css, CSSResult, TemplateResult, PropertyValues, nothing } from 'lit';\nimport { customElement, property } from 'lit/decorators.js';\n\nimport applePayButtonImage from '@internetarchive/icon-applepay/index.js';\nimport googlePayButtonImage from '@internetarchive/icon-googlepay/index.js';\nimport paypalButtonImage from '@internetarchive/icon-paypal/index.js';\nimport venmoButtonImage from '@internetarchive/icon-venmo/index.js';\nimport { PaymentProvidersInterface } from '../braintree-manager/payment-providers-interface';\n\nenum PaymentButtonMode {\n Loading = 'loading',\n Available = 'available',\n Unavailable = 'unavailable',\n}\n\n@customElement('payment-selector')\nexport class PaymentSelector extends LitElement {\n @property({ type: Boolean }) donationInfoValid = true;\n\n @property({ type: Object }) paymentProviders?: PaymentProvidersInterface;\n\n @property({ type: String }) private applePayMode: PaymentButtonMode = PaymentButtonMode.Loading;\n\n @property({ type: String }) private googlePayMode: PaymentButtonMode = PaymentButtonMode.Loading;\n\n @property({ type: String }) private venmoMode: PaymentButtonMode = PaymentButtonMode.Loading;\n\n @property({ type: String }) private payPalMode: PaymentButtonMode = PaymentButtonMode.Loading;\n\n @property({ type: String }) private paymentModeSelected:\n | 'apple'\n | 'google'\n | 'venmo'\n | 'cc'\n | 'paypal'\n | undefined = undefined;\n\n /** @inheritdoc */\n render(): TemplateResult {\n const paymentSelectedCss = this.paymentModeSelected ? 'payment-selected' : '';\n return html`\n <div\n class=\"payment-container ${this.donationInfoValid\n ? 'donation-info-valid'\n : 'donation-info-invalid'} ${paymentSelectedCss}\"\n >\n <div class=\"payment-provider-container\">\n <button\n class=\"applepay provider-button ${this.applePayMode} ${this.paymentModeSelected ===\n 'apple'\n ? 'selected'\n : ''}\"\n @click=${(e: Event) => {\n this.paymentModeSelected = 'apple';\n this.applePaySelected(e);\n }}\n tabindex=\"0\"\n >\n <div class=\"payment-image\">${applePayButtonImage}</div>\n </button>\n\n <button\n class=\"googlepay provider-button ${this.googlePayMode} ${this.paymentModeSelected ===\n 'google'\n ? 'selected'\n : ''}\"\n @click=${() => {\n this.paymentModeSelected = 'google';\n this.googlePaySelected();\n }}\n tabindex=\"0\"\n >\n <div class=\"payment-image\">${googlePayButtonImage}</div>\n </button>\n\n <button\n class=\"venmo provider-button ${this.venmoMode} ${this.paymentModeSelected === 'venmo'\n ? 'selected'\n : ''}\"\n @click=${() => {\n this.paymentModeSelected = 'venmo';\n this.venmoSelected();\n }}\n tabindex=\"0\"\n >\n <div class=\"payment-image\">${venmoButtonImage}</div>\n </button>\n\n <div\n class=\"paypal-container provider-button ${this.payPalMode}\n ${this.paymentModeSelected === 'paypal' ? 'selected' : ''}\"\n tabindex=\"0\"\n >\n <div class=\"payment-image\">\n <div\n class=\"paypal-local-button\"\n @click=${() => {\n this.paymentModeSelected = 'paypal';\n this.localPaypalButtonClicked();\n }}\n >\n ${paypalButtonImage}\n </div>\n <slot name=\"paypal-button\"></slot>\n </div>\n </div>\n </div>\n\n <div class=\"credit-card-container\">\n <button\n @click=${() => {\n this.paymentModeSelected = 'cc';\n this.creditCardSelected();\n }}\n class=\"button-style credit-card-button ${this.paymentModeSelected === 'cc'\n ? 'selected'\n : ''}\"\n tabindex=\"0\"\n >\n <div class=\"cc-title\">Credit Card</div>\n <div class=\"cc-background\"></div>\n </button>\n </div>\n </div>\n\n ${this.paymentModeSelected\n ? html`\n <button\n id=\"change-payment-method\"\n @click=${() => {\n this.paymentModeSelected = undefined;\n this.dispatchEvent(new Event('resetPaymentMethod'));\n this.setButtonVisibility();\n }}\n >\n Change payment method\n </button>\n `\n : nothing}\n `;\n }\n\n /** @inheritdoc */\n firstUpdated(): void {\n this.dispatchEvent(new Event('firstUpdated'));\n }\n\n /** @inheritdoc */\n updated(changed: PropertyValues): void {\n if (changed.has('paymentProviders')) {\n this.setButtonVisibility();\n }\n }\n\n showPaypalButton(): void {\n this.payPalMode = PaymentButtonMode.Available;\n }\n\n private async setButtonVisibility(): Promise<void> {\n this.paymentProviders?.venmoHandler\n .get()\n .then(handler => {\n if (!handler) {\n this.venmoMode = PaymentButtonMode.Unavailable;\n return;\n }\n\n handler\n .isBrowserSupported()\n .then(supported => {\n this.venmoMode = supported\n ? PaymentButtonMode.Available\n : PaymentButtonMode.Unavailable;\n })\n .catch(reason => {\n console.error('error loading venmo', reason);\n this.venmoMode = PaymentButtonMode.Unavailable;\n });\n })\n .catch(reason => {\n console.error('venmo unavailable', reason);\n this.venmoMode = PaymentButtonMode.Unavailable;\n });\n\n this.paymentProviders?.applePayHandler\n .get()\n .then(handler => {\n if (!handler) {\n console.error('applePayHandler unavailable');\n this.applePayMode = PaymentButtonMode.Unavailable;\n return;\n }\n\n handler\n .isAvailable()\n .then(supported => {\n this.applePayMode = supported\n ? PaymentButtonMode.Available\n : PaymentButtonMode.Unavailable;\n })\n .catch(reason => {\n console.error('error loading applepay', reason);\n this.applePayMode = PaymentButtonMode.Unavailable;\n });\n })\n .catch(reason => {\n console.error('apple pay unavailable', reason);\n this.applePayMode = PaymentButtonMode.Unavailable;\n });\n\n this.paymentProviders?.googlePayHandler\n .get()\n .then(handler => {\n if (!handler) {\n console.error('google pay handler unavailable');\n this.googlePayMode = PaymentButtonMode.Unavailable;\n return;\n }\n\n handler\n .isBrowserSupported()\n .then(supported => {\n this.googlePayMode = supported\n ? PaymentButtonMode.Available\n : PaymentButtonMode.Unavailable;\n })\n .catch(reason => {\n console.error('error loading googlepay', reason);\n this.googlePayMode = PaymentButtonMode.Unavailable;\n });\n })\n .catch(reason => {\n console.error('google pay unavailable', reason);\n this.googlePayMode = PaymentButtonMode.Unavailable;\n });\n }\n\n private googlePaySelected(): void {\n this.dispatchEvent(new Event('googlePaySelected'));\n }\n\n private applePaySelected(e: Event): void {\n const event = new CustomEvent('applePaySelected', { detail: { originalEvent: e } });\n this.dispatchEvent(event);\n }\n\n private venmoSelected(): void {\n this.dispatchEvent(new Event('venmoSelected'));\n }\n\n private creditCardSelected(): void {\n this.dispatchEvent(new Event('creditCardSelected'));\n }\n\n private localPaypalButtonClicked(): void {\n this.dispatchEvent(new Event('paypalBlockerSelected'));\n }\n\n /** @inheritdoc */\n static get styles(): CSSResult {\n const paymentButtonWidthCss = css`var(--paymentButtonWidth, 5rem)`;\n const paymentButtonHeightCss = css`var(--paymentButtonHeight, 3.2rem)`;\n const creditCardFontSizeCss = css`var(--creditCardFontSize, 1.8rem)`;\n\n return css`\n button {\n color: inherit;\n font-family: inherit;\n }\n\n .payment-container {\n width: 100%;\n }\n\n .payment-provider-container {\n display: grid;\n grid-template-columns: 1fr 1fr 1fr 1fr;\n grid-gap: 1rem;\n margin-bottom: 1rem;\n max-width: 23rem;\n }\n\n .provider-button {\n border: 0;\n padding: 0;\n background: none;\n cursor: pointer;\n width: ${paymentButtonWidthCss};\n height: ${paymentButtonHeightCss};\n }\n\n .provider-button.unavailable {\n display: none;\n }\n\n .provider-button.loading {\n border: 1px solid #ddd;\n border-radius: 2px;\n /* account for the borders that don't exist once the provider loads, otherwise the layout shifts */\n margin-bottom: -2px;\n }\n\n .provider-button.loading .payment-image {\n display: none;\n }\n\n .paypal-local-button {\n position: absolute;\n width: ${paymentButtonWidthCss};\n height: ${paymentButtonHeightCss};\n }\n\n .donation-info-valid .paypal-local-button {\n z-index: 0;\n }\n\n .donation-info-invalid .paypal-local-button {\n z-index: 250;\n }\n\n .credit-card-button {\n color: var(--ccButtonFontColor, #333);\n background-color: var(--ccButtonColor, white);\n border: 1px solid #333;\n border-radius: 4px;\n cursor: pointer;\n margin: 0;\n padding: 0.7rem 1rem;\n width: 100%;\n }\n\n .credit-card-button .cc-background {\n height: 2.4rem;\n width: 100%;\n background-repeat: no-repeat;\n background-image: url(https://archive.org/images/cc_logos.png);\n background-position: 50% 50%;\n background-size: contain;\n }\n\n .credit-card-button .cc-title {\n font-size: ${creditCardFontSizeCss};\n font-weight: 700;\n margin-bottom: 0.5rem;\n }\n\n button#change-payment-method {\n margin-top: 10px;\n background: white;\n border: 1px solid;\n border-radius: 3px;\n padding: 5px;\n }\n\n button#change-payment-method:hover {\n cursor: pointer;\n }\n\n .payment-selected button:not(.selected),\n .payment-selected .paypal-container:not(.selected) {\n display: none;\n }\n `;\n }\n}\n"]}
|
|
1
|
+
{"version":3,"file":"payment-selector.js","sourceRoot":"","sources":["../../../src/form-elements/payment-selector.ts"],"names":[],"mappings":"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","sourcesContent":["import { LitElement, html, css, CSSResult, TemplateResult, PropertyValues, nothing } from 'lit';\nimport { customElement, property } from 'lit/decorators.js';\n\nimport applePayButtonImage from '@internetarchive/icon-applepay/index.js';\nimport googlePayButtonImage from '@internetarchive/icon-googlepay/index.js';\nimport paypalButtonImage from '@internetarchive/icon-paypal/index.js';\nimport venmoButtonImage from '@internetarchive/icon-venmo/index.js';\nimport { PaymentProvidersInterface } from '../braintree-manager/payment-providers-interface';\n\nenum PaymentButtonMode {\n Loading = 'loading',\n Available = 'available',\n Unavailable = 'unavailable',\n}\n\n@customElement('payment-selector')\nexport class PaymentSelector extends LitElement {\n @property({ type: Boolean }) donationInfoValid = true;\n\n @property({ type: Object }) paymentProviders?: PaymentProvidersInterface;\n\n @property({ type: String }) private applePayMode: PaymentButtonMode = PaymentButtonMode.Loading;\n\n @property({ type: String }) private googlePayMode: PaymentButtonMode = PaymentButtonMode.Loading;\n\n @property({ type: String }) private venmoMode: PaymentButtonMode = PaymentButtonMode.Loading;\n\n @property({ type: String }) private payPalMode: PaymentButtonMode = PaymentButtonMode.Loading;\n\n @property({ type: String }) private paymentModeSelected:\n | 'apple'\n | 'google'\n | 'venmo'\n | 'cc'\n | 'paypal'\n | undefined = undefined;\n\n /** @inheritdoc */\n render(): TemplateResult {\n const paymentSelectedCss = this.paymentModeSelected ? 'payment-selected' : '';\n return html`\n <div\n class=\"payment-container ${this.donationInfoValid\n ? 'donation-info-valid'\n : 'donation-info-invalid'} ${paymentSelectedCss}\"\n >\n <div class=\"payment-provider-container\">\n <button\n class=\"applepay provider-button ${this.applePayMode} ${this.paymentModeSelected ===\n 'apple'\n ? 'selected'\n : ''}\"\n @click=${(e: Event) => {\n this.paymentModeSelected = 'apple';\n this.applePaySelected(e);\n }}\n tabindex=\"0\"\n >\n <div class=\"payment-image\">${applePayButtonImage}</div>\n </button>\n\n <button\n class=\"googlepay provider-button ${this.googlePayMode} ${this.paymentModeSelected ===\n 'google'\n ? 'selected'\n : ''}\"\n @click=${() => {\n this.paymentModeSelected = 'google';\n this.googlePaySelected();\n }}\n tabindex=\"0\"\n >\n <div class=\"payment-image\">${googlePayButtonImage}</div>\n </button>\n\n <button\n class=\"venmo provider-button ${this.venmoMode} ${this.paymentModeSelected === 'venmo'\n ? 'selected'\n : ''}\"\n @click=${() => {\n this.paymentModeSelected = 'venmo';\n this.venmoSelected();\n }}\n tabindex=\"0\"\n >\n <div class=\"payment-image\">${venmoButtonImage}</div>\n </button>\n\n <div\n class=\"paypal-container provider-button ${this.payPalMode}\n ${this.paymentModeSelected === 'paypal' ? 'selected' : ''}\"\n tabindex=\"0\"\n >\n <div class=\"payment-image\">\n <div\n class=\"paypal-local-button\"\n @click=${() => {\n this.paymentModeSelected = 'paypal';\n this.localPaypalButtonClicked();\n }}\n >\n ${paypalButtonImage}\n </div>\n <slot name=\"paypal-button\"></slot>\n </div>\n </div>\n </div>\n\n <div class=\"credit-card-container\">\n <button\n @click=${() => {\n this.paymentModeSelected = 'cc';\n this.creditCardSelected();\n }}\n class=\"button-style credit-card-button ${this.paymentModeSelected === 'cc'\n ? 'selected'\n : ''}\"\n tabindex=\"0\"\n >\n <div class=\"cc-title\">Credit Card</div>\n <div class=\"cc-background\"></div>\n </button>\n </div>\n </div>\n\n ${this.paymentModeSelected\n ? html`\n <button\n id=\"change-payment-method\"\n @click=${() => {\n this.paymentModeSelected = undefined;\n this.dispatchEvent(new Event('resetPaymentMethod'));\n this.setButtonVisibility();\n }}\n >\n Change payment method\n </button>\n `\n : nothing}\n `;\n }\n\n /** @inheritdoc */\n firstUpdated(): void {\n this.dispatchEvent(new Event('firstUpdated'));\n }\n\n /** @inheritdoc */\n updated(changed: PropertyValues): void {\n if (changed.has('paymentProviders')) {\n this.setButtonVisibility();\n }\n }\n\n showPaypalButton(): void {\n this.payPalMode = PaymentButtonMode.Available;\n }\n\n private async setButtonVisibility(): Promise<void> {\n this.paymentProviders?.venmoHandler\n .get()\n .then(handler => {\n if (!handler) {\n this.venmoMode = PaymentButtonMode.Unavailable;\n return;\n }\n\n handler\n .isBrowserSupported()\n .then(supported => {\n this.venmoMode = supported\n ? PaymentButtonMode.Available\n : PaymentButtonMode.Unavailable;\n })\n .catch(reason => {\n console.error('error loading venmo', reason);\n this.venmoMode = PaymentButtonMode.Unavailable;\n });\n })\n .catch(reason => {\n console.error('venmo unavailable', reason);\n this.venmoMode = PaymentButtonMode.Unavailable;\n });\n\n this.paymentProviders?.applePayHandler\n .get()\n .then(handler => {\n if (!handler) {\n console.error('applePayHandler unavailable');\n this.applePayMode = PaymentButtonMode.Unavailable;\n return;\n }\n\n handler\n .isAvailable()\n .then(supported => {\n this.applePayMode = supported\n ? PaymentButtonMode.Available\n : PaymentButtonMode.Unavailable;\n })\n .catch(reason => {\n console.error('error loading applepay', reason);\n this.applePayMode = PaymentButtonMode.Unavailable;\n });\n })\n .catch(reason => {\n console.error('apple pay unavailable', reason);\n this.applePayMode = PaymentButtonMode.Unavailable;\n });\n\n this.paymentProviders?.googlePayHandler\n .get()\n .then(handler => {\n if (!handler) {\n console.error('google pay handler unavailable');\n this.googlePayMode = PaymentButtonMode.Unavailable;\n return;\n }\n\n handler\n .isBrowserSupported()\n .then(supported => {\n this.googlePayMode = supported\n ? PaymentButtonMode.Available\n : PaymentButtonMode.Unavailable;\n })\n .catch(reason => {\n console.error('error loading googlepay', reason);\n this.googlePayMode = PaymentButtonMode.Unavailable;\n });\n })\n .catch(reason => {\n console.error('google pay unavailable', reason);\n this.googlePayMode = PaymentButtonMode.Unavailable;\n });\n }\n\n private googlePaySelected(): void {\n this.dispatchEvent(new Event('googlePaySelected'));\n }\n\n private applePaySelected(e: Event): void {\n const event = new CustomEvent('applePaySelected', { detail: { originalEvent: e } });\n this.dispatchEvent(event);\n }\n\n private venmoSelected(): void {\n this.dispatchEvent(new Event('venmoSelected'));\n }\n\n private creditCardSelected(): void {\n this.dispatchEvent(new Event('creditCardSelected'));\n }\n\n private localPaypalButtonClicked(): void {\n this.dispatchEvent(new Event('paypalBlockerSelected'));\n }\n\n /** @inheritdoc */\n static get styles(): CSSResult {\n const paymentButtonWidthCss = css`var(--paymentButtonWidth, 5rem)`;\n const paymentButtonHeightCss = css`var(--paymentButtonHeight, 3.2rem)`;\n const creditCardFontSizeCss = css`var(--creditCardFontSize, 1.8rem)`;\n\n return css`\n button {\n color: inherit;\n font-family: inherit;\n }\n\n .payment-container {\n width: 100%;\n }\n\n .payment-provider-container {\n display: grid;\n grid-template-columns: 1fr 1fr 1fr 1fr;\n grid-gap: 1rem;\n margin-bottom: 1rem;\n max-width: 23rem;\n }\n\n .provider-button {\n border: 0;\n padding: 0;\n background: none;\n cursor: pointer;\n width: ${paymentButtonWidthCss};\n height: ${paymentButtonHeightCss};\n }\n\n .provider-button.unavailable {\n display: none;\n }\n\n .provider-button.loading {\n border: 1px solid #ddd;\n border-radius: 2px;\n /* account for the borders that don't exist once the provider loads, otherwise the layout shifts */\n margin-bottom: -2px;\n }\n\n .provider-button.loading .payment-image {\n display: none;\n }\n\n .paypal-local-button {\n position: absolute;\n width: ${paymentButtonWidthCss};\n height: ${paymentButtonHeightCss};\n }\n\n .donation-info-valid .paypal-local-button {\n z-index: 0;\n }\n\n .donation-info-invalid .paypal-local-button {\n z-index: 250;\n }\n\n .credit-card-button {\n color: var(--ccButtonFontColor, #333);\n background-color: var(--ccButtonColor, white);\n border: 1px solid #333;\n border-radius: 4px;\n cursor: pointer;\n margin: 0;\n padding: 0.7rem 1rem;\n width: 100%;\n }\n\n .credit-card-button .cc-background {\n height: 2.4rem;\n width: 100%;\n background-repeat: no-repeat;\n background-image: url(https://archive.org/images/cc_logos.png);\n background-position: 50% 50%;\n background-size: contain;\n }\n\n .credit-card-button .cc-title {\n font-size: ${creditCardFontSizeCss};\n font-weight: 700;\n margin-bottom: 0.5rem;\n }\n\n button#change-payment-method {\n margin-top: 10px;\n background: white;\n border: 1px solid;\n border-radius: 3px;\n padding: 5px;\n }\n\n button#change-payment-method:hover {\n cursor: pointer;\n }\n\n .payment-selected button:not(.selected),\n .payment-selected .paypal-container:not(.selected) {\n display: none;\n }\n `;\n }\n}\n"]}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"total-amount.js","sourceRoot":"","sources":["../../../src/form-elements/total-amount.ts"],"names":[],"mappings":";AAAA,OAAO,EAAuB,YAAY,EAAE,MAAM,4CAA4C,CAAC;AAC/F,OAAO,EAAE,GAAG,EAAa,IAAI,EAAE,UAAU,EAAkB,MAAM,KAAK,CAAC;AACvE,OAAO,EAAE,aAAa,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAC;AAC5D,OAAO,QAAQ,MAAM,aAAa,CAAC;AAG5B,IAAM,WAAW,GAAjB,MAAM,WAAY,SAAQ,UAAU;IAIzC,MAAM;QACJ,OAAO,IAAI,CAAA;;uCAEwB,IAAI,CAAC,WAAW;KAClD,CAAC;IACJ,CAAC;IAED,IAAY,WAAW;QACrB,IAAI,CAAC,IAAI,CAAC,YAAY;YAAE,OAAO;QAC/B,MAAM,MAAM,GAAG,QAAQ,CAAC,IAAI,CAAC,YAAY,CAAC,KAAK,EAAE,EAAE,MAAM,EAAE,GAAG,EAAE,CAAC,CAAC,MAAM,EAAE,CAAC;QAC3E,MAAM,OAAO,GAAG,IAAI,CAAC,YAAY,CAAC,YAAY,KAAK,YAAY,CAAC,OAAO,CAAC,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAC,EAAE,CAAC;QACxF,OAAO,GAAG,MAAM,GAAG,OAAO,EAAE,CAAC;IAC/B,CAAC;IAED,MAAM,KAAK,MAAM;QACf,MAAM,SAAS,GAAG,GAAG,CAAA,mCAAmC,CAAC;QACzD,MAAM,aAAa,GAAG,GAAG,CAAA,sCAAsC,CAAC;QAChE,MAAM,0BAA0B,GAAG,GAAG,CAAA,2CAA2C,CAAC;QAClF,MAAM,mBAAmB,GAAG,GAAG,CAAA,oCAAoC,CAAC;QAEpE,OAAO,GAAG,CAAA;;;kBAGI,aAAa;4BACH,SAAS;;;;qBAIhB,mBAAmB;;;sBAGlB,0BAA0B;;KAE3C,CAAC;IACJ,CAAC;CACF,CAAA;AArCC;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;iDACQ;AAFxB,WAAW;IADvB,aAAa,CAAC,4BAA4B,CAAC;GAC/B,WAAW,CAuCvB
|
|
1
|
+
{"version":3,"file":"total-amount.js","sourceRoot":"","sources":["../../../src/form-elements/total-amount.ts"],"names":[],"mappings":";AAAA,OAAO,EAAuB,YAAY,EAAE,MAAM,4CAA4C,CAAC;AAC/F,OAAO,EAAE,GAAG,EAAa,IAAI,EAAE,UAAU,EAAkB,MAAM,KAAK,CAAC;AACvE,OAAO,EAAE,aAAa,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAC;AAC5D,OAAO,QAAQ,MAAM,aAAa,CAAC;AAG5B,IAAM,WAAW,GAAjB,MAAM,WAAY,SAAQ,UAAU;IAIzC,MAAM;QACJ,OAAO,IAAI,CAAA;;uCAEwB,IAAI,CAAC,WAAW;KAClD,CAAC;IACJ,CAAC;IAED,IAAY,WAAW;QACrB,IAAI,CAAC,IAAI,CAAC,YAAY;YAAE,OAAO;QAC/B,MAAM,MAAM,GAAG,QAAQ,CAAC,IAAI,CAAC,YAAY,CAAC,KAAK,EAAE,EAAE,MAAM,EAAE,GAAG,EAAE,CAAC,CAAC,MAAM,EAAE,CAAC;QAC3E,MAAM,OAAO,GAAG,IAAI,CAAC,YAAY,CAAC,YAAY,KAAK,YAAY,CAAC,OAAO,CAAC,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAC,EAAE,CAAC;QACxF,OAAO,GAAG,MAAM,GAAG,OAAO,EAAE,CAAC;IAC/B,CAAC;IAED,MAAM,KAAK,MAAM;QACf,MAAM,SAAS,GAAG,GAAG,CAAA,mCAAmC,CAAC;QACzD,MAAM,aAAa,GAAG,GAAG,CAAA,sCAAsC,CAAC;QAChE,MAAM,0BAA0B,GAAG,GAAG,CAAA,2CAA2C,CAAC;QAClF,MAAM,mBAAmB,GAAG,GAAG,CAAA,oCAAoC,CAAC;QAEpE,OAAO,GAAG,CAAA;;;kBAGI,aAAa;4BACH,SAAS;;;;qBAIhB,mBAAmB;;;sBAGlB,0BAA0B;;KAE3C,CAAC;IACJ,CAAC;CACF,CAAA;AArCC;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;iDACQ;AAFxB,WAAW;IADvB,aAAa,CAAC,4BAA4B,CAAC;GAC/B,WAAW,CAuCvB","sourcesContent":["import { DonationPaymentInfo, DonationType } from '@internetarchive/donation-form-data-models';\nimport { css, CSSResult, html, LitElement, TemplateResult } from 'lit';\nimport { customElement, property } from 'lit/decorators.js';\nimport currency from 'currency.js';\n\n@customElement('donation-form-total-amount')\nexport class TotalAmount extends LitElement {\n @property({ type: Object })\n donationInfo?: DonationPaymentInfo;\n\n render(): TemplateResult {\n return html`\n <div class=\"top-line\"></div>\n <div class=\"total-line\">Total: ${this.totalAmount}</div>\n `;\n }\n\n private get totalAmount(): string | undefined {\n if (!this.donationInfo) return;\n const amount = currency(this.donationInfo.total, { symbol: '$' }).format();\n const monthly = this.donationInfo.donationType === DonationType.Monthly ? '/month' : '';\n return `${amount}${monthly}`;\n }\n\n static get styles(): CSSResult {\n const lineColor = css`var(--totalAmountLineColor, #333)`;\n const lineThickness = css`var(--totalAmountLineThickness, 2px)`;\n const totalAmountVerticalSpacing = css`var(--totalAmountVerticalSpacing, 0.5rem)`;\n const totalAmountFontSize = css`var(--totalAmountFontSize, 2.6rem)`;\n\n return css`\n .top-line {\n width: 100%;\n height: ${lineThickness};\n background-color: ${lineColor};\n }\n\n .total-line {\n font-size: ${totalAmountFontSize};\n font-weight: bold;\n text-align: center;\n margin-top: ${totalAmountVerticalSpacing};\n }\n `;\n }\n}\n"]}
|
|
@@ -1,6 +1,4 @@
|
|
|
1
1
|
import { __decorate } from "tslib";
|
|
2
|
-
/* eslint-disable @typescript-eslint/no-empty-function */
|
|
3
|
-
/* eslint-disable @typescript-eslint/ban-types */
|
|
4
2
|
import { LitElement, html, css } from 'lit';
|
|
5
3
|
import { customElement, property } from 'lit/decorators.js';
|
|
6
4
|
import { DonationType } from '@internetarchive/donation-form-data-models';
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"confirm-donation-modal-content.js","sourceRoot":"","sources":["../../../src/modals/confirm-donation-modal-content.ts"],"names":[],"mappings":";AAAA,
|
|
1
|
+
{"version":3,"file":"confirm-donation-modal-content.js","sourceRoot":"","sources":["../../../src/modals/confirm-donation-modal-content.ts"],"names":[],"mappings":"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","sourcesContent":["import { LitElement, html, TemplateResult, css, CSSResultGroup } from 'lit';\nimport { customElement, property } from 'lit/decorators.js';\nimport { DonationType } from '@internetarchive/donation-form-data-models';\nimport currency from 'currency.js';\n\n/**\n * This is the content that we show in the upsell modal.\n *\n * It has an amount input, \"Yes\" and \"No Thanks\" options and a switch to optionally\n * show the PayPal upsell button.\n *\n * @export\n * @class ConfirmDonationContent\n * @extends {LitElement}\n */\n@customElement('confirm-donation-modal')\nexport class ConfirmDonationContent extends LitElement {\n @property({ type: Number }) amount = 5;\n\n @property({ type: String }) currencyType = '$';\n\n @property({ type: String }) donationType: DonationType = DonationType.OneTime;\n\n @property({ type: Function }) confirmDonation: Function = (): void => {};\n\n @property({ type: Function }) cancelDonation: Function = (): void => {};\n\n get confirmationText(): TemplateResult {\n const amount = currency(this.amount, { symbol: this.currencySymbol }).format();\n return html`\n <p>\n You are about to make a <b>${this.donationType}</b> donation of\n <b>${amount} ${this.currencyType}</b> to the Internet Archive.\n </p>\n `;\n }\n\n get confirmUpsellText(): TemplateResult {\n const amount = currency(this.amount, { symbol: this.currencySymbol }).format();\n return html`<p>\n You are about to begin making <b>monthly</b> donations of\n <b>${amount} ${this.currencyType}</b> to the Internet Archive. (Your first recurring\n contribution will be next month.)\n </p>`;\n }\n\n confirm(): void {\n this?.confirmDonation();\n }\n\n cancel(): void {\n this?.cancelDonation();\n }\n\n get confirmCTA(): string {\n return this.donationType === DonationType.Upsell\n ? 'Start monthly donation'\n : 'Complete donation';\n }\n\n /** @inheritdoc */\n render(): TemplateResult {\n return html`\n ${this.donationType === DonationType.Upsell ? this.confirmUpsellText : this.confirmationText}\n\n <div class=\"cta-group\">\n <button id=\"confirm\" @click=${(): void => this.confirm()}>${this.confirmCTA}</button>\n <button id=\"cancel\" @click=${(): void => this.cancel()}>Cancel</button>\n </div>\n `;\n }\n\n static get styles(): CSSResultGroup {\n const ctaButtonColor = css`var(--upsellCTAButtonColor, #194880)`;\n const ctaButtonDisabledColor = css`var(--upsellCTAButtonDisabledColor, rgba(109,148,201,0.5))`;\n\n return css`\n :host {\n display: block;\n }\n\n button {\n outline: none;\n cursor: pointer;\n }\n\n button#confirm {\n font-size: 2rem;\n display: block;\n width: 100%;\n margin-top: 0.5rem;\n padding: 1rem 2rem;\n background-color: ${ctaButtonColor};\n color: #fff;\n border-radius: 5px;\n border: 0;\n font-weight: bold;\n line-height: normal;\n }\n\n button#cancel {\n margin-top: 1rem;\n border: 0;\n text-decoration: underline;\n background-color: transparent;\n }\n\n button:disabled {\n background-color: ${ctaButtonDisabledColor};\n cursor: not-allowed;\n }\n }`;\n }\n\n /**\n * https://developer.paypal.com/docs/reports/reference/paypal-supported-currencies/\n */\n get currencySymbol(): string {\n switch (this.currencyType) {\n case 'AUD':\n return 'AU$';\n case 'BRL':\n return 'R$';\n case 'CAD':\n return 'CA$';\n case 'CHF':\n return 'Fr';\n case 'CNY':\n return '¥';\n case 'CZK':\n return 'Kč';\n case 'DKK':\n return 'Kr';\n case 'EUR':\n return '€';\n case 'GBP':\n return '£';\n case 'HKD':\n return 'HK$';\n case 'HUF':\n return 'Ft';\n case 'ILS':\n return '₪';\n case 'JPY':\n return '¥';\n case 'MXN':\n return 'MX$';\n case 'MYR':\n return 'RM';\n case 'NOK':\n return 'kr';\n case 'PLN':\n return 'zł';\n case 'RUB':\n return '₽';\n case 'SEK':\n return 'kr';\n case 'SGD':\n return 'S$';\n case 'THB':\n return '฿';\n case 'TYD':\n return 'NT$';\n default:\n return '$'; // $ as default USD, NZD\n }\n }\n}\n"]}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"error-modal-content.js","sourceRoot":"","sources":["../../../src/modals/error-modal-content.ts"],"names":[],"mappings":";AAAA,OAAO,EAAE,UAAU,EAAE,IAAI,EAAE,GAAG,EAA6B,MAAM,KAAK,CAAC;AACvE,OAAO,EAAE,aAAa,EAAE,MAAM,mBAAmB,CAAC;AAElD;;;;;;GAMG;AAEI,IAAM,iBAAiB,GAAvB,MAAM,iBAAkB,SAAQ,UAAU;IAC/C,kBAAkB;IAClB,MAAM;QACJ,OAAO,IAAI,CAAA;;;;;;;;;;KAUV,CAAC;IACJ,CAAC;IAED,kBAAkB;IAClB,MAAM,KAAK,MAAM;QACf,MAAM,sBAAsB,GAAG,GAAG,CAAA,+CAA+C,CAAC;QAClF,MAAM,sBAAsB,GAAG,GAAG,CAAA,+CAA+C,CAAC;QAClF,MAAM,qBAAqB,GAAG,GAAG,CAAA,gDAAgD,CAAC;QAElF,OAAO,GAAG,CAAA;;sBAEQ,sBAAsB;;;;;;;iBAO3B,sBAAsB;qBAClB,qBAAqB;;KAErC,CAAC;IACJ,CAAC;CACF,CAAA;AApCY,iBAAiB;IAD7B,aAAa,CAAC,mCAAmC,CAAC;GACtC,iBAAiB,CAoC7B
|
|
1
|
+
{"version":3,"file":"error-modal-content.js","sourceRoot":"","sources":["../../../src/modals/error-modal-content.ts"],"names":[],"mappings":";AAAA,OAAO,EAAE,UAAU,EAAE,IAAI,EAAE,GAAG,EAA6B,MAAM,KAAK,CAAC;AACvE,OAAO,EAAE,aAAa,EAAE,MAAM,mBAAmB,CAAC;AAElD;;;;;;GAMG;AAEI,IAAM,iBAAiB,GAAvB,MAAM,iBAAkB,SAAQ,UAAU;IAC/C,kBAAkB;IAClB,MAAM;QACJ,OAAO,IAAI,CAAA;;;;;;;;;;KAUV,CAAC;IACJ,CAAC;IAED,kBAAkB;IAClB,MAAM,KAAK,MAAM;QACf,MAAM,sBAAsB,GAAG,GAAG,CAAA,+CAA+C,CAAC;QAClF,MAAM,sBAAsB,GAAG,GAAG,CAAA,+CAA+C,CAAC;QAClF,MAAM,qBAAqB,GAAG,GAAG,CAAA,gDAAgD,CAAC;QAElF,OAAO,GAAG,CAAA;;sBAEQ,sBAAsB;;;;;;;iBAO3B,sBAAsB;qBAClB,qBAAqB;;KAErC,CAAC;IACJ,CAAC;CACF,CAAA;AApCY,iBAAiB;IAD7B,aAAa,CAAC,mCAAmC,CAAC;GACtC,iBAAiB,CAoC7B","sourcesContent":["import { LitElement, html, css, CSSResult, TemplateResult } from 'lit';\nimport { customElement } from 'lit/decorators.js';\n\n/**\n * This is shown at the bottom of the error modal.\n *\n * @export\n * @class ErrorModalContent\n * @extends {LitElement}\n */\n@customElement('donation-form-error-modal-content')\nexport class ErrorModalContent extends LitElement {\n /** @inheritdoc */\n render(): TemplateResult {\n return html`\n <div class=\"container\">\n <a\n href=\"https://help.archive.org/help/why-is-there-a-problem-processing-my-donation/\"\n rel=\"noopener\"\n target=\"_blank\"\n >\n Questions?\n </a>\n </div>\n `;\n }\n\n /** @inheritdoc */\n static get styles(): CSSResult {\n const questionsLinkTopMargin = css`var(--errorModalQuestionsLinkTopMargin, 1rem)`;\n const questionsLinkFontColor = css`var(--errorModalQuestionsLinkFontColor, #333)`;\n const questionsLinkFontSize = css`var(--errorModalQuestionsLinkFontSize, 1.4rem)`;\n\n return css`\n .container {\n margin-top: ${questionsLinkTopMargin};\n text-align: center;\n }\n\n a,\n a:link,\n a:visited {\n color: ${questionsLinkFontColor};\n font-size: ${questionsLinkFontSize};\n }\n `;\n }\n}\n"]}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"upsell-modal-content.js","sourceRoot":"","sources":["../../../src/modals/upsell-modal-content.ts"],"names":[],"mappings":"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","sourcesContent":["import { LitElement, html, css, CSSResult, TemplateResult } from 'lit';\nimport { customElement, property, query } from 'lit/decorators.js';\nimport { CurrencyValidator } from '@internetarchive/donation-form-currency-validator';\n\nexport enum UpsellModalCTAMode {\n YesButton = 'YesButton',\n PayPalUpsellSlot = 'PayPalUpsellSlot',\n}\n\n/**\n * This is the content that we show in the upsell modal.\n *\n * It has an amount input, \"Yes\" and \"No Thanks\" options and a switch to optionally\n * show the PayPal upsell button.\n *\n * @export\n * @class UpsellModalContent\n * @extends {LitElement}\n */\n@customElement('upsell-modal-content')\nexport class UpsellModalContent extends LitElement {\n @property({ type: String }) yesButtonMode: UpsellModalCTAMode = UpsellModalCTAMode.YesButton;\n\n @property({ type: Number }) amount = 5;\n\n @property({ type: Object }) error?: TemplateResult;\n\n @query('#amount-input') amountInput!: HTMLInputElement;\n\n private currencyValidator: CurrencyValidator = new CurrencyValidator();\n\n /** @inheritdoc */\n render(): TemplateResult {\n return html`\n <h3>Thank you for donating!</h3>\n <button @click=${this.noThanksSelected} class=\"cta-button\" id=\"no-button\">Continue</button>\n <p class=\"or_separator\"><span>or</span></p>\n <h3>Join our Monthly Giving Circle</h3>\n <p class=\"appeal\">Monthly support helps us reliably plan for the future.</p>\n <div class=\"monthly-amount\">\n <h1>Enter your monthly amount</h1>\n <div class=\"amount-input\">\n <span class=\"dollar-symbol\">$</span>\n <input\n id=\"amount-input\"\n type=\"text\"\n tabindex=\"0\"\n value=${this.amount}\n @input=${this.amountChanged}\n @keydown=${this.currencyValidator.keydown}\n />\n </div>\n <div class=\"error ${this.error ? '' : 'hidden'}\">${this.error}</div>\n </div>\n\n ${this.yesButton}\n `;\n }\n\n private get yesButton(): TemplateResult {\n switch (this.yesButtonMode) {\n case UpsellModalCTAMode.YesButton:\n return html`\n <button\n class=\"cta-button\"\n tabindex=\"0\"\n id=\"yes-button\"\n @click=${this.yesSelected}\n .disabled=${this.error !== undefined}\n >\n YES, I'll donate monthly\n </button>\n `;\n case UpsellModalCTAMode.PayPalUpsellSlot:\n return html`\n <div class=\"paypal-upsell-slot-container\">\n <div class=\"paypal-upsell-slot-blocker ${this.error ? '' : 'hidden'}\"></div>\n <button class=\"cta-button\" id=\"paypal-cover-button\">YES, I'll donate monthly</button>\n <slot class=\"paypal-upsell-slot\"></slot>\n </div>\n `;\n }\n }\n\n private amountChanged(e: Event): void {\n const target = e.target as HTMLInputElement;\n const amount = target.value;\n if (amount.length === 0) {\n return;\n }\n this.handleCustomAmountInput(amount);\n }\n\n private handleCustomAmountInput(value: string): void {\n const amount = parseFloat(value);\n if (isNaN(amount)) {\n this.error = html` Please enter a valid amount. `;\n } else {\n this.processAmount(amount);\n }\n }\n\n private processAmount(amount: number): void {\n if (amount >= 10000) {\n this.error = html`\n To make a donation of $10,000 or more, please contact our philanthropy department at\n <a href=\"mailto:donations@archive.org\">donations@archive.org</a>\n `;\n return;\n }\n\n if (amount < 1) {\n if (this.amountInput && this.amountInput.value.length > 0) {\n this.error = html` The minimum donation amount is $1. `;\n }\n return;\n }\n\n this.error = undefined;\n\n this.amount = amount;\n\n const event = new CustomEvent('amountChanged', { detail: { amount: this.amount } });\n this.dispatchEvent(event);\n }\n\n private yesSelected(): void {\n const event = new CustomEvent('yesSelected', { detail: { amount: this.amount } });\n this.dispatchEvent(event);\n }\n\n private noThanksSelected(): void {\n this.dispatchEvent(new Event('noThanksSelected'));\n }\n\n /** @inheritdoc */\n static get styles(): CSSResult {\n const ctaButtonColor = css`var(--upsellCTAButtonColor, #194880)`;\n const ctaButtonDisabledColor = css`var(--upsellCTAButtonDisabledColor, rgba(109,148,201,0.5))`;\n const amountInputOffset = css`var(--upsellAmountInputOffset, -1rem)`;\n\n return css`\n .monthly-amount {\n background-color: #fff;\n padding: 0.5rem 0.625rem;\n border-radius: 5px;\n text-align: center;\n margin-bottom: 0.5rem;\n margin-top: 0;\n }\n\n .monthly-amount h1 {\n font-size: 1.8rem;\n font-weight: bold;\n text-align: center;\n line-height: 1.2em;\n margin: 0;\n padding: 0.5rem 0 0 0;\n }\n\n .hidden {\n display: none;\n }\n\n h3 {\n text-align: center;\n font-size: 1.8rem;\n margin: 0 1rem 0.5rem 1rem;\n }\n\n .appeal {\n text-align: center;\n font-size: 1.6rem;\n margin: 0.5rem 1rem;\n }\n\n .amount-input {\n transform: translate(${amountInputOffset}, 0); /* translate slightly to center the input */\n }\n\n .amount-input .dollar-symbol {\n font-size: 1.8rem;\n font-weight: bold;\n }\n\n .amount-input input {\n width: 100px;\n text-align: center;\n border: none;\n border-bottom: 1px solid gray;\n font-weight: bold;\n font-size: 3.4rem;\n }\n\n .cta-button {\n font-size: 2rem;\n display: block;\n width: 100%;\n margin-top: 0.5rem;\n padding: 1rem 2rem;\n background-color: ${ctaButtonColor};\n color: #fff;\n border-radius: 5px;\n border: 0;\n font-weight: bold;\n line-height: normal;\n outline: none;\n cursor: pointer;\n }\n\n .cta-button:disabled {\n background-color: ${ctaButtonDisabledColor};\n cursor: not-allowed;\n }\n\n .paypal-upsell-slot {\n text-align: center;\n }\n\n .paypal-upsell-slot-blocker {\n position: absolute;\n width: 100%;\n height: 4.5rem;\n bottom: 0;\n z-index: 250;\n cursor: not-allowed;\n background-color: rgba(255, 255, 255, 0.5);\n }\n\n .paypal-upsell-slot-blocker.hidden {\n display: none;\n }\n\n #paypal-cover-button {\n position: absolute;\n width: 100%;\n bottom: 0;\n }\n\n .paypal-upsell-slot-container {\n position: relative;\n }\n\n .paypal-upsell-slot-container .paypal-cta {\n font-size: 2.4rem;\n font-weight: bold;\n margin: 0 1rem 1rem 1rem;\n text-align: center;\n }\n\n .error {\n font-size: 1.4rem;\n margin: 0.5rem 0;\n color: red;\n }\n\n .or_separator {\n position: relative;\n margin: 0 2rem;\n font-size: 2.6rem;\n font-weight: bold;\n text-transform: uppercase;\n text-align: center;\n }\n\n .or_separator:before {\n position: absolute;\n top: calc(50% - 1px);\n right: 0;\n left: 0;\n height: 2px;\n content: '';\n background: #333;\n }\n\n .or_separator span {\n display: inline-block;\n position: relative;\n padding: 0 1rem;\n background: #f5f5f7;\n }\n `;\n }\n}\n"]}
|
|
1
|
+
{"version":3,"file":"upsell-modal-content.js","sourceRoot":"","sources":["../../../src/modals/upsell-modal-content.ts"],"names":[],"mappings":"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","sourcesContent":["import { LitElement, html, css, CSSResult, TemplateResult } from 'lit';\nimport { customElement, property, query } from 'lit/decorators.js';\nimport { CurrencyValidator } from '@internetarchive/donation-form-currency-validator';\n\nexport enum UpsellModalCTAMode {\n YesButton = 'YesButton',\n PayPalUpsellSlot = 'PayPalUpsellSlot',\n}\n\n/**\n * This is the content that we show in the upsell modal.\n *\n * It has an amount input, \"Yes\" and \"No Thanks\" options and a switch to optionally\n * show the PayPal upsell button.\n *\n * @export\n * @class UpsellModalContent\n * @extends {LitElement}\n */\n@customElement('upsell-modal-content')\nexport class UpsellModalContent extends LitElement {\n @property({ type: String }) yesButtonMode: UpsellModalCTAMode = UpsellModalCTAMode.YesButton;\n\n @property({ type: Number }) amount = 5;\n\n @property({ type: Object }) error?: TemplateResult;\n\n @query('#amount-input') amountInput!: HTMLInputElement;\n\n private currencyValidator: CurrencyValidator = new CurrencyValidator();\n\n /** @inheritdoc */\n render(): TemplateResult {\n return html`\n <h3>Thank you for donating!</h3>\n <button @click=${this.noThanksSelected} class=\"cta-button\" id=\"no-button\">Continue</button>\n <p class=\"or_separator\"><span>or</span></p>\n <h3>Join our Monthly Giving Circle</h3>\n <p class=\"appeal\">Monthly support helps us reliably plan for the future.</p>\n <div class=\"monthly-amount\">\n <h1>Enter your monthly amount</h1>\n <div class=\"amount-input\">\n <span class=\"dollar-symbol\">$</span>\n <input\n id=\"amount-input\"\n type=\"text\"\n tabindex=\"0\"\n value=${this.amount}\n @input=${this.amountChanged}\n @keydown=${this.currencyValidator.keydown}\n />\n </div>\n <div class=\"error ${this.error ? '' : 'hidden'}\">${this.error}</div>\n </div>\n\n ${this.yesButton}\n `;\n }\n\n private get yesButton(): TemplateResult {\n switch (this.yesButtonMode) {\n case UpsellModalCTAMode.YesButton:\n return html`\n <button\n class=\"cta-button\"\n tabindex=\"0\"\n id=\"yes-button\"\n @click=${this.yesSelected}\n .disabled=${this.error !== undefined}\n >\n YES, I'll donate monthly\n </button>\n `;\n case UpsellModalCTAMode.PayPalUpsellSlot:\n return html`\n <div class=\"paypal-upsell-slot-container\">\n <div class=\"paypal-upsell-slot-blocker ${this.error ? '' : 'hidden'}\"></div>\n <button class=\"cta-button\" id=\"paypal-cover-button\">YES, I'll donate monthly</button>\n <slot class=\"paypal-upsell-slot\"></slot>\n </div>\n `;\n }\n }\n\n private amountChanged(e: Event): void {\n const target = e.target as HTMLInputElement;\n const amount = target.value;\n if (amount.length === 0) {\n return;\n }\n this.handleCustomAmountInput(amount);\n }\n\n private handleCustomAmountInput(value: string): void {\n const amount = parseFloat(value);\n if (isNaN(amount)) {\n this.error = html` Please enter a valid amount. `;\n } else {\n this.processAmount(amount);\n }\n }\n\n private processAmount(amount: number): void {\n if (amount >= 10000) {\n this.error = html`\n To make a donation of $10,000 or more, please contact our philanthropy department at\n <a href=\"mailto:donations@archive.org\">donations@archive.org</a>\n `;\n return;\n }\n\n if (amount < 1) {\n if (this.amountInput && this.amountInput.value.length > 0) {\n this.error = html` The minimum donation amount is $1. `;\n }\n return;\n }\n\n this.error = undefined;\n\n this.amount = amount;\n\n const event = new CustomEvent('amountChanged', { detail: { amount: this.amount } });\n this.dispatchEvent(event);\n }\n\n private yesSelected(): void {\n const event = new CustomEvent('yesSelected', { detail: { amount: this.amount } });\n this.dispatchEvent(event);\n }\n\n private noThanksSelected(): void {\n this.dispatchEvent(new Event('noThanksSelected'));\n }\n\n /** @inheritdoc */\n static get styles(): CSSResult {\n const ctaButtonColor = css`var(--upsellCTAButtonColor, #194880)`;\n const ctaButtonDisabledColor = css`var(--upsellCTAButtonDisabledColor, rgba(109,148,201,0.5))`;\n const amountInputOffset = css`var(--upsellAmountInputOffset, -1rem)`;\n\n return css`\n .monthly-amount {\n background-color: #fff;\n padding: 0.5rem 0.625rem;\n border-radius: 5px;\n text-align: center;\n margin-bottom: 0.5rem;\n margin-top: 0;\n }\n\n .monthly-amount h1 {\n font-size: 1.8rem;\n font-weight: bold;\n text-align: center;\n line-height: 1.2em;\n margin: 0;\n padding: 0.5rem 0 0 0;\n }\n\n .hidden {\n display: none;\n }\n\n h3 {\n text-align: center;\n font-size: 1.8rem;\n margin: 0 1rem 0.5rem 1rem;\n }\n\n .appeal {\n text-align: center;\n font-size: 1.6rem;\n margin: 0.5rem 1rem;\n }\n\n .amount-input {\n transform: translate(${amountInputOffset}, 0); /* translate slightly to center the input */\n }\n\n .amount-input .dollar-symbol {\n font-size: 1.8rem;\n font-weight: bold;\n }\n\n .amount-input input {\n width: 100px;\n text-align: center;\n border: none;\n border-bottom: 1px solid gray;\n font-weight: bold;\n font-size: 3.4rem;\n }\n\n .cta-button {\n font-size: 2rem;\n display: block;\n width: 100%;\n margin-top: 0.5rem;\n padding: 1rem 2rem;\n background-color: ${ctaButtonColor};\n color: #fff;\n border-radius: 5px;\n border: 0;\n font-weight: bold;\n line-height: normal;\n outline: none;\n cursor: pointer;\n }\n\n .cta-button:disabled {\n background-color: ${ctaButtonDisabledColor};\n cursor: not-allowed;\n }\n\n .paypal-upsell-slot {\n text-align: center;\n }\n\n .paypal-upsell-slot-blocker {\n position: absolute;\n width: 100%;\n height: 4.5rem;\n bottom: 0;\n z-index: 250;\n cursor: not-allowed;\n background-color: rgba(255, 255, 255, 0.5);\n }\n\n .paypal-upsell-slot-blocker.hidden {\n display: none;\n }\n\n #paypal-cover-button {\n position: absolute;\n width: 100%;\n bottom: 0;\n }\n\n .paypal-upsell-slot-container {\n position: relative;\n }\n\n .paypal-upsell-slot-container .paypal-cta {\n font-size: 2.4rem;\n font-weight: bold;\n margin: 0 1rem 1rem 1rem;\n text-align: center;\n }\n\n .error {\n font-size: 1.4rem;\n margin: 0.5rem 0;\n color: red;\n }\n\n .or_separator {\n position: relative;\n margin: 0 2rem;\n font-size: 2.6rem;\n font-weight: bold;\n text-transform: uppercase;\n text-align: center;\n }\n\n .or_separator:before {\n position: absolute;\n top: calc(50% - 1px);\n right: 0;\n left: 0;\n height: 2px;\n content: '';\n background: #333;\n }\n\n .or_separator span {\n display: inline-block;\n position: relative;\n padding: 0 1rem;\n background: #f5f5f7;\n }\n `;\n }\n}\n"]}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"donation-flow-modal-manager.js","sourceRoot":"","sources":["../../../src/payment-flow-handlers/donation-flow-modal-manager.ts"],"names":[],"mappings":"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","sourcesContent":["/* eslint-disable @typescript-eslint/ban-types */\nimport { html } from 'lit';\nimport { ModalConfig, ModalManagerInterface } from '@internetarchive/modal-manager';\nimport { UpsellModalCTAMode } from '../modals/upsell-modal-content';\nimport '../modals/confirm-donation-modal-content';\nimport { BraintreeManagerInterface } from '../braintree-manager/braintree-interfaces';\nimport {\n SuccessResponse,\n ErrorResponse,\n DonationPaymentInfo,\n DonationType,\n PaymentProvider,\n BillingInfo,\n CustomerInfo,\n DonationResponse,\n} from '@internetarchive/donation-form-data-models';\nimport '../modals/error-modal-content';\nimport { DonationControllerEventLoggerInterface } from '../@types/analytics-handler';\n\nenum ModalHeaderColor {\n Blue = '#497fbf',\n Green = '#55A183',\n Red = '#691916',\n}\n\n/**\n * The DonationFlowModalManager is responsible for most of the high-level modal flows.\n *\n * Each of the payment providers has slightly different interactions, ie the PayPal button,\n * ApplePay popup, Venmo launching the app, etc. The modal flow is the same for all of them\n * so this class gets called by the individual payment flow handlers to take the user\n * through the modal flow.\n *\n * @export\n * @interface DonationFlowModalManagerInterface\n */\nexport interface DonationFlowModalManagerInterface {\n showConfirmationStepModal(options: {\n amount: number;\n donationType: DonationType;\n currencyType: string;\n confirmDonationCB: Function;\n cancelDonationCB: Function;\n }): Promise<void>;\n /**\n * Close the modal\n *\n * @memberof DonationFlowModalManagerInterface\n */\n closeModal(): void;\n\n /**\n * Show the processing modal\n *\n * @memberof DonationFlowModalManagerInterface\n */\n showProcessingModal(): void;\n\n /**\n * Show the Thank You modal\n *\n * @memberof DonationFlowModalManagerInterface\n */\n showThankYouModal(options: {\n successResponse: SuccessResponse;\n upsellSuccessResponse?: SuccessResponse;\n }): void;\n\n /**\n * Show the Error modal\n *\n * @param {{\n * userClosedModalCallback?: () => void;\n * }} [options]\n * @memberof DonationFlowModalManagerInterface\n */\n showErrorModal(options: { message: string; userClosedModalCallback?: () => void }): void;\n\n /**\n * Show the upsell modal\n *\n * @param {{\n * ctaMode?: UpsellModalCTAMode;\n * yesSelected?: (amount: number) => void;\n * noSelected?: () => void;\n * amountChanged?: (amount: number) => void;\n * userClosedModalCallback?: () => void;\n * }} [options]\n * @returns {Promise<void>}\n * @memberof DonationFlowModalManagerInterface\n */\n showUpsellModal(options: {\n oneTimeAmount: number;\n ctaMode?: UpsellModalCTAMode;\n yesSelected?: (amount: number) => void;\n noSelected?: () => void;\n amountChanged?: (amount: number) => void;\n userClosedModalCallback?: () => void;\n }): Promise<void>;\n\n /**\n * Start the donation submission flow. This kicks off the \"main\" modal flow once the\n * user authorizes the donation through their payment provider, which provides\n * us the with the nonce used to complete the donation.\n *\n * @param {{\n * nonce: string;\n * paymentProvider: PaymentProvider;\n * donationInfo: DonationPaymentInfo;\n * billingInfo: BillingInfo;\n * customerInfo: CustomerInfo;\n * upsellOnetimeTransactionId?: string;\n * customerId?: string;\n * recaptchaToken?: string;\n * bin?: string; // first 6 digits of CC\n * binName?: string; // credit card bank name\n * }} options\n * @returns {(Promise<DonationResponse | undefined>)}\n * @memberof DonationFlowModalManagerInterface\n */\n startDonationSubmissionFlow(options: {\n nonce: string;\n paymentProvider: PaymentProvider;\n donationInfo: DonationPaymentInfo;\n billingInfo: BillingInfo;\n customerInfo: CustomerInfo;\n upsellOnetimeTransactionId?: string;\n customerId?: string;\n recaptchaToken?: string;\n bin?: string; // first 6 digits of CC\n binName?: string; // credit card bank name\n }): Promise<DonationResponse | undefined>;\n\n /**\n * Handle a successful donation response. This encapsulates the logic for the type of\n * donation that was made.\n * ie. If it was a one-time donation, show the upsell, if it was monthly do not.\n *\n * @param {DonationPaymentInfo} donationInfo\n * @param {SuccessResponse} response\n * @memberof DonationFlowModalManagerInterface\n */\n handleSuccessfulDonationResponse(\n donationInfo: DonationPaymentInfo,\n response: SuccessResponse,\n ): void;\n}\n\nexport class DonationFlowModalManager implements DonationFlowModalManagerInterface {\n private braintreeManager: BraintreeManagerInterface;\n\n private modalManager: ModalManagerInterface;\n\n private analytics: DonationControllerEventLoggerInterface;\n\n constructor(options: {\n braintreeManager: BraintreeManagerInterface;\n modalManager: ModalManagerInterface;\n analytics: DonationControllerEventLoggerInterface;\n }) {\n this.modalManager = options.modalManager;\n this.braintreeManager = options.braintreeManager;\n this.analytics = options.analytics;\n }\n\n /** @inheritdoc */\n closeModal(): void {\n this.modalManager.closeModal();\n }\n\n /** @inheritdoc */\n showProcessingModal(): void {\n const modalConfig = new ModalConfig({\n headerColor: ModalHeaderColor.Blue,\n showProcessingIndicator: true,\n closeOnBackdropClick: false,\n showCloseButton: false,\n processingImageMode: 'processing',\n title: html` Processing... `,\n });\n this.modalManager.showModal({ config: modalConfig });\n }\n\n /** @inheritdoc */\n showThankYouModal(options: {\n successResponse: SuccessResponse;\n upsellSuccessResponse?: SuccessResponse;\n }): void {\n const modalConfig = new ModalConfig({\n showProcessingIndicator: true,\n processingImageMode: 'complete',\n headerColor: ModalHeaderColor.Green,\n title: html` Thank You! `,\n });\n this.modalManager.showModal({\n config: modalConfig,\n });\n\n // post analytic\n const selectedPayment = options.successResponse.paymentProvider.replace(/\\s+/g, '');\n let action = `Donated-${selectedPayment}`;\n if (options.upsellSuccessResponse) {\n action += `-upsell`;\n }\n const label = options.successResponse.donationType;\n this.analytics.logDonationFlowEvent(action, label);\n\n // post donation\n this.braintreeManager.donationSuccessful(options);\n }\n\n /** @inheritdoc */\n showErrorModal(options: { message: string; userClosedModalCallback?: () => void }): void {\n const modalConfig = new ModalConfig({\n headerColor: ModalHeaderColor.Red,\n title: html` Processing error `,\n headline: html` There's been a problem completing your donation. `,\n message: html` ${options?.message} `,\n });\n\n this.modalManager.showModal({\n config: modalConfig,\n userClosedModalCallback: options?.userClosedModalCallback,\n customModalContent: html`\n <donation-form-error-modal-content></donation-form-error-modal-content>\n `,\n });\n }\n\n showConfirmationStepModal(options: {\n amount: number;\n donationType: DonationType;\n currencyType: string;\n confirmDonationCB: Function;\n cancelDonationCB: Function;\n }): Promise<void> {\n const confirmDonation = (): void => {\n options?.confirmDonationCB();\n };\n const cancelDonation = (): void => {\n options?.cancelDonationCB();\n };\n const modalTitle =\n options.donationType === DonationType.Upsell\n ? 'Confirm monthly donation'\n : 'Complete donation';\n\n const modalConfig = new ModalConfig({\n closeOnBackdropClick: false,\n headerColor: ModalHeaderColor.Green,\n title: html`${modalTitle}`,\n message: html`\n <confirm-donation-modal\n .amount=\"${options.amount}\"\n .currencyType=\"${options.currencyType}\"\n .donationType=\"${options.donationType}\"\n .confirmDonation=${confirmDonation}\n .cancelDonation=${cancelDonation}\n ></confirm-donation-modal>\n `,\n });\n return this.modalManager.showModal({\n config: modalConfig,\n userClosedModalCallback: cancelDonation,\n });\n }\n\n /** @inheritdoc */\n showUpsellModal(options: {\n oneTimeAmount: number;\n yesSelected?: (amount: number) => void;\n noSelected?: () => void;\n amountChanged?: (amount: number) => void;\n userClosedModalCallback?: () => void;\n ctaMode?: UpsellModalCTAMode;\n }): Promise<void> {\n const modalConfig = new ModalConfig({\n headerColor: ModalHeaderColor.Green,\n title: html` Donation received `,\n processingImageMode: 'complete',\n showProcessingIndicator: true,\n });\n\n const upsellAmount = DonationFlowModalManager.getDefaultUpsellAmount(options.oneTimeAmount);\n if (options.amountChanged) {\n options.amountChanged(upsellAmount);\n }\n\n const modalContent = html`\n <upsell-modal-content\n .amount=${upsellAmount}\n .yesButtonMode=${options?.ctaMode ?? UpsellModalCTAMode.YesButton}\n @yesSelected=${(e: CustomEvent): void =>\n options?.yesSelected ? options.yesSelected(e.detail.amount) : undefined}\n @noThanksSelected=${options?.noSelected}\n @amountChanged=${(e: CustomEvent): void =>\n options?.amountChanged ? options.amountChanged(e.detail.amount) : undefined}\n >\n <slot name=\"paypal-upsell-button\"></slot>\n </upsell-modal-content>\n `;\n return this.modalManager.showModal({\n config: modalConfig,\n customModalContent: modalContent,\n userClosedModalCallback: options?.userClosedModalCallback,\n });\n }\n\n /** @inheritdoc */\n async startDonationSubmissionFlow(options: {\n nonce: string;\n paymentProvider: PaymentProvider;\n donationInfo: DonationPaymentInfo;\n billingInfo: BillingInfo;\n customerInfo: CustomerInfo;\n upsellOnetimeTransactionId?: string;\n customerId?: string;\n recaptchaToken?: string;\n bin?: string; // first 6 digits of CC\n binName?: string; // credit card bank name\n }): Promise<DonationResponse | undefined> {\n this.showProcessingModal();\n\n try {\n const response = await this.braintreeManager.submitDonation(options);\n\n if (response.success) {\n this.handleSuccessfulDonationResponse(\n options.donationInfo,\n response.value as SuccessResponse,\n );\n return response;\n } else {\n const error = response.value as ErrorResponse;\n this.showErrorModal({\n message: error.message,\n });\n return response;\n }\n } catch (error) {\n this.showErrorModal({\n message: `${error}`,\n });\n console.error('error getting a response', error);\n return undefined;\n }\n }\n\n private async upsellModalYesSelected(\n oneTimeDonationResponse: SuccessResponse,\n amount: number,\n ): Promise<DonationResponse | undefined> {\n this.showProcessingModal();\n\n try {\n const response = await this.braintreeManager.submitUpsellDonation({\n oneTimeDonationResponse: oneTimeDonationResponse,\n amount: amount,\n });\n\n if (response.success) {\n this.completeUpsell({\n successResponse: oneTimeDonationResponse,\n upsellSuccessResponse: response.value as SuccessResponse,\n });\n } else {\n const error = response.value as ErrorResponse;\n this.showErrorModal({\n message: error.message,\n });\n }\n\n return response;\n } catch (error) {\n this.showErrorModal({\n message: `${error}`,\n });\n console.error('error getting a response', error);\n return undefined;\n }\n }\n\n private completeUpsell(options: {\n successResponse: SuccessResponse;\n upsellSuccessResponse?: SuccessResponse;\n }): void {\n this.showThankYouModal(options);\n\n // post analytic\n const selectedPayment = options.successResponse.paymentProvider.replace(/\\s+/g, '');\n const action = `Donated-${selectedPayment}-upsell`;\n const label = options.successResponse.donationType;\n this.analytics.logDonationFlowEvent(action, label);\n\n this.braintreeManager.donationSuccessful(options);\n }\n\n static getDefaultUpsellAmount(oneTimeAmount: number): number {\n let amount = 5;\n\n if (oneTimeAmount <= 10) amount = 7.71;\n else if (oneTimeAmount > 10 && oneTimeAmount <= 25) amount = 10;\n else if (oneTimeAmount > 25 && oneTimeAmount <= 100) amount = 25;\n else if (oneTimeAmount > 100) amount = 50;\n\n return amount;\n }\n\n /** @inheritdoc */\n handleSuccessfulDonationResponse(\n donationInfo: DonationPaymentInfo,\n response: SuccessResponse,\n ): void {\n switch (donationInfo.donationType) {\n case DonationType.OneTime:\n this.showUpsellModal({\n oneTimeAmount: response.amount,\n yesSelected: (amount: number) => {\n this.upsellModalYesSelected(response, amount);\n },\n noSelected: () => {\n this.showThankYouModal({ successResponse: response });\n },\n userClosedModalCallback: () => {\n this.showThankYouModal({ successResponse: response });\n },\n });\n break;\n case DonationType.Monthly:\n this.showThankYouModal({ successResponse: response });\n break;\n // This case will never be reached, it is only here for completeness.\n // The upsell case gets handled in `modalYesSelected()` below\n case DonationType.Upsell:\n break;\n default:\n break;\n }\n }\n}\n"]}
|
|
1
|
+
{"version":3,"file":"donation-flow-modal-manager.js","sourceRoot":"","sources":["../../../src/payment-flow-handlers/donation-flow-modal-manager.ts"],"names":[],"mappings":"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","sourcesContent":["import { html } from 'lit';\nimport { ModalConfig, ModalManagerInterface } from '@internetarchive/modal-manager';\nimport { UpsellModalCTAMode } from '../modals/upsell-modal-content';\nimport '../modals/confirm-donation-modal-content';\nimport { BraintreeManagerInterface } from '../braintree-manager/braintree-interfaces';\nimport {\n SuccessResponse,\n ErrorResponse,\n DonationPaymentInfo,\n DonationType,\n PaymentProvider,\n BillingInfo,\n CustomerInfo,\n DonationResponse,\n} from '@internetarchive/donation-form-data-models';\nimport '../modals/error-modal-content';\nimport { DonationControllerEventLoggerInterface } from '../@types/analytics-handler';\n\nenum ModalHeaderColor {\n Blue = '#497fbf',\n Green = '#55A183',\n Red = '#691916',\n}\n\n/**\n * The DonationFlowModalManager is responsible for most of the high-level modal flows.\n *\n * Each of the payment providers has slightly different interactions, ie the PayPal button,\n * ApplePay popup, Venmo launching the app, etc. The modal flow is the same for all of them\n * so this class gets called by the individual payment flow handlers to take the user\n * through the modal flow.\n *\n * @export\n * @interface DonationFlowModalManagerInterface\n */\nexport interface DonationFlowModalManagerInterface {\n showConfirmationStepModal(options: {\n amount: number;\n donationType: DonationType;\n currencyType: string;\n confirmDonationCB: Function;\n cancelDonationCB: Function;\n }): Promise<void>;\n /**\n * Close the modal\n *\n * @memberof DonationFlowModalManagerInterface\n */\n closeModal(): void;\n\n /**\n * Show the processing modal\n *\n * @memberof DonationFlowModalManagerInterface\n */\n showProcessingModal(): void;\n\n /**\n * Show the Thank You modal\n *\n * @memberof DonationFlowModalManagerInterface\n */\n showThankYouModal(options: {\n successResponse: SuccessResponse;\n upsellSuccessResponse?: SuccessResponse;\n }): void;\n\n /**\n * Show the Error modal\n *\n * @param {{\n * userClosedModalCallback?: () => void;\n * }} [options]\n * @memberof DonationFlowModalManagerInterface\n */\n showErrorModal(options: { message: string; userClosedModalCallback?: () => void }): void;\n\n /**\n * Show the upsell modal\n *\n * @param {{\n * ctaMode?: UpsellModalCTAMode;\n * yesSelected?: (amount: number) => void;\n * noSelected?: () => void;\n * amountChanged?: (amount: number) => void;\n * userClosedModalCallback?: () => void;\n * }} [options]\n * @returns {Promise<void>}\n * @memberof DonationFlowModalManagerInterface\n */\n showUpsellModal(options: {\n oneTimeAmount: number;\n ctaMode?: UpsellModalCTAMode;\n yesSelected?: (amount: number) => void;\n noSelected?: () => void;\n amountChanged?: (amount: number) => void;\n userClosedModalCallback?: () => void;\n }): Promise<void>;\n\n /**\n * Start the donation submission flow. This kicks off the \"main\" modal flow once the\n * user authorizes the donation through their payment provider, which provides\n * us the with the nonce used to complete the donation.\n *\n * @param {{\n * nonce: string;\n * paymentProvider: PaymentProvider;\n * donationInfo: DonationPaymentInfo;\n * billingInfo: BillingInfo;\n * customerInfo: CustomerInfo;\n * upsellOnetimeTransactionId?: string;\n * customerId?: string;\n * recaptchaToken?: string;\n * bin?: string; // first 6 digits of CC\n * binName?: string; // credit card bank name\n * }} options\n * @returns {(Promise<DonationResponse | undefined>)}\n * @memberof DonationFlowModalManagerInterface\n */\n startDonationSubmissionFlow(options: {\n nonce: string;\n paymentProvider: PaymentProvider;\n donationInfo: DonationPaymentInfo;\n billingInfo: BillingInfo;\n customerInfo: CustomerInfo;\n upsellOnetimeTransactionId?: string;\n customerId?: string;\n recaptchaToken?: string;\n bin?: string; // first 6 digits of CC\n binName?: string; // credit card bank name\n }): Promise<DonationResponse | undefined>;\n\n /**\n * Handle a successful donation response. This encapsulates the logic for the type of\n * donation that was made.\n * ie. If it was a one-time donation, show the upsell, if it was monthly do not.\n *\n * @param {DonationPaymentInfo} donationInfo\n * @param {SuccessResponse} response\n * @memberof DonationFlowModalManagerInterface\n */\n handleSuccessfulDonationResponse(\n donationInfo: DonationPaymentInfo,\n response: SuccessResponse,\n ): void;\n}\n\nexport class DonationFlowModalManager implements DonationFlowModalManagerInterface {\n private braintreeManager: BraintreeManagerInterface;\n\n private modalManager: ModalManagerInterface;\n\n private analytics: DonationControllerEventLoggerInterface;\n\n constructor(options: {\n braintreeManager: BraintreeManagerInterface;\n modalManager: ModalManagerInterface;\n analytics: DonationControllerEventLoggerInterface;\n }) {\n this.modalManager = options.modalManager;\n this.braintreeManager = options.braintreeManager;\n this.analytics = options.analytics;\n }\n\n /** @inheritdoc */\n closeModal(): void {\n this.modalManager.closeModal();\n }\n\n /** @inheritdoc */\n showProcessingModal(): void {\n const modalConfig = new ModalConfig({\n headerColor: ModalHeaderColor.Blue,\n showProcessingIndicator: true,\n closeOnBackdropClick: false,\n showCloseButton: false,\n processingImageMode: 'processing',\n title: html` Processing... `,\n });\n this.modalManager.showModal({ config: modalConfig });\n }\n\n /** @inheritdoc */\n showThankYouModal(options: {\n successResponse: SuccessResponse;\n upsellSuccessResponse?: SuccessResponse;\n }): void {\n const modalConfig = new ModalConfig({\n showProcessingIndicator: true,\n processingImageMode: 'complete',\n headerColor: ModalHeaderColor.Green,\n title: html` Thank You! `,\n });\n this.modalManager.showModal({\n config: modalConfig,\n });\n\n // post analytic\n const selectedPayment = options.successResponse.paymentProvider.replace(/\\s+/g, '');\n let action = `Donated-${selectedPayment}`;\n if (options.upsellSuccessResponse) {\n action += `-upsell`;\n }\n const label = options.successResponse.donationType;\n this.analytics.logDonationFlowEvent(action, label);\n\n // post donation\n this.braintreeManager.donationSuccessful(options);\n }\n\n /** @inheritdoc */\n showErrorModal(options: { message: string; userClosedModalCallback?: () => void }): void {\n const modalConfig = new ModalConfig({\n headerColor: ModalHeaderColor.Red,\n title: html` Processing error `,\n headline: html` There's been a problem completing your donation. `,\n message: html` ${options?.message} `,\n });\n\n this.modalManager.showModal({\n config: modalConfig,\n userClosedModalCallback: options?.userClosedModalCallback,\n customModalContent: html`\n <donation-form-error-modal-content></donation-form-error-modal-content>\n `,\n });\n }\n\n showConfirmationStepModal(options: {\n amount: number;\n donationType: DonationType;\n currencyType: string;\n confirmDonationCB: Function;\n cancelDonationCB: Function;\n }): Promise<void> {\n const confirmDonation = (): void => {\n options?.confirmDonationCB();\n };\n const cancelDonation = (): void => {\n options?.cancelDonationCB();\n };\n const modalTitle =\n options.donationType === DonationType.Upsell\n ? 'Confirm monthly donation'\n : 'Complete donation';\n\n const modalConfig = new ModalConfig({\n closeOnBackdropClick: false,\n headerColor: ModalHeaderColor.Green,\n title: html`${modalTitle}`,\n message: html`\n <confirm-donation-modal\n .amount=\"${options.amount}\"\n .currencyType=\"${options.currencyType}\"\n .donationType=\"${options.donationType}\"\n .confirmDonation=${confirmDonation}\n .cancelDonation=${cancelDonation}\n ></confirm-donation-modal>\n `,\n });\n return this.modalManager.showModal({\n config: modalConfig,\n userClosedModalCallback: cancelDonation,\n });\n }\n\n /** @inheritdoc */\n showUpsellModal(options: {\n oneTimeAmount: number;\n yesSelected?: (amount: number) => void;\n noSelected?: () => void;\n amountChanged?: (amount: number) => void;\n userClosedModalCallback?: () => void;\n ctaMode?: UpsellModalCTAMode;\n }): Promise<void> {\n const modalConfig = new ModalConfig({\n headerColor: ModalHeaderColor.Green,\n title: html` Donation received `,\n processingImageMode: 'complete',\n showProcessingIndicator: true,\n });\n\n const upsellAmount = DonationFlowModalManager.getDefaultUpsellAmount(options.oneTimeAmount);\n if (options.amountChanged) {\n options.amountChanged(upsellAmount);\n }\n\n const modalContent = html`\n <upsell-modal-content\n .amount=${upsellAmount}\n .yesButtonMode=${options?.ctaMode ?? UpsellModalCTAMode.YesButton}\n @yesSelected=${(e: CustomEvent): void =>\n options?.yesSelected ? options.yesSelected(e.detail.amount) : undefined}\n @noThanksSelected=${options?.noSelected}\n @amountChanged=${(e: CustomEvent): void =>\n options?.amountChanged ? options.amountChanged(e.detail.amount) : undefined}\n >\n <slot name=\"paypal-upsell-button\"></slot>\n </upsell-modal-content>\n `;\n return this.modalManager.showModal({\n config: modalConfig,\n customModalContent: modalContent,\n userClosedModalCallback: options?.userClosedModalCallback,\n });\n }\n\n /** @inheritdoc */\n async startDonationSubmissionFlow(options: {\n nonce: string;\n paymentProvider: PaymentProvider;\n donationInfo: DonationPaymentInfo;\n billingInfo: BillingInfo;\n customerInfo: CustomerInfo;\n upsellOnetimeTransactionId?: string;\n customerId?: string;\n recaptchaToken?: string;\n bin?: string; // first 6 digits of CC\n binName?: string; // credit card bank name\n }): Promise<DonationResponse | undefined> {\n this.showProcessingModal();\n\n try {\n const response = await this.braintreeManager.submitDonation(options);\n\n if (response.success) {\n this.handleSuccessfulDonationResponse(\n options.donationInfo,\n response.value as SuccessResponse,\n );\n return response;\n } else {\n const error = response.value as ErrorResponse;\n this.showErrorModal({\n message: error.message,\n });\n return response;\n }\n } catch (error) {\n this.showErrorModal({\n message: `${error}`,\n });\n console.error('error getting a response', error);\n return undefined;\n }\n }\n\n private async upsellModalYesSelected(\n oneTimeDonationResponse: SuccessResponse,\n amount: number,\n ): Promise<DonationResponse | undefined> {\n this.showProcessingModal();\n\n try {\n const response = await this.braintreeManager.submitUpsellDonation({\n oneTimeDonationResponse: oneTimeDonationResponse,\n amount: amount,\n });\n\n if (response.success) {\n this.completeUpsell({\n successResponse: oneTimeDonationResponse,\n upsellSuccessResponse: response.value as SuccessResponse,\n });\n } else {\n const error = response.value as ErrorResponse;\n this.showErrorModal({\n message: error.message,\n });\n }\n\n return response;\n } catch (error) {\n this.showErrorModal({\n message: `${error}`,\n });\n console.error('error getting a response', error);\n return undefined;\n }\n }\n\n private completeUpsell(options: {\n successResponse: SuccessResponse;\n upsellSuccessResponse?: SuccessResponse;\n }): void {\n this.showThankYouModal(options);\n\n // post analytic\n const selectedPayment = options.successResponse.paymentProvider.replace(/\\s+/g, '');\n const action = `Donated-${selectedPayment}-upsell`;\n const label = options.successResponse.donationType;\n this.analytics.logDonationFlowEvent(action, label);\n\n this.braintreeManager.donationSuccessful(options);\n }\n\n static getDefaultUpsellAmount(oneTimeAmount: number): number {\n let amount = 5;\n\n if (oneTimeAmount <= 10) amount = 7.71;\n else if (oneTimeAmount > 10 && oneTimeAmount <= 25) amount = 10;\n else if (oneTimeAmount > 25 && oneTimeAmount <= 100) amount = 25;\n else if (oneTimeAmount > 100) amount = 50;\n\n return amount;\n }\n\n /** @inheritdoc */\n handleSuccessfulDonationResponse(\n donationInfo: DonationPaymentInfo,\n response: SuccessResponse,\n ): void {\n switch (donationInfo.donationType) {\n case DonationType.OneTime:\n this.showUpsellModal({\n oneTimeAmount: response.amount,\n yesSelected: (amount: number) => {\n this.upsellModalYesSelected(response, amount);\n },\n noSelected: () => {\n this.showThankYouModal({ successResponse: response });\n },\n userClosedModalCallback: () => {\n this.showThankYouModal({ successResponse: response });\n },\n });\n break;\n case DonationType.Monthly:\n this.showThankYouModal({ successResponse: response });\n break;\n // This case will never be reached, it is only here for completeness.\n // The upsell case gets handled in `modalYesSelected()` below\n case DonationType.Upsell:\n break;\n default:\n break;\n }\n }\n}\n"]}
|
|
@@ -6,8 +6,8 @@ export class ApplePayFlowHandler {
|
|
|
6
6
|
this.donationFlowModalManager = options.donationFlowModalManager;
|
|
7
7
|
}
|
|
8
8
|
paymentInitiated(donationInfo, e) {
|
|
9
|
-
var _a;
|
|
10
9
|
return __awaiter(this, void 0, void 0, function* () {
|
|
10
|
+
var _a;
|
|
11
11
|
this.donationFlowModalManager.showProcessingModal();
|
|
12
12
|
const handler = yield ((_a = this.braintreeManager) === null || _a === void 0 ? void 0 : _a.paymentProviders.applePayHandler.get());
|
|
13
13
|
this.applePayDataSource = yield (handler === null || handler === void 0 ? void 0 : handler.createPaymentRequest(e, donationInfo));
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"applepay-flow-handler.js","sourceRoot":"","sources":["../../../../src/payment-flow-handlers/handlers/applepay-flow-handler.ts"],"names":[],"mappings":";AACA,OAAO,EAIL,YAAY,GAEb,MAAM,4CAA4C,CAAC;AASpD,MAAM,OAAO,mBAAmB;IAO9B,YAAY,OAGX;QACC,IAAI,CAAC,gBAAgB,GAAG,OAAO,CAAC,gBAAgB,CAAC;QACjD,IAAI,CAAC,wBAAwB,GAAG,OAAO,CAAC,wBAAwB,CAAC;IACnE,CAAC;IAIK,gBAAgB,CAAC,YAAiC,EAAE,CAAQ;;;YAChE,IAAI,CAAC,wBAAwB,CAAC,mBAAmB,EAAE,CAAC;YACpD,MAAM,OAAO,GAAG,MAAM,CAAA,MAAA,IAAI,CAAC,gBAAgB,0CAAE,gBAAgB,CAAC,eAAe,CAAC,GAAG,EAAE,CAAA,CAAC;YACpF,IAAI,CAAC,kBAAkB,GAAG,MAAM,CAAA,OAAO,aAAP,OAAO,uBAAP,OAAO,CAAE,oBAAoB,CAAC,CAAC,EAAE,YAAY,CAAC,CAAA,CAAC;YAE/E,IAAI,IAAI,CAAC,kBAAkB,EAAE;
|
|
1
|
+
{"version":3,"file":"applepay-flow-handler.js","sourceRoot":"","sources":["../../../../src/payment-flow-handlers/handlers/applepay-flow-handler.ts"],"names":[],"mappings":"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","sourcesContent":["import { BraintreeManagerInterface } from '../../braintree-manager/braintree-interfaces';\nimport {\n DonationResponse,\n DonationPaymentInfo,\n SuccessResponse,\n DonationType,\n ErrorResponse,\n} from '@internetarchive/donation-form-data-models';\nimport { DonationFlowModalManagerInterface } from '../donation-flow-modal-manager';\nimport { ApplePaySessionDataSourceDelegate } from '../../braintree-manager/payment-providers/apple-pay/apple-pay-session-datasource-delegate';\nimport { ApplePaySessionDataSourceInterface } from '../../braintree-manager/payment-providers/apple-pay/apple-pay-session-datasource-interface';\n\nexport interface ApplePayFlowHandlerInterface {\n paymentInitiated(donationInfo: DonationPaymentInfo, e: Event): Promise<void>;\n}\n\nexport class ApplePayFlowHandler\n implements ApplePayFlowHandlerInterface, ApplePaySessionDataSourceDelegate\n{\n private donationFlowModalManager: DonationFlowModalManagerInterface;\n\n private braintreeManager: BraintreeManagerInterface;\n\n constructor(options: {\n braintreeManager: BraintreeManagerInterface;\n donationFlowModalManager: DonationFlowModalManagerInterface;\n }) {\n this.braintreeManager = options.braintreeManager;\n this.donationFlowModalManager = options.donationFlowModalManager;\n }\n\n private applePayDataSource?: ApplePaySessionDataSourceInterface;\n\n async paymentInitiated(donationInfo: DonationPaymentInfo, e: Event): Promise<void> {\n this.donationFlowModalManager.showProcessingModal();\n const handler = await this.braintreeManager?.paymentProviders.applePayHandler.get();\n this.applePayDataSource = await handler?.createPaymentRequest(e, donationInfo);\n\n if (this.applePayDataSource) {\n this.applePayDataSource.delegate = this;\n }\n }\n\n private async modalYesSelected(\n oneTimeDonationResponse: SuccessResponse,\n amount: number,\n ): Promise<void> {\n this.donationFlowModalManager.showProcessingModal();\n\n const response = await this.braintreeManager.submitUpsellDonation({\n oneTimeDonationResponse: oneTimeDonationResponse,\n amount: amount,\n });\n\n if (response.success) {\n this.donationFlowModalManager.showThankYouModal({\n successResponse: oneTimeDonationResponse,\n upsellSuccessResponse: response.value as SuccessResponse,\n });\n } else {\n const error = response.value as ErrorResponse;\n this.donationFlowModalManager.showErrorModal({\n message: error.message,\n });\n }\n }\n\n // MARK - ApplePaySessionDataSourceDelegate\n paymentComplete(response: DonationResponse): void {\n if (response.success) {\n const successResponse = response.value as SuccessResponse;\n if (this.applePayDataSource?.donationInfo.donationType == DonationType.OneTime) {\n this.donationFlowModalManager.showUpsellModal({\n oneTimeAmount: successResponse.amount,\n yesSelected: this.modalYesSelected.bind(this, successResponse),\n noSelected: this.donationFlowModalManager.showThankYouModal.bind(\n this.donationFlowModalManager,\n {\n successResponse,\n },\n ),\n userClosedModalCallback: this.donationFlowModalManager.showThankYouModal.bind(\n this.donationFlowModalManager,\n {\n successResponse,\n },\n ),\n });\n } else {\n this.donationFlowModalManager.showThankYouModal({ successResponse });\n }\n } else {\n const errorResponse = response.value as ErrorResponse;\n this.donationFlowModalManager.showErrorModal({\n message: errorResponse.message,\n });\n }\n }\n\n paymentFailed(): void {\n this.donationFlowModalManager.showErrorModal({\n message: 'Payment failed',\n });\n }\n\n paymentCancelled(): void {\n this.donationFlowModalManager.closeModal();\n }\n}\n"]}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"creditcard-flow-handler.js","sourceRoot":"","sources":["../../../../src/payment-flow-handlers/handlers/creditcard-flow-handler.ts"],"names":[],"mappings":"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","sourcesContent":["import { createNanoEvents, Emitter, Unsubscribe } from 'nanoevents';\n\nimport { BraintreeManagerInterface } from '../../braintree-manager/braintree-interfaces';\nimport { RecaptchaManagerInterface } from '../../recaptcha-manager/recaptcha-manager';\n\nimport {\n DonorContactInfo,\n DonationPaymentInfo,\n PaymentProvider,\n} from '@internetarchive/donation-form-data-models';\nimport { DonationFlowModalManagerInterface } from '../donation-flow-modal-manager';\nimport { HostedFieldName } from '../../braintree-manager/payment-providers/credit-card/hosted-field-container';\nimport { BadgedInput } from '../../form-elements/badged-input';\nimport { BraintreeError } from '../../@types/braintree-web';\n\nexport interface CreditCardFlowHandlerInterface {\n /**\n * Set up the hosted fields with event bindings\n *\n * @returns {Promise<void>}\n * @memberof CreditCardFlowHandlerInterface\n */\n startup(): Promise<void>;\n\n /**\n * Tokenize the hosted fields.\n *\n * This also performs validation so we can call this before initiating the payment to\n * display any error messaging.\n *\n * @returns {(Promise<braintree.HostedFieldsTokenizePayload | undefined>)}\n * @memberof CreditCardFlowHandlerInterface\n */\n tokenizeFields(): Promise<braintree.HostedFieldsTokenizePayload | undefined>;\n\n /**\n * Initiate the payment flow.\n *\n * You must get the response from `tokenizeFields()` first before this to validate the hosted fields.\n *\n * @param {braintree.HostedFieldsTokenizePayload} hostedFieldsResponse\n * @param {DonationPaymentInfo} donationInfo\n * @param {DonorContactInfo} donorContactInfo\n * @returns {Promise<void>}\n * @memberof CreditCardFlowHandlerInterface\n */\n paymentInitiated(\n hostedFieldsResponse: braintree.HostedFieldsTokenizePayload,\n donationInfo: DonationPaymentInfo,\n donorContactInfo: DonorContactInfo,\n ): Promise<void>;\n\n /**\n * Bind to receive credit card flow handler events\n *\n * @template E\n * @param {E} event\n * @param {CreditCardFlowHandlerEvents[E]} callback\n * @returns {Unsubscribe}\n * @memberof CreditCardFlowHandlerInterface\n */\n on<E extends keyof CreditCardFlowHandlerEvents>(\n event: E,\n callback: CreditCardFlowHandlerEvents[E],\n ): Unsubscribe;\n}\n\nexport interface CreditCardFlowHandlerEvents {\n validityChanged: (isValid: boolean) => void;\n}\n\nexport class CreditCardFlowHandler implements CreditCardFlowHandlerInterface {\n private donationFlowModalManager: DonationFlowModalManagerInterface;\n\n private braintreeManager: BraintreeManagerInterface;\n\n private recaptchaManager: RecaptchaManagerInterface;\n\n private emitter: Emitter<CreditCardFlowHandlerEvents>;\n\n constructor(options: {\n braintreeManager: BraintreeManagerInterface;\n donationFlowModalManager: DonationFlowModalManagerInterface;\n recaptchaManager: RecaptchaManagerInterface;\n }) {\n this.braintreeManager = options.braintreeManager;\n this.donationFlowModalManager = options.donationFlowModalManager;\n this.recaptchaManager = options.recaptchaManager;\n this.emitter = createNanoEvents<CreditCardFlowHandlerEvents>();\n }\n\n /** @inheritdoc */\n on<E extends keyof CreditCardFlowHandlerEvents>(\n event: E,\n callback: CreditCardFlowHandlerEvents[E],\n ): Unsubscribe {\n return this.emitter.on(event, callback);\n }\n\n private started = false;\n\n /** @inheritdoc */\n async startup(): Promise<void> {\n if (this.started) {\n return;\n }\n this.started = true;\n\n const handler = await this.braintreeManager?.paymentProviders.creditCardHandler.get();\n const instance = await handler?.instance.get();\n\n // NOTE: The `focus` and `blur` callback logic must work in conjunction with\n // the `HostedFieldContainer` class. We use the `HostedFieldContainer` for\n // managing the hosted field error state in other parts of the form, but\n // since we can only get event callbacks from the hosted fields like this,\n // this has to operate independently and modify the CSS styles by itself\n instance?.on('focus', (event: braintree.HostedFieldsStateObject): void => {\n const { emittedBy, fields } = event;\n const fieldInFocus = fields[emittedBy];\n const { container } = fieldInFocus;\n (container.parentElement as BadgedInput).error = false;\n handler.hideErrorMessage();\n });\n\n instance?.on('blur', (event: braintree.HostedFieldsStateObject): void => {\n const { emittedBy, fields } = event;\n const fieldInFocus = fields[emittedBy];\n const { container, isEmpty, isValid } = fieldInFocus;\n if (isEmpty || !isValid) {\n (container.parentElement as BadgedInput).error = true;\n }\n });\n\n instance?.on('validityChange', (event: braintree.HostedFieldsStateObject): void => {\n const { fields } = event;\n const isValid = fields.cvv.isValid && fields.expirationDate.isValid && fields.number.isValid;\n this.emitter.emit('validityChanged', isValid);\n });\n }\n\n /** @inheritdoc */\n async tokenizeFields(): Promise<braintree.HostedFieldsTokenizePayload | undefined> {\n let hostedFieldsResponse: braintree.HostedFieldsTokenizePayload | undefined;\n\n const handler = await this.braintreeManager.paymentProviders.creditCardHandler.get();\n\n try {\n hostedFieldsResponse = await handler?.tokenizeHostedFields();\n } catch (error) {\n this.handleHostedFieldTokenizationError(error as BraintreeError);\n return;\n }\n\n return hostedFieldsResponse;\n }\n\n /** @inheritdoc */\n async paymentInitiated(\n hostedFieldsResponse: braintree.HostedFieldsTokenizePayload,\n donationInfo: DonationPaymentInfo,\n donorContactInfo: DonorContactInfo,\n ): Promise<void> {\n let recaptchaToken: string | undefined;\n\n try {\n recaptchaToken = await this.recaptchaManager.execute();\n } catch (error) {\n this.donationFlowModalManager.showErrorModal({\n message: `Recaptcha failure`,\n });\n return;\n }\n\n this.donationFlowModalManager.startDonationSubmissionFlow({\n nonce: hostedFieldsResponse.nonce,\n paymentProvider: PaymentProvider.CreditCard,\n recaptchaToken: recaptchaToken,\n bin: hostedFieldsResponse.details.bin,\n donationInfo: donationInfo,\n customerInfo: donorContactInfo.customer,\n billingInfo: donorContactInfo.billing,\n });\n }\n\n private async handleHostedFieldTokenizationError(error: braintree.BraintreeError): Promise<void> {\n const handler = await this.braintreeManager.paymentProviders.creditCardHandler.get();\n\n handler.showErrorMessage();\n\n switch (error.code) {\n case 'HOSTED_FIELDS_FIELDS_EMPTY':\n // occurs when none of the fields are filled in\n handler.markFieldErrors([\n HostedFieldName.Number,\n HostedFieldName.CVV,\n HostedFieldName.ExpirationDate,\n ]);\n break;\n case 'HOSTED_FIELDS_FIELDS_INVALID':\n // occurs when certain fields do not pass client side validation\n Object.keys(error.details.invalidFields).forEach(key => {\n handler.markFieldErrors([key as HostedFieldName]);\n });\n break;\n case 'HOSTED_FIELDS_TOKENIZATION_FAIL_ON_DUPLICATE':\n // occurs when:\n // * the client token used for client authorization was generated\n // with a customer ID and the fail on duplicate payment method\n // option is set to true\n // * the card being tokenized has previously been vaulted (with any customer)\n break;\n case 'HOSTED_FIELDS_TOKENIZATION_CVV_VERIFICATION_FAILED':\n // occurs when:\n // * the client token used for client authorization was generated\n // with a customer ID and the verify card option is set to true\n // and you have credit card verification turned on in the Braintree\n // control panel\n // * the cvv does not pass verfication\n handler.markFieldErrors([HostedFieldName.CVV]);\n break;\n case 'HOSTED_FIELDS_FAILED_TOKENIZATION':\n // occurs for any other tokenization error on the server\n break;\n case 'HOSTED_FIELDS_TOKENIZATION_NETWORK_ERROR':\n // occurs when the Braintree gateway cannot be contacted\n break;\n default:\n // something else happened\n break;\n }\n }\n}\n"]}
|
|
1
|
+
{"version":3,"file":"creditcard-flow-handler.js","sourceRoot":"","sources":["../../../../src/payment-flow-handlers/handlers/creditcard-flow-handler.ts"],"names":[],"mappings":"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","sourcesContent":["import { createNanoEvents, Emitter, Unsubscribe } from 'nanoevents';\n\nimport { BraintreeManagerInterface } from '../../braintree-manager/braintree-interfaces';\nimport { RecaptchaManagerInterface } from '../../recaptcha-manager/recaptcha-manager';\n\nimport {\n DonorContactInfo,\n DonationPaymentInfo,\n PaymentProvider,\n} from '@internetarchive/donation-form-data-models';\nimport { DonationFlowModalManagerInterface } from '../donation-flow-modal-manager';\nimport { HostedFieldName } from '../../braintree-manager/payment-providers/credit-card/hosted-field-container';\nimport { BadgedInput } from '../../form-elements/badged-input';\nimport { BraintreeError } from '../../@types/braintree-web';\n\nexport interface CreditCardFlowHandlerInterface {\n /**\n * Set up the hosted fields with event bindings\n *\n * @returns {Promise<void>}\n * @memberof CreditCardFlowHandlerInterface\n */\n startup(): Promise<void>;\n\n /**\n * Tokenize the hosted fields.\n *\n * This also performs validation so we can call this before initiating the payment to\n * display any error messaging.\n *\n * @returns {(Promise<braintree.HostedFieldsTokenizePayload | undefined>)}\n * @memberof CreditCardFlowHandlerInterface\n */\n tokenizeFields(): Promise<braintree.HostedFieldsTokenizePayload | undefined>;\n\n /**\n * Initiate the payment flow.\n *\n * You must get the response from `tokenizeFields()` first before this to validate the hosted fields.\n *\n * @param {braintree.HostedFieldsTokenizePayload} hostedFieldsResponse\n * @param {DonationPaymentInfo} donationInfo\n * @param {DonorContactInfo} donorContactInfo\n * @returns {Promise<void>}\n * @memberof CreditCardFlowHandlerInterface\n */\n paymentInitiated(\n hostedFieldsResponse: braintree.HostedFieldsTokenizePayload,\n donationInfo: DonationPaymentInfo,\n donorContactInfo: DonorContactInfo,\n ): Promise<void>;\n\n /**\n * Bind to receive credit card flow handler events\n *\n * @template E\n * @param {E} event\n * @param {CreditCardFlowHandlerEvents[E]} callback\n * @returns {Unsubscribe}\n * @memberof CreditCardFlowHandlerInterface\n */\n on<E extends keyof CreditCardFlowHandlerEvents>(\n event: E,\n callback: CreditCardFlowHandlerEvents[E],\n ): Unsubscribe;\n}\n\nexport interface CreditCardFlowHandlerEvents {\n validityChanged: (isValid: boolean) => void;\n}\n\nexport class CreditCardFlowHandler implements CreditCardFlowHandlerInterface {\n private donationFlowModalManager: DonationFlowModalManagerInterface;\n\n private braintreeManager: BraintreeManagerInterface;\n\n private recaptchaManager: RecaptchaManagerInterface;\n\n private emitter: Emitter<CreditCardFlowHandlerEvents>;\n\n constructor(options: {\n braintreeManager: BraintreeManagerInterface;\n donationFlowModalManager: DonationFlowModalManagerInterface;\n recaptchaManager: RecaptchaManagerInterface;\n }) {\n this.braintreeManager = options.braintreeManager;\n this.donationFlowModalManager = options.donationFlowModalManager;\n this.recaptchaManager = options.recaptchaManager;\n this.emitter = createNanoEvents<CreditCardFlowHandlerEvents>();\n }\n\n /** @inheritdoc */\n on<E extends keyof CreditCardFlowHandlerEvents>(\n event: E,\n callback: CreditCardFlowHandlerEvents[E],\n ): Unsubscribe {\n return this.emitter.on(event, callback);\n }\n\n private started = false;\n\n /** @inheritdoc */\n async startup(): Promise<void> {\n if (this.started) {\n return;\n }\n this.started = true;\n\n const handler = await this.braintreeManager?.paymentProviders.creditCardHandler.get();\n const instance = await handler?.instance.get();\n\n // NOTE: The `focus` and `blur` callback logic must work in conjunction with\n // the `HostedFieldContainer` class. We use the `HostedFieldContainer` for\n // managing the hosted field error state in other parts of the form, but\n // since we can only get event callbacks from the hosted fields like this,\n // this has to operate independently and modify the CSS styles by itself\n instance?.on('focus', (event: braintree.HostedFieldsStateObject): void => {\n const { emittedBy, fields } = event;\n const fieldInFocus = fields[emittedBy];\n const { container } = fieldInFocus;\n (container.parentElement as BadgedInput).error = false;\n handler.hideErrorMessage();\n });\n\n instance?.on('blur', (event: braintree.HostedFieldsStateObject): void => {\n const { emittedBy, fields } = event;\n const fieldInFocus = fields[emittedBy];\n const { container, isEmpty, isValid } = fieldInFocus;\n if (isEmpty || !isValid) {\n (container.parentElement as BadgedInput).error = true;\n }\n });\n\n instance?.on('validityChange', (event: braintree.HostedFieldsStateObject): void => {\n const { fields } = event;\n const isValid = fields.cvv.isValid && fields.expirationDate.isValid && fields.number.isValid;\n this.emitter.emit('validityChanged', isValid);\n });\n }\n\n /** @inheritdoc */\n async tokenizeFields(): Promise<braintree.HostedFieldsTokenizePayload | undefined> {\n let hostedFieldsResponse: braintree.HostedFieldsTokenizePayload | undefined;\n\n const handler = await this.braintreeManager.paymentProviders.creditCardHandler.get();\n\n try {\n hostedFieldsResponse = await handler?.tokenizeHostedFields();\n } catch (error) {\n this.handleHostedFieldTokenizationError(error as BraintreeError);\n return;\n }\n\n return hostedFieldsResponse;\n }\n\n /** @inheritdoc */\n async paymentInitiated(\n hostedFieldsResponse: braintree.HostedFieldsTokenizePayload,\n donationInfo: DonationPaymentInfo,\n donorContactInfo: DonorContactInfo,\n ): Promise<void> {\n let recaptchaToken: string | undefined;\n\n try {\n recaptchaToken = await this.recaptchaManager.execute();\n } catch (error) {\n this.donationFlowModalManager.showErrorModal({\n message: `Recaptcha failure`,\n });\n return;\n }\n\n this.donationFlowModalManager.startDonationSubmissionFlow({\n nonce: hostedFieldsResponse.nonce,\n paymentProvider: PaymentProvider.CreditCard,\n recaptchaToken: recaptchaToken,\n bin: hostedFieldsResponse.details.bin,\n donationInfo: donationInfo,\n customerInfo: donorContactInfo.customer,\n billingInfo: donorContactInfo.billing,\n });\n }\n\n private async handleHostedFieldTokenizationError(error: braintree.BraintreeError): Promise<void> {\n const handler = await this.braintreeManager.paymentProviders.creditCardHandler.get();\n\n handler.showErrorMessage();\n\n switch (error.code) {\n case 'HOSTED_FIELDS_FIELDS_EMPTY':\n // occurs when none of the fields are filled in\n handler.markFieldErrors([\n HostedFieldName.Number,\n HostedFieldName.CVV,\n HostedFieldName.ExpirationDate,\n ]);\n break;\n case 'HOSTED_FIELDS_FIELDS_INVALID':\n // occurs when certain fields do not pass client side validation\n Object.keys(error.details.invalidFields).forEach(key => {\n handler.markFieldErrors([key as HostedFieldName]);\n });\n break;\n case 'HOSTED_FIELDS_TOKENIZATION_FAIL_ON_DUPLICATE':\n // occurs when:\n // * the client token used for client authorization was generated\n // with a customer ID and the fail on duplicate payment method\n // option is set to true\n // * the card being tokenized has previously been vaulted (with any customer)\n break;\n case 'HOSTED_FIELDS_TOKENIZATION_CVV_VERIFICATION_FAILED':\n // occurs when:\n // * the client token used for client authorization was generated\n // with a customer ID and the verify card option is set to true\n // and you have credit card verification turned on in the Braintree\n // control panel\n // * the cvv does not pass verfication\n handler.markFieldErrors([HostedFieldName.CVV]);\n break;\n case 'HOSTED_FIELDS_FAILED_TOKENIZATION':\n // occurs for any other tokenization error on the server\n break;\n case 'HOSTED_FIELDS_TOKENIZATION_NETWORK_ERROR':\n // occurs when the Braintree gateway cannot be contacted\n break;\n default:\n // something else happened\n break;\n }\n }\n}\n"]}
|
|
@@ -12,8 +12,8 @@ export class GooglePayFlowHandler {
|
|
|
12
12
|
}
|
|
13
13
|
// GooglePayFlowHandlerInterface conformance
|
|
14
14
|
paymentInitiated(donationInfo) {
|
|
15
|
-
var _a, _b;
|
|
16
15
|
return __awaiter(this, void 0, void 0, function* () {
|
|
16
|
+
var _a, _b;
|
|
17
17
|
const handler = yield ((_a = this.braintreeManager) === null || _a === void 0 ? void 0 : _a.paymentProviders.googlePayHandler.get());
|
|
18
18
|
const instance = yield handler.instance.get();
|
|
19
19
|
const paymentDataRequest = yield instance.createPaymentDataRequest({
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"googlepay-flow-handler.js","sourceRoot":"","sources":["../../../../src/payment-flow-handlers/handlers/googlepay-flow-handler.ts"],"names":[],"mappings":";AACA,OAAO,EAEL,eAAe,EACf,YAAY,EACZ,WAAW,GACZ,MAAM,4CAA4C,CAAC;AAEpD,OAAO,EAAW,gBAAgB,EAAe,MAAM,YAAY,CAAC;AAcpE,MAAM,OAAO,oBAAoB;IAQ/B,YAAY,OAGX;QANO,YAAO,GACb,gBAAgB,EAA8B,CAAC;QAM/C,IAAI,CAAC,gBAAgB,GAAG,OAAO,CAAC,gBAAgB,CAAC;QACjD,IAAI,CAAC,wBAAwB,GAAG,OAAO,CAAC,wBAAwB,CAAC;IACnE,CAAC;IAED,EAAE,CACA,KAAQ,EACR,QAAuC;QAEvC,OAAO,IAAI,CAAC,OAAO,CAAC,EAAE,CAAC,KAAK,EAAE,QAAQ,CAAC,CAAC;IAC1C,CAAC;IAED,4CAA4C;IACtC,gBAAgB,CAAC,YAAiC;;;YACtD,MAAM,OAAO,GAAG,MAAM,CAAA,MAAA,IAAI,CAAC,gBAAgB,0CAAE,gBAAgB,CAAC,gBAAgB,CAAC,GAAG,EAAE,CAAA,CAAC;YACrF,MAAM,QAAQ,GAAG,MAAM,OAAO,CAAC,QAAQ,CAAC,GAAG,EAAE,CAAC;YAE9C,MAAM,kBAAkB,GAAG,MAAM,QAAQ,CAAC,wBAAwB,CAAC;gBACjE,aAAa,EAAE,IAAI;gBACnB,eAAe,EAAE;oBACf,YAAY,EAAE,KAAK;oBACnB,gBAAgB,EAAE,OAAO;oBACzB,UAAU,EAAE,GAAG,YAAY,CAAC,KAAK,EAAE;iBACpC;aACF,CAAC,CAAC;YAEH,MAAM,iBAAiB,GAAG,kBAAkB,CAAC,qBAAqB,CAAC,CAAC,CAAC,CAAC;YACtE,iBAAiB,CAAC,UAAU,CAAC,sBAAsB,GAAG,IAAI,CAAC;YAC3D,iBAAiB,CAAC,UAAU,CAAC,wBAAwB,GAAG;gBACtD,MAAM,EAAE,MAAM;gBACd,mBAAmB,EAAE,KAAK;aAC3B,CAAC;YAEF,IAAI;
|
|
1
|
+
{"version":3,"file":"googlepay-flow-handler.js","sourceRoot":"","sources":["../../../../src/payment-flow-handlers/handlers/googlepay-flow-handler.ts"],"names":[],"mappings":"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","sourcesContent":["import { BraintreeManagerInterface } from '../../braintree-manager/braintree-interfaces';\nimport {\n DonationPaymentInfo,\n PaymentProvider,\n CustomerInfo,\n BillingInfo,\n} from '@internetarchive/donation-form-data-models';\nimport { DonationFlowModalManagerInterface } from '../donation-flow-modal-manager';\nimport { Emitter, createNanoEvents, Unsubscribe } from 'nanoevents';\n\nexport interface GooglePayFlowHandlerInterface {\n paymentInitiated(donationInfo: DonationPaymentInfo): Promise<void>;\n on<E extends keyof GooglePayFlowHandlerEvents>(\n event: E,\n callback: GooglePayFlowHandlerEvents[E],\n ): Unsubscribe;\n}\n\nexport interface GooglePayFlowHandlerEvents {\n paymentCancelled: () => void;\n}\n\nexport class GooglePayFlowHandler implements GooglePayFlowHandlerInterface {\n private donationFlowModalManager: DonationFlowModalManagerInterface;\n\n private braintreeManager: BraintreeManagerInterface;\n\n private emitter: Emitter<GooglePayFlowHandlerEvents> =\n createNanoEvents<GooglePayFlowHandlerEvents>();\n\n constructor(options: {\n braintreeManager: BraintreeManagerInterface;\n donationFlowModalManager: DonationFlowModalManagerInterface;\n }) {\n this.braintreeManager = options.braintreeManager;\n this.donationFlowModalManager = options.donationFlowModalManager;\n }\n\n on<E extends keyof GooglePayFlowHandlerEvents>(\n event: E,\n callback: GooglePayFlowHandlerEvents[E],\n ): Unsubscribe {\n return this.emitter.on(event, callback);\n }\n\n // GooglePayFlowHandlerInterface conformance\n async paymentInitiated(donationInfo: DonationPaymentInfo): Promise<void> {\n const handler = await this.braintreeManager?.paymentProviders.googlePayHandler.get();\n const instance = await handler.instance.get();\n\n const paymentDataRequest = await instance.createPaymentDataRequest({\n emailRequired: true,\n transactionInfo: {\n currencyCode: 'USD',\n totalPriceStatus: 'FINAL',\n totalPrice: `${donationInfo.total}`,\n },\n });\n\n const cardPaymentMethod = paymentDataRequest.allowedPaymentMethods[0];\n cardPaymentMethod.parameters.billingAddressRequired = true;\n cardPaymentMethod.parameters.billingAddressParameters = {\n format: 'FULL',\n phoneNumberRequired: false,\n };\n\n try {\n const paymentData = await handler.paymentsClient.loadPaymentData(paymentDataRequest);\n const result: braintree.GooglePaymentTokenizePayload =\n await instance.parseResponse(paymentData);\n\n const billingInfo = paymentData.paymentMethodData.info?.billingAddress;\n const name = billingInfo?.name;\n let firstName: string | undefined = name;\n let lastName: string | undefined = '';\n const lastSpace = name?.lastIndexOf(' ');\n if (lastSpace && lastSpace !== -1) {\n firstName = name?.substr(0, lastSpace);\n lastName = name?.substr(lastSpace);\n }\n\n const customer = new CustomerInfo({\n email: paymentData.email,\n firstName,\n lastName,\n });\n\n const billing = new BillingInfo({\n streetAddress: billingInfo?.address1,\n extendedAddress: billingInfo?.address2,\n locality: billingInfo?.locality,\n region: billingInfo?.administrativeArea,\n postalCode: billingInfo?.postalCode,\n countryCodeAlpha2: billingInfo?.countryCode,\n });\n\n this.donationFlowModalManager.startDonationSubmissionFlow({\n nonce: result.nonce,\n paymentProvider: PaymentProvider.GooglePay,\n bin: result.details.bin,\n binName: result.binData.issuingBank,\n donationInfo: donationInfo,\n customerInfo: customer,\n billingInfo: billing,\n });\n } catch {\n this.emitter.emit('paymentCancelled');\n this.donationFlowModalManager.closeModal();\n }\n }\n}\n"]}
|