@4site/engrid-scripts 0.19.1

package/dist/live-variables.js

@@ -0,0 +1,147 @@
+import { DonationAmount, EnForm, DonationFrequency, ProcessingFees, } from "./events";
+import { ENGrid, OptionsDefaults } from ".";
+export class LiveVariables {
+    constructor(options) {
+        var _a;
+        this._amount = DonationAmount.getInstance();
+        this._fees = ProcessingFees.getInstance();
+        this._frequency = DonationFrequency.getInstance();
+        this._form = EnForm.getInstance();
+        this.multiplier = 1 / 12;
+        this.options = Object.assign(Object.assign({}, OptionsDefaults), options);
+        this.submitLabel =
+            ((_a = document.querySelector(".en__submit button")) === null || _a === void 0 ? void 0 : _a.innerHTML) || "Donate";
+        this._amount.onAmountChange.subscribe(() => this.changeSubmitButton());
+        this._amount.onAmountChange.subscribe(() => this.changeLiveAmount());
+        this._amount.onAmountChange.subscribe(() => this.changeLiveUpsellAmount());
+        this._fees.onFeeChange.subscribe(() => this.changeLiveAmount());
+        this._fees.onFeeChange.subscribe(() => this.changeLiveUpsellAmount());
+        this._fees.onFeeChange.subscribe(() => this.changeSubmitButton());
+        this._frequency.onFrequencyChange.subscribe(() => this.changeLiveFrequency());
+        this._frequency.onFrequencyChange.subscribe(() => this.changeRecurrency());
+        this._frequency.onFrequencyChange.subscribe(() => this.changeSubmitButton());
+        this._form.onSubmit.subscribe(() => {
+            if (ENGrid.getPageType() !== "SUPPORTERHUB")
+                ENGrid.disableSubmit("Processing...");
+        });
+        this._form.onError.subscribe(() => ENGrid.enableSubmit());
+        // Watch the monthly-upsell links
+        document.addEventListener("click", (e) => {
+            const element = e.target;
+            if (element) {
+                if (element.classList.contains("monthly-upsell")) {
+                    this.upsold(e);
+                }
+                else if (element.classList.contains("form-submit")) {
+                    e.preventDefault();
+                    this._form.submitForm();
+                }
+            }
+        });
+    }
+    getAmountTxt(amount = 0) {
+        var _a, _b, _c, _d;
+        const symbol = (_a = ENGrid.getCurrencySymbol()) !== null && _a !== void 0 ? _a : "$";
+        const dec_separator = (_b = this.options.DecimalSeparator) !== null && _b !== void 0 ? _b : ".";
+        const thousands_separator = (_c = this.options.ThousandsSeparator) !== null && _c !== void 0 ? _c : "";
+        const dec_places = amount % 1 == 0 ? 0 : (_d = this.options.DecimalPlaces) !== null && _d !== void 0 ? _d : 2;
+        const amountTxt = ENGrid.formatNumber(amount, dec_places, dec_separator, thousands_separator);
+        return amount > 0
+            ? (`<span class="live-variable-currency">${symbol}</span><span class="live-variable-amount">${amountTxt}</span>`)
+            : "";
+    }
+    getUpsellAmountTxt(amount = 0) {
+        var _a, _b, _c, _d;
+        const symbol = (_a = ENGrid.getCurrencySymbol()) !== null && _a !== void 0 ? _a : "$";
+        const dec_separator = (_b = this.options.DecimalSeparator) !== null && _b !== void 0 ? _b : ".";
+        const thousands_separator = (_c = this.options.ThousandsSeparator) !== null && _c !== void 0 ? _c : "";
+        const dec_places = amount % 1 == 0 ? 0 : (_d = this.options.DecimalPlaces) !== null && _d !== void 0 ? _d : 2;
+        const amountTxt = ENGrid.formatNumber(Math.ceil(amount / 5) * 5, dec_places, dec_separator, thousands_separator);
+        return amount > 0 ? symbol + amountTxt : "";
+    }
+    getUpsellAmountRaw(amount = 0) {
+        const amountRaw = Math.ceil(amount / 5) * 5;
+        return amount > 0 ? amountRaw.toString() : "";
+    }
+    changeSubmitButton() {
+        const submit = document.querySelector(".en__submit button");
+        const amount = this.getAmountTxt(this._amount.amount + this._fees.fee);
+        const frequency = this._frequency.frequency == "onetime"
+            ? ""
+            : this._frequency.frequency == "annual"
+                ? "annually"
+                : this._frequency.frequency;
+        let label = this.submitLabel;
+        if (amount) {
+            label = label.replace("$AMOUNT", amount);
+            label = label.replace("$FREQUENCY", `<span class="live-variable-frequency">${frequency}</span>`);
+        }
+        else {
+            label = label.replace("$AMOUNT", "");
+            label = label.replace("$FREQUENCY", "");
+        }
+        if (submit && label) {
+            submit.innerHTML = label;
+        }
+    }
+    changeLiveAmount() {
+        const value = this._amount.amount + this._fees.fee;
+        const live_amount = document.querySelectorAll(".live-giving-amount");
+        live_amount.forEach((elem) => (elem.innerHTML = this.getAmountTxt(value)));
+    }
+    changeLiveUpsellAmount() {
+        const value = (this._amount.amount + this._fees.fee) * this.multiplier;
+        const live_upsell_amount = document.querySelectorAll(".live-giving-upsell-amount");
+        live_upsell_amount.forEach((elem) => (elem.innerHTML = this.getUpsellAmountTxt(value)));
+        const live_upsell_amount_raw = document.querySelectorAll(".live-giving-upsell-amount-raw");
+        live_upsell_amount_raw.forEach((elem) => (elem.innerHTML = this.getUpsellAmountRaw(value)));
+    }
+    changeLiveFrequency() {
+        const live_frequency = document.querySelectorAll(".live-giving-frequency");
+        live_frequency.forEach((elem) => (elem.innerHTML =
+            this._frequency.frequency == "onetime"
+                ? ""
+                : this._frequency.frequency));
+    }
+    changeRecurrency() {
+        const recurrpay = document.querySelector("[name='transaction.recurrpay']");
+        if (recurrpay && recurrpay.type != "radio") {
+            recurrpay.value = this._frequency.frequency == "onetime" ? "N" : "Y";
+            this._frequency.recurring = recurrpay.value;
+            if (ENGrid.getOption("Debug"))
+                console.log("Recurpay Changed!");
+            // Trigger the onChange event for the field
+            const event = new Event("change", { bubbles: true });
+            recurrpay.dispatchEvent(event);
+        }
+    }
+    // Watch for a clicks on monthly-upsell link
+    upsold(e) {
+        // Find and select monthly giving
+        const enFieldRecurrpay = document.querySelector(".en__field--recurrpay input[value='Y']");
+        if (enFieldRecurrpay) {
+            enFieldRecurrpay.checked = true;
+        }
+        // Find the hidden radio select that needs to be selected when entering an "Other" amount
+        const enFieldOtherAmountRadio = document.querySelector(".en__field--donationAmt input[value='other']");
+        if (enFieldOtherAmountRadio) {
+            enFieldOtherAmountRadio.checked = true;
+        }
+        // Enter the other amount and remove the "en__field__item--hidden" class from the input's parent
+        const enFieldOtherAmount = document.querySelector("input[name='transaction.donationAmt.other']");
+        if (enFieldOtherAmount) {
+            enFieldOtherAmount.value = this.getUpsellAmountRaw(this._amount.amount * this.multiplier);
+            this._amount.load();
+            this._frequency.load();
+            if (enFieldOtherAmount.parentElement) {
+                enFieldOtherAmount.parentElement.classList.remove("en__field__item--hidden");
+            }
+        }
+        const target = e.target;
+        if (target && target.classList.contains("form-submit")) {
+            e.preventDefault();
+            // Form submit
+            this._form.submitForm();
+        }
+    }
+}

