@4site/engrid-scripts 0.24.5 → 0.25.0

package/dist/app.d.ts

@@ -13,6 +13,7 @@ export declare class App extends ENGrid {
     private onLoad;
     private onResize;
     private onValidate;
+    private onIntentSubmit;
     private onSubmit;
     private onError;
     static log(message: string): void;

package/dist/app.js

@@ -94,6 +94,7 @@ export class App extends ENGrid {
             }
         });
         // Client onSubmit and onError functions
+        this._form.onIntentSubmit.subscribe(() => this.onIntentSubmit());
         this._form.onSubmit.subscribe(() => this.onSubmit());
         this._form.onError.subscribe(() => this.onError());
         this._form.onValidate.subscribe(() => this.onValidate());
@@ -111,6 +112,7 @@ export class App extends ENGrid {
         window.enOnSubmit = () => {
             this._form.submit = true;
             this._form.submitPromise = false;
+            this._form.dispatchIntentSubmit();
             this._form.dispatchSubmit();
             ENGrid.watchForError(ENGrid.enableSubmit);
             if (!this._form.submit)
@@ -331,6 +333,12 @@ export class App extends ENGrid {
             this.options.onValidate();
         }
     }
+    onIntentSubmit() {
+        if (this.options.onIntentSubmit) {
+            this.logger.log("Client onIntentSubmit Triggered");
+            this.options.onIntentSubmit();
+        }
+    }
     onSubmit() {
         if (this.options.onSubmit) {
             this.logger.log("Client onSubmit Triggered");

package/dist/digital-wallets.d.ts

@@ -1,8 +1,13 @@
 export declare class DigitalWallets {
+    private logger;
+    private _form;
     constructor();
     private addStripeDigitalWallets;
     private addPaypalTouchDigitalWallets;
     private addDAF;
     private addOptionToPaymentTypeField;
     private checkForWalletsBeingAdded;
+    private addPaypalOneTouchListener;
+    private addStripeDigitalWalletListener;
+    private addDAFListener;
 }

package/dist/digital-wallets.js

@@ -1,6 +1,10 @@
 import { ENGrid } from "./engrid";
+import { EnForm } from "./events";
+import { EngridLogger } from "./logger";
 export class DigitalWallets {
     constructor() {
+        this.logger = new EngridLogger("DigitalWallets", "#fff", "#333", "👛");
+        this._form = EnForm.getInstance();
         //digital wallets not enabled.
         if (!document.getElementById("en__digitalWallet")) {
             ENGrid.setBodyData("payment-type-option-stripedigitalwallet", "false");
@@ -9,6 +13,7 @@ export class DigitalWallets {
             ENGrid.setBodyData("payment-type-option-paypal-one-touch", "false");
             ENGrid.setBodyData("payment-type-option-venmo", "false");
             ENGrid.setBodyData("payment-type-option-daf", "false");
+            this.logger.log("No digital wallet container found, skipping digital wallet setup.");
             return;
         }
         // Add giveBySelect classes to the separate wallet containers
@@ -86,6 +91,7 @@ export class DigitalWallets {
         }
     }
     addStripeDigitalWallets() {
+        this.logger.log("Stripe Digital Wallets detected");
         this.addOptionToPaymentTypeField("stripedigitalwallet", "GooglePay / ApplePay");
         // ENGrid.setBodyData(
         //   "payment-type-option-apple-pay",
@@ -99,15 +105,26 @@ export class DigitalWallets {
         ENGrid.setBodyData("payment-type-option-apple-pay", "true");
         ENGrid.setBodyData("payment-type-option-google-pay", "true");
         ENGrid.setBodyData("payment-type-option-stripedigitalwallet", "true");
+        this.addStripeDigitalWalletListener()
+            ? this.logger.log("Stripe Digital Wallet listener added successfully")
+            : this.logger.log("Failed to add Stripe Digital Wallet listener");
     }
     addPaypalTouchDigitalWallets() {
+        this.logger.log("Paypal Touch Digital Wallets detected");
         this.addOptionToPaymentTypeField("paypaltouch", "Paypal / Venmo");
         ENGrid.setBodyData("payment-type-option-paypal-one-touch", "true");
         ENGrid.setBodyData("payment-type-option-venmo", "true");
+        this.addPaypalOneTouchListener()
+            ? this.logger.log("Paypal Touch listener added successfully")
+            : this.logger.log("Failed to add Paypal Touch listener");
     }
     addDAF() {
+        this.logger.log("DAF Digital Wallet detected");
         this.addOptionToPaymentTypeField("daf", "Donor Advised Fund");
         ENGrid.setBodyData("payment-type-option-daf", "true");
+        this.addDAFListener()
+            ? this.logger.log("DAF listener added successfully")
+            : this.logger.log("Failed to add DAF listener");
     }
     addOptionToPaymentTypeField(value, label) {
         const paymentTypeField = document.querySelector('[name="transaction.paymenttype"]');
@@ -144,12 +161,36 @@ export class DigitalWallets {
                     else if (walletType === "daf") {
                         this.addDAF();
                     }
-                    //Disconnect observer to prevent multiple additions
+                    //Disconnect observer and break loop to prevent multiple additions
                     observer.disconnect();
+                    break;
                 }
             }
         };
         const observer = new MutationObserver(callback);
         observer.observe(node, { childList: true, subtree: true });
     }
+    addPaypalOneTouchListener() {
+        var _a, _b, _c, _d, _e;
+        const paypalTouch = (_d = (_c = (_b = (_a = window.EngagingNetworks) === null || _a === void 0 ? void 0 : _a.require) === null || _b === void 0 ? void 0 : _b._defined) === null || _c === void 0 ? void 0 : _c.enPaypalTouch) === null || _d === void 0 ? void 0 : _d.paypalTouch;
+        if (!((_e = paypalTouch === null || paypalTouch === void 0 ? void 0 : paypalTouch.library) === null || _e === void 0 ? void 0 : _e.Buttons)) {
+            this.logger.log("Paypal Touch library not found, cannot add listener");
+            return false;
+        }
+        const buttons = paypalTouch.library.Buttons.bind(paypalTouch.library);
+        paypalTouch.library.Buttons = (o) => buttons(Object.assign(Object.assign({}, o), { onClick: (d, a) => (this._form.dispatchIntentSubmit(),
+                o.onClick && o.onClick(d, a)) }));
+        paypalTouch.unloadButton && paypalTouch.unloadButton();
+        paypalTouch.loadButton && paypalTouch.loadButton();
+        return true;
+    }
+    addStripeDigitalWalletListener() {
+        var _a, _b, _c, _d, _e, _f;
+        return !!((_f = (_e = (_d = (_c = (_b = (_a = window.EngagingNetworks) === null || _a === void 0 ? void 0 : _a.require) === null || _b === void 0 ? void 0 : _b._defined) === null || _c === void 0 ? void 0 : _c.enStripeButtons) === null || _d === void 0 ? void 0 : _d.stripeButtons) === null || _e === void 0 ? void 0 : _e.paymentRequest) === null || _f === void 0 ? void 0 : _f.on("paymentmethod", this._form.dispatchIntentSubmit.bind(this._form)));
+    }
+    addDAFListener() {
+        const chariotButton = document.getElementById("chariot-button");
+        chariotButton === null || chariotButton === void 0 ? void 0 : chariotButton.addEventListener("click", this._form.dispatchIntentSubmit.bind(this._form));
+        return !!chariotButton;
+    }
 }

package/dist/events/en-form.d.ts

@@ -1,5 +1,6 @@
 export declare class EnForm {
     private logger;
+    private _onIntentSubmit;
     private _onSubmit;
     private _onValidate;
     private _onError;
@@ -10,11 +11,37 @@ export declare class EnForm {
     private static instance;
     private constructor();
     static getInstance(): EnForm;
+    dispatchIntentSubmit(): void;
     dispatchSubmit(): void;
     dispatchValidate(): void;
     dispatchError(): void;
     submitForm(): void;
+    /**
+     * onIntentSubmit is dispatched when a submit button is clicked,
+     * or a digital wallet submission is initiated,
+     * but before server-side validation or the actual submit event.
+     * This allows you to run code at the moment the user intends to submit,
+     * such as triggering data formatting, analytics events, or other pre-submit actions.
+     * Actions that rely on fully processed form data or validation results should use the onSubmit event instead.
+     * Note: onSubmit will also dispatch onIntentSubmit, so do not repeat actions in both events.
+     */
+    get onIntentSubmit(): import("strongly-typed-events").ISignal;
+    /**
+     * onSubmit is dispatched when the form is submitted, after validation has passed.
+     * This is the main event to listen to for form submissions, as it indicates that the user has successfully submitted the form and all validation checks have been passed.
+     * This event uses window.enOnSubmit, which is called by Engaging Networks' JavaScript when the form is submitted.
+     * At the time of writing, enOnSubmit does not trigger when a user submits via a digital wallet, use onIntentSubmit to listen for those submission attempts.
+     * Note: onSubmit will also dispatch onIntentSubmit, so do not repeat actions in both events.
+     */
     get onSubmit(): import("strongly-typed-events").ISignal;
-    get onError(): import("strongly-typed-events").ISignal;
+    /**
+     * onValidate is dispatched using window.enOnValidate, which is called by Engaging Networks' JavaScript
+     * when the form is being validated, before submission. This only occurs after ENgrid's client-side validation has passed, but before server-side validation.
+     */
     get onValidate(): import("strongly-typed-events").ISignal;
+    /**
+     * onError is dispatched using window.enOnError, which is called by Engaging Networks' JavaScript when a server-side validation error occurs on form submission.
+     * This allows you to listen for validation errors and respond accordingly, such as displaying custom error messages or triggering analytics events.
+     */
+    get onError(): import("strongly-typed-events").ISignal;
 }

package/dist/events/en-form.js

@@ -3,6 +3,7 @@ import { EngridLogger } from "..";
 export class EnForm {
     constructor() {
         this.logger = new EngridLogger("EnForm");
+        this._onIntentSubmit = new SignalDispatcher();
         this._onSubmit = new SignalDispatcher();
         this._onValidate = new SignalDispatcher();
         this._onError = new SignalDispatcher();
@@ -17,6 +18,10 @@ export class EnForm {
         }
         return EnForm.instance;
     }
+    dispatchIntentSubmit() {
+        this._onIntentSubmit.dispatch();
+        this.logger.log("dispatchIntentSubmit");
+    }
     dispatchSubmit() {
         this._onSubmit.dispatch();
         this.logger.log("dispatchSubmit");
@@ -40,13 +45,40 @@ export class EnForm {
             this.logger.log("submitForm");
         }
     }
+    /**
+     * onIntentSubmit is dispatched when a submit button is clicked,
+     * or a digital wallet submission is initiated,
+     * but before server-side validation or the actual submit event.
+     * This allows you to run code at the moment the user intends to submit,
+     * such as triggering data formatting, analytics events, or other pre-submit actions.
+     * Actions that rely on fully processed form data or validation results should use the onSubmit event instead.
+     * Note: onSubmit will also dispatch onIntentSubmit, so do not repeat actions in both events.
+     */
+    get onIntentSubmit() {
+        return this._onIntentSubmit.asEvent();
+    }
+    /**
+     * onSubmit is dispatched when the form is submitted, after validation has passed.
+     * This is the main event to listen to for form submissions, as it indicates that the user has successfully submitted the form and all validation checks have been passed.
+     * This event uses window.enOnSubmit, which is called by Engaging Networks' JavaScript when the form is submitted.
+     * At the time of writing, enOnSubmit does not trigger when a user submits via a digital wallet, use onIntentSubmit to listen for those submission attempts.
+     * Note: onSubmit will also dispatch onIntentSubmit, so do not repeat actions in both events.
+     */
     get onSubmit() {
         return this._onSubmit.asEvent();
     }
-    get onError() {
-        return this._onError.asEvent();
-    }
+    /**
+     * onValidate is dispatched using window.enOnValidate, which is called by Engaging Networks' JavaScript
+     * when the form is being validated, before submission. This only occurs after ENgrid's client-side validation has passed, but before server-side validation.
+     */
     get onValidate() {
         return this._onValidate.asEvent();
     }
+    /**
+     * onError is dispatched using window.enOnError, which is called by Engaging Networks' JavaScript when a server-side validation error occurs on form submission.
+     * This allows you to listen for validation errors and respond accordingly, such as displaying custom error messages or triggering analytics events.
+     */
+    get onError() {
+        return this._onError.asEvent();
+    }
 }

package/dist/interfaces/options.d.ts

@@ -178,6 +178,7 @@ export interface Options {
     };
     onLoad?: () => void;
     onResize?: () => void;
+    onIntentSubmit?: () => void;
     onSubmit?: () => void;
     onError?: () => void;
     onValidate?: () => void;

package/dist/version.d.ts

@@ -1 +1 @@
-export declare const AppVersion = "0.24.5";
+export declare const AppVersion = "0.25.0";

package/dist/version.js

@@ -1 +1 @@
-export const AppVersion = "0.24.5";
+export const AppVersion = "0.25.0";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@4site/engrid-scripts",
-  "version": "0.24.5",
+  "version": "0.25.0",
   "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": "1db8b57a2a017c14aaa2f5704ee476be62df0970",
+  "gitHead": "6f0962a8be8ef7211c383a7d8d7b2c188091408d",
   "devDependencies": {
     "nodemon": "^2.0.20"
   }