@4site/engrid-scripts 0.19.1

package/dist/remember-me.js

@@ -0,0 +1,358 @@
+import * as cookie from "./cookie";
+import { EnForm, RememberMeEvents } from "./events";
+const tippy = require("tippy.js").default;
+export class RememberMe {
+    constructor(options) {
+        this._form = EnForm.getInstance();
+        this._events = RememberMeEvents.getInstance();
+        this.iframe = null;
+        this.remoteUrl = options.remoteUrl ? options.remoteUrl : null;
+        this.cookieName = options.cookieName
+            ? options.cookieName
+            : "engrid-autofill";
+        this.cookieExpirationDays = options.cookieExpirationDays
+            ? options.cookieExpirationDays
+            : 365;
+        this.rememberMeOptIn = options.checked ? options.checked : false;
+        this.fieldNames = options.fieldNames ? options.fieldNames : [];
+        this.fieldDonationAmountRadioName = options.fieldDonationAmountRadioName
+            ? options.fieldDonationAmountRadioName
+            : "transaction.donationAmt";
+        this.fieldDonationAmountOtherName = options.fieldDonationAmountOtherName
+            ? options.fieldDonationAmountOtherName
+            : "transaction.donationAmt.other";
+        this.fieldDonationRecurrPayRadioName =
+            options.fieldDonationRecurrPayRadioName
+                ? options.fieldDonationRecurrPayRadioName
+                : "transaction.recurrpay";
+        this.fieldDonationAmountOtherCheckboxID =
+            options.fieldDonationAmountOtherCheckboxID
+                ? options.fieldDonationAmountOtherCheckboxID
+                : "#en__field_transaction_donationAmt4";
+        this.fieldOptInSelectorTarget = options.fieldOptInSelectorTarget
+            ? options.fieldOptInSelectorTarget
+            : ".en__field--emailAddress.en__field";
+        this.fieldOptInSelectorTargetLocation =
+            options.fieldOptInSelectorTargetLocation
+                ? options.fieldOptInSelectorTargetLocation
+                : "after";
+        this.fieldClearSelectorTarget = options.fieldClearSelectorTarget
+            ? options.fieldClearSelectorTarget
+            : 'label[for="en__field_supporter_firstName"]';
+        this.fieldClearSelectorTargetLocation =
+            options.fieldClearSelectorTargetLocation
+                ? options.fieldClearSelectorTargetLocation
+                : "before";
+        this.fieldData = {};
+        if (this.useRemote()) {
+            this.createIframe(() => {
+                if (this.iframe && this.iframe.contentWindow) {
+                    this.iframe.contentWindow.postMessage(JSON.stringify({ key: this.cookieName, operation: "read" }), "*");
+                    this._form.onSubmit.subscribe(() => {
+                        if (this.rememberMeOptIn) {
+                            this.readFields();
+                            this.saveCookieToRemote();
+                        }
+                    });
+                }
+            }, (event) => {
+                let data;
+                if (event.data &&
+                    typeof event.data === "string" &&
+                    this.isJson(event.data)) {
+                    data = JSON.parse(event.data);
+                }
+                if (data &&
+                    data.key &&
+                    data.value !== undefined &&
+                    data.key === this.cookieName) {
+                    this.updateFieldData(data.value);
+                    this.writeFields();
+                    let hasFieldData = Object.keys(this.fieldData).length > 0;
+                    if (!hasFieldData) {
+                        this.insertRememberMeOptin();
+                    }
+                    else {
+                        this.insertClearRememberMeLink();
+                    }
+                }
+            });
+        }
+        else {
+            this.readCookie();
+            let hasFieldData = Object.keys(this.fieldData).length > 0;
+            if (!hasFieldData) {
+                this.insertRememberMeOptin();
+                this.rememberMeOptIn = false;
+            }
+            else {
+                this.insertClearRememberMeLink();
+                this.rememberMeOptIn = true;
+            }
+            this.writeFields();
+            this._form.onSubmit.subscribe(() => {
+                if (this.rememberMeOptIn) {
+                    this.readFields();
+                    this.saveCookie();
+                }
+            });
+        }
+    }
+    updateFieldData(jsonData) {
+        if (jsonData) {
+            let data = JSON.parse(jsonData);
+            for (let i = 0; i < this.fieldNames.length; i++) {
+                if (data[this.fieldNames[i]] !== undefined) {
+                    this.fieldData[this.fieldNames[i]] = decodeURIComponent(data[this.fieldNames[i]]);
+                }
+            }
+        }
+    }
+    insertClearRememberMeLink() {
+        let clearRememberMeField = document.getElementById("clear-autofill-data");
+        if (!clearRememberMeField) {
+            const clearAutofillLabel = "clear autofill";
+            clearRememberMeField = document.createElement("a");
+            clearRememberMeField.setAttribute("id", "clear-autofill-data");
+            clearRememberMeField.classList.add("label-tooltip");
+            clearRememberMeField.setAttribute("style", "cursor: pointer;");
+            clearRememberMeField.innerHTML = `(${clearAutofillLabel})`;
+            const targetField = this.getElementByFirstSelector(this.fieldClearSelectorTarget);
+            if (targetField) {
+                if (this.fieldClearSelectorTargetLocation === "after") {
+                    targetField.appendChild(clearRememberMeField);
+                }
+                else {
+                    targetField.prepend(clearRememberMeField);
+                }
+            }
+        }
+        clearRememberMeField.addEventListener("click", (e) => {
+            e.preventDefault();
+            this.clearFields(["supporter.country" /*, 'supporter.emailAddress'*/]);
+            if (this.useRemote()) {
+                this.clearCookieOnRemote();
+            }
+            else {
+                this.clearCookie();
+            }
+            let clearAutofillLink = document.getElementById("clear-autofill-data");
+            if (clearAutofillLink) {
+                clearAutofillLink.style.display = "none";
+            }
+            this.rememberMeOptIn = false;
+            this._events.dispatchClear();
+            window.dispatchEvent(new CustomEvent("RememberMe_Cleared"));
+        });
+        this._events.dispatchLoad(true);
+        window.dispatchEvent(new CustomEvent("RememberMe_Loaded", { detail: { withData: true } }));
+    }
+    getElementByFirstSelector(selectorsString) {
+        // iterate through the selectors until we find one that exists
+        let targetField = null;
+        const selectorTargets = selectorsString.split(",");
+        for (let i = 0; i < selectorTargets.length; i++) {
+            targetField = document.querySelector(selectorTargets[i]);
+            if (targetField) {
+                break;
+            }
+        }
+        return targetField;
+    }
+    insertRememberMeOptin() {
+        let rememberMeOptInField = document.getElementById("remember-me-opt-in");
+        if (!rememberMeOptInField) {
+            const rememberMeLabel = "Remember Me";
+            const rememberMeInfo = `
+				Check “Remember me” to complete forms on this device faster. 
+				While your financial information won’t be stored, you should only check this box from a personal device. 
+				Click “Clear autofill” to remove the information from your device at any time.
+			`;
+            const rememberMeOptInFieldChecked = this.rememberMeOptIn ? "checked" : "";
+            const rememberMeOptInField = document.createElement("div");
+            rememberMeOptInField.classList.add("en__field", "en__field--checkbox", "en__field--question", "rememberme-wrapper");
+            rememberMeOptInField.setAttribute("id", "remember-me-opt-in");
+            rememberMeOptInField.setAttribute("style", "overflow-x: hidden;");
+            rememberMeOptInField.innerHTML = `
+        <div class="en__field__element en__field__element--checkbox">
+          <div class="en__field__item">
+            <input id="remember-me-checkbox" type="checkbox" class="en__field__input en__field__input--checkbox" ${rememberMeOptInFieldChecked} />
+            <label for="remember-me-checkbox" class="en__field__label en__field__label--item" style="white-space: nowrap;">
+              <div class="rememberme-content" style="display: inline-flex; align-items: center;">
+                ${rememberMeLabel}
+                <a id="rememberme-learn-more-toggle" style="display: inline-block; display: inline-flex; align-items: center; cursor: pointer; margin-left: 10px; margin-top: var(--rememberme-learn-more-toggle_margin-top)">
+                  <svg style="height: 14px; width: auto; z-index: 1;" width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M11 7H9V5H11V7ZM11 9H9V15H11V9ZM10 2C5.59 2 2 5.59 2 10C2 14.41 5.59 18 10 18C14.41 18 18 14.41 18 10C18 5.59 14.41 2 10 2ZM10 0C15.523 0 20 4.477 20 10C20 15.523 15.523 20 10 20C4.477 20 0 15.523 0 10C0 4.477 4.477 0 10 0Z" fill="currentColor"/></svg>
+                </a>
+              </div>
+            </label>
+          </div>
+        </div>
+			`;
+            const targetField = this.getElementByFirstSelector(this.fieldOptInSelectorTarget);
+            if (targetField && targetField.parentNode) {
+                targetField.parentNode.insertBefore(rememberMeOptInField, this.fieldOptInSelectorTargetLocation == "before"
+                    ? targetField
+                    : targetField.nextSibling);
+                const rememberMeCheckbox = document.getElementById("remember-me-checkbox");
+                if (rememberMeCheckbox) {
+                    rememberMeCheckbox.addEventListener("change", () => {
+                        if (rememberMeCheckbox.checked) {
+                            this.rememberMeOptIn = true;
+                        }
+                        else {
+                            this.rememberMeOptIn = false;
+                        }
+                    });
+                }
+                tippy("#rememberme-learn-more-toggle", { content: rememberMeInfo });
+            }
+        }
+        else if (this.rememberMeOptIn) {
+            rememberMeOptInField.checked = true;
+        }
+        this._events.dispatchLoad(false);
+        window.dispatchEvent(new CustomEvent("RememberMe_Loaded", { detail: { withData: false } }));
+    }
+    useRemote() {
+        return (!!this.remoteUrl &&
+            typeof window.postMessage === "function" &&
+            window.JSON &&
+            window.localStorage);
+    }
+    createIframe(iframeLoaded, messageReceived) {
+        if (this.remoteUrl) {
+            let iframe = document.createElement("iframe");
+            iframe.style.cssText =
+                "position:absolute;width:1px;height:1px;left:-9999px;";
+            iframe.src = this.remoteUrl;
+            iframe.setAttribute("sandbox", "allow-same-origin allow-scripts");
+            this.iframe = iframe;
+            document.body.appendChild(this.iframe);
+            this.iframe.addEventListener("load", () => iframeLoaded(), false);
+            window.addEventListener("message", (event) => {
+                var _a;
+                if (((_a = this.iframe) === null || _a === void 0 ? void 0 : _a.contentWindow) === event.source) {
+                    messageReceived(event);
+                }
+            }, false);
+        }
+    }
+    clearCookie() {
+        this.fieldData = {};
+        this.saveCookie();
+    }
+    clearCookieOnRemote() {
+        this.fieldData = {};
+        this.saveCookieToRemote();
+    }
+    saveCookieToRemote() {
+        if (this.iframe && this.iframe.contentWindow) {
+            this.iframe.contentWindow.postMessage(JSON.stringify({
+                key: this.cookieName,
+                value: this.fieldData,
+                operation: "write",
+                expires: this.cookieExpirationDays,
+            }), "*");
+        }
+    }
+    readCookie() {
+        this.updateFieldData(cookie.get(this.cookieName) || "");
+    }
+    saveCookie() {
+        cookie.set(this.cookieName, JSON.stringify(this.fieldData), {
+            expires: this.cookieExpirationDays,
+        });
+    }
+    readFields() {
+        for (let i = 0; i < this.fieldNames.length; i++) {
+            let fieldSelector = "[name='" + this.fieldNames[i] + "']";
+            let field = document.querySelector(fieldSelector);
+            if (field) {
+                if (field.tagName === "INPUT") {
+                    let type = field.getAttribute("type");
+                    if (type === "radio" || type === "checkbox") {
+                        field = document.querySelector(fieldSelector + ":checked");
+                    }
+                    this.fieldData[this.fieldNames[i]] = encodeURIComponent(field.value);
+                }
+                else if (field.tagName === "SELECT") {
+                    this.fieldData[this.fieldNames[i]] = encodeURIComponent(field.value);
+                }
+            }
+        }
+    }
+    setFieldValue(field, value, overwrite = false) {
+        if (field && value !== undefined) {
+            if ((field.value && overwrite) || !field.value) {
+                field.value = value;
+            }
+        }
+    }
+    clearFields(skipFields) {
+        for (let key in this.fieldData) {
+            if (skipFields.includes(key)) {
+                delete this.fieldData[key];
+            }
+            else if (this.fieldData[key] === "") {
+                delete this.fieldData[key];
+            }
+            else {
+                this.fieldData[key] = "";
+            }
+        }
+        this.writeFields(true);
+    }
+    /**
+     * 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.
+     */
+    writeFields(overwrite = false) {
+        for (let i = 0; i < this.fieldNames.length; i++) {
+            let fieldSelector = "[name='" + this.fieldNames[i] + "']";
+            let field = document.querySelector(fieldSelector);
+            if (field) {
+                if (field.tagName === "INPUT") {
+                    if (this.fieldNames[i] === this.fieldDonationRecurrPayRadioName) {
+                        if (this.fieldData[this.fieldNames[i]] === "Y") {
+                            field.click();
+                        }
+                    }
+                    else if (this.fieldDonationAmountRadioName === this.fieldNames[i]) {
+                        field = document.querySelector(fieldSelector +
+                            "[value='" +
+                            this.fieldData[this.fieldNames[i]] +
+                            "']");
+                        if (field) {
+                            field.click();
+                        }
+                        else {
+                            field = document.querySelector("input[name='" + this.fieldDonationAmountOtherName + "']");
+                            this.setFieldValue(field, this.fieldData[this.fieldNames[i]], true);
+                        }
+                    }
+                    else {
+                        this.setFieldValue(field, this.fieldData[this.fieldNames[i]], overwrite);
+                    }
+                }
+                else if (field.tagName === "SELECT") {
+                    this.setFieldValue(field, this.fieldData[this.fieldNames[i]], true);
+                }
+            }
+        }
+    }
+    isJson(str) {
+        try {
+            JSON.parse(str);
+        }
+        catch (e) {
+            return false;
+        }
+        return true;
+    }
+}

