@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.
418 lines (417 loc) • 20.7 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] = "5c6e3b65-3928-4931-9daf-1de9ced34880", e._sentryDebugIdIdentifier = "sentry-dbid-5c6e3b65-3928-4931-9daf-1de9ced34880");
} catch (e) {}
import { i as Typography, n as addResourceBundles, o as createLogger, r as useTranslation } from "./translation-BYvhW5zA.js";
import { A as _rolldown_dynamic_import_helper_default, C as useDataset, T as datasetUtilities, mt as stylesheets, n as EmbedShell, t as resolveEnvironment, w as datasetIdentifier, x as Alert } from "./resolveEnvironment-DNmu53Rr.js";
import { r as Loader, t as Button } from "./Button-i8I2dHP8.js";
import { n as httpGet, s as useApiContext } from "./http-8qgzqVqk.js";
import { c as entriesOf, n as cloneObject } from "./AnalyticsContext-BFrJmsp0.js";
import { i as TaskStatuses } from "./taskStatus-BtekPA8E.js";
import { n as getCapabilityProblems } from "./processCapabilities-fPuXc9gL.js";
import { t as Card } from "./Card-BCGLpdw7.js";
import { t as Modal } from "./Modal-BLP2aF-u.js";
import { n as useToastContext } from "./invalidateRootLegalEntity-DLpPeD5p.js";
import { n as useDeleteTransferInstrument, t as VerificationErrorAlert } from "./VerificationErrorAlert-B_RKlfIG.js";
import { t as Confirm } from "./Confirm-CA-gL38n.js";
import { t as StructuredList } from "./StructuredList-CUyo9-3i.js";
import { t as emitAdyenSdkEvent } from "./emitEvent-CcGIaOut.js";
import { t as Tag } from "./Tag-CNeDHqKp.js";
import { n as statusToTag, t as EmbeddedStatus } from "./EmbeddedStatus-_k9EhrGV.js";
import { n as useTransferInstrument, t as mapTransferInstrumentToPayoutAccount } from "./mapTransferInstrumentToPayoutAccount-CxdVWYkh.js";
import { t as currencyByCountry } from "./types-QSnyOf8p.js";
import { t as DetailViewLayout } from "./DetailViewLayout-DNCGEd7b.js";
import register from "preact-custom-element";
import { useRef, useState } from "preact/hooks";
import { Fragment, jsx, jsxs } from "preact/jsx-runtime";
import { useQuery } from "@tanstack/preact-query";
//#region src/api/transferInstruments/useTransferInstruments.ts
var getTransferInstruments = async (legalEntityId, baseUrl) => {
return httpGet({
baseUrl,
path: `legalEntities/${legalEntityId}/transferInstruments`
});
};
/**
* Gets a list of transfer instruments associated with a legal entity
* @param options additional options passed to Tanstack Query, eg; refetchInterval for polling
*/
var useTransferInstruments = (options) => {
const { rootLegalEntityId, baseUrl } = useApiContext();
return useQuery({
queryKey: ["transferInstruments"],
queryFn: () => getTransferInstruments(rootLegalEntityId.value, baseUrl.value),
...options
});
};
var ManageTransferInstrumentComponent_module_default = {
"manage-ti": "_manage-ti_grehm_1",
manageTi: "_manage-ti_grehm_1"
};
//#endregion
//#region src/components/EmbeddedDropins/ManageTransferInstrumentComponent/ManageTransferInstrumentOverviewItemModal/ManageTransferInstrumentOverviewItemModal.tsx
function ManageTransferInstrumentOverviewItemModal({ status, transferInstrument, onEdit, onClose, onRemove, onInitiateRemove }) {
const { t } = useTranslation("ui");
const { t: tCommon, i18n } = useTranslation("common");
const [confirmOpen, setConfirmOpen] = useState(false);
const datasetUtils = datasetUtilities(i18n.language);
const isReviewInProgress = status === "PROCESSING";
const showEditButton = !transferInstrument?.bankAccount.trustedSource;
const problems = transferInstrument ? getCapabilityProblems(transferInstrument, transferInstrument.bankAccount.countryCode) : {};
const formatDataForStructuredList = (data) => {
const summaryData = cloneObject(data);
if (!summaryData.payoutAccountDetails) return [];
if (summaryData.payoutVerificationMethod?.bankCountry) {
summaryData.payoutAccountDetails.bankCountry = datasetUtils.getCountryName(summaryData.payoutVerificationMethod.bankCountry);
summaryData.payoutAccountDetails.currency = currencyByCountry[summaryData.payoutVerificationMethod.bankCountry]?.[0];
}
delete summaryData.payoutAccountDetails.transferInstrumentId;
return entriesOf(summaryData.payoutAccountDetails).map(([key, value]) => ({
term: tCommon(($) => $[key]),
details: value
}));
};
const getStatusTag = () => {
const statusTagProps = statusToTag(TaskStatuses[status], t);
if (!statusTagProps) return;
return /* @__PURE__ */ jsx(Tag, {
variant: statusTagProps.variant,
children: statusTagProps.text
});
};
const getPayoutDetailSummary = (ti) => {
const mappedTI = formatDataForStructuredList(mapTransferInstrumentToPayoutAccount(ti));
const statusTag = getStatusTag();
mappedTI.push({
term: tCommon(($) => $["status"]),
details: statusTag
});
return mappedTI;
};
const getStructuredLists = () => {
if (!transferInstrument) return [];
const summaries = [];
summaries.push(getPayoutDetailSummary(transferInstrument));
if (transferInstrument.documentDetails) summaries.push([
{
term: tCommon(($) => $["verificationMethod"]),
details: tCommon(($) => $["documentUpload"])
},
{
term: tCommon(($) => $["documentType"]),
details: tCommon(($) => {
return $[transferInstrument.documentDetails[0]?.type];
})
},
{
term: tCommon(($) => $["documentName"]),
details: transferInstrument.documentDetails[0]?.fileName
}
]);
return summaries;
};
const handleRemove = async () => {
await onRemove(transferInstrument.id);
onClose();
};
const handleDeleteClick = async () => {
if (onInitiateRemove) {
if (onInitiateRemove()) await handleRemove();
} else setConfirmOpen(true);
};
const actions = /* @__PURE__ */ jsxs(Fragment, { children: [transferInstrument && showEditButton && /* @__PURE__ */ jsx(Button, {
onClick: () => onEdit(transferInstrument.id),
disabled: isReviewInProgress,
children: tCommon(($) => $["edit"])
}), /* @__PURE__ */ jsx(Button, {
variant: "secondary",
onClick: handleDeleteClick,
disabled: isReviewInProgress,
children: tCommon(($) => $["delete"])
})] });
return /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx(Modal, {
onClose,
ariaLabel: tCommon(($) => $["bankAccount"]),
inset: true,
children: !transferInstrument ? /* @__PURE__ */ jsx(Loader, {}) : /* @__PURE__ */ jsxs(DetailViewLayout, {
title: tCommon(($) => $["bankAccount"]),
actions,
compact: true,
children: [!!problems.BankAccount?.[transferInstrument.id]?.verificationErrors && /* @__PURE__ */ jsx(VerificationErrorAlert, {
problems: problems.BankAccount?.[transferInstrument.id],
children: /* @__PURE__ */ jsx(Button, {
variant: "link",
onClick: () => onEdit(transferInstrument.id),
children: tCommon(($) => $["editDetails"])
})
}), getStructuredLists().map((listItems) => /* @__PURE__ */ jsx(Card, {
variant: "secondary",
children: /* @__PURE__ */ jsx(StructuredList, { items: listItems })
}, listItems))]
})
}), confirmOpen && /* @__PURE__ */ jsx(Confirm, {
title: tCommon(($) => $["areYouSureYouWantToDeleteThisBankAccount"]),
onConfirm: handleRemove,
confirmText: tCommon(($) => $["delete"]),
onCancel: () => setConfirmOpen(false),
critical: true
})] });
}
//#endregion
//#region src/components/EmbeddedDropins/ManageTransferInstrumentComponent/ManageTransferInstrumentOverviewItem/ManageTransferInstrumentOverviewItem.tsx
function ManageTransferInstrumentOverviewItem({ transferInstrumentReference, onEdit, onRemove, onInitiateRemove }) {
const { t } = useTranslation("common");
const { status, transferInstrument: transferInstrumentRef } = transferInstrumentReference;
const [fetchedTi, setFetchedTi] = useState(false);
const [modalOpen, setModalOpen] = useState(false);
const { data: transferInstrument } = useTransferInstrument(transferInstrumentRef.id, { enabled: fetchedTi });
const isDetailsRequired = status === "DETAILS_REQUIRED";
const accountIdentifier = transferInstrumentRef.accountIdentifier?.replaceAll("*", "•");
const handleClick = () => {
if (!fetchedTi) setFetchedTi(true);
if (isDetailsRequired) {
onEdit(transferInstrumentRef.id);
return;
}
setModalOpen(true);
};
return /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx(EmbeddedStatus, {
status: TaskStatuses[status],
iconName: "bank",
title: accountIdentifier,
subtitle: t(($) => $["bankAccount"]),
onClick: handleClick,
actionIndicator: isDetailsRequired ? { text: t(($) => $["continue"]) } : void 0,
"aria-label": `${t(($) => $["bankAccount"])} ${accountIdentifier}`
}), modalOpen && /* @__PURE__ */ jsx(ManageTransferInstrumentOverviewItemModal, {
transferInstrument,
onEdit,
onRemove,
onInitiateRemove,
onClose: () => setModalOpen(false),
status
})] });
}
var ManageTransferInstrumentOverview_module_default = {
"manage-ti-overview": "_manage-ti-overview_hj8up_1",
manageTiOverview: "_manage-ti-overview_hj8up_1"
};
//#endregion
//#region src/components/EmbeddedDropins/ManageTransferInstrumentComponent/ManageTransferInstrumentOverview/ManageTransferInstrumentOverview.tsx
function ManageTransferInstrumentOverview({ transferInstrumentReferences, legalEntityId, onEdit, onAdd, onRemove, onInitiateRemove }) {
const { t } = useTranslation("common");
const transferInstrumentListEle = transferInstrumentReferences?.map((transferInstrumentRef) => {
if (!transferInstrumentRef?.transferInstrument?.id || !transferInstrumentRef.status) return;
return /* @__PURE__ */ jsx(ManageTransferInstrumentOverviewItem, {
transferInstrumentReference: transferInstrumentRef,
onEdit,
onRemove,
onInitiateRemove
}, transferInstrumentRef.transferInstrument?.id);
});
return /* @__PURE__ */ jsxs("section", {
className: ManageTransferInstrumentOverview_module_default.manageTiOverview,
children: [transferInstrumentListEle, /* @__PURE__ */ jsx(EmbeddedStatus, {
title: t(($) => $["addBankAccount"]),
iconName: "plus",
light: true,
onClick: () => onAdd(legalEntityId),
"aria-label": t(($) => $["addBankAccount"])
})]
});
}
//#endregion
//#region src/components/EmbeddedDropins/ManageTransferInstrumentComponent/ManageTransferInstrumentComponent.tsx
var REFETCH_INTERVAL = 3e3;
var logger = createLogger();
function ManageTransferInstrumentComponent({ legalEntityId, onAdd, onEdit, onInitiateRemove, onRemoveSuccess }) {
const { rootLegalEntityId: currentLegalEntityId } = useApiContext();
currentLegalEntityId.value = legalEntityId;
const { t, i18n: i18next } = useTranslation(["common", "banking"]);
const { showToast } = useToastContext();
const { mutateAsync: deleteTransferInstrument } = useDeleteTransferInstrument();
addResourceBundles(i18next, [
{
ns: "common",
importFn: (lang) => _rolldown_dynamic_import_helper_default(/* @__PURE__ */ Object.assign({
"../../../language/locales/bg-BG.json": () => import("./bg-BG-BcmC41vE.js"),
"../../../language/locales/cs-CZ.json": () => import("./cs-CZ-ghdW0Tc6.js"),
"../../../language/locales/da-DK.json": () => import("./da-DK-CBOVFYaa.js"),
"../../../language/locales/de-DE.json": () => import("./de-DE-CA81fzkA.js"),
"../../../language/locales/el-GR.json": () => import("./el-GR-BjOmQ_B_.js"),
"../../../language/locales/en-US.instructions.json": () => import("./en-US.instructions-FOYUYA3c.js"),
"../../../language/locales/en-US.json": () => import("./en-US-Dab7moVA.js"),
"../../../language/locales/es-ES.json": () => import("./es-ES-BEYl7Z8S.js"),
"../../../language/locales/es-LA.json": () => import("./es-LA-D741KUNg.js"),
"../../../language/locales/et-EE.json": () => import("./et-EE-CfgyGext.js"),
"../../../language/locales/fi-FI.json": () => import("./fi-FI-DFO20YZY.js"),
"../../../language/locales/fr-FR.json": () => import("./fr-FR-wvWrk_PU.js"),
"../../../language/locales/hr-HR.json": () => import("./hr-HR-D0zfmZK6.js"),
"../../../language/locales/hu-HU.json": () => import("./hu-HU-CL021irk.js"),
"../../../language/locales/it-IT.json": () => import("./it-IT-6VoxKX97.js"),
"../../../language/locales/ja-JP.json": () => import("./ja-JP-Cja4dur8.js"),
"../../../language/locales/lt-LT.json": () => import("./lt-LT-CNFgOeH4.js"),
"../../../language/locales/lv-LV.json": () => import("./lv-LV-BdSdhjTP.js"),
"../../../language/locales/nl-NL.json": () => import("./nl-NL-CclRrN3_.js"),
"../../../language/locales/no-NO.json": () => import("./no-NO-CO5xyGPh.js"),
"../../../language/locales/pl-PL.json": () => import("./pl-PL-DUH23AYC.js"),
"../../../language/locales/pt-BR.json": () => import("./pt-BR-MAQR_CUu2.js"),
"../../../language/locales/pt-PT.json": () => import("./pt-PT-CoKsjpyN.js"),
"../../../language/locales/ro-RO.json": () => import("./ro-RO-Cpv5pKod.js"),
"../../../language/locales/sk-SK.json": () => import("./sk-SK-p_p2X_aA.js"),
"../../../language/locales/sl-SI.json": () => import("./sl-SI-BpZp1MAq.js"),
"../../../language/locales/sv-SE.json": () => import("./sv-SE-BoXCPhGb.js")
}), `../../../language/locales/${lang}.json`, 6)
},
{
ns: "ui",
importFn: (lang) => _rolldown_dynamic_import_helper_default(/* @__PURE__ */ Object.assign({
"../../ui/language/bg-BG.json": () => import("./bg-BG-CzXoDIev.js"),
"../../ui/language/cs-CZ.json": () => import("./cs-CZ-JUprtMsH.js"),
"../../ui/language/da-DK.json": () => import("./da-DK-D2RrHm98.js"),
"../../ui/language/de-DE.json": () => import("./de-DE-o8i-cfnA.js"),
"../../ui/language/el-GR.json": () => import("./el-GR-BAhj1djs.js"),
"../../ui/language/en-US.json": () => import("./en-US-COWs58AF.js"),
"../../ui/language/es-ES.json": () => import("./es-ES-BNjxmV8Q.js"),
"../../ui/language/es-LA.json": () => import("./es-LA-BIPVrwXX.js"),
"../../ui/language/et-EE.json": () => import("./et-EE-Dl6n-Am8.js"),
"../../ui/language/fi-FI.json": () => import("./fi-FI-T33BAikx.js"),
"../../ui/language/fr-FR.json": () => import("./fr-FR-CRO4taJU.js"),
"../../ui/language/hr-HR.json": () => import("./hr-HR-CbEXwWeO.js"),
"../../ui/language/hu-HU.json": () => import("./hu-HU-B9JCbRow.js"),
"../../ui/language/it-IT.json": () => import("./it-IT-DE_Dkl_X.js"),
"../../ui/language/ja-JP.json": () => import("./ja-JP-BaD-vLXo.js"),
"../../ui/language/lt-LT.json": () => import("./lt-LT-5OY6az4F.js"),
"../../ui/language/lv-LV.json": () => import("./lv-LV-DjAUG4pi.js"),
"../../ui/language/nl-NL.json": () => import("./nl-NL-C3cXv5PD.js"),
"../../ui/language/no-NO.json": () => import("./no-NO-DyMlgewS.js"),
"../../ui/language/pl-PL.json": () => import("./pl-PL-ClUTW9pd.js"),
"../../ui/language/pt-BR.json": () => import("./pt-BR-Bk2xOhdi.js"),
"../../ui/language/pt-PT.json": () => import("./pt-PT-5O7ohkQD.js"),
"../../ui/language/ro-RO.json": () => import("./ro-RO-BOV_LMAu.js"),
"../../ui/language/sk-SK.json": () => import("./sk-SK-BUGTKkOC.js"),
"../../ui/language/sl-SI.json": () => import("./sl-SI-DffYWi9P.js"),
"../../ui/language/sv-SE.json": () => import("./sv-SE-D_bagacj.js")
}), `../../ui/language/${lang}.json`, 5)
},
{
ns: "banking",
importFn: (lang) => _rolldown_dynamic_import_helper_default(/* @__PURE__ */ Object.assign({
"../../BankAccount/language/bg-BG.json": () => import("./bg-BG-DYnhOtaS.js"),
"../../BankAccount/language/cs-CZ.json": () => import("./cs-CZ-DvmlHVW2.js"),
"../../BankAccount/language/da-DK.json": () => import("./da-DK-DDQUbqDb.js"),
"../../BankAccount/language/de-DE.json": () => import("./de-DE-DdOrCrMa.js"),
"../../BankAccount/language/el-GR.json": () => import("./el-GR-Bm9lqjyB.js"),
"../../BankAccount/language/en-US.json": () => import("./en-US-Dokjxy17.js"),
"../../BankAccount/language/es-ES.json": () => import("./es-ES-_w6Ygc8E.js"),
"../../BankAccount/language/es-LA.json": () => import("./es-LA-Cxk68z4n.js"),
"../../BankAccount/language/et-EE.json": () => import("./et-EE-CG66kNTM.js"),
"../../BankAccount/language/fi-FI.json": () => import("./fi-FI-DpgrKo5I.js"),
"../../BankAccount/language/fr-FR.json": () => import("./fr-FR-BN_jrAX4.js"),
"../../BankAccount/language/hr-HR.json": () => import("./hr-HR-SwSOMPhJ.js"),
"../../BankAccount/language/hu-HU.json": () => import("./hu-HU-BqW_xlCb.js"),
"../../BankAccount/language/it-IT.json": () => import("./it-IT-xc14pqAr.js"),
"../../BankAccount/language/ja-JP.json": () => import("./ja-JP-ClFJvhe2.js"),
"../../BankAccount/language/lt-LT.json": () => import("./lt-LT-CTtqyA86.js"),
"../../BankAccount/language/lv-LV.json": () => import("./lv-LV-D_9V3gBo.js"),
"../../BankAccount/language/nl-NL.json": () => import("./nl-NL-_NV5Dvt9.js"),
"../../BankAccount/language/no-NO.json": () => import("./no-NO-CoDL_uMQ.js"),
"../../BankAccount/language/pl-PL.json": () => import("./pl-PL-Bgrz9oPS.js"),
"../../BankAccount/language/pt-BR.json": () => import("./pt-BR-DUAQ_vv4.js"),
"../../BankAccount/language/pt-PT.json": () => import("./pt-PT-B6mC3m94.js"),
"../../BankAccount/language/ro-RO.json": () => import("./ro-RO-ClCWcOZD.js"),
"../../BankAccount/language/sk-SK.json": () => import("./sk-SK-CieZx5AS.js"),
"../../BankAccount/language/sl-SI.json": () => import("./sl-SI-DbVFyYEg.js"),
"../../BankAccount/language/sv-SE.json": () => import("./sv-SE-WmQ6EnrS.js")
}), `../../BankAccount/language/${lang}.json`, 5)
}
]);
const { data: transferInstrumentReferences, isLoading, isError } = useTransferInstruments({
refetchOnMount: "always",
refetchInterval: (query) => query.state.data?.every(({ status }) => status === "FINISHED") ? 0 : REFETCH_INTERVAL
});
useDataset(datasetIdentifier.country);
const onRemove = async (transferInstrumentId) => {
try {
await deleteTransferInstrument(transferInstrumentId);
onRemoveSuccess?.(transferInstrumentId, legalEntityId);
} catch (e) {
showToast({
label: t(($) => $["thereWasAnErrorTryAgain"]),
variant: "error"
});
logger.error(e);
}
};
const render = () => {
if (isLoading) return /* @__PURE__ */ jsx(EmbeddedStatus, { loading: true });
if (isError) return /* @__PURE__ */ jsx(Alert, {
title: t(($) => $["sorryAnErrorOccurred"]),
variant: "error"
});
return /* @__PURE__ */ jsxs(Fragment, { children: [!transferInstrumentReferences?.length && /* @__PURE__ */ jsxs("div", {
className: "u-margin-bottom-12",
children: [/* @__PURE__ */ jsx(Typography, {
el: "h1",
variant: "title-l",
children: t(($) => $["bankDetails"])
}), /* @__PURE__ */ jsx(Typography, { children: t(($) => $["addMissingBankDetails"]) })]
}), /* @__PURE__ */ jsx(ManageTransferInstrumentOverview, {
transferInstrumentReferences,
onEdit: (transferInstrumentId) => onEdit(transferInstrumentId, legalEntityId),
onRemove,
onInitiateRemove,
onAdd,
legalEntityId
})] });
};
return /* @__PURE__ */ jsx("div", {
className: ManageTransferInstrumentComponent_module_default.manageTi,
children: render()
});
}
//#endregion
//#region src/embeds/transfer-instrument-management/adyen-transfer-instrument-management.tsx
var AdyenManageTransferInstruments = ({ rootlegalentityid, fetchToken, environment, locale, settings = {}, experiments = {} }) => {
const eventEmitterRef = useRef(null);
const handleOnAdd = (rootLegalEntityId) => {
emitAdyenSdkEvent(eventEmitterRef, "add", rootLegalEntityId);
};
const handleOnEdit = (transferInstrumentId) => {
emitAdyenSdkEvent(eventEmitterRef, "edit", transferInstrumentId);
};
const handleOnRemove = (transferInstrumentId) => {
emitAdyenSdkEvent(eventEmitterRef, "remove", transferInstrumentId);
};
return /* @__PURE__ */ jsx("div", {
ref: eventEmitterRef,
style: "width:100%;",
children: /* @__PURE__ */ jsx(EmbedShell, {
componentName: "adyen-transfer-instrument-management",
rootLegalEntityId: rootlegalentityid,
settings,
features: experiments,
getSdkToken: fetchToken,
locale,
baseUrl: resolveEnvironment(environment),
children: /* @__PURE__ */ jsx(ManageTransferInstrumentComponent, {
legalEntityId: rootlegalentityid,
onAdd: handleOnAdd,
onEdit: handleOnEdit,
onRemoveSuccess: handleOnRemove
})
})
});
};
register(AdyenManageTransferInstruments, "adyen-transfer-instrument-management", [
"rootlegalentityid",
"fetchToken",
"environment",
"locale",
"settings",
"experiments"
], {
shadow: true,
adoptedStyleSheets: stylesheets
});
//#endregion