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

package/dist/ekyc/styles.css

@@ -1,7 +1,8 @@
 /*! tailwindcss v4.2.2 | MIT License | https://tailwindcss.com */
 .IncodeEkycPage {
-  max-width: 480px;
+  animation: fadeIn var(--motion-fade-in-duration, .7s) ease-out;
   margin-inline: auto;
+  animation-fill-mode: both;
 }
 
 @media (min-width: 48rem) {
@@ -20,6 +21,7 @@
   gap: var(--spacing-16, var(--spacing-16, 16px));
   flex-direction: column;
   width: 100%;
+  height: 100%;
   display: flex;
 }
 
@@ -41,13 +43,13 @@
   margin-inline: auto;
   margin-top: var(--spacing-16, var(--spacing-16, 16px));
   width: 100%;
-  max-width: 420px;
+  max-width: var(--incode-form-max-w);
   padding-block: var(--spacing-12, var(--spacing-12, 12px));
 }
 
 .IncodeEkycPage .IncodeEkycRadioGroup {
   width: 100%;
-  max-width: 420px;
+  max-width: var(--incode-form-max-w);
   margin-inline: auto;
 }
 
@@ -71,6 +73,10 @@
   margin-top: 0;
 }
 
+.IncodeEkycPage .IncodeEkycFooter button {
+  margin-bottom: var(--spacing-16, var(--spacing-16, 16px));
+}
+
 @media (min-width: 768px) {
   .IncodeEkycPage.IncodePageContainer {
     height: 100dvh;
@@ -96,10 +102,6 @@
     overflow-y: auto;
   }
 
-  .IncodeEkycPage.IncodeEkycPageScrollable .IncodeEkycForm {
-    margin-left: var(--spacing-8, var(--spacing-8, 8px));
-  }
-
   .IncodeEkycPage .IncodeEkycFooter {
     flex-shrink: 0;
   }

package/dist/ekycModule-BGzwgjl1.js

@@ -0,0 +1,2 @@
+import { t as EkycModule } from "./ekycModule-BuTaC5ct.js";
+export { EkycModule };

package/dist/ekycModule-BuTaC5ct.js

@@ -0,0 +1,257 @@
+import { n as useTranslation } from "./i18n-CoCO2ZuN.js";
+import { _ as y, d as T, l as A, v as u } from "./vendor-preact-DThS2ZQ_.js";
+import { c as useManager, i as useFormScrollable, 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 VerificationResult } from "./verificationResult-Do5SpZ6X.js";
+import { i as translateError, r as FormField, t as RadioGroupComposed } from "./radioGroupComposed-BNuaopVr.js";
+import { t as PhoneInputComposed } from "./phoneInputComposed-DjNdsmPE.js";
+import { t as DropdownComposed } from "./dropdownComposed-_fgAlo_C.js";
+import { t as DateInputComposed } from "./dateInputComposed-C_mh4XBg.js";
+import { t as registerIncodeModuleElement } from "./incodeModule-BUDoTwT9.js";
+import { n as getRequiredHintMode, t as getFieldHint } from "./requiredLabelHint-DEadtiwx.js";
+import { n as AddressAutocomplete, t as getAccessibleOptionLabel } from "./optionAccessibleLabel-CnA-mNAU.js";
+import { createEkycManager } from "@incodetech/core/ekyc";
+//#region src/modules/ekyc/ekycModule.tsx
+var EkycContent = ({ config, onFinish }) => {
+	const { t } = useTranslation();
+	const [state, manager] = useManager(() => createEkycManager({ config }));
+	useModuleTerminalCallbacks({
+		status: state.status === "closed" ? "finished" : state.status,
+		onFinish
+	});
+	if (state.status === "finished" || state.status === "closed") return null;
+	if (state.status === "loading") return /* @__PURE__ */ u(VerificationResult, {
+		status: "submitting",
+		submittingTitle: t("common.loading")
+	});
+	if (state.status === "submitting") return /* @__PURE__ */ u(Page, {
+		className: "IncodeEkycPage",
+		children: /* @__PURE__ */ u(Spinner, {
+			fullScreen: false,
+			title: t("common.processing"),
+			className: "IncodeEkycSpinner"
+		})
+	});
+	if (state.status === "success") return /* @__PURE__ */ u(VerificationResult, { status: "success" });
+	if (state.status === "error") return /* @__PURE__ */ u(VerificationResult, {
+		status: "failure",
+		onRetry: () => manager.retry(),
+		onSkip: () => manager.skip()
+	});
+	if (state.status === "misconfigured") return /* @__PURE__ */ u(VerificationResult, {
+		status: "failure",
+		failureTitle: t("verification.noFormFields"),
+		onSkip: () => manager.close(),
+		skipLabel: t("common.close")
+	});
+	if (state.status === "form") return /* @__PURE__ */ u(EkycForm, {
+		state,
+		manager
+	});
+	return null;
+};
+var EkycForm = ({ state, manager }) => {
+	const { fields, values, validationErrors, isValid, addressSuggestions, prefilled, hideEmail, fieldsCountry, submitError } = state;
+	const { t } = useTranslation();
+	const formRef = A(null);
+	const postalCodeFieldRef = A(null);
+	const previousPostalCodeErrorRef = A(void 0);
+	const isScrollable = useFormScrollable(formRef, fields.length);
+	const mode = T(() => getRequiredHintMode(fields.filter((f) => !(f.name === "email" && hideEmail)).map((f) => f.readonly || prefilled[f.name] ? false : f.required)), [
+		fields,
+		hideEmail,
+		prefilled
+	]);
+	const labelHintFor = (effectiveRequired) => {
+		const hint = getFieldHint(mode, effectiveRequired);
+		return hint ? t(`forms.label.${hint}`) : void 0;
+	};
+	const postalCodeErrorKey = validationErrors?.postalCode?.key;
+	y(() => {
+		const previous = previousPostalCodeErrorRef.current;
+		previousPostalCodeErrorRef.current = postalCodeErrorKey;
+		if (!postalCodeErrorKey || previous === postalCodeErrorKey) return;
+		const rafId = requestAnimationFrame(() => {
+			const postalField = postalCodeFieldRef.current;
+			if (!postalField) return;
+			(postalField.querySelector("#postalCode-error") ?? postalField).scrollIntoView({
+				behavior: "smooth",
+				block: "nearest"
+			});
+		});
+		return () => cancelAnimationFrame(rafId);
+	}, [postalCodeErrorKey]);
+	const translateError$1 = (err) => translateError(t, err?.key, err?.params);
+	let currentSection;
+	return /* @__PURE__ */ u(Page, {
+		className: `IncodeEkycPage${isScrollable ? " IncodeEkycPageScrollable" : ""}`,
+		title: t("verification.title"),
+		children: [/* @__PURE__ */ u("div", {
+			ref: formRef,
+			className: "IncodeEkycForm",
+			children: fields.map((field) => {
+				if (field.name === "email" && hideEmail) return null;
+				let sectionHeader = null;
+				if (field.section && field.section !== currentSection) {
+					currentSection = field.section;
+					sectionHeader = /* @__PURE__ */ u("h3", {
+						className: "IncodeEkycSectionHeader",
+						children: t({
+							address: "verification.labels.addressDetailsSection",
+							driverLicense: "verification.labels.dlDetailsSection"
+						}[field.section] ?? field.section)
+					});
+				}
+				const isReadonly = field.readonly || prefilled[field.name];
+				const isFieldRequired = isReadonly ? false : field.required;
+				const labelHint = labelHintFor(isFieldRequired);
+				const fieldValue = values[field.name] ?? "";
+				const fieldError = validationErrors?.[field.name];
+				if (field.name === "street" && field.section === "address") return /* @__PURE__ */ u("div", { children: [sectionHeader, /* @__PURE__ */ u(AddressAutocomplete, {
+					label: field.label,
+					labelHint,
+					value: fieldValue,
+					error: fieldError?.key,
+					errorParams: fieldError?.params,
+					suggestions: addressSuggestions,
+					readonly: isReadonly,
+					required: isFieldRequired,
+					onChange: (value) => manager.setField("street", value),
+					onSearch: (query) => manager.searchAddress(query),
+					onSelect: (suggestion) => manager.selectAddress(suggestion),
+					onBlur: () => manager.validateField("street")
+				})] }, field.name);
+				if (field.type === "dropdown") {
+					const dropdownLabel = t(field.label);
+					return /* @__PURE__ */ u("div", { children: [sectionHeader, /* @__PURE__ */ u(DropdownComposed, {
+						id: `ekyc-${field.name}`,
+						label: dropdownLabel,
+						labelHint,
+						placeholder: field.placeholder ? t(field.placeholder) : void 0,
+						value: fieldValue,
+						options: (field.options ?? []).map((o) => {
+							const translatedOptionLabel = t(o.label);
+							return {
+								...o,
+								label: translatedOptionLabel,
+								ariaLabel: getAccessibleOptionLabel(translatedOptionLabel)
+							};
+						}),
+						error: translateError$1(fieldError),
+						disabled: isReadonly,
+						required: isFieldRequired,
+						searchable: true,
+						onChange: (value) => manager.setField(field.name, value),
+						onBlur: () => manager.validateField(field.name),
+						"data-testid": `ekyc-field-${field.name}`
+					})] }, field.name);
+				}
+				if (field.type === "date") {
+					const dateLabel = t(field.label);
+					return /* @__PURE__ */ u("div", { children: [sectionHeader, /* @__PURE__ */ u(DateInputComposed, {
+						id: `ekyc-${field.name}`,
+						label: dateLabel,
+						labelHint,
+						value: fieldValue,
+						error: translateError$1(fieldError),
+						disabled: isReadonly,
+						required: isFieldRequired,
+						onInput: (e) => {
+							const target = e.target;
+							manager.setField(field.name, target.value);
+						},
+						onBlur: () => manager.validateField(field.name),
+						"data-testid": `ekyc-field-${field.name}`
+					})] }, field.name);
+				}
+				if (field.type === "phone") {
+					const phoneLabel = t(field.label);
+					return /* @__PURE__ */ u("div", { children: [sectionHeader, /* @__PURE__ */ u(PhoneInputComposed, {
+						id: `ekyc-${field.name}`,
+						label: phoneLabel,
+						labelHint,
+						countryCode: fieldsCountry,
+						value: fieldValue,
+						placeholder: field.placeholder,
+						error: translateError$1(fieldError),
+						disabled: isReadonly,
+						disableCountrySelector: field.disableCountrySelector,
+						required: isFieldRequired,
+						onChange: (fullNumber) => manager.setField(field.name, fullNumber),
+						onBlur: () => manager.validateField(field.name),
+						"data-testid": `ekyc-field-${field.name}`
+					})] }, field.name);
+				}
+				if (field.type === "radio") return /* @__PURE__ */ u("div", { children: [sectionHeader, /* @__PURE__ */ u(RadioGroupComposed, {
+					id: `ekyc-${field.name}`,
+					class: "IncodeEkycRadioGroup",
+					label: t(field.label),
+					labelHint,
+					value: fieldValue,
+					options: (field.options ?? []).map((option) => ({
+						value: option.value,
+						label: t(option.label)
+					})),
+					error: translateError$1(fieldError),
+					disabled: isReadonly,
+					required: isFieldRequired,
+					onChange: (next) => manager.setField(field.name, next),
+					onBlur: () => manager.validateField(field.name)
+				})] }, field.name);
+				return /* @__PURE__ */ u("div", {
+					ref: field.name === "postalCode" ? postalCodeFieldRef : void 0,
+					children: [sectionHeader, /* @__PURE__ */ u(FormField, {
+						name: field.name,
+						label: field.label,
+						displayLabel: field.displayLabel,
+						value: fieldValue,
+						error: fieldError?.key,
+						errorParams: fieldError?.params,
+						type: field.type,
+						placeholder: field.placeholder,
+						placeholderParams: field.placeholderParams,
+						required: isFieldRequired,
+						labelHint,
+						readonly: isReadonly,
+						maxLength: field.maxLength,
+						onChange: (name, value) => manager.setField(name, value),
+						onBlur: (name) => manager.validateField(name)
+					})]
+				}, field.name);
+			})
+		}), /* @__PURE__ */ u("div", {
+			className: "IncodeEkycFooter",
+			children: [
+				submitError && /* @__PURE__ */ u("p", {
+					className: "IncodeEkycSubmitError",
+					role: "alert",
+					children: t(submitError)
+				}),
+				/* @__PURE__ */ u(Button, {
+					onClick: () => manager.submit(),
+					disabled: !isValid,
+					"data-testid": "ekyc-submit",
+					children: t("common.continue")
+				}),
+				submitError === "verification.errors.countryNotSupported" && /* @__PURE__ */ u(Button, {
+					variant: "link",
+					onClick: () => manager.skip(),
+					"data-testid": "ekyc-skip",
+					children: t("verification.labels.skip")
+				})
+			]
+		})]
+	});
+};
+var EkycModule = ({ config, onFinish }) => {
+	return /* @__PURE__ */ u(IncodeComponent, { children: config ? /* @__PURE__ */ u(EkycContent, {
+		config,
+		onFinish
+	}) : null });
+};
+registerIncodeModuleElement(EkycModule, "incode-ekyc");
+//#endregion
+export { EkycModule as t };

package/dist/electronic-signature/electronic-signature.es.js

@@ -1,2 +1,2 @@
-import { n as e, t } from "../electronic-signature-COYXjGdd.js";
-export { t as AeSignature, e as ElectronicSignature };
+import { n as ElectronicSignature, t as AeSignature } from "../electronic-signature-B-Q7M0wK.js";
+export { AeSignature, ElectronicSignature };