package/dist/required-if-visible.d.ts

@@ -0,0 +1,8 @@
+export declare class RequiredIfVisible {
+    private logger;
+    private _form;
+    private requiredIfVisibleElements;
+    constructor();
+    private shouldRun;
+    private validate;
+}

package/dist/required-if-visible.js

@@ -0,0 +1,60 @@
+import { EnForm, ENGrid, EngridLogger } from ".";
+export class RequiredIfVisible {
+    constructor() {
+        this.logger = new EngridLogger("RequiredIfVisible", "#FFFFFF", "#811212", "🚥");
+        this._form = EnForm.getInstance();
+        this.requiredIfVisibleElements = document.querySelectorAll(`
+    .i-required .en__field,
+    .i1-required .en__field:nth-of-type(1),
+    .i2-required .en__field:nth-of-type(2),
+    .i3-required .en__field:nth-of-type(3),
+    .i4-required .en__field:nth-of-type(4),
+    .i5-required .en__field:nth-of-type(5),
+    .i6-required .en__field:nth-of-type(6),
+    .i7-required .en__field:nth-of-type(7),
+    .i8-required .en__field:nth-of-type(8),
+    .i9-required .en__field:nth-of-type(9),
+    .i10-required .en__field:nth-of-type(10),
+    .i11-required .en__field:nth-of-type(11)
+    `);
+        if (!this.shouldRun())
+            return;
+        this._form.onValidate.subscribe(this.validate.bind(this));
+    }
+    shouldRun() {
+        return this.requiredIfVisibleElements.length > 0;
+    }
+    validate() {
+        // We're converting the NodeListOf<HTMLElement> to an Array<HTMLElement>
+        // because we need to reverse the order of the elements so the last error
+        // is the highest element to get focus()
+        Array.from(this.requiredIfVisibleElements)
+            .reverse()
+            .forEach((field) => {
+            ENGrid.removeError(field);
+            if (ENGrid.isVisible(field)) {
+                this.logger.log(`${field.getAttribute("class")} is visible`);
+                const fieldElement = field.querySelector("input:not([type=hidden]) , select, textarea");
+                if (fieldElement &&
+                    fieldElement.closest("[data-unhidden]") === null &&
+                    !ENGrid.getFieldValue(fieldElement.getAttribute("name"))) {
+                    const fieldLabel = field.querySelector(".en__field__label");
+                    if (fieldLabel) {
+                        this.logger.log(`${fieldLabel.innerText} is required`);
+                        window.setTimeout(() => {
+                            ENGrid.setError(field, `${fieldLabel.innerText} is required`);
+                        }, 100);
+                    }
+                    else {
+                        this.logger.log(`${fieldElement.getAttribute("name")} is required`);
+                        window.setTimeout(() => {
+                            ENGrid.setError(field, `This field is required`);
+                        }, 100);
+                    }
+                    fieldElement.focus();
+                    this._form.validate = false;
+                }
+            }
+        });
+    }
+}

