@4site/engrid-scripts 0.22.15 → 0.22.17

package/dist/data-layer.js

@@ -1,25 +1,13 @@
-// The DataLayer class is a singleton class that is responsible for managing the data layer events.
-// It listens to the EnForm onSubmit event and the RememberMe onLoad event.
-// It also listens to the blur, change, and submit events of the form fields.
-// It adds the following events to the data layer:
-// - EN_PAGE_VIEW
-// - EN_SUCCESSFUL_DONATION
-// - EN_PAGEJSON_{property}
-// - EN_SUBMISSION_SUCCESS_{pageType}
-// - EN_URLPARAM_{key}-{value}
-// - EN_RECURRING_FREQUENCIES
-// - EN_FASTFORMFILL_PERSONALINFO_SUCCESS
-// - EN_FASTFORMFILL_PERSONALINFO_PARTIALSUCCESS
-// - EN_FASTFORMFILL_PERSONALINFO_FAILURE
-// - EN_FASTFORMFILL_ADDRESS_SUCCESS
-// - EN_FASTFORMFILL_ADDRESS_PARTIALSUCCESS
-// - EN_FASTFORMFILL_ADDRESS_FAILURE
-// - EN_FASTFORMFILL_ALL_SUCCESS
-// - EN_FASTFORMFILL_ALL_FAILURE
-// - EN_SUBMISSION_WITH_EMAIL_OPTIN
-// - EN_SUBMISSION_WITHOUT_EMAIL_OPTIN
-// - EN_FORM_VALUE_UPDATED
-import { EngridLogger, ENGrid, EnForm, FastFormFill, RememberMeEvents, } from ".";
+// DataLayer: singleton helper for pushing structured analytics events/vars to window.dataLayer.
+// On load it emits one aggregated event `pageJsonVariablesReady` with:
+//   EN_PAGEJSON_* (normalized pageJson), EN_URLPARAM_*, EN_RECURRING_FREQUENCIES (donation pages),
+//   and EN_SUBMISSION_SUCCESS_{PAGETYPE} when on the final page.
+// User actions emit: EN_FORM_VALUE_UPDATED (field changes) and submission opt‑in/out events.
+// Queued end‑of‑gift events/variables (via addEndOfGiftProcessEvent / addEndOfGiftProcessVariable)
+// are replayed after a successful gift process load.
+// Sensitive payment/bank fields are excluded; selected PII fields are Base64 “hashed” (btoa — not cryptographic).
+// Replace with a real hash (e.g., SHA‑256) if required.
+import { EngridLogger, ENGrid, EnForm, RememberMeEvents } from ".";
 export class DataLayer {
     constructor() {
         this.logger = new EngridLogger("DataLayer", "#f1e5bc", "#009cdc", "📊");
@@ -77,108 +65,53 @@ export class DataLayer {
     }
     transformJSON(value) {
         if (typeof value === "string") {
-            return value.toUpperCase().split(" ").join("-").replace(":-", "-");
+            return value
+                .toUpperCase()
+                .trim()
+                .replace(/\s+/g, "-")
+                .replace(/:-/g, "-");
         }
-        else if (typeof value === "boolean") {
-            value = value ? "TRUE" : "FALSE";
-            return value;
+        if (typeof value === "boolean") {
+            return value ? "TRUE" : "FALSE";
+        }
+        if (typeof value === "number") {
+            return value; // Preserve numeric type for analytics platforms that infer number vs string
         }
         return "";
     }
     onLoad() {
-        // Collect all data layer events and variables to push at once
+        // Collect all data layer variables to push at once
         const dataLayerData = {};
-        const dataLayerEvents = [];
         if (ENGrid.getGiftProcess()) {
             this.logger.log("EN_SUCCESSFUL_DONATION");
-            dataLayerEvents.push("EN_SUCCESSFUL_DONATION");
             this.addEndOfGiftProcessEventsToDataLayer();
         }
-        else {
-            this.logger.log("EN_PAGE_VIEW");
-            dataLayerEvents.push("EN_PAGE_VIEW");
-        }
         if (window.pageJson) {
             const pageJson = window.pageJson;
             for (const property in pageJson) {
-                if (!Number.isNaN(pageJson[property])) {
-                    dataLayerEvents.push(`EN_PAGEJSON_${property.toUpperCase()}-${pageJson[property]}`);
-                    dataLayerData[`EN_PAGEJSON_${property.toUpperCase()}`] =
-                        pageJson[property];
-                }
-                else {
-                    dataLayerEvents.push(`EN_PAGEJSON_${property.toUpperCase()}-${this.transformJSON(pageJson[property])}`);
-                    dataLayerData[`EN_PAGEJSON_${property.toUpperCase()}`] =
-                        this.transformJSON(pageJson[property]);
-                }
-                dataLayerEvents.push("EN_PAGEJSON_" + property.toUpperCase());
-                dataLayerData.eventValue = pageJson[property];
+                const key = `EN_PAGEJSON_${property.toUpperCase()}`;
+                const value = pageJson[property];
+                dataLayerData[key] = this.transformJSON(value);
             }
             if (ENGrid.getPageCount() === ENGrid.getPageNumber()) {
-                dataLayerEvents.push("EN_SUBMISSION_SUCCESS_" + pageJson.pageType.toUpperCase());
                 dataLayerData[`EN_SUBMISSION_SUCCESS_${pageJson.pageType.toUpperCase()}`] = "TRUE";
             }
         }
         const urlParams = new URLSearchParams(window.location.search);
         urlParams.forEach((value, key) => {
-            dataLayerEvents.push(`EN_URLPARAM_${key.toUpperCase()}-${this.transformJSON(value)}`);
             dataLayerData[`EN_URLPARAM_${key.toUpperCase()}`] =
                 this.transformJSON(value);
         });
         if (ENGrid.getPageType() === "DONATION") {
             const recurrFreqEls = document.querySelectorAll('[name="transaction.recurrfreq"]');
             const recurrValues = [...recurrFreqEls].map((el) => el.value);
-            dataLayerEvents.push("EN_RECURRING_FREQUENCIES");
-            dataLayerData[`'EN_RECURRING_FREQEUENCIES'`] = recurrValues;
-        }
-        let fastFormFill = false;
-        // Fast Form Fill - Personal Details
-        const fastPersonalDetailsFormBlock = document.querySelector(".en__component--formblock.fast-personal-details");
-        if (fastPersonalDetailsFormBlock) {
-            const allPersonalMandatoryInputsAreFilled = FastFormFill.allMandatoryInputsAreFilled(fastPersonalDetailsFormBlock);
-            const somePersonalMandatoryInputsAreFilled = FastFormFill.someMandatoryInputsAreFilled(fastPersonalDetailsFormBlock);
-            if (allPersonalMandatoryInputsAreFilled) {
-                dataLayerEvents.push("EN_FASTFORMFILL_PERSONALINFO_SUCCESS");
-                fastFormFill = true;
-            }
-            else if (somePersonalMandatoryInputsAreFilled) {
-                dataLayerEvents.push("EN_FASTFORMFILL_PERSONALINFO_PARTIALSUCCESS");
-            }
-            else {
-                dataLayerEvents.push("EN_FASTFORMFILL_PERSONALINFO_FAILURE");
-            }
-        }
-        // Fast Form Fill - Address Details
-        const fastAddressDetailsFormBlock = document.querySelector(".en__component--formblock.fast-address-details");
-        if (fastAddressDetailsFormBlock) {
-            const allAddressMandatoryInputsAreFilled = FastFormFill.allMandatoryInputsAreFilled(fastAddressDetailsFormBlock);
-            const someAddressMandatoryInputsAreFilled = FastFormFill.someMandatoryInputsAreFilled(fastAddressDetailsFormBlock);
-            if (allAddressMandatoryInputsAreFilled) {
-                dataLayerEvents.push("EN_FASTFORMFILL_ADDRESS_SUCCESS");
-                fastFormFill = fastFormFill ? true : false; // Only set to true if it was true before
-            }
-            else if (someAddressMandatoryInputsAreFilled) {
-                dataLayerEvents.push("EN_FASTFORMFILL_ADDRESS_PARTIALSUCCESS");
-            }
-            else {
-                dataLayerEvents.push("EN_FASTFORMFILL_ADDRESS_FAILURE");
-            }
-        }
-        if (fastFormFill) {
-            dataLayerEvents.push("EN_FASTFORMFILL_ALL_SUCCESS");
-        }
-        else {
-            dataLayerEvents.push("EN_FASTFORMFILL_ALL_FAILURE");
+            dataLayerData[`EN_RECURRING_FREQUENCIES`] = recurrValues;
         }
         // Push all collected variables at once
         if (Object.keys(dataLayerData).length > 0) {
             dataLayerData.event = "pageJsonVariablesReady";
             this.dataLayer.push(dataLayerData);
         }
-        // Push all collected events individually (GTM requirement)
-        dataLayerEvents.forEach((event) => {
-            this.dataLayer.push({ event });
-        });
         this.attachEventListeners();
     }
     onSubmit() {
@@ -266,7 +199,7 @@ export class DataLayer {
     }
     addEndOfGiftProcessVariable(variableName, variableValue = "") {
         this.storeEndOfGiftProcessData({
-            [`'${variableName.toUpperCase()}'`]: variableValue,
+            [variableName.toUpperCase()]: variableValue,
         });
     }
     storeEndOfGiftProcessData(data) {

package/dist/interfaces/options.d.ts

@@ -15,6 +15,7 @@ export interface Options {
     MaxAmount?: number;
     MinAmountMessage?: string;
     MaxAmountMessage?: string;
+    UseAmountValidatorFromEN?: boolean;
     SkipToMainContentLink?: boolean;
     SrcDefer?: boolean;
     NeverBounceAPI?: string | null;

package/dist/interfaces/options.js

@@ -14,6 +14,7 @@ export const OptionsDefaults = {
     MaxAmount: 100000,
     MinAmountMessage: "Amount must be at least $1",
     MaxAmountMessage: "Amount must be less than $100,000",
+    UseAmountValidatorFromEN: false,
     SkipToMainContentLink: true,
     SrcDefer: true,
     NeverBounceAPI: null,

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

@@ -1,13 +1,16 @@
 export declare class MinMaxAmount {
     private _form;
     private _amount;
+    private _frequency;
     private minAmount;
     private maxAmount;
     private minAmountMessage;
     private maxAmountMessage;
+    private enAmountValidator;
     private logger;
     constructor();
     shouldRun(): boolean;
     enOnValidate(): void;
     liveValidate(): void;
+    private setValidationConfigFromEN;
 }

package/dist/min-max-amount.js

@@ -1,19 +1,22 @@
 // This script adds an erros message to the page if the amount is greater than the max amount or less than the min amount.
-import { DonationAmount, EnForm, ENGrid, EngridLogger } from ".";
+import { DonationAmount, DonationFrequency, EnForm, ENGrid, EngridLogger, } from ".";
 export class MinMaxAmount {
     constructor() {
         var _a, _b;
         this._form = EnForm.getInstance();
         this._amount = DonationAmount.getInstance();
+        this._frequency = DonationFrequency.getInstance();
         this.minAmount = (_a = ENGrid.getOption("MinAmount")) !== null && _a !== void 0 ? _a : 1;
         this.maxAmount = (_b = ENGrid.getOption("MaxAmount")) !== null && _b !== void 0 ? _b : 100000;
         this.minAmountMessage = ENGrid.getOption("MinAmountMessage");
         this.maxAmountMessage = ENGrid.getOption("MaxAmountMessage");
+        this.enAmountValidator = null;
         this.logger = new EngridLogger("MinMaxAmount", "white", "purple", "🔢");
         if (!this.shouldRun()) {
             // If we're not on a Donation Page, get out
             return;
         }
+        this.setValidationConfigFromEN();
         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));
@@ -68,4 +71,56 @@ export class MinMaxAmount {
             ENGrid.removeError(".en__field--withOther");
         }
     }
+    setValidationConfigFromEN() {
+        if (!ENGrid.getOption("UseAmountValidatorFromEN") ||
+            !window.EngagingNetworks.validators) {
+            this.logger.log("Not setting validation config from EN.");
+            return;
+        }
+        // Find the amount validator for the donation amount field
+        // It should be of type "AMNT" or "FAMNT" and have
+        // a componentId that matches the donation amount field.
+        this.enAmountValidator = window.EngagingNetworks.validators.find((validator) => {
+            var _a;
+            return ((validator.type === "FAMNT" || validator.type === "AMNT") &&
+                ((_a = document
+                    .querySelector(".en__field--" + validator.componentId)) === null || _a === void 0 ? void 0 : _a.classList.contains("en__field--donationAmt")));
+        });
+        if (!this.enAmountValidator || !this.enAmountValidator.format) {
+            return;
+        }
+        this.logger.log(`Detected an amount validator for donation amount on the page:`, this.enAmountValidator);
+        // Static amount validator
+        if (this.enAmountValidator.type === "AMNT") {
+            this.minAmount = Number(this.enAmountValidator.format.split("~")[0]);
+            this.maxAmount = Number(this.enAmountValidator.format.split("~")[1]);
+            this.minAmountMessage = this.enAmountValidator.errorMessage;
+            this.maxAmountMessage = this.enAmountValidator.errorMessage;
+            this.logger.log(`Setting new values - Min Amount: ${this.minAmount}, Max Amount: ${this.maxAmount}, Error Message: ${this.minAmountMessage}`);
+        }
+        // Frequency-based amount validator
+        if (this.enAmountValidator.type === "FAMNT") {
+            this._frequency.onFrequencyChange.subscribe((freq) => {
+                if (!this.enAmountValidator || !this.enAmountValidator.format)
+                    return;
+                // In the validator, "onetime" is written as "SINGLE"
+                // Validator format for FAMNT is like SINGLE:10~100000|MONTHLY:5~100000|QUARTERLY:25~100000|ANNUAL:25~100000
+                const frequency = freq === "onetime" ? "SINGLE" : freq.toUpperCase();
+                const validationRange = this.enAmountValidator.format
+                    .split("|")
+                    .find((range) => range.startsWith(frequency));
+                if (!validationRange) {
+                    this.logger.log(`No validation range found for frequency: ${frequency}`);
+                    return;
+                }
+                const amounts = validationRange.split(":")[1].split("~");
+                this.minAmount = Number(amounts[0]);
+                this.maxAmount = Number(amounts[1]);
+                this.minAmountMessage = this.enAmountValidator.errorMessage;
+                this.maxAmountMessage = this.enAmountValidator.errorMessage;
+                this.logger.log(`Frequency changed to ${frequency}, updating min and max amounts`, validationRange);
+                this.logger.log(`Setting new values - Min Amount: ${this.minAmount}, Max Amount: ${this.maxAmount}, Error Message: ${this.minAmountMessage}`);
+            });
+        }
+    }
 }

package/dist/swap-amounts.d.ts

@@ -10,6 +10,7 @@
  *       "Other": "other",
  *     },
  *     default: 30,
+ *     stickyDefault: false, // Optional. When true, every swap forces the default amount to be (re)selected
  *   },
  *   "monthly": {
  *     amounts: {
@@ -20,6 +21,7 @@
  *       "Other": "other",
  *     },
  *     default: 15,
+ *     stickyDefault: true, // Example forcing default on each frequency swap
  *   },
  * };
  */

package/dist/swap-amounts.js

@@ -15,6 +15,7 @@
  *       "Other": "other",
  *     },
  *     default: 30,
+ *     stickyDefault: false, // Optional. When true, every swap forces the default amount to be (re)selected
  *   },
  *   "monthly": {
  *     amounts: {
@@ -25,6 +26,7 @@
  *       "Other": "other",
  *     },
  *     default: 15,
+ *     stickyDefault: true, // Example forcing default on each frequency swap
  *   },
  * };
  */
