@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.
327 lines (326 loc) • 14.4 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] = "3c325c45-fb70-45a5-8e93-167b10251288", e._sentryDebugIdIdentifier = "sentry-dbid-3c325c45-fb70-45a5-8e93-167b10251288");
} catch (e) {}
import { n as addResourceBundles, r as useTranslation } from "./translation-BYvhW5zA.js";
import { A as _rolldown_dynamic_import_helper_default } 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 TaskTypes } from "./taskTypes-NawDTp5n.js";
import { i as useAnalyticsContext } from "./Modal-BLP2aF-u.js";
import { n as useLegalEntityType, t as useCanSeeIntroduction } from "./useCanSeeIntroduction-DeC5D9Io.js";
import { t as useTaskLandedEvent } from "./useTaskLandedEvent-BXtOctC4.js";
import { useMemo } from "preact/compat";
import { useEffect as useEffect$1, useState as useState$1 } from "preact/hooks";
import { Fragment as Fragment$1, jsx, jsxs } from "preact/jsx-runtime";
//#region src/components/Shared/Introduction/types.ts
var IntroductionScreens = {
PROLOGUE: "PROLOGUE",
INDIVIDUAL: TaskTypes.INDIVIDUAL,
DECISION_MAKER: TaskTypes.DECISION_MAKER,
SOLE_PROPRIETOR_COMPANY: TaskTypes.SOLE_PROPRIETOR_COMPANY,
TRUST: TaskTypes.TRUST,
TRUST_MEMBER: TaskTypes.TRUST_MEMBER,
ACCOUNT: "ACCOUNT",
EPILOGUE: "EPILOGUE"
};
//#endregion
//#region src/components/Shared/Introduction/constants.ts
var introductionScreensByLegalEntityType = {
[LegalEntityTypes.INDIVIDUAL]: [
IntroductionScreens.PROLOGUE,
IntroductionScreens.INDIVIDUAL,
IntroductionScreens.ACCOUNT,
IntroductionScreens.EPILOGUE
],
[LegalEntityTypes.ORGANIZATION]: [
IntroductionScreens.PROLOGUE,
IntroductionScreens.DECISION_MAKER,
IntroductionScreens.ACCOUNT,
IntroductionScreens.EPILOGUE
],
[LegalEntityTypes.SOLE_PROPRIETORSHIP]: [
IntroductionScreens.PROLOGUE,
IntroductionScreens.INDIVIDUAL,
IntroductionScreens.SOLE_PROPRIETOR_COMPANY,
IntroductionScreens.ACCOUNT,
IntroductionScreens.EPILOGUE
],
[LegalEntityTypes.TRUST]: [
IntroductionScreens.PROLOGUE,
IntroductionScreens.INDIVIDUAL,
IntroductionScreens.DECISION_MAKER,
IntroductionScreens.TRUST,
IntroductionScreens.TRUST_MEMBER,
IntroductionScreens.ACCOUNT,
IntroductionScreens.EPILOGUE
],
[LegalEntityTypes.UNINCORPORATED_PARTNERSHIP]: [
IntroductionScreens.PROLOGUE,
IntroductionScreens.INDIVIDUAL,
IntroductionScreens.DECISION_MAKER,
IntroductionScreens.TRUST,
IntroductionScreens.TRUST_MEMBER,
IntroductionScreens.ACCOUNT,
IntroductionScreens.EPILOGUE
]
};
//#endregion
//#region src/hooks/introduction/useIntroductionScreens.ts
var useIntroductionScreens = ({ legalEntity, tasks }) => {
const canSeeIntroduction = useCanSeeIntroduction({ legalEntity });
const legalEntityType = useLegalEntityType({ legalEntity });
const introductionScreens = useMemo(() => legalEntityType ? introductionScreensByLegalEntityType[legalEntityType].filter((screen) => {
const isAccountScreen = screen === IntroductionScreens.ACCOUNT;
const hasAccountTask = tasks.includes(TaskTypes.PAYIN) || tasks.includes(TaskTypes.PAYOUT);
const isSoleProprietorScreen = screen === IntroductionScreens.SOLE_PROPRIETOR_COMPANY;
const isSoleProprietor = legalEntityType === LegalEntityTypes.SOLE_PROPRIETORSHIP;
const isTrustScreen = screen === IntroductionScreens.TRUST || screen === IntroductionScreens.TRUST_MEMBER;
const isTrust = legalEntityType === LegalEntityTypes.TRUST;
if (isAccountScreen) return hasAccountTask;
if (isSoleProprietorScreen) return isSoleProprietor;
if (isTrustScreen) return isTrust;
return tasks.some((task) => screen === task);
}) : [], [legalEntityType, tasks]);
return canSeeIntroduction && introductionScreens?.length > 0 ? [
IntroductionScreens.PROLOGUE,
...introductionScreens,
IntroductionScreens.EPILOGUE
] : void 0;
};
//#endregion
//#region src/utils/range.ts
/**
* Create a range of numbers
* @param {number} start The first number in the range
* @param {number} stop The last number in the range
* @param {number} step The step between each number in the range
* @returns {number[]} A range of numbers
*/
var range = (stop, start = 0, step = 1) => Array.from({ length: (stop - start) / step + 1 }, (_, i) => start + i * step);
var Introduction_module_default = {
intro: "_intro_11rpf_1",
"intro-skip": "_intro-skip_11rpf_12",
introSkip: "_intro-skip_11rpf_12",
"intro-number": "_intro-number_11rpf_16",
introNumber: "_intro-number_11rpf_16",
"intro-title": "_intro-title_11rpf_28",
introTitle: "_intro-title_11rpf_28",
"intro-description": "_intro-description_11rpf_35",
introDescription: "_intro-description_11rpf_35",
"intro-nav": "_intro-nav_11rpf_60",
introNav: "_intro-nav_11rpf_60",
progress: "_progress_11rpf_70",
"progress-bar": "_progress-bar_11rpf_74",
progressBar: "_progress-bar_11rpf_74",
"progress-step": "_progress-step_11rpf_82",
progressStep: "_progress-step_11rpf_82",
"progress-step-active": "_progress-step-active_11rpf_89",
progressStepActive: "_progress-step-active_11rpf_89"
};
//#endregion
//#region src/utils/toCapitalized.ts
var toCapitalized = (s) => `${s[0].toUpperCase()}${s.slice(1).toLowerCase()}`;
//#endregion
//#region src/utils/toPascalCase.ts
var toPascalCase = (s) => s.split(/[^A-Za-z]/).map((word) => toCapitalized(word)).join("");
//#endregion
//#region src/components/Shared/Introduction/copy.tsx
var IntroductionScreenTranslationKeyElements = {
ListItem: "LI",
Paragraph: "P"
};
var getIntroductionScreenTranslationKeys = (factors, i18n) => {
const introductionStrings = i18n.getResourceBundle(i18n.language, "introduction");
if (!introductionStrings || !factors.legalEntityType) return;
const elForKey = (factors.elementType || "").toUpperCase();
const lForKey = toPascalCase(factors.legalEntityType || "");
const iForKey = toPascalCase(factors.introductionScreen);
const keyPrefix = `introductionScreen${iForKey}Description${elForKey}`;
const keyPrefixWithL = `introductionScreen${iForKey}${lForKey}Description${elForKey}`;
const keys = Object.keys(introductionStrings).filter((key) => key.startsWith(keyPrefix));
const keysWithL = Object.keys(introductionStrings).filter((key) => key.startsWith(keyPrefixWithL));
return (keysWithL.length ? keysWithL : keys).sort((a, b) => Number(a.at(-1)) - Number(b.at(-1)));
};
//#endregion
//#region src/components/Shared/Introduction/IntroductionScreen.tsx
var IntroductionScreen = ({ introductionScreen, legalEntity, number }) => {
const { t, i18n } = useTranslation("introduction");
const legalEntityType = useLegalEntityType({ legalEntity });
const paragraphKeys = getIntroductionScreenTranslationKeys({
introductionScreen,
legalEntityType,
elementType: IntroductionScreenTranslationKeyElements.Paragraph
}, i18n);
const listItemKeys = getIntroductionScreenTranslationKeys({
introductionScreen,
legalEntityType,
elementType: IntroductionScreenTranslationKeyElements.ListItem
}, i18n);
return /* @__PURE__ */ jsxs(Fragment$1, { children: [
/* @__PURE__ */ jsx("div", {
className: Introduction_module_default.introNumber,
children: number
}),
/* @__PURE__ */ jsx("div", {
className: Introduction_module_default.introTitle,
children: t(($) => $[`introductionScreen${toPascalCase(introductionScreen)}Title`])
}),
/* @__PURE__ */ jsxs("div", {
className: Introduction_module_default.introDescription,
children: [!!paragraphKeys?.length && paragraphKeys.map((key) => /* @__PURE__ */ jsx("p", { children: t(($) => $[key]) }, key)), !!listItemKeys?.length && /* @__PURE__ */ jsx("ul", { children: listItemKeys.map((key) => /* @__PURE__ */ jsx("li", { children: t(($) => $[key]) }, key)) })]
})
] });
};
//#endregion
//#region src/components/Shared/Introduction/Introduction.tsx
var StepProgressIndicator = ({ activeStepIndex, stepsCount }) => {
const { t } = useTranslation("ui");
return /* @__PURE__ */ jsx("div", {
"aria-label": t(($) => $["stepXofY"], {
currentStep: activeStepIndex,
totalSteps: stepsCount
}),
className: Introduction_module_default.progress,
role: "group",
children: /* @__PURE__ */ jsx("ol", {
className: Introduction_module_default.progressBar,
children: range(stepsCount).map((stepNumber) => /* @__PURE__ */ jsx("li", {
"aria-current": activeStepIndex === stepNumber ? "step" : void 0,
className: `${Introduction_module_default.progressStep}${activeStepIndex === stepNumber ? ` ${Introduction_module_default.progressStepActive}` : ""}`,
children: /* @__PURE__ */ jsx("span", {
className: "u-screen-reader-only",
children: t(($) => $["stepNumberStatus"], {
stepNumber,
status: t(($) => $[stepNumber < activeStepIndex ? "completed" : "notCompleted"])
})
})
}, stepNumber))
})
});
};
function Introduction({ onExitIntroduction, tasks }) {
const { data: rootLe, isLoading } = useLegalEntity(ROOT_LE);
const { i18n } = useTranslation();
addResourceBundles(i18n, [{
ns: "introduction",
importFn: (lang) => _rolldown_dynamic_import_helper_default(/* @__PURE__ */ Object.assign({
"../language/introduction/bg-BG.json": () => import("./bg-BG-BpPjqqen.js"),
"../language/introduction/cs-CZ.json": () => import("./cs-CZ-CfiYuMi0.js"),
"../language/introduction/da-DK.json": () => import("./da-DK-NCs7m8qy.js"),
"../language/introduction/de-DE.json": () => import("./de-DE-CT8rn19_.js"),
"../language/introduction/el-GR.json": () => import("./el-GR-BfKp5abT.js"),
"../language/introduction/en-US.json": () => import("./en-US-DXLqOZX1.js"),
"../language/introduction/es-ES.json": () => import("./es-ES-Dbsez-nt.js"),
"../language/introduction/es-LA.json": () => import("./es-LA-BDxay2SJ.js"),
"../language/introduction/et-EE.json": () => import("./et-EE-BEKmKSGB.js"),
"../language/introduction/fi-FI.json": () => import("./fi-FI-B3azKh_D.js"),
"../language/introduction/fr-FR.json": () => import("./fr-FR-BRin5m9T.js"),
"../language/introduction/hr-HR.json": () => import("./hr-HR-BcuZOdbx.js"),
"../language/introduction/hu-HU.json": () => import("./hu-HU-CaDVfAld.js"),
"../language/introduction/it-IT.json": () => import("./it-IT-C2dB9OJn.js"),
"../language/introduction/ja-JP.json": () => import("./ja-JP-7zkrWB8G.js"),
"../language/introduction/lt-LT.json": () => import("./lt-LT-D0eqQspB.js"),
"../language/introduction/lv-LV.json": () => import("./lv-LV-Bm8LrJoB.js"),
"../language/introduction/nl-NL.json": () => import("./nl-NL-BO-bzIOE.js"),
"../language/introduction/no-NO.json": () => import("./no-NO-BsTJeq1r.js"),
"../language/introduction/pl-PL.json": () => import("./pl-PL-C860xjSa.js"),
"../language/introduction/pt-BR.json": () => import("./pt-BR-DtyxSlwY.js"),
"../language/introduction/pt-PT.json": () => import("./pt-PT-BZa5DvLf.js"),
"../language/introduction/ro-RO.json": () => import("./ro-RO-rUQBJ_rV.js"),
"../language/introduction/sk-SK.json": () => import("./sk-SK-TwqCzMtZ.js"),
"../language/introduction/sl-SI.json": () => import("./sl-SI-DF6_X7op.js"),
"../language/introduction/sv-SE.json": () => import("./sv-SE-D05i0X2z.js")
}), `../language/introduction/${lang}.json`, 4)
}]);
if (isLoading || !rootLe) return /* @__PURE__ */ jsx(Loader, { size: "large" });
return /* @__PURE__ */ jsx(IntroductionInner, {
legalEntity: rootLe,
onExitIntroduction,
tasks
});
}
var IntroductionInner = ({ legalEntity, onExitIntroduction, tasks }) => {
const { t } = useTranslation(["common", "introduction"]);
const userEvents = useAnalyticsContext();
const introductionScreens = useIntroductionScreens({
legalEntity,
tasks
});
const [activeIndex, setActiveIndex] = useState$1(0);
const pageEventDetails = { page: introductionScreens?.length ? introductionScreens[activeIndex] : void 0 };
/**
* Analytics
*/
useTaskLandedEvent("INTRODUCTION");
useEffect$1(() => {
if (!introductionScreens?.length) onExitIntroduction();
}, [introductionScreens, onExitIntroduction]);
return introductionScreens?.length ? /* @__PURE__ */ jsxs("div", {
className: Introduction_module_default.intro,
children: [
/* @__PURE__ */ jsx(StepProgressIndicator, {
activeStepIndex: activeIndex + 1,
stepsCount: introductionScreens.length
}),
/* @__PURE__ */ jsx("div", {
className: Introduction_module_default.introSkip,
children: /* @__PURE__ */ jsx(Button, {
onClick: () => {
userEvents.addPageEvent("Clicked button", {
...pageEventDetails,
actionType: "skip",
label: "goToOverviewFromIntroduction"
});
onExitIntroduction();
},
variant: "link",
children: t(($) => $["goToOverviewFromIntroduction"], { ns: "introduction" })
})
}),
/* @__PURE__ */ jsx(IntroductionScreen, {
introductionScreen: introductionScreens[activeIndex],
legalEntity,
number: activeIndex > 0 && activeIndex < introductionScreens.length - 1 ? activeIndex : void 0
}, introductionScreens[activeIndex]),
/* @__PURE__ */ jsxs("div", {
className: Introduction_module_default.introNav,
children: [/* @__PURE__ */ jsx(Button, {
disabled: activeIndex === 0,
onClick: () => {
userEvents.addPageEvent("Clicked button", {
...pageEventDetails,
actionType: "back",
label: "back"
});
setActiveIndex((currentValue) => currentValue - 1);
},
variant: "secondary",
children: t(($) => $["back"])
}), activeIndex + 1 === introductionScreens.length ? /* @__PURE__ */ jsx(Button, {
onClick: () => {
userEvents.addTaskEvent("Success", {
actionType: "submit",
label: "start"
});
onExitIntroduction();
},
children: t(($) => $["start"])
}) : /* @__PURE__ */ jsx(Button, {
onClick: () => {
userEvents.addPageEvent("Clicked button", {
...pageEventDetails,
actionType: "next",
label: "next"
});
setActiveIndex((currentValue) => currentValue + 1);
},
children: t(($) => $["continue"])
})]
})
]
}) : null;
};
//#endregion
export { Introduction };