@adyen/kyc-components 3.82.6 → 3.83.0-beta.0

package/dist/{useMultiForm-YCECZtje.js → RadioGroup-wbcMSLjR.js}

@@ -2,15 +2,76 @@
 {
   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] = "4bc4a1bf-382a-4597-97ce-d8249aa96985", e._sentryDebugIdIdentifier = "sentry-dbid-4bc4a1bf-382a-4597-97ce-d8249aa96985");
+    n && (e._sentryDebugIds = e._sentryDebugIds || {}, e._sentryDebugIds[n] = "c67f509f-2adc-446a-93a0-219ffafe4f8c", e._sentryDebugIdIdentifier = "sentry-dbid-c67f509f-2adc-446a-93a0-219ffafe4f8c");
   } catch (e) {
   }
 }
 ;
-import { useCallback, useMemo, useReducer, useEffect } from "preact/hooks";
-import { af as objectsDeepEqual, N as createLogger, a9 as isEmpty } from "./StoreProvider-BWVRmzZI.js";
-import { V as ValidationResult } from "./useForm-BSzxrzKr.js";
-import { a as isNotEmptyValidator } from "./commonValidators-B-B1D3s5.js";
+import { b as useApiContext, aF as useMutation, k as httpPost, aH as useQueryClient, ag as objectsDeepEqual, N as createLogger, a7 as isEmpty, U as useAnalyticsContext, a as useTranslation, B as Button, P as IconButton, W as noop } from "./StoreProvider-A-G7e1lx.js";
+import { a as useInvalidateRootLegalEntity } from "./useToastContext-BD1TnfkF.js";
+import { jsx, jsxs } from "preact/jsx-runtime";
+import { useMemo, useCallback, useReducer, useEffect, useRef, useState, useContext } from "preact/hooks";
+import { V as ValidationResult, M as MaybeModal, L as LoaderWrapper, c as useId } from "./useForm-DJPITpbv.js";
+import { i as isNotEmptyValidator, j as FormRouterContextProvider, S as Summary, R as Radio } from "./CountryField-JJ69pIsL.js";
+import cx from "classnames";
+import { C as Confirm } from "./useDataset-Zu4EOFnX.js";
+import { createContext } from "preact";
+const createLegalEntity = async (legalEntityId, baseUrl, data) => {
+  return httpPost(
+    {
+      baseUrl,
+      path: `legalEntities/${legalEntityId}/create`
+    },
+    data
+  );
+};
+const useCreateLegalEntity = (options) => {
+  const { rootLegalEntityId, baseUrl } = useApiContext();
+  return useMutation({
+    mutationFn: (payload) => {
+      return createLegalEntity(rootLegalEntityId.value, baseUrl.value, payload);
+    },
+    ...options
+  });
+};
+const updateLegalEntity = async (rootLegalEntityId, baseUrl, data) => {
+  return httpPost(
+    {
+      baseUrl,
+      path: `legalEntities/${rootLegalEntityId}`
+    },
+    data
+  );
+};
+const useUpdateLegalEntity = (options) => {
+  const { rootLegalEntityId, baseUrl } = useApiContext();
+  const invalidateRootLegalEntity = useInvalidateRootLegalEntity();
+  const queryClient = useQueryClient();
+  return useMutation({
+    mutationFn: (payload) => updateLegalEntity(rootLegalEntityId.value, baseUrl.value, payload),
+    onSuccess: async (response, payload) => {
+      if (response.id === rootLegalEntityId.value) {
+        await invalidateRootLegalEntity();
+      } else {
+        queryClient.setQueryData(["legalEntity", payload.id], response);
+      }
+    },
+    ...options
+  });
+};
+const FormContext = createContext(null);
+function FormContextProvider({
+  children,
+  form
+}) {
+  const contextValue = useMemo(
+    () => ({
+      form
+    }),
+    [form]
+  );
+  return /* @__PURE__ */ jsx(FormContext.Provider, { value: contextValue, children });
+}
 const omitKeys = (obj, omit) => Object.keys(obj).filter((k) => !omit.includes(k)).reduce((a, c) => {
   a[c] = obj[c];
   return a;
@@ -859,6 +920,280 @@ function useMultiForm({
     asyncErrors: state.asyncErrors
   };
 }
+const progressBar = "adyen-kyc-progress-bar";
+const progressBarRounded = "adyen-kyc-progress-bar-rounded";
+const progressBarIndicator = "adyen-kyc-progress-bar-indicator";
+const styles$1 = {
+  progressBar,
+  progressBarRounded,
+  progressBarIndicator
+};
+const ProgressBar = ({ progress, ariaLabel, rounded = false }) => {
+  const clamp = (value) => {
+    return Math.min(Math.max(value, 0), 100);
+  };
+  const clampedProgress = clamp(progress);
+  const cssWidth = `${clampedProgress}%`;
+  const className = cx(styles$1.progressBar, {
+    [styles$1.progressBarRounded]: rounded
+  });
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      className,
+      role: "progressbar",
+      "aria-label": ariaLabel,
+      "aria-valuenow": clampedProgress,
+      "aria-valuemin": 0,
+      "aria-valuemax": 100,
+      children: /* @__PURE__ */ jsxs("div", { className: styles$1.progressBarIndicator, style: { width: cssWidth }, children: [
+        progress,
+        "%"
+      ] })
+    }
+  );
+};
+const formFlow = "adyen-kyc-form-flow";
+const formFlowContent = "adyen-kyc-form-flow-content";
+const formFlowFooter = "adyen-kyc-form-flow-footer";
+const formFlowFooterBorder = "adyen-kyc-form-flow-footer-border";
+const formFlowActions = "adyen-kyc-form-flow-actions";
+const formFlowActionGroup = "adyen-kyc-form-flow-action-group";
+const styles = {
+  formFlow,
+  formFlowContent,
+  formFlowFooter,
+  formFlowFooterBorder,
+  formFlowActions,
+  formFlowActionGroup
+};
+const FormFlow = ({
+  asModal = false,
+  children,
+  currentStep = 0,
+  disableBackButton,
+  disableNextButton,
+  disableSaveButton,
+  forms,
+  gotoFormByFormIndex,
+  handleBackClick,
+  handleCancelClick,
+  handleNextClick,
+  handleSaveClick,
+  loadingStatus,
+  summary,
+  totalSteps = 1
+}) => {
+  const contentRef = useRef(null);
+  const userEvents = useAnalyticsContext();
+  const { t } = useTranslation("common");
+  const [isConfirmPresented, setIsConfirmPresented] = useState(false);
+  const [isSaving, setIsSaving] = useState(false);
+  const [isSubmitting, setIsSubmitting] = useState(false);
+  const isLoading = loadingStatus === "loading";
+  const isActionDisabled = isSaving || isSubmitting || isConfirmPresented || isLoading;
+  const isSaveButtonVisible = handleSaveClick !== void 0;
+  const isFirstStep = currentStep === 0;
+  const isLastStep = currentStep === totalSteps - 1;
+  const isSingleStepForm = isFirstStep && isLastStep;
+  const hasProblems = summary?.problems?.verificationErrors !== void 0;
+  const progress = Math.floor(currentStep / (totalSteps - 1) * 100);
+  const scrollToTop = () => {
+    if (contentRef.current) {
+      contentRef.current.scroll({
+        top: 0,
+        behavior: "smooth"
+      });
+    }
+  };
+  const handleSubmit = () => {
+    setIsSubmitting(true);
+    Promise.resolve(handleNextClick()).then(() => {
+      setIsSubmitting(false);
+      scrollToTop();
+    });
+  };
+  const handleSave = () => {
+    setIsSaving(true);
+    Promise.resolve(handleSaveClick?.()).then(() => {
+      setIsSaving(false);
+    });
+  };
+  const handleNext = () => {
+    scrollToTop();
+    handleNextClick();
+  };
+  const handleBack = () => {
+    scrollToTop();
+    handleBackClick?.();
+  };
+  const handleDismiss = () => {
+    setIsConfirmPresented(true);
+  };
+  const handleCancelDismiss = () => {
+    setIsConfirmPresented(false);
+  };
+  const handleConfirmDismiss = () => {
+    setIsConfirmPresented(false);
+    handleCancelClick?.();
+  };
+  const handleSkip = () => {
+    userEvents.addPageEvent("Clicked button", {
+      actionType: "skip",
+      label: t(($) => $["skip"])
+    });
+    gotoFormByFormIndex(currentStep + 1);
+  };
+  const footerClassName = cx(styles.formFlowFooter, {
+    [styles.formFlowFooterBorder]: isSingleStepForm
+  });
+  return /* @__PURE__ */ jsxs(MaybeModal, { inline: !asModal, onClose: handleDismiss, size: "large", children: [
+    /* @__PURE__ */ jsxs("div", { ref: contentRef, className: styles.formFlow, children: [
+      /* @__PURE__ */ jsx("div", { className: styles.formFlowContent, children: /* @__PURE__ */ jsx(LoaderWrapper, { status: loadingStatus, formOpacityWhenLoading: 0, loaderSize: "large", children: /* @__PURE__ */ jsx(FormRouterContextProvider, { forms, setFormIndex: gotoFormByFormIndex, children: isLastStep && summary !== void 0 ? /* @__PURE__ */ jsx(Summary, { ...summary, forms, gotoForm: gotoFormByFormIndex }) : children }) }) }),
+      /* @__PURE__ */ jsxs("div", { className: footerClassName, children: [
+        !isSingleStepForm && /* @__PURE__ */ jsx(ProgressBar, { ariaLabel: t(($) => $["progress"]), progress }),
+        /* @__PURE__ */ jsxs("div", { className: styles.formFlowActions, children: [
+          isFirstStep || handleBackClick === void 0 ? /* @__PURE__ */ jsx(
+            Button,
+            {
+              disabled: isActionDisabled || disableBackButton,
+              onClick: handleDismiss,
+              variant: "secondary",
+              children: t(($) => $["cancel"])
+            }
+          ) : /* @__PURE__ */ jsx(
+            Button,
+            {
+              disabled: isActionDisabled || disableBackButton,
+              icon: "chevron-left",
+              onClick: handleBack,
+              variant: "secondary",
+              children: t(($) => $["back"])
+            }
+          ),
+          isLastStep ? /* @__PURE__ */ jsx(Button, { onClick: handleSubmit, loading: isSubmitting, children: t(($) => $["submit"]) }) : /* @__PURE__ */ jsxs("div", { className: styles.formFlowActionGroup, children: [
+            isSaveButtonVisible && /* @__PURE__ */ jsx(
+              IconButton,
+              {
+                ariaLabel: t(($) => $["finishLater"]),
+                disabled: isActionDisabled || disableSaveButton,
+                loading: isSaving,
+                icon: "save",
+                onClick: handleSave,
+                variant: "secondary"
+              }
+            ),
+            hasProblems && /* @__PURE__ */ jsx(Button, { onClick: handleSkip, disabled: isActionDisabled, variant: "secondary", children: t(($) => $["skip"]) }),
+            /* @__PURE__ */ jsx(Button, { onClick: handleNext, disabled: isActionDisabled || disableNextButton, children: t(($) => $["continue"]) })
+          ] })
+        ] })
+      ] })
+    ] }),
+    isConfirmPresented && /* @__PURE__ */ jsx(
+      Confirm,
+      {
+        confirmText: t(($) => $["leave"]),
+        description: t(($) => $["unsavedChangesDescription"]),
+        onCancel: handleCancelDismiss,
+        onConfirm: handleConfirmDismiss,
+        title: t(($) => $["unsavedChanges"])
+      }
+    )
+  ] });
+};
+function useFormContext() {
+  const context = useContext(FormContext);
+  if (!context) {
+    throw new Error("Cannot use formContext without <FormContextProvider>");
+  }
+  return context;
+}
+const RadioWithLabel = ({
+  value,
+  label,
+  content,
+  groupName,
+  checked = false,
+  disabled = false,
+  onClick
+}) => {
+  const id = useId("radio");
+  return /* @__PURE__ */ jsxs("label", { htmlFor: id, className: "adyen-kyc-input-radio", children: [
+    /* @__PURE__ */ jsx(
+      Radio,
+      {
+        id,
+        checked,
+        groupName,
+        onClick,
+        value,
+        disabled
+      }
+    ),
+    /* @__PURE__ */ jsxs("div", { className: "adyen-kyc-input-radio__content", children: [
+      /* @__PURE__ */ jsx("span", { className: "adyen-kyc-input-radio__label adyen-kyc-label__text", children: label }),
+      content
+    ] })
+  ] });
+};
+function RadioGroup({
+  items = [],
+  name,
+  onChange = noop,
+  value,
+  disabled = false,
+  horizontal = false,
+  showContentOnlyOnSelected = false,
+  className,
+  enableTracking = false
+}) {
+  const { t } = useTranslation("common");
+  const userEvents = useAnalyticsContext();
+  const handleChange = (id) => {
+    if (enableTracking) {
+      userEvents.addFieldEvent("Interacted with form field", {
+        actionType: "input",
+        field: name,
+        returnValue: value
+      });
+    }
+    onChange(id);
+  };
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      className: cx([
+        "adyen-kyc-radio-group",
+        { "adyen-kyc-radio-group--horizontal": horizontal },
+        className
+      ]),
+      children: items.map((item) => {
+        const isSelected = item.id === value;
+        const visibleContent = isSelected || !showContentOnlyOnSelected ? item.content : void 0;
+        return /* @__PURE__ */ jsx(
+          RadioWithLabel,
+          {
+            value: item.id,
+            label: t(($) => $[item.name]),
+            content: visibleContent,
+            groupName: name,
+            checked: isSelected,
+            disabled,
+            onClick: () => handleChange(item.id)
+          },
+          item.id
+        );
+      })
+    }
+  );
+}
 export {
-  useMultiForm as u
+  FormContextProvider as F,
+  RadioGroup as R,
+  useMultiForm as a,
+  FormFlow as b,
+  useCreateLegalEntity as c,
+  useUpdateLegalEntity as d,
+  RadioWithLabel as e,
+  useFormContext as u
 };

