@internetarchive/donation-form 0.5.17 → 0.5.18-alpha.1

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

@@ -1,295 +1,295 @@
-import { __decorate } from "tslib";
-import { LitElement, html, css } from 'lit';
-import { customElement, property, query } from 'lit/decorators.js';
-import { CurrencyValidator } from '@internetarchive/donation-form-currency-validator';
-export var UpsellModalCTAMode;
-(function (UpsellModalCTAMode) {
-    UpsellModalCTAMode["YesButton"] = "YesButton";
-    UpsellModalCTAMode["PayPalUpsellSlot"] = "PayPalUpsellSlot";
-})(UpsellModalCTAMode || (UpsellModalCTAMode = {}));
-/**
- * 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 UpsellModalContent
- * @extends {LitElement}
- */
-let UpsellModalContent = class UpsellModalContent extends LitElement {
-    constructor() {
-        super(...arguments);
-        this.yesButtonMode = UpsellModalCTAMode.YesButton;
-        this.amount = 5;
-        this.currencyValidator = new CurrencyValidator();
-    }
-    /** @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>Consider donating monthly</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>
-        `;
-            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>
-        `;
-        }
-    }
-    amountChanged(e) {
-        const target = e.target;
-        const amount = target.value;
-        if (amount.length === 0) {
-            return;
-        }
-        this.handleCustomAmountInput(amount);
-    }
-    handleCustomAmountInput(value) {
-        const amount = parseFloat(value);
-        if (isNaN(amount)) {
-            this.error = html `
-        Please enter a valid amount.
-      `;
-        }
-        else {
-            this.processAmount(amount);
-        }
-    }
-    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>
-      `;
-            return;
-        }
-        if (amount < 1) {
-            if (this.amountInput && this.amountInput.value.length > 0) {
-                this.error = html `
-          The minimum donation amount is $1.
-        `;
-            }
-            return;
-        }
-        this.error = undefined;
-        this.amount = amount;
-        const event = new CustomEvent('amountChanged', { detail: { amount: this.amount } });
-        this.dispatchEvent(event);
-    }
-    yesSelected() {
-        const event = new CustomEvent('yesSelected', { detail: { amount: this.amount } });
-        this.dispatchEvent(event);
-    }
-    noThanksSelected() {
-        this.dispatchEvent(new Event('noThanksSelected'));
-    }
-    /** @inheritdoc */
-    static get styles() {
-        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;
-      }
-    `;
-    }
-};
-__decorate([
-    property({ type: String })
-], UpsellModalContent.prototype, "yesButtonMode", void 0);
-__decorate([
-    property({ type: Number })
-], UpsellModalContent.prototype, "amount", void 0);
-__decorate([
-    property({ type: Object })
-], UpsellModalContent.prototype, "error", void 0);
-__decorate([
-    query('#amount-input')
-], UpsellModalContent.prototype, "amountInput", void 0);
-UpsellModalContent = __decorate([
-    customElement('upsell-modal-content')
-], UpsellModalContent);
-export { UpsellModalContent };
+import { __decorate } from "tslib";
+import { LitElement, html, css } from 'lit';
+import { customElement, property, query } from 'lit/decorators.js';
+import { CurrencyValidator } from '@internetarchive/donation-form-currency-validator';
+export var UpsellModalCTAMode;
+(function (UpsellModalCTAMode) {
+    UpsellModalCTAMode["YesButton"] = "YesButton";
+    UpsellModalCTAMode["PayPalUpsellSlot"] = "PayPalUpsellSlot";
+})(UpsellModalCTAMode || (UpsellModalCTAMode = {}));
+/**
+ * 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 UpsellModalContent
+ * @extends {LitElement}
+ */
+let UpsellModalContent = class UpsellModalContent extends LitElement {
+    constructor() {
+        super(...arguments);
+        this.yesButtonMode = UpsellModalCTAMode.YesButton;
+        this.amount = 5;
+        this.currencyValidator = new CurrencyValidator();
+    }
+    /** @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>Consider donating monthly</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>
+        `;
+            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>
+        `;
+        }
+    }
+    amountChanged(e) {
+        const target = e.target;
+        const amount = target.value;
+        if (amount.length === 0) {
+            return;
+        }
+        this.handleCustomAmountInput(amount);
+    }
+    handleCustomAmountInput(value) {
+        const amount = parseFloat(value);
+        if (isNaN(amount)) {
+            this.error = html `
+        Please enter a valid amount.
+      `;
+        }
+        else {
+            this.processAmount(amount);
+        }
+    }
+    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>
+      `;
+            return;
+        }
+        if (amount < 1) {
+            if (this.amountInput && this.amountInput.value.length > 0) {
+                this.error = html `
+          The minimum donation amount is $1.
+        `;
+            }
+            return;
+        }
+        this.error = undefined;
+        this.amount = amount;
+        const event = new CustomEvent('amountChanged', { detail: { amount: this.amount } });
+        this.dispatchEvent(event);
+    }
+    yesSelected() {
+        const event = new CustomEvent('yesSelected', { detail: { amount: this.amount } });
+        this.dispatchEvent(event);
+    }
+    noThanksSelected() {
+        this.dispatchEvent(new Event('noThanksSelected'));
+    }
+    /** @inheritdoc */
+    static get styles() {
+        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;
+      }
+    `;
+    }
+};
+__decorate([
+    property({ type: String })
+], UpsellModalContent.prototype, "yesButtonMode", void 0);
+__decorate([
+    property({ type: Number })
+], UpsellModalContent.prototype, "amount", void 0);
+__decorate([
+    property({ type: Object })
+], UpsellModalContent.prototype, "error", void 0);
+__decorate([
+    query('#amount-input')
+], UpsellModalContent.prototype, "amountInput", void 0);
+UpsellModalContent = __decorate([
+    customElement('upsell-modal-content')
+], UpsellModalContent);
+export { UpsellModalContent };
 //# sourceMappingURL=upsell-modal-content.js.map

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":";AAAA,OAAO,EAAE,UAAU,EAAE,IAAI,EAAE,GAAG,EAA6B,MAAM,KAAK,CAAC;AACvE,OAAO,EAAE,aAAa,EAAE,QAAQ,EAAE,KAAK,EAAE,MAAM,mBAAmB,CAAC;AACnE,OAAO,EAAE,iBAAiB,EAAE,MAAM,mDAAmD,CAAC;AAEtF,MAAM,CAAN,IAAY,kBAGX;AAHD,WAAY,kBAAkB;IAC5B,6CAAuB,CAAA;IACvB,2DAAqC,CAAA;AACvC,CAAC,EAHW,kBAAkB,KAAlB,kBAAkB,QAG7B;AAED;;;;;;;;;GASG;AAEH,IAAa,kBAAkB,GAA/B,MAAa,kBAAmB,SAAQ,UAAU;IAAlD;;QAC8B,kBAAa,GAAuB,kBAAkB,CAAC,SAAS,CAAC;QAEjE,WAAM,GAAG,CAAC,CAAC;QAM/B,sBAAiB,GAAsB,IAAI,iBAAiB,EAAE,CAAC;IAwQzE,CAAC;IAtQC,kBAAkB;IAClB,MAAM;QACJ,OAAO,IAAI,CAAA;;uBAEQ,IAAI,CAAC,gBAAgB;;;;;;;;;;;;;;;;oBAgBxB,IAAI,CAAC,MAAM;qBACV,IAAI,CAAC,aAAa;uBAChB,IAAI,CAAC,iBAAiB,CAAC,OAAO;;;4BAGzB,IAAI,CAAC,KAAK,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,QAAQ,KAAK,IAAI,CAAC,KAAK;;;QAG7D,IAAI,CAAC,SAAS;KACjB,CAAC;IACJ,CAAC;IAED,IAAY,SAAS;QACnB,QAAQ,IAAI,CAAC,aAAa,EAAE;YAC1B,KAAK,kBAAkB,CAAC,SAAS;gBAC/B,OAAO,IAAI,CAAA;;;;;qBAKE,IAAI,CAAC,WAAW;wBACb,IAAI,CAAC,KAAK,KAAK,SAAS;;;;SAIvC,CAAC;YACJ,KAAK,kBAAkB,CAAC,gBAAgB;gBACtC,OAAO,IAAI,CAAA;;qDAEkC,IAAI,CAAC,KAAK,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,QAAQ;;;;;;SAMtE,CAAC;SACL;IACH,CAAC;IAEO,aAAa,CAAC,CAAQ;QAC5B,MAAM,MAAM,GAAG,CAAC,CAAC,MAA0B,CAAC;QAC5C,MAAM,MAAM,GAAG,MAAM,CAAC,KAAK,CAAC;QAC5B,IAAI,MAAM,CAAC,MAAM,KAAK,CAAC,EAAE;YACvB,OAAO;SACR;QACD,IAAI,CAAC,uBAAuB,CAAC,MAAM,CAAC,CAAC;IACvC,CAAC;IAEO,uBAAuB,CAAC,KAAa;QAC3C,MAAM,MAAM,GAAG,UAAU,CAAC,KAAK,CAAC,CAAC;QACjC,IAAI,KAAK,CAAC,MAAM,CAAC,EAAE;YACjB,IAAI,CAAC,KAAK,GAAG,IAAI,CAAA;;OAEhB,CAAC;SACH;aAAM;YACL,IAAI,CAAC,aAAa,CAAC,MAAM,CAAC,CAAC;SAC5B;IACH,CAAC;IAEO,aAAa,CAAC,MAAc;QAClC,IAAI,MAAM,IAAI,KAAK,EAAE;YACnB,IAAI,CAAC,KAAK,GAAG,IAAI,CAAA;;;OAGhB,CAAC;YACF,OAAO;SACR;QAED,IAAI,MAAM,GAAG,CAAC,EAAE;YACd,IAAI,IAAI,CAAC,WAAW,IAAI,IAAI,CAAC,WAAW,CAAC,KAAK,CAAC,MAAM,GAAG,CAAC,EAAE;gBACzD,IAAI,CAAC,KAAK,GAAG,IAAI,CAAA;;SAEhB,CAAC;aACH;YACD,OAAO;SACR;QAED,IAAI,CAAC,KAAK,GAAG,SAAS,CAAC;QAEvB,IAAI,CAAC,MAAM,GAAG,MAAM,CAAC;QAErB,MAAM,KAAK,GAAG,IAAI,WAAW,CAAC,eAAe,EAAE,EAAE,MAAM,EAAE,EAAE,MAAM,EAAE,IAAI,CAAC,MAAM,EAAE,EAAE,CAAC,CAAC;QACpF,IAAI,CAAC,aAAa,CAAC,KAAK,CAAC,CAAC;IAC5B,CAAC;IAEO,WAAW;QACjB,MAAM,KAAK,GAAG,IAAI,WAAW,CAAC,aAAa,EAAE,EAAE,MAAM,EAAE,EAAE,MAAM,EAAE,IAAI,CAAC,MAAM,EAAE,EAAE,CAAC,CAAC;QAClF,IAAI,CAAC,aAAa,CAAC,KAAK,CAAC,CAAC;IAC5B,CAAC;IAEO,gBAAgB;QACtB,IAAI,CAAC,aAAa,CAAC,IAAI,KAAK,CAAC,kBAAkB,CAAC,CAAC,CAAC;IACpD,CAAC;IAED,kBAAkB;IAClB,MAAM,KAAK,MAAM;QACf,MAAM,cAAc,GAAG,GAAG,CAAA,sCAAsC,CAAC;QACjE,MAAM,sBAAsB,GAAG,GAAG,CAAA,4DAA4D,CAAC;QAC/F,MAAM,iBAAiB,GAAG,GAAG,CAAA,uCAAuC,CAAC;QAErE,OAAO,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;+BAoCiB,iBAAiB;;;;;;;;;;;;;;;;;;;;;;;4BAuBpB,cAAc;;;;;;;;;;;4BAWd,sBAAsB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;KAsE7C,CAAC;IACJ,CAAC;CACF,CAAA;AAhR6B;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;yDAAkE;AAEjE;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;kDAAY;AAEX;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;iDAAwB;AAE3B;IAAvB,KAAK,CAAC,eAAe,CAAC;uDAAgC;AAP5C,kBAAkB;IAD9B,aAAa,CAAC,sBAAsB,CAAC;GACzB,kBAAkB,CAiR9B;SAjRY,kBAAkB","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\">\n        Continue\n      </button>\n      <p class=\"or_separator\"><span>or</span></p>\n      <h3>Consider donating monthly</h3>\n      <p class=\"appeal\">\n        Monthly support helps us reliably plan for the future.\n      </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\">\n              YES, I'll donate monthly\n            </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`\n        Please enter a valid amount.\n      `;\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`\n          The minimum donation amount is $1.\n        `;\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\">\r\n        Continue\r\n      </button>\r\n      <p class=\"or_separator\"><span>or</span></p>\r\n      <h3>Consider donating monthly</h3>\r\n      <p class=\"appeal\">\r\n        Monthly support helps us reliably plan for the future.\r\n      </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\">\r\n              YES, I'll donate monthly\r\n            </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`\r\n        Please enter a valid amount.\r\n      `;\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`\r\n          The minimum donation amount is $1.\r\n        `;\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"]}