UNPKG

@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.

440 lines (439 loc) 22 kB
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] = "408eb1ef-7197-4b9f-8a82-a97a4ad18b34", e._sentryDebugIdIdentifier = "sentry-dbid-408eb1ef-7197-4b9f-8a82-a97a4ad18b34"); } catch (e) {} import { i as Typography, o as createLogger, r as useTranslation } from "./translation-BFxyJ1c5.js"; import { r as Loader, t as Button } from "./Button-oj6H8OrC.js"; import { r as useLegalEntity, t as ROOT_LE } from "./useLegalEntity-yxi9XhLi.js"; import { t as LegalEntityTypes } from "./legal-entity-type-VIfNYnJP.js"; import { t as getLegalEntityCountry } from "./getLegalEntityCountry-C6bSV6sB.js"; import { t as useAccountHolder } from "./useAccountHolder-ClppK4-L.js"; import { t as useAnalyticsContext } from "./useAnalyticsContext-BVFDMrVE.js"; import { t as getCapabilities } from "./processCapabilities-DlZY9-Jc.js"; import { t as useToastContext } from "./useToastContext-CYgfHjSb.js"; import { t as LoaderWrapper } from "./LoaderWrapper-Dq8TNJCi.js"; import { t as useUpdateLegalEntity } from "./useUpdateLegalEntity-CtaRaKZ6.js"; import { t as useTaskLandedEvent } from "./useTaskLandedEvent-DInxWeqN.js"; import { t as Field } from "./Field-pcJkjIG_.js"; import { t as TileGroup } from "./TileGroup-D0YbtzZ0.js"; import { t as useForm } from "./useForm-pUkvCLc9.js"; import { t as Spacer } from "./Spacer-CvT0ELty.js"; import { a as getTargetLegalEntityType, c as useSelectionOptions, i as getDefaultLegalArrangementOrSuborganizationType, n as determineOrganizationTypeToUpdate, o as legalArrangementMetadata, r as getBusinessType, t as businessTypeIcons } from "./utils-BptSfkns.js"; import { useEffect, useState } from "preact/hooks"; import { Fragment, jsx, jsxs } from "preact/jsx-runtime"; //#region src/datasets/generators/getBusinessTypeExamplesForCountry.ts var businessTypeExamples = /* @__PURE__ */ Object.assign({ "../localized/legalEntityTypeExamples/AT.json": () => import("./AT-B4JuH6F8.js"), "../localized/legalEntityTypeExamples/AU.json": () => import("./AU-DOeJssMp.js"), "../localized/legalEntityTypeExamples/BE.json": () => import("./BE-B3tlw4UG.js"), "../localized/legalEntityTypeExamples/BR.json": () => import("./BR-C5-D6J2w.js"), "../localized/legalEntityTypeExamples/CA.json": () => import("./CA-CFR8sryt.js"), "../localized/legalEntityTypeExamples/CH.json": () => import("./CH-DXcxyFgB.js"), "../localized/legalEntityTypeExamples/CZ.json": () => import("./CZ-BGE7k-cb.js"), "../localized/legalEntityTypeExamples/DE.json": () => import("./DE-BB3kLAb1.js"), "../localized/legalEntityTypeExamples/DK.json": () => import("./DK-DSnMDq6I.js"), "../localized/legalEntityTypeExamples/ES.json": () => import("./ES-Y_7i9YXf.js"), "../localized/legalEntityTypeExamples/FI.json": () => import("./FI-BWqqCJsb.js"), "../localized/legalEntityTypeExamples/FR.json": () => import("./FR-D-sCwq5T.js"), "../localized/legalEntityTypeExamples/GB.json": () => import("./GB-BogW6TU0.js"), "../localized/legalEntityTypeExamples/HK.json": () => import("./HK-_r_OF-9C.js"), "../localized/legalEntityTypeExamples/HR.json": () => import("./HR-BCfmzAgq.js"), "../localized/legalEntityTypeExamples/HU.json": () => import("./HU-CXMDpfpO.js"), "../localized/legalEntityTypeExamples/IE.json": () => import("./IE-CzscvH5E.js"), "../localized/legalEntityTypeExamples/IT.json": () => import("./IT-DKj3BSzv.js"), "../localized/legalEntityTypeExamples/LT.json": () => import("./LT-BD32wyXh.js"), "../localized/legalEntityTypeExamples/NL.json": () => import("./NL-B5Jdha1b.js"), "../localized/legalEntityTypeExamples/NO.json": () => import("./NO-Cx28Ws5i.js"), "../localized/legalEntityTypeExamples/PL.json": () => import("./PL-DqbLsWwr.js"), "../localized/legalEntityTypeExamples/PT.json": () => import("./PT-JGHvjgoQ.js"), "../localized/legalEntityTypeExamples/RO.json": () => import("./RO-iqYS6MK1.js"), "../localized/legalEntityTypeExamples/SE.json": () => import("./SE-gc_M1IUS.js"), "../localized/legalEntityTypeExamples/SG.json": () => import("./SG-3-TYykP-.js"), "../localized/legalEntityTypeExamples/SI.json": () => import("./SI-CZicy3TO.js"), "../localized/legalEntityTypeExamples/SK.json": () => import("./SK-Cde9pJdY.js"), "../localized/legalEntityTypeExamples/US.json": () => import("./US-CqkPo4au.js") }); var logger$1 = createLogger(); var getBusinessTypeExamplesForCountry = async (country) => { const importForCountry = businessTypeExamples[`../localized/legalEntityTypeExamples/${country}.json`]; if (!importForCountry) { logger$1.warn(`No business type examples available for ${country}`); return {}; } return (await importForCountry()).default; }; var useBusinessTypeExamples = (country) => { const [examples, setExamples] = useState(); useEffect(() => { getBusinessTypeExamplesForCountry(country).then(setExamples).catch(console.error); }, [country]); return examples; }; //#endregion //#region src/datasets/generators/getLegalArrangementTypeExamplesForCountry.ts var legalArrangementTypeExamples = /* @__PURE__ */ Object.assign({ "../localized/legalArrangementTypeExamples/AT.json": () => import("./AT-4efjzVQd.js"), "../localized/legalArrangementTypeExamples/AU.json": () => import("./AU-BGwU-xk-.js"), "../localized/legalArrangementTypeExamples/BE.json": () => import("./BE-ByqDiJVH.js"), "../localized/legalArrangementTypeExamples/BR.json": () => import("./BR-Dj4uKD4L.js"), "../localized/legalArrangementTypeExamples/CA.json": () => import("./CA-CPN5GIEi.js"), "../localized/legalArrangementTypeExamples/CH.json": () => import("./CH-HLgQqF6w.js"), "../localized/legalArrangementTypeExamples/CZ.json": () => import("./CZ-Dja4qwcT.js"), "../localized/legalArrangementTypeExamples/DE.json": () => import("./DE-B5hlvfaz.js"), "../localized/legalArrangementTypeExamples/DK.json": () => import("./DK-eIIuE_Ae.js"), "../localized/legalArrangementTypeExamples/ES.json": () => import("./ES-DeyB_elh.js"), "../localized/legalArrangementTypeExamples/FI.json": () => import("./FI-MY2FM2Ba.js"), "../localized/legalArrangementTypeExamples/FR.json": () => import("./FR-uHAf38N_.js"), "../localized/legalArrangementTypeExamples/GB.json": () => import("./GB-D9JlI1Pd.js"), "../localized/legalArrangementTypeExamples/HK.json": () => import("./HK-sOnb583U.js"), "../localized/legalArrangementTypeExamples/HR.json": () => import("./HR-BDdXb-_o.js"), "../localized/legalArrangementTypeExamples/HU.json": () => import("./HU-DNz6LyOy.js"), "../localized/legalArrangementTypeExamples/IE.json": () => import("./IE-DQX622ez.js"), "../localized/legalArrangementTypeExamples/IT.json": () => import("./IT-fTjXyL20.js"), "../localized/legalArrangementTypeExamples/LT.json": () => import("./LT-CnQZpkC8.js"), "../localized/legalArrangementTypeExamples/NL.json": () => import("./NL-B4viFWts.js"), "../localized/legalArrangementTypeExamples/NO.json": () => import("./NO-H-zekTG-.js"), "../localized/legalArrangementTypeExamples/NZ.json": () => import("./NZ-3UV4o2z9.js"), "../localized/legalArrangementTypeExamples/PL.json": () => import("./PL-B-r78jqe.js"), "../localized/legalArrangementTypeExamples/PT.json": () => import("./PT-DD2rFBMf.js"), "../localized/legalArrangementTypeExamples/RO.json": () => import("./RO-2Z925JkN.js"), "../localized/legalArrangementTypeExamples/SE.json": () => import("./SE-B9Ci8NDi.js"), "../localized/legalArrangementTypeExamples/SG.json": () => import("./SG-DqvdUiWw.js"), "../localized/legalArrangementTypeExamples/SI.json": () => import("./SI-HuUerVbj.js"), "../localized/legalArrangementTypeExamples/SK.json": () => import("./SK-MOEK5YmF.js"), "../localized/legalArrangementTypeExamples/US.json": () => import("./US-DqKhjxWO.js") }); var logger = createLogger(); var getLegalArrangementTypeExamplesForCountry = async (country) => { const importForCountry = legalArrangementTypeExamples[`../localized/legalArrangementTypeExamples/${country}.json`]; if (!importForCountry) { logger.warn(`No legal arrangement type examples available for ${country}`); return {}; } return (await importForCountry()).default; }; var useLegalArrangementTypeExamples = (country) => { const [examples, setExamples] = useState(); useEffect(() => { getLegalArrangementTypeExamplesForCountry(country).then(setExamples).catch(console.error); }, [country]); return examples; }; //#endregion //#region src/components/Shared/forms/BusinessTypeSelection/types.ts var trusteeTypes = ["individual", "company"]; //#endregion //#region src/components/Shared/forms/BusinessTypeSelection/BusinessTypeSelection.tsx var trusteeTypeMetadata = { individual: { id: "individual", name: "individualMember" }, company: { id: "company", name: "companyMember" } }; var getFormSchema = (isLegalArrangement, isTrust) => { const schema = ["businessType"]; if (isLegalArrangement) schema.push("legalArrangement"); if (isTrust) schema.push("trusteeType"); return schema; }; var 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" } }; var BusinessTypeSelectionSteps = { BUSINESS_TYPE_SELECTION: 0, LEGAL_ARRANGEMENT_SELECTION: 1, WE_CANNOT_SET_UP_ACCOUNT: 2, CONFIRM_BUSINESS_SETUP_CHANGE: 3 }; var businessTypeSelectionStepTitles = { [BusinessTypeSelectionSteps.BUSINESS_TYPE_SELECTION]: "whatBestDescribesYourBusinessSetup", [BusinessTypeSelectionSteps.LEGAL_ARRANGEMENT_SELECTION]: "whichLegalArrangementDoesYourBusinessHave", [BusinessTypeSelectionSteps.WE_CANNOT_SET_UP_ACCOUNT]: "sorryWeCantSetUpAnAccountForYou", [BusinessTypeSelectionSteps.CONFIRM_BUSINESS_SETUP_CHANGE]: "changeYourBusinessSetup" }; var BusinessTypeSelection = ({ rootLegalEntity, onComplete, onBack }) => { const { t } = useTranslation("common"); const userEvents = useAnalyticsContext(); const { showToast } = useToastContext(); const { accountHolder } = useAccountHolder(); const [loadingStatus, setLoadingStatus] = useState(); const [currentStep, setCurrentStep] = useState(BusinessTypeSelectionSteps.BUSINESS_TYPE_SELECTION); const [formSchema, setFormSchema] = useState(["businessType"]); const { mutateAsync: updateLegalEntity } = useUpdateLegalEntity(); const hasBackButton = currentStep === BusinessTypeSelectionSteps.LEGAL_ARRANGEMENT_SELECTION || currentStep === BusinessTypeSelectionSteps.WE_CANNOT_SET_UP_ACCOUNT || currentStep === BusinessTypeSelectionSteps.BUSINESS_TYPE_SELECTION && Boolean(onBack); const { legalArrangementOptions, adjustedBusinessTypeMetadata: businessTypeMetadata } = useSelectionOptions(rootLegalEntity); const currentLegalEntityType = rootLegalEntity.type; const currentCompanyTypesValue = rootLegalEntity.organization?.type; const capabilities = getCapabilities(rootLegalEntity); const country = getLegalEntityCountry(rootLegalEntity); const defaultBusinessType = getBusinessType(businessTypeMetadata, country, accountHolder, rootLegalEntity.type, rootLegalEntity.organization?.type, capabilities); const defaultLegalArrangementType = legalArrangementOptions.find((item) => item === getDefaultLegalArrangementOrSuborganizationType(rootLegalEntity, accountHolder)); const defaultTrusteeType = rootLegalEntity.type === LegalEntityTypes.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 = data.businessType?.accountHolder || data.legalArrangement?.accountHolder; const targetLegalArrangement = data.legalArrangement?.id; const isTrust = targetLegalArrangement === "aTrust"; const isUnincorporatedPartnership = targetLegalArrangement === "partnershipUnincorporated"; const trustOrUnincorporatedPartnership = isTrust || isUnincorporatedPartnership; const targetLegalEntityType = getTargetLegalEntityType(data.businessType?.id, data.legalArrangement?.id, data.trusteeType?.id, rootLegalEntity.type); const isLegalEntityTypeChanging = currentLegalEntityType !== targetLegalEntityType; const isLegalArrangementChanging = currentCompanyTypesValue !== targetLegalArrangement; useEffect(() => { setFormSchema(getFormSchema(data.businessType?.id === "legalArrangement" && !!data.legalArrangement || currentStep === BusinessTypeSelectionSteps.LEGAL_ARRANGEMENT_SELECTION, trustOrUnincorporatedPartnership)); }, [ data.businessType, data.legalArrangement, currentStep, trustOrUnincorporatedPartnership ]); /** * Analytics */ useTaskLandedEvent("BUSINESS_TYPE_SELECTION"); const handleNextClick = async () => { if (loadingStatus === "loading") return; triggerValidation(); if (isValid) { userEvents.addPageEvent("Clicked button", { actionType: "next" }); if (data.businessType?.id === "legalArrangement") { if (currentStep !== BusinessTypeSelectionSteps.LEGAL_ARRANGEMENT_SELECTION) { setCurrentStep(BusinessTypeSelectionSteps.LEGAL_ARRANGEMENT_SELECTION); return; } } if (newAccountHolder !== accountHolder || isLegalEntityTypeChanging) { if (accountHolder) { setCurrentStep(BusinessTypeSelectionSteps.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"); await updateLegalEntity({ id: rootLegalEntity.id, type: targetLegalEntityType }); userEvents.addTaskEvent("Success", trackingPayload); } if (targetLegalEntityType === LegalEntityTypes.INDIVIDUAL) { if (rootLegalEntity.entityAssociations?.length) { setLoadingStatus("loading"); await updateLegalEntity({ id: rootLegalEntity.id, entityAssociations: [] }); userEvents.addTaskEvent("Success", trackingPayload); } return; } const targetOrganizationType = determineOrganizationTypeToUpdate(targetLegalArrangement, currentCompanyTypesValue); if (targetOrganizationType !== void 0) { await updateLegalEntity?.({ organization: { type: targetOrganizationType }, id: rootLegalEntity.id }); userEvents.addTaskEvent("Success", trackingPayload); } if (!targetLegalArrangement && defaultLegalArrangementType) { await updateLegalEntity?.({ entityAssociations: [], id: rootLegalEntity.id }); userEvents.addTaskEvent("Success", trackingPayload); } } catch { showToast({ label: t(($) => $["failedToUpdateDetails"]), variant: "error" }); } finally { setLoadingStatus("success"); onComplete(newAccountHolder); } }; const handleBackClick = () => { if (currentStep === BusinessTypeSelectionSteps.WE_CANNOT_SET_UP_ACCOUNT) setCurrentStep(BusinessTypeSelectionSteps.LEGAL_ARRANGEMENT_SELECTION); if (currentStep === BusinessTypeSelectionSteps.LEGAL_ARRANGEMENT_SELECTION) setCurrentStep(BusinessTypeSelectionSteps.BUSINESS_TYPE_SELECTION); if (currentStep === BusinessTypeSelectionSteps.BUSINESS_TYPE_SELECTION) onBack?.(); }; const isWeCannotSetUpAccountStep = currentStep === BusinessTypeSelectionSteps.WE_CANNOT_SET_UP_ACCOUNT; const businessTypeExamples = useBusinessTypeExamples(country); const businessTiles = Object.keys(businessTypeMetadata).map((option) => { const description = t(($) => $[businessTypeMetadata[option].description]); const examples = businessTypeExamples?.[option]; const subTitle = examples ? `${description} ${t(($) => $["forExample_"], { examples: examples.join(", "), interpolation: { escapeValue: false }, ns: "ui" })}` : description; return { value: option, label: t(($) => $[businessTypeMetadata[option].name]), subTitle, icon: businessTypeIcons[option] }; }); const legalArrangementTypeExamples = useLegalArrangementTypeExamples(country); return /* @__PURE__ */ jsx(LoaderWrapper, { status: loadingStatus, formOpacityWhenLoading: .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: t(($) => $[businessTypeSelectionStepTitles[currentStep]]) }), currentStep === BusinessTypeSelectionSteps.CONFIRM_BUSINESS_SETUP_CHANGE && /* @__PURE__ */ jsx(Typography, { el: "p", variant: "title", children: t(($) => $["someInformationWillNotBeSaved"]) })] }), currentStep === BusinessTypeSelectionSteps.BUSINESS_TYPE_SELECTION && /* @__PURE__ */ jsx(Field, { el: "fieldset", name: "businessType", errorMessage: errors.businessType?.errorMessage, showErrorIconBottom: true, isValid: valid.businessType, children: (childProps) => /* @__PURE__ */ jsx(TileGroup, { ...childProps, name: "businessType", tiles: businessTiles, selected: data.businessType?.id ?? "", onChange: (value) => handleChangeFor("businessType")(businessTypeMetadata[value]), isHorizontal: true }) }), currentStep === BusinessTypeSelectionSteps.LEGAL_ARRANGEMENT_SELECTION && /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx(Field, { name: "legalArrangement", el: "fieldset", errorMessage: errors.legalArrangement?.errorMessage, showErrorIconBottom: true, isValid: valid.legalArrangement, children: (childProps) => /* @__PURE__ */ jsx(TileGroup, { ...childProps, name: "legalArrangement", tiles: legalArrangementOptions.map((option) => { const description = t(($) => $[legalArrangementMetadata[option].description]); const examples = legalArrangementTypeExamples?.[option]; const subTitle = examples ? `${description} (${t(($) => $["forExample_"], { examples: examples.join(", "), interpolation: { escapeValue: false }, ns: "ui" })})` : description; return { value: option, label: t(($) => $[legalArrangementMetadata[option].name]), subTitle }; }), selected: data.legalArrangement?.id ?? "", onChange: (value) => handleChangeFor("legalArrangement")(legalArrangementMetadata[value]), isHorizontal: true }) }), trustOrUnincorporatedPartnership && /* @__PURE__ */ jsx(Field, { el: "fieldset", name: "trusteeType", label: t(($) => $[isTrust ? "whatTypeOfTrusteeAreYou" : "whatTypeOfPartnershipAreYou"]), helper: isUnincorporatedPartnership ? t(($) => $["whatTypeOfPartnershipAreYouGuidance"]) : void 0, className: "adyen-kyc-u-margin-top-32", errorMessage: errors.trusteeType?.errorMessage, showErrorIconBottom: true, isValid: valid.trusteeType, children: (childProps) => /* @__PURE__ */ jsx(TileGroup, { ...childProps, name: "trusteeType", tiles: trusteeTypes.map((option) => ({ value: option, label: t(($) => $[trusteeTypeMetadata[option].name]) })), selected: data.trusteeType?.id ?? "", onChange: (value) => handleChangeFor("trusteeType")(trusteeTypeMetadata[value]), isHorizontal: true }) })] }), isWeCannotSetUpAccountStep && /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx("p", { children: t(($) => $["ourFinancialServicesAreNotAvailableYetForPartnershipsAndAssociations"]) }), /* @__PURE__ */ jsx("p", { className: "u-margin-top-32", children: t(($) => $["needHelpYouCanAlwaysReachOutToCustomerSupport"]) })] }), currentStep === BusinessTypeSelectionSteps.CONFIRM_BUSINESS_SETUP_CHANGE ? /* @__PURE__ */ jsxs("div", { className: "adyen-kyc-business-type-selection__confirm", children: [/* @__PURE__ */ jsx(Button, { variant: "secondary", onClick: () => setCurrentStep(BusinessTypeSelectionSteps.BUSINESS_TYPE_SELECTION), children: t(($) => $["cancel"]) }), /* @__PURE__ */ jsx(Button, { onClick: () => updateLegalEntityAndSelectAccountHolder(), children: t(($) => $["yesChange"]) })] }) : /* @__PURE__ */ jsxs("div", { className: "adyen-kyc-business-type-selection__nav", children: [ hasBackButton && /* @__PURE__ */ jsx(Button, { onClick: handleBackClick, variant: "secondary", icon: "chevron-left", children: t(($) => $["back"]) }), /* @__PURE__ */ jsx(Spacer, {}), !isWeCannotSetUpAccountStep && /* @__PURE__ */ jsx(Button, { disabled: currentStep === BusinessTypeSelectionSteps.LEGAL_ARRANGEMENT_SELECTION && !data.legalArrangement, onClick: handleNextClick, children: t(($) => $["continue"]) }) ] }) ] }) }); }; //#endregion //#region src/components/Shared/pages/BusinessTypeSelectionPage.tsx var BusinessTypeSelectionPage = ({ onComplete, onBack }) => { const { data: rootLe, isLoading } = useLegalEntity(ROOT_LE); if (isLoading || !rootLe) return /* @__PURE__ */ jsx(Loader, {}); return /* @__PURE__ */ jsx(BusinessTypeSelection, { onComplete, onBack, rootLegalEntity: rootLe }); }; //#endregion export { BusinessTypeSelectionPage };