@incodetech/web 2.1.1 → 2.2.0-rc.0

package/dist/id-selfie-flow/id-selfie-flow.es.js

@@ -0,0 +1,239 @@
+import { i as useTranslation } from "../uiConfig-B5ASPUL4.js";
+import { _ as y, d as T, p as d, v as u } from "../vendor-preact-mvwZ8mJj.js";
+import { _ as useModuleTerminalCallbacks, a as TerminalErrorPage, l as TransitionSpinner, o as Page, t as IncodeComponent, y as useManager } from "../incodeComponent-K9ZWg302.js";
+import { n as Title } from "../spinner-CLZ2fz4u.js";
+import { a as CameraView, r as preloadCaptureAnimations } from "../manualCaptureButton-t_oIol88.js";
+import { n as Permissions } from "../manualCaptureButton-quGa2ufS.js";
+import { t as registerIncodeModuleElement } from "../incodeModule-CcLzar_X.js";
+import { a as IdFlipModal, c as VideoSelfieTutorial, i as IdMask, l as useVideoSelfiePermissions, n as SwitchingCameraScreen, o as preloadIdFlipAnimation, r as StepsHeader, s as SelfieMask, t as VideoSelfieFinalSuccessScreen } from "../finalSuccessScreen-DryADx1n.js";
+import { createIdSelfieFlowManager, resolveIdSelfieFlowConfig, warmupIdSelfieFlowWasm } from "@incodetech/core/id-selfie-flow";
+import { facingModeForStep } from "@incodetech/core/video-selfie";
+//#region src/modules/id-selfie-flow/id-selfie-flow.tsx
+/**
+* @module @incodetech/web/id-selfie-flow
+*
+* ID + Selfie flow UI (PoC) — the REGULAR onboarding capture pipeline (ID
+* front/back → `process/id`, selfie → `process/face`) presented through the
+* Video Selfie continuous-camera UX: one session stream that follows the
+* camera between steps and is never interrupted. Nothing is recorded and no
+* microphone access is requested.
+*
+* @example Web Component usage
+* ```html
+* <script type="module">
+*   import '@incodetech/web/id-selfie-flow';
+*   import { setup } from '@incodetech/core';
+*   setup({ apiURL: 'https://api.example.com', token: 'your-token' });
+*   const el = document.querySelector('incode-id-selfie-flow');
+*   el.config = {};
+*   el.onFinish = () => console.log('done');
+* <\/script>
+* <incode-id-selfie-flow></incode-id-selfie-flow>
+* ```
+*
+* @see {@link createIdSelfieFlowManager} for headless usage.
+*/
+var DEFAULT_STEPS = [
+	"frontId",
+	"backId",
+	"selfie"
+];
+/**
+* Maps the live detection feedback to the selfie mask's visual state (same
+* mapping as the Video Selfie module).
+*/
+var getSelfieVariant = (detectionStatus) => {
+	switch (detectionStatus) {
+		case "success": return "success";
+		case "error": return "error";
+		case "capturing": return "processing";
+		default: return "idle";
+	}
+};
+/** Full-screen spinner while `process/id` validates the captured document. */
+var ProcessingIdScreen = () => {
+	const { t } = useTranslation();
+	return /* @__PURE__ */ u(Page, {
+		hideHeader: true,
+		children: /* @__PURE__ */ u(TransitionSpinner, { spinnerConfig: { title: t("common.processing") } })
+	});
+};
+var IdSelfieFlowContent = ({ config, onFinish, onError }) => {
+	const { t } = useTranslation();
+	const [state, manager] = useManager(() => createIdSelfieFlowManager({ config }), { autoLoad: false });
+	const [phase, setPhase] = d(config?.showTutorials ? "tutorial" : "permissions");
+	const { permissionStatus, manager: permissionsManager } = useVideoSelfiePermissions({
+		enabled: phase === "permissions",
+		onGranted: () => setPhase("capture"),
+		onClose: () => onError?.(void 0),
+		requestAudio: false
+	});
+	const steps = T(() => config?.steps ?? DEFAULT_STEPS, [config]);
+	const hasIdSteps = steps.includes("frontId") || steps.includes("backId");
+	y(() => {
+		if ((phase === "tutorial" || phase === "permissions") && config) {
+			warmupIdSelfieFlowWasm(config);
+			if (hasIdSteps) {
+				preloadCaptureAnimations();
+				preloadIdFlipAnimation();
+			}
+		}
+	}, [
+		phase,
+		config,
+		hasIdSteps
+	]);
+	y(() => {
+		if (phase !== "capture") return;
+		manager.start();
+	}, [manager, phase]);
+	useModuleTerminalCallbacks({
+		status: state.status,
+		onFinish: () => onFinish?.(state.finishStatus)
+	});
+	const step = state.step ?? "selfie";
+	if (phase === "tutorial") return /* @__PURE__ */ u(VideoSelfieTutorial, {
+		steps,
+		copy: {
+			title: "Verify your identity",
+			subtitle: "You'll be requested to:",
+			permissionsLabel: "Allow camera access",
+			startLabel: "Start verification"
+		},
+		onStart: () => setPhase("permissions")
+	});
+	if (phase === "permissions") return /* @__PURE__ */ u(Permissions, {
+		manager: permissionsManager,
+		permissionStatus
+	});
+	if (state.status === "finished" || state.status === "closed") return null;
+	if (state.status === "error") return /* @__PURE__ */ u(TerminalErrorPage, {
+		message: state.error,
+		onRetry: () => manager.retry()
+	});
+	if (state.status === "processingId" || state.status === "finishing") return /* @__PURE__ */ u(ProcessingIdScreen, {});
+	if (state.status === "success") return /* @__PURE__ */ u(VideoSelfieFinalSuccessScreen, {});
+	if (state.status === "switchingCamera") return /* @__PURE__ */ u(SwitchingCameraScreen, {
+		steps,
+		currentIndex: state.stepIndex,
+		facing: facingModeForStep(state.step ?? "selfie")
+	});
+	const isFrontCamera = facingModeForStep(step) === "user";
+	const detectionStatus = state.detectionStatus;
+	const idMode = step === "backId" ? "back" : "front";
+	const stepLabel = t(`videoSelfie.step.${step}`);
+	const selfieMessage = () => {
+		if (detectionStatus === "success") return t("videoSelfie.lookingGood");
+		if (detectionStatus === "capturing") return t("common.processing");
+		if (detectionStatus === "error") return t("common.tryAgain");
+		switch (detectionStatus) {
+			case "tooFar": return t("notifications.moveCloser");
+			case "tooClose": return t("notifications.moveAway");
+			case "blur": return t("notifications.onBlur");
+			case "faceMask": return t("notifications.mask");
+			case "lenses": return t("notifications.removeLenses");
+			case "eyesClosed": return t("notifications.eyesClosed");
+			case "headWear": return t("notifications.removeHeadwear");
+			default: return t("videoSelfie.lookCamera");
+		}
+	};
+	const idValidationMessage = () => {
+		switch (state.validationFailure) {
+			case "idTypeMismatch": return t("videoSelfie.idValidation.idTypeMismatch");
+			case "idScanFailed": return t("notifications.compareID.scanFailed");
+			default: return t("common.tryAgain");
+		}
+	};
+	const idFeedback = () => {
+		if (state.status === "validationFeedback" && state.validationFailure !== "selfieVerificationFailed") return {
+			variant: "error",
+			message: idValidationMessage()
+		};
+		if (detectionStatus === "capturing") return {
+			variant: "processing",
+			message: t("videoSelfie.processingStep")
+		};
+		if (detectionStatus === "success") return {
+			variant: "success",
+			message: t("videoSelfie.allGood")
+		};
+	};
+	const renderStepUi = () => {
+		if (state.status === "flippingId") return /* @__PURE__ */ u(IdFlipModal, { onComplete: () => manager.nextStep() });
+		return isFrontCamera ? /* @__PURE__ */ u(SelfieMask, {
+			variant: getSelfieVariant(detectionStatus),
+			message: selfieMessage(),
+			onManualCapture: state.manualCaptureAvailable ? () => manager.manualCapture() : void 0
+		}) : /* @__PURE__ */ u(IdMask, {
+			mode: idMode,
+			wrongSide: detectionStatus === "wrongSide",
+			feedback: idFeedback(),
+			orientation: state.orientation ?? "horizontal",
+			onManualCapture: state.manualCaptureAvailable ? () => manager.manualCapture() : void 0
+		});
+	};
+	return /* @__PURE__ */ u(Page, {
+		hideHeader: true,
+		hideFooterBranding: true,
+		className: "IncodeVideoSelfieCapturePage",
+		children: [/* @__PURE__ */ u(Title, {
+			className: "IncodeCaptureVisuallyHidden",
+			children: stepLabel
+		}), /* @__PURE__ */ u(CameraView, {
+			stream: state.stream,
+			mirrored: isFrontCamera,
+			children: /* @__PURE__ */ u("div", {
+				class: "IncodeVideoSelfieOverlay",
+				children: [/* @__PURE__ */ u(StepsHeader, {
+					steps,
+					currentIndex: state.stepIndex
+				}), renderStepUi()]
+			})
+		})]
+	});
+};
+/**
+* ID + Selfie flow UI component (PoC). Runs the regular ID + selfie capture
+* pipeline behind the Video Selfie continuous-camera UX.
+*
+* Config is resolved from the active session's FLOW configuration (the same
+* dashboard config the regular ID and SELFIE modules read — steps, attempts,
+* tutorial, selfie validations); any `config` prop values win over the
+* flow-derived ones.
+*
+* @see {@link createIdSelfieFlowManager} for headless usage.
+*/
+var IdSelfieFlow = ({ config, onFinish, onError }) => {
+	const [resolved, setResolved] = d({ status: "loading" });
+	y(() => {
+		const abortController = new AbortController();
+		setResolved({ status: "loading" });
+		resolveIdSelfieFlowConfig({
+			config,
+			signal: abortController.signal
+		}).then((resolvedConfig) => {
+			if (!abortController.signal.aborted) setResolved({
+				status: "ready",
+				config: resolvedConfig
+			});
+		}).catch((error) => {
+			if (!abortController.signal.aborted) setResolved({
+				status: "error",
+				error: String(error)
+			});
+		});
+		return () => abortController.abort();
+	}, [config]);
+	return /* @__PURE__ */ u(IncodeComponent, { children: [
+		resolved.status === "loading" && /* @__PURE__ */ u(TransitionSpinner, {}),
+		resolved.status === "error" && /* @__PURE__ */ u(TerminalErrorPage, { message: resolved.error }),
+		resolved.status === "ready" && /* @__PURE__ */ u(IdSelfieFlowContent, {
+			config: resolved.config,
+			onFinish,
+			onError
+		})
+	] });
+};
+registerIncodeModuleElement(IdSelfieFlow, "incode-id-selfie-flow");
+//#endregion
+export { IdSelfieFlow };