package/dist/set-attr.d.ts

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

package/dist/set-attr.js

@@ -0,0 +1,31 @@
+/*+
+  The class is used to set body attributes via click handlers.
+  The format is "setattr--{attribute}--{value}".
+  e.g. setattr--data-engrid-hide-fast-address-details--true
+ */
+import { ENGrid, EngridLogger } from ".";
+export class SetAttr {
+    constructor() {
+        this.logger = new EngridLogger("SetAttr", "black", "yellow", "📌");
+        const enGrid = document.getElementById("engrid");
+        if (enGrid) {
+            enGrid.addEventListener("click", (e) => {
+                const clickedEl = e.target;
+                if (typeof clickedEl.className !== "string") {
+                    return;
+                }
+                const clickedElClassNames = clickedEl.className.split(" ");
+                if (clickedElClassNames.some((className) => className.startsWith("setattr--"))) {
+                    clickedEl.classList.forEach((className) => {
+                        //Check element has class with format "setattr--attribute--value"
+                        const match = className.match(/^setattr--(.+)--(.+)$/i);
+                        if (match && match[1] && match[2]) {
+                            this.logger.log(`Clicked element with class "${className}". Setting body attribute "${match[1]}" to "${match[2]}"`);
+                            ENGrid.setBodyData(match[1].replace("data-engrid-", ""), match[2]);
+                        }
+                    });
+                }
+            });
+        }
+    }
+}

