@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.
117 lines (116 loc) • 4.81 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] = "eec05fd9-635f-49c6-9bf5-7df069376215", e._sentryDebugIdIdentifier = "sentry-dbid-eec05fd9-635f-49c6-9bf5-7df069376215");
} catch (e) {}
import { a as Icon, i as Typography, r as useTranslation } from "./translation-BFxyJ1c5.js";
import { t as useAnalyticsContext } from "./useAnalyticsContext-BVFDMrVE.js";
import { t as KEYBOARD_KEYS } from "./keys-fzUbt2xF.js";
import { t as trackNavigation } from "./trackNavigation-LvCP5Vyc.js";
import cx from "classnames";
import { Fragment, jsx, jsxs } from "preact/jsx-runtime";
//#region src/components/Shared/FormNavigation/FormNavigationItem.tsx
/** @deprecated do not use in new code */
var FormNavigationItem = ({ form, isActive, onClick, hasVerificationErrors }) => {
const { t } = useTranslation("common");
const hasError = form.hasServerValidationErrors || hasVerificationErrors;
const handleKeyDown = (e) => {
if (onClick && (e.key === KEYBOARD_KEYS.enter || e.key === KEYBOARD_KEYS.space)) {
e.preventDefault();
onClick();
}
};
return /* @__PURE__ */ jsx("li", {
"aria-label": t(($) => $[form.formName]),
"aria-current": isActive,
className: cx("adyen-kyc-form-navigation__item", {
"adyen-kyc-form-navigation__item--active": isActive,
"adyen-kyc-form-navigation__item--valid": form.isValid,
"adyen-kyc-form-navigation__item--isnav": Boolean(onClick)
}),
children: /* @__PURE__ */ jsxs("button", {
type: "button",
onClick,
onKeyDown: onClick ? handleKeyDown : void 0,
tabIndex: onClick ? 0 : void 0,
children: [
t(($) => $[form.formName]),
form.hasServerValidationErrors && /* @__PURE__ */ jsxs("span", {
className: "adyen-kyc-form-navigation__item-icon adyen-kyc-form-navigation__item-icon--error",
children: [/* @__PURE__ */ jsx(Icon, { name: "warning" }), /* @__PURE__ */ jsx("span", {
className: "adyen-kyc-u-screen-reader-only",
children: t(($) => $["formStepInvalid"])
})]
}),
form.isValid && !hasError && /* @__PURE__ */ jsxs("span", {
className: "adyen-kyc-form-navigation__item-icon adyen-kyc-form-navigation__item-icon--success",
children: [/* @__PURE__ */ jsx(Icon, { name: "checkmark-small" }), /* @__PURE__ */ jsx("span", {
className: "adyen-kyc-u-screen-reader-only",
children: t(($) => $["formStepCompleted"])
})]
})
]
})
}, form.formId);
};
//#endregion
//#region src/components/Shared/FormNavigation/FormNavigation.tsx
/** @deprecated do not use in new code */
function FormNavigation({ forms, activeForm, gotoForm, validateForm, className, taskName, verificationErrors }) {
const { t } = useTranslation("common");
const userEvents = useAnalyticsContext();
const taskNameTranslated = t(($) => $[taskName]);
const getFormIndex = (form) => forms.findIndex((f) => f.formId === form.formId);
const goToForm = (form) => () => {
if (form.formId === activeForm.formId) return;
gotoForm(getFormIndex(form));
trackNavigation({
userEvents,
actionType: "navigate",
toForm: form.formName,
label: form.formName,
returnValue: "success"
});
};
const getNavigateHandler = (form, activeForm) => {
if (forms.slice(0, getFormIndex(form)).every((subForm) => subForm.isValid) || !validateForm) return goToForm(form);
return activeForm.isValid ? void 0 : () => {
trackNavigation({
userEvents,
actionType: "navigate",
toForm: form.formName,
label: form.formName,
returnValue: "validation error"
});
validateForm();
};
};
return /* @__PURE__ */ jsxs("div", {
className: cx("adyen-kyc-form-navigation", className),
children: [/* @__PURE__ */ jsx(Typography, {
el: "h3",
variant: "body",
color: "secondary",
className: "adyen-kyc-form-navigation__header",
children: taskNameTranslated
}), forms && /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx(Typography, {
color: "tertiary",
variant: "caption-stronger",
className: "adyen-kyc-form-navigation__step-count",
children: t(($) => $["stepsX/YofForm"], {
activeFormIndex: getFormIndex(activeForm) + 1,
totalForms: forms.length,
taskNameTranslated
})
}), /* @__PURE__ */ jsx("ul", {
className: "adyen-kyc-form-navigation__items",
children: forms.map((form) => /* @__PURE__ */ jsx(FormNavigationItem, {
form,
isActive: form.formId === activeForm.formId,
onClick: getNavigateHandler(form, activeForm),
hasVerificationErrors: Boolean(verificationErrors?.[form.formId] ?? false)
}, form.formId))
})] })]
});
}
//#endregion
export { FormNavigation as t };