package/dist/{RegistrationAddress-u6ooNR8V.js → RegistrationAddress-CNHmGFVw.js}

@@ -2,27 +2,27 @@
 {
   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] = "d48bfe4d-7f93-4c8c-bfa8-95b7330057b6", e._sentryDebugIdIdentifier = "sentry-dbid-d48bfe4d-7f93-4c8c-bfa8-95b7330057b6");
+    n && (e._sentryDebugIds = e._sentryDebugIds || {}, e._sentryDebugIds[n] = "0a7afd0c-76bb-42ec-a8a9-19d4fa6c9a2f", e._sentryDebugIdIdentifier = "sentry-dbid-0a7afd0c-76bb-42ec-a8a9-19d4fa6c9a2f");
   } catch (e) {
   }
 }
 ;
 import { jsxs, jsx, Fragment } from "preact/jsx-runtime";
 import { memo } from "preact/compat";
-import { af as objectsDeepEqual, a as useTranslation, y as LegalEntityTypes, a8 as CountryCodes, X as useExperimentsContext } from "./StoreProvider-BWVRmzZI.js";
-import { M as MemoizedDocumentUpload, k as getCompanyRegistrationNumberOptions, s as stateFormatGuidanceText, m as businessRegistrationNumberMasks, n as businessRegistrationNumberPatterns, v as vatNumberOptions, o as getVatNumberOptions } from "./TaxInformationField-kgi89UR0.js";
-import { F as Field, C as Checkbox, a as useForm } from "./useForm-BSzxrzKr.js";
-import { m as makeMask, n as numericInputs, s as spacer, M as MaskedInput, a as nonInputs, b as alphaInputs, d as alphanumericInputs } from "./MaskedInput-DOcrkP6N.js";
+import { ag as objectsDeepEqual, a as useTranslation, y as LegalEntityTypes, aa as CountryCodes, X as useExperimentsContext } from "./StoreProvider-A-G7e1lx.js";
+import { M as MemoizedDocumentUpload, m as getCompanyRegistrationNumberOptions, s as stateFormatGuidanceText, o as businessRegistrationNumberMasks, p as businessRegistrationNumberPatterns, v as vatNumberOptions, q as getVatNumberOptions } from "./TaxInformationField-DAk10aD9.js";
+import { F as Field, C as Checkbox, a as useForm } from "./useForm-DJPITpbv.js";
+import { m as makeMask, n as numericInputs, s as spacer, M as MaskedInput, a as nonInputs, b as alphaInputs, d as alphanumericInputs } from "./MaskedInput-BWUgQjO8.js";
 import { useMemo, useCallback, useEffect, useRef } from "preact/hooks";
