@adyen/kyc-components 3.83.0 → 3.85.0-beta.1

package/dist/Divider-Ckm8Nfyb.js

@@ -0,0 +1,239 @@
+;
+{
+  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] = "e26a2d37-8480-46ec-b446-2523c841c088", e._sentryDebugIdIdentifier = "sentry-dbid-e26a2d37-8480-46ec-b446-2523c841c088");
+  } catch (e) {
+  }
+}
+;
+import { aa as isEmpty, b as useApiContext, j as useQuery, o as httpGet, u as useTranslation, V as IconButton } from "./StoreProvider-DadhkEyO.js";
+import { jsx, jsxs, Fragment } from "preact/jsx-runtime";
+import { useRef, useMemo, useState } from "preact/hooks";
+import { F as Field, c as Select } from "./useForm-Aw38WiTE.js";
+import { L as List } from "./CountryField-DunKeW_n.js";
+const industryCodeFieldValidation = () => ({
+  industryCodes: {
+    modes: ["blur"],
+    validate: (industryCode) => !isEmpty(industryCode),
+    errorMessage: "fieldIsRequired"
+  }
+});
+const industryCodeFieldMetadata = {
+  label: "industry",
+  validators: [
+    industryCodeFieldValidation().industryCodes
+  ]
+};
+const fetchIndustryCodes = async (legalEntityId, baseUrl, businessLineTypes) => {
+  const results = await Promise.all(
+    businessLineTypes.map((businessLineType) => {
+      return httpGet({
+        baseUrl,
+        path: `legalEntities/${legalEntityId}/businessLines/${businessLineType}/industryCodes`
+      });
+    })
+  );
+  const deduped = [];
+  for (const result of results) {
+    for (const industryCodeDTO of result) {
+      const found = deduped.find((item) => item.code === industryCodeDTO.code);
+      if (!found) {
+        deduped.push(industryCodeDTO);
+      }
+    }
+  }
+  return deduped;
+};
+const useIndustryCodes = (businessLineTypes, options) => {
+  const { rootLegalEntityId, baseUrl } = useApiContext();
+  return useQuery({
+    queryKey: ["industryCodes", businessLineTypes.join(",")],
+    queryFn: () => fetchIndustryCodes(rootLegalEntityId.value, baseUrl.value, businessLineTypes),
+    ...options
+  });
+};
+const industryCodesContent = "adyen-kyc-industry-codes-content";
+const industryCodesSelection = "adyen-kyc-industry-codes-selection";
+const styles$1 = {
+  industryCodesContent,
+  industryCodesSelection
+};
+const INDUSTRY_CODE_FIELD = ["industryCodes"];
+function IndustryCodeField({
+  data,
+  valid,
+  errors,
+  labels,
+  placeholders,
+  readonly,
+  handleChangeFor,
+  guidanceText,
+  setErrors,
+  // need to manually set errors due to nested select components
+  setValid,
+  // need to manually set validation due to nested select components
+  businessLineTypes,
+  single = false
+}) {
+  const { t } = useTranslation("businessLines");
+  const industryCodesRef = useRef(null);
+  const { data: industryCodes } = useIndustryCodes(businessLineTypes);
+  const allIndustryCodeSelectItems = useMemo(
+    () => industryCodes?.map((entry) => ({
+      id: entry.code,
+      name: `${entry.code} - ${entry.description}`
+    })) ?? [],
+    [industryCodes]
+  );
+  const selectableIndustryCodes = allIndustryCodeSelectItems.filter(
+    (i) => !data.industryCodes?.map((selectedCode) => selectedCode.id).includes(i.id)
+  );
+  const selectedCodes = data.industryCodes;
+  const [items, setItems] = useState(
+    selectedCodes && selectedCodes.length > 0 ? selectedCodes.map((i) => {
+      return {
+        value: i,
+        touched: true
+      };
+    }) : [{ value: { id: "", name: "" }, touched: false }]
+  );
+  const updateIndustryCodes = (value) => {
+    handleChangeFor("industryCodes")(value);
+  };
+  const addIndustryCodeField = (e) => {
+    if (items[items.length - 1].value.id === "") {
+      handleIndustryCodeFocusOut(e, items.length - 1);
+      return;
+    }
+    const newItems = [...items, { value: { id: "", name: "" }, touched: false }];
+    setItems(newItems);
+    updateIndustryCodes(newItems.map((item) => item.value));
+  };
+  const removeField = (indexToRemove) => {
+    const newItems = items.filter((_, index) => index !== indexToRemove);
+    setItems(newItems);
+    updateIndustryCodes(newItems.map((item) => item.value));
+  };
+  const handleSelectIndustryCode = (indexToUpdate, selectedItem) => {
+    setItems((prevItems) => {
+      const newItems = [...prevItems];
+      newItems[indexToUpdate] = {
+        value: {
+          id: selectedItem.id,
+          name: selectedItem.name
+        },
+        touched: true
+      };
+      updateIndustryCodes(
+        newItems.map((item) => {
+          return {
+            id: item.value.id,
+            name: item.value.name
+          };
+        })
+      );
+      return newItems;
+    });
+  };
+  const handleIndustryCodeFocusOut = (e, index) => {
+    if (industryCodesRef.current && !industryCodesRef.current.contains(e.relatedTarget)) {
+      setItems((prevItems) => {
+        if (prevItems[index].value.id || prevItems[index].touched) {
+          return prevItems;
+        }
+        const newItems = [...prevItems];
+        newItems[index] = { ...newItems[index], touched: true };
+        const isGroupInvalid = newItems.some((item) => item.value.id === "");
+        if (isGroupInvalid) {
+          setErrors?.(
+            "industryCodes",
+            {
+              isValid: false,
+              errorMessage: "fieldIsRequired",
+              hasError: true
+            },
+            "industryCodesForm"
+          );
+          setValid?.("industryCodes", false, "industryCodesForm");
+        } else {
+          setErrors?.("industryCodes", null, "industryCodesForm");
+          setValid?.("industryCodes", true, "industryCodesForm");
+        }
+        return newItems;
+      });
+    }
+  };
+  return /* @__PURE__ */ jsx(
+    Field,
+    {
+      name: "industryCodes",
+      label: labels?.industryCodes || t(($) => $["industry"]),
+      errorMessage: errors.industryCodes,
+      isValid: valid.industryCodes,
+      formatGuidance: guidanceText.industryCodes,
+      showErrorIcon: false,
+      children: (childProps) => /* @__PURE__ */ jsx(Wrapper, { single, children: /* @__PURE__ */ jsx("div", { className: styles$1.industryCodesContent, ref: industryCodesRef, children: items.map((code, index) => {
+        const isInvalid = code.touched && code.value.id === "";
+        return /* @__PURE__ */ jsxs("div", { className: styles$1.industryCodesSelection, children: [
+          /* @__PURE__ */ jsx(
+            Select,
+            {
+              ...childProps,
+              id: `industryCodeSelection-${index}`,
+              name: `industryCodeSelection-${index}`,
+              selected: code.value,
+              placeholder: placeholders?.industryCodes || t(($) => $["industryCode__placeholder"]),
+              items: allIndustryCodeSelectItems,
+              excludedValues: allIndustryCodeSelectItems.filter(
+                (i) => !selectableIndustryCodes.includes(i)
+              ),
+              readonly: readonly && !!data.industryCodes,
+              onSelect: (selectedItem) => handleSelectIndustryCode(index, selectedItem),
+              isInvalid,
+              onBlur: (e) => handleIndustryCodeFocusOut(e, index)
+            }
+          ),
+          !single && /* @__PURE__ */ jsxs(Fragment, { children: [
+            /* @__PURE__ */ jsx(
+              IconButton,
+              {
+                ariaLabel: t(($) => $["removeIndustryCode"]),
+                variant: "tertiary",
+                icon: "minusCircleFilled",
+                circle: true,
+                onClick: () => removeField(index),
+                disabled: items.length === 1 || readonly
+              }
+            ),
+            /* @__PURE__ */ jsx(
+              IconButton,
+              {
+                ariaLabel: t(($) => $["addIndustryCode"]),
+                variant: "tertiary",
+                icon: "plusCircleFilled",
+                circle: true,
+                onClick: addIndustryCodeField,
+                disabled: readonly || code.value.id === "" || code.value.id !== "" && index !== items.length - 1 || selectableIndustryCodes.length === 0
+              }
+            )
+          ] })
+        ] }, code.value.id);
+      }) }) })
+    }
+  );
+}
+function Wrapper({ single, children }) {
+  return single ? children : /* @__PURE__ */ jsx(List, { dividers: false, variant: "grouped-primary", children });
+}
+const divider = "adyen-kyc-divider";
+const styles = {
+  divider
+};
+const Divider = () => /* @__PURE__ */ jsx("hr", { className: styles.divider });
+export {
+  Divider as D,
+  INDUSTRY_CODE_FIELD as I,
+  IndustryCodeField as a,
+  industryCodeFieldMetadata as i
+};

