@4site/engrid-scripts 0.22.14 → 0.22.16

package/dist/frequency-upsell.d.ts

@@ -8,6 +8,13 @@ export declare class FrequencyUpsell {
     private _form;
     private modalSeen;
     constructor();
+    /**
+     * Select the proper options (single config or A/B variant) and return a concrete FrequencyUpsellOptions object.
+     * If an A/B test config is provided (abTest: true, options: [...]) a random variant is chosen and stored
+     * in a 1-day cookie so subsequent visits get the same variant.
+     */
+    private selectOptions;
+    private randomIndex;
     /**
      * Check if the FrequencyUpsell should run:
      * - Check if the FrequencyUpsell is enabled in the window object

package/dist/frequency-upsell.js

@@ -5,6 +5,7 @@
  * See FrequencyUpsellOptions for more details.
  */
 import { DonationAmount, DonationFrequency, EnForm, EngridLogger, FrequencyUpsellModal, FrequencyUpsellOptionsDefaults, ProcessingFees, } from ".";
+import * as cookie from "./cookie";
 export class FrequencyUpsell {
     constructor() {
         this.logger = new EngridLogger("FrequencyUpsell", "lightgray", "darkblue", "🏦");
@@ -19,12 +20,55 @@ export class FrequencyUpsell {
             this.logger.log("FrequencyUpsell not running");
             return;
         }
-        this.options = Object.assign(Object.assign({}, FrequencyUpsellOptionsDefaults), window.EngridFrequencyUpsell);
+        this.options = this.selectOptions(window.EngridFrequencyUpsell);
         this.logger.log("FrequencyUpsell initialized", this.options);
         this.upsellModal = new FrequencyUpsellModal(this.options);
         this.createFrequencyField();
         this.addEventListeners();
     }
+    /**
+     * Select the proper options (single config or A/B variant) and return a concrete FrequencyUpsellOptions object.
+     * If an A/B test config is provided (abTest: true, options: [...]) a random variant is chosen and stored
+     * in a 1-day cookie so subsequent visits get the same variant.
+     */
+    selectOptions(config) {
+        // Simple (non AB) case
+        if (!config.abTest) {
+            return Object.assign(Object.assign({}, FrequencyUpsellOptionsDefaults), config);
+        }
+        const abConfig = config;
+        const cookieName = abConfig.cookieName || "engrid_frequency_upsell_variant";
+        const existing = cookie.get(cookieName);
+        let index;
+        if (existing !== undefined) {
+            const parsed = parseInt(existing, 10);
+            if (!isNaN(parsed) && parsed >= 0 && parsed < abConfig.options.length) {
+                index = parsed;
+            }
+            else {
+                index = this.randomIndex(abConfig.options.length);
+            }
+        }
+        else {
+            index = this.randomIndex(abConfig.options.length);
+        }
+        // Persist for configured duration
+        const duration = abConfig.cookieDurationDays || 1;
+        cookie.set(cookieName, index.toString(), { expires: duration });
+        const chosen = abConfig.options[index];
+        // Push variant info to dataLayer if available
+        if (window.dataLayer) {
+            window.dataLayer.push({
+                event: "frequency_upsell_ab_variant",
+                frequencyUpsellVariantIndex: index,
+                frequencyUpsellVariantTitle: chosen.title,
+            });
+        }
+        return Object.assign(Object.assign({}, FrequencyUpsellOptionsDefaults), chosen);
+    }
+    randomIndex(length) {
+        return Math.floor(Math.random() * length);
+    }
     /**
      * Check if the FrequencyUpsell should run:
      * - Check if the FrequencyUpsell is enabled in the window object

package/dist/index.d.ts

@@ -3,7 +3,7 @@ export { Options, OptionsDefaults } from "./interfaces/options";
 export { UpsellOptions, UpsellOptionsDefaults, } from "./interfaces/upsell-options";
 export { TranslateOptions, TranslateOptionsDefaults, } from "./interfaces/translate-options";
 export { ExitIntentOptions, ExitIntentOptionsDefaults, } from "./interfaces/exit-intent-options";
-export { FrequencyUpsellOptions, FrequencyUpsellOptionsDefaults, } from "./interfaces/frequency-upsell-options";
+export { FrequencyUpsellOptions, FrequencyUpsellOptionsDefaults, FrequencyUpsellABTestConfig, FrequencyUpsellConfig, } from "./interfaces/frequency-upsell-options";
 export * from "./loader";
 export * from "./app";
 export * from "./amount-label";

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

@@ -11,4 +11,11 @@ export interface FrequencyUpsellOptions {
     onAccept: () => void;
     onDecline: () => void;
 }
+export interface FrequencyUpsellABTestConfig {
+    abTest: true;
+    options: FrequencyUpsellOptions[];
+    cookieName?: string;
+    cookieDurationDays?: number;
+}
+export type FrequencyUpsellConfig = FrequencyUpsellOptions | FrequencyUpsellABTestConfig;
 export declare const FrequencyUpsellOptionsDefaults: FrequencyUpsellOptions;

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/version.d.ts

@@ -1 +1 @@
-export declare const AppVersion = "0.22.14";
+export declare const AppVersion = "0.22.16";

package/dist/version.js

@@ -1 +1 @@
-export const AppVersion = "0.22.14";
+export const AppVersion = "0.22.16";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@4site/engrid-scripts",
-  "version": "0.22.14",
+  "version": "0.22.16",
   "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": "83a15dbeaa859e1952497ae2e932a630df690eb8",
+  "gitHead": "61ace9a9231137c17ba9d180b45bd0634c811871",
   "devDependencies": {
     "nodemon": "^2.0.20"
   }