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.

437 lines (436 loc) 21.9 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] = "8d072333-614c-4d09-9f9b-e5d6c5ef6bdc", e._sentryDebugIdIdentifier = "sentry-dbid-8d072333-614c-4d09-9f9b-e5d6c5ef6bdc"); } catch (e) {} import { i as Typography, o as createLogger, r as useTranslation } from "./translation-BYvhW5zA.js"; import { ft as useAccountHolder } from "./resolveEnvironment-DNmu53Rr.js"; import { r as Loader, t as Button } from "./Button-i8I2dHP8.js"; import { r as useLegalEntity, t as ROOT_LE } from "./useLegalEntity-CtlUQv_J.js"; import { t as LegalEntityTypes } from "./legal-entity-type-0MfCGzUf.js"; import { t as getLegalEntityCountry } from "./getLegalEntityCountry-BHh7Ux8v.js"; import { t as getCapabilities } from "./processCapabilities-fPuXc9gL.js"; import { i as useAnalyticsContext } from "./Modal-BLP2aF-u.js"; import { n as useToastContext } from "./invalidateRootLegalEntity-DLpPeD5p.js"; import { r as LoaderWrapper } from "./utils-C1buyvRw.js"; import { t as useUpdateLegalEntity } from "./useUpdateLegalEntity-B0XYfxbB.js"; import { t as useTaskLandedEvent } from "./useTaskLandedEvent-BXtOctC4.js"; import { t as Field } from "./Field-DoXLi6EY.js"; import { t as TileGroup } from "./TileGroup-DitwS4Ud.js"; import { t as useForm } from "./useForm-C5EykRLY.js"; import { t as Spacer } from "./Spacer-CEHRO4Ml.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-QZkZBg_Z.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-BG3-OqzL.js"), "../localized/legalEntityTypeExamples/AU.json": () => import("./AU-CcGu7r3p.js"), "../localized/legalEntityTypeExamples/BE.json": () => import("./BE-S2mx1KWp.js"), "../localized/legalEntityTypeExamples/BR.json": () => import("./BR-CZRoZyCm.js"), "../localized/legalEntityTypeExamples/CA.json": () => import("./CA-C_C9nVmL.js"), "../localized/legalEntityTypeExamples/CH.json": () => import("./CH-8VbtrnFA.js"), "../localized/legalEntityTypeExamples/CZ.json": () => import("./CZ-CG9NlpHx.js"), "../localized/legalEntityTypeExamples/DE.json": () => import("./DE-BX-_ptty.js"), "../localized/legalEntityTypeExamples/DK.json": () => import("./DK-B9lf0wLy.js"), "../localized/legalEntityTypeExamples/ES.json": () => import("./ES-IBdkjuIk.js"), "../localized/legalEntityTypeExamples/FI.json": () => import("./FI-C2Ehs0Cl.js"), "../localized/legalEntityTypeExamples/FR.json": () => import("./FR-B5uEo3fD.js"), "../localized/legalEntityTypeExamples/GB.json": () => import("./GB-tfbORrua.js"), "../localized/legalEntityTypeExamples/HK.json": () => import("./HK-DDKKwlVK.js"), "../localized/legalEntityTypeExamples/HR.json": () => import("./HR-DxBWHi9K.js"), "../localized/legalEntityTypeExamples/HU.json": () => import("./HU-BS5tTBem.js"), "../localized/legalEntityTypeExamples/IE.json": () => import("./IE-BB2lTAcu.js"), "../localized/legalEntityTypeExamples/IT.json": () => import("./IT-DwZn8LHj.js"), "../localized/legalEntityTypeExamples/LT.json": () => import("./LT-GP546RUy.js"), "../localized/legalEntityTypeExamples/NL.json": () => import("./NL-BosPsuiC.js"), "../localized/legalEntityTypeExamples/NO.json": () => import("./NO--AQKkHLW.js"), "../localized/legalEntityTypeExamples/PL.json": () => import("./PL-DasLrwsx.js"), "../localized/legalEntityTypeExamples/PT.json": () => import("./PT-C9aMzry5.js"), "../localized/legalEntityTypeExamples/RO.json": () => import("./RO-C_QrkrYl.js"), "../localized/legalEntityTypeExamples/SE.json": () => import("./SE-Ca_yLiKO.js"), "../localized/legalEntityTypeExamples/SG.json": () => import("./SG-BR0qm_Lu.js"), "../localized/legalEntityTypeExamples/SI.json": () => import("./SI-BxOiA06G.js"), "../localized/legalEntityTypeExamples/SK.json": () => import("./SK-B-_-RVXx.js"), "../localized/legalEntityTypeExamples/US.json": () => import("./US-CBUD9sMP.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-CaB9iU_v.js"), "../localized/legalArrangementTypeExamples/AU.json": () => import("./AU-B7Lwienf.js"), "../localized/legalArrangementTypeExamples/BE.json": () => import("./BE-BIPb3aCp.js"), "../localized/legalArrangementTypeExamples/BR.json": () => import("./BR-B6k-5VHk.js"), "../localized/legalArrangementTypeExamples/CA.json": () => import("./CA-BJlN0jtV.js"), "../localized/legalArrangementTypeExamples/CH.json": () => import("./CH-B0Z9FJR9.js"), "../localized/legalArrangementTypeExamples/CZ.json": () => import("./CZ-DD_9_zGY.js"), "../localized/legalArrangementTypeExamples/DE.json": () => import("./DE-BFenFnWV.js"), "../localized/legalArrangementTypeExamples/DK.json": () => import("./DK-EjkKz2GN.js"), "../localized/legalArrangementTypeExamples/ES.json": () => import("./ES-pbBXmvb6.js"), "../localized/legalArrangementTypeExamples/FI.json": () => import("./FI-K6KjFCWK.js"), "../localized/legalArrangementTypeExamples/FR.json": () => import("./FR-CQw_46PX.js"), "../localized/legalArrangementTypeExamples/GB.json": () => import("./GB-BDGKJSiZ.js"), "../localized/legalArrangementTypeExamples/HK.json": () => import("./HK-B4jzjZtL.js"), "../localized/legalArrangementTypeExamples/HR.json": () => import("./HR-DOktpDnh.js"), "../localized/legalArrangementTypeExamples/HU.json": () => import("./HU--SKUZPJ2.js"), "../localized/legalArrangementTypeExamples/IE.json": () => import("./IE-DOtxtX8R.js"), "../localized/legalArrangementTypeExamples/IT.json": () => import("./IT-CUgNzWLF.js"), "../localized/legalArrangementTypeExamples/LT.json": () => import("./LT-BkxAhfJz.js"), "../localized/legalArrangementTypeExamples/NL.json": () => import("./NL-DQew6XR-.js"), "../localized/legalArrangementTypeExamples/NO.json": () => import("./NO-CFh5Lkfr.js"), "../localized/legalArrangementTypeExamples/NZ.json": () => import("./NZ-DyVhIxBu.js"), "../localized/legalArrangementTypeExamples/PL.json": () => import("./PL-7-9sJ6je.js"), "../localized/legalArrangementTypeExamples/PT.json": () => import("./PT-DMEuvIu6.js"), "../localized/legalArrangementTypeExamples/RO.json": () => import("./RO-CJlQuJqy.js"), "../localized/legalArrangementTypeExamples/SE.json": () => import("./SE-U0u4yomj.js"), "../localized/legalArrangementTypeExamples/SG.json": () => import("./SG-ljx49JLF.js"), "../localized/legalArrangementTypeExamples/SI.json": () => import("./SI-CHQHMWZa.js"), "../localized/legalArrangementTypeExamples/SK.json": () => import("./SK-BPuPGFPo.js"), "../localized/legalArrangementTypeExamples/US.json": () => import("./US-CyRlJ_CX.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: "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: "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", { 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 };