@incodetech/web 2.0.1 → 2.1.0-rc.1

package/dist/email/email.es.js

@@ -1,87 +1,220 @@
-import { n as e } from "../i18n-9s4OSqwi.js";
-import { _ as t, p as n, v as r } from "../vendor-preact-D6SntenC.js";
-import { o as i } from "../hooks-BVnGysT7.js";
-import { t as a } from "../incodeComponent-C1o4M0ZK.js";
-import { r as o } from "../loadingIcon-BN5YRQUb.js";
-import { t as s } from "../page-C1yT4DLb.js";
-import { t as c } from "../button-DcCUEn2n.js";
-import { t as l } from "../otpInput-DqRA_egd.js";
-import { t as u } from "../incodeModule-BqCjVgEI.js";
-import { t as d } from "../emailInput-DppGf9pv.js";
-import { createEmailManager as f } from "@incodetech/core/email";
+import { n as useTranslation } from "../i18n-CoCO2ZuN.js";
+import { _ as y, p as d, v as u } from "../vendor-preact-DThS2ZQ_.js";
+import { a as isTerminalModuleState, c as useManager, o as useModuleTerminalCallbacks } from "../hooks-Da_yP_Dr.js";
+import { t as IncodeComponent } from "../incodeComponent-wfnHlnXx.js";
+import { r as Spacer } from "../loadingIcon-B0ysgiNq.js";
+import { t as Page } from "../page-DxGQj7Gk.js";
+import { t as Button } from "../button-CM_hgyIP.js";
+import { t as OtpInput } from "../otpInput-_JmtVwa0.js";
+import { t as registerIncodeModuleElement } from "../incodeModule-BUDoTwT9.js";
+import { t as EmailInput } from "../emailInput-KZmhjOdZ.js";
+import { createEmailManager } from "@incodetech/core/email";
 //#region src/modules/email/email.tsx
