@adyen/kyc-components 4.23.0 → 4.24.0-beta.0

package/dist/IndustryCodeFieldGroup-C3Zro2ds.js

@@ -0,0 +1,189 @@
+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] = "8a36f91d-de4b-491d-9b05-7d27a9171a88", e._sentryDebugIdIdentifier = "sentry-dbid-8a36f91d-de4b-491d-9b05-7d27a9171a88");
+} catch (e) {}
+import { r as useTranslation } from "./translation-DbATp_35.js";
+import { t as Loader } from "./Loader-BVtlpTeo.js";
+import { n as IconButton } from "./Button-DPJ1k02w.js";
+import { t as useToggleContext } from "./useToggleContext-B_YexrbT.js";
+import { t as useBusinessLines } from "./useBusinessLines-BZfFqvS_.js";
+import { t as List } from "./List-ywoRPg-q.js";
+import { t as Field } from "./Field-DwDJQVSS.js";
+import { t as Select } from "./Select-phAxjMBQ.js";
+import { n as withForm } from "./formHook-Dgi2CgbT.js";
+import { t as useIndustryCodes } from "./useIndustryCodes-BMK6IMiW.js";
+import { useMemo, useRef, useState } from "preact/hooks";
+import { Fragment, jsx, jsxs } from "preact/jsx-runtime";
+import { useStore } from "@tanstack/preact-form";
+//#region src/adaptiveWorkflow/components/Fields/IndustryCode/IndustryCodeFieldGroup.tsx
+function mapSelectedCodes(selectedCodes) {
+	return selectedCodes && selectedCodes.length > 0 ? selectedCodes.map((i) => ({
+		value: i,
+		touched: !!i.id
+	})) : [{
+		value: {
+			id: "",
+			name: ""
+		},
+		touched: false
+	}];
+}
+function getNestedValue(obj, path) {
+	return path.split(".").reduce((acc, key) => acc?.[key], obj);
+}
+var IndustryCodeFieldGroup = withForm({
+	defaultValues: {},
+	props: {},
+	render: function IndustryCodeFieldGroupRender({ form, basePath: industryCodesPath, businessLineTypes = ["banking"], single = true }) {
+		const { t, i18n } = useTranslation(["common", "ui"]);
+		const { isFeatureEnabled } = useToggleContext();
+		const { data: industryCodes, isLoading: industryCodesLoading } = useIndustryCodes(businessLineTypes, i18n.language);
+		const { data: existingBusinessLines, isLoading: existingBusinessLinesLoading } = useBusinessLines(businessLineTypes);
+		const selectedCodes = useStore(form.store, (s) => getNestedValue(s.values, industryCodesPath));
+		const [items, setItems] = useState(() => mapSelectedCodes(selectedCodes));
+		const containerRef = useRef(null);
+		const singleIndustryCode = single || isFeatureEnabled("EnableLimitToSingleBusinessLine");
+		const allIndustryCodeSelectItems = useMemo(() => industryCodes?.map((entry) => ({
+			id: entry.code,
+			name: `${entry.code} - ${entry.description}`
+		})) ?? [], [industryCodes]);
+		const selectableIndustryCodes = useMemo(() => {
+			if (!businessLineTypes.includes("acquiring")) return allIndustryCodeSelectItems;
+			const selectedIds = selectedCodes?.map((c) => c.id);
+			const existingIds = (existingBusinessLines ?? []).map((b) => b.industryCode);
+			return allIndustryCodeSelectItems.filter(({ id }) => {
+				return !selectedIds?.includes(id) && !existingIds?.includes(id);
+			});
+		}, [
+			allIndustryCodeSelectItems,
+			businessLineTypes,
+			selectedCodes,
+			existingBusinessLines
+		]);
+		const updateFormValues = (newItems) => {
+			form.setFieldValue(industryCodesPath, newItems.map(({ value }) => value));
+		};
+		const handleSelectIndustryCode = (indexToUpdate, selectedItem) => {
+			setItems((prevItems) => {
+				const newItems = prevItems.map((item, i) => i === indexToUpdate ? {
+					value: {
+						id: selectedItem.id,
+						name: selectedItem.name
+					},
+					touched: true
+				} : item);
+				updateFormValues(newItems);
+				return newItems;
+			});
+		};
+		const addIndustryCodeField = (e) => {
+			if (items[items.length - 1].value.id === "") {
+				handleContainerBlur(e, items.length - 1);
+				return;
+			}
+			const newItems = [...items, {
+				value: {
+					id: "",
+					name: ""
+				},
+				touched: false
+			}];
+			setItems(newItems);
+			updateFormValues(newItems);
+		};
+		const removeField = (indexToRemove) => {
+			const newItems = items.filter((_, i) => i !== indexToRemove);
+			setItems(newItems);
+			updateFormValues(newItems);
+		};
+		const handleContainerBlur = (e, index) => {
+			if (containerRef.current && !containerRef.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
+				};
+				return newItems;
+			});
+		};
+		return /* @__PURE__ */ jsx(form.Field, {
+			name: industryCodesPath,
+			validators: { onBlur: ({ value }) => {
+				const codes = value;
+				return !codes?.length || codes.some((c) => !c.id) ? "fieldIsRequired" : void 0;
+			} },
+			children: (field) => {
+				if (industryCodesLoading || existingBusinessLinesLoading) return /* @__PURE__ */ jsx(Loader, { size: "large" });
+				const isTouched = field.state.meta.isTouched;
+				const isValid = field.state.meta.isValid;
+				const errorMessage = isTouched && !isValid ? field.state.meta.errors[0] : void 0;
+				return /* @__PURE__ */ jsx(Field, {
+					name: "industryCodes",
+					label: t(($) => $["industry"], { ns: "ui" }),
+					errorMessage,
+					isValid: isTouched && isValid,
+					showErrorIcon: false,
+					children: (childProps) => {
+						const content = /* @__PURE__ */ jsx("div", {
+							ref: containerRef,
+							"data-testid": "industryCode",
+							style: {
+								display: "flex",
+								flexDirection: "column",
+								gap: "8px"
+							},
+							children: items.map((code, index) => {
+								const isInvalid = code.touched && code.value.id === "";
+								return /* @__PURE__ */ jsxs("div", {
+									style: {
+										display: "flex",
+										alignItems: "center",
+										gap: "8px"
+									},
+									children: [/* @__PURE__ */ jsx(Select, {
+										...childProps,
+										id: `industryCodeSelection-${index}`,
+										name: `industryCodeSelection-${index}`,
+										selected: code.value,
+										placeholder: t(($) => $["industryCode__placeholder"], { ns: "ui" }),
+										items: allIndustryCodeSelectItems,
+										excludedValues: allIndustryCodeSelectItems.filter((i) => !selectableIndustryCodes.includes(i)),
+										readonly: !!industryCodes && selectableIndustryCodes.length === 0,
+										onSelect: (selectedItem) => handleSelectIndustryCode(index, selectedItem),
+										isInvalid,
+										onBlur: (e) => {
+											handleContainerBlur(e, index);
+											field.handleBlur();
+										}
+									}), !singleIndustryCode && /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx(IconButton, {
+										ariaLabel: t(($) => $["removeIndustryCode"], { ns: "ui" }),
+										variant: "tertiary",
+										icon: "minusCircleFilled",
+										circle: true,
+										onClick: () => removeField(index),
+										disabled: items.length === 1
+									}), /* @__PURE__ */ jsx(IconButton, {
+										ariaLabel: t(($) => $["addIndustryCode"], { ns: "ui" }),
+										variant: "tertiary",
+										icon: "plusCircleFilled",
+										circle: true,
+										onClick: addIndustryCodeField,
+										disabled: code.value.id === "" || code.value.id !== "" && index !== items.length - 1 || selectableIndustryCodes.length === 0
+									})] })]
+								}, `${code.value.id}-${index}`);
+							})
+						});
+						return singleIndustryCode ? content : /* @__PURE__ */ jsx(List, {
+							dividers: false,
+							variant: "grouped-primary",
+							children: content
+						});
+					}
+				});
+			}
+		});
+	}
+});
+//#endregion
+export { IndustryCodeFieldGroup };

