@adyen/kyc-components
Version:
`adyen-kyc-components` provides the required pieces to build an onboarding flow based on a legal entity. To onboard and verify users, you need to create a user interface (UI) to collect user data. To speed up building your integration, Adyen offers onboar
221 lines (220 loc) • 9.46 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] = "da3bbdc0-9687-47ba-949e-fc0f0689b0fd", e._sentryDebugIdIdentifier = "sentry-dbid-da3bbdc0-9687-47ba-949e-fc0f0689b0fd");
} catch (e) {
}
}
;
import { jsx, jsxs } from "preact/jsx-runtime";
import { useState, useEffect } from "preact/hooks";
import { p as useLegalEntity, q as Loader, Y as useGetTaskStatus, u as useI18nContext, n as useAnalyticsContext, r as useToastContext, Z as useUpdateLegalEntity, _ as getOwnDecisionMakers, $ as getAvailableDecisionMakerRoleTypes, a0 as useDataMissingRemediations, i as TaskTypes, a1 as getAllowedDecisionMakerRoles, X as DropinLayout, W as FormHeader, a2 as EntityGuidanceStatus, a3 as iconStatus, a4 as ContextGuidance, a5 as DecisionMakerType, a6 as Alert, a7 as CardGroup, a8 as EntityAssociation, B as Button, a9 as ActionBar } from "./core-B_WrZP-J.js";
const DecisionMakers = (props) => {
const { data, isLoading } = useLegalEntity();
if (isLoading || !data) {
return /* @__PURE__ */ jsx(Loader, {});
}
return /* @__PURE__ */ jsx(DecisionMakersInner, { ...props, legalEntity: data });
};
const DecisionMakersInner = ({
legalEntity,
capabilityProblems,
onNavigateToIndividual,
navigateBackToTaskList,
trustedEntityAssociations
}) => {
const getTaskStatus = useGetTaskStatus();
const { i18n } = useI18nContext();
const userEvents = useAnalyticsContext();
const { showToast } = useToastContext();
const [isRemoveDisabled, setIsRemoveDisabled] = useState(false);
const updateLegalEntity = useUpdateLegalEntity();
const decisionMakers = getOwnDecisionMakers(legalEntity);
const registeredCountry = legalEntity.organization.registeredAddress.country;
const availableDecisionMakers = getAvailableDecisionMakerRoleTypes(registeredCountry);
const translationKeys = {
home: "saveAndGoToOverview"
};
const { remediationMessages } = useDataMissingRemediations({
legalEntityId: legalEntity.id,
problems: capabilityProblems
});
const mappedDecisionMakers = decisionMakers == null ? void 0 : decisionMakers.reduce(
(mappedDecisionMakers2, decisionMaker) => {
var _a;
if (!decisionMaker.legalEntityId) return {};
const mappedDecisionMaker = mappedDecisionMakers2[decisionMaker.legalEntityId];
const decisionMakerType = decisionMaker.type;
mappedDecisionMakers2[decisionMaker.legalEntityId] = {
reference: decisionMaker.legalEntityId,
types: mappedDecisionMaker ? [...mappedDecisionMaker.types, decisionMakerType] : [decisionMakerType],
status: getTaskStatus(TaskTypes.DECISION_MAKER, decisionMaker.legalEntityId),
name: decisionMaker.name ?? "",
legalEntityType: decisionMaker.entityType,
problems: (_a = capabilityProblems == null ? void 0 : capabilityProblems.LegalEntity) == null ? void 0 : _a[decisionMaker.legalEntityId]
};
return mappedDecisionMakers2;
},
{}
);
const uniqueDecisionMakers = mappedDecisionMakers ? Object.values(mappedDecisionMakers) : [];
const showWarning = Boolean(remediationMessages.DECISION_MAKER && uniqueDecisionMakers.length);
useEffect(() => {
userEvents.addTaskEvent("Landed on page", {
actionType: "start"
});
}, [userEvents]);
useEffect(() => {
if (showWarning) {
userEvents.addTaskEvent("Encountered error", {
task: TaskTypes.DECISION_MAKER_OVERVIEW,
actionType: "alert",
label: "missingDecisionMaker"
});
}
}, [remediationMessages.DECISION_MAKER, showWarning, userEvents]);
const uniqueDecisionMakersPerType = (roleType) => uniqueDecisionMakers.filter(({ types }) => types.includes(roleType)).length;
const allowedDecisionMakerTypes = getAllowedDecisionMakerRoles(
legalEntity,
TaskTypes.DECISION_MAKER
);
const haveMaxDecisionMakers = allowedDecisionMakerTypes.length === 0;
const getDecisionMakerTrackingParams = (decisionMaker) => ({
task: TaskTypes.DECISION_MAKER_OVERVIEW,
associatedLegalEntityId: decisionMaker.reference,
associatedLegalEntityType: decisionMaker.legalEntityType,
roles: decisionMaker.types
});
const addDecisionMakerOnClick = (e) => {
e.stopPropagation();
onNavigateToIndividual();
};
const editDecisionMaker = (decisionMaker) => {
onNavigateToIndividual(decisionMaker.reference);
userEvents.addTaskEvent("Clicked button", {
...getDecisionMakerTrackingParams(decisionMaker),
actionType: "edit"
});
};
const deleteDecisionMaker = async (decisionMaker) => {
try {
const updatedEntityAssociations = {
entityAssociations: (legalEntity.entityAssociations ?? []).filter(
(entityAssociation) => entityAssociation.legalEntityId !== decisionMaker.reference
)
};
await updateLegalEntity.mutateAsync({ ...updatedEntityAssociations, id: legalEntity.id });
const remainingDecisionMakers = decisionMakers.filter(
(curr) => curr.legalEntityId !== decisionMaker.reference
);
userEvents.addTaskEvent("Clicked button", {
...getDecisionMakerTrackingParams(decisionMaker),
actionType: "remove",
remainingDecisionMakers
});
showToast({ variant: "success", label: i18n.get("successFullyRemovedDecisionMaker") });
} catch {
showToast({ variant: "error", label: i18n.get("failedToRemoveDecisionMaker") });
}
};
return /* @__PURE__ */ jsx(
DropinLayout,
{
content: /* @__PURE__ */ jsxs("div", { className: "adyen-kyc-decision-makers adyen-kyc-u-width-full", children: [
/* @__PURE__ */ jsx(
FormHeader,
{
heading: i18n.get("decisionMaker"),
description: i18n.get("decisionMakerDescription")
}
),
/* @__PURE__ */ jsx("div", { className: "adyen-kyc-decision-makers__container", children: availableDecisionMakers.map(({ roleType, min }) => /* @__PURE__ */ jsx(
EntityGuidanceStatus,
{
country: registeredCountry,
currentTask: TaskTypes.DECISION_MAKER_OVERVIEW,
entityLabel: roleType,
status: iconStatus(uniqueDecisionMakersPerType(roleType), min)
},
roleType
)) }),
/* @__PURE__ */ jsx(
ContextGuidance,
{
title: i18n.get("whatIsTheDifferenceBetweenTheseRoles"),
content: /* @__PURE__ */ jsx("ul", { className: "adyen-kyc-guidance-list", children: availableDecisionMakers.map(({ roleType }) => /* @__PURE__ */ jsx(
"li",
{
dangerouslySetInnerHTML: {
__html: i18n.get(
// Map from API names to internal names
`${roleType === DecisionMakerType.CONTROLLING_PERSON ? "controllingPerson" : roleType === DecisionMakerType.OWNER ? "owner" : roleType}GuideDescription`
)
}
},
roleType
)) }),
titleId: "whatIsTheDifferenceBetweenTheseRoles",
contentId: "differenceBetweenAnOwnerControllingPersonAndSignatory"
}
),
showWarning && /* @__PURE__ */ jsx(
Alert,
{
className: "adyen-kyc-decision-makers__warning",
title: remediationMessages.DECISION_MAKER,
variant: "warning"
}
),
(uniqueDecisionMakers == null ? void 0 : uniqueDecisionMakers.length) > 0 ? /* @__PURE__ */ jsx(CardGroup, { children: uniqueDecisionMakers.map((decisionMaker) => /* @__PURE__ */ jsx(
EntityAssociation,
{
types: decisionMaker.types,
name: decisionMaker.name,
status: decisionMaker.status,
onNavigateToEntity: () => editDecisionMaker(decisionMaker),
problems: decisionMaker == null ? void 0 : decisionMaker.problems,
removeEntity: () => {
deleteDecisionMaker(decisionMaker);
},
isRemoveDisabled: isRemoveDisabled || (trustedEntityAssociations ?? []).some(
(ea) => ea.reference === decisionMaker.reference
),
handleIsRemoveDisabled: setIsRemoveDisabled
},
decisionMaker.reference
)) }) : null,
/* @__PURE__ */ jsx("div", { className: "adyen-kyc-decision-makers__actions", children: /* @__PURE__ */ jsx(
Button,
{
variant: "secondary",
icon: "plus",
onClick: addDecisionMakerOnClick,
disabled: haveMaxDecisionMakers,
fullWidth: true,
children: i18n.get("addDecisionMaker")
}
) }),
/* @__PURE__ */ jsx(
ActionBar,
{
onHome: () => {
userEvents.addTaskEvent("Clicked button", {
task: TaskTypes.DECISION_MAKER_OVERVIEW,
actionType: "back",
label: translationKeys.home,
noOfDecisionMakers: decisionMakers.length
});
navigateBackToTaskList();
},
homeButtonLabel: i18n.get(translationKeys.home)
}
)
] })
}
);
};
export {
DecisionMakers
};