@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
244 lines (243 loc) • 10.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] = "baab4e5f-5630-44d5-8895-874ce1490171", e._sentryDebugIdIdentifier = "sentry-dbid-baab4e5f-5630-44d5-8895-874ce1490171");
} catch (e) {
}
}
;
import { jsxs, Fragment, jsx } from "preact/jsx-runtime";
import { useMemo as useMemo$1, useState, useEffect } from "preact/hooks";
import { i as TaskTypes, L as LegalEntityType, j as useCanSeeIntroduction, k as useLegalEntityType, t as toCapitalized, m as getTranslationKeysByPrefix, u as useI18nContext, n as useAnalyticsContext, o as StepProgressIndicator, B as Button } from "./core-B_WrZP-J.js";
import { useMemo } from "preact/compat";
var IntroductionScreens = ((IntroductionScreens2) => {
IntroductionScreens2["PROLOGUE"] = "PROLOGUE";
IntroductionScreens2[IntroductionScreens2["INDIVIDUAL"] = TaskTypes.INDIVIDUAL] = "INDIVIDUAL";
IntroductionScreens2[IntroductionScreens2["DECISION_MAKER"] = TaskTypes.DECISION_MAKER] = "DECISION_MAKER";
IntroductionScreens2[IntroductionScreens2["SOLE_PROPRIETOR_COMPANY"] = TaskTypes.SOLE_PROPRIETOR_COMPANY] = "SOLE_PROPRIETOR_COMPANY";
IntroductionScreens2[IntroductionScreens2["TRUST"] = TaskTypes.TRUST] = "TRUST";
IntroductionScreens2[IntroductionScreens2["TRUST_MEMBER"] = TaskTypes.TRUST_MEMBER] = "TRUST_MEMBER";
IntroductionScreens2["ACCOUNT"] = "ACCOUNT";
IntroductionScreens2["EPILOGUE"] = "EPILOGUE";
return IntroductionScreens2;
})(IntroductionScreens || {});
const introductionScreensByLegalEntityType = {
[LegalEntityType.INDIVIDUAL]: [
IntroductionScreens.PROLOGUE,
IntroductionScreens.INDIVIDUAL,
IntroductionScreens.ACCOUNT,
IntroductionScreens.EPILOGUE
],
[LegalEntityType.ORGANIZATION]: [
IntroductionScreens.PROLOGUE,
IntroductionScreens.DECISION_MAKER,
IntroductionScreens.ACCOUNT,
IntroductionScreens.EPILOGUE
],
[LegalEntityType.SOLE_PROPRIETORSHIP]: [
IntroductionScreens.PROLOGUE,
IntroductionScreens.INDIVIDUAL,
IntroductionScreens.SOLE_PROPRIETOR_COMPANY,
IntroductionScreens.ACCOUNT,
IntroductionScreens.EPILOGUE
],
[LegalEntityType.TRUST]: [
IntroductionScreens.PROLOGUE,
IntroductionScreens.INDIVIDUAL,
IntroductionScreens.DECISION_MAKER,
IntroductionScreens.TRUST,
IntroductionScreens.TRUST_MEMBER,
IntroductionScreens.ACCOUNT,
IntroductionScreens.EPILOGUE
],
// TODO SOE-2109: Update to use Unincorporated Partnership screens
[LegalEntityType.UNINCORPORATED_PARTNERSHIP]: [
IntroductionScreens.PROLOGUE,
IntroductionScreens.INDIVIDUAL,
IntroductionScreens.DECISION_MAKER,
IntroductionScreens.TRUST,
IntroductionScreens.TRUST_MEMBER,
IntroductionScreens.ACCOUNT,
IntroductionScreens.EPILOGUE
]
};
const 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 === LegalEntityType.SOLE_PROPRIETORSHIP;
const isTrustScreen = screen === IntroductionScreens.TRUST || screen === IntroductionScreens.TRUST_MEMBER;
const isTrust = legalEntityType === LegalEntityType.TRUST;
if (isAccountScreen) return hasAccountTask;
if (isSoleProprietorScreen) return isSoleProprietor;
if (isTrustScreen) return isTrust;
return tasks.some((task) => screen === task);
}) : [],
[legalEntityType, tasks]
);
return canSeeIntroduction && (introductionScreens == null ? void 0 : introductionScreens.length) > 0 ? [IntroductionScreens.PROLOGUE, ...introductionScreens, IntroductionScreens.EPILOGUE] : void 0;
};
const toPascalCase = (s) => s.split(/[^A-Za-z]/).map((word) => toCapitalized(word)).join("");
var IntroductionScreenTranslationKeyElements = /* @__PURE__ */ ((IntroductionScreenTranslationKeyElements2) => {
IntroductionScreenTranslationKeyElements2["ListItem"] = "LI";
IntroductionScreenTranslationKeyElements2["Paragraph"] = "P";
return IntroductionScreenTranslationKeyElements2;
})(IntroductionScreenTranslationKeyElements || {});
const getIntroductionScreenTranslationKeys = (translations, factors) => {
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 = getTranslationKeysByPrefix(translations, keyPrefix);
const keysWithL = getTranslationKeysByPrefix(translations, keyPrefixWithL);
return (keysWithL.length ? keysWithL : keys).sort(
(a, b) => Number(a.charAt(a.length - 1)) - Number(b.charAt(b.length - 1))
);
};
const IntroductionScreen = ({
introductionScreen,
legalEntity,
number
}) => {
const { i18n } = useI18nContext();
const legalEntityType = useLegalEntityType({ legalEntity });
const paragraphKeys = useMemo$1(
() => legalEntityType ? getIntroductionScreenTranslationKeys(i18n.translations, {
introductionScreen,
legalEntityType,
elementType: IntroductionScreenTranslationKeyElements.Paragraph
}) : void 0,
[i18n, introductionScreen, legalEntityType]
);
const listItemKeys = useMemo$1(
() => legalEntityType ? getIntroductionScreenTranslationKeys(i18n.translations, {
introductionScreen,
legalEntityType,
elementType: IntroductionScreenTranslationKeyElements.ListItem
}) : void 0,
[i18n, introductionScreen, legalEntityType]
);
return /* @__PURE__ */ jsxs(Fragment, { children: [
/* @__PURE__ */ jsx("div", { className: "adyen-kyc-introduction__number", children: number }),
/* @__PURE__ */ jsx("div", { className: "adyen-kyc-introduction__title", children: i18n.get(`introductionScreen${toPascalCase(introductionScreen)}Title`) }),
/* @__PURE__ */ jsxs("div", { className: "adyen-kyc-introduction__description", children: [
!!(paragraphKeys == null ? void 0 : paragraphKeys.length) && paragraphKeys.map((key) => /* @__PURE__ */ jsx("p", { children: i18n.get(key) }, key)),
!!(listItemKeys == null ? void 0 : listItemKeys.length) && /* @__PURE__ */ jsx("ul", { children: listItemKeys.map((key) => /* @__PURE__ */ jsx("li", { children: i18n.get(key) }, key)) })
] })
] });
};
const Introduction = ({
legalEntity,
onExitIntroduction,
tasks
}) => {
const { i18n } = useI18nContext();
const userEvents = useAnalyticsContext();
const introductionScreens = useIntroductionScreens({ legalEntity, tasks });
const [activeIndex, setActiveIndex] = useState(0);
const pageEventDetails = {
page: (introductionScreens == null ? void 0 : introductionScreens.length) ? introductionScreens[activeIndex] : void 0
};
useEffect(() => {
userEvents.addTaskEvent("Landed on page", {
actionType: "start"
});
}, [userEvents]);
useEffect(() => {
if (!(introductionScreens == null ? void 0 : introductionScreens.length)) {
onExitIntroduction();
}
}, [introductionScreens, onExitIntroduction]);
const translationKeys = {
skip: "goToOverviewFromIntroduction",
back: "back",
next: "next",
start: "start"
};
return (introductionScreens == null ? void 0 : 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: translationKeys.skip
});
onExitIntroduction();
},
variant: "link",
children: i18n.get(translationKeys.skip)
}
) }),
/* @__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: translationKeys.back
});
setActiveIndex((currentValue) => currentValue - 1);
},
variant: "secondary",
children: i18n.get(translationKeys.back)
}
),
activeIndex + 1 === introductionScreens.length ? /* @__PURE__ */ jsx(
Button,
{
onClick: () => {
userEvents.addTaskEvent("Success", {
actionType: "submit",
label: translationKeys.start
});
onExitIntroduction();
},
children: i18n.get(translationKeys.start)
}
) : /* @__PURE__ */ jsx(
Button,
{
onClick: () => {
userEvents.addPageEvent("Clicked button", {
...pageEventDetails,
actionType: "next",
label: translationKeys.next
});
setActiveIndex((currentValue) => currentValue + 1);
},
children: i18n.get(translationKeys.next)
}
)
] })
] }) : null;
};
export {
Introduction
};