@internetarchive/donation-form 1.0.2 → 1.0.3-alpha-webdev7960.0

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

package/dist/src/modals/error-modal-content.js

@@ -11,16 +11,16 @@ import { customElement } from 'lit/decorators.js';
 let ErrorModalContent = class ErrorModalContent extends LitElement {
     /** @inheritdoc */
     render() {
-        return html `
-      <div class="container">
-        <a
-          href="https://help.archive.org/help/why-is-there-a-problem-processing-my-donation/"
-          rel="noopener"
-          target="_blank"
-        >
-          Questions?
-        </a>
-      </div>
+        return html `
+      <div class="container">
+        <a
+          href="https://help.archive.org/help/why-is-there-a-problem-processing-my-donation/"
+          rel="noopener"
+          target="_blank"
+        >
+          Questions?
+        </a>
+      </div>
     `;
     }
     /** @inheritdoc */
@@ -28,18 +28,18 @@ let ErrorModalContent = class ErrorModalContent extends LitElement {
         const questionsLinkTopMargin = css `var(--errorModalQuestionsLinkTopMargin, 1rem)`;
         const questionsLinkFontColor = css `var(--errorModalQuestionsLinkFontColor, #333)`;
         const questionsLinkFontSize = css `var(--errorModalQuestionsLinkFontSize, 1.4rem)`;
-        return css `
-      .container {
-        margin-top: ${questionsLinkTopMargin};
-        text-align: center;
-      }
-
-      a,
-      a:link,
-      a:visited {
-        color: ${questionsLinkFontColor};
-        font-size: ${questionsLinkFontSize};
-      }
+        return css `
+      .container {
+        margin-top: ${questionsLinkTopMargin};
+        text-align: center;
+      }
+
+      a,
+      a:link,
+      a:visited {
+        color: ${questionsLinkFontColor};
+        font-size: ${questionsLinkFontSize};
+      }
     `;
     }
 };

package/dist/src/modals/error-modal-content.js.map

@@ -1 +1 @@
-{"version":3,"file":"error-modal-content.js","sourceRoot":"","sources":["../../../src/modals/error-modal-content.ts"],"names":[],"mappings":";AAAA,OAAO,EAAE,UAAU,EAAE,IAAI,EAAE,GAAG,EAA6B,MAAM,KAAK,CAAC;AACvE,OAAO,EAAE,aAAa,EAAE,MAAM,mBAAmB,CAAC;AAElD;;;;;;GAMG;AAEI,IAAM,iBAAiB,GAAvB,MAAM,iBAAkB,SAAQ,UAAU;IAC/C,kBAAkB;IAClB,MAAM;QACJ,OAAO,IAAI,CAAA;;;;;;;;;;KAUV,CAAC;IACJ,CAAC;IAED,kBAAkB;IAClB,MAAM,KAAK,MAAM;QACf,MAAM,sBAAsB,GAAG,GAAG,CAAA,+CAA+C,CAAC;QAClF,MAAM,sBAAsB,GAAG,GAAG,CAAA,+CAA+C,CAAC;QAClF,MAAM,qBAAqB,GAAG,GAAG,CAAA,gDAAgD,CAAC;QAElF,OAAO,GAAG,CAAA;;sBAEQ,sBAAsB;;;;;;;iBAO3B,sBAAsB;qBAClB,qBAAqB;;KAErC,CAAC;IACJ,CAAC;CACF,CAAA;AApCY,iBAAiB;IAD7B,aAAa,CAAC,mCAAmC,CAAC;GACtC,iBAAiB,CAoC7B","sourcesContent":["import { LitElement, html, css, CSSResult, TemplateResult } from 'lit';\nimport { customElement } from 'lit/decorators.js';\n\n/**\n * This is shown at the bottom of the error modal.\n *\n * @export\n * @class ErrorModalContent\n * @extends {LitElement}\n */\n@customElement('donation-form-error-modal-content')\nexport class ErrorModalContent extends LitElement {\n  /** @inheritdoc */\n  render(): TemplateResult {\n    return html`\n      <div class=\"container\">\n        <a\n          href=\"https://help.archive.org/help/why-is-there-a-problem-processing-my-donation/\"\n          rel=\"noopener\"\n          target=\"_blank\"\n        >\n          Questions?\n        </a>\n      </div>\n    `;\n  }\n\n  /** @inheritdoc */\n  static get styles(): CSSResult {\n    const questionsLinkTopMargin = css`var(--errorModalQuestionsLinkTopMargin, 1rem)`;\n    const questionsLinkFontColor = css`var(--errorModalQuestionsLinkFontColor, #333)`;\n    const questionsLinkFontSize = css`var(--errorModalQuestionsLinkFontSize, 1.4rem)`;\n\n    return css`\n      .container {\n        margin-top: ${questionsLinkTopMargin};\n        text-align: center;\n      }\n\n      a,\n      a:link,\n      a:visited {\n        color: ${questionsLinkFontColor};\n        font-size: ${questionsLinkFontSize};\n      }\n    `;\n  }\n}\n"]}
+{"version":3,"file":"error-modal-content.js","sourceRoot":"","sources":["../../../src/modals/error-modal-content.ts"],"names":[],"mappings":";AAAA,OAAO,EAAE,UAAU,EAAE,IAAI,EAAE,GAAG,EAA6B,MAAM,KAAK,CAAC;AACvE,OAAO,EAAE,aAAa,EAAE,MAAM,mBAAmB,CAAC;AAElD;;;;;;GAMG;AAEI,IAAM,iBAAiB,GAAvB,MAAM,iBAAkB,SAAQ,UAAU;IAC/C,kBAAkB;IAClB,MAAM;QACJ,OAAO,IAAI,CAAA;;;;;;;;;;KAUV,CAAC;IACJ,CAAC;IAED,kBAAkB;IAClB,MAAM,KAAK,MAAM;QACf,MAAM,sBAAsB,GAAG,GAAG,CAAA,+CAA+C,CAAC;QAClF,MAAM,sBAAsB,GAAG,GAAG,CAAA,+CAA+C,CAAC;QAClF,MAAM,qBAAqB,GAAG,GAAG,CAAA,gDAAgD,CAAC;QAElF,OAAO,GAAG,CAAA;;sBAEQ,sBAAsB;;;;;;;iBAO3B,sBAAsB;qBAClB,qBAAqB;;KAErC,CAAC;IACJ,CAAC;CACF,CAAA;AApCY,iBAAiB;IAD7B,aAAa,CAAC,mCAAmC,CAAC;GACtC,iBAAiB,CAoC7B","sourcesContent":["import { LitElement, html, css, CSSResult, TemplateResult } from 'lit';\r\nimport { customElement } from 'lit/decorators.js';\r\n\r\n/**\r\n * This is shown at the bottom of the error modal.\r\n *\r\n * @export\r\n * @class ErrorModalContent\r\n * @extends {LitElement}\r\n */\r\n@customElement('donation-form-error-modal-content')\r\nexport class ErrorModalContent extends LitElement {\r\n  /** @inheritdoc */\r\n  render(): TemplateResult {\r\n    return html`\r\n      <div class=\"container\">\r\n        <a\r\n          href=\"https://help.archive.org/help/why-is-there-a-problem-processing-my-donation/\"\r\n          rel=\"noopener\"\r\n          target=\"_blank\"\r\n        >\r\n          Questions?\r\n        </a>\r\n      </div>\r\n    `;\r\n  }\r\n\r\n  /** @inheritdoc */\r\n  static get styles(): CSSResult {\r\n    const questionsLinkTopMargin = css`var(--errorModalQuestionsLinkTopMargin, 1rem)`;\r\n    const questionsLinkFontColor = css`var(--errorModalQuestionsLinkFontColor, #333)`;\r\n    const questionsLinkFontSize = css`var(--errorModalQuestionsLinkFontSize, 1.4rem)`;\r\n\r\n    return css`\r\n      .container {\r\n        margin-top: ${questionsLinkTopMargin};\r\n        text-align: center;\r\n      }\r\n\r\n      a,\r\n      a:link,\r\n      a:visited {\r\n        color: ${questionsLinkFontColor};\r\n        font-size: ${questionsLinkFontSize};\r\n      }\r\n    `;\r\n  }\r\n}\r\n"]}

package/dist/src/modals/upsell-modal-content.js

@@ -26,52 +26,52 @@ let UpsellModalContent = class UpsellModalContent extends LitElement {
     }
     /** @inheritdoc */
     render() {
-        return html `
-      <h3>Thank you for donating!</h3>
-      <button @click=${this.noThanksSelected} class="cta-button" id="no-button">Continue</button>
-      <p class="or_separator"><span>or</span></p>
-      <h3>Join our Monthly Giving Circle</h3>
-      <p class="appeal">Monthly support helps us reliably plan for the future.</p>
-      <div class="monthly-amount">
-        <h1>Enter your monthly amount</h1>
-        <div class="amount-input">
-          <span class="dollar-symbol">$</span>
-          <input
-            id="amount-input"
-            type="text"
-            tabindex="0"
-            value=${this.amount}
-            @input=${this.amountChanged}
-            @keydown=${this.currencyValidator.keydown}
-          />
-        </div>
-        <div class="error ${this.error ? '' : 'hidden'}">${this.error}</div>
-      </div>
-
-      ${this.yesButton}
+        return html `
+      <h3>Thank you for donating!</h3>
+      <button @click=${this.noThanksSelected} class="cta-button" id="no-button">Continue</button>
+      <p class="or_separator"><span>or</span></p>
+      <h3>Join our Monthly Giving Circle</h3>
+      <p class="appeal">Monthly support helps us reliably plan for the future.</p>
+      <div class="monthly-amount">
+        <h1>Enter your monthly amount</h1>
+        <div class="amount-input">
+          <span class="dollar-symbol">$</span>
+          <input
+            id="amount-input"
+            type="text"
+            tabindex="0"
+            value=${this.amount}
+            @input=${this.amountChanged}
+            @keydown=${this.currencyValidator.keydown}
+          />
+        </div>
+        <div class="error ${this.error ? '' : 'hidden'}">${this.error}</div>
+      </div>
+
+      ${this.yesButton}
     `;
     }
     get yesButton() {
         switch (this.yesButtonMode) {
             case UpsellModalCTAMode.YesButton:
-                return html `
-          <button
-            class="cta-button"
-            tabindex="0"
-            id="yes-button"
-            @click=${this.yesSelected}
-            .disabled=${this.error !== undefined}
-          >
-            YES, I'll donate monthly
-          </button>
+                return html `
+          <button
+            class="cta-button"
+            tabindex="0"
+            id="yes-button"
+            @click=${this.yesSelected}
+            .disabled=${this.error !== undefined}
+          >
+            YES, I'll donate monthly
+          </button>
         `;
             case UpsellModalCTAMode.PayPalUpsellSlot:
-                return html `
-          <div class="paypal-upsell-slot-container">
-            <div class="paypal-upsell-slot-blocker ${this.error ? '' : 'hidden'}"></div>
-            <button class="cta-button" id="paypal-cover-button">YES, I'll donate monthly</button>
-            <slot class="paypal-upsell-slot"></slot>
-          </div>
+                return html `
+          <div class="paypal-upsell-slot-container">
+            <div class="paypal-upsell-slot-blocker ${this.error ? '' : 'hidden'}"></div>
+            <button class="cta-button" id="paypal-cover-button">YES, I'll donate monthly</button>
+            <slot class="paypal-upsell-slot"></slot>
+          </div>
         `;
         }
     }
@@ -94,9 +94,9 @@ let UpsellModalContent = class UpsellModalContent extends LitElement {
     }
     processAmount(amount) {
         if (amount >= 10000) {
-            this.error = html `
-        To make a donation of $10,000 or more, please contact our philanthropy department at
-        <a href="mailto:donations@archive.org">donations@archive.org</a>
+            this.error = html `
+        To make a donation of $10,000 or more, please contact our philanthropy department at
+        <a href="mailto:donations@archive.org">donations@archive.org</a>
       `;
             return;
         }
@@ -123,146 +123,146 @@ let UpsellModalContent = class UpsellModalContent extends LitElement {
         const ctaButtonColor = css `var(--upsellCTAButtonColor, #194880)`;
         const ctaButtonDisabledColor = css `var(--upsellCTAButtonDisabledColor, rgba(109,148,201,0.5))`;
         const amountInputOffset = css `var(--upsellAmountInputOffset, -1rem)`;
-        return css `
-      .monthly-amount {
-        background-color: #fff;
-        padding: 0.5rem 0.625rem;
-        border-radius: 5px;
-        text-align: center;
-        margin-bottom: 0.5rem;
-        margin-top: 0;
-      }
-
-      .monthly-amount h1 {
-        font-size: 1.8rem;
-        font-weight: bold;
-        text-align: center;
-        line-height: 1.2em;
-        margin: 0;
-        padding: 0.5rem 0 0 0;
-      }
-
-      .hidden {
-        display: none;
-      }
-
-      h3 {
-        text-align: center;
-        font-size: 1.8rem;
-        margin: 0 1rem 0.5rem 1rem;
-      }
-
-      .appeal {
-        text-align: center;
-        font-size: 1.6rem;
-        margin: 0.5rem 1rem;
-      }
-
-      .amount-input {
-        transform: translate(${amountInputOffset}, 0); /* translate slightly to center the input */
-      }
-
-      .amount-input .dollar-symbol {
-        font-size: 1.8rem;
-        font-weight: bold;
-      }
-
-      .amount-input input {
-        width: 100px;
-        text-align: center;
-        border: none;
-        border-bottom: 1px solid gray;
-        font-weight: bold;
-        font-size: 3.4rem;
-      }
-
-      .cta-button {
-        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;
-        outline: none;
-        cursor: pointer;
-      }
-
-      .cta-button:disabled {
-        background-color: ${ctaButtonDisabledColor};
-        cursor: not-allowed;
-      }
-
-      .paypal-upsell-slot {
-        text-align: center;
-      }
-
-      .paypal-upsell-slot-blocker {
-        position: absolute;
-        width: 100%;
-        height: 4.5rem;
-        bottom: 0;
-        z-index: 250;
-        cursor: not-allowed;
-        background-color: rgba(255, 255, 255, 0.5);
-      }
-
-      .paypal-upsell-slot-blocker.hidden {
-        display: none;
-      }
-
-      #paypal-cover-button {
-        position: absolute;
-        width: 100%;
-        bottom: 0;
-      }
-
-      .paypal-upsell-slot-container {
-        position: relative;
-      }
-
-      .paypal-upsell-slot-container .paypal-cta {
-        font-size: 2.4rem;
-        font-weight: bold;
-        margin: 0 1rem 1rem 1rem;
-        text-align: center;
-      }
-
-      .error {
-        font-size: 1.4rem;
-        margin: 0.5rem 0;
-        color: red;
-      }
-
-      .or_separator {
-        position: relative;
-        margin: 0 2rem;
-        font-size: 2.6rem;
-        font-weight: bold;
-        text-transform: uppercase;
-        text-align: center;
-      }
-
-      .or_separator:before {
-        position: absolute;
-        top: calc(50% - 1px);
-        right: 0;
-        left: 0;
-        height: 2px;
-        content: '';
-        background: #333;
-      }
-
-      .or_separator span {
-        display: inline-block;
-        position: relative;
-        padding: 0 1rem;
-        background: #f5f5f7;
-      }
+        return css `
+      .monthly-amount {
+        background-color: #fff;
+        padding: 0.5rem 0.625rem;
+        border-radius: 5px;
+        text-align: center;
+        margin-bottom: 0.5rem;
+        margin-top: 0;
+      }
+
+      .monthly-amount h1 {
+        font-size: 1.8rem;
+        font-weight: bold;
+        text-align: center;
+        line-height: 1.2em;
+        margin: 0;
+        padding: 0.5rem 0 0 0;
+      }
+
+      .hidden {
+        display: none;
+      }
+
+      h3 {
+        text-align: center;
+        font-size: 1.8rem;
+        margin: 0 1rem 0.5rem 1rem;
+      }
+
+      .appeal {
+        text-align: center;
+        font-size: 1.6rem;
+        margin: 0.5rem 1rem;
+      }
+
+      .amount-input {
+        transform: translate(${amountInputOffset}, 0); /* translate slightly to center the input */
+      }
+
+      .amount-input .dollar-symbol {
+        font-size: 1.8rem;
+        font-weight: bold;
+      }
+
+      .amount-input input {
+        width: 100px;
+        text-align: center;
+        border: none;
+        border-bottom: 1px solid gray;
+        font-weight: bold;
+        font-size: 3.4rem;
+      }
+
+      .cta-button {
+        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;
+        outline: none;
+        cursor: pointer;
+      }
+
+      .cta-button:disabled {
+        background-color: ${ctaButtonDisabledColor};
+        cursor: not-allowed;
+      }
+
+      .paypal-upsell-slot {
+        text-align: center;
+      }
+
+      .paypal-upsell-slot-blocker {
+        position: absolute;
+        width: 100%;
+        height: 4.5rem;
+        bottom: 0;
+        z-index: 250;
+        cursor: not-allowed;
+        background-color: rgba(255, 255, 255, 0.5);
+      }
+
+      .paypal-upsell-slot-blocker.hidden {
+        display: none;
+      }
+
+      #paypal-cover-button {
+        position: absolute;
+        width: 100%;
+        bottom: 0;
+      }
+
+      .paypal-upsell-slot-container {
+        position: relative;
+      }
+
+      .paypal-upsell-slot-container .paypal-cta {
+        font-size: 2.4rem;
+        font-weight: bold;
+        margin: 0 1rem 1rem 1rem;
+        text-align: center;
+      }
+
+      .error {
+        font-size: 1.4rem;
+        margin: 0.5rem 0;
+        color: red;
+      }
+
+      .or_separator {
+        position: relative;
+        margin: 0 2rem;
+        font-size: 2.6rem;
+        font-weight: bold;
+        text-transform: uppercase;
+        text-align: center;
+      }
+
+      .or_separator:before {
+        position: absolute;
+        top: calc(50% - 1px);
+        right: 0;
+        left: 0;
+        height: 2px;
+        content: '';
+        background: #333;
+      }
+
+      .or_separator span {
+        display: inline-block;
+        position: relative;
+        padding: 0 1rem;
+        background: #f5f5f7;
+      }
     `;
     }
 };

package/dist/src/modals/upsell-modal-content.js.map

@@ -1 +1 @@
-{"version":3,"file":"upsell-modal-content.js","sourceRoot":"","sources":["../../../src/modals/upsell-modal-content.ts"],"names":[],"mappings":"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","sourcesContent":["import { LitElement, html, css, CSSResult, TemplateResult } from 'lit';\nimport { customElement, property, query } from 'lit/decorators.js';\nimport { CurrencyValidator } from '@internetarchive/donation-form-currency-validator';\n\nexport enum UpsellModalCTAMode {\n  YesButton = 'YesButton',\n  PayPalUpsellSlot = 'PayPalUpsellSlot',\n}\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 UpsellModalContent\n * @extends {LitElement}\n */\n@customElement('upsell-modal-content')\nexport class UpsellModalContent extends LitElement {\n  @property({ type: String }) yesButtonMode: UpsellModalCTAMode = UpsellModalCTAMode.YesButton;\n\n  @property({ type: Number }) amount = 5;\n\n  @property({ type: Object }) error?: TemplateResult;\n\n  @query('#amount-input') amountInput!: HTMLInputElement;\n\n  private currencyValidator: CurrencyValidator = new CurrencyValidator();\n\n  /** @inheritdoc */\n  render(): TemplateResult {\n    return html`\n      <h3>Thank you for donating!</h3>\n      <button @click=${this.noThanksSelected} class=\"cta-button\" id=\"no-button\">Continue</button>\n      <p class=\"or_separator\"><span>or</span></p>\n      <h3>Join our Monthly Giving Circle</h3>\n      <p class=\"appeal\">Monthly support helps us reliably plan for the future.</p>\n      <div class=\"monthly-amount\">\n        <h1>Enter your monthly amount</h1>\n        <div class=\"amount-input\">\n          <span class=\"dollar-symbol\">$</span>\n          <input\n            id=\"amount-input\"\n            type=\"text\"\n            tabindex=\"0\"\n            value=${this.amount}\n            @input=${this.amountChanged}\n            @keydown=${this.currencyValidator.keydown}\n          />\n        </div>\n        <div class=\"error ${this.error ? '' : 'hidden'}\">${this.error}</div>\n      </div>\n\n      ${this.yesButton}\n    `;\n  }\n\n  private get yesButton(): TemplateResult {\n    switch (this.yesButtonMode) {\n      case UpsellModalCTAMode.YesButton:\n        return html`\n          <button\n            class=\"cta-button\"\n            tabindex=\"0\"\n            id=\"yes-button\"\n            @click=${this.yesSelected}\n            .disabled=${this.error !== undefined}\n          >\n            YES, I'll donate monthly\n          </button>\n        `;\n      case UpsellModalCTAMode.PayPalUpsellSlot:\n        return html`\n          <div class=\"paypal-upsell-slot-container\">\n            <div class=\"paypal-upsell-slot-blocker ${this.error ? '' : 'hidden'}\"></div>\n            <button class=\"cta-button\" id=\"paypal-cover-button\">YES, I'll donate monthly</button>\n            <slot class=\"paypal-upsell-slot\"></slot>\n          </div>\n        `;\n    }\n  }\n\n  private amountChanged(e: Event): void {\n    const target = e.target as HTMLInputElement;\n    const amount = target.value;\n    if (amount.length === 0) {\n      return;\n    }\n    this.handleCustomAmountInput(amount);\n  }\n\n  private handleCustomAmountInput(value: string): void {\n    const amount = parseFloat(value);\n    if (isNaN(amount)) {\n      this.error = html` Please enter a valid amount. `;\n    } else {\n      this.processAmount(amount);\n    }\n  }\n\n  private processAmount(amount: number): void {\n    if (amount >= 10000) {\n      this.error = html`\n        To make a donation of $10,000 or more, please contact our philanthropy department at\n        <a href=\"mailto:donations@archive.org\">donations@archive.org</a>\n      `;\n      return;\n    }\n\n    if (amount < 1) {\n      if (this.amountInput && this.amountInput.value.length > 0) {\n        this.error = html` The minimum donation amount is $1. `;\n      }\n      return;\n    }\n\n    this.error = undefined;\n\n    this.amount = amount;\n\n    const event = new CustomEvent('amountChanged', { detail: { amount: this.amount } });\n    this.dispatchEvent(event);\n  }\n\n  private yesSelected(): void {\n    const event = new CustomEvent('yesSelected', { detail: { amount: this.amount } });\n    this.dispatchEvent(event);\n  }\n\n  private noThanksSelected(): void {\n    this.dispatchEvent(new Event('noThanksSelected'));\n  }\n\n  /** @inheritdoc */\n  static get styles(): CSSResult {\n    const ctaButtonColor = css`var(--upsellCTAButtonColor, #194880)`;\n    const ctaButtonDisabledColor = css`var(--upsellCTAButtonDisabledColor, rgba(109,148,201,0.5))`;\n    const amountInputOffset = css`var(--upsellAmountInputOffset, -1rem)`;\n\n    return css`\n      .monthly-amount {\n        background-color: #fff;\n        padding: 0.5rem 0.625rem;\n        border-radius: 5px;\n        text-align: center;\n        margin-bottom: 0.5rem;\n        margin-top: 0;\n      }\n\n      .monthly-amount h1 {\n        font-size: 1.8rem;\n        font-weight: bold;\n        text-align: center;\n        line-height: 1.2em;\n        margin: 0;\n        padding: 0.5rem 0 0 0;\n      }\n\n      .hidden {\n        display: none;\n      }\n\n      h3 {\n        text-align: center;\n        font-size: 1.8rem;\n        margin: 0 1rem 0.5rem 1rem;\n      }\n\n      .appeal {\n        text-align: center;\n        font-size: 1.6rem;\n        margin: 0.5rem 1rem;\n      }\n\n      .amount-input {\n        transform: translate(${amountInputOffset}, 0); /* translate slightly to center the input */\n      }\n\n      .amount-input .dollar-symbol {\n        font-size: 1.8rem;\n        font-weight: bold;\n      }\n\n      .amount-input input {\n        width: 100px;\n        text-align: center;\n        border: none;\n        border-bottom: 1px solid gray;\n        font-weight: bold;\n        font-size: 3.4rem;\n      }\n\n      .cta-button {\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        outline: none;\n        cursor: pointer;\n      }\n\n      .cta-button:disabled {\n        background-color: ${ctaButtonDisabledColor};\n        cursor: not-allowed;\n      }\n\n      .paypal-upsell-slot {\n        text-align: center;\n      }\n\n      .paypal-upsell-slot-blocker {\n        position: absolute;\n        width: 100%;\n        height: 4.5rem;\n        bottom: 0;\n        z-index: 250;\n        cursor: not-allowed;\n        background-color: rgba(255, 255, 255, 0.5);\n      }\n\n      .paypal-upsell-slot-blocker.hidden {\n        display: none;\n      }\n\n      #paypal-cover-button {\n        position: absolute;\n        width: 100%;\n        bottom: 0;\n      }\n\n      .paypal-upsell-slot-container {\n        position: relative;\n      }\n\n      .paypal-upsell-slot-container .paypal-cta {\n        font-size: 2.4rem;\n        font-weight: bold;\n        margin: 0 1rem 1rem 1rem;\n        text-align: center;\n      }\n\n      .error {\n        font-size: 1.4rem;\n        margin: 0.5rem 0;\n        color: red;\n      }\n\n      .or_separator {\n        position: relative;\n        margin: 0 2rem;\n        font-size: 2.6rem;\n        font-weight: bold;\n        text-transform: uppercase;\n        text-align: center;\n      }\n\n      .or_separator:before {\n        position: absolute;\n        top: calc(50% - 1px);\n        right: 0;\n        left: 0;\n        height: 2px;\n        content: '';\n        background: #333;\n      }\n\n      .or_separator span {\n        display: inline-block;\n        position: relative;\n        padding: 0 1rem;\n        background: #f5f5f7;\n      }\n    `;\n  }\n}\n"]}
+{"version":3,"file":"upsell-modal-content.js","sourceRoot":"","sources":["../../../src/modals/upsell-modal-content.ts"],"names":[],"mappings":"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","sourcesContent":["import { LitElement, html, css, CSSResult, TemplateResult } from 'lit';\r\nimport { customElement, property, query } from 'lit/decorators.js';\r\nimport { CurrencyValidator } from '@internetarchive/donation-form-currency-validator';\r\n\r\nexport enum UpsellModalCTAMode {\r\n  YesButton = 'YesButton',\r\n  PayPalUpsellSlot = 'PayPalUpsellSlot',\r\n}\r\n\r\n/**\r\n * This is the content that we show in the upsell modal.\r\n *\r\n * It has an amount input, \"Yes\" and \"No Thanks\" options and a switch to optionally\r\n * show the PayPal upsell button.\r\n *\r\n * @export\r\n * @class UpsellModalContent\r\n * @extends {LitElement}\r\n */\r\n@customElement('upsell-modal-content')\r\nexport class UpsellModalContent extends LitElement {\r\n  @property({ type: String }) yesButtonMode: UpsellModalCTAMode = UpsellModalCTAMode.YesButton;\r\n\r\n  @property({ type: Number }) amount = 5;\r\n\r\n  @property({ type: Object }) error?: TemplateResult;\r\n\r\n  @query('#amount-input') amountInput!: HTMLInputElement;\r\n\r\n  private currencyValidator: CurrencyValidator = new CurrencyValidator();\r\n\r\n  /** @inheritdoc */\r\n  render(): TemplateResult {\r\n    return html`\r\n      <h3>Thank you for donating!</h3>\r\n      <button @click=${this.noThanksSelected} class=\"cta-button\" id=\"no-button\">Continue</button>\r\n      <p class=\"or_separator\"><span>or</span></p>\r\n      <h3>Join our Monthly Giving Circle</h3>\r\n      <p class=\"appeal\">Monthly support helps us reliably plan for the future.</p>\r\n      <div class=\"monthly-amount\">\r\n        <h1>Enter your monthly amount</h1>\r\n        <div class=\"amount-input\">\r\n          <span class=\"dollar-symbol\">$</span>\r\n          <input\r\n            id=\"amount-input\"\r\n            type=\"text\"\r\n            tabindex=\"0\"\r\n            value=${this.amount}\r\n            @input=${this.amountChanged}\r\n            @keydown=${this.currencyValidator.keydown}\r\n          />\r\n        </div>\r\n        <div class=\"error ${this.error ? '' : 'hidden'}\">${this.error}</div>\r\n      </div>\r\n\r\n      ${this.yesButton}\r\n    `;\r\n  }\r\n\r\n  private get yesButton(): TemplateResult {\r\n    switch (this.yesButtonMode) {\r\n      case UpsellModalCTAMode.YesButton:\r\n        return html`\r\n          <button\r\n            class=\"cta-button\"\r\n            tabindex=\"0\"\r\n            id=\"yes-button\"\r\n            @click=${this.yesSelected}\r\n            .disabled=${this.error !== undefined}\r\n          >\r\n            YES, I'll donate monthly\r\n          </button>\r\n        `;\r\n      case UpsellModalCTAMode.PayPalUpsellSlot:\r\n        return html`\r\n          <div class=\"paypal-upsell-slot-container\">\r\n            <div class=\"paypal-upsell-slot-blocker ${this.error ? '' : 'hidden'}\"></div>\r\n            <button class=\"cta-button\" id=\"paypal-cover-button\">YES, I'll donate monthly</button>\r\n            <slot class=\"paypal-upsell-slot\"></slot>\r\n          </div>\r\n        `;\r\n    }\r\n  }\r\n\r\n  private amountChanged(e: Event): void {\r\n    const target = e.target as HTMLInputElement;\r\n    const amount = target.value;\r\n    if (amount.length === 0) {\r\n      return;\r\n    }\r\n    this.handleCustomAmountInput(amount);\r\n  }\r\n\r\n  private handleCustomAmountInput(value: string): void {\r\n    const amount = parseFloat(value);\r\n    if (isNaN(amount)) {\r\n      this.error = html` Please enter a valid amount. `;\r\n    } else {\r\n      this.processAmount(amount);\r\n    }\r\n  }\r\n\r\n  private processAmount(amount: number): void {\r\n    if (amount >= 10000) {\r\n      this.error = html`\r\n        To make a donation of $10,000 or more, please contact our philanthropy department at\r\n        <a href=\"mailto:donations@archive.org\">donations@archive.org</a>\r\n      `;\r\n      return;\r\n    }\r\n\r\n    if (amount < 1) {\r\n      if (this.amountInput && this.amountInput.value.length > 0) {\r\n        this.error = html` The minimum donation amount is $1. `;\r\n      }\r\n      return;\r\n    }\r\n\r\n    this.error = undefined;\r\n\r\n    this.amount = amount;\r\n\r\n    const event = new CustomEvent('amountChanged', { detail: { amount: this.amount } });\r\n    this.dispatchEvent(event);\r\n  }\r\n\r\n  private yesSelected(): void {\r\n    const event = new CustomEvent('yesSelected', { detail: { amount: this.amount } });\r\n    this.dispatchEvent(event);\r\n  }\r\n\r\n  private noThanksSelected(): void {\r\n    this.dispatchEvent(new Event('noThanksSelected'));\r\n  }\r\n\r\n  /** @inheritdoc */\r\n  static get styles(): CSSResult {\r\n    const ctaButtonColor = css`var(--upsellCTAButtonColor, #194880)`;\r\n    const ctaButtonDisabledColor = css`var(--upsellCTAButtonDisabledColor, rgba(109,148,201,0.5))`;\r\n    const amountInputOffset = css`var(--upsellAmountInputOffset, -1rem)`;\r\n\r\n    return css`\r\n      .monthly-amount {\r\n        background-color: #fff;\r\n        padding: 0.5rem 0.625rem;\r\n        border-radius: 5px;\r\n        text-align: center;\r\n        margin-bottom: 0.5rem;\r\n        margin-top: 0;\r\n      }\r\n\r\n      .monthly-amount h1 {\r\n        font-size: 1.8rem;\r\n        font-weight: bold;\r\n        text-align: center;\r\n        line-height: 1.2em;\r\n        margin: 0;\r\n        padding: 0.5rem 0 0 0;\r\n      }\r\n\r\n      .hidden {\r\n        display: none;\r\n      }\r\n\r\n      h3 {\r\n        text-align: center;\r\n        font-size: 1.8rem;\r\n        margin: 0 1rem 0.5rem 1rem;\r\n      }\r\n\r\n      .appeal {\r\n        text-align: center;\r\n        font-size: 1.6rem;\r\n        margin: 0.5rem 1rem;\r\n      }\r\n\r\n      .amount-input {\r\n        transform: translate(${amountInputOffset}, 0); /* translate slightly to center the input */\r\n      }\r\n\r\n      .amount-input .dollar-symbol {\r\n        font-size: 1.8rem;\r\n        font-weight: bold;\r\n      }\r\n\r\n      .amount-input input {\r\n        width: 100px;\r\n        text-align: center;\r\n        border: none;\r\n        border-bottom: 1px solid gray;\r\n        font-weight: bold;\r\n        font-size: 3.4rem;\r\n      }\r\n\r\n      .cta-button {\r\n        font-size: 2rem;\r\n        display: block;\r\n        width: 100%;\r\n        margin-top: 0.5rem;\r\n        padding: 1rem 2rem;\r\n        background-color: ${ctaButtonColor};\r\n        color: #fff;\r\n        border-radius: 5px;\r\n        border: 0;\r\n        font-weight: bold;\r\n        line-height: normal;\r\n        outline: none;\r\n        cursor: pointer;\r\n      }\r\n\r\n      .cta-button:disabled {\r\n        background-color: ${ctaButtonDisabledColor};\r\n        cursor: not-allowed;\r\n      }\r\n\r\n      .paypal-upsell-slot {\r\n        text-align: center;\r\n      }\r\n\r\n      .paypal-upsell-slot-blocker {\r\n        position: absolute;\r\n        width: 100%;\r\n        height: 4.5rem;\r\n        bottom: 0;\r\n        z-index: 250;\r\n        cursor: not-allowed;\r\n        background-color: rgba(255, 255, 255, 0.5);\r\n      }\r\n\r\n      .paypal-upsell-slot-blocker.hidden {\r\n        display: none;\r\n      }\r\n\r\n      #paypal-cover-button {\r\n        position: absolute;\r\n        width: 100%;\r\n        bottom: 0;\r\n      }\r\n\r\n      .paypal-upsell-slot-container {\r\n        position: relative;\r\n      }\r\n\r\n      .paypal-upsell-slot-container .paypal-cta {\r\n        font-size: 2.4rem;\r\n        font-weight: bold;\r\n        margin: 0 1rem 1rem 1rem;\r\n        text-align: center;\r\n      }\r\n\r\n      .error {\r\n        font-size: 1.4rem;\r\n        margin: 0.5rem 0;\r\n        color: red;\r\n      }\r\n\r\n      .or_separator {\r\n        position: relative;\r\n        margin: 0 2rem;\r\n        font-size: 2.6rem;\r\n        font-weight: bold;\r\n        text-transform: uppercase;\r\n        text-align: center;\r\n      }\r\n\r\n      .or_separator:before {\r\n        position: absolute;\r\n        top: calc(50% - 1px);\r\n        right: 0;\r\n        left: 0;\r\n        height: 2px;\r\n        content: '';\r\n        background: #333;\r\n      }\r\n\r\n      .or_separator span {\r\n        display: inline-block;\r\n        position: relative;\r\n        padding: 0 1rem;\r\n        background: #f5f5f7;\r\n      }\r\n    `;\r\n  }\r\n}\r\n"]}

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

