@adyen/kyc-components 3.81.0 → 3.82.0-beta.0

package/dist/utils-DxPqN-F5.js

@@ -0,0 +1,159 @@
+;
+{
+  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] = "93efab01-7aed-401d-981b-cfbc6ff8c1e4", e._sentryDebugIdIdentifier = "sentry-dbid-93efab01-7aed-401d-981b-cfbc6ff8c1e4");
+  } catch (e) {
+  }
+}
+;
+import { a8 as CountryCodes } from "./StoreProvider-B_tFiIdr.js";
+const addressFields = [
+  "address",
+  "otherAddressInformation",
+  "postalCode",
+  "city",
+  "stateOrProvince",
+  "country"
+];
+const [ADDRESS, OTHER_ADDRESS_INFORMATION, POSTAL_CODE, CITY, STATE, COUNTRY] = addressFields;
+const COUNTRIES_WITH_STATES_DATASET = [
+  CountryCodes.Australia,
+  CountryCodes.Brazil,
+  CountryCodes.Canada,
+  CountryCodes.NewZealand,
+  CountryCodes.UnitedStates,
+  CountryCodes.Japan
+];
+const COUNTRIES_WITH_HOUSE_NUMBER_FIRST = [
+  CountryCodes.Australia,
+  CountryCodes.Canada,
+  CountryCodes.NewZealand,
+  CountryCodes.PuertoRico,
+  CountryCodes.UnitedStates,
+  CountryCodes.UnitedKingdom,
+  CountryCodes.France
+];
+const ADDRESS_SCHEMAS = {
+  [CountryCodes.Australia]: [COUNTRY, ADDRESS, OTHER_ADDRESS_INFORMATION, CITY, STATE, POSTAL_CODE],
+  [CountryCodes.Canada]: [COUNTRY, ADDRESS, OTHER_ADDRESS_INFORMATION, CITY, POSTAL_CODE, STATE],
+  [CountryCodes.UnitedKingdom]: [COUNTRY, ADDRESS, OTHER_ADDRESS_INFORMATION, CITY, POSTAL_CODE],
+  [CountryCodes.UnitedStates]: [
+    COUNTRY,
+    ADDRESS,
+    OTHER_ADDRESS_INFORMATION,
+    CITY,
+    STATE,
+    POSTAL_CODE
+  ],
+  [CountryCodes.PuertoRico]: [
+    // should exactly match CountryCodes.UnitedStates
+    COUNTRY,
+    ADDRESS,
+    OTHER_ADDRESS_INFORMATION,
+    CITY,
+    POSTAL_CODE
+  ],
+  [CountryCodes.HongKong]: [COUNTRY, ADDRESS, OTHER_ADDRESS_INFORMATION, CITY, STATE],
+  [CountryCodes.NewZealand]: [
+    COUNTRY,
+    ADDRESS,
+    OTHER_ADDRESS_INFORMATION,
+    POSTAL_CODE,
+    CITY,
+    STATE
+  ],
+  [CountryCodes.UnitedArabEmirates]: [COUNTRY, ADDRESS, OTHER_ADDRESS_INFORMATION, CITY],
+  default: [COUNTRY, ADDRESS, OTHER_ADDRESS_INFORMATION, POSTAL_CODE, CITY, STATE]
+};
+const CONDENSED_ADDRESS_FIELDS = {
+  [CountryCodes.UnitedStates]: [CITY, STATE, POSTAL_CODE]
+};
+const LABELS = {
+  city: {
+    default: CITY,
+    [CountryCodes.UnitedKingdom]: "cityTown"
+  },
+  country: {
+    default: COUNTRY
+  },
+  otherAddressInformation: {
+    default: OTHER_ADDRESS_INFORMATION,
+    [CountryCodes.Canada]: "apartmentSuiteOther",
+    [CountryCodes.PuertoRico]: "apartmentSuiteOther",
+    // should exactly match CountryCodes.UnitedStates
+    [CountryCodes.UnitedStates]: "apartmentSuiteOther"
+  },
+  postalCode: {
+    default: POSTAL_CODE,
+    [CountryCodes.PuertoRico]: "zipCode",
+    // should exactly match CountryCodes.UnitedStates
+    [CountryCodes.UnitedStates]: "zipCode"
+  },
+  stateOrProvince: {
+    default: STATE,
+    [CountryCodes.Australia]: "state",
+    [CountryCodes.Brazil]: "state",
+    [CountryCodes.Canada]: "provinceOrTerritory",
+    [CountryCodes.NewZealand]: "region",
+    [CountryCodes.UnitedStates]: "state"
+  },
+  stateOrProvince__placeHolder: {
+    default: "stateOrProvince__placeHolder",
+    [CountryCodes.Australia]: "selectState",
+    [CountryCodes.Brazil]: "selectState",
+    [CountryCodes.Canada]: "selectProvinceOrTerritory",
+    [CountryCodes.UnitedStates]: "stateOrProvince__placeHolder__US"
+  },
+  address: {
+    default: ADDRESS
+  }
+};
+const getKeyForField = (fieldName, country) => country ? LABELS[fieldName][country] || LABELS[fieldName].default : LABELS[fieldName].default;
+const getAddressSchemaForCountry = (country) => country && ADDRESS_SCHEMAS[country] ? ADDRESS_SCHEMAS[country] : ADDRESS_SCHEMAS.default;
+const getAddressSchemaLabelsByCountry = (country) => {
+  const schema = getAddressSchemaForCountry(country);
+  return schema.reduce(
+    (labels, field) => ({
+      ...labels,
+      [field]: getKeyForField(field, country)
+    }),
+    {}
+  );
+};
+const mapAddressLabels = (data, datasetUtils) => {
+  if (data?.country) {
+    return getAddressSchemaForCountry(data.country).reduce((mappedAddress, field) => {
+      const mappedKey = getKeyForField(field, data.country);
+      const value = data?.[field];
+      if (!value) {
+        return mappedAddress;
+      }
+      switch (field) {
+        case "country":
+          return {
+            ...mappedAddress,
+            [mappedKey]: datasetUtils.getCountryName(value)
+          };
+        case "stateOrProvince":
+          return {
+            ...mappedAddress,
+            [mappedKey]: datasetUtils.getStateName(value, data.country)
+          };
+        default:
+          return { ...mappedAddress, [mappedKey]: value };
+      }
+    }, {});
+  }
+  return data;
+};
+export {
+  COUNTRIES_WITH_STATES_DATASET as C,
+  getAddressSchemaLabelsByCountry as a,
+  addressFields as b,
+  getKeyForField as c,
+  COUNTRIES_WITH_HOUSE_NUMBER_FIRST as d,
+  CONDENSED_ADDRESS_FIELDS as e,
+  getAddressSchemaForCountry as g,
+  mapAddressLabels as m
+};

