npm - @internetarchive/donation-form - Versions diffs - 0.5.26-a1 → 0.6.1-alpha.1 - Mend

@internetarchive/donation-form 0.5.26-a1 → 0.6.1-alpha.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (13) hide show

package/dist/src/modals/upsell-modal-content.js CHANGED Viewed

@@ -30,7 +30,7 @@ let UpsellModalContent = class UpsellModalContent extends LitElement {
       <h3>Thank you for donating!</h3>
       <button @click=${this.noThanksSelected} class="cta-button" id="no-button">Continue</button>
       <p class="or_separator"><span>or</span></p>
-      <h3>Consider donating monthly</h3>
+      <h3>Join our Monthly Giving Circle</h3>
       <p class="appeal">Monthly support helps us reliably plan for the future.</p>
       <div class="monthly-amount">
         <h1>Enter your monthly amount</h1>

package/dist/src/modals/upsell-modal-content.js.map CHANGED Viewed

	@@ -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>Consider donating monthly</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"]}

package/dist/src/models/donation-form-config.d.ts ADDED Viewed

@@ -0,0 +1,6 @@
+export declare class DonationFormConfig {
+    showCreditCardButtonText: boolean;
+    constructor(options: {
+        showCreditCardButtonText: boolean;
+    });
+}

package/dist/src/models/donation-form-config.js ADDED Viewed

@@ -0,0 +1,6 @@
+export class DonationFormConfig {
+    constructor(options) {
+        this.showCreditCardButtonText = options.showCreditCardButtonText;
+    }
+}
+//# sourceMappingURL=donation-form-config.js.map

package/dist/src/models/donation-form-config.js.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"file":"donation-form-config.js","sourceRoot":"","sources":["../../../src/models/donation-form-config.ts"],"names":[],"mappings":"AAAA,MAAM,OAAO,kBAAkB;IAG7B,YAAY,OAA8C;QACxD,IAAI,CAAC,wBAAwB,GAAG,OAAO,CAAC,wBAAwB,CAAC;IACnE,CAAC;CACF","sourcesContent":["export class DonationFormConfig {\n showCreditCardButtonText: boolean;\n\n constructor(options: { showCreditCardButtonText: boolean }) {\n this.showCreditCardButtonText = options.showCreditCardButtonText;\n }\n}\n"]}

package/dist/src/payment-flow-handlers/donation-flow-modal-manager.js CHANGED Viewed

