@adyen/kyc-components 4.8.0 → 4.9.0-beta.0

package/dist/Spacer-CvT0ELty.js

@@ -0,0 +1,11 @@
+try {
+	let e = "undefined" != typeof window ? window : "undefined" != typeof global ? global : "undefined" != typeof globalThis ? globalThis : "undefined" != typeof self ? self : {}, n = new e.Error().stack;
+	n && (e._sentryDebugIds = e._sentryDebugIds || {}, e._sentryDebugIds[n] = "1d3a87c5-179e-4878-9254-559f45613793", e._sentryDebugIdIdentifier = "sentry-dbid-1d3a87c5-179e-4878-9254-559f45613793");
+} catch (e) {}
+import { jsx } from "preact/jsx-runtime";
+var Spacer_module_default = { spacer: "adyen-kyc-spacer" };
+//#endregion
+//#region src/components/ui/atoms/Spacer/Spacer.tsx
+var Spacer = () => /* @__PURE__ */ jsx("div", { className: Spacer_module_default.spacer });
+//#endregion
+export { Spacer as t };

package/dist/StepProgressIndicator-DWJ9eS5a.js

@@ -0,0 +1,80 @@
+try {
+	let e = "undefined" != typeof window ? window : "undefined" != typeof global ? global : "undefined" != typeof globalThis ? globalThis : "undefined" != typeof self ? self : {}, n = new e.Error().stack;
+	n && (e._sentryDebugIds = e._sentryDebugIds || {}, e._sentryDebugIds[n] = "2c25774f-1dfe-48ea-9de0-28c84bdd680c", e._sentryDebugIdIdentifier = "sentry-dbid-2c25774f-1dfe-48ea-9de0-28c84bdd680c");
+} catch (e) {}
+import { i as Typography, r as useTranslation } from "./translation-BFxyJ1c5.js";
+import cx from "classnames";
+import { jsx } from "preact/jsx-runtime";
+//#region src/utils/range.ts
+/**
+* Create a range of numbers
+* @param {number} start The first number in the range
+* @param {number} stop The last number in the range
+* @param {number} step The step between each number in the range
+* @returns {number[]} A range of numbers
+*/
+var range = (stop, start = 0, step = 1) => Array.from({ length: (stop - start) / step + 1 }, (_, i) => start + i * step);
+var StepProgressIndicator_module_default = {
+	"progress-bar": "adyen-kyc-progress-bar",
+	progressBar: "adyen-kyc-progress-bar",
+	"progress-bar-thick": "adyen-kyc-progress-bar-thick",
+	progressBarThick: "adyen-kyc-progress-bar-thick",
+	"progress-step": "adyen-kyc-progress-step",
+	progressStep: "adyen-kyc-progress-step",
+	"progress-step-active": "adyen-kyc-progress-step-active",
+	progressStepActive: "adyen-kyc-progress-step-active",
+	"progress-bar-circles": "adyen-kyc-progress-bar-circles",
+	progressBarCircles: "adyen-kyc-progress-bar-circles"
+};
+//#endregion
+//#region src/components/ui/atoms/StepProgressIndicator/StepProgressIndicator.tsx
+var shouldHighlight = (active, current, fillBefore) => !fillBefore ? active === current : active >= current;
+/**
+* Progress indicator showing step progession in a process
+*
+* @param activeStepIndex - zero based index for active steps, add 1 to make it human-readable
+* @param stepsCount - total number of steps
+* @param fillBefore - fills everything between 0 and activeStepIndex, not just last step
+* @param thick - makes the bar thicker
+*/
+/** @deprecated do not use in new code */
+var StepProgressIndicator = ({ activeStepIndex, stepsCount, fillBefore, thick, circles }) => {
+	const { t } = useTranslation("ui");
+	if (stepsCount === 0 || stepsCount > 10) return /* @__PURE__ */ jsx(Typography, {
+		variant: "caption",
+		children: t(($) => $["XOfYSteps"], {
+			currentStep: activeStepIndex,
+			totalSteps: stepsCount
+		})
+	});
+	return /* @__PURE__ */ jsx("div", {
+		"aria-label": t(($) => $["stepXofY"], {
+			currentStep: activeStepIndex,
+			totalSteps: stepsCount
+		}),
+		className: StepProgressIndicator_module_default.progress,
+		role: "group",
+		children: /* @__PURE__ */ jsx("ol", {
+			className: cx(StepProgressIndicator_module_default.progressBar, {
+				[StepProgressIndicator_module_default.progressBarThick]: thick,
+				[StepProgressIndicator_module_default.progressBarCircles]: circles
+			}),
+			children: range(stepsCount).map((stepNumber) => {
+				const isHighlighted = shouldHighlight(activeStepIndex, stepNumber, fillBefore);
+				return /* @__PURE__ */ jsx("li", {
+					"aria-current": isHighlighted ? "step" : void 0,
+					className: cx(StepProgressIndicator_module_default.progressStep, { [StepProgressIndicator_module_default.progressStepActive]: isHighlighted }),
+					children: /* @__PURE__ */ jsx("span", {
+						className: "adyen-kyc-u-screen-reader-only",
+						children: t(($) => $["stepNumberStatus"], {
+							stepNumber,
+							status: t(($) => $[stepNumber < activeStepIndex ? "completed" : "notCompleted"])
+						})
+					})
+				}, stepNumber);
+			})
+		})
+	});
+};
+//#endregion
+export { StepProgressIndicator as t };