package/dist/loader.d.ts

@@ -0,0 +1,10 @@
+export declare class Loader {
+    private logger;
+    private cssElement;
+    private jsElement;
+    reload(): boolean;
+    private getOption;
+    private setCssFile;
+    private setJsFile;
+    private addENgridCSSUnloadedCSS;
+}

package/dist/loader.js

@@ -0,0 +1,175 @@
+// Ref: https://app.getguru.com/card/iMgx968T/ENgrid-Loader
+import { ENGrid, EngridLogger } from ".";
+export class Loader {
+    constructor() {
+        this.logger = new EngridLogger("Loader", "gold", "black", "🔁");
+        this.cssElement = document.querySelector('link[href*="engrid."][rel="stylesheet"]');
+        this.jsElement = document.querySelector('script[src*="engrid."]');
+    }
+    // Returns true if ENgrid should reload (that means the current ENgrid is not the right one)
+    // Returns false if ENgrid should not reload (that means the current ENgrid is the right one)
+    reload() {
+        var _a, _b, _c;
+        const assets = this.getOption("assets");
+        const isLoaded = ENGrid.getBodyData("loaded");
+        let shouldSkipCss = this.getOption("engridcss") === "false";
+        let shouldSkipJs = this.getOption("engridjs") === "false";
+        if (isLoaded || !assets) {
+            if (shouldSkipCss && this.cssElement) {
+                this.logger.log("engridcss=false | Removing original stylesheet:", this.cssElement);
+                this.cssElement.remove();
+            }
+            if (shouldSkipJs && this.jsElement) {
+                this.logger.log("engridjs=false | Removing original script:", this.jsElement);
+                this.jsElement.remove();
+            }
+            if (shouldSkipCss) {
+                this.logger.log("engridcss=false | adding top banner CSS");
+                this.addENgridCSSUnloadedCSS();
+            }
+            if (shouldSkipJs) {
+                this.logger.log("engridjs=false | Skipping JS load.");
+                this.logger.success("LOADED");
+                return true;
+            }
+            this.logger.success("LOADED");
+            return false;
+        }
+        // Load the right ENgrid
+        this.logger.log("RELOADING");
+        ENGrid.setBodyData("loaded", "true"); // Set the loaded flag, so the next time we don't reload
+        // Fetch the desired repo, assets location, and override JS/CSS
+        const theme = ENGrid.getBodyData("theme");
+        const engrid_repo = (_a = this.getOption("repo-name")) !== null && _a !== void 0 ? _a : `engrid-${theme}`;
+        let engrid_js_url = "";
+        let engrid_css_url = "";
+        switch (assets) {
+            case "local":
+                this.logger.log("LOADING LOCAL");
+                ENGrid.setBodyData("assets", "local");
+                engrid_js_url = `https://${engrid_repo}.test/dist/engrid.js`;
+                engrid_css_url = `https://${engrid_repo}.test/dist/engrid.css`;
+                break;
+            case "flush":
+                this.logger.log("FLUSHING CACHE");
+                const timestamp = Date.now();
+                const jsCurrentURL = new URL(((_b = this.jsElement) === null || _b === void 0 ? void 0 : _b.getAttribute("src")) || "");
+                jsCurrentURL.searchParams.set("v", timestamp.toString());
+                engrid_js_url = jsCurrentURL.toString();
+                const cssCurrentURL = new URL(((_c = this.cssElement) === null || _c === void 0 ? void 0 : _c.getAttribute("href")) || "");
+                cssCurrentURL.searchParams.set("v", timestamp.toString());
+                engrid_css_url = cssCurrentURL.toString();
+                break;
+            default:
+                this.logger.log("LOADING EXTERNAL");
+                engrid_js_url = `https://s3.amazonaws.com/engrid-dev.4sitestudios.com/${engrid_repo}/${assets}/engrid.js`;
+                engrid_css_url = `https://s3.amazonaws.com/engrid-dev.4sitestudios.com/${engrid_repo}/${assets}/engrid.css`;
+        }
+        if (shouldSkipCss && this.cssElement) {
+            this.logger.log("engridcss=false | Removing original stylesheet:", this.cssElement);
+            this.cssElement.remove();
+        }
+        if (shouldSkipCss && engrid_css_url && engrid_css_url !== "") {
+            this.logger.log("engridcss=false | Skipping injection of stylesheet:", engrid_css_url);
+        }
+        if (shouldSkipCss) {
+            this.logger.log("engridcss=false | adding top banner CSS");
+            this.addENgridCSSUnloadedCSS();
+        }
+        else {
+            this.setCssFile(engrid_css_url);
+        }
+        if (shouldSkipJs && this.jsElement) {
+            this.logger.log("engridjs=false | Removing original script:", this.jsElement);
+            this.jsElement.remove();
+        }
+        if (shouldSkipJs && engrid_js_url && engrid_js_url !== "") {
+            this.logger.log("engridjs=false | Skipping injection of script:", engrid_js_url);
+        }
+        if (!shouldSkipJs) {
+            this.setJsFile(engrid_js_url);
+        }
+        // If custom assets aren't defined, we don't need to reload.
+        if (!assets) {
+            return false;
+        }
+        return true;
+    }
+    getOption(key) {
+        const urlParam = ENGrid.getUrlParameter(key);
+        if (urlParam && ["assets", "engridcss", "engridjs"].includes(key)) {
+            return urlParam;
+        }
+        else if (window.EngridLoader && window.EngridLoader.hasOwnProperty(key)) {
+            return window.EngridLoader[key];
+        }
+        else if (this.jsElement && this.jsElement.hasAttribute("data-" + key)) {
+            return this.jsElement.getAttribute("data-" + key);
+        }
+        return null;
+    }
+    setCssFile(url) {
+        if (url === "") {
+            return;
+        }
+        if (this.cssElement) {
+            this.logger.log("Replacing stylesheet:", url);
+            this.cssElement.setAttribute("href", url);
+        }
+        else {
+            this.logger.log("Injecting stylesheet:", url);
+            const link = document.createElement("link");
+            link.setAttribute("rel", "stylesheet");
+            link.setAttribute("type", "text/css");
+            link.setAttribute("media", "all");
+            link.setAttribute("href", url);
+            document.head.appendChild(link);
+        }
+    }
+    setJsFile(url) {
+        if (url === "") {
+            return;
+        }
+        this.logger.log("Injecting script:", url);
+        const script = document.createElement("script");
+        script.setAttribute("src", url);
+        document.head.appendChild(script);
+    }
+    addENgridCSSUnloadedCSS() {
+        document.body.insertAdjacentHTML("beforeend", `<style>
+        html,
+        body {
+            background-color: #ffffff;
+        }
+
+        body {
+            opacity: 1;
+            margin: 0;
+        }
+
+        body:before {
+            content: "ENGRID CSS UNLOADED";
+            display: flex;
+            justify-content: center;
+            align-items: center;
+            width: 100%;
+            background-color: #ffff00;
+            padding: 1rem;
+            margin-bottom: 1rem;
+            font-family: sans-serif;
+            font-weight: 600;
+        }
+
+        .en__component--advrow {
+            flex-direction: column;
+            max-width: 600px;
+            margin: 0 auto;
+        }
+
+        .en__component--advrow * {
+            max-width: 100%;
+            height: auto;
+        }
+      </style>`);
+    }
+}

