@4site/engrid-scripts 0.25.1 → 0.25.5

package/dist/iframe.js

@@ -137,6 +137,11 @@ export class iFrame {
         window.parent.postMessage({
             scroll: this.shouldScroll(),
         }, "*");
+        // Iframe Queue: signal Thank-You-page completion to the parent window.
+        // The IframeQueue component (in parent mode) listens for this ping and
+        // 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");
@@ -147,6 +152,35 @@ export class iFrame {
         // Watch for errors and send the height
         ENGrid.watchForError(this.sendIframeHeight.bind(this));
     }
+    /**
+     * 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
+     * in the page sequence). Carries the Page ID of the submitting form so
+     * the IframeQueue parent can match the ping against the queued item it
+     * is waiting on, ignoring pings from unrelated EN iframes that may exist
+     * on the same parent page (e.g. an Embedded Ecard iframe).
+     *
+     * Only fires when:
+     *   - the script is running inside an iframe (already guaranteed by the
+     *     code path that calls onLoaded()), AND
+     *   - the embedded page is a Thank You page (ENGrid.isThankYouPage()).
+     *
+     * Consumed by: IframeQueue (engrid/packages/scripts/src/iframe-queue.ts).
+     */
+    sendIframeQueueThankYouPing() {
+        if (!ENGrid.isThankYouPage())
+            return;
+        const pageId = ENGrid.getPageID();
+        const message = {
+            type: "engrid-iframe-queue:thank-you",
+            pageId,
+            pageNumber: ENGrid.getPageNumber(),
+            pageCount: ENGrid.getPageCount(),
+            url: window.location.href,
+        };
+        this.logger.log(`iFrame Event - Iframe Queue thank-you ping (pageId=${pageId})`);
+        window.parent.postMessage(message, "*");
+    }
     sendIframeHeight() {
         let height = document.body.offsetHeight;
         this.logger.log("iFrame Event - Sending iFrame height of: " + height + "px"); // check the message is being sent correctly

package/dist/index.d.ts

@@ -4,6 +4,7 @@ export { UpsellOptions, UpsellOptionsDefaults, } from "./interfaces/upsell-optio
 export { TranslateOptions, TranslateOptionsDefaults, } from "./interfaces/translate-options";
 export { ExitIntentOptions, ExitIntentOptionsDefaults, } from "./interfaces/exit-intent-options";
 export { FrequencyUpsellOptions, FrequencyUpsellOptionsDefaults, FrequencyUpsellABTestConfig, FrequencyUpsellConfig, } from "./interfaces/frequency-upsell-options";
+export { IframeQueueOptions, IframeQueueOptionsDefaults, IframeQueueItem, IframeQueueErrorPayload, } from "./interfaces/iframe-queue-options";
 export * from "./loader";
 export * from "./app";
 export * from "./amount-label";
@@ -18,6 +19,7 @@ export * from "./click-to-expand";
 export * from "./advocacy";
 export * from "./data-attributes";
 export * from "./iframe";
+export * from "./iframe-queue";
 export * from "./input-has-value-and-focus";
 export * from "./input-placeholders";
 export * from "./media-attribution";

package/dist/index.js

@@ -4,6 +4,7 @@ export { UpsellOptionsDefaults, } from "./interfaces/upsell-options";
 export { TranslateOptionsDefaults, } from "./interfaces/translate-options";
 export { ExitIntentOptionsDefaults, } from "./interfaces/exit-intent-options";
 export { FrequencyUpsellOptionsDefaults, } from "./interfaces/frequency-upsell-options";
+export { IframeQueueOptionsDefaults, } from "./interfaces/iframe-queue-options";
 export * from "./loader";
 export * from "./app";
 export * from "./amount-label";
@@ -18,6 +19,7 @@ export * from "./click-to-expand";
 export * from "./advocacy";
 export * from "./data-attributes";
 export * from "./iframe";
+export * from "./iframe-queue";
 export * from "./input-has-value-and-focus";
 export * from "./input-placeholders";
 export * from "./media-attribution";

package/dist/interfaces/iframe-queue-options.d.ts

@@ -0,0 +1,101 @@
+/**
+ * Configuration interfaces for the Iframe Queue component.
+ *
+ * The Iframe Queue loads a sequence of embedded Engaging Networks pages
+ * one at a time, passes field values into them via `postMessage`, and
+ * exposes a global `IframeQueueEvents` instance so external code can
+ * subscribe to chain-completion. See iframe-queue.ts for the component.
+ *
+ * Configuration may be supplied either programmatically (via
+ * `IframeQueue.getInstance().enqueue(...).process()`) or declaratively
+ * by setting `window.EngridIframeQueue` on the host EN page before
+ * the ENgrid bundle loads.
+ */
+/**
+ * A single embedded EN page to load and submit as part of the queue.
+ *
+ * The queue creates an iframe for each item, posts an
+ * `engrid-iframe-queue:populate` message to the iframe with the
+ * item's `fields`, and waits for an `engrid-iframe-queue:thank-you`
+ * ping (sent by the iFrame component on the embedded Thank You page)
+ * before advancing to the next item.
+ */
+export interface IframeQueueItem {
+    /**
+     * Full URL of the EN page to load. The queue strips any `chain` query
+     * parameter defensively; do not rely on `?chain` for data passing.
+     */
+    url: string;
+    /**
+     * Field name → value pairs to populate in the embedded form via
+     * postMessage. Field names match the `name` attribute of the EN form
+     * input (e.g. `supporter.emailAddress`).
+     */
+    fields?: Record<string, string>;
+    /**
+     * If true, the embedded iframe submits the form once fields are
+     * populated. Default: true.
+     */
+    autoSubmit?: boolean;
+    /**
+     * Maximum time (ms) to wait for the Thank-You-page ping before
+     * treating the item as failed and aborting the queue. Default: 30000.
+     */
+    timeout?: number;
+    /**
+     * Element to append the iframe to. Default: document.body.
+     */
+    container?: HTMLElement;
+    /**
+     * Override iframe styles. Default: visually hidden
+     * (position:absolute; width:1px; height:1px; left:-9999px; opacity:0;).
+     */
+    iframeStyle?: Partial<CSSStyleDeclaration>;
+    /**
+     * Optional per-item callback fired when the item completes
+     * successfully. Useful for ad-hoc consumers that don't want to
+     * subscribe to the global IframeQueueEvents singleton.
+     */
+    onComplete?: () => void;
+    /**
+     * Optional per-item callback fired when the item fails (timeout,
+     * iframe load error, or message error from the embedded page).
+     */
+    onError?: (error: Error) => void;
+    /**
+     * If true, when this item fails (timeout / load error / embedded
+     * error message) the queue does NOT remove the iframe from the DOM
+     * and instead repositions it as a visible, framed overlay so a
+     * developer can inspect it (right-click → Inspect frame, view its
+     * console, etc.). Default: false.
+     *
+     * Independent of this flag, failed iframes are also kept and made
+     * visible automatically whenever ENgrid debug mode is on
+     * (`window.EngridOptions.Debug === true` or `?debug=true`).
+     */
+    keepIframeOnError?: boolean;
+}
+/**
+ * Payload dispatched by `IframeQueueEvents.onChainError` when the queue
+ * aborts due to an error. `failedItem` may be undefined if the error
+ * occurred before any item started processing.
+ */
+export interface IframeQueueErrorPayload {
+    message: string;
+    failedItem?: IframeQueueItem;
+    cause?: Error;
+}
+/**
+ * Declarative configuration set on `window.EngridIframeQueue` to
+ * preload items and optionally auto-start the queue at page load.
+ */
+export interface IframeQueueOptions {
+    /** Items to enqueue at startup. */
+    items?: IframeQueueItem[];
+    /**
+     * Whether to call `process()` automatically once items are enqueued
+     * at startup. Default: true if `items` is non-empty, else false.
+     */
+    autoStart?: boolean;
+}
+export declare const IframeQueueOptionsDefaults: IframeQueueOptions;

package/dist/interfaces/iframe-queue-options.js

@@ -0,0 +1,17 @@
+/**
+ * Configuration interfaces for the Iframe Queue component.
+ *
+ * The Iframe Queue loads a sequence of embedded Engaging Networks pages
+ * one at a time, passes field values into them via `postMessage`, and
+ * exposes a global `IframeQueueEvents` instance so external code can
+ * subscribe to chain-completion. See iframe-queue.ts for the component.
+ *
+ * Configuration may be supplied either programmatically (via
+ * `IframeQueue.getInstance().enqueue(...).process()`) or declaratively
+ * by setting `window.EngridIframeQueue` on the host EN page before
+ * the ENgrid bundle loads.
+ */
+export const IframeQueueOptionsDefaults = {
+    items: [],
+    autoStart: true,
+};

package/dist/interfaces/options.d.ts

@@ -16,6 +16,7 @@ export interface Options {
     MinAmountMessage?: string;
     MaxAmountMessage?: string;
     UseAmountValidatorFromEN?: boolean;
+    DisableLiveValidation?: boolean;
     SkipToMainContentLink?: boolean;
     SrcDefer?: boolean;
     SuppressPurchaseEcard?: boolean;

package/dist/min-max-amount.d.ts

@@ -6,6 +6,7 @@ export declare class MinMaxAmount {
     private maxAmount;
     private minAmountMessage;
     private maxAmountMessage;
+    private disableLiveValidation;
     private enAmountValidator;
     private logger;
     constructor();

package/dist/min-max-amount.js

@@ -10,6 +10,7 @@ export class MinMaxAmount {
         this.maxAmount = (_b = ENGrid.getOption("MaxAmount")) !== null && _b !== void 0 ? _b : 100000;
         this.minAmountMessage = ENGrid.getOption("MinAmountMessage");
         this.maxAmountMessage = ENGrid.getOption("MaxAmountMessage");
+        this.disableLiveValidation = ENGrid.getOption("DisableLiveValidation");
         this.enAmountValidator = null;
         this.logger = new EngridLogger("MinMaxAmount", "white", "purple", "🔢");
         if (!this.shouldRun()) {
@@ -17,8 +18,10 @@ export class MinMaxAmount {
             return;
         }
         this.setValidationConfigFromEN();
-        this._amount.onAmountChange.subscribe((s) => window.setTimeout(this.liveValidate.bind(this), 1000) // Wait 1 second for the amount to be updated
-        );
+        if (!this.disableLiveValidation) {
+            this._amount.onAmountChange.subscribe((s) => window.setTimeout(this.liveValidate.bind(this), 1000) // Wait 1 second for the amount to be updated
+            );
+        }
         this._form.onValidate.subscribe(this.enOnValidate.bind(this));
     }
     // Should we run the script?
@@ -36,6 +39,14 @@ export class MinMaxAmount {
                 otherAmount.focus();
             }
             this._form.validate = false;
+            if (this.disableLiveValidation) {
+                this.logger.log("Setting error on enOnValidate: " +
+                    (this.minAmountMessage || "Invalid Amount"));
+                // Defer so EN's own onValidate pass can't overwrite the error
+                window.setTimeout(() => {
+                    ENGrid.setError(".en__field--withOther", this.minAmountMessage || "Invalid Amount");
+                }, 300);
+            }
         }
         else if (this._amount.amount > this.maxAmount) {
             this.logger.log("Amount is greater than max amount: " + this.maxAmount);
@@ -43,11 +54,29 @@ export class MinMaxAmount {
                 otherAmount.focus();
             }
             this._form.validate = false;
+            if (this.disableLiveValidation) {
+                this.logger.log("Setting error on enOnValidate: " +
+                    (this.maxAmountMessage || "Invalid Amount"));
+                // Defer so EN's own onValidate pass can't overwrite the error
+                window.setTimeout(() => {
+                    ENGrid.setError(".en__field--withOther", this.maxAmountMessage || "Invalid Amount");
+                }, 300);
+            }
+        }
+        else if (this.disableLiveValidation) {
+            // Amount is in range — clear any stale error left over from a previous submit
+            ENGrid.removeError(".en__field--withOther");
+        }
+        if (!this.disableLiveValidation) {
+            window.setTimeout(this.liveValidate.bind(this), 300);
         }
-        window.setTimeout(this.liveValidate.bind(this), 300);
     }
     // Disable Submit Button if the amount is not valid
     liveValidate() {
+        if (this.disableLiveValidation) {
+            this.logger.log("disableLiveValidation is set to true. Skipping live validation");
+            return;
+        }
         const amount = ENGrid.cleanAmount(this._amount.amount.toString());
         const activeElement = document.activeElement;
         if (activeElement &&

package/dist/version.d.ts

@@ -1 +1 @@
-export declare const AppVersion = "0.25.1";
+export declare const AppVersion = "0.25.5";

package/dist/version.js

@@ -1 +1 @@
-export const AppVersion = "0.25.1";
+export const AppVersion = "0.25.5";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@4site/engrid-scripts",
-  "version": "0.25.1",
+  "version": "0.25.5",
   "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": "408f1d5237c46b5d530347056a2adedab3913739",
+  "gitHead": "f4a3b2759036e89ed5e19c907df1f2224d44f4bb",
   "devDependencies": {
     "nodemon": "^2.0.20"
   }