package/dist/{Dropzone-DXfuqm2D.js → Dropzone-BtTUNjsc.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] = "61f51fb3-404a-48da-9b14-351ee5409b6d", e._sentryDebugIdIdentifier = "sentry-dbid-61f51fb3-404a-48da-9b14-351ee5409b6d");
+    n && (e._sentryDebugIds = e._sentryDebugIds || {}, e._sentryDebugIds[n] = "b31f91e4-4b2c-4f19-89ff-0cb610f94f41", e._sentryDebugIdIdentifier = "sentry-dbid-b31f91e4-4b2c-4f19-89ff-0cb610f94f41");
   } catch (e) {
   }
 }
 ;
 import { jsxs, jsx, Fragment } from "preact/jsx-runtime";
-import { f as defaultFileValidationOptions, h as fileValidationRules, S as StateContextSetter, D as DropzoneFile, e as bytesToSize } from "./validate-C6-L7Vfa.js";
+import { f as defaultFileValidationOptions, h as fileValidationRules, S as StateContextSetter, D as DropzoneFile, e as bytesToSize } from "./validate-6QHmaW1O.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-DGxWcgrS.js";
-import { a as useForm } from "./useForm-NtB5fMq5.js";
+import { u as useTranslation, P as useAnalyticsContext, B as Button, x as Typography, U as Icon } from "./StoreProvider-DadhkEyO.js";
+import { a as useForm } from "./useForm-Aw38WiTE.js";
 function Dropzone(props) {
   const {
     name,

package/dist/{EmbeddedStatus-BjGURjyl.js → EmbeddedStatus-kQRIlMAC.js}

@@ -2,15 +2,15 @@
 {
   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] = "7531f92b-ee0b-4792-b706-2260fbbc3c49", e._sentryDebugIdIdentifier = "sentry-dbid-7531f92b-ee0b-4792-b706-2260fbbc3c49");
+    n && (e._sentryDebugIds = e._sentryDebugIds || {}, e._sentryDebugIds[n] = "7bfc892d-7034-4e59-905a-8d466c636a33", e._sentryDebugIdIdentifier = "sentry-dbid-7bfc892d-7034-4e59-905a-8d466c636a33");
   } catch (e) {
   }
 }
 ;
 import { jsxs, jsx, Fragment } from "preact/jsx-runtime";
 import cx from "classnames";
