@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.
170 lines (169 loc) • 6.46 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] = "da20c3d5-3059-4402-b1a5-58561960c2ed", e._sentryDebugIdIdentifier = "sentry-dbid-da20c3d5-3059-4402-b1a5-58561960c2ed");
} catch (e) {}
import { a as Icon, i as Typography } from "./translation-BFxyJ1c5.js";
import { s as noop, t as useAnalyticsContext } from "./useAnalyticsContext-BVFDMrVE.js";
import { t as KEYBOARD_KEYS } from "./keys-fzUbt2xF.js";
import { t as useId } from "./useId-eJSYfA6i.js";
import { useRef } from "preact/hooks";
import cx from "classnames";
import { Fragment, jsx, jsxs } from "preact/jsx-runtime";
var Tile_module_default = {
"tile-container": "adyen-kyc-tile-container",
tileContainer: "adyen-kyc-tile-container",
tile: "adyen-kyc-tile",
"tile-icon": "adyen-kyc-tile-icon",
tileIcon: "adyen-kyc-tile-icon",
"tile-title": "adyen-kyc-tile-title",
tileTitle: "adyen-kyc-tile-title",
"tile-checkbox": "adyen-kyc-tile-checkbox",
tileCheckbox: "adyen-kyc-tile-checkbox",
"tile-container-horizontal": "adyen-kyc-tile-container-horizontal",
tileContainerHorizontal: "adyen-kyc-tile-container-horizontal",
"tile-label": "adyen-kyc-tile-label",
tileLabel: "adyen-kyc-tile-label"
};
//#endregion
//#region src/components/ui/atoms/Tile/Tile.tsx
function Tile({ checked, disabled, icon, id, inputType = "checkbox", isHorizontal, label, name, 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, { [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": "adyen-kyc-tile-group",
tileGroup: "adyen-kyc-tile-group",
"tile-container": "adyen-kyc-tile-container",
tileContainer: "adyen-kyc-tile-container",
"tile-group-error": "adyen-kyc-tile-group-error",
tileGroupError: "adyen-kyc-tile-group-error",
"tile-group-error-icon": "adyen-kyc-tile-group-error-icon",
tileGroupErrorIcon: "adyen-kyc-tile-group-error-icon",
"tile-group-horizontal": "adyen-kyc-tile-group-horizontal",
tileGroupHorizontal: "adyen-kyc-tile-group-horizontal"
};
//#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, index) => {
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,
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
}, index);
})
})] });
}
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 };