@4site/engrid-scripts 0.19.1

package/dist/plaid.js

@@ -0,0 +1,49 @@
+// Component with a helper to auto-click on the Plaid link
+// when that payment method is selected
+import { ENGrid, EngridLogger, EnForm } from ".";
+export class Plaid {
+    constructor() {
+        this.logger = new EngridLogger("Plaid", "peru", "yellow", "🔗");
+        this._form = EnForm.getInstance();
+        this.logger.log("Enabled");
+        this._form.onSubmit.subscribe(() => this.submit());
+    }
+    submit() {
+        const plaidLink = document.querySelector("#plaid-link-button");
+        if (plaidLink && plaidLink.textContent === "Link Account") {
+            // Click the Plaid Link button
+            this.logger.log("Clicking Link");
+            plaidLink.click();
+            this._form.submit = false;
+            // Create a observer to watch the Link ID #plaid-link-button for a new Text Node
+            const observer = new MutationObserver((mutations) => {
+                mutations.forEach((mutation) => {
+                    if (mutation.type === "childList") {
+                        mutation.addedNodes.forEach((node) => {
+                            if (node.nodeType === Node.TEXT_NODE) {
+                                // If the Text Node is "Link Account" then the Link has failed
+                                if (node.nodeValue === "Account Linked") {
+                                    this.logger.log("Plaid Linked");
+                                    this._form.submit = true;
+                                    this._form.submitForm();
+                                }
+                                else {
+                                    this._form.submit = true;
+                                }
+                            }
+                        });
+                    }
+                });
+            });
+            // Start observing the Link ID #plaid-link-button
+            observer.observe(plaidLink, {
+                childList: true,
+                subtree: true,
+            });
+            window.setTimeout(() => {
+                this.logger.log("Enabling Submit");
+                ENGrid.enableSubmit();
+            }, 1000);
+        }
+    }
+}

package/dist/postal-code-validator.d.ts

@@ -0,0 +1,20 @@
+export declare class PostalCodeValidator {
+    private postalCodeField;
+    private _form;
+    private logger;
+    private separator;
+    private regexSeparator;
+    private supportedSeparators;
+    constructor();
+    private shouldRun;
+    private validate;
+    private isValidUSZipCode;
+    /**
+     * Formats the zip code to #####-####  as the user inputs it
+     * The separator is determined by the TidyContact option, but defaults to "-"
+     */
+    private liveValidate;
+    private shouldValidateUSZipCode;
+    private getSeparator;
+    private getRegexSeparator;
+}

package/dist/postal-code-validator.js

