@4site/engrid-scripts 0.19.1

package/dist/autocomplete.js

@@ -0,0 +1,38 @@
+// This class adds the autocomplete attribute to
+// the most common input elements
+import { EngridLogger } from ".";
+export class Autocomplete {
+    constructor() {
+        this.logger = new EngridLogger("Autocomplete", "#330033", "#f0f0f0", "📇");
+        this.autoCompleteField('[name="supporter.firstName"]', "given-name");
+        this.autoCompleteField('[name="supporter.lastName"]', "family-name");
+        this.autoCompleteField("#en__field_transaction_ccexpire", "cc-exp-month");
+        this.autoCompleteField('[name="transaction.ccexpire"]:not(#en__field_transaction_ccexpire)', "cc-exp-year");
+        this.autoCompleteField('[name="supporter.emailAddress"]', "email");
+        this.autoCompleteField('[name="supporter.phoneNumber"]', "tel");
+        this.autoCompleteField('[name="supporter.country"]', "country");
+        this.autoCompleteField('[name="supporter.address1"]', "address-line1");
+        this.autoCompleteField('[name="supporter.address2"]', "address-line2");
+        this.autoCompleteField('[name="supporter.city"]', "address-level2");
+        this.autoCompleteField('[name="supporter.region"]', "address-level1");
+        this.autoCompleteField('[name="supporter.postcode"]', "postal-code");
+        // Ignore Autocomplete on the Recipient Email Field & Address ("none" is intentional because "off" doesn't work)
+        this.autoCompleteField('[name="transaction.honname"]', "none");
+        this.autoCompleteField('[name="transaction.infemail"]', "none");
+        this.autoCompleteField('[name="transaction.infname"]', "none");
+        this.autoCompleteField('[name="transaction.infadd1"]', "none");
+        this.autoCompleteField('[name="transaction.infadd2"]', "none");
+        this.autoCompleteField('[name="transaction.infcity"]', "none");
+        this.autoCompleteField('[name="transaction.infpostcd"]', "none");
+    }
+    autoCompleteField(querySelector, autoCompleteValue) {
+        let field = document.querySelector(querySelector);
+        if (field) {
+            field.autocomplete = autoCompleteValue;
+            return true;
+        }
+        if (autoCompleteValue !== "none")
+            this.logger.log("Field Not Found", querySelector);
+        return false;
+    }
+}

package/dist/autosubmit.d.ts

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

package/dist/autosubmit.js

@@ -0,0 +1,14 @@
+// Automatically submits the page if a URL argument is present
+import { ENGrid, EngridLogger, EnForm } from ".";
+export class Autosubmit {
+    constructor() {
+        this.logger = new EngridLogger("Autosubmit", "#f0f0f0", "#ff0000", "🚀");
+        this._form = EnForm.getInstance();
+        if (ENGrid.checkNested(window.EngagingNetworks, "require", "_defined", "enjs", "checkSubmissionFailed") &&
+            !window.EngagingNetworks.require._defined.enjs.checkSubmissionFailed() &&
+            ENGrid.getUrlParameter("autosubmit") === "Y") {
+            this.logger.log("Autosubmitting Form");
+            this._form.submitForm();
+        }
+    }
+}

package/dist/branding-html.d.ts

@@ -0,0 +1,14 @@
+/**
+ * Inserts all of the branding HTML from https://github.com/4site-interactive-studios/engrid/tree/main/reference-materials/html/brand-guide-markup
+ * into the body-main section of the page.
+ */
+export declare class BrandingHtml {
+    private assetBaseUrl;
+    private brandingHtmlFiles;
+    private bodyMain;
+    private htmlFetched;
+    private fetchHtml;
+    private appendHtml;
+    show(): void;
+    hide(): void;
+}

package/dist/branding-html.js

