@4site/engrid-scripts 0.21.10 → 0.22.0

package/dist/a11y.d.ts

@@ -3,4 +3,6 @@ export declare class A11y {
     private addGroupRole;
     private addRequired;
     private addLabel;
+    private updateFrequencyLabel;
+    private setAutoGeneratedAltTags;
 }

package/dist/a11y.js

@@ -5,6 +5,9 @@ export class A11y {
         this.addRequired();
         this.addLabel();
         this.addGroupRole();
+        this.updateFrequencyLabel();
+        const ecardImages = document.querySelectorAll('.en__ecarditems__list img');
+        this.setAutoGeneratedAltTags(ecardImages);
     }
     addGroupRole() {
         // Add role="group" to all EN Radio fields
@@ -43,4 +46,51 @@ export class A11y {
             }
         });
     }
+    // Update the label for the frequency field based on the selected radio button
+    updateFrequencyLabel() {
+        const frequencyLabels = document.querySelectorAll('div.en__field__item input[id^="en__field_transaction_recurrfreq"]');
+        const frequencyMainLabel = document.querySelector('label[for="en__field_transaction_recurrfreq"]');
+        frequencyLabels.forEach((item) => {
+            if (item) {
+                // Set the label for the checked item on load
+                if (item.checked) {
+                    frequencyMainLabel === null || frequencyMainLabel === void 0 ? void 0 : frequencyMainLabel.setAttribute('for', item.id);
+                }
+                // Then, detect if it changes with the click event
+                item.addEventListener('click', () => {
+                    let frequencyId = item.id;
+                    frequencyMainLabel === null || frequencyMainLabel === void 0 ? void 0 : frequencyMainLabel.setAttribute('for', frequencyId);
+                });
+            }
+        });
+    }
+    setAutoGeneratedAltTags(images) {
+        images.forEach((img) => {
+            var _a;
+            // Skip if the alt tag is already set
+            if (img.alt)
+                return;
+            try {
+                // Extract the filename from the `src` attribute
+                const src = img.src;
+                if (!src)
+                    throw new Error("Image src is null or undefined");
+                const url = new URL(src);
+                const fileNameWithExtension = url.pathname.split('/').pop();
+                if (!fileNameWithExtension)
+                    throw new Error("No filename found in src");
+                // Remove the file extension and replace `-` and `_` with spaces
+                let altText = ((_a = fileNameWithExtension.split('.').shift()) === null || _a === void 0 ? void 0 : _a.replace(/[-_]/g, ' ')) || '';
+                // Remove dimensions (#x#) and anything that follows
+                altText = altText.replace(/\d+x\d+.*$/, '').trim();
+                // Wrap in the disclaimer
+                altText = `This is an auto-generated alt tag from the filename: ${altText}`;
+                // Set the generated alt text on the image
+                img.alt = altText;
+            }
+            catch (error) {
+                console.error(`Error processing image: ${img.src}`, error);
+            }
+        });
+    }
 }

package/dist/ecard-to-target.js

