@internetarchive/donation-form 0.5.11 → 0.5.12-a3

package/dist/src/modals/confirm-donation-modal-content.js

@@ -0,0 +1,169 @@
+import { __decorate } from "tslib";
+/* eslint-disable @typescript-eslint/no-empty-function */
+import { LitElement, html, css } from 'lit';
+import { customElement, property } from 'lit/decorators.js';
+import { DonationType } from '@internetarchive/donation-form-data-models';
+import currency from 'currency.js';
+/**
+ * This is the content that we show in the upsell modal.
+ *
+ * It has an amount input, "Yes" and "No Thanks" options and a switch to optionally
+ * show the PayPal upsell button.
+ *
+ * @export
+ * @class ConfirmDonationContent
+ * @extends {LitElement}
+ */
+let ConfirmDonationContent = class ConfirmDonationContent extends LitElement {
+    constructor() {
+        super(...arguments);
+        this.amount = 5;
+        this.currencyType = '$';
+        this.donationType = DonationType.OneTime;
+        this.confirmDonation = () => { };
+        this.cancelDonation = () => { };
+    }
+    get confirmationText() {
+        const amount = currency(this.amount, { symbol: this.currencySymbol }).format();
+        return html `
+    <p>You are about to make a <b>${this.donationType}</b> donation of <b>${amount} ${this.currencyType}</b> to the Internet Archive.</p>
+    `;
+    }
+    get confirmUpsellText() {
+        const amount = currency(this.amount, { symbol: this.currencySymbol }).format();
+        return html `<p>You are about to begin making <b>monthly</b> donations of <b>${amount} ${this.currencyType}</b> to the Internet Archive. (Your first recurring contribution will be next month.)</p>`;
+    }
+    confirm() {
+        this === null || this === void 0 ? void 0 : this.confirmDonation();
+    }
+    cancel() {
+        this === null || this === void 0 ? void 0 : this.cancelDonation();
+    }
+    get confirmCTA() {
+        return this.donationType === DonationType.Upsell ? 'Start monthly donation' : 'Complete donation';
+    }
+    /** @inheritdoc */
+    render() {
+        return html `
+      ${this.donationType === DonationType.Upsell ? this.confirmUpsellText : this.confirmationText}
+
+      <div class="cta-group">
+        <button id="confirm" @click=${() => this.confirm()}>${this.confirmCTA}</button>
+        <button id="cancel" @click=${() => this.cancel()}>Cancel</button>
+      </div>
+    `;
+    }
+    static get styles() {
+        const ctaButtonColor = css `var(--upsellCTAButtonColor, #194880)`;
+        const ctaButtonDisabledColor = css `var(--upsellCTAButtonDisabledColor, rgba(109,148,201,0.5))`;
+        return css `
+      :host {
+        display: block;
+      }
+
+      button {
+        outline: none;
+        cursor: pointer;
+      }
+
+      button#confirm {
+        font-size: 2rem;
+        display: block;
+        width: 100%;
+        margin-top: 0.5rem;
+        padding: 1rem 2rem;
+        background-color: ${ctaButtonColor};
+        color: #fff;
+        border-radius: 5px;
+        border: 0;
+        font-weight: bold;
+        line-height: normal;
+      }
+
+      button#cancel {
+        margin-top: 1rem;
+        border: 0;
+        text-decoration: underline;
+        background-color: transparent;
+      }
+
+      button:disabled {
+        background-color: ${ctaButtonDisabledColor};
+        cursor: not-allowed;
+      }
+    }`;
+    }
+    /**
+     * https://developer.paypal.com/docs/reports/reference/paypal-supported-currencies/
+     */
+    get currencySymbol() {
+        switch (this.currencyType) {
+            case 'AUD':
+                return 'AU$';
+            case 'BRL':
+                return 'R$';
+            case 'CAD':
+                return 'CA$';
+            case 'CHF':
+                return 'Fr';
+            case 'CNY':
+                return '¥';
+            case 'CZK':
+                return 'Kč';
+            case 'DKK':
+                return 'Kr';
+            case 'EUR':
+                return '€';
+            case 'GBP':
+                return '£';
+            case 'HKD':
+                return 'HK$';
+            case 'HUF':
+                return 'Ft';
+            case 'ILS':
+                return '₪';
+            case 'JPY':
+                return '¥';
+            case 'MXN':
+                return 'MX$';
+            case 'MYR':
+                return 'RM';
+            case 'NOK':
+                return 'kr';
+            case 'PLN':
+                return 'zł';
+            case 'RUB':
+                return '₽';
+            case 'SEK':
+                return 'kr';
+            case 'SGD':
+                return 'S$';
+            case 'THB':
+                return '฿';
+            case 'TYD':
+                return 'NT$';
+            default:
+                return '$'; // $ as default USD, NZD
+        }
+    }
+};
+__decorate([
+    property({ type: Number })
+], ConfirmDonationContent.prototype, "amount", void 0);
+__decorate([
+    property({ type: String })
+], ConfirmDonationContent.prototype, "currencyType", void 0);
+__decorate([
+    property({ type: String })
+], ConfirmDonationContent.prototype, "donationType", void 0);
+__decorate([
+    property({ type: Function })
+], ConfirmDonationContent.prototype, "confirmDonation", void 0);
+__decorate([
+    property({ type: Function })
+], ConfirmDonationContent.prototype, "cancelDonation", void 0);
+ConfirmDonationContent = __decorate([
+    customElement('confirm-donation-modal')
+], ConfirmDonationContent);
+export { ConfirmDonationContent };
+//# sourceMappingURL=confirm-donation-modal-content.js.map

package/dist/src/modals/confirm-donation-modal-content.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"confirm-donation-modal-content.js","sourceRoot":"","sources":["../../../src/modals/confirm-donation-modal-content.ts"],"names":[],"mappings":"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","sourcesContent":["/* eslint-disable @typescript-eslint/no-empty-function */\nimport { LitElement, html, TemplateResult, css, CSSResultGroup, nothing } from 'lit';\nimport { customElement, property } from 'lit/decorators.js';\nimport { DonationType } from '@internetarchive/donation-form-data-models';\nimport currency from 'currency.js';\n\n/**\n * This is the content that we show in the upsell modal.\n *\n * It has an amount input, \"Yes\" and \"No Thanks\" options and a switch to optionally\n * show the PayPal upsell button.\n *\n * @export\n * @class ConfirmDonationContent\n * @extends {LitElement}\n */\n@customElement('confirm-donation-modal')\nexport class ConfirmDonationContent extends LitElement {\n  @property({ type: Number }) amount = 5;\n\n  @property({ type: String }) currencyType = '$';\n\n  @property({ type: String }) donationType: DonationType = DonationType.OneTime;\n\n  @property({ type: Function }) confirmDonation: Function = (): void => {};\n\n  @property({ type: Function }) cancelDonation: Function= (): void => {};\n\n  get confirmationText(): TemplateResult {\n    const amount = currency(this.amount, { symbol: this.currencySymbol }).format();\n    return html`\n    <p>You are about to make a <b>${this.donationType}</b> donation of <b>${amount} ${this.currencyType}</b> to the Internet Archive.</p>\n    `;\n  }\n\n  get confirmUpsellText(): TemplateResult {\n    const amount = currency(this.amount, { symbol: this.currencySymbol }).format();\n    return html`<p>You are about to begin making <b>monthly</b> donations of <b>${amount} ${this.currencyType}</b> to the Internet Archive. (Your first recurring contribution will be next month.)</p>`;\n  }\n\n  confirm(): void {\n    this?.confirmDonation();\n  }\n\n  cancel(): void {\n    this?.cancelDonation();\n  }\n\n  get confirmCTA(): string {\n    return this.donationType === DonationType.Upsell ? 'Start monthly donation' : 'Complete donation';\n  }\n\n  /** @inheritdoc */\n  render(): TemplateResult {\n    return html`\n      ${this.donationType === DonationType.Upsell ? this.confirmUpsellText : this.confirmationText}\n\n      <div class=\"cta-group\">\n        <button id=\"confirm\" @click=${(): void => this.confirm()}>${this.confirmCTA}</button>\n        <button id=\"cancel\" @click=${(): void => this.cancel()}>Cancel</button>\n      </div>\n    `;\n  }\n\n  static get styles(): CSSResultGroup {\n    const ctaButtonColor = css`var(--upsellCTAButtonColor, #194880)`;\n    const ctaButtonDisabledColor = css`var(--upsellCTAButtonDisabledColor, rgba(109,148,201,0.5))`;\n\n    return css`\n      :host {\n        display: block;\n      }\n\n      button {\n        outline: none;\n        cursor: pointer;\n      }\n\n      button#confirm {\n        font-size: 2rem;\n        display: block;\n        width: 100%;\n        margin-top: 0.5rem;\n        padding: 1rem 2rem;\n        background-color: ${ctaButtonColor};\n        color: #fff;\n        border-radius: 5px;\n        border: 0;\n        font-weight: bold;\n        line-height: normal;\n      }\n\n      button#cancel {\n        margin-top: 1rem;\n        border: 0;\n        text-decoration: underline;\n        background-color: transparent;\n      }\n\n      button:disabled {\n        background-color: ${ctaButtonDisabledColor};\n        cursor: not-allowed;\n      }\n    }`;\n  }\n\n  /**\n   * https://developer.paypal.com/docs/reports/reference/paypal-supported-currencies/\n   */\n   get currencySymbol(): string {\n    switch(this.currencyType) {\n      case 'AUD':\n        return 'AU$';\n      case 'BRL':\n        return 'R$';\n      case 'CAD':\n        return 'CA$';\n      case 'CHF':\n        return 'Fr';\n      case 'CNY':\n        return '¥';\n      case 'CZK':\n        return 'Kč';\n      case 'DKK':\n        return 'Kr';\n      case 'EUR':\n        return '€';\n      case 'GBP':\n        return '£';\n      case 'HKD':\n        return 'HK$';\n      case 'HUF':\n        return 'Ft';\n      case 'ILS':\n        return '₪';\n      case 'JPY':\n        return '¥';\n      case 'MXN':\n        return 'MX$';\n      case 'MYR':\n        return 'RM';\n      case 'NOK':\n        return 'kr';\n      case 'PLN':\n        return 'zł';\n      case 'RUB':\n        return '₽';\n      case 'SEK':\n        return 'kr';\n      case 'SGD':\n        return 'S$';\n      case 'THB':\n        return '฿';\n      case 'TYD':\n        return 'NT$';\n      default:\n        return '$'; // $ as default USD, NZD\n    }\n  }\n}\n"]}

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

