@4site/engrid-scripts 0.19.1

package/dist/interfaces/options.d.ts

@@ -0,0 +1,147 @@
+export interface Options {
+    backgroundImage?: string | string[];
+    MediaAttribution?: boolean;
+    applePay?: boolean;
+    CapitalizeFields?: boolean;
+    ClickToExpand?: boolean;
+    CurrencySymbol?: string;
+    CurrencyCode?: string;
+    AddCurrencySymbol?: boolean;
+    CurrencySeparator?: string;
+    ThousandsSeparator?: string;
+    DecimalSeparator?: string;
+    DecimalPlaces?: number;
+    MinAmount?: number;
+    MaxAmount?: number;
+    MinAmountMessage?: string;
+    MaxAmountMessage?: string;
+    SkipToMainContentLink?: boolean;
+    SrcDefer?: boolean;
+    NeverBounceAPI?: string | null;
+    NeverBounceDateField?: string | null;
+    NeverBounceDateFormat?: string;
+    NeverBounceStatusField?: string | null;
+    FreshAddress?: false | {
+        dateField?: string;
+        dateFieldFormat?: string;
+        statusField?: string;
+        messageField?: string;
+    };
+    ProgressBar?: boolean | null;
+    AutoYear?: boolean;
+    TranslateFields?: boolean;
+    Debug?: boolean;
+    RegionLongFormat?: string;
+    RememberMe?: boolean | {
+        remoteUrl?: string;
+        cookieName?: string;
+        cookieExpirationDays?: number;
+        fieldNames?: string[];
+        fieldDonationAmountRadioName?: string;
+        fieldDonationAmountOtherName?: string;
+        fieldDonationRecurrPayRadioName?: string;
+        fieldDonationAmountOtherCheckboxID?: string;
+        fieldOptInSelectorTarget?: string;
+        fieldOptInSelectorTargetLocation?: string;
+        fieldClearSelectorTarget?: string;
+        fieldClearSelectorTargetLocation?: string;
+        checked?: boolean;
+    };
+    TidyContact?: false | {
+        cid?: string;
+        record_field?: string;
+        date_field?: string;
+        status_field?: string;
+        countries?: string[];
+        country_fallback?: string;
+        us_zip_divider?: string;
+        address_enable?: boolean;
+        address_fields?: {
+            address1: string;
+            address2: string;
+            address3: string;
+            city: string;
+            region: string;
+            postalCode: string;
+            country: string;
+            phone: string;
+        };
+        phone_enable?: boolean;
+        phone_flags?: boolean;
+        phone_country_from_ip?: boolean;
+        phone_preferred_countries?: string[];
+        phone_record_field?: string;
+        phone_date_field?: string;
+        phone_status_field?: string;
+    };
+    MobileCTA?: false | {
+        label?: string;
+        pages?: string[];
+    };
+    PageLayouts?: string[];
+    CountryDisable?: string[];
+    Plaid?: boolean;
+    Placeholders?: false | {
+        [key: string]: string;
+    };
+    ENValidators?: boolean;
+    CustomCurrency?: false | {
+        label?: string;
+        default: {
+            [key: string]: string;
+        };
+        countries?: {
+            [key: string]: {
+                [key: string]: string;
+            };
+        };
+    };
+    VGS?: false | {
+        "transaction.ccnumber"?: {
+            showCardIcon?: boolean;
+            css?: {
+                [key: string]: string | object;
+            };
+            icons?: {
+                [key: string]: string;
+            };
+            ariaLabel?: string;
+            placeholder?: string;
+        };
+        "transaction.ccvv"?: {
+            showCardIcon?: boolean;
+            css?: {
+                [key: string]: string | object;
+            };
+            ariaLabel?: string;
+            placeholder?: string;
+            hideValue?: boolean;
+        };
+    };
+    PostalCodeValidator?: boolean;
+    CountryRedirect?: false | {
+        [key: string]: string;
+    };
+    WelcomeBack?: false | {
+        welcomeBackMessage: {
+            display: boolean;
+            title: string;
+            editText: string;
+            anchor: string;
+            placement: "beforebegin" | "afterbegin" | "beforeend" | "afterend";
+        };
+        personalDetailsSummary: {
+            display: boolean;
+            title: string;
+            editText: string;
+            anchor: string;
+            placement: "beforebegin" | "afterbegin" | "beforeend" | "afterend";
+        };
+    };
+    onLoad?: () => void;
+    onResize?: () => void;
+    onSubmit?: () => void;
+    onError?: () => void;
+    onValidate?: () => void;
+}
+export declare const OptionsDefaults: Options;