@@ -0,0 +1,118 @@
+import { ENGrid } from "./engrid";
+import { EnForm } from "./events";
+import { EngridLogger } from "./logger";
+// Conditionally validates the postcode field for a US format zip code
+// If US is selected as the country, a country has not been selected yet
+// or if there is no country field
+// Allows blank zip code if zip code is not required.
+export class PostalCodeValidator {
+    constructor() {
+        var _a, _b;
+        this.postalCodeField = ENGrid.getField("supporter.postcode");
+        this._form = EnForm.getInstance();
+        this.logger = new EngridLogger("Postal Code Validator", "white", "red", "📬");
+        this.supportedSeparators = ["+", "-", " "];
+        this.separator = this.getSeparator();
+        this.regexSeparator = this.getRegexSeparator(this.separator);
+        if (this.shouldRun()) {
+            (_a = this.postalCodeField) === null || _a === void 0 ? void 0 : _a.addEventListener("blur", () => this.validate());
+            (_b = this.postalCodeField) === null || _b === void 0 ? void 0 : _b.addEventListener("input", () => this.liveValidate());
+            this._form.onValidate.subscribe(() => {
+                if (!this._form.validate)
+                    return;
+                this.liveValidate();
+                // It seems like we need some delay or EN removes our error message.
+                setTimeout(() => {
+                    this.validate();
+                }, 100);
+                // We dont need to validate the zip code, or it is valid
+                const postalCodeValid = !this.shouldValidateUSZipCode() || this.isValidUSZipCode();
+                this._form.validate = postalCodeValid;
+                if (!postalCodeValid) {
+                    this.logger.log(`Invalid Zip Code ${this.postalCodeField.value}`);
+                    this.postalCodeField.scrollIntoView({ behavior: "smooth" });
+                }
+                return postalCodeValid;
+            });
+        }
+    }
+    shouldRun() {
+        return !!(ENGrid.getOption("PostalCodeValidator") && this.postalCodeField);
+    }
+    validate() {
+        if (this.shouldValidateUSZipCode() && !this.isValidUSZipCode()) {
+            ENGrid.setError(".en__field--postcode", `Please enter a valid ZIP Code of ##### or #####${this.separator}####`);
+        }
+        else {
+            ENGrid.removeError(".en__field--postcode");
+        }
+    }
+    isValidUSZipCode() {
+        var _a, _b;
+        const zipCodeRequired = !!document.querySelector(".en__field--postcode.en__mandatory");
+        // If zip code is not required in EN Form Block and the field is empty, it is valid
+        if (!zipCodeRequired && ((_a = this.postalCodeField) === null || _a === void 0 ? void 0 : _a.value) === "") {
+            return true;
+        }
+        const postalCodeRegex = new RegExp(`^\\d{5}(${this.regexSeparator}\\d{4})?$`);
+        return !!((_b = this.postalCodeField) === null || _b === void 0 ? void 0 : _b.value.match(postalCodeRegex));
+    }
+    /**
+     * Formats the zip code to #####-####  as the user inputs it
+     * The separator is determined by the TidyContact option, but defaults to "-"
+     */
+    liveValidate() {
+        var _a;
+        if (!this.shouldValidateUSZipCode())
+            return;
+        let value = (_a = this.postalCodeField) === null || _a === void 0 ? void 0 : _a.value;
+        // If the value is 5 characters or less, remove all non-numeric characters
+        if (value.length <= 5) {
+            value = value.replace(/\D/g, "");
+        }
+        // If one of the supported separators is endered as the 6th character, replace it with the official separator
+        else if (value.length === 6 &&
+            this.supportedSeparators.includes(value[5])) {
+            // Removing all non-numeric characters
+            value = value.replace(/\D/g, "") + this.separator;
+        }
+        else {
+            // Removing all non-numeric characters
+            value = value.replace(/\D/g, "");
+            // Adding the separator after the 5th character
+            value = value.replace(/(\d{5})(\d)/, `$1${this.separator}$2`);
+        }
+        //set field value with max 10 characters
+        this.postalCodeField.value = value.slice(0, 10);
+    }
+    shouldValidateUSZipCode() {
+        // Validating US zip code only if country is US, country has not yet been selected
+        // or if there is no country field
+        const country = ENGrid.getField("supporter.country")
+            ? ENGrid.getFieldValue("supporter.country")
+            : "US";
+        return ["us", "united states", "usa", ""].includes(country.toLowerCase());
+    }
+    getSeparator() {
+        const tidyContact = ENGrid.getOption("TidyContact");
+        if (tidyContact &&
+            tidyContact.us_zip_divider &&
+            this.supportedSeparators.includes(tidyContact.us_zip_divider)) {
+            return tidyContact.us_zip_divider;
+        }
+        return "-";
+    }
+    getRegexSeparator(separator) {
+        switch (separator) {
+            case "+":
+                return "\\+";
+            case "-":
+                return "-";
+            case " ":
+                return "\\s";
+            default:
+                this.logger.log(`Invalid separator "${separator}" provided to PostalCodeValidator, falling back to "-".`);
+                return "-";
+        }
+    }
+}

package/dist/premium-gift.d.ts

@@ -0,0 +1,10 @@
+export declare class PremiumGift {
+    private logger;
+    private enElements;
+    constructor();
+    shoudRun(): boolean;
+    addEventListeners(): void;
+    checkPremiumGift(): void;
+    searchElements(): void;
+    setPremiumTitle(title: string): void;
+}

package/dist/premium-gift.js

