@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.
171 lines (170 loc) • 6.52 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] = "94d8ece2-2f36-49ea-8482-4686a6dfa5b1", e._sentryDebugIdIdentifier = "sentry-dbid-94d8ece2-2f36-49ea-8482-4686a6dfa5b1");
} catch (e) {}
import { a as Icon, i as Typography } from "./translation-BYvhW5zA.js";
import { a as noop } from "./AnalyticsContext-BFrJmsp0.js";
import { i as useAnalyticsContext, r as KEYBOARD_KEYS } from "./Modal-BLP2aF-u.js";
import { t as useId } from "./useId-BkDhUta2.js";
import { useRef } from "preact/hooks";
import cx from "classnames";
import { Fragment, jsx, jsxs } from "preact/jsx-runtime";
var Tile_module_default = {
"tile-container": "_tile-container_1t0ne_1",
tileContainer: "_tile-container_1t0ne_1",
tile: "_tile_1t0ne_1",
"tile-icon": "_tile-icon_1t0ne_18",
tileIcon: "_tile-icon_1t0ne_18",
"tile-title": "_tile-title_1t0ne_35",
tileTitle: "_tile-title_1t0ne_35",
"tile-checkbox": "_tile-checkbox_1t0ne_49",
tileCheckbox: "_tile-checkbox_1t0ne_49",
"tile-container-horizontal": "_tile-container-horizontal_1t0ne_89",
tileContainerHorizontal: "_tile-container-horizontal_1t0ne_89",
"tile-label": "_tile-label_1t0ne_100",
tileLabel: "_tile-label_1t0ne_100"
};
//#endregion
//#region src/components/ui/atoms/Tile/Tile.tsx
function Tile({ checked, disabled, icon, id, inputType = "checkbox", isHorizontal, label, name, className, onChange, subTitle, value }) {
const inputNode = useRef(null);
const uniqId = useId("tile");
const idUse = id ?? uniqId;
const handleChange = (e) => {
if (disabled) return;
onChange?.(e.currentTarget.checked);
inputNode.current?.focus();
};
const handleClick = (e) => {
if (disabled || inputType === "radio") return;
if (checked) {
e.preventDefault();
onChange?.(false);
inputNode.current?.focus();
}
};
const handleOnKeyDown = (e) => {
if (e.key === KEYBOARD_KEYS.enter || e.key === KEYBOARD_KEYS.space) {
e.preventDefault();
if (disabled) return;
if (inputType === "radio" && !checked) {
onChange?.(true);
inputNode.current?.focus();
} else if (inputType === "checkbox") {
onChange?.(!checked);
inputNode.current?.focus();
}
}
};
return /* @__PURE__ */ jsxs("div", {
className: cx(Tile_module_default.tileContainer, className, { [Tile_module_default.tileContainerHorizontal]: isHorizontal }),
children: [/* @__PURE__ */ jsx("input", {
ref: inputNode,
className: Tile_module_default.tileCheckbox,
disabled,
checked: !!checked,
value,
id: idUse,
name,
type: inputType,
onKeyDown: handleOnKeyDown,
onChange: handleChange,
onClick: handleClick,
"aria-disabled": disabled,
tabIndex: disabled ? -1 : 0
}), /* @__PURE__ */ jsxs("label", {
htmlFor: idUse,
className: Tile_module_default.tile,
children: [icon && /* @__PURE__ */ jsx("div", {
className: Tile_module_default.tileIcon,
children: /* @__PURE__ */ jsx(Icon, {
name: icon,
testId: icon
})
}), /* @__PURE__ */ jsxs("div", {
className: Tile_module_default.tileLabel,
children: [/* @__PURE__ */ jsx(Typography, {
el: "h4",
variant: "body-strongest",
className: Tile_module_default.tileTitle,
children: label
}), subTitle && /* @__PURE__ */ jsx(Typography, {
el: "p",
variant: "body",
children: subTitle
})]
})]
})]
});
}
var TileGroup_module_default = {
"tile-group": "_tile-group_6rtof_1",
tileGroup: "_tile-group_6rtof_1",
"tile-container": "_tile-container_6rtof_8",
tileContainer: "_tile-container_6rtof_8",
"tile-group-error": "_tile-group-error_6rtof_14",
tileGroupError: "_tile-group-error_6rtof_14",
"tile-group-error-icon": "_tile-group-error-icon_6rtof_27",
tileGroupErrorIcon: "_tile-group-error-icon_6rtof_27",
"tile-group-horizontal": "_tile-group-horizontal_6rtof_32",
tileGroupHorizontal: "_tile-group-horizontal_6rtof_32"
};
//#endregion
//#region src/components/ui/atoms/TileGroup/TileGroup.tsx
function TileGroup({ tiles, selected, allowMultiple = false, isHorizontal, name: nameProp, maxSelected = Infinity, errorMessage, onChange = noop, enableTracking = false, trackingFieldName }) {
const uniqName = useId("tile");
const name = nameProp ?? uniqName;
const finalName = allowMultiple ? `${name}[]` : name;
const inputType = allowMultiple ? "checkbox" : "radio";
const userEvents = useAnalyticsContext();
return /* @__PURE__ */ jsxs(Fragment, { children: [!!errorMessage && /* @__PURE__ */ jsxs("div", {
"aria-live": "polite",
className: TileGroup_module_default.tileGroupError,
children: [/* @__PURE__ */ jsx("span", {
className: TileGroup_module_default.tileGroupErrorIcon,
children: /* @__PURE__ */ jsx(Icon, { name: "field-error" })
}), errorMessage]
}), /* @__PURE__ */ jsx("div", {
className: cx(TileGroup_module_default.tileGroup, { [TileGroup_module_default.tileGroupHorizontal]: isHorizontal }),
children: tiles.map((tile) => {
const { value, id, icon, subTitle, label, disabled } = tile;
const handleChange = (checked) => {
const newSelected = updateSelectedChoices(tile, checked, selected, allowMultiple);
if (enableTracking) userEvents.addFieldEvent("Interacted with form field", {
actionType: "input",
field: trackingFieldName ?? name,
returnValue: typeof newSelected === "string" ? newSelected : void 0
});
onChange(newSelected);
};
return /* @__PURE__ */ jsx(Tile, {
name: finalName,
className: TileGroup_module_default.tileContainer,
inputType,
isHorizontal,
checked: choiceIsSelected(tile, selected, allowMultiple),
label,
id,
subTitle,
icon,
disabled: !disabled && allowMultiple && selected.length >= maxSelected ? !choiceIsSelected(tile, selected, allowMultiple) : disabled,
value,
onChange: handleChange
}, id);
})
})] });
}
function choiceIsSelected({ value }, selected, allowMultiple) {
if (!allowMultiple) return value === selected;
return selected.includes(value);
}
function updateSelectedChoices({ value }, checked, selected, allowMultiple) {
if (!allowMultiple) return checked ? value : "";
if (Array.isArray(selected)) {
if (checked) return allowMultiple ? [...selected, value] : [value];
return selected.filter((selectedChoice) => selectedChoice !== value);
}
return [];
}
//#endregion
export { TileGroup as t };