package/dist/logger.d.ts

@@ -0,0 +1,16 @@
+/**
+ * A better logger. It only works if debug is enabled.
+ */
+export declare class EngridLogger {
+    prefix: string;
+    color: string;
+    background: string;
+    emoji: string;
+    constructor(prefix?: string, color?: string, background?: string, emoji?: string);
+    get log(): Function;
+    get success(): Function;
+    get danger(): Function;
+    get warn(): Function;
+    get dir(): Function;
+    get error(): Function;
+}

package/dist/logger.js

@@ -0,0 +1,84 @@
+import { ENGrid } from ".";
+/**
+ * A better logger. It only works if debug is enabled.
+ */
+export class EngridLogger {
+    constructor(prefix, color, background, emoji) {
+        this.prefix = "";
+        this.color = "black";
+        this.background = "white";
+        this.emoji = "";
+        if (emoji) {
+            this.emoji = emoji;
+        }
+        else {
+            switch (color) {
+                case "red":
+                    this.emoji = "🔴";
+                    break;
+                case "green":
+                    this.emoji = "🟢";
+                    break;
+                case "blue":
+                    this.emoji = "🔵";
+                    break;
+                case "yellow":
+                    this.emoji = "🟡";
+                    this.background = "black";
+                    break;
+                case "purple":
+                    this.emoji = "🟣";
+                    break;
+                case "black":
+                default:
+                    this.emoji = "⚫";
+                    break;
+            }
+        }
+        if (prefix) {
+            this.prefix = `[ENgrid ${prefix}]`;
+        }
+        if (color) {
+            this.color = color;
+        }
+        if (background) {
+            this.background = background;
+        }
+    }
+    get log() {
+        if (!ENGrid.debug && ENGrid.getUrlParameter("debug") !== "log") {
+            return () => { };
+        }
+        return console.log.bind(window.console, "%c" + this.emoji + " " + this.prefix + " %s", `color: ${this.color}; background-color: ${this.background}; font-size: 1.2em; padding: 4px; border-radius: 2px; font-family: monospace;`);
+    }
+    get success() {
+        if (!ENGrid.debug) {
+            return () => { };
+        }
+        return console.log.bind(window.console, "%c ✅ " + this.prefix + " %s", `color: green; background-color: white; font-size: 1.2em; padding: 4px; border-radius: 2px; font-family: monospace;`);
+    }
+    get danger() {
+        if (!ENGrid.debug) {
+            return () => { };
+        }
+        return console.log.bind(window.console, "%c ⛔️ " + this.prefix + " %s", `color: red; background-color: white; font-size: 1.2em; padding: 4px; border-radius: 2px; font-family: monospace;`);
+    }
+    get warn() {
+        if (!ENGrid.debug) {
+            return () => { };
+        }
+        return console.warn.bind(window.console, "%c" + this.emoji + " " + this.prefix + " %s", `color: ${this.color}; background-color: ${this.background}; font-size: 1.2em; padding: 4px; border-radius: 2px; font-family: monospace;`);
+    }
+    get dir() {
+        if (!ENGrid.debug) {
+            return () => { };
+        }
+        return console.dir.bind(window.console, "%c" + this.emoji + " " + this.prefix + " %s", `color: ${this.color}; background-color: ${this.background}; font-size: 1.2em; padding: 4px; border-radius: 2px; font-family: monospace;`);
+    }
+    get error() {
+        if (!ENGrid.debug) {
+            return () => { };
+        }
+        return console.error.bind(window.console, "%c" + this.emoji + " " + this.prefix + " %s", `color: ${this.color}; background-color: ${this.background}; font-size: 1.2em; padding: 4px; border-radius: 2px; font-family: monospace;`);
+    }
+}