@@ -0,0 +1,70 @@
+var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
+    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
+    return new (P || (P = Promise))(function (resolve, reject) {
+        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
+        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
+        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
+        step((generator = generator.apply(thisArg, _arguments || [])).next());
+    });
+};
+/**
+ * Inserts all of the branding HTML from https://github.com/4site-interactive-studios/engrid/tree/main/reference-materials/html/brand-guide-markup
+ * into the body-main section of the page.
+ */
+export class BrandingHtml {
+    constructor() {
+        this.assetBaseUrl = "https://cdn.jsdelivr.net/gh/4site-interactive-studios/engrid@main/reference-materials/html/brand-guide-markup/";
+        this.brandingHtmlFiles = [
+            "html5-tags.html",
+            "en-common-fields.html",
+            "survey.html",
+            // "en-common-fields-with-errors.html",
+            // "en-common-fields-with-fancy-errors.html",
+            "donation-page.html",
+            "premium-donation.html",
+            "ecards.html",
+            "email-to-target.html",
+            "tweet-to-target.html",
+            // "click-to-call.html",
+            "petition.html",
+            "event.html",
+            // "ecommerce.html",
+            // "membership.html",
+            "styles.html",
+        ];
+        this.bodyMain = document.querySelector(".body-main");
+        this.htmlFetched = false;
+    }
+    fetchHtml() {
+        return __awaiter(this, void 0, void 0, function* () {
+            const htmlRequests = this.brandingHtmlFiles.map((file) => __awaiter(this, void 0, void 0, function* () {
+                const res = yield fetch(this.assetBaseUrl + file);
+                return res.text();
+            }));
+            const brandingHtmls = yield Promise.all(htmlRequests);
+            return brandingHtmls;
+        });
+    }
+    appendHtml() {
+        this.fetchHtml().then((html) => html.forEach((h) => {
+            var _a;
+            const brandingSection = document.createElement("div");
+            brandingSection.classList.add("brand-guide-section");
+            brandingSection.innerHTML = h;
+            (_a = this.bodyMain) === null || _a === void 0 ? void 0 : _a.insertAdjacentElement("beforeend", brandingSection);
+        }));
+        this.htmlFetched = true;
+    }
+    show() {
+        if (!this.htmlFetched) {
+            this.appendHtml();
+            return;
+        }
+        const guides = document.querySelectorAll(".brand-guide-section");
+        guides === null || guides === void 0 ? void 0 : guides.forEach((g) => (g.style.display = "block"));
+    }
+    hide() {
+        const guides = document.querySelectorAll(".brand-guide-section");
+        guides === null || guides === void 0 ? void 0 : guides.forEach((g) => (g.style.display = "none"));
+    }
+}

package/dist/capitalize-fields.d.ts

@@ -0,0 +1,7 @@
+import { EnForm } from "./events";
+export declare class CapitalizeFields {
+    _form: EnForm;
+    constructor();
+    private capitalizeFields;
+    private capitalize;
+}

package/dist/capitalize-fields.js

@@ -0,0 +1,22 @@
+// CapitalizeFields is a class that capitalizes the first letter of the fields passed to it.
+// It subscribes to the onSubmit event of the EnForm class and capitalizes the fields on submit.
+import { ENGrid } from ".";
+import { EnForm } from "./events";
+export class CapitalizeFields {
+    constructor() {
+        this._form = EnForm.getInstance();
+        this._form.onSubmit.subscribe(() => this.capitalizeFields("en__field_supporter_firstName", "en__field_supporter_lastName", "en__field_supporter_address1", "en__field_supporter_city"));
+    }
+    capitalizeFields(...fields) {
+        fields.forEach((f) => this.capitalize(f));
+    }
+    capitalize(f) {
+        let field = document.getElementById(f);
+        if (field) {
+            field.value = field.value.replace(/\w\S*/g, (w) => w.replace(/^\w/, (c) => c.toUpperCase()));
+            if (ENGrid.debug)
+                console.log("Capitalized", field.value);
+        }
+        return true;
+    }
+}

package/dist/click-to-expand.d.ts

@@ -0,0 +1,4 @@
+export declare class ClickToExpand {
+    clickToExpandWrapper: NodeListOf<HTMLElement>;
+    constructor();
+}

package/dist/click-to-expand.js

@@ -0,0 +1,39 @@
+// This class is used to expand content when a user clicks on a div with the class "click-to-expand".
+// The content is shortened by default and will expand when clicked.
+import { ENGrid } from ".";
+// Works when the user has adds ".click-to-expand" as a class to any field
+export class ClickToExpand {
+    constructor() {
+        this.clickToExpandWrapper = document.querySelectorAll("div.click-to-expand");
+        if (this.clickToExpandWrapper.length) {
+            this.clickToExpandWrapper.forEach((element) => {
+                const content = element.innerHTML;
+                const wrapper_html = '<div class="click-to-expand-cta"></div><div class="click-to-expand-text-wrapper" tabindex="0">' +
+                    content +
+                    "</div>";
+                element.innerHTML = wrapper_html;
+                element.addEventListener("click", (event) => {
+                    if (event) {
+                        if (ENGrid.debug)
+                            console.log("A click-to-expand div was clicked");
+                        element.classList.add("expanded");
+                    }
+                });
+                element.addEventListener("keydown", (event) => {
+                    if (event.key === "Enter") {
+                        if (ENGrid.debug)
+                            console.log("A click-to-expand div had the 'Enter' key pressed on it");
+                        element.classList.add("expanded");
+                    }
+                    else if (event.key === " ") {
+                        if (ENGrid.debug)
+                            console.log("A click-to-expand div had the 'Spacebar' key pressed on it");
+                        element.classList.add("expanded");
+                        event.preventDefault(); // Prevents the page from scrolling
+                        event.stopPropagation(); // Prevent a console error generated by LastPass https://github.com/KillerCodeMonkey/ngx-quill/issues/351#issuecomment-476017960
+                    }
+                });
+            });
+        }
+    }
+}

