@adyen/kyc-components 4.0.0-compact.4 → 4.0.0-compact.7

package/dist/useForm-DqUW2TbW.js

@@ -0,0 +1,582 @@
+;
+{
+  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] = "34a02427-5cdc-466b-a673-b1f12dc9538d", e._sentryDebugIdIdentifier = "sentry-dbid-34a02427-5cdc-466b-a673-b1f12dc9538d");
+  } catch (e) {
+  }
+}
+;
+import { useState, useCallback, useMemo, useReducer, useEffect } from "preact/hooks";
+import { a3 as createLogger, ai as isEmpty, aO as doArraysMatch } from "./StoreProvider-99-ewU62.js";
+import { V as ValidationResult, o as omitKeys, a as addKeys } from "./utils-PkTZS9uf.js";
+const logger = createLogger();
+const useAsyncValidator = (asyncRules) => {
+  const [asyncValidationResults, setAsyncValidationResults] = useState({});
+  const clearAsyncValidationResults = useCallback((field) => {
+    setAsyncValidationResults((existingResults) => ({
+      ...existingResults,
+      [field]: void 0
+    }));
+  }, []);
+  const triggerAsyncValidation = useCallback(
+    (field, formState, mode) => {
+      const rule = asyncRules?.[field];
+      if (!rule || !rule.modes.includes(mode)) {
+        clearAsyncValidationResults(field);
+        return;
+      }
+      const value = formState.data[field];
+      return rule.asyncValidate(formState.data[field], { state: formState }).then((isValid) => {
+        setAsyncValidationResults((existingResults) => ({
+          ...existingResults,
+          [field]: new ValidationResult([
+            {
+              isValid,
+              errorMessage: typeof rule.errorMessage === "function" ? rule.errorMessage(value, { state: formState }) : rule.errorMessage,
+              hasError: !isValid
+            }
+          ])
+        }));
+      }).catch(logger.error);
+    },
+    [asyncRules, clearAsyncValidationResults]
+  );
+  return {
+    asyncValidationResults,
+    triggerAsyncValidation,
+    clearAsyncValidationResults
+  };
+};
+const useStaticValidator = (rules) => {
+  const getRulesForField = useCallback(
+    (field) => {
+      const fallbackRule = {
+        validate: () => true,
+        modes: ["blur", "input"]
+      };
+      const fieldRules = rules?.[field] ?? [fallbackRule];
+      return Array.isArray(fieldRules) ? fieldRules : [fieldRules];
+    },
+    [rules]
+  );
+  const triggerStaticValidation = useCallback(
+    ({ key, value, mode = "blur" }, context) => {
+      const fieldRules = getRulesForField(key);
+      const isFieldOptional = !!context?.state.optionalFields?.includes(key);
+      const isFieldObscured = !!context?.state.obscuredFields?.includes(key);
+      const validationRulesResult = fieldRules.map((rule) => {
+        const shouldValidate = rule.modes.includes(mode) && !isFieldObscured;
+        const isValid = isFieldOptional && isEmpty(value) ? true : rule.validate(value, context);
+        return {
+          isValid,
+          errorMessage: typeof rule.errorMessage === "function" ? rule.errorMessage(value, context) : rule.errorMessage,
+          hasError: shouldValidate && !isValid
+        };
+      });
+      return new ValidationResult(validationRulesResult);
+    },
+    [getRulesForField]
+  );
+  return {
+    triggerStaticValidation
+  };
+};
+const processField = ({
+  key,
+  value = null,
+  mode,
+  defaultData,
+  fieldContext,
+  formatters,
+  staticValidate,
+  asyncValidate
+}) => {
+  const formatterFn = formatters?.[key]?.formatter ? formatters[key]?.formatter : formatters?.[key];
+  const formattedValue = formatterFn && typeof formatterFn === "function" ? formatterFn(value, fieldContext) : value;
+  const shouldValidateField = !(defaultData?.[key] === value && !!defaultData?.[key]);
+  if (shouldValidateField && value) {
+    asyncValidate(key, fieldContext.state, mode);
+  }
+  const validationResult = shouldValidateField ? staticValidate({ key, value: formattedValue, mode }, fieldContext) : new ValidationResult([
+    {
+      isValid: true,
+      hasError: false
+    }
+  ]);
+  return [formattedValue, validationResult];
+};
+function init({
+  schema,
+  defaultData,
+  fieldProblems,
+  obscuredFields,
+  optionalFields,
+  trustedFields,
+  formatters,
+  staticValidate,
+  asyncValidate
+}) {
+  const getProcessedState = (fieldKey) => {
+    const [formattedValue, validationResult] = processField({
+      key: fieldKey,
+      value: defaultData?.[fieldKey],
+      mode: "blur",
+      formatters,
+      defaultData,
+      fieldContext: {
+        state: {
+          data: defaultData,
+          obscuredFields,
+          optionalFields,
+          trustedFields
+        }
+      },
+      staticValidate,
+      asyncValidate
+    });
+    if (typeof defaultData?.[fieldKey] === "undefined") {
+      return {
+        valid: validationResult.isValid && !fieldProblems?.[fieldKey] || false,
+        errors: null,
+        data: null,
+        fieldProblems: fieldProblems?.[fieldKey] ?? false
+      };
+    }
+    return {
+      valid: validationResult.isValid && !fieldProblems?.[fieldKey] || false,
+      errors: validationResult.getError() ?? null,
+      data: formattedValue,
+      fieldProblems: fieldProblems?.[fieldKey] ?? false
+    };
+  };
+  const formFields = optionalFields ? [...schema, ...optionalFields] : schema;
+  const formData = formFields.reduce(
+    (acc, field) => {
+      const {
+        valid,
+        errors,
+        data,
+        fieldProblems: processedFieldProblems
+      } = getProcessedState(field);
+      return {
+        ...acc,
+        data: { ...acc.data, [field]: data },
+        valid: { ...acc.valid, [field]: valid },
+        errors: { ...acc.errors, [field]: errors },
+        fieldProblems: { ...acc.fieldProblems, [field]: processedFieldProblems }
+      };
+    },
+    {
+      schema,
+      data: {},
+      valid: {},
+      errors: {},
+      fieldProblems: {},
+      obscuredFields,
+      optionalFields,
+      trustedFields
+    }
+  );
+  return formData;
+}
+function reducer({
+  staticValidate,
+  asyncValidate,
+  obscuredFields,
+  optionalFields,
+  trustedFields,
+  formatters
+}) {
+  return (state, {
+    type,
+    key,
+    mode,
+    value,
+    schema,
+    selectedSchema,
+    formValue,
+    fieldProblems,
+    defaultData
+  }) => {
+    const validationSchema = selectedSchema || state.schema;
+    switch (type) {
+      case "setData": {
+        if (!key) return state;
+        return { ...state, data: { ...state.data, [key]: value } };
+      }
+      case "setValid": {
+        if (!key) return state;
+        return { ...state, valid: { ...state.valid, [key]: value } };
+      }
+      case "setErrors": {
+        if (!key) return state;
+        return { ...state, errors: { ...state.errors, [key]: value } };
+      }
+      case "setFieldProblems": {
+        return state?.schema?.reduce(
+          (acc, field) => ({
+            ...acc,
+            fieldProblems: {
+              ...state.fieldProblems,
+              [field]: fieldProblems?.[field] ?? false
+            },
+            valid: { ...state.valid, [field]: state.valid?.[field] && !fieldProblems?.[field] }
+          }),
+          state
+        );
+      }
+      case "setSchema": {
+        if (!schema) return state;
+        const defaultState = init({
+          schema,
+          // requiredFields
+          defaultData,
+          fieldProblems,
+          obscuredFields,
+          optionalFields,
+          trustedFields,
+          staticValidate,
+          asyncValidate
+        });
+        const removedFields = state.optionalFields?.length ? [
+          ...state.schema.filter((field) => !schema.includes(field)),
+          ...state.optionalFields.filter((field) => !optionalFields?.includes(field))
+        ] : state.schema.filter((field) => !schema.includes(field));
+        const newFields = optionalFields?.length ? [
+          ...schema.filter((field) => !state.schema?.includes(field)),
+          ...optionalFields.filter((field) => !state.optionalFields?.includes(field))
+        ] : schema.filter((field) => !state.schema?.includes(field));
+        const local = {
+          data: omitKeys(state.data, newFields),
+          errors: omitKeys(state.errors, newFields),
+          valid: omitKeys(state.valid, newFields),
+          fieldProblems: omitKeys(state.fieldProblems, newFields)
+        };
+        const updatedData = addKeys(
+          omitKeys(state.data, removedFields),
+          newFields,
+          null,
+          defaultState.data,
+          state.local?.data
+        );
+        const updatedValid = addKeys(
+          omitKeys(state.valid, removedFields),
+          newFields,
+          false,
+          defaultState.valid,
+          state.local?.valid
+        );
+        const updatedErrors = addKeys(
+          omitKeys(state.errors, removedFields),
+          newFields,
+          null,
+          defaultState.errors,
+          state.local?.errors
+        );
+        const updatedFieldProblems = addKeys(
+          omitKeys(state.fieldProblems, removedFields),
+          newFields,
+          false,
+          defaultState.fieldProblems,
+          state.local?.fieldProblems
+        );
+        return {
+          ...state,
+          schema,
+          data: updatedData,
+          valid: updatedValid,
+          errors: updatedErrors,
+          fieldProblems: updatedFieldProblems,
+          obscuredFields,
+          optionalFields,
+          trustedFields,
+          local
+        };
+      }
+      case "updateField": {
+        if (!key || !mode) return state;
+        const [formattedValue, validation] = processField({
+          key,
+          value,
+          mode,
+          defaultData,
+          formatters,
+          fieldContext: { state },
+          staticValidate,
+          asyncValidate
+        });
+        const oldValue = state.data[key];
+        const clearFieldProblems = oldValue !== formattedValue;
+        return {
+          ...state,
+          data: { ...state.data, [key]: formattedValue },
+          errors: {
+            ...state.errors,
+            [key]: validation.getError() ?? null
+          },
+          valid: {
+            ...state.valid,
+            [key]: validation.isValid && !state.fieldProblems?.[key] || false
+          },
+          fieldProblems: {
+            ...state.fieldProblems,
+            [key]: clearFieldProblems ? false : state.fieldProblems?.[key] ?? false
+          }
+        };
+      }
+      case "mergeForm": {
+        const mergedState = {
+          ...state,
+          data: { ...state.data, ...formValue?.data },
+          errors: { ...state.errors, ...formValue?.errors },
+          valid: { ...state.valid, ...formValue?.valid },
+          fieldProblems: { ...state.fieldProblems, ...formValue?.fieldProblems }
+        };
+        if (mergedState.valid) {
+          mergedState.isValid = Object.values(mergedState.valid).every((isValid) => isValid);
+        }
+        return mergedState;
+      }
+      case "validateForm": {
+        const formValidation = validationSchema?.reduce(
+          (acc, cur) => {
+            const [formattedValue, validation] = processField({
+              key: cur,
+              value: state.data[cur],
+              mode: "blur",
+              defaultData,
+              formatters,
+              fieldContext: { state },
+              staticValidate,
+              asyncValidate
+            });
+            const oldValue = state.data[cur];
+            const clearFieldProblems = oldValue !== formattedValue;
+            return {
+              valid: {
+                ...acc.valid,
+                [cur]: validation.isValid && !state.fieldProblems?.[cur] || false
+              },
+              errors: {
+                ...acc.errors,
+                [cur]: validation.getError() ?? null
+              },
+              fieldProblems: {
+                ...acc.fieldProblems,
+                [cur]: clearFieldProblems ? false : state.fieldProblems?.[cur] ?? false
+              }
+            };
+          },
+          { valid: state.valid, errors: state.errors, fieldProblems: state.fieldProblems }
+        );
+        return {
+          ...state,
+          valid: formValidation?.valid,
+          errors: formValidation?.errors,
+          fieldProblems: formValidation?.fieldProblems
+        };
+      }
+      default:
+        throw new Error("Undefined useForm action");
+    }
+  };
+}
+const mergeStaticAndAsyncErrorsState = (staticValidationErrors, asyncValidationErrors, schema, setValid, optionalFields) => {
+  const fields = optionalFields ? [...schema, ...optionalFields] : schema;
+  if (!fields.length) return staticValidationErrors;
+  const errors = fields.reduce(
+    (acc, field) => {
+      if (asyncValidationErrors[field]?.getError()) setValid(field, false);
+      return {
+        ...acc,
+        [field]: staticValidationErrors[field] ?? asyncValidationErrors[field]?.getError() ?? null
+      };
+    },
+    {}
+  );
+  return errors;
+};
+function useForm({
+  schema,
+  defaultData,
+  rules,
+  asyncRules,
+  fieldProblems,
+  obscuredFields,
+  optionalFields,
+  trustedFields,
+  formatters,
+  shouldValidate = false
+}) {
+  const { triggerStaticValidation } = useStaticValidator(rules);
+  const { triggerAsyncValidation, asyncValidationResults } = useAsyncValidator(asyncRules);
+  const getRequiredFields = useMemo(
+    () => typeof schema === "function" ? schema : () => schema,
+    [schema]
+  );
+  const getSchema = useMemo(
+    () => defaultData ? getRequiredFields(defaultData) : [],
+    [defaultData, getRequiredFields]
+  );
+  const getReducer = useCallback(
+    () => reducer({
+      staticValidate: triggerStaticValidation,
+      asyncValidate: triggerAsyncValidation,
+      obscuredFields,
+      optionalFields,
+      trustedFields,
+      formatters
+    }),
+    [
+      triggerStaticValidation,
+      triggerAsyncValidation,
+      obscuredFields,
+      optionalFields,
+      trustedFields,
+      formatters
+    ]
+  );
+  const initialData = useMemo(
+    () => ({
+      schema: getSchema,
+      defaultData,
+      fieldProblems,
+      obscuredFields,
+      optionalFields,
+      trustedFields,
+      formatters,
+      staticValidate: triggerStaticValidation,
+      asyncValidate: triggerAsyncValidation
+    }),
+    [
+      getSchema,
+      defaultData,
+      fieldProblems,
+      obscuredFields,
+      optionalFields,
+      trustedFields,
+      formatters,
+      triggerStaticValidation,
+      triggerAsyncValidation
+    ]
+  );
+  const [state, dispatch] = useReducer(getReducer(), initialData, init);
+  const isValid = useMemo(
+    () => state.schema?.every((key) => state.valid[key]),
+    [state.schema, state.valid]
+  );
+  const getTargetValue = useCallback(
+    (key, e) => {
+      if (!e?.target) return e;
+      if (e.target.type === "checkbox") {
+        return !state.data[key];
+      }
+      return e.target.value;
+    },
+    [state.data]
+  );
+  const setErrors = useCallback((key, value) => {
+    dispatch({ type: "setErrors", key, value });
+  }, []);
+  const setValid = useCallback((key, value) => {
+    dispatch({ type: "setValid", key, value });
+  }, []);
+  const setData = useCallback((key, value) => {
+    dispatch({ type: "setData", key, value });
+  }, []);
+  const setSchema = useCallback(
+    (newSchema) => {
+      dispatch({ type: "setSchema", schema: newSchema, defaultData });
+    },
+    [defaultData]
+  );
+  const setFieldProblems = useCallback(
+    (newFieldProblems) => {
+      dispatch({ type: "setFieldProblems", fieldProblems: newFieldProblems });
+    },
+    []
+  );
+  const mergeForm = useCallback((formValue) => {
+    dispatch({ type: "mergeForm", formValue });
+  }, []);
+  const handleChangeFor = useCallback(
+    (key, mode = "blur") => (e) => {
+      const value = getTargetValue(key, e);
+      dispatch({
+        type: "updateField",
+        key,
+        value,
+        mode,
+        defaultData
+      });
+    },
+    [defaultData, getTargetValue]
+  );
+  const triggerValidation = useCallback(
+    (selectedSchema) => {
+      dispatch({
+        type: "validateForm",
+        selectedSchema,
+        defaultData
+      });
+    },
+    [defaultData]
+  );
+  const resetToDefaultData = useCallback(() => {
+    getSchema.forEach((field) => {
+      if (!defaultData || typeof defaultData[field] !== "undefined") {
+        handleChangeFor(field)(defaultData?.[field]);
+        return;
+      }
+      setValid(field, false);
+      setErrors(field, null);
+      setData(field, defaultData[field]);
+    });
+  }, [defaultData, getSchema, handleChangeFor, setData, setErrors, setValid]);
+  useEffect(() => {
+    const newSchema = getRequiredFields(state.data);
+    if (!doArraysMatch(state.schema, newSchema)) {
+      setSchema(newSchema);
+    }
+  }, [state.schema, state.data, setSchema, getRequiredFields]);
+  useEffect(() => {
+    if (shouldValidate) {
+      triggerValidation();
+    }
+  }, [shouldValidate, state.schema]);
+  useEffect(() => {
+    if (fieldProblems) {
+      setFieldProblems(fieldProblems);
+    }
+  }, [JSON.stringify(fieldProblems), setFieldProblems]);
+  const formErrors = useMemo(
+    () => mergeStaticAndAsyncErrorsState(
+      state.errors,
+      asyncValidationResults,
+      state.schema,
+      setValid,
+      state.optionalFields
+    ),
+    [asyncValidationResults, state.errors, state.optionalFields, state.schema]
+  );
+  return {
+    mergeForm,
+    setData,
+    setValid,
+    setErrors,
+    setFieldProblems,
+    handleChangeFor,
+    triggerValidation,
+    resetToDefaultData,
+    isValid,
+    schema: state.schema,
+    valid: state.valid,
+    errors: formErrors,
+    data: state.data,
+    fieldProblems: state.fieldProblems
+  };
+}
+export {
+  useForm as u
+};