@@ -23,8 +23,10 @@ export class EcardToTarget {
     shouldRun() {
         return (window.hasOwnProperty("EngridEcardToTarget") &&
             typeof window.EngridEcardToTarget === "object" &&
-            window.EngridEcardToTarget.hasOwnProperty("targetName") &&
-            window.EngridEcardToTarget.hasOwnProperty("targetEmail"));
+            ((window.EngridEcardToTarget.hasOwnProperty("targetName") &&
+                window.EngridEcardToTarget.hasOwnProperty("targetEmail")) ||
+                (window.EngridEcardToTarget.hasOwnProperty("targets") &&
+                    window.EngridEcardToTarget.targets.length > 0)));
     }
     setTarget() {
         const targetNameField = document.querySelector(".en__ecardrecipients__name input");
@@ -34,10 +36,30 @@ export class EcardToTarget {
             this.logger.error("Could not add recipient. Required elements not found.");
             return;
         }
-        targetNameField.value = this.options.targetName;
-        targetEmailField.value = this.options.targetEmail;
-        addRecipientButton === null || addRecipientButton === void 0 ? void 0 : addRecipientButton.click();
-        this.logger.log("Added recipient", this.options.targetName, this.options.targetEmail);
+        let targets = this.options.targets;
+        // BC support for targetName and targetEmail
+        if (this.options.targetName && this.options.targetEmail) {
+            targets.push({
+                targetName: this.options.targetName,
+                targetEmail: this.options.targetEmail,
+            });
+        }
+        // Remove duplicates from targets array
+        targets = targets.filter((target, index, self) => index ===
+            self.findIndex((t) => t.targetName === target.targetName &&
+                t.targetEmail === target.targetEmail));
+        targets.forEach((target) => {
+            const targetName = target.targetName;
+            const targetEmail = target.targetEmail;
+            if (!targetName || !targetEmail) {
+                this.logger.error("Could not add recipient. Target name or email is empty.");
+                return;
+            }
+            targetNameField.value = targetName;
+            targetEmailField.value = targetEmail;
+            addRecipientButton === null || addRecipientButton === void 0 ? void 0 : addRecipientButton.click();
+            this.logger.log("Added recipient", targetName, targetEmail);
+        });
     }
     hideElements() {
         const messageBlock = document.querySelector(".en__ecardmessage");

package/dist/embedded-ecard.js

@@ -87,6 +87,7 @@ export class EmbeddedEcard {
         iframe.setAttribute("width", "100%");
         iframe.setAttribute("scrolling", "no");
         iframe.setAttribute("frameborder", "0");
+        iframe.setAttribute("title", "Ecard iframe");
         iframe.classList.add("engrid-iframe", "engrid-iframe--embedded-ecard");
         iframe.style.display = "none";
         return iframe;

package/dist/interfaces/ecard-to-target-options.d.ts

@@ -5,5 +5,9 @@ export interface EcardToTargetOptions {
     hideTarget: boolean;
     hideMessage: boolean;
     addSupporterNameToMessage: boolean;
+    targets: {
+        targetName: string;
+        targetEmail: string;
+    }[];
 }
 export declare const EcardToTargetOptionsDefaults: EcardToTargetOptions;

package/dist/interfaces/ecard-to-target-options.js

@@ -5,4 +5,5 @@ export const EcardToTargetOptionsDefaults = {
     hideTarget: true,
     hideMessage: true,
     addSupporterNameToMessage: false,
+    targets: [],
 };

package/dist/optin-ladder.js

@@ -40,6 +40,7 @@ export class OptInLadder {
             iframe.allow = "payment";
             iframe.classList.add("opt-in-ladder-iframe");
             iframe.classList.add("engrid-iframe");
+            iframe.setAttribute("title", "Optin Ladder iframe");
             // If the page already has an iFrame with the same class, we don't need to add another one
             const existingIframe = document.querySelector(".opt-in-ladder-iframe");
             if (existingIframe) {

package/dist/post-donation-embed.js

@@ -50,6 +50,7 @@ export class PostDonationEmbed {
         iframe.setAttribute("allowfullscreen", "");
         iframe.setAttribute("allowpaymentrequest", "true");
         iframe.setAttribute("allow", "payment");
+        iframe.setAttribute("title", "Post Donation iframe");
         // Replace <engrid-post-donation> with the iframe
         postDonationTag.replaceWith(iframe);
     }

package/dist/premium-gift.d.ts

@@ -1,10 +1,14 @@
 export declare class PremiumGift {
     private logger;
     private enElements;
+    private _frequency;
+    private _amount;
     constructor();
     shoudRun(): boolean;
     addEventListeners(): void;
     checkPremiumGift(): void;
     searchElements(): void;
     setPremiumTitle(title: string): void;
+    altsAndArias(): void;
+    maxDonationAria(): void;
 }

package/dist/premium-gift.js

@@ -3,16 +3,23 @@
 // 2 - Add a class to body to indicate if the "maximize my impact" is selected (data-engrid-premium-gift-maximize="true|false")
 // 3 - Check the premium gift when click on the title or description
 // 4 - Create new {$PREMIUMTITLE} merge tag that's replaced with the premium gift name
-import { ENGrid, EngridLogger } from ".";
+// 5 - Add aria-label to the radio inputs and alt tags to the images
+import { ENGrid, DonationFrequency, DonationAmount, EngridLogger } from ".";
 export class PremiumGift {
     constructor() {
         this.logger = new EngridLogger("PremiumGift", "#232323", "#f7b500", "🎁");
         this.enElements = new Array();
+        this._frequency = DonationFrequency.getInstance();
+        this._amount = DonationAmount.getInstance();
         if (!this.shoudRun())
             return;
         this.searchElements();
         this.addEventListeners();
         this.checkPremiumGift();
+        window.setTimeout(() => {
+            this.altsAndArias();
+            this.maxDonationAria();
+        }, 1000);
     }
     shoudRun() {
         return ("pageJson" in window &&
@@ -61,6 +68,16 @@ export class PremiumGift {
             });
             observer.observe(premiumGiftsBlock, { attributes: true });
         }
+        this._frequency.onFrequencyChange.subscribe(() => {
+            window.setTimeout(() => {
+                this.altsAndArias();
+            }, 1000);
+        });
+        this._amount.onAmountChange.subscribe(() => {
+            window.setTimeout(() => {
+                this.altsAndArias();
+            }, 1000);
+        });
     }
     checkPremiumGift() {
         const premiumGift = document.querySelector('[name="en__pg"]:checked');
@@ -112,4 +129,55 @@ export class PremiumGift {
             }
         });
     }
+    // Sets alt tags for premium gift images and aria tags for premium gift radio inputs
+    altsAndArias() {
+        const premiumTitle = document.querySelectorAll(".en__pg__detail h2.en__pg__name");
+        const multistepBackButton = document.querySelectorAll(".multistep-button-container button.btn-back");
+        premiumTitle.forEach((item) => {
+            if (item) {
+                const titleText = item.innerHTML;
+                const parent = item.parentElement;
+                const prevSibling = parent === null || parent === void 0 ? void 0 : parent.previousElementSibling;
+                const radioInputSibling = prevSibling === null || prevSibling === void 0 ? void 0 : prevSibling.previousElementSibling;
+                if (prevSibling) {
+                    const imageDiv = prevSibling.querySelector(".en__pg__images");
+                    if (imageDiv) {
+                        const img = imageDiv.querySelector("img");
+                        if (img) {
+                            img.setAttribute("alt", titleText);
+                            img.style.width = "125px";
+                            img.style.height = "100px";
+                        }
+                    }
+                }
+                if (radioInputSibling) {
+                    const radioInput = radioInputSibling.querySelector('input[type="radio"]');
+                    if (radioInput) {
+                        radioInput.setAttribute("aria-label", titleText);
+                    }
+                }
+            }
+            multistepBackButton.forEach((item) => {
+                item.setAttribute("aria-label", "Back");
+            });
+        });
+    }
+    // This is for the Maximize My Donation aria-label - the tree structure for it is slightly different.
+    maxDonationAria() {
+        const maxDonationTitle = Array.from(document.querySelectorAll(".en__pg__detail")).filter((el) => !el.querySelector("h2"));
+        maxDonationTitle.forEach((item) => {
+            var _a;
+            if (item) {
+                const titleText = ((_a = item.querySelector(".en__pg__description")) === null || _a === void 0 ? void 0 : _a.innerHTML) || "";
+                const prevSibling = item.previousElementSibling;
+                const radioInputSibling = prevSibling === null || prevSibling === void 0 ? void 0 : prevSibling.previousElementSibling;
+                if (radioInputSibling) {
+                    const radioInput = radioInputSibling.querySelector('input[type="radio"]');
+                    if (radioInput) {
+                        radioInput.setAttribute("aria-label", titleText);
+                    }
+                }
+            }
+        });
+    }
 }

package/dist/remember-me.js

@@ -226,6 +226,7 @@ export class RememberMe {
                 "position:absolute;width:1px;height:1px;left:-9999px;";
             iframe.src = this.remoteUrl;
             iframe.setAttribute("sandbox", "allow-same-origin allow-scripts");
+            iframe.setAttribute("title", "Remember Me iframe");
             this.iframe = iframe;
             document.body.appendChild(this.iframe);
             this.iframe.addEventListener("load", () => iframeLoaded(), false);

package/dist/show-hide-radio-checkboxes.js

@@ -45,6 +45,11 @@ export class ShowHideRadioCheckboxes {
                 this.toggleValue(el, "hide");
                 el.style.display = "none";
                 this.logger.log("Hiding", el);
+                const input = el.querySelector("input");
+                if (input instanceof HTMLInputElement) {
+                    input.setAttribute("aria-required", "false");
+                    this.logger.log("aria-required set to FALSE", input);
+                }
             }
         });
     }
