@adyen/kyc-components 3.81.0 → 3.82.0-beta.0

package/dist/{DecisionMakers-DkXmcSK4.js → DecisionMakers-CG-_wD3e.js}

@@ -2,23 +2,35 @@
 {
   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] = "aaa6ef03-d2dd-49a1-89c9-d371365a793b", e._sentryDebugIdIdentifier = "sentry-dbid-aaa6ef03-d2dd-49a1-89c9-d371365a793b");
+    n && (e._sentryDebugIds = e._sentryDebugIds || {}, e._sentryDebugIds[n] = "d5e6676e-6027-444c-9dfb-d70c2d47fd0e", e._sentryDebugIdIdentifier = "sentry-dbid-d5e6676e-6027-444c-9dfb-d70c2d47fd0e");
   } catch (e) {
   }
 }
 ;
+import { a as addResourceBundles, T as Trans, _ as __variableDynamicImportRuntimeHelper } from "./translation-CPyYrNAr.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, G as Button, bf as Modal, L as Loader, aP as getRoleName, bh as Confirm, u as useI18nContext, N as Typography, K as Alert, a3 as useAnalyticsContext, ao as Image, R as ROOT_LE, ad as useGetTaskStatus, aa as useExperimentsContext, a9 as useToastContext, af as useCapabilityProblems, bA as getOwnDecisionMakers, cy as useScenarios, cW as getAvailableDecisionMakerRoleTypes, $ as TaskTypes, cE as getAllowedDecisionMakerRoles, F as FormHeader, a_ as ContextGuidance, aY as Trans, ba as DecisionMakerTypes, ae as CardGroup, aT as ActionBar, O as LegalEntityTypes } from "./StoreProvider-pdSV8sgb.js";
-import { a as useUpdateLegalEntity } from "./useUpdateLegalEntity-D91nO-DU.js";
-import { e as useDataMissingRemediations, D as DropinLayout, E as EntityGuidanceStatus, i as iconStatus, f as EntityAssociation } from "./OnboardingDropinComponent-CDK7PYx0.js";
+import { u as useScenarios } from "./useScenarios-Bs-K4CKb.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-B_tFiIdr.js";
+import { a as useUpdateLegalEntity } from "./RadioGroup-DwMTx-4B.js";
+import { b as getRoleName, F as FormHeader } from "./CountryField-B2dh1VXh.js";
 import cx from "classnames";
-import { A as Avatar } from "./Avatar-Cd_8eqbA.js";
-import { T as TaskStatusIndicator } from "./TaskStatusIndicator-Bmm2PsCZ.js";
+import { A as Avatar } from "./Avatar-DOeLDY6M.js";
+import { M as Modal } from "./Modal-Da5go-OS.js";
+import { u as useToastContext } from "./useToastContext-BA6TVroR.js";
+import { e as useDataMissingRemediations, D as DropinLayout, E as EntityGuidanceStatus, i as iconStatus, C as CardGroup, f as EntityAssociation } from "./OnboardingDropinComponent-BYFTAjkC.js";
+import { S as StackLayout, L as LandingLayout } from "./bafinUtils-BmLu7dPk.js";
+import { a as Alert } from "./Alert-QIcYF1qD.js";
+import { I as Image, b as useCapabilityProblems, C as ContextGuidance } from "./fieldConfigurations-Yf8yD64w.js";
+import { A as ActionBar } from "./FormNavigation-UiyNK4Uw.js";
+import { T as TaskItemStatus } from "./TaskItemStatus-Ccga7-2c.js";
+import { i as isEmpty } from "./isEmpty-DyzV_vaf.js";
+import { T as TaskStatusIndicator } from "./TaskStatusIndicator-CGp1MHRK.js";
 import { D as DetailViewLayout } from "./DetailViewLayout-Z9cuUp4X.js";
