@4site/engrid-scripts 0.20.3 → 0.20.5

package/dist/data-attributes.d.ts

@@ -1,6 +1,9 @@
 export declare class DataAttributes {
+    private logger;
     private _country;
+    private _frequency;
     constructor();
     private setDataAttributes;
     private addFrequencyDataAttribute;
+    private addGiftAmountDataAttribute;
 }

package/dist/data-attributes.js

@@ -1,8 +1,10 @@
 // Component that adds data attributes to the Body
-import { ENGrid, Country } from ".";
+import { ENGrid, Country, DonationFrequency, EngridLogger } from ".";
 export class DataAttributes {
     constructor() {
+        this.logger = new EngridLogger("Data Attribute Changed", "#FFFFFF", "#4d9068", "🛠️");
         this._country = Country.getInstance();
+        this._frequency = DonationFrequency.getInstance();
         this.setDataAttributes();
     }
     setDataAttributes() {
@@ -135,6 +137,7 @@ export class DataAttributes {
         }
         if (ENGrid.getPageType() === "DONATION") {
             this.addFrequencyDataAttribute();
+            this.addGiftAmountDataAttribute();
         }
     }
     // Add a data attribute to the body tag with how many visible frequency options there are
@@ -148,4 +151,36 @@ export class DataAttributes {
         });
         ENGrid.setBodyData("visible-frequency", visibleFrequencyOptions.toString());
     }
+    // Add a data attribute to the body tag with how many visible gift amount options there are
+    addGiftAmountDataAttribute() {
+        const updateGiftAmountData = () => {
+            const giftAmountOptions = document.querySelectorAll(".en__field--donationAmt .en__field__element .en__field__item");
+            let visibleGiftAmountOptions = 0;
+            giftAmountOptions.forEach((option) => {
+                if (ENGrid.isVisible(option)) {
+                    visibleGiftAmountOptions++;
+                }
+            });
+            ENGrid.setBodyData("visible-gift-amount", visibleGiftAmountOptions.toString());
+            this.logger.log("Visible Gift Amount Changed to: " + visibleGiftAmountOptions.toString());
+        };
+        // Initial update
+        updateGiftAmountData();
+        // Observe changes in the donation amount section
+        const observer = new MutationObserver(updateGiftAmountData);
+        const targetNode = document.querySelector(".en__field--donationAmt");
+        if (targetNode) {
+            observer.observe(targetNode, {
+                childList: true,
+                subtree: true,
+                attributes: true,
+            });
+        }
+        // Run update updateGiftAmountData when frequency changes
+        this._frequency.onFrequencyChange.subscribe(() => {
+            setTimeout(() => {
+                updateGiftAmountData();
+            }, 10);
+        });
+    }
 }

package/dist/interfaces/options.d.ts

@@ -138,6 +138,11 @@ export interface Options {
             placement: "beforebegin" | "afterbegin" | "beforeend" | "afterend";
         };
     };
+    OptInLadder?: false | {
+        iframeUrl: string;
+        placementQuerySelector?: string | null;
+        excludePageIDs?: string[];
+    };
     onLoad?: () => void;
     onResize?: () => void;
     onSubmit?: () => void;

package/dist/interfaces/options.js

@@ -38,6 +38,7 @@ export const OptionsDefaults = {
     PostalCodeValidator: false,
     CountryRedirect: false,
     WelcomeBack: false,
+    OptInLadder: false,
     PageLayouts: [
         "leftleft1col",
         "centerleft1col",

package/dist/optin-ladder.js

@@ -19,20 +19,62 @@ export class OptInLadder {
         }
     }
     runAsParent() {
-        // Grab all the checkboxes with the name starting with "supporter.questions"
-        const checkboxes = document.querySelectorAll('input[name^="supporter.questions"]');
-        if (checkboxes.length === 0) {
-            this.logger.log("No checkboxes found");
-            return;
-        }
-        this._form.onSubmit.subscribe(() => {
-            // Save the checkbox values to sessionStorage
-            this.saveOptInsToSessionStorage("parent");
-        });
         this.logger.log("Running as Parent");
-        if (ENGrid.getPageNumber() === 1) {
-            // Delete items from sessionStorage
-            this.clearSessionStorage();
+        if (ENGrid.getPageNumber() === ENGrid.getPageCount()) {
+            // We are on the Thank You Page as a Parent
+            // Check autoinject iFrame
+            const optInLadderOptions = ENGrid.getOption("OptInLadder");
+            if (!optInLadderOptions || !optInLadderOptions.iframeUrl) {
+                this.logger.log("Options not found");
+                return;
+            }
+            // Create an iFrame
+            const iframe = document.createElement("iframe");
+            iframe.src = optInLadderOptions.iframeUrl;
+            iframe.style.width = "100%";
+            iframe.style.height = "0";
+            iframe.scrolling = "no";
+            iframe.frameBorder = "0";
+            iframe.allowFullscreen = true;
+            iframe.allow = "payment";
+            iframe.classList.add("opt-in-ladder-iframe");
+            iframe.classList.add("engrid-iframe");
+            // If the page already has an iFrame with the same class, we don't need to add another one
+            const existingIframe = document.querySelector(".opt-in-ladder-iframe");
+            if (existingIframe) {
+                this.logger.log("iFrame already exists");
+                return;
+            }
+            // Check if the current page is part of the excludePageIDs
+            if (optInLadderOptions.excludePageIDs &&
+                optInLadderOptions.excludePageIDs.includes(ENGrid.getPageID())) {
+                this.logger.log("Current page is excluded");
+                return;
+            }
+            // Append the iFrame to the proper placement
+            const placementQuerySelector = optInLadderOptions.placementQuerySelector || ".body-top";
+            const placement = document.querySelector(placementQuerySelector);
+            if (!placement) {
+                this.logger.error("Placement not found");
+                return;
+            }
+            placement.appendChild(iframe);
+        }
+        else {
+            // Grab all the checkboxes with the name starting with "supporter.questions"
+            const checkboxes = document.querySelectorAll('input[name^="supporter.questions"]');
+            if (checkboxes.length === 0) {
+                this.logger.log("No checkboxes found");
+                return;
+            }
+            this._form.onSubmit.subscribe(() => {
+                // Save the checkbox values to sessionStorage
+                this.saveOptInsToSessionStorage("parent");
+            });
+            if (ENGrid.getPageNumber() === 1) {
+                // Delete items from sessionStorage
+                this.clearSessionStorage();
+            }
         }
     }
     runAsChildRegular() {

package/dist/version.d.ts

@@ -1 +1 @@
-export declare const AppVersion = "0.20.3";
+export declare const AppVersion = "0.20.5";

package/dist/version.js

@@ -1 +1 @@
-export const AppVersion = "0.20.3";
+export const AppVersion = "0.20.5";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@4site/engrid-scripts",
-  "version": "0.20.3",
+  "version": "0.20.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": "42f9f5e6571c882757478c2a5fefd22ea7df799f",
+  "gitHead": "71f471c85a474226a7929a40b1c0374cd83ac58e",
   "devDependencies": {
     "nodemon": "^2.0.20"
   }