package/dist/media-attribution.d.ts

@@ -0,0 +1,4 @@
+export declare class MediaAttribution {
+    mediaWithAttribution: NodeListOf<Element>;
+    constructor();
+}

package/dist/media-attribution.js

@@ -0,0 +1,66 @@
+/*
+  Looks for specially crafted <img> links and will transform its markup to display an attribution overlay on top of the image
+  Depends on "_engrid-media-attribution.scss" for styling
+
+  Example Image Input
+  <img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAIAAAABCAQAAABeK7cBAAAADUlEQVR42mO8/5+BAQAGgwHgbKwW2QAAAABJRU5ErkJggg==" data-src="https://via.placeholder.com/300x300" data-attribution-source="© Jane Doe 1">
+  <img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAIAAAABCAQAAABeK7cBAAAADUlEQVR42mO8/5+BAQAGgwHgbKwW2QAAAABJRU5ErkJggg==" data-src="https://via.placeholder.com/300x300" data-attribution-source="© John Doe 2" data-attribution-source-link="https://www.google.com/">
+  <img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAIAAAABCAQAAABeK7cBAAAADUlEQVR42mO8/5+BAQAGgwHgbKwW2QAAAABJRU5ErkJggg==" data-src="https://via.placeholder.com/300x300" data-attribution-source="© Max Doe 3" data-attribution-source-link="https://www.google.com/" data-attribution-hide-overlay>
+
+  Example Video Input (Doesn't currently visually display)
+  @TODO Video tags are processed but their <figcaption> is not visually displayed. Need to update "_engrid-media-attribution.scss"
+  <video poster="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAIAAAABCAQAAABeK7cBAAAADUlEQVR42mO8/5+BAQAGgwHgbKwW2QAAAABJRU5ErkJggg==" data-attribution-source="© Jane Doe 1" data-attribution-source-link="https://www.google.com/"> <source data-src="https://player.vimeo.com/external/123456789.hd.mp4?s=987654321&amp;profile_id=123" type="video/mp4"></video>
+
+  Example Image Output
+  <figure class="media-with-attribution"><img src="https://via.placeholder.com/300x300" data-src="https://via.placeholder.com/300x300" data-attribution-source="Jane Doe 1"><figattribution class="attribution-bottomright">Jane Doe 1</figattribution></figure>
+*/
+import { ENGrid } from ".";
+const tippy = require("tippy.js").default;
+export class MediaAttribution {
+    constructor() {
+        // Find all images with attribution but not with the "data-attribution-hide-overlay" attribute
+        this.mediaWithAttribution = document.querySelectorAll("img[data-attribution-source]:not([data-attribution-hide-overlay]), video[data-attribution-source]:not([data-attribution-hide-overlay])");
+        this.mediaWithAttribution.forEach((element) => {
+            if (ENGrid.debug)
+                console.log("The following image was found with data attribution fields on it. It's markup will be changed to add caption support.", element);
+            // Creates the wapping <figure> element
+            let figure = document.createElement("figure");
+            figure.classList.add("media-with-attribution");
+            // Moves the <img> inside its <figure> element
+            let mediaWithAttributionParent = element.parentNode;
+            if (mediaWithAttributionParent) {
+                mediaWithAttributionParent.insertBefore(figure, element);
+                figure.appendChild(element);
+                let mediaWithAttributionElement = element;
+                // Append the <figcaption> element after the <img> and conditionally add the Source's Link to it
+                let attributionSource = mediaWithAttributionElement.dataset.attributionSource;
+                if (attributionSource) {
+                    let attributionSourceLink = mediaWithAttributionElement.dataset.attributionSourceLink;
+                    if (attributionSourceLink) {
+                        mediaWithAttributionElement.insertAdjacentHTML("afterend", '<figattribution><a href="' +
+                            decodeURIComponent(attributionSourceLink) +
+                            '" target="_blank" tabindex="-1">' +
+                            attributionSource +
+                            "</a></figure>");
+                    }
+                    else {
+                        mediaWithAttributionElement.insertAdjacentHTML("afterend", "<figattribution>" + attributionSource + "</figure>");
+                    }
+                    const attributionSourceTooltip = "attributionSourceTooltip" in mediaWithAttributionElement.dataset
+                        ? mediaWithAttributionElement.dataset.attributionSourceTooltip
+                        : false;
+                    if (attributionSourceTooltip) {
+                        tippy(mediaWithAttributionElement.nextSibling, {
+                            content: attributionSourceTooltip,
+                            arrow: true,
+                            arrowType: "default",
+                            placement: "left",
+                            trigger: "click mouseenter focus",
+                            interactive: true,
+                        });
+                    }
+                }
+            }
+        });
+    }
+}

