@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.
187 lines (186 loc) • 9 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] = "87f32249-6d47-48eb-8295-35cf8459f09c", e._sentryDebugIdIdentifier = "sentry-dbid-87f32249-6d47-48eb-8295-35cf8459f09c");
} catch (e) {}
import { r as useTranslation } from "./translation-BFxyJ1c5.js";
import { t as Button } from "./Button-oj6H8OrC.js";
import { d as keysOf } from "./useAnalyticsContext-BVFDMrVE.js";
import { t as Alert } from "./Alert-C6gL3JIt.js";
import { r as remediationHasFileUploadField } from "./processCapabilities-DlZY9-Jc.js";
import { useCallback, useContext } from "preact/hooks";
import { Fragment, jsx, jsxs } from "preact/jsx-runtime";
import { createContext } from "preact";
var ErrorPanel_module_default = {
"error-panel": "adyen-kyc-error-panel",
errorPanel: "adyen-kyc-error-panel"
};
//#endregion
//#region src/context/FormRouterContext/FormRouterContext.ts
var FormRouterContext = createContext(null);
//#endregion
//#region src/context/FormRouterContext/useFormRouterContext.ts
function useFormRouterContext() {
return useContext(FormRouterContext);
}
//#endregion
//#region src/components/ui/molecules/ErrorPanel/NavigateToFieldLink.tsx
var NavigateToFieldLink = ({ fieldName, label }) => {
const { goToFormByFieldName, getFieldAction } = useFormRouterContext();
const handleClick = () => {
const fieldAction = getFieldAction(fieldName);
if (fieldAction) fieldAction();
else goToFormByFieldName(fieldName);
};
return /* @__PURE__ */ jsx(Button, {
onClick: handleClick,
variant: "link",
children: label
});
};
//#endregion
//#region src/components/ui/molecules/ErrorPanel/ServerValidationErrors.tsx
function ServerValidationErrors({ validationErrors, formUtils }) {
const { t } = useTranslation("ui");
const validationErrorFieldNames = Object.keys(validationErrors || {});
const getValidationErrorMessage = useCallback(() => t(($) => $["fieldHasUnsupportedFormats"], { fieldName: formUtils.getLabel(validationErrorFieldNames[0]) }), [
t,
formUtils,
validationErrorFieldNames
]);
return /* @__PURE__ */ jsx(Alert, {
title: t(($) => $["informationCouldNotBeSubmitted"]),
variant: "error",
children: validationErrorFieldNames?.length === 1 ? /* @__PURE__ */ jsxs("div", {
"data-testid": "validation-error--case-1",
children: [
getValidationErrorMessage(),
" ",
/* @__PURE__ */ jsx(NavigateToFieldLink, {
fieldName: validationErrorFieldNames[0],
label: t(($) => $["updateTheInformation"])
}),
" ",
t(($) => $["andResubmit"])
]
}) : /* @__PURE__ */ jsxs("div", {
"data-testid": "validation-error--case-2",
children: [t(($) => $["someFieldsHaveUnsupportedFormatedUpdateInfoAndResubmit"]), /* @__PURE__ */ jsx("ul", { children: validationErrorFieldNames.map((fieldName) => /* @__PURE__ */ jsx("li", {
className: "adyen-kyc-error-panel__validation-error",
"data-testid": "adyen-kyc-error-panel__validation-error",
children: /* @__PURE__ */ jsx(NavigateToFieldLink, {
fieldName,
label: formUtils.getLabel(fieldName)
})
}, fieldName)) })]
})
});
}
//#endregion
//#region src/components/ui/molecules/ErrorPanel/VerificationErrors.tsx
function VerificationErrors({ verificationErrors, formUtils }) {
const { t } = useTranslation("common");
const getErrorMessage = (errorCode) => t(($) => $[`errorMessage_${errorCode}`]);
const getRemediationMessage = (remediationActions, uploadFieldCollection) => {
const uploadFields = uploadFieldCollection ? Object.keys(uploadFieldCollection) : [];
if (remediationActions?.length === 1 && uploadFields.length === 1) {
const firstUploadField = uploadFields[0];
return /* @__PURE__ */ jsx(NavigateToFieldLink, {
fieldName: firstUploadField,
label: t(($) => $[`remediationMessage_${uploadFieldCollection[firstUploadField]?.remediation.code}`])
});
}
if (remediationActions?.length === 1) return t(($) => $[`remediationMessage_${remediationActions[0].code}`]);
let uploadFilesCopy;
if (uploadFields.length > 0) if (uploadFields.length > 1) {
const uploadFieldListItems = uploadFields.map((uploadField) => /* @__PURE__ */ jsx(NavigateToFieldLink, {
fieldName: uploadField,
label: t(($) => $[`remediationMessage_${uploadFieldCollection[uploadField]?.remediation.code}`])
}, uploadField));
uploadFilesCopy = /* @__PURE__ */ jsxs(Fragment, { children: [formUtils.getLabel("uploadTheFollowingDocuments"), /* @__PURE__ */ jsx("ul", { children: uploadFieldListItems.map((item, i) => /* @__PURE__ */ jsx("li", { children: item }, i)) })] });
} else {
const firstUploadField = uploadFields[0];
uploadFilesCopy = /* @__PURE__ */ jsx(NavigateToFieldLink, {
fieldName: firstUploadField,
label: ` ${t(($) => $[`remediationMessage_${uploadFieldCollection[firstUploadField]?.remediation.code}`])?.toLowerCase()}`
});
}
return /* @__PURE__ */ jsxs(Fragment, { children: [
t(($) => $["reviewTheInformationBelowAndCorrectMistakesOr"]),
" ",
uploadFilesCopy,
" ",
t(($) => $["thenResubmit"])
] });
};
let verificationErrorMsg;
let parentCode = void 0;
const parentCodes = keysOf(verificationErrors);
if (parentCodes.length === 1) parentCode = parentCodes[0];
const childErrors = Object.values(verificationErrors).reduce((acc, parentChildErrors) => ({
...acc,
...parentChildErrors
}), {});
const childErrorCodes = Object.keys(childErrors);
const fileUploadRemediationFields = Object.values(childErrors).flat().reduce((acc, rem) => {
const isRemUploadOne = remediationHasFileUploadField(rem);
const firstRemediationField = rem.fields?.[0];
if (isRemUploadOne && firstRemediationField) acc[firstRemediationField] = {
formName: rem?.forms[0],
remediation: rem
};
return acc;
}, {});
const onlyChildRemediationActions = Object.values(childErrors).flat();
if (childErrorCodes.length === 1) verificationErrorMsg = /* @__PURE__ */ jsxs("div", {
"data-testid": `verification-error--case-${onlyChildRemediationActions.length === 1 ? "1" : "2-1"}`,
children: [/* @__PURE__ */ jsx("span", { children: `${getErrorMessage(childErrorCodes[0])} ` }), /* @__PURE__ */ jsx("span", { children: getRemediationMessage(onlyChildRemediationActions, fileUploadRemediationFields) })]
});
else if (childErrorCodes.length === 2) verificationErrorMsg = /* @__PURE__ */ jsxs("div", {
"data-testid": "verification-error--case-2-2",
children: [
t(($) => $["weFoundTheFollowingIssues"]),
/* @__PURE__ */ jsx("ul", { children: childErrorCodes.map((subErrorCode) => /* @__PURE__ */ jsx("li", { children: /* @__PURE__ */ jsx("span", { children: getErrorMessage(subErrorCode) }) }, subErrorCode)) }),
/* @__PURE__ */ jsx("span", { children: getRemediationMessage(onlyChildRemediationActions, fileUploadRemediationFields) })
]
});
else verificationErrorMsg = /* @__PURE__ */ jsx("div", {
"data-testid": "verification-error--case-2-3",
children: getRemediationMessage(onlyChildRemediationActions, fileUploadRemediationFields)
});
return /* @__PURE__ */ jsx(Alert, {
title: parentCode ? getErrorMessage(parentCode) : t(($) => $["correctErrorsResubmit"]),
variant: "error",
children: verificationErrorMsg
});
}
//#endregion
//#region src/components/ui/molecules/ErrorPanel/ErrorPanel.tsx
/**
* Display the API server error messages which come in to flavours:
* 1. An Error response when trying to PATCH/POST/etc... data to the server and a validation error occurs.
* 2. A (KYC) verification error occurs after having gone through some checks which is returned in the capability problems array.
* @param id - the id of the error panel
* @param verificationErrors - a parent error to sub error mapped object for verification errors incl attached possible Remediation Actions.
* @param validationErrors - a form to field key mapped object noting which fields have server validation errors.
* @param formUtils - form utilities use to translate errors and field names.
* @param heading - customisation for the alert header.
*/
function ErrorPanel({ id = "ariaErrorField", verificationErrors, validationErrors, formUtils }) {
const isVerificationError = verificationErrors && Object.keys(verificationErrors).length > 0;
const isValidationError = validationErrors && Object.keys(validationErrors).length > 0;
if (!isVerificationError && !isValidationError) return null;
return /* @__PURE__ */ jsxs("div", {
className: ErrorPanel_module_default.errorPanel,
id,
"aria-live": "polite",
children: [isVerificationError && !isValidationError && /* @__PURE__ */ jsx(VerificationErrors, {
formUtils,
verificationErrors
}), isValidationError && /* @__PURE__ */ jsx(ServerValidationErrors, {
formUtils,
validationErrors
})]
});
}
//#endregion
export { useFormRouterContext as n, FormRouterContext as r, ErrorPanel as t };