@@ -0,0 +1,115 @@
+// Component to handle premium gift features
+// 1 - Add a class to body to indicate which premium gift is selected (data-engrid-premium-gift-name="item-name-slugged")
+// 2 - Add a class to body to indicate if the "maximize my impact" is selected (data-engrid-premium-gift-maximize="true|false")
+// 3 - Check the premium gift when click on the title or description
+// 4 - Create new {$PREMIUMTITLE} merge tag that's replaced with the premium gift name
+import { ENGrid, EngridLogger } from ".";
+export class PremiumGift {
+    constructor() {
+        this.logger = new EngridLogger("PremiumGift", "#232323", "#f7b500", "🎁");
+        this.enElements = new Array();
+        if (!this.shoudRun())
+            return;
+        this.searchElements();
+        this.addEventListeners();
+        this.checkPremiumGift();
+    }
+    shoudRun() {
+        return ("pageJson" in window &&
+            "pageType" in window.pageJson &&
+            window.pageJson.pageType === "premiumgift");
+    }
+    addEventListeners() {
+        ["click", "change"].forEach((event) => {
+            document.addEventListener(event, (e) => {
+                const element = e.target;
+                const premiumGift = element.closest(".en__pg__body");
+                if (premiumGift) {
+                    const premiumGiftInput = premiumGift.querySelector('[name="en__pg"]');
+                    if ("type" in element === false) {
+                        const premiumGiftValue = premiumGiftInput.value;
+                        window.setTimeout(() => {
+                            const newPremiumGift = document.querySelector('[name="en__pg"][value="' + premiumGiftValue + '"]');
+                            if (newPremiumGift) {
+                                newPremiumGift.checked = true;
+                                newPremiumGift.dispatchEvent(new Event("change"));
+                            }
+                        }, 100);
+                    }
+                    window.setTimeout(() => {
+                        this.checkPremiumGift();
+                    }, 110);
+                }
+            });
+        });
+        // Check when visibility of the Premium Gift Block changes.
+        // EN will add "display: none" to this element when the supporter does not qualify for a premium
+        const premiumGiftsBlock = document.querySelector(".en__component--premiumgiftblock");
+        if (premiumGiftsBlock) {
+            const observer = new MutationObserver((mutationsList) => {
+                for (const mutation of mutationsList) {
+                    if (mutation.type === "attributes" &&
+                        mutation.attributeName === "style") {
+                        if (premiumGiftsBlock.style.display === "none") {
+                            this.logger.log("Premium Gift Section hidden - removing premium gift body data attributes and premium title.");
+                            ENGrid.setBodyData("premium-gift-maximize", false);
+                            ENGrid.setBodyData("premium-gift-name", false);
+                            this.setPremiumTitle("");
+                        }
+                    }
+                }
+            });
+            observer.observe(premiumGiftsBlock, { attributes: true });
+        }
+    }
+    checkPremiumGift() {
+        const premiumGift = document.querySelector('[name="en__pg"]:checked');
+        if (premiumGift) {
+            const premiumGiftValue = premiumGift.value;
+            this.logger.log("Premium Gift Value: " + premiumGiftValue);
+            const premiumGiftContainer = premiumGift.closest(".en__pg");
+            if (premiumGiftValue !== "0") {
+                const premiumGiftName = premiumGiftContainer.querySelector(".en__pg__name");
+                ENGrid.setBodyData("premium-gift-maximize", "false");
+                ENGrid.setBodyData("premium-gift-name", ENGrid.slugify(premiumGiftName.innerText));
+                this.setPremiumTitle(premiumGiftName.innerText);
+            }
+            else {
+                ENGrid.setBodyData("premium-gift-maximize", "true");
+                ENGrid.setBodyData("premium-gift-name", false);
+                this.setPremiumTitle("");
+            }
+            if (!premiumGiftContainer.classList.contains("en__pg--selected")) {
+                const checkedPremiumGift = document.querySelector(".en__pg--selected");
+                if (checkedPremiumGift) {
+                    checkedPremiumGift.classList.remove("en__pg--selected");
+                }
+                premiumGiftContainer.classList.add("en__pg--selected");
+            }
+        }
+    }
+    searchElements() {
+        const enElements = document.querySelectorAll(`
+      .en__component--copyblock,
+      .en__component--codeblock,
+      .en__field
+      `);
+        if (enElements.length > 0) {
+            enElements.forEach((item) => {
+                if (item instanceof HTMLElement &&
+                    item.innerHTML.includes("{$PREMIUMTITLE}")) {
+                    item.innerHTML = item.innerHTML.replace("{$PREMIUMTITLE}", `<span class="engrid_premium_title"></span>`);
+                    this.enElements.push(item);
+                }
+            });
+        }
+    }
+    setPremiumTitle(title) {
+        this.enElements.forEach((item) => {
+            const premiumTitle = item.querySelector(".engrid_premium_title");
+            if (premiumTitle) {
+                premiumTitle.innerHTML = title;
+            }
+        });
+    }
+}

package/dist/progress-bar.d.ts

@@ -0,0 +1,3 @@
+export declare class ProgressBar {
+    constructor();
+}

package/dist/progress-bar.js

