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

package/dist/DecisionMakers-DthVv8_t.js

@@ -0,0 +1,478 @@
+;
+{
+  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");
+  } catch (e) {
+  }
+}
+;
+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-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
+};
+const DecisionMakersModalContent = () => {
+  const { i18n } = useI18nContext();
+  return /* @__PURE__ */ jsxs("div", { className: styles.decisionMakersGettingStartedModal, children: [
+    /* @__PURE__ */ jsx(Typography, { variant: "title-l", el: "h3", className: "adyen-kyc-u-margin-bottom-40", children: i18n.get("moreAboutOwnersAndDecisionMakers") }),
+    /* @__PURE__ */ jsx(Typography, { variant: "body-strongest", el: "h4", className: "adyen-kyc-u-margin-bottom-12", children: i18n.get("ownersAndDecisionMakersDescriptionQ1") }),
+    /* @__PURE__ */ jsx(Typography, { el: "p", className: "adyen-kyc-u-margin-bottom-32", children: i18n.get("ownersAndDecisionMakersDescriptionA1") }),
+    /* @__PURE__ */ jsx(
+      Alert,
+      {
+        title: i18n.get("ownersDescriptionAlertTitle"),
+        icon: false,
+        className: "adyen-kyc-u-margin-bottom-32",
+        children: i18n.get("ownersAndDecisionMakersDescriptionAlertContent")
+      }
+    ),
+    /* @__PURE__ */ jsx(Typography, { variant: "body-strongest", el: "h4", className: "adyen-kyc-u-margin-bottom-12", children: i18n.get("ownersAndDecisionMakersDescriptionQ2") }),
+    /* @__PURE__ */ jsx(Typography, { el: "p", children: i18n.get("ownersAndDecisionMakersDescriptionA2P1") }),
+    /* @__PURE__ */ jsx(Typography, { el: "p", className: "adyen-kyc-u-margin-bottom-32", children: i18n.get("ownersAndDecisionMakersDescriptionA2P2") }),
+    /* @__PURE__ */ jsx(
+      Alert,
+      {
+        title: i18n.get("ownersDescriptionAlertTitle"),
+        icon: false,
+        className: "adyen-kyc-u-margin-bottom-32",
+        children: i18n.get("ownersDescriptionAlertContent")
+      }
+    ),
+    /* @__PURE__ */ jsx(Typography, { variant: "body-strongest", el: "h4", className: "adyen-kyc-u-margin-bottom-12", children: i18n.get("ownersAndDecisionMakersDescriptionQ3") }),
+    /* @__PURE__ */ jsx(Typography, { el: "p", className: "adyen-kyc-u-margin-bottom-32", children: i18n.get("ownersAndDecisionMakersDescriptionA3") }),
+    /* @__PURE__ */ jsx(Typography, { variant: "body-strongest", el: "h4", className: "adyen-kyc-u-margin-bottom-12", children: i18n.get("ownersAndDecisionMakersDescriptionQ4") }),
+    /* @__PURE__ */ jsx(Typography, { el: "p", className: "adyen-kyc-u-margin-bottom-32", children: i18n.get("ownersAndDecisionMakersDescriptionA4") })
+  ] });
+};
+const DecisionMakersGettingStarted = ({
+  addDecisionMakerOnClick,
+  handleCancelClick
+}) => {
+  const { i18n } = useI18nContext();
+  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(
+          Svg,
+          {
+            type: "image",
+            testId: "decision-makers-getting-started-icon",
+            name: "decision-makers-group"
+          }
+        ),
+        title: i18n.get("ownersAndDecisionMakers"),
+        description: i18n.get("ownersAndDecisionMakersDescription"),
+        helpAction: /* @__PURE__ */ jsx(Button, { variant: "link", onClick: openModal, fullWidth: true, children: i18n.get("learnMore") }),
+        actions: /* @__PURE__ */ jsxs(Fragment, { children: [
+          /* @__PURE__ */ jsx(
+            Button,
+            {
+              fullWidth: true,
+              testId: "decision-makers-getting-started-primary-button",
+              onClick: addDecisionMakerOnClick,
+              children: i18n.get("gettingStarted")
+            }
+          ),
+          handleCancelClick && /* @__PURE__ */ jsx(
+            Button,
+            {
+              variant: "tertiary",
+              fullWidth: true,
+              testId: "decision-makers-getting-started-cancel-button",
+              onClick: handleCancelClick,
+              children: i18n.get("finishLater")
+            }
+          )
+        ] })
+      }
+    ),
+    isModalOpen && /* @__PURE__ */ jsx(Modal, { onClose: closeModal, ariaLabel: i18n.get("moreAboutOwnersAndDecisionMakers"), inset: true, children: /* @__PURE__ */ jsx(DecisionMakersModalContent, {}) })
+  ] });
+};
+const DecisionMakers = (props) => {
+  const { data, isLoading } = useLegalEntity(ROOT_LE);
+  if (isLoading || !data) {
+    return /* @__PURE__ */ jsx(Loader, {});
+  }
+  return /* @__PURE__ */ jsx(DecisionMakersInner, { ...props, legalEntity: data });
+};
+const DecisionMakersInner = ({
+  legalEntity,
+  onNavigateToIndividual,
+  navigateBackToTaskList,
+  trustedEntityAssociations
+}) => {
+  const getTaskStatus = useGetTaskStatus();
+  const { i18n } = useI18nContext();
+  const { t } = useTranslation();
+  const userEvents = useAnalyticsContext();
+  const { isExperimentEnabled } = useExperimentsContext();
+  const { showToast } = useToastContext();
+  const isRevampedDecisionMakersTaskPageEnabled = isExperimentEnabled(
+    "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 { 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 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",
+        label: "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 = (e) => {
+    e.stopPropagation();
+    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: i18n.get("successFullyRemovedDecisionMaker") });
+    } catch {
+      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,
+          {
+            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)
+          },
+          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"
+          }
+        ),
+        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);
+            },
+            isRemoveDisabled: isRemoveDisabled || (trustedEntityAssociations ?? []).some(
+              (ea) => ea.reference === decisionMaker.reference
+            ),
+            handleIsRemoveDisabled: setIsRemoveDisabled
+          },
+          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,
+          {
+            variant: "secondary",
+            icon: "plus",
+            onClick: addDecisionMakerOnClick,
+            disabled: haveMaxDecisionMakers,
+            fullWidth: true,
+            children: i18n.get("addDecisionMaker")
+          }
+        ) }),
+        /* @__PURE__ */ jsx(
+          ActionBar,
+          {
+            onHome: () => {
+              userEvents.addTaskEvent("Clicked button", {
+                task: TaskTypes.DECISION_MAKER_OVERVIEW,
+                actionType: "back",
+                label: translationKeys.home,
+                noOfDecisionMakers: decisionMakers.length
+              });
+              navigateBackToTaskList();
+            },
+            homeButtonLabel: i18n.get(translationKeys.home)
+          }
+        )
+      ] })
+    }
+  ) });
+};
+export {
+  DecisionMakers
+};

