@adyen/kyc-components 4.0.0-beta.5 → 4.0.0-compact.0

package/dist/{DecisionMakers-5m_hI3ko.js → DecisionMakers-BDNa3HcC.js}

@@ -2,29 +2,44 @@
 {
   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] = "4179b838-386c-466b-af87-22e05cb0d3d0", e._sentryDebugIdIdentifier = "sentry-dbid-4179b838-386c-466b-af87-22e05cb0d3d0");
+    n && (e._sentryDebugIds = e._sentryDebugIds || {}, e._sentryDebugIds[n] = "154302f3-0719-4b02-b14d-cca5c85633a0", e._sentryDebugIdIdentifier = "sentry-dbid-154302f3-0719-4b02-b14d-cca5c85633a0");
   } catch (e) {
   }
 }
 ;
+import { a as addResourceBundles, T as Trans, _ as __variableDynamicImportRuntimeHelper } from "./translation-DJHWTow9.js";
 import { jsxs, jsx, Fragment } from "preact/jsx-runtime";
 import { useState, useEffect } from "preact/hooks";
-import { a7 as Icon, c as useTranslation, d as useLegalEntity, bc as Modal, L as Loader, aO as getRoleName, G as Button, bi as Confirm, u as useI18nContext, N as Typography, K as Alert, a3 as useAnalyticsContext, H as Svg, R as ROOT_LE, ad as useGetTaskStatus, aa as useExperimentsContext, a9 as useToastContext, af as useCapabilityProblems, by as getOwnDecisionMakers, cv as useScenarios, cS as getAvailableDecisionMakerRoleTypes, $ as TaskTypes, cB as getAllowedDecisionMakerRoles, F as FormHeader, aZ as ContextGuidance, aX as Trans, cQ as DecisionMakerTypes, ae as CardGroup, aS as ActionBar, O as LegalEntityTypes } from "./StoreProvider-QThALSrj.js";
-import { a as useUpdateLegalEntity } from "./useUpdateLegalEntity-56mDjaQA.js";
-import { e as useDataMissingRemediations, D as DropinLayout, E as EntityGuidanceStatus, i as iconStatus, f as EntityAssociation } from "./OnboardingDropinComponent-DLvTQVTE.js";
+import { u as useScenarios } from "./useScenarios-B7IWZ3xW.js";
+import { V as Icon, a as useTranslation, c as useLegalEntity, B as Button, L as Loader, u as useI18nContext, x as Typography, U as useAnalyticsContext, R as ROOT_LE, _ as useGetTaskStatus, X as useExperimentsContext, aR as getOwnDecisionMakers, b8 as getAvailableDecisionMakerRoleTypes, M as TaskTypes, O as TaskStatuses, b2 as getAllowedDecisionMakerRoles, ak as DecisionMakerTypes, y as LegalEntityTypes } from "./StoreProvider-BlaJzXSZ.js";
+import { a as useUpdateLegalEntity } from "./RadioGroup-CYDXrtrO.js";
+import { b as getRoleName, F as FormHeader } from "./CountryField-D0YZrov9.js";
 import cx from "classnames";
-import { A as Avatar } from "./Avatar-DL_WbHEO.js";
-import { T as TaskStatusIndicator } from "./TaskStatusIndicator-Bfc4X_jG.js";
-import { S as StackLayout, L as LandingLayout } from "./LandingLayout-Xi3iuRMx.js";
+import { A as Avatar } from "./Avatar-DQjt5Lk2.js";
+import { M as Modal } from "./Modal-nMRQDTF7.js";
+import { u as useToastContext } from "./useToastContext-DGMeMy5R.js";
+import { e as useDataMissingRemediations, D as DropinLayout, E as EntityGuidanceStatus, i as iconStatus, C as CardGroup, f as EntityAssociation } from "./OnboardingDropinComponent-B0GrJ_pR.js";
+import { S as StackLayout, L as LandingLayout } from "./bafinUtils-Bar3qiJA.js";
+import { a as Alert } from "./Alert-C24s_Ygs.js";
+import { I as Image, b as useCapabilityProblems, C as ContextGuidance } from "./fieldConfigurations-B8bDFQ53.js";
+import { A as ActionBar } from "./FormNavigation-ezxkIqdb.js";
+import { T as TaskItemStatus } from "./TaskItemStatus-B38keERo.js";
+import { i as isEmpty } from "./isEmpty-CuQFhMf0.js";
+import { T as TaskStatusIndicator } from "./TaskStatusIndicator-BIvTrQtf.js";
+import { D as DetailViewLayout } from "./DetailViewLayout-Z9cuUp4X.js";
+import { C as Confirm } from "./Confirm-DwutojkY.js";
+import { lazy } from "preact/compat";
 const listItem = "adyen-kyc-list-item";