-import { S as StackLayout, L as LandingLayout } from "./bafinUtils-T6TnU7m4.js";
+import { C as Confirm } from "./Confirm-Dj-igSqL.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";
@@ -27,6 +39,7 @@ const listItemDisclosure = "adyen-kyc-list-item-disclosure";
 const listItemAccessory = "adyen-kyc-list-item-accessory";
 const styles$1 = {
   listItem,
+  listItemBordered,
   listItemInteractive,
   listItemText,
   listItemTitle,
@@ -34,16 +47,20 @@ const styles$1 = {
   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$1.listItem, {
-    [styles$1.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$1.listItemText, children: [
@@ -77,7 +94,7 @@ const DecisionMakerDetails = ({
   handleDelete,
   handleEdit
 }) => {
-  const { t } = useTranslation();
+  const { t } = useTranslation("common");
   const [confirmOpen, setConfirmOpen] = useState(false);
   const { data: legalEntity, isLoading: isLegalEntityLoading } = useLegalEntity(
     decisionMaker.reference
@@ -204,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/bg-BG.json": () => import("./bg-BG-BYkC3yKf.js"), "../../language/cs-CZ.json": () => import("./cs-CZ-zTkICtXj.js"), "../../language/da-DK.json": () => import("./da-DK-D0N1TVVU.js"), "../../language/de-DE.json": () => import("./de-DE-Dtuu-nE7.js"), "../../language/el-GR.json": () => import("./el-GR-DaO38A1s.js"), "../../language/en-US.json": () => import("./en-US-546hB2Wn.js"), "../../language/es-ES.json": () => import("./es-ES-BsQpwaPN.js"), "../../language/et-EE.json": () => import("./et-EE-DF_GqBgK.js"), "../../language/fi-FI.json": () => import("./fi-FI-BJ9RzrL3.js"), "../../language/fr-FR.json": () => import("./fr-FR-CNR5-s9g.js"), "../../language/hr-HR.json": () => import("./hr-HR-CjA4MWAU.js"), "../../language/hu-HU.json": () => import("./hu-HU-NhwFr6o-.js"), "../../language/it-IT.json": () => import("./it-IT-BV9K87FK.js"), "../../language/ja-JP.json": () => import("./ja-JP-DXcP0ojZ.js"), "../../language/lt-LT.json": () => import("./lt-LT-tXTApHm2.js"), "../../language/lv-LV.json": () => import("./lv-LV-DSaQNC67.js"), "../../language/nl-NL.json": () => import("./nl-NL-DywVQ9km.js"), "../../language/no-NO.json": () => import("./no-NO-B8oxqfNI.js"), "../../language/pl-PL.json": () => import("./pl-PL-C89s21hn.js"), "../../language/pt-PT.json": () => import("./pt-PT-BvK00TeI.js"), "../../language/ro-RO.json": () => import("./ro-RO-CpGd9emB.js"), "../../language/sk-SK.json": () => import("./sk-SK-DlX5KvBV.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, {});
   }
@@ -217,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();
@@ -227,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",
@@ -274,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", {
@@ -285,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]);
@@ -302,8 +377,7 @@ const DecisionMakersInner = ({
     associatedLegalEntityType: decisionMaker.legalEntityType,
     roles: decisionMaker.types
   });
-  const addDecisionMakerOnClick = (e) => {
-    e.stopPropagation();
+  const addDecisionMakerOnClick = () => {
     onNavigateToIndividual();
   };
   const editDecisionMaker = (decisionMaker) => {
@@ -334,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,
           {
@@ -428,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",
@@ -453,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/Dropzone-CWLgt-EE.js

@@ -0,0 +1,218 @@
+;
+{
+  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] = "b2b4b1e0-bd4a-4d1c-82b6-650c4a945395", e._sentryDebugIdIdentifier = "sentry-dbid-b2b4b1e0-bd4a-4d1c-82b6-650c4a945395");
+  } catch (e) {
+  }
+}
+;
+import { jsxs, jsx, Fragment } from "preact/jsx-runtime";
+import { i as defaultFileValidationOptions, j as fileValidationRules, S as StateContextSetter, D as DropzoneFile, h as bytesToSize } from "./validate-nbcWPtZJ.js";
+import cx from "classnames";
+import { useRef, useState, useMemo, useEffect } from "preact/hooks";
+import { a as useTranslation, U as useAnalyticsContext, B as Button, x as Typography, V as Icon } from "./StoreProvider-B_tFiIdr.js";
+import { a as useForm } from "./useForm-Dah8AZ3S.js";
+function Dropzone(props) {
+  const {
+    name,
+    label = "",
+    multiple = false,
+    disabled = false,
+    required = true,
+    defaultData,
+    id,
+    isOptional = false,
+    maxNumberOfFiles = defaultFileValidationOptions.maxNumberOfFiles,
+    maxSize = defaultFileValidationOptions.maxSize,
+    allowedFileTypes = defaultFileValidationOptions.allowedFileTypes,
+    showMinimal,
+    hidePageCount,
+    onChange: propsOnChange,
+    handleFieldChange,
+    errors: errorProp,
+    fieldValidationErrors,
+    valid: validProp,
+    enableTracking = false,
+    extraDropzoneDescription
+  } = props;
+  const { t } = useTranslation("common");
+  const userEvents = useAnalyticsContext();
+  const fileInput = useRef(null);
+  const [dragged, setDragged] = useState(false);
+  const stateRef = useRef({ setState: null });
+  const rules = useMemo(
+    () => fileValidationRules({
+      maxSize,
+      allowedFileTypes,
+      maxNumberOfFiles,
+      isOptional
+    }),
+    [allowedFileTypes, isOptional, maxNumberOfFiles, maxSize]
+  );
+  const form = useForm({
+    ...props,
+    schema: [name],
+    defaultData: defaultData || [],
+    rules: {
+      [name]: rules
+    }
+  });
+  let { data, valid, errors, fieldProblems, handleChangeFor } = form;
+  const { setValid, setData, isValid, triggerValidation } = form;
+  if (handleFieldChange) {
+    handleChangeFor = handleFieldChange;
+    data = defaultData;
+    errors = errorProp;
+    valid = validProp;
+    fieldProblems = fieldValidationErrors;
+  }
+  const isRequired = errors?.[name]?.errorMessage === "fieldIsRequired";
+  const allowedFiletypes = allowedFileTypes.join(", ");
+  const hasMaxNumberOfFiles = data?.[name]?.length >= maxNumberOfFiles;
+  useEffect(() => {
+    stateRef?.current?.setState?.({
+      type: "addToState",
+      value: { data, valid, errors, fieldProblems, dataStoreId: id }
+    });
+  }, [data, valid, errors, isValid]);
+  const selectFile = () => fileInput.current?.click();
+  const handleFileDelete = (fileToDelete) => handleChangeFor(
+    name,
+    "input"
+  )(data?.[name]?.filter((file) => file !== fileToDelete));
+  const handleDragEnter = (e) => {
+    e.preventDefault();
+    e.stopPropagation();
+  };
+  const handleDragLeave = (e) => {
+    if (disabled) return;
+    e.preventDefault();
+    e.stopPropagation();
+    setDragged(false);
+  };
+  const handleDragOver = (e) => {
+    if (disabled) return;
+    e.preventDefault();
+    e.stopPropagation();
+    setDragged(true);
+  };
+  const handleDrop = (e) => {
+    if (disabled) return;
+    e.preventDefault();
+    e.stopPropagation();
+    if (e.dataTransfer) updateFiles(e.dataTransfer);
+    setDragged(false);
+  };
+  const handleFileChange = (e) => updateFiles(e.target);
+  const updateFiles = ({ files }) => {
+    if (enableTracking) {
+      userEvents.addFieldEvent("Interacted with form field", {
+        actionType: "change",
+        field: name || "file picker"
+      });
+    }
+    const currentFiles = data?.[name] || [];
+    handleChangeFor(name, "input")([...currentFiles, ...files ?? []]);
+  };
+  useEffect(() => {
+    const currentFiles = data?.[name] || [];
+    if (isValid) {
+      propsOnChange?.([...currentFiles]);
+    }
+  }, [isValid, data]);
+  useEffect(() => {
+    if (defaultData?.[name]?.[0]) {
+      setData(name, defaultData?.[name]);
+      triggerValidation();
+    } else {
+      setData(name, null);
+    }
+  }, [defaultData]);
+  useEffect(() => {
+    const currentFiles = data?.[name];
+    const hasFiles = currentFiles && currentFiles.length > 0;
+    if (isOptional && !hasFiles) {
+      setValid(name, true);
+    }
+  }, [isOptional, data]);
+  const renderInnerContent = () => showMinimal ? /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx("div", { className: "adyen-kyc-dropzone__button", children: /* @__PURE__ */ jsx(Button, { onClick: selectFile, disabled, fullWidth: true, children: t(($) => $["browseFiles"]) }) }),
+    /* @__PURE__ */ jsxs("div", { className: "adyen-kyc-dropzone__extras", children: [
+      /* @__PURE__ */ jsx(Typography, { color: "secondary", children: t(($) => $["supportedFileTypes"], { fileTypes: allowedFiletypes }) }),
+      /* @__PURE__ */ jsx(Typography, { color: "secondary", children: t(($) => $[hidePageCount ? "maxFileSizeOnly" : "maxFileSize"], {
+        maxSize: bytesToSize(maxSize)
+      }) })
+    ] })
+  ] }) : /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx("div", { className: "adyen-kyc-dropzone__icon", children: /* @__PURE__ */ jsx(Icon, { name: "upload" }) }),
+    /* @__PURE__ */ jsxs("div", { className: "adyen-kyc-dropzone__labels", children: [
+      /* @__PURE__ */ jsx(Typography, { el: "h4", variant: "body-strongest", children: t(($) => $[multiple ? "dropFilesToUpload" : "dropFileToUpload"]) }),
+      extraDropzoneDescription && /* @__PURE__ */ jsx(Typography, { color: "secondary", children: extraDropzoneDescription }),
+      /* @__PURE__ */ jsx(Typography, { color: "secondary", children: t(($) => $["supportedFileTypes"], { fileTypes: allowedFiletypes }) }),
+      /* @__PURE__ */ jsx(Typography, { color: "secondary", children: t(($) => $[hidePageCount ? "maxFileSizeOnly" : "maxFileSize"], {
+        maxSize: bytesToSize(maxSize)
+      }) }),
+      /* @__PURE__ */ jsx(Typography, { color: "secondary", children: t(($) => $["upToFiles"], { maxFiles: maxNumberOfFiles }) })
+    ] }),
+    /* @__PURE__ */ jsx("div", { className: "adyen-kyc-dropzone__button", children: /* @__PURE__ */ jsx(Button, { onClick: selectFile, variant: "secondary", children: t(($) => $["browseFiles"]) }) })
+  ] });
+  return /* @__PURE__ */ jsxs("div", { children: [
+    /* @__PURE__ */ jsx(StateContextSetter, { stateRef }),
+    label && /* @__PURE__ */ jsx(
+      "div",
+      {
+        className: cx("adyen-kyc-label__text", {
+          "adyen-kyc-label__text--error": isRequired
+        }),
+        children: label
+      }
+    ),
+    data?.[name]?.map((file) => /* @__PURE__ */ jsx(
+      DropzoneFile,
+      {
+        file,
+        onDelete: () => handleFileDelete(file),
+        errorMessage: errors?.[name]?.errorMessage
+      },
+      file
+    )),
+    !hasMaxNumberOfFiles && /* @__PURE__ */ jsxs(
+      "div",
+      {
+        role: "region",
+        className: cx("adyen-kyc-dropzone", {
+          "adyen-kyc-dropzone--dragged": dragged,
+          "adyen-kyc-dropzone--error": !dragged && isRequired
+        }),
+        onDrop: handleDrop,
+        onDragOver: handleDragOver,
+        onDragEnter: handleDragEnter,
+        onDragLeave: handleDragLeave,
+        children: [
+          renderInnerContent(),
+          /* @__PURE__ */ jsx(
+            "input",
+            {
+              className: "adyen-kyc-dropzone__input",
+              ref: fileInput,
+              disabled,
+              multiple,
+              accept: allowedFiletypes,
+              onChange: handleFileChange,
+              type: "file",
+              "aria-required": required,
+              "aria-label": label,
+              "aria-invalid": !valid,
+              "data-testid": "dropzone-input"
+            }
+          )
+        ]
+      }
+    ),
+    isRequired && /* @__PURE__ */ jsx("div", { className: "adyen-kyc-error-text", children: t(($) => $["fieldIsRequired"]) })
+  ] });
+}
+export {
+  Dropzone as D
+};