@@ -66,8 +66,8 @@ export class DonationFlowModalManager {
         this.modalManager.showModal({
             config: modalConfig,
             userClosedModalCallback: options === null || options === void 0 ? void 0 : options.userClosedModalCallback,
-            customModalContent: html `
-        <donation-form-error-modal-content></donation-form-error-modal-content>
+            customModalContent: html `
+        <donation-form-error-modal-content></donation-form-error-modal-content>
       `,
         });
     }
@@ -85,14 +85,14 @@ export class DonationFlowModalManager {
             closeOnBackdropClick: false,
             headerColor: ModalHeaderColor.Green,
             title: html `${modalTitle}`,
-            message: html `
-        <confirm-donation-modal
-          .amount="${options.amount}"
-          .currencyType="${options.currencyType}"
-          .donationType="${options.donationType}"
-          .confirmDonation=${confirmDonation}
-          .cancelDonation=${cancelDonation}
-        ></confirm-donation-modal>
+            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({
@@ -113,16 +113,16 @@ export class DonationFlowModalManager {
         if (options.amountChanged) {
             options.amountChanged(upsellAmount);
         }
-        const modalContent = html `
-      <upsell-modal-content
-        .amount=${upsellAmount}
-        .yesButtonMode=${(_a = options === null || options === void 0 ? void 0 : options.ctaMode) !== null && _a !== void 0 ? _a : UpsellModalCTAMode.YesButton}
-        @yesSelected=${(e) => (options === null || options === void 0 ? void 0 : options.yesSelected) ? options.yesSelected(e.detail.amount) : undefined}
-        @noThanksSelected=${options === null || options === void 0 ? void 0 : options.noSelected}
-        @amountChanged=${(e) => (options === null || options === void 0 ? void 0 : options.amountChanged) ? options.amountChanged(e.detail.amount) : undefined}
-      >
-        <slot name="paypal-upsell-button"></slot>
-      </upsell-modal-content>
+        const modalContent = html `
+      <upsell-modal-content
+        .amount=${upsellAmount}
+        .yesButtonMode=${(_a = options === null || options === void 0 ? void 0 : options.ctaMode) !== null && _a !== void 0 ? _a : UpsellModalCTAMode.YesButton}
+        @yesSelected=${(e) => (options === null || options === void 0 ? void 0 : options.yesSelected) ? options.yesSelected(e.detail.amount) : undefined}
+        @noThanksSelected=${options === null || options === void 0 ? void 0 : options.noSelected}
+        @amountChanged=${(e) => (options === null || options === void 0 ? void 0 : options.amountChanged) ? options.amountChanged(e.detail.amount) : undefined}
+      >
+        <slot name="paypal-upsell-button"></slot>
+      </upsell-modal-content>
     `;
         return this.modalManager.showModal({
             config: modalConfig,