package/dist/cookie.d.ts

@@ -0,0 +1,53 @@
+/**
+Example:
+import * as cookie from "./cookie";
+
+cookie.set('name', 'value');
+cookie.get('name'); // => 'value'
+cookie.remove('name');
+cookie.set('name', 'value', { expires: 7 }); // 7 Days cookie
+cookie.set('name', 'value', { expires: 7, path: '' }); // Set Path
+cookie.remove('name', { path: '' });
+ */
+export interface CookieAttributes {
+    /**
+     * A number will be interpreted as days from time of creation
+     */
+    expires?: Date | number;
+    /**
+     * Hosts to which the cookie will be sent
+     */
+    domain?: string;
+    /**
+     * The cookie will only be included in an HTTP request if the request
+     * path matches (or is a subdirectory of) the cookie's path attribute.
+     */
+    path?: string;
+    /**
+     * If enabled, the cookie will only be included in an HTTP request
+     * if it is transmitted over a secure channel (typically HTTP over TLS).
+     */
+    secure?: boolean;
+    /**
+     * Only send the cookie if the request originates from the same website the
+     * cookie is from. This provides some protection against cross-site request
+     * forgery attacks (CSRF).
+     *
+     * The strict mode witholds the cookie from any kind of cross-site usage
+     * (including inbound links from external sites). The lax mode witholds
+     * the cookie on cross-domain subrequests (e.g. images or frames), but
+     * sends it whenever a user navigates safely from an external site (e.g.
+     * by following a link).
+     */
+    sameSite?: "strict" | "lax" | "none";
+}
+export declare function encode(name: string, value: string, attributes: CookieAttributes): string;
+export declare function parse(cookieString: string): {
+    [name: string]: string;
+};
+export declare function getAll(): {
+    [name: string]: string;
+};
+export declare function get(name: string): string | undefined;
+export declare function set(name: string, value: string, attributes?: CookieAttributes): void;
+export declare function remove(name: string, attributes?: CookieAttributes): void;

package/dist/cookie.js

@@ -0,0 +1,76 @@
+/**
+Example:
+import * as cookie from "./cookie";
+
+cookie.set('name', 'value');
+cookie.get('name'); // => 'value'
+cookie.remove('name');
+cookie.set('name', 'value', { expires: 7 }); // 7 Days cookie
+cookie.set('name', 'value', { expires: 7, path: '' }); // Set Path
+cookie.remove('name', { path: '' });
+ */
+function stringifyAttribute(name, value) {
+    if (!value) {
+        return "";
+    }
+    let stringified = "; " + name;
+    if (value === true) {
+        return stringified; // boolean attributes shouldn't have a value
+    }
+    return stringified + "=" + value;
+}
+function stringifyAttributes(attributes) {
+    if (typeof attributes.expires === "number") {
+        let expires = new Date();
+        expires.setMilliseconds(expires.getMilliseconds() + attributes.expires * 864e5);
+        attributes.expires = expires;
+    }
+    return (stringifyAttribute("Expires", attributes.expires ? attributes.expires.toUTCString() : "") +
+        stringifyAttribute("Domain", attributes.domain) +
+        stringifyAttribute("Path", attributes.path) +
+        stringifyAttribute("Secure", attributes.secure) +
+        stringifyAttribute("SameSite", attributes.sameSite));
+}
+export function encode(name, value, attributes) {
+    return (encodeURIComponent(name)
+        .replace(/%(23|24|26|2B|5E|60|7C)/g, decodeURIComponent) // allowed special characters
+        .replace(/\(/g, "%28")
+        .replace(/\)/g, "%29") + // replace opening and closing parens
+        "=" +
+        encodeURIComponent(value)
+            // allowed special characters
+            .replace(/%(23|24|26|2B|3A|3C|3E|3D|2F|3F|40|5B|5D|5E|60|7B|7D|7C)/g, decodeURIComponent) +
+        stringifyAttributes(attributes));
+}
+export function parse(cookieString) {
+    let result = {};
+    let cookies = cookieString ? cookieString.split("; ") : [];
+    let rdecode = /(%[\dA-F]{2})+/gi;
+    for (let i = 0; i < cookies.length; i++) {
+        let parts = cookies[i].split("=");
+        let cookie = parts.slice(1).join("=");
+        if (cookie.charAt(0) === '"') {
+            cookie = cookie.slice(1, -1);
+        }
+        try {
+            let name = parts[0].replace(rdecode, decodeURIComponent);
+            result[name] = cookie.replace(rdecode, decodeURIComponent);
+        }
+        catch (e) {
+            // ignore cookies with invalid name/value encoding
+        }
+    }
+    return result;
+}
+export function getAll() {
+    return parse(document.cookie);
+}
+export function get(name) {
+    return getAll()[name];
+}
+export function set(name, value, attributes) {
+    document.cookie = encode(name, value, Object.assign({ path: "/" }, attributes));
+}
+export function remove(name, attributes) {
+    set(name, "", Object.assign(Object.assign({}, attributes), { expires: -1 }));
+}