package/dist/Summary-B5IkOGJV.js

@@ -0,0 +1,226 @@
+try {
+	let e = "undefined" != typeof window ? window : "undefined" != typeof global ? global : "undefined" != typeof globalThis ? globalThis : "undefined" != typeof self ? self : {}, n = new e.Error().stack;
+	n && (e._sentryDebugIds = e._sentryDebugIds || {}, e._sentryDebugIds[n] = "739c0989-1be2-414c-b7ad-a52de2d3ab7f", e._sentryDebugIdIdentifier = "sentry-dbid-739c0989-1be2-414c-b7ad-a52de2d3ab7f");
+} catch (e) {}
+import { r as useTranslation } from "./translation-BFxyJ1c5.js";
+import { n as IconButton } from "./Button-oj6H8OrC.js";
+import { t as useAnalyticsContext } from "./useAnalyticsContext-BVFDMrVE.js";
+import { a as translateTranslatable } from "./utils-B807QaDx.js";
+import { y as isEmpty } from "./validatorUtils-DRapRJ6z.js";
+import { t as Header } from "./Header-CPmJyuoP.js";
+import { t as Image } from "./Image-BEzOZ1tt.js";
+import { t as List } from "./List-DLrcpMVd.js";
+import { t as StructuredList } from "./StructuredList-w0Z2zLTk.js";
+import { t as ErrorPanel } from "./ErrorPanel-B536hgSc.js";
+import { t as trackNavigation } from "./trackNavigation-LvCP5Vyc.js";
+import { t as createFormUtils } from "./formUtils-DCvL3uZG.js";
+import { t as getRoleName } from "./roleMetadata-CP3ZYYSI.js";
+import { t as isSummaryItem } from "./summaryItem-Dehjwp8D.js";
+import { lazy } from "preact/compat";
+import { jsx, jsxs } from "preact/jsx-runtime";
+var Summary_module_default = {
+	summary: "adyen-kyc-summary",
+	"summary-content": "adyen-kyc-summary-content",
+	summaryContent: "adyen-kyc-summary-content",
+	"summary-list": "adyen-kyc-summary-list",
+	summaryList: "adyen-kyc-summary-list",
+	"summary-list-header": "adyen-kyc-summary-list-header",
+	summaryListHeader: "adyen-kyc-summary-list-header",
+	"summary-list-header-title": "adyen-kyc-summary-list-header-title",
+	summaryListHeaderTitle: "adyen-kyc-summary-list-header-title",
+	"summary-list-item": "adyen-kyc-summary-list-item",
+	summaryListItem: "adyen-kyc-summary-list-item",
+	"summary-list-item-key": "adyen-kyc-summary-list-item-key",
+	summaryListItemKey: "adyen-kyc-summary-list-item-key",
+	"summary-list-item-value": "adyen-kyc-summary-list-item-value",
+	summaryListItemValue: "adyen-kyc-summary-list-item-value",
+	"summary-content-legal-caption": "adyen-kyc-summary-content-legal-caption",
+	summaryContentLegalCaption: "adyen-kyc-summary-content-legal-caption",
+	"summary-content-list": "adyen-kyc-summary-content-list",
+	summaryContentList: "adyen-kyc-summary-content-list",
+	"summary-content-logo": "adyen-kyc-summary-content-logo",
+	summaryContentLogo: "adyen-kyc-summary-content-logo"
+};
+//#endregion
+//#region src/components/Shared/Summary/Summary.tsx
+var onfidoLogo = lazy(() => import("./onfido-logo-Df1iPjUq.js"));
+var summaryStep = {
+	formId: "summary",
+	formName: "summary"
+};
+/** @deprecated, use NewSummary */
+function Summary({ data, forms, gotoForm, labels, problems, omitted = {}, showFormHeader = true, showSectionHeader = true, showLegalCaption = false, showTaxExemptedLegalCaption = false, useStructuredList = false }) {
+	const { t } = useTranslation("common");
+	const userEvents = useAnalyticsContext();
+	const editForm = (formId) => {
+		const formIndex = forms.findIndex((form) => form.formId === formId);
+		if (formIndex >= 0) gotoForm(formIndex);
+	};
+	const allValidationErrors = problems?.validationErrors && Object.values(problems.validationErrors)?.reduce((acc, validError) => ({
+		...acc,
+		...validError
+	}), {});
+	const allVerificationErrors = problems?.verificationErrors && Object.values(problems.verificationErrors)?.reduce((acc, verifError) => ({
+		...acc,
+		...verifError
+	}), {});
+	const formUtils = createFormUtils({ labels }, t);
+	const summarySectionHeader = (formName, formId) => /* @__PURE__ */ jsxs("header", {
+		className: Summary_module_default.summaryListHeader,
+		children: [/* @__PURE__ */ jsx("h2", {
+			className: Summary_module_default.summaryListHeaderTitle,
+			children: formName
+		}), !omitted.summaryEditButton?.includes(formId) && /* @__PURE__ */ jsx(IconButton, {
+			variant: "tertiary",
+			icon: "edit",
+			onClick: () => {
+				trackNavigation({
+					userEvents,
+					actionType: "edit",
+					toForm: formName,
+					label: "Pencil icon"
+				});
+				editForm(formId);
+			},
+			ariaLabel: t(($) => $["editForm"], { formName })
+		})]
+	});
+	const renderSummarySection = (fieldData, labelData = {}, formName, formId, useStructuredList) => {
+		const structuredListItems = Object.entries(fieldData).map(([key, value]) => {
+			return {
+				term: t(($) => $[labelData[key] || key]),
+				details: value
+			};
+		});
+		return !useStructuredList ? /* @__PURE__ */ jsxs(List, {
+			variant: "grouped-secondary",
+			children: [showSectionHeader && summarySectionHeader(formName, formId), /* @__PURE__ */ jsx("dl", {
+				className: Summary_module_default.summaryList,
+				children: Array.isArray(fieldData) ? fieldData.map((item) => renderBulletedListField(item)) : renderSummaryItems(fieldData, labelData)
+			})]
+		}) : /* @__PURE__ */ jsxs(List, {
+			variant: "grouped-secondary",
+			children: [showSectionHeader && summarySectionHeader(formName, formId), /* @__PURE__ */ jsx(StructuredList, { items: structuredListItems })]
+		});
+	};
+	const renderSummaryContent = (summaryData, useStructuredList) => {
+		const summaryList = [];
+		forms.forEach(({ formId, formName }) => {
+			const currentFormData = summaryData[formId];
+			if (!currentFormData || Object.values(currentFormData).every((value) => isEmpty(value)) || formId === summaryStep.formId || omitted.forms?.includes(formId)) return;
+			const summaryItems = currentFormData.hasInnerForms ? renderInnerForms(labels?.[formId], formId, currentFormData) : renderSummarySection(currentFormData, labels?.[formId], t(($) => $[typeof labels?.[formId] === "string" ? labels[formId] : formName]), formId, useStructuredList);
+			summaryList.push(summaryItems);
+		});
+		return summaryList;
+	};
+	const renderInnerForms = (labelData, parentFormId, innerForms = {}) => {
+		if (!innerForms) return [];
+		const dataList = [];
+		Object.entries(innerForms).forEach(([innerFormName, innerFormFieldData]) => {
+			const formName = t(($) => $[labelData?.[innerFormName] || innerFormName]);
+			if (typeof innerFormFieldData === "object" && innerFormFieldData !== null) {
+				if (Object.values(innerFormFieldData).every((value) => isEmpty(value))) return;
+				dataList.push(renderSummarySection(innerFormFieldData, labelData, formName, parentFormId));
+			}
+		});
+		return dataList;
+	};
+	/**
+	* Renders a single label-value pair as a field in the summary section.
+	*
+	* This helper function creates the markup for a single piece of data,
+	* displaying a label and its corresponding value using a definition list
+	* for semantic correctness (`<dt>` for label, `<dd>` for data).
+	*
+	* @param label The translated label to display for the field.
+	* @param value The value of the field, which can be a simple string or a JSX element for more complex rendering.
+	* @returns A JSX element representing the summary field.
+	*/
+	const renderField = (label, value) => /* @__PURE__ */ jsxs("div", {
+		className: Summary_module_default.summaryListItem,
+		children: [/* @__PURE__ */ jsx("dt", {
+			className: Summary_module_default.summaryListItemKey,
+			children: label
+		}), /* @__PURE__ */ jsx("dd", {
+			className: Summary_module_default.summaryListItemValue,
+			children: value
+		})]
+	});
+	const renderBulletedListField = (item) => /* @__PURE__ */ jsx("ul", {
+		className: Summary_module_default.summaryContentList,
+		children: /* @__PURE__ */ jsx("li", { children: item })
+	});
+	/**
+	* Recursively renders the data fields for a summary section.
+	*
+	* This function iterates through the properties of the `formData` object.
+	* It handles different data types by:
+	* - Displaying simple string or number values with their corresponding labels.
+	* - Handling 'role' arrays specifically to show a comma-separated list of roles.
+	* - Recognizing and rendering `SummaryItem` objects with their custom labels and values.
+	* - Recursively calling itself for nested objects to render their properties.
+	*
+	* Fields listed in the `omitted.keys` prop are skipped.
+	*
+	* @param formData The data object for the current section, containing key-value pairs to be rendered.
+	* @param labelData A map of field keys to their corresponding translation keys for fetching display labels.
+	* @returns An array of JSX elements representing the rendered summary fields for the section.
+	*/
+	const renderSummaryItems = (formData = {}, labelData = {}) => {
+		if (!formData) return [];
+		if (formData?.idVerificationMethod === "instantVerification") return [renderField(t(($) => $["verificationMethod"]), /* @__PURE__ */ jsx(Image, {
+			lazyLoadedImage: onfidoLogo,
+			className: Summary_module_default.summaryContentLogo,
+			alt: "onfido-logo"
+		}))];
+		const dataList = [];
+		Object.entries(formData).forEach(([field, fieldData]) => {
+			if (omitted.keys?.includes(field) || !fieldData) return;
+			const fieldName = t(($) => $[labelData[field] || field]);
+			if (field === "role" && Array.isArray(fieldData)) {
+				const label = fieldData.length > 1 ? t(($) => $["roles"]) : fieldName;
+				const roles = fieldData.map((role) => t(($) => $[getRoleName(role)])).join(", ");
+				dataList.push(renderField(label, roles));
+			} else if (isSummaryItem(fieldData)) {
+				const { summaryLabel, summaryValue, preTranslated } = fieldData;
+				if (preTranslated) dataList.push(renderField(summaryLabel, summaryValue));
+				else dataList.push(renderField(translateTranslatable(t, summaryLabel) ?? "", summaryValue));
+			} else if (typeof fieldData === "object") dataList.push(renderSummaryItems(fieldData, labelData));
+			else if (["string", "number"].includes(typeof fieldData)) dataList.push(renderField(fieldName, fieldData));
+		});
+		return dataList;
+	};
+	return /* @__PURE__ */ jsxs("div", {
+		role: "region",
+		className: Summary_module_default.summary,
+		children: [showFormHeader && /* @__PURE__ */ jsx(Header, {
+			title: t(($) => $["summary"]),
+			description: t(($) => $["summaryDescription"])
+		}), /* @__PURE__ */ jsxs("div", {
+			className: Summary_module_default.summaryContent,
+			children: [
+				/* @__PURE__ */ jsx(ErrorPanel, {
+					validationErrors: allValidationErrors,
+					verificationErrors: allVerificationErrors,
+					formUtils,
+					id: "ariaErrorField"
+				}),
+				renderSummaryContent(data, useStructuredList),
+				showLegalCaption && /* @__PURE__ */ jsx("div", {
+					className: Summary_module_default.summaryContentLegalCaption,
+					children: t(($) => $["summaryLegalCaption"])
+				}),
+				showTaxExemptedLegalCaption && /* @__PURE__ */ jsxs("div", {
+					className: Summary_module_default.summaryContentLegalCaption,
+					children: [/* @__PURE__ */ jsx("p", { children: t(($) => $["summaryTaxExemptionLegalCaptionTitle"]) }), /* @__PURE__ */ jsxs("ul", { children: [
+						/* @__PURE__ */ jsx("li", { children: t(($) => $["summaryTaxExemptionLegalCaption_1"]) }),
+						/* @__PURE__ */ jsx("li", { children: t(($) => $["summaryTaxExemptionLegalCaption_2"]) }),
+						/* @__PURE__ */ jsx("li", { children: t(($) => $["summaryTaxExemptionLegalCaption_3"]) })
+					] })]
+				})
+			]
+		})]
+	});
+}
+//#endregion
+export { summaryStep as n, Summary_module_default as r, Summary as t };

