@4site/engrid-scripts 0.19.1

package/dist/iframe.js

@@ -0,0 +1,217 @@
+import { ENGrid, EngridLogger } from ".";
+import { EnForm } from "./events";
+export class iFrame {
+    constructor() {
+        this._form = EnForm.getInstance();
+        this.logger = new EngridLogger("iFrame", "brown", "gray", "📡");
+        if (this.inIframe()) {
+            // Add the data-engrid-embedded attribute when inside an iFrame if it wasn't already added by a script in the Page Template
+            ENGrid.setBodyData("embedded", "");
+            // Fire the resize event
+            this.logger.log("iFrame Event - Begin Resizing");
+            window.addEventListener("load", (event) => {
+                // Scroll to top of iFrame
+                this.logger.log("iFrame Event - window.onload");
+                this.sendIframeHeight();
+                window.parent.postMessage({
+                    scroll: this.shouldScroll(),
+                }, "*");
+                // On click fire the resize event
+                document.addEventListener("click", (e) => {
+                    this.logger.log("iFrame Event - click");
+                    setTimeout(() => {
+                        this.sendIframeHeight();
+                    }, 100);
+                });
+            });
+            window.setTimeout(() => {
+                this.sendIframeHeight();
+            }, 300);
+            window.addEventListener("resize", this.debounceWithImmediate(() => {
+                this.logger.log("iFrame Event - window resized");
+                this.sendIframeHeight();
+            }));
+            // Listen for the form submit event
+            this._form.onSubmit.subscribe((e) => {
+                this.logger.log("iFrame Event - onSubmit");
+                this.sendIframeFormStatus("submit");
+            });
+            // If the iFrame is Chained, check if the form has data
+            if (this.isChained() && ENGrid.getPaymentType()) {
+                this.logger.log("iFrame Event - Chained iFrame");
+                this.sendIframeFormStatus("chained");
+                this.hideFormComponents();
+                this.addChainedBanner();
+            }
+            // Remove the skip link markup when inside an iFrame
+            const skipLink = document.querySelector(".skip-link");
+            if (skipLink) {
+                skipLink.remove();
+            }
+            this._form.onError.subscribe(() => {
+                // Get the first .en__field--validationFailed element
+                const firstError = document.querySelector(".en__field--validationFailed");
+                // Send scrollTo message
+                // Parent pages listens for this message and scrolls to the correct position
+                const scrollTo = firstError
+                    ? firstError.getBoundingClientRect().top
+                    : 0;
+                this.logger.log(`iFrame Event 'scrollTo' - Position of top of first error ${scrollTo} px`); // check the message is being sent correctly
+                window.parent.postMessage({ scrollTo }, "*");
+            });
+        }
+        else {
+            // When not in iframe, default behaviour, smooth scroll to first error
+            this._form.onError.subscribe(() => {
+                // Smooth Scroll to the first .en__field--validationFailed element
+                const firstError = document.querySelector(".en__field--validationFailed");
+                if (firstError) {
+                    firstError.scrollIntoView({ behavior: "smooth" });
+                }
+            });
+            // Parent Page Logic (when an ENgrid form is embedded in an ENgrid page)
+            window.addEventListener("message", (event) => {
+                const iframe = this.getIFrameByEvent(event);
+                if (iframe) {
+                    if (event.data.hasOwnProperty("frameHeight")) {
+                        iframe.style.height = event.data.frameHeight + "px";
+                    }
+                    // Old scroll event logic "scroll", scrolls to correct iframe?
+                    else if (event.data.hasOwnProperty("scroll") &&
+                        event.data.scroll > 0) {
+                        const elDistanceToTop = window.pageYOffset + iframe.getBoundingClientRect().top;
+                        let scrollTo = elDistanceToTop + event.data.scroll;
+                        window.scrollTo({
+                            top: scrollTo,
+                            left: 0,
+                            behavior: "smooth",
+                        });
+                        this.logger.log("iFrame Event - Scrolling Window to " + scrollTo);
+                    }
+                    // New scroll event logic "scrollTo", scrolls to the first error
+                    else if (event.data.hasOwnProperty("scrollTo")) {
+                        const scrollToPosition = event.data.scrollTo +
+                            window.scrollY +
+                            iframe.getBoundingClientRect().top;
+                        window.scrollTo({
+                            top: scrollToPosition,
+                            left: 0,
+                            behavior: "smooth",
+                        });
+                        this.logger.log("iFrame Event - Scrolling Window to " + scrollToPosition);
+                    }
+                }
+            });
+        }
+    }
+    sendIframeHeight() {
+        let height = document.body.offsetHeight;
+        this.logger.log("iFrame Event - Sending iFrame height of: " + height + "px"); // check the message is being sent correctly
+        window.parent.postMessage({
+            frameHeight: height,
+            pageNumber: ENGrid.getPageNumber(),
+            pageCount: ENGrid.getPageCount(),
+            giftProcess: ENGrid.getGiftProcess(),
+        }, "*");
+    }
+    sendIframeFormStatus(status) {
+        window.parent.postMessage({
+            status: status,
+            pageNumber: ENGrid.getPageNumber(),
+            pageCount: ENGrid.getPageCount(),
+            giftProcess: ENGrid.getGiftProcess(),
+        }, "*");
+    }
+    getIFrameByEvent(event) {
+        return [].slice
+            .call(document.getElementsByTagName("iframe"))
+            .filter((iframe) => {
+            return iframe.contentWindow === event.source;
+        })[0];
+    }
+    shouldScroll() {
+        // If you find a error, scroll
+        if (document.querySelector(".en__errorHeader")) {
+            return true;
+        }
+        // If it's a chained iFrame, don't scroll
+        if (this.isChained()) {
+            return false;
+        }
+        // Try to match the iframe referrer URL by testing valid EN Page URLs
+        let referrer = document.referrer;
+        let enURLPattern = new RegExp(/^(.*)\/(page)\/(\d+.*)/);
+        // Scroll if the Regex matches, don't scroll otherwise
+        return enURLPattern.test(referrer);
+    }
+    inIframe() {
+        try {
+            return window.self !== window.top;
+        }
+        catch (e) {
+            return true;
+        }
+    }
+    isChained() {
+        return !!ENGrid.getUrlParameter("chain");
+    }
+    hideFormComponents() {
+        this.logger.log("iFrame Event - Hiding Form Components");
+        const en__component = document.querySelectorAll(".body-main > div");
+        en__component.forEach((component, index) => {
+            if (component.classList.contains("hide") === false &&
+                component.classList.contains("hide-iframe") === false &&
+                component.classList.contains("radio-to-buttons_donationAmt") ===
+                    false &&
+                index < en__component.length - 1) {
+                component.classList.add("hide-iframe");
+                component.classList.add("hide-chained");
+            }
+        });
+        this.sendIframeHeight();
+    }
+    showFormComponents() {
+        this.logger.log("iFrame Event - Showing Form Components");
+        const en__component = document.querySelectorAll(".body-main > div.hide-chained");
+        en__component.forEach((component) => {
+            component.classList.remove("hide-iframe");
+            component.classList.remove("hide-chained");
+        });
+        this.sendIframeHeight();
+    }
+    addChainedBanner() {
+        var _a, _b;
+        this.logger.log("iFrame Event - Adding Chained Banner");
+        const banner = document.createElement("div");
+        const lastComponent = document.querySelector(".body-main > div:last-of-type");
+        banner.classList.add("en__component");
+        banner.classList.add("en__component--banner");
+        banner.classList.add("en__component--banner--chained");
+        banner.innerHTML = `<div class="en__component__content"><div class="en__component__content__inner"><div class="en__component__content__text"><p>
+      Giving as <strong>${ENGrid.getFieldValue("supporter.firstName")} ${ENGrid.getFieldValue("supporter.lastName")}</strong> 
+      with <strong>${ENGrid.getFieldValue("transaction.paymenttype").toUpperCase()}</strong>
+      (<a href="#" class="en__component__content__link">change</a>)</p></div></div></div>`;
+        (_a = lastComponent === null || lastComponent === void 0 ? void 0 : lastComponent.parentNode) === null || _a === void 0 ? void 0 : _a.insertBefore(banner, lastComponent);
+        (_b = banner
+            .querySelector(".en__component__content__link")) === null || _b === void 0 ? void 0 : _b.addEventListener("click", (e) => {
+            e.preventDefault();
+            this.showFormComponents();
+            banner.remove();
+        });
+    }
+    debounceWithImmediate(func, timeout = 1000) {
+        let timer;
+        let firstEvent = true;
+        return (...args) => {
+            clearTimeout(timer);
+            if (firstEvent) {
+                func.apply(this, args);
+                firstEvent = false;
+            }
+            timer = setTimeout(() => {
+                func.apply(this, args);
+                firstEvent = true;
+            }, timeout);
+        };
+    }
+}

