@adyen/kyc-components
Version:
`adyen-kyc-components` provides the required pieces to build an onboarding flow based on a legal entity. To onboard and verify users, you need to create a user interface (UI) to collect user data. To speed up building your integration, Adyen offers onboar
448 lines (447 loc) • 22 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] = "ec7d1fc0-9b05-478a-89e2-1f7136004a7a", e._sentryDebugIdIdentifier = "sentry-dbid-ec7d1fc0-9b05-478a-89e2-1f7136004a7a");
} catch (e) {
}
}
;
import { jsx, jsxs, Fragment } from "preact/jsx-runtime";
import { useState, useEffect } from "preact/hooks";
import { p as useLegalEntity, q as Loader, u as useI18nContext, n as useAnalyticsContext, r as useToastContext, b as useExperimentsContext, w as useSelectionOptions, x as getCapabilities, y as getLegalEntityCountry, z as getBusinessType, A as getDefaultLegalArrangementOrSuborganizationType, L as LegalEntityType, D as useForm, E as legalArrangementMetadata, F as getTargetLegalEntityType, G as LoaderWrapper, H as Typography, J as Field, K as EntityTypeRadioGroupCard, R as RadioGroupCard, B as Button, N as Spacer, h as Icon, O as businessTypeIcons, P as hasSolePropInLegalEntity, Q as determineOrganizationTypeToUpdate } from "./core-B_WrZP-J.js";
const businessTypeExamples = /* @__PURE__ */ Object.assign({ "../localized/legalEntityTypeExamples/AT.json": () => import("./AT-EpV7jN58.js"), "../localized/legalEntityTypeExamples/AU.json": () => import("./AU-pBsEvEUy.js"), "../localized/legalEntityTypeExamples/BE.json": () => import("./BE-CU5o9cmc.js"), "../localized/legalEntityTypeExamples/BR.json": () => import("./BR-ORoHRwTk.js"), "../localized/legalEntityTypeExamples/CA.json": () => import("./CA-VXNq-m6m.js"), "../localized/legalEntityTypeExamples/CH.json": () => import("./CH-B_-afpD_.js"), "../localized/legalEntityTypeExamples/CZ.json": () => import("./CZ-CTw_bQIu.js"), "../localized/legalEntityTypeExamples/DE.json": () => import("./DE-D_jIDxOH.js"), "../localized/legalEntityTypeExamples/DK.json": () => import("./DK-dBzrfgpQ.js"), "../localized/legalEntityTypeExamples/ES.json": () => import("./ES-DYbZmFcJ.js"), "../localized/legalEntityTypeExamples/FI.json": () => import("./FI-C9nRvop7.js"), "../localized/legalEntityTypeExamples/FR.json": () => import("./FR-BycGQO4W.js"), "../localized/legalEntityTypeExamples/GB.json": () => import("./GB-DFyzo5sN.js"), "../localized/legalEntityTypeExamples/HK.json": () => import("./HK-WqZ5UBEF.js"), "../localized/legalEntityTypeExamples/HR.json": () => import("./HR-CRa19tH1.js"), "../localized/legalEntityTypeExamples/HU.json": () => import("./HU-D5NCweWf.js"), "../localized/legalEntityTypeExamples/IE.json": () => import("./IE-rhATS57q.js"), "../localized/legalEntityTypeExamples/IT.json": () => import("./IT-wD7dHdYD.js"), "../localized/legalEntityTypeExamples/LT.json": () => import("./LT-0F72uCyI.js"), "../localized/legalEntityTypeExamples/NL.json": () => import("./NL-q2U2l276.js"), "../localized/legalEntityTypeExamples/NO.json": () => import("./NO-CX12Zsf_.js"), "../localized/legalEntityTypeExamples/PL.json": () => import("./PL-CwCXF3Yu.js"), "../localized/legalEntityTypeExamples/PT.json": () => import("./PT-Dei5v1nD.js"), "../localized/legalEntityTypeExamples/RO.json": () => import("./RO-Dxk08mOu.js"), "../localized/legalEntityTypeExamples/SE.json": () => import("./SE-AP3gLiyy.js"), "../localized/legalEntityTypeExamples/SG.json": () => import("./SG-DMcOb17i.js"), "../localized/legalEntityTypeExamples/SI.json": () => import("./SI-BXe-yndm.js"), "../localized/legalEntityTypeExamples/SK.json": () => import("./SK-DwdgoGnD.js"), "../localized/legalEntityTypeExamples/US.json": () => import("./US-DHxLSqeC.js") });
const getBusinessTypeExamplesForCountry = async (country) => {
const importForCountry = businessTypeExamples[`../localized/legalEntityTypeExamples/${country}.json`];
if (!importForCountry) {
console.warn(`No business type examples available for ${country}`);
return {};
}
return (await importForCountry()).default;
};
const useBusinessTypeExamples = (country) => {
const [examples, setExamples] = useState();
useEffect(() => {
getBusinessTypeExamplesForCountry(country).then(setExamples).catch(console.error);
}, [country]);
return examples;
};
const legalArrangementTypeExamples = /* @__PURE__ */ Object.assign({
"../localized/legalArrangementTypeExamples/AT.json": () => import("./AT-C_G2OvQI.js"),
"../localized/legalArrangementTypeExamples/AU.json": () => import("./AU-DBnla6IS.js"),
"../localized/legalArrangementTypeExamples/BE.json": () => import("./BE-By7sRfJq.js"),
"../localized/legalArrangementTypeExamples/BR.json": () => import("./BR-CG-ZSQQz.js"),
"../localized/legalArrangementTypeExamples/CA.json": () => import("./CA-BZ1GNmhP.js"),
"../localized/legalArrangementTypeExamples/CH.json": () => import("./CH-DNjTl_X_.js"),
"../localized/legalArrangementTypeExamples/CZ.json": () => import("./CZ-DDucwl8A.js"),
"../localized/legalArrangementTypeExamples/DE.json": () => import("./DE-LKZHA8bh.js"),
"../localized/legalArrangementTypeExamples/DK.json": () => import("./DK-moHaAY_C.js"),
"../localized/legalArrangementTypeExamples/ES.json": () => import("./ES-BOW3pjTD.js"),
"../localized/legalArrangementTypeExamples/FI.json": () => import("./FI-gB1Mh_9c.js"),
"../localized/legalArrangementTypeExamples/FR.json": () => import("./FR-iSfxCiGj.js"),
"../localized/legalArrangementTypeExamples/GB.json": () => import("./GB-UYrtNfT0.js"),
"../localized/legalArrangementTypeExamples/HK.json": () => import("./HK-BsLgqwJt.js"),
"../localized/legalArrangementTypeExamples/HR.json": () => import("./HR-BOrmO4s8.js"),
"../localized/legalArrangementTypeExamples/HU.json": () => import("./HU-DSPD5z5O.js"),
"../localized/legalArrangementTypeExamples/IE.json": () => import("./IE-BNxtcUkX.js"),
"../localized/legalArrangementTypeExamples/IT.json": () => import("./IT-CjMPVtH8.js"),
"../localized/legalArrangementTypeExamples/LT.json": () => import("./LT-CUUN_JaO.js"),
"../localized/legalArrangementTypeExamples/NL.json": () => import("./NL-C3ArXgfX.js"),
"../localized/legalArrangementTypeExamples/NO.json": () => import("./NO-yBcMewGZ.js"),
"../localized/legalArrangementTypeExamples/PL.json": () => import("./PL-DGMOmdSy.js"),
"../localized/legalArrangementTypeExamples/PT.json": () => import("./PT-D3NkDIsX.js"),
"../localized/legalArrangementTypeExamples/RO.json": () => import("./RO-Bo0cNUJf.js"),
"../localized/legalArrangementTypeExamples/SE.json": () => import("./SE-W4QBeQtP.js"),
"../localized/legalArrangementTypeExamples/SG.json": () => import("./SG-dEj6fGdY.js"),
"../localized/legalArrangementTypeExamples/SI.json": () => import("./SI-DoClLcmM.js"),
"../localized/legalArrangementTypeExamples/SK.json": () => import("./SK-DmiByqvu.js"),
"../localized/legalArrangementTypeExamples/US.json": () => import("./US-CxBcdqfz.js")
});
const getLegalArrangementTypeExamplesForCountry = async (country) => {
const importForCountry = legalArrangementTypeExamples[`../localized/legalArrangementTypeExamples/${country}.json`];
if (!importForCountry) {
console.warn(`No legal arrangement type examples available for ${country}`);
return {};
}
return (await importForCountry()).default;
};
const useLegalArrangementTypeExamples = (country) => {
const [examples, setExamples] = useState();
useEffect(() => {
getLegalArrangementTypeExamplesForCountry(country).then(setExamples).catch(console.error);
}, [country]);
return examples;
};
const trusteeTypes = ["individual", "company"];
const trusteeTypeMetadata = {
individual: {
id: "individual",
name: "individual"
},
company: {
id: "company",
name: "company"
}
};
const getFormSchema = (isLegalArrangement, isTrust) => {
const schema = ["businessType"];
if (isLegalArrangement) {
schema.push("legalArrangement");
}
if (isTrust) {
schema.push("trusteeType");
}
return schema;
};
const businessTypeSelectionValidationRules = {
businessType: {
modes: ["blur"],
validate: (businessType) => !!businessType,
errorMessage: "fieldIsRequired"
},
legalArrangement: {
modes: ["blur"],
validate: (legalArrangement) => !!legalArrangement,
errorMessage: "fieldIsRequired"
},
trusteeType: {
modes: ["blur"],
validate: (trusteeType) => !!trusteeType,
errorMessage: "fieldIsRequired"
}
};
const businessTypeSelectionStepTitles = {
[
0
/* BUSINESS_TYPE_SELECTION */
]: "whatBestDescribesYourBusinessSetup",
[
1
/* LEGAL_ARRANGEMENT_SELECTION */
]: "whichLegalArrangementDoesYourBusinessHave",
[
2
/* WE_CANNOT_SET_UP_ACCOUNT */
]: "sorryWeCantSetUpAnAccountForYou",
[
3
/* CONFIRM_BUSINESS_SETUP_CHANGE */
]: "changeYourBusinessSetup"
};
const BusinessTypeIcon = (option) => /* @__PURE__ */ jsx(Icon, { name: businessTypeIcons[option] });
const BusinessTypeSelection = (props) => {
const { data, isLoading } = useLegalEntity();
if (isLoading || !data) {
return /* @__PURE__ */ jsx(Loader, {});
}
return /* @__PURE__ */ jsx(BusinessTypeSelectionInner, { ...props, legalEntity: data });
};
const BusinessTypeSelectionInner = ({
legalEntityResponse,
accountHolder,
onComplete,
onBack,
handleUpdateLegalEntity
}) => {
var _a, _b, _c, _d, _e, _f, _g, _h, _i, _j, _k, _l, _m, _n;
const { i18n } = useI18nContext();
const userEvents = useAnalyticsContext();
const { showToast } = useToastContext();
const { isExperimentEnabled } = useExperimentsContext();
const [loadingStatus, setLoadingStatus] = useState();
const [currentStep, setCurrentStep] = useState(
0
/* BUSINESS_TYPE_SELECTION */
);
const [formSchema, setFormSchema] = useState([
"businessType"
]);
const hasBackButton = [
1,
2
/* WE_CANNOT_SET_UP_ACCOUNT */
].includes(currentStep) || currentStep === 0 && Boolean(onBack);
const { legalArrangementOptions, adjustedBusinessTypeMetadata: businessTypeMetadata } = useSelectionOptions(legalEntityResponse);
const currentLegalEntityType = legalEntityResponse == null ? void 0 : legalEntityResponse.type;
const currentCompanyTypesValue = (_a = legalEntityResponse == null ? void 0 : legalEntityResponse.organization) == null ? void 0 : _a.type;
const capabilities = getCapabilities(legalEntityResponse);
const country = getLegalEntityCountry(legalEntityResponse);
const defaultBusinessType = getBusinessType(
businessTypeMetadata,
country,
accountHolder,
legalEntityResponse == null ? void 0 : legalEntityResponse.type,
(_b = legalEntityResponse == null ? void 0 : legalEntityResponse.organization) == null ? void 0 : _b.type,
capabilities
);
const defaultLegalArrangementType = legalArrangementOptions.find(
(item) => item === getDefaultLegalArrangementOrSuborganizationType(legalEntityResponse, accountHolder)
);
const defaultTrusteeType = legalEntityResponse.type === LegalEntityType.INDIVIDUAL ? trusteeTypeMetadata.individual : trusteeTypeMetadata.company;
const { handleChangeFor, triggerValidation, data, valid, errors, isValid } = useForm({
schema: formSchema,
defaultData: {
businessType: defaultBusinessType,
legalArrangement: legalArrangementMetadata[defaultLegalArrangementType],
trusteeType: defaultTrusteeType
},
rules: businessTypeSelectionValidationRules
});
const newAccountHolder = ((_c = data.businessType) == null ? void 0 : _c.accountHolder) || ((_d = data.legalArrangement) == null ? void 0 : _d.accountHolder);
const targetLegalArrangement = (_e = data.legalArrangement) == null ? void 0 : _e.id;
const trustOrUnincorporatedPartnership = ((_f = data.legalArrangement) == null ? void 0 : _f.id) === "aTrust" || ((_g = data.legalArrangement) == null ? void 0 : _g.id) === "partnershipUnincorporated" && isExperimentEnabled("EnableUnincorporatedPartnershipInHO");
const targetLegalEntityType = getTargetLegalEntityType(
(_h = data.businessType) == null ? void 0 : _h.id,
(_i = data.legalArrangement) == null ? void 0 : _i.id,
(_j = data.trusteeType) == null ? void 0 : _j.id,
legalEntityResponse == null ? void 0 : legalEntityResponse.type
);
const isLegalEntityTypeChanging = currentLegalEntityType !== targetLegalEntityType;
const isLegalArrangementChanging = currentCompanyTypesValue !== targetLegalArrangement;
useEffect(() => {
var _a2;
setFormSchema(
getFormSchema(
((_a2 = data.businessType) == null ? void 0 : _a2.id) === "legalArrangement" && !!data.legalArrangement || currentStep === 1,
trustOrUnincorporatedPartnership
)
);
}, [data.businessType, data.legalArrangement, currentStep, trustOrUnincorporatedPartnership]);
useEffect(() => {
userEvents.addTaskEvent("Landed on page", {
actionType: "start"
});
}, [userEvents]);
const handleNextClick = async () => {
var _a2;
if (loadingStatus === "loading") return;
triggerValidation();
if (isValid) {
userEvents.addPageEvent("Clicked button", {
actionType: "next"
});
if (((_a2 = data.businessType) == null ? void 0 : _a2.id) === "legalArrangement") {
if (currentStep !== 1) {
setCurrentStep(
1
/* LEGAL_ARRANGEMENT_SELECTION */
);
return;
}
if (targetLegalArrangement === "partnershipUnincorporated" && !isExperimentEnabled("EnableUnincorporatedPartnershipInHO")) {
setCurrentStep(
2
/* WE_CANNOT_SET_UP_ACCOUNT */
);
return;
}
}
if (newAccountHolder !== accountHolder || isLegalEntityTypeChanging) {
if (accountHolder) {
setCurrentStep(
3
/* CONFIRM_BUSINESS_SETUP_CHANGE */
);
return;
}
await updateLegalEntityAndSelectAccountHolder();
} else {
onComplete(newAccountHolder);
}
if (isLegalArrangementChanging) {
await updateLegalEntityAndSelectAccountHolder();
}
}
};
const updateLegalEntityAndSelectAccountHolder = async () => {
const trackingPayload = {
actionType: "submit"
};
try {
if (isLegalEntityTypeChanging) {
setLoadingStatus("loading");
const updateLegalEntityPayload = {
type: targetLegalEntityType
};
await (handleUpdateLegalEntity == null ? void 0 : handleUpdateLegalEntity(updateLegalEntityPayload, legalEntityResponse == null ? void 0 : legalEntityResponse.id));
userEvents.addTaskEvent("Success", trackingPayload);
}
if (targetLegalEntityType === LegalEntityType.INDIVIDUAL) {
if (hasSolePropInLegalEntity(legalEntityResponse)) {
setLoadingStatus("loading");
const updateLegalEntityPayload = {
entityAssociations: []
};
await (handleUpdateLegalEntity == null ? void 0 : handleUpdateLegalEntity(updateLegalEntityPayload, legalEntityResponse == null ? void 0 : legalEntityResponse.id));
userEvents.addTaskEvent("Success", trackingPayload);
}
return;
}
const targetOrganizationType = determineOrganizationTypeToUpdate(
targetLegalArrangement,
currentCompanyTypesValue
);
if (targetOrganizationType !== void 0) {
await (handleUpdateLegalEntity == null ? void 0 : handleUpdateLegalEntity(
{
organization: {
type: targetOrganizationType
}
},
legalEntityResponse == null ? void 0 : legalEntityResponse.id
));
userEvents.addTaskEvent("Success", trackingPayload);
}
} catch {
showToast({ label: i18n.get("failedToUpdateDetails"), variant: "error" });
} finally {
setLoadingStatus("success");
onComplete(newAccountHolder);
}
};
const handleBackClick = () => {
if (currentStep === 2) {
setCurrentStep(
1
/* LEGAL_ARRANGEMENT_SELECTION */
);
}
if (currentStep === 1) {
setCurrentStep(
0
/* BUSINESS_TYPE_SELECTION */
);
}
if (currentStep === 0) {
onBack == null ? void 0 : onBack();
}
};
const isWeCannotSetUpAccountStep = currentStep === 2;
const businessTypeExamples2 = useBusinessTypeExamples(country);
const legalArrangementTypeExamples2 = useLegalArrangementTypeExamples(country);
return /* @__PURE__ */ jsx(LoaderWrapper, { status: loadingStatus, formOpacityWhenLoading: 0.3, showSpinner: false, children: /* @__PURE__ */ jsxs("div", { className: "adyen-kyc-business-type-selection", children: [
/* @__PURE__ */ jsxs("header", { className: "adyen-kyc-u-margin-bottom-32", children: [
/* @__PURE__ */ jsx(Typography, { el: "h2", variant: "title-m", children: i18n.get(businessTypeSelectionStepTitles[currentStep]) }),
currentStep === 3 && /* @__PURE__ */ jsx(Typography, { el: "p", variant: "title", children: i18n.get("someInformationWillNotBeSaved") })
] }),
currentStep === 0 && /* @__PURE__ */ jsx(
Field,
{
name: "businessType",
useLabelElement: false,
errorMessage: (_k = errors.businessType) == null ? void 0 : _k.errorMessage,
showErrorIconBottom: true,
isValid: valid.businessType,
children: (childProps) => {
var _a2;
return /* @__PURE__ */ jsx(
EntityTypeRadioGroupCard,
{
...childProps,
name: "businessType",
options: Object.keys(businessTypeMetadata),
optionId: (option) => businessTypeMetadata[option].id,
optionName: (option) => businessTypeMetadata[option].name,
optionDescription: (option) => businessTypeMetadata[option].description,
renderOptionIcon: BusinessTypeIcon,
selected: (_a2 = data.businessType) == null ? void 0 : _a2.id,
onSelect: (option) => handleChangeFor("businessType")(businessTypeMetadata[option]),
examples: businessTypeExamples2
}
);
}
}
),
currentStep === 1 && /* @__PURE__ */ jsxs(Fragment, { children: [
/* @__PURE__ */ jsx(
Field,
{
name: "legalArrangement",
useLabelElement: false,
errorMessage: (_l = errors.legalArrangement) == null ? void 0 : _l.errorMessage,
showErrorIconBottom: true,
isValid: valid.legalArrangement,
children: (childProps) => {
var _a2;
return /* @__PURE__ */ jsx(
EntityTypeRadioGroupCard,
{
...childProps,
name: "legalArrangement",
options: legalArrangementOptions,
optionId: (option) => legalArrangementMetadata[option].id,
optionName: (option) => legalArrangementMetadata[option].name,
optionDescription: (option) => legalArrangementMetadata[option].description,
selected: (_a2 = data.legalArrangement) == null ? void 0 : _a2.id,
onSelect: (option) => handleChangeFor("legalArrangement")(legalArrangementMetadata[option]),
examples: legalArrangementTypeExamples2
}
);
}
}
),
trustOrUnincorporatedPartnership && /* @__PURE__ */ jsx(
Field,
{
name: "trusteeType",
label: i18n.get(
((_m = data.legalArrangement) == null ? void 0 : _m.id) === "aTrust" ? "whatTypeOfTrusteeAreYou" : "whatTypeOfOPartnershipAreYou"
),
className: "adyen-kyc-u-margin-top-32",
useLabelElement: false,
errorMessage: (_n = errors.trusteeType) == null ? void 0 : _n.errorMessage,
showErrorIconBottom: true,
isValid: valid.trusteeType,
children: (childProps) => {
var _a2;
return /* @__PURE__ */ jsx(
RadioGroupCard,
{
...childProps,
className: "adyen-kyc-trustee-type-radio-group-card",
name: "trusteeType",
options: trusteeTypes,
optionId: (option) => trusteeTypeMetadata[option].id,
optionName: (option) => trusteeTypeMetadata[option].name,
selected: (_a2 = data.trusteeType) == null ? void 0 : _a2.id,
onSelect: (option) => handleChangeFor("trusteeType")(trusteeTypeMetadata[option])
}
);
}
}
)
] }),
isWeCannotSetUpAccountStep && /* @__PURE__ */ jsxs(Fragment, { children: [
/* @__PURE__ */ jsx("p", { children: i18n.get("ourFinancialServicesAreNotAvailableYetForPartnershipsAndAssociations") }),
/* @__PURE__ */ jsx("p", { className: "u-margin-top-32", children: i18n.get("needHelpYouCanAlwaysReachOutToCustomerSupport") })
] }),
currentStep === 3 ? /* @__PURE__ */ jsxs("div", { className: "adyen-kyc-business-type-selection__confirm", children: [
/* @__PURE__ */ jsx(
Button,
{
variant: "secondary",
onClick: () => setCurrentStep(
0
/* BUSINESS_TYPE_SELECTION */
),
children: i18n.get("cancel")
}
),
/* @__PURE__ */ jsx(Button, { onClick: () => updateLegalEntityAndSelectAccountHolder(), children: i18n.get("yesChange") })
] }) : /* @__PURE__ */ jsxs("div", { className: "adyen-kyc-business-type-selection__nav", children: [
hasBackButton && /* @__PURE__ */ jsx(Button, { onClick: handleBackClick, variant: "secondary", icon: "chevron-left", children: i18n.get("back") }),
/* @__PURE__ */ jsx(Spacer, {}),
!isWeCannotSetUpAccountStep && /* @__PURE__ */ jsx(
Button,
{
disabled: currentStep === 1 && !data.legalArrangement,
onClick: handleNextClick,
children: i18n.get("next")
}
)
] })
] }) });
};
export {
BusinessTypeSelection
};