-function p(e) {
-	return e === "serverError" ? "email.serverError" : e;
+/**
+* @module @incodetech/ui/email
+*
+* Email verification UI component for the Incode Web SDK.
+* Provides a complete, ready-to-use email verification experience
+* with email input and OTP verification.
+*
+* ## UI Usage
+*
+* The Email component can be used as a React/Preact component or as a
+* Web Component (`<incode-email>`).
+*
+* @example React/Preact component usage
+* ```tsx
+* import { Email } from '@incodetech/ui/email';
+* import { setup } from '@incodetech/core';
+*
+* // Configure the SDK first
+* setup({ apiURL: 'https://api.example.com', token: 'your-token' });
+*
+* function App() {
+*   const config = {
+*     otpVerification: true,
+*     otpExpirationInMinutes: 5,
+*     prefill: false,
+*   };
+*
+*   return (
+*     <Email
+*       config={config}
+*       onFinish={() => console.log('Email verified!')}
+*       onError={(error) => console.error('Error:', error)}
+*     />
+*   );
+* }
+* ```
+*
+* @example Web Component usage
+* ```html
+* <!-- Include the script -->
+* <script type="module">
+*   import '@incodetech/ui/email';
+*   import { setup } from '@incodetech/core';
+*
+*   setup({ apiURL: 'https://api.example.com', token: 'your-token' });
+*
+*   const email = document.querySelector('incode-email');
+*   email.config = {
+*     otpVerification: true,
+*     otpExpirationInMinutes: 5,
+*     prefill: false,
+*   };
+*   email.onFinish = () => console.log('Email verified!');
+*   email.onError = (error) => console.error('Error:', error);
+* <\/script>
+*
+* <incode-email></incode-email>
+* ```
+*
+* ## Styling
+*
+* The component uses CSS custom properties (variables) for theming.
+* Override these variables to customize the appearance:
+*
+* ```css
+* :root {
+*   --button-primary-surface-default: #0066cc;
+*   --input-border-default: #cccccc;
+*   --text-title: #333333;
+* }
+* ```
+*
+* ## Headless Alternative
+*
+* For complete control over the UI, use the headless `createEmailManager`
+* from `@incodetech/core/email` instead. See the core module documentation.
+*/
+function getOtpErrorTranslationKey(error) {
+	if (error === "serverError") return "email.serverError";
+	return error;
 }
-function m(e) {
-	return e === "invalidEmail" ? "verification.errors.emailInvalid" : e === "serverError" ? "email.serverError" : e;
+function getEmailErrorTranslationKey(error) {
+	if (error === "invalidEmail") return "verification.errors.emailInvalid";
+	if (error === "serverError") return "email.serverError";
+	return error;
 }
-var h = ({ config: a, manager: u, onFinish: h, onError: g }) => {
-	let { t: _ } = e(), [v, y] = i(() => {
-		if (u) return u;
-		if (!a) throw Error("Email config is required");
-		return f({ config: a });
-	}, { manageLifecycle: !u }), [b, x] = n(""), [S, C] = n(!1), [w, T] = n(!1), [E, D] = n(!1), O = v.status === "inputting" ? v.prefilledEmail ?? "" : "";
-	if (t(() => {
-		if (O) {
-			let e = /^[^\s@]+@[^\s@]+\.[^\s@]{2,}$/.test(O.trim());
-			x(O.trim()), C(e), y.setEmail(O.trim(), e);
+var EmailContent = ({ config, manager: externalManager, onFinish, onError }) => {
+	const { t } = useTranslation();
+	const [state, manager] = useManager(() => {
+		if (externalManager) return externalManager;
+		if (!config) throw new Error("Email config is required");
+		return createEmailManager({ config });
+	}, { manageLifecycle: !externalManager });
+	const [emailValue, setEmailValue] = d("");
+	useModuleTerminalCallbacks({
+		status: state.status,
+		onFinish,
+		onError,
+		error: state.status === "error" ? state.error : void 0
+	});
+	const prefilledEmail = state.status === "inputting" ? state.prefilledEmail ?? "" : "";
+	y(() => {
+		if (prefilledEmail) {
+			const isValid = /^[^\s@]+@[^\s@]+\.[^\s@]{2,}$/.test(prefilledEmail.trim());
+			setEmailValue(prefilledEmail.trim());
+			manager.setEmail(prefilledEmail.trim(), isValid);
 		}
-	}, [O, y]), v.status === "idle" || v.status === "loadingPrefill" || v.status === "inputting" || v.status === "submitting" || v.status === "sendingInitialOtp") {
-		let e = v.status === "idle" || v.status === "loadingPrefill" || v.status === "submitting" || v.status === "sendingInitialOtp", t = v.status === "inputting" && v.emailError ? _(m(v.emailError)) : void 0, n = v.status === "inputting" && w && E && !S ? _("verification.errors.emailInvalid") : void 0, i = t ?? n, a = !S || t !== void 0;
-		return /* @__PURE__ */ r(s, {
+	}, [prefilledEmail, manager]);
+	if (state.status === "idle" || state.status === "loadingPrefill" || state.status === "inputting" || state.status === "submitting" || state.status === "sendingInitialOtp") {
+		const isLoading = state.status === "idle" || state.status === "loadingPrefill" || state.status === "submitting" || state.status === "sendingInitialOtp";
+		const serverEmailError = state.status === "inputting" && state.emailError ? t(getEmailErrorTranslationKey(state.emailError)) : void 0;
+		const clientEmailError = state.status === "inputting" && state.validationErrors?.email ? t(getEmailErrorTranslationKey(state.validationErrors.email)) : void 0;
+		const emailError = serverEmailError ?? clientEmailError;
+		const isValid = state.status === "inputting" ? state.isValid : true;
+		return /* @__PURE__ */ u(Page, {
 			className: "IncodeEmailPage",
-			title: _("email.verify"),
-			subtitle: _("email.willSendCode"),
+			title: t("email.verify"),
+			subtitle: t("email.willSendCode"),
 			children: [
-				/* @__PURE__ */ r(d, {
-					value: b,
-					emailError: i,
-					disabled: e,
-					required: !0,
-					onEmailChange: (e, t) => {
-						y.setEmail(e, t), x(e), T(!0), D(!1), C(t);
+				/* @__PURE__ */ u(EmailInput, {
+					value: emailValue,
+					emailError,
+					disabled: isLoading,
+					required: true,
+					onEmailChange: (email, isValid) => {
+						manager.setEmail(email, isValid);
+						setEmailValue(email);
 					},
 					onBlur: () => {
-						D(!0);
+						manager.validateEmail();
 					}
 				}),
-				/* @__PURE__ */ r(o, {}),
-				/* @__PURE__ */ r(c, {
-					onClick: () => y.submit(),
-					disabled: a,
-					isLoading: e,
+				/* @__PURE__ */ u(Spacer, {}),
+				/* @__PURE__ */ u(Button, {
+					onClick: () => manager.submit(),
+					disabled: !isValid,
+					isLoading,
 					"data-testid": "email-submit",
-					children: _("common.continue")
+					children: t("common.continue")
 				})
 			]
 		}, "email-input");
 	}
-	if (v.status === "awaitingOtp" || v.status === "verifyingOtp" || v.status === "otpError" || v.status === "resendingOtp") {
-		let e = v.status === "verifyingOtp", t = v.status === "otpError", n = v.status === "awaitingOtp", i = v.status === "resendingOtp", a = n || t || e;
-		return /* @__PURE__ */ r(s, {
+	if (state.status === "awaitingOtp" || state.status === "verifyingOtp" || state.status === "otpError" || state.status === "resendingOtp") {
+		const isVerifying = state.status === "verifyingOtp";
+		const hasOtpError = state.status === "otpError";
+		const isAwaitingOtp = state.status === "awaitingOtp";
+		const isResending = state.status === "resendingOtp";
+		const showResendCountdown = isAwaitingOtp || hasOtpError || isVerifying;
+		return /* @__PURE__ */ u(Page, {
 			className: "IncodeEmailPage IncodeEmailOtpPage",
-			title: _("otp.enterCodeEmail"),
-			children: /* @__PURE__ */ r(l, {
-				resendTimer: a ? v.resendTimer : 0,
-				canResend: a ? v.canResend : !1,
-				error: t ? _(p(v.otpError)) : void 0,
-				isLoading: e,
-				disabled: i || e,
-				onSubmit: (e) => y.submitOtp(e),
-				onResend: () => y.resendOtp(),
-				onBack: () => y.back(),
+			title: t("otp.enterCodeEmail"),
+			children: /* @__PURE__ */ u(OtpInput, {
+				value: state.otpCode,
+				otpLength: state.otpLength,
+				resendTimer: showResendCountdown ? state.resendTimer : 0,
+				canResend: showResendCountdown ? state.canResend : false,
+				error: hasOtpError ? t(getOtpErrorTranslationKey(state.otpError)) : void 0,
+				validationError: "otpValidationErrors" in state && state.otpValidationErrors?.otp ? t("otp.incompleteCode", { length: state.otpLength }) : void 0,
+				isValid: "isOtpValid" in state ? state.isOtpValid : true,
+				isLoading: isVerifying,
+				disabled: isResending || isVerifying,
+				onSubmit: (code) => manager.submitOtp(code),
+				onChange: (code) => manager.setOtpCode(code),
+				onValidate: () => manager.validateOtp(),
+				onResend: () => manager.resendOtp(),
+				onBack: () => manager.back(),
 				backLinkText: "otp.changeEmail"
 			})
 		}, "email-otp");
 	}
-	return v.status === "finished" ? (h?.(), null) : (v.status === "error" && g?.(v.error), null);
-}, g = ({ config: e, manager: t, onFinish: n, onError: i }) => /* @__PURE__ */ r(a, { children: e || t ? /* @__PURE__ */ r(h, {
-	config: e,
-	manager: t,
-	onFinish: n,
-	onError: i
-}) : null });
-u(g, "incode-email");
+	if (isTerminalModuleState(state)) return null;
+	return null;
+};
+/**
+* Email verification UI component.
+*
+* Provides a complete email verification experience including:
+* - Email address input with validation
+* - OTP code entry with resend functionality
+* - Loading states and error handling
+*
+* @example Basic usage
+* ```tsx
+* <Email
+*   config={{
+*     otpVerification: true,
+*     otpExpirationInMinutes: 5,
+*     prefill: false,
+*   }}
+*   onFinish={() => router.push('/next-step')}
+*   onError={(err) => toast.error(err)}
+* />
+* ```
+*
+* @see {@link createEmailManager} for headless usage
+*/
+var Email = ({ config, manager, onFinish, onError }) => {
+	return /* @__PURE__ */ u(IncodeComponent, { children: config || manager ? /* @__PURE__ */ u(EmailContent, {
+		config,
+		manager,
+		onFinish,
+		onError
+	}) : null });
+};
+registerIncodeModuleElement(Email, "incode-email");
 //#endregion
-export { g as Email };
+export { Email };

package/dist/emailInput-KZmhjOdZ.js

@@ -0,0 +1,39 @@
+import { n as useTranslation } from "./i18n-CoCO2ZuN.js";
+import { v as u } from "./vendor-preact-DThS2ZQ_.js";
+import "./extensibility-Cs3KQQdC.js";
+import { t as InputComposed } from "./inputComposed-CQ4AsvZg.js";
+//#region src/modules/email/emailInput.tsx
+var EMAIL_REGEX = /^[^\s@]+@[^\s@]+\.[^\s@]{2,}$/;
+var EmailInput = ({ value, emailError, label, labelHint, disabled = false, required = false, onEmailChange, onBlur }) => {
+	const { t } = useTranslation();
+	const handleEmailChange = (e) => {
+		const trimmed = e.target.value.trim();
+		onEmailChange(trimmed, trimmed.length > 0 && EMAIL_REGEX.test(trimmed));
+	};
+	return /* @__PURE__ */ u("div", {
+		class: "IncodeEmailInput",
+		children: /* @__PURE__ */ u("div", {
+			class: "IncodeEmailInputContainer",
+			onFocusOut: onBlur,
+			children: /* @__PURE__ */ u(InputComposed, {
+				id: "email-input",
+				type: "email",
+				value,
+				onInput: handleEmailChange,
+				placeholder: t("email.placeholder"),
+				disabled,
+				required,
+				label,
+				labelHint,
+				"data-testid": "email-input",
+				"aria-label": !label ? "Email address" : void 0,
+				"aria-invalid": emailError ? "true" : void 0,
+				autocomplete: "email",
+				error: emailError,
+				showErrorIcon: true
+			})
+		})
+	});
+};
+//#endregion
+export { EmailInput as t };

package/dist/errorIcon-DJRZpd8j.js

@@ -0,0 +1,26 @@
+import { v as u } from "./vendor-preact-DThS2ZQ_.js";
+//#region src/shared/icons/errorIcon.tsx
+var ErrorIcon = ({ size = 32 }) => {
+	return /* @__PURE__ */ u("svg", {
+		xmlns: "http://www.w3.org/2000/svg",
+		width: size,
+		height: size,
+		viewBox: "0 0 64 64",
+		fill: "none",
+		class: "IncodeErrorIcon",
+		"aria-hidden": "true",
+		children: [/* @__PURE__ */ u("path", {
+			"fill-rule": "evenodd",
+			"clip-rule": "evenodd",
+			d: "M32 6.66669C18.032 6.66669 6.66669 18.0294 6.66669 32C6.66669 45.968 18.032 57.3334 32 57.3334C45.968 57.3334 57.3334 45.968 57.3334 32C57.3334 18.0294 45.968 6.66669 32 6.66669Z",
+			fill: "var(--icon-status-negative)"
+		}), /* @__PURE__ */ u("path", {
+			"fill-rule": "evenodd",
+			"clip-rule": "evenodd",
+			d: "M39.6426 39.6368C39.2533 40.0261 38.7413 40.2235 38.2293 40.2235C37.7146 40.2235 37.2053 40.0261 36.8133 39.6368L31.9973 34.8181L27.1946 39.6208C26.4133 40.4021 25.1467 40.4021 24.3653 39.6208C23.5867 38.8395 23.5867 37.5755 24.3653 36.7941L29.168 31.9915L24.3627 27.1835C23.5813 26.4021 23.5813 25.1381 24.3627 24.3568C25.144 23.5755 26.408 23.5755 27.1893 24.3568L31.9946 29.1621L36.8 24.3595C37.5813 23.5781 38.8453 23.5781 39.6266 24.3595C40.408 25.1381 40.408 26.4048 39.6266 27.1861L34.824 31.9915L39.6426 36.8075C40.424 37.5888 40.424 38.8555 39.6426 39.6368Z",
+			fill: "var(--icon-neutral-0)"
+		})]
+	});
+};
+//#endregion
+export { ErrorIcon as t };

package/dist/expiredId-Q1t6aVpk.js

@@ -0,0 +1,85 @@
+import { n as useTranslation } from "./i18n-CoCO2ZuN.js";
+import { _ as y, l as A, v as u } from "./vendor-preact-DThS2ZQ_.js";
+import { r as Spacer } from "./loadingIcon-B0ysgiNq.js";
+import { t as Page } from "./page-DxGQj7Gk.js";
+import { t as Title } from "./typography-YLgHHuao.js";
+import { t as Button } from "./button-CM_hgyIP.js";
+//#region src/shared/icons/redStrikeIcon.tsx
+var RedStrikeIcon = ({ className, ...rest }) => /* @__PURE__ */ u("svg", {
+	class: className,
+	width: "33",
+	height: "32",
+	viewBox: "0 0 33 32",
+	fill: "none",
+	xmlns: "http://www.w3.org/2000/svg",
+	"aria-hidden": "true",
+	...rest,
+	children: /* @__PURE__ */ u("path", {
+		d: "M16.5 0C25.3219 0 32.5 7.17642 32.5 16C32.5 24.8219 25.3219 32 16.5 32C7.67811 32 0.5 24.8219 0.5 16C0.5 7.17642 7.67811 0 16.5 0ZM13.6553 11.3701C13.1618 10.8767 12.3636 10.8767 11.8701 11.3701C11.3767 11.8636 11.3767 12.6618 11.8701 13.1553L14.9053 16.1924L11.8721 19.2256C11.3803 19.7191 11.3803 20.5173 11.8721 21.0107C12.3656 21.504 13.1658 21.5041 13.6592 21.0107L16.6924 17.9775L19.7334 21.0205C19.981 21.2664 20.3029 21.3916 20.6279 21.3916C20.9513 21.3916 21.2746 21.2664 21.5205 21.0205C22.014 20.527 22.014 19.7269 21.5205 19.2334L18.4775 16.1924L21.5107 13.1572C22.0041 12.6638 22.004 11.8639 21.5107 11.3721C21.0173 10.8786 20.2191 10.8786 19.7256 11.3721L16.6904 14.4053L13.6553 11.3701Z",
+		fill: "#E71111"
+	})
+});
+//#endregion
+//#region src/shared/expiredId/expiredId.tsx
+/**
+* Shown when the backend reports `isDocumentExpired: true`. Exactly one of
+* `onRetry` / `onContinue` should be provided; if both are passed, retry
+* takes precedence.
+*
+* Visual contract mirrors the SDK 1 UXv2 Expired ID screen (red strike icon,
+* centered title + subtitle, full-width primary button anchored near the
+* bottom). The optional attempts counter (added by core PR #439 / SDK 1
+* `IdError` parity) renders only when `attemptsRemaining` is supplied.
+*/
+var ExpiredId = ({ onRetry, onContinue, attemptsRemaining }) => {
+	const { t } = useTranslation();
+	const titleRef = A(null);
+	y(() => {
+		titleRef.current?.focus();
+	}, []);
+	return /* @__PURE__ */ u(Page, {
+		hideHeader: true,
+		hideFooterBranding: true,
+		className: "IncodeIdExpiredPage",
+		"data-testid": "expired-id",
+		children: [/* @__PURE__ */ u("div", {
+			class: "IncodeIdExpiredContent",
+			role: "alert",
+			children: [
+				/* @__PURE__ */ u(RedStrikeIcon, { className: "IncodeIdExpiredIcon" }),
+				/* @__PURE__ */ u(Title, {
+					ref: titleRef,
+					tabIndex: -1,
+					className: "IncodeIdExpiredTitle",
+					children: t("idv2.capture.notifications.expiredId")
+				}),
+				/* @__PURE__ */ u(Spacer, { size: 12 }),
+				/* @__PURE__ */ u("p", {
+					class: "IncodeIdExpiredSubtitle",
+					children: t("idv2.capture.expiredId.pleaseTryWithADifferentId")
+				}),
+				/* @__PURE__ */ u(Spacer, { size: 80 }),
+				attemptsRemaining !== void 0 ? /* @__PURE__ */ u("p", {
+					class: "IncodeIdExpiredAttemptsCounter",
+					"data-testid": "expired-id-attempts-counter",
+					children: `${attemptsRemaining} ${t("idv2.capture.processing.attemptsRemainingLabel")}`
+				}) : null
+			]
+		}), /* @__PURE__ */ u("div", {
+			class: "IncodeIdExpiredButtonContainer",
+			children: onRetry ? /* @__PURE__ */ u(Button, {
+				variant: "primary",
+				onClick: onRetry,
+				"data-testid": "expired-id-retry",
+				children: t("idv2.capture.processing.tryAgain")
+			}) : onContinue ? /* @__PURE__ */ u(Button, {
+				variant: "primary",
+				onClick: onContinue,
+				"data-testid": "expired-id-continue",
+				children: t("idv2.capture.processing.continue")
+			}) : null
+		})]
+	});
+};
+//#endregion
+export { RedStrikeIcon as n, ExpiredId as t };