@4site/engrid-scripts 0.19.1

package/dist/upsell-lightbox.d.ts

@@ -0,0 +1,31 @@
+import { ProcessingFees } from ".";
+import { DonationAmount } from "./events";
+export declare class UpsellLightbox {
+    private options;
+    private overlay;
+    private _form;
+    _amount: DonationAmount;
+    _fees: ProcessingFees;
+    private _frequency;
+    private _dataLayer;
+    private _suggestAmount;
+    private logger;
+    constructor();
+    private renderLightbox;
+    private shouldRun;
+    private shouldSkip;
+    private popupOtherField;
+    private liveAmounts;
+    private liveFrequency;
+    private getUpsellAmount;
+    private shouldOpen;
+    private freqAllowed;
+    private open;
+    private setOriginalAmount;
+    private continue;
+    private close;
+    private getAmountTxt;
+    private getFrequencyTxt;
+    private checkOtherAmount;
+    private renderConversionField;
+}

package/dist/upsell-lightbox.js

@@ -0,0 +1,363 @@
+import { ENGrid, EngridLogger, ProcessingFees, UpsellOptionsDefaults, DataLayer, } from ".";
+import { DonationAmount, DonationFrequency, EnForm } from "./events";
+export class UpsellLightbox {
+    constructor() {
+        this.overlay = document.createElement("div");
+        this._form = EnForm.getInstance();
+        this._amount = DonationAmount.getInstance();
+        this._fees = ProcessingFees.getInstance();
+        this._frequency = DonationFrequency.getInstance();
+        this._dataLayer = DataLayer.getInstance();
+        this._suggestAmount = 0;
+        this.logger = new EngridLogger("UpsellLightbox", "black", "pink", "🪟");
+        let options = "EngridUpsell" in window ? window.EngridUpsell : {};
+        this.options = Object.assign(Object.assign({}, UpsellOptionsDefaults), options);
+        //Disable for "applepay" via Vantiv payment method. Adding it to the array like this so it persists
+        //even if the client provides custom options.
+        this.options.disablePaymentMethods.push("applepay");
+        if (!this.shouldRun()) {
+            this.logger.log("Upsell script should NOT run");
+            // If we're not on a Donation Page, get out
+            return;
+        }
+        this.overlay.id = "enModal";
+        this.overlay.classList.add("is-hidden");
+        this.overlay.classList.add("image-" + this.options.imagePosition);
+        this.renderLightbox();
+        this._form.onSubmit.subscribe(() => this.open());
+    }
+    renderLightbox() {
+        const title = this.options.title
+            .replace("{new-amount}", "<span class='upsell_suggestion'></span>")
+            .replace("{old-amount}", "<span class='upsell_amount'></span>")
+            .replace("{old-frequency}", "<span class='upsell_frequency'></span>");
+        const paragraph = this.options.paragraph
+            .replace("{new-amount}", "<span class='upsell_suggestion'></span>")
+            .replace("{old-amount}", "<span class='upsell_amount'></span>")
+            .replace("{old-frequency}", "<span class='upsell_frequency'></span>");
+        const yes = this.options.yesLabel
+            .replace("{new-amount}", "<span class='upsell_suggestion'></span>")
+            .replace("{old-amount}", "<span class='upsell_amount'></span>")
+            .replace("{old-frequency}", "<span class='upsell_frequency'></span>");
+        const no = this.options.noLabel
+            .replace("{new-amount}", "<span class='upsell_suggestion'></span>")
+            .replace("{old-amount}", "<span class='upsell_amount'></span>")
+            .replace("{old-frequency}", "<span class='upsell_frequency'></span>");
+        const markup = `
+            <div class="upsellLightboxContainer" id="goMonthly">
+              <!-- ideal image size is 480x650 pixels -->
+              <div class="background" style="background-image: url('${this.options.image}');"></div>
+              <div class="upsellLightboxContent">
+              ${this.options.canClose ? `<span id="goMonthlyClose"></span>` : ``}
+                <h1>
+                  ${title}
+                </h1>
+                ${this.options.otherAmount
+            ? `
+                <div class="upsellOtherAmount">
+                  <div class="upsellOtherAmountLabel">
+                    <p>
+                      ${this.options.otherLabel}
+                    </p>
+                  </div>
+                  <div class="upsellOtherAmountInput">
+                    <input href="#" id="secondOtherField" name="secondOtherField" type="text" value="" inputmode="decimal" aria-label="Enter your custom donation amount" autocomplete="off" data-lpignore="true" aria-required="true" size="12">
+                    <small>Minimum ${this.getAmountTxt(this.options.minAmount)}</small>
+                  </div>
+                </div>
+                `
+            : ``}
+
+                <p>
+                  ${paragraph}
+                </p>
+                <!-- YES BUTTON -->
+                <div id="upsellYesButton">
+                  <a class="pseduo__en__submit_button" href="#">
+                    <div>
+                    <span class='loader-wrapper'><span class='loader loader-quart'></span></span>
+                    <span class='label'>${yes}</span>
+                    </div>
+                  </a>
+                </div>
+                <!-- NO BUTTON -->
+                <div id="upsellNoButton">
+                  <button title="Close (Esc)" type="button">
+                    <div>
+                    <span class='loader-wrapper'><span class='loader loader-quart'></span></span>
+                    <span class='label'>${no}</span>
+                    </div>
+                  </button>
+                </div>
+              </div>
+            </div>
+            `;
+        this.overlay.innerHTML = markup;
+        const closeButton = this.overlay.querySelector("#goMonthlyClose");
+        const yesButton = this.overlay.querySelector("#upsellYesButton a");
+        const noButton = this.overlay.querySelector("#upsellNoButton button");
+        yesButton.addEventListener("click", this.continue.bind(this));
+        noButton.addEventListener("click", this.continue.bind(this));
+        if (closeButton)
+            closeButton.addEventListener("click", this.close.bind(this));
+        this.overlay.addEventListener("click", (e) => {
+            if (e.target instanceof Element &&
+                e.target.id == this.overlay.id &&
+                this.options.canClose) {
+                this.close(e);
+            }
+        });
+        document.addEventListener("keyup", (e) => {
+            if (e.key === "Escape" && closeButton) {
+                closeButton.click();
+            }
+        });
+        document.body.appendChild(this.overlay);
+        const otherField = document.querySelector("#secondOtherField");
+        if (otherField) {
+            otherField.addEventListener("keyup", this.popupOtherField.bind(this));
+        }
+        this.logger.log("Upsell script rendered");
+    }
+    // Should we run the script?
+    shouldRun() {
+        // if it's a first page of a Donation page
+        return (
+        // !hideModal &&
+        !this.shouldSkip() &&
+            "EngridUpsell" in window &&
+            !!window.pageJson &&
+            window.pageJson.pageNumber == 1 &&
+            ["donation", "premiumgift"].includes(window.pageJson.pageType));
+    }
+    shouldSkip() {
+        if ("EngridUpsell" in window && window.EngridUpsell.skipUpsell) {
+            return true;
+        }
+        return this.options.skipUpsell;
+    }
+    popupOtherField() {
+        var _a, _b;
+        const value = parseFloat((_b = (_a = this.overlay.querySelector("#secondOtherField")) === null || _a === void 0 ? void 0 : _a.value) !== null && _b !== void 0 ? _b : "");
+        const live_upsell_amount = document.querySelectorAll("#upsellYesButton .upsell_suggestion");
+        const upsellAmount = this.getUpsellAmount();
+        if (!isNaN(value) && value > 0) {
+            this.checkOtherAmount(value);
+        }
+        else {
+            this.checkOtherAmount(upsellAmount);
+        }
+        live_upsell_amount.forEach((elem) => (elem.innerHTML = this.getAmountTxt(upsellAmount + this._fees.calculateFees(upsellAmount))));
+    }
+    liveAmounts() {
+        const live_upsell_amount = document.querySelectorAll(".upsell_suggestion");
+        const live_amount = document.querySelectorAll(".upsell_amount");
+        const upsellAmount = this.getUpsellAmount();
+        const suggestedAmount = upsellAmount + this._fees.calculateFees(upsellAmount);
+        live_upsell_amount.forEach((elem) => (elem.innerHTML = this.getAmountTxt(suggestedAmount)));
+        live_amount.forEach((elem) => (elem.innerHTML = this.getAmountTxt(this._amount.amount + this._fees.fee)));
+    }
+    liveFrequency() {
+        const live_upsell_frequency = document.querySelectorAll(".upsell_frequency");
+        live_upsell_frequency.forEach((elem) => (elem.innerHTML = this.getFrequencyTxt()));
+    }
+    // Return the Suggested Upsell Amount
+    getUpsellAmount() {
+        var _a, _b;
+        const amount = this._amount.amount;
+        const otherAmount = parseFloat((_b = (_a = this.overlay.querySelector("#secondOtherField")) === null || _a === void 0 ? void 0 : _a.value) !== null && _b !== void 0 ? _b : "");
+        if (otherAmount > 0) {
+            return otherAmount > this.options.minAmount
+                ? otherAmount
+                : this.options.minAmount;
+        }
+        let upsellAmount = 0;
+        for (let i = 0; i < this.options.amountRange.length; i++) {
+            let val = this.options.amountRange[i];
+            if (upsellAmount == 0 && amount <= val.max) {
+                upsellAmount = val.suggestion;
+                if (upsellAmount === 0)
+                    return 0;
+                if (typeof upsellAmount !== "number") {
+                    const suggestionMath = upsellAmount.replace("amount", amount.toFixed(2));
+                    upsellAmount = parseFloat(Function('"use strict";return (' + suggestionMath + ")")());
+                }
+                break;
+            }
+        }
+        return upsellAmount > this.options.minAmount
+            ? upsellAmount
+            : this.options.minAmount;
+    }
+    shouldOpen() {
+        const upsellAmount = this.getUpsellAmount();
+        const paymenttype = ENGrid.getFieldValue("transaction.paymenttype") || "";
+        this._suggestAmount = upsellAmount;
+        // If frequency is not onetime or
+        // the modal is already opened or
+        // there's no suggestion for this donation amount,
+        // we should not open
+        if (this.freqAllowed() &&
+            !this.shouldSkip() &&
+            !this.options.disablePaymentMethods.includes(paymenttype.toLowerCase()) &&
+            !this.overlay.classList.contains("is-submitting") &&
+            upsellAmount > 0) {
+            this.logger.log("Upsell Frequency " + this._frequency.frequency);
+            this.logger.log("Upsell Amount " + this._amount.amount);
+            this.logger.log("Upsell Suggested Amount " + upsellAmount);
+            return true;
+        }
+        return false;
+    }
+    // Return true if the current frequency is allowed by the options
+    freqAllowed() {
+        const freq = this._frequency.frequency;
+        const allowed = [];
+        if (this.options.oneTime)
+            allowed.push("onetime");
+        if (this.options.annual)
+            allowed.push("annual");
+        return allowed.includes(freq);
+    }
+    open() {
+        this.logger.log("Upsell script opened");
+        if (!this.shouldOpen()) {
+            // In the circumstance when the form fails to validate via server-side validation, the page will reload
+            // When that happens, we should place the original amount saved in sessionStorage into the upsell original amount field
+            let original = window.sessionStorage.getItem("original");
+            if (original &&
+                document.querySelectorAll(".en__errorList .en__error").length > 0) {
+                this.setOriginalAmount(original);
+            }
+            // Returning true will give the "go ahead" to submit the form
+            this._form.submit = true;
+            return true;
+        }
+        this.liveAmounts();
+        this.liveFrequency();
+        this.overlay.classList.remove("is-hidden");
+        this._form.submit = false;
+        ENGrid.setBodyData("has-lightbox", "");
+        return false;
+    }
+    // Set the original amount into a hidden field using the upsellOriginalGiftAmountFieldName, if provided
+    setOriginalAmount(original) {
+        if (this.options.upsellOriginalGiftAmountFieldName) {
+            let enFieldUpsellOriginalAmount = document.querySelector(".en__field__input.en__field__input--hidden[name='" +
+                this.options.upsellOriginalGiftAmountFieldName +
+                "']");
+            if (!enFieldUpsellOriginalAmount) {
+                let pageform = document.querySelector("form.en__component--page");
+                if (pageform) {
+                    let input = document.createElement("input");
+                    input.setAttribute("type", "hidden");
+                    input.setAttribute("name", this.options.upsellOriginalGiftAmountFieldName);
+                    input.classList.add("en__field__input", "en__field__input--hidden");
+                    pageform.appendChild(input);
+                    enFieldUpsellOriginalAmount = document.querySelector('.en__field__input.en__field__input--hidden[name="' +
+                        this.options.upsellOriginalGiftAmountFieldName +
+                        '"]');
+                }
+            }
+            if (enFieldUpsellOriginalAmount) {
+                // save it to a session variable just in case this page reloaded due to server-side validation error
+                window.sessionStorage.setItem("original", original);
+                enFieldUpsellOriginalAmount.setAttribute("value", original);
+            }
+        }
+    }
+    // Proceed to the next page (upsold or not)
+    continue(e) {
+        var _a;
+        e.preventDefault();
+        if (e.target instanceof Element &&
+            ((_a = document.querySelector("#upsellYesButton")) === null || _a === void 0 ? void 0 : _a.contains(e.target))) {
+            this.logger.success("Upsold");
+            this.setOriginalAmount(this._amount.amount.toString());
+            const upsoldAmount = this.getUpsellAmount();
+            const originalAmount = this._amount.amount;
+            this._frequency.setFrequency("monthly");
+            this._amount.setAmount(upsoldAmount);
+            this._dataLayer.addEndOfGiftProcessEvent("ENGRID_UPSELL", {
+                eventValue: true,
+                originalAmount: originalAmount,
+                upsoldAmount: upsoldAmount,
+                frequency: "monthly",
+            });
+            this._dataLayer.addEndOfGiftProcessVariable("ENGRID_UPSELL", true);
+            this._dataLayer.addEndOfGiftProcessVariable("ENGRID_UPSELL_ORIGINAL_AMOUNT", originalAmount);
+            this._dataLayer.addEndOfGiftProcessVariable("ENGRID_UPSELL_DONATION_FREQUENCY", "MONTHLY");
+            this.renderConversionField("upsellSuccess", "onetime", originalAmount, "monthly", this._suggestAmount, "monthly", upsoldAmount);
+        }
+        else {
+            this.setOriginalAmount("");
+            window.sessionStorage.removeItem("original");
+            this._dataLayer.addEndOfGiftProcessVariable("ENGRID_UPSELL", false);
+            this._dataLayer.addEndOfGiftProcessVariable("ENGRID_UPSELL_DONATION_FREQUENCY", "ONE-TIME");
+            this.renderConversionField("upsellFail", this._frequency.frequency, this._amount.amount, "monthly", this._suggestAmount, this._frequency.frequency, this._amount.amount);
+        }
+        this._form.submitForm();
+    }
+    // Close the lightbox
+    close(e) {
+        e.preventDefault();
+        this.overlay.classList.add("is-hidden");
+        ENGrid.setBodyData("has-lightbox", false);
+        if (this.options.submitOnClose) {
+            this.renderConversionField("upsellFail", this._frequency.frequency, this._amount.amount, "monthly", this._suggestAmount, this._frequency.frequency, this._amount.amount);
+            this._form.submitForm();
+        }
+        else {
+            this._form.dispatchError();
+        }
+    }
+    getAmountTxt(amount = 0) {
+        var _a, _b, _c, _d;
+        const symbol = (_a = ENGrid.getCurrencySymbol()) !== null && _a !== void 0 ? _a : "$";
+        const dec_separator = (_b = ENGrid.getOption("DecimalSeparator")) !== null && _b !== void 0 ? _b : ".";
+        const thousands_separator = (_c = ENGrid.getOption("ThousandsSeparator")) !== null && _c !== void 0 ? _c : "";
+        const dec_places = amount % 1 == 0 ? 0 : (_d = ENGrid.getOption("DecimalPlaces")) !== null && _d !== void 0 ? _d : 2;
+        const amountTxt = ENGrid.formatNumber(amount, dec_places, dec_separator, thousands_separator);
+        return amount > 0 ? symbol + amountTxt : "";
+    }
+    getFrequencyTxt() {
+        const freqTxt = {
+            onetime: "one-time",
+            monthly: "monthly",
+            annual: "annual",
+        };
+        const frequency = this._frequency.frequency;
+        return frequency in freqTxt ? freqTxt[frequency] : frequency;
+    }
+    checkOtherAmount(value) {
+        const otherInput = document.querySelector(".upsellOtherAmountInput");
+        if (otherInput) {
+            if (value >= this.options.minAmount) {
+                otherInput.classList.remove("is-invalid");
+            }
+            else {
+                otherInput.classList.add("is-invalid");
+            }
+        }
+    }
+    renderConversionField(event, // The event that triggered the conversion
+    freq, // The frequency of the donation (onetime, monthly, annual)
+    amt, // The original amount of the donation (before the upsell)
+    sugFreq, // The suggested frequency of the upsell (monthly)
+    sugAmt, // The suggested amount of the upsell
+    subFreq, // The submitted frequency of the upsell (onetime, monthly, annual)
+    subAmt // The submitted amount of the upsell
+    ) {
+        if (this.options.conversionField === "")
+            return;
+        const conversionField = document.querySelector("input[name='" + this.options.conversionField + "']") ||
+            ENGrid.createHiddenInput(this.options.conversionField);
+        if (!conversionField) {
+            this.logger.error("Could not find or create the conversion field");
+            return;
+        }
+        const conversionValue = `event:${event},freq:${freq},amt:${amt},sugFreq:${sugFreq},sugAmt:${sugAmt},subFreq:${subFreq},subAmt:${subAmt}`;
+        conversionField.value = conversionValue;
+        this.logger.log(`Conversion Field ${event}`, conversionValue);
+    }
+}

