@4site/engrid-scripts 0.22.3 → 0.22.4

package/dist/app.js

@@ -1,5 +1,5 @@
 import { DonationAmount, DonationFrequency, EnForm, ProcessingFees, Country, } from "./events";
-import { AmountLabel, Loader, ProgressBar, UpsellLightbox, ENGrid, OptionsDefaults, setRecurrFreq, PageBackground, MediaAttribution, ApplePay, A11y, CapitalizeFields, Ecard, ClickToExpand, Advocacy, DataAttributes, LiveVariables, iFrame, InputPlaceholders, InputHasValueAndFocus, ShowHideRadioCheckboxes, AutoCountrySelect, SkipToMainContentLink, SrcDefer, NeverBounce, AutoYear, Autocomplete, RememberMe, TranslateFields, ShowIfAmount, EngridLogger, OtherAmount, MinMaxAmount, Ticker, DataReplace, DataHide, AddNameToMessage, ExpandRegionName, AppVersion, UrlToForm, RequiredIfVisible, TidyContact, DataLayer, LiveCurrency, Autosubmit, EventTickets, SwapAmounts, DebugPanel, DebugHiddenFields, FreshAddress, BrandingHtml, CountryDisable, PremiumGift, DigitalWallets, MobileCTA, LiveFrequency, UniversalOptIn, Plaid, GiveBySelect, UrlParamsToBodyAttrs, ExitIntentLightbox, SupporterHub, FastFormFill, SetAttr, ShowIfPresent, ENValidators, CustomCurrency, VGS, PostalCodeValidator, CountryRedirect, WelcomeBack, EcardToTarget, UsOnlyForm, ThankYouPageConditionalContent, EmbeddedEcard, CheckboxLabel, UpsellCheckbox, PostDonationEmbed, } from ".";
+import { AmountLabel, Loader, ProgressBar, UpsellLightbox, ENGrid, OptionsDefaults, setRecurrFreq, PageBackground, MediaAttribution, ApplePay, A11y, CapitalizeFields, Ecard, ClickToExpand, Advocacy, DataAttributes, LiveVariables, iFrame, InputPlaceholders, InputHasValueAndFocus, ShowHideRadioCheckboxes, AutoCountrySelect, SkipToMainContentLink, SrcDefer, NeverBounce, AutoYear, Autocomplete, RememberMe, TranslateFields, ShowIfAmount, EngridLogger, OtherAmount, MinMaxAmount, Ticker, DataReplace, DataHide, AddNameToMessage, ExpandRegionName, AppVersion, UrlToForm, RequiredIfVisible, TidyContact, DataLayer, LiveCurrency, Autosubmit, EventTickets, SwapAmounts, DebugPanel, DebugHiddenFields, FreshAddress, BrandingHtml, CountryDisable, PremiumGift, DigitalWallets, MobileCTA, LiveFrequency, UniversalOptIn, Plaid, GiveBySelect, UrlParamsToBodyAttrs, ExitIntentLightbox, SupporterHub, FastFormFill, SetAttr, ShowIfPresent, ENValidators, CustomCurrency, VGS, PostalCodeValidator, CountryRedirect, WelcomeBack, EcardToTarget, UsOnlyForm, ThankYouPageConditionalContent, EmbeddedEcard, CheckboxLabel, UpsellCheckbox, PostDonationEmbed, FrequencyUpsell, } from ".";
 export class App extends ENGrid {
     constructor(options) {
         super();
@@ -276,6 +276,7 @@ export class App extends ENGrid {
         new EmbeddedEcard();
         new CheckboxLabel();
         new PostDonationEmbed();
+        new FrequencyUpsell();
         //Debug panel
         let showDebugPanel = this.options.Debug;
         try {

package/dist/engrid.js

@@ -334,10 +334,12 @@ export class ENGrid {
         const submit = document.querySelector(".en__submit button");
         if (!submit)
             return false;
+        let submitButtonProcessingHTML = `<span class='loader-wrapper'><span class='loader loader-quart'></span><span class='submit-button-text-wrapper'>${label}</span></span>`;
+        if ("originalText" in submit.dataset && submit.disabled) {
+            // If the original text is already set and the button is disabled, that means this function was called before
+            return false;
+        }
         submit.dataset.originalText = submit.innerHTML;
-        let submitButtonProcessingHTML = "<span class='loader-wrapper'><span class='loader loader-quart'></span><span class='submit-button-text-wrapper'>" +
-            label +
-            "</span></span>";
         submit.disabled = true;
         submit.innerHTML = submitButtonProcessingHTML;
         return true;

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

@@ -0,0 +1,12 @@
+import { FrequencyUpsellOptions, Modal } from ".";
+export declare class FrequencyUpsellModal extends Modal {
+    private readonly upsellOptions;
+    private _amountWithFees;
+    private _upsellAmountWithFees;
+    constructor(upsellOptions: FrequencyUpsellOptions);
+    set amountWithFees(value: number);
+    set upsellAmountWithFees(value: number);
+    updateModalContent(): void;
+    getModalContent(): NodeListOf<Element> | HTMLElement | string;
+    replaceAmountTokens(string: string): string;
+}

package/dist/frequency-upsell-modal.js

@@ -0,0 +1,62 @@
+/*
+ * FrequencyUpsellModal - this is class that creates the modal for the frequency upsell.
+ * This component is intentionally "dumb" and only creates the modal renders its content.
+ * Logic for showing the modal and handling the upsell is in the FrequencyUpsell class.
+ */
+import { ENGrid, Modal } from ".";
+export class FrequencyUpsellModal extends Modal {
+    constructor(upsellOptions) {
+        super({
+            onClickOutside: "bounce",
+            customClass: `engrid--frequency-upsell-modal ${upsellOptions.customClass}`,
+            showCloseX: false,
+        });
+        this._amountWithFees = 0;
+        this._upsellAmountWithFees = 0;
+        this.upsellOptions = upsellOptions;
+        this.updateModalContent();
+    }
+    set amountWithFees(value) {
+        this._amountWithFees = value;
+    }
+    set upsellAmountWithFees(value) {
+        this._upsellAmountWithFees = value;
+    }
+    updateModalContent() {
+        var _a;
+        this.modalContent = this.getModalContent();
+        const modalBody = (_a = this.modal) === null || _a === void 0 ? void 0 : _a.querySelector(".engrid-modal__body");
+        if (modalBody) {
+            modalBody.innerHTML = "";
+            modalBody.insertAdjacentHTML("beforeend", this.modalContent);
+        }
+    }
+    getModalContent() {
+        if (!this.upsellOptions)
+            return "";
+        return `
+    <div class="frequency-upsell-modal__secondary-content"></div>
+    <div class="frequency-upsell-modal__content">
+      <div class="frequency-upsell-modal__text">
+        <h2 class="frequency-upsell-modal__title">${this.replaceAmountTokens(this.upsellOptions.title)}</h2>
+        <p class="frequency-upsell-modal__para">${this.replaceAmountTokens(this.upsellOptions.paragraph)}</p>
+      </div>
+      <div class="frequency-upsell-modal__buttons">
+        <button class="primary frequency-upsell-modal__button" id="frequency-upsell-yes">
+          ${this.replaceAmountTokens(this.upsellOptions.yesButton)}
+        </button>
+        <button class="primary frequency-upsell-modal__button" id="frequency-upsell-no">
+           ${this.replaceAmountTokens(this.upsellOptions.noButton)}
+        </button>
+      </div>
+    </div>
+    `;
+    }
+    replaceAmountTokens(string) {
+        const amount = ENGrid.formatNumber(this._amountWithFees, this._amountWithFees % 1 == 0 ? 0 : 2, ".", "");
+        const upsellAmount = ENGrid.formatNumber(this._upsellAmountWithFees, this._upsellAmountWithFees % 1 == 0 ? 0 : 2, ".", "");
+        return string
+            .replace(/{current_amount}/g, amount)
+            .replace(/{upsell_amount}/g, upsellAmount);
+    }
+}

package/dist/frequency-upsell.d.ts

@@ -0,0 +1,32 @@
+export declare class FrequencyUpsell {
+    private logger;
+    private upsellModal;
+    private readonly options;
+    private _frequency;
+    private _amount;
+    private _fee;
+    private _form;
+    private modalSeen;
+    constructor();
+    /**
+     * Check if the FrequencyUpsell should run:
+     * - Check if the FrequencyUpsell is enabled in the window object
+     * - Check that we don't have an EngridUpsell active on this page
+     * - Check that we don't have an EngagingNetworks upsell active on this page
+     * @returns {boolean} - true if the FrequencyUpsell should run, false otherwise
+     */
+    shouldRun(): boolean;
+    /**
+     * Get the upsell amount with/without fees
+     * We want to display to the user the amount with fees, but we need to set the donation amount to the value without fees
+     * @param {boolean} withFee - true if we want to include the fees in the upsell amount
+     * @returns {number} - The upsell amount with fees
+     */
+    getUpsellAmount(withFee: boolean): number;
+    private addEventListeners;
+    /**
+     * 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
+     */
+    private createFrequencyField;
+}

package/dist/frequency-upsell.js

@@ -0,0 +1,116 @@
+/*
+ * FrequencyUpsell component which creates a modal to upsell the frequency of the donation
+ * This is typically used to upsell a single donation into an annual donation, but the component
+ * options can be configured to upsell any frequency to any other frequency. The upsell amount can also be configured
+ * See FrequencyUpsellOptions for more details.
+ */
+import { DonationAmount, DonationFrequency, EnForm, EngridLogger, FrequencyUpsellModal, FrequencyUpsellOptionsDefaults, ProcessingFees, } from ".";
+export class FrequencyUpsell {
+    constructor() {
+        this.logger = new EngridLogger("FrequencyUpsell", "lightgray", "darkblue", "🏦");
+        this.upsellModal = null;
+        this.options = null;
+        this._frequency = DonationFrequency.getInstance();
+        this._amount = DonationAmount.getInstance();
+        this._fee = ProcessingFees.getInstance();
+        this._form = EnForm.getInstance();
+        this.modalSeen = false;
+        if (!this.shouldRun()) {
+            this.logger.log("FrequencyUpsell not running");
+            return;
+        }
+        this.options = Object.assign(Object.assign({}, FrequencyUpsellOptionsDefaults), window.EngridFrequencyUpsell);
+        this.logger.log("FrequencyUpsell initialized", this.options);
+        this.upsellModal = new FrequencyUpsellModal(this.options);
+        this.createFrequencyField();
+        this.addEventListeners();
+    }
+    /**
+     * Check if the FrequencyUpsell should run:
+     * - Check if the FrequencyUpsell is enabled in the window object
+     * - Check that we don't have an EngridUpsell active on this page
+     * - Check that we don't have an EngagingNetworks upsell active on this page
+     * @returns {boolean} - true if the FrequencyUpsell should run, false otherwise
+     */
+    shouldRun() {
+        return (window.EngridFrequencyUpsell &&
+            !window.EngridUpsell &&
+            (!window.EngagingNetworks.upsell ||
+                window.EngagingNetworks.upsell.length === 0));
+    }
+    /**
+     * Get the upsell amount with/without fees
+     * We want to display to the user the amount with fees, but we need to set the donation amount to the value without fees
+     * @param {boolean} withFee - true if we want to include the fees in the upsell amount
+     * @returns {number} - The upsell amount with fees
+     */
+    getUpsellAmount(withFee) {
+        if (withFee) {
+            const upsellAmount = this.options.upsellAmount(this._amount.amount);
+            return upsellAmount + this._fee.calculateFees(upsellAmount);
+        }
+        return this.options.upsellAmount(this._amount.amount);
+    }
+    addEventListeners() {
+        var _a, _b;
+        // When the Modal buttons are clicked
+        (_b = (_a = this.upsellModal) === null || _a === void 0 ? void 0 : _a.modal) === null || _b === void 0 ? void 0 : _b.addEventListener("click", (e) => {
+            const target = e.target;
+            // Upsell is accepted
+            if (target.id === "frequency-upsell-yes") {
+                this.logger.log("Frequency upsell accepted");
+                this._frequency.setFrequency(this.options.upsellFrequency);
+                this._amount.setAmount(this.getUpsellAmount(false));
+                this.options.onAccept();
+                this._form.submitForm();
+                this.upsellModal.close();
+                return;
+            }
+            // Upsell is declined
+            if (target.id === "frequency-upsell-no") {
+                this.logger.log("Frequency upsell declined");
+                this.options.onDecline();
+                this._form.submitForm();
+                this.upsellModal.close();
+                return;
+            }
+        });
+        // When the form is submitted
+        this._form.onSubmit.subscribe(() => {
+            var _a;
+            // If we have a frequency we want to upsell on & the modal isn't already open
+            // Since frequency in the event class doesn't have a specific type, I need to cast our options array to a general string array
+            if (this.options.upsellFromFrequency.includes(this._frequency.frequency) &&
+                !this.modalSeen) {
+                // Open the modal and prevent form submission
+                this.upsellModal.amountWithFees =
+                    this._amount.amount + this._fee.calculateFees(this._amount.amount);
+                this.upsellModal.upsellAmountWithFees = this.getUpsellAmount(true);
+                this.upsellModal.updateModalContent();
+                this.logger.log("Frequency upsell modal opened");
+                (_a = this.upsellModal) === null || _a === void 0 ? void 0 : _a.open();
+                this.modalSeen = true;
+                this._form.submit = false;
+                return false;
+            }
+            // If not opening, continue with the form submission
+            this._form.submit = true;
+            return true;
+        });
+    }
+    /**
+     * 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
+     */
+    createFrequencyField() {
+        const frequencyField = document.querySelector(`input[name="transaction.recurrfreq"][value="${this.options.upsellFrequency.toUpperCase()}"]`);
+        if (frequencyField)
+            return;
+        const frequencyFieldContainer = document.querySelector(".en__field--recurrfreq .en__field__element");
+        frequencyFieldContainer === null || frequencyFieldContainer === void 0 ? void 0 : frequencyFieldContainer.insertAdjacentHTML("beforeend", `
+      <div class="en__field__item hide">
+        <input type="radio" name="transaction.recurrfreq" value="${this.options.upsellFrequency.toUpperCase()}" class="en__field__input en__field__input--radio">
+      </div>
+    `);
+    }
+}

package/dist/index.d.ts

@@ -3,6 +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 * from "./loader";
 export * from "./app";
 export * from "./amount-label";
@@ -82,5 +83,7 @@ export * from "./thank-you-page-conditional-content";
 export * from "./checkbox-label";
 export * from "./optin-ladder";
 export * from "./post-donation-embed";
+export * from "./frequency-upsell-modal";
+export * from "./frequency-upsell";
 export * from "./events";
 export * from "./version";

package/dist/index.js

@@ -3,6 +3,7 @@ export { OptionsDefaults } from "./interfaces/options";
 export { UpsellOptionsDefaults, } from "./interfaces/upsell-options";
 export { TranslateOptionsDefaults, } from "./interfaces/translate-options";
 export { ExitIntentOptionsDefaults, } from "./interfaces/exit-intent-options";
+export { FrequencyUpsellOptionsDefaults, } from "./interfaces/frequency-upsell-options";
 export * from "./loader";
 export * from "./app";
 export * from "./amount-label";
@@ -82,6 +83,8 @@ export * from "./thank-you-page-conditional-content";
 export * from "./checkbox-label";
 export * from "./optin-ladder";
 export * from "./post-donation-embed";
+export * from "./frequency-upsell-modal";
+export * from "./frequency-upsell";
 // Events
 export * from "./events";
 // Version

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

@@ -0,0 +1,13 @@
+export interface FrequencyUpsellOptions {
+    title: string;
+    paragraph: string;
+    yesButton: string;
+    noButton: string;
+    upsellFrequency: "monthly" | "quarterly" | "semi_annual" | "annual";
+    upsellAmount: (currentAmount: number) => number;
+    upsellFromFrequency: Array<"onetime" | "monthly" | "quarterly" | "semi_annual" | "annual">;
+    customClass: string;
+    onAccept: () => void;
+    onDecline: () => void;
+}
+export declare const FrequencyUpsellOptionsDefaults: FrequencyUpsellOptions;

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

@@ -0,0 +1,12 @@
+export const FrequencyUpsellOptionsDefaults = {
+    title: "Before we process your donation...",
+    paragraph: "Would you like to make it an annual gift?",
+    yesButton: "YES! Process my gift as an annual gift of ${upsell_amount}",
+    noButton: "NO! Process my gift as a one-time gift of ${current_amount}",
+    upsellFrequency: "annual",
+    upsellFromFrequency: ["onetime"],
+    customClass: "",
+    upsellAmount: (currentAmount) => currentAmount,
+    onAccept: () => { },
+    onDecline: () => { },
+};

package/dist/modal.d.ts

@@ -1,11 +1,13 @@
 interface ModalOptions {
-    onClickOutside: "close" | "bounce";
-    addCloseButton: boolean;
-    closeButtonLabel: string;
+    onClickOutside?: "close" | "bounce";
+    addCloseButton?: boolean;
+    closeButtonLabel?: string;
+    customClass?: string;
+    showCloseX?: boolean;
 }
 export declare abstract class Modal {
     modalContent: NodeListOf<Element> | HTMLElement | String;
-    private modal;
+    modal: HTMLDivElement | null;
     private defaultOptions;
     private options;
     protected constructor(options: ModalOptions);

package/dist/modal.js

@@ -6,6 +6,8 @@ export class Modal {
             onClickOutside: "close",
             addCloseButton: false,
             closeButtonLabel: "Okay!",
+            customClass: "",
+            showCloseX: true,
         };
         this.focusTrapHandler = (e) => {
             const modalElement = this.modal;
@@ -39,6 +41,16 @@ export class Modal {
         var _a;
         this.modal = document.createElement("div");
         this.modal.classList.add("engrid-modal", "modal--hidden");
+        if (this.options.customClass && this.options.customClass !== "") {
+            this.options.customClass.split(" ").forEach((customClass) => {
+                if (!customClass)
+                    return;
+                this.modal.classList.add(customClass);
+            });
+        }
+        if (this.options.showCloseX) {
+            this.modal.classList.add("engrid-modal--close-x");
+        }
         this.modal.setAttribute("aria-hidden", "true");
         this.modal.setAttribute("role", "dialog");
         this.modal.setAttribute("aria-modal", "true");
@@ -46,7 +58,7 @@ export class Modal {
         this.modal.innerHTML = `
       <div class="engrid-modal__overlay" tabindex="-1">
         <div class="engrid-modal__container" tabindex="0">
-          <div class="engrid-modal__close" role="button" tabindex="0" aria-label="Close">
+          <div class="engrid-modal__close engrid-modal__close-x" role="button" tabindex="0" aria-label="Close">
             X
           </div>
           <div class="engrid-modal__body"></div>

package/dist/version.d.ts

@@ -1 +1 @@
-export declare const AppVersion = "0.22.3";
+export declare const AppVersion = "0.22.4";

package/dist/version.js

@@ -1 +1 @@
-export const AppVersion = "0.22.3";
+export const AppVersion = "0.22.4";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@4site/engrid-scripts",
-  "version": "0.22.3",
+  "version": "0.22.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": "46a09414790ab639952e5f02c63dd8438629d078",
+  "gitHead": "2a0b3d4748a6caf4d742650b408419e21d095723",
   "devDependencies": {
     "nodemon": "^2.0.20"
   }