package/dist/interfaces/options.js

@@ -0,0 +1,50 @@
+export const OptionsDefaults = {
+    backgroundImage: "",
+    MediaAttribution: true,
+    applePay: false,
+    CapitalizeFields: false,
+    ClickToExpand: true,
+    CurrencySymbol: "$",
+    CurrencyCode: "USD",
+    AddCurrencySymbol: true,
+    ThousandsSeparator: "",
+    DecimalSeparator: ".",
+    DecimalPlaces: 2,
+    MinAmount: 1,
+    MaxAmount: 100000,
+    MinAmountMessage: "Amount must be at least $1",
+    MaxAmountMessage: "Amount must be less than $100,000",
+    SkipToMainContentLink: true,
+    SrcDefer: true,
+    NeverBounceAPI: null,
+    NeverBounceDateField: null,
+    NeverBounceStatusField: null,
+    NeverBounceDateFormat: "MM/DD/YYYY",
+    FreshAddress: false,
+    ProgressBar: false,
+    AutoYear: false,
+    TranslateFields: true,
+    Debug: false,
+    RememberMe: false,
+    TidyContact: false,
+    RegionLongFormat: "",
+    CountryDisable: [],
+    Plaid: false,
+    Placeholders: false,
+    ENValidators: false,
+    MobileCTA: false,
+    CustomCurrency: false,
+    VGS: false,
+    PostalCodeValidator: false,
+    CountryRedirect: false,
+    WelcomeBack: false,
+    PageLayouts: [
+        "leftleft1col",
+        "centerleft1col",
+        "centercenter1col",
+        "centercenter2col",
+        "centerright1col",
+        "rightright1col",
+        "none",
+    ],
+};

package/dist/interfaces/translate-options.d.ts

@@ -0,0 +1,7 @@
+export interface TranslateOptions {
+    [key: string]: {
+        field: string;
+        translation: string;
+    }[];
+}
+export declare const TranslateOptionsDefaults: TranslateOptions;

package/dist/interfaces/translate-options.js

@@ -0,0 +1,42 @@
+const ptbrTranslation = [
+    { field: "supporter.firstName", translation: "Nome" },
+    { field: "supporter.lastName", translation: "Sobrenome" },
+    { field: "supporter.phoneNumber", translation: "Celular" },
+    { field: "supporter.address1", translation: "Endereço" },
+    { field: "supporter.address2", translation: "Complemento" },
+    { field: "supporter.postcode", translation: "CEP" },
+    { field: "supporter.city", translation: "Cidade" },
+    { field: "supporter.region", translation: "Estado" },
+    { field: "supporter.country", translation: "País" },
+];
+const deTranslation = [
+    { field: "supporter.address1", translation: "Straße, Hausnummer" },
+    { field: "supporter.postcode", translation: "Postleitzahl" },
+    { field: "supporter.city", translation: "Ort" },
+    { field: "supporter.region", translation: "Bundesland" },
+    { field: "supporter.country", translation: "Land" },
+];
+const frTranslation = [
+    { field: "supporter.address1", translation: "Adresse" },
+    { field: "supporter.postcode", translation: "Code Postal" },
+    { field: "supporter.city", translation: "Ville" },
+    { field: "supporter.region", translation: "Région" },
+    { field: "supporter.country", translation: "Country" },
+];
+const nlTranslation = [
+    { field: "supporter.address1", translation: "Adres" },
+    { field: "supporter.postcode", translation: "Postcode" },
+    { field: "supporter.city", translation: "Woonplaats" },
+    { field: "supporter.region", translation: "Provincie" },
+    { field: "supporter.country", translation: "Country" },
+];
+export const TranslateOptionsDefaults = {
+    BR: ptbrTranslation,
+    BRA: ptbrTranslation,
+    DE: deTranslation,
+    DEU: deTranslation,
+    FR: frTranslation,
+    FRA: frTranslation,
+    NL: nlTranslation,
+    NLD: nlTranslation,
+};

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

@@ -0,0 +1,24 @@
+export interface UpsellOptions {
+    image: string;
+    imagePosition: string;
+    title: string;
+    paragraph: string;
+    yesLabel: string;
+    noLabel: string;
+    otherAmount: boolean;
+    otherLabel: string;
+    upsellOriginalGiftAmountFieldName: string;
+    amountRange: Array<{
+        max: number;
+        suggestion: number | string;
+    }>;
+    minAmount: number;
+    canClose: boolean;
+    submitOnClose: boolean;
+    oneTime: boolean;
+    annual: boolean;
+    disablePaymentMethods: Array<string>;
+    skipUpsell: boolean;
+    conversionField: string;
+}
+export declare const UpsellOptionsDefaults: UpsellOptions;

