@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.
226 lines (225 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] = "60140783-fff4-4525-9e43-fad8e6d49e68", e._sentryDebugIdIdentifier = "sentry-dbid-60140783-fff4-4525-9e43-fad8e6d49e68");
} catch (e) {}
import { r as useTranslation } from "./translation-BYvhW5zA.js";
import { k as Header, nt as isEmpty } from "./resolveEnvironment-DNmu53Rr.js";
import { n as IconButton } from "./Button-i8I2dHP8.js";
import { i as useAnalyticsContext } from "./Modal-BLP2aF-u.js";
import { n as translateTranslatable } from "./utils-C1buyvRw.js";
import { n as Image } from "./unincorporated-partnership-nnTW3FnG.js";
import { t as List } from "./List-ywoRPg-q.js";
import { t as StructuredList } from "./StructuredList-CUyo9-3i.js";
import { t as ErrorPanel } from "./ErrorPanel-DGlzO81g.js";
import { t as trackNavigation } from "./trackNavigation-DR70qR8T.js";
import { t as createFormUtils } from "./formUtils-DVc3a6gf.js";
import { t as getRoleName } from "./roleMetadata-v10ns9iG.js";
import { t as isSummaryItem } from "./summaryItem-uDWmtYtt.js";
import { lazy } from "preact/compat";
import { jsx, jsxs } from "preact/jsx-runtime";
var Summary_module_default = {
summary: "_summary_1op7a_1",
"summary-content": "_summary-content_1op7a_7",
summaryContent: "_summary-content_1op7a_7",
"summary-list": "_summary-list_1op7a_13",
summaryList: "_summary-list_1op7a_13",
"summary-list-header": "_summary-list-header_1op7a_27",
summaryListHeader: "_summary-list-header_1op7a_27",
"summary-list-header-title": "_summary-list-header-title_1op7a_32",
summaryListHeaderTitle: "_summary-list-header-title_1op7a_32",
"summary-list-item": "_summary-list-item_1op7a_41",
summaryListItem: "_summary-list-item_1op7a_41",
"summary-list-item-key": "_summary-list-item-key_1op7a_55",
summaryListItemKey: "_summary-list-item-key_1op7a_55",
"summary-list-item-value": "_summary-list-item-value_1op7a_67",
summaryListItemValue: "_summary-list-item-value_1op7a_67",
"summary-content-legal-caption": "_summary-content-legal-caption_1op7a_73",
summaryContentLegalCaption: "_summary-content-legal-caption_1op7a_73",
"summary-content-list": "_summary-content-list_1op7a_88",
summaryContentList: "_summary-content-list_1op7a_88",
"summary-content-logo": "_summary-content-logo_1op7a_92",
summaryContentLogo: "_summary-content-logo_1op7a_92"
};
//#endregion
//#region src/components/Shared/Summary/Summary.tsx
var onfidoLogo = lazy(() => import("./onfido-logo-CMRuSr8M.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 };