+const listItemBordered = "adyen-kyc-list-item-bordered";
 const listItemInteractive = "adyen-kyc-list-item-interactive";
 const listItemText = "adyen-kyc-list-item-text";
 const listItemTitle = "adyen-kyc-list-item-title";
 const listItemDescription = "adyen-kyc-list-item-description";
 const listItemDisclosure = "adyen-kyc-list-item-disclosure";
 const listItemAccessory = "adyen-kyc-list-item-accessory";
-const styles$2 = {
+const styles$1 = {
   listItem,
+  listItemBordered,
   listItemInteractive,
   listItemText,
   listItemTitle,
@@ -32,23 +47,27 @@ const styles$2 = {
   listItemDisclosure,
   listItemAccessory
 };
-const ListItem = ({ accessory, action, avatar, description, title }) => {
+const ListItem = ({ accessory, action, avatar, bordered, description, title }) => {
   const isInteractive = !!action && typeof action.onClick === "function";
   const isDisabled = !!action?.disabled;
   const listItemAvatar = {
     ...avatar,
     ...isDisabled && { variant: "disabled" }
   };
-  const rootClassname = cx(styles$2.listItem, {
-    [styles$2.listItemInteractive]: isInteractive
-  });
+  const rootClassname = cx(
+    styles$1.listItem,
+    { [styles$1.listItemBordered]: bordered },
+    {
+      [styles$1.listItemInteractive]: isInteractive
+    }
+  );
   const content = /* @__PURE__ */ jsxs(Fragment, { children: [
     avatar && /* @__PURE__ */ jsx(Avatar, { ...listItemAvatar }),
-    /* @__PURE__ */ jsxs("div", { className: styles$2.listItemText, children: [
-      /* @__PURE__ */ jsx("h3", { className: styles$2.listItemTitle, children: title }),
-      description && /* @__PURE__ */ jsx("span", { className: styles$2.listItemDescription, children: description })
+    /* @__PURE__ */ jsxs("div", { className: styles$1.listItemText, children: [
+      /* @__PURE__ */ jsx("h3", { className: styles$1.listItemTitle, children: title }),
+      description && /* @__PURE__ */ jsx("span", { className: styles$1.listItemDescription, children: description })
     ] }),
-    accessory && /* @__PURE__ */ jsx("div", { className: styles$2.listItemAccessory, children: accessory })
+    accessory && /* @__PURE__ */ jsx("div", { className: styles$1.listItemAccessory, children: accessory })
   ] });
   if (isInteractive) {
     return /* @__PURE__ */ jsxs(
@@ -61,7 +80,7 @@ const ListItem = ({ accessory, action, avatar, description, title }) => {
         type: "button",
         children: [
           content,
-          action?.disclosure && !isDisabled && /* @__PURE__ */ jsx("div", { className: styles$2.listItemDisclosure, "data-testid": "disclosure-indicator", children: /* @__PURE__ */ jsx(Icon, { name: "chevron-right" }) })
+          action?.disclosure && !isDisabled && /* @__PURE__ */ jsx("div", { className: styles$1.listItemDisclosure, "data-testid": "disclosure-indicator", children: /* @__PURE__ */ jsx(Icon, { name: "chevron-right" }) })
         ]
       }
     );
@@ -69,42 +88,31 @@ const ListItem = ({ accessory, action, avatar, description, title }) => {
     return /* @__PURE__ */ jsx("div", { className: rootClassname, children: content });
   }
 };
-const decisionMakerDetailsActions = "adyen-kyc-decision-maker-details-actions";
-const styles$1 = {
-  decisionMakerDetailsActions
-};
 const DecisionMakerDetails = ({
   decisionMaker,
   handleClose,
   handleDelete,
   handleEdit
 }) => {
-  const { t } = useTranslation();
+  const { t } = useTranslation("common");
   const [confirmOpen, setConfirmOpen] = useState(false);
   const { data: legalEntity, isLoading: isLegalEntityLoading } = useLegalEntity(
     decisionMaker.reference
   );
+  const actions = /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx(Button, { onClick: handleEdit, variant: "primary", fullWidth: true, children: t(($) => $["editDetails"]) }),
+    /* @__PURE__ */ jsx(Button, { onClick: () => setConfirmOpen(true), variant: "secondary", fullWidth: true, children: t(($) => $["delete"]) })
+  ] });
   return /* @__PURE__ */ jsxs(Fragment, { children: [
-    /* @__PURE__ */ jsxs(Modal, { onClose: handleClose, ariaLabel: t(($) => $["individualDetails"]), inset: true, children: [
-      /* @__PURE__ */ jsxs("h2", { children: [
-        " ",
-        t(($) => $["individualDetails"]),
-        " "
-      ] }),
-      isLegalEntityLoading || !legalEntity ? /* @__PURE__ */ jsx(Loader, {}) : /* @__PURE__ */ jsx(Fragment, { children: /* @__PURE__ */ jsx(StackLayout, { gap: "medium", children: /* @__PURE__ */ jsx(
-        ListItem,
-        {
-          accessory: /* @__PURE__ */ jsx(TaskStatusIndicator, { taskStatus: decisionMaker.status }),
-          avatar: { iconName: "user", circle: true },
-          title: decisionMaker.name,
-          description: decisionMaker.types.map((type) => t(($) => $[getRoleName(type)])).filter(Boolean).join(",")
-        }
-      ) }) }),
-      /* @__PURE__ */ jsx("div", { className: styles$1.decisionMakerDetailsActions, children: /* @__PURE__ */ jsxs(StackLayout, { gap: "small", children: [
-        /* @__PURE__ */ jsx(Button, { onClick: handleEdit, variant: "primary", fullWidth: true, children: t(($) => $["editDetails"]) }),
-        /* @__PURE__ */ jsx(Button, { onClick: () => setConfirmOpen(true), variant: "secondary", fullWidth: true, children: t(($) => $["delete"]) })
-      ] }) })
-    ] }),
+    /* @__PURE__ */ jsx(Modal, { onClose: handleClose, ariaLabel: t(($) => $["individualDetails"]), inset: true, children: /* @__PURE__ */ jsx(DetailViewLayout, { title: t(($) => $["individualDetails"]), actions, children: isLegalEntityLoading || !legalEntity ? /* @__PURE__ */ jsx(Loader, {}) : /* @__PURE__ */ jsx(StackLayout, { gap: "medium", children: /* @__PURE__ */ jsx(
+      ListItem,
+      {
+        accessory: /* @__PURE__ */ jsx(TaskStatusIndicator, { taskStatus: decisionMaker.status }),
+        avatar: { iconName: "user", circle: true },
+        title: decisionMaker.name,
+        description: decisionMaker.types.map((type) => t(($) => $[getRoleName(type)])).filter(Boolean).join(",")
+      }
+    ) }) }) }),
     confirmOpen && /* @__PURE__ */ jsx(
       Confirm,
       {
@@ -155,6 +163,7 @@ const DecisionMakersModalContent = () => {
     /* @__PURE__ */ jsx(Typography, { el: "p", className: "adyen-kyc-u-margin-bottom-32", children: i18n.get("ownersAndDecisionMakersDescriptionA4") })
   ] });
 };
+const decisionMakerGroup = lazy(() => import("./decision-makers-group-CgddXgrx.js"));
 const DecisionMakersGettingStarted = ({
   addDecisionMakerOnClick,
   handleCancelClick
@@ -180,14 +189,7 @@ const DecisionMakersGettingStarted = ({
     /* @__PURE__ */ jsx(
       LandingLayout,
       {
-        media: /* @__PURE__ */ jsx(
-          Svg,
-          {
-            type: "image",
-            testId: "decision-makers-getting-started-icon",
-            name: "decision-makers-group"
-          }
-        ),
+        media: /* @__PURE__ */ jsx(Image, { lazyLoadedImage: decisionMakerGroup }),
         title: i18n.get("ownersAndDecisionMakers"),
         description: i18n.get("ownersAndDecisionMakersDescription"),
         helpAction: /* @__PURE__ */ jsx(Button, { variant: "link", onClick: openModal, fullWidth: true, children: i18n.get("learnMore") }),
@@ -219,6 +221,10 @@ const DecisionMakersGettingStarted = ({
 };
 const DecisionMakers = (props) => {
   const { data, isLoading } = useLegalEntity(ROOT_LE);
+  const { i18n } = useTranslation();
+  addResourceBundles(i18n, i18n.language, [
+    { ns: "individual", importFn: () => __variableDynamicImportRuntimeHelper(/* @__PURE__ */ Object.assign({ "../../language/da-DK.json": () => import("./da-DK-D0N1TVVU.js"), "../../language/de-DE.json": () => import("./de-DE-Dtuu-nE7.js"), "../../language/en-US.json": () => import("./en-US-546hB2Wn.js"), "../../language/es-ES.json": () => import("./es-ES-BsQpwaPN.js"), "../../language/fi-FI.json": () => import("./fi-FI-BJ9RzrL3.js"), "../../language/fr-FR.json": () => import("./fr-FR-CNR5-s9g.js"), "../../language/it-IT.json": () => import("./it-IT-BV9K87FK.js"), "../../language/nl-NL.json": () => import("./nl-NL-DywVQ9km.js"), "../../language/no-NO.json": () => import("./no-NO-B8oxqfNI.js"), "../../language/pt-PT.json": () => import("./pt-PT-BvK00TeI.js"), "../../language/sl-SI.json": () => import("./sl-SI-NI2OJAvm.js"), "../../language/sv-SE.json": () => import("./sv-SE-CAZpDX9G.js") }), `../../language/${i18n.language}.json`, 4) }
+  ]);
   if (isLoading || !data) {
     return /* @__PURE__ */ jsx(Loader, {});
   }
@@ -232,7 +238,7 @@ const DecisionMakersInner = ({
 }) => {
   const getTaskStatus = useGetTaskStatus();
   const { i18n } = useI18nContext();
-  const { t } = useTranslation();
+  const { t } = useTranslation("common");
   const userEvents = useAnalyticsContext();
   const { isExperimentEnabled } = useExperimentsContext();
   const { showToast } = useToastContext();
@@ -242,6 +248,21 @@ const DecisionMakersInner = ({
   const [isRemoveDisabled, setIsRemoveDisabled] = useState(false);
   const [showDecisionMakerModal, setShowDecisionMakerModal] = useState(false);
   const [selectedDecisionMaker, setSelectedDecisionMaker] = useState();
+  const [isModalOpen, setIsModalOpen] = useState(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",
@@ -289,6 +310,45 @@ const DecisionMakersInner = ({
     {}
   );
   const uniqueDecisionMakers = mappedDecisionMakers ? Object.values(mappedDecisionMakers) : [];
+  const BENEFICIAL_OWNER_ROLES = [
+    DecisionMakerTypes.OWNER,
+    DecisionMakerTypes.CONTROLLING_PERSON,
+    DecisionMakerTypes.DIRECTOR
+  ];
+  const decisionMakersTaskStatusLabelMap = {
+    [TaskStatuses.ERROR]: i18n.get("incomplete"),
+    [TaskStatuses.PROCESSING]: i18n.get("inReview"),
+    [TaskStatuses.FINISHED]: i18n.get("complete")
+  };
+  const decisionMakerStatusLabelMap = {
+    [TaskStatuses.ERROR]: i18n.get("actionNeeded"),
+    [TaskStatuses.PROCESSING]: i18n.get("inReview"),
+    [TaskStatuses.FINISHED]: i18n.get("verified")
+  };
+  const { actionNeededDecisionMakers, completeDecisionMakers } = uniqueDecisionMakers.reduce(
+    (acc, dm) => {
+      if (dm.status === TaskStatuses.ERROR || dm.status === TaskStatuses.DETAILS_REQUIRED) {
+        acc.actionNeededDecisionMakers.push(dm);
+      } else if (dm.status === TaskStatuses.FINISHED || dm.status === TaskStatuses.PROCESSING) {
+        acc.completeDecisionMakers.push(dm);
+      }
+      return acc;
+    },
+    {
+      actionNeededDecisionMakers: [],
+      completeDecisionMakers: []
+    }
+  );
+  const getOverallStatus = () => {
+    if (!isEmpty(capabilityProblems) || actionNeededDecisionMakers.length > 0) {
+      return TaskStatuses.ERROR;
+    }
+    if (completeDecisionMakers.some((dm) => dm.status === TaskStatuses.PROCESSING)) {
+      return TaskStatuses.PROCESSING;
+    }
+    return TaskStatuses.FINISHED;
+  };
+  const decisionMakersTaskStatus = getOverallStatus();
   const showWarning = Boolean(remediationMessages.DECISION_MAKER && uniqueDecisionMakers.length);
   useEffect(() => {
     userEvents.addTaskEvent("Landed on page", {
@@ -300,7 +360,7 @@ const DecisionMakersInner = ({
       userEvents.addTaskEvent("Encountered error", {
         task: TaskTypes.DECISION_MAKER_OVERVIEW,
         actionType: "alert",
-        label: "missingDecisionMaker"
+        returnValue: "missingDecisionMaker"
       });
     }
   }, [remediationMessages.DECISION_MAKER, showWarning, userEvents]);
@@ -317,8 +377,7 @@ const DecisionMakersInner = ({
     associatedLegalEntityType: decisionMaker.legalEntityType,
     roles: decisionMaker.types
   });
-  const addDecisionMakerOnClick = (e) => {
-    e.stopPropagation();
+  const addDecisionMakerOnClick = () => {
     onNavigateToIndividual();
   };
   const editDecisionMaker = (decisionMaker) => {
@@ -349,91 +408,128 @@ const DecisionMakersInner = ({
       showToast({ variant: "error", label: i18n.get("failedToRemoveDecisionMaker") });
     }
   };
-  return /* @__PURE__ */ jsx(Fragment, { children: isRevampedDecisionMakersTaskPageEnabled && uniqueDecisionMakers?.length === 0 ? /* @__PURE__ */ jsx(Fragment, { children: /* @__PURE__ */ jsx(
-    DecisionMakersGettingStarted,
-    {
-      handleCancelClick: () => navigateBackToTaskList(),
-      addDecisionMakerOnClick
-    }
-  ) }) : /* @__PURE__ */ jsx(
-    DropinLayout,
-    {
-      content: /* @__PURE__ */ jsxs("div", { className: "adyen-kyc-decision-makers adyen-kyc-u-width-full", children: [
-        /* @__PURE__ */ jsx(
-          FormHeader,
+  const renderDecisionMakerItem = (decisionMaker) => {
+    const isSignatory = decisionMaker.types.includes(DecisionMakerTypes.SIGNATORY);
+    const isBeneficialOwner = decisionMaker.types.some(
+      (type) => BENEFICIAL_OWNER_ROLES.includes(type)
+    );
+    const description = [
+      isSignatory && t(($) => $.signatory),
+      isBeneficialOwner && t(($) => $.beneficialOwner)
+    ].filter(Boolean).join(", ");
+    return /* @__PURE__ */ jsx(
+      ListItem,
+      {
+        bordered: true,
+        accessory: /* @__PURE__ */ jsx(
+          TaskItemStatus,
           {
-            heading: i18n.get("decisionMaker"),
-            description: i18n.get("decisionMakerDescription")
+            status: decisionMaker.status,
+            statusLabel: decisionMakerStatusLabelMap[decisionMaker.status]
           }
         ),
-        /* @__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", { children: /* @__PURE__ */ jsx(
-              Trans,
+        avatar: { iconName: "user", circle: true },
+        title: decisionMaker.name,
+        action: { onClick: () => openDecisionMakerModal(decisionMaker) },
+        description
+      },
+      decisionMaker.reference
+    );
+  };
+  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, { children: [
+          /* @__PURE__ */ jsxs(StackLayout, { gap: "medium", centered: true, children: [
+            /* @__PURE__ */ jsx(
+              TaskItemStatus,
               {
-                t,
-                i18nKey: ($) => $[`${roleType === DecisionMakerTypes.CONTROLLING_PERSON ? "controllingPerson" : roleType === DecisionMakerTypes.OWNER ? "owner" : roleType}GuideDescription`]
+                status: decisionMakersTaskStatus,
+                statusLabel: decisionMakersTaskStatusLabelMap[decisionMakersTaskStatus]
               }
-            ) }, roleType)) }),
-            titleId: "whatIsTheDifferenceBetweenTheseRoles",
-            contentId: "differenceBetweenAnOwnerControllingPersonAndSignatory"
-          }
-        ),
-        showWarning && /* @__PURE__ */ jsx(
-          Alert,
-          {
-            className: "adyen-kyc-decision-makers__warning",
-            title: remediationMessages.DECISION_MAKER,
-            variant: "warning"
-          }
-        ),
-        uniqueDecisionMakers?.length > 0 ? isRevampedDecisionMakersTaskPageEnabled ? /* @__PURE__ */ jsx(CardGroup, { children: uniqueDecisionMakers.map((decisionMaker) => /* @__PURE__ */ jsx(
-          EntityAssociation,
-          {
-            types: decisionMaker.types,
-            name: decisionMaker.name,
-            status: decisionMaker.status,
-            onNavigateToEntity: () => openDecisionMakerModal(decisionMaker),
-            problems: decisionMaker?.problems,
-            removeEntity: () => {
-              deleteDecisionMaker(decisionMaker);
-            },
-            isRemoveDisabled: isRemoveDisabled || (trustedEntityAssociations ?? []).some(
-              (ea) => ea.reference === decisionMaker.reference
             ),
-            handleIsRemoveDisabled: setIsRemoveDisabled
-          },
-          decisionMaker.reference
-        )) }) : /* @__PURE__ */ jsx(CardGroup, { children: uniqueDecisionMakers.map((decisionMaker) => /* @__PURE__ */ jsx(
-          EntityAssociation,
-          {
-            types: decisionMaker.types,
-            name: decisionMaker.name,
-            status: decisionMaker.status,
-            onNavigateToEntity: () => editDecisionMaker(decisionMaker),
-            problems: decisionMaker?.problems,
-            removeEntity: () => {
-              deleteDecisionMaker(decisionMaker);
+            /* @__PURE__ */ jsx(Typography, { el: "h2", variant: "title-l", children: i18n.get("ownersAndDecisionMakers") }),
+            /* @__PURE__ */ jsx(Typography, { el: "div", variant: "body", children: i18n.get("ownersAndDecisionMakersDescription") }),
+            /* @__PURE__ */ jsx(Button, { variant: "link", onClick: openModal, children: i18n.get("learnMore") }),
+            showWarning && /* @__PURE__ */ jsx(
+              Alert,
+              {
+                className: "adyen-kyc-decision-makers__warning",
+                title: remediationMessages.DECISION_MAKER,
+                variant: "warning"
+              }
+            )
+          ] }),
+          /* @__PURE__ */ jsxs(StackLayout, { gap: "large", children: [
+            actionNeededDecisionMakers.length > 0 && /* @__PURE__ */ jsxs(StackLayout, { gap: "small", children: [
+              /* @__PURE__ */ jsx(Typography, { variant: "body-strongest", el: "h3", children: i18n.get("actionNeeded") }),
+              actionNeededDecisionMakers.map(renderDecisionMakerItem)
+            ] }),
+            completeDecisionMakers.length > 0 && /* @__PURE__ */ jsxs(StackLayout, { gap: "small", children: [
+              /* @__PURE__ */ jsx(Typography, { variant: "body-strongest", el: "h3", children: i18n.get("complete") }),
+              completeDecisionMakers.map(renderDecisionMakerItem)
+            ] })
+          ] })
+        ] }) : /* @__PURE__ */ jsxs(Fragment, { 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)
             },
-            isRemoveDisabled: isRemoveDisabled || (trustedEntityAssociations ?? []).some(
-              (ea) => ea.reference === decisionMaker.reference
-            ),
-            handleIsRemoveDisabled: setIsRemoveDisabled
-          },
-          decisionMaker.reference
-        )) }) : null,
+            roleType
+          )) }),
+          /* @__PURE__ */ jsx(
+            ContextGuidance,
+            {
+              title: i18n.get("whatIsTheDifferenceBetweenTheseRoles"),
+              content: /* @__PURE__ */ jsx("ul", { className: "adyen-kyc-guidance-list", children: availableDecisionMakers.map(({ roleType }) => /* @__PURE__ */ jsx("li", { children: /* @__PURE__ */ jsx(
+                Trans,
+                {
+                  t,
+                  i18nKey: ($) => $[`${roleType === DecisionMakerTypes.CONTROLLING_PERSON ? "controllingPerson" : roleType === DecisionMakerTypes.OWNER ? "owner" : roleType}GuideDescription`]
+                }
+              ) }, roleType)) }),
+              titleId: "whatIsTheDifferenceBetweenTheseRoles",
+              contentId: "differenceBetweenAnOwnerControllingPersonAndSignatory"
+            }
+          ),
+          /* @__PURE__ */ jsx(CardGroup, { children: uniqueDecisionMakers.map((decisionMaker) => /* @__PURE__ */ jsx(
+            EntityAssociation,
+            {
+              types: decisionMaker.types,
+              name: decisionMaker.name,
+              status: decisionMaker.status,
+              onNavigateToEntity: () => openDecisionMakerModal(decisionMaker),
+              problems: decisionMaker?.problems,
+              removeEntity: () => deleteDecisionMaker(decisionMaker),
+              isRemoveDisabled: isRemoveDisabled || (trustedEntityAssociations ?? []).some(
+                (ea) => ea.reference === decisionMaker.reference
+              ),
+              handleIsRemoveDisabled: setIsRemoveDisabled
+            },
+            decisionMaker.reference
+          )) })
+        ] }),
         showDecisionMakerModal && selectedDecisionMaker && /* @__PURE__ */ jsx(
           DecisionMakerDetails,
           {
@@ -443,7 +539,15 @@ const DecisionMakersInner = ({
             decisionMaker: selectedDecisionMaker
           }
         ),
-        /* @__PURE__ */ jsx("div", { className: "adyen-kyc-decision-makers__actions", children: /* @__PURE__ */ jsx(
+        /* @__PURE__ */ jsx("div", { className: "adyen-kyc-decision-makers__actions", children: isRevampedDecisionMakersTaskPageEnabled ? /* @__PURE__ */ jsx(
+          ListItem,
+          {
+            bordered: true,
+            avatar: { iconName: "plus", circle: true },
+            title: i18n.get("addNew"),
+            action: { onClick: addDecisionMakerOnClick }
+          }
+        ) : /* @__PURE__ */ jsx(
           Button,
           {
             variant: "secondary",
@@ -468,10 +572,19 @@ const DecisionMakersInner = ({
             },
             homeButtonLabel: i18n.get(translationKeys.home)
           }
+        ),
+        isModalOpen && /* @__PURE__ */ jsx(
+          Modal,
+          {
+            onClose: closeModal,
+            ariaLabel: i18n.get("moreAboutOwnersAndDecisionMakers"),
+            inset: true,
+            children: /* @__PURE__ */ jsx(DecisionMakersModalContent, {})
+          }
         )
       ] })
     }
-  ) });
+  );
 };
 export {
   DecisionMakers

package/dist/DetailViewLayout-Z9cuUp4X.js

@@ -0,0 +1,65 @@
+;
+{
+  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] = "d66306a0-d595-4a70-a516-465959ceff9f", e._sentryDebugIdIdentifier = "sentry-dbid-d66306a0-d595-4a70-a516-465959ceff9f");
+  } catch (e) {
+  }
+}
+;
+import { jsxs, jsx } from "preact/jsx-runtime";
+import cx from "classnames";
+const detailViewLayout = "adyen-kyc-detail-view-layout";
+const detailViewLayoutDefault = "adyen-kyc-detail-view-layout-default";
+const detailViewLayoutCompact = "adyen-kyc-detail-view-layout-compact";
+const detailViewLayoutHeader = "adyen-kyc-detail-view-layout-header";
+const detailViewLayoutTitle = "adyen-kyc-detail-view-layout-title";
+const detailViewLayoutDescription = "adyen-kyc-detail-view-layout-description";
+const detailViewLayoutAlignLeft = "adyen-kyc-detail-view-layout-align-left";
+const detailViewLayoutAlignCenter = "adyen-kyc-detail-view-layout-align-center";
+const detailViewLayoutAlignRight = "adyen-kyc-detail-view-layout-align-right";
+const detailViewLayoutContent = "adyen-kyc-detail-view-layout-content";
+const detailViewLayoutActions = "adyen-kyc-detail-view-layout-actions";
+const styles = {
+  detailViewLayout,
+  detailViewLayoutDefault,
+  detailViewLayoutCompact,
+  detailViewLayoutHeader,
+  detailViewLayoutTitle,
+  detailViewLayoutDescription,
+  detailViewLayoutAlignLeft,
+  detailViewLayoutAlignCenter,
+  detailViewLayoutAlignRight,
+  detailViewLayoutContent,
+  detailViewLayoutActions
+};
+const DetailViewLayout = ({
+  actions,
+  align = "left",
+  children,
+  compact,
+  description,
+  title
+}) => {
+  const headerAlignment = {
+    left: styles.detailViewLayoutAlignLeft,
+    center: styles.detailViewLayoutAlignCenter,
+    right: styles.detailViewLayoutAlignRight
+  };
+  const rootClassname = cx(styles.detailViewLayout, {
+    [styles.detailViewLayoutCompact]: compact,
+    [styles.detailViewLayoutDefault]: !compact
+  });
+  const headerClassname = cx(styles.detailViewLayoutHeader, headerAlignment[align]);
+  return /* @__PURE__ */ jsxs("article", { className: rootClassname, children: [
+    /* @__PURE__ */ jsxs("header", { className: headerClassname, children: [
+      /* @__PURE__ */ jsx("h1", { className: styles.detailViewLayoutTitle, children: title }),
+      description && /* @__PURE__ */ jsx("div", { className: styles.detailViewLayoutDescription, children: description })
+    ] }),
+    /* @__PURE__ */ jsx("div", { className: styles.detailViewLayoutContent, children }),
+    actions && /* @__PURE__ */ jsx("div", { className: styles.detailViewLayoutActions, role: "toolbar", children: actions })
+  ] });
+};
+export {
+  DetailViewLayout as D
+};