@4site/engrid-scripts 0.28.5 → 0.28.7

package/dist/app.js

@@ -1,5 +1,5 @@
 import { DonationAmount, DonationFrequency, EnForm, ProcessingFees, Country, } from "./events";
-import { AmountLabel, Loader, ProgressBar, UpsellLightbox, ENGrid, OptionsDefaults, setRecurrFreq, PageBackground, MediaAttribution, ApplePay, A11y, CapitalizeFields, Ecard, ClickToExpand, Advocacy, DataAttributes, LiveVariables, iFrame, InputPlaceholders, InputHasValueAndFocus, ShowHideRadioCheckboxes, AutoCountrySelect, SkipToMainContentLink, SrcDefer, NeverBounce, AutoYear, Autocomplete, RememberMe, TranslateFields, ShowIfAmount, EngridLogger, OtherAmount, MinMaxAmount, Ticker, DataReplace, DataHide, AddNameToMessage, ExpandRegionName, AppVersion, UrlToForm, RequiredIfVisible, TidyContact, DataLayer, LiveCurrency, Autosubmit, EventTickets, SwapAmounts, DebugPanel, DebugHiddenFields, FreshAddress, BrandingHtml, CountryDisable, PremiumGift, DigitalWallets, MobileCTA, LiveFrequency, UniversalOptIn, StripeFinancialConnections, GiveBySelect, UrlParamsToBodyAttrs, ExitIntentLightbox, SupporterHub, FastFormFill, SetAttr, ShowIfPresent, ENValidators, CustomCurrency, VGS, PostalCodeValidator, CountryRedirect, WelcomeBack, EcardToTarget, UsOnlyForm, ThankYouPageConditionalContent, EmbeddedEcard, CheckboxLabel, UpsellCheckbox, PostDonationEmbed, FrequencyUpsell, CustomPremium, StickyNSG, StickyPrepopulation, PreferredPaymentMethod, } from ".";
+import { AmountLabel, Loader, ProgressBar, UpsellLightbox, ENGrid, OptionsDefaults, setRecurrFreq, PageBackground, MediaAttribution, ApplePay, A11y, CapitalizeFields, Ecard, ClickToExpand, Advocacy, DataAttributes, LiveVariables, iFrame, InputPlaceholders, InputHasValueAndFocus, ShowHideRadioCheckboxes, AutoCountrySelect, SkipToMainContentLink, SrcDefer, NeverBounce, AutoYear, Autocomplete, RememberMe, TranslateFields, ShowIfAmount, EngridLogger, OtherAmount, MinMaxAmount, Ticker, DataReplace, DataHide, AddNameToMessage, ExpandRegionName, AppVersion, UrlToForm, RequiredIfVisible, TidyContact, DataLayer, LiveCurrency, Autosubmit, EventTickets, SwapAmounts, DebugPanel, DebugHiddenFields, FreshAddress, BrandingHtml, CountryDisable, PremiumGift, DigitalWallets, MobileCTA, LiveFrequency, UniversalOptIn, StripeFinancialConnections, GiveBySelect, UrlParamsToBodyAttrs, ExitIntentLightbox, SupporterHub, FastFormFill, SetAttr, ShowIfPresent, ENValidators, CustomCurrency, VGS, PostalCodeValidator, CountryRedirect, WelcomeBack, EcardToTarget, UsOnlyForm, ThankYouPageConditionalContent, EmbeddedEcard, CheckboxLabel, UpsellCheckbox, PostDonationEmbed, FrequencyUpsell, CustomPremium, StickyNSG, StickyPrepopulation, PreferredPaymentMethod, TidyContactEmail, } from ".";
 export class App extends ENGrid {
     constructor(options) {
         super();
@@ -225,6 +225,10 @@ export class App extends ENGrid {
         // FreshAddress
         if (this.options.FreshAddress)
             new FreshAddress();
+        // TidyContact Email. Must stay below the window.enOnValidate assignment,
+        // so the TC Email bundle wraps ENgrid's hook instead of being overwritten by it.
+        if (this.options.TidyContactEmail)
+            new TidyContactEmail();
         new ShowIfAmount();
         new OtherAmount();
         new MinMaxAmount();

package/dist/iframe.d.ts

@@ -1,9 +1,21 @@
 import { EnForm } from "./events";
 export declare class iFrame {
     _form: EnForm;
+    private resizeObserver;
     private logger;
     constructor();
     private onLoaded;
+    /**
+     * Observes document.body for size changes (DOM mutations, font/image
+     * loads, CSS transitions) and re-sends the iframe height to the parent.
+     *
+     * Uses a leading + trailing throttle via debounceWithImmediate: the
+     * first change is sent immediately, and the settled height is always
+     * re-sent once changes stop for 120ms. Animated transitions therefore
+     * don't flood the parent page with one message per frame, but the
+     * parent always ends up matching the final resolved height.
+     */
+    private observeHeightChanges;
     /**
      * Posts a `engrid-iframe-queue:thank-you` message to the parent window
      * when the embedded EN page reaches its Thank You page (the last page

package/dist/iframe.js

@@ -3,6 +3,7 @@ import { EnForm } from "./events";
 export class iFrame {
     constructor() {
         this._form = EnForm.getInstance();
+        this.resizeObserver = null;
         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
@@ -95,6 +96,7 @@ export class iFrame {
                 if (iframe) {
                     if (event.data.hasOwnProperty("frameHeight")) {
                         iframe.style.height = event.data.frameHeight + "px";
+                        this.logger.log(`iFrame Event - Resized iframe element to ${event.data.frameHeight}px`);
                         if (event.data.frameHeight > 0) {
                             iframe.classList.add("loaded");
                         }
@@ -134,6 +136,8 @@ export class iFrame {
         // Scroll to top of iFrame
         this.logger.log("iFrame Event - window.onload");
         this.sendIframeHeight();
+        // Continuously re-send the height whenever the body size changes
+        this.observeHeightChanges();
         window.parent.postMessage({
             scroll: this.shouldScroll(),
         }, "*");
@@ -142,16 +146,40 @@ export class iFrame {
         // matches it by Page ID to advance to the next queued iframe. Fires
         // exactly once per Thank-You-page load. See iframe-queue.ts.
         this.sendIframeQueueThankYouPing();
-        // On click fire the resize event
-        document.addEventListener("click", (e) => {
-            this.logger.log("iFrame Event - click");
-            setTimeout(() => {
-                this.sendIframeHeight();
-            }, 100);
-        });
         // Watch for errors and send the height
         ENGrid.watchForError(this.sendIframeHeight.bind(this));
     }
+    /**
+     * Observes document.body for size changes (DOM mutations, font/image
+     * loads, CSS transitions) and re-sends the iframe height to the parent.
+     *
+     * Uses a leading + trailing throttle via debounceWithImmediate: the
+     * first change is sent immediately, and the settled height is always
+     * re-sent once changes stop for 120ms. Animated transitions therefore
+     * don't flood the parent page with one message per frame, but the
+     * parent always ends up matching the final resolved height.
+     */
+    observeHeightChanges() {
+        if (typeof ResizeObserver === "undefined") {
+            this.logger.log("ResizeObserver not supported in this browser");
+            return;
+        }
+        let lastSent = -1;
+        const throttledSend = this.debounceWithImmediate((_entries, _observer, immediate) => {
+            const height = document.body.offsetHeight;
+            // Skip redundant sends when the settled height is unchanged
+            if (height === lastSent) {
+                this.logger.log(`iFrame Event - ResizeObserver settled at unchanged height ${height}px, skipping send`);
+                return;
+            }
+            lastSent = height;
+            this.logger.log(`iFrame Event - ResizeObserver ${immediate ? "leading" : "trailing"} resize: sending height ${height}px`);
+            this.sendIframeHeight();
+        }, 120);
+        this.resizeObserver = new ResizeObserver(throttledSend);
+        this.resizeObserver.observe(document.body);
+        this.logger.log("iFrame Event - Observing body resize");
+    }
     /**
      * Posts a `engrid-iframe-queue:thank-you` message to the parent window
      * when the embedded EN page reaches its Thank You page (the last page
@@ -299,11 +327,11 @@ export class iFrame {
         return (...args) => {
             clearTimeout(timer);
             if (firstEvent) {
-                func.apply(this, args);
+                func.apply(this, [...args, true]);
                 firstEvent = false;
             }
             timer = setTimeout(() => {
-                func.apply(this, args);
+                func.apply(this, [...args, false]);
                 firstEvent = true;
             }, timeout);
         };

package/dist/index.d.ts

@@ -52,6 +52,7 @@ export * from "./expand-region-name";
 export * from "./url-to-form";
 export * from "./required-if-visible";
 export * from "./tidycontact";
+export * from "./tidycontact-email";
 export * from "./live-currency";
 export * from "./custom-currency";
 export * from "./autosubmit";

package/dist/index.js

@@ -52,6 +52,7 @@ export * from "./expand-region-name";
 export * from "./url-to-form";
 export * from "./required-if-visible";
 export * from "./tidycontact";
+export * from "./tidycontact-email";
 export * from "./live-currency";
 export * from "./custom-currency";
 export * from "./autosubmit";

package/dist/interfaces/options.d.ts

@@ -89,6 +89,17 @@ export interface Options {
         phone_date_field?: string;
         phone_status_field?: string;
     };
+    TidyContactEmail?: false | {
+        clientKey: string;
+        relayUrl?: string;
+        version?: string;
+        scriptUrl?: string;
+        timeoutMs?: number;
+        hardBlock?: boolean;
+        prefillSkip?: boolean;
+        enRecognition?: boolean;
+        pageTypes?: ("DONATION" | "ECARD" | "SURVEY" | "EMAILTOTARGET" | "ADVOCACY" | "SUBSCRIBEFORM" | "EVENT" | "SUPPORTERHUB" | "UNSUBSCRIBE" | "TWEETPAGE" | "UNKNOWN")[];
+    };
     MobileCTA?: false | {
         pageType: string;
         label: string;

package/dist/interfaces/options.js

@@ -30,6 +30,7 @@ export const OptionsDefaults = {
     Debug: false,
     RememberMe: false,
     TidyContact: false,
+    TidyContactEmail: false,
     RegionLongFormat: "",
     CountryDisable: [],
     Placeholders: false,

package/dist/tidycontact-email.d.ts

@@ -0,0 +1,7 @@
+export declare class TidyContactEmail {
+    private logger;
+    private options;
+    constructor();
+    private shouldRun;
+    private loadScript;
+}

package/dist/tidycontact-email.js

@@ -0,0 +1,83 @@
+import { ENGrid, EngridLogger } from ".";
+// Same selector the TC Email bundle uses to find its own tag (script-config.ts)
+const TC_EMAIL_SCRIPT = "script[src*='raisemore-email'], script[data-raisemore-email]";
+const DEFAULT_RELAY_URL = "https://email-validator.4sitestudios.com";
+const DEFAULT_VERSION = "v1";
+export class TidyContactEmail {
+    constructor() {
+        this.logger = new EngridLogger("TidyContactEmail", "#FFFFFF", "#4d9068", "📧");
+        this.options = null;
+        const options = ENGrid.getOption("TidyContactEmail");
+        if (!options)
+            return;
+        this.options = options;
+        if (!this.shouldRun())
+            return;
+        this.loadScript();
+    }
+    shouldRun() {
+        var _a, _b;
+        if (!((_a = this.options) === null || _a === void 0 ? void 0 : _a.clientKey)) {
+            this.logger.danger("clientKey not set. TidyContact Email will not load.");
+            return false;
+        }
+        const searchParams = new URLSearchParams(window.location.search);
+        if (searchParams.has("bypassemailvalidation")) {
+            this.logger.log("Bypass Email Validation Enabled - not loading TidyContact Email");
+            return false;
+        }
+        const pageTypes = (_b = this.options.pageTypes) !== null && _b !== void 0 ? _b : [];
+        if (pageTypes.length > 0 &&
+            pageTypes.indexOf(ENGrid.getPageType()) === -1) {
+            this.logger.log("TidyContact Email is disabled on this page type");
+            return false;
+        }
+        if (!ENGrid.getField("supporter.emailAddress")) {
+            this.logger.log("E-mail Field Not Found");
+            return false;
+        }
+        if (ENGrid.getOption("NeverBounceAPI") ||
+            ENGrid.getOption("FreshAddress")) {
+            this.logger.danger("NeverBounce or FreshAddress is also enabled. Two email validators on one field is not supported, so TidyContact Email will not load.");
+            return false;
+        }
+        if (document.querySelector(TC_EMAIL_SCRIPT)) {
+            this.logger.log("TidyContact Email script already on the page (manual install). Not loading it again.");
+            return false;
+        }
+        return true;
+    }
+    loadScript() {
+        const options = this.options;
+        const relayUrl = (options.relayUrl || DEFAULT_RELAY_URL).replace(/\/+$/, "");
+        const script = document.createElement("script");
+        script.src =
+            options.scriptUrl ||
+                `${relayUrl}/embed/engrid/${options.version || DEFAULT_VERSION}/raisemore-email.js`;
+        script.setAttribute("data-raisemore-email", "");
+        script.setAttribute("data-relay-url", relayUrl);
+        script.setAttribute("data-client-key", options.clientKey);
+        // Only what the client set; everything else keeps TC Email's own defaults
+        const optional = [
+            ["timeout-ms", options.timeoutMs],
+            ["hard-block", options.hardBlock],
+            ["prefill-skip", options.prefillSkip],
+            ["en-recognition", options.enRecognition],
+        ];
+        optional.forEach(([name, value]) => {
+            if (value !== undefined && value !== null) {
+                script.setAttribute(`data-${name}`, String(value));
+            }
+        });
+        script.onload = () => {
+            ENGrid.setBodyData("tidycontact-email", "loaded");
+            this.logger.success(`Loaded ${script.src}`);
+        };
+        script.onerror = () => {
+            ENGrid.setBodyData("tidycontact-email", "error");
+            this.logger.danger(`Could not load ${script.src}. The form keeps working without email validation.`);
+        };
+        ENGrid.setBodyData("tidycontact-email", "loading");
+        document.body.appendChild(script);
+    }
+}

package/dist/version.d.ts

@@ -1 +1 @@
-export declare const AppVersion = "0.28.5";
+export declare const AppVersion = "0.28.7";

package/dist/version.js

@@ -1 +1 @@
-export const AppVersion = "0.28.5";
+export const AppVersion = "0.28.7";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@4site/engrid-scripts",
-  "version": "0.28.5",
+  "version": "0.28.7",
   "description": "Scripts for the ENGRID Project",
   "main": "./dist/index.js",
   "types": "./dist/index.d.ts",
@@ -25,7 +25,7 @@
     "strongly-typed-events": "^2.0.9"
   },
   "homepage": "https://github.com/4site-interactive-studios/engrid#readme",
-  "gitHead": "8151380d0dd8e669c29762358586e0d276988ced",
+  "gitHead": "91cc1bb42cdf7660319f912cb8937d37968d2324",
   "devDependencies": {
     "nodemon": "^2.0.20",
     "typescript": "^4.9.5"