@@ -0,0 +1,40 @@
+import { ENGrid } from ".";
+export class ProgressBar {
+    constructor() {
+        var _a, _b;
+        const progressIndicator = document.querySelector("span[data-engrid-progress-indicator]");
+        const pageCount = ENGrid.getPageCount();
+        const pageNumber = ENGrid.getPageNumber();
+        if (!progressIndicator || !pageCount || !pageNumber) {
+            return;
+        }
+        let maxValue = (_a = progressIndicator.getAttribute("max")) !== null && _a !== void 0 ? _a : 100;
+        if (typeof maxValue === "string")
+            maxValue = parseInt(maxValue);
+        let amountValue = (_b = progressIndicator.getAttribute("amount")) !== null && _b !== void 0 ? _b : 0;
+        if (typeof amountValue === "string")
+            amountValue = parseInt(amountValue);
+        const prevPercentage = pageNumber === 1
+            ? 0
+            : Math.ceil(((pageNumber - 1) / pageCount) * maxValue);
+        let percentage = pageNumber === 1 ? 0 : Math.ceil((pageNumber / pageCount) * maxValue);
+        const scalePrev = prevPercentage / 100;
+        let scale = percentage / 100;
+        if (amountValue) {
+            percentage =
+                Math.ceil(amountValue) > Math.ceil(maxValue) ? maxValue : amountValue;
+            scale = percentage / 100;
+        }
+        progressIndicator.innerHTML = `
+			<div class="indicator__wrap">
+				<span class="indicator__progress" style="transform: scaleX(${scalePrev});"></span>
+				<span class="indicator__percentage">${percentage}<span class="indicator__percentage-sign">%</span></span>
+			</div>`;
+        if (percentage !== prevPercentage) {
+            const progress = document.querySelector(".indicator__progress");
+            requestAnimationFrame(function () {
+                progress.style.transform = `scaleX(${scale})`;
+            });
+        }
+    }
+}

package/dist/remember-me.d.ts

@@ -0,0 +1,61 @@
+import { EnForm, RememberMeEvents } from "./events";
+export declare class RememberMe {
+    _form: EnForm;
+    _events: RememberMeEvents;
+    private remoteUrl;
+    private cookieName;
+    private fieldNames;
+    private fieldData;
+    private cookieExpirationDays;
+    private iframe;
+    private rememberMeOptIn;
+    private fieldDonationAmountRadioName;
+    private fieldDonationAmountOtherName;
+    private fieldDonationRecurrPayRadioName;
+    private fieldDonationAmountOtherCheckboxID;
+    private fieldOptInSelectorTarget;
+    private fieldOptInSelectorTargetLocation;
+    private fieldClearSelectorTarget;
+    private fieldClearSelectorTargetLocation;
+    constructor(options: {
+        remoteUrl?: string;
+        cookieName?: string;
+        cookieExpirationDays?: number;
+        fieldNames?: string[];
+        fieldDonationAmountRadioName?: string;
+        fieldDonationAmountOtherName?: string;
+        fieldDonationRecurrPayRadioName?: string;
+        fieldDonationAmountOtherCheckboxID?: string;
+        fieldOptInSelectorTarget?: string;
+        fieldOptInSelectorTargetLocation?: string;
+        fieldClearSelectorTarget?: string;
+        fieldClearSelectorTargetLocation?: string;
+        checked?: boolean;
+    });
+    private updateFieldData;
+    private insertClearRememberMeLink;
+    private getElementByFirstSelector;
+    private insertRememberMeOptin;
+    private useRemote;
+    private createIframe;
+    private clearCookie;
+    private clearCookieOnRemote;
+    private saveCookieToRemote;
+    private readCookie;
+    private saveCookie;
+    private readFields;
+    private setFieldValue;
+    private clearFields;
+    /**
+     * Writes the values from the fieldData object to the corresponding HTML input fields.
+     *
+     * This function iterates over the fieldNames array and for each field name, it selects the corresponding HTML input field.
+     * If the field is found and its tag name is "INPUT", it checks if the field name matches certain conditions (like being a donation recurring payment radio button or a donation amount radio button).
+     * Depending on these conditions, it either clicks the field or sets its value using the setFieldValue function.
+     * If the field tag name is "SELECT", it sets its value using the setFieldValue function.
+     *
+     * @param overwrite - A boolean indicating whether to overwrite the existing value of the fields. Defaults to false.
+     */
+    private writeFields;
+    private isJson;
+}