package/dist/TaskVerificationStatus-kCWYhocq.js

@@ -0,0 +1,118 @@
+try {
+	let e = "undefined" != typeof window ? window : "undefined" != typeof global ? global : "undefined" != typeof globalThis ? globalThis : "undefined" != typeof self ? self : {}, n = new e.Error().stack;
+	n && (e._sentryDebugIds = e._sentryDebugIds || {}, e._sentryDebugIds[n] = "394f4b3f-d95a-4399-b0b4-d2f874f7391a", e._sentryDebugIdIdentifier = "sentry-dbid-394f4b3f-d95a-4399-b0b4-d2f874f7391a");
+} catch (e) {}
+import { a as Icon, r as useTranslation } from "./translation-BFxyJ1c5.js";
+import { r as TaskStatuses } from "./taskStatus-C7XU4UIF.js";
+import cx from "classnames";
+import { jsx, jsxs } from "preact/jsx-runtime";
+var Status_module_default = {
+	status: "adyen-kyc-status",
+	"status-icon": "adyen-kyc-status-icon",
+	statusIcon: "adyen-kyc-status-icon",
+	"status-text": "adyen-kyc-status-text",
+	statusText: "adyen-kyc-status-text",
+	"status-text-responsive": "adyen-kyc-status-text-responsive",
+	statusTextResponsive: "adyen-kyc-status-text-responsive",
+	"status-neutral": "adyen-kyc-status-neutral",
+	statusNeutral: "adyen-kyc-status-neutral",
+	"status-error": "adyen-kyc-status-error",
+	statusError: "adyen-kyc-status-error",
+	"status-warning": "adyen-kyc-status-warning",
+	statusWarning: "adyen-kyc-status-warning",
+	"status-success": "adyen-kyc-status-success",
+	statusSuccess: "adyen-kyc-status-success"
+};
+//#endregion
+//#region src/components/ui/atoms/Status/Status.tsx
+/**
+* Displays a UI for visually discribing a success, error, warning or neutral status.
+*
+*
+* @example
+* ```jsx
+* <Status icon="checkmark" text="Complete" variant="success" />
+* ```
+*
+* @param text String (required)
+* @param icon IconName. Default: 'circle-small-filled'.
+* @param variant 'success', 'error', 'neutral', 'warning'. Default: 'neutral'.
+*/
+var variantStyles = {
+	success: Status_module_default.statusSuccess,
+	error: Status_module_default.statusError,
+	neutral: Status_module_default.statusNeutral,
+	warning: Status_module_default.statusWarning
+};
+var Status = ({ text, icon = "circle-small-filled", variant = "neutral", responsive = true }) => {
+	const rootClassname = cx(Status_module_default.status, variantStyles[variant]);
+	const textClassname = cx(Status_module_default.statusText, { [Status_module_default.statusTextResponsive]: responsive });
+	return /* @__PURE__ */ jsxs("div", {
+		role: "status",
+		className: rootClassname,
+		children: [/* @__PURE__ */ jsx("div", {
+			className: Status_module_default.statusIcon,
+			children: /* @__PURE__ */ jsx(Icon, { name: icon })
+		}), /* @__PURE__ */ jsx("div", {
+			className: textClassname,
+			children: text
+		})]
+	});
+};
+//#endregion
+//#region src/components/Shared/TaskVerificationStatus/TaskVerificationStatus.tsx
+/**
+* Displays a Task/Verification Status for an entity.
+*
+*
+* @example
+* ```jsx
+* <TaskVerificationStatus status={TaskStatus} />
+* ```
+*
+* @param status TaskStatus (required)
+*/
+var TaskVerificationStatus = ({ status, responsive }) => {
+	const { t } = useTranslation("ui");
+	switch (status) {
+		case TaskStatuses.DETAILS_REQUIRED: return /* @__PURE__ */ jsx(Status, {
+			icon: "warning",
+			text: t(($) => $["incomplete"]),
+			variant: "warning",
+			responsive
+		});
+		case TaskStatuses.ERROR: return /* @__PURE__ */ jsx(Status, {
+			icon: "field-error",
+			text: t(($) => $["actionNeeded"]),
+			variant: "error",
+			responsive
+		});
+		case TaskStatuses.FINISHED: return /* @__PURE__ */ jsx(Status, {
+			icon: "checkmark",
+			text: t(($) => $["verified"]),
+			variant: "success",
+			responsive
+		});
+		case TaskStatuses.PROCESSING: return /* @__PURE__ */ jsx(Status, {
+			icon: "clock",
+			text: t(($) => $["inReview"]),
+			responsive
+		});
+		case TaskStatuses.DOWNLOAD:
+		case TaskStatuses.SIGNED: return /* @__PURE__ */ jsx(Status, {
+			icon: "checkmark",
+			text: t(($) => $["signed"]),
+			variant: "success",
+			responsive
+		});
+		case "inviteSent": return /* @__PURE__ */ jsx(Status, {
+			icon: "mail",
+			text: t(($) => $["inviteSent"]),
+			variant: "neutral",
+			responsive
+		});
+		default: return null;
+	}
+};
+//#endregion
+export { TaskVerificationStatus as t };