-import { A as Avatar } from "./Avatar-ERL8LlcN.js";
-import { O as TaskStatuses, a as useTranslation, v as Skeleton, x as Typography } from "./StoreProvider-DGxWcgrS.js";
+import { A as Avatar } from "./Avatar-CCed5bJE.js";
+import { O as TaskStatuses, u as useTranslation, v as Skeleton, x as Typography } from "./StoreProvider-DadhkEyO.js";
 import { T as Tag } from "./Tag-DdkVScyr.js";
 import { O as OnboardingStatuses } from "./view-verification-status-VFcBydkR.js";
 const embeddedStatus = "adyen-kyc-embedded-status";
@@ -23,24 +23,24 @@ const styles = {
   embeddedStatusActionIndicator,
   embeddedStatusInfo
 };
-const statusToTag = (status) => {
+const statusToTag = (status, commonT) => {
   switch (status) {
     case OnboardingStatuses.IN_REVIEW:
-      return { translationKey: "inReview", variant: "grey" };
+      return { text: commonT(($) => $["inReview"]), variant: "grey" };
     case TaskStatuses.FINISHED:
     case OnboardingStatuses.VERIFIED:
-      return { translationKey: "verified", variant: "green" };
+      return { text: commonT(($) => $["verified"]), variant: "green" };
     case TaskStatuses.SIGNED:
-      return { translationKey: "signed", variant: "green" };
+      return { text: commonT(($) => $["signed"]), variant: "green" };
     case OnboardingStatuses.REJECTED:
-      return { translationKey: "rejected", variant: "red" };
+      return { text: commonT(($) => $["rejected"]), variant: "red" };
     case TaskStatuses.ERROR:
-      return { translationKey: "actionNeeded", variant: "red" };
+      return { text: commonT(($) => $["actionNeeded"]), variant: "red" };
     case TaskStatuses.PROCESSING:
     case OnboardingStatuses.AWAITING_DATA:
-      return { translationKey: "inReview", variant: "grey" };
+      return { text: commonT(($) => $["inReview"]), variant: "grey" };
     case OnboardingStatuses.UNSUCCESSFUL:
-      return { translationKey: "unsuccessful", variant: "red" };
+      return { text: commonT(($) => $["unsuccessful"]), variant: "red" };
     default:
       return void 0;
   }
@@ -49,10 +49,9 @@ const EmbeddedStatus = ({
   title,
   subtitle,
   status,
+  tag,
   iconName = "user",
   loading = false,
-  tagLabel,
-  tagVariant = "green",
   onClick,
   light = false,
   className,
@@ -60,7 +59,7 @@ const EmbeddedStatus = ({
   ...props
 }) => {
   const { t } = useTranslation("common");
-  const statusTag = status ? statusToTag(status) : { translationKey: tagLabel, variant: tagVariant };
+  const statusTag = status ? statusToTag(status, t) : tag;
   const avatarVariant = light ? "tertiary" : "secondary";
   return /* @__PURE__ */ jsxs(
     "button",
@@ -87,9 +86,9 @@ const EmbeddedStatus = ({
             el: "div",
             variant: "body-stronger",
             className: styles.embeddedStatusActionIndicator,
-            children: t(($) => $[actionIndicator.labelKey])
+            children: actionIndicator.text
           }
-        ) }) : statusTag?.translationKey && /* @__PURE__ */ jsx("section", { children: loading ? /* @__PURE__ */ jsx(Skeleton, { width: "8ch", height: "1em" }) : /* @__PURE__ */ jsx(Tag, { variant: statusTag.variant, children: t(($) => $[statusTag.translationKey]) }) })
+        ) }) : statusTag?.text && /* @__PURE__ */ jsx("section", { children: loading ? /* @__PURE__ */ jsx(Skeleton, { width: "8ch", height: "1em" }) : /* @__PURE__ */ jsx(Tag, { variant: statusTag.variant, children: statusTag.text }) })
       ]
     }
   );

