@adyen/kyc-components 4.0.0-beta.5 → 4.0.0-beta.6

package/dist/validate-DN9Kvy9b.js

@@ -0,0 +1,382 @@
+;
+{
+  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] = "6d53c2e8-00e1-42c4-bd49-8a615af0a157", e._sentryDebugIdIdentifier = "sentry-dbid-6d53c2e8-00e1-42c4-bd49-8a615af0a157");
+  } catch (e) {
+  }
+}
+;
+import { useCallback, useState, useMemo, useEffect } from "preact/hooks";
+import { b as useApiContext, k as httpPost, a8 as CountryCodes, a9 as isEmpty, N as createLogger, a as useTranslation, az as entriesOf } from "./StoreProvider-DOveEVCE.js";
+import { jsx, jsxs } from "preact/jsx-runtime";
+import { F as Field, c as Select } from "./useForm-B58-dXq6.js";
+import { m as mergeFieldMetadataIntoProps, c as createFormUtils, F as FormHeader } from "./CountryField-DrVg4pbc.js";
+import { m as makeMask, a as nonInputs, n as numericInputs, s as spacer, M as MaskedInput, I as InputEmail } from "./MaskedInput-CP1lOY03.js";
+import { r as resolveFieldMetadata } from "./fieldConfigurations-DPY7jB8k.js";
+import { u as useDataset, d as datasetIdentifier } from "./useDataset-D4mnA6DC.js";
+import { I as InputGroup } from "./InputGroup-WBfGDV5F.js";
+import { e as emailPattern } from "./basePatterns-BwdnMQxI.js";
+const validatePhoneNumber = (baseUrl, data) => {
+  return httpPost(
+    {
+      baseUrl,
+      path: `validations/phonenumber`
+    },
+    data
+  );
+};
+const useValidatePhoneNumberImperatively = () => {
+  const { baseUrl } = useApiContext();
+  return useCallback(
+    (data) => validatePhoneNumber(baseUrl.value, data),
+    [baseUrl.value]
+  );
+};
+const validatePhoneCountryCodeNotEmptyOnBlur = {
+  modes: ["blur"],
+  validate: (phone) => !isEmpty(phone?.phoneCountryCode),
+  errorMessage: "missingPhoneCountryCode"
+};
+const validatePhoneNumberNotEmpty = {
+  modes: ["blur"],
+  validate: (phone) => !isEmpty(phone?.number),
+  errorMessage: "invalidPhoneNumber"
+};
+const getAsyncPhoneValidationRules = (validatePhoneNumber2) => ({
+  phoneNumber: {
+    asyncValidate: async (phone) => {
+      if (!phone?.number) return false;
+      return (await validatePhoneNumber2({ number: phone.number })).valid;
+    },
+    errorMessage: "invalidPhoneNumber",
+    modes: ["blur"]
+  }
+});
+const defaultValidators = [validatePhoneCountryCodeNotEmptyOnBlur, validatePhoneNumberNotEmpty];
+const defaultFieldMetadata = {
+  label: "phoneNumber",
+  validators: defaultValidators
+};
+const fieldConfig = {
+  [CountryCodes.Albania]: {
+    label: "phoneNumber",
+    validators: defaultValidators,
+    mask: {
+      mask: makeMask(...numericInputs(2), spacer, ...numericInputs(3), spacer, ...numericInputs(4))
+    },
+    placeholder: "phoneNumber__placeholder__AL"
+  },
+  [CountryCodes.AmericanSamoa]: {
+    label: "phoneNumber",
+    validators: defaultValidators,
+    mask: {
+      mask: makeMask(...numericInputs(3), ...nonInputs("-"), ...numericInputs(4))
+    },
+    placeholder: "phoneNumber__placeholder__AS"
+  },
+  [CountryCodes.Netherlands]: {
+    label: "phoneNumber",
+    validators: defaultValidators,
+    mask: { mask: makeMask(...numericInputs(1), spacer, ...numericInputs(8)) },
+    placeholder: "phoneNumber__placeholder__NL"
+  },
+  [CountryCodes.Singapore]: {
+    label: "phoneNumber",
+    validators: defaultValidators,
+    mask: { mask: makeMask(...numericInputs(4), spacer, ...numericInputs(4)) },
+    placeholder: "phoneNumber__placeholder__SG"
+  },
+  [CountryCodes.Japan]: {
+    label: "phoneNumber",
+    validators: defaultValidators,
+    mask: {
+      mask: makeMask(
+        ...numericInputs(2),
+        ...nonInputs("-"),
+        ...numericInputs(4),
+        ...nonInputs("-"),
+        ...numericInputs(4)
+      )
+    },
+    placeholder: "phoneNumber__placeholder__JP"
+  },
+  [CountryCodes.UnitedStates]: {
+    label: "phoneNumber",
+    validators: defaultValidators,
+    mask: {
+      mask: makeMask(
+        ...nonInputs("(", { displayEagerly: false }),
+        ...numericInputs(3),
+        ...nonInputs(")"),
+        spacer,
+        ...numericInputs(3),
+        ...nonInputs("-"),
+        ...numericInputs(4)
+      )
+    },
+    placeholder: "phoneNumber__placeholder__US"
+  }
+};
+const PHONE_FIELD = ["phoneNumber"];
+const logger = createLogger();
+const usePhonePrefixes = () => {
+  const [phonePrefixes, setPhonePrefixes] = useState();
+  useEffect(() => {
+    const loadPhonePrefixes = async () => {
+      const loaded = (await import("./phonePrefixes-CnL40uyX.js")).default;
+      setPhonePrefixes(loaded);
+    };
+    loadPhonePrefixes().catch(logger.error);
+  }, []);
+  return phonePrefixes;
+};
+function PhoneField({
+  country,
+  name = "phoneNumber",
+  data,
+  valid,
+  errors,
+  labels,
+  mask,
+  readonly,
+  optional,
+  placeholders,
+  handleChangeFor
+}) {
+  const { t } = useTranslation("common");
+  const { dataset: countries } = useDataset(datasetIdentifier.country);
+  const [isFocused, setIsFocused] = useState(false);
+  const phonePrefixes = usePhonePrefixes();
+  const currentPrefix = phonePrefixes?.[data.phoneNumber?.phoneCountryCode ?? country];
+  const numberStrippedOfCountryCode = useMemo(() => {
+    if (!phonePrefixes || !data.phoneNumber?.number) return "";
+    return currentPrefix && data.phoneNumber?.number.startsWith(currentPrefix) ? data.phoneNumber.number.slice(currentPrefix.length) : data.phoneNumber.number;
+  }, [phonePrefixes, data.phoneNumber?.number, currentPrefix]);
+  const selectItems = useMemo(() => {
+    const countryMap = new Map(countries.map((entry) => [entry.id, entry.name]));
+    return entriesOf(phonePrefixes ?? {}).map(([countryCode, prefix]) => {
+      const countryName = countryMap.get(countryCode) ?? countryCode;
+      return {
+        id: countryCode,
+        name: `${countryName} (${prefix})`,
+        selectedOptionName: `${countryCode} (${prefix})`
+      };
+    }).sort((a, b) => a.name.localeCompare(b.name));
+  }, [phonePrefixes, countries]);
+  const handleSelectChange = useCallback(
+    (event) => {
+      const newCC = phonePrefixes?.[event.target.value];
+      const withoutCC = currentPrefix && data.phoneNumber?.number?.startsWith(currentPrefix) ? data.phoneNumber?.number?.slice(currentPrefix.length) : data.phoneNumber?.number?.replace(/\D+/g, "");
+      handleChangeFor(
+        "phoneNumber",
+        "input"
+      )({
+        phoneCountryCode: event.target.value,
+        number: withoutCC ? newCC + withoutCC : newCC,
+        type: "mobile"
+      });
+    },
+    [currentPrefix, data.phoneNumber?.number, handleChangeFor, phonePrefixes]
+  );
+  const handleOnInput = useCallback(
+    (event) => {
+      const strippedOfCountryCode = currentPrefix ? event.replace(currentPrefix, "") : event;
+      const onlyDigits = strippedOfCountryCode.replace(/\D+/g, "");
+      const number = currentPrefix ? `${currentPrefix}${onlyDigits}` : onlyDigits;
+      handleChangeFor(
+        "phoneNumber",
+        "input"
+      )({
+        ...data.phoneNumber,
+        number,
+        type: "mobile"
+      });
+    },
+    [currentPrefix, data.phoneNumber, handleChangeFor]
+  );
+  const handleOnBlur = useCallback(
+    (event) => {
+      const onlyDigits = event.target.value.replace(/\D+/g, "");
+      const number = currentPrefix ? `${currentPrefix}${onlyDigits}` : onlyDigits;
+      setIsFocused(false);
+      handleChangeFor(
+        "phoneNumber",
+        "blur"
+      )({
+        ...data.phoneNumber,
+        number,
+        type: "mobile"
+      });
+    },
+    [currentPrefix, data.phoneNumber, handleChangeFor]
+  );
+  const transformOnType = useCallback(
+    (value) => currentPrefix ? value.startsWith(currentPrefix) ? value.slice(currentPrefix.length) : value : value,
+    [currentPrefix]
+  );
+  useEffect(() => {
+    if (!data.phoneNumber?.phoneCountryCode && country) {
+      handleChangeFor(
+        "phoneNumber",
+        "input"
+      )({
+        ...data.phoneNumber,
+        phoneCountryCode: country,
+        type: "mobile"
+      });
+    }
+  }, [country, data.phoneNumber?.phoneCountryCode, data?.phoneNumber, handleChangeFor]);
+  return /* @__PURE__ */ jsx(
+    Field,
+    {
+      el: "fieldset",
+      name,
+      label: labels.phoneNumber ?? t(($) => $["phoneNumber"]),
+      errorMessage: errors.phoneNumber,
+      isValid: Boolean(valid.phoneNumber),
+      optional: Boolean(optional),
+      disabled: Boolean(readonly),
+      children: (childProps) => /* @__PURE__ */ jsxs(
+        InputGroup,
+        {
+          ...childProps,
+          id: "phoneInputGroup",
+          isFocused,
+          isInvalid: Boolean(!valid.phoneNumber && errors.phoneNumber),
+          children: [
+            /* @__PURE__ */ jsx(
+              Select,
+              {
+                name: "phoneCountryCode",
+                "aria-label": t(($) => $["phoneNumberPrefix"]),
+                isMulti: false,
+                items: selectItems,
+                selected: data.phoneNumber?.phoneCountryCode,
+                placeholder: t(($) => $["select"]),
+                onChange: handleSelectChange,
+                minimal: true
+              }
+            ),
+            /* @__PURE__ */ jsx(
+              MaskedInput,
+              {
+                useFieldComponent: false,
+                name: "phoneNumber",
+                type: "tel",
+                label: labels.phoneNumber ?? t(($) => $["phoneNumber"]),
+                value: numberStrippedOfCountryCode,
+                "aria-invalid": Boolean(!valid.phoneNumber),
+                isValid: Boolean(valid.phoneNumber),
+                placeholder: placeholders?.phoneNumber,
+                shouldValidate: true,
+                errorMessage: errors.phoneNumber,
+                readonly,
+                disabled: readonly,
+                transformOnType,
+                ...mask,
+                stripNonAllowedInputs: true,
+                onInput: handleOnInput,
+                onBlur: handleOnBlur,
+                onFocus: () => setIsFocused(true)
+              }
+            )
+          ]
+        }
+      )
+    }
+  );
+}
+const contactDetailFields = [...PHONE_FIELD, "email"];
+function ContactDetails(props) {
+  const { t } = useTranslation("common");
+  const {
+    country,
+    data,
+    errors = {},
+    handleFieldChange,
+    fieldValidationErrors,
+    valid = {},
+    ...newProps
+  } = props;
+  let mergedProps = newProps;
+  if (!handleFieldChange) {
+    return;
+  }
+  mergedProps = mergeFieldMetadataIntoProps(
+    "phoneNumber",
+    resolveFieldMetadata(
+      /*
+        Use global data here to allow for config to be dynamic when the below useForm data changes
+        otherwise we will use `country` which is unrelated to the phoneCountryCode
+      */
+      fieldConfig[data?.phoneNumber?.phoneCountryCode ?? country],
+      {},
+      defaultFieldMetadata
+    ),
+    mergedProps
+  );
+  const formUtils = createFormUtils(mergedProps, t);
+  return /* @__PURE__ */ jsxs("div", { role: "form", className: "adyen-kyc-individual__contact-details", children: [
+    /* @__PURE__ */ jsx(FormHeader, { heading: mergedProps.heading }),
+    formUtils.isRequiredField("email") && /* @__PURE__ */ jsx("div", { className: "adyen-kyc-email", children: /* @__PURE__ */ jsx(
+      Field,
+      {
+        name: "email",
+        label: formUtils.getLabel("email"),
+        errorMessage: formUtils.getErrorMessage("email", errors, fieldValidationErrors),
+        isValid: valid.email,
+        children: (childProps) => /* @__PURE__ */ jsx(
+          InputEmail,
+          {
+            ...childProps,
+            name: "email",
+            value: data?.email,
+            readonly: formUtils.isReadOnly("email"),
+            onInput: handleFieldChange("email", "input"),
+            onBlur: handleFieldChange("email", "blur"),
+            "aria-required": true,
+            "aria-invalid": !valid?.email
+          }
+        )
+      }
+    ) }),
+    formUtils.isRequiredField("phoneNumber") && /* @__PURE__ */ jsx(
+      PhoneField,
+      {
+        ...{
+          country,
+          data: formUtils.getFieldData(data ?? {}, PHONE_FIELD),
+          valid: formUtils.getFieldValid(valid, PHONE_FIELD),
+          errors: formUtils.getFieldErrors(errors, {}, PHONE_FIELD),
+          labels: formUtils.getFieldLabels(PHONE_FIELD, {
+            phoneNumber: "phoneNumber"
+          }),
+          placeholders: formUtils.getFieldPlaceholders(PHONE_FIELD),
+          optional: formUtils.isOptionalField("phoneNumber"),
+          readonly: formUtils.isReadOnly("phoneNumber"),
+          mask: formUtils.getMask("phoneNumber"),
+          handleChangeFor: handleFieldChange
+        }
+      }
+    )
+  ] });
+}
+const contactDetailsValidationRules = {
+  email: [
+    {
+      modes: ["blur"],
+      validate: (email) => email ? emailPattern.test(email) : false,
+      errorMessage: "invalidEmail"
+    }
+  ]
+};
+export {
+  ContactDetails as C,
+  contactDetailsValidationRules as a,
+  contactDetailFields as c,
+  defaultFieldMetadata as d,
+  fieldConfig as f,
+  getAsyncPhoneValidationRules as g,
+  useValidatePhoneNumberImperatively as u
+};

