@verbb/formie-browser 1.0.12 → 1.0.14

package/src/js/modules/payments/stripe.ts

@@ -66,7 +66,7 @@ type StripeFieldState = Element & {
 
 const ZERO_DECIMAL_CURRENCIES = new Set([
     'BIF', 'CLP', 'DJF', 'GNF', 'JPY', 'KMF', 'KRW', 'MGA', 'PYG',
-    'RWF', 'UGX', 'VND', 'VUV', 'XAF', 'XOF', 'XPF',
+    'RWF', 'VND', 'VUV', 'XAF', 'XOF', 'XPF',
 ]);
 
 function toStripeSubunitAmount(amount: number, currency: string): number {
@@ -74,7 +74,7 @@ function toStripeSubunitAmount(amount: number, currency: string): number {
         return Math.ceil(amount);
     }
 
-    return Math.ceil(amount * 100);
+    return Math.round((amount + Number.EPSILON) * 100);
 }
 
 function clearPlaceholderError(placeholder: HTMLElement | null, themeSource: Element | null): void {
@@ -97,7 +97,7 @@ function renderPlaceholderLoading(placeholder: HTMLElement | null, themeSource:
     placeholder.removeAttribute('hidden');
     placeholder.innerHTML = '';
     const spinner = document.createElement('div');
-    spinner.className = 'formie-loading';
+    addThemeClasses(spinner, themeSource, 'loading');
     const text = document.createElement('div');
     text.textContent = message;
     placeholder.append(spinner, text);
@@ -120,7 +120,7 @@ function showPlaceholderMessage(placeholder: HTMLElement | null, themeSource: El
 }
 
 export const stripeModule = definePaymentModule<StripeProviderOptions, StripeInstance | null, StripeWidget | null>({
-    id: 'stripe',
+    moduleId: 'formie:stripe',
     defaultRequiredInputSuffixes: ['stripePaymentIntentId'],
     load: async (ctx) => {
         const { provider } = ctx.options;
@@ -288,7 +288,7 @@ export const stripeModule = definePaymentModule<StripeProviderOptions, StripeIns
         stripeField.__formieStripeDynamicUnbind?.();
         stripeField.__formieStripeDynamicUnbind = null;
     },
-    onBeforeAuthorize: async (args) => {
+    onBeforePayment: async (args) => {
         const { widget, services, field } = args;
         const stripeField = field as StripeFieldState;
         let activeWidget = widget;

package/src/js/modules/payments/utils.ts

@@ -15,6 +15,20 @@ export function getPaymentProviderHandle(id: string, options: PaymentProviderOpt
     return id;
 }
 
+/**
+ * Payment widgets should neither mount nor enforce authorize tokens when the
+ * field (or an ancestor row/page) is hidden by conditions / page flow.
+ * Matches server-side `isConditionallyHidden()` skips in payment workflow tasks.
+ */
+export function isPaymentFieldActive(element: Element): boolean {
+    const node = element as HTMLElement;
+
+    return !node.closest('[data-formie-conditionally-hidden]')
+        && !node.closest('[data-formie-row-hidden]')
+        && !node.closest('[data-formie-page-hidden]')
+        && !node.closest('[hidden]');
+}
+
 export function findPaymentInputBySuffix(root: Element, suffix: string): HTMLInputElement | null {
     const escapedSuffix = suffix.replace(/"/g, '\\"');
     return (root.querySelector(`input[name$="[${escapedSuffix}]"]`) ||

package/src/js/modules/registry.ts

@@ -1,12 +1,17 @@
-import type { FormieModuleDefinition, ModuleRegistrationOptions } from '#contracts/modules';
+import type { BrowserModuleDefinition, ModuleRegistrationOptions } from '#contracts/modules';
 
 export class ModuleRegistry {
-    private modules = new Map<string, FormieModuleDefinition>();
-
-    register(moduleDefinition: FormieModuleDefinition, options: ModuleRegistrationOptions = {}): boolean {
-        // The registry is intentionally lightweight: the loader handles lazy
-        // resolution, while this class only tracks already-available definitions.
-        const existing = this.modules.get(moduleDefinition.id);
+    private modules = new Map<string, BrowserModuleDefinition>();
+
+    register(moduleDefinition: BrowserModuleDefinition, options: ModuleRegistrationOptions = {}): boolean {
+        if (!/^[a-z][a-z0-9.-]*:[a-z][a-z0-9.-]*$/.test(moduleDefinition.moduleId) ||
+            moduleDefinition.version !== 2 || !Array.isArray(moduleDefinition.surfaces) || moduleDefinition.surfaces.length === 0 ||
+            moduleDefinition.surfaces.some((surface) => !['server-rendered', 'client-rendered', 'cp-edit'].includes(surface)) ||
+            !['field', 'captcha', 'payment', 'address', 'core'].includes(moduleDefinition.kind) ||
+            typeof moduleDefinition.match !== 'function' || typeof moduleDefinition.setup !== 'function') {
+            throw new Error('Unsupported browser module definition. Register a namespaced moduleId compatible with version 2.');
+        }
+        const existing = this.modules.get(moduleDefinition.moduleId);
 
         if (existing === moduleDefinition) {
             return true;
@@ -14,13 +19,13 @@ export class ModuleRegistry {
 
         if (existing && !options.replace) {
             console.warn(
-                `[formie] Module "${moduleDefinition.id}" is already registered. `
+                `[formie] Module "${moduleDefinition.moduleId}" is already registered. `
                 + 'Pass { replace: true } to override the existing definition.',
             );
             return false;
         }
 
-        this.modules.set(moduleDefinition.id, moduleDefinition);
+        this.modules.set(moduleDefinition.moduleId, moduleDefinition);
         return true;
     }
 
@@ -28,11 +33,14 @@ export class ModuleRegistry {
         this.modules.delete(moduleId);
     }
 
-    get(moduleId: string): FormieModuleDefinition | null {
+    get(moduleId: string): BrowserModuleDefinition | null {
         return this.modules.get(moduleId) || null;
     }
 
-    getAll(): FormieModuleDefinition[] {
+    getAll(): BrowserModuleDefinition[] {
         return Array.from(this.modules.values());
     }
 }
+
+/** Trusted application registrations shared by client-rendered framework hosts. */
+export const clientRenderedModuleRegistry = new ModuleRegistry();

package/src/js/submit/pipeline.ts

@@ -17,8 +17,8 @@ export type SubmitPipelineContext = {
 
 type StageRunner = (ctx: SubmitPipelineContext) => Promise<FormSubmitResult | null>;
 
-const STAGES: SubmitStage[] = ['prepare', 'normalize', 'validate', 'screen', 'authorize', 'dispatch', 'finalize'];
-const PREFLIGHT_STAGES: SubmitStage[] = ['prepare', 'normalize', 'validate', 'screen', 'authorize'];
+const STAGES: SubmitStage[] = ['prepare', 'validate', 'challenge', 'payment', 'send', 'result'];
+const PREFLIGHT_STAGES: SubmitStage[] = ['prepare', 'validate', 'challenge', 'payment'];
 const debug = createDebug('general', 'pipeline');
 
 function getAbortedResult(stage: SubmitStage, reason?: string): FormSubmitResult {
@@ -231,9 +231,6 @@ export async function runSubmitPipeline(
             ctx.formData.set('submitAction', ctx.action);
             return null;
         },
-        normalize: async() => {
-            return null;
-        },
         validate: async(ctx) => {
             if (ctx.action !== 'submit') {
                 // Back/save actions bypass final validation so they can persist
@@ -290,13 +287,13 @@ export async function runSubmitPipeline(
 
             return null;
         },
-        screen: async() => {
+        challenge: async() => {
             return null;
         },
-        authorize: async() => {
+        payment: async() => {
             return null;
         },
-        dispatch: async(ctx) => {
+        send: async(ctx) => {
             // Rehydrate just-in-time so provider hooks can mutate hidden inputs
             // during `screen` / `authorize` and still be submitted.
             ctx.formData = buildSubmitFormData(ctx.form, ctx.action);
@@ -306,7 +303,7 @@ export async function runSubmitPipeline(
             // success and failure outcomes (e.g. provider token/element resets).
             return result;
         },
-        finalize: async(resultCtx) => {
+        result: async(resultCtx) => {
             if (!dispatchResult) {
                 return null;
             }
@@ -315,8 +312,9 @@ export async function runSubmitPipeline(
             // rest of the browser client can react to one result shape first.
             if (dispatchResult.ok && dispatchResult.redirect?.url) {
                 if (dispatchResult.redirect.target === 'new-tab') {
-                    window.open(dispatchResult.redirect.url, '_blank');
+                    window.open(dispatchResult.redirect.url, '_blank', 'noopener,noreferrer');
                 } else {
+                    resultCtx.form.setAttribute('data-formie-internal-navigation', 'redirect');
                     window.location.href = dispatchResult.redirect.url;
                 }
             }
@@ -469,7 +467,8 @@ export async function runSubmitPipeline(
 
     const successResult: FormSubmitResult = dispatchResult || {
         ok: true,
-        stage: options.preflightOnly ? 'authorize' : 'finalize',
+        stage: options.preflightOnly ? 'payment' : 'result',
+        code: options.preflightOnly ? 'PREFLIGHT_COMPLETE' : undefined,
         message: options.preflightOnly ? 'Submission preflight completed.' : 'Submission completed.',
     };
 

package/src/js/theme/browser-theme-state.generated.ts

@@ -0,0 +1,25 @@
+// Generated from src/config/browser-theme-state.json. Do not edit by hand.
+export const BROWSER_THEME_STATE_DEFAULTS = {
+    errors: ["formie-errors"],
+    successes: ["formie-successes"],
+    message: ["formie-message"],
+    messageError: ["formie-message-error"],
+    messageSuccess: ["formie-message-success"],
+    tabError: ["formie-tab-error"],
+    tabCurrent: ["formie-tab-current"],
+    tabComplete: ["formie-tab-complete"],
+    tabLinkCurrent: [],
+    tabLinkInactive: [],
+    pageHidden: ["formie-page-hidden"],
+    conditionalHidden: ["formie-conditionally-hidden"],
+    rowHidden: ["formie-row-hidden"],
+    loading: ["formie-loading"],
+    success: ["formie-success"],
+    error: ["formie-error"],
+    fieldLayoutError: ["formie-field-has-error"],
+    fieldControlError: ["formie-input-error"],
+    fieldErrors: ["formie-field-errors"],
+    fieldError: ["formie-field-error"],
+} as const;
+
+export type BrowserThemeStateKey = keyof typeof BROWSER_THEME_STATE_DEFAULTS;

package/src/js/theme/theme-classes.ts

@@ -1,4 +1,4 @@
-import type { ThemeClassMap } from '#contracts/theme';
+import type { BrowserThemeClassMap } from '#contracts/theme';
 
 type NormalizedThemeClassMap = Record<string, string[]>;
 
@@ -46,7 +46,7 @@ function resolveThemeClassMap(source: Element | null): NormalizedThemeClassMap {
     return themeRegistry.get(root) || {};
 }
 
-export function normalizeThemeClassMap(theme?: ThemeClassMap | null): NormalizedThemeClassMap {
+export function normalizeThemeClassMap(theme?: BrowserThemeClassMap | null): NormalizedThemeClassMap {
     const normalized: NormalizedThemeClassMap = {};
 
     Object.entries(theme || {}).forEach(([key, value]) => {
@@ -60,7 +60,7 @@ export function normalizeThemeClassMap(theme?: ThemeClassMap | null): Normalized
     return normalized;
 }
 
-export function registerThemeClassMap(target: Element, theme?: ThemeClassMap | null, form?: HTMLFormElement | null): NormalizedThemeClassMap {
+export function registerThemeClassMap(target: Element, theme?: BrowserThemeClassMap | null, form?: HTMLFormElement | null): NormalizedThemeClassMap {
     const normalized = normalizeThemeClassMap(theme);
     const resolvedForm = form || (target instanceof HTMLFormElement ? target : target.querySelector('form'));
 

package/src/js/transport/forms-api.ts

@@ -1,6 +1,8 @@
+import { browserRequest, type BrowserRequestOptions } from '@verbb/formie-core';
 import type { FormEndpointPayload, FormSubmitResult } from '#contracts/schema';
+import { appendFormCsrfToFormData } from '#utils/csrf';
 import { createDebug } from '#utils/debug';
-import { requestJson } from '#utils/http';
+import { request, requestJson } from '#utils/http';
 
 const debug = createDebug('general', 'transport');
 
@@ -25,40 +27,15 @@ function toServerRenderPayloadInput(renderOptions: Record<string, unknown>): Rec
     return input;
 }
 
-function flattenErrors(errors: unknown, path = '', output: Record<string, string[]> = {}): Record<string, string[]> {
-    if (Array.isArray(errors)) {
-        const messages = errors
-            .map((value) => {
-                return typeof value === 'string' ? value : String(value ?? '');
-            })
-            .filter((value) => {
-                return value.trim() !== '';
-            });
-
-        if (path && messages.length) {
-            output[path] = (output[path] || []).concat(messages);
-        }
-
-        return output;
-    }
-
-    // Craft/Formie error payloads can be nested by page/field/path. Flatten first
-    // so the browser client can map them back onto field handles consistently.
-    if (errors && typeof errors === 'object') {
-        Object.entries(errors as Record<string, unknown>).forEach(([key, value]) => {
-            const nextPath = path ? `${path}.${key}` : key;
-            flattenErrors(value, nextPath, output);
-        });
-    }
-
-    return output;
-}
-
 function normalizePayload(payload: Record<string, unknown>, fallbackFormError?: string): FormSubmitResult {
     const success = payload.success === true;
-    const keepSubmitLoading = payload.keepSubmitLoading === true;
+    const completion = payload.completion && typeof payload.completion === 'object'
+        ? payload.completion as NonNullable<FormSubmitResult['completion']>
+        : null;
+    const payment = payload.payment && typeof payload.payment === 'object' ? payload.payment as FormSubmitResult['payment'] : null;
+    const keepSubmitLoading = ['requiresAction', 'pending', 'unknown'].includes(payment?.status || '');
     const errors = payload.errors;
-    const fieldErrorsFlat = flattenErrors(errors || {});
+    const fieldErrorsFlat: Record<string, string[]> = Object.fromEntries(Object.entries(errors && typeof errors === 'object' ? errors : {}).map(([path, messages]) => [path, Array.isArray(messages) ? messages.filter((message): message is string => typeof message === 'string') : []]));
     const formErrors = fieldErrorsFlat.form || [];
     const fieldErrors: Record<string, string[]> = {};
 
@@ -67,10 +44,8 @@ function normalizePayload(payload: Record<string, unknown>, fallbackFormError?:
             return;
         }
 
-        // The client renders field errors against top-level field handles even when
-        // the backend returns deeper nested keys for subfields or row paths.
-        const topKey = key.split('.')[0];
-        fieldErrors[topKey] = (fieldErrors[topKey] || []).concat(value);
+        // The server normalises Yii keys; retain the entire control value path.
+        fieldErrors[key] = value;
     });
 
     const resolvedFormErrors = !success && formErrors.length === 0 && Object.keys(fieldErrors).length > 0
@@ -84,15 +59,24 @@ function normalizePayload(payload: Record<string, unknown>, fallbackFormError?:
 
     const result: FormSubmitResult = {
         ok: success,
+        outcome: typeof payload.outcome === 'string' ? payload.outcome : undefined,
+        version: typeof payload.version === 'number' ? payload.version : null,
+        submissionUid: typeof payload.submissionUid === 'string' ? payload.submissionUid : null,
+        errors: payload.errors,
+        session: payload.session,
+        completion,
         action: (payload.submitAction === 'back' || payload.submitAction === 'save' || payload.submitAction === 'submit')
             ? payload.submitAction
             : undefined,
         message: (
-            payload.submitActionMessage
+            completion?.message
+            || payload.successMessage
+            || payload.submitActionMessage
             || (success ? 'Submission completed.' : (isTransientPendingResult ? '' : (resolvedFormErrors[0] || 'Submission failed.')))
         ) as string,
         code: success ? undefined : String(payload.code || 'SUBMIT_ERROR'),
         keepSubmitLoading,
+        payment,
         fieldErrors: Object.keys(fieldErrors).length ? fieldErrors : undefined,
         formErrors: resolvedFormErrors.length ? resolvedFormErrors : undefined,
         nextPage: payload.nextPageId
@@ -100,10 +84,20 @@ function normalizePayload(payload: Record<string, unknown>, fallbackFormError?:
                 id: String(payload.nextPageId),
             }
             : null,
-        redirect: payload.redirectUrl
+        redirect: payment?.status === 'requiresAction' && payment.action?.type === 'redirect' && payment.action.url
+            ? {
+                url: payment.action.url,
+                target: 'same-tab',
+            }
+            : completion?.url
+            ? {
+                url: completion.url,
+                target: completion.target,
+            }
+            : payload.redirectUrl
             ? {
                 url: String(payload.redirectUrl),
-                target: payload.submitActionTab === 'new-tab' ? 'new-tab' : 'same-tab',
+                target: payload.redirectTarget === 'new-tab' ? 'new-tab' : 'same-tab',
             }
             : null,
         submitData: Array.isArray(payload.submitData) ? payload.submitData : undefined,
@@ -114,7 +108,7 @@ function normalizePayload(payload: Record<string, unknown>, fallbackFormError?:
     return result;
 }
 
-export async function requestRender(endpoint: string, handle: string, renderOptions: Record<string, unknown> = {}): Promise<FormEndpointPayload> {
+export async function requestRender(endpoint: string, handle: string, renderOptions: Record<string, unknown> = {}, requestOptions: BrowserRequestOptions = {}): Promise<FormEndpointPayload> {
     const body = JSON.stringify({
         handle,
         renderOptions,
@@ -122,6 +116,7 @@ export async function requestRender(endpoint: string, handle: string, renderOpti
 
     debug.log('requestRender start.', { endpoint, handle });
     const result = await requestJson<FormEndpointPayload>(endpoint, {
+        ...requestOptions,
         method: 'POST',
         body,
         headers: {
@@ -134,7 +129,7 @@ export async function requestRender(endpoint: string, handle: string, renderOpti
     return result;
 }
 
-export async function requestGraphqlRender(endpoint: string, handle: string, renderOptions: Record<string, unknown> = {}): Promise<FormEndpointPayload> {
+export async function requestGraphqlRender(endpoint: string, handle: string, renderOptions: Record<string, unknown> = {}, requestOptions: BrowserRequestOptions = {}): Promise<FormEndpointPayload> {
     const query = `
 query FormieHtmlForm($handle: String!, $input: ServerRenderPayloadInput) {
   formieHtmlForm(handle: $handle, input: $input) {
@@ -151,6 +146,7 @@ query FormieHtmlForm($handle: String!, $input: ServerRenderPayloadInput) {
 
     debug.log('requestGraphqlRender start.', { endpoint, handle });
     const result = await requestJson<GraphqlResponse<GraphqlFormQueryResult>>(endpoint, {
+        ...requestOptions,
         method: 'POST',
         body,
         headers: {
@@ -174,7 +170,7 @@ query FormieHtmlForm($handle: String!, $input: ServerRenderPayloadInput) {
     return payload;
 }
 
-export async function requestRefreshTokens(endpoint: string, handle: string, renderId?: string): Promise<FormEndpointPayload['refreshTokens']> {
+export async function requestRefreshTokens(endpoint: string, handle: string, renderId?: string, requestOptions: BrowserRequestOptions = {}, requestToken?: string): Promise<FormEndpointPayload['refreshTokens']> {
     const url = new URL(endpoint, window.location.origin);
     url.searchParams.set('handle', handle);
 
@@ -182,12 +178,14 @@ export async function requestRefreshTokens(endpoint: string, handle: string, ren
         url.searchParams.set('renderId', renderId);
     }
 
+    if (requestToken) url.searchParams.set('requestToken', requestToken);
+
     debug.log('requestRefreshTokens start.', {
         endpoint: url.toString(),
         handle,
         hasRenderId: !!renderId,
     });
-    const response = await requestJson<FormEndpointPayload>(url.toString());
+    const response = await requestJson<FormEndpointPayload>(url.toString(), requestOptions);
     debug.log('requestRefreshTokens complete.', {
         hasRefreshTokens: !!response.refreshTokens,
     });
@@ -198,6 +196,7 @@ export async function requestRefreshTokens(endpoint: string, handle: string, ren
 export async function requestSetPage(url: string, form?: HTMLFormElement, pageId?: string): Promise<{
     success?: boolean;
     pageId?: string | number;
+    errors?: Record<string, string[]>;
 }> {
     const requestUrl = new URL(url, window.location.origin);
     const body = new FormData();
@@ -209,7 +208,7 @@ export async function requestSetPage(url: string, form?: HTMLFormElement, pageId
     if (form) {
         // Page changes must carry the same continuity identifiers the submit flow
         // uses so the backend can persist draft/session state for multipage forms.
-        const inputNames = ['handle', 'renderId', 'draftContextToken', 'draftContext', 'continuationToken'];
+        const inputNames = ['handle', 'renderId', 'draftContextToken', 'draftContext', 'progressId', 'requestToken', 'expectedVersion'];
 
         inputNames.forEach((name) => {
             const input = form.querySelector(`input[name="${name}"]`) as HTMLInputElement | null;
@@ -220,11 +219,9 @@ export async function requestSetPage(url: string, form?: HTMLFormElement, pageId
             }
         });
 
-        const csrfInput = form.querySelector('input[name="CRAFT_CSRF_TOKEN"]') as HTMLInputElement | null;
-        const csrfValue = csrfInput?.value?.trim();
-
-        if (csrfValue) {
-            body.append('CRAFT_CSRF_TOKEN', csrfValue);
+        appendFormCsrfToFormData(body, form);
+        for (const [name, value] of new FormData(form)) {
+            if (name.startsWith('fields[')) body.append(name, value);
         }
     }
 
@@ -232,13 +229,22 @@ export async function requestSetPage(url: string, form?: HTMLFormElement, pageId
         requestUrl: requestUrl.toString(),
         pageId: pageId || null,
     });
-    const result = await requestJson<{
+    const response = await request(requestUrl.toString(), {
+        method: 'POST', body, profile: form?.dataset.formieRequestProfile as BrowserRequestOptions['profile'],
+    });
+    const result = await response.json() as {
         success?: boolean;
         pageId?: string | number;
-    }>(requestUrl.toString(), {
-        method: 'POST',
-        body,
-    });
+        errors?: Record<string, string[]>;
+        session?: { version: number; tokens?: { request?: string } };
+    };
+    if (form && result.session) {
+        const session = result.session;
+        const version = form.querySelector<HTMLInputElement>('input[name="expectedVersion"]');
+        const token = form.querySelector<HTMLInputElement>('input[name="requestToken"]');
+        if (version) version.value = String(session.version);
+        if (token && session.tokens?.request) token.value = session.tokens.request;
+    }
     debug.log('requestSetPage complete.', result);
     return result;
 }
@@ -257,34 +263,28 @@ export function clearSubmissionOnUnload(endpoint: string, form: HTMLFormElement)
         }
     });
 
-    const csrfInput = form.querySelector('input[name="CRAFT_CSRF_TOKEN"]') as HTMLInputElement | null;
-    const csrfValue = csrfInput?.value?.trim();
-
-    if (csrfValue) {
-        body.append('CRAFT_CSRF_TOKEN', csrfValue);
-    }
+    appendFormCsrfToFormData(body, form);
 
     debug.log('clearSubmissionOnUnload start.', {
         requestUrl: requestUrl.toString(),
     });
 
     try {
-        if (typeof navigator.sendBeacon === 'function' && navigator.sendBeacon(requestUrl.toString(), body)) {
+        if (form.dataset.formieRequestProfile !== 'cross-origin-public' && typeof navigator.sendBeacon === 'function' && navigator.sendBeacon(requestUrl.toString(), body)) {
             return;
         }
     } catch (_error) {
         // Fall back to keepalive fetch below when Beacon is unavailable or rejects the payload.
     }
 
-    void fetch(requestUrl.toString(), {
+    void browserRequest(requestUrl.toString(), {
         method: 'POST',
         body,
-        credentials: 'include',
         keepalive: true,
         headers: {
             Accept: 'application/json',
         },
-    });
+    }, { profile: form.dataset.formieRequestProfile as BrowserRequestOptions['profile'] });
 }
 
 export async function submitForm(form: HTMLFormElement, formData: FormData): Promise<FormSubmitResult> {
@@ -297,14 +297,13 @@ export async function submitForm(form: HTMLFormElement, formData: FormData): Pro
         action,
         submitAction: formData.get('submitAction'),
     });
-    const response = await fetch(action, {
+    const response = await browserRequest(action, {
         method,
         body: formData,
-        credentials: 'include',
         headers: {
             Accept: 'application/json',
         },
-    });
+    }, { profile: form.dataset.formieRequestProfile as BrowserRequestOptions['profile'] });
 
     const contentType = response.headers.get('content-type') || '';
 

package/src/js/utils/country-from-ip.ts

@@ -1,3 +1,5 @@
+import { browserRequest } from '@verbb/formie-core';
+import { getFormBrowserRequestOptions } from './request-profile';
 export type CountryFromIpResponse = {
     countryCode?: string | null;
     countryName?: string | null;
@@ -5,23 +7,25 @@ export type CountryFromIpResponse = {
 
 const DEFAULT_COUNTRY_FROM_IP_ACTION = 'formie/address/country-from-ip';
 
-let cachedLookup: Promise<CountryFromIpResponse | null> | null = null;
+const cachedLookups = new Map<string, Promise<CountryFromIpResponse | null>>();
 
 function buildActionUrl(action: string): string {
-    return new URL(action.startsWith('/') ? action : `/actions/${action}`, window.location.origin).toString();
+    return new URL(/^https?:\/\//.test(action) || action.startsWith('/') ? action : `/actions/${action}`, window.location.origin).toString();
 }
 
 export async function fetchCountryFromIp(
     action: string = DEFAULT_COUNTRY_FROM_IP_ACTION,
+    form?: HTMLFormElement | null,
 ): Promise<CountryFromIpResponse | null> {
-    if (!cachedLookup) {
-        cachedLookup = (async () => {
+    const key = buildActionUrl(action);
+    if (!cachedLookups.has(key)) {
+        cachedLookups.set(key, (async () => {
             try {
-                const response = await fetch(buildActionUrl(action), {
+                const response = await browserRequest(key, {
                     headers: {
                         Accept: 'application/json',
                     },
-                });
+                }, getFormBrowserRequestOptions(form));
 
                 if (!response.ok) {
                     return null;
@@ -37,17 +41,18 @@ export async function fetchCountryFromIp(
             } catch {
                 return null;
             }
-        })();
+        })());
     }
 
-    return cachedLookup;
+    return cachedLookups.get(key)!;
 }
 
 export function createGeoIpLookup(
     action: string = DEFAULT_COUNTRY_FROM_IP_ACTION,
+    form?: HTMLFormElement | null,
 ): (callback: (countryCode: string) => void) => void {
     return (callback) => {
-        void fetchCountryFromIp(action).then((data) => {
+        void fetchCountryFromIp(action, form).then((data) => {
             callback(data?.countryCode?.toLowerCase() || '');
         });
     };