@internetarchive/donation-form 0.5.11-alpha.1 → 0.5.12-a1

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* () {

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

@@ -1 +1 @@
-{"version":3,"file":"mock-payment-flow-handlers.js","sourceRoot":"","sources":["../../../../test/mocks/flow-handlers/mock-payment-flow-handlers.ts"],"names":[],"mappings":";AAEA,OAAO,EAAE,yBAAyB,EAAE,MAAM,oDAAoD,CAAC;AAC/F,OAAO,EAAE,qBAAqB,EAAE,MAAM,gDAAgD,CAAC;AACvF,OAAO,EAAE,uBAAuB,EAAE,MAAM,kDAAkD,CAAC;AAC3F,OAAO,EAAE,oBAAoB,EAAE,MAAM,+CAA+C,CAAC;AACrF,OAAO,EAAE,wBAAwB,EAAE,MAAM,mDAAmD,CAAC;AAG7F,MAAM,OAAO,uBAAuB;IAApC;QAWE,kBAAa,GAAG,KAAK,CAAC;QAKtB,sBAAiB,GAA8B,IAAI,yBAAyB,EAAE,CAAC;QAC/E,kBAAa,GAA0B,IAAI,qBAAqB,EAAE,CAAC;QACnE,oBAAe,GAA4B,IAAI,uBAAuB,EAAE,CAAC;QACzE,iBAAY,GAAyB,IAAI,oBAAoB,EAAE,CAAC;QAChE,qBAAgB,GAA6B,IAAI,wBAAwB,EAAE,CAAC;IAC9E,CAAC;IApBC,eAAe,CAAC,OAOf;QACC,MAAM,IAAI,KAAK,CAAC,yBAAyB,CAAC,CAAC;IAC7C,CAAC;IAEK,OAAO;;;YACX,IAAI,CAAC,aAAa,GAAG,IAAI,CAAC;YAC1B,MAAA,IAAI,CAAC,YAAY,0CAAE,OAAO,GAAG;;KAC9B;CAMF","sourcesContent":["/* eslint-disable @typescript-eslint/no-unused-vars */\nimport { PaymentFlowHandlersInterface } from '../../../src/payment-flow-handlers/payment-flow-handlers';\nimport { MockCreditCardFlowHandler } from './individual-handlers/mock-creditcard-flow-handler';\nimport { MockPayPalFlowHandler } from './individual-handlers/mock-paypal-flow-handler';\nimport { MockApplePayFlowHandler } from './individual-handlers/mock-applepay-flow-handler';\nimport { MockVenmoFlowHandler } from './individual-handlers/mock-venmo-flow-handler';\nimport { MockGooglePayFlowHandler } from './individual-handlers/mock-googlepay-flow-handler';\nimport { UpsellModalCTAMode } from '../../../src/modals/upsell-modal-content';\n\nexport class MockPaymentFlowHandlers implements PaymentFlowHandlersInterface {\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    throw new Error('Method not implemented.');\n  }\n  startupCalled = false;\n  async startup(): Promise<void> {\n    this.startupCalled = true;\n    this.venmoHandler?.startup();\n  }\n  creditCardHandler: MockCreditCardFlowHandler = new MockCreditCardFlowHandler();\n  paypalHandler: MockPayPalFlowHandler = new MockPayPalFlowHandler();\n  applePayHandler: MockApplePayFlowHandler = new MockApplePayFlowHandler();\n  venmoHandler: MockVenmoFlowHandler = new MockVenmoFlowHandler();\n  googlePayHandler: MockGooglePayFlowHandler = new MockGooglePayFlowHandler();\n}\n"]}
+{"version":3,"file":"mock-payment-flow-handlers.js","sourceRoot":"","sources":["../../../../test/mocks/flow-handlers/mock-payment-flow-handlers.ts"],"names":[],"mappings":";AAEA,OAAO,EAAE,yBAAyB,EAAE,MAAM,oDAAoD,CAAC;AAC/F,OAAO,EAAE,qBAAqB,EAAE,MAAM,gDAAgD,CAAC;AACvF,OAAO,EAAE,uBAAuB,EAAE,MAAM,kDAAkD,CAAC;AAC3F,OAAO,EAAE,oBAAoB,EAAE,MAAM,+CAA+C,CAAC;AACrF,OAAO,EAAE,wBAAwB,EAAE,MAAM,mDAAmD,CAAC;AAI7F,MAAM,OAAO,uBAAuB;IAApC;QAkBE,kBAAa,GAAG,KAAK,CAAC;QAKtB,sBAAiB,GAA8B,IAAI,yBAAyB,EAAE,CAAC;QAC/E,kBAAa,GAA0B,IAAI,qBAAqB,EAAE,CAAC;QACnE,oBAAe,GAA4B,IAAI,uBAAuB,EAAE,CAAC;QACzE,iBAAY,GAAyB,IAAI,oBAAoB,EAAE,CAAC;QAChE,qBAAgB,GAA6B,IAAI,wBAAwB,EAAE,CAAC;IAC9E,CAAC;IA3BC,eAAe,CAAC,OAOf;QACC,MAAM,IAAI,KAAK,CAAC,yBAAyB,CAAC,CAAC;IAC7C,CAAC;IACD,yBAAyB,CAAC,OAIzB;QACC,MAAM,IAAI,KAAK,CAAC,yBAAyB,CAAC,CAAC;IAC7C,CAAC;IAEK,OAAO;;;YACX,IAAI,CAAC,aAAa,GAAG,IAAI,CAAC;YAC1B,MAAA,IAAI,CAAC,YAAY,0CAAE,OAAO,GAAG;;KAC9B;CAMF","sourcesContent":["/* eslint-disable @typescript-eslint/no-unused-vars */\nimport { PaymentFlowHandlersInterface } from '../../../src/payment-flow-handlers/payment-flow-handlers';\nimport { MockCreditCardFlowHandler } from './individual-handlers/mock-creditcard-flow-handler';\nimport { MockPayPalFlowHandler } from './individual-handlers/mock-paypal-flow-handler';\nimport { MockApplePayFlowHandler } from './individual-handlers/mock-applepay-flow-handler';\nimport { MockVenmoFlowHandler } from './individual-handlers/mock-venmo-flow-handler';\nimport { MockGooglePayFlowHandler } from './individual-handlers/mock-googlepay-flow-handler';\nimport { UpsellModalCTAMode } from '../../../src/modals/upsell-modal-content';\nimport { DonationType } from '@internetarchive/donation-form-data-models';\n\nexport class MockPaymentFlowHandlers implements PaymentFlowHandlersInterface {\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    throw new Error('Method not implemented.');\n  }\n  showConfirmationStepModal(options: {\n    amount: number;\n    donationType: DonationType;\n    currencyType: string;\n  }): Promise<void> {\n    throw new Error('Method not implemented.');\n  }\n  startupCalled = false;\n  async startup(): Promise<void> {\n    this.startupCalled = true;\n    this.venmoHandler?.startup();\n  }\n  creditCardHandler: MockCreditCardFlowHandler = new MockCreditCardFlowHandler();\n  paypalHandler: MockPayPalFlowHandler = new MockPayPalFlowHandler();\n  applePayHandler: MockApplePayFlowHandler = new MockApplePayFlowHandler();\n  venmoHandler: MockVenmoFlowHandler = new MockVenmoFlowHandler();\n  googlePayHandler: MockGooglePayFlowHandler = new MockGooglePayFlowHandler();\n}\n"]}

package/dist/test/mocks/payment-providers/individual-providers/mock-paypal-button-datasource-delegate.d.ts

@@ -22,6 +22,7 @@ export declare class MockPayPalButtonDataSourceDelegate implements PayPalButtonD
     };
     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>;
 }