package/dist/InputDate-Bq3Sb-ZW.js

@@ -0,0 +1,211 @@
+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] = "dc37be95-b238-4939-8193-8ccc5d4713eb", e._sentryDebugIdIdentifier = "sentry-dbid-dc37be95-b238-4939-8193-8ccc5d4713eb");
+} catch (e) {}
+import { r as httpPost, s as useApiContext } from "./http-fdIO--pH.js";
+import { c as SPECIAL_CHARS, f as getFormattingRegEx } from "./validatorUtils-D2O6AAZn.js";
+import { t as CountryCodes } from "./country-code-CJk2hdPu.js";
+import { r as InputBase } from "./InputText-CFDEmEtp.js";
+import { useCallback, useMemo } from "preact/hooks";
+import { jsx } from "preact/jsx-runtime";
+import { useQuery } from "@tanstack/preact-query";
+//#region src/api/address/useAddressCleanse.ts
+/**
+* Utilizing the Cleanse API from Loqate provider, determine if retrieved address is a PO Box
+* @param data Object containing country and text fields
+* @returns Promise with RetrieveAddressSuccessResponse as a response
+*/
+var cleanseAddress = async (legalEntityId, baseUrl, data) => {
+	return httpPost({
+		baseUrl,
+		path: `legalEntities/${legalEntityId}/addresses/cleanse`
+	}, data);
+};
+var useAddressCleanse = (data, options) => {
+	const { rootLegalEntityId, baseUrl } = useApiContext();
+	return useQuery({
+		queryKey: ["addressCleanse", data],
+		queryFn: () => cleanseAddress(rootLegalEntityId.value, baseUrl.value, data),
+		...options
+	});
+};
+var useAddressCleanseImperatively = () => {
+	const { rootLegalEntityId, baseUrl } = useApiContext();
+	return useCallback((data) => cleanseAddress(rootLegalEntityId.value, baseUrl.value, data), [baseUrl.value, rootLegalEntityId.value]);
+};
+var formatAddressForCleanse = ({ street, street2, city, country, postalCode }) => {
+	if (!street || !country) return void 0;
+	return [
+		street,
+		street2,
+		city,
+		country,
+		postalCode
+	].filter(Boolean).join(" ");
+};
+//#endregion
+//#region src/components/Shared/forms/Address/validate.formats.ts
+var createFormatByDigits = (digits) => {
+	return {
+		formatter: (val) => val ? val.replace(getFormattingRegEx("^\\d", "g"), "").substring(0, digits) : void 0,
+		format: new Array(digits).fill("9").join(""),
+		maxlength: digits
+	};
+};
+getFormattingRegEx(SPECIAL_CHARS.replace(/[-(\\/)]/g, ""));
+var countrySpecificFormatters = {
+	[CountryCodes.Australia]: { postalCode: createFormatByDigits(4) },
+	[CountryCodes.Austria]: { postalCode: createFormatByDigits(4) },
+	[CountryCodes.Belgium]: { postalCode: createFormatByDigits(4) },
+	[CountryCodes.Brazil]: { postalCode: createFormatByDigits(8) },
+	[CountryCodes.Bulgaria]: { postalCode: createFormatByDigits(4) },
+	[CountryCodes.Canada]: { postalCode: {
+		format: "A9A 9A9 or A9A9A9",
+		maxlength: 7
+	} },
+	[CountryCodes.Croatia]: { postalCode: {
+		format: "[1-5]9999",
+		maxlength: 5
+	} },
+	[CountryCodes.Cyprus]: { postalCode: createFormatByDigits(4) },
+	[CountryCodes.CzechRepublic]: { postalCode: {
+		format: "999 99",
+		maxlength: 6
+	} },
+	[CountryCodes.Denmark]: { postalCode: {
+		format: "9999",
+		maxlength: 7
+	} },
+	[CountryCodes.Estonia]: { postalCode: createFormatByDigits(5) },
+	[CountryCodes.Finland]: { postalCode: createFormatByDigits(5) },
+	[CountryCodes.France]: { postalCode: createFormatByDigits(5) },
+	[CountryCodes.Germany]: { postalCode: createFormatByDigits(5) },
+	[CountryCodes.Gibraltar]: { postalCode: {
+		format: "GX11 1AA",
+		maxlength: 8
+	} },
+	[CountryCodes.Greece]: { postalCode: {
+		format: "999 99",
+		maxlength: 6
+	} },
+	[CountryCodes.Hungary]: { postalCode: createFormatByDigits(4) },
+	[CountryCodes.Iceland]: { postalCode: createFormatByDigits(3) },
+	[CountryCodes.Ireland]: { postalCode: {
+		format: "A99 A999",
+		maxlength: 8
+	} },
+	[CountryCodes.Italy]: { postalCode: createFormatByDigits(5) },
+	[CountryCodes.Japan]: { postalCode: createFormatByDigits(7) },
+	[CountryCodes.Latvia]: { postalCode: {
+		format: "9999 or LV-9999",
+		maxlength: 7
+	} },
+	[CountryCodes.Liechtenstein]: { postalCode: createFormatByDigits(4) },
+	[CountryCodes.Lithuania]: { postalCode: {
+		format: "9999 or 99999 or LT-99999",
+		maxlength: 8
+	} },
+	[CountryCodes.Luxembourg]: { postalCode: createFormatByDigits(4) },
+	[CountryCodes.Malaysia]: { postalCode: createFormatByDigits(5) },
+	[CountryCodes.Malta]: { postalCode: {
+		format: "2 or 3 letters + 2 or 4 digits (with optional space)",
+		maxlength: 8
+	} },
+	[CountryCodes.Monaco]: { postalCode: {
+		format: "980NN",
+		maxlength: 5
+	} },
+	[CountryCodes.Netherlands]: { postalCode: {
+		format: "9999AA",
+		maxlength: 7
+	} },
+	[CountryCodes.NewZealand]: { postalCode: createFormatByDigits(4) },
+	[CountryCodes.Norway]: { postalCode: createFormatByDigits(4) },
+	[CountryCodes.Poland]: { postalCode: {
+		formatter: (val) => {
+			if (!val) return void 0;
+			const nuVal = val.replace(getFormattingRegEx("^\\d-", "g"), "");
+			const maxlength = nuVal.includes("-") ? 6 : 5;
+			return nuVal.substring(0, maxlength);
+		},
+		format: "99-999",
+		maxlength: 6
+	} },
+	[CountryCodes.Portugal]: { postalCode: {
+		formatter: (val) => {
+			if (!val) return void 0;
+			return val.replace(getFormattingRegEx("^\\d-", "g"), "").substring(0, 8);
+		},
+		format: "9999-999",
+		maxlength: 8
+	} },
+	[CountryCodes.PuertoRico]: { postalCode: createFormatByDigits(5) },
+	[CountryCodes.Romania]: { postalCode: createFormatByDigits(6) },
+	[CountryCodes.Singapore]: { postalCode: createFormatByDigits(6) },
+	[CountryCodes.Slovakia]: { postalCode: {
+		format: "99999 or SK-99999",
+		maxlength: 8
+	} },
+	[CountryCodes.Slovenia]: { postalCode: {
+		format: "9999 or SI-9999",
+		maxlength: 7
+	} },
+	[CountryCodes.Spain]: { postalCode: createFormatByDigits(5) },
+	[CountryCodes.Sweden]: { postalCode: createFormatByDigits(5) },
+	[CountryCodes.Switzerland]: { postalCode: createFormatByDigits(4) },
+	[CountryCodes.UnitedKingdom]: { postalCode: {
+		formatter: (val) => val ? val.replace(getFormattingRegEx(SPECIAL_CHARS), "").substring(0, 8) : void 0,
+		format: "AA99 9AA or A99 9AA or A9 9AA",
+		maxlength: 8
+	} },
+	[CountryCodes.UnitedStates]: { postalCode: {
+		format: "12345 or 12345-6789",
+		maxlength: 10
+	} }
+};
+//#endregion
+//#region src/components/ui/molecules/InputDate/InputDate.utils.ts
+/**
+* Returns either the date input is supported or not in the current browser
+*/
+var checkDateInputSupport = () => {
+	const input = document.createElement("input");
+	input.setAttribute("type", "date");
+	return input.type === "date";
+};
+/**
+* Returns a formatted date
+* @param value -
+* @example
+* formatDate('22111990');
+* // '22/11/1990'
+*/
+var formatDate = (value) => {
+	const date = value.replace(/\D|\s/g, "").replace(/^(00)(.*)?/, "01$2").replace(/^(3[2-9])(.*)?/, "0$1$2").replace(/^([4-9])(.*)?/, "0$1").replace(/^([0-9]{2})(00)(.*)?/, "$101").replace(/^(3[01])(02)(.*)?/, "29$2").replace(/^([0-9]{2})([2-9]|1[3-9])(.*)?/, "$10$2").replace(/^([0-9]{2})([0-9]{2})([0-9])/, "$1/$2/$3").replace(/^([0-9]{2})([0-9])/, "$1/$2");
+	const [day = "", month = "", year = ""] = date.split("/");
+	if (year.length === 4 && day === "29" && month === "02" && (Number(year) % 4 !== 0 || year.substring(2, 4) === "00" && Number(year) % 400 !== 0)) return date.replace(/^29/, "28");
+	return date;
+};
+var formatDateObj = (date) => date.toJSON().slice(0, 10);
+//#endregion
+//#region src/components/ui/molecules/InputDate/InputDate.tsx
+function InputDate(props) {
+	const isDateInputSupported = useMemo(checkDateInputSupport, []);
+	const { onInput } = props;
+	const handleInput = (e) => {
+		const { value } = e.currentTarget;
+		e.currentTarget.value = formatDate(value);
+		onInput(e);
+	};
+	if (isDateInputSupported) return /* @__PURE__ */ jsx(InputBase, {
+		...props,
+		type: "date"
+	});
+	return /* @__PURE__ */ jsx(InputBase, {
+		...props,
+		onInput: handleInput,
+		maxLength: 10
+	});
+}
+//#endregion
+export { useAddressCleanse as a, formatAddressForCleanse as i, formatDateObj as n, useAddressCleanseImperatively as o, countrySpecificFormatters as r, InputDate as t };

