@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.
452 lines (451 loc) • 17.1 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] = "d94d8cd0-b739-420f-8d26-f26c394d355b", e._sentryDebugIdIdentifier = "sentry-dbid-d94d8cd0-b739-420f-8d26-f26c394d355b");
} catch (e) {}
import { a as Icon, o as createLogger, r as useTranslation } from "./translation-BFxyJ1c5.js";
import { t as Button } from "./Button-oj6H8OrC.js";
import { t as useSettingsContext } from "./useSettingsContext-DzwVt0W0.js";
import { f as valuesOf, u as entriesOf } from "./useAnalyticsContext-BVFDMrVE.js";
import { t as useToggleContext } from "./useToggleContext-DaQUBF8O.js";
import { t as listToRecord } from "./listToRecord-4wGOf00H.js";
import { t as TaskVerificationStatus } from "./TaskVerificationStatus-kCWYhocq.js";
import { t as Accordion } from "./Accordion-Btxq6sGi.js";
import { a as splitTaskIdentifier, i as useGlobalStore } from "./globalStore-BjMds47R.js";
import { t as SettingNames } from "./types-CNZsK2dZ.js";
import { t as Modal } from "./Modal-CioQJ7Q7.js";
import { n as FeatureNames, t as ExperimentNames } from "./types-8S6KTD2W.js";
import { t as formDebugInfo } from "./debugStore-bZ_bkJeS.js";
import { t as Checkbox } from "./Checkbox-BCYjFPa4.js";
import { t as InputText } from "./InputText-C30dZxS4.js";
import { t as Tag } from "./Tag-BhU73i1R.js";
import { useMemo, useState } from "preact/hooks";
import { Fragment, jsx, jsxs } from "preact/jsx-runtime";
import MonogonCode from "monogon/preact";
var Tabs_module_default = { tabs: "adyen-kyc-tabs" };
//#endregion
//#region src/components/ui/molecules/Tabs/Tabs.tsx
var Tabs = ({ tabs, activeTab, onChange }) => /* @__PURE__ */ jsx("div", {
className: Tabs_module_default.tabs,
children: tabs.map(({ name, label, disabled }) => {
return /* @__PURE__ */ jsx(Button, {
onClick: () => {
onChange(name);
},
variant: activeTab === name ? "secondary" : "tertiary",
disabled,
children: label
}, name);
})
});
var DebugFormData_module_default = {
searchInput: "adyen-kyc-searchInput",
toolbar: "adyen-kyc-toolbar",
fieldHeader: "adyen-kyc-fieldHeader",
status: "adyen-kyc-status",
statusRequired: "adyen-kyc-statusRequired",
statusOptional: "adyen-kyc-statusOptional",
statusHidden: "adyen-kyc-statusHidden",
statusInfo: "adyen-kyc-statusInfo",
reasonsList: "adyen-kyc-reasonsList",
reasonItem: "adyen-kyc-reasonItem"
};
//#endregion
//#region src/components/Shared/devex/DebugListener/DebugFormData.tsx
var statusClassNames = {
REQUIRED: DebugFormData_module_default.statusRequired,
OPTIONAL: DebugFormData_module_default.statusOptional,
INFO: DebugFormData_module_default.statusInfo,
HIDDEN: DebugFormData_module_default.statusHidden
};
var DebugFormData = () => {
const debugInfo = formDebugInfo.value;
const [searchTerm, setSearchTerm] = useState("");
const [showHidden, setShowHidden] = useState(false);
const filteredFieldNames = Object.keys(debugInfo).filter((fieldName) => fieldName.toLowerCase().includes(searchTerm.toLowerCase())).filter((fieldName) => showHidden || debugInfo[fieldName].status !== "HIDDEN").sort((a, b) => {
if (a === "__FORMS__") return -1;
if (b === "__FORMS__") return 1;
return a.localeCompare(b);
});
if (Object.keys(debugInfo).length === 0) return /* @__PURE__ */ jsx("p", { children: "No form debug data available. Navigate to a form to see its debug info." });
return /* @__PURE__ */ jsxs("div", { children: [/* @__PURE__ */ jsxs("div", {
className: DebugFormData_module_default.toolbar,
children: [/* @__PURE__ */ jsx("input", {
type: "text",
placeholder: "Search field...",
value: searchTerm,
onInput: (e) => setSearchTerm(e.currentTarget.value),
className: DebugFormData_module_default.searchInput
}), /* @__PURE__ */ jsx(Checkbox, {
id: "show-hidden-fields",
name: "show-hidden-fields",
label: "Show hidden fields",
checked: showHidden,
onChange: () => setShowHidden(!showHidden)
})]
}), filteredFieldNames.map((fieldName) => {
const info = debugInfo[fieldName];
return /* @__PURE__ */ jsxs(Accordion, {
onToggle: () => {},
children: [/* @__PURE__ */ jsx("template", {
slot: "title",
children: /* @__PURE__ */ jsxs("div", {
className: DebugFormData_module_default.fieldHeader,
children: [
/* @__PURE__ */ jsx("span", {
className: DebugFormData_module_default.status,
children: fieldName
}),
" ",
/* @__PURE__ */ jsxs("span", {
className: statusClassNames[info.status],
children: [
"(",
info.status,
")"
]
})
]
})
}), /* @__PURE__ */ jsx("template", {
slot: "content",
children: /* @__PURE__ */ jsx("ul", {
className: DebugFormData_module_default.reasonsList,
children: info.reasons.map((reason, i) => /* @__PURE__ */ jsx("li", {
className: DebugFormData_module_default.reasonItem,
children: reason
}, i))
})
})]
}, fieldName);
})] });
};
//#endregion
//#region src/components/Shared/devex/DebugTable/DebugTable.tsx
var filterData = (data, searchTerm) => data.filter(({ key }) => key.toLowerCase().includes(searchTerm.toLowerCase()));
var sortData = (data) => [...data].sort(({ key: keyA }, { key: keyB }) => keyA.localeCompare(keyB));
var DebugTable = ({ data, heading, searchTerm, tagPosition = "after", sort = false }) => {
const filteredData = useMemo(() => {
const filtered = searchTerm ? filterData(data, searchTerm) : data;
return sort ? sortData(filtered) : filtered;
}, [data, searchTerm]);
return /* @__PURE__ */ jsxs("div", { children: [heading ? /* @__PURE__ */ jsx("h3", { children: heading }) : void 0, filteredData.length === 0 ? /* @__PURE__ */ jsx("p", { children: searchTerm ? /* @__PURE__ */ jsxs(Fragment, { children: ["No results found for ", /* @__PURE__ */ jsx("strong", { children: searchTerm })] }) : /* @__PURE__ */ jsxs(Fragment, { children: [
"No ",
heading?.toLowerCase(),
" defined"
] }) }) : /* @__PURE__ */ jsx("table", { children: /* @__PURE__ */ jsx("tbody", { children: filteredData.map(({ key, value, label, variant }) => /* @__PURE__ */ jsxs("tr", { children: [
tagPosition === "before" ? /* @__PURE__ */ jsx("td", { children: /* @__PURE__ */ jsx(Tag, {
variant: variant ?? "grey",
children: value
}) }) : void 0,
/* @__PURE__ */ jsxs("td", { children: [/* @__PURE__ */ jsx("span", {
className: "adyen-kyc-debug-modal__table-key",
children: key
}), label && /* @__PURE__ */ jsx("span", { children: label })] }),
tagPosition === "after" ? /* @__PURE__ */ jsx("td", { children: /* @__PURE__ */ jsx(Tag, {
variant: variant ?? "grey",
children: value
}) }) : void 0
] }, key)) }) })] });
};
//#endregion
//#region src/components/Shared/devex/DebugListener/DebugLegalEntityData.tsx
var DebugLegalEntityData = ({ legalEntityData }) => {
if (!legalEntityData) return /* @__PURE__ */ jsx(Fragment, {});
const { rootLegalEntity, rootLegalEntityType } = legalEntityData;
const uboDetails = rootLegalEntity.entityAssociations?.map(({ name, type, jobTitle }) => name ? {
key: name,
value: `${type}`,
label: jobTitle,
variant: "blue"
} : null).filter(Boolean) ?? [];
return /* @__PURE__ */ jsxs(Fragment, { children: [
/* @__PURE__ */ jsxs("span", { children: ["Root legal entity type: ", /* @__PURE__ */ jsx(Tag, { children: rootLegalEntityType })] }),
uboDetails.length ? /* @__PURE__ */ jsx(DebugTable, {
data: uboDetails,
heading: "Decision Makers"
}) : void 0,
rootLegalEntity ? /* @__PURE__ */ jsx(MonogonCode, {
lang: "json",
content: JSON.stringify(rootLegalEntity, null, 2)
}) : void 0
] });
};
//#endregion
//#region src/components/Shared/devex/DebugListener/DebugMetadata.tsx
var DebugMetadata = ({ metadata: { sdkVersion, locale, rootLegalEntityId } }) => {
return /* @__PURE__ */ jsx("div", {
className: "adyen-kyc-debug-modal__meta",
children: /* @__PURE__ */ jsx(DebugTable, { data: [
{
key: "SDK version",
value: sdkVersion,
variant: "green"
},
{
key: "Locale",
value: locale,
variant: "blue"
},
{
key: "Root legal entity ID",
value: rootLegalEntityId,
variant: "teal"
}
] })
});
};
var DebugModal_module_default = {
"debug-modal": "adyen-kyc-debug-modal",
debugModal: "adyen-kyc-debug-modal",
"debug-header": "adyen-kyc-debug-header",
debugHeader: "adyen-kyc-debug-header",
"header-tabs": "adyen-kyc-header-tabs",
headerTabs: "adyen-kyc-header-tabs",
footer: "adyen-kyc-footer",
"footer-copy-status": "adyen-kyc-footer-copy-status",
footerCopyStatus: "adyen-kyc-footer-copy-status",
"table-key": "adyen-kyc-table-key",
tableKey: "adyen-kyc-table-key",
content: "adyen-kyc-content",
meta: "adyen-kyc-meta"
};
var DebugTaskStatuses_module_default = {
header: "adyen-kyc-header",
"task-name": "adyen-kyc-task-name",
taskName: "adyen-kyc-task-name",
table: "adyen-kyc-table"
};
//#endregion
//#region src/components/Shared/devex/DebugListener/DebugTaskStatuses.tsx
var DebugTaskStatuses = ({ taskStatuses }) => {
const { t } = useTranslation("common");
return /* @__PURE__ */ jsxs("table", {
className: DebugTaskStatuses_module_default.table,
children: [/* @__PURE__ */ jsx("thead", { children: /* @__PURE__ */ jsxs("tr", {
className: DebugTaskStatuses_module_default.header,
children: [
/* @__PURE__ */ jsx("th", { children: t(($) => $["task"]) }),
/* @__PURE__ */ jsx("th", { children: t(($) => $["status"]) }),
/* @__PURE__ */ jsx("th", { children: t(($) => $["reason"]) })
]
}) }), /* @__PURE__ */ jsx("tbody", { children: entriesOf(taskStatuses).sort(([t1], [t2]) => t1.localeCompare(t2)).map(([task, status]) => {
const { taskType, id } = splitTaskIdentifier(task);
return /* @__PURE__ */ jsxs("tr", { children: [/* @__PURE__ */ jsxs("td", {
className: DebugTaskStatuses_module_default.taskName,
children: [taskType, id ? `: ${id}` : ""]
}), status ? /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx("td", { children: /* @__PURE__ */ jsx(TaskVerificationStatus, { status: status.status }) }), /* @__PURE__ */ jsxs("td", { children: [t(($) => $[status.reason]), /* @__PURE__ */ jsx(ExplainDetails, { status })] })] }) : /* @__PURE__ */ jsx(Fragment, {})] }, task);
}) })]
});
};
var ExplainDetails = ({ status }) => {
const { reason, details } = status;
switch (reason) {
case "invalidInputError": {
const verificationError = details.verificationError;
const subErrors = verificationError.subErrors;
return /* @__PURE__ */ jsxs("div", { children: [
verificationError.code,
": ",
verificationError.message,
subErrors ? /* @__PURE__ */ jsx("ul", { children: (verificationError.subErrors ?? []).map((subError) => /* @__PURE__ */ jsxs("li", { children: [
subError.code,
": ",
subError.message
] }, subError.code)) }) : /* @__PURE__ */ jsx(Fragment, {})
] });
}
case "dataMissingError": {
const verificationError = details.verificationError;
const subErrors = verificationError.subErrors;
return /* @__PURE__ */ jsxs("div", { children: [
verificationError.code,
": ",
verificationError.message,
subErrors ? /* @__PURE__ */ jsx("ul", { children: (verificationError.subErrors ?? []).map((subError) => /* @__PURE__ */ jsxs("li", { children: [
subError.code,
": ",
subError.message
] }, subError.code)) }) : /* @__PURE__ */ jsx(Fragment, {})
] });
}
case "pendingCapabilities": {
const pendingCapabilities = details.pendingCapabilities;
return /* @__PURE__ */ jsx("ul", { children: pendingCapabilities.map((capabilityName) => /* @__PURE__ */ jsx("li", { children: capabilityName }, capabilityName)) });
}
}
};
//#endregion
//#region src/components/Shared/devex/DebugListener/DebugTogglesAndSettings.tsx
var getSettingVariant = (value) => {
switch (value) {
case void 0: return "orange";
case true: return "green";
case false: return "red";
default: return "blue";
}
};
var DebugTogglesAndSettings = ({ features, settings, experiments }) => {
const [searchTerm, setSearchTerm] = useState("");
const featureRows = entriesOf(features).map(([featureName, enabled]) => ({
key: `${featureName}`,
value: enabled ? "Enabled" : "Disabled",
variant: enabled ? "green" : "red"
}));
const settingRows = entriesOf(settings).map(([settingName, value]) => ({
key: settingName,
value: `${value}`,
variant: getSettingVariant(value)
}));
const experimentRows = entriesOf(experiments).map(([experimentName, enabled]) => ({
key: `${experimentName}`,
value: enabled ? "Enabled" : "Disabled",
variant: enabled ? "green" : "red"
}));
return /* @__PURE__ */ jsxs(Fragment, { children: [
/* @__PURE__ */ jsx(InputText, {
name: "search",
value: searchTerm,
onInput: (e) => setSearchTerm(e.currentTarget.value),
placeholder: "Search for Features/Settings 🔎",
trimOnBlur: true,
spellCheck: false,
"aria-label": "Search features or settings",
"aria-invalid": false
}),
/* @__PURE__ */ jsx(DebugTable, {
tagPosition: "before",
data: featureRows,
heading: "Features",
searchTerm,
sort: true
}),
/* @__PURE__ */ jsx(DebugTable, {
tagPosition: "before",
data: experimentRows,
heading: "Experiments",
searchTerm,
sort: true
}),
/* @__PURE__ */ jsx(DebugTable, {
data: settingRows,
heading: "Settings",
searchTerm,
sort: true
})
] });
};
//#endregion
//#region src/components/Shared/devex/DebugListener/DebugModal.tsx
var logger = createLogger();
var DebugModal = ({ onExit }) => {
const { isFeatureEnabled, isExperimentEnabled } = useToggleContext();
const { getSetting } = useSettingsContext();
const [debugInfoCopied, setDebugInfoCopied] = useState(false);
const { i18n } = useTranslation();
const [tab, setTab] = useState("metadata");
const rootLegalEntity = useGlobalStore().rootLegalEntity.value;
const formDebugAvailable = Object.keys(formDebugInfo.value).length > 0;
const metadata = {
sdkVersion: "4.9.2",
locale: i18n.language,
rootLegalEntityId: rootLegalEntity.id
};
const features = listToRecord(valuesOf(FeatureNames), isFeatureEnabled);
const experiments = listToRecord(valuesOf(ExperimentNames), isExperimentEnabled);
const settings = listToRecord(valuesOf(SettingNames), getSetting);
const taskStatuses = useGlobalStore().taskStatuses.value;
const legalEntityData = {
rootLegalEntity,
rootLegalEntityType: rootLegalEntity.type
};
const copyToClipboard = async () => {
const toCopy = {
metadata,
features,
experiments,
settings,
taskStatuses,
legalEntityData
};
await window.navigator.clipboard.writeText(JSON.stringify(toCopy, null, 2));
setDebugInfoCopied(true);
setTimeout(() => {
setDebugInfoCopied(false);
}, 5e3);
};
const TABS = [
{
name: "metadata",
label: "Metadata"
},
{
name: "toggleSettings",
label: "Toggles & Settings"
},
{
name: "taskStatuses",
label: "Task Statuses"
},
{
name: "legalEntityData",
label: "Legal Entity Data"
}
];
if (formDebugAvailable) TABS.push({
name: "formConfig",
label: "Form Config"
});
return /* @__PURE__ */ jsx(Modal, {
size: "fullscreen",
onClose: onExit,
ariaLabel: "Debug",
children: /* @__PURE__ */ jsxs("div", {
className: DebugModal_module_default.debugModal,
children: [
/* @__PURE__ */ jsxs("div", {
className: DebugModal_module_default.debugHeader,
children: [
/* @__PURE__ */ jsx("h1", { children: "Debug" }),
" ",
/* @__PURE__ */ jsx(Tabs, {
activeTab: tab,
onChange: (tab) => setTab(tab),
tabs: TABS
})
]
}),
/* @__PURE__ */ jsxs("div", {
className: DebugModal_module_default.content,
children: [
tab === "metadata" ? /* @__PURE__ */ jsx(DebugMetadata, { metadata }) : void 0,
tab === "taskStatuses" ? /* @__PURE__ */ jsx(DebugTaskStatuses, { taskStatuses }) : void 0,
tab === "toggleSettings" ? /* @__PURE__ */ jsx(DebugTogglesAndSettings, {
features,
settings,
experiments
}) : void 0,
tab === "legalEntityData" ? /* @__PURE__ */ jsx(DebugLegalEntityData, { legalEntityData }) : void 0,
tab === "formConfig" ? /* @__PURE__ */ jsx(DebugFormData, {}) : void 0
]
}),
/* @__PURE__ */ jsx("div", {
className: DebugModal_module_default.footer,
children: /* @__PURE__ */ jsxs("div", { children: [/* @__PURE__ */ jsx(Button, {
icon: "document",
onClick: () => {
copyToClipboard().catch((error) => {
logger.error("Error copying to clipboard:", error);
});
},
children: "Copy debug info"
}), debugInfoCopied ? /* @__PURE__ */ jsxs("span", {
className: DebugModal_module_default.footerCopyStatus,
children: [/* @__PURE__ */ jsx(Icon, { name: "check" }), " Copied!"]
}) : void 0] })
})
]
})
});
};
//#endregion
export { DebugModal };