@verbb/formie-browser 1.0.3 → 1.0.5

package/src/js/modules/address/host.ts

@@ -1,8 +1,9 @@
 import type { ModuleSetupContext } from '#contracts/modules';
 import {
     ADDRESS_LOCATION_SELECTOR,
-    ADDRESS_SELECTORS,
     DEFAULT_AUTOCOMPLETE_SELECTOR,
+    findAddressFieldInput,
+    type AddressFieldInputKey,
 } from '#modules/address/constants';
 
 type Cleanup = () => void;
@@ -24,7 +25,7 @@ export type AddressHostServices = {
     form: HTMLFormElement | null;
     input: {
         getAutocomplete: () => HTMLInputElement | null;
-        setValue: (selector: keyof typeof ADDRESS_SELECTORS, value: string, fallback?: string) => void;
+        setValue: (selector: AddressFieldInputKey, value: string, fallback?: string) => void;
     };
     location: {
         getButton: () => HTMLElement | null;
@@ -90,12 +91,21 @@ export function createAddressHostServices(
                 return field.querySelector(autocompleteSelector) as HTMLInputElement | null;
             },
             setValue: (selectorKey, value, fallback) => {
-                const selector = ADDRESS_SELECTORS[selectorKey];
-                const el = field.querySelector(selector) as HTMLInputElement | null;
+                const el = findAddressFieldInput(field, selectorKey);
 
-                if (el) {
-                    el.value = value || fallback || '';
+                if (!el) {
+                    return;
                 }
+
+                const nextValue = value || fallback || '';
+
+                if (el.value === nextValue) {
+                    return;
+                }
+
+                el.value = nextValue;
+                el.dispatchEvent(new Event('input', { bubbles: true }));
+                el.dispatchEvent(new Event('change', { bubbles: true }));
             },
         },
         location: {

package/src/js/modules/address/loqate.ts

@@ -1,5 +1,5 @@
 import { defineAddressModule } from '#modules/address/api';
-import { ADDRESS_SELECTORS } from '#modules/address/constants';
+import { findAddressFieldInput, type AddressFieldInputKey } from '#modules/address/constants';
 import { loadScriptAndEnsureGlobal } from '#utils/scripts';
 
 type PcaFieldMode = {
@@ -63,27 +63,13 @@ export const loqateModule = defineAddressModule<
             throw new Error('Loqate API key is required');
         }
 
-        const handleToSelector: Record<string, string> = {
-            autoComplete: ADDRESS_SELECTORS.autoComplete,
-            address1: ADDRESS_SELECTORS.address1,
-            address2: ADDRESS_SELECTORS.address2,
-            address3: ADDRESS_SELECTORS.address3,
-            city: ADDRESS_SELECTORS.city,
-            state: ADDRESS_SELECTORS.state,
-            zip: ADDRESS_SELECTORS.zip,
-            country: ADDRESS_SELECTORS.country,
-        };
-
         // Loqate PCA expects element to be an id string, name string, or RegExp matching ids – not CSS selectors
-        const getLoqateElementRef = (handle: string): string => {
+        const getLoqateElementRef = (handle: AddressFieldInputKey): string => {
             if (namespace) {
                 return `${namespace}[${handle}]`;
             }
 
-            const cssSelector = handleToSelector[handle];
-            const el = cssSelector
-                ? (field.querySelector(cssSelector) as HTMLInputElement | null)
-                : null;
+            const el = findAddressFieldInput(field, handle);
 
             if (el?.name) {
                 return el.name;

package/src/js/modules/fields/address-country.ts

@@ -0,0 +1,156 @@
+import type { FormieModuleDefinition } from '#contracts/modules';
+import { ADDRESS_SELECTORS, findAddressFieldInput } from '#modules/address/constants';
+import { getModuleFieldContainers } from '#modules/fields/shared';
+import { fetchCountryFromIp } from '#utils/country-from-ip';
+import { createDebug } from '#utils/debug';
+
+const MODULE_ID = 'address-country';
+const COUNTRY_SELECTOR = ADDRESS_SELECTORS.country;
+const debug = createDebug('fields', 'address-country');
+
+type ComboboxSelect = HTMLSelectElement & {
+    _formieTomSelect?: {
+        setValue: (value: string, silent?: boolean) => void;
+    };
+};
+
+type AddressCountryOptions = {
+    countryPreselectFromIp?: boolean;
+    countryAllowed?: string[];
+    countryOptionValue?: 'short' | 'full';
+    countryFromIpAction?: string;
+};
+
+function resolveCountrySelectValue(
+    countryCode: string,
+    countryName: string | null | undefined,
+    optionValue: 'short' | 'full',
+): string {
+    if (optionValue === 'full' && countryName) {
+        return countryName;
+    }
+
+    return countryCode.toUpperCase();
+}
+
+function isCountryAllowed(countryCode: string, countryAllowed: string[] = []): boolean {
+    if (!countryAllowed.length) {
+        return true;
+    }
+
+    const upperCode = countryCode.toUpperCase();
+
+    return countryAllowed.some((allowed) => allowed.toUpperCase() === upperCode);
+}
+
+function optionExists(select: HTMLSelectElement, value: string): boolean {
+    return Array.from(select.options).some((option) => option.value === value);
+}
+
+async function setCountrySelectValue(select: HTMLSelectElement, value: string): Promise<void> {
+    for (let attempt = 0; attempt < 20; attempt += 1) {
+        const combobox = (select as ComboboxSelect)._formieTomSelect;
+
+        if (combobox || !select.hasAttribute('data-formie-combobox-input')) {
+            if (combobox) {
+                combobox.setValue(value, true);
+            } else {
+                select.value = value;
+            }
+
+            select.dispatchEvent(new Event('change', { bubbles: true }));
+            return;
+        }
+
+        await new Promise((resolve) => {
+            window.setTimeout(resolve, 50);
+        });
+    }
+
+    debug.warn('Timed out waiting for country combobox initialisation.');
+}
+
+async function preselectCountry(
+    addressRoot: HTMLElement,
+    options: AddressCountryOptions,
+): Promise<void> {
+    const countryControl = findAddressFieldInput(addressRoot, 'country');
+
+    if (!(countryControl instanceof HTMLSelectElement)) {
+        debug.warn('Country control not found or not a select; skipping preselect.');
+        return;
+    }
+
+    if (countryControl.value.trim()) {
+        return;
+    }
+
+    const response = await fetchCountryFromIp(options.countryFromIpAction);
+
+    if (!response?.countryCode) {
+        return;
+    }
+
+    if (!isCountryAllowed(response.countryCode, options.countryAllowed)) {
+        debug.log('Detected country is not in the allowed list; skipping preselect.', {
+            countryCode: response.countryCode,
+        });
+        return;
+    }
+
+    const optionValue = options.countryOptionValue === 'full' ? 'full' : 'short';
+    const selectValue = resolveCountrySelectValue(
+        response.countryCode,
+        response.countryName,
+        optionValue,
+    );
+
+    if (!optionExists(countryControl, selectValue)) {
+        debug.warn('Detected country is not available in the country dropdown; skipping preselect.', {
+            selectValue,
+        });
+        return;
+    }
+
+    await setCountrySelectValue(countryControl, selectValue);
+    debug.log('Preselected country from IP.', { selectValue });
+}
+
+export const addressCountryModule: FormieModuleDefinition = {
+    id: MODULE_ID,
+    kind: 'field',
+    match: (ctx) => {
+        return !!ctx.target.querySelector(COUNTRY_SELECTOR);
+    },
+    setup: async (ctx) => {
+        const options = (ctx.options || {}) as AddressCountryOptions;
+
+        if (!options.countryPreselectFromIp) {
+            return {
+                destroy: () => {},
+            };
+        }
+
+        const fields = getModuleFieldContainers(ctx);
+        const tasks = fields.map(async (field) => {
+            const addressRoot = field.closest('[data-formie-field-type="address"]')
+                || field.closest('[data-formie-address-field-layout]')?.closest('[data-formie-field]')
+                || field;
+
+            if (!(addressRoot instanceof HTMLElement)) {
+                return;
+            }
+
+            await preselectCountry(addressRoot, options);
+        });
+
+        await Promise.all(tasks);
+        debug.log('Module setup.', { fieldCount: fields.length });
+
+        return {
+            destroy: () => {
+                debug.log('Module destroy.', { fieldCount: fields.length });
+            },
+        };
+    },
+};