package/dist/index.d.ts

@@ -0,0 +1,82 @@
+export * from "./deprecated";
+export { Options, OptionsDefaults } from "./interfaces/options";
+export { UpsellOptions, UpsellOptionsDefaults, } from "./interfaces/upsell-options";
+export { TranslateOptions, TranslateOptionsDefaults, } from "./interfaces/translate-options";
+export { ExitIntentOptions, ExitIntentOptionsDefaults, } from "./interfaces/exit-intent-options";
+export * from "./loader";
+export * from "./app";
+export * from "./amount-label";
+export * from "./engrid";
+export * from "./apple-pay";
+export * from "./a11y";
+export * from "./capitalize-fields";
+export * from "./auto-year";
+export * from "./autocomplete";
+export * from "./ecard";
+export * from "./click-to-expand";
+export * from "./advocacy";
+export * from "./data-attributes";
+export * from "./iframe";
+export * from "./input-has-value-and-focus";
+export * from "./input-placeholders";
+export * from "./media-attribution";
+export * from "./live-variables";
+export * from "./upsell-lightbox";
+export * from "./show-hide-radio-checkboxes";
+export * from "./translate-fields";
+export * from "./auto-country-select";
+export * from "./skip-link";
+export * from "./src-defer";
+export * from "./set-recurr-freq";
+export * from "./page-background";
+export * from "./neverbounce";
+export * from "./freshaddress";
+export * from "./progress-bar";
+export * from "./remember-me";
+export * from "./show-if-amount";
+export * from "./other-amount";
+export * from "./logger";
+export * from "./min-max-amount";
+export * from "./ticker";
+export * from "./data-layer";
+export * from "./data-replace";
+export * from "./data-hide";
+export * from "./add-name-to-message";
+export * from "./expand-region-name";
+export * from "./url-to-form";
+export * from "./required-if-visible";
+export * from "./tidycontact";
+export * from "./live-currency";
+export * from "./custom-currency";
+export * from "./autosubmit";
+export * from "./event-tickets";
+export * from "./swap-amounts";
+export * from "./debug-panel";
+export * from "./debug-hidden-fields";
+export * from "./branding-html";
+export * from "./country-disable";
+export * from "./premium-gift";
+export * from "./digital-wallets";
+export * from "./mobile-cta";
+export * from "./live-frequency";
+export * from "./universal-opt-in";
+export * from "./plaid";
+export * from "./give-by-select";
+export * from "./url-params-to-body-attrs";
+export * from "./exit-intent-lightbox";
+export * from "./supporter-hub";
+export * from "./fast-form-fill";
+export * from "./set-attr";
+export * from "./show-if-present";
+export * from "./en-validators";
+export * from "./modal";
+export * from "./postal-code-validator";
+export * from "./vgs";
+export * from "./country-redirect";
+export * from "./welcome-back";
+export * from "./ecard-to-target";
+export * from "./embedded-ecard";
+export * from "./us-only-form";
+export * from "./thank-you-page-conditional-content";
+export * from "./events";
+export * from "./version";

