@incodetech/web 2.0.1-rc.0 → 2.1.0-rc.0

package/dist/identity-reuse/identity-reuse.es.js

@@ -1,198 +1,327 @@
-import { n as e } from "../i18n-9s4OSqwi.js";
-import { _ as t, v as n } from "../vendor-preact-D6SntenC.js";
-import { o as r } from "../hooks-BVnGysT7.js";
-import { t as i } from "../incodeComponent-C1o4M0ZK.js";
-import { t as a } from "../page-C1yT4DLb.js";
-import { t as o } from "../spinner-CKnjVHxw.js";
-import { t as s } from "../button-DcCUEn2n.js";
-import { t as c } from "../incodeModule-BqCjVgEI.js";
-import { createIdentityReuseManager as l } from "@incodetech/core/identity-reuse";
+import { n as useTranslation } from "../i18n-CoCO2ZuN.js";
+import { _ as y, v as u } from "../vendor-preact-DThS2ZQ_.js";
+import { c as useManager, o as useModuleTerminalCallbacks } from "../hooks-Da_yP_Dr.js";
+import { t as IncodeComponent } from "../incodeComponent-wfnHlnXx.js";
+import { t as Page } from "../page-DxGQj7Gk.js";
+import { t as Spinner } from "../spinner-D8a_2LvW.js";
+import { t as Button } from "../button-CM_hgyIP.js";
+import { t as registerIncodeModuleElement } from "../incodeModule-BUDoTwT9.js";
+import { SCAN_NEW_DOCUMENT, createIdentityReuseManager } from "@incodetech/core/identity-reuse";
 //#region src/modules/identity-reuse/identity-reuse.tsx