package/dist/url-params-to-body-attrs.d.ts

@@ -0,0 +1,5 @@
+export declare class UrlParamsToBodyAttrs {
+    private logger;
+    private urlParams;
+    constructor();
+}

package/dist/url-params-to-body-attrs.js

@@ -0,0 +1,14 @@
+//This component adds any url parameters that begin with "data-engrid-" to the body as attributes.
+import { ENGrid, EngridLogger } from ".";
+export class UrlParamsToBodyAttrs {
+    constructor() {
+        this.logger = new EngridLogger("UrlParamsToBodyAttrs", "white", "magenta", "📌");
+        this.urlParams = new URLSearchParams(document.location.search);
+        this.urlParams.forEach((value, key) => {
+            if (key.startsWith("data-engrid-")) {
+                ENGrid.setBodyData(key.split("data-engrid-")[1], value);
+                this.logger.log(`Set "${key}" on body to "${value}" from URL params`);
+            }
+        });
+    }
+}

package/dist/url-to-form.d.ts

@@ -0,0 +1,7 @@
+export declare class UrlToForm {
+    private logger;
+    private urlParams;
+    constructor();
+    private shouldRun;
+    private hasFields;
+}

package/dist/url-to-form.js

@@ -0,0 +1,32 @@
+// Component that allows to set a field value from URL parameters
+// Workflow:
+// 1. Loop through all the URL parameters
+// 2. Check if there's a match with the field name
+// 3. If there's a match AND the field is empty, set the value
+import { ENGrid, EngridLogger } from ".";
+export class UrlToForm {
+    constructor() {
+        this.logger = new EngridLogger("UrlToForm", "white", "magenta", "🔗");
+        this.urlParams = new URLSearchParams(document.location.search);
+        if (!this.shouldRun())
+            return;
+        this.urlParams.forEach((value, key) => {
+            const field = document.getElementsByName(key)[0];
+            if (field) {
+                if (!["text", "textarea"].includes(field.type) || !field.value) {
+                    ENGrid.setFieldValue(key, value);
+                    this.logger.log(`Set: ${key} to ${value}`);
+                }
+            }
+        });
+    }
+    shouldRun() {
+        return !!document.location.search && this.hasFields();
+    }
+    hasFields() {
+        const ret = [...this.urlParams.keys()].map((key) => {
+            return document.getElementsByName(key).length > 0;
+        });
+        return ret.includes(true);
+    }
+}

