@adyen/kyc-components 4.0.0-beta.3 → 4.0.0-beta.4

package/dist/{DecisionMakers-CZ5-IRtU.js → DecisionMakers-DthVv8_t.js}

@@ -2,17 +2,122 @@
 {
   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] = "8dc04362-f3eb-4192-bb5a-5b3d0dc024bb", e._sentryDebugIdIdentifier = "sentry-dbid-8dc04362-f3eb-4192-bb5a-5b3d0dc024bb");
+    n && (e._sentryDebugIds = e._sentryDebugIds || {}, e._sentryDebugIds[n] = "4179b838-386c-466b-af87-22e05cb0d3d0", e._sentryDebugIdIdentifier = "sentry-dbid-4179b838-386c-466b-af87-22e05cb0d3d0");
   } catch (e) {
   }
 }
 ;
 import { jsxs, jsx, Fragment } from "preact/jsx-runtime";
 import { useState, useEffect } from "preact/hooks";
-import { ap as useI18nContext, G as Typography, B as Alert, a0 as useAnalyticsContext, _ as Button, bp as Svg, b5 as Modal, b as useLegalEntity, R as ROOT_LE, L as Loader, aa as useGetTaskStatus, a as useTranslation, a7 as useExperimentsContext, a6 as useToastContext, ac as useCapabilityProblems, by as getOwnDecisionMakers, cS as getAvailableDecisionMakerRoleTypes, X as TaskTypes, cB as getAllowedDecisionMakerRoles, F as FormHeader, aX as ContextGuidance, aV as Trans, cQ as DecisionMakerType, ab as CardGroup, aQ as ActionBar } from "./StoreProvider-ClKLaHzy.js";
-import { a as useUpdateLegalEntity } from "./useUpdateLegalEntity-D8dw9Oc3.js";
-import { c as useDataMissingRemediations, D as DropinLayout, E as EntityGuidanceStatus, i as iconStatus, d as EntityAssociation } from "./OnboardingDropinComponent-DBW5N3Dr.js";
-import { L as LandingLayout } from "./LandingLayout-B45lEjOv.js";
+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-O9jwxfG8.js";
+import { a as useUpdateLegalEntity } from "./useUpdateLegalEntity-BfnvHQJj.js";
+import { e as useDataMissingRemediations, D as DropinLayout, E as EntityGuidanceStatus, i as iconStatus, f as EntityAssociation } from "./OnboardingDropinComponent-DYdts9Sh.js";
+import cx from "classnames";
+import { A as Avatar } from "./Avatar-BfRRf9_a.js";
+import { T as TaskStatusIndicator } from "./TaskStatusIndicator-BanufME0.js";
+import { S as StackLayout, L as LandingLayout } from "./LandingLayout-BC3pp_IY.js";
+const listItem = "adyen-kyc-list-item";
+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 = {
+  listItem,
+  listItemInteractive,
+  listItemText,
+  listItemTitle,
+  listItemDescription,
+  listItemDisclosure,
+  listItemAccessory
+};
+const ListItem = ({ accessory, action, avatar, 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 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 })
+    ] }),
+    accessory && /* @__PURE__ */ jsx("div", { className: styles$2.listItemAccessory, children: accessory })
+  ] });
+  if (isInteractive) {
+    return /* @__PURE__ */ jsxs(
+      "button",
+      {
+        "aria-label": title,
+        className: rootClassname,
+        disabled: isDisabled,
+        onClick: action.onClick,
+        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" }) })
+        ]
+      }
+    );
+  } else {
+    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 [confirmOpen, setConfirmOpen] = useState(false);
+  const { data: legalEntity, isLoading: isLegalEntityLoading } = useLegalEntity(
+    decisionMaker.reference
+  );
+  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"]) })
+      ] }) })
+    ] }),
+    confirmOpen && /* @__PURE__ */ jsx(
+      Confirm,
+      {
+        title: t(($) => $["deleteThisIndividual"]),
+        description: t(($) => $["thisActionIsPermanent"]),
+        onConfirm: handleDelete,
+        confirmText: t(($) => $["deleteIndividual"]),
+        onCancel: () => setConfirmOpen(false),
+        critical: true
+      }
+    )
+  ] });
+};
 const decisionMakersGettingStarted = "adyen-kyc-decision-makers-getting-started";
 const styles = {
   decisionMakersGettingStarted
@@ -135,11 +240,30 @@ const DecisionMakersInner = ({
     "EnableRevampedDecisionMakersTaskPage"
   );
   const [isRemoveDisabled, setIsRemoveDisabled] = useState(false);
+  const [showDecisionMakerModal, setShowDecisionMakerModal] = useState(false);
+  const [selectedDecisionMaker, setSelectedDecisionMaker] = useState();
+  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 updateLegalEntity = useUpdateLegalEntity();
   const decisionMakers = getOwnDecisionMakers(legalEntity);
   const registeredCountry = legalEntity.organization.registeredAddress.country;
-  const availableDecisionMakers = getAvailableDecisionMakerRoleTypes(registeredCountry);
+  const { data: scenarios } = useScenarios(registeredCountry, LegalEntityTypes.INDIVIDUAL);
+  const availableDecisionMakers = getAvailableDecisionMakerRoleTypes(registeredCountry, scenarios);
   const translationKeys = {
     home: "saveAndGoToOverview"
   };
@@ -183,7 +307,8 @@ const DecisionMakersInner = ({
   const uniqueDecisionMakersPerType = (roleType) => uniqueDecisionMakers.filter(({ types }) => types.includes(roleType)).length;
   const allowedDecisionMakerTypes = getAllowedDecisionMakerRoles(
     legalEntity,
-    TaskTypes.DECISION_MAKER
+    TaskTypes.DECISION_MAKER,
+    scenarios
   );
   const haveMaxDecisionMakers = allowedDecisionMakerTypes.length === 0;
   const getDecisionMakerTrackingParams = (decisionMaker) => ({
@@ -259,7 +384,7 @@ const DecisionMakersInner = ({
               Trans,
               {
                 t,
-                i18nKey: ($) => $[`${roleType === DecisionMakerType.CONTROLLING_PERSON ? "controllingPerson" : roleType === DecisionMakerType.OWNER ? "owner" : roleType}GuideDescription`]
+                i18nKey: ($) => $[`${roleType === DecisionMakerTypes.CONTROLLING_PERSON ? "controllingPerson" : roleType === DecisionMakerTypes.OWNER ? "owner" : roleType}GuideDescription`]
               }
             ) }, roleType)) }),
             titleId: "whatIsTheDifferenceBetweenTheseRoles",
@@ -274,7 +399,24 @@ const DecisionMakersInner = ({
             variant: "warning"
           }
         ),
-        !isRevampedDecisionMakersTaskPageEnabled || uniqueDecisionMakers?.length > 0 ? /* @__PURE__ */ jsx(CardGroup, { children: uniqueDecisionMakers.map((decisionMaker) => /* @__PURE__ */ jsx(
+        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,
@@ -292,6 +434,15 @@ const DecisionMakersInner = ({
           },
           decisionMaker.reference
         )) }) : null,
+        showDecisionMakerModal && selectedDecisionMaker && /* @__PURE__ */ jsx(
+          DecisionMakerDetails,
+          {
+            handleClose: closeDecisionMakerModal,
+            handleDelete: () => deleteDecisionMaker(selectedDecisionMaker),
+            handleEdit: () => editDecisionMaker(selectedDecisionMaker),
+            decisionMaker: selectedDecisionMaker
+          }
+        ),
         /* @__PURE__ */ jsx("div", { className: "adyen-kyc-decision-makers__actions", children: /* @__PURE__ */ jsx(
           Button,
           {

package/dist/{EmbeddedStatus-Blr0seRl.js → EmbeddedStatus-DdGnEZzS.js}

@@ -2,17 +2,17 @@
 {
   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] = "149f79b2-4176-4452-ad51-fe9ca86e1f46", e._sentryDebugIdIdentifier = "sentry-dbid-149f79b2-4176-4452-ad51-fe9ca86e1f46");
+    n && (e._sentryDebugIds = e._sentryDebugIds || {}, e._sentryDebugIds[n] = "329b7a5a-166f-4da4-9867-7c3c1020ed02", e._sentryDebugIdIdentifier = "sentry-dbid-329b7a5a-166f-4da4-9867-7c3c1020ed02");
   } catch (e) {
   }
 }
 ;
 import { jsxs, jsx, Fragment } from "preact/jsx-runtime";
 import cx from "classnames";
-import { A as Avatar } from "./Avatar-vCjWXfC7.js";
-import { Z as TaskStatus, a as useTranslation, z as Skeleton, G as Typography } from "./StoreProvider-ClKLaHzy.js";
+import { A as Avatar } from "./Avatar-BfRRf9_a.js";
+import { a1 as TaskStatuses, c as useTranslation, J as Skeleton, N as Typography } from "./StoreProvider-O9jwxfG8.js";
 import { T as Tag } from "./Tag-DdkVScyr.js";
-import { O as OnboardingStatus } from "./view-verification-status-DTkA8PtO.js";
+import { O as OnboardingStatuses } from "./view-verification-status-VFcBydkR.js";
 const embeddedStatus = "adyen-kyc-embedded-status";
 const embeddedStatusLoading = "adyen-kyc-embedded-status-loading";
 const embeddedStatusActionIndicator = "adyen-kyc-embedded-status-action-indicator";
@@ -25,21 +25,21 @@ const styles = {
 };
 const statusToTag = (status) => {
   switch (status) {
-    case OnboardingStatus.IN_REVIEW:
+    case OnboardingStatuses.IN_REVIEW:
       return { translationKey: "inReview", variant: "grey" };
-    case TaskStatus.FINISHED:
-    case OnboardingStatus.VERIFIED:
+    case TaskStatuses.FINISHED:
+    case OnboardingStatuses.VERIFIED:
       return { translationKey: "verified", variant: "green" };
-    case TaskStatus.SIGNED:
+    case TaskStatuses.SIGNED:
       return { translationKey: "signed", variant: "green" };
-    case OnboardingStatus.REJECTED:
+    case OnboardingStatuses.REJECTED:
       return { translationKey: "rejected", variant: "red" };
-    case TaskStatus.ERROR:
+    case TaskStatuses.ERROR:
       return { translationKey: "actionNeeded", variant: "red" };
-    case TaskStatus.PROCESSING:
-    case OnboardingStatus.AWAITING_DATA:
+    case TaskStatuses.PROCESSING:
+    case OnboardingStatuses.AWAITING_DATA:
       return { translationKey: "inReview", variant: "grey" };
-    case OnboardingStatus.UNSUCCESSFUL:
+    case OnboardingStatuses.UNSUCCESSFUL:
       return { translationKey: "unsuccessful", variant: "red" };
     default:
       return void 0;

package/dist/{FormEndState-JB6QFSet.js → FormEndState-CUYkLBgX.js}

@@ -2,7 +2,7 @@
 {
   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] = "82664a43-c9cb-4050-9407-0addbf70ef3f", e._sentryDebugIdIdentifier = "sentry-dbid-82664a43-c9cb-4050-9407-0addbf70ef3f");
+    n && (e._sentryDebugIds = e._sentryDebugIds || {}, e._sentryDebugIds[n] = "0e604486-a79f-4584-afb1-1a057720731a", e._sentryDebugIdIdentifier = "sentry-dbid-0e604486-a79f-4584-afb1-1a057720731a");
   } catch (e) {
   }
 }
@@ -10,7 +10,7 @@
 import { jsxs, jsx } from "preact/jsx-runtime";
 import cx from "classnames";
 import { defineSlots } from "named-slots";
-import { a4 as Icon, A as AlertIcon } from "./StoreProvider-ClKLaHzy.js";
+import { a7 as Icon, A as AlertIcon } from "./StoreProvider-O9jwxfG8.js";
 const formEndState = "adyen-kyc-form-end-state";
 const endStateIcon = "adyen-kyc-end-state-icon";
 const iconInfo = "adyen-kyc-icon-info";
@@ -32,7 +32,7 @@ const styles = {
   endStateActions
 };
 const FormEndState = ({ variant = "success", children, className }) => {
-  const Slot = defineSlots(children, ["title", "content", "icon", "actions"]);
+  const { Slot } = defineSlots(children, ["title", "content", "icon", "actions"]);
   const variantMap = {
     basic: "",
     info: styles.iconInfo,

package/dist/{FormFlow-DjvdNEiV.js → FormFlow-CNXkXUwa.js}

@@ -2,14 +2,14 @@
 {
   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] = "56cdf054-24a6-43da-a4e0-9cbc6ac07e8a", e._sentryDebugIdIdentifier = "sentry-dbid-56cdf054-24a6-43da-a4e0-9cbc6ac07e8a");
+    n && (e._sentryDebugIds = e._sentryDebugIds || {}, e._sentryDebugIds[n] = "eb7431c1-a9b3-43db-916d-b2527dc9f871", e._sentryDebugIdIdentifier = "sentry-dbid-eb7431c1-a9b3-43db-916d-b2527dc9f871");
   } catch (e) {
   }
 }
 ;
 import { jsx, jsxs } from "preact/jsx-runtime";
 import { useMemo, useRef, useState } from "preact/hooks";
-import { dE as FormContext, a0 as useAnalyticsContext, a as useTranslation, bw as MaybeModal, a3 as LoaderWrapper, dF as FormRouterContextProvider, aP as Summary, _ as Button, $ as IconButton, bb as Confirm } from "./StoreProvider-ClKLaHzy.js";
+import { dC as FormContext, a3 as useAnalyticsContext, c as useTranslation, bw as MaybeModal, a6 as LoaderWrapper, dD as FormRouterContextProvider, aR as Summary, G as Button, a2 as IconButton, bi as Confirm } from "./StoreProvider-O9jwxfG8.js";
 import cx from "classnames";
 function FormContextProvider({
   children,
@@ -138,7 +138,7 @@ const FormFlow = ({
   };
   const handleConfirmDismiss = () => {
     setIsConfirmPresented(false);
-    handleCancelClick();
+    handleCancelClick?.();
   };
   const handleSkip = () => {
     userEvents.addPageEvent("Clicked button", {