package/dist/{validate-CNlNB2Sq.js → validate-BCgpU6PK.js}

@@ -2,12 +2,12 @@
 {
   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] = "ffc6c38a-a256-4c63-aaf2-0ec916fa4ca7", e._sentryDebugIdIdentifier = "sentry-dbid-ffc6c38a-a256-4c63-aaf2-0ec916fa4ca7");
+    n && (e._sentryDebugIds = e._sentryDebugIds || {}, e._sentryDebugIds[n] = "0559cd90-5a27-4b12-a1f4-e872f8f00bc9", e._sentryDebugIdIdentifier = "sentry-dbid-0559cd90-5a27-4b12-a1f4-e872f8f00bc9");
   } catch (e) {
   }
 }
 ;
-import { dJ as hasText } from "./StoreProvider-pdSV8sgb.js";
+import { an as hasText } from "./StoreProvider-B_tFiIdr.js";
 const validateLegalEntityIdentifier = (legalEntityIdentifier) => {
   if (!legalEntityIdentifier) {
     return true;

package/dist/validate-CD3D7QeQ.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-B_tFiIdr.js";
+import { jsx, jsxs } from "preact/jsx-runtime";
+import { F as Field, c as Select } from "./useForm-Dah8AZ3S.js";
+import { m as mergeFieldMetadataIntoProps, c as createFormUtils, F as FormHeader } from "./CountryField-B2dh1VXh.js";
+import { m as makeMask, a as nonInputs, n as numericInputs, s as spacer, M as MaskedInput, I as InputEmail } from "./MaskedInput-CTOcOcUH.js";
+import { r as resolveFieldMetadata } from "./fieldConfigurations-Yf8yD64w.js";
+import { u as useDataset, d as datasetIdentifier } from "./useDataset-UxGyu2Za.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
+};