@adyen/kyc-components/dist/EmbeddedStatus-C0cKHgzR.js

This guide assumes that you have already an account with Adyen. A legalEntity needs to be created, and you need to have a `legalEntityId` to instatiate a Component.

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] = "afade1bc-44f7-4e9b-b0f6-cda0460b7dcc", e._sentryDebugIdIdentifier = "sentry-dbid-afade1bc-44f7-4e9b-b0f6-cda0460b7dcc");
} catch (e) {}
import { i as Typography, r as useTranslation } from "./translation-BFxyJ1c5.js";
import { r as TaskStatuses } from "./taskStatus-C7XU4UIF.js";
import { n as Skeleton } from "./Accordion-Btxq6sGi.js";
import { t as Avatar } from "./Avatar-CKmUpMXT.js";
import { t as OnboardingStatuses } from "./view-verification-status-CYHM_Ggf.js";
import { t as Tag } from "./Tag-BhU73i1R.js";
import cx from "classnames";
import { Fragment, jsx, jsxs } from "preact/jsx-runtime";
var EmbeddedStatus_module_default = {
	"embedded-status": "adyen-kyc-embedded-status",
	embeddedStatus: "adyen-kyc-embedded-status",
	"embedded-status-loading": "adyen-kyc-embedded-status-loading",
	embeddedStatusLoading: "adyen-kyc-embedded-status-loading",
	"embedded-status-avatar": "adyen-kyc-embedded-status-avatar",
	embeddedStatusAvatar: "adyen-kyc-embedded-status-avatar",
	"embedded-status-action-indicator": "adyen-kyc-embedded-status-action-indicator",
	embeddedStatusActionIndicator: "adyen-kyc-embedded-status-action-indicator",
	"embedded-status-info": "adyen-kyc-embedded-status-info",
	embeddedStatusInfo: "adyen-kyc-embedded-status-info"
};
//#endregion
//#region src/components/ui/molecules/EmbeddedStatus/statusToTag.ts
/**
* Maps a Status to Tag-compatible props
* Similar to TaskItemStatus (without the css class overrides),
* and should ideally handle view-verification-status as well
*/
var statusToTag = (status, uiT) => {
	switch (status) {
		case TaskStatuses.FINISHED:
		case OnboardingStatuses.VERIFIED: return {
			text: uiT(($) => $["verified"]),
			variant: "green"
		};
		case TaskStatuses.SIGNED:
		case OnboardingStatuses.REJECTED: return {
			text: uiT(($) => $["rejected"]),
			variant: "red"
		};
		case TaskStatuses.ERROR: return {
			text: uiT(($) => $["actionNeeded"]),
			variant: "red"
		};
		case TaskStatuses.PROCESSING:
		case OnboardingStatuses.IN_REVIEW:
		case OnboardingStatuses.AWAITING_DATA: return {
			text: uiT(($) => $["inReview"]),
			variant: "grey"
		};
		case OnboardingStatuses.UNSUCCESSFUL: return {
			text: uiT(($) => $["unsuccessful"]),
			variant: "red"
		};
		default: return;
	}
};
//#endregion
//#region src/components/ui/molecules/EmbeddedStatus/EmbeddedStatus.tsx
/**
* UI-only component used to display a tag based on status or an action button
*/
var EmbeddedStatus = ({ title, subtitle, status, tag, iconName = "user", loading = false, onClick, light = false, className, actionIndicator, ...props }) => {
	const { t } = useTranslation("ui");
	const statusTag = status ? statusToTag(status, t) : tag;
	const avatarVariant = light ? "tertiary" : "secondary";
	return /* @__PURE__ */ jsxs("button", {
		type: "button",
		className: cx(className, EmbeddedStatus_module_default.embeddedStatus, "adyen-kyc-externalComponent", {
			[EmbeddedStatus_module_default.embeddedStatusLoading]: loading,
			[EmbeddedStatus_module_default.embeddedStatusLight]: light
		}),
		onClick,
		...props,
		children: [
			loading ? /* @__PURE__ */ jsx(Skeleton, {
				height: "44px",
				width: "44px",
				circle: true
			}) : /* @__PURE__ */ jsx(Avatar, {
				iconName,
				variant: avatarVariant,
				circle: true
			}),
			/* @__PURE__ */ jsx("section", {
				className: EmbeddedStatus_module_default.embeddedStatusInfo,
				children: loading ? /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx(Skeleton, {
					text: true,
					width: "20ch",
					height: "1em"
				}), /* @__PURE__ */ jsx(Skeleton, {
					text: true,
					width: "90%",
					height: "1em"
				})] }) : /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx(Typography, {
					variant: "body-stronger",
					el: "h3",
					children: title
				}), /* @__PURE__ */ jsx(Typography, {
					variant: "caption",
					color: "secondary",
					el: "div",
					children: subtitle
				})] })
			}),
			actionIndicator ? /* @__PURE__ */ jsx("section", { children: loading ? /* @__PURE__ */ jsx(Skeleton, {
				width: "5em",
				height: "2em"
			}) : /* @__PURE__ */ jsx(Typography, {
				el: "div",
				variant: "body-stronger",
				className: EmbeddedStatus_module_default.embeddedStatusActionIndicator,
				children: actionIndicator.text
			}) }) : statusTag?.text && /* @__PURE__ */ jsx("section", { children: loading ? /* @__PURE__ */ jsx(Skeleton, {
				width: "8ch",
				height: "1em"
			}) : /* @__PURE__ */ jsx(Tag, {
				variant: statusTag.variant,
				children: statusTag.text
			}) })
		]
	});
};
//#endregion
export { statusToTag as n, EmbeddedStatus as t };