-var u = ({ name: e }) => /* @__PURE__ */ n("div", {
-	class: "IncodeIdentityReuseCircle",
-	children: /* @__PURE__ */ n("span", {
-		class: "IncodeIdentityReuseCircleText",
-		children: e
-	})
-}), d = () => /* @__PURE__ */ n("svg", {
-	class: "IncodeIdentityReuseArrow",
-	viewBox: "0 0 24 24",
-	fill: "none",
+/**
+* ISO 3166-1 alpha-3 → alpha-2 mapping for countries the SDK supports.
+* The identity-reuse backend returns alpha-3 codes; flag rendering needs
+* alpha-2. Extend as backend support expands; unmapped codes fall back to "".
+*/
+var ISO3_TO_ISO2 = {
+	USA: "US",
+	MEX: "MX",
+	CAN: "CA",
+	GBR: "GB",
+	DEU: "DE",
+	FRA: "FR",
+	ESP: "ES",
+	ITA: "IT",
+	BRA: "BR",
+	ARG: "AR",
+	COL: "CO",
+	CHL: "CL",
+	PER: "PE",
+	AUS: "AU",
+	NZL: "NZ",
+	JPN: "JP",
+	KOR: "KR",
+	CHN: "CN",
+	IND: "IN",
+	RUS: "RU",
+	ZAF: "ZA",
+	NGA: "NG",
+	EGY: "EG",
+	ARE: "AE",
+	SAU: "SA",
+	ISR: "IL",
+	TUR: "TR",
+	NLD: "NL",
+	BEL: "BE",
+	CHE: "CH",
+	AUT: "AT",
+	SWE: "SE",
+	NOR: "NO",
+	DNK: "DK",
+	FIN: "FI",
+	POL: "PL",
+	PRT: "PT",
+	IRL: "IE",
+	GRC: "GR",
+	CZE: "CZ",
+	HUN: "HU",
+	ROU: "RO",
+	UKR: "UA",
+	PHL: "PH",
+	IDN: "ID",
+	MYS: "MY",
+	SGP: "SG",
+	THA: "TH",
+	VNM: "VN",
+	PAK: "PK",
+	BGD: "BD",
+	HKG: "HK",
+	TWN: "TW",
+	VEN: "VE",
+	ECU: "EC",
+	GTM: "GT",
+	CRI: "CR",
+	PAN: "PA",
+	DOM: "DO",
+	PRI: "PR",
+	CUB: "CU",
+	JAM: "JM",
+	HND: "HN",
+	SLV: "SV",
+	NIC: "NI",
+	BOL: "BO",
+	PRY: "PY",
+	URY: "UY",
+	KEN: "KE",
+	GHA: "GH",
+	MAR: "MA",
+	TUN: "TN",
+	KWT: "KW",
+	QAT: "QA",
+	BHR: "BH",
+	OMN: "OM",
+	JOR: "JO",
+	LBN: "LB",
+	SRB: "RS",
+	HRV: "HR",
+	SVK: "SK",
+	SVN: "SI",
+	BGR: "BG",
+	LTU: "LT",
+	LVA: "LV",
+	EST: "EE",
+	ISL: "IS",
+	LUX: "LU",
+	MLT: "MT",
+	CYP: "CY"
+};
+/** Convert an ISO-2 or ISO-3 country code to a flag emoji. */
+function countryCodeToFlag(countryCode) {
+	if (!countryCode) return "";
+	const upper = countryCode.toUpperCase();
+	const iso2 = upper.length === 3 ? ISO3_TO_ISO2[upper] ?? "" : upper;
+	if (iso2.length !== 2) return "";
+	const A_OFFSET = 127462 - "A".charCodeAt(0);
+	return String.fromCodePoint(iso2.charCodeAt(0) + A_OFFSET, iso2.charCodeAt(1) + A_OFFSET);
+}
+/**
+* Format a backend verification timestamp as a locale-aware short date
+* (e.g. "15 Apr 2023" in en-US). Auto-detects unit: values >= 1e12 are
+* treated as milliseconds, smaller values as unix seconds (the documents
+* API returns seconds, possibly with fractional millis). Returns null if
+* the value can't be parsed so the caller can hide the row instead of
+* rendering a half-empty "Verified" with no date.
+*/
+function formatVerifiedAt(timestamp, locale) {
+	if (!Number.isFinite(timestamp) || timestamp <= 0) return null;
+	const ms = timestamp >= 0xe8d4a51000 ? timestamp : timestamp * 1e3;
+	const date = new Date(ms);
+	if (Number.isNaN(date.getTime())) return null;
+	return new Intl.DateTimeFormat(locale, {
+		day: "2-digit",
+		month: "short",
+		year: "numeric"
+	}).format(date);
+}
+var RadioDot = ({ checked }) => /* @__PURE__ */ u("span", {
+	class: `IncodeIdentityReuseRadio ${checked ? "IncodeIdentityReuseRadioChecked" : ""}`,
 	"aria-hidden": "true",
-	children: /* @__PURE__ */ n("path", {
-		d: "M5 12h14M13 6l6 6-6 6",
-		stroke: "currentColor",
-		"stroke-width": "2",
-		"stroke-linecap": "round",
-		"stroke-linejoin": "round"
-	})
-}), f = ({ providingOrganization: e, receivingOrganization: t }) => /* @__PURE__ */ n("div", {
-	class: "IncodeIdentityReuseVisualization",
-	children: [
-		/* @__PURE__ */ n("div", {
-			class: "IncodeIdentityReuseCircleWrapper",
-			children: /* @__PURE__ */ n(u, { name: e })
-		}),
-		/* @__PURE__ */ n("div", {
-			class: "IncodeIdentityReuseArrowWrapper",
-			children: /* @__PURE__ */ n(d, {})
-		}),
-		/* @__PURE__ */ n("div", {
-			class: "IncodeIdentityReuseCircleWrapper",
-			children: /* @__PURE__ */ n(u, { name: t })
-		})
-	]
-}), p = ({ config: i, manager: c, onFinish: u, onError: d }) => {
-	let { t: p } = e(), [m, h] = r(() => {
-		if (c) return c;
-		if (!i) throw Error("IdentityReuse config is required when no manager is provided");
-		return l({ config: i });
-	}, { manageLifecycle: !c });
-	t(() => {
-		m.status === "finished" && u?.();
-	}, [m.status, u]);
-	let g = m.status === "error" ? m.error : void 0;
-	return t(() => {
-		g && d?.(g);
-	}, [g, d]), m.status === "idle" || m.status === "loading" || m.status === "submitContinue" || m.status === "submitSkip" ? /* @__PURE__ */ n(o, { title: p("identityReuse.loading") }) : m.status === "oneCandidateFound" ? /* @__PURE__ */ n(a, {
-		className: "IncodeIdentityReusePage",
-		title: p("identityReuse.title"),
-		subtitle: p("identityReuse.subtitle"),
-		children: [/* @__PURE__ */ n("div", {
-			class: "IncodeIdentityReuseContent",
-			children: [/* @__PURE__ */ n(f, {
-				providingOrganization: m.selectedOrganizationName,
-				receivingOrganization: m.currentOrganizationName
-			}), /* @__PURE__ */ n("p", {
-				class: "IncodeIdentityReuseDescription",
-				children: p("identityReuse.description", { companyName: m.currentOrganizationName })
-			})]
-		}), /* @__PURE__ */ n("div", {
-			class: "IncodeIdentityReuseActions",
-			children: [/* @__PURE__ */ n(s, {
-				onClick: () => h.submitCandidate(),
-				"data-testid": "identity-reuse-continue-button",
-				children: p("identityReuse.cta.continue")
-			}), /* @__PURE__ */ n(s, {
-				onClick: () => h.skip(),
-				variant: "link",
-				"data-testid": "identity-reuse-verify-button",
-				children: p("identityReuse.cta.verify")
-			})]
-		})]
-	}) : m.status === "multiCandidatesFound" ? m.selectionPhase === "candidateSelected" ? /* @__PURE__ */ n(a, {
-		className: "IncodeIdentityReusePage",
-		title: p("identityReuse.title"),
-		subtitle: p("identityReuse.subtitle"),
-		children: [/* @__PURE__ */ n("div", {
-			class: "IncodeIdentityReuseContent",
-			children: [/* @__PURE__ */ n(f, {
-				providingOrganization: m.selectedOrganizationName,
-				receivingOrganization: m.currentOrganizationName
-			}), /* @__PURE__ */ n("p", {
-				class: "IncodeIdentityReuseDescription",
-				children: p("identityReuse.description", { companyName: m.currentOrganizationName })
-			})]
-		}), /* @__PURE__ */ n("div", {
-			class: "IncodeIdentityReuseActions",
+	children: checked ? /* @__PURE__ */ u("span", { class: "IncodeIdentityReuseRadioInner" }) : null
+});
+var DocumentCard = ({ document, selected, recommended, tabIndex, onSelect, locale }) => {
+	const { t } = useTranslation();
+	const typeLabel = t(`identityReuse.documentType.${document.documentType}`);
+	const flag = countryCodeToFlag(document.countryCode);
+	const verifiedDate = formatVerifiedAt(document.verifiedAt, locale);
+	const verifiedWord = t("identityReuse.verified", { defaultValue: "Verified" });
+	const verifiedLabel = verifiedDate ? `${verifiedWord} ${verifiedDate}` : null;
+	return /* @__PURE__ */ u("button", {
+		type: "button",
+		class: `IncodeIdentityReuseCard ${selected ? "IncodeIdentityReuseCardSelected" : ""}`,
+		role: "radio",
+		"aria-checked": selected,
+		tabIndex,
+		onClick: onSelect,
+		"data-testid": `identity-reuse-document-${document.id}`,
+		children: /* @__PURE__ */ u("div", {
+			class: "IncodeIdentityReuseCardBody",
 			children: [
-				/* @__PURE__ */ n(s, {
-					onClick: () => h.submitCandidate(),
-					"data-testid": "identity-reuse-continue-button",
-					children: p("identityReuse.cta.continue")
+				/* @__PURE__ */ u("div", {
+					class: "IncodeIdentityReuseCardHeader",
+					children: [/* @__PURE__ */ u("div", {
+						class: "IncodeIdentityReuseCardHeaderLeft",
+						children: [/* @__PURE__ */ u("span", {
+							class: "IncodeIdentityReuseCardTypeLabel",
+							children: typeLabel
+						}), recommended ? /* @__PURE__ */ u("span", {
+							class: "IncodeIdentityReuseBadgeRecommended",
+							children: t("identityReuse.badge.recommended")
+						}) : null]
+					}), /* @__PURE__ */ u(RadioDot, { checked: selected })]
 				}),
-				/* @__PURE__ */ n(s, {
-					onClick: () => h.changeCandidate(),
-					variant: "link",
-					"data-testid": "identity-reuse-change-button",
-					children: p("identityReuse.cta.change")
+				/* @__PURE__ */ u("p", {
+					class: "IncodeIdentityReuseCardIdentifier",
+					children: [flag ? /* @__PURE__ */ u("span", {
+						"aria-hidden": "true",
+						children: flag
+					}) : null, /* @__PURE__ */ u("span", { children: document.maskedNumber })]
 				}),
-				/* @__PURE__ */ n(s, {
-					onClick: () => h.skip(),
-					variant: "link",
-					"data-testid": "identity-reuse-verify-button",
-					children: p("identityReuse.cta.verify")
-				})
+				verifiedLabel ? /* @__PURE__ */ u("p", {
+					class: "IncodeIdentityReuseCardVerified",
+					children: verifiedLabel
+				}) : null
 			]
-		})]
-	}) : /* @__PURE__ */ n(a, {
-		className: "IncodeIdentityReusePage",
-		title: p("identityReuse.selectTitle"),
-		subtitle: p("identityReuse.selectSubtitle"),
-		children: [/* @__PURE__ */ n("div", {
-			class: "IncodeIdentityReuseContent",
-			children: /* @__PURE__ */ n("div", {
-				class: "IncodeIdentityReuseCandidateList",
-				children: m.candidateOrganizationNames.map((e) => /* @__PURE__ */ n("button", {
-					type: "button",
-					class: "IncodeIdentityReuseCandidateItem",
-					onClick: () => {
-						h.startSelection(), h.chooseCandidate(e);
-					},
-					"data-testid": `identity-reuse-candidate-${e}`,
-					children: [/* @__PURE__ */ n("span", {
-						class: "IncodeIdentityReuseCandidateItemName",
-						children: e
-					}), /* @__PURE__ */ n("svg", {
-						class: "IncodeIdentityReuseCandidateItemChevron",
-						viewBox: "0 0 24 24",
-						fill: "none",
-						"aria-hidden": "true",
-						children: /* @__PURE__ */ n("path", {
-							d: "M9 6l6 6-6 6",
-							stroke: "currentColor",
-							"stroke-width": "2",
-							"stroke-linecap": "round",
-							"stroke-linejoin": "round"
-						})
+		})
+	});
+};
+var ScanNewRow = ({ selected, tabIndex, onSelect }) => {
+	const { t } = useTranslation();
+	return /* @__PURE__ */ u("button", {
+		type: "button",
+		class: `IncodeIdentityReuseCard IncodeIdentityReuseScanNewCard ${selected ? "IncodeIdentityReuseCardSelected" : ""}`,
+		role: "radio",
+		"aria-checked": selected,
+		tabIndex,
+		onClick: onSelect,
+		"data-testid": "identity-reuse-scan-new",
+		children: [/* @__PURE__ */ u("div", {
+			class: "IncodeIdentityReuseScanNewBody",
+			children: [/* @__PURE__ */ u("span", {
+				class: "IncodeIdentityReuseCardTypeLabel",
+				children: t("identityReuse.scanANewDocument")
+			}), /* @__PURE__ */ u("span", {
+				class: "IncodeIdentityReuseBadgeSlowest",
+				children: t("identityReuse.badge.slowest")
+			})]
+		}), /* @__PURE__ */ u(RadioDot, { checked: selected })]
+	});
+};
+var IdentityReuseContent = ({ config, manager: externalManager, onFinish, onError }) => {
+	const { t, i18n } = useTranslation();
+	const locale = i18n.language || "en";
+	const [state, manager] = useManager(() => {
+		if (externalManager) return externalManager;
+		if (!config) throw new Error("IdentityReuse config is required when no manager is provided");
+		return createIdentityReuseManager({ config });
+	}, { manageLifecycle: !externalManager });
+	useModuleTerminalCallbacks({
+		status: state.status === "finished" ? "finished" : "loading",
+		onFinish
+	});
+	const errorMessage = state.status === "error" ? state.error : void 0;
+	y(() => {
+		if (errorMessage) onError?.(errorMessage);
+	}, [errorMessage, onError]);
+	if (state.status === "idle" || state.status === "loading" || state.status === "submitting") return /* @__PURE__ */ u(Spinner, { title: t("identityReuse.loading") });
+	if (state.status === "documentsFound") {
+		const selectedId = state.selectedDocumentId;
+		const optionIds = [...state.documents.map((d) => d.id), SCAN_NEW_DOCUMENT];
+		const focusedIndex = selectedId === void 0 ? 0 : Math.max(0, optionIds.findIndex((id) => id === selectedId));
+		const ctaLabel = selectedId === SCAN_NEW_DOCUMENT ? t("identityReuse.cta.scanNew") : t("identityReuse.cta.confirm");
+		const handleRadiogroupKeyDown = (event) => {
+			const container = event.currentTarget;
+			if (!container) return;
+			const buttons = container.querySelectorAll("[role=\"radio\"]");
+			if (buttons.length === 0) return;
+			const currentIndex = Array.from(buttons).findIndex((b) => b === document.activeElement);
+			if (currentIndex === -1) return;
+			let nextIndex = currentIndex;
+			switch (event.key) {
+				case "ArrowDown":
+				case "ArrowRight":
+					nextIndex = (currentIndex + 1) % buttons.length;
+					break;
+				case "ArrowUp":
+				case "ArrowLeft":
+					nextIndex = (currentIndex - 1 + buttons.length) % buttons.length;
+					break;
+				case "Home":
+					nextIndex = 0;
+					break;
+				case "End":
+					nextIndex = buttons.length - 1;
+					break;
+				default: return;
+			}
+			event.preventDefault();
+			const next = buttons[nextIndex];
+			if (next) {
+				next.focus();
+				next.click();
+			}
+		};
+		return /* @__PURE__ */ u(Page, {
+			className: "IncodeIdentityReusePage",
+			title: t("identityReuse.title"),
+			subtitle: t("identityReuse.subtitle"),
+			children: /* @__PURE__ */ u("div", {
+				class: "IncodeIdentityReuseBody",
+				children: [/* @__PURE__ */ u("div", {
+					class: "IncodeIdentityReuseList",
+					role: "radiogroup",
+					"aria-label": t("identityReuse.title"),
+					onKeyDown: handleRadiogroupKeyDown,
+					children: [state.documents.map((document, index) => /* @__PURE__ */ u(DocumentCard, {
+						document,
+						selected: selectedId === document.id,
+						recommended: index === 0,
+						tabIndex: index === focusedIndex ? 0 : -1,
+						onSelect: () => manager.chooseDocument(document.id),
+						locale
+					}, document.id)), /* @__PURE__ */ u(ScanNewRow, {
+						selected: selectedId === SCAN_NEW_DOCUMENT,
+						tabIndex: focusedIndex === state.documents.length ? 0 : -1,
+						onSelect: () => manager.chooseDocument(SCAN_NEW_DOCUMENT)
 					})]
-				}, e))
-			})
-		}), /* @__PURE__ */ n("div", {
-			class: "IncodeIdentityReuseActions",
-			children: /* @__PURE__ */ n(s, {
-				onClick: () => h.skip(),
-				variant: "link",
-				"data-testid": "identity-reuse-verify-button",
-				children: p("identityReuse.cta.verify")
-			})
-		})]
-	}) : m.status === "noCandidatesFound" ? /* @__PURE__ */ n(a, {
-		className: "IncodeIdentityReusePage",
-		title: p("identityReuse.noCandidatesTitle"),
-		subtitle: p("identityReuse.noCandidatesSubtitle"),
-		children: [/* @__PURE__ */ n("div", { class: "IncodeIdentityReuseContent" }), /* @__PURE__ */ n("div", {
-			class: "IncodeIdentityReuseActions",
-			children: /* @__PURE__ */ n(s, {
-				onClick: () => h.skip(),
-				"data-testid": "identity-reuse-continue-button",
-				children: p("identityReuse.cta.continueVerification")
+				}), /* @__PURE__ */ u("div", {
+					class: "IncodeIdentityReuseActions",
+					children: /* @__PURE__ */ u(Button, {
+						onClick: () => manager.submit(),
+						disabled: selectedId === void 0,
+						"data-testid": "identity-reuse-confirm-button",
+						children: ctaLabel
+					})
+				})]
 			})
-		})]
-	}) : m.status === "error" ? /* @__PURE__ */ n(a, {
+		});
+	}
+	if (state.status === "error") return /* @__PURE__ */ u(Page, {
 		className: "IncodeIdentityReusePage",
-		title: p("identityReuse.errorTitle"),
-		subtitle: m.error,
-		children: [/* @__PURE__ */ n("div", { class: "IncodeIdentityReuseContent" }), /* @__PURE__ */ n("div", {
+		title: t("identityReuse.errorTitle"),
+		subtitle: state.error,
+		children: [/* @__PURE__ */ u("div", { class: "IncodeIdentityReuseContent" }), /* @__PURE__ */ u("div", {
 			class: "IncodeIdentityReuseActions",
-			children: [/* @__PURE__ */ n(s, {
-				onClick: () => h.retry(),
+			children: [/* @__PURE__ */ u(Button, {
+				onClick: () => manager.retry(),
 				"data-testid": "identity-reuse-retry-button",
-				children: p("identityReuse.cta.retry")
-			}), /* @__PURE__ */ n(s, {
-				onClick: () => h.skip(),
+				children: t("identityReuse.cta.retry")
+			}), /* @__PURE__ */ u(Button, {
+				onClick: () => manager.skip(),
 				variant: "link",
-				"data-testid": "identity-reuse-verify-button",
-				children: p("identityReuse.cta.verify")
+				"data-testid": "identity-reuse-skip-button",
+				children: t("identityReuse.cta.skip")
 			})]
 		})]
-	}) : (m.status, null);
-}, m = ({ config: e, manager: t, onFinish: r, onError: a }) => /* @__PURE__ */ n(i, { children: e || t ? /* @__PURE__ */ n(p, {
-	config: e,
-	manager: t,
-	onFinish: r,
-	onError: a
+	});
+	if (state.status === "finished") return null;
+	return null;
+};
+var IdentityReuse = ({ config, manager, onFinish, onError }) => /* @__PURE__ */ u(IncodeComponent, { children: config || manager ? /* @__PURE__ */ u(IdentityReuseContent, {
+	config,
+	manager,
+	onFinish,
+	onError
 }) : null });
-c(m, "incode-identity-reuse");
+registerIncodeModuleElement(IdentityReuse, "incode-identity-reuse");
 //#endregion
-export { m as IdentityReuse };
+export { IdentityReuse };