@incodetech/web 2.1.1 → 2.2.0-rc.0

package/dist/manualCaptureButton-t_oIol88.js

@@ -0,0 +1,300 @@
+import { i as useTranslation } from "./uiConfig-B5ASPUL4.js";
+import { S as k, _ as y, a as D, h as q, l as A, p as d, v as u } from "./vendor-preact-mvwZ8mJj.js";
+import { o as Lottie, t as Spacer, u as cn } from "./spacer-CDlQd12V.js";
+import { r as Button } from "./incode-logo-rGFjZHqi.js";
+import { h as CaptureButtonIcon } from "./icons--ezYG2Fb.js";
+//#region src/shared/cameraOverlay/cameraFrame.tsx
+var CameraFrame = D(({ variant, aspectRatio, orientation = "horizontal", frameState = "idle", className, children }, ref) => {
+	const stateClass = `IncodeCameraFrame${frameState.charAt(0).toUpperCase()}${frameState.slice(1)}`;
+	return /* @__PURE__ */ u("div", {
+		ref,
+		class: cn("IncodeCameraFrame", variant === "fill" && "IncodeCameraFrameFill", variant === "locked" && "IncodeCameraFrameLocked", variant === "locked" && orientation === "horizontal" && "IncodeCameraFrameHorizontal", variant === "locked" && orientation === "vertical" && "IncodeCameraFrameVertical", stateClass, className),
+		style: aspectRatio ? { aspectRatio } : void 0,
+		"aria-hidden": true,
+		children
+	});
+});
+//#endregion
+//#region src/shared/cameraOverlay/cameraView.tsx
+var CameraView = ({ stream, children, videoRef: externalVideoRef, onPlaying, className, mirrored, ...rest }) => {
+	const internalVideoRef = A(null);
+	const setVideoRef = (el) => {
+		internalVideoRef.current = el;
+		if (typeof externalVideoRef === "function") externalVideoRef(el);
+		else if (externalVideoRef) externalVideoRef.current = el;
+	};
+	y(() => {
+		if (internalVideoRef.current && stream) {
+			internalVideoRef.current.srcObject = stream;
+			internalVideoRef.current.play().catch(() => {});
+		}
+	}, [stream]);
+	return /* @__PURE__ */ u("div", {
+		class: cn("IncodeCameraView", className),
+		...rest,
+		children: [/* @__PURE__ */ u("div", {
+			class: "IncodeCameraViewVideo",
+			children: /* @__PURE__ */ u("video", {
+				ref: setVideoRef,
+				autoplay: true,
+				playsInline: true,
+				muted: true,
+				onPlaying,
+				"aria-hidden": "true",
+				class: cn("IncodeCameraViewVideoElement", mirrored && "IncodeCameraViewVideoMirrored")
+			})
+		}), children]
+	});
+};
+//#endregion
+//#region src/modules/id/capture/useCaptureNotification.ts
+var animationCache = /* @__PURE__ */ new Map();
+var preloadPromise = null;
+var animationLoaders = {
+	blur: () => import("./blurdevicelottie-8BbophdM.js"),
+	glare: () => import("./glaredevicelottie-Cnvah0kz.js"),
+	align: () => import("./aligndevicelottie-CfoZ5Uus.js"),
+	front: () => import("./frontdevicelottie-CFcahVLk.js"),
+	back: () => import("./backdevicelottie-yKkczgFy.js")
+};
+function startPreload() {
+	preloadPromise ??= Promise.all([
+		animationLoaders.blur(),
+		animationLoaders.glare(),
+		animationLoaders.align(),
+		animationLoaders.front(),
+		animationLoaders.back()
+	]).then(([blur, glare, align, front, back]) => {
+		animationCache.set("blur", blur.default);
+		animationCache.set("glare", glare.default);
+		animationCache.set("align", align.default);
+		animationCache.set("front", front.default);
+		animationCache.set("back", back.default);
+	}).catch(() => {});
+	return preloadPromise;
+}
+function preloadCaptureAnimations() {
+	startPreload();
+}
+function usePreloadCaptureAnimations() {
+	y(() => {
+		preloadCaptureAnimations();
+	}, []);
+}
+function useCaptureNotification(detectionStatus, mode) {
+	const { t } = useTranslation();
+	const [, forceUpdate] = d(0);
+	y(() => {
+		let mounted = true;
+		startPreload().then(() => {
+			if (mounted) forceUpdate((n) => n + 1);
+		});
+		return () => {
+			mounted = false;
+		};
+	}, []);
+	if (detectionStatus === "blur") return {
+		title: t("idv2.capture.notifications.blur.title"),
+		description: t("idv2.capture.notifications.blur.description"),
+		animationData: animationCache.get("blur") ?? null
+	};
+	if (detectionStatus === "glare") return {
+		title: t("idv2.capture.notifications.glare.title"),
+		description: t("idv2.capture.notifications.glare.description"),
+		animationData: animationCache.get("glare") ?? null
+	};
+	if (detectionStatus === "farAway") return {
+		title: t("idv2.capture.notifications.notAligned.title"),
+		description: t("idv2.capture.notifications.notAligned.description"),
+		animationData: animationCache.get("align") ?? null
+	};
+	if (detectionStatus === "wrongSide") {
+		const isBack = mode === "back";
+		return {
+			title: isBack ? t("idv2.capture.notifications.showBack.title") : t("idv2.capture.notifications.showFront.title"),
+			description: isBack ? t("idv2.capture.notifications.showBack.description") : t("idv2.capture.notifications.showFront.description"),
+			animationData: animationCache.get(isBack ? "back" : "front") ?? null
+		};
+	}
+	return null;
+}
+//#endregion
+//#region src/modules/id/capture/captureNotification.tsx
+var CaptureNotification = ({ detectionStatus, mode, isCapturing }) => {
+	const { t } = useTranslation();
+	const notification = useCaptureNotification(detectionStatus, mode);
+	const liveRef = A(null);
+	const lastAnnouncedRef = A({
+		message: "",
+		at: 0
+	});
+	const prevDetectionStatusRef = A(detectionStatus);
+	const hasAnnouncedInstructionsRef = A(false);
+	const clearTimerRef = A();
+	const outerTimerRef = A();
+	const isIdle = detectionStatus === "detecting" || detectionStatus === "idNotDetected" || detectionStatus === "manualCapture";
+	const isManualCapture = detectionStatus === "manualCapture";
+	const isWrongSide = detectionStatus === "wrongSide";
+	const isFarAway = detectionStatus === "farAway";
+	const isGlare = detectionStatus === "glare";
+	const isBlur = detectionStatus === "blur";
+	const announce = q((message) => {
+		const now = Date.now();
+		const last = lastAnnouncedRef.current;
+		if (message === last.message && now - last.at < 200) return;
+		lastAnnouncedRef.current = {
+			message,
+			at: now
+		};
+		const node = liveRef.current;
+		if (!node) return;
+		clearTimeout(clearTimerRef.current);
+		node.textContent = "";
+		outerTimerRef.current = setTimeout(() => {
+			node.textContent = message;
+			clearTimerRef.current = setTimeout(() => {
+				node.textContent = "";
+			}, 3e3);
+		}, 50);
+	}, []);
+	const getIdleMessage = q(() => {
+		if (mode === "passport") return t("idv2.capture.fillFramePassport");
+		if (mode === "back") return t("idv2.capture.fillFrameBack");
+		return t("idv2.capture.fillFrameFront");
+	}, [mode, t]);
+	y(() => {
+		if (isManualCapture) {
+			hasAnnouncedInstructionsRef.current = false;
+			return;
+		}
+		if (hasAnnouncedInstructionsRef.current) return;
+		if (!isIdle) return;
+		const timer = setTimeout(() => {
+			hasAnnouncedInstructionsRef.current = true;
+			announce(getIdleMessage());
+		}, 500);
+		return () => clearTimeout(timer);
+	}, [
+		isIdle,
+		isManualCapture,
+		announce,
+		getIdleMessage
+	]);
+	y(() => {
+		const prev = prevDetectionStatusRef.current;
+		prevDetectionStatusRef.current = detectionStatus;
+		if (prev !== "manualCapture" && isManualCapture) announce(t("idv2.capture.manualCapture.modeSwitchAriaAnnouncement"));
+	}, [
+		announce,
+		detectionStatus,
+		isManualCapture,
+		t
+	]);
+	y(() => {
+		if (isCapturing) return;
+		if (isWrongSide) {
+			const baseKey = mode === "front" || mode === "passport" ? "idv2.capture.notifications.showFront" : "idv2.capture.notifications.showBack";
+			announce(`${t(`${baseKey}.title`)}. ${t(`${baseKey}.description`)}`);
+			return;
+		}
+		if (isFarAway) {
+			announce(`${t("idv2.capture.notifications.notAligned.title")}.`);
+			return;
+		}
+		if (isGlare) {
+			announce(`${t("idv2.capture.notifications.glare.title")}.`);
+			return;
+		}
+		if (isBlur) {
+			announce(`${t("idv2.capture.notifications.blur.title")}.`);
+			return;
+		}
+		if (isIdle && hasAnnouncedInstructionsRef.current) announce(getIdleMessage());
+	}, [
+		announce,
+		isBlur,
+		isCapturing,
+		isFarAway,
+		isGlare,
+		isIdle,
+		isWrongSide,
+		mode,
+		t,
+		getIdleMessage
+	]);
+	y(() => {
+		return () => {
+			clearTimeout(outerTimerRef.current);
+			clearTimeout(clearTimerRef.current);
+		};
+	}, []);
+	return /* @__PURE__ */ u(k, { children: [/* @__PURE__ */ u("div", {
+		ref: liveRef,
+		class: "IncodeSrOnly",
+		"aria-live": "assertive",
+		"aria-atomic": "true"
+	}), notification ? /* @__PURE__ */ u("div", {
+		class: cn("IncodeIdCaptureNotification"),
+		"aria-hidden": "true",
+		children: /* @__PURE__ */ u("div", {
+			class: "IncodeIdCaptureNotificationContent",
+			children: [
+				/* @__PURE__ */ u("div", {
+					class: cn("IncodeIdCaptureNotificationText"),
+					children: [/* @__PURE__ */ u("div", {
+						class: "IncodeIdCaptureNotificationTitle",
+						children: notification.title
+					}), notification.description && /* @__PURE__ */ u("div", {
+						class: "IncodeIdCaptureNotificationDescription",
+						children: notification.description
+					})]
+				}),
+				/* @__PURE__ */ u(Spacer, {
+					size: 16,
+					direction: "horizontal"
+				}),
+				notification.animationData && /* @__PURE__ */ u("div", {
+					class: "IncodeIdCaptureNotificationAnimation",
+					children: /* @__PURE__ */ u(Lottie, {
+						animationData: notification.animationData,
+						loop: true,
+						autoStop: true,
+						stopFramePosition: "last"
+					})
+				})
+			]
+		})
+	}) : null] });
+};
+//#endregion
+//#region src/modules/id/capture/manualCaptureButton.tsx
+var ManualCaptureButton = ({ onClick, disabled, isPassport }) => {
+	const { t } = useTranslation();
+	const firstStepKey = isPassport ? "idv2.commonIssues.firstStepPassport" : "idv2.commonIssues.firstStep";
+	return /* @__PURE__ */ u("div", {
+		class: "IncodeIdManualCaptureButton",
+		"data-testid": "manual-capture-button",
+		children: [/* @__PURE__ */ u("div", {
+			class: "IncodeIdManualCaptureTooltipContainer",
+			children: /* @__PURE__ */ u("div", {
+				class: "IncodeIdManualCaptureTooltip",
+				children: /* @__PURE__ */ u("ol", {
+					class: "IncodeIdManualCaptureTooltipList",
+					children: [/* @__PURE__ */ u("li", { children: t(firstStepKey) }), /* @__PURE__ */ u("li", { children: t("idv2.commonIssues.secondStep") })]
+				})
+			})
+		}), /* @__PURE__ */ u("div", {
+			class: "IncodeIdManualCaptureButtonContent",
+			children: /* @__PURE__ */ u(Button, {
+				variant: "link",
+				onClick,
+				disabled,
+				class: "IncodeIdManualCaptureButtonButton",
+				"aria-label": t("manualCapture.ariaLabel"),
+				children: /* @__PURE__ */ u(CaptureButtonIcon, {})
+			})
+		})]
+	});
+};
+//#endregion
+export { CameraView as a, usePreloadCaptureAnimations as i, CaptureNotification as n, CameraFrame as o, preloadCaptureAnimations as r, ManualCaptureButton as t };