package/dist/interfaces/upsell-options.js

@@ -0,0 +1,33 @@
+export const UpsellOptionsDefaults = {
+    image: "https://picsum.photos/480/650",
+    imagePosition: "left",
+    title: "Will you change your gift to just {new-amount} a month to boost your impact?",
+    paragraph: "Make a monthly pledge today to support us with consistent, reliable resources during emergency moments.",
+    yesLabel: "Yes! Process My <br> {new-amount} monthly gift",
+    noLabel: "No, thanks. Continue with my <br> {old-amount} one-time gift",
+    otherAmount: true,
+    otherLabel: "Or enter a different monthly amount:",
+    upsellOriginalGiftAmountFieldName: "",
+    amountRange: [
+        { max: 10, suggestion: 5 },
+        { max: 15, suggestion: 7 },
+        { max: 20, suggestion: 8 },
+        { max: 25, suggestion: 9 },
+        { max: 30, suggestion: 10 },
+        { max: 35, suggestion: 11 },
+        { max: 40, suggestion: 12 },
+        { max: 50, suggestion: 14 },
+        { max: 100, suggestion: 15 },
+        { max: 200, suggestion: 19 },
+        { max: 300, suggestion: 29 },
+        { max: 500, suggestion: "Math.ceil((amount / 12)/5)*5" },
+    ],
+    minAmount: 0,
+    canClose: true,
+    submitOnClose: false,
+    oneTime: true,
+    annual: false,
+    disablePaymentMethods: [],
+    skipUpsell: false,
+    conversionField: "",
+};

package/dist/live-currency.d.ts

@@ -0,0 +1,15 @@
+import { DonationAmount } from ".";
+export declare class LiveCurrency {
+    private logger;
+    private elementsFound;
+    private isUpdating;
+    _amount: DonationAmount;
+    private _frequency;
+    private _fees;
+    constructor();
+    searchElements(): void;
+    shouldRun(): boolean;
+    addMutationObserver(): void;
+    addEventListeners(): void;
+    updateCurrency(): void;
+}

package/dist/live-currency.js