package/dist/index.js

@@ -0,0 +1,84 @@
+export * from "./deprecated"; // Runs first so it can change the DOM markup before any markup dependent code fires
+export { OptionsDefaults } from "./interfaces/options";
+export { UpsellOptionsDefaults, } from "./interfaces/upsell-options";
+export { TranslateOptionsDefaults, } from "./interfaces/translate-options";
+export { ExitIntentOptionsDefaults, } from "./interfaces/exit-intent-options";
+export * from "./loader";
+export * from "./app";
+export * from "./amount-label";
+export * from "./engrid";
+export * from "./apple-pay";
+export * from "./a11y";
+export * from "./capitalize-fields";
+export * from "./auto-year";
+export * from "./autocomplete";
+export * from "./ecard";
+export * from "./click-to-expand";
+export * from "./advocacy";
+export * from "./data-attributes";
+export * from "./iframe";
+export * from "./input-has-value-and-focus";
+export * from "./input-placeholders";
+export * from "./media-attribution";
+export * from "./live-variables";
+export * from "./upsell-lightbox";
+export * from "./show-hide-radio-checkboxes";
+export * from "./translate-fields";
+export * from "./auto-country-select";
+export * from "./skip-link";
+export * from "./src-defer";
+export * from "./set-recurr-freq";
+export * from "./page-background";
+export * from "./neverbounce";
+export * from "./freshaddress";
+export * from "./progress-bar";
+export * from "./remember-me";
+export * from "./show-if-amount";
+export * from "./other-amount";
+export * from "./logger";
+export * from "./min-max-amount";
+export * from "./ticker";
+export * from "./data-layer";
+export * from "./data-replace";
+export * from "./data-hide";
+export * from "./add-name-to-message";
+export * from "./expand-region-name";
+export * from "./url-to-form";
+export * from "./required-if-visible";
+export * from "./tidycontact";
+export * from "./live-currency";
+export * from "./custom-currency";
+export * from "./autosubmit";
+export * from "./event-tickets";
+export * from "./swap-amounts";
+export * from "./debug-panel";
+export * from "./debug-hidden-fields";
+export * from "./branding-html";
+export * from "./country-disable";
+export * from "./premium-gift";
+export * from "./digital-wallets";
+export * from "./mobile-cta";
+export * from "./live-frequency";
+export * from "./universal-opt-in";
+export * from "./plaid";
+export * from "./give-by-select";
+export * from "./url-params-to-body-attrs";
+export * from "./exit-intent-lightbox";
+export * from "./supporter-hub";
+export * from "./fast-form-fill";
+export * from "./set-attr";
+export * from "./show-if-present";
+export * from "./en-validators";
+export * from "./modal";
+export * from "./postal-code-validator";
+export * from "./vgs";
+export * from "./country-redirect";
+export * from "./welcome-back";
+export * from "./ecard-to-target";
+export * from "./embedded-ecard";
+export * from "./us-only-form";
+export * from "./thank-you-page-conditional-content";
+// Events
+export * from "./events";
+// Version
+export * from "./version";

