@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.
672 lines (671 loc) • 29.5 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] = "b1124c96-a7b4-45ae-8ebc-a9d309f97e19", e._sentryDebugIdIdentifier = "sentry-dbid-b1124c96-a7b4-45ae-8ebc-a9d309f97e19");
} catch (e) {}
import { i as Typography, n as addResourceBundles, r as useTranslation, t as Trans } from "./translation-BFxyJ1c5.js";
import { r as Loader, t as Button } from "./Button-oj6H8OrC.js";
import { r as useLegalEntity, t as ROOT_LE } from "./useLegalEntity-yxi9XhLi.js";
import { t as LegalEntityTypes } from "./legal-entity-type-VIfNYnJP.js";
import { t as useAnalyticsContext } from "./useAnalyticsContext-BVFDMrVE.js";
import { t as useToggleContext } from "./useToggleContext-DaQUBF8O.js";
import { t as _rolldown_dynamic_import_helper_default } from "./_rolldown_dynamic_import_helper-rq_tsyLP.js";
import { t as StackLayout } from "./StackLayout-Bhbj68nx.js";
import { t as TaskVerificationStatus } from "./TaskVerificationStatus-kCWYhocq.js";
import { r as TaskStatuses } from "./taskStatus-C7XU4UIF.js";
import { t as Header } from "./Header-CPmJyuoP.js";
import { t as Alert } from "./Alert-C6gL3JIt.js";
import { t as DropinLayout } from "./DropinLayout-Ce8IeTl4.js";
import { C as EntityTypes, T as DATA_MISSING_DECISION_MAKER_ERROR_CODE_MAPPING } from "./processCapabilities-DlZY9-Jc.js";
import { p as TaskTypes } from "./entityAssociationUtil-BEzUdPbm.js";
import { r as useGetTaskStatus } from "./globalStore-BjMds47R.js";
import { t as DecisionMakerTypes } from "./decision-maker-type-Cow3CpUd.js";
import { t as getAvailableDecisionMakerRoleTypes } from "./decisionMaker-j9cwyXuS.js";
import { r as getOwnDecisionMakers, t as getAllowedDecisionMakerRoles } from "./decisionMakerRoles-CAy-eeNV.js";
import { t as useToastContext } from "./useToastContext-CYgfHjSb.js";
import { t as useDataMissingRemediations } from "./useDataMissingRemediations-CARoFWDr.js";
import { n as useCapabilityProblems } from "./getProblemsForEntity-BLcIg3x_.js";
import { t as Modal } from "./Modal-CioQJ7Q7.js";
import { t as getTrustedEntityAssociations } from "./getTrustedFields-UVTLadau.js";
import { t as Image } from "./Image-BEzOZ1tt.js";
import { t as useScenarios } from "./useScenarios-BxrbVsQp.js";
import { a as individualFormDefaultData, i as GuidanceQuestionValues } from "./mapLegalEntityToIndividualSchema-D9JCcC77.js";
import { t as useUpdateLegalEntity } from "./useUpdateLegalEntity-CtaRaKZ6.js";
import { t as List } from "./List-DLrcpMVd.js";
import { t as useTaskLandedEvent } from "./useTaskLandedEvent-DInxWeqN.js";
import { t as LandingLayout } from "./LandingLayout-z8j2xiqg.js";
import { t as ContextGuidance } from "./ContextGuidance-DdoORtLt.js";
import { t as ListItem } from "./ListItem-BWH4IPrj.js";
import { i as useInvitationStatuses, n as getDecisionMakerDescription, t as DecisionMakerDetails } from "./DecisionMakerDetails-CYAI6xGa.js";
import { t as ActionBar } from "./ActionBar-Doac020y.js";
import { t as EntityAssociation } from "./EntityAssociation-DjHI99AZ.js";
import { n as iconStatus, t as EntityGuidanceStatus } from "./EntityGuidanceStatus-F9oxfzj4.js";
import { lazy } from "preact/compat";
import { useEffect as useEffect$1, useMemo as useMemo$1, useState as useState$1 } from "preact/hooks";
import { Fragment as Fragment$1, jsx, jsxs } from "preact/jsx-runtime";
//#region src/utils/not.ts
/**
* Inverts a boolean function. Very useful to use with {@link Array.filter}.
*
* E.g.
* ```typescript
* // this:
* const nonHumans = animals.filter(a => !isHuman(a));
* // becomes:
* const nonHumans = animals.filter(not(isHuman));
* ```
*/
var not = (fn) => (...args) => !fn(...args);
//#endregion
//#region src/components/Individual/tasks/DecisionMakers/DecisionMakerListItem/DecisionMakerListItem.tsx
function DecisionMakerListItem({ decisionMaker, openDecisionMakerModal, hasActiveInvitation }) {
const { t: individualT } = useTranslation("individual");
const description = getDecisionMakerDescription(decisionMaker.types, individualT);
return /* @__PURE__ */ jsx(ListItem, {
accessory: /* @__PURE__ */ jsx(TaskVerificationStatus, { status: hasActiveInvitation ? "inviteSent" : decisionMaker.status }),
avatar: {
iconName: "user",
circle: true
},
title: decisionMaker.name,
action: {
onClick: () => openDecisionMakerModal(decisionMaker),
disclosure: true
},
description
});
}
var DecisionMakersGettingStarted_module_default = {
"decision-makers-getting-started": "adyen-kyc-decision-makers-getting-started",
decisionMakersGettingStarted: "adyen-kyc-decision-makers-getting-started"
};
//#endregion
//#region src/components/Individual/tasks/DecisionMakers/DecisionMakersGettingStarted/DecisionMakersModalContent.tsx
var DecisionMakersModalContent = () => {
const { t } = useTranslation("individual");
return /* @__PURE__ */ jsxs("div", {
className: DecisionMakersGettingStarted_module_default.decisionMakersGettingStartedModal,
children: [
/* @__PURE__ */ jsx(Typography, {
variant: "title-l",
el: "h3",
className: "adyen-kyc-u-margin-bottom-40",
children: t(($) => $["moreAboutOwnersAndDecisionMakers"])
}),
/* @__PURE__ */ jsx(Typography, {
variant: "body-strongest",
el: "h4",
className: "adyen-kyc-u-margin-bottom-12",
children: t(($) => $["ownersAndDecisionMakersDescriptionQ1"])
}),
/* @__PURE__ */ jsx(Typography, {
el: "p",
className: "adyen-kyc-u-margin-bottom-32",
children: t(($) => $["ownersAndDecisionMakersDescriptionA1"])
}),
/* @__PURE__ */ jsx(Alert, {
title: t(($) => $["ownersDescriptionAlertTitle"]),
icon: false,
className: "adyen-kyc-u-margin-bottom-32",
children: t(($) => $["ownersAndDecisionMakersDescriptionAlertContent"])
}),
/* @__PURE__ */ jsx(Typography, {
variant: "body-strongest",
el: "h4",
className: "adyen-kyc-u-margin-bottom-12",
children: t(($) => $["ownersAndDecisionMakersDescriptionQ2"])
}),
/* @__PURE__ */ jsx(Typography, {
el: "p",
children: t(($) => $["ownersAndDecisionMakersDescriptionA2P1"])
}),
/* @__PURE__ */ jsx(Typography, {
el: "p",
className: "adyen-kyc-u-margin-bottom-32",
children: t(($) => $["ownersAndDecisionMakersDescriptionA2P2"])
}),
/* @__PURE__ */ jsx(Alert, {
title: t(($) => $["ownersDescriptionAlertTitle"]),
icon: false,
className: "adyen-kyc-u-margin-bottom-32",
children: t(($) => $["ownersDescriptionAlertContent"])
}),
/* @__PURE__ */ jsx(Typography, {
variant: "body-strongest",
el: "h4",
className: "adyen-kyc-u-margin-bottom-12",
children: t(($) => $["ownersAndDecisionMakersDescriptionQ3"])
}),
/* @__PURE__ */ jsx(Typography, {
el: "p",
className: "adyen-kyc-u-margin-bottom-32",
children: t(($) => $["ownersAndDecisionMakersDescriptionA3"])
}),
/* @__PURE__ */ jsx(Typography, {
variant: "body-strongest",
el: "h4",
className: "adyen-kyc-u-margin-bottom-12",
children: t(($) => $["ownersAndDecisionMakersDescriptionQ4"])
}),
/* @__PURE__ */ jsx(Typography, {
el: "p",
className: "adyen-kyc-u-margin-bottom-32",
children: t(($) => $["ownersAndDecisionMakersDescriptionA4"])
})
]
});
};
//#endregion
//#region src/components/Individual/tasks/DecisionMakers/DecisionMakersGettingStarted/DecisionMakersGettingStarted.tsx
var decisionMakerGroup = lazy(() => import("./decision-makers-group-BLkUEz0w.js"));
var DecisionMakersGettingStarted = ({ addDecisionMakerOnClick, handleCancelClick }) => {
const { t: commonT } = useTranslation("common");
const { t: individualT } = useTranslation("individual");
const userEvents = useAnalyticsContext();
const [isModalOpen, setIsModalOpen] = useState$1(false);
const openModal = () => {
userEvents.addPageEvent("Opened modal", {
actionType: "open",
label: "decisionMakersGettingStartedModal"
});
setIsModalOpen(true);
};
const closeModal = () => {
userEvents.addPageEvent("Closed modal", {
actionType: "close",
label: "decisionMakersGettingStartedModal"
});
setIsModalOpen(false);
};
return /* @__PURE__ */ jsxs("div", {
className: DecisionMakersGettingStarted_module_default.decisionMakersGettingStarted,
children: [/* @__PURE__ */ jsx(LandingLayout, {
media: /* @__PURE__ */ jsx(Image, { lazyLoadedImage: decisionMakerGroup }),
title: individualT(($) => $["ownersAndDecisionMakers"]),
description: individualT(($) => $["ownersAndDecisionMakersDescription"]),
helpAction: /* @__PURE__ */ jsx(Button, {
variant: "link",
onClick: openModal,
fullWidth: true,
children: commonT(($) => $["learnMore"])
}),
actions: /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsx(Button, {
fullWidth: true,
testId: "decision-makers-getting-started-primary-button",
onClick: addDecisionMakerOnClick,
children: commonT(($) => $["getStarted"])
}), handleCancelClick && /* @__PURE__ */ jsx(Button, {
variant: "tertiary",
fullWidth: true,
testId: "decision-makers-getting-started-cancel-button",
onClick: handleCancelClick,
children: commonT(($) => $["finishLater"])
})] })
}), isModalOpen && /* @__PURE__ */ jsx(Modal, {
onClose: closeModal,
ariaLabel: individualT(($) => $["moreAboutOwnersAndDecisionMakers"]),
inset: true,
children: /* @__PURE__ */ jsx(DecisionMakersModalContent, {})
})]
});
};
var decisionMakerRemediationAlerts = [{
type: "single",
code: "2_124",
titleKey: "authorizedSignatoryMissing",
descriptionKey: "addAtLeastOneAuthorizedSignatory",
actionKey: "addAuthorizedSignatory"
}, {
type: "grouped",
codes: [
"2_123",
"2_151",
"2_185"
],
titleKey: "beneficialOwnersMissing",
actionKey: "addBeneficialOwner",
detailKeys: {
"2_123": "addAllBeneficialOwners",
"2_151": "addAtLeastOneBeneficialOwnerControllingPerson",
"2_185": "addAtLeastOneDirector"
}
}];
//#endregion
//#region src/components/Individual/tasks/DecisionMakers/RemediationAlerts/RemediationAlerts.tsx
var RemediationAlertItem = ({ config, activeCodes, onAction }) => {
const { t } = useTranslation("individual");
const isVisible = useMemo$1(() => {
if (config.type === "single") return activeCodes.includes(config.code);
return config.codes.some((code) => activeCodes.includes(code));
}, [activeCodes, config]);
const activeGroupedDetails = useMemo$1(() => {
if (config.type !== "grouped") return [];
return config.codes.filter((code) => activeCodes.includes(code)).map((code) => config.detailKeys[code]);
}, [activeCodes, config]);
if (!isVisible) return null;
return /* @__PURE__ */ jsxs(Alert, {
className: "adyen-kyc-decision-makers__warning",
title: t(($) => $[config.titleKey]),
variant: "warning",
children: [
config.type === "single" && /* @__PURE__ */ jsx("p", { children: t(($) => $[config.descriptionKey]) }),
config.type === "grouped" && (activeGroupedDetails.length > 1 ? /* @__PURE__ */ jsx("ul", { children: activeGroupedDetails.map((key) => /* @__PURE__ */ jsx("li", { children: t(($) => $[key]) }, key)) }) : /* @__PURE__ */ jsx("p", { children: t(($) => $[activeGroupedDetails[0]]) })),
/* @__PURE__ */ jsx(Button, {
variant: "link",
onClick: onAction,
children: t(($) => $[config.actionKey])
})
]
});
};
var RemediationAlerts = ({ activeCodes, onAction }) => /* @__PURE__ */ jsx(Fragment$1, { children: decisionMakerRemediationAlerts.map((config) => /* @__PURE__ */ jsx(RemediationAlertItem, {
config,
activeCodes,
onAction
}, config.type === "single" ? config.code : config.titleKey)) });
//#endregion
//#region src/components/Individual/tasks/DecisionMakers/DecisionMakers.tsx
/**
* Decision makers are part of the Organization flow, that allow the creation
* of a type of Individual, the decision maker, so a variation of the individual flow
* is used to create a decision maker via this component.
*/
var DecisionMakers = (props) => {
const { data, isLoading } = useLegalEntity(ROOT_LE);
const { i18n } = useTranslation();
addResourceBundles(i18n, [{
ns: "individual",
importFn: (lang) => _rolldown_dynamic_import_helper_default(/* @__PURE__ */ Object.assign({
"../../language/bg-BG.json": () => import("./bg-BG-BlOJQ7iZ.js"),
"../../language/cs-CZ.json": () => import("./cs-CZ-CtEcakjz.js"),
"../../language/da-DK.json": () => import("./da-DK-Cp1cdZTG.js"),
"../../language/de-DE.json": () => import("./de-DE-ZWLyKP5G.js"),
"../../language/el-GR.json": () => import("./el-GR-DSmTVw3A.js"),
"../../language/en-US.instructions.json": () => import("./en-US.instructions-HI_HXwIA.js"),
"../../language/en-US.json": () => import("./en-US-5p2iDJhN.js"),
"../../language/es-ES.json": () => import("./es-ES-CKWpTQva.js"),
"../../language/et-EE.json": () => import("./et-EE-BeU-JlIv.js"),
"../../language/fi-FI.json": () => import("./fi-FI-DKJi4py_.js"),
"../../language/fr-FR.json": () => import("./fr-FR-JIF28b7U.js"),
"../../language/hr-HR.json": () => import("./hr-HR-C4LLZhRc.js"),
"../../language/hu-HU.json": () => import("./hu-HU-1NJpWkUj.js"),
"../../language/it-IT.json": () => import("./it-IT-C4b9Y6tP.js"),
"../../language/ja-JP.json": () => import("./ja-JP-BFkGV7Ct.js"),
"../../language/lt-LT.json": () => import("./lt-LT-Cq2T_YgH.js"),
"../../language/lv-LV.json": () => import("./lv-LV-DcclJdry.js"),
"../../language/nl-NL.json": () => import("./nl-NL-DWgJVfgU.js"),
"../../language/no-NO.json": () => import("./no-NO-BCZzdSpR.js"),
"../../language/pl-PL.json": () => import("./pl-PL-D3efS6b_.js"),
"../../language/pt-BR.json": () => import("./pt-BR-OCQiqikl.js"),
"../../language/pt-PT.json": () => import("./pt-PT-BHbd93Ic.js"),
"../../language/ro-RO.json": () => import("./ro-RO-CVzi0I9_.js"),
"../../language/sk-SK.json": () => import("./sk-SK-woMNza6o.js"),
"../../language/sl-SI.json": () => import("./sl-SI-Czu6HrQs.js"),
"../../language/sv-SE.json": () => import("./sv-SE-BIe7wyHM.js")
}), `../../language/${lang}.json`, 4)
}]);
if (isLoading || !data) return /* @__PURE__ */ jsx(Loader, {});
return /* @__PURE__ */ jsx(DecisionMakersInner, {
...props,
legalEntity: data
});
};
/** Inner component that has all the data loaded/non-undefined */
var DecisionMakersInner = ({ legalEntity, onNavigateToIndividual, navigateBackToTaskList }) => {
const getTaskStatus = useGetTaskStatus();
const { t: commonT } = useTranslation("common");
const { t: individualT } = useTranslation("individual");
const userEvents = useAnalyticsContext();
const { isFeatureEnabled } = useToggleContext();
const { showToast } = useToastContext();
const isRevampedDecisionMakersTaskPageEnabled = isFeatureEnabled("EnableRevampedDecisionMakersTaskPage");
const [showDecisionMakerModal, setShowDecisionMakerModal] = useState$1(false);
const [selectedDecisionMaker, setSelectedDecisionMaker] = useState$1();
const [isModalOpen, setIsModalOpen] = useState$1(false);
const openModal = () => {
userEvents.addPageEvent("Opened modal", {
actionType: "open",
label: "decisionMakersDescriptionModal"
});
setIsModalOpen(true);
};
const closeModal = () => {
userEvents.addPageEvent("Closed modal", {
actionType: "close",
label: "decisionMakersDescriptionModal"
});
setIsModalOpen(false);
};
const openDecisionMakerModal = (decisionMaker) => {
userEvents.addPageEvent("Opened modal", {
actionType: "open",
label: "viewDecisionMakerModal"
});
setShowDecisionMakerModal(true);
setSelectedDecisionMaker(decisionMaker);
};
const closeDecisionMakerModal = () => {
userEvents.addPageEvent("Closed modal", {
actionType: "close",
label: "viewDecisionMakerModal"
});
setShowDecisionMakerModal(false);
setSelectedDecisionMaker(null);
};
const capabilityProblems = useCapabilityProblems();
const decisionMakerRemediationCodes = useMemo$1(() => {
const remediationCodes = (capabilityProblems?.[EntityTypes.LEGAL_ENTITY]?.[legalEntity.id]?.missingData ?? []).flatMap((error) => {
const remediation = DATA_MISSING_DECISION_MAKER_ERROR_CODE_MAPPING[error.code];
return remediation ? [remediation] : [];
});
return [...new Set(remediationCodes)];
}, [capabilityProblems, legalEntity.id]);
const updateLegalEntity = useUpdateLegalEntity();
const decisionMakers = getOwnDecisionMakers(legalEntity);
const registeredCountry = legalEntity.organization.registeredAddress.country;
const { data: scenarios } = useScenarios(registeredCountry, LegalEntityTypes.INDIVIDUAL);
const availableDecisionMakers = getAvailableDecisionMakerRoleTypes(registeredCountry, scenarios);
const translationKeys = { home: "goBackToTaskList" };
const { remediationMessages } = useDataMissingRemediations({
legalEntityId: legalEntity.id,
problems: capabilityProblems ?? {}
});
const mappedDecisionMakers = decisionMakers?.reduce((mappedDecisionMakers, decisionMaker) => {
if (!decisionMaker.legalEntityId) return mappedDecisionMakers;
const mappedDecisionMaker = mappedDecisionMakers[decisionMaker.legalEntityId];
const decisionMakerType = decisionMaker.type;
mappedDecisionMakers[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: capabilityProblems?.LegalEntity?.[decisionMaker.legalEntityId]
};
return mappedDecisionMakers;
}, {});
const uniqueDecisionMakers = mappedDecisionMakers ? Object.values(mappedDecisionMakers) : [];
const trustedEntityAssociations = getTrustedEntityAssociations(legalEntity);
const isVerifyByInviteEnabled = isFeatureEnabled("EnableVerifyByInvite");
const invitationsStatuses = useInvitationStatuses(uniqueDecisionMakers.map((dm) => dm.reference), { enabled: isVerifyByInviteEnabled });
const hasPendingInvitation = (dm) => invitationsStatuses[dm.reference];
const isActionNeeded = (dm) => dm.status === TaskStatuses.ERROR || dm.status === TaskStatuses.DETAILS_REQUIRED;
const isComplete = (dm) => dm.status === TaskStatuses.FINISHED || dm.status === TaskStatuses.PROCESSING;
const isSignatory = (dm) => dm.types.includes(DecisionMakerTypes.SIGNATORY);
const pendingInvitationDecisionMakers = uniqueDecisionMakers.filter(hasPendingInvitation);
const remainingDecisionMakers = uniqueDecisionMakers.filter(not(hasPendingInvitation));
const actionNeededDecisionMakers = remainingDecisionMakers.filter(isActionNeeded);
const completeDecisionMakers = remainingDecisionMakers.filter(isComplete);
const pendingInvitationSignatories = pendingInvitationDecisionMakers.filter(isSignatory);
const pendingInvitationBeneficialOwners = pendingInvitationDecisionMakers.filter(not(isSignatory));
const actionNeededSignatories = actionNeededDecisionMakers.filter(isSignatory);
const actionNeededBeneficialOwners = actionNeededDecisionMakers.filter(not(isSignatory));
const completeSignatories = completeDecisionMakers.filter(isSignatory);
const completeBeneficialOwners = completeDecisionMakers.filter(not(isSignatory));
const showWarning = Boolean(remediationMessages.DECISION_MAKER && uniqueDecisionMakers.length);
/**
* Analytics
*/
useTaskLandedEvent("DECISION_MAKER_OVERVIEW");
useEffect$1(() => {
if (showWarning) userEvents.addTaskEvent("Encountered error", {
task: TaskTypes.DECISION_MAKER_OVERVIEW,
actionType: "alert",
returnValue: "missingDecisionMaker"
});
}, [
remediationMessages.DECISION_MAKER,
showWarning,
userEvents
]);
const uniqueDecisionMakersPerType = (roleType) => uniqueDecisionMakers.filter(({ types }) => types.includes(roleType)).length;
const haveMaxDecisionMakers = getAllowedDecisionMakerRoles(legalEntity, TaskTypes.DECISION_MAKER, scenarios).length === 0;
const getDecisionMakerTrackingParams = (decisionMaker) => ({
task: TaskTypes.DECISION_MAKER_OVERVIEW,
associatedLegalEntityId: decisionMaker.reference,
associatedLegalEntityType: decisionMaker.legalEntityType,
roles: decisionMaker.types
});
const addDecisionMakerOnClick = () => {
onNavigateToIndividual();
};
const onRemediationAction = () => {
const SIGNATORY_MISSING_CODE = "2_124";
const DIRECTOR_MISSING_CODE = "2_185";
if (decisionMakerRemediationCodes.length === 1) switch (decisionMakerRemediationCodes[0]) {
case SIGNATORY_MISSING_CODE:
individualFormDefaultData.value = { signatoryQuestionnaire: { isSignatory: GuidanceQuestionValues.YES } };
break;
case DIRECTOR_MISSING_CODE:
individualFormDefaultData.value = { uboQuestionnaire: {
isDirector: GuidanceQuestionValues.YES,
isOwner: null,
isControllingPerson: null
} };
break;
default: break;
}
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: individualT(($) => $["successFullyRemovedDecisionMaker"])
});
closeDecisionMakerModal();
} catch {
showToast({
variant: "error",
label: individualT(($) => $["failedToRemoveDecisionMaker"])
});
}
};
const renderDecisionMakersList = (decisionMakers) => {
if (decisionMakers.length === 0) return null;
return /* @__PURE__ */ jsx(List, {
variant: "grouped-primary",
padding: "small",
dividers: false,
children: decisionMakers.map((decisionMaker) => /* @__PURE__ */ jsx(DecisionMakerListItem, {
decisionMaker,
openDecisionMakerModal,
hasActiveInvitation: hasPendingInvitation(decisionMaker)
}, decisionMaker.reference))
});
};
const decisionMakerSections = useMemo$1(() => [
{
key: "pendingInvitations",
title: individualT(($) => $["pendingInvitations"]),
signatories: pendingInvitationSignatories,
beneficialOwners: pendingInvitationBeneficialOwners
},
{
key: "actionNeeded",
title: commonT(($) => $["actionNeeded"]),
signatories: actionNeededSignatories,
beneficialOwners: actionNeededBeneficialOwners
},
{
key: "complete",
title: commonT(($) => $["complete"]),
signatories: completeSignatories,
beneficialOwners: completeBeneficialOwners
}
], [
commonT,
individualT,
pendingInvitationSignatories,
pendingInvitationBeneficialOwners,
actionNeededSignatories,
actionNeededBeneficialOwners,
completeSignatories,
completeBeneficialOwners
]);
if (isRevampedDecisionMakersTaskPageEnabled && uniqueDecisionMakers.length === 0) return /* @__PURE__ */ jsx(DecisionMakersGettingStarted, {
handleCancelClick: () => navigateBackToTaskList(),
addDecisionMakerOnClick
});
return /* @__PURE__ */ jsx(DropinLayout, { content: /* @__PURE__ */ jsxs("div", {
className: "adyen-kyc-decision-makers adyen-kyc-u-width-full",
children: [
isRevampedDecisionMakersTaskPageEnabled ? /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsxs(StackLayout, {
gap: "medium",
children: [/* @__PURE__ */ jsx(Header, {
title: individualT(($) => $["ownersAndDecisionMakers"]),
description: individualT(($) => $["ownersAndDecisionMakersDescription"]),
status: getTaskStatus(TaskTypes.DECISION_MAKER_OVERVIEW),
align: "center",
children: /* @__PURE__ */ jsx(Button, {
slot: "actions",
variant: "link",
onClick: openModal,
children: commonT(($) => $["learnMore"])
})
}), showWarning && /* @__PURE__ */ jsx(RemediationAlerts, {
activeCodes: decisionMakerRemediationCodes,
onAction: onRemediationAction
})]
}), /* @__PURE__ */ jsxs(StackLayout, {
gap: "small",
children: [
decisionMakerSections.map((section) => {
if (section.signatories.length === 0 && section.beneficialOwners.length === 0) return null;
return /* @__PURE__ */ jsx(List, {
padding: "none",
dividers: false,
header: section.title,
children: /* @__PURE__ */ jsxs(StackLayout, {
gap: "small",
children: [renderDecisionMakersList(section.signatories), renderDecisionMakersList(section.beneficialOwners)]
})
}, section.key);
}),
/* @__PURE__ */ jsx(List, {
variant: "grouped-primary",
padding: "small",
dividers: false,
children: /* @__PURE__ */ jsx(ListItem, {
avatar: {
iconName: "plus",
circle: true
},
title: isFeatureEnabled("EnableVerifyByInvite") ? individualT(($) => $["addNewOrInvite"]) : commonT(($) => $["addNew"]),
action: { onClick: addDecisionMakerOnClick }
})
}),
/* @__PURE__ */ jsx(Button, {
variant: "secondary",
onClick: () => {
userEvents.addTaskEvent("Clicked button", {
task: TaskTypes.DECISION_MAKER_OVERVIEW,
actionType: "back",
label: translationKeys.home,
noOfDecisionMakers: decisionMakers.length
});
navigateBackToTaskList();
},
fullWidth: true,
children: commonT(($) => $[translationKeys.home])
})
]
})] }) : /* @__PURE__ */ jsxs(Fragment$1, { children: [
/* @__PURE__ */ jsx(Header, {
title: commonT(($) => $["decisionMaker"]),
description: individualT(($) => $["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: individualT(($) => $["whatIsTheDifferenceBetweenTheseRoles"]),
content: /* @__PURE__ */ jsx("ul", {
className: "adyen-kyc-guidance-list",
children: availableDecisionMakers.map(({ roleType }) => /* @__PURE__ */ jsx("li", { children: /* @__PURE__ */ jsx(Trans, {
t: individualT,
i18nKey: ($) => $[`${roleType === DecisionMakerTypes.CONTROLLING_PERSON ? "controllingPerson" : roleType === DecisionMakerTypes.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"
}),
/* @__PURE__ */ jsxs(StackLayout, { children: [uniqueDecisionMakers.map((decisionMaker) => /* @__PURE__ */ jsx(EntityAssociation, {
types: decisionMaker.types,
name: decisionMaker.name,
status: decisionMaker.status,
onNavigateToEntity: () => editDecisionMaker(decisionMaker),
problems: decisionMaker?.problems,
deleteEntity: () => {
deleteDecisionMaker(decisionMaker);
},
isDeleteDisabled: (trustedEntityAssociations ?? []).some((ea) => ea.reference === decisionMaker.reference)
}, decisionMaker.reference)), /* @__PURE__ */ jsxs("div", {
className: "adyen-kyc-decision-makers__actions",
children: [/* @__PURE__ */ jsx(Button, {
variant: "secondary",
icon: "plus",
onClick: addDecisionMakerOnClick,
disabled: haveMaxDecisionMakers,
fullWidth: true,
children: individualT(($) => $["addDecisionMaker"])
}), /* @__PURE__ */ jsx(ActionBar, {
onHome: () => {
userEvents.addTaskEvent("Clicked button", {
task: TaskTypes.DECISION_MAKER_OVERVIEW,
actionType: "back",
label: translationKeys.home,
noOfDecisionMakers: decisionMakers.length
});
navigateBackToTaskList();
},
homeButtonLabel: commonT(($) => $[translationKeys.home])
})]
})] })
] }),
showDecisionMakerModal && selectedDecisionMaker && /* @__PURE__ */ jsx(DecisionMakerDetails, {
handleClose: closeDecisionMakerModal,
handleDelete: () => deleteDecisionMaker(selectedDecisionMaker),
handleEdit: () => editDecisionMaker(selectedDecisionMaker),
decisionMaker: selectedDecisionMaker,
parentLegalEntity: legalEntity
}),
isModalOpen && /* @__PURE__ */ jsx(Modal, {
onClose: closeModal,
ariaLabel: individualT(($) => $["moreAboutOwnersAndDecisionMakers"]),
inset: true,
children: /* @__PURE__ */ jsx(DecisionMakersModalContent, {})
})
]
}) });
};
//#endregion
export { DecisionMakers };