@@ -201,7 +201,7 @@ export class DonationFlowModalManager {
     static getDefaultUpsellAmount(oneTimeAmount) {
         let amount = 5;
         if (oneTimeAmount <= 10)
-            amount = 5;
+            amount = 7.71;
         else if (oneTimeAmount > 10 && oneTimeAmount <= 25)
             amount = 10;
         else if (oneTimeAmount > 25 && oneTimeAmount <= 100)

package/dist/src/payment-flow-handlers/donation-flow-modal-manager.js.map CHANGED Viewed

	@@ -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 = 5;\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":";AAAA,iDAAiD;AACjD,OAAO,EAAE,IAAI,EAAE,MAAM,KAAK,CAAC;AAC3B,OAAO,EAAE,WAAW,EAAyB,MAAM,gCAAgC,CAAC;AACpF,OAAO,EAAE,kBAAkB,EAAE,MAAM,gCAAgC,CAAC;AACpE,OAAO,0CAA0C,CAAC;AAElD,OAAO,EAIL,YAAY,GAKb,MAAM,4CAA4C,CAAC;AACpD,OAAO,+BAA+B,CAAC;AAGvC,IAAK,gBAIJ;AAJD,WAAK,gBAAgB;IACnB,oCAAgB,CAAA;IAChB,qCAAiB,CAAA;IACjB,mCAAe,CAAA;AACjB,CAAC,EAJI,gBAAgB,KAAhB,gBAAgB,QAIpB;AA6HD,MAAM,OAAO,wBAAwB;IAOnC,YAAY,OAIX;QACC,IAAI,CAAC,YAAY,GAAG,OAAO,CAAC,YAAY,CAAC;QACzC,IAAI,CAAC,gBAAgB,GAAG,OAAO,CAAC,gBAAgB,CAAC;QACjD,IAAI,CAAC,SAAS,GAAG,OAAO,CAAC,SAAS,CAAC;IACrC,CAAC;IAED,kBAAkB;IAClB,UAAU;QACR,IAAI,CAAC,YAAY,CAAC,UAAU,EAAE,CAAC;IACjC,CAAC;IAED,kBAAkB;IAClB,mBAAmB;QACjB,MAAM,WAAW,GAAG,IAAI,WAAW,CAAC;YAClC,WAAW,EAAE,gBAAgB,CAAC,IAAI;YAClC,uBAAuB,EAAE,IAAI;YAC7B,oBAAoB,EAAE,KAAK;YAC3B,eAAe,EAAE,KAAK;YACtB,mBAAmB,EAAE,YAAY;YACjC,KAAK,EAAE,IAAI,CAAA,iBAAiB;SAC7B,CAAC,CAAC;QACH,IAAI,CAAC,YAAY,CAAC,SAAS,CAAC,EAAE,MAAM,EAAE,WAAW,EAAE,CAAC,CAAC;IACvD,CAAC;IAED,kBAAkB;IAClB,iBAAiB,CAAC,OAGjB;QACC,MAAM,WAAW,GAAG,IAAI,WAAW,CAAC;YAClC,uBAAuB,EAAE,IAAI;YAC7B,mBAAmB,EAAE,UAAU;YAC/B,WAAW,EAAE,gBAAgB,CAAC,KAAK;YACnC,KAAK,EAAE,IAAI,CAAA,cAAc;SAC1B,CAAC,CAAC;QACH,IAAI,CAAC,YAAY,CAAC,SAAS,CAAC;YAC1B,MAAM,EAAE,WAAW;SACpB,CAAC,CAAC;QAEH,gBAAgB;QAChB,MAAM,eAAe,GAAG,OAAO,CAAC,eAAe,CAAC,eAAe,CAAC,OAAO,CAAC,MAAM,EAAE,EAAE,CAAC,CAAC;QACpF,IAAI,MAAM,GAAG,WAAW,eAAe,EAAE,CAAC;QAC1C,IAAI,OAAO,CAAC,qBAAqB,EAAE;YACjC,MAAM,IAAI,SAAS,CAAC;SACrB;QACD,MAAM,KAAK,GAAG,OAAO,CAAC,eAAe,CAAC,YAAY,CAAC;QACnD,IAAI,CAAC,SAAS,CAAC,oBAAoB,CAAC,MAAM,EAAE,KAAK,CAAC,CAAC;QAEnD,gBAAgB;QAChB,IAAI,CAAC,gBAAgB,CAAC,kBAAkB,CAAC,OAAO,CAAC,CAAC;IACpD,CAAC;IAED,kBAAkB;IAClB,cAAc,CAAC,OAAkE;QAC/E,MAAM,WAAW,GAAG,IAAI,WAAW,CAAC;YAClC,WAAW,EAAE,gBAAgB,CAAC,GAAG;YACjC,KAAK,EAAE,IAAI,CAAA,oBAAoB;YAC/B,QAAQ,EAAE,IAAI,CAAA,oDAAoD;YAClE,OAAO,EAAE,IAAI,CAAA,IAAI,OAAO,aAAP,OAAO,uBAAP,OAAO,CAAE,OAAO,GAAG;SACrC,CAAC,CAAC;QAEH,IAAI,CAAC,YAAY,CAAC,SAAS,CAAC;YAC1B,MAAM,EAAE,WAAW;YACnB,uBAAuB,EAAE,OAAO,aAAP,OAAO,uBAAP,OAAO,CAAE,uBAAuB;YACzD,kBAAkB,EAAE,IAAI,CAAA;;OAEvB;SACF,CAAC,CAAC;IACL,CAAC;IAED,yBAAyB,CAAC,OAMzB;QACC,MAAM,eAAe,GAAG,GAAS,EAAE;YACjC,OAAO,aAAP,OAAO,uBAAP,OAAO,CAAE,iBAAiB,EAAE,CAAC;QAC/B,CAAC,CAAC;QACF,MAAM,cAAc,GAAG,GAAS,EAAE;YAChC,OAAO,aAAP,OAAO,uBAAP,OAAO,CAAE,gBAAgB,EAAE,CAAC;QAC9B,CAAC,CAAC;QACF,MAAM,UAAU,GACd,OAAO,CAAC,YAAY,KAAK,YAAY,CAAC,MAAM;YAC1C,CAAC,CAAC,0BAA0B;YAC5B,CAAC,CAAC,mBAAmB,CAAC;QAE1B,MAAM,WAAW,GAAG,IAAI,WAAW,CAAC;YAClC,oBAAoB,EAAE,KAAK;YAC3B,WAAW,EAAE,gBAAgB,CAAC,KAAK;YACnC,KAAK,EAAE,IAAI,CAAA,GAAG,UAAU,EAAE;YAC1B,OAAO,EAAE,IAAI,CAAA;;qBAEE,OAAO,CAAC,MAAM;2BACR,OAAO,CAAC,YAAY;2BACpB,OAAO,CAAC,YAAY;6BAClB,eAAe;4BAChB,cAAc;;OAEnC;SACF,CAAC,CAAC;QACH,OAAO,IAAI,CAAC,YAAY,CAAC,SAAS,CAAC;YACjC,MAAM,EAAE,WAAW;YACnB,uBAAuB,EAAE,cAAc;SACxC,CAAC,CAAC;IACL,CAAC;IAED,kBAAkB;IAClB,eAAe,CAAC,OAOf;;QACC,MAAM,WAAW,GAAG,IAAI,WAAW,CAAC;YAClC,WAAW,EAAE,gBAAgB,CAAC,KAAK;YACnC,KAAK,EAAE,IAAI,CAAA,qBAAqB;YAChC,mBAAmB,EAAE,UAAU;YAC/B,uBAAuB,EAAE,IAAI;SAC9B,CAAC,CAAC;QAEH,MAAM,YAAY,GAAG,wBAAwB,CAAC,sBAAsB,CAAC,OAAO,CAAC,aAAa,CAAC,CAAC;QAC5F,IAAI,OAAO,CAAC,aAAa,EAAE;YACzB,OAAO,CAAC,aAAa,CAAC,YAAY,CAAC,CAAC;SACrC;QAED,MAAM,YAAY,GAAG,IAAI,CAAA;;kBAEX,YAAY;yBACL,MAAA,OAAO,aAAP,OAAO,uBAAP,OAAO,CAAE,OAAO,mCAAI,kBAAkB,CAAC,SAAS;uBAClD,CAAC,CAAc,EAAQ,EAAE,CACtC,CAAA,OAAO,aAAP,OAAO,uBAAP,OAAO,CAAE,WAAW,EAAC,CAAC,CAAC,OAAO,CAAC,WAAW,CAAC,CAAC,CAAC,MAAM,CAAC,MAAM,CAAC,CAAC,CAAC,CAAC,SAAS;4BACrD,OAAO,aAAP,OAAO,uBAAP,OAAO,CAAE,UAAU;yBACtB,CAAC,CAAc,EAAQ,EAAE,CACxC,CAAA,OAAO,aAAP,OAAO,uBAAP,OAAO,CAAE,aAAa,EAAC,CAAC,CAAC,OAAO,CAAC,aAAa,CAAC,CAAC,CAAC,MAAM,CAAC,MAAM,CAAC,CAAC,CAAC,CAAC,SAAS;;;;KAIhF,CAAC;QACF,OAAO,IAAI,CAAC,YAAY,CAAC,SAAS,CAAC;YACjC,MAAM,EAAE,WAAW;YACnB,kBAAkB,EAAE,YAAY;YAChC,uBAAuB,EAAE,OAAO,aAAP,OAAO,uBAAP,OAAO,CAAE,uBAAuB;SAC1D,CAAC,CAAC;IACL,CAAC;IAED,kBAAkB;IACZ,2BAA2B,CAAC,OAWjC;;YACC,IAAI,CAAC,mBAAmB,EAAE,CAAC;YAE3B,IAAI;gBACF,MAAM,QAAQ,GAAG,MAAM,IAAI,CAAC,gBAAgB,CAAC,cAAc,CAAC,OAAO,CAAC,CAAC;gBAErE,IAAI,QAAQ,CAAC,OAAO,EAAE;oBACpB,IAAI,CAAC,gCAAgC,CACnC,OAAO,CAAC,YAAY,EACpB,QAAQ,CAAC,KAAwB,CAClC,CAAC;oBACF,OAAO,QAAQ,CAAC;iBACjB;qBAAM;oBACL,MAAM,KAAK,GAAG,QAAQ,CAAC,KAAsB,CAAC;oBAC9C,IAAI,CAAC,cAAc,CAAC;wBAClB,OAAO,EAAE,KAAK,CAAC,OAAO;qBACvB,CAAC,CAAC;oBACH,OAAO,QAAQ,CAAC;iBACjB;aACF;YAAC,OAAO,KAAK,EAAE;gBACd,IAAI,CAAC,cAAc,CAAC;oBAClB,OAAO,EAAE,GAAG,KAAK,EAAE;iBACpB,CAAC,CAAC;gBACH,OAAO,CAAC,KAAK,CAAC,0BAA0B,EAAE,KAAK,CAAC,CAAC;gBACjD,OAAO,SAAS,CAAC;aAClB;QACH,CAAC;KAAA;IAEa,sBAAsB,CAClC,uBAAwC,EACxC,MAAc;;YAEd,IAAI,CAAC,mBAAmB,EAAE,CAAC;YAE3B,IAAI;gBACF,MAAM,QAAQ,GAAG,MAAM,IAAI,CAAC,gBAAgB,CAAC,oBAAoB,CAAC;oBAChE,uBAAuB,EAAE,uBAAuB;oBAChD,MAAM,EAAE,MAAM;iBACf,CAAC,CAAC;gBAEH,IAAI,QAAQ,CAAC,OAAO,EAAE;oBACpB,IAAI,CAAC,cAAc,CAAC;wBAClB,eAAe,EAAE,uBAAuB;wBACxC,qBAAqB,EAAE,QAAQ,CAAC,KAAwB;qBACzD,CAAC,CAAC;iBACJ;qBAAM;oBACL,MAAM,KAAK,GAAG,QAAQ,CAAC,KAAsB,CAAC;oBAC9C,IAAI,CAAC,cAAc,CAAC;wBAClB,OAAO,EAAE,KAAK,CAAC,OAAO;qBACvB,CAAC,CAAC;iBACJ;gBAED,OAAO,QAAQ,CAAC;aACjB;YAAC,OAAO,KAAK,EAAE;gBACd,IAAI,CAAC,cAAc,CAAC;oBAClB,OAAO,EAAE,GAAG,KAAK,EAAE;iBACpB,CAAC,CAAC;gBACH,OAAO,CAAC,KAAK,CAAC,0BAA0B,EAAE,KAAK,CAAC,CAAC;gBACjD,OAAO,SAAS,CAAC;aAClB;QACH,CAAC;KAAA;IAEO,cAAc,CAAC,OAGtB;QACC,IAAI,CAAC,iBAAiB,CAAC,OAAO,CAAC,CAAC;QAEhC,gBAAgB;QAChB,MAAM,eAAe,GAAG,OAAO,CAAC,eAAe,CAAC,eAAe,CAAC,OAAO,CAAC,MAAM,EAAE,EAAE,CAAC,CAAC;QACpF,MAAM,MAAM,GAAG,WAAW,eAAe,SAAS,CAAC;QACnD,MAAM,KAAK,GAAG,OAAO,CAAC,eAAe,CAAC,YAAY,CAAC;QACnD,IAAI,CAAC,SAAS,CAAC,oBAAoB,CAAC,MAAM,EAAE,KAAK,CAAC,CAAC;QAEnD,IAAI,CAAC,gBAAgB,CAAC,kBAAkB,CAAC,OAAO,CAAC,CAAC;IACpD,CAAC;IAED,MAAM,CAAC,sBAAsB,CAAC,aAAqB;QACjD,IAAI,MAAM,GAAG,CAAC,CAAC;QAEf,IAAI,aAAa,IAAI,EAAE;YAAE,MAAM,GAAG,IAAI,CAAC;aAClC,IAAI,aAAa,GAAG,EAAE,IAAI,aAAa,IAAI,EAAE;YAAE,MAAM,GAAG,EAAE,CAAC;aAC3D,IAAI,aAAa,GAAG,EAAE,IAAI,aAAa,IAAI,GAAG;YAAE,MAAM,GAAG,EAAE,CAAC;aAC5D,IAAI,aAAa,GAAG,GAAG;YAAE,MAAM,GAAG,EAAE,CAAC;QAE1C,OAAO,MAAM,CAAC;IAChB,CAAC;IAED,kBAAkB;IAClB,gCAAgC,CAC9B,YAAiC,EACjC,QAAyB;QAEzB,QAAQ,YAAY,CAAC,YAAY,EAAE;YACjC,KAAK,YAAY,CAAC,OAAO;gBACvB,IAAI,CAAC,eAAe,CAAC;oBACnB,aAAa,EAAE,QAAQ,CAAC,MAAM;oBAC9B,WAAW,EAAE,CAAC,MAAc,EAAE,EAAE;wBAC9B,IAAI,CAAC,sBAAsB,CAAC,QAAQ,EAAE,MAAM,CAAC,CAAC;oBAChD,CAAC;oBACD,UAAU,EAAE,GAAG,EAAE;wBACf,IAAI,CAAC,iBAAiB,CAAC,EAAE,eAAe,EAAE,QAAQ,EAAE,CAAC,CAAC;oBACxD,CAAC;oBACD,uBAAuB,EAAE,GAAG,EAAE;wBAC5B,IAAI,CAAC,iBAAiB,CAAC,EAAE,eAAe,EAAE,QAAQ,EAAE,CAAC,CAAC;oBACxD,CAAC;iBACF,CAAC,CAAC;gBACH,MAAM;YACR,KAAK,YAAY,CAAC,OAAO;gBACvB,IAAI,CAAC,iBAAiB,CAAC,EAAE,eAAe,EAAE,QAAQ,EAAE,CAAC,CAAC;gBACtD,MAAM;YACR,qEAAqE;YACrE,6DAA6D;YAC7D,KAAK,YAAY,CAAC,MAAM;gBACtB,MAAM;YACR;gBACE,MAAM;SACT;IACH,CAAC;CACF","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"]}

package/dist/test/helpers/promisedSleep.d.ts ADDED Viewed

	@@ -0,0 +1 @@
1	+ export declare function promisedSleep(ms: number): Promise<void>;

package/dist/test/helpers/promisedSleep.js ADDED Viewed

@@ -0,0 +1,4 @@
+export function promisedSleep(ms) {
+    return new Promise(resolve => setTimeout(resolve, ms));
+}
+//# sourceMappingURL=promisedSleep.js.map

package/dist/test/helpers/promisedSleep.js.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"file":"promisedSleep.js","sourceRoot":"","sources":["../../../test/helpers/promisedSleep.ts"],"names":[],"mappings":"AAAA,MAAM,UAAU,aAAa,CAAC,EAAU;IACtC,OAAO,IAAI,OAAO,CAAC,OAAO,CAAC,EAAE,CAAC,UAAU,CAAC,OAAO,EAAE,EAAE,CAAC,CAAC,CAAC;AACzD,CAAC","sourcesContent":["export function promisedSleep(ms: number): Promise<void> {\n return new Promise(resolve => setTimeout(resolve, ms));\n}\n"]}

package/package.json CHANGED Viewed

@@ -1,6 +1,6 @@
 {
   "name": "@internetarchive/donation-form",
-  "version": "0.5.26-a1",
+  "version": "0.6.1-alpha.1",
   "description": "The Internet Archive Donation Form",
   "license": "AGPL-3.0-only",
   "main": "dist/index.js",

package/src/modals/upsell-modal-content.ts CHANGED Viewed

@@ -35,7 +35,7 @@ export class UpsellModalContent extends LitElement {
       <h3>Thank you for donating!</h3>
       <button @click=${this.noThanksSelected} class="cta-button" id="no-button">Continue</button>
       <p class="or_separator"><span>or</span></p>
-      <h3>Consider donating monthly</h3>
+      <h3>Join our Monthly Giving Circle</h3>
       <p class="appeal">Monthly support helps us reliably plan for the future.</p>
       <div class="monthly-amount">
         <h1>Enter your monthly amount</h1>

package/src/payment-flow-handlers/donation-flow-modal-manager.ts CHANGED Viewed

@@ -398,7 +398,7 @@ export class DonationFlowModalManager implements DonationFlowModalManagerInterfa
   static getDefaultUpsellAmount(oneTimeAmount: number): number {
     let amount = 5;
-    if (oneTimeAmount <= 10) amount = 5;
+    if (oneTimeAmount <= 10) amount = 7.71;
     else if (oneTimeAmount > 10 && oneTimeAmount <= 25) amount = 10;
     else if (oneTimeAmount > 25 && oneTimeAmount <= 100) amount = 25;
     else if (oneTimeAmount > 100) amount = 50;