package/dist/input-has-value-and-focus.d.ts

@@ -0,0 +1,9 @@
+export declare class InputHasValueAndFocus {
+    private logger;
+    private formInputs;
+    constructor();
+    private shouldRun;
+    private run;
+    private bindEvents;
+    private log;
+}

package/dist/input-has-value-and-focus.js

@@ -0,0 +1,50 @@
+// Component that adds has-value and has-focus classes to form inputs
+import { EngridLogger } from ".";
+export class InputHasValueAndFocus {
+    constructor() {
+        this.logger = new EngridLogger("InputHasValueAndFocus", "yellow", "#333", "🌈");
+        this.formInputs = document.querySelectorAll(".en__field--text, .en__field--email:not(.en__field--checkbox), .en__field--telephone, .en__field--number, .en__field--textarea, .en__field--select, .en__field--checkbox");
+        if (this.shouldRun()) {
+            this.run();
+        }
+    }
+    shouldRun() {
+        return this.formInputs.length > 0;
+    }
+    run() {
+        this.formInputs.forEach((el) => {
+            const input = el.querySelector("input, textarea, select");
+            if (input && input.value) {
+                el.classList.add("has-value");
+            }
+            this.bindEvents(el);
+        });
+    }
+    bindEvents(el) {
+        const input = el.querySelector("input, textarea, select");
+        if (!input) {
+            return;
+        }
+        input.addEventListener("focus", () => {
+            this.log("Focus added", input);
+            el.classList.add("has-focus");
+        });
+        input.addEventListener("blur", () => {
+            this.log("Focus removed", input);
+            el.classList.remove("has-focus");
+        });
+        input.addEventListener("input", () => {
+            if (input.value) {
+                this.log("Value added", input);
+                el.classList.add("has-value");
+            }
+            else {
+                this.log("Value removed", input);
+                el.classList.remove("has-value");
+            }
+        });
+    }
+    log(message, input) {
+        this.logger.log(`${message} on ${input.name}: ${input.value}`);
+    }
+}