package/dist/menu.js

@@ -0,0 +1 @@
+"use strict";

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

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

package/dist/min-max-amount.js

@@ -0,0 +1,71 @@
+// 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 ".";
+export class MinMaxAmount {
+    constructor() {
+        var _a, _b;
+        this._form = EnForm.getInstance();
+        this._amount = DonationAmount.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.logger = new EngridLogger("MinMaxAmount", "white", "purple", "🔢");
+        if (!this.shouldRun()) {
+            // If we're not on a Donation Page, get out
+            return;
+        }
+        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));
+    }
+    // Should we run the script?
+    shouldRun() {
+        return ENGrid.getPageType() === "DONATION";
+    }
+    // Don't submit the form if the amount is not valid
+    enOnValidate() {
+        if (!this._form.validate)
+            return;
+        const otherAmount = document.querySelector("[name='transaction.donationAmt.other']");
+        if (this._amount.amount < this.minAmount) {
+            this.logger.log("Amount is less than min amount: " + this.minAmount);
+            if (otherAmount) {
+                otherAmount.focus();
+            }
+            this._form.validate = false;
+        }
+        else if (this._amount.amount > this.maxAmount) {
+            this.logger.log("Amount is greater than max amount: " + this.maxAmount);
+            if (otherAmount) {
+                otherAmount.focus();
+            }
+            this._form.validate = false;
+        }
+        window.setTimeout(this.liveValidate.bind(this), 300);
+    }
+    // Disable Submit Button if the amount is not valid
+    liveValidate() {
+        const amount = ENGrid.cleanAmount(this._amount.amount.toString());
+        const activeElement = document.activeElement;
+        if (activeElement &&
+            activeElement.tagName === "INPUT" &&
+            "name" in activeElement &&
+            activeElement.name === "transaction.donationAmt.other" &&
+            amount === 0) {
+            // Don't validate if the other amount has focus and the amount is 0
+            return;
+        }
+        this.logger.log(`Amount: ${amount}`);
+        if (amount < this.minAmount) {
+            this.logger.log("Amount is less than min amount: " + this.minAmount);
+            ENGrid.setError(".en__field--withOther", this.minAmountMessage || "Invalid Amount");
+        }
+        else if (amount > this.maxAmount) {
+            this.logger.log("Amount is greater than max amount: " + this.maxAmount);
+            ENGrid.setError(".en__field--withOther", this.maxAmountMessage || "Invalid Amount");
+        }
+        else {
+            ENGrid.removeError(".en__field--withOther");
+        }
+    }
+}

package/dist/mobile-cta.d.ts

@@ -0,0 +1,9 @@
+export declare class MobileCTA {
+    private options;
+    private buttonLabel;
+    constructor();
+    private renderButton;
+    private addEventListeners;
+    private hideButton;
+    private showButton;
+}