@@ -1,7 +1,8 @@
 import { ModalManagerInterface } from '@internetarchive/modal-manager';
 import { UpsellModalCTAMode } from '../modals/upsell-modal-content';
+import '../modals/confirm-donation-modal-content';
 import { BraintreeManagerInterface } from '../braintree-manager/braintree-interfaces';
-import { SuccessResponse, DonationPaymentInfo, PaymentProvider, BillingInfo, CustomerInfo, DonationResponse } from '@internetarchive/donation-form-data-models';
+import { SuccessResponse, DonationPaymentInfo, DonationType, PaymentProvider, BillingInfo, CustomerInfo, DonationResponse } from '@internetarchive/donation-form-data-models';
 import '../modals/error-modal-content';
 /**
  * The DonationFlowModalManager is responsible for most of the high-level modal flows.
@@ -15,6 +16,13 @@ import '../modals/error-modal-content';
  * @interface DonationFlowModalManagerInterface
  */
 export interface DonationFlowModalManagerInterface {
+    showConfirmationStepModal(options: {
+        amount: number;
+        donationType: DonationType;
+        currencyType: string;
+        confirmDonationCB: Function;
+        cancelDonationCB: Function;
+    }): Promise<void>;
     /**
      * Close the modal
      *
@@ -133,6 +141,13 @@ export declare class DonationFlowModalManager implements DonationFlowModalManage
         message: string;
         userClosedModalCallback?: () => void;
     }): void;
+    showConfirmationStepModal(options: {
+        amount: number;
+        donationType: DonationType;
+        currencyType: string;
+        confirmDonationCB: Function;
+        cancelDonationCB: Function;
+    }): Promise<void>;
     /** @inheritdoc */
     showUpsellModal(options: {
         oneTimeAmount: number;

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

@@ -2,6 +2,7 @@ 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;
@@ -70,6 +71,35 @@ export class DonationFlowModalManager {
       `,
         });
     }
+    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;

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';\nimport { ModalConfig, ModalManagerInterface } from '@internetarchive/modal-manager';\nimport { UpsellModalCTAMode } from '../modals/upsell-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';\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  /**\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  constructor(options: {\n    braintreeManager: BraintreeManagerInterface;\n    modalManager: ModalManagerInterface;\n  }) {\n    this.modalManager = options.modalManager;\n    this.braintreeManager = options.braintreeManager;\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    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  /** @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    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"]}
+{"version":3,"file":"donation-flow-modal-manager.js","sourceRoot":"","sources":["../../../src/payment-flow-handlers/donation-flow-modal-manager.ts"],"names":[],"mappings":";AAAA,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;AAEvC,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;IAKnC,YAAY,OAGX;QACC,IAAI,CAAC,YAAY,GAAG,OAAO,CAAC,YAAY,CAAC;QACzC,IAAI,CAAC,gBAAgB,GAAG,OAAO,CAAC,gBAAgB,CAAC;IACnD,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;;OAEV;SACF,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;;OAEV;SACF,CAAC,CAAC;QACH,IAAI,CAAC,YAAY,CAAC,SAAS,CAAC;YAC1B,MAAM,EAAE,WAAW;SACpB,CAAC,CAAC;QACH,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;;OAEV;YACD,QAAQ,EAAE,IAAI,CAAA;;OAEb;YACD,OAAO,EAAE,IAAI,CAAA;UACT,OAAO,aAAP,OAAO,uBAAP,OAAO,CAAE,OAAO;OACnB;SACF,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,GAAG;QAC/B,CAAC,CAAC;QACF,MAAM,cAAc,GAAG,GAAS,EAAE;YAChC,OAAO,aAAP,OAAO,uBAAP,OAAO,CAAE,gBAAgB,GAAG;QAC9B,CAAC,CAAC;QACF,MAAM,UAAU,GAAG,OAAO,CAAC,YAAY,KAAK,YAAY,CAAC,MAAM;YAC7D,CAAC,CAAC,0BAA0B;YAC5B,CAAC,CAAC,mBAAmB,CAAC;QAExB,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;;OAEV;YACD,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;QAChC,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,CAAC,CAAC;aAC/B,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":["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';\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  constructor(options: {\n    braintreeManager: BraintreeManagerInterface;\n    modalManager: ModalManagerInterface;\n  }) {\n    this.modalManager = options.modalManager;\n    this.braintreeManager = options.braintreeManager;\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    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    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"]}

package/dist/src/payment-flow-handlers/handlers/paypal-flow-handler.d.ts

@@ -37,6 +37,7 @@ export declare class PayPalFlowHandler implements PayPalFlowHandlerInterface, Pa
     on<E extends keyof PayPalFlowHandlerEvents>(event: E, callback: PayPalFlowHandlerEvents[E]): Unsubscribe;
     payPalPaymentStarted(dataSource: PayPalButtonDataSourceInterface, options: object): Promise<void>;
     payPalPaymentAuthorized(dataSource: PayPalButtonDataSourceInterface, payload: paypal.TokenizePayload): Promise<void>;
+    payPalPaymentConfirmed(dataSource: PayPalButtonDataSourceInterface, payload: paypal.TokenizePayload): Promise<void>;
     payPalPaymentCancelled(dataSource: PayPalButtonDataSourceInterface, data: object): Promise<void>;
     payPalPaymentError(dataSource: PayPalButtonDataSourceInterface, error: string): Promise<void>;
     renderPayPalButton(donationInfo: DonationPaymentInfo): Promise<void>;

package/dist/src/payment-flow-handlers/handlers/paypal-flow-handler.js

@@ -48,10 +48,34 @@ export class PayPalFlowHandler {
     // eslint-disable-next-line @typescript-eslint/no-unused-vars
     options) {
         return __awaiter(this, void 0, void 0, function* () {
+            console.log('payPalPaymentStarted *******', { dataSource, options });
             this.emitter.emit('payPalPaymentStarted', dataSource, options);
         });
     }
     payPalPaymentAuthorized(dataSource, payload) {
+        return __awaiter(this, void 0, void 0, function* () {
+            // we got dataSource & payload
+            // we need to send it to `payPalPaymentConfirmed`
+            // after patron confirms the payment
+            console.log('payPalPaymentAuthorized *******', { dataSource, payload });
+            const { donationType, total } = dataSource.donationInfo;
+            this.donationFlowModalManager.showConfirmationStepModal({
+                donationType,
+                amount: total,
+                currencyType: 'USD',
+                confirmDonationCB: () => {
+                    this.payPalPaymentConfirmed(dataSource, payload);
+                },
+                cancelDonationCB: () => {
+                    this.donationFlowModalManager.closeModal();
+                    this.payPalPaymentCancelled(dataSource, {});
+                }
+            });
+            // cancel payment on modal X
+            // cancel payment on cancel
+        });
+    }
+    payPalPaymentConfirmed(dataSource, payload) {
         return __awaiter(this, void 0, void 0, function* () {
             this.donationFlowModalManager.showProcessingModal();
             const donationType = dataSource.donationInfo.donationType;

package/dist/src/payment-flow-handlers/handlers/paypal-flow-handler.js.map

@@ -1 +1 @@
-{"version":3,"file":"paypal-flow-handler.js","sourceRoot":"","sources":["../../../../src/payment-flow-handlers/handlers/paypal-flow-handler.ts"],"names":[],"mappings":"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","sourcesContent":["import { createNanoEvents, Emitter, Unsubscribe } from 'nanoevents';\n\nimport {\n  PayPalButtonDataSourceInterface,\n  PayPalButtonDataSourceDelegate,\n} from '../../braintree-manager/payment-providers/paypal/paypal-button-datasource';\nimport {\n  DonationResponse,\n  DonationType,\n  DonationPaymentInfo,\n  SuccessResponse,\n  CustomerInfo,\n  BillingInfo,\n  PaymentProvider,\n  ErrorResponse,\n} from '@internetarchive/donation-form-data-models';\nimport { BraintreeManagerInterface } from '../../braintree-manager/braintree-interfaces';\n\nimport { UpsellModalCTAMode } from '../../modals/upsell-modal-content';\nimport {\n  DonationFlowModalManagerInterface,\n  DonationFlowModalManager,\n} from '../donation-flow-modal-manager';\n\nexport interface PayPalFlowHandlerInterface {\n  updateDonationInfo(donationInfo: DonationPaymentInfo): void;\n  updateUpsellDonationInfo(donationInfo: DonationPaymentInfo): void;\n  renderPayPalButton(donationInfo: DonationPaymentInfo): Promise<void>;\n  on<E extends keyof PayPalFlowHandlerEvents>(\n    event: E,\n    callback: PayPalFlowHandlerEvents[E],\n  ): Unsubscribe;\n}\n\n/**\n * This is a class to combine the data from the one-time purchase to the upsell\n *\n * @class UpsellDataSourceContainer\n */\nclass UpsellDataSourceContainer {\n  upsellButtonDataSource: PayPalButtonDataSourceInterface;\n  oneTimePayload: paypal.TokenizePayload;\n  oneTimeSuccessResponse: SuccessResponse;\n\n  constructor(options: {\n    upsellButtonDataSource: PayPalButtonDataSourceInterface;\n    oneTimePayload: paypal.TokenizePayload;\n    oneTimeSuccessResponse: SuccessResponse;\n  }) {\n    this.upsellButtonDataSource = options.upsellButtonDataSource;\n    this.oneTimePayload = options.oneTimePayload;\n    this.oneTimeSuccessResponse = options.oneTimeSuccessResponse;\n  }\n}\n\nexport interface PayPalFlowHandlerEvents {\n  payPalPaymentStarted: (dataSource: PayPalButtonDataSourceInterface, options: object) => void;\n  payPalPaymentCancelled: (dataSource: PayPalButtonDataSourceInterface, data: object) => void;\n  payPalPaymentError: (dataSource: PayPalButtonDataSourceInterface, error: string) => void;\n}\n\n/**\n * This class manages the user-flow for PayPal.\n *\n * @export\n * @class PayPalFlowHandler\n * @implements {PayPalFlowHandlerInterface}\n * @implements {PayPalButtonDataSourceDelegate}\n */\nexport class PayPalFlowHandler\n  implements PayPalFlowHandlerInterface, PayPalButtonDataSourceDelegate {\n  private upsellButtonDataSourceContainer?: UpsellDataSourceContainer;\n\n  private buttonDataSource?: PayPalButtonDataSourceInterface;\n\n  private donationFlowModalManager: DonationFlowModalManagerInterface;\n\n  private braintreeManager: BraintreeManagerInterface;\n\n  private emitter: Emitter<PayPalFlowHandlerEvents> = createNanoEvents<PayPalFlowHandlerEvents>();\n\n  updateDonationInfo(donationInfo: DonationPaymentInfo): void {\n    if (this.buttonDataSource) {\n      this.buttonDataSource.donationInfo = donationInfo;\n    }\n  }\n\n  updateUpsellDonationInfo(donationInfo: DonationPaymentInfo): void {\n    if (this.upsellButtonDataSourceContainer) {\n      this.upsellButtonDataSourceContainer.upsellButtonDataSource.donationInfo = donationInfo;\n    }\n  }\n\n  constructor(options: {\n    braintreeManager: BraintreeManagerInterface;\n    donationFlowModalManager: DonationFlowModalManagerInterface;\n  }) {\n    this.braintreeManager = options.braintreeManager;\n    this.donationFlowModalManager = options.donationFlowModalManager;\n  }\n\n  on<E extends keyof PayPalFlowHandlerEvents>(\n    event: E,\n    callback: PayPalFlowHandlerEvents[E],\n  ): Unsubscribe {\n    return this.emitter.on(event, callback);\n  }\n\n  async payPalPaymentStarted(\n    // eslint-disable-next-line @typescript-eslint/no-unused-vars\n    dataSource: PayPalButtonDataSourceInterface,\n    // eslint-disable-next-line @typescript-eslint/no-unused-vars\n    options: object,\n  ): Promise<void> {\n    this.emitter.emit('payPalPaymentStarted', dataSource, options);\n  }\n\n  async payPalPaymentAuthorized(\n    dataSource: PayPalButtonDataSourceInterface,\n    payload: paypal.TokenizePayload,\n  ): Promise<void> {\n    this.donationFlowModalManager.showProcessingModal();\n\n    const donationType = dataSource.donationInfo.donationType;\n\n    const details = payload?.details;\n\n    const customerInfo = new CustomerInfo({\n      email: details?.email,\n      firstName: details?.firstName,\n      lastName: details?.lastName,\n    });\n\n    const shippingAddress = details.shippingAddress;\n\n    const billingInfo = new BillingInfo({\n      streetAddress: shippingAddress?.line1,\n      extendedAddress: shippingAddress?.line2,\n      locality: shippingAddress?.city,\n      region: shippingAddress?.state,\n      postalCode: shippingAddress?.postalCode,\n      countryCodeAlpha2: shippingAddress?.countryCode,\n    });\n\n    const oneTimeTransaction = this.upsellButtonDataSourceContainer\n      ? this.upsellButtonDataSourceContainer.oneTimeSuccessResponse.transaction_id\n      : undefined;\n\n    const response: DonationResponse = await this.braintreeManager.submitDonation({\n      nonce: payload.nonce,\n      paymentProvider: PaymentProvider.PayPal,\n      donationInfo: dataSource.donationInfo,\n      customerInfo: customerInfo,\n      billingInfo: billingInfo,\n      upsellOnetimeTransactionId: oneTimeTransaction,\n    });\n\n    if (!response.success) {\n      const error = response.value as ErrorResponse;\n      this.donationFlowModalManager.showErrorModal({\n        message: error.message,\n      });\n      return;\n    }\n\n    const successResponse = response.value as SuccessResponse;\n\n    switch (donationType) {\n      case DonationType.OneTime:\n        this.showUpsellModal(payload, successResponse);\n        break;\n      case DonationType.Monthly:\n        // show thank you, redirect\n        this.donationFlowModalManager.showThankYouModal({ successResponse });\n        break;\n      case DonationType.Upsell:\n        if (this.upsellButtonDataSourceContainer) {\n          this.donationFlowModalManager.showThankYouModal({\n            successResponse: this.upsellButtonDataSourceContainer.oneTimeSuccessResponse,\n            upsellSuccessResponse: successResponse,\n          });\n        } else {\n          // we're in the upsell flow, but no upsell data source container.. this should not happen\n          this.donationFlowModalManager.showErrorModal({\n            message: 'Error setting up monthly donation',\n          });\n        }\n        break;\n    }\n  }\n\n  async payPalPaymentCancelled(\n    // eslint-disable-next-line @typescript-eslint/no-unused-vars\n    dataSource: PayPalButtonDataSourceInterface,\n    // eslint-disable-next-line @typescript-eslint/no-unused-vars\n    data: object,\n  ): Promise<void> {\n    this.emitter.emit('payPalPaymentCancelled', dataSource, data);\n  }\n\n  async payPalPaymentError(\n    dataSource: PayPalButtonDataSourceInterface,\n    error: string,\n  ): Promise<void> {\n    this.emitter.emit('payPalPaymentError', dataSource, error);\n    console.error(\n      'PaymentSector:payPalPaymentError error:',\n      dataSource,\n      dataSource.donationInfo,\n      error,\n    );\n  }\n\n  async renderPayPalButton(donationInfo: DonationPaymentInfo): Promise<void> {\n    const handler = await this.braintreeManager?.paymentProviders.paypalHandler.get();\n\n    this.buttonDataSource = await handler?.renderPayPalButton({\n      selector: '#paypal-button',\n      style: {\n        color: 'blue' as paypal.ButtonColorOption, // I'm not sure why I can't access the enum directly here.. I get a UMD error\n        label: 'paypal' as paypal.ButtonLabelOption,\n        shape: 'rect' as paypal.ButtonShapeOption,\n        size: 'medium' as paypal.ButtonSizeOption,\n        tagline: false,\n      },\n      donationInfo: donationInfo,\n    });\n\n    if (this.buttonDataSource) {\n      this.buttonDataSource.delegate = this;\n    }\n  }\n\n  private async showUpsellModal(\n    oneTimePayload: paypal.TokenizePayload,\n    oneTimeSuccessResponse: SuccessResponse,\n  ): Promise<void> {\n    this.donationFlowModalManager.showUpsellModal({\n      oneTimeAmount: oneTimeSuccessResponse.amount,\n      amountChanged: this.upsellAmountChanged.bind(this),\n      noSelected: () => {\n        this.donationFlowModalManager.showThankYouModal({\n          successResponse: oneTimeSuccessResponse,\n        });\n      },\n      ctaMode: UpsellModalCTAMode.PayPalUpsellSlot,\n      userClosedModalCallback: () => {\n        this.donationFlowModalManager.showThankYouModal({\n          successResponse: oneTimeSuccessResponse,\n        });\n      },\n    });\n\n    const amount = DonationFlowModalManager.getDefaultUpsellAmount(oneTimeSuccessResponse.amount);\n\n    const upsellDonationInfo = new DonationPaymentInfo({\n      amount: amount,\n      donationType: DonationType.Upsell,\n      coverFees: false,\n    });\n\n    if (!this.upsellButtonDataSourceContainer) {\n      this.renderUpsellPayPalButton({\n        donationInfo: upsellDonationInfo,\n        oneTimePayload,\n        oneTimeSuccessResponse,\n      });\n    }\n  }\n\n  private upsellAmountChanged(amount: number): void {\n    if (this.upsellButtonDataSourceContainer) {\n      this.upsellButtonDataSourceContainer.upsellButtonDataSource.donationInfo.amount = amount;\n    }\n  }\n\n  private async renderUpsellPayPalButton(options: {\n    donationInfo: DonationPaymentInfo;\n    oneTimePayload: paypal.TokenizePayload;\n    oneTimeSuccessResponse: SuccessResponse;\n  }): Promise<void> {\n    const handler = await this.braintreeManager?.paymentProviders.paypalHandler.get();\n\n    const upsellButtonDataSource = await handler?.renderPayPalButton({\n      selector: '#paypal-upsell-button',\n      style: {\n        color: 'blue' as paypal.ButtonColorOption,\n        label: 'paypal' as paypal.ButtonLabelOption,\n        shape: 'rect' as paypal.ButtonShapeOption,\n        size: 'responsive' as paypal.ButtonSizeOption,\n        tagline: false,\n      },\n      donationInfo: options.donationInfo,\n    });\n\n    if (upsellButtonDataSource) {\n      upsellButtonDataSource.delegate = this;\n      this.upsellButtonDataSourceContainer = new UpsellDataSourceContainer({\n        upsellButtonDataSource: upsellButtonDataSource,\n        oneTimePayload: options.oneTimePayload,\n        oneTimeSuccessResponse: options.oneTimeSuccessResponse,\n      });\n    } else {\n      console.error('error rendering paypal upsell button');\n    }\n  }\n}\n"]}
+{"version":3,"file":"paypal-flow-handler.js","sourceRoot":"","sources":["../../../../src/payment-flow-handlers/handlers/paypal-flow-handler.ts"],"names":[],"mappings":"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","sourcesContent":["import { createNanoEvents, Emitter, Unsubscribe } from 'nanoevents';\n\nimport {\n  PayPalButtonDataSourceInterface,\n  PayPalButtonDataSourceDelegate,\n} from '../../braintree-manager/payment-providers/paypal/paypal-button-datasource';\nimport {\n  DonationResponse,\n  DonationType,\n  DonationPaymentInfo,\n  SuccessResponse,\n  CustomerInfo,\n  BillingInfo,\n  PaymentProvider,\n  ErrorResponse,\n} from '@internetarchive/donation-form-data-models';\nimport { BraintreeManagerInterface } from '../../braintree-manager/braintree-interfaces';\n\nimport { UpsellModalCTAMode } from '../../modals/upsell-modal-content';\nimport {\n  DonationFlowModalManagerInterface,\n  DonationFlowModalManager,\n} from '../donation-flow-modal-manager';\n\nexport interface PayPalFlowHandlerInterface {\n  updateDonationInfo(donationInfo: DonationPaymentInfo): void;\n  updateUpsellDonationInfo(donationInfo: DonationPaymentInfo): void;\n  renderPayPalButton(donationInfo: DonationPaymentInfo): Promise<void>;\n  on<E extends keyof PayPalFlowHandlerEvents>(\n    event: E,\n    callback: PayPalFlowHandlerEvents[E],\n  ): Unsubscribe;\n}\n\n/**\n * This is a class to combine the data from the one-time purchase to the upsell\n *\n * @class UpsellDataSourceContainer\n */\nclass UpsellDataSourceContainer {\n  upsellButtonDataSource: PayPalButtonDataSourceInterface;\n  oneTimePayload: paypal.TokenizePayload;\n  oneTimeSuccessResponse: SuccessResponse;\n\n  constructor(options: {\n    upsellButtonDataSource: PayPalButtonDataSourceInterface;\n    oneTimePayload: paypal.TokenizePayload;\n    oneTimeSuccessResponse: SuccessResponse;\n  }) {\n    this.upsellButtonDataSource = options.upsellButtonDataSource;\n    this.oneTimePayload = options.oneTimePayload;\n    this.oneTimeSuccessResponse = options.oneTimeSuccessResponse;\n  }\n}\n\nexport interface PayPalFlowHandlerEvents {\n  payPalPaymentStarted: (dataSource: PayPalButtonDataSourceInterface, options: object) => void;\n  payPalPaymentCancelled: (dataSource: PayPalButtonDataSourceInterface, data: object) => void;\n  payPalPaymentError: (dataSource: PayPalButtonDataSourceInterface, error: string) => void;\n}\n\n/**\n * This class manages the user-flow for PayPal.\n *\n * @export\n * @class PayPalFlowHandler\n * @implements {PayPalFlowHandlerInterface}\n * @implements {PayPalButtonDataSourceDelegate}\n */\nexport class PayPalFlowHandler\n  implements PayPalFlowHandlerInterface, PayPalButtonDataSourceDelegate {\n  private upsellButtonDataSourceContainer?: UpsellDataSourceContainer;\n\n  private buttonDataSource?: PayPalButtonDataSourceInterface;\n\n  private donationFlowModalManager: DonationFlowModalManagerInterface;\n\n  private braintreeManager: BraintreeManagerInterface;\n\n  private emitter: Emitter<PayPalFlowHandlerEvents> = createNanoEvents<PayPalFlowHandlerEvents>();\n\n  updateDonationInfo(donationInfo: DonationPaymentInfo): void {\n    if (this.buttonDataSource) {\n      this.buttonDataSource.donationInfo = donationInfo;\n    }\n  }\n\n  updateUpsellDonationInfo(donationInfo: DonationPaymentInfo): void {\n    if (this.upsellButtonDataSourceContainer) {\n      this.upsellButtonDataSourceContainer.upsellButtonDataSource.donationInfo = donationInfo;\n    }\n  }\n\n  constructor(options: {\n    braintreeManager: BraintreeManagerInterface;\n    donationFlowModalManager: DonationFlowModalManagerInterface;\n  }) {\n    this.braintreeManager = options.braintreeManager;\n    this.donationFlowModalManager = options.donationFlowModalManager;\n  }\n\n  on<E extends keyof PayPalFlowHandlerEvents>(\n    event: E,\n    callback: PayPalFlowHandlerEvents[E],\n  ): Unsubscribe {\n    return this.emitter.on(event, callback);\n  }\n\n  async payPalPaymentStarted(\n    // eslint-disable-next-line @typescript-eslint/no-unused-vars\n    dataSource: PayPalButtonDataSourceInterface,\n    // eslint-disable-next-line @typescript-eslint/no-unused-vars\n    options: object,\n  ): Promise<void> {\n    console.log('payPalPaymentStarted *******', { dataSource, options });\n    this.emitter.emit('payPalPaymentStarted', dataSource, options);\n  }\n\n  async payPalPaymentAuthorized(dataSource: PayPalButtonDataSourceInterface,\n    payload: paypal.TokenizePayload\n    ): Promise<void> {\n\n      // we got dataSource & payload\n      // we need to send it to `payPalPaymentConfirmed`\n      // after patron confirms the payment\n    console.log('payPalPaymentAuthorized *******', { dataSource, payload });\n\n    const { donationType, total } = dataSource.donationInfo;\n    this.donationFlowModalManager.showConfirmationStepModal({\n      donationType,\n      amount: total,\n      currencyType: 'USD', // defaults to USD for now\n      confirmDonationCB: () => {\n        this.payPalPaymentConfirmed(dataSource, payload);\n      },\n      cancelDonationCB: () => {\n        this.donationFlowModalManager.closeModal();\n        this.payPalPaymentCancelled(dataSource, {});\n      }\n    });\n\n    // cancel payment on modal X\n    // cancel payment on cancel\n    \n  }\n\n  async payPalPaymentConfirmed(\n    dataSource: PayPalButtonDataSourceInterface,\n    payload: paypal.TokenizePayload,\n  ): Promise<void> {\n    this.donationFlowModalManager.showProcessingModal();\n\n    const donationType = dataSource.donationInfo.donationType;\n\n    const details = payload?.details;\n\n    const customerInfo = new CustomerInfo({\n      email: details?.email,\n      firstName: details?.firstName,\n      lastName: details?.lastName,\n    });\n\n    const shippingAddress = details.shippingAddress;\n\n    const billingInfo = new BillingInfo({\n      streetAddress: shippingAddress?.line1,\n      extendedAddress: shippingAddress?.line2,\n      locality: shippingAddress?.city,\n      region: shippingAddress?.state,\n      postalCode: shippingAddress?.postalCode,\n      countryCodeAlpha2: shippingAddress?.countryCode,\n    });\n\n    const oneTimeTransaction = this.upsellButtonDataSourceContainer\n      ? this.upsellButtonDataSourceContainer.oneTimeSuccessResponse.transaction_id\n      : undefined;\n\n    const response: DonationResponse = await this.braintreeManager.submitDonation({\n      nonce: payload.nonce,\n      paymentProvider: PaymentProvider.PayPal,\n      donationInfo: dataSource.donationInfo,\n      customerInfo: customerInfo,\n      billingInfo: billingInfo,\n      upsellOnetimeTransactionId: oneTimeTransaction,\n    });\n\n    if (!response.success) {\n      const error = response.value as ErrorResponse;\n      this.donationFlowModalManager.showErrorModal({\n        message: error.message,\n      });\n      return;\n    }\n\n    const successResponse = response.value as SuccessResponse;\n\n    switch (donationType) {\n      case DonationType.OneTime:\n        this.showUpsellModal(payload, successResponse);\n        break;\n      case DonationType.Monthly:\n        // show thank you, redirect\n        this.donationFlowModalManager.showThankYouModal({ successResponse });\n        break;\n      case DonationType.Upsell:\n        if (this.upsellButtonDataSourceContainer) {\n          this.donationFlowModalManager.showThankYouModal({\n            successResponse: this.upsellButtonDataSourceContainer.oneTimeSuccessResponse,\n            upsellSuccessResponse: successResponse,\n          });\n        } else {\n          // we're in the upsell flow, but no upsell data source container.. this should not happen\n          this.donationFlowModalManager.showErrorModal({\n            message: 'Error setting up monthly donation',\n          });\n        }\n        break;\n    }\n  }\n\n  async payPalPaymentCancelled(\n    // eslint-disable-next-line @typescript-eslint/no-unused-vars\n    dataSource: PayPalButtonDataSourceInterface,\n    // eslint-disable-next-line @typescript-eslint/no-unused-vars\n    data: object,\n  ): Promise<void> {\n    this.emitter.emit('payPalPaymentCancelled', dataSource, data);\n  }\n\n  async payPalPaymentError(\n    dataSource: PayPalButtonDataSourceInterface,\n    error: string,\n  ): Promise<void> {\n    this.emitter.emit('payPalPaymentError', dataSource, error);\n    console.error(\n      'PaymentSector:payPalPaymentError error:',\n      dataSource,\n      dataSource.donationInfo,\n      error,\n    );\n  }\n\n  async renderPayPalButton(donationInfo: DonationPaymentInfo): Promise<void> {\n    const handler = await this.braintreeManager?.paymentProviders.paypalHandler.get();\n\n    this.buttonDataSource = await handler?.renderPayPalButton({\n      selector: '#paypal-button',\n      style: {\n        color: 'blue' as paypal.ButtonColorOption, // I'm not sure why I can't access the enum directly here.. I get a UMD error\n        label: 'paypal' as paypal.ButtonLabelOption,\n        shape: 'rect' as paypal.ButtonShapeOption,\n        size: 'medium' as paypal.ButtonSizeOption,\n        tagline: false,\n      },\n      donationInfo: donationInfo,\n    });\n\n    if (this.buttonDataSource) {\n      this.buttonDataSource.delegate = this;\n    }\n  }\n\n  private async showUpsellModal(\n    oneTimePayload: paypal.TokenizePayload,\n    oneTimeSuccessResponse: SuccessResponse,\n  ): Promise<void> {\n    this.donationFlowModalManager.showUpsellModal({\n      oneTimeAmount: oneTimeSuccessResponse.amount,\n      amountChanged: this.upsellAmountChanged.bind(this),\n      noSelected: () => {\n        this.donationFlowModalManager.showThankYouModal({\n          successResponse: oneTimeSuccessResponse,\n        });\n      },\n      ctaMode: UpsellModalCTAMode.PayPalUpsellSlot,\n      userClosedModalCallback: () => {\n        this.donationFlowModalManager.showThankYouModal({\n          successResponse: oneTimeSuccessResponse,\n        });\n      },\n    });\n\n    const amount = DonationFlowModalManager.getDefaultUpsellAmount(oneTimeSuccessResponse.amount);\n\n    const upsellDonationInfo = new DonationPaymentInfo({\n      amount: amount,\n      donationType: DonationType.Upsell,\n      coverFees: false,\n    });\n\n    if (!this.upsellButtonDataSourceContainer) {\n      this.renderUpsellPayPalButton({\n        donationInfo: upsellDonationInfo,\n        oneTimePayload,\n        oneTimeSuccessResponse,\n      });\n    }\n  }\n\n  private upsellAmountChanged(amount: number): void {\n    if (this.upsellButtonDataSourceContainer) {\n      this.upsellButtonDataSourceContainer.upsellButtonDataSource.donationInfo.amount = amount;\n    }\n  }\n\n  private async renderUpsellPayPalButton(options: {\n    donationInfo: DonationPaymentInfo;\n    oneTimePayload: paypal.TokenizePayload;\n    oneTimeSuccessResponse: SuccessResponse;\n  }): Promise<void> {\n    const handler = await this.braintreeManager?.paymentProviders.paypalHandler.get();\n\n    const upsellButtonDataSource = await handler?.renderPayPalButton({\n      selector: '#paypal-upsell-button',\n      style: {\n        color: 'blue' as paypal.ButtonColorOption,\n        label: 'paypal' as paypal.ButtonLabelOption,\n        shape: 'rect' as paypal.ButtonShapeOption,\n        size: 'responsive' as paypal.ButtonSizeOption,\n        tagline: false,\n      },\n      donationInfo: options.donationInfo,\n    });\n\n    if (upsellButtonDataSource) {\n      upsellButtonDataSource.delegate = this;\n      this.upsellButtonDataSourceContainer = new UpsellDataSourceContainer({\n        upsellButtonDataSource: upsellButtonDataSource,\n        oneTimePayload: options.oneTimePayload,\n        oneTimeSuccessResponse: options.oneTimeSuccessResponse,\n      });\n    } else {\n      console.error('error rendering paypal upsell button');\n    }\n  }\n}\n"]}

package/dist/src/payment-flow-handlers/payment-flow-handlers.d.ts

@@ -7,6 +7,7 @@ import { ApplePayFlowHandlerInterface } from './handlers/applepay-flow-handler';
 import { VenmoFlowHandlerInterface } from './handlers/venmo-flow-handler';
 import { GooglePayFlowHandlerInterface } from './handlers/googlepay-flow-handler';
 import { UpsellModalCTAMode } from '../modals/upsell-modal-content';
+import { DonationType } from '@internetarchive/donation-form-data-models';
 export interface PaymentFlowHandlersInterface {
     startup(): Promise<void>;
     /**
@@ -30,6 +31,13 @@ export interface PaymentFlowHandlersInterface {
         amountChanged?: (amount: number) => void;
         userClosedModalCallback?: () => void;
     }): Promise<void>;
+    showConfirmationStepModal(options: {
+        amount: number;
+        donationType: DonationType;
+        currencyType: string;
+        confirmDonationCB: Function;
+        cancelDonationCB: Function;
+    }): Promise<void>;
     creditCardHandler: CreditCardFlowHandlerInterface | undefined;
     paypalHandler: PayPalFlowHandlerInterface | undefined;
     applePayHandler: ApplePayFlowHandlerInterface | undefined;
@@ -66,6 +74,14 @@ export declare class PaymentFlowHandlers implements PaymentFlowHandlersInterface
         amountChanged?: (amount: number) => void;
         userClosedModalCallback?: () => void;
     }): Promise<void>;
+    /** @inheritdoc */
+    showConfirmationStepModal(options: {
+        amount: number;
+        donationType: DonationType;
+        currencyType: string;
+        confirmDonationCB: Function;
+        cancelDonationCB: Function;
+    }): Promise<void>;
     get creditCardHandler(): CreditCardFlowHandlerInterface | undefined;
     get paypalHandler(): PayPalFlowHandlerInterface | undefined;
     get applePayHandler(): ApplePayFlowHandlerInterface | undefined;

package/dist/src/payment-flow-handlers/payment-flow-handlers.js

@@ -47,6 +47,10 @@ export class PaymentFlowHandlers {
             return this.donationFlowModalManager.showUpsellModal(options);
         });
     }
+    /** @inheritdoc */
+    showConfirmationStepModal(options) {
+        return this.donationFlowModalManager.showConfirmationStepModal(options);
+    }
     get creditCardHandler() {
         if (this.creditCardHandlerCache) {
             return this.creditCardHandlerCache;

package/dist/src/payment-flow-handlers/payment-flow-handlers.js.map

@@ -1 +1 @@
-{"version":3,"file":"payment-flow-handlers.js","sourceRoot":"","sources":["../../../src/payment-flow-handlers/payment-flow-handlers.ts"],"names":[],"mappings":";AAEA,OAAO,EAEL,qBAAqB,GACtB,MAAM,oCAAoC,CAAC;AAC5C,OAAO,EAA8B,iBAAiB,EAAE,MAAM,gCAAgC,CAAC;AAG/F,OAAO,EAEL,mBAAmB,GACpB,MAAM,kCAAkC,CAAC;AAC1C,OAAO,EAA6B,gBAAgB,EAAE,MAAM,+BAA+B,CAAC;AAC5F,OAAO,EAEL,wBAAwB,GACzB,MAAM,+BAA+B,CAAC;AACvC,OAAO,EAEL,oBAAoB,GACrB,MAAM,mCAAmC,CAAC;AAkC3C;;;;;;;;;;;;;;;;;;GAkBG;AACH,MAAM,OAAO,mBAAmB;IA0F9B,YAAY,OAIX;QACC,IAAI,CAAC,gBAAgB,GAAG,OAAO,CAAC,gBAAgB,CAAC;QACjD,IAAI,CAAC,YAAY,GAAG,OAAO,CAAC,YAAY,CAAC;QACzC,IAAI,CAAC,gBAAgB,GAAG,OAAO,CAAC,gBAAgB,CAAC;QAEjD,IAAI,CAAC,wBAAwB,GAAG,IAAI,wBAAwB,CAAC;YAC3D,gBAAgB,EAAE,IAAI,CAAC,gBAAgB;YACvC,YAAY,EAAE,IAAI,CAAC,YAAY;SAChC,CAAC,CAAC;IACL,CAAC;IAtGK,OAAO;;;YACX,MAAA,IAAI,CAAC,YAAY,0CAAE,OAAO,GAAG;YAC7B,MAAA,IAAI,CAAC,iBAAiB,0CAAE,OAAO,GAAG;;KACnC;IAED,kBAAkB;IACZ,eAAe,CAAC,OAOrB;;YACC,OAAO,IAAI,CAAC,wBAAwB,CAAC,eAAe,CAAC,OAAO,CAAC,CAAC;QAChE,CAAC;KAAA;IAED,IAAI,iBAAiB;QACnB,IAAI,IAAI,CAAC,sBAAsB,EAAE;YAC/B,OAAO,IAAI,CAAC,sBAAsB,CAAC;SACpC;QAED,IAAI,CAAC,sBAAsB,GAAG,IAAI,qBAAqB,CAAC;YACtD,gBAAgB,EAAE,IAAI,CAAC,gBAAgB;YACvC,wBAAwB,EAAE,IAAI,CAAC,wBAAwB;YACvD,gBAAgB,EAAE,IAAI,CAAC,gBAAgB;SACxC,CAAC,CAAC;QAEH,OAAO,IAAI,CAAC,sBAAsB,CAAC;IACrC,CAAC;IAED,IAAI,aAAa;QACf,IAAI,IAAI,CAAC,kBAAkB,EAAE;YAC3B,OAAO,IAAI,CAAC,kBAAkB,CAAC;SAChC;QAED,IAAI,CAAC,kBAAkB,GAAG,IAAI,iBAAiB,CAAC;YAC9C,gBAAgB,EAAE,IAAI,CAAC,gBAAgB;YACvC,wBAAwB,EAAE,IAAI,CAAC,wBAAwB;SACxD,CAAC,CAAC;QAEH,OAAO,IAAI,CAAC,kBAAkB,CAAC;IACjC,CAAC;IAED,IAAI,eAAe;QACjB,IAAI,IAAI,CAAC,oBAAoB,EAAE;YAC7B,OAAO,IAAI,CAAC,oBAAoB,CAAC;SAClC;QAED,IAAI,CAAC,oBAAoB,GAAG,IAAI,mBAAmB,CAAC;YAClD,gBAAgB,EAAE,IAAI,CAAC,gBAAgB;YACvC,wBAAwB,EAAE,IAAI,CAAC,wBAAwB;SACxD,CAAC,CAAC;QAEH,OAAO,IAAI,CAAC,oBAAoB,CAAC;IACnC,CAAC;IAED,IAAI,YAAY;QACd,IAAI,IAAI,CAAC,iBAAiB,EAAE;YAC1B,OAAO,IAAI,CAAC,iBAAiB,CAAC;SAC/B;QAED,IAAI,CAAC,iBAAiB,GAAG,IAAI,gBAAgB,CAAC;YAC5C,gBAAgB,EAAE,IAAI,CAAC,gBAAgB;YACvC,wBAAwB,EAAE,IAAI,CAAC,wBAAwB;SACxD,CAAC,CAAC;QAEH,OAAO,IAAI,CAAC,iBAAiB,CAAC;IAChC,CAAC;IAED,IAAI,gBAAgB;QAClB,IAAI,IAAI,CAAC,qBAAqB,EAAE;YAC9B,OAAO,IAAI,CAAC,qBAAqB,CAAC;SACnC;QAED,IAAI,CAAC,qBAAqB,GAAG,IAAI,oBAAoB,CAAC;YACpD,gBAAgB,EAAE,IAAI,CAAC,gBAAgB;YACvC,wBAAwB,EAAE,IAAI,CAAC,wBAAwB;SACxD,CAAC,CAAC;QAEH,OAAO,IAAI,CAAC,qBAAqB,CAAC;IACpC,CAAC;CA2BF","sourcesContent":["import { ModalManagerInterface } from '@internetarchive/modal-manager';\n\nimport {\n  CreditCardFlowHandlerInterface,\n  CreditCardFlowHandler,\n} from './handlers/creditcard-flow-handler';\nimport { PayPalFlowHandlerInterface, PayPalFlowHandler } from './handlers/paypal-flow-handler';\nimport { BraintreeManagerInterface } from '../braintree-manager/braintree-interfaces';\nimport { RecaptchaManagerInterface } from '../recaptcha-manager/recaptcha-manager';\nimport {\n  ApplePayFlowHandlerInterface,\n  ApplePayFlowHandler,\n} from './handlers/applepay-flow-handler';\nimport { VenmoFlowHandlerInterface, VenmoFlowHandler } from './handlers/venmo-flow-handler';\nimport {\n  DonationFlowModalManagerInterface,\n  DonationFlowModalManager,\n} from './donation-flow-modal-manager';\nimport {\n  GooglePayFlowHandlerInterface,\n  GooglePayFlowHandler,\n} from './handlers/googlepay-flow-handler';\nimport { UpsellModalCTAMode } from '../modals/upsell-modal-content';\n\nexport interface PaymentFlowHandlersInterface {\n  startup(): Promise<void>;\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  creditCardHandler: CreditCardFlowHandlerInterface | undefined;\n  paypalHandler: PayPalFlowHandlerInterface | undefined;\n  applePayHandler: ApplePayFlowHandlerInterface | undefined;\n  venmoHandler: VenmoFlowHandlerInterface | undefined;\n  googlePayHandler: GooglePayFlowHandlerInterface | undefined;\n}\n\n/**\n * This class is a container for all of the individual flow handlers.\n *\n * Flow Handlers are responsible for handling the provider-specific interactions between\n * the UI and the Data.\n *\n * For instance, when the user clicks on the \"Donate\" button for credit cards, we\n * pull in contact info from the form, trigger the recaptcha, tokenize the form,\n * submit, show the upsell, complete. The Credit Card Flow Handler is responsible for\n * managing that series of steps.\n *\n * For PayPal, the user initiates the payment from the PayPal button and once they're\n * done, we show the modal. The PayPal Flow Handler is responsible for handling that\n * series of events.\n *\n * @export\n * @class PaymentFlowHandlers\n * @implements {PaymentFlowHandlersInterface}\n */\nexport class PaymentFlowHandlers implements PaymentFlowHandlersInterface {\n  async startup(): Promise<void> {\n    this.venmoHandler?.startup();\n    this.creditCardHandler?.startup();\n  }\n\n  /** @inheritdoc */\n  async 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    return this.donationFlowModalManager.showUpsellModal(options);\n  }\n\n  get creditCardHandler(): CreditCardFlowHandlerInterface | undefined {\n    if (this.creditCardHandlerCache) {\n      return this.creditCardHandlerCache;\n    }\n\n    this.creditCardHandlerCache = new CreditCardFlowHandler({\n      braintreeManager: this.braintreeManager,\n      donationFlowModalManager: this.donationFlowModalManager,\n      recaptchaManager: this.recaptchaManager,\n    });\n\n    return this.creditCardHandlerCache;\n  }\n\n  get paypalHandler(): PayPalFlowHandlerInterface | undefined {\n    if (this.paypalHandlerCache) {\n      return this.paypalHandlerCache;\n    }\n\n    this.paypalHandlerCache = new PayPalFlowHandler({\n      braintreeManager: this.braintreeManager,\n      donationFlowModalManager: this.donationFlowModalManager,\n    });\n\n    return this.paypalHandlerCache;\n  }\n\n  get applePayHandler(): ApplePayFlowHandlerInterface | undefined {\n    if (this.applePayHandlerCache) {\n      return this.applePayHandlerCache;\n    }\n\n    this.applePayHandlerCache = new ApplePayFlowHandler({\n      braintreeManager: this.braintreeManager,\n      donationFlowModalManager: this.donationFlowModalManager,\n    });\n\n    return this.applePayHandlerCache;\n  }\n\n  get venmoHandler(): VenmoFlowHandlerInterface | undefined {\n    if (this.venmoHandlerCache) {\n      return this.venmoHandlerCache;\n    }\n\n    this.venmoHandlerCache = new VenmoFlowHandler({\n      braintreeManager: this.braintreeManager,\n      donationFlowModalManager: this.donationFlowModalManager,\n    });\n\n    return this.venmoHandlerCache;\n  }\n\n  get googlePayHandler(): GooglePayFlowHandlerInterface | undefined {\n    if (this.googlePayHandlerCache) {\n      return this.googlePayHandlerCache;\n    }\n\n    this.googlePayHandlerCache = new GooglePayFlowHandler({\n      braintreeManager: this.braintreeManager,\n      donationFlowModalManager: this.donationFlowModalManager,\n    });\n\n    return this.googlePayHandlerCache;\n  }\n\n  private creditCardHandlerCache?: CreditCardFlowHandlerInterface;\n  private paypalHandlerCache?: PayPalFlowHandlerInterface;\n  private applePayHandlerCache?: ApplePayFlowHandlerInterface;\n  private venmoHandlerCache?: VenmoFlowHandlerInterface;\n  private googlePayHandlerCache?: GooglePayFlowHandlerInterface;\n\n  constructor(options: {\n    braintreeManager: BraintreeManagerInterface;\n    modalManager: ModalManagerInterface;\n    recaptchaManager: RecaptchaManagerInterface;\n  }) {\n    this.braintreeManager = options.braintreeManager;\n    this.modalManager = options.modalManager;\n    this.recaptchaManager = options.recaptchaManager;\n\n    this.donationFlowModalManager = new DonationFlowModalManager({\n      braintreeManager: this.braintreeManager,\n      modalManager: this.modalManager,\n    });\n  }\n\n  private braintreeManager: BraintreeManagerInterface;\n  private modalManager: ModalManagerInterface;\n  private recaptchaManager: RecaptchaManagerInterface;\n  private donationFlowModalManager: DonationFlowModalManagerInterface;\n}\n"]}
+{"version":3,"file":"payment-flow-handlers.js","sourceRoot":"","sources":["../../../src/payment-flow-handlers/payment-flow-handlers.ts"],"names":[],"mappings":"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","sourcesContent":["import { ModalManagerInterface } from '@internetarchive/modal-manager';\n\nimport {\n  CreditCardFlowHandlerInterface,\n  CreditCardFlowHandler,\n} from './handlers/creditcard-flow-handler';\nimport { PayPalFlowHandlerInterface, PayPalFlowHandler } from './handlers/paypal-flow-handler';\nimport { BraintreeManagerInterface } from '../braintree-manager/braintree-interfaces';\nimport { RecaptchaManagerInterface } from '../recaptcha-manager/recaptcha-manager';\nimport {\n  ApplePayFlowHandlerInterface,\n  ApplePayFlowHandler,\n} from './handlers/applepay-flow-handler';\nimport { VenmoFlowHandlerInterface, VenmoFlowHandler } from './handlers/venmo-flow-handler';\nimport {\n  DonationFlowModalManagerInterface,\n  DonationFlowModalManager,\n} from './donation-flow-modal-manager';\nimport {\n  GooglePayFlowHandlerInterface,\n  GooglePayFlowHandler,\n} from './handlers/googlepay-flow-handler';\nimport { UpsellModalCTAMode } from '../modals/upsell-modal-content';\nimport { DonationType } from '@internetarchive/donation-form-data-models';\n\nexport interface PaymentFlowHandlersInterface {\n  startup(): Promise<void>;\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  showConfirmationStepModal(options: {\n    amount: number;\n    donationType: DonationType;\n    currencyType: string;\n    confirmDonationCB: Function;\n    cancelDonationCB: Function;\n  }): Promise<void>;\n\n  creditCardHandler: CreditCardFlowHandlerInterface | undefined;\n  paypalHandler: PayPalFlowHandlerInterface | undefined;\n  applePayHandler: ApplePayFlowHandlerInterface | undefined;\n  venmoHandler: VenmoFlowHandlerInterface | undefined;\n  googlePayHandler: GooglePayFlowHandlerInterface | undefined;\n}\n\n/**\n * This class is a container for all of the individual flow handlers.\n *\n * Flow Handlers are responsible for handling the provider-specific interactions between\n * the UI and the Data.\n *\n * For instance, when the user clicks on the \"Donate\" button for credit cards, we\n * pull in contact info from the form, trigger the recaptcha, tokenize the form,\n * submit, show the upsell, complete. The Credit Card Flow Handler is responsible for\n * managing that series of steps.\n *\n * For PayPal, the user initiates the payment from the PayPal button and once they're\n * done, we show the modal. The PayPal Flow Handler is responsible for handling that\n * series of events.\n *\n * @export\n * @class PaymentFlowHandlers\n * @implements {PaymentFlowHandlersInterface}\n */\nexport class PaymentFlowHandlers implements PaymentFlowHandlersInterface {\n  async startup(): Promise<void> {\n    this.venmoHandler?.startup();\n    this.creditCardHandler?.startup();\n  }\n\n  /** @inheritdoc */\n  async 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    return this.donationFlowModalManager.showUpsellModal(options);\n  }\n\n    /** @inheritdoc */\n  showConfirmationStepModal(options: {\n    amount: number;\n    donationType: DonationType;\n    currencyType: string;\n    confirmDonationCB: Function;\n    cancelDonationCB: Function;\n  }): Promise<void> {\n    return this.donationFlowModalManager.showConfirmationStepModal(options);\n  }\n\n  get creditCardHandler(): CreditCardFlowHandlerInterface | undefined {\n    if (this.creditCardHandlerCache) {\n      return this.creditCardHandlerCache;\n    }\n\n    this.creditCardHandlerCache = new CreditCardFlowHandler({\n      braintreeManager: this.braintreeManager,\n      donationFlowModalManager: this.donationFlowModalManager,\n      recaptchaManager: this.recaptchaManager,\n    });\n\n    return this.creditCardHandlerCache;\n  }\n\n  get paypalHandler(): PayPalFlowHandlerInterface | undefined {\n    if (this.paypalHandlerCache) {\n      return this.paypalHandlerCache;\n    }\n\n    this.paypalHandlerCache = new PayPalFlowHandler({\n      braintreeManager: this.braintreeManager,\n      donationFlowModalManager: this.donationFlowModalManager,\n    });\n\n    return this.paypalHandlerCache;\n  }\n\n  get applePayHandler(): ApplePayFlowHandlerInterface | undefined {\n    if (this.applePayHandlerCache) {\n      return this.applePayHandlerCache;\n    }\n\n    this.applePayHandlerCache = new ApplePayFlowHandler({\n      braintreeManager: this.braintreeManager,\n      donationFlowModalManager: this.donationFlowModalManager,\n    });\n\n    return this.applePayHandlerCache;\n  }\n\n  get venmoHandler(): VenmoFlowHandlerInterface | undefined {\n    if (this.venmoHandlerCache) {\n      return this.venmoHandlerCache;\n    }\n\n    this.venmoHandlerCache = new VenmoFlowHandler({\n      braintreeManager: this.braintreeManager,\n      donationFlowModalManager: this.donationFlowModalManager,\n    });\n\n    return this.venmoHandlerCache;\n  }\n\n  get googlePayHandler(): GooglePayFlowHandlerInterface | undefined {\n    if (this.googlePayHandlerCache) {\n      return this.googlePayHandlerCache;\n    }\n\n    this.googlePayHandlerCache = new GooglePayFlowHandler({\n      braintreeManager: this.braintreeManager,\n      donationFlowModalManager: this.donationFlowModalManager,\n    });\n\n    return this.googlePayHandlerCache;\n  }\n\n  private creditCardHandlerCache?: CreditCardFlowHandlerInterface;\n  private paypalHandlerCache?: PayPalFlowHandlerInterface;\n  private applePayHandlerCache?: ApplePayFlowHandlerInterface;\n  private venmoHandlerCache?: VenmoFlowHandlerInterface;\n  private googlePayHandlerCache?: GooglePayFlowHandlerInterface;\n\n  constructor(options: {\n    braintreeManager: BraintreeManagerInterface;\n    modalManager: ModalManagerInterface;\n    recaptchaManager: RecaptchaManagerInterface;\n  }) {\n    this.braintreeManager = options.braintreeManager;\n    this.modalManager = options.modalManager;\n    this.recaptchaManager = options.recaptchaManager;\n\n    this.donationFlowModalManager = new DonationFlowModalManager({\n      braintreeManager: this.braintreeManager,\n      modalManager: this.modalManager,\n    });\n  }\n\n  private braintreeManager: BraintreeManagerInterface;\n  private modalManager: ModalManagerInterface;\n  private recaptchaManager: RecaptchaManagerInterface;\n  private donationFlowModalManager: DonationFlowModalManagerInterface;\n}\n"]}

package/dist/test/mocks/flow-handlers/mock-payment-flow-handlers.d.ts

@@ -5,6 +5,7 @@ import { MockApplePayFlowHandler } from './individual-handlers/mock-applepay-flo
 import { MockVenmoFlowHandler } from './individual-handlers/mock-venmo-flow-handler';
 import { MockGooglePayFlowHandler } from './individual-handlers/mock-googlepay-flow-handler';
 import { UpsellModalCTAMode } from '../../../src/modals/upsell-modal-content';
+import { DonationType } from '@internetarchive/donation-form-data-models';
 export declare class MockPaymentFlowHandlers implements PaymentFlowHandlersInterface {
     showUpsellModal(options: {
         oneTimeAmount: number;
@@ -14,6 +15,11 @@ export declare class MockPaymentFlowHandlers implements PaymentFlowHandlersInter
         amountChanged?: (amount: number) => void;
         userClosedModalCallback?: () => void;
     }): Promise<void>;
+    showConfirmationStepModal(options: {
+        amount: number;
+        donationType: DonationType;
+        currencyType: string;
+    }): Promise<void>;
     startupCalled: boolean;
     startup(): Promise<void>;
     creditCardHandler: MockCreditCardFlowHandler;

package/dist/test/mocks/flow-handlers/mock-payment-flow-handlers.js

@@ -16,6 +16,9 @@ export class MockPaymentFlowHandlers {
     showUpsellModal(options) {
         throw new Error('Method not implemented.');
     }
+    showConfirmationStepModal(options) {
+        throw new Error('Method not implemented.');
+    }
     startup() {
         var _a;
         return __awaiter(this, void 0, void 0, function* () {