package/dist/input-placeholders.d.ts

@@ -0,0 +1,7 @@
+export declare class InputPlaceholders {
+    private defaultPlaceholders;
+    constructor();
+    private shouldRun;
+    private run;
+    private addPlaceholder;
+}

package/dist/input-placeholders.js

@@ -0,0 +1,82 @@
+// Component that adds input placeholders
+// You can override the default placeholders by adding a Placeholders option to the EngridOptions on the client theme.
+// You can also add an EngridPageOptions override to the page, if you want to override the placeholders on a specific page. Example:
+// <script type="text/javascript">
+//   EngridPageOptions = {
+//     Placeholders: {
+//       "input#en__field_supporter_firstName": "Nome",
+//       "input#en__field_supporter_lastName": "Sobrenome"
+//     }
+//   };
+// </script>
+import { ENGrid } from ".";
+export class InputPlaceholders {
+    constructor() {
+        this.defaultPlaceholders = {
+            "input#en__field_supporter_firstName": "First Name",
+            "input#en__field_supporter_lastName": "Last Name",
+            "input#en__field_supporter_emailAddress": "Email Address",
+            "input#en__field_supporter_phoneNumber": "Phone Number (Optional)",
+            ".en__mandatory input#en__field_supporter_phoneNumber": "Phone Number",
+            "input#en__field_supporter_phoneNumber2": "000-000-0000 (Optional)",
+            ".en__mandatory input#en__field_supporter_phoneNumber2": "000-000-0000",
+            "input#en__field_supporter_country": "Country",
+            "input#en__field_supporter_address1": "Street Address",
+            "input#en__field_supporter_address2": "Apt., Ste., Bldg.",
+            "input#en__field_supporter_city": "City",
+            "input#en__field_supporter_region": "Region",
+            "input#en__field_supporter_postcode": "ZIP Code",
+            ".en__field--donationAmt.en__field--withOther .en__field__input--other": "Other",
+            "input#en__field_transaction_ccexpire": "MM / YY",
+            "input#en__field_supporter_bankAccountNumber": "Bank Account Number",
+            "input#en__field_supporter_bankRoutingNumber": "Bank Routing Number",
+            "input#en__field_transaction_honname": "Honoree Name",
+            "input#en__field_transaction_infname": "Recipient Name",
+            "input#en__field_transaction_infemail": "Recipient Email Address",
+            "input#en__field_transaction_infcountry": "Country",
+            "input#en__field_transaction_infadd1": "Recipient Street Address",
+            "input#en__field_transaction_infadd2": "Recipient Apt., Ste., Bldg.",
+            "input#en__field_transaction_infcity": "Recipient City",
+            "input#en__field_transaction_infpostcd": "Recipient Postal Code",
+            "input#en__field_transaction_gftrsn": "Reason for your gift",
+            "input#en__field_transaction_shipfname": "Shipping First Name",
+            "input#en__field_transaction_shiplname": "Shipping Last Name",
+            "input#en__field_transaction_shipemail": "Shipping Email Address",
+            "input#en__field_transaction_shipcountry": "Shipping Country",
+            "input#en__field_transaction_shipadd1": "Shipping Street Address",
+            "input#en__field_transaction_shipadd2": "Shipping Apt., Ste., Bldg.",
+            "input#en__field_transaction_shipcity": "Shipping City",
+            "input#en__field_transaction_shipregion": "Shipping Region",
+            "input#en__field_transaction_shippostcode": "Shipping Postal Code",
+            "input#en__field_supporter_billingCountry": "Billing Country",
+            "input#en__field_supporter_billingAddress1": "Billing Street Address",
+            "input#en__field_supporter_billingAddress2": "Billing Apt., Ste., Bldg.",
+            "input#en__field_supporter_billingCity": "Billing City",
+            "input#en__field_supporter_billingRegion": "Billing Region",
+            "input#en__field_supporter_billingPostcode": "Billing Postal Code",
+        };
+        if (this.shouldRun()) {
+            // If there's a Placeholders option, merge it with the default placeholders
+            const placeholders = ENGrid.getOption("Placeholders");
+            if (placeholders) {
+                this.defaultPlaceholders = Object.assign(Object.assign({}, this.defaultPlaceholders), placeholders);
+            }
+            this.run();
+        }
+    }
+    shouldRun() {
+        return ENGrid.hasBodyData("add-input-placeholders");
+    }
+    run() {
+        Object.keys(this.defaultPlaceholders).forEach((selector) => {
+            if (selector in this.defaultPlaceholders)
+                this.addPlaceholder(selector, this.defaultPlaceholders[selector]);
+        });
+    }
+    addPlaceholder(selector, placeholder) {
+        const fieldEl = document.querySelector(selector);
+        if (fieldEl) {
+            fieldEl.placeholder = placeholder;
+        }
+    }
+}