@@ -0,0 +1,140 @@
+// This script enables live currency symbol and code to the page.
+import { DonationAmount, DonationFrequency, ENGrid, EngridLogger, ProcessingFees, } from ".";
+export class LiveCurrency {
+    constructor() {
+        this.logger = new EngridLogger("LiveCurrency", "#1901b1", "#feb47a", "💲");
+        this.elementsFound = false;
+        this.isUpdating = false;
+        this._amount = DonationAmount.getInstance();
+        this._frequency = DonationFrequency.getInstance();
+        this._fees = ProcessingFees.getInstance();
+        this.searchElements();
+        if (!this.shouldRun())
+            return;
+        ENGrid.setBodyData("live-currency", "active");
+        this.updateCurrency();
+        this.addEventListeners();
+        // Make labels visible on page load
+        document
+            .querySelectorAll(".en__field--donationAmt .en__field__element--radio .en__field__item")
+            .forEach((node) => {
+            node.setAttribute("data-engrid-currency-symbol-updated", "true");
+        });
+    }
+    searchElements() {
+        const enElements = document.querySelectorAll(`
+      .en__component--copyblock,
+      .en__component--codeblock,
+      .en__field label,
+      .en__submit
+      `);
+        if (enElements.length > 0) {
+            this.elementsFound = true;
+            const currency = ENGrid.getCurrencySymbol();
+            const currencyCode = ENGrid.getCurrencyCode();
+            const currencyElement = `<span class="engrid-currency-symbol">${currency}</span>`;
+            const currencyCodeElement = `<span class="engrid-currency-code">${currencyCode}</span>`;
+            enElements.forEach((item) => {
+                // If item starts with <script, skip it
+                if (item instanceof HTMLElement &&
+                    item.innerHTML.startsWith("<script")) {
+                    return;
+                }
+                if (item instanceof HTMLElement &&
+                    (item.innerHTML.includes("[$]") || item.innerHTML.includes("[$$$]"))) {
+                    this.logger.log("Old Value:", item.innerHTML);
+                    const currencyRegex = /\[\$\]/g;
+                    const currencyCodeRegex = /\[\$\$\$\]/g;
+                    item.innerHTML = item.innerHTML.replace(currencyCodeRegex, currencyCodeElement);
+                    item.innerHTML = item.innerHTML.replace(currencyRegex, currencyElement);
+                    this.logger.log("New Value:", item.innerHTML);
+                }
+            });
+        }
+    }
+    shouldRun() {
+        return this.elementsFound;
+    }
+    addMutationObserver() {
+        const targetNode = document.querySelector(".en__field--donationAmt .en__field__element--radio");
+        if (!targetNode)
+            return;
+        const observer = new MutationObserver((mutations) => {
+            mutations.forEach((mutation) => {
+                if (mutation.type === "childList") {
+                    // Update the currency only once, after the mutation is complete
+                    if (this.isUpdating)
+                        return;
+                    this.isUpdating = true;
+                    setTimeout(() => {
+                        this.searchElements();
+                        this.updateCurrency();
+                        targetNode.querySelectorAll(".en__field__item").forEach((node) => {
+                            node.setAttribute("data-engrid-currency-symbol-updated", "true");
+                        });
+                        this.isUpdating = false;
+                    }, 20);
+                }
+            });
+        });
+        const config = { childList: true };
+        observer.observe(targetNode, config);
+    }
+    addEventListeners() {
+        this._fees.onFeeChange.subscribe(() => {
+            setTimeout(() => {
+                this.updateCurrency();
+            }, 10);
+        });
+        this._amount.onAmountChange.subscribe(() => {
+            setTimeout(() => {
+                this.updateCurrency();
+            }, 10);
+        });
+        this._frequency.onFrequencyChange.subscribe(() => {
+            if (this.isUpdating)
+                return;
+            this.isUpdating = true;
+            setTimeout(() => {
+                this.searchElements();
+                this.updateCurrency();
+                document
+                    .querySelectorAll(".en__field--donationAmt .en__field__element--radio .en__field__item")
+                    .forEach((node) => {
+                    node.setAttribute("data-engrid-currency-symbol-updated", "true");
+                });
+                this.isUpdating = false;
+            }, 10);
+        });
+        const currencyField = ENGrid.getField("transaction.paycurrency");
+        if (currencyField) {
+            currencyField.addEventListener("change", () => {
+                setTimeout(() => {
+                    this.updateCurrency();
+                    this._amount.load();
+                    const otherAmountDiv = document.querySelector(".en__field--donationAmt .en__field__item--other");
+                    if (otherAmountDiv) {
+                        otherAmountDiv.setAttribute("data-currency-symbol", ENGrid.getCurrencySymbol());
+                    }
+                    ENGrid.setBodyData("currency-code", ENGrid.getCurrencyCode());
+                }, 10);
+            });
+        }
+        this.addMutationObserver();
+    }
+    updateCurrency() {
+        const currencySymbolElements = document.querySelectorAll(".engrid-currency-symbol");
+        const currencyCodeElements = document.querySelectorAll(".engrid-currency-code");
+        if (currencySymbolElements.length > 0) {
+            currencySymbolElements.forEach((item) => {
+                item.innerHTML = ENGrid.getCurrencySymbol();
+            });
+        }
+        if (currencyCodeElements.length > 0) {
+            currencyCodeElements.forEach((item) => {
+                item.innerHTML = ENGrid.getCurrencyCode();
+            });
+        }
+        this.logger.log(`Currency updated for ${currencySymbolElements.length + currencyCodeElements.length} elements`);
+    }
+}

package/dist/live-frequency.d.ts

@@ -0,0 +1,13 @@
+import { DonationAmount } from ".";
+export declare class LiveFrequency {
+    private logger;
+    private elementsFound;
+    _amount: DonationAmount;
+    private _frequency;
+    constructor();
+    searchElements(): void;
+    shouldRun(): boolean;
+    addEventListeners(): void;
+    updateFrequency(): void;
+    replaceMergeTags(tag: string, element: HTMLElement): void;
+}

package/dist/live-frequency.js