@@ -80,6 +82,7 @@ export class SwapAmounts {
             const config = {
                 amounts: amountsObj,
                 default: defaultAmount,
+                // stickyDefault omitted so it defaults to false behavior
             };
             window.EngridAmounts = {
                 onetime: config,
@@ -95,7 +98,9 @@ export class SwapAmounts {
         const config = configs[freq];
         if (!config)
             return;
-        const ignoreCurrentValue = this.ignoreCurrentValue();
+        const stickyDefault = !!config.stickyDefault;
+        // If stickyDefault, always ignore current value so selected flag in list enforces default
+        const ignoreCurrentValue = stickyDefault ? true : this.ignoreCurrentValue();
         window.EngagingNetworks.require._defined.enjs.swapList("donationAmt", this.toEnAmountList(config), { ignoreCurrentValue });
         this._amount.load();
         this.logger.log("Amounts Swapped To", config, { ignoreCurrentValue });

package/dist/version.d.ts

@@ -1 +1 @@
-export declare const AppVersion = "0.22.15";
+export declare const AppVersion = "0.22.17";

package/dist/version.js

@@ -1 +1 @@
-export const AppVersion = "0.22.15";
+export const AppVersion = "0.22.17";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@4site/engrid-scripts",
-  "version": "0.22.15",
+  "version": "0.22.17",
   "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": "d7b50bd7dee71910c245dc7508132b69ddcc6f91",
+  "gitHead": "e5c02e6aa5b48df75e149d7fbf4a0a864beb16cb",
   "devDependencies": {
     "nodemon": "^2.0.20"
   }