package/dist/validationError-Dr817hGf.js

@@ -0,0 +1,86 @@
+;
+{
+  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] = "6d974094-658d-4500-a6fa-6d949a6cb2af", e._sentryDebugIdIdentifier = "sentry-dbid-6d974094-658d-4500-a6fa-6d949a6cb2af");
+  } catch (e) {
+  }
+}
+;
+import { M as TaskTypes, bq as remediationPayoutApiKeyMapping, br as remediationBusinessDetailsApiKeyMapping, bs as remediationIndividualApiKeyMapping } from "./StoreProvider-DOveEVCE.js";
+import { a as assignToProp } from "./utils-DNSfZiio.js";
+const isMaintenanceModeError = (error) => error && typeof error === "object" && "messageCode" in error && error.messageCode === "maintenanceMode";
+const overrideKeyMapping = {
+  [TaskTypes.INDIVIDUAL]: {
+    TAX_ID_NUMBER: "individual.taxInformation"
+  },
+  [TaskTypes.BUSINESS_DETAILS]: {
+    TAX_ID_NUMBER: "organization.taxInformation"
+  }
+};
+const processValidationErrors = (validationError, dropinTask, keyMappings) => {
+  if (validationError?.invalidFields && validationError?.invalidFields.length > 0) {
+    return validationError?.invalidFields.reduce(
+      (acc, invalidField) => {
+        if (invalidField?.name) {
+          let mappedFieldPath = mapField(invalidField?.name, dropinTask);
+          if (keyMappings) {
+            mappedFieldPath = keyMappings[invalidField?.name];
+          }
+          if (mappedFieldPath) {
+            assignToProp(mappedFieldPath, acc, true);
+          }
+        }
+        return acc;
+      },
+      {}
+    );
+  }
+};
+const mapField = (lePath, dropinTask) => {
+  switch (dropinTask) {
+    case TaskTypes.INDIVIDUAL: {
+      const mappedPath = overrideKeyMapping?.[TaskTypes.INDIVIDUAL]?.[lePath];
+      return mappedPath ? mappedPath : remediationIndividualApiKeyMapping[lePath];
+    }
+    case TaskTypes.BUSINESS_DETAILS: {
+      const mappedPath = overrideKeyMapping?.[TaskTypes.BUSINESS_DETAILS]?.[lePath];
+      return mappedPath ? mappedPath : remediationBusinessDetailsApiKeyMapping[lePath];
+    }
+    case TaskTypes.PAYOUT:
+    case TaskTypes.PAYIN:
+      return remediationPayoutApiKeyMapping[lePath];
+    default:
+      return null;
+  }
+};
+const API_VALIDATION_ERROR_CODE = "30_102";
+const ID_DOCUMENT_UPLOAD_ERROR_CODE = "30_105";
+const BANK_STATEMENT_UPLOAD_ERROR_CODE = "30_106";
+const CreateOrUpdateTransferInstrumentErrorMessage = {
+  TRANSFER_INSTRUMENT_LIMIT_HAS_ALREADY_BEEN_MET: "Transfer instrument limit has already been met"
+};
+const validateErrorCode = (error, errorCode) => !!error && typeof error === "object" && "errorCode" in error && error.errorCode === errorCode;
+const isValidationError = (error) => validateErrorCode(error, API_VALIDATION_ERROR_CODE);
+const isIdDocumentUploadError = (error) => validateErrorCode(error, ID_DOCUMENT_UPLOAD_ERROR_CODE);
+const isBankStatementUploadError = (error) => validateErrorCode(error, BANK_STATEMENT_UPLOAD_ERROR_CODE);
+const mapCreateOrUpdateTransferInstrumentErrorMessageToTranslatable = (error) => {
+  if (!error) {
+    return "failedToUpdateDetails";
+  }
+  const message = error?.sourceError?.detail;
+  switch (message) {
+    case CreateOrUpdateTransferInstrumentErrorMessage.TRANSFER_INSTRUMENT_LIMIT_HAS_ALREADY_BEEN_MET:
+      return "transferInstrumentLimitHasAlreadyBeenMet";
+    default:
+      return "failedToUpdateDetails";
+  }
+};
+export {
+  isMaintenanceModeError as a,
+  isIdDocumentUploadError as b,
+  isBankStatementUploadError as c,
+  isValidationError as i,
+  mapCreateOrUpdateTransferInstrumentErrorMessageToTranslatable as m,
+  processValidationErrors as p
+};