package/dist/country-disable.d.ts

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

package/dist/country-disable.js

@@ -0,0 +1,22 @@
+// This class allows you to disable some countries from the country dropdown list.
+import { ENGrid, EngridLogger } from ".";
+export class CountryDisable {
+    constructor() {
+        this.logger = new EngridLogger("CountryDisable", "#f0f0f0", "#333333", "🌎");
+        const countries = document.querySelectorAll('select[name="supporter.country"], select[name="transaction.shipcountry"], select[name="supporter.billingCountry"], select[name="transaction.infcountry"]');
+        const CountryDisable = ENGrid.getOption("CountryDisable");
+        // Remove the countries from the dropdown list
+        if (countries.length > 0 && CountryDisable.length > 0) {
+            const countriesLower = CountryDisable.map((country) => country.toLowerCase());
+            countries.forEach((country) => {
+                country.querySelectorAll("option").forEach((option) => {
+                    if (countriesLower.includes(option.value.toLowerCase()) ||
+                        countriesLower.includes(option.text.toLowerCase())) {
+                        this.logger.log(`Removing ${option.text} from ${country.getAttribute("name")}`);
+                        option.remove();
+                    }
+                });
+            });
+        }
+    }
+}

package/dist/country-redirect.d.ts

@@ -0,0 +1,7 @@
+export declare class CountryRedirect {
+    private logger;
+    private _country;
+    constructor();
+    shouldRun(): boolean;
+    checkRedirect(country: string): void;
+}

package/dist/country-redirect.js

@@ -0,0 +1,61 @@
+// This component allows you to redirect the user to a different page based on their country.
+// It works by checking the country field on the page and comparing it to the list of countries in the CountryRedirect option.
+// If the country matches one of the countries in the list, the user is redirected to the specified URL only if the URL is not the same as the current page.
+// The CountryRedirect option is an object with the country as the key and the URL as the value.
+// Example:
+//
+// CountryRedirect: {
+//   US: "https://example.com/us",
+//   CA: "https://example.com/ca",
+//   GB: "https://example.com/gb",
+// },
+// The country codes must match the country codes in the country field
+// The CountryRedirect component can also be set at the page level. Useful for Regional Pages, with a Code Block like this:
+//
+// <script>
+//   window.EngridPageOptions = window.EngridPageOptions || [];
+//   window.EngridPageOptions.CountryRedirect = {
+//     US: "https://example.com/us",
+//     CA: "https://example.com/ca",
+//     GB: "https://example.com/gb",
+//   };
+// </script>
+//
+// This will override the default CountryRedirect options for that page.
+//
+import { ENGrid, Country, EngridLogger } from ".";
+export class CountryRedirect {
+    constructor() {
+        this.logger = new EngridLogger("CountryRedirect", "white", "brown", "🛫");
+        this._country = Country.getInstance();
+        if (!this.shouldRun())
+            return;
+        this._country.onCountryChange.subscribe((country) => {
+            this.checkRedirect(country);
+        });
+        this.checkRedirect(this._country.country); // This will check the redirect when the page loads
+    }
+    shouldRun() {
+        // Only run if the CountryRedirect option is not false and the country field is present
+        if (!ENGrid.getOption("CountryRedirect") || !this._country.countryField) {
+            return false;
+        }
+        return true;
+    }
+    checkRedirect(country) {
+        const countryRedirect = ENGrid.getOption("CountryRedirect");
+        // Check if the country is in the list and if the current URL is not the same as the redirect URL
+        // We are using includes because the URL might have query parameters
+        if (countryRedirect &&
+            country in countryRedirect &&
+            window.location.href.includes(countryRedirect[country]) === false) {
+            this.logger.log(`${country}: Redirecting to ${countryRedirect[country]}`);
+            let redirectUrl = new URL(countryRedirect[country]);
+            // If the redirect URL doesn't contain "?chain", add it
+            if (!redirectUrl.search.includes("chain")) {
+                redirectUrl.search += (redirectUrl.search ? "&" : "?") + "chain";
+            }
+            window.location.href = redirectUrl.href;
+        }
+    }
+}