package/dist/test/mocks/payment-providers/individual-providers/mock-paypal-button-datasource-delegate.js

@@ -28,6 +28,13 @@ export class MockPayPalButtonDataSourceDelegate {
             this.paymentAuthorizedResults.payload = payload;
         });
     }
+    payPalPaymentConfirmed(dataSource, payload) {
+        return __awaiter(this, void 0, void 0, function* () {
+            this.paymentAuthorizedResults.called = true;
+            this.paymentAuthorizedResults.datasource = dataSource;
+            this.paymentAuthorizedResults.payload = payload;
+        });
+    }
     payPalPaymentCancelled(dataSource, data) {
         return __awaiter(this, void 0, void 0, function* () {
             this.paymentCancelledResults.called = true;

package/dist/test/mocks/payment-providers/individual-providers/mock-paypal-button-datasource-delegate.js.map

@@ -1 +1 @@
-{"version":3,"file":"mock-paypal-button-datasource-delegate.js","sourceRoot":"","sources":["../../../../../test/mocks/payment-providers/individual-providers/mock-paypal-button-datasource-delegate.ts"],"names":[],"mappings":";AAKA,MAAM,OAAO,kCAAkC;IAA/C;QACE,0BAAqB,GAIjB;YACF,MAAM,EAAE,KAAK;SACd,CAAC;QAEF,6BAAwB,GAIpB;YACF,MAAM,EAAE,KAAK;SACd,CAAC;QAEF,4BAAuB,GAInB;YACF,MAAM,EAAE,KAAK;SACd,CAAC;QAEF,wBAAmB,GAIf;YACF,MAAM,EAAE,KAAK;SACd,CAAC;IAqCJ,CAAC;IAnCO,oBAAoB,CACxB,UAA2C,EAC3C,OAAe;;YAEf,IAAI,CAAC,qBAAqB,CAAC,MAAM,GAAG,IAAI,CAAC;YACzC,IAAI,CAAC,qBAAqB,CAAC,UAAU,GAAG,UAAU,CAAC;YACnD,IAAI,CAAC,qBAAqB,CAAC,OAAO,GAAG,OAAO,CAAC;QAC/C,CAAC;KAAA;IAEK,uBAAuB,CAC3B,UAA2C,EAC3C,OAA+B;;YAE/B,IAAI,CAAC,wBAAwB,CAAC,MAAM,GAAG,IAAI,CAAC;YAC5C,IAAI,CAAC,wBAAwB,CAAC,UAAU,GAAG,UAAU,CAAC;YACtD,IAAI,CAAC,wBAAwB,CAAC,OAAO,GAAG,OAAO,CAAC;QAClD,CAAC;KAAA;IAEK,sBAAsB,CAC1B,UAA2C,EAC3C,IAAY;;YAEZ,IAAI,CAAC,uBAAuB,CAAC,MAAM,GAAG,IAAI,CAAC;YAC3C,IAAI,CAAC,uBAAuB,CAAC,UAAU,GAAG,UAAU,CAAC;YACrD,IAAI,CAAC,uBAAuB,CAAC,IAAI,GAAG,IAAI,CAAC;QAC3C,CAAC;KAAA;IAEK,kBAAkB,CACtB,UAA2C,EAC3C,KAAa;;YAEb,IAAI,CAAC,mBAAmB,CAAC,MAAM,GAAG,IAAI,CAAC;YACvC,IAAI,CAAC,mBAAmB,CAAC,UAAU,GAAG,UAAU,CAAC;YACjD,IAAI,CAAC,mBAAmB,CAAC,KAAK,GAAG,KAAK,CAAC;QACzC,CAAC;KAAA;CACF","sourcesContent":["import {\n  PayPalButtonDataSourceDelegate,\n  PayPalButtonDataSourceInterface,\n} from '../../../../src/braintree-manager/payment-providers/paypal/paypal-button-datasource';\n\nexport class MockPayPalButtonDataSourceDelegate implements PayPalButtonDataSourceDelegate {\n  paymentStartedResults: {\n    called: boolean;\n    datasource?: PayPalButtonDataSourceInterface;\n    options?: object;\n  } = {\n    called: false,\n  };\n\n  paymentAuthorizedResults: {\n    called: boolean;\n    datasource?: PayPalButtonDataSourceInterface;\n    payload?: paypal.TokenizePayload;\n  } = {\n    called: false,\n  };\n\n  paymentCancelledResults: {\n    called: boolean;\n    datasource?: PayPalButtonDataSourceInterface;\n    data?: object;\n  } = {\n    called: false,\n  };\n\n  paymentErrorResults: {\n    called: boolean;\n    datasource?: PayPalButtonDataSourceInterface;\n    error?: string;\n  } = {\n    called: false,\n  };\n\n  async payPalPaymentStarted(\n    dataSource: PayPalButtonDataSourceInterface,\n    options: object,\n  ): Promise<void> {\n    this.paymentStartedResults.called = true;\n    this.paymentStartedResults.datasource = dataSource;\n    this.paymentStartedResults.options = options;\n  }\n\n  async payPalPaymentAuthorized(\n    dataSource: PayPalButtonDataSourceInterface,\n    payload: paypal.TokenizePayload,\n  ): Promise<void> {\n    this.paymentAuthorizedResults.called = true;\n    this.paymentAuthorizedResults.datasource = dataSource;\n    this.paymentAuthorizedResults.payload = payload;\n  }\n\n  async payPalPaymentCancelled(\n    dataSource: PayPalButtonDataSourceInterface,\n    data: object,\n  ): Promise<void> {\n    this.paymentCancelledResults.called = true;\n    this.paymentCancelledResults.datasource = dataSource;\n    this.paymentCancelledResults.data = data;\n  }\n\n  async payPalPaymentError(\n    dataSource: PayPalButtonDataSourceInterface,\n    error: string,\n  ): Promise<void> {\n    this.paymentErrorResults.called = true;\n    this.paymentErrorResults.datasource = dataSource;\n    this.paymentErrorResults.error = error;\n  }\n}\n"]}
+{"version":3,"file":"mock-paypal-button-datasource-delegate.js","sourceRoot":"","sources":["../../../../../test/mocks/payment-providers/individual-providers/mock-paypal-button-datasource-delegate.ts"],"names":[],"mappings":";AAKA,MAAM,OAAO,kCAAkC;IAA/C;QACE,0BAAqB,GAIjB;YACF,MAAM,EAAE,KAAK;SACd,CAAC;QAEF,6BAAwB,GAIpB;YACF,MAAM,EAAE,KAAK;SACd,CAAC;QAEF,4BAAuB,GAInB;YACF,MAAM,EAAE,KAAK;SACd,CAAC;QAEF,wBAAmB,GAIf;YACF,MAAM,EAAE,KAAK;SACd,CAAC;IA8CJ,CAAC;IA5CO,oBAAoB,CACxB,UAA2C,EAC3C,OAAe;;YAEf,IAAI,CAAC,qBAAqB,CAAC,MAAM,GAAG,IAAI,CAAC;YACzC,IAAI,CAAC,qBAAqB,CAAC,UAAU,GAAG,UAAU,CAAC;YACnD,IAAI,CAAC,qBAAqB,CAAC,OAAO,GAAG,OAAO,CAAC;QAC/C,CAAC;KAAA;IAEK,uBAAuB,CAC3B,UAA2C,EAC3C,OAA+B;;YAE/B,IAAI,CAAC,wBAAwB,CAAC,MAAM,GAAG,IAAI,CAAC;YAC5C,IAAI,CAAC,wBAAwB,CAAC,UAAU,GAAG,UAAU,CAAC;YACtD,IAAI,CAAC,wBAAwB,CAAC,OAAO,GAAG,OAAO,CAAC;QAClD,CAAC;KAAA;IAEK,sBAAsB,CAC1B,UAA2C,EAC3C,OAA+B;;YAE/B,IAAI,CAAC,wBAAwB,CAAC,MAAM,GAAG,IAAI,CAAC;YAC5C,IAAI,CAAC,wBAAwB,CAAC,UAAU,GAAG,UAAU,CAAC;YACtD,IAAI,CAAC,wBAAwB,CAAC,OAAO,GAAG,OAAO,CAAC;QAClD,CAAC;KAAA;IAEK,sBAAsB,CAC1B,UAA2C,EAC3C,IAAY;;YAEZ,IAAI,CAAC,uBAAuB,CAAC,MAAM,GAAG,IAAI,CAAC;YAC3C,IAAI,CAAC,uBAAuB,CAAC,UAAU,GAAG,UAAU,CAAC;YACrD,IAAI,CAAC,uBAAuB,CAAC,IAAI,GAAG,IAAI,CAAC;QAC3C,CAAC;KAAA;IAEK,kBAAkB,CACtB,UAA2C,EAC3C,KAAa;;YAEb,IAAI,CAAC,mBAAmB,CAAC,MAAM,GAAG,IAAI,CAAC;YACvC,IAAI,CAAC,mBAAmB,CAAC,UAAU,GAAG,UAAU,CAAC;YACjD,IAAI,CAAC,mBAAmB,CAAC,KAAK,GAAG,KAAK,CAAC;QACzC,CAAC;KAAA;CACF","sourcesContent":["import {\n  PayPalButtonDataSourceDelegate,\n  PayPalButtonDataSourceInterface,\n} from '../../../../src/braintree-manager/payment-providers/paypal/paypal-button-datasource';\n\nexport class MockPayPalButtonDataSourceDelegate implements PayPalButtonDataSourceDelegate {\n  paymentStartedResults: {\n    called: boolean;\n    datasource?: PayPalButtonDataSourceInterface;\n    options?: object;\n  } = {\n    called: false,\n  };\n\n  paymentAuthorizedResults: {\n    called: boolean;\n    datasource?: PayPalButtonDataSourceInterface;\n    payload?: paypal.TokenizePayload;\n  } = {\n    called: false,\n  };\n\n  paymentCancelledResults: {\n    called: boolean;\n    datasource?: PayPalButtonDataSourceInterface;\n    data?: object;\n  } = {\n    called: false,\n  };\n\n  paymentErrorResults: {\n    called: boolean;\n    datasource?: PayPalButtonDataSourceInterface;\n    error?: string;\n  } = {\n    called: false,\n  };\n\n  async payPalPaymentStarted(\n    dataSource: PayPalButtonDataSourceInterface,\n    options: object,\n  ): Promise<void> {\n    this.paymentStartedResults.called = true;\n    this.paymentStartedResults.datasource = dataSource;\n    this.paymentStartedResults.options = options;\n  }\n\n  async payPalPaymentAuthorized(\n    dataSource: PayPalButtonDataSourceInterface,\n    payload: paypal.TokenizePayload,\n  ): Promise<void> {\n    this.paymentAuthorizedResults.called = true;\n    this.paymentAuthorizedResults.datasource = dataSource;\n    this.paymentAuthorizedResults.payload = payload;\n  }\n\n  async payPalPaymentConfirmed(\n    dataSource: PayPalButtonDataSourceInterface,\n    payload: paypal.TokenizePayload,\n  ): Promise<void> {\n    this.paymentAuthorizedResults.called = true;\n    this.paymentAuthorizedResults.datasource = dataSource;\n    this.paymentAuthorizedResults.payload = payload;\n  }\n\n  async payPalPaymentCancelled(\n    dataSource: PayPalButtonDataSourceInterface,\n    data: object,\n  ): Promise<void> {\n    this.paymentCancelledResults.called = true;\n    this.paymentCancelledResults.datasource = dataSource;\n    this.paymentCancelledResults.data = data;\n  }\n\n  async payPalPaymentError(\n    dataSource: PayPalButtonDataSourceInterface,\n    error: string,\n  ): Promise<void> {\n    this.paymentErrorResults.called = true;\n    this.paymentErrorResults.datasource = dataSource;\n    this.paymentErrorResults.error = error;\n  }\n}\n"]}

package/package.json

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

package/src/@types/paypal-checkout-components/modules/callback-data.d.ts

@@ -1,7 +1,4 @@
-export enum LineItemKind {
-  Debit = 'debit',
-  Credit = 'credit',
-}
+export type LineItemKind = 'debit' | 'credit';
 
 export interface LineItem {
   /**
@@ -45,17 +42,7 @@ export interface LineItem {
   url: string | undefined;
 }
 
-export enum ShippingOptionType {
-  /**
-   * The payer intends to receive the items at a specified address.
-   */
-  Shipping = 'SHIPPING',
-
-  /**
-   * The payer intends to pick up the items at a specified address. For example, a store address.
-   */
-  Pickup = 'PICKUP',
-}
+export type ShippingOptionType = 'SHIPPING' | 'PICKUP';
 
 export interface CurrencyAmount {
   /**
@@ -219,37 +206,9 @@ export interface TokenizePayload {
   details: TokenizePayloadDetails;
 }
 
-export enum FlowType {
-  /**
-   * Used to store the payment method for future use, ie subscriptions
-   */
-  Vault = 'vault',
-
-  /**
-   * Used for one-time checkout
-   */
-  Checkout = 'checkout',
-}
-
-export enum Intent {
-  /**
-   * Submits the transaction for authorization but not settlement.
-   */
-  Authorize = 'authorize',
+export type FlowType = 'checkout' | 'vault';
 
-  /**
-   * Validates the transaction without an authorization (i.e. without holding funds).
-   * Useful for authorizing and capturing funds up to 90 days after the order has been placed.
-   * Only available for Checkout flow.
-   */
-  Order = 'order',
-
-  /**
-   * Payment will be immediately submitted for settlement upon creating a transaction.
-   * `sale` can be used as an alias for this value.
-   */
-  Capture = 'capture',
-}
+export type Intent = 'authorize' | 'order' | 'capture';
 
 export interface AuthorizationData {
   payerId: string;

package/src/braintree-manager/payment-providers/paypal/paypal-button-datasource.ts

@@ -92,7 +92,7 @@ export interface PayPalButtonDataSourceDelegate {
   payPalPaymentStarted(dataSource: PayPalButtonDataSourceInterface, options: object): Promise<void>;
 
   /**
-   * Payment has been authorized
+   * Payment has been authorized by patron and submits to PayPal
    *
    * @param {PayPalButtonDataSourceInterface} dataSource
    * @param {paypal.TokenizePayload} payload
@@ -104,6 +104,19 @@ export interface PayPalButtonDataSourceDelegate {
     payload: paypal.TokenizePayload,
   ): Promise<void>;
 
+  /**
+   * Payment has been authorized
+   *
+   * @param {PayPalButtonDataSourceInterface} dataSource
+   * @param {paypal.TokenizePayload} payload
+   * @returns {Promise<void>}
+   * @memberof PayPalButtonDataSourceDelegate
+   */
+   payPalPaymentConfirmed(
+    dataSource: PayPalButtonDataSourceInterface,
+    payload: paypal.TokenizePayload,
+  ): Promise<void>;
+
   /**
    * Payment has been cancelled
    *
@@ -157,6 +170,7 @@ export class PayPalButtonDataSource implements PayPalButtonDataSourceInterface {
 
     const options: braintree.PayPalCheckoutCreatePaymentOptions = {
       flow: flow as paypal.FlowType,
+      intent: 'capture',
     };
     options.enableShippingAddress = true;
 
@@ -184,6 +198,13 @@ export class PayPalButtonDataSource implements PayPalButtonDataSourceInterface {
     return payload;
   }
 
+  async onConfirm(data: paypal.AuthorizationData): Promise<paypal.TokenizePayload> {
+    const payload: paypal.TokenizePayload = await this.paypalInstance.tokenizePayment(data);
+    this.delegate?.payPalPaymentConfirmed(this, payload);
+
+    return payload;
+  }
+
   /** @inheritdoc */
   onCancel(data: object): void {
     this.delegate?.payPalPaymentCancelled(this, data);

package/src/donation-form-controller.ts

@@ -164,6 +164,16 @@ export class DonationFormController extends LitElement {
     }
   }
 
+  async showConfirmationStepDev(options: {
+    donationType: DonationType;
+    amount: number;
+    currencyType: string;
+    cancelDonationCB: Function;
+    confirmDonationCB: Function;
+  }): Promise<void> {
+    this.donationForm.showConfirmationModalDev(options);
+  }
+
   async showUpsellModalDev(options: {
     oneTimeAmount: number;
     ctaMode?: UpsellModalCTAMode;
@@ -319,7 +329,7 @@ export class DonationFormController extends LitElement {
     this.donationForm.paymentFlowHandlers = this.paymentFlowHandlers;
 
     this.braintreeManager.startup();
-    this.paymentFlowHandlers.startup();
+    this.paymentFlowHandlers?.startup();
     this.recaptchaManager.setup(this.recaptchaElement, 1, 'light', 'image');
   }
 

package/src/donation-form.ts

@@ -121,6 +121,16 @@ export class DonationForm extends LitElement {
     `;
   }
 
+    async showConfirmationModalDev(options: {
+      donationType: DonationType;
+      amount: number;
+      currencyType: string;
+      cancelDonationCB: Function;
+      confirmDonationCB: Function;
+    }): Promise<void> {
+      this.paymentFlowHandlers?.showConfirmationStepModal(options);
+    }
+
   /**
    * This is a developer convenience method that allows us to show the upsell modal without going
    * through the purchasing flow. If it's showing the PayPal button, it will trigger

package/src/modals/confirm-donation-modal-content.ts

@@ -0,0 +1,150 @@
+/* eslint-disable @typescript-eslint/no-empty-function */
+import { LitElement, html, TemplateResult, css, CSSResultGroup } 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}
+ */
+@customElement('confirm-donation-modal')
+export class ConfirmDonationContent extends LitElement {
+  @property({ type: Number }) amount = 5;
+
+  @property({ type: String }) currencyType = '$';
+
+  @property({ type: String }) donationType: DonationType = DonationType.OneTime;
+
+  @property({ type: Function }) confirmDonation: Function = (): void => {};
+
+  @property({ type: Function }) cancelDonation: Function= (): void => {};
+
+  get confirmationText(): TemplateResult {
+    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>`;
+  }
+
+  confirm(): void {
+    this?.confirmDonation();
+  }
+
+  cancel(): void {
+    this?.cancelDonation();
+  }
+
+  /** @inheritdoc */
+  render(): TemplateResult {
+    return html`
+      <p>${this.confirmationText}</p>
+
+      <div class="cta-group">
+        <button id="confirm" @click=${(): void => this.confirm()}>Complete donation</button>
+        <button id="cancel" @click=${(): void => this.cancel()}>Cancel</button>
+      </div>
+    `;
+  }
+
+  static get styles(): CSSResultGroup {
+    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(): string {
+    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
+    }
+  }
+}

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

@@ -1,6 +1,7 @@
 import { html } from 'lit';
 import { ModalConfig, 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,
@@ -32,6 +33,13 @@ enum ModalHeaderColor {
  * @interface DonationFlowModalManagerInterface
  */
 export interface DonationFlowModalManagerInterface {
+  showConfirmationStepModal(options: {
+    amount: number;
+    donationType: DonationType;
+    currencyType: string;
+    confirmDonationCB: Function;
+    cancelDonationCB: Function;
+  }): Promise<void>;
   /**
    * Close the modal
    *
@@ -212,6 +220,43 @@ export class DonationFlowModalManager implements DonationFlowModalManagerInterfa
     });
   }
 
+  showConfirmationStepModal(options: {
+    amount: number;
+    donationType: DonationType;
+    currencyType: string;
+    confirmDonationCB: Function;
+    cancelDonationCB: Function;
+  }): Promise<void> {
+    const confirmDonation = (): void => {
+      console.log('confirmDonation ~~~~~~~');
+      options?.confirmDonationCB();
+    };
+    const cancelDonation = (): void => {
+      console.log('cancelDonation ~~~~~~~');
+      options?.cancelDonationCB();
+    };
+    const modalConfig = new ModalConfig({
+      closeOnBackdropClick: false,
+      // call close callback
+      headerColor: ModalHeaderColor.Green,
+      title: html`
+        Confirm donation
+      `,
+      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,
+    });
+  }
+
   /** @inheritdoc */
   showUpsellModal(options: {
     oneTimeAmount: number;

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

@@ -112,10 +112,39 @@ export class PayPalFlowHandler
     // eslint-disable-next-line @typescript-eslint/no-unused-vars
     options: object,
   ): Promise<void> {
+    console.log('payPalPaymentStarted *******', { dataSource, options });
     this.emitter.emit('payPalPaymentStarted', dataSource, options);
   }
 
-  async payPalPaymentAuthorized(
+  async payPalPaymentAuthorized(dataSource: PayPalButtonDataSourceInterface,
+    payload: paypal.TokenizePayload
+    ): Promise<void> {
+
+      // we got dataSource & payload
+      // we need to send it to `payPalPaymentConfirmed`
+      // after patron confirms the payment
+    console.log('payPalPaymentAuthorized *******', { dataSource, payload });
+
+    const { donationType, amount } = dataSource.donationInfo;
+    this.donationFlowModalManager.showConfirmationStepModal({
+      donationType,
+      amount,
+      currencyType: 'USD', // defaults to USD for now
+      confirmDonationCB: () => {
+        this.payPalPaymentConfirmed(dataSource, payload);
+      },
+      cancelDonationCB: () => {
+        this.donationFlowModalManager.closeModal();
+        this.payPalPaymentCancelled(dataSource, {});
+      }
+    });
+
+    // cancel payment on modal X
+    // cancel payment on cancel
+    
+  }
+
+  async payPalPaymentConfirmed(
     dataSource: PayPalButtonDataSourceInterface,
     payload: paypal.TokenizePayload,
   ): Promise<void> {

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

@@ -21,6 +21,7 @@ import {
   GooglePayFlowHandler,
 } 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>;
@@ -46,6 +47,14 @@ export interface PaymentFlowHandlersInterface {
     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;
@@ -90,6 +99,17 @@ export class PaymentFlowHandlers implements PaymentFlowHandlersInterface {
     return this.donationFlowModalManager.showUpsellModal(options);
   }
 
+    /** @inheritdoc */
+  showConfirmationStepModal(options: {
+    amount: number;
+    donationType: DonationType;
+    currencyType: string;
+    confirmDonationCB: Function;
+    cancelDonationCB: Function;
+  }): Promise<void> {
+    return this.donationFlowModalManager.showConfirmationStepModal(options);
+  }
+
   get creditCardHandler(): CreditCardFlowHandlerInterface | undefined {
     if (this.creditCardHandlerCache) {
       return this.creditCardHandlerCache;

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

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

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

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

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

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

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

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

package/dist/test/helpers/promisedSleep.js

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

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

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