@adyen/kyc-components/dist/Introduction-DIfncKsI.js

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.

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] = "f3bef103-e5d1-4c4a-a9d9-8aab4dbaca3d", e._sentryDebugIdIdentifier = "sentry-dbid-f3bef103-e5d1-4c4a-a9d9-8aab4dbaca3d");
} catch (e) {}
import { n as addResourceBundles, 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 useAnalyticsContext } from "./useAnalyticsContext-BVFDMrVE.js";
import { t as _rolldown_dynamic_import_helper_default } from "./_rolldown_dynamic_import_helper-rq_tsyLP.js";
import { p as TaskTypes } from "./entityAssociationUtil-BEzUdPbm.js";
import { n as useLegalEntityType, t as useCanSeeIntroduction } from "./useCanSeeIntroduction-ClAuT5gj.js";
import { t as useTaskLandedEvent } from "./useTaskLandedEvent-DInxWeqN.js";
import { t as StepProgressIndicator } from "./StepProgressIndicator-DWJ9eS5a.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/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: "adyen-kyc-introduction__number",
			children: number
		}),
		/* @__PURE__ */ jsx("div", {
			className: "adyen-kyc-introduction__title",
			children: t(($) => $[`introductionScreen${toPascalCase(introductionScreen)}Title`])
		}),
		/* @__PURE__ */ jsxs("div", {
			className: "adyen-kyc-introduction__description",
			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
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-BTOD22Qv.js"),
			"../language/introduction/cs-CZ.json": () => import("./cs-CZ-BewEGSI7.js"),
			"../language/introduction/da-DK.json": () => import("./da-DK-Cn-jl2Cb.js"),
			"../language/introduction/de-DE.json": () => import("./de-DE-Cfa03DOz.js"),
			"../language/introduction/el-GR.json": () => import("./el-GR-DOSF9KOE.js"),
			"../language/introduction/en-US.json": () => import("./en-US-sJXY3-OZ.js"),
			"../language/introduction/es-ES.json": () => import("./es-ES-C9ahP89x.js"),
			"../language/introduction/et-EE.json": () => import("./et-EE-ASxV620T.js"),
			"../language/introduction/fi-FI.json": () => import("./fi-FI-D1E8MJUW.js"),
			"../language/introduction/fr-FR.json": () => import("./fr-FR-06Yp4eGU.js"),
			"../language/introduction/hr-HR.json": () => import("./hr-HR-Cv9n6lNS.js"),
			"../language/introduction/hu-HU.json": () => import("./hu-HU-40vuNto8.js"),
			"../language/introduction/it-IT.json": () => import("./it-IT-gr7SB9fh.js"),
			"../language/introduction/ja-JP.json": () => import("./ja-JP-D9Doo4LH.js"),
			"../language/introduction/lt-LT.json": () => import("./lt-LT-BqS69oFX.js"),
			"../language/introduction/lv-LV.json": () => import("./lv-LV-BuCZvLms.js"),
			"../language/introduction/nl-NL.json": () => import("./nl-NL-B1KPiFMu.js"),
			"../language/introduction/no-NO.json": () => import("./no-NO-BurCBAor.js"),
			"../language/introduction/pl-PL.json": () => import("./pl-PL-KKlndUs-.js"),
			"../language/introduction/pt-BR.json": () => import("./pt-BR-Bo-lA5md.js"),
			"../language/introduction/pt-PT.json": () => import("./pt-PT-Bricv6v-.js"),
			"../language/introduction/ro-RO.json": () => import("./ro-RO-CkY9jVVi.js"),
			"../language/introduction/sk-SK.json": () => import("./sk-SK-BrbU8K0P.js"),
			"../language/introduction/sl-SI.json": () => import("./sl-SI-CrB2P-g-.js"),
			"../language/introduction/sv-SE.json": () => import("./sv-SE-DKvr6dhk.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: "adyen-kyc-introduction",
		children: [
			/* @__PURE__ */ jsx(StepProgressIndicator, {
				activeStepIndex: activeIndex + 1,
				stepsCount: introductionScreens.length
			}),
			/* @__PURE__ */ jsx("div", {
				className: "adyen-kyc-introduction__skip",
				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: "adyen-kyc-introduction__nav",
				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 };