@4site/engrid-scripts 0.27.3 → 0.27.4

package/dist/frequency-upsell-modal.d.ts

@@ -3,7 +3,7 @@ export declare class FrequencyUpsellModal extends Modal {
     private readonly upsellOptions;
     private _amountWithFees;
     private _upsellAmountWithFees;
-    constructor(upsellOptions: FrequencyUpsellOptions);
+    constructor(upsellOptions: FrequencyUpsellOptions, onDismiss?: () => void);
     set amountWithFees(value: number);
     set upsellAmountWithFees(value: number);
     updateModalContent(): void;

package/dist/frequency-upsell-modal.js

@@ -5,11 +5,12 @@
  */
 import { ENGrid, Modal } from ".";
 export class FrequencyUpsellModal extends Modal {
-    constructor(upsellOptions) {
+    constructor(upsellOptions, onDismiss) {
         super({
             onClickOutside: "bounce",
             customClass: `engrid--frequency-upsell-modal ${upsellOptions.customClass}`,
-            showCloseX: false,
+            showCloseX: upsellOptions.showCloseX,
+            onDismiss,
         });
         this._amountWithFees = 0;
         this._upsellAmountWithFees = 0;

package/dist/frequency-upsell.d.ts

@@ -31,6 +31,11 @@ export declare class FrequencyUpsell {
      */
     getUpsellAmount(withFee: boolean): number;
     private addEventListeners;
+    /**
+     * Handle the modal being dismissed via the X button, Esc key, or click-outside.
+     * This always counts as a decline (onDecline fires either way).
+     */
+    private handleModalDismiss;
     /**
      * Create the frequency field for the upsell, if it does not exist on the page already
      * This is required by DonationFrequency to set the frequency

package/dist/frequency-upsell.js

@@ -23,7 +23,7 @@ export class FrequencyUpsell {
         }
         this.options = this.selectOptions(window.EngridFrequencyUpsell);
         this.logger.log("FrequencyUpsell initialized", this.options);
-        this.upsellModal = new FrequencyUpsellModal(this.options);
+        this.upsellModal = new FrequencyUpsellModal(this.options, () => this.handleModalDismiss());
         this.createFrequencyField();
         this.addEventListeners();
     }
@@ -144,6 +144,20 @@ export class FrequencyUpsell {
             return true;
         });
     }
+    /**
+     * Handle the modal being dismissed via the X button, Esc key, or click-outside.
+     * This always counts as a decline (onDecline fires either way).
+     */
+    handleModalDismiss() {
+        this.logger.log("Frequency upsell modal dismissed (declined)");
+        this.options.onDecline();
+        if (this.options.submitOnClose) {
+            this._form.submitForm();
+        }
+        else {
+            this._form.dispatchError();
+        }
+    }
     /**
      * Create the frequency field for the upsell, if it does not exist on the page already
      * This is required by DonationFrequency to set the frequency

package/dist/interfaces/frequency-upsell-options.d.ts

@@ -10,6 +10,8 @@ export interface FrequencyUpsellOptions {
     onOpen: () => void;
     onAccept: () => void;
     onDecline: () => void;
+    showCloseX: boolean;
+    submitOnClose: boolean;
 }
 export interface FrequencyUpsellABTestConfig {
     abTest: true;

package/dist/interfaces/frequency-upsell-options.js

@@ -10,4 +10,6 @@ export const FrequencyUpsellOptionsDefaults = {
     onOpen: () => { },
     onAccept: () => { },
     onDecline: () => { },
+    showCloseX: false,
+    submitOnClose: false,
 };

package/dist/modal.d.ts

@@ -4,6 +4,8 @@ interface ModalOptions {
     closeButtonLabel?: string;
     customClass?: string;
     showCloseX?: boolean;
+    closeOnEsc?: boolean;
+    onDismiss?: () => void;
 }
 export declare abstract class Modal {
     modalContent: NodeListOf<Element> | HTMLElement | String;
@@ -13,7 +15,14 @@ export declare abstract class Modal {
     protected constructor(options: ModalOptions);
     private createModal;
     private addEventListeners;
+    /**
+     * Generic entry point for dismissing the modal.
+     * Fires the onDismiss callback before closing, so consumers can react to the modal being
+     * dismissed rather than closed via their own explicit button logic.
+     */
+    private dismiss;
     private focusTrapHandler;
+    private escKeyHandler;
     open(): void;
     close(): void;
     getModalContent(): NodeListOf<Element> | HTMLElement | String;

package/dist/modal.js

@@ -8,6 +8,8 @@ export class Modal {
             closeButtonLabel: "Okay!",
             customClass: "",
             showCloseX: true,
+            closeOnEsc: true,
+            onDismiss: () => { },
         };
         this.focusTrapHandler = (e) => {
             const modalElement = this.modal;
@@ -33,6 +35,11 @@ export class Modal {
                 }
             }
         };
+        this.escKeyHandler = (e) => {
+            if (e.key === "Escape" && this.options.closeOnEsc) {
+                this.dismiss();
+            }
+        };
         this.options = Object.assign(Object.assign({}, this.defaultOptions), options);
         this.modalContent = this.getModalContent();
         this.createModal();
@@ -83,7 +90,7 @@ export class Modal {
             button.classList.add("engrid-modal__button");
             button.textContent = this.options.closeButtonLabel;
             button.addEventListener("click", () => {
-                this.close();
+                this.dismiss();
             });
             modalBody === null || modalBody === void 0 ? void 0 : modalBody.appendChild(button);
         }
@@ -93,13 +100,13 @@ export class Modal {
         var _a, _b, _c, _d, _e;
         // Close event on top X
         (_b = (_a = this.modal) === null || _a === void 0 ? void 0 : _a.querySelector(".engrid-modal__close")) === null || _b === void 0 ? void 0 : _b.addEventListener("click", () => {
-            this.close();
+            this.dismiss();
         });
         // Bounce scale when clicking outside of modal
         (_d = (_c = this.modal) === null || _c === void 0 ? void 0 : _c.querySelector(".engrid-modal__overlay")) === null || _d === void 0 ? void 0 : _d.addEventListener("click", (event) => {
             if (event.target === event.currentTarget) {
                 if (this.options.onClickOutside === "close") {
-                    this.close();
+                    this.dismiss();
                 }
                 else if (this.options.onClickOutside === "bounce") {
                     const modal = document.querySelector(".engrid-modal");
@@ -115,25 +122,37 @@ export class Modal {
         const closeEls = (_e = this.modal) === null || _e === void 0 ? void 0 : _e.querySelectorAll(".modal__close");
         closeEls === null || closeEls === void 0 ? void 0 : closeEls.forEach((el) => {
             el.addEventListener("click", () => {
-                this.close();
+                this.dismiss();
             });
         });
     }
+    /**
+     * Generic entry point for dismissing the modal.
+     * Fires the onDismiss callback before closing, so consumers can react to the modal being
+     * dismissed rather than closed via their own explicit button logic.
+     */
+    dismiss() {
+        var _a, _b;
+        (_b = (_a = this.options).onDismiss) === null || _b === void 0 ? void 0 : _b.call(_a);
+        this.close();
+    }
     open() {
-        var _a, _b, _c, _d;
+        var _a, _b, _c, _d, _e;
         ENGrid.setBodyData("has-lightbox", "true");
         (_a = this.modal) === null || _a === void 0 ? void 0 : _a.classList.remove("modal--hidden");
         (_b = this.modal) === null || _b === void 0 ? void 0 : _b.removeAttribute("aria-hidden");
         const container = (_c = this.modal) === null || _c === void 0 ? void 0 : _c.querySelector(".engrid-modal__container");
         container === null || container === void 0 ? void 0 : container.focus({ preventScroll: true });
         (_d = this.modal) === null || _d === void 0 ? void 0 : _d.addEventListener("keydown", this.focusTrapHandler);
+        (_e = this.modal) === null || _e === void 0 ? void 0 : _e.addEventListener("keydown", this.escKeyHandler);
     }
     close() {
-        var _a, _b, _c;
+        var _a, _b, _c, _d;
         ENGrid.setBodyData("has-lightbox", false);
         (_a = this.modal) === null || _a === void 0 ? void 0 : _a.classList.add("modal--hidden");
         (_b = this.modal) === null || _b === void 0 ? void 0 : _b.setAttribute("aria-hidden", "true");
         (_c = this.modal) === null || _c === void 0 ? void 0 : _c.removeEventListener("keydown", this.focusTrapHandler);
+        (_d = this.modal) === null || _d === void 0 ? void 0 : _d.removeEventListener("keydown", this.escKeyHandler);
     }
     getModalContent() {
         return "<h1>Default Modal Content</h1>";

package/dist/version.d.ts

@@ -1 +1 @@
-export declare const AppVersion = "0.27.3";
+export declare const AppVersion = "0.27.4";

package/dist/version.js

@@ -1 +1 @@
-export const AppVersion = "0.27.3";
+export const AppVersion = "0.27.4";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@4site/engrid-scripts",
-  "version": "0.27.3",
+  "version": "0.27.4",
   "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": "b117056008fd80443843cefd5178ad9942a59843",
+  "gitHead": "e01ad2b4ea0b53edda39388f6597976e33e5f129",
   "devDependencies": {
     "nodemon": "^2.0.20"
   }