-import { R as RadioGroup } from "./RadioGroup-RvJMyv9L.js";
-import { C as CompanyTypesValues } from "./bafinUtils-CZB8qEIB.js";
-import { f as validatePatternOnBlur, c as validateNotEmptyOnBlur, C as ContextGuidance } from "./fieldConfigurations-DfVO1kZe.js";
-import { I as InputText } from "./InputText-1Il1vZcv.js";
-import { u as uppercase } from "./mapExistingFile-D4k-V3zd.js";
+import { R as RadioGroup } from "./RadioGroup-wbcMSLjR.js";
+import { C as CompanyTypesValues } from "./bafinUtils-BMhhhQMt.js";
+import { i as validatePatternOnBlur, e as validateNotEmptyOnBlur, C as ContextGuidance } from "./fieldConfigurations-T_MugRKB.js";
+import { I as InputText } from "./InputText-YzvoboLM.js";
+import { u as uppercase } from "./mapExistingFile-BqDqKrRC.js";
 import { createElement } from "preact";
-import { f as getFormProps, F as FormHeader, E as ErrorPanel, c as createFormUtils } from "./CountryField-C_sYT__J.js";
-import { S as StateContextSetter } from "./validate-Cy-GFhBf.js";
-import { o as operationalAddressIsSameIds, A as Address, h as operationalAddressIsSameItems } from "./Address-DK4ne77p.js";
+import { l as getFormProps, F as FormHeader, E as ErrorPanel, c as createFormUtils } from "./CountryField-JJ69pIsL.js";
+import { S as StateContextSetter } from "./validate-BvMUdxph.js";
+import { o as operationalAddressIsSameIds, A as Address, h as operationalAddressIsSameItems } from "./Address-Dbboddow.js";
 const ConstitutionalDocumentTypes = {
   BUSINESS_NAME_FILING: "doingBusinessAsNameFiling",
   TAX_FILING: "taxFiling",
@@ -1980,11 +1980,11 @@ function VatNumberTypeSelector({
       const newSelected = selectedStr;
       if (newSelected === "exempted") {
         if (exemptedOption) {
-          setSelected(newSelected, true);
+          setSelected(newSelected);
         }
         return;
       }
-      setSelected(newSelected, false);
+      setSelected(newSelected);
     },
     [exemptedOption, setSelected]
   );
@@ -2061,14 +2061,11 @@ function VatNumberField({
       if (!canExempt) {
         throw Error(`${country} does not allow VAT exemptions`);
       }
+      handleChangeFor("exemptedFromVat")(exemptValue);
       handleChangeFor("vatNumber")(null);
       handleChangeFor("vatNumberType")(void 0);
-      handleChangeFor("exemptedFromVat")(exemptValue);
       return;
     }
-    if (canExempt) {
-      handleChangeFor("exemptedFromVat")(exemptValue);
-    }
     handleChangeFor("vatNumberType")(vatType);
   };
   if (vatNumberType && vatNumberType !== "exempted") {
@@ -2077,9 +2074,6 @@ function VatNumberField({
       handleChangeFor("vatNumberType")(defaultType);
     }
   }
-  if (data.exemptedFromVat === false && data.vatAbsenceReason) {
-    handleChangeFor("vatAbsenceReason")(null);
-  }
   return /* @__PURE__ */ jsxs("div", { className: "adyen-kyc-field__vat-number", children: [
     /* @__PURE__ */ jsx(
       VatNumberTypeSelector,

package/dist/{Review-KJya8jDh.js → Review-DsZWCgw-.js}

@@ -2,19 +2,19 @@
 {
   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] = "43585b7b-ec66-4d7e-9802-0933f2d5f26a", e._sentryDebugIdIdentifier = "sentry-dbid-43585b7b-ec66-4d7e-9802-0933f2d5f26a");
+    n && (e._sentryDebugIds = e._sentryDebugIds || {}, e._sentryDebugIds[n] = "34544037-101d-45ab-ac1c-b5e64cd603a6", e._sentryDebugIdIdentifier = "sentry-dbid-34544037-101d-45ab-ac1c-b5e64cd603a6");
   } catch (e) {
   }
 }
 ;
 import { jsx, jsxs } from "preact/jsx-runtime";
 import { useState } from "preact/hooks";
-import { b as useApiContext, aA as useMutation, k as httpPost, a as useTranslation } from "./StoreProvider-BWVRmzZI.js";
-import { L as LoaderWrapper, C as Checkbox } from "./useForm-BSzxrzKr.js";
-import { F as FormHeader } from "./CountryField-C_sYT__J.js";
-import { u as useToastContext } from "./useToastContext-Dzwox5LN.js";
-import { A as ActionBar } from "./FormNavigation-Nu5JeRyn.js";
-import { D as DropinLayout } from "./OnboardingDropinComponent-BpbxXLWL.js";
+import { b as useApiContext, aF as useMutation, k as httpPost, a as useTranslation } from "./StoreProvider-A-G7e1lx.js";
+import { L as LoaderWrapper, C as Checkbox } from "./useForm-DJPITpbv.js";
+import { F as FormHeader } from "./CountryField-JJ69pIsL.js";
+import { u as useToastContext } from "./useToastContext-BD1TnfkF.js";
+import { A as ActionBar } from "./FormNavigation-DB53eN8d.js";
+import { D as DropinLayout } from "./OnboardingDropinComponent-B_HrYU_Q.js";
 const confirmReview = async (legalEntityId, baseUrl) => {
   return httpPost({
     baseUrl,