@adyen/kyc-components
Version:
This guide assumes that you have already an account with Adyen. A legalEntity needs to be created, and you need to have a `legalEntityId` to instatiate a Component.
222 lines (221 loc) • 7.78 kB
JavaScript
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] = "aebbdf54-41d6-4063-b6f7-88930e2791c9", e._sentryDebugIdIdentifier = "sentry-dbid-aebbdf54-41d6-4063-b6f7-88930e2791c9");
} catch (e) {}
import { a as Icon, i as Typography, r as useTranslation } from "./translation-BFxyJ1c5.js";
import { t as Button } from "./Button-oj6H8OrC.js";
import { t as useAnalyticsContext } from "./useAnalyticsContext-BVFDMrVE.js";
import { a as StateContextSetter, i as bytesToSize, n as fileValidationRules, r as DropzoneFile, t as defaultFileValidationOptions } from "./validate-DDKy88ac.js";
import { t as useForm } from "./useForm-pUkvCLc9.js";
import { useEffect, useMemo, useRef, useState } from "preact/hooks";
import cx from "classnames";
import { Fragment, jsx, jsxs } from "preact/jsx-runtime";
//#region src/components/ui/molecules/Dropzone/Dropzone.tsx
function Dropzone(props) {
const { name, label = "", multiple = false, disabled = false, required = true, defaultData, id, isOptional = false, maxNumberOfFiles = defaultFileValidationOptions.maxNumberOfFiles, maxSize = defaultFileValidationOptions.maxSize, allowedFileTypes = defaultFileValidationOptions.allowedFileTypes, showMinimal, hidePageCount, onChange: propsOnChange, handleFieldChange, errors: errorProp, fieldValidationErrors, valid: validProp, enableTracking = false, extraDropzoneDescription } = props;
const { t } = useTranslation("ui");
const userEvents = useAnalyticsContext();
const fileInput = useRef(null);
const [dragged, setDragged] = useState(false);
const stateRef = useRef({ setState: null });
const rules = useMemo(() => fileValidationRules({
maxSize,
allowedFileTypes,
maxNumberOfFiles,
isOptional
}), [
allowedFileTypes,
isOptional,
maxNumberOfFiles,
maxSize
]);
const form = useForm({
...props,
schema: [name],
defaultData: defaultData || [],
rules: { [name]: rules }
});
let { data, valid, errors, fieldProblems, handleChangeFor } = form;
const { setValid, setData, isValid, triggerValidation } = form;
if (handleFieldChange) {
handleChangeFor = handleFieldChange;
data = defaultData;
errors = errorProp;
valid = validProp;
fieldProblems = fieldValidationErrors;
}
const isRequired = errors?.[name]?.errorMessage === "fieldIsRequired";
const allowedFiletypes = allowedFileTypes.join(", ");
const hasMaxNumberOfFiles = data?.[name]?.length >= maxNumberOfFiles;
useEffect(() => {
stateRef?.current?.setState?.({
type: "addToState",
value: {
data,
valid,
errors,
fieldProblems,
dataStoreId: id
}
});
}, [
data,
valid,
errors,
isValid
]);
const selectFile = () => fileInput.current?.click();
const handleFileDelete = (fileToDelete) => {
handleChangeFor(name, "input")(data?.[name]?.filter((file) => file !== fileToDelete));
};
const handleDragEnter = (e) => {
e.preventDefault();
e.stopPropagation();
};
const handleDragLeave = (e) => {
if (disabled) return;
e.preventDefault();
e.stopPropagation();
setDragged(false);
};
const handleDragOver = (e) => {
if (disabled) return;
e.preventDefault();
e.stopPropagation();
setDragged(true);
};
const handleDrop = (e) => {
if (disabled) return;
e.preventDefault();
e.stopPropagation();
if (e.dataTransfer) updateFiles(e.dataTransfer);
setDragged(false);
};
const handleFileChange = (e) => {
updateFiles(e.currentTarget);
};
const updateFiles = ({ files }) => {
if (enableTracking) userEvents.addFieldEvent("Interacted with form field", {
actionType: "change",
field: name || "file picker"
});
const currentFiles = data?.[name] || [];
handleChangeFor(name, "input")([...currentFiles, ...files ?? []]);
};
useEffect(() => {
const currentFiles = data?.[name] || [];
if (isValid) propsOnChange?.([...currentFiles]);
}, [isValid, data]);
useEffect(() => {
if (defaultData?.[name]?.[0]) {
setData(name, defaultData?.[name]);
triggerValidation();
} else setData(name, null);
}, [defaultData]);
useEffect(() => {
const currentFiles = data?.[name];
const hasFiles = currentFiles && currentFiles.length > 0;
if (isOptional && !hasFiles) setValid(name, true);
}, [isOptional, data]);
const renderInnerContent = () => showMinimal ? /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx("div", {
className: "adyen-kyc-dropzone__button",
children: /* @__PURE__ */ jsx(Button, {
onClick: selectFile,
disabled,
fullWidth: true,
children: t(($) => $["browseFiles"])
})
}), /* @__PURE__ */ jsxs("div", {
className: "adyen-kyc-dropzone__extras",
children: [/* @__PURE__ */ jsx(Typography, {
color: "secondary",
children: t(($) => $["supportedFileTypes"], { fileTypes: allowedFiletypes })
}), /* @__PURE__ */ jsx(Typography, {
color: "secondary",
children: t(($) => $[hidePageCount ? "maxFileSizeOnly" : "maxFileSize"], { maxSize: bytesToSize(maxSize) })
})]
})] }) : /* @__PURE__ */ jsxs(Fragment, { children: [
/* @__PURE__ */ jsx("div", {
className: "adyen-kyc-dropzone__icon",
children: /* @__PURE__ */ jsx(Icon, { name: "upload" })
}),
/* @__PURE__ */ jsxs("div", {
className: "adyen-kyc-dropzone__labels",
children: [
/* @__PURE__ */ jsx(Typography, {
el: "h4",
variant: "body-strongest",
children: t(($) => $[multiple ? "dropFilesToUpload" : "dropFileToUpload"])
}),
extraDropzoneDescription && /* @__PURE__ */ jsx(Typography, {
color: "secondary",
children: extraDropzoneDescription
}),
/* @__PURE__ */ jsx(Typography, {
color: "secondary",
children: t(($) => $["supportedFileTypes"], { fileTypes: allowedFiletypes })
}),
/* @__PURE__ */ jsx(Typography, {
color: "secondary",
children: t(($) => $[hidePageCount ? "maxFileSizeOnly" : "maxFileSize"], { maxSize: bytesToSize(maxSize) })
}),
/* @__PURE__ */ jsx(Typography, {
color: "secondary",
children: t(($) => $["upToFiles"], { maxFiles: maxNumberOfFiles })
})
]
}),
/* @__PURE__ */ jsx("div", {
className: "adyen-kyc-dropzone__button",
children: /* @__PURE__ */ jsx(Button, {
onClick: selectFile,
variant: "secondary",
children: t(($) => $["browseFiles"])
})
})
] });
return /* @__PURE__ */ jsxs("div", { children: [
/* @__PURE__ */ jsx(StateContextSetter, { stateRef }),
label && /* @__PURE__ */ jsx("div", {
className: cx("adyen-kyc-label__text", { "adyen-kyc-label__text--error": isRequired }),
children: label
}),
data?.[name]?.map((file) => /* @__PURE__ */ jsx(DropzoneFile, {
file,
onDelete: () => {
handleFileDelete(file);
},
errorMessage: errors?.[name]?.errorMessage
}, file)),
!hasMaxNumberOfFiles && /* @__PURE__ */ jsxs("div", {
role: "region",
className: cx("adyen-kyc-dropzone", {
"adyen-kyc-dropzone--dragged": dragged,
"adyen-kyc-dropzone--error": !dragged && isRequired
}),
onDrop: handleDrop,
onDragOver: handleDragOver,
onDragEnter: handleDragEnter,
onDragLeave: handleDragLeave,
children: [renderInnerContent(), /* @__PURE__ */ jsx("input", {
className: "adyen-kyc-dropzone__input",
ref: fileInput,
disabled,
multiple,
accept: allowedFiletypes,
onChange: handleFileChange,
type: "file",
"aria-required": required,
"aria-label": label,
"aria-invalid": !valid,
"data-testid": "dropzone-input"
})]
}),
isRequired && /* @__PURE__ */ jsx("div", {
className: "adyen-kyc-error-text",
children: t(($) => $["fieldIsRequired"])
})
] });
}
//#endregion
export { Dropzone as t };