@adyen/kyc-components 3.83.3 → 3.84.3

package/dist/DecisionMakers-BjZNaC3U.js

@@ -0,0 +1,797 @@
+;
+{
+  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] = "5db6dbc9-a206-46c3-abe7-bc336893e9b0", e._sentryDebugIdIdentifier = "sentry-dbid-5db6dbc9-a206-46c3-abe7-bc336893e9b0");
+  } catch (e) {
+  }
+}
+;
+import { a$ as drop, aI as cloneObject, u as useTranslation, c as useLegalEntity, B as Button, L as Loader, x as Typography, P as useAnalyticsContext, R as ROOT_LE, a as addResourceBundles, $ as useGetTaskStatus, X as useExperimentsContext, J as EntityTypes, K as DATA_MISSING_DECISION_MAKER_ERROR_CODE_MAPPING, aQ as getOwnDecisionMakers, b6 as getAvailableDecisionMakerRoleTypes, M as TaskTypes, O as TaskStatuses, b0 as getAllowedDecisionMakerRoles, af as Trans, ap as DecisionMakerTypes, _ as __variableDynamicImportRuntimeHelper, y as LegalEntityTypes } from "./StoreProvider-BulXd4Hf.js";
+import { jsxs, Fragment, jsx } from "preact/jsx-runtime";
+import { useState, useMemo, useEffect } from "preact/hooks";
+import { u as useScenarios } from "./useScenarios-pcYq7HkO.js";
+import { d as useUpdateLegalEntity } from "./RadioGroup-CDIi5JOR.js";
+import { S as StackLayout, f as getRoleName, L as List, H as Header } from "./CountryField-DePvueIq.js";
+import { L as ListItem, e as useDataMissingRemediations, D as DropinLayout, E as EntityGuidanceStatus, i as iconStatus, f as EntityAssociation } from "./OnboardingDropinComponent-BlMzaK2Z.js";
+import { M as Modal } from "./Modal-CeWqn3jD.js";
+import { u as useToastContext } from "./useToastContext-SPgtDHvP.js";
+import { a as Alert } from "./Alert-BeizfGIR.js";
+import { I as Image, b as useCapabilityProblems, C as ContextGuidance } from "./fieldConfigurations-BBmPG-CS.js";
+import { A as ActionBar } from "./FormNavigation-C8985odz.js";
+import { T as TaskItemStatus } from "./TaskItemStatus-DykYxx-L.js";
+import { i as isEmpty } from "./isEmpty-CD8E4UFi.js";
+import { a as datasetUtilities, S as StructuredList, C as Confirm } from "./useDataset-BhtLJw8i.js";
+import { D as DetailViewLayout } from "./DetailViewLayout-Z9cuUp4X.js";
+import { G as GuidanceQuestionValues, m as mapLegalEntityToIndividualOnfidoSchema } from "./mapLegalEntityToIndividualOnfidoSchema-DpDvE22C.js";
+import { m as mapAddressLabels } from "./utils-CfNHCh35.js";
+import { l as localizeDateString } from "./localizeDateString-DHsCnGIt.js";
+import { lazy } from "preact/compat";
+import { L as LandingLayout } from "./bafinUtils-DOsm2O1i.js";
+const isManualVerificationOrExistingDoc = (idVerificationMethod) => idVerificationMethod === "manualVerification" || idVerificationMethod === "existingDocument";
+const formatFileSummaryData = (data, locale) => {
+  const { idVerificationMethod, proofOfNationalId, proofOfResidency, proofOfRelationship } = data;
+  const proofOfNationalIdFile = proofOfNationalId?.proofOfNationalId?.[0];
+  const proofOfResidencyFile = proofOfResidency?.proofOfResidency?.[0];
+  const proofOfRelationshipFile = proofOfRelationship?.proofOfRelationship?.[0];
+  const idDocument = {
+    idDocumentType: idVerificationMethod?.idDocument?.idDocumentType,
+    uploadedDate: idVerificationMethod?.idDocument?.modificationDate ? localizeDateString(idVerificationMethod?.idDocument?.modificationDate ?? "", locale) : void 0
+  };
+  return {
+    // Format the ID document if it exists.
+    ...idDocument?.idDocumentType && {
+      idDocument
+    },
+    // Include proof of national ID file name if it exists.
+    ...proofOfNationalIdFile && {
+      proofOfNationalId: {
+        fileName: proofOfNationalIdFile.name
+      }
+    },
+    // Include proof of residency file name if it exists.
+    ...proofOfResidencyFile && {
+      proofOfResidency: {
+        fileName: proofOfResidencyFile.name
+      }
+    },
+    // Include proof of relationship file name if it exists.
+    ...proofOfRelationshipFile && {
+      proofOfRelationship: {
+        fileName: proofOfRelationshipFile.name
+      }
+    }
+  };
+};
+const formatDataForSummary = (dataToFormat, locale, commonT) => {
+  if (!dataToFormat) return {};
+  const datasetUtils = datasetUtilities(locale);
+  let formattedSummaryData = cloneObject(dataToFormat);
+  if (formattedSummaryData?.basicDetails?.phoneNumber) {
+    formattedSummaryData.basicDetails.phoneNumber = formattedSummaryData.basicDetails.phoneNumber.number;
+  }
+  if (formattedSummaryData.additionalPersonalDetails?.country) {
+    formattedSummaryData.additionalPersonalDetails.country = datasetUtils.getCountryName(
+      formattedSummaryData.additionalPersonalDetails.country
+    );
+  }
+  if (formattedSummaryData.additionalPersonalDetails?.nationality) {
+    formattedSummaryData.additionalPersonalDetails.nationality = datasetUtils.getCountryName(
+      formattedSummaryData.additionalPersonalDetails.nationality
+    );
+  }
+  if (formattedSummaryData.additionalPersonalDetails) {
+    formattedSummaryData.address = mapAddressLabels(
+      formattedSummaryData.additionalPersonalDetails,
+      datasetUtils
+    );
+  }
+  if (formattedSummaryData.basicDetails?.accountHolder) {
+    formattedSummaryData.basicDetails.accountHolder = commonT(
+      ($) => $[formattedSummaryData.basicDetails.accountHolder]
+    );
+  }
+  if (formattedSummaryData.additionalPersonalDetails?.birthDate) {
+    formattedSummaryData.additionalPersonalDetails.birthDate = localizeDateString(
+      formattedSummaryData.additionalPersonalDetails.birthDate,
+      locale
+    );
+  }
+  if (isManualVerificationOrExistingDoc(
+    formattedSummaryData.idVerificationMethod?.idVerificationMethod
+  ) || formattedSummaryData.proofOfResidency) {
+    const fileSummaryData = formatFileSummaryData(dataToFormat, locale);
+    formattedSummaryData = { ...formattedSummaryData, ...fileSummaryData };
+    formattedSummaryData.manualIdUpload = { ...formattedSummaryData.idDocument };
+    formattedSummaryData.idVerificationMethod.idDocument = { ...formattedSummaryData.idDocument };
+  }
+  if (formattedSummaryData.additionalPersonalDetails?.taxInformation) {
+    const taxInformation = formattedSummaryData.additionalPersonalDetails.taxInformation.find(
+      (taxId) => taxId.country === dataToFormat.additionalPersonalDetails?.nationality
+    );
+    if (taxInformation) {
+      delete formattedSummaryData.additionalPersonalDetails.taxInformation;
+      formattedSummaryData.additionalPersonalDetails[taxInformation.type] = taxInformation.number;
+    }
+  }
+  if (formattedSummaryData?.signatoryQuestionnaire) {
+    formattedSummaryData.signatoryQuestionnaire = dataToFormat?.signatoryQuestionnaire?.isSignatory === GuidanceQuestionValues.YES ? [commonT(($) => $["signatorySummaryLabel"])] : [];
+  }
+  if (formattedSummaryData?.uboQuestionnaire) {
+    const roleFieldToLabelMap = {
+      isOwner: "ownerSummaryLabel",
+      isControllingPerson: "controllingPersonSummaryLabel",
+      isDirector: "directorSummaryLabel"
+    };
+    formattedSummaryData.uboQuestionnaire = Object.keys(roleFieldToLabelMap).flatMap(
+      (field) => dataToFormat?.uboQuestionnaire?.[field] === GuidanceQuestionValues.YES ? [commonT(($) => $[roleFieldToLabelMap[field]])] : []
+    );
+  }
+  return formattedSummaryData;
+};
+const getOmittedKeysForSummary = (data, taskType) => [
+  // Omit 'role' if the task is for a decision maker.
+  ...["role"],
+  // Omit 'idNumber' if the user is exempt from providing it.
+  ...data?.additionalPersonalDetails?.idNumberExempt ? ["idNumber"] : [],
+  // Omit 'idVerificationMethod' if manual verification was used.
+  ...isManualVerificationOrExistingDoc(data?.idVerificationMethod?.idVerificationMethod) ? ["idVerificationMethod"] : [],
+  "address",
+  "manualIdUpload"
+];
+const getSummaryData = (data, locale, commonT, taskType) => {
+  const summaryData = formatDataForSummary(data, locale, commonT);
+  const omittedKeys = getOmittedKeysForSummary(data)?.filter(Boolean);
+  return {
+    ...drop(...omittedKeys).from(summaryData),
+    basicDetails: drop("firstName", "lastName", "role", "nomineeShareholder").from(
+      summaryData.basicDetails
+    ),
+    additionalPersonalDetails: drop("idNumberExempt").from(summaryData.additionalPersonalDetails),
+    idDocument: summaryData.idVerificationMethod?.idDocument
+  };
+};
+const getStructuredListItems = (data, commonT) => {
+  if (typeof data !== "object" || data === null || Array.isArray(data)) {
+    return [];
+  }
+  const filteredEntries = Object.entries(data).filter(([, itemValue]) => {
+    if (itemValue === null || itemValue === void 0 || itemValue === "") {
+      return false;
+    }
+    return !(Array.isArray(itemValue) && itemValue.length === 0);
+  });
+  if (filteredEntries.length === 0) {
+    return [];
+  }
+  return filteredEntries.map(([itemKey, itemValue]) => ({
+    term: commonT(($) => $[itemKey]),
+    details: Array.isArray(itemValue) ? itemValue.join(", ") : commonT(($) => $[itemValue]) || String(itemValue),
+    type: Array.isArray(itemValue) ? "list" : "text"
+  }));
+};
+const DecisionMakerDetails = ({
+  decisionMaker,
+  parentLegalEntity,
+  handleClose,
+  handleDelete,
+  handleEdit
+}) => {
+  const { t: commonT, i18n } = useTranslation("common");
+  const { t: individualT } = useTranslation("individual");
+  const [confirmOpen, setConfirmOpen] = useState(false);
+  const { data: legalEntity, isLoading: isLegalEntityLoading } = useLegalEntity(
+    decisionMaker.reference
+  );
+  const formattedSummary = useMemo(() => {
+    if (legalEntity) {
+      const individualOnfidoSchema = mapLegalEntityToIndividualOnfidoSchema(
+        legalEntity,
+        false,
+        true,
+        parentLegalEntity
+      );
+      return getSummaryData(
+        individualOnfidoSchema,
+        i18n.language,
+        commonT
+      );
+    }
+  }, [legalEntity, parentLegalEntity, i18n, commonT]);
+  const actions = /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx(Button, { onClick: handleEdit, variant: "primary", fullWidth: true, children: commonT(($) => $["editDetails"]) }),
+    /* @__PURE__ */ jsx(Button, { onClick: () => setConfirmOpen(true), variant: "secondary", fullWidth: true, children: commonT(($) => $["delete"]) })
+  ] });
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx(Modal, { onClose: handleClose, ariaLabel: commonT(($) => $["individualDetails"]), inset: true, children: /* @__PURE__ */ jsx(DetailViewLayout, { title: commonT(($) => $["individualDetails"]), actions, children: isLegalEntityLoading || !legalEntity ? /* @__PURE__ */ jsx(Loader, {}) : /* @__PURE__ */ jsxs(StackLayout, { gap: "medium", children: [
+      /* @__PURE__ */ jsx(
+        ListItem,
+        {
+          accessory: /* @__PURE__ */ jsx(TaskItemStatus, { status: decisionMaker.status }),
+          avatar: { iconName: "user", circle: true },
+          title: decisionMaker.name,
+          description: decisionMaker.types.map((type) => commonT(($) => $[getRoleName(type)])).filter(Boolean).join(",")
+        }
+      ),
+      formattedSummary && Object.entries(formattedSummary).map(([key, value]) => {
+        const items = getStructuredListItems(value, commonT);
+        if (items.length === 0) {
+          return null;
+        }
+        return /* @__PURE__ */ jsxs(List, { variant: "grouped-secondary", children: [
+          /* @__PURE__ */ jsx(Typography, { variant: "title", children: individualT(($) => $[key]) }),
+          /* @__PURE__ */ jsx(StructuredList, { items })
+        ] }, key);
+      }).filter(Boolean)
+    ] }) }) }),
+    confirmOpen && /* @__PURE__ */ jsx(
+      Confirm,
+      {
+        title: commonT(($) => $["deleteItem"], { item: decisionMaker.name }),
+        description: commonT(($) => $["thisActionIsPermanent"]),
+        onConfirm: handleDelete,
+        confirmText: commonT(($) => $["delete"]),
+        onCancel: () => setConfirmOpen(false),
+        critical: true
+      }
+    )
+  ] });
+};
+const decisionMakersGettingStarted = "adyen-kyc-decision-makers-getting-started";
+const styles = {
+  decisionMakersGettingStarted
+};
+const DecisionMakersModalContent = () => {
+  const { t } = useTranslation("individual");
+  return /* @__PURE__ */ jsxs("div", { className: styles.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"]) })
+  ] });
+};
+const decisionMakerGroup = lazy(() => import("./decision-makers-group-CgddXgrx.js"));
+const DecisionMakersGettingStarted = ({
+  addDecisionMakerOnClick,
+  handleCancelClick
+}) => {
+  const { t: commonT } = useTranslation("common");
+  const { t: individualT } = useTranslation("individual");
+  const userEvents = useAnalyticsContext();
+  const [isModalOpen, setIsModalOpen] = useState(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: styles.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, { children: [
+          /* @__PURE__ */ jsx(
+            Button,
+            {
+              fullWidth: true,
+              testId: "decision-makers-getting-started-primary-button",
+              onClick: addDecisionMakerOnClick,
+              children: commonT(($) => $["gettingStarted"])
+            }
+          ),
+          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, {})
+      }
+    )
+  ] });
+};
+const signatoryMissingAlert = {
+  type: "single",
+  code: "2_124",
+  titleKey: "authorizedSignatoryMissing",
+  descriptionKey: "addAtLeastOneAuthorizedSignatory",
+  actionKey: "addAuthorizedSignatory"
+};
+const beneficialOwnersMissingAlert = {
+  type: "grouped",
+  codes: ["2_123", "2_151", "2_185"],
+  titleKey: "beneficialOwnersMissing",
+  actionKey: "addBeneficialOwner",
+  detailKeys: {
+    "2_123": "addAllBeneficialOwners",
+    "2_151": "addAtLeastOneBeneficialOwnerControllingPerson",
+    "2_185": "addAtLeastOneDirector"
+  }
+};
+const decisionMakerRemediationAlerts = [
+  signatoryMissingAlert,
+  beneficialOwnersMissingAlert
+];
+const RemediationAlertItem = ({ config, activeCodes, onAction }) => {
+  const { t } = useTranslation("individual");
+  const isVisible = useMemo(() => {
+    if (config.type === "single") {
+      return activeCodes.includes(config.code);
+    }
+    return config.codes.some((code) => activeCodes.includes(code));
+  }, [activeCodes, config]);
+  const activeGroupedDetails = useMemo(() => {
+    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]) })
+      ]
+    }
+  );
+};
+const RemediationAlerts = ({ activeCodes, onAction }) => /* @__PURE__ */ jsx(Fragment, { children: decisionMakerRemediationAlerts.map((config) => /* @__PURE__ */ jsx(
+  RemediationAlertItem,
+  {
+    config,
+    activeCodes,
+    onAction
+  },
+  config.type === "single" ? config.code : config.titleKey
+)) });
+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-DPkib_ah.js"), "../../language/cs-CZ.json": () => import("./cs-CZ-B0dmNTJm.js"), "../../language/da-DK.json": () => import("./da-DK-quX5LuPc.js"), "../../language/de-DE.json": () => import("./de-DE-B2QaSUv3.js"), "../../language/el-GR.json": () => import("./el-GR-C2BsVqjY.js"), "../../language/en-US.json": () => import("./en-US-BEgdeTV4.js"), "../../language/es-ES.json": () => import("./es-ES-DCkqCwAK.js"), "../../language/et-EE.json": () => import("./et-EE-DbRebqzm.js"), "../../language/fi-FI.json": () => import("./fi-FI-BXJbm9sZ.js"), "../../language/fr-FR.json": () => import("./fr-FR-t2k348rx.js"), "../../language/hr-HR.json": () => import("./hr-HR-Dlw8mrQW.js"), "../../language/hu-HU.json": () => import("./hu-HU-DLynQejq.js"), "../../language/it-IT.json": () => import("./it-IT-PJbf57vA.js"), "../../language/ja-JP.json": () => import("./ja-JP-7DhgV_0J.js"), "../../language/lt-LT.json": () => import("./lt-LT-C_sT0Isz.js"), "../../language/lv-LV.json": () => import("./lv-LV-Cwzt1ESp.js"), "../../language/nl-NL.json": () => import("./nl-NL-D0wVWeHf.js"), "../../language/no-NO.json": () => import("./no-NO-JHMzV-ae.js"), "../../language/pl-PL.json": () => import("./pl-PL-De41L6O6.js"), "../../language/pt-BR.json": () => import("./pt-BR-D7RCymsU.js"), "../../language/pt-PT.json": () => import("./pt-PT-CgXkfMUc.js"), "../../language/ro-RO.json": () => import("./ro-RO-1W3Bw0U7.js"), "../../language/sk-SK.json": () => import("./sk-SK-BTujkOgF.js"), "../../language/sl-SI.json": () => import("./sl-SI-Cq4LxAvb.js"), "../../language/sv-SE.json": () => import("./sv-SE-Csib2Zj_.js") }), `../../language/${i18n.language}.json`, 4) }
+  ]);
+  if (isLoading || !data) {
+    return /* @__PURE__ */ jsx(Loader, {});
+  }
+  return /* @__PURE__ */ jsx(DecisionMakersInner, { ...props, legalEntity: data });
+};
+const DecisionMakersInner = ({
+  legalEntity,
+  onNavigateToIndividual,
+  navigateBackToTaskList,
+  trustedEntityAssociations
+}) => {
+  const getTaskStatus = useGetTaskStatus();
+  const { t: commonT } = useTranslation("common");
+  const { t: individualT } = useTranslation("individual");
+  const userEvents = useAnalyticsContext();
+  const { isExperimentEnabled } = useExperimentsContext();
+  const { showToast } = useToastContext();
+  const isRevampedDecisionMakersTaskPageEnabled = isExperimentEnabled(
+    "EnableRevampedDecisionMakersTaskPage"
+  );
+  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",
+      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(() => {
+    const missingData = capabilityProblems?.[EntityTypes.LEGAL_ENTITY]?.[legalEntity.id]?.missingData ?? [];
+    const remediationCodes = 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: "saveAndGoToOverview"
+  };
+  const { remediationMessages } = useDataMissingRemediations({
+    legalEntityId: legalEntity.id,
+    problems: capabilityProblems ?? {}
+  });
+  const mappedDecisionMakers = decisionMakers?.reduce(
+    (mappedDecisionMakers2, decisionMaker) => {
+      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: capabilityProblems?.LegalEntity?.[decisionMaker.legalEntityId]
+      };
+      return mappedDecisionMakers2;
+    },
+    {}
+  );
+  const uniqueDecisionMakers = mappedDecisionMakers ? Object.values(mappedDecisionMakers) : [];
+  const BENEFICIAL_OWNER_ROLES = [
+    DecisionMakerTypes.OWNER,
+    DecisionMakerTypes.CONTROLLING_PERSON,
+    DecisionMakerTypes.DIRECTOR
+  ];
+  const decisionMakerStatusLabelMap = {
+    [TaskStatuses.ERROR]: commonT(($) => $["actionNeeded"]),
+    [TaskStatuses.PROCESSING]: commonT(($) => $["inReview"]),
+    [TaskStatuses.FINISHED]: commonT(($) => $["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", {
+      actionType: "start"
+    });
+  }, [userEvents]);
+  useEffect(() => {
+    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 allowedDecisionMakerTypes = getAllowedDecisionMakerRoles(
+    legalEntity,
+    TaskTypes.DECISION_MAKER,
+    scenarios
+  );
+  const haveMaxDecisionMakers = allowedDecisionMakerTypes.length === 0;
+  const getDecisionMakerTrackingParams = (decisionMaker) => ({
+    task: TaskTypes.DECISION_MAKER_OVERVIEW,
+    associatedLegalEntityId: decisionMaker.reference,
+    associatedLegalEntityType: decisionMaker.legalEntityType,
+    roles: decisionMaker.types
+  });
+  const addDecisionMakerOnClick = () => {
+    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"])
+      });
+    } catch {
+      showToast({ variant: "error", label: individualT(($) => $["failedToRemoveDecisionMaker"]) });
+    }
+  };
+  const renderDecisionMakerItem = (decisionMaker) => {
+    const isSignatory = decisionMaker.types.includes(DecisionMakerTypes.SIGNATORY);
+    const isBeneficialOwner = decisionMaker.types.some(
+      (type) => BENEFICIAL_OWNER_ROLES.includes(type)
+    );
+    const description = [
+      isSignatory && commonT(($) => $.signatory),
+      isBeneficialOwner && commonT(($) => $.beneficialOwner)
+    ].filter(Boolean).join(", ");
+    return /* @__PURE__ */ jsx(
+      ListItem,
+      {
+        accessory: /* @__PURE__ */ jsx(
+          TaskItemStatus,
+          {
+            status: decisionMaker.status,
+            statusLabel: decisionMakerStatusLabelMap[decisionMaker.status]
+          }
+        ),
+        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", children: [
+            /* @__PURE__ */ jsx(
+              Header,
+              {
+                title: individualT(($) => $["ownersAndDecisionMakers"]),
+                description: individualT(($) => $["ownersAndDecisionMakersDescription"]),
+                status: decisionMakersTaskStatus,
+                align: "center",
+                children: /* @__PURE__ */ jsx(Button, { slot: "actions", variant: "link", onClick: openModal, children: commonT(($) => $["learnMore"]) })
+              }
+            ),
+            showWarning && /* @__PURE__ */ jsx(
+              RemediationAlerts,
+              {
+                activeCodes: decisionMakerRemediationCodes,
+                onAction: addDecisionMakerOnClick
+              }
+            )
+          ] }),
+          /* @__PURE__ */ jsxs(StackLayout, { gap: "large", children: [
+            actionNeededDecisionMakers.length > 0 && /* @__PURE__ */ jsx(
+              List,
+              {
+                variant: "grouped-primary",
+                padding: "small",
+                header: commonT(($) => $["actionNeeded"]),
+                dividers: false,
+                children: actionNeededDecisionMakers.map(renderDecisionMakerItem)
+              }
+            ),
+            completeDecisionMakers.length > 0 && /* @__PURE__ */ jsx(
+              List,
+              {
+                variant: "grouped-primary",
+                padding: "small",
+                header: commonT(($) => $["complete"]),
+                dividers: false,
+                children: completeDecisionMakers.map(renderDecisionMakerItem)
+              }
+            )
+          ] })
+        ] }) : /* @__PURE__ */ jsxs(Fragment, { 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__ */ jsx(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
+          )) })
+        ] }),
+        showDecisionMakerModal && selectedDecisionMaker && /* @__PURE__ */ jsx(
+          DecisionMakerDetails,
+          {
+            handleClose: closeDecisionMakerModal,
+            handleDelete: () => deleteDecisionMaker(selectedDecisionMaker),
+            handleEdit: () => editDecisionMaker(selectedDecisionMaker),
+            decisionMaker: selectedDecisionMaker,
+            parentLegalEntity: legalEntity
+          }
+        ),
+        /* @__PURE__ */ jsx("div", { className: "adyen-kyc-decision-makers__actions", children: isRevampedDecisionMakersTaskPageEnabled ? /* @__PURE__ */ jsx(List, { variant: "grouped-primary", padding: "small", dividers: false, children: /* @__PURE__ */ jsx(
+          ListItem,
+          {
+            avatar: { iconName: "plus", circle: true },
+            title: commonT(($) => $["addNew"]),
+            action: { onClick: addDecisionMakerOnClick }
+          }
+        ) }) : /* @__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])
+          }
+        ),
+        isModalOpen && /* @__PURE__ */ jsx(
+          Modal,
+          {
+            onClose: closeModal,
+            ariaLabel: individualT(($) => $["moreAboutOwnersAndDecisionMakers"]),
+            inset: true,
+            children: /* @__PURE__ */ jsx(DecisionMakersModalContent, {})
+          }
+        )
+      ] })
+    }
+  );
+};
+export {
+  DecisionMakers
+};