@incodetech/web 0.0.0-dev-20260911-d4e8be9f → 0.0.0-dev-20260911-3bcad995

package/dist/flow/flow.es.js

@@ -1,10 +1,11 @@
-import { o as useTranslation, t as setThemeUiConfig, u as readStoredLanguage } from "../uiConfig-Sd_A0KwB.js";
+import { o as useTranslation, t as setThemeUiConfig, u as readStoredLanguage } from "../uiConfig-Dy2JqseS.js";
 import { _ as y, a as P, c as A, f as d, s as z, u as T, v as u } from "../vendor-preact-C0jX1Cbq.js";
-import { C as useManager, c as TerminalErrorPage, f as TransitionSpinner, o as ResolvedConfigProvider, t as IncodeComponent } from "../incodeComponent-OpYmmHuG.js";
-import { x as ErrorIcon } from "../icons-BTQAPX7h.js";
-import { t as StatusPage } from "../statusPage-BSf9rrbK.js";
-import { t as registerIncodeModuleElement } from "../incodeModule-DQfs4RF7.js";
-import { _ as warmupWasmIfNeeded, a as resolveApiKey, c as HEADLESS_FLOW_MODULE_KEYS, d as fetchTheme, f as initializeFlowManager, h as preloadRedirectToMobile, l as LAZY_UI_MODULES, m as preloadHomeScreen, n as useModulePreloader, o as extractIncodeStatus, p as preloadFirstModule, r as usePrefetchNextModule, s as UnsupportedModule, t as useModuleLoader, u as createFlowManager, v as isDesktopOrEmulated, y as resolveSessionLanguage } from "../useModuleLoader-CgGe0OtT.js";
+import { S as useManager, a as ResolvedConfigProvider, d as TransitionSpinner, s as TerminalErrorPage, t as IncodeComponent } from "../incodeComponent-Ctt3_dEc.js";
+import { b as ErrorIcon } from "../icons-Bu1QoQJO.js";
+import { t as StatusPage } from "../statusPage-9H1zSHi7.js";
+import { t as registerIncodeModuleElement } from "../incodeModule-B0oBiVJr.js";
+import { a as LAZY_UI_MODULES, c as initializeFlowManager, f as warmupWasmIfNeeded, i as HEADLESS_FLOW_MODULE_KEYS, l as preloadFirstModule, m as resolveSessionLanguage, n as extractIncodeStatus, o as createFlowManager, r as UnsupportedModule, s as fetchTheme, t as resolveApiKey, u as preloadHomeScreen } from "../resolveApiKey-BFJkHdFX.js";
+import { i as usePrefetchNextModule, n as useModuleLoader, r as useModulePreloader } from "../useModuleLoader-DpcbSKBH.js";
 import { getNextRequiredWasmPipelines } from "@incodetech/core/flow";
 import { bootstrapSession, refreshQrUrlUuid } from "@incodetech/core/session";
 //#region src/shared/processing/useDelayedFlag.ts
