@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.
164 lines (163 loc) • 6.76 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] = "9fa238db-02d6-4942-a3e6-7778b431e8e9", e._sentryDebugIdIdentifier = "sentry-dbid-9fa238db-02d6-4942-a3e6-7778b431e8e9");
} catch (e) {}
import { r as useTranslation } from "./translation-BFxyJ1c5.js";
import { n as IconButton, t as Button } from "./Button-oj6H8OrC.js";
import { t as TaskVerificationStatus } from "./TaskVerificationStatus-kCWYhocq.js";
import { r as TaskStatuses } from "./taskStatus-C7XU4UIF.js";
import { t as Card } from "./Card-vYndix5Y.js";
import { t as VerificationErrorAlert } from "./VerificationErrorAlert-DR3lTJhB.js";
import { t as Confirm } from "./Confirm-B6TWSuab.js";
import { n as getRoleTagVariant, t as getRoleName } from "./roleMetadata-CP3ZYYSI.js";
import { t as Tag } from "./Tag-BhU73i1R.js";
import { useCallback, useEffect, useRef, useState } from "preact/hooks";
import { jsx, jsxs } from "preact/jsx-runtime";
//#region src/hooks/useClickAwayListener.tsx
function useClickAwayListener(ref, onClickAway) {
const handleClickAway = useCallback((event) => {
if (ref.current && !event.composedPath().includes(ref.current)) onClickAway();
}, [ref, onClickAway]);
useEffect(() => {
document.addEventListener("mousedown", handleClickAway);
return () => {
document.removeEventListener("mousedown", handleClickAway);
};
}, [handleClickAway]);
}
var ClickAwayWrapper = ({ children, onClickAway, ...divProps }) => {
const ref = useRef(null);
useClickAwayListener(ref, onClickAway);
return /* @__PURE__ */ jsx("div", {
ref,
...divProps,
children
});
};
var ActionsMenu_module_default = {
"actions-menu": "adyen-kyc-actions-menu",
actionsMenu: "adyen-kyc-actions-menu",
"actions-menu-option": "adyen-kyc-actions-menu-option",
actionsMenuOption: "adyen-kyc-actions-menu-option"
};
//#endregion
//#region src/components/ui/atoms/ActionsMenu/ActionsMenu.tsx
var ActionsMenu = ({ options, open, setOpen }) => {
const menuItems = options.map(({ label, onSelect, icon }) => /* @__PURE__ */ jsx(Button, {
onClick: (event) => {
event.stopPropagation();
setOpen(false);
onSelect();
},
variant: "tertiary",
icon,
children: label
}, label));
return open ? /* @__PURE__ */ jsx(ClickAwayWrapper, {
onClickAway: () => {
setOpen(false);
},
className: ActionsMenu_module_default.actionsMenu,
role: "menu",
children: menuItems
}) : null;
};
var EntityAssociation_module_default = {
"entity-association-wrapper": "adyen-kyc-entity-association-wrapper",
entityAssociationWrapper: "adyen-kyc-entity-association-wrapper",
"entity-association": "adyen-kyc-entity-association",
entityAssociation: "adyen-kyc-entity-association",
"entity-association-top": "adyen-kyc-entity-association-top",
entityAssociationTop: "adyen-kyc-entity-association-top",
"entity-association-title": "adyen-kyc-entity-association-title",
entityAssociationTitle: "adyen-kyc-entity-association-title",
"entity-association-info": "adyen-kyc-entity-association-info",
entityAssociationInfo: "adyen-kyc-entity-association-info",
"entity-association-tag": "adyen-kyc-entity-association-tag",
entityAssociationTag: "adyen-kyc-entity-association-tag",
"entity-association-actions": "adyen-kyc-entity-association-actions",
entityAssociationActions: "adyen-kyc-entity-association-actions",
"entity-association-alert": "adyen-kyc-entity-association-alert",
entityAssociationAlert: "adyen-kyc-entity-association-alert",
card: "adyen-kyc-card"
};
//#endregion
//#region src/components/Shared/EntityAssociation/EntityAssociation.tsx
var EntityAssociation = ({ name, types, status, actions, problems, infoContent, onNavigateToEntity, deleteEntity, isDeleteDisabled }) => {
const { t } = useTranslation("common");
const [showingActions, setShowingActions] = useState(false);
const [isConfirmShown, setIsConfirmShown] = useState(false);
const isDeletable = !!deleteEntity;
const handleRemoveIntent = (event) => {
event.stopPropagation();
setIsConfirmShown(true);
};
const dismissConfirm = () => {
setIsConfirmShown(false);
};
return /* @__PURE__ */ jsxs("div", {
className: EntityAssociation_module_default.entityAssociationWrapper,
children: [/* @__PURE__ */ jsx(Card, {
onClick: onNavigateToEntity,
children: /* @__PURE__ */ jsxs("div", {
className: EntityAssociation_module_default.entityAssociation,
children: [
/* @__PURE__ */ jsxs("div", {
className: EntityAssociation_module_default.entityAssociationTop,
children: [/* @__PURE__ */ jsx("h3", {
className: EntityAssociation_module_default.entityAssociationTitle,
children: name
}), /* @__PURE__ */ jsxs("div", {
className: EntityAssociation_module_default.entityAssociationInfo,
children: [
/* @__PURE__ */ jsx(TaskVerificationStatus, { status }),
actions && /* @__PURE__ */ jsxs("div", {
className: EntityAssociation_module_default.entityAssociationActions,
children: [/* @__PURE__ */ jsx(IconButton, {
variant: "tertiary",
icon: "more-horiz",
onClick: (event) => {
event.stopPropagation();
setShowingActions(!showingActions);
},
ariaLabel: t(($) => $["toggleAssociationMenu"], { name })
}), /* @__PURE__ */ jsx(ActionsMenu, {
options: actions,
open: showingActions,
setOpen: setShowingActions
})]
}),
isDeletable && /* @__PURE__ */ jsx(IconButton, {
ariaLabel: t(($) => $["delete"]),
icon: "bin",
variant: "tertiary",
onClick: handleRemoveIntent,
disabled: isConfirmShown || isDeleteDisabled
})
]
})]
}),
/* @__PURE__ */ jsx("div", { children: types.map((type) => /* @__PURE__ */ jsx(Tag, {
className: EntityAssociation_module_default.entityAssociationTag,
variant: getRoleTagVariant(type),
children: t(($) => $[getRoleName(type)])
}, type)) }),
status === TaskStatuses.ERROR && /* @__PURE__ */ jsx(VerificationErrorAlert, {
className: EntityAssociation_module_default.entityAssociationAlert,
problems
}),
infoContent
]
})
}), isConfirmShown && isDeletable && /* @__PURE__ */ jsx(Confirm, {
title: t(($) => $["deleteItem"], { item: name }),
description: t(($) => $["thisActionIsPermanent"]),
onConfirm: deleteEntity,
confirmText: t(($) => $["delete"]),
onCancel: dismissConfirm,
critical: true
})]
});
};
//#endregion
export { EntityAssociation as t };