@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.
238 lines (237 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] = "93718500-82bb-402c-93d6-987a1bba8830", e._sentryDebugIdIdentifier = "sentry-dbid-93718500-82bb-402c-93d6-987a1bba8830");
} catch (e) {}
import { n as addResourceBundles, o as createLogger, r as useTranslation } from "./translation-BFxyJ1c5.js";
import { a as stylesheets, n as EmbedShell, t as resolveEnvironment } from "./resolveEnvironment-CguBRdxx.js";
import { r as Loader, t as Button } from "./Button-oj6H8OrC.js";
import { r as httpPost, s as useApiContext } from "./http-D1NDkBxF.js";
import { t as _rolldown_dynamic_import_helper_default } from "./_rolldown_dynamic_import_helper-rq_tsyLP.js";
import { t as Alert } from "./Alert-C6gL3JIt.js";
import { t as emitAdyenSdkEvent } from "./emitEvent-Cdd95HOT.js";
import { t as useOnboardingStatus } from "./useOnboardingStatus-C4cuWhT6.js";
import { t as OnboardingStatuses } from "./view-verification-status-CYHM_Ggf.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: "adyen-kyc-verification",
"verification-description": "adyen-kyc-verification-description",
verificationDescription: "adyen-kyc-verification-description"
};
//#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-DxgO5P4C.js"),
"./language/cs-CZ.json": () => import("./cs-CZ-BKxJwZfp.js"),
"./language/da-DK.json": () => import("./da-DK-CUdNKP_y.js"),
"./language/de-DE.json": () => import("./de-DE-Cb9uR42z.js"),
"./language/el-GR.json": () => import("./el-GR-BIJ5syl-.js"),
"./language/en-US.json": () => import("./en-US-CJI3UFnZ.js"),
"./language/es-ES.json": () => import("./es-ES-I6sgbCZT.js"),
"./language/et-EE.json": () => import("./et-EE-CmMB9hVL.js"),
"./language/fi-FI.json": () => import("./fi-FI-DFDdEnkT.js"),
"./language/fr-FR.json": () => import("./fr-FR-Cjf6-Jyc.js"),
"./language/hr-HR.json": () => import("./hr-HR-FCvgQhQb.js"),
"./language/hu-HU.json": () => import("./hu-HU-BrwdCVwT.js"),
"./language/it-IT.json": () => import("./it-IT-Kc1R4_Rn.js"),
"./language/ja-JP.json": () => import("./ja-JP-BfhqPamw.js"),
"./language/lt-LT.json": () => import("./lt-LT-CTP-6_vr.js"),
"./language/lv-LV.json": () => import("./lv-LV-CJlW1MAb.js"),
"./language/nl-NL.json": () => import("./nl-NL-CDG5kf8l.js"),
"./language/no-NO.json": () => import("./no-NO-BD0f30Fb.js"),
"./language/pl-PL.json": () => import("./pl-PL-NX01GGDD.js"),
"./language/pt-BR.json": () => import("./pt-BR-uWioJEmF.js"),
"./language/pt-PT.json": () => import("./pt-PT-Bq9v0R1E.js"),
"./language/ro-RO.json": () => import("./ro-RO-CHnLb9tp.js"),
"./language/sk-SK.json": () => import("./sk-SK-Bs5RASpX.js"),
"./language/sl-SI.json": () => import("./sl-SI-B-faWNpM.js"),
"./language/sv-SE.json": () => import("./sv-SE-DaOsGDdk.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 };