@@ -0,0 +1,109 @@
+// This script creates merge tags: [[frequency]], [[Frequency]], or [[FREQUENCY]]
+// that gets replaced with the donation frequency
+// and can be used on any Code Block, Text Block, or Form Block
+import { DonationAmount, DonationFrequency, EngridLogger } from ".";
+export class LiveFrequency {
+    constructor() {
+        this.logger = new EngridLogger("LiveFrequency", "#00ff00", "#000000", "🧾");
+        this.elementsFound = false;
+        this._amount = DonationAmount.getInstance();
+        this._frequency = DonationFrequency.getInstance();
+        this.searchElements();
+        if (!this.shouldRun())
+            return;
+        this.updateFrequency();
+        this.addEventListeners();
+    }
+    searchElements() {
+        const enElements = document.querySelectorAll(`
+      .en__component--copyblock,
+      .en__component--codeblock,
+      .en__field label,
+      .en__submit
+      `);
+        if (enElements.length > 0) {
+            const pattern = /\[\[(frequency)\]\]/gi;
+            let totalFound = 0;
+            enElements.forEach((item) => {
+                const match = item.innerHTML.match(pattern);
+                if (item instanceof HTMLElement && match) {
+                    this.elementsFound = true;
+                    match.forEach((matchedSubstring) => {
+                        totalFound++;
+                        this.replaceMergeTags(matchedSubstring, item);
+                    });
+                }
+            });
+            if (totalFound > 0) {
+                this.logger.log(`Found ${totalFound} merge tag${totalFound > 1 ? "s" : ""} in the page.`);
+            }
+        }
+    }
+    shouldRun() {
+        if (!this.elementsFound) {
+            this.logger.log("No merge tags found. Skipping.");
+            return false;
+        }
+        return true;
+    }
+    addEventListeners() {
+        this._amount.onAmountChange.subscribe(() => {
+            setTimeout(() => {
+                this.updateFrequency();
+            }, 10);
+        });
+        this._frequency.onFrequencyChange.subscribe(() => {
+            setTimeout(() => {
+                this.searchElements();
+                this.updateFrequency();
+            }, 10);
+        });
+    }
+    updateFrequency() {
+        const frequency = this._frequency.frequency === "onetime"
+            ? "one-time"
+            : this._frequency.frequency;
+        const elemenst = document.querySelectorAll(".engrid-frequency");
+        elemenst.forEach((item) => {
+            if (item.classList.contains("engrid-frequency--lowercase")) {
+                item.innerHTML = frequency.toLowerCase();
+            }
+            else if (item.classList.contains("engrid-frequency--capitalized")) {
+                item.innerHTML = frequency.charAt(0).toUpperCase() + frequency.slice(1);
+            }
+            else if (item.classList.contains("engrid-frequency--uppercase")) {
+                item.innerHTML = frequency.toUpperCase();
+            }
+            else {
+                item.innerHTML = frequency;
+            }
+        });
+    }
+    replaceMergeTags(tag, element) {
+        const frequency = this._frequency.frequency === "onetime"
+            ? "one-time"
+            : this._frequency.frequency;
+        const frequencyElement = document.createElement("span");
+        frequencyElement.classList.add("engrid-frequency");
+        frequencyElement.innerHTML = frequency;
+        switch (tag) {
+            case "[[frequency]]":
+                frequencyElement.classList.add("engrid-frequency--lowercase");
+                frequencyElement.innerHTML = frequencyElement.innerHTML.toLowerCase();
+                element.innerHTML = element.innerHTML.replace(tag, frequencyElement.outerHTML);
+                break;
+            case "[[Frequency]]":
+                frequencyElement.classList.add("engrid-frequency--capitalized");
+                frequencyElement.innerHTML =
+                    frequencyElement.innerHTML.charAt(0).toUpperCase() +
+                        frequencyElement.innerHTML.slice(1);
+                element.innerHTML = element.innerHTML.replace(tag, frequencyElement.outerHTML);
+                break;
+            case "[[FREQUENCY]]":
+                frequencyElement.classList.add("engrid-frequency--uppercase");
+                frequencyElement.innerHTML = frequencyElement.innerHTML.toUpperCase();
+                element.innerHTML = element.innerHTML.replace(tag, frequencyElement.outerHTML);
+                break;
+        }
+    }
+}

package/dist/live-variables.d.ts

@@ -0,0 +1,21 @@
+import { DonationAmount, ProcessingFees } from "./events";
+import { Options } from ".";
+export declare class LiveVariables {
+    _amount: DonationAmount;
+    _fees: ProcessingFees;
+    private _frequency;
+    private _form;
+    private multiplier;
+    private submitLabel;
+    private options;
+    constructor(options: Options);
+    private getAmountTxt;
+    private getUpsellAmountTxt;
+    private getUpsellAmountRaw;
+    changeSubmitButton(): void;
+    changeLiveAmount(): void;
+    changeLiveUpsellAmount(): void;
+    changeLiveFrequency(): void;
+    changeRecurrency(): void;
+    private upsold;
+}