@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.
237 lines (236 loc) • 10.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] = "2ef16511-8f46-4212-8729-551080935056", e._sentryDebugIdIdentifier = "sentry-dbid-2ef16511-8f46-4212-8729-551080935056");
} catch (e) {}
import { n as addResourceBundles, o as createLogger, r as useTranslation } from "./translation-BYvhW5zA.js";
import { A as _rolldown_dynamic_import_helper_default, mt as stylesheets, n as EmbedShell, t as resolveEnvironment, x as Alert } from "./resolveEnvironment-DNmu53Rr.js";
import { r as Loader, t as Button } from "./Button-i8I2dHP8.js";
import { r as httpPost, s as useApiContext } from "./http-8qgzqVqk.js";
import { t as emitAdyenSdkEvent } from "./emitEvent-CcGIaOut.js";
import { t as useOnboardingStatus } from "./useOnboardingStatus-BlXlrSAS.js";
import { t as OnboardingStatuses } from "./view-verification-status-XSQs02td.js";
import register from "preact-custom-element";
import { useCallback, useEffect, useMemo, useRef, useState } from "preact/hooks";
import { Fragment, jsx, jsxs } from "preact/jsx-runtime";
import { useMutation } from "@tanstack/preact-query";
//#region src/api/onboardingStatus/useGenerateOnboardingLink.ts
var generateOnboardingLink = async (legalEntityId, baseUrl, data) => {
return httpPost({
baseUrl,
path: `legalEntities/${legalEntityId}/onboardingStatus`
}, data);
};
var useGenerateOnboardingLink = (options) => {
const { rootLegalEntityId, baseUrl } = useApiContext();
return useMutation({
mutationFn: (data) => generateOnboardingLink(rootLegalEntityId.value, baseUrl.value, data),
...options
});
};
//#endregion
//#region src/utils/coerceError.ts
var coerceError = (err) => {
if (err instanceof Error) return err;
if (typeof err === "object") {
if (err !== null && "message" in err && typeof err.message === "string") return new Error(err.message);
}
return /* @__PURE__ */ new Error("Unknown error");
};
//#endregion
//#region src/components/EmbeddedDropins/ViewVerificationStatus/content.ts
var contentMap = {
[OnboardingStatuses.AWAITING_DATA]: {
description: ["onboardingRedirectAwaitingDescriptionP1"],
ctaButton: "onboardingRedirectAwaitingCtaButton"
},
[OnboardingStatuses.IN_REVIEW]: {
description: ["onboardingRedirectInReviewDescriptionP1"],
ctaButton: "onboardingRedirectInReviewCtaButton"
},
[OnboardingStatuses.UNSUCCESSFUL]: {
description: ["onboardingRedirectUnsuccessfulDescriptionP1"],
ctaButton: "onboardingRedirectUnsuccessfulCtaButton"
},
[OnboardingStatuses.REJECTED]: { description: ["onboardingRedirectRejectedDescriptionP1"] },
[OnboardingStatuses.VERIFIED]: { description: ["onboardingRedirectVerifiedDescriptionP1"] }
};
function getContentByStatus(status) {
return contentMap[status];
}
var ViewVerificationStatusComponent_module_default = {
verification: "_verification_lse2o_1",
"verification-description": "_verification-description_lse2o_6",
verificationDescription: "_verification-description_lse2o_6"
};
//#endregion
//#region src/components/EmbeddedDropins/ViewVerificationStatus/ViewVerificationStatusComponent.tsx
var FINAL_STATUSES = [OnboardingStatuses.VERIFIED, OnboardingStatuses.REJECTED];
var logger = createLogger();
function ViewVerificationStatusComponent({ legalEntityId, hideExplanation = false, returnUrl, redirectTarget = "_blank", themeId, onStatusChange, onError, onRedirect }) {
const { i18n, t } = useTranslation("verificationStatus");
addResourceBundles(i18n, [{
ns: "verificationStatus",
importFn: (lang) => _rolldown_dynamic_import_helper_default(/* @__PURE__ */ Object.assign({
"./language/bg-BG.json": () => import("./bg-BG-BVoCVNdz.js"),
"./language/cs-CZ.json": () => import("./cs-CZ-fK4LxA1u.js"),
"./language/da-DK.json": () => import("./da-DK-Bwkz0Wxd.js"),
"./language/de-DE.json": () => import("./de-DE-CVNJWoQd.js"),
"./language/el-GR.json": () => import("./el-GR-28yAVKwY.js"),
"./language/en-US.json": () => import("./en-US-D0qNFi4G.js"),
"./language/es-ES.json": () => import("./es-ES-CJYZG5hn.js"),
"./language/es-LA.json": () => import("./es-LA-CvOdV_q1.js"),
"./language/et-EE.json": () => import("./et-EE-DZ2fiz66.js"),
"./language/fi-FI.json": () => import("./fi-FI-DZUZ6EuS.js"),
"./language/fr-FR.json": () => import("./fr-FR-Bsr-Ax2m.js"),
"./language/hr-HR.json": () => import("./hr-HR-BHkPwjWG.js"),
"./language/hu-HU.json": () => import("./hu-HU-BWRMWxUx.js"),
"./language/it-IT.json": () => import("./it-IT-D9vW7SZr.js"),
"./language/ja-JP.json": () => import("./ja-JP-DqGVC5Ag.js"),
"./language/lt-LT.json": () => import("./lt-LT-C96kAeo7.js"),
"./language/lv-LV.json": () => import("./lv-LV-C8Reuc9U.js"),
"./language/nl-NL.json": () => import("./nl-NL-C678Ydas.js"),
"./language/no-NO.json": () => import("./no-NO-0TPifz5u.js"),
"./language/pl-PL.json": () => import("./pl-PL-DCIKCF5C.js"),
"./language/pt-BR.json": () => import("./pt-BR-Bp3xzdX7.js"),
"./language/pt-PT.json": () => import("./pt-PT-CYMgik2d.js"),
"./language/ro-RO.json": () => import("./ro-RO-BVGWEbO9.js"),
"./language/sk-SK.json": () => import("./sk-SK-DP6XhEgm.js"),
"./language/sl-SI.json": () => import("./sl-SI-BpJHrRwy.js"),
"./language/sv-SE.json": () => import("./sv-SE-Di8YEdBA.js")
}), `./language/${lang}.json`, 3)
}]);
const { rootLegalEntityId: currentLegalEntityId } = useApiContext();
currentLegalEntityId.value = legalEntityId;
const config = {
locale: i18n.language,
returnUrl,
themeId
};
const [onboardingStatus, setOnboardingStatus] = useState();
const [alertContent, setAlertContent] = useState();
const content = useMemo(() => {
if (!onboardingStatus) return;
const statusContent = getContentByStatus(onboardingStatus);
if (statusContent) return statusContent;
logger.error(`there is no content for status "${onboardingStatus}"`);
}, [onboardingStatus]);
const handleError = useCallback((rawError, userMessage) => {
const error = coerceError(rawError);
logger.error(error);
setAlertContent(userMessage);
onError?.({
error,
userMessage: t(($) => $[userMessage])
});
}, [t, onError]);
const updateOnboardingStatus = useCallback((newStatus) => {
if (!newStatus) return;
setOnboardingStatus(newStatus);
if (newStatus !== onboardingStatus) onStatusChange?.(newStatus);
}, [onStatusChange, onboardingStatus]);
const { isLoading, data, isError } = useOnboardingStatus({ refetchInterval: (res) => {
const status = res.state.data?.status;
setOnboardingStatus(status);
return status === void 0 || !FINAL_STATUSES.includes(status) ? 3e3 : false;
} });
useEffect(() => {
setAlertContent(void 0);
updateOnboardingStatus(data?.status);
}, [data, updateOnboardingStatus]);
const generateOnboardingLink = useGenerateOnboardingLink({
onSuccess: ({ redirectUrl }) => {
if (!redirectUrl) {
handleError(/* @__PURE__ */ new Error("No redirectUrl returned"), "onboardingRedirectLinkError");
return;
}
openUrl(redirectUrl, config);
},
onError: (error) => {
handleError(error, "onboardingRedirectLinkError");
}
});
const openUrl = (url, config) => {
if (!window.open(url, redirectTarget)) {
handleError(/* @__PURE__ */ new Error("Could not open redirect in new tab"), "onboardingRedirectOpenError");
return;
}
onRedirect?.({
...config,
onboardingLink: url
});
};
const showAlert = alertContent || isError;
const hideButton = onboardingStatus === OnboardingStatuses.REJECTED || onboardingStatus === OnboardingStatuses.VERIFIED || !content?.ctaButton;
if (!showAlert && (isLoading || !content)) return /* @__PURE__ */ jsx(Loader, {});
return /* @__PURE__ */ jsx("section", {
className: ViewVerificationStatusComponent_module_default.verification,
children: showAlert ? /* @__PURE__ */ jsx(Alert, {
title: t(($) => $[alertContent ?? "onboardingRedirectLinkError"]),
variant: "error"
}) : /* @__PURE__ */ jsxs(Fragment, { children: [!hideExplanation && content?.description.map((key) => /* @__PURE__ */ jsx("p", {
className: ViewVerificationStatusComponent_module_default.verificationDescription,
children: t(($) => $[key])
}, key)), !hideButton && /* @__PURE__ */ jsx(Button, {
onClick: () => {
generateOnboardingLink.mutate(config);
},
variant: "link",
loading: generateOnboardingLink.isPending,
children: t(($) => $[content.ctaButton])
})] })
});
}
//#endregion
//#region src/embeds/verification-status/adyen-verification-status.tsx
var AdyenVerificationStatus = ({ rootlegalentityid, fetchToken, environment, locale, settings = {}, experiments = {}, hideexplanation, returnurl, redirecttarget, themeid }) => {
const eventEmitterRef = useRef(null);
const handleOnChange = (data) => {
emitAdyenSdkEvent(eventEmitterRef, "change", data);
};
const handleOnError = (data) => {
emitAdyenSdkEvent(eventEmitterRef, "error", data);
};
const handleOnRedirect = (data) => {
emitAdyenSdkEvent(eventEmitterRef, "redirect", data);
};
return /* @__PURE__ */ jsx("div", {
ref: eventEmitterRef,
style: "width:100%;",
children: /* @__PURE__ */ jsx(EmbedShell, {
componentName: "adyen-verification-status",
rootLegalEntityId: rootlegalentityid,
settings,
features: experiments,
getSdkToken: fetchToken,
locale,
baseUrl: resolveEnvironment(environment),
children: /* @__PURE__ */ jsx(ViewVerificationStatusComponent, {
legalEntityId: rootlegalentityid,
hideExplanation: hideexplanation,
returnUrl: returnurl,
redirectTarget: redirecttarget,
themeId: themeid,
onStatusChange: handleOnChange,
onError: handleOnError,
onRedirect: handleOnRedirect
})
})
});
};
register(AdyenVerificationStatus, "adyen-verification-status", [
"rootlegalentityid",
"fetchToken",
"environment",
"locale",
"settings",
"experiments",
"hideexplanation",
"returnurl",
"redirecttarget",
"themeid"
], {
shadow: true,
adoptedStyleSheets: stylesheets
});
//#endregion
export { AdyenVerificationStatus };