@4site/engrid-scripts 0.28.0 → 0.28.2

package/dist/input-placeholders.d.ts

@@ -1,7 +1,10 @@
 export declare class InputPlaceholders {
     private defaultPlaceholders;
+    private selectorToI18nKey;
+    private customSelectors;
     constructor();
     private shouldRun;
     private run;
+    private resolvePlaceholder;
     private addPlaceholder;
 }

package/dist/input-placeholders.js

@@ -12,6 +12,9 @@
 import { ENGrid } from ".";
 export class InputPlaceholders {
     constructor() {
+        // NOTE: for selectors listed in selectorToI18nKey below, these English
+        // strings are shadowed by the i18n dictionary — edit
+        // interfaces/i18n-options.ts ("placeholders.*" keys) instead of here.
         this.defaultPlaceholders = {
             "input#en__field_supporter_firstName": "First Name",
             "input#en__field_supporter_lastName": "Last Name",
@@ -57,10 +60,30 @@ export class InputPlaceholders {
             "input#en__field_supporter_billingRegion": "Billing Region",
             "input#en__field_supporter_billingPostcode": "Billing Postal Code",
         };
+        // Maps the default-placeholder selectors to i18n dictionary keys, so the
+        // built-in strings follow the page language. Selectors the client overrides
+        // via the Placeholders option are never translated.
+        this.selectorToI18nKey = {
+            "input#en__field_supporter_firstName": "placeholders.firstName",
+            "input#en__field_supporter_lastName": "placeholders.lastName",
+            "input#en__field_supporter_emailAddress": "placeholders.emailAddress",
+            "input#en__field_supporter_phoneNumber": "placeholders.phoneNumberOptional",
+            ".en__mandatory input#en__field_supporter_phoneNumber": "placeholders.phoneNumber",
+            ".i-required input#en__field_supporter_phoneNumber": "placeholders.phoneNumber",
+            "input#en__field_supporter_phoneNumber2": "placeholders.phoneNumber2Optional",
+            "input#en__field_supporter_country": "placeholders.country",
+            "input#en__field_supporter_address1": "placeholders.address1",
+            "input#en__field_supporter_address2": "placeholders.address2",
+            "input#en__field_supporter_city": "placeholders.city",
+            "input#en__field_supporter_region": "placeholders.region",
+            "input#en__field_supporter_postcode": "placeholders.postcode",
+        };
+        this.customSelectors = new Set();
         if (this.shouldRun()) {
             // If there's a Placeholders option, merge it with the default placeholders
             const placeholders = ENGrid.getOption("Placeholders");
             if (placeholders) {
+                this.customSelectors = new Set(Object.keys(placeholders));
                 this.defaultPlaceholders = Object.assign(Object.assign({}, this.defaultPlaceholders), placeholders);
             }
             this.run();
@@ -72,9 +95,18 @@ export class InputPlaceholders {
     run() {
         Object.keys(this.defaultPlaceholders).forEach((selector) => {
             if (selector in this.defaultPlaceholders)
-                this.addPlaceholder(selector, this.defaultPlaceholders[selector]);
+                this.addPlaceholder(selector, this.resolvePlaceholder(selector));
         });
     }
+    // Built-in placeholder strings follow the page language; client-provided
+    // Placeholders options always win.
+    resolvePlaceholder(selector) {
+        const key = this.selectorToI18nKey[selector];
+        if (key && !this.customSelectors.has(selector)) {
+            return ENGrid.t(key);
+        }
+        return this.defaultPlaceholders[selector];
+    }
     addPlaceholder(selector, placeholder) {
         const fieldEl = document.querySelector(selector);
         if (fieldEl) {

package/dist/interfaces/i18n-options.js

@@ -12,6 +12,19 @@ export const I18nDefaults = {
         "translateFields.select": "Select",
         "translateFields.recipientTo": "To:",
         "a11y.errorSummary": "There are {count} errors: {messages}.",
+        // InputPlaceholders component defaults
+        "placeholders.firstName": "First Name",
+        "placeholders.lastName": "Last Name",
+        "placeholders.emailAddress": "Email Address",
+        "placeholders.phoneNumber": "Phone Number",
+        "placeholders.phoneNumberOptional": "Phone Number (Optional)",
+        "placeholders.phoneNumber2Optional": "000-000-0000 (Optional)",
+        "placeholders.country": "Country",
+        "placeholders.address1": "Street Address",
+        "placeholders.address2": "Apt., Ste., Bldg.",
+        "placeholders.city": "City",
+        "placeholders.region": "Region",
+        "placeholders.postcode": "ZIP Code",
     },
     es: {
         "rememberMe.label": "Recuérdame",
@@ -26,5 +39,18 @@ export const I18nDefaults = {
         "translateFields.select": "Seleccione",
         "translateFields.recipientTo": "Para:",
         "a11y.errorSummary": "Hay {count} errores: {messages}.",
+        // InputPlaceholders component defaults
+        "placeholders.firstName": "Nombre",
+        "placeholders.lastName": "Apellidos",
+        "placeholders.emailAddress": "Correo electrónico",
+        "placeholders.phoneNumber": "Teléfono",
+        "placeholders.phoneNumberOptional": "Teléfono (opcional)",
+        "placeholders.phoneNumber2Optional": "000-000-0000 (opcional)",
+        "placeholders.country": "País",
+        "placeholders.address1": "Calle y número",
+        "placeholders.address2": "Depto., Piso, Edif.",
+        "placeholders.city": "Ciudad",
+        "placeholders.region": "Provincia/Estado",
+        "placeholders.postcode": "Código Postal",
     },
 };

package/dist/remember-me.d.ts

@@ -2,7 +2,6 @@ import { EnForm, RememberMeEvents } from "./events";
 export declare class RememberMe {
     _form: EnForm;
     _events: RememberMeEvents;
-    private _frequency;
     private remoteUrl;
     private cookieName;
     private fieldNames;
@@ -15,7 +14,6 @@ export declare class RememberMe {
     private fieldDonationAmountRadioName;
     private fieldDonationAmountOtherName;
     private fieldDonationRecurrPayRadioName;
-    private fieldDonationRecurrFreqRadioName;
     private fieldDonationAmountOtherCheckboxID;
     private fieldOptInSelectorTarget;
     private fieldOptInSelectorTargetLocation;
@@ -31,7 +29,6 @@ export declare class RememberMe {
         fieldDonationAmountRadioName?: string;
         fieldDonationAmountOtherName?: string;
         fieldDonationRecurrPayRadioName?: string;
-        fieldDonationRecurrFreqRadioName?: string;
         fieldDonationAmountOtherCheckboxID?: string;
         fieldOptInSelectorTarget?: string;
         fieldOptInSelectorTargetLocation?: string;
@@ -104,25 +101,5 @@ export declare class RememberMe {
      * @param overwrite - A boolean indicating whether to overwrite the existing value of the fields. Defaults to false.
      */
     private writeFields;
-    /**
-     * SwapAmounts replaces the donationAmt radio DOM nodes ~1 second after page
-     * load (triggered by DonationFrequency.load() setTimeout). When that happens
-     * the selection the RememberMe just wrote gets wiped out.
-     *
-     * This method subscribes to the first onFrequencyChange event and, after a
-     * short delay to let SwapAmounts finish its DOM update, re-applies only the
-     * donation amount. It unsubscribes immediately so it only fires once.
-     *
-     * To avoid overwriting a manual donor interaction, the handler checks
-     * whether the current amount selection is empty/wiped (as SwapAmounts does)
-     * OR still matches what writeFields originally set. If the donor already
-     * picked a different amount, we skip re-application.
-     */
-    private reapplyDonationAmtAfterSwap;
-    /**
-     * Returns the currently selected donation amount value, or null if nothing
-     * is selected. Checks both predefined radio buttons and the "Other" text input.
-     */
-    private getCurrentSelectedAmount;
     private isJson;
 }

package/dist/remember-me.js

@@ -8,7 +8,7 @@ var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, ge
     });
 };
 import * as cookie from "./cookie";
-import { EnForm, RememberMeEvents, DonationFrequency } from "./events";
+import { EnForm, RememberMeEvents } from "./events";
 import { ENGrid } from "./engrid";
 const tippy = require("tippy.js").default;
 // localStorage key used to cache the per-device AES-GCM encryption key.
@@ -18,7 +18,6 @@ export class RememberMe {
     constructor(options) {
         this._form = EnForm.getInstance();
         this._events = RememberMeEvents.getInstance();
-        this._frequency = DonationFrequency.getInstance();
         this.iframe = null;
         this.encryptData = options.encryptData ? options.encryptData : false;
         this.hide = options.hide ? options.hide : false;
@@ -41,10 +40,6 @@ export class RememberMe {
             options.fieldDonationRecurrPayRadioName
                 ? options.fieldDonationRecurrPayRadioName
                 : "transaction.recurrpay";
-        this.fieldDonationRecurrFreqRadioName =
-            options.fieldDonationRecurrFreqRadioName
-                ? options.fieldDonationRecurrFreqRadioName
-                : "transaction.recurrfreq";
         this.fieldDonationAmountOtherCheckboxID =
             options.fieldDonationAmountOtherCheckboxID
                 ? options.fieldDonationAmountOtherCheckboxID
@@ -106,7 +101,6 @@ export class RememberMe {
                     }
                     else {
                         this.insertClearRememberMeLink();
-                        this.reapplyDonationAmtAfterSwap();
                     }
                 }
             });
@@ -126,9 +120,6 @@ export class RememberMe {
                     this.insertClearRememberMeLink();
                 }
                 this.writeFields();
-                if (hasFieldData) {
-                    this.reapplyDonationAmtAfterSwap();
-                }
                 this._form.onSubmit.subscribe(() => {
                     if (this.rememberMeOptIn) {
                         this.readFields();
@@ -147,9 +138,6 @@ export class RememberMe {
                 this.insertClearRememberMeLink();
             }
             this.writeFields();
-            if (hasFieldData) {
-                this.reapplyDonationAmtAfterSwap();
-            }
             this._form.onSubmit.subscribe(() => {
                 if (this.rememberMeOptIn) {
                     this.readFields();
@@ -483,17 +471,6 @@ export class RememberMe {
                     if (type === "radio" || type === "checkbox") {
                         field = document.querySelector(fieldSelector + ":checked");
                     }
-                    // When the donation amount radio is set to "Other", save the actual
-                    // custom value from the .other text input instead of "Other".
-                    if (this.fieldNames[i] === this.fieldDonationAmountRadioName &&
-                        field &&
-                        field.value.toLowerCase() === "other") {
-                        const otherField = document.querySelector("input[name='" + this.fieldDonationAmountOtherName + "']");
-                        if (otherField && otherField.value) {
-                            this.fieldData[this.fieldNames[i]] = encodeURIComponent(otherField.value);
-                            continue;
-                        }
-                    }
                     this.fieldData[this.fieldNames[i]] = encodeURIComponent(field.value);
                 }
                 else if (field.tagName === "SELECT") {
@@ -577,36 +554,17 @@ export class RememberMe {
                             field.click();
                         }
                     }
-                    else if (this.fieldNames[i] === this.fieldDonationRecurrFreqRadioName) {
-                        // recurrfreq is a radio group — find the specific radio with the saved value and click it
-                        const savedValue = this.fieldData[this.fieldNames[i]];
-                        if (savedValue) {
-                            const freqRadio = document.querySelector(fieldSelector + "[value='" + CSS.escape(savedValue) + "']");
-                            if (freqRadio) {
-                                freqRadio.click();
-                            }
-                        }
-                    }
                     else if (this.fieldDonationAmountRadioName === this.fieldNames[i]) {
-                        const savedAmt = this.fieldData[this.fieldNames[i]];
-                        const escapedAmt = CSS.escape(savedAmt);
-                        field = document.querySelector(fieldSelector + "[value='" + escapedAmt + "']");
+                        field = document.querySelector(fieldSelector +
+                            "[value='" +
+                            this.fieldData[this.fieldNames[i]] +
+                            "']");
                         if (field) {
-                            // Saved value matches a predefined radio option — just click it
                             field.click();
                         }
                         else {
-                            // No matching radio: the value is a custom amount.
-                            // Click the "Other" radio first so the text input becomes active,
-                            // then fill in the numeric value.
-                            const otherRadio = document.querySelector(fieldSelector + "[value='Other'], " +
-                                fieldSelector + "[value='other'], " +
-                                fieldSelector + "[value='OTHER']");
-                            if (otherRadio) {
-                                otherRadio.click();
-                            }
-                            const otherField = document.querySelector("input[name='" + this.fieldDonationAmountOtherName + "']");
-                            this.setFieldValue(otherField, savedAmt, true);
+                            field = document.querySelector("input[name='" + this.fieldDonationAmountOtherName + "']");
+                            this.setFieldValue(field, this.fieldData[this.fieldNames[i]], true);
                         }
                     }
                     else {
@@ -619,74 +577,6 @@ export class RememberMe {
             }
         }
     }
-    /**
-     * SwapAmounts replaces the donationAmt radio DOM nodes ~1 second after page
-     * load (triggered by DonationFrequency.load() setTimeout). When that happens
-     * the selection the RememberMe just wrote gets wiped out.
-     *
-     * This method subscribes to the first onFrequencyChange event and, after a
-     * short delay to let SwapAmounts finish its DOM update, re-applies only the
-     * donation amount. It unsubscribes immediately so it only fires once.
-     *
-     * To avoid overwriting a manual donor interaction, the handler checks
-     * whether the current amount selection is empty/wiped (as SwapAmounts does)
-     * OR still matches what writeFields originally set. If the donor already
-     * picked a different amount, we skip re-application.
-     */
-    reapplyDonationAmtAfterSwap() {
-        const savedAmt = this.fieldData[this.fieldDonationAmountRadioName];
-        if (!savedAmt)
-            return;
-        // Capture the amount that writeFields just set so we can detect manual changes
-        const amountAtRegistration = this.getCurrentSelectedAmount();
-        const handler = () => {
-            // SwapAmounts calls _amount.load() after swapList — give it a tick to settle
-            window.setTimeout(() => {
-                const currentAmt = this.getCurrentSelectedAmount();
-                // Only re-apply if the selection is now empty (DOM was swapped out)
-                // or still matches what we originally wrote. If the donor manually
-                // selected a different amount, respect their choice.
-                const selectionWiped = currentAmt === null || currentAmt === "";
-                const selectionUnchanged = currentAmt === amountAtRegistration;
-                if (!selectionWiped && !selectionUnchanged) {
-                    return;
-                }
-                const fieldSelector = "[name='" + this.fieldDonationAmountRadioName + "']";
-                const escapedAmt = CSS.escape(savedAmt);
-                let radio = document.querySelector(fieldSelector + "[value='" + escapedAmt + "']");
-                if (radio) {
-                    radio.click();
-                }
-                else {
-                    // Custom amount: click "Other" radio then fill the text input
-                    const otherRadio = document.querySelector(fieldSelector + "[value='Other'], " +
-                        fieldSelector + "[value='other'], " +
-                        fieldSelector + "[value='OTHER']");
-                    if (otherRadio)
-                        otherRadio.click();
-                    const otherField = document.querySelector("input[name='" + this.fieldDonationAmountOtherName + "']");
-                    this.setFieldValue(otherField, savedAmt, true);
-                }
-            }, 200);
-        };
-        // Subscribe once: fires on the first frequency change then auto-unsubscribes
-        this._frequency.onFrequencyChange.one(handler);
-    }
-    /**
-     * Returns the currently selected donation amount value, or null if nothing
-     * is selected. Checks both predefined radio buttons and the "Other" text input.
-     */
-    getCurrentSelectedAmount() {
-        const fieldSelector = "[name='" + this.fieldDonationAmountRadioName + "']";
-        const checkedRadio = document.querySelector(fieldSelector + ":checked");
-        if (!checkedRadio)
-            return null;
-        if (checkedRadio.value.toLowerCase() === "other") {
-            const otherField = document.querySelector("input[name='" + this.fieldDonationAmountOtherName + "']");
-            return otherField ? otherField.value : null;
-        }
-        return checkedRadio.value;
-    }
     isJson(str) {
         try {
             JSON.parse(str);

package/dist/translate-fields.js

@@ -134,7 +134,20 @@ export class TranslateFields {
                     ? simplecountriesSelect.cloneNode(true)
                     : null;
                 if (field instanceof HTMLInputElement && field.placeholder != "") {
-                    if (!fieldLabel || fieldLabel.innerHTML == field.placeholder) {
+                    // Translate the placeholder when it mirrors the label (the common
+                    // case). Compare normalized visible text so template whitespace and
+                    // required-marker markup don't break the match. Order matters:
+                    // trim before stripping the marker, or labels like "Name *\n"
+                    // keep the asterisk.
+                    const labelText = ((fieldLabel === null || fieldLabel === void 0 ? void 0 : fieldLabel.textContent) || "")
+                        .replace(/\s+/g, " ")
+                        .trim()
+                        .replace(/\s*\*$/, "");
+                    const placeholderText = field.placeholder
+                        .replace(/\s+/g, " ")
+                        .trim()
+                        .replace(/\s*\*$/, "");
+                    if (!fieldLabel || labelText === placeholderText) {
                         field.dataset.original = field.placeholder;
                         field.placeholder = translation;
                     }

package/dist/version.d.ts

@@ -1 +1 @@
-export declare const AppVersion = "0.28.0";
+export declare const AppVersion = "0.28.2";

package/dist/version.js

@@ -1 +1 @@
-export const AppVersion = "0.28.0";
+export const AppVersion = "0.28.2";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@4site/engrid-scripts",
-  "version": "0.28.0",
+  "version": "0.28.2",
   "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": "354dfda54591f849c4ab105d881034f7f7a2fff5",
+  "gitHead": "16aba8b38f4a978d1f965272f2df6bf6b98dd9f8",
   "devDependencies": {
     "nodemon": "^2.0.20",
     "typescript": "^4.9.5"