package/dist/{EndStateLayout-BuVgF0ER.js → EndStateLayout-CePzY6oB.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] = "a6747a13-78bc-45ee-a4e4-1f387c8f3856", e._sentryDebugIdIdentifier = "sentry-dbid-a6747a13-78bc-45ee-a4e4-1f387c8f3856");
+    n && (e._sentryDebugIds = e._sentryDebugIds || {}, e._sentryDebugIds[n] = "51281f7e-c08b-4146-bbd8-6ef0b10c1878", e._sentryDebugIdIdentifier = "sentry-dbid-51281f7e-c08b-4146-bbd8-6ef0b10c1878");
   } catch (e) {
   }
 }
@@ -10,7 +10,7 @@
 import { jsxs, jsx } from "preact/jsx-runtime";
 import cx from "classnames";
 import { isValidElement, cloneElement } from "preact";
-import { B as Button, L as Loader, V as Icon } from "./StoreProvider-DGxWcgrS.js";
+import { B as Button, L as Loader, U as Icon } from "./StoreProvider-DadhkEyO.js";
 const endStateLayout = "adyen-kyc-end-state-layout";
 const endStateLayoutHeader = "adyen-kyc-end-state-layout-header";
 const endStateLayoutIcon = "adyen-kyc-end-state-layout-icon";

package/dist/{FormNavigation-DXaxaf1-.js → FormNavigation-a9y0a0iw.js}

@@ -2,15 +2,15 @@
 {
   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] = "c13db8fa-b0f9-4a3d-a7f5-f1e85b0b52d8", e._sentryDebugIdIdentifier = "sentry-dbid-c13db8fa-b0f9-4a3d-a7f5-f1e85b0b52d8");
+    n && (e._sentryDebugIds = e._sentryDebugIds || {}, e._sentryDebugIds[n] = "49d89cd0-455e-4b28-8c61-4d27c4c458ba", e._sentryDebugIdIdentifier = "sentry-dbid-49d89cd0-455e-4b28-8c61-4d27c4c458ba");
   } catch (e) {
   }
 }
 ;
 import { jsxs, jsx, Fragment } from "preact/jsx-runtime";
-import { B as Button, a as useTranslation, V as Icon, U as useAnalyticsContext, x as Typography, W as noop } from "./StoreProvider-DGxWcgrS.js";
+import { B as Button, u as useTranslation, U as Icon, P as useAnalyticsContext, x as Typography, W as noop } from "./StoreProvider-DadhkEyO.js";
 import cx from "classnames";
-import { K as KEYBOARD_KEYS } from "./Modal-BaaNj5F-.js";
+import { K as KEYBOARD_KEYS } from "./Modal-DvB1odWq.js";
 const ActionBar = ({
   onNext,
   onBack,

package/dist/Image-TkXLA-UY.js

@@ -0,0 +1,22 @@
+;
+{
+  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] = "628ba535-dccb-46b9-9a81-bf9cf778f171", e._sentryDebugIdIdentifier = "sentry-dbid-628ba535-dccb-46b9-9a81-bf9cf778f171");
+  } catch (e) {
+  }
+}
+;
+import { jsx } from "preact/jsx-runtime";
+import { Suspense } from "preact/compat";
+import { L as Loader } from "./StoreProvider-DadhkEyO.js";
+const Image = ({
+  lazyLoadedImage,
+  className
+}) => {
+  const LazyLoadedImageComponent = lazyLoadedImage;
+  return /* @__PURE__ */ jsx(Suspense, { fallback: /* @__PURE__ */ jsx(Loader, {}), children: /* @__PURE__ */ jsx(LazyLoadedImageComponent, { className, "aria-hidden": true }) });
+};
+export {
+  Image as I
+};