@internetarchive/donation-form 0.5.18-alpha.1 → 0.5.19

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

@@ -1,253 +1,253 @@
-import { __awaiter } from "tslib";
-import { html } from 'lit';
-import { ModalConfig } from '@internetarchive/modal-manager';
-import { UpsellModalCTAMode } from '../modals/upsell-modal-content';
-import '../modals/confirm-donation-modal-content';
-import { DonationType, } from '@internetarchive/donation-form-data-models';
-import '../modals/error-modal-content';
-var ModalHeaderColor;
-(function (ModalHeaderColor) {
-    ModalHeaderColor["Blue"] = "#497fbf";
-    ModalHeaderColor["Green"] = "#55A183";
-    ModalHeaderColor["Red"] = "#691916";
-})(ModalHeaderColor || (ModalHeaderColor = {}));
-export class DonationFlowModalManager {
-    constructor(options) {
-        this.modalManager = options.modalManager;
-        this.braintreeManager = options.braintreeManager;
-        this.analytics = options.analytics;
-    }
-    /** @inheritdoc */
-    closeModal() {
-        this.modalManager.closeModal();
-    }
-    /** @inheritdoc */
-    showProcessingModal() {
-        const modalConfig = new ModalConfig({
-            headerColor: ModalHeaderColor.Blue,
-            showProcessingIndicator: true,
-            closeOnBackdropClick: false,
-            showCloseButton: false,
-            processingImageMode: 'processing',
-            title: html `
-        Processing...
-      `,
-        });
-        this.modalManager.showModal({ config: modalConfig });
-    }
-    /** @inheritdoc */
-    showThankYouModal(options) {
-        const modalConfig = new ModalConfig({
-            showProcessingIndicator: true,
-            processingImageMode: 'complete',
-            headerColor: ModalHeaderColor.Green,
-            title: html `
-        Thank You!
-      `,
-        });
-        this.modalManager.showModal({
-            config: modalConfig,
-        });
-        // post analytic
-        const selectedPayment = options.successResponse.paymentProvider.replace(/\s+/g, '');
-        let action = `Donated-${selectedPayment}`;
-        if (options.upsellSuccessResponse) {
-            action += `-upsell`;
-        }
-        const label = options.successResponse.donationType;
-        this.analytics.logDonationFlowEvent(action, label);
-        // post donation
-        this.braintreeManager.donationSuccessful(options);
-    }
-    /** @inheritdoc */
-    showErrorModal(options) {
-        const modalConfig = new ModalConfig({
-            headerColor: ModalHeaderColor.Red,
-            title: html `
-        Processing error
-      `,
-            headline: html `
-        There's been a problem completing your donation.
-      `,
-            message: html `
-        ${options === null || options === void 0 ? void 0 : options.message}
-      `,
-        });
-        this.modalManager.showModal({
-            config: modalConfig,
-            userClosedModalCallback: options === null || options === void 0 ? void 0 : options.userClosedModalCallback,
-            customModalContent: html `
-        <donation-form-error-modal-content></donation-form-error-modal-content>
-      `,
-        });
-    }
-    showConfirmationStepModal(options) {
-        const confirmDonation = () => {
-            options === null || options === void 0 ? void 0 : options.confirmDonationCB();
-        };
-        const cancelDonation = () => {
-            options === null || options === void 0 ? void 0 : options.cancelDonationCB();
-        };
-        const modalTitle = options.donationType === DonationType.Upsell
-            ? 'Confirm monthly donation'
-            : 'Complete donation';
-        const modalConfig = new ModalConfig({
-            closeOnBackdropClick: false,
-            headerColor: ModalHeaderColor.Green,
-            title: html `${modalTitle}`,
-            message: html `
-        <confirm-donation-modal
-          .amount="${options.amount}"
-          .currencyType="${options.currencyType}"
-          .donationType="${options.donationType}"
-          .confirmDonation=${confirmDonation}
-          .cancelDonation=${cancelDonation}
-        ></confirm-donation-modal>
-      `,
-        });
-        return this.modalManager.showModal({
-            config: modalConfig,
-            userClosedModalCallback: cancelDonation
-        });
-    }
-    /** @inheritdoc */
-    showUpsellModal(options) {
-        var _a;
-        const modalConfig = new ModalConfig({
-            headerColor: ModalHeaderColor.Green,
-            title: html `
-        Donation received
-      `,
-            processingImageMode: 'complete',
-            showProcessingIndicator: true,
-        });
-        const upsellAmount = DonationFlowModalManager.getDefaultUpsellAmount(options.oneTimeAmount);
-        if (options.amountChanged) {
-            options.amountChanged(upsellAmount);
-        }
-        const modalContent = html `
-      <upsell-modal-content
-        .amount=${upsellAmount}
-        .yesButtonMode=${(_a = options === null || options === void 0 ? void 0 : options.ctaMode) !== null && _a !== void 0 ? _a : UpsellModalCTAMode.YesButton}
-        @yesSelected=${(e) => (options === null || options === void 0 ? void 0 : options.yesSelected) ? options.yesSelected(e.detail.amount) : undefined}
-        @noThanksSelected=${options === null || options === void 0 ? void 0 : options.noSelected}
-        @amountChanged=${(e) => (options === null || options === void 0 ? void 0 : options.amountChanged) ? options.amountChanged(e.detail.amount) : undefined}
-      >
-        <slot name="paypal-upsell-button"></slot>
-      </upsell-modal-content>
-    `;
-        return this.modalManager.showModal({
-            config: modalConfig,
-            customModalContent: modalContent,
-            userClosedModalCallback: options === null || options === void 0 ? void 0 : options.userClosedModalCallback,
-        });
-    }
-    /** @inheritdoc */
-    startDonationSubmissionFlow(options) {
-        return __awaiter(this, void 0, void 0, function* () {
-            this.showProcessingModal();
-            try {
-                const response = yield this.braintreeManager.submitDonation(options);
-                if (response.success) {
-                    this.handleSuccessfulDonationResponse(options.donationInfo, response.value);
-                    return response;
-                }
-                else {
-                    const error = response.value;
-                    this.showErrorModal({
-                        message: error.message,
-                    });
-                    return response;
-                }
-            }
-            catch (error) {
-                this.showErrorModal({
-                    message: `${error}`,
-                });
-                console.error('error getting a response', error);
-                return undefined;
-            }
-        });
-    }
-    upsellModalYesSelected(oneTimeDonationResponse, amount) {
-        return __awaiter(this, void 0, void 0, function* () {
-            this.showProcessingModal();
-            try {
-                const response = yield this.braintreeManager.submitUpsellDonation({
-                    oneTimeDonationResponse: oneTimeDonationResponse,
-                    amount: amount,
-                });
-                if (response.success) {
-                    this.completeUpsell({
-                        successResponse: oneTimeDonationResponse,
-                        upsellSuccessResponse: response.value,
-                    });
-                }
-                else {
-                    const error = response.value;
-                    this.showErrorModal({
-                        message: error.message,
-                    });
-                }
-                return response;
-            }
-            catch (error) {
-                this.showErrorModal({
-                    message: `${error}`,
-                });
-                console.error('error getting a response', error);
-                return undefined;
-            }
-        });
-    }
-    completeUpsell(options) {
-        this.showThankYouModal(options);
-        // post analytic
-        const selectedPayment = options.successResponse.paymentProvider.replace(/\s+/g, '');
-        const action = `Donated-${selectedPayment}-upsell`;
-        const label = options.successResponse.donationType;
-        this.analytics.logDonationFlowEvent(action, label);
-        this.braintreeManager.donationSuccessful(options);
-    }
-    static getDefaultUpsellAmount(oneTimeAmount) {
-        let amount = 5;
-        if (oneTimeAmount <= 10)
-            amount = 5;
-        else if (oneTimeAmount > 10 && oneTimeAmount <= 25)
-            amount = 10;
-        else if (oneTimeAmount > 25 && oneTimeAmount <= 100)
-            amount = 25;
-        else if (oneTimeAmount > 100)
-            amount = 50;
-        return amount;
-    }
-    /** @inheritdoc */
-    handleSuccessfulDonationResponse(donationInfo, response) {
-        switch (donationInfo.donationType) {
-            case DonationType.OneTime:
-                this.showUpsellModal({
-                    oneTimeAmount: response.amount,
-                    yesSelected: (amount) => {
-                        this.upsellModalYesSelected(response, amount);
-                    },
-                    noSelected: () => {
-                        this.showThankYouModal({ successResponse: response });
-                    },
-                    userClosedModalCallback: () => {
-                        this.showThankYouModal({ successResponse: response });
-                    },
-                });
-                break;
-            case DonationType.Monthly:
-                this.showThankYouModal({ successResponse: response });
-                break;
-            // This case will never be reached, it is only here for completeness.
-            // The upsell case gets handled in `modalYesSelected()` below
-            case DonationType.Upsell:
-                break;
-            default:
-                break;
-        }
-    }
-}
+import { __awaiter } from "tslib";
+import { html } from 'lit';
+import { ModalConfig } from '@internetarchive/modal-manager';
+import { UpsellModalCTAMode } from '../modals/upsell-modal-content';
+import '../modals/confirm-donation-modal-content';
+import { DonationType, } from '@internetarchive/donation-form-data-models';
+import '../modals/error-modal-content';
+var ModalHeaderColor;
+(function (ModalHeaderColor) {
+    ModalHeaderColor["Blue"] = "#497fbf";
+    ModalHeaderColor["Green"] = "#55A183";
+    ModalHeaderColor["Red"] = "#691916";
+})(ModalHeaderColor || (ModalHeaderColor = {}));
+export class DonationFlowModalManager {
+    constructor(options) {
+        this.modalManager = options.modalManager;
+        this.braintreeManager = options.braintreeManager;
+        this.analytics = options.analytics;
+    }
+    /** @inheritdoc */
+    closeModal() {
+        this.modalManager.closeModal();
+    }
+    /** @inheritdoc */
+    showProcessingModal() {
+        const modalConfig = new ModalConfig({
+            headerColor: ModalHeaderColor.Blue,
+            showProcessingIndicator: true,
+            closeOnBackdropClick: false,
+            showCloseButton: false,
+            processingImageMode: 'processing',
+            title: html `
+        Processing...
+      `,
+        });
+        this.modalManager.showModal({ config: modalConfig });
+    }
+    /** @inheritdoc */
+    showThankYouModal(options) {
+        const modalConfig = new ModalConfig({
+            showProcessingIndicator: true,
+            processingImageMode: 'complete',
+            headerColor: ModalHeaderColor.Green,
+            title: html `
+        Thank You!
+      `,
+        });
+        this.modalManager.showModal({
+            config: modalConfig,
+        });
+        // post analytic
+        const selectedPayment = options.successResponse.paymentProvider.replace(/\s+/g, '');
+        let action = `Donated-${selectedPayment}`;
+        if (options.upsellSuccessResponse) {
+            action += `-upsell`;
+        }
+        const label = options.successResponse.donationType;
+        this.analytics.logDonationFlowEvent(action, label);
+        // post donation
+        this.braintreeManager.donationSuccessful(options);
+    }
+    /** @inheritdoc */
+    showErrorModal(options) {
+        const modalConfig = new ModalConfig({
+            headerColor: ModalHeaderColor.Red,
+            title: html `
+        Processing error
+      `,
+            headline: html `
+        There's been a problem completing your donation.
+      `,
+            message: html `
+        ${options === null || options === void 0 ? void 0 : options.message}
+      `,
+        });
+        this.modalManager.showModal({
+            config: modalConfig,
+            userClosedModalCallback: options === null || options === void 0 ? void 0 : options.userClosedModalCallback,
+            customModalContent: html `
+        <donation-form-error-modal-content></donation-form-error-modal-content>
+      `,
+        });
+    }
+    showConfirmationStepModal(options) {
+        const confirmDonation = () => {
+            options === null || options === void 0 ? void 0 : options.confirmDonationCB();
+        };
+        const cancelDonation = () => {
+            options === null || options === void 0 ? void 0 : options.cancelDonationCB();
+        };
+        const modalTitle = options.donationType === DonationType.Upsell
+            ? 'Confirm monthly donation'
+            : 'Complete donation';
+        const modalConfig = new ModalConfig({
+            closeOnBackdropClick: false,
+            headerColor: ModalHeaderColor.Green,
+            title: html `${modalTitle}`,
+            message: html `
+        <confirm-donation-modal
+          .amount="${options.amount}"
+          .currencyType="${options.currencyType}"
+          .donationType="${options.donationType}"
+          .confirmDonation=${confirmDonation}
+          .cancelDonation=${cancelDonation}
+        ></confirm-donation-modal>
+      `,
+        });
+        return this.modalManager.showModal({
+            config: modalConfig,
+            userClosedModalCallback: cancelDonation
+        });
+    }
+    /** @inheritdoc */
+    showUpsellModal(options) {
+        var _a;
+        const modalConfig = new ModalConfig({
+            headerColor: ModalHeaderColor.Green,
+            title: html `
+        Donation received
+      `,
+            processingImageMode: 'complete',
+            showProcessingIndicator: true,
+        });
+        const upsellAmount = DonationFlowModalManager.getDefaultUpsellAmount(options.oneTimeAmount);
+        if (options.amountChanged) {
+            options.amountChanged(upsellAmount);
+        }
+        const modalContent = html `
+      <upsell-modal-content
+        .amount=${upsellAmount}
+        .yesButtonMode=${(_a = options === null || options === void 0 ? void 0 : options.ctaMode) !== null && _a !== void 0 ? _a : UpsellModalCTAMode.YesButton}
+        @yesSelected=${(e) => (options === null || options === void 0 ? void 0 : options.yesSelected) ? options.yesSelected(e.detail.amount) : undefined}
+        @noThanksSelected=${options === null || options === void 0 ? void 0 : options.noSelected}
+        @amountChanged=${(e) => (options === null || options === void 0 ? void 0 : options.amountChanged) ? options.amountChanged(e.detail.amount) : undefined}
+      >
+        <slot name="paypal-upsell-button"></slot>
+      </upsell-modal-content>
+    `;
+        return this.modalManager.showModal({
+            config: modalConfig,
+            customModalContent: modalContent,
+            userClosedModalCallback: options === null || options === void 0 ? void 0 : options.userClosedModalCallback,
+        });
+    }
+    /** @inheritdoc */
+    startDonationSubmissionFlow(options) {
+        return __awaiter(this, void 0, void 0, function* () {
+            this.showProcessingModal();
+            try {
+                const response = yield this.braintreeManager.submitDonation(options);
+                if (response.success) {
+                    this.handleSuccessfulDonationResponse(options.donationInfo, response.value);
+                    return response;
+                }
+                else {
+                    const error = response.value;
+                    this.showErrorModal({
+                        message: error.message,
+                    });
+                    return response;
+                }
+            }
+            catch (error) {
+                this.showErrorModal({
+                    message: `${error}`,
+                });
+                console.error('error getting a response', error);
+                return undefined;
+            }
+        });
+    }
+    upsellModalYesSelected(oneTimeDonationResponse, amount) {
+        return __awaiter(this, void 0, void 0, function* () {
+            this.showProcessingModal();
+            try {
+                const response = yield this.braintreeManager.submitUpsellDonation({
+                    oneTimeDonationResponse: oneTimeDonationResponse,
+                    amount: amount,
+                });
+                if (response.success) {
+                    this.completeUpsell({
+                        successResponse: oneTimeDonationResponse,
+                        upsellSuccessResponse: response.value,
+                    });
+                }
+                else {
+                    const error = response.value;
+                    this.showErrorModal({
+                        message: error.message,
+                    });
+                }
+                return response;
+            }
+            catch (error) {
+                this.showErrorModal({
+                    message: `${error}`,
+                });
+                console.error('error getting a response', error);
+                return undefined;
+            }
+        });
+    }
+    completeUpsell(options) {
+        this.showThankYouModal(options);
+        // post analytic
+        const selectedPayment = options.successResponse.paymentProvider.replace(/\s+/g, '');
+        const action = `Donated-${selectedPayment}-upsell`;
+        const label = options.successResponse.donationType;
+        this.analytics.logDonationFlowEvent(action, label);
+        this.braintreeManager.donationSuccessful(options);
+    }
+    static getDefaultUpsellAmount(oneTimeAmount) {
+        let amount = 5;
+        if (oneTimeAmount <= 10)
+            amount = 5;
+        else if (oneTimeAmount > 10 && oneTimeAmount <= 25)
+            amount = 10;
+        else if (oneTimeAmount > 25 && oneTimeAmount <= 100)
+            amount = 25;
+        else if (oneTimeAmount > 100)
+            amount = 50;
+        return amount;
+    }
+    /** @inheritdoc */
+    handleSuccessfulDonationResponse(donationInfo, response) {
+        switch (donationInfo.donationType) {
+            case DonationType.OneTime:
+                this.showUpsellModal({
+                    oneTimeAmount: response.amount,
+                    yesSelected: (amount) => {
+                        this.upsellModalYesSelected(response, amount);
+                    },
+                    noSelected: () => {
+                        this.showThankYouModal({ successResponse: response });
+                    },
+                    userClosedModalCallback: () => {
+                        this.showThankYouModal({ successResponse: response });
+                    },
+                });
+                break;
+            case DonationType.Monthly:
+                this.showThankYouModal({ successResponse: response });
+                break;
+            // This case will never be reached, it is only here for completeness.
+            // The upsell case gets handled in `modalYesSelected()` below
+            case DonationType.Upsell:
+                break;
+            default:
+                break;
+        }
+    }
+}
 //# sourceMappingURL=donation-flow-modal-manager.js.map

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