package/dist/custom-currency.d.ts

@@ -0,0 +1,9 @@
+export declare class CustomCurrency {
+    private logger;
+    private currencyElement;
+    private _country;
+    constructor();
+    shouldRun(): boolean;
+    addEventListeners(): void;
+    loadCurrencies(country?: string): void;
+}

package/dist/custom-currency.js

@@ -0,0 +1,112 @@
+// This component allows you to customize the currency options in the currency field
+// It is used in the following way:
+//
+// CustomCurrency: {
+//   label: "Give with [$$$]",
+//   default: {
+//     USD: "$",
+//     GBP: "£",
+//     EUR: "€",
+//   },
+//   countries: {
+//     US: {
+//       USD: "$",
+//     },
+//     GB: {
+//       GBP: "£",
+//     },
+//     DE: {
+//       EUR: "€",
+//     },
+//   },
+// },
+//
+// The label is the text that appears in the currency field
+// The default is the currency options that appear when the selected country does not have a custom option
+// The countries object is a list of countries and their currency options
+// The country codes must match the country codes in the country field
+// Because the CustomCurrency component works with the country field, it's automatically integrated with the AutoCountrySelect component.
+// So if you visit the page from a country that has a custom currency option, the currency field will automatically be updated.
+// The CustomCurrency component can also be set at the page level. Useful for Regional Pages, with a Code Block like this:
+// <script>
+//   window.EngridPageOptions = window.EngridPageOptions || [];
+//   window.EngridPageOptions.CustomCurrency = {
+//     label: "Give with [$$$]",
+//     default: {
+//       USD: "$",
+//       GBP: "£",
+//       EUR: "€",
+//     },
+//     countries: {
+//       US: {
+//         USD: "$",
+//       },
+//       GB: {
+//         GBP: "£",
+//       },
+//       DE: {
+//         EUR: "€",
+//       },
+//     },
+//   };
+// </script>
+//
+// This will override the default CustomCurrency options for that page.
+//
+import { ENGrid, Country, EngridLogger } from ".";
+export class CustomCurrency {
+    constructor() {
+        this.logger = new EngridLogger("CustomCurrency", "#1901b1", "#00cc95", "🤑");
+        this.currencyElement = document.querySelector("[name='transaction.paycurrency']");
+        this._country = Country.getInstance();
+        if (!this.shouldRun())
+            return;
+        this.addEventListeners();
+        this.loadCurrencies();
+    }
+    shouldRun() {
+        // Only run if the currency field is present, and the CustomCurrency option is not false
+        if (!this.currencyElement || !ENGrid.getOption("CustomCurrency")) {
+            return false;
+        }
+        return true;
+    }
+    addEventListeners() {
+        if (this._country.countryField) {
+            this._country.onCountryChange.subscribe((country) => {
+                this.loadCurrencies(country);
+            });
+        }
+    }
+    // Changes the options in the currency field to match the selected country options
+    loadCurrencies(country = "default") {
+        const options = ENGrid.getOption("CustomCurrency");
+        if (!options)
+            return;
+        const label = options.label || `Give with [$$$]`;
+        let currencies = options.default;
+        if (options.countries && options.countries[country]) {
+            currencies = options.countries[country];
+        }
+        if (!currencies) {
+            this.logger.log(`No currencies found for ${country}`);
+            return;
+        }
+        this.logger.log(`Loading currencies for ${country}`);
+        this.currencyElement.innerHTML = "";
+        for (const currency in currencies) {
+            const option = document.createElement("option");
+            option.value = currency;
+            option.text = label
+                .replace("[$$$]", currency)
+                .replace("[$]", currencies[currency]);
+            option.setAttribute("data-currency-code", currency);
+            option.setAttribute("data-currency-symbol", currencies[currency]);
+            this.currencyElement.appendChild(option);
+        }
+        // Set the currency to the first option and trigger a change event
+        this.currencyElement.selectedIndex = 0;
+        const event = new Event("change", { bubbles: true });
+        this.currencyElement.dispatchEvent(event);
+    }
+}

package/dist/data-attributes.d.ts

@@ -0,0 +1,5 @@
+export declare class DataAttributes {
+    private _country;
+    constructor();
+    private setDataAttributes;
+}