package/dist/{modal-OxkFuuiR.js → modal-BjjJFpZu.js}

@@ -1,7 +1,7 @@
-import { b as Q, d as T, f as _, g as x, h as q, l as A, p as d, r as $, v as u } from "./vendor-preact-DThS2ZQ_.js";
-import { n as cn } from "./loadingIcon-B0ysgiNq.js";
-import { o as CloseIcon } from "./icons-CJJbIpBq.js";
-import { a as useModalPortalTarget, i as useModalFocusCapture, n as useModalBodyScrollLock, o as useModalTabCycle, r as useModalEscapeDismiss, t as MODAL_TITLE_ID } from "./modal.hooks-ZrzmHAUa.js";
+import { b as Q, d as T, f as _, g as x, h as q, l as A, p as d, r as $, v as u } from "./vendor-preact-mvwZ8mJj.js";
+import { u as cn } from "./spacer-CDlQd12V.js";
+import { l as CloseIcon } from "./icons--ezYG2Fb.js";
+import { a as useModalPortalTarget, i as useModalFocusCapture, n as useModalBodyScrollLock, o as useModalTabCycle, r as useModalEscapeDismiss, t as MODAL_TITLE_ID } from "./modal.hooks-BvXzNWvY.js";
 //#region src/shared/modal/modal.tsx
 var ModalContext = Q(null);
 function useModalContext() {

package/dist/{modal.hooks-ZrzmHAUa.js → modal.hooks-BvXzNWvY.js}

@@ -1,4 +1,4 @@
-import { _ as y, p as d } from "./vendor-preact-DThS2ZQ_.js";
+import { _ as y, p as d } from "./vendor-preact-mvwZ8mJj.js";
 //#region src/shared/modal/modal.hooks.ts
 var MODAL_SCROLL_LOCK_CLASS = "IncodeModalScrollLock";
 /** `id` of the `Modal.Title` heading; also the dialog's `aria-labelledby`. */

package/dist/{numberedStep-CEb-lFJm.js → numberedStep-DUs77Gy3.js}

@@ -1,4 +1,4 @@
-import { v as u } from "./vendor-preact-DThS2ZQ_.js";
+import { v as u } from "./vendor-preact-mvwZ8mJj.js";
 //#region src/shared/permissions/camera/numberedStep.tsx
 var NumberedStep = ({ number }) => {
 	return /* @__PURE__ */ u("div", {

package/dist/{optionAccessibleLabel-gfF-58Mv.js → optionAccessibleLabel-DgfHD_mx.js}

@@ -1,9 +1,9 @@
-import { n as useTranslation } from "./i18n-CU4xq8qC.js";
-import { _ as y, h as q, l as A, p as d, v as u } from "./vendor-preact-DThS2ZQ_.js";
-import { a as useIsMobileDeviceWidth } from "./hooks-CNu7o-v8.js";
-import { t as InputComposed } from "./inputComposed-C1R2LAa3.js";
-import { i as translateError } from "./radioGroupComposed-DuQxslB2.js";
-import { t as BottomSheet } from "./bottomSheet-CnWbbUAM.js";
+import { i as useTranslation } from "./uiConfig-B5ASPUL4.js";
+import { _ as y, h as q, l as A, p as d, v as u } from "./vendor-preact-mvwZ8mJj.js";
+import { m as useIsMobileDeviceWidth } from "./incodeComponent-K9ZWg302.js";
+import { t as InputComposed } from "./inputComposed-BeROn635.js";
+import { i as translateError } from "./radioGroupComposed-DzNGUbZQ.js";
+import { t as BottomSheet } from "./bottomSheet-Cp8DLulN.js";
 //#region src/shared/addressAutocomplete/addressAutocomplete.tsx
 var AddressAutocomplete = ({ label, value, error, errorParams, suggestions, readonly, required, labelHint, onChange, onSearch, onSelect, onBlur }) => {
 	const { t } = useTranslation();

package/dist/{otpInput-CnDc6pQm.js → otpInput-D5dLXrmC.js}

@@ -1,21 +1,25 @@
-import { n as useTranslation } from "./i18n-CU4xq8qC.js";
-import { _ as y, h as q, l as A, v as u } from "./vendor-preact-DThS2ZQ_.js";
-import { r as Spacer } from "./loadingIcon-B0ysgiNq.js";
-import { t as Button } from "./button-Dz6AsbmF.js";
-import { t as InputComposed } from "./inputComposed-C1R2LAa3.js";
-import "./inputComposed-BaY5q9WM.js";
-//#region src/shared/otpInput/otpInput.tsx
-var formatTimer = (seconds) => {
+import { i as useTranslation } from "./uiConfig-B5ASPUL4.js";
+import { _ as y, h as q, l as A, v as u } from "./vendor-preact-mvwZ8mJj.js";
+import { t as Spacer } from "./spacer-CDlQd12V.js";
+import { r as Button } from "./incode-logo-rGFjZHqi.js";
+import { t as InputComposed } from "./inputComposed-BeROn635.js";
+import "./inputComposed-CADVQW-o.js";
+//#region src/shared/resendTimer.ts
+var formatResendTimer = (seconds) => {
 	return `${Math.floor(seconds / 60)}:${(seconds % 60).toString().padStart(2, "0")}`;
 };
-var normalizeOtp = (value, maxLength) => {
-	return value.replace(/[^a-zA-Z0-9]/g, "").toUpperCase().slice(0, maxLength);
+var DEFAULT_ANNOUNCEMENT_KEYS = {
+	resendAvailable: "otp.resendCodeAvailable",
+	timerStarted: "otp.timerStarted",
+	timerTenSeconds: "otp.timerTenSeconds",
+	timerFiveSeconds: "otp.timerFiveSeconds"
 };
-var OtpInput = ({ value, otpLength, resendTimer, canResend, error, validationError, isValid = true, onSubmit, onChange, onValidate, onResend, onBack, backLinkText = "otp.changePhoneNumber", disabled = false, isLoading = false }) => {
+function useResendTimerAnnouncements({ canResend, resendTimer, disabled = false, i18nKeys }) {
 	const { t } = useTranslation();
-	const inputRef = A(null);
-	const prevCodeLengthRef = A(value.length);
-	const lastSubmittedCodeRef = A(null);
+	const announcementKeys = {
+		...DEFAULT_ANNOUNCEMENT_KEYS,
+		...i18nKeys
+	};
 	const liveRef = A(null);
 	const prevCanResendRef = A(canResend);
 	const hasAnnouncedStartRef = A(false);
@@ -30,15 +34,65 @@ var OtpInput = ({ value, otpLength, resendTimer, canResend, error, validationErr
 		}, 50);
 	}, []);
 	y(() => {
+		return () => clearTimeout(announceTimerRef.current);
+	}, []);
+	y(() => {
+		if (disabled) {
+			prevCanResendRef.current = canResend;
+			return;
+		}
 		const wasUnavailable = !prevCanResendRef.current;
 		prevCanResendRef.current = canResend;
-		if (wasUnavailable && canResend) announce(t("otp.resendCodeAvailable"));
-		return () => clearTimeout(announceTimerRef.current);
+		if (wasUnavailable && canResend) announce(t(announcementKeys.resendAvailable));
 	}, [
 		canResend,
+		disabled,
+		announcementKeys.resendAvailable,
 		announce,
 		t
 	]);
+	y(() => {
+		if (disabled) {
+			hasAnnouncedStartRef.current = false;
+			return;
+		}
+		if (canResend || resendTimer <= 0) {
+			hasAnnouncedStartRef.current = false;
+			return;
+		}
+		if (!hasAnnouncedStartRef.current) {
+			hasAnnouncedStartRef.current = true;
+			announce(t(announcementKeys.timerStarted, { time: String(resendTimer) }));
+			return;
+		}
+		if (resendTimer === 10) announce(t(announcementKeys.timerTenSeconds));
+		else if (resendTimer === 5) announce(t(announcementKeys.timerFiveSeconds));
+	}, [
+		resendTimer,
+		canResend,
+		disabled,
+		announcementKeys.timerStarted,
+		announcementKeys.timerTenSeconds,
+		announcementKeys.timerFiveSeconds,
+		announce,
+		t
+	]);
+	return liveRef;
+}
+//#endregion
+//#region src/shared/otpInput/otpInput.tsx
+var normalizeOtp = (value, maxLength) => {
+	return value.replace(/[^a-zA-Z0-9]/g, "").toUpperCase().slice(0, maxLength);
+};
+var OtpInput = ({ value, otpLength, resendTimer, canResend, error, validationError, isValid = true, onSubmit, onChange, onValidate, onResend, onBack, backLinkText = "otp.changePhoneNumber", disabled = false, isLoading = false }) => {
+	const { t } = useTranslation();
+	const inputRef = A(null);
+	const prevCodeLengthRef = A(value.length);
+	const lastSubmittedCodeRef = A(null);
+	const liveRef = useResendTimerAnnouncements({
+		canResend,
+		resendTimer
+	});
 	y(() => {
 		if (error) {
 			lastSubmittedCodeRef.current = null;
@@ -85,24 +139,6 @@ var OtpInput = ({ value, otpLength, resendTimer, canResend, error, validationErr
 		submitCode(value);
 	};
 	const displayedError = error ?? validationError;
-	y(() => {
-		if (canResend || resendTimer <= 0) {
-			hasAnnouncedStartRef.current = false;
-			return;
-		}
-		if (!hasAnnouncedStartRef.current) {
-			hasAnnouncedStartRef.current = true;
-			announce(t("otp.timerStarted", { time: String(resendTimer) }));
-			return;
-		}
-		if (resendTimer === 10) announce(t("otp.timerTenSeconds"));
-		else if (resendTimer === 5) announce(t("otp.timerFiveSeconds"));
-	}, [
-		resendTimer,
-		canResend,
-		announce,
-		t
-	]);
 	const renderActions = () => {
 		if (!canResend && resendTimer > 0) return /* @__PURE__ */ u("div", {
 			class: "IncodeOtpInputActions",
@@ -110,7 +146,7 @@ var OtpInput = ({ value, otpLength, resendTimer, canResend, error, validationErr
 			children: /* @__PURE__ */ u(Button, {
 				variant: "link",
 				disabled: true,
-				children: t("otp.resendCountdown", { time: formatTimer(resendTimer) })
+				children: t("otp.resendCountdown", { time: formatResendTimer(resendTimer) })
 			})
 		});
 		const handleResend = () => {
@@ -193,4 +229,4 @@ var OtpInput = ({ value, otpLength, resendTimer, canResend, error, validationErr
 	});
 };
 //#endregion
-export { OtpInput as t };
+export { formatResendTimer as n, useResendTimerAnnouncements as r, OtpInput as t };

package/dist/{passport-horizontal-hint-Bj0ZJY0g.js → passport-horizontal-hint-DgnU-8bl.js}

@@ -1,4 +1,4 @@
-import { v as u } from "./vendor-preact-DThS2ZQ_.js";
+import { v as u } from "./vendor-preact-mvwZ8mJj.js";
 //#region src/modules/id/capture/assets/hints/passport-horizontal-hint.svg?react
 var SvgPassportHorizontalHint = (props) => /* @__PURE__ */ u("svg", {
 	xmlns: "http://www.w3.org/2000/svg",

package/dist/{passport-vertical-hint-Dfk77xUJ.js → passport-vertical-hint-Dd2Wknw7.js}

@@ -1,4 +1,4 @@
-import { v as u } from "./vendor-preact-DThS2ZQ_.js";
+import { v as u } from "./vendor-preact-mvwZ8mJj.js";
 //#region src/modules/id/capture/assets/hints/passport-vertical-hint.svg?react
 var SvgPassportVerticalHint = (props) => /* @__PURE__ */ u("svg", {
 	xmlns: "http://www.w3.org/2000/svg",

package/dist/{pdf-BqtJTlor.js → pdf-BUoY_2gv.js}

@@ -1,4 +1,4 @@
-import { t as _defineProperty } from "./defineProperty-Qjefk7Uf.js";
+import { t as _defineProperty } from "./defineProperty-BbpBna-2.js";
 //#region \0@oxc-project+runtime@0.122.0/helpers/assertClassBrand.js
 function _assertClassBrand(e, t, n) {
 	if ("function" == typeof e ? e === t : e.has(t)) return arguments.length < 3 ? t : n;

package/dist/pdfViewer-CZb6obcZ.js

@@ -0,0 +1,2 @@
+import { t as PdfViewer } from "./pdfViewer-vud1VZv6.js";
+export { PdfViewer };