@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.
227 lines (226 loc) • 11.2 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] = "739c0989-1be2-414c-b7ad-a52de2d3ab7f", e._sentryDebugIdIdentifier = "sentry-dbid-739c0989-1be2-414c-b7ad-a52de2d3ab7f");
} catch (e) {}
import { r as useTranslation } from "./translation-BFxyJ1c5.js";
import { n as IconButton } from "./Button-oj6H8OrC.js";
import { t as useAnalyticsContext } from "./useAnalyticsContext-BVFDMrVE.js";
import { a as translateTranslatable } from "./utils-B807QaDx.js";
import { y as isEmpty } from "./validatorUtils-DRapRJ6z.js";
import { t as Header } from "./Header-CPmJyuoP.js";
import { t as Image } from "./Image-BEzOZ1tt.js";
import { t as List } from "./List-DLrcpMVd.js";
import { t as StructuredList } from "./StructuredList-w0Z2zLTk.js";
import { t as ErrorPanel } from "./ErrorPanel-B536hgSc.js";
import { t as trackNavigation } from "./trackNavigation-LvCP5Vyc.js";
import { t as createFormUtils } from "./formUtils-DCvL3uZG.js";
import { t as getRoleName } from "./roleMetadata-CP3ZYYSI.js";
import { t as isSummaryItem } from "./summaryItem-Dehjwp8D.js";
import { lazy } from "preact/compat";
import { jsx, jsxs } from "preact/jsx-runtime";
var Summary_module_default = {
summary: "adyen-kyc-summary",
"summary-content": "adyen-kyc-summary-content",
summaryContent: "adyen-kyc-summary-content",
"summary-list": "adyen-kyc-summary-list",
summaryList: "adyen-kyc-summary-list",
"summary-list-header": "adyen-kyc-summary-list-header",
summaryListHeader: "adyen-kyc-summary-list-header",
"summary-list-header-title": "adyen-kyc-summary-list-header-title",
summaryListHeaderTitle: "adyen-kyc-summary-list-header-title",
"summary-list-item": "adyen-kyc-summary-list-item",
summaryListItem: "adyen-kyc-summary-list-item",
"summary-list-item-key": "adyen-kyc-summary-list-item-key",
summaryListItemKey: "adyen-kyc-summary-list-item-key",
"summary-list-item-value": "adyen-kyc-summary-list-item-value",
summaryListItemValue: "adyen-kyc-summary-list-item-value",
"summary-content-legal-caption": "adyen-kyc-summary-content-legal-caption",
summaryContentLegalCaption: "adyen-kyc-summary-content-legal-caption",
"summary-content-list": "adyen-kyc-summary-content-list",
summaryContentList: "adyen-kyc-summary-content-list",
"summary-content-logo": "adyen-kyc-summary-content-logo",
summaryContentLogo: "adyen-kyc-summary-content-logo"
};
//#endregion
//#region src/components/Shared/Summary/Summary.tsx
var onfidoLogo = lazy(() => import("./onfido-logo-Df1iPjUq.js"));
var summaryStep = {
formId: "summary",
formName: "summary"
};
/** @deprecated, use NewSummary */
function Summary({ data, forms, gotoForm, labels, problems, omitted = {}, showFormHeader = true, showSectionHeader = true, showLegalCaption = false, showTaxExemptedLegalCaption = false, useStructuredList = false }) {
const { t } = useTranslation("common");
const userEvents = useAnalyticsContext();
const editForm = (formId) => {
const formIndex = forms.findIndex((form) => form.formId === formId);
if (formIndex >= 0) gotoForm(formIndex);
};
const allValidationErrors = problems?.validationErrors && Object.values(problems.validationErrors)?.reduce((acc, validError) => ({
...acc,
...validError
}), {});
const allVerificationErrors = problems?.verificationErrors && Object.values(problems.verificationErrors)?.reduce((acc, verifError) => ({
...acc,
...verifError
}), {});
const formUtils = createFormUtils({ labels }, t);
const summarySectionHeader = (formName, formId) => /* @__PURE__ */ jsxs("header", {
className: Summary_module_default.summaryListHeader,
children: [/* @__PURE__ */ jsx("h2", {
className: Summary_module_default.summaryListHeaderTitle,
children: formName
}), !omitted.summaryEditButton?.includes(formId) && /* @__PURE__ */ jsx(IconButton, {
variant: "tertiary",
icon: "edit",
onClick: () => {
trackNavigation({
userEvents,
actionType: "edit",
toForm: formName,
label: "Pencil icon"
});
editForm(formId);
},
ariaLabel: t(($) => $["editForm"], { formName })
})]
});
const renderSummarySection = (fieldData, labelData = {}, formName, formId, useStructuredList) => {
const structuredListItems = Object.entries(fieldData).map(([key, value]) => {
return {
term: t(($) => $[labelData[key] || key]),
details: value
};
});
return !useStructuredList ? /* @__PURE__ */ jsxs(List, {
variant: "grouped-secondary",
children: [showSectionHeader && summarySectionHeader(formName, formId), /* @__PURE__ */ jsx("dl", {
className: Summary_module_default.summaryList,
children: Array.isArray(fieldData) ? fieldData.map((item) => renderBulletedListField(item)) : renderSummaryItems(fieldData, labelData)
})]
}) : /* @__PURE__ */ jsxs(List, {
variant: "grouped-secondary",
children: [showSectionHeader && summarySectionHeader(formName, formId), /* @__PURE__ */ jsx(StructuredList, { items: structuredListItems })]
});
};
const renderSummaryContent = (summaryData, useStructuredList) => {
const summaryList = [];
forms.forEach(({ formId, formName }) => {
const currentFormData = summaryData[formId];
if (!currentFormData || Object.values(currentFormData).every((value) => isEmpty(value)) || formId === summaryStep.formId || omitted.forms?.includes(formId)) return;
const summaryItems = currentFormData.hasInnerForms ? renderInnerForms(labels?.[formId], formId, currentFormData) : renderSummarySection(currentFormData, labels?.[formId], t(($) => $[typeof labels?.[formId] === "string" ? labels[formId] : formName]), formId, useStructuredList);
summaryList.push(summaryItems);
});
return summaryList;
};
const renderInnerForms = (labelData, parentFormId, innerForms = {}) => {
if (!innerForms) return [];
const dataList = [];
Object.entries(innerForms).forEach(([innerFormName, innerFormFieldData]) => {
const formName = t(($) => $[labelData?.[innerFormName] || innerFormName]);
if (typeof innerFormFieldData === "object" && innerFormFieldData !== null) {
if (Object.values(innerFormFieldData).every((value) => isEmpty(value))) return;
dataList.push(renderSummarySection(innerFormFieldData, labelData, formName, parentFormId));
}
});
return dataList;
};
/**
* Renders a single label-value pair as a field in the summary section.
*
* This helper function creates the markup for a single piece of data,
* displaying a label and its corresponding value using a definition list
* for semantic correctness (`<dt>` for label, `<dd>` for data).
*
* @param label The translated label to display for the field.
* @param value The value of the field, which can be a simple string or a JSX element for more complex rendering.
* @returns A JSX element representing the summary field.
*/
const renderField = (label, value) => /* @__PURE__ */ jsxs("div", {
className: Summary_module_default.summaryListItem,
children: [/* @__PURE__ */ jsx("dt", {
className: Summary_module_default.summaryListItemKey,
children: label
}), /* @__PURE__ */ jsx("dd", {
className: Summary_module_default.summaryListItemValue,
children: value
})]
});
const renderBulletedListField = (item) => /* @__PURE__ */ jsx("ul", {
className: Summary_module_default.summaryContentList,
children: /* @__PURE__ */ jsx("li", { children: item })
});
/**
* Recursively renders the data fields for a summary section.
*
* This function iterates through the properties of the `formData` object.
* It handles different data types by:
* - Displaying simple string or number values with their corresponding labels.
* - Handling 'role' arrays specifically to show a comma-separated list of roles.
* - Recognizing and rendering `SummaryItem` objects with their custom labels and values.
* - Recursively calling itself for nested objects to render their properties.
*
* Fields listed in the `omitted.keys` prop are skipped.
*
* @param formData The data object for the current section, containing key-value pairs to be rendered.
* @param labelData A map of field keys to their corresponding translation keys for fetching display labels.
* @returns An array of JSX elements representing the rendered summary fields for the section.
*/
const renderSummaryItems = (formData = {}, labelData = {}) => {
if (!formData) return [];
if (formData?.idVerificationMethod === "instantVerification") return [renderField(t(($) => $["verificationMethod"]), /* @__PURE__ */ jsx(Image, {
lazyLoadedImage: onfidoLogo,
className: Summary_module_default.summaryContentLogo,
alt: "onfido-logo"
}))];
const dataList = [];
Object.entries(formData).forEach(([field, fieldData]) => {
if (omitted.keys?.includes(field) || !fieldData) return;
const fieldName = t(($) => $[labelData[field] || field]);
if (field === "role" && Array.isArray(fieldData)) {
const label = fieldData.length > 1 ? t(($) => $["roles"]) : fieldName;
const roles = fieldData.map((role) => t(($) => $[getRoleName(role)])).join(", ");
dataList.push(renderField(label, roles));
} else if (isSummaryItem(fieldData)) {
const { summaryLabel, summaryValue, preTranslated } = fieldData;
if (preTranslated) dataList.push(renderField(summaryLabel, summaryValue));
else dataList.push(renderField(translateTranslatable(t, summaryLabel) ?? "", summaryValue));
} else if (typeof fieldData === "object") dataList.push(renderSummaryItems(fieldData, labelData));
else if (["string", "number"].includes(typeof fieldData)) dataList.push(renderField(fieldName, fieldData));
});
return dataList;
};
return /* @__PURE__ */ jsxs("div", {
role: "region",
className: Summary_module_default.summary,
children: [showFormHeader && /* @__PURE__ */ jsx(Header, {
title: t(($) => $["summary"]),
description: t(($) => $["summaryDescription"])
}), /* @__PURE__ */ jsxs("div", {
className: Summary_module_default.summaryContent,
children: [
/* @__PURE__ */ jsx(ErrorPanel, {
validationErrors: allValidationErrors,
verificationErrors: allVerificationErrors,
formUtils,
id: "ariaErrorField"
}),
renderSummaryContent(data, useStructuredList),
showLegalCaption && /* @__PURE__ */ jsx("div", {
className: Summary_module_default.summaryContentLegalCaption,
children: t(($) => $["summaryLegalCaption"])
}),
showTaxExemptedLegalCaption && /* @__PURE__ */ jsxs("div", {
className: Summary_module_default.summaryContentLegalCaption,
children: [/* @__PURE__ */ jsx("p", { children: t(($) => $["summaryTaxExemptionLegalCaptionTitle"]) }), /* @__PURE__ */ jsxs("ul", { children: [
/* @__PURE__ */ jsx("li", { children: t(($) => $["summaryTaxExemptionLegalCaption_1"]) }),
/* @__PURE__ */ jsx("li", { children: t(($) => $["summaryTaxExemptionLegalCaption_2"]) }),
/* @__PURE__ */ jsx("li", { children: t(($) => $["summaryTaxExemptionLegalCaption_3"]) })
] })]
})
]
})]
});
}
//#endregion
export { summaryStep as n, Summary_module_default as r, Summary as t };