package/dist/InputText-CFDEmEtp.js

@@ -0,0 +1,119 @@
+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] = "a810f143-2ce3-4b5d-a349-ab73859d03ba", e._sentryDebugIdIdentifier = "sentry-dbid-a810f143-2ce3-4b5d-a349-ab73859d03ba");
+} catch (e) {}
+import { t as useAnalyticsContext } from "./useAnalyticsContext-gSnRnYgV.js";
+import { t as debouncedInputEvent } from "./debouncedInputEvent-Fwwp_K_-.js";
+import { forwardRef } from "preact/compat";
+import { useCallback as useCallback$1, useLayoutEffect, useRef as useRef$1, useState as useState$1 } from "preact/hooks";
+import cx from "classnames";
+import { jsx } from "preact/jsx-runtime";
+//#region src/components/ui/atoms/InputBase/InputBase.tsx
+var InputBase = forwardRef((props, ref) => {
+	const userEvents = useAnalyticsContext();
+	const { enableTracking = false, ...passedProps } = props;
+	const { isInvalid, isValid, type = "text", disabled, name } = props;
+	const handleInput = (e) => {
+		if (enableTracking) debouncedInputEvent(userEvents, {
+			actionType: "input",
+			field: name
+		});
+		props.onInput?.(e);
+	};
+	const handleBlur = (e) => {
+		if (enableTracking) userEvents.addFieldEvent("Interacted with form field", {
+			actionType: "blur",
+			field: name
+		});
+		props.onBlurHandler?.(e);
+		if (props.trimOnBlur) e.currentTarget.value = e.currentTarget.value.trim();
+		props.onBlur?.(e);
+	};
+	const handleFocus = (e) => {
+		if (enableTracking) userEvents.addFieldEvent("Interacted with form field", {
+			actionType: "focus",
+			field: name
+		});
+		props.onFocusHandler?.(e);
+	};
+	const inputClassNames = cx("adyen-kyc-input", [`adyen-kyc-input--${type}`], props.className, {
+		"adyen-kyc-input--invalid": isInvalid,
+		"adyen-kyc-field--valid": isValid,
+		"adyen-kyc-input--disabled": disabled
+	});
+	return /* @__PURE__ */ jsx("input", {
+		...passedProps,
+		name,
+		"aria-disabled": disabled,
+		"aria-invalid": !isValid,
+		"aria-required": passedProps.required || passedProps["aria-required"],
+		className: inputClassNames,
+		onBlur: handleBlur,
+		onFocus: handleFocus,
+		onInput: handleInput,
+		ref,
+		type
+	});
+});
+InputBase.displayName = "InputBase";
+//#endregion
+//#region src/utils/useForwardRef.ts
+var useForwardedRef = (forwardedRef) => {
+	const backupRef = useRef$1();
+	return forwardedRef ?? backupRef;
+};
+//#endregion
+//#region src/components/ui/molecules/InputText/InputText.tsx
+var InputText = forwardRef(({ onInput, onBlur, transformInput, transformMode, ...props }, ref) => {
+	const [cursorPosition, setCursorPosition] = useState$1(null);
+	const localRef = useForwardedRef(ref);
+	const inputHandler = useCallback$1((event) => {
+		const inputEl = event.currentTarget;
+		if (transformInput && (!transformMode || transformMode === "input")) {
+			setCursorPosition(inputEl.selectionStart);
+			const transformedInput = transformInput(inputEl.value);
+			onInput({
+				...event,
+				target: {
+					...event.target,
+					value: transformedInput
+				}
+			});
+		} else onInput(event);
+	}, [
+		transformInput,
+		transformMode,
+		onInput
+	]);
+	const blurHandler = useCallback$1((event) => {
+		const inputEl = event.currentTarget;
+		if (transformInput && transformMode === "blur") {
+			setCursorPosition(inputEl.selectionStart);
+			const transformedInput = transformInput(inputEl.value);
+			const eventWithTransformedValue = {
+				...event,
+				target: {
+					...event.target,
+					value: transformedInput
+				}
+			};
+			onBlur?.(eventWithTransformedValue);
+		} else onBlur?.(event);
+	}, [
+		transformInput,
+		transformMode,
+		onBlur
+	]);
+	useLayoutEffect(() => {
+		if (cursorPosition && localRef.current?.selectionStart !== cursorPosition) localRef?.current?.setSelectionRange(cursorPosition, cursorPosition, "none");
+	}, [cursorPosition, localRef]);
+	return /* @__PURE__ */ jsx(InputBase, {
+		...props,
+		onInput: inputHandler,
+		onBlur: blurHandler,
+		ref: localRef,
+		type: "text"
+	});
+});
+//#endregion
+export { useForwardedRef as n, InputBase as r, InputText as t };