@@ -189,9 +190,6 @@ function consumePreloadedData(token) {
 function maybePreloadHomeScreen(flowManager) {
 	if (flowManager.getState().presentation.shouldPrefetchHome) preloadHomeScreen();
 }
-function maybePreloadRedirectToMobile() {
-	if (isDesktopOrEmulated()) preloadRedirectToMobile();
-}
 function isFlowManagerError(flowManager, errorMessage) {
 	const managerState = flowManager.getState();
 	return managerState.status === "error" && managerState.error === errorMessage;
@@ -208,7 +206,6 @@ function useFlowInitialization(options) {
 				if (consumed) {
 					flowManagerRef.current = consumed.flowManager;
 					maybePreloadHomeScreen(consumed.flowManager);
-					maybePreloadRedirectToMobile();
 					if (consumed.uiConfig) setThemeUiConfig(consumed.uiConfig);
 					return {
 						status: "ready",
@@ -230,7 +227,6 @@ function useFlowInitialization(options) {
 			if (preloaded.status === "loading") {
 				flowManagerRef.current = preloaded.flowManager;
 				maybePreloadHomeScreen(preloaded.flowManager);
-				maybePreloadRedirectToMobile();
 				return {
 					status: "initializing",
 					flowManager: preloaded.flowManager
@@ -250,7 +246,6 @@ function useFlowInitialization(options) {
 			flowManager
 		};
 		maybePreloadHomeScreen(flowManager);
-		maybePreloadRedirectToMobile();
 		return {
 			status: "initializing",
 			flowManager
@@ -261,12 +256,13 @@ function useFlowInitialization(options) {
 		if (state.status !== "initializing") return;
 		const preloaded = token ? getPreloadedData(token) : null;
 		if (token && preloaded?.status === "loading") {
+			let cancelled = false;
 			preloaded.readyPromise.then(() => {
+				if (cancelled) return;
 				const consumed = consumePreloadedData(token);
 				if (consumed) {
 					flowManagerRef.current = consumed.flowManager;
 					maybePreloadHomeScreen(consumed.flowManager);
-					maybePreloadRedirectToMobile();
 					if (consumed.uiConfig) setThemeUiConfig(consumed.uiConfig);
 					setState({
 						status: "ready",
@@ -274,6 +270,7 @@ function useFlowInitialization(options) {
 					});
 				}
 			}).catch((error) => {
+				if (cancelled) return;
 				const flowManager = consumePreloadedData(token)?.flowManager ?? state.flowManager;
 				const errorMessage = error instanceof Error ? error.message : "Preload failed";
 				const errorCode = extractIncodeStatus(error);
@@ -285,7 +282,9 @@ function useFlowInitialization(options) {
 				});
 				if (!isFlowManagerError(flowManager, errorMessage)) onError?.(errorMessage, errorCode);
 			});
-			return;
+			return () => {
+				cancelled = true;
+			};
 		}
 		if (initStartedRef.current) return;
 		initStartedRef.current = true;
@@ -313,10 +312,11 @@ function useFlowInitialization(options) {
 				});
 				activation.catch(() => void 0);
 				const themePromise = disableDashboardTheme ? Promise.resolve() : fetchTheme(resolvedToken).then((result) => {
-					if (result.uiConfig) setThemeUiConfig(result.uiConfig);
+					if (!signal.aborted && result.uiConfig) setThemeUiConfig(result.uiConfig);
 				});
 				const flowReadyPromise = state.flowManager.waitForReady();
 				await Promise.all([flowReadyPromise, themePromise]);
+				if (signal.aborted) return;
 				setState({
 					status: "ready",
 					flowManager: state.flowManager
@@ -354,9 +354,186 @@ function useFlowInitialization(options) {
 	return state;
 }
 //#endregion
+//#region src/modules/flow/loadFlowStylesheets.ts
+var loads = /* @__PURE__ */ new WeakMap();
+/** Keep module sheets after base.css, in CSS import order rather than fetch order. */
+function loadFlowStylesheet(load, order, nonce) {
+	let documentLoads = loads.get(document);
+	if (!documentLoads) {
+		documentLoads = /* @__PURE__ */ new Map();
+		loads.set(document, documentLoads);
+	}
+	const cached = documentLoads.get(load);
+	if (cached) return cached;
+	const promise = load().then(({ default: css }) => {
+		const style = document.createElement("style");
+		style.dataset.incodeFlowCss = String(order);
+		if (nonce) style.nonce = nonce;
+		style.textContent = css;
+		const owned = Array.from(document.head.querySelectorAll("style[data-incode-flow-css]"));
+		const next = owned.find((sheet) => Number(sheet.dataset.incodeFlowCss) > order);
+		const last = owned[owned.length - 1];
+		document.head.insertBefore(style, next ?? (last ? last.nextSibling : null));
+		if (!style.sheet) {
+			style.remove();
+			throw new Error("Flow stylesheet blocked; check the Content Security Policy and cssNonce");
+		}
+	}).catch((error) => {
+		documentLoads.delete(load);
+		throw error;
+	});
+	documentLoads.set(load, promise);
+	return promise;
+}
+//#endregion
+//#region src/modules/flow/flowStyles.ts
+var shell = () => import("./shell/styles.css.js");
+var moduleSheets = [
+	{
+		keys: [
+			"SELFIE",
+			"AUTHENTICATION",
+			"VIDEO_ONBOARDING"
+		],
+		load: () => import("../selfie/styles.css.js")
+	},
+	{
+		keys: ["PHONE"],
+		load: () => import("../phone/styles.css.js")
+	},
+	{
+		keys: ["EMAIL", "DYNAMIC_FORMS"],
+		load: () => import("../email/styles.css.js")
+	},
+	{
+		keys: ["FACE_MATCH"],
+		load: () => import("../face-match/styles.css.js")
+	},
+	{
+		keys: ["GOVT_VALIDATION_PROVISIONING", "INE_VALIDATION"],
+		load: () => import("../government-validation/styles.css.js")
+	},
+	{
+		keys: [
+			"ID",
+			"ID_CAPTURE",
+			"TUTORIAL_ID",
+			"SECOND_ID",
+			"VIDEO_ONBOARDING"
+		],
+		load: () => import("../id/styles.css.js")
+	},
+	{
+		keys: ["ID_OCR"],
+		load: () => import("../id-ocr/styles.css.js")
+	},
+	{
+		keys: ["DOCUMENT_CAPTURE", "ADDRESS"],
+		load: () => import("../document-capture/styles.css.js")
+	},
+	{
+		keys: ["CURP_VALIDATION"],
+		load: () => import("../curp-validation/styles.css.js")
+	},
+	{
+		keys: ["GEOLOCATION"],
+		load: () => import("../geolocation/styles.css.js")
+	},
+	{
+		keys: ["EXTERNAL_VERIFICATION"],
+		load: () => import("../ekyc/styles.css.js")
+	},
+	{
+		keys: ["EKYB"],
+		load: () => import("../ekyb/styles.css.js")
+	},
+	{
+		keys: ["REDIRECT_TO_MOBILE"],
+		load: () => import("../redirect-to-mobile/styles.css.js")
+	},
+	{
+		keys: [
+			"COMBINED_CONSENT",
+			"MANDATORY_CONSENT",
+			"ML_CONSENT"
+		],
+		load: () => import("../consent/styles.css.js")
+	},
+	{
+		keys: ["CUSTOM_FIELDS"],
+		load: () => import("../custom-fields/styles.css.js")
+	},
+	{
+		keys: ["DYNAMIC_FORMS"],
+		load: () => import("../dynamic-forms/styles.css.js")
+	},
+	{
+		keys: ["SIGNATURE"],
+		load: () => import("../signature/styles.css.js")
+	},
+	{
+		keys: ["FIELD_COMPARISON"],
+		load: () => import("../field-comparison/styles.css.js")
+	},
+	{
+		keys: ["WATCHLIST_BUSINESS"],
+		load: () => import("../watchlist-for-business/styles.css.js")
+	},
+	{
+		keys: ["AE_SIGNATURE", "QE_SIGNATURE"],
+		load: () => import("../electronic-signature/styles.css.js")
+	},
+	{
+		keys: ["CERTIFICATE_ISSUANCE"],
+		load: () => import("../certificate-issuance/styles.css.js")
+	},
+	{
+		keys: ["FISCAL_QR"],
+		load: () => import("../fiscal-qr/styles.css.js")
+	},
+	{
+		keys: ["VIDEO_ONBOARDING"],
+		load: () => import("../video-selfie/styles.css.js")
+	}
+];
+async function loadFlowStyles(moduleKey, nonce) {
+	const pending = [loadFlowStylesheet(shell, moduleSheets.length, nonce)];
+	if (moduleKey) moduleSheets.forEach((sheet, index) => {
+		if (sheet.keys.includes(moduleKey)) pending.push(loadFlowStylesheet(sheet.load, index, nonce));
+	});
+	await Promise.all(pending);
+}
+//#endregion
+//#region src/modules/flow/useFlowStyles.ts
+function useFlowStyles(enabled, onError, nonce) {
+	const [loaded, setLoaded] = d(false);
+	const [error, setError] = d(false);
+	const onErrorRef = A(onError);
+	onErrorRef.current = onError;
+	y(() => {
+		if (!enabled) return;
+		let cancelled = false;
+		loadFlowStyles(void 0, nonce).then(() => {
+			if (!cancelled) setLoaded(true);
+		}, (error) => {
+			if (!cancelled) {
+				setError(true);
+				onErrorRef.current?.(error instanceof Error ? error.message : "Failed to load flow styles");
+			}
+		});
+		return () => {
+			cancelled = true;
+		};
+	}, [enabled, nonce]);
+	return {
+		ready: !enabled || loaded,
+		error: enabled && error
+	};
+}
+//#endregion
 //#region src/modules/flow/flow.tsx
-var LazyHomeScreen = z(() => import("../homeScreen-DnSGezVj.js").then((module) => ({ default: module.HomeScreen })));
-var IncodeFlowContent = ({ config, onFinish, onError }) => {
+var LazyHomeScreen = z(() => import("../homeScreen-DT1T6X5i.js").then((module) => ({ default: module.HomeScreen })));
+var IncodeFlowInitialization = ({ config, onFinish, onError, stylesReady }) => {
 	const { i18n } = useTranslation();
 	const initialSessionLanguage = A(isSelfLoadingFlowConfig(config) ? resolveSessionLanguage(config.lang, i18n.language, readStoredLanguage()) : config.lang).current;
 	const initState = useFlowInitialization(T(() => ({
@@ -369,11 +546,23 @@ var IncodeFlowContent = ({ config, onFinish, onError }) => {
 		onError
 	]));
 	const [flowState, flowManager] = useManager(() => initState.flowManager, { autoLoad: false });
+	if (!stylesReady) return null;
+	return /* @__PURE__ */ u(IncodeFlowContent, {
+		config,
+		onFinish,
+		onError,
+		initState,
+		flowState,
+		flowManager
+	});
+};
+var IncodeFlowContent = ({ config, onFinish, onError, initState, flowState, flowManager }) => {
+	const { i18n } = useTranslation();
 	const lazyModuleKey = flowState.presentation.lazyModuleKey;
 	const currentModuleKey = flowState.status === "ready" ? flowState.currentStep : void 0;
 	const moduleLoaderState = useModuleLoader({
 		moduleKey: lazyModuleKey,
-		modules: LAZY_UI_MODULES,
+		modules: T(() => config.injectCss ? Object.fromEntries(Object.entries(LAZY_UI_MODULES).map(([key, load]) => [key, () => Promise.all([load(), loadFlowStyles(key, config.cssNonce)]).then(([Component]) => Component)])) : LAZY_UI_MODULES, [config.injectCss, config.cssNonce]),
 		onModuleLoading: config.onModuleLoading,
 		onModuleLoaded: config.onModuleLoaded,
 		onError
@@ -383,7 +572,7 @@ var IncodeFlowContent = ({ config, onFinish, onError }) => {
 		modules: LAZY_UI_MODULES
 	});
 	const currentModuleLoaded = moduleLoaderState.status === "loaded";
-	const showHomeLoadingScreen = config.enableHome === true && flowState.status === "ready" && flowState.flow.disableLaunchScreen !== true && flowState.currentStepIndex === 0 && flowState.homeScreen.visible === false && moduleLoaderState.status === "loading";
+	const showHomeLoadingScreen = config.enableHome === true && flowState.status === "ready" && flowState.flow.disableLaunchScreen !== true && flowState.currentStepIndex === 0 && flowState.currentStep !== "REDIRECT_TO_MOBILE" && flowState.homeScreen.visible === false && moduleLoaderState.status === "loading";
 	const isAwaitingReadyDelayed = useDelayedFlag(flowState.presentation.isAwaitingReady === true, 150);
 	const isModuleLoadingDelayed = useDelayedFlag(flowState.status === "ready" && (moduleLoaderState.status === "idle" || moduleLoaderState.status === "loading" || moduleLoaderState.status === "error"), 150);
 	usePrefetchNextModule(flowState?.status === "ready" ? flowState.steps : [], flowState?.status === "ready" ? flowState.currentStepIndex : -1, LAZY_UI_MODULES, currentModuleLoaded);
@@ -508,6 +697,10 @@ var IncodeFlowContent = ({ config, onFinish, onError }) => {
 				onNext: () => flowManager.completeModule()
 			})
 		});
+		if (config.injectCss && moduleLoaderState.status === "error") return /* @__PURE__ */ u("div", {
+			class: "IncodeFlow",
+			children: /* @__PURE__ */ u(TerminalErrorPage, {})
+		});
 		if (moduleLoaderState.status === "idle" || moduleLoaderState.status === "loading" || moduleLoaderState.status === "error") {
 			if (!isModuleLoadingDelayed) return /* @__PURE__ */ u("div", { class: "IncodeFlow" });
 			return /* @__PURE__ */ u("div", {
@@ -895,10 +1088,13 @@ var IncodeFlowContent = ({ config, onFinish, onError }) => {
 	return null;
 };
 var IncodeFlow = ({ config, onFinish = () => {}, onError }) => {
-	return /* @__PURE__ */ u(IncodeComponent, { children: config ? /* @__PURE__ */ u(ResolvedConfigProvider, { children: /* @__PURE__ */ u(IncodeFlowContent, {
+	const styles = useFlowStyles(config?.injectCss, onError, config?.cssNonce);
+	if (styles.error) return /* @__PURE__ */ u(IncodeComponent, { children: /* @__PURE__ */ u(TerminalErrorPage, {}) });
+	return /* @__PURE__ */ u(IncodeComponent, { children: config ? /* @__PURE__ */ u(ResolvedConfigProvider, { children: /* @__PURE__ */ u(IncodeFlowInitialization, {
 		config,
 		onFinish,
-		onError
+		onError,
+		stylesReady: styles.ready
 	}) }) : null });
 };
 registerIncodeModuleElement(IncodeFlow, "incode-flow");