@adyen/kyc-components
Version:
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.
129 lines (128 loc) • 4.86 kB
JavaScript
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] = "62ad5900-787a-493a-89ab-e5c4c1039162", e._sentryDebugIdIdentifier = "sentry-dbid-62ad5900-787a-493a-89ab-e5c4c1039162");
} catch (e) {}
import { i as Typography, r as useTranslation } from "./translation-BYvhW5zA.js";
import { i as TaskStatuses } from "./taskStatus-BtekPA8E.js";
import { n as Skeleton } from "./Accordion-IXKjwyLD.js";
import { t as Avatar } from "./Avatar-CdBNstmD.js";
import { t as OnboardingStatuses } from "./view-verification-status-XSQs02td.js";
import { t as Tag } from "./Tag-CNeDHqKp.js";
import cx from "classnames";
import { Fragment, jsx, jsxs } from "preact/jsx-runtime";
var EmbeddedStatus_module_default = {
"embedded-status": "_embedded-status_h6wfu_1",
embeddedStatus: "_embedded-status_h6wfu_1",
"embedded-status-loading": "_embedded-status-loading_h6wfu_17",
embeddedStatusLoading: "_embedded-status-loading_h6wfu_17",
"embedded-status-avatar": "_embedded-status-avatar_h6wfu_20",
embeddedStatusAvatar: "_embedded-status-avatar_h6wfu_20",
"embedded-status-action-indicator": "_embedded-status-action-indicator_h6wfu_30",
embeddedStatusActionIndicator: "_embedded-status-action-indicator_h6wfu_30",
"embedded-status-info": "_embedded-status-info_h6wfu_53",
embeddedStatusInfo: "_embedded-status-info_h6wfu_53"
};
//#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, {
[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 };