@internetarchive/donation-form 0.5.11 → 0.5.12-a1

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

@@ -0,0 +1,160 @@
+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>`;
+    }
+    confirm() {
+        this === null || this === void 0 ? void 0 : this.confirmDonation();
+    }
+    cancel() {
+        this === null || this === void 0 ? void 0 : this.cancelDonation();
+    }
+    /** @inheritdoc */
+    render() {
+        return html `
+      <p>${this.confirmationText}</p>
+
+      <div class="cta-group">
+        <button id="confirm" @click=${() => this.confirm()}>Complete donation</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":";AAAA,yDAAyD;AACzD,OAAO,EAAE,UAAU,EAAE,IAAI,EAAkB,GAAG,EAAkB,MAAM,KAAK,CAAC;AAC5E,OAAO,EAAE,aAAa,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAC;AAC5D,OAAO,EAAE,YAAY,EAAE,MAAM,4CAA4C,CAAC;AAC1E,OAAO,QAAQ,MAAM,aAAa,CAAC;AAEnC;;;;;;;;;GASG;AAEH,IAAa,sBAAsB,GAAnC,MAAa,sBAAuB,SAAQ,UAAU;IAAtD;;QAC8B,WAAM,GAAG,CAAC,CAAC;QAEX,iBAAY,GAAG,GAAG,CAAC;QAEnB,iBAAY,GAAiB,YAAY,CAAC,OAAO,CAAC;QAEhD,oBAAe,GAAa,GAAS,EAAE,GAAE,CAAC,CAAC;QAE3C,mBAAc,GAAY,GAAS,EAAE,GAAE,CAAC,CAAC;IA2HzE,CAAC;IAzHC,IAAI,gBAAgB;QAClB,MAAM,MAAM,GAAG,QAAQ,CAAC,IAAI,CAAC,MAAM,EAAE,EAAE,MAAM,EAAE,IAAI,CAAC,cAAc,EAAE,CAAC,CAAC,MAAM,EAAE,CAAC;QAE/E,OAAO,IAAI,CAAA,iCAAiC,IAAI,CAAC,YAAY,uBAAuB,MAAM,IAAI,IAAI,CAAC,YAAY,mCAAmC,CAAC;IACrJ,CAAC;IAED,OAAO;QACL,IAAI,aAAJ,IAAI,uBAAJ,IAAI,CAAE,eAAe,GAAG;IAC1B,CAAC;IAED,MAAM;QACJ,IAAI,aAAJ,IAAI,uBAAJ,IAAI,CAAE,cAAc,GAAG;IACzB,CAAC;IAED,kBAAkB;IAClB,MAAM;QACJ,OAAO,IAAI,CAAA;WACJ,IAAI,CAAC,gBAAgB;;;sCAGM,GAAS,EAAE,CAAC,IAAI,CAAC,OAAO,EAAE;qCAC3B,GAAS,EAAE,CAAC,IAAI,CAAC,MAAM,EAAE;;KAEzD,CAAC;IACJ,CAAC;IAED,MAAM,KAAK,MAAM;QACf,MAAM,cAAc,GAAG,GAAG,CAAA,sCAAsC,CAAC;QACjE,MAAM,sBAAsB,GAAG,GAAG,CAAA,4DAA4D,CAAC;QAE/F,OAAO,GAAG,CAAA;;;;;;;;;;;;;;;;4BAgBc,cAAc;;;;;;;;;;;;;;;;4BAgBd,sBAAsB;;;MAG5C,CAAC;IACL,CAAC;IAED;;OAEG;IACF,IAAI,cAAc;QACjB,QAAO,IAAI,CAAC,YAAY,EAAE;YACxB,KAAK,KAAK;gBACR,OAAO,KAAK,CAAC;YACf,KAAK,KAAK;gBACR,OAAO,IAAI,CAAC;YACd,KAAK,KAAK;gBACR,OAAO,KAAK,CAAC;YACf,KAAK,KAAK;gBACR,OAAO,IAAI,CAAC;YACd,KAAK,KAAK;gBACR,OAAO,GAAG,CAAC;YACb,KAAK,KAAK;gBACR,OAAO,IAAI,CAAC;YACd,KAAK,KAAK;gBACR,OAAO,IAAI,CAAC;YACd,KAAK,KAAK;gBACR,OAAO,GAAG,CAAC;YACb,KAAK,KAAK;gBACR,OAAO,GAAG,CAAC;YACb,KAAK,KAAK;gBACR,OAAO,KAAK,CAAC;YACf,KAAK,KAAK;gBACR,OAAO,IAAI,CAAC;YACd,KAAK,KAAK;gBACR,OAAO,GAAG,CAAC;YACb,KAAK,KAAK;gBACR,OAAO,GAAG,CAAC;YACb,KAAK,KAAK;gBACR,OAAO,KAAK,CAAC;YACf,KAAK,KAAK;gBACR,OAAO,IAAI,CAAC;YACd,KAAK,KAAK;gBACR,OAAO,IAAI,CAAC;YACd,KAAK,KAAK;gBACR,OAAO,IAAI,CAAC;YACd,KAAK,KAAK;gBACR,OAAO,GAAG,CAAC;YACb,KAAK,KAAK;gBACR,OAAO,IAAI,CAAC;YACd,KAAK,KAAK;gBACR,OAAO,IAAI,CAAC;YACd,KAAK,KAAK;gBACR,OAAO,GAAG,CAAC;YACb,KAAK,KAAK;gBACR,OAAO,KAAK,CAAC;YACf;gBACE,OAAO,GAAG,CAAC,CAAC,wBAAwB;SACvC;IACH,CAAC;CACF,CAAA;AAnI6B;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;sDAAY;AAEX;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;4DAAoB;AAEnB;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;4DAAmD;AAEhD;IAA7B,QAAQ,CAAC,EAAE,IAAI,EAAE,QAAQ,EAAE,CAAC;+DAA4C;AAE3C;IAA7B,QAAQ,CAAC,EAAE,IAAI,EAAE,QAAQ,EAAE,CAAC;8DAA0C;AAT5D,sBAAsB;IADlC,aAAa,CAAC,wBAAwB,CAAC;GAC3B,sBAAsB,CAoIlC;SApIY,sBAAsB","sourcesContent":["/* eslint-disable @typescript-eslint/no-empty-function */\nimport { LitElement, html, TemplateResult, css, CSSResultGroup } from 'lit';\nimport { customElement, property } from 'lit/decorators.js';\nimport { DonationType } from '@internetarchive/donation-form-data-models';\nimport currency from 'currency.js';\n\n/**\n * This is the content that we show in the upsell modal.\n *\n * It has an amount input, \"Yes\" and \"No Thanks\" options and a switch to optionally\n * show the PayPal upsell button.\n *\n * @export\n * @class ConfirmDonationContent\n * @extends {LitElement}\n */\n@customElement('confirm-donation-modal')\nexport class ConfirmDonationContent extends LitElement {\n  @property({ type: Number }) amount = 5;\n\n  @property({ type: String }) currencyType = '$';\n\n  @property({ type: String }) donationType: DonationType = DonationType.OneTime;\n\n  @property({ type: Function }) confirmDonation: Function = (): void => {};\n\n  @property({ type: Function }) cancelDonation: Function= (): void => {};\n\n  get confirmationText(): TemplateResult {\n    const amount = currency(this.amount, { symbol: this.currencySymbol }).format();\n\n    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>`;\n  }\n\n  confirm(): void {\n    this?.confirmDonation();\n  }\n\n  cancel(): void {\n    this?.cancelDonation();\n  }\n\n  /** @inheritdoc */\n  render(): TemplateResult {\n    return html`\n      <p>${this.confirmationText}</p>\n\n      <div class=\"cta-group\">\n        <button id=\"confirm\" @click=${(): void => this.confirm()}>Complete donation</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/modals/payment-confirmation-content.d.ts

@@ -0,0 +1,23 @@
+import { LitElement, TemplateResult } from 'lit';
+import { DonationType } from '@internetarchive/donation-form-data-models';
+/**
+ * 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 PaymentConfirmationContent
+ * @extends {LitElement}
+ */
+export declare class PaymentConfirmationContent extends LitElement {
+    amount: number;
+    currencyType: string;
+    donationType: DonationType;
+    get confirmationText(): string;
+    get currencySymbol(): string;
+    donationConfirmed(e: Event): void;
+    donationCancelled(e: Event): void;
+    /** @inheritdoc */
+    render(): TemplateResult;
+}

package/dist/src/modals/payment-confirmation-content.js

@@ -0,0 +1,74 @@
+import { __decorate } from "tslib";
+import { LitElement, html } from 'lit';
+import { customElement, property } from 'lit/decorators.js';
+import { DonationType } from '@internetarchive/donation-form-data-models';
+/**
+ * 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 PaymentConfirmationContent
+ * @extends {LitElement}
+ */
+let PaymentConfirmationContent = class PaymentConfirmationContent extends LitElement {
+    constructor() {
+        super(...arguments);
+        this.amount = 5;
+        this.currencyType = '$';
+        this.donationType = DonationType.OneTime;
+    }
+    get confirmationText() {
+        return `You are about to make a ${this.donationType} donation of ${this.currencySymbol}${this.amount}${this.currencyType} to the Internet Archive`;
+    }
+    get currencySymbol() {
+        switch (this.currencyType) {
+            case 'USD':
+                return '$';
+            case 'EUR':
+                return '€';
+            case 'GBP':
+                return '£';
+            case 'JPY':
+                return '¥';
+            case 'CAD':
+                return '$';
+            case 'AUD':
+                return '$';
+            case 'NZD':
+                return '$';
+            default:
+                return '$';
+        }
+    }
+    donationConfirmed(e) {
+        console.log('donationConfirmed --- ', e);
+    }
+    donationCancelled(e) {
+        console.log('donationCancelled --- ', e);
+    }
+    /** @inheritdoc */
+    render() {
+        return html `
+      <h3>Confirm:</h3>
+      <p>${this.confirmationText}</p>
+      <button @click=${(e) => this.donationConfirmed(e)}>COMPLETE DONATION</button>
+      <button @click=${(e) => this.donationCancelled(e)}>Cancel</button>
+    `;
+    }
+};
+__decorate([
+    property({ type: Number })
+], PaymentConfirmationContent.prototype, "amount", void 0);
+__decorate([
+    property({ type: String })
+], PaymentConfirmationContent.prototype, "currencyType", void 0);
+__decorate([
+    property({ type: String })
+], PaymentConfirmationContent.prototype, "donationType", void 0);
+PaymentConfirmationContent = __decorate([
+    customElement('payment-confirmation-modal')
+], PaymentConfirmationContent);
+export { PaymentConfirmationContent };
+//# sourceMappingURL=payment-confirmation-content.js.map

package/dist/src/modals/payment-confirmation-content.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"payment-confirmation-content.js","sourceRoot":"","sources":["../../../src/modals/payment-confirmation-content.ts"],"names":[],"mappings":";AAAA,OAAO,EAAE,UAAU,EAAE,IAAI,EAAkB,MAAM,KAAK,CAAC;AACvD,OAAO,EAAE,aAAa,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAC;AAC5D,OAAO,EAAE,YAAY,EAAE,MAAM,4CAA4C,CAAC;AAE1E;;;;;;;;;GASG;AAEH,IAAa,0BAA0B,GAAvC,MAAa,0BAA2B,SAAQ,UAAU;IAA1D;;QAC8B,WAAM,GAAG,CAAC,CAAC;QAEX,iBAAY,GAAG,GAAG,CAAC;QAEnB,iBAAY,GAAiB,YAAY,CAAC,OAAO,CAAC;IA4ChF,CAAC;IA1CC,IAAI,gBAAgB;QAClB,OAAO,2BAA2B,IAAI,CAAC,YAAY,gBAAgB,IAAI,CAAC,cAAc,GAAG,IAAI,CAAC,MAAM,GAAG,IAAI,CAAC,YAAY,0BAA0B,CAAC;IACrJ,CAAC;IAED,IAAI,cAAc;QAChB,QAAO,IAAI,CAAC,YAAY,EAAE;YACxB,KAAK,KAAK;gBACR,OAAO,GAAG,CAAC;YACb,KAAK,KAAK;gBACR,OAAO,GAAG,CAAC;YACb,KAAK,KAAK;gBACR,OAAO,GAAG,CAAC;YACb,KAAK,KAAK;gBACR,OAAO,GAAG,CAAC;YACb,KAAK,KAAK;gBACR,OAAO,GAAG,CAAC;YACb,KAAK,KAAK;gBACR,OAAO,GAAG,CAAC;YACb,KAAK,KAAK;gBACR,OAAO,GAAG,CAAC;YACb;gBACE,OAAO,GAAG,CAAC;SACd;IACH,CAAC;IAED,iBAAiB,CAAC,CAAQ;QACxB,OAAO,CAAC,GAAG,CAAC,wBAAwB,EAAE,CAAC,CAAC,CAAC;IAC3C,CAAC;IAED,iBAAiB,CAAC,CAAQ;QACxB,OAAO,CAAC,GAAG,CAAC,wBAAwB,EAAE,CAAC,CAAC,CAAC;IAC3C,CAAC;IAED,kBAAkB;IAClB,MAAM;QACJ,OAAO,IAAI,CAAA;;WAEJ,IAAI,CAAC,gBAAgB;uBACT,CAAC,CAAQ,EAAE,EAAE,CAAC,IAAI,CAAC,iBAAiB,CAAC,CAAC,CAAC;uBACvC,CAAC,CAAQ,EAAE,EAAE,CAAC,IAAI,CAAC,iBAAiB,CAAC,CAAC,CAAC;KACzD,CAAC;IACJ,CAAC;CACF,CAAA;AAhD6B;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;0DAAY;AAEX;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;gEAAoB;AAEnB;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;gEAAmD;AALnE,0BAA0B;IADtC,aAAa,CAAC,4BAA4B,CAAC;GAC/B,0BAA0B,CAiDtC;SAjDY,0BAA0B","sourcesContent":["import { LitElement, html, TemplateResult } from 'lit';\nimport { customElement, property } from 'lit/decorators.js';\nimport { DonationType } from '@internetarchive/donation-form-data-models';\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 PaymentConfirmationContent\n * @extends {LitElement}\n */\n@customElement('payment-confirmation-modal')\nexport class PaymentConfirmationContent 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  get confirmationText(): string {\n    return `You are about to make a ${this.donationType} donation of ${this.currencySymbol}${this.amount}${this.currencyType} to the Internet Archive`;\n  }\n\n  get currencySymbol(): string {\n    switch(this.currencyType) {\n      case 'USD':\n        return '$';\n      case 'EUR':\n        return '€';\n      case 'GBP':\n        return '£';\n      case 'JPY':\n        return '¥';\n      case 'CAD':\n        return '$';\n      case 'AUD':\n        return '$';\n      case 'NZD':\n        return '$';\n      default:\n        return '$';\n    }\n  }\n\n  donationConfirmed(e: Event): void {\n    console.log('donationConfirmed --- ', e);\n  }\n\n  donationCancelled(e: Event): void {\n    console.log('donationCancelled --- ', e);\n  }\n\n  /** @inheritdoc */\n  render(): TemplateResult {\n    return html`\n      <h3>Confirm:</h3>\n      <p>${this.confirmationText}</p>\n      <button @click=${(e: Event) => this.donationConfirmed(e)}>COMPLETE DONATION</button>\n      <button @click=${(e: Event) => this.donationCancelled(e)}>Cancel</button>\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,36 @@ export class DonationFlowModalManager {
       `,
         });
     }
+    showConfirmationStepModal(options) {
+        const confirmDonation = () => {
+            console.log('confirmDonation ~~~~~~~');
+            options === null || options === void 0 ? void 0 : options.confirmDonationCB();
+        };
+        const cancelDonation = () => {
+            console.log('cancelDonation ~~~~~~~');
+            options === null || options === void 0 ? void 0 : 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) {
         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":"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","sourcesContent":["import { html } from 'lit';\nimport { ModalConfig, ModalManagerInterface } from '@internetarchive/modal-manager';\nimport { UpsellModalCTAMode } from '../modals/upsell-modal-content';\nimport '../modals/confirm-donation-modal-content';\nimport { BraintreeManagerInterface } from '../braintree-manager/braintree-interfaces';\nimport {\n  SuccessResponse,\n  ErrorResponse,\n  DonationPaymentInfo,\n  DonationType,\n  PaymentProvider,\n  BillingInfo,\n  CustomerInfo,\n  DonationResponse,\n} from '@internetarchive/donation-form-data-models';\nimport '../modals/error-modal-content';\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      console.log('confirmDonation ~~~~~~~');\n      options?.confirmDonationCB();\n    };\n    const cancelDonation = (): void => {\n      console.log('cancelDonation ~~~~~~~');\n      options?.cancelDonationCB();\n    };\n    const modalConfig = new ModalConfig({\n      closeOnBackdropClick: false,\n      // call close callback\n      headerColor: ModalHeaderColor.Green,\n      title: html`\n        Confirm donation\n      `,\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    });\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, amount } = dataSource.donationInfo;
+            this.donationFlowModalManager.showConfirmationStepModal({
+                donationType,
+                amount,
+                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, amount } = dataSource.donationInfo;\n    this.donationFlowModalManager.showConfirmationStepModal({\n      donationType,\n      amount,\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;