@internetarchive/donation-form 0.5.12-a1 → 0.5.12-a2

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

@@ -17,8 +17,10 @@ export declare class ConfirmDonationContent extends LitElement {
     confirmDonation: Function;
     cancelDonation: Function;
     get confirmationText(): TemplateResult;
+    get confirmUpsellText(): TemplateResult;
     confirm(): void;
     cancel(): void;
+    get confirmCTA(): string;
     /** @inheritdoc */
     render(): TemplateResult;
     static get styles(): CSSResultGroup;

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

@@ -25,7 +25,13 @@ let ConfirmDonationContent = class ConfirmDonationContent extends LitElement {
     }
     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>`;
+        return html `
+    <p>You are about to make a <b>${this.donationType}</b> donation of <b>${amount} ${this.currencyType}</b> to the Internet Archive.</p>
+    `;
+    }
+    get confirmUpsellText() {
+        const amount = currency(this.amount, { symbol: this.currencySymbol }).format();
+        return html `<p>You are about to begin making <b>monthly</b> donations of <b>${amount} ${this.currencyType}</b> to the Internet Archive starting next month.</p>`;
     }
     confirm() {
         this === null || this === void 0 ? void 0 : this.confirmDonation();
@@ -33,13 +39,16 @@ let ConfirmDonationContent = class ConfirmDonationContent extends LitElement {
     cancel() {
         this === null || this === void 0 ? void 0 : this.cancelDonation();
     }
+    get confirmCTA() {
+        return this.donationType === DonationType.Upsell ? 'Start Monthly Donation' : 'Confirm Donation';
+    }
     /** @inheritdoc */
     render() {
         return html `
-      <p>${this.confirmationText}</p>
+      ${this.donationType === DonationType.Upsell ? this.confirmUpsellText : this.confirmationText}
 
       <div class="cta-group">
-        <button id="confirm" @click=${() => this.confirm()}>Complete donation</button>
+        <button id="confirm" @click=${() => this.confirm()}>${this.confirmCTA}</button>
         <button id="cancel" @click=${() => this.cancel()}>Cancel</button>
       </div>
     `;

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

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

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

@@ -73,20 +73,18 @@ 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 modalTitle = options.donationType === DonationType.Upsell
+            ? 'Confirm monthly donations'
+            : 'Confirm donation';
         const modalConfig = new ModalConfig({
             closeOnBackdropClick: false,
-            // call close callback
             headerColor: ModalHeaderColor.Green,
-            title: html `
-        Confirm donation
-      `,
+            title: html `${modalTitle}`,
             message: html `
         <confirm-donation-modal
           .amount="${options.amount}"
@@ -99,6 +97,7 @@ export class DonationFlowModalManager {
         });
         return this.modalManager.showModal({
             config: modalConfig,
+            userClosedModalCallback: cancelDonation
         });
     }
     /** @inheritdoc */

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 '../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"]}
+{"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      options?.confirmDonationCB();\n    };\n    const cancelDonation = (): void => {\n      options?.cancelDonationCB();\n    };\n    const modalTitle = options.donationType === DonationType.Upsell\n      ? 'Confirm monthly donations'\n      : 'Confirm donation';\n\n    const modalConfig = new ModalConfig({\n      closeOnBackdropClick: false,\n      headerColor: ModalHeaderColor.Green,\n      title: html`${modalTitle}`,\n      message: html`\n        <confirm-donation-modal\n          .amount=\"${options.amount}\"\n          .currencyType=\"${options.currencyType}\"\n          .donationType=\"${options.donationType}\"\n          .confirmDonation=${confirmDonation}\n          .cancelDonation=${cancelDonation}\n        ></confirm-donation-modal>\n      `,\n    });\n    return this.modalManager.showModal({\n      config: modalConfig,\n      userClosedModalCallback: cancelDonation\n    });\n  }\n\n  /** @inheritdoc */\n  showUpsellModal(options: {\n    oneTimeAmount: number;\n    yesSelected?: (amount: number) => void;\n    noSelected?: () => void;\n    amountChanged?: (amount: number) => void;\n    userClosedModalCallback?: () => void;\n    ctaMode?: UpsellModalCTAMode;\n  }): Promise<void> {\n    const modalConfig = new ModalConfig({\n      headerColor: ModalHeaderColor.Green,\n      title: html`\n        Donation received\n      `,\n      processingImageMode: 'complete',\n      showProcessingIndicator: true,\n    });\n\n    const upsellAmount = DonationFlowModalManager.getDefaultUpsellAmount(options.oneTimeAmount);\n    if (options.amountChanged) {\n      options.amountChanged(upsellAmount);\n    }\n\n    const modalContent = html`\n      <upsell-modal-content\n        .amount=${upsellAmount}\n        .yesButtonMode=${options?.ctaMode ?? UpsellModalCTAMode.YesButton}\n        @yesSelected=${(e: CustomEvent): void =>\n          options?.yesSelected ? options.yesSelected(e.detail.amount) : undefined}\n        @noThanksSelected=${options?.noSelected}\n        @amountChanged=${(e: CustomEvent): void =>\n          options?.amountChanged ? options.amountChanged(e.detail.amount) : undefined}\n      >\n        <slot name=\"paypal-upsell-button\"></slot>\n      </upsell-modal-content>\n    `;\n    return this.modalManager.showModal({\n      config: modalConfig,\n      customModalContent: modalContent,\n      userClosedModalCallback: options?.userClosedModalCallback,\n    });\n  }\n\n  /** @inheritdoc */\n  async startDonationSubmissionFlow(options: {\n    nonce: string;\n    paymentProvider: PaymentProvider;\n    donationInfo: DonationPaymentInfo;\n    billingInfo: BillingInfo;\n    customerInfo: CustomerInfo;\n    upsellOnetimeTransactionId?: string;\n    customerId?: string;\n    recaptchaToken?: string;\n    bin?: string; // first 6 digits of CC\n    binName?: string; // credit card bank name\n  }): Promise<DonationResponse | undefined> {\n    this.showProcessingModal();\n\n    try {\n      const response = await this.braintreeManager.submitDonation(options);\n\n      if (response.success) {\n        this.handleSuccessfulDonationResponse(\n          options.donationInfo,\n          response.value as SuccessResponse,\n        );\n        return response;\n      } else {\n        const error = response.value as ErrorResponse;\n        this.showErrorModal({\n          message: error.message,\n        });\n        return response;\n      }\n    } catch (error) {\n      this.showErrorModal({\n        message: `${error}`,\n      });\n      console.error('error getting a response', error);\n      return undefined;\n    }\n  }\n\n  private async upsellModalYesSelected(\n    oneTimeDonationResponse: SuccessResponse,\n    amount: number,\n  ): Promise<DonationResponse | undefined> {\n    this.showProcessingModal();\n\n    try {\n      const response = await this.braintreeManager.submitUpsellDonation({\n        oneTimeDonationResponse: oneTimeDonationResponse,\n        amount: amount,\n      });\n\n      if (response.success) {\n        this.completeUpsell({\n          successResponse: oneTimeDonationResponse,\n          upsellSuccessResponse: response.value as SuccessResponse,\n        });\n      } else {\n        const error = response.value as ErrorResponse;\n        this.showErrorModal({\n          message: error.message,\n        });\n      }\n\n      return response;\n    } catch (error) {\n      this.showErrorModal({\n        message: `${error}`,\n      });\n      console.error('error getting a response', error);\n      return undefined;\n    }\n  }\n\n  private completeUpsell(options: {\n    successResponse: SuccessResponse;\n    upsellSuccessResponse?: SuccessResponse;\n  }): void {\n    this.showThankYouModal(options);\n    this.braintreeManager.donationSuccessful(options);\n  }\n\n  static getDefaultUpsellAmount(oneTimeAmount: number): number {\n    let amount = 5;\n\n    if (oneTimeAmount <= 10) amount = 5;\n    else if (oneTimeAmount > 10 && oneTimeAmount <= 25) amount = 10;\n    else if (oneTimeAmount > 25 && oneTimeAmount <= 100) amount = 25;\n    else if (oneTimeAmount > 100) amount = 50;\n\n    return amount;\n  }\n\n  /** @inheritdoc */\n  handleSuccessfulDonationResponse(\n    donationInfo: DonationPaymentInfo,\n    response: SuccessResponse,\n  ): void {\n    switch (donationInfo.donationType) {\n      case DonationType.OneTime:\n        this.showUpsellModal({\n          oneTimeAmount: response.amount,\n          yesSelected: (amount: number) => {\n            this.upsellModalYesSelected(response, amount);\n          },\n          noSelected: () => {\n            this.showThankYouModal({ successResponse: response });\n          },\n          userClosedModalCallback: () => {\n            this.showThankYouModal({ successResponse: response });\n          },\n        });\n        break;\n      case DonationType.Monthly:\n        this.showThankYouModal({ successResponse: response });\n        break;\n      // This case will never be reached, it is only here for completeness.\n      // The upsell case gets handled in `modalYesSelected()` below\n      case DonationType.Upsell:\n        break;\n      default:\n        break;\n    }\n  }\n}\n"]}