package/dist/{EmbeddedStatus-BsZsXbKc.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] = "dc07e485-257e-4506-8375-c85b9df1b1a9", e._sentryDebugIdIdentifier = "sentry-dbid-dc07e485-257e-4506-8375-c85b9df1b1a9");
+    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-NEiNEcRx.js";
-import { Y as TaskStatus, b as useI18nContext, z as Skeleton, C as Typography } from "./StoreProvider-BmzY19Td.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;
@@ -59,7 +59,7 @@ const EmbeddedStatus = ({
   actionIndicator,
   ...props
 }) => {
-  const { i18n } = useI18nContext();
+  const { t } = useTranslation();
   const statusTag = status ? statusToTag(status) : { translationKey: tagLabel, variant: tagVariant };
   const avatarVariant = light ? "tertiary" : "secondary";
   return /* @__PURE__ */ jsxs(
@@ -87,9 +87,9 @@ const EmbeddedStatus = ({
             el: "div",
             variant: "body-stronger",
             className: styles.embeddedStatusActionIndicator,
-            children: i18n.get(actionIndicator.labelKey)
+            children: t(($) => $[actionIndicator.labelKey])
           }
-        ) }) : (statusTag == null ? void 0 : statusTag.translationKey) && /* @__PURE__ */ jsx("section", { children: loading ? /* @__PURE__ */ jsx(Skeleton, { width: "8ch", height: "1em" }) : /* @__PURE__ */ jsx(Tag, { variant: statusTag.variant, children: i18n.get(statusTag.translationKey) }) })
+        ) }) : statusTag?.translationKey && /* @__PURE__ */ jsx("section", { children: loading ? /* @__PURE__ */ jsx(Skeleton, { width: "8ch", height: "1em" }) : /* @__PURE__ */ jsx(Tag, { variant: statusTag.variant, children: t(($) => $[statusTag.translationKey]) }) })
       ]
     }
   );

package/dist/FormEndState-CUYkLBgX.js

@@ -0,0 +1,59 @@
+;
+{
+  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] = "0e604486-a79f-4584-afb1-1a057720731a", e._sentryDebugIdIdentifier = "sentry-dbid-0e604486-a79f-4584-afb1-1a057720731a");
+  } catch (e) {
+  }
+}
+;
+import { jsxs, jsx } from "preact/jsx-runtime";
+import cx from "classnames";
+import { defineSlots } from "named-slots";
+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";
+const iconError = "adyen-kyc-icon-error";
+const iconWarning = "adyen-kyc-icon-warning";
+const iconSuccess = "adyen-kyc-icon-success";
+const title = "adyen-kyc-title";
+const endStateDescription = "adyen-kyc-end-state-description";
+const endStateActions = "adyen-kyc-end-state-actions";
+const styles = {
+  formEndState,
+  endStateIcon,
+  iconInfo,
+  iconError,
+  iconWarning,
+  iconSuccess,
+  title,
+  endStateDescription,
+  endStateActions
+};
+const FormEndState = ({ variant = "success", children, className }) => {
+  const { Slot } = defineSlots(children, ["title", "content", "icon", "actions"]);
+  const variantMap = {
+    basic: "",
+    info: styles.iconInfo,
+    error: styles.iconError,
+    warning: styles.iconWarning,
+    success: styles.iconSuccess
+  };
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      className: cx(styles.formEndState, styles.endStateIcon, variantMap[variant], className),
+      role: "alert",
+      children: [
+        /* @__PURE__ */ jsx(Slot, { name: "icon", children: variant === "success" ? /* @__PURE__ */ jsx(Icon, { name: "checkmark" }) : /* @__PURE__ */ jsx(AlertIcon, { variant }) }),
+        /* @__PURE__ */ jsx("span", { className: styles.title, children: /* @__PURE__ */ jsx(Slot, { name: "title" }) }),
+        /* @__PURE__ */ jsx("div", { className: styles.endStateDescription, children: /* @__PURE__ */ jsx(Slot, { name: "content" }) }),
+        /* @__PURE__ */ jsx("div", { className: styles.endStateActions, children: /* @__PURE__ */ jsx(Slot, { name: "actions" }) })
+      ]
+    }
+  );
+};
+export {
+  FormEndState as F
+};