@@ -57,6 +62,11 @@ export class ShowHideRadioCheckboxes {
                 this.toggleValue(el, "show");
                 el.style.display = "";
                 this.logger.log("Showing", el);
+                const input = el.querySelector("input");
+                if (input instanceof HTMLInputElement) {
+                    input.setAttribute("aria-required", "true");
+                    this.logger.log("aria-required set to TRUE", input);
+                }
             }
         });
         if (item.type == "checkbox" && !item.checked) {

package/dist/skip-link.js

@@ -10,19 +10,19 @@ export class SkipToMainContentLink {
         const firstTitle = document.querySelector("title");
         const firstH1 = document.querySelector("h1");
         if (firstTitleInEngridBody && firstTitleInEngridBody.parentElement) {
-            firstTitleInEngridBody.parentElement.insertAdjacentHTML("beforebegin", '<span id="skip-link"></span>');
+            firstTitleInEngridBody.parentElement.id = "skip-link";
             this.insertSkipLinkSpan();
         }
         else if (firstH1InEngridBody && firstH1InEngridBody.parentElement) {
-            firstH1InEngridBody.parentElement.insertAdjacentHTML("beforebegin", '<span id="skip-link"></span>');
+            firstH1InEngridBody.parentElement.id = "skip-link";
             this.insertSkipLinkSpan();
         }
         else if (firstTitle && firstTitle.parentElement) {
-            firstTitle.parentElement.insertAdjacentHTML("beforebegin", '<span id="skip-link"></span>');
+            firstTitle.parentElement.id = "skip-link";
             this.insertSkipLinkSpan();
         }
         else if (firstH1 && firstH1.parentElement) {
-            firstH1.parentElement.insertAdjacentHTML("beforebegin", '<span id="skip-link"></span>');
+            firstH1.parentElement.id = "skip-link";
             this.insertSkipLinkSpan();
         }
         else {

package/dist/swap-amounts.js

@@ -57,6 +57,7 @@ export class SwapAmounts {
         const urlParams = new URLSearchParams(window.location.search);
         const amounts = urlParams.get("engrid-amounts");
         if (amounts) {
+            this.defaultChange = true;
             const amountArray = amounts.split(",").map((amt) => amt.trim());
             const defaultAmount = parseFloat(ENGrid.getUrlParameter("transaction.donationAmt")) || parseFloat(amountArray[0]);
             const amountsObj = {};
@@ -78,7 +79,9 @@ export class SwapAmounts {
                 ignoreCurrentValue: this.ignoreCurrentValue(),
             });
             this._amount.load();
-            this.logger.log("Amounts Swapped To", window.EngridAmounts[this._frequency.frequency]);
+            this.logger.log("Amounts Swapped To", window.EngridAmounts[this._frequency.frequency], {
+                ignoreCurrentValue: this.ignoreCurrentValue(),
+            });
             this.swapped = true;
         }
     }
@@ -97,8 +100,13 @@ export class SwapAmounts {
         return "EngridAmounts" in window;
     }
     ignoreCurrentValue() {
+        if (ENGrid.getUrlParameter("transaction.donationAmt") !== null) {
+            return this._amount.amount ===
+                parseFloat(ENGrid.getUrlParameter("transaction.donationAmt"))
+                ? false
+                : true;
+        }
         return !(window.EngagingNetworks.require._defined.enjs.checkSubmissionFailed() ||
-            ENGrid.getUrlParameter("transaction.donationAmt") !== null ||
             this.defaultChange);
     }
 }

package/dist/version.d.ts

@@ -1 +1 @@
-export declare const AppVersion = "0.21.10";
+export declare const AppVersion = "0.22.0";

package/dist/version.js

@@ -1 +1 @@
-export const AppVersion = "0.21.10";
+export const AppVersion = "0.22.0";

package/dist/welcome-back.d.ts

@@ -1,4 +1,5 @@
 export declare class WelcomeBack {
+    private _form;
     private supporterDetails;
     private options;
     private rememberMeEvents;
@@ -10,4 +11,5 @@ export declare class WelcomeBack {
     private resetWelcomeBack;
     private addPersonalDetailsSummary;
     private addEventListeners;
+    enOnValidate(): void;
 }

package/dist/welcome-back.js

@@ -7,11 +7,12 @@
  *
  * All the text content and positioning is configurable through the "WelcomeBack" option.
  */
-import { ENGrid, RememberMeEvents } from ".";
+import { ENGrid, EnForm, RememberMeEvents } from ".";
 import * as cookie from "./cookie";
 export class WelcomeBack {
     constructor() {
         var _a;
+        this._form = EnForm.getInstance();
         this.supporterDetails = {};
         this.options = (_a = ENGrid.getOption("WelcomeBack")) !== null && _a !== void 0 ? _a : false;
         this.rememberMeEvents = RememberMeEvents.getInstance();
@@ -127,5 +128,17 @@ export class WelcomeBack {
                 this.resetWelcomeBack();
             });
         });
+        this._form.onValidate.subscribe(this.enOnValidate.bind(this));
+    }
+    enOnValidate() {
+        if (!this._form.validate)
+            return;
+        const regionFieldValue = ENGrid.getFieldValue("supporter.region");
+        const regionFieldLabel = document.querySelector(".en__field--region label");
+        if (regionFieldLabel && regionFieldValue === "") {
+            ENGrid.setError(".en__field--region", `${regionFieldLabel.innerText} is required`);
+            ENGrid.setBodyData("hide-fast-personal-details", false);
+            this._form.validate = false;
+        }
     }
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@4site/engrid-scripts",
-  "version": "0.21.10",
+  "version": "0.22.0",
   "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": "48bf3dcfd3908d0b99f333fed182d4c362c45b72",
+  "gitHead": "e5d7823be14fd1c1116bd43d80be85da4c1e69fd",
   "devDependencies": {
     "nodemon": "^2.0.20"
   }