package/dist/{FormFlow-DX2A0gcf.js → useFormContext-CkuaJPUI.js}

@@ -2,22 +2,23 @@
 {
   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] = "c27e807f-6fdb-44b2-aeec-ce1f9e4e939f", e._sentryDebugIdIdentifier = "sentry-dbid-c27e807f-6fdb-44b2-aeec-ce1f9e4e939f");
+    n && (e._sentryDebugIds = e._sentryDebugIds || {}, e._sentryDebugIds[n] = "ba3cce14-a9e8-406e-be18-0e0c90d855a5", e._sentryDebugIdIdentifier = "sentry-dbid-ba3cce14-a9e8-406e-be18-0e0c90d855a5");
   } catch (e) {
   }
 }
 ;
-import { jsx, jsxs, Fragment } from "preact/jsx-runtime";
-import { useMemo, useRef, useState } from "preact/hooks";
-import { F as FormContext } from "./Address-BG5_sFfZ.js";
+import { jsx, jsxs } from "preact/jsx-runtime";
+import { useMemo, useRef, useState, useContext } from "preact/hooks";
 import cx from "classnames";
-import { a3 as useAnalyticsContext, u as useTranslation, B as Button } from "./StoreProvider-DTMSAVgy.js";
-import { L as LoaderWrapper } from "./useForm-BsQfbbso.js";
-import { M as MaybeModal } from "./MaybeModal-QG3JQV0A.js";
+import { p as useAnalyticsContext, u as useTranslation, V as Button } from "./StoreProvider-99-ewU62.js";
+import { L as LoaderWrapper } from "./LoaderWrapper-C2PvjjQc.js";
+import { M as MaybeModal } from "./MaybeModal-xIjl3I31.js";
 import { P as ProgressBar } from "./ProgressBar-B7gTQncy.js";