package/dist/interfaces/ecard-to-target-options.d.ts

@@ -0,0 +1,9 @@
+export interface EcardToTargetOptions {
+    targetName: string;
+    targetEmail: string;
+    hideSendDate: boolean;
+    hideTarget: boolean;
+    hideMessage: boolean;
+    addSupporterNameToMessage: boolean;
+}
+export declare const EcardToTargetOptionsDefaults: EcardToTargetOptions;

package/dist/interfaces/ecard-to-target-options.js

@@ -0,0 +1,8 @@
+export const EcardToTargetOptionsDefaults = {
+    targetName: "",
+    targetEmail: "",
+    hideSendDate: true,
+    hideTarget: true,
+    hideMessage: true,
+    addSupporterNameToMessage: false,
+};

package/dist/interfaces/embedded-ecard-options.d.ts

@@ -0,0 +1,8 @@
+export interface EmbeddedEcardOptions {
+    pageUrl: string;
+    headerText: string;
+    checkboxText: string;
+    anchor: string;
+    placement: string;
+}
+export declare const EmbeddedEcardOptionsDefaults: EmbeddedEcardOptions;

package/dist/interfaces/embedded-ecard-options.js

@@ -0,0 +1,7 @@
+export const EmbeddedEcardOptionsDefaults = {
+    pageUrl: "",
+    headerText: "Send an Ecard notification of your gift",
+    checkboxText: "Yes, I would like to send an ecard to announce my gift.",
+    anchor: ".en__field--donationAmt",
+    placement: "afterend",
+};

package/dist/interfaces/exit-intent-options.d.ts

@@ -0,0 +1,13 @@
+export interface ExitIntentOptions {
+    enabled: boolean;
+    title: string;
+    text: string;
+    buttonText: string;
+    buttonLink: string;
+    cookieName: string;
+    cookieDuration: number;
+    triggers: {
+        [key: string]: boolean;
+    };
+}
+export declare const ExitIntentOptionsDefaults: ExitIntentOptions;

package/dist/interfaces/exit-intent-options.js

@@ -0,0 +1,13 @@
+export const ExitIntentOptionsDefaults = {
+    enabled: false,
+    title: "We are sad that you are leaving",
+    text: "Would you mind telling us why you are leaving this page?",
+    buttonText: "Send us your comments",
+    buttonLink: "https://www.4sitestudios.com/",
+    cookieName: "engrid-exit-intent-lightbox",
+    cookieDuration: 30,
+    triggers: {
+        visibilityState: true,
+        mousePosition: true,
+    },
+};