@@ -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":["import { html } from 'lit';\r\nimport { ModalConfig, ModalManagerInterface } from '@internetarchive/modal-manager';\r\nimport { UpsellModalCTAMode } from '../modals/upsell-modal-content';\r\nimport '../modals/confirm-donation-modal-content';\r\nimport { BraintreeManagerInterface } from '../braintree-manager/braintree-interfaces';\r\nimport {\r\n  SuccessResponse,\r\n  ErrorResponse,\r\n  DonationPaymentInfo,\r\n  DonationType,\r\n  PaymentProvider,\r\n  BillingInfo,\r\n  CustomerInfo,\r\n  DonationResponse,\r\n} from '@internetarchive/donation-form-data-models';\r\nimport '../modals/error-modal-content';\r\nimport { DonationControllerEventLoggerInterface } from '../@types/analytics-handler';\r\n\r\nenum ModalHeaderColor {\r\n  Blue = '#497fbf',\r\n  Green = '#55A183',\r\n  Red = '#691916',\r\n}\r\n\r\n/**\r\n * The DonationFlowModalManager is responsible for most of the high-level modal flows.\r\n *\r\n * Each of the payment providers has slightly different interactions, ie the PayPal button,\r\n * ApplePay popup, Venmo launching the app, etc. The modal flow is the same for all of them\r\n * so this class gets called by the individual payment flow handlers to take the user\r\n * through the modal flow.\r\n *\r\n * @export\r\n * @interface DonationFlowModalManagerInterface\r\n */\r\nexport interface DonationFlowModalManagerInterface {\r\n  showConfirmationStepModal(options: {\r\n    amount: number;\r\n    donationType: DonationType;\r\n    currencyType: string;\r\n    confirmDonationCB: Function;\r\n    cancelDonationCB: Function;\r\n  }): Promise<void>;\r\n  /**\r\n   * Close the modal\r\n   *\r\n   * @memberof DonationFlowModalManagerInterface\r\n   */\r\n  closeModal(): void;\r\n\r\n  /**\r\n   * Show the processing modal\r\n   *\r\n   * @memberof DonationFlowModalManagerInterface\r\n   */\r\n  showProcessingModal(): void;\r\n\r\n  /**\r\n   * Show the Thank You modal\r\n   *\r\n   * @memberof DonationFlowModalManagerInterface\r\n   */\r\n  showThankYouModal(options: {\r\n    successResponse: SuccessResponse;\r\n    upsellSuccessResponse?: SuccessResponse;\r\n  }): void;\r\n\r\n  /**\r\n   * Show the Error modal\r\n   *\r\n   * @param {{\r\n   *     userClosedModalCallback?: () => void;\r\n   *   }} [options]\r\n   * @memberof DonationFlowModalManagerInterface\r\n   */\r\n  showErrorModal(options: { message: string; userClosedModalCallback?: () => void }): void;\r\n\r\n  /**\r\n   * Show the upsell modal\r\n   *\r\n   * @param {{\r\n   *     ctaMode?: UpsellModalCTAMode;\r\n   *     yesSelected?: (amount: number) => void;\r\n   *     noSelected?: () => void;\r\n   *     amountChanged?: (amount: number) => void;\r\n   *     userClosedModalCallback?: () => void;\r\n   *   }} [options]\r\n   * @returns {Promise<void>}\r\n   * @memberof DonationFlowModalManagerInterface\r\n   */\r\n  showUpsellModal(options: {\r\n    oneTimeAmount: number;\r\n    ctaMode?: UpsellModalCTAMode;\r\n    yesSelected?: (amount: number) => void;\r\n    noSelected?: () => void;\r\n    amountChanged?: (amount: number) => void;\r\n    userClosedModalCallback?: () => void;\r\n  }): Promise<void>;\r\n\r\n  /**\r\n   * Start the donation submission flow. This kicks off the \"main\" modal flow once the\r\n   * user authorizes the donation through their payment provider, which provides\r\n   * us the with the nonce used to complete the donation.\r\n   *\r\n   * @param {{\r\n   *     nonce: string;\r\n   *     paymentProvider: PaymentProvider;\r\n   *     donationInfo: DonationPaymentInfo;\r\n   *     billingInfo: BillingInfo;\r\n   *     customerInfo: CustomerInfo;\r\n   *     upsellOnetimeTransactionId?: string;\r\n   *     customerId?: string;\r\n   *     recaptchaToken?: string;\r\n   *     bin?: string; // first 6 digits of CC\r\n   *     binName?: string; // credit card bank name\r\n   *   }} options\r\n   * @returns {(Promise<DonationResponse | undefined>)}\r\n   * @memberof DonationFlowModalManagerInterface\r\n   */\r\n  startDonationSubmissionFlow(options: {\r\n    nonce: string;\r\n    paymentProvider: PaymentProvider;\r\n    donationInfo: DonationPaymentInfo;\r\n    billingInfo: BillingInfo;\r\n    customerInfo: CustomerInfo;\r\n    upsellOnetimeTransactionId?: string;\r\n    customerId?: string;\r\n    recaptchaToken?: string;\r\n    bin?: string; // first 6 digits of CC\r\n    binName?: string; // credit card bank name\r\n  }): Promise<DonationResponse | undefined>;\r\n\r\n  /**\r\n   * Handle a successful donation response. This encapsulates the logic for the type of\r\n   * donation that was made.\r\n   * ie. If it was a one-time donation, show the upsell, if it was monthly do not.\r\n   *\r\n   * @param {DonationPaymentInfo} donationInfo\r\n   * @param {SuccessResponse} response\r\n   * @memberof DonationFlowModalManagerInterface\r\n   */\r\n  handleSuccessfulDonationResponse(\r\n    donationInfo: DonationPaymentInfo,\r\n    response: SuccessResponse,\r\n  ): void;\r\n}\r\n\r\nexport class DonationFlowModalManager implements DonationFlowModalManagerInterface {\r\n  private braintreeManager: BraintreeManagerInterface;\r\n\r\n  private modalManager: ModalManagerInterface;\r\n\r\n  private analytics: DonationControllerEventLoggerInterface;\r\n\r\n  constructor(options: {\r\n    braintreeManager: BraintreeManagerInterface;\r\n    modalManager: ModalManagerInterface;\r\n    analytics: DonationControllerEventLoggerInterface;\r\n  }) {\r\n    this.modalManager = options.modalManager;\r\n    this.braintreeManager = options.braintreeManager;\r\n    this.analytics = options.analytics;\r\n  }\r\n\r\n  /** @inheritdoc */\r\n  closeModal(): void {\r\n    this.modalManager.closeModal();\r\n  }\r\n\r\n  /** @inheritdoc */\r\n  showProcessingModal(): void {\r\n    const modalConfig = new ModalConfig({\r\n      headerColor: ModalHeaderColor.Blue,\r\n      showProcessingIndicator: true,\r\n      closeOnBackdropClick: false,\r\n      showCloseButton: false,\r\n      processingImageMode: 'processing',\r\n      title: html`\r\n        Processing...\r\n      `,\r\n    });\r\n    this.modalManager.showModal({ config: modalConfig });\r\n  }\r\n\r\n  /** @inheritdoc */\r\n  showThankYouModal(options: {\r\n    successResponse: SuccessResponse;\r\n    upsellSuccessResponse?: SuccessResponse;\r\n  }): void {\r\n    const modalConfig = new ModalConfig({\r\n      showProcessingIndicator: true,\r\n      processingImageMode: 'complete',\r\n      headerColor: ModalHeaderColor.Green,\r\n      title: html`\r\n        Thank You!\r\n      `,\r\n    });\r\n    this.modalManager.showModal({\r\n      config: modalConfig,\r\n    });\r\n\r\n    // post analytic\r\n    const selectedPayment = options.successResponse.paymentProvider.replace(/\\s+/g, '');\r\n    let action = `Donated-${selectedPayment}`;\r\n    if (options.upsellSuccessResponse) {\r\n      action += `-upsell`;\r\n    }\r\n    const label = options.successResponse.donationType;\r\n    this.analytics.logDonationFlowEvent(action, label);\r\n\r\n    // post donation\r\n    this.braintreeManager.donationSuccessful(options);\r\n  }\r\n\r\n  /** @inheritdoc */\r\n  showErrorModal(options: { message: string; userClosedModalCallback?: () => void }): void {\r\n    const modalConfig = new ModalConfig({\r\n      headerColor: ModalHeaderColor.Red,\r\n      title: html`\r\n        Processing error\r\n      `,\r\n      headline: html`\r\n        There's been a problem completing your donation.\r\n      `,\r\n      message: html`\r\n        ${options?.message}\r\n      `,\r\n    });\r\n\r\n    this.modalManager.showModal({\r\n      config: modalConfig,\r\n      userClosedModalCallback: options?.userClosedModalCallback,\r\n      customModalContent: html`\r\n        <donation-form-error-modal-content></donation-form-error-modal-content>\r\n      `,\r\n    });\r\n  }\r\n\r\n  showConfirmationStepModal(options: {\r\n    amount: number;\r\n    donationType: DonationType;\r\n    currencyType: string;\r\n    confirmDonationCB: Function;\r\n    cancelDonationCB: Function;\r\n  }): Promise<void> {\r\n    const confirmDonation = (): void => {\r\n      options?.confirmDonationCB();\r\n    };\r\n    const cancelDonation = (): void => {\r\n      options?.cancelDonationCB();\r\n    };\r\n    const modalTitle = options.donationType === DonationType.Upsell\r\n      ? 'Confirm monthly donation'\r\n      : 'Complete donation';\r\n\r\n    const modalConfig = new ModalConfig({\r\n      closeOnBackdropClick: false,\r\n      headerColor: ModalHeaderColor.Green,\r\n      title: html`${modalTitle}`,\r\n      message: html`\r\n        <confirm-donation-modal\r\n          .amount=\"${options.amount}\"\r\n          .currencyType=\"${options.currencyType}\"\r\n          .donationType=\"${options.donationType}\"\r\n          .confirmDonation=${confirmDonation}\r\n          .cancelDonation=${cancelDonation}\r\n        ></confirm-donation-modal>\r\n      `,\r\n    });\r\n    return this.modalManager.showModal({\r\n      config: modalConfig,\r\n      userClosedModalCallback: cancelDonation\r\n    });\r\n  }\r\n\r\n  /** @inheritdoc */\r\n  showUpsellModal(options: {\r\n    oneTimeAmount: number;\r\n    yesSelected?: (amount: number) => void;\r\n    noSelected?: () => void;\r\n    amountChanged?: (amount: number) => void;\r\n    userClosedModalCallback?: () => void;\r\n    ctaMode?: UpsellModalCTAMode;\r\n  }): Promise<void> {\r\n    const modalConfig = new ModalConfig({\r\n      headerColor: ModalHeaderColor.Green,\r\n      title: html`\r\n        Donation received\r\n      `,\r\n      processingImageMode: 'complete',\r\n      showProcessingIndicator: true,\r\n    });\r\n\r\n    const upsellAmount = DonationFlowModalManager.getDefaultUpsellAmount(options.oneTimeAmount);\r\n    if (options.amountChanged) {\r\n      options.amountChanged(upsellAmount);\r\n    }\r\n\r\n    const modalContent = html`\r\n      <upsell-modal-content\r\n        .amount=${upsellAmount}\r\n        .yesButtonMode=${options?.ctaMode ?? UpsellModalCTAMode.YesButton}\r\n        @yesSelected=${(e: CustomEvent): void =>\r\n          options?.yesSelected ? options.yesSelected(e.detail.amount) : undefined}\r\n        @noThanksSelected=${options?.noSelected}\r\n        @amountChanged=${(e: CustomEvent): void =>\r\n          options?.amountChanged ? options.amountChanged(e.detail.amount) : undefined}\r\n      >\r\n        <slot name=\"paypal-upsell-button\"></slot>\r\n      </upsell-modal-content>\r\n    `;\r\n    return this.modalManager.showModal({\r\n      config: modalConfig,\r\n      customModalContent: modalContent,\r\n      userClosedModalCallback: options?.userClosedModalCallback,\r\n    });\r\n  }\r\n\r\n  /** @inheritdoc */\r\n  async startDonationSubmissionFlow(options: {\r\n    nonce: string;\r\n    paymentProvider: PaymentProvider;\r\n    donationInfo: DonationPaymentInfo;\r\n    billingInfo: BillingInfo;\r\n    customerInfo: CustomerInfo;\r\n    upsellOnetimeTransactionId?: string;\r\n    customerId?: string;\r\n    recaptchaToken?: string;\r\n    bin?: string; // first 6 digits of CC\r\n    binName?: string; // credit card bank name\r\n  }): Promise<DonationResponse | undefined> {\r\n    this.showProcessingModal();\r\n\r\n    try {\r\n      const response = await this.braintreeManager.submitDonation(options);\r\n\r\n      if (response.success) {\r\n        this.handleSuccessfulDonationResponse(\r\n          options.donationInfo,\r\n          response.value as SuccessResponse,\r\n        );\r\n        return response;\r\n      } else {\r\n        const error = response.value as ErrorResponse;\r\n        this.showErrorModal({\r\n          message: error.message,\r\n        });\r\n        return response;\r\n      }\r\n    } catch (error) {\r\n      this.showErrorModal({\r\n        message: `${error}`,\r\n      });\r\n      console.error('error getting a response', error);\r\n      return undefined;\r\n    }\r\n  }\r\n\r\n  private async upsellModalYesSelected(\r\n    oneTimeDonationResponse: SuccessResponse,\r\n    amount: number,\r\n  ): Promise<DonationResponse | undefined> {\r\n    this.showProcessingModal();\r\n\r\n    try {\r\n      const response = await this.braintreeManager.submitUpsellDonation({\r\n        oneTimeDonationResponse: oneTimeDonationResponse,\r\n        amount: amount,\r\n      });\r\n\r\n      if (response.success) {\r\n        this.completeUpsell({\r\n          successResponse: oneTimeDonationResponse,\r\n          upsellSuccessResponse: response.value as SuccessResponse,\r\n        });\r\n      } else {\r\n        const error = response.value as ErrorResponse;\r\n        this.showErrorModal({\r\n          message: error.message,\r\n        });\r\n      }\r\n\r\n      return response;\r\n    } catch (error) {\r\n      this.showErrorModal({\r\n        message: `${error}`,\r\n      });\r\n      console.error('error getting a response', error);\r\n      return undefined;\r\n    }\r\n  }\r\n\r\n  private completeUpsell(options: {\r\n    successResponse: SuccessResponse;\r\n    upsellSuccessResponse?: SuccessResponse;\r\n  }): void {\r\n    this.showThankYouModal(options);\r\n\r\n    // post analytic\r\n    const selectedPayment = options.successResponse.paymentProvider.replace(/\\s+/g, '');\r\n    const action = `Donated-${selectedPayment}-upsell`;\r\n    const label = options.successResponse.donationType;\r\n    this.analytics.logDonationFlowEvent(action, label);\r\n\r\n    this.braintreeManager.donationSuccessful(options);\r\n  }\r\n\r\n  static getDefaultUpsellAmount(oneTimeAmount: number): number {\r\n    let amount = 5;\r\n\r\n    if (oneTimeAmount <= 10) amount = 5;\r\n    else if (oneTimeAmount > 10 && oneTimeAmount <= 25) amount = 10;\r\n    else if (oneTimeAmount > 25 && oneTimeAmount <= 100) amount = 25;\r\n    else if (oneTimeAmount > 100) amount = 50;\r\n\r\n    return amount;\r\n  }\r\n\r\n  /** @inheritdoc */\r\n  handleSuccessfulDonationResponse(\r\n    donationInfo: DonationPaymentInfo,\r\n    response: SuccessResponse,\r\n  ): void {\r\n    switch (donationInfo.donationType) {\r\n      case DonationType.OneTime:\r\n        this.showUpsellModal({\r\n          oneTimeAmount: response.amount,\r\n          yesSelected: (amount: number) => {\r\n            this.upsellModalYesSelected(response, amount);\r\n          },\r\n          noSelected: () => {\r\n            this.showThankYouModal({ successResponse: response });\r\n          },\r\n          userClosedModalCallback: () => {\r\n            this.showThankYouModal({ successResponse: response });\r\n          },\r\n        });\r\n        break;\r\n      case DonationType.Monthly:\r\n        this.showThankYouModal({ successResponse: response });\r\n        break;\r\n      // This case will never be reached, it is only here for completeness.\r\n      // The upsell case gets handled in `modalYesSelected()` below\r\n      case DonationType.Upsell:\r\n        break;\r\n      default:\r\n        break;\r\n    }\r\n  }\r\n}\r\n"]}
+{"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`\n        Processing...\n      `,\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`\n        Thank You!\n      `,\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`\n        Processing error\n      `,\n      headline: html`\n        There's been a problem completing your donation.\n      `,\n      message: html`\n        ${options?.message}\n      `,\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 = 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`\n        Donation received\n      `,\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"]}