package/dist/us-only-form.d.ts

@@ -0,0 +1,4 @@
+export declare class UsOnlyForm {
+    constructor();
+    private shouldRun;
+}

package/dist/us-only-form.js

@@ -0,0 +1,30 @@
+/*
+ * This class disables the country field and fixes the country to "United States"
+ */
+import { ENGrid } from ".";
+export class UsOnlyForm {
+    constructor() {
+        if (!this.shouldRun())
+            return;
+        if (!document.querySelector(".en__field--country .en__field__notice")) {
+            ENGrid.addHtml('<div class="en__field__notice"><em>Note: This action is limited to U.S. addresses.</em></div>', ".us-only-form .en__field--country .en__field__element", "after");
+        }
+        const countrySelect = ENGrid.getField("supporter.country");
+        countrySelect.setAttribute("disabled", "disabled");
+        let countryValue = "United States";
+        if ([...countrySelect.options].some((o) => o.value === "US")) {
+            countryValue = "US";
+        }
+        else if ([...countrySelect.options].some((o) => o.value === "USA")) {
+            countryValue = "USA";
+        }
+        ENGrid.setFieldValue("supporter.country", countryValue);
+        ENGrid.createHiddenInput("supporter.country", countryValue);
+        countrySelect.addEventListener("change", () => {
+            countrySelect.value = countryValue;
+        });
+    }
+    shouldRun() {
+        return !!document.querySelector(".en__component--formblock.us-only-form .en__field--country");
+    }
+}

package/dist/version.d.ts

@@ -0,0 +1 @@
+export declare const AppVersion = "0.19.1";

package/dist/version.js

@@ -0,0 +1 @@
+export const AppVersion = "0.19.1";

package/dist/vgs.d.ts

@@ -0,0 +1,16 @@
+export declare class VGS {
+    private logger;
+    private vgsField;
+    private options;
+    private paymentTypeField;
+    private _form;
+    private field_expiration_month;
+    private field_expiration_year;
+    constructor();
+    shouldRun(): boolean;
+    setDefaults(): void;
+    setPaymentType(): void;
+    dumpGlobalVar(): void;
+    private handleExpUpdate;
+    private validate;
+}