@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.
412 lines (411 loc) • 20.8 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] = "6618af0e-2ad5-4aac-9157-3f9c6b8956ec", e._sentryDebugIdIdentifier = "sentry-dbid-6618af0e-2ad5-4aac-9157-3f9c6b8956ec");
} catch (e) {}
import { c as __exportAll, i as Typography, n as addResourceBundles, r as useTranslation } from "./translation-BYvhW5zA.js";
import { A as _rolldown_dynamic_import_helper_default } 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 { r as useLegalEntity } from "./useLegalEntity-CtlUQv_J.js";
import { t as getLegalEntityCountry } from "./getLegalEntityCountry-BHh7Ux8v.js";
import { a as noop } from "./AnalyticsContext-BFrJmsp0.js";
import { t as StackLayout } from "./StackLayout-IUdNMDgW.js";
import { t as TaskVerificationStatus } from "./TaskVerificationStatus-CKHPTEpH.js";
import { i as TaskStatuses, n as TASK_STATUS_POLLING_INTERVAL_MS } from "./taskStatus-BtekPA8E.js";
import { t as TaskTypes } from "./taskTypes-NawDTp5n.js";
import { i as useAnalyticsContext } from "./Modal-BLP2aF-u.js";
import { n as Image } from "./unincorporated-partnership-nnTW3FnG.js";
import { t as getIndividualLegalEntityName } from "./getName-D4ECvzcI.js";
import { t as IndividualDropin } from "./IndividualDropin-DHrcFHNx.js";
import { t as List } from "./List-ywoRPg-q.js";
import { t as LandingLayout } from "./LandingLayout-CUAkXrpL.js";
import { t as useTaskStatus } from "./useTaskStatus-wrAxqtIR.js";
import { t as ListItem } from "./ListItem-V4x0raZw.js";
import { n as getDecisionMakerDescription, r as getLandingLayoutProps, t as DecisionMakerDetails } from "./DecisionMakerDetails-BQAz3fM_.js";
import { lazy } from "preact/compat";
import { useCallback as useCallback$1, useEffect as useEffect$1, useMemo as useMemo$1, useState as useState$1 } from "preact/hooks";
import { jsx, jsxs } from "preact/jsx-runtime";
import { useQuery } from "@tanstack/preact-query";
//#region src/api/invitedEntity/useInvitedEntityAssociationData.ts
var getInvitedEntityAssociationData = async (invitedLegalEntityId, baseUrl) => {
return httpGet({
baseUrl,
path: `invitedLegalEntities/${invitedLegalEntityId}/entityAssociationData`
});
};
var useInvitedEntityAssociationData = (invitedLegalEntityId, options) => {
const { baseUrl } = useApiContext();
return useQuery({
queryKey: ["entityAssociationData", invitedLegalEntityId],
queryFn: () => getInvitedEntityAssociationData(invitedLegalEntityId, baseUrl.value),
...options
});
};
//#endregion
//#region src/api/invitedEntity/useInvitedEntityRootCapabilities.ts
var getInvitedEntityRootCapabilities = async (invitedLegalEntityId, baseUrl) => {
return httpGet({
baseUrl,
path: `invitedLegalEntities/${invitedLegalEntityId}/rootCapabilities`
});
};
/**
* Retrieves a given legal entity.
*
* @param {boolean} isInvitedEntity :
*/
var useInvitedEntityRootCapabilities = () => {
const { rootLegalEntityId, baseUrl } = useApiContext();
const result = useQuery({
queryKey: ["invitedEntityRootCapabilities", rootLegalEntityId.value],
queryFn: () => getInvitedEntityRootCapabilities(rootLegalEntityId.value, baseUrl.value)
});
return {
refetch: result.refetch,
isLoading: result.isLoading,
isError: result.isError,
data: result.data?.capabilities
};
};
//#endregion
//#region src/components/Individual/tasks/DecisionMakers/hooks/useInvitedDecisionMakerStep.ts
var POST_SUBMIT_STATUSES = [
TaskStatuses.PROCESSING,
TaskStatuses.ERROR,
TaskStatuses.FINISHED
];
function useInvitedDecisionMakerStep() {
const [activeStep, setActiveStep] = useState$1(void 0);
const { data: taskStatus, isLoading: isTaskStatusLoading } = useTaskStatus("INVITED_INDIVIDUAL");
let step = activeStep;
if (activeStep === void 0 && !isTaskStatusLoading && taskStatus) step = POST_SUBMIT_STATUSES.includes(taskStatus.status) ? "submitSuccessStep" : "landingStep";
return {
step,
setActiveStep,
isTaskStatusLoading
};
}
var InvitedDecisionMaker_module_default = {
"invited-decision-makers-container": "_invited-decision-makers-container_15jqb_1",
invitedDecisionMakersContainer: "_invited-decision-makers-container_15jqb_1"
};
//#endregion
//#region src/components/Individual/tasks/DecisionMakers/InvitedDecisionMaker/InvitedDecisionMakerGettingStarted/InvitedDecisionMakerGettingStarted.tsx
var decisionMakerGroup$1 = lazy(() => import("./decision-makers-group-DAoxQRJ3.js"));
var InvitedDecisionMakerGettingStarted = ({ addDecisionMakerOnClick }) => {
const { t } = useTranslation("individual");
const { t: commonT } = useTranslation("common");
const userEvents = useAnalyticsContext();
useEffect$1(() => {
userEvents.addPageEvent("Landed on page", {
actionType: "navigate",
label: "invitedDecisionMakerGettingStarted"
});
}, [userEvents]);
return /* @__PURE__ */ jsx("div", {
className: InvitedDecisionMaker_module_default.invitedDecisionMakersContainer,
children: /* @__PURE__ */ jsx(LandingLayout, {
media: /* @__PURE__ */ jsx(Image, { lazyLoadedImage: decisionMakerGroup$1 }),
title: t(($) => $["tellUsAboutYourself"]),
description: t(($) => $["invitedDecisionMakerIntroDescription"]),
actions: /* @__PURE__ */ jsx(Button, {
fullWidth: true,
onClick: addDecisionMakerOnClick,
children: commonT(($) => $["getStarted"])
})
})
});
};
//#endregion
//#region src/components/Individual/tasks/DecisionMakers/hooks/useTaskStatusWithTimeout.ts
var MIN_POLLING_DURATION_MS = 5e3;
/**
* Custom hook that polls for a specific task status with a built-in timeout.
* It manages the timeout state, stopping polling if the task completes, errors out, or the timeout is reached.
*
* @param taskType - The specific type of task to monitor.
* @param timeoutMs - The duration in milliseconds before timing out if the task is still processing.
* @returns Status indicators and the current task status.
*/
var useTaskStatusWithTimeout = (taskType, timeoutMs = 16e3) => {
const [hasTimedOut, setHasTimedOut] = useState$1(false);
const [canStopPollingEarly, setCanStopPollingEarly] = useState$1(false);
useEffect$1(() => {
const timer = setTimeout(() => setCanStopPollingEarly(true), MIN_POLLING_DURATION_MS);
return () => clearTimeout(timer);
}, []);
const { data: taskStatusResponse } = useTaskStatus(taskType, { refetchInterval: (query) => {
if (hasTimedOut) return false;
const status = query.state.data?.status;
if (canStopPollingEarly && (status === "FINISHED" || status === "ERROR")) return false;
return TASK_STATUS_POLLING_INTERVAL_MS;
} });
const submitStatus = taskStatusResponse?.status;
useEffect$1(() => {
if (submitStatus !== TaskStatuses.PROCESSING) return;
const timer = setTimeout(() => setHasTimedOut(true), timeoutMs);
return () => clearTimeout(timer);
}, [submitStatus, timeoutMs]);
const isLoading = !canStopPollingEarly || submitStatus === TaskStatuses.PROCESSING && !hasTimedOut || submitStatus === void 0;
const isErrorOrDetailsRequired = submitStatus === TaskStatuses.ERROR || submitStatus === TaskStatuses.DETAILS_REQUIRED;
return {
submitStatus,
decisionMakerStatus: submitStatus ?? TaskStatuses.UNKNOWN,
isLoading,
isErrorOrDetailsRequired
};
};
//#endregion
//#region src/components/Individual/tasks/DecisionMakers/hooks/useTrackSubmitStatus.ts
var statusToLabelMap = {
[TaskStatuses.PROCESSING]: "invitedDecisionMakerSubmitProcessing",
[TaskStatuses.FINISHED]: "invitedDecisionMakerSubmitSuccess",
[TaskStatuses.ERROR]: "invitedDecisionMakerSubmitError",
[TaskStatuses.DETAILS_REQUIRED]: "invitedDecisionMakerSubmitDetailsRequired"
};
var useTrackSubmitStatus = (isLoading, submitStatus) => {
const userEvents = useAnalyticsContext();
useEffect$1(() => {
const label = isLoading ? "invitedDecisionMakerSubmitProcessing" : submitStatus ? statusToLabelMap[submitStatus] : void 0;
if (label) userEvents.addPageEvent("Landed on page", {
actionType: "navigate",
label
});
}, [
isLoading,
submitStatus,
userEvents
]);
};
//#endregion
//#region src/components/Individual/tasks/DecisionMakers/InvitedDecisionMaker/InvitedDecisionMakerSubmitSuccess/InvitedDecisionMakerSubmitSuccess.tsx
var decisionMakerGroup = lazy(() => import("./decision-makers-group-DAoxQRJ3.js"));
var InvitedDecisionMakerSubmitSuccess = ({ decisionMaker, handleEdit = noop, isInvitedEntity }) => {
const { t } = useTranslation("individual");
const [showDecisionMakerModal, setShowDecisionMakerModal] = useState$1(false);
const { submitStatus, decisionMakerStatus, isLoading, isErrorOrDetailsRequired } = useTaskStatusWithTimeout("INVITED_INDIVIDUAL");
useTrackSubmitStatus(isLoading, submitStatus);
const landingLayoutProps = useMemo$1(() => getLandingLayoutProps(submitStatus, isErrorOrDetailsRequired, t), [
submitStatus,
isErrorOrDetailsRequired,
t
]);
const handleOpenModal = useCallback$1(() => setShowDecisionMakerModal(true), []);
const handleCloseModal = useCallback$1(() => setShowDecisionMakerModal(false), []);
const decisionMakerWithStatus = useMemo$1(() => ({
...decisionMaker,
status: decisionMakerStatus
}), [decisionMaker, decisionMakerStatus]);
if (isLoading) return /* @__PURE__ */ jsx("div", {
className: InvitedDecisionMaker_module_default.invitedDecisionMakersContainer,
children: /* @__PURE__ */ jsxs(StackLayout, {
align: "center",
gap: "xSmall",
children: [
/* @__PURE__ */ jsx(Loader, {
shortMessage: "",
longMessage: ""
}),
/* @__PURE__ */ jsx(Typography, {
variant: "title-l",
el: "h1",
children: t(($) => $["verifyingYourDetails"])
}),
/* @__PURE__ */ jsx(Typography, {
variant: "body",
el: "p",
color: "secondary",
children: t(($) => $["thisUsuallyTakesAbout15Seconds"])
})
]
})
});
return /* @__PURE__ */ jsxs("div", {
className: InvitedDecisionMaker_module_default.invitedDecisionMakersContainer,
children: [
/* @__PURE__ */ jsx(LandingLayout, {
media: /* @__PURE__ */ jsx(Image, { lazyLoadedImage: decisionMakerGroup }),
...landingLayoutProps
}),
(submitStatus === TaskStatuses.PROCESSING || isErrorOrDetailsRequired) && /* @__PURE__ */ jsxs(List, {
variant: "grouped-primary",
padding: "medium",
dividers: false,
children: [/* @__PURE__ */ jsx(ListItem, {
accessory: /* @__PURE__ */ jsx(TaskVerificationStatus, { status: decisionMakerStatus }),
avatar: {
iconName: "user",
circle: true
},
title: decisionMaker.name,
description: getDecisionMakerDescription(decisionMaker.types, t)
}), isErrorOrDetailsRequired && /* @__PURE__ */ jsx("div", {
className: "u-margin-top-16",
children: /* @__PURE__ */ jsx(Button, {
fullWidth: true,
onClick: handleOpenModal,
children: t(($) => $["reviewDetails"])
})
})]
}),
isErrorOrDetailsRequired && showDecisionMakerModal && /* @__PURE__ */ jsx(DecisionMakerDetails, {
handleClose: handleCloseModal,
handleEdit,
decisionMaker: decisionMakerWithStatus,
isInvitedEntity
})
]
});
};
//#endregion
//#region src/components/EmbeddedDropins/InvitedDecisionMakerComponent/InvitedDecisionMakerComponent.tsx
var InvitedDecisionMakerComponent_exports = /* @__PURE__ */ __exportAll({ InvitedDecisionMakerComponent: () => InvitedDecisionMakerComponent });
function InvitedDecisionMakerComponent({ invitedIndividualId }) {
if (!invitedIndividualId) throw new Error("Must provide `invitedIndividualEntityId`");
const { i18n } = useTranslation();
addResourceBundles(i18n, [
{
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: "individual",
importFn: (lang) => _rolldown_dynamic_import_helper_default(/* @__PURE__ */ Object.assign({
"../../Individual/language/bg-BG.json": () => import("./bg-BG-VIyyeYUh.js"),
"../../Individual/language/cs-CZ.json": () => import("./cs-CZ-D8nnXFEh.js"),
"../../Individual/language/da-DK.json": () => import("./da-DK-Cq-1LB6T.js"),
"../../Individual/language/de-DE.json": () => import("./de-DE-Bc55gBv4.js"),
"../../Individual/language/el-GR.json": () => import("./el-GR-Cr-3NgPk.js"),
"../../Individual/language/en-US.instructions.json": () => import("./en-US.instructions-DfgivDPI.js"),
"../../Individual/language/en-US.json": () => import("./en-US-C1J9jcVI.js"),
"../../Individual/language/es-ES.json": () => import("./es-ES-uVSZu-EQ.js"),
"../../Individual/language/es-LA.json": () => import("./es-LA-BU5Op1kh.js"),
"../../Individual/language/et-EE.json": () => import("./et-EE-BFb0MPqf.js"),
"../../Individual/language/fi-FI.json": () => import("./fi-FI-BI9sCCEP.js"),
"../../Individual/language/fr-FR.json": () => import("./fr-FR-_TkFnevF.js"),
"../../Individual/language/hr-HR.json": () => import("./hr-HR-DubR_a2h.js"),
"../../Individual/language/hu-HU.json": () => import("./hu-HU-CK6lbZ-D.js"),
"../../Individual/language/it-IT.json": () => import("./it-IT-CVVOlFfY.js"),
"../../Individual/language/ja-JP.json": () => import("./ja-JP-B8sNFjt_.js"),
"../../Individual/language/lt-LT.json": () => import("./lt-LT-C9lXLzZA.js"),
"../../Individual/language/lv-LV.json": () => import("./lv-LV-2Q8G1u4p.js"),
"../../Individual/language/nl-NL.json": () => import("./nl-NL-DMdoFepr.js"),
"../../Individual/language/no-NO.json": () => import("./no-NO-CwgewQst.js"),
"../../Individual/language/pl-PL.json": () => import("./pl-PL-D-TVYshE.js"),
"../../Individual/language/pt-BR.json": () => import("./pt-BR-DwHag_mp.js"),
"../../Individual/language/pt-PT.json": () => import("./pt-PT-BVcFY8gr.js"),
"../../Individual/language/ro-RO.json": () => import("./ro-RO-D3Yk1KoW.js"),
"../../Individual/language/sk-SK.json": () => import("./sk-SK-D3UYKttr.js"),
"../../Individual/language/sl-SI.json": () => import("./sl-SI-BkcElOhl.js"),
"../../Individual/language/sv-SE.json": () => import("./sv-SE-DkZ2LyW5.js")
}), `../../Individual/language/${lang}.json`, 5)
}
]);
const { step, setActiveStep, isTaskStatusLoading } = useInvitedDecisionMakerStep();
const { data: invitedIndividualLe } = useLegalEntity(invitedIndividualId);
const { data: invitedEntityAssociationData } = useInvitedEntityAssociationData(invitedIndividualId);
const { data: rootCapabilities } = useInvitedEntityRootCapabilities();
const invitedEntityDetails = useMemo$1(() => {
if (!invitedEntityAssociationData) return { roles: [] };
const { associations } = invitedEntityAssociationData;
return {
roles: Array.from(new Set(associations.map((a) => a.type))),
jobTitle: associations.find((a) => a.jobTitle)?.jobTitle,
rootCapabilities
};
}, [invitedEntityAssociationData, rootCapabilities]);
const decisionMaker = useMemo$1(() => ({
reference: invitedIndividualId,
name: getIndividualLegalEntityName(invitedIndividualLe),
types: invitedEntityDetails.roles,
legalEntityType: invitedIndividualLe?.type
}), [
invitedIndividualId,
invitedIndividualLe,
invitedEntityDetails.roles
]);
if (!invitedIndividualLe || isTaskStatusLoading || step === void 0) return /* @__PURE__ */ jsx(Loader, {});
const country = getLegalEntityCountry(invitedIndividualLe);
const handleSubmitSuccess = () => setActiveStep("submitSuccessStep");
switch (step) {
case "landingStep": return /* @__PURE__ */ jsx(InvitedDecisionMakerGettingStarted, { addDecisionMakerOnClick: () => setActiveStep("provideDetailsStep") });
case "provideDetailsStep": return /* @__PURE__ */ jsx(IndividualDropin, {
taskType: TaskTypes.DECISION_MAKER,
taskName: "decisionMakerDetails",
legalEntityResponse: invitedIndividualLe,
problems: void 0,
country,
asModal: true,
handleHomeClick: () => setActiveStep("landingStep"),
isInvitedEntity: true,
invitedEntityDetails,
onSubmit: handleSubmitSuccess
});
case "submitSuccessStep": return /* @__PURE__ */ jsx(InvitedDecisionMakerSubmitSuccess, {
decisionMaker,
handleEdit: () => setActiveStep("provideDetailsStep"),
isInvitedEntity: true
});
}
}
//#endregion
export { InvitedDecisionMakerComponent_exports as n, InvitedDecisionMakerComponent as t };