@adyen/kyc-components/dist/SingpassSelection-CB1J2MS6.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] = "9db50fba-7cc0-4726-b98c-896861d2605e", e._sentryDebugIdIdentifier = "sentry-dbid-9db50fba-7cc0-4726-b98c-896861d2605e");
} catch (e) {}
import { i as Typography, r as useTranslation } from "./translation-BFxyJ1c5.js";
import { t as Button } from "./Button-oj6H8OrC.js";
import { t as LegalEntityTypes } from "./legal-entity-type-VIfNYnJP.js";
import { t as StackLayout } from "./StackLayout-Bhbj68nx.js";
import { t as Card } from "./Card-vYndix5Y.js";
import { t as Image } from "./Image-BEzOZ1tt.js";
import { t as Field } from "./Field-pcJkjIG_.js";
import { t as useForm } from "./useForm-pUkvCLc9.js";
import { t as Tag } from "./Tag-BhU73i1R.js";
import { lazy } from "preact/compat";
import { useState as useState$1 } from "preact/hooks";
import { jsx, jsxs } from "preact/jsx-runtime";
import { createElement as createElement$1 } from "preact";
var Singpass_module_default = {
	"singpass-card": "adyen-kyc-singpass-card",
	singpassCard: "adyen-kyc-singpass-card",
	"singpass-card-image": "adyen-kyc-singpass-card-image",
	singpassCardImage: "adyen-kyc-singpass-card-image",
	"singpass-card-image-container": "adyen-kyc-singpass-card-image-container",
	singpassCardImageContainer: "adyen-kyc-singpass-card-image-container",
	"singpass-card-content": "adyen-kyc-singpass-card-content",
	singpassCardContent: "adyen-kyc-singpass-card-content",
	"singpass-card-title": "adyen-kyc-singpass-card-title",
	singpassCardTitle: "adyen-kyc-singpass-card-title",
	"singpass-card-subtitle": "adyen-kyc-singpass-card-subtitle",
	singpassCardSubtitle: "adyen-kyc-singpass-card-subtitle"
};
//#endregion
//#region src/components/Shared/SingpassSelection/types.ts
var setupAccountMethods = ["singpass", "manual"];
//#endregion
//#region src/components/Shared/SingpassSelection/SingpassSelection.tsx
var setupAccountMethodFields = ["setupAccountMethod"];
var instantVerificationImage = lazy(() => import("./singpass-logo-C6TfxlXU.js"));
var manualVerificationImage = lazy(() => import("./graphical-laptop-DX_EZlVD.js"));
var getSingpassSelectionDisabled = (legalEntityType) => {
	switch (legalEntityType) {
		case LegalEntityTypes.INDIVIDUAL:
		case LegalEntityTypes.ORGANIZATION: return false;
		default: return true;
	}
};
var legalEntityTypeToSelectionTranslationKeyMap = {
	[LegalEntityTypes.INDIVIDUAL]: "retrieveMyInfo",
	[LegalEntityTypes.ORGANIZATION]: "retrieveMyInfoBusiness"
};
var legalEntityTypeToSelectionDescriptionTranslationKeyMap = {
	[LegalEntityTypes.INDIVIDUAL]: "getYourVerifiedDetailsInstantly",
	[LegalEntityTypes.ORGANIZATION]: "prefillVerifiedDetailsByLoggingInWithSingpass"
};
var getSetupAccountMethodMetadata = (legalEntityType, commonT) => {
	const translationSingpassNameKey = legalEntityTypeToSelectionTranslationKeyMap[legalEntityType] ?? "retrieveMyInfoBusiness";
	const translationSingpassDescriptionKey = legalEntityTypeToSelectionDescriptionTranslationKeyMap[legalEntityType] ?? "prefillVerifiedDetailsByLoggingInWithSingpass";
	const isSingpassSelectionDisabled = getSingpassSelectionDisabled(legalEntityType);
	return {
		singpass: {
			name: commonT(($) => $[translationSingpassNameKey]),
			description: commonT(($) => $[translationSingpassDescriptionKey]),
			icon: /* @__PURE__ */ jsx(Image, {
				lazyLoadedImage: instantVerificationImage,
				className: Singpass_module_default.singpassCardImage
			}),
			isOptionDisabled: isSingpassSelectionDisabled
		},
		manual: {
			name: commonT(($) => $["enterTheDetailsYourself"]),
			description: commonT(($) => $["provideYourBusinessDetailsAlongWithSomeSupportingDocuments"]),
			icon: /* @__PURE__ */ jsx(Image, {
				lazyLoadedImage: manualVerificationImage,
				className: Singpass_module_default.singpassCardImage
			})
		}
	};
};
var SingpassSelection = (props) => {
	const { t } = useTranslation("common");
	const { legalEntityType, handleNextClick } = props;
	const [selectedMethod, setSelectedMethod] = useState$1();
	const selectSetupAccountMethod = (method) => {
		setSelectedMethod(method);
		handleChangeFor("setupAccountMethod")(method);
	};
	const { handleChangeFor, data } = useForm({
		...props,
		schema: setupAccountMethodFields,
		defaultData: {}
	});
	const methodsMetadata = getSetupAccountMethodMetadata(legalEntityType, t);
	return /* @__PURE__ */ jsx("div", { children: /* @__PURE__ */ jsxs("div", {
		className: "adyen-kyc-singpass-selection",
		children: [
			/* @__PURE__ */ jsx("header", {
				className: "adyen-kyc-u-margin-bottom-32",
				children: /* @__PURE__ */ jsx(Typography, {
					el: "h2",
					variant: "title-m",
					children: t(($) => $["howWouldYouLikeToSetUpYourAccount"])
				})
			}),
			/* @__PURE__ */ jsx("form", { children: /* @__PURE__ */ jsx(Field, {
				el: "fieldset",
				name: "setupAccountMethod",
				children: (childProps) => /* @__PURE__ */ jsx(StackLayout, {
					gap: "small",
					children: setupAccountMethods.map((method) => /* @__PURE__ */ createElement$1(Card, {
						...childProps,
						key: method,
						onClick: () => selectSetupAccountMethod(method),
						selected: method === data.setupAccountMethod,
						padding: "none"
					}, /* @__PURE__ */ jsxs("div", {
						className: Singpass_module_default.singpassCard,
						children: [/* @__PURE__ */ jsx("div", {
							className: Singpass_module_default.singpassCardImageContainer,
							children: methodsMetadata[method].icon
						}), /* @__PURE__ */ jsxs("div", {
							className: Singpass_module_default.singpassCardContent,
							children: [
								method === "singpass" && /* @__PURE__ */ jsx(Tag, {
									variant: "blue",
									className: "adyen-kyc-u-margin-bottom-8",
									children: t(($) => $["faster"])
								}),
								/* @__PURE__ */ jsx(Typography, {
									el: "h4",
									variant: "body-strongest",
									className: Singpass_module_default.singpassCardTitle,
									children: methodsMetadata[method].name
								}),
								/* @__PURE__ */ jsx(Typography, {
									el: "p",
									variant: "body",
									color: "secondary",
									className: Singpass_module_default.singpassCardSubtitle,
									children: methodsMetadata[method].description
								})
							]
						})]
					})))
				})
			}) }),
			/* @__PURE__ */ jsx(Button, {
				disabled: !selectedMethod,
				onClick: () => {
					if (!selectedMethod) return;
					handleNextClick(selectedMethod);
				},
				fullWidth: true,
				children: t(($) => $["continue"])
			})
		]
	}) });
};
//#endregion
export { SingpassSelection };