package/package.json

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

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

@@ -1,5 +1,5 @@
 /* eslint-disable @typescript-eslint/no-empty-function */
-import { LitElement, html, TemplateResult, css, CSSResultGroup } from 'lit';
+import { LitElement, html, TemplateResult, css, CSSResultGroup, nothing } from 'lit';
 import { customElement, property } from 'lit/decorators.js';
 import { DonationType } from '@internetarchive/donation-form-data-models';
 import currency from 'currency.js';
@@ -28,8 +28,14 @@ export class ConfirmDonationContent extends LitElement {
 
   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>
+    `;
+  }
 
-    return html`<p>You are about to make a <b>${this.donationType}</b> donation of <b>${amount} ${this.currencyType}</b> to the Internet Archive.</p>`;
+  get confirmUpsellText(): TemplateResult {
+    const amount = currency(this.amount, { symbol: this.currencySymbol }).format();
+    return html`<p>You are about to begin making <b>monthly</b> donations of <b>${amount} ${this.currencyType}</b> to the Internet Archive starting next month.</p>`;
   }
 
   confirm(): void {
@@ -40,13 +46,17 @@ export class ConfirmDonationContent extends LitElement {
     this?.cancelDonation();
   }
 
+  get confirmCTA(): string {
+    return this.donationType === DonationType.Upsell ? 'Start Monthly Donation' : 'Confirm Donation';
+  }
+
   /** @inheritdoc */
   render(): TemplateResult {
     return html`
-      <p>${this.confirmationText}</p>
+      ${this.donationType === DonationType.Upsell ? this.confirmUpsellText : this.confirmationText}
 
       <div class="cta-group">
-        <button id="confirm" @click=${(): void => this.confirm()}>Complete donation</button>
+        <button id="confirm" @click=${(): void => this.confirm()}>${this.confirmCTA}</button>
         <button id="cancel" @click=${(): void => this.cancel()}>Cancel</button>
       </div>
     `;

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

@@ -228,20 +228,19 @@ export class DonationFlowModalManager implements DonationFlowModalManagerInterfa
     cancelDonationCB: Function;
   }): Promise<void> {
     const confirmDonation = (): void => {
-      console.log('confirmDonation ~~~~~~~');
       options?.confirmDonationCB();
     };
     const cancelDonation = (): void => {
-      console.log('cancelDonation ~~~~~~~');
       options?.cancelDonationCB();
     };
+    const modalTitle = options.donationType === DonationType.Upsell
+      ? 'Confirm monthly donations'
+      : 'Confirm donation';
+
     const modalConfig = new ModalConfig({
       closeOnBackdropClick: false,
-      // call close callback
       headerColor: ModalHeaderColor.Green,
-      title: html`
-        Confirm donation
-      `,
+      title: html`${modalTitle}`,
       message: html`
         <confirm-donation-modal
           .amount="${options.amount}"
@@ -254,6 +253,7 @@ export class DonationFlowModalManager implements DonationFlowModalManagerInterfa
     });
     return this.modalManager.showModal({
       config: modalConfig,
+      userClosedModalCallback: cancelDonation
     });
   }
 

package/dist/src/modals/payment-confirmation-content.d.ts

@@ -1,23 +0,0 @@
-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

@@ -1,74 +0,0 @@
-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

@@ -1 +0,0 @@
-{"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}"]}