package/dist/set-recurr-freq.d.ts

@@ -0,0 +1,7 @@
+export declare class setRecurrFreq {
+    private _frequency;
+    private _amount;
+    private linkClass;
+    private checkboxName;
+    constructor();
+}

package/dist/set-recurr-freq.js

@@ -0,0 +1,70 @@
+import { ENGrid } from ".";
+import { DonationFrequency, DonationAmount } from "./events";
+export class setRecurrFreq {
+    constructor() {
+        this._frequency = DonationFrequency.getInstance();
+        this._amount = DonationAmount.getInstance();
+        this.linkClass = "setRecurrFreq-";
+        this.checkboxName = "engrid.recurrfreq";
+        // Watch the links that starts with linkClass
+        document
+            .querySelectorAll(`a[class^="${this.linkClass}"]`)
+            .forEach((element) => {
+            element.addEventListener("click", (e) => {
+                // Get the right class
+                const setRecurrFreqClass = element.className
+                    .split(" ")
+                    .filter((linkClass) => linkClass.startsWith(this.linkClass));
+                if (ENGrid.debug)
+                    console.log(setRecurrFreqClass);
+                if (setRecurrFreqClass.length) {
+                    e.preventDefault();
+                    ENGrid.setFieldValue("transaction.recurrfreq", setRecurrFreqClass[0]
+                        .substring(this.linkClass.length)
+                        .toUpperCase());
+                    this._frequency.load();
+                }
+            });
+        });
+        const currentFrequency = ENGrid.getFieldValue("transaction.recurrfreq").toUpperCase();
+        // Watch checkboxes with the name checkboxName
+        document.getElementsByName(this.checkboxName).forEach((element) => {
+            // Set checked status per currently-set frequency
+            const frequency = element.value.toUpperCase();
+            if (frequency === currentFrequency) {
+                element.checked = true;
+            }
+            else {
+                element.checked = false;
+            }
+            element.addEventListener("change", () => {
+                const frequency = element.value.toUpperCase();
+                if (element.checked) {
+                    ENGrid.setFieldValue("transaction.recurrfreq", frequency);
+                    ENGrid.setFieldValue("transaction.recurrpay", "Y");
+                    this._frequency.load();
+                    this._amount.setAmount(this._amount.amount, false);
+                }
+                else if (frequency !== "ONETIME") {
+                    ENGrid.setFieldValue("transaction.recurrfreq", "ONETIME");
+                    ENGrid.setFieldValue("transaction.recurrpay", "N");
+                    this._frequency.load();
+                    this._amount.setAmount(this._amount.amount, false);
+                }
+            });
+        });
+        // Uncheck the checkbox when frequency != checkbox value
+        this._frequency.onFrequencyChange.subscribe(() => {
+            const currentFrequency = this._frequency.frequency.toUpperCase();
+            document.getElementsByName(this.checkboxName).forEach((element) => {
+                const elementFrequency = element.value.toUpperCase();
+                if (element.checked && elementFrequency !== currentFrequency) {
+                    element.checked = false;
+                }
+                else if (!element.checked && elementFrequency === currentFrequency) {
+                    element.checked = true;
+                }
+            });
+        });
+    }
+}

package/dist/show-hide-radio-checkboxes.d.ts

@@ -0,0 +1,13 @@
+export declare class ShowHideRadioCheckboxes {
+    elements: NodeList;
+    classes: string;
+    private logger;
+    createDataAttributes(): void;
+    hideAll(): void;
+    hide(item: HTMLInputElement): void;
+    show(item: HTMLInputElement): void;
+    private toggleValue;
+    getSessionState(): any;
+    storeSessionState(): void;
+    constructor(elements: string, classes: string);
+}