-import { F as FormRouterContextProvider } from "./dropinUtils-BYk71qFP.js";
-import { C as Confirm } from "./useDataset-D1R4kueP.js";
-import { S as Summary } from "./Summary-BOSxxPjv.js";
+import { F as FormRouterContextProvider } from "./dropinUtils--st1YpV6.js";
+import { C as Confirm } from "./Confirm-C0J_JwMM.js";
+import { S as Summary } from "./Summary-D0GcSMNn.js";
+import { createContext } from "preact";
+const FormContext = createContext(null);
 function FormContextProvider({
   children,
   form
@@ -74,7 +75,6 @@ const FormFlow = ({
   const isFirstStep = currentStep === 0;
   const isLastStep = currentStep === totalSteps - 1;
   const isSingleStepForm = totalSteps < 2;
-  const hasProblems = summary?.problems?.verificationErrors !== void 0;
   const progress = Math.floor(currentStep / (totalSteps - 1) * 100);
   const scrollToTop = () => {
     if (contentRef.current) {
@@ -120,13 +120,6 @@ const FormFlow = ({
     setIsConfirmPresented(false);
     handleCancelClick?.();
   };
-  const handleSkip = () => {
-    userEvents.addPageEvent("Clicked button", {
-      actionType: "skip",
-      label: "skip"
-    });
-    gotoFormByFormIndex(currentStep + 1);
-  };
   const footerClassName = cx(styles.formFlowFooter, {
     [styles.formFlowFooterBorder]: isSingleStepForm
   });
@@ -169,18 +162,15 @@ const FormFlow = ({
                       children: t(($) => $["back"])
                     }
                   ),
-                  /* @__PURE__ */ jsx("div", { className: styles.formFlowPrimaryActions, children: isLastStep ? /* @__PURE__ */ jsx(Button, { onClick: handleSubmit, loading: isSubmitting, children: t(($) => $["submit"]) }) : /* @__PURE__ */ jsxs(Fragment, { children: [
-                    hasProblems && /* @__PURE__ */ jsx(Button, { onClick: handleSkip, disabled: isActionDisabled, variant: "secondary", children: t(($) => $["skip"]) }),
-                    /* @__PURE__ */ jsx(
-                      Button,
-                      {
-                        onClick: handleNext,
-                        disabled: isActionDisabled || disableNextButton,
-                        loading: nextButtonLoading,
-                        children: t(($) => $["continue"])
-                      }
-                    )
-                  ] }) })
+                  /* @__PURE__ */ jsx("div", { className: styles.formFlowPrimaryActions, children: isLastStep ? /* @__PURE__ */ jsx(Button, { onClick: handleSubmit, loading: isSubmitting, children: t(($) => $["submit"]) }) : /* @__PURE__ */ jsx(
+                    Button,
+                    {
+                      onClick: handleNext,
+                      disabled: isActionDisabled || disableNextButton,
+                      loading: nextButtonLoading,
+                      children: t(($) => $["continue"])
+                    }
+                  ) })
                 ] })
               ] })
             ]
@@ -200,7 +190,12 @@ const FormFlow = ({
     }
   );
 };
+function useFormContext() {
+  const context = useContext(FormContext);
+  return context;
+}
 export {
   FormContextProvider as F,
-  FormFlow as a
+  FormFlow as a,
+  useFormContext as u
 };

package/dist/{useGlobalData-CO2a2RhB.js → useGlobalData-5Z6W3or1.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] = "eb88aaf0-2dc7-493e-a098-a311deb1cdf3", e._sentryDebugIdIdentifier = "sentry-dbid-eb88aaf0-2dc7-493e-a098-a311deb1cdf3");
+    n && (e._sentryDebugIds = e._sentryDebugIds || {}, e._sentryDebugIds[n] = "ba295b91-b8f3-43fb-adbd-883dfca589a8", e._sentryDebugIdIdentifier = "sentry-dbid-ba295b91-b8f3-43fb-adbd-883dfca589a8");
   } catch (e) {
   }
 }
 ;
 import { useContext, useCallback, useMemo } from "preact/hooks";
-import { d as debounce } from "./debouncedInputEvent-BdLyqQK5.js";
-import { az as StateContext } from "./StoreProvider-DTMSAVgy.js";
+import { a as debounce } from "./debouncedInputEvent-Cv2S512Y.js";
+import { b9 as StateContext } from "./StoreProvider-99-ewU62.js";
 function useStateContext() {
   const context = useContext(StateContext);
   return context;