@adyen/adyen-platform-experience-web
Version:
100 lines (99 loc) • 3.54 kB
JavaScript
import { jsx as e } from "../../../external/.pnpm/preact@10.28.2/node_modules/preact/jsx-runtime/dist/jsxRuntime.module.js";
import C from "classnames";
import p from "../Typography/Typography.js";
import { TypographyVariant as g, TypographyElement as M } from "../Typography/types.js";
import { useCallback as S } from "../../../external/.pnpm/preact@10.28.2/node_modules/preact/hooks/dist/hooks.module.js";
/* empty css */
import D from "../../../core/Context/preact/useCoreContext.js";
import { Fragment as y } from "../../../external/.pnpm/preact@10.28.2/node_modules/preact/dist/preact.module.js";
import _ from "../Button/Button.js";
const t = "adyen-pe-error-message-display", f = 680, s = {
base: t,
base_absolutePosition: t + "--absolute-position",
base_centered: t + "--centered",
base_outlined: t + "--outlined",
base_withBackground: t + "--with-background",
base_withHeaderOffset: t + "--with-header-offset",
base_condensed: t + "--condensed",
button: t + "__button",
illustration: t + "__illustration"
}, F = () => /* @__PURE__ */ e(y, { children: [
" ",
/* @__PURE__ */ e("br", {}),
" "
] }), V = ({
title: w,
message: c,
imageDesktop: i,
imageMobile: d,
withImage: v,
centered: x,
refreshComponent: l,
onRefreshComponent: E,
onContactSupport: r,
translationValues: m,
absolutePosition: A = !0,
outlined: b = !0,
renderSecondaryButton: o,
withBackground: k,
withHeaderOffset: I,
condensed: T,
testId: O = "error-message-display"
}) => {
const { i18n: a, updateCore: B, getImageAsset: u } = D(), N = S(
(n) => Array.isArray(n) ? n.map((h, P) => /* @__PURE__ */ e(y, { children: [
P > 0 && /* @__PURE__ */ e(F, {}),
a.get(h),
m?.[h]
] })) : a.get(n),
[a, m]
);
return /* @__PURE__ */ e(
"div",
{
"data-testid": O,
className: C(s.base, {
[s.base_absolutePosition]: A,
[s.base_centered]: x,
[s.base_outlined]: b,
[s.base_withBackground]: k !== !1 && !b,
[s.base_withHeaderOffset]: I,
[s.base_condensed]: T
}),
children: [
(i || d || v) && /* @__PURE__ */ e("div", { className: s.illustration, children: /* @__PURE__ */ e("picture", { children: [
/* @__PURE__ */ e(
"source",
{
"data-testid": "source-desktop",
type: "image/svg+xml",
media: `(min-width: ${f}px)`,
srcSet: i
}
),
/* @__PURE__ */ e(
"source",
{
"data-testid": "source-mobile",
type: "image/svg+xml",
media: `(max-width: ${f}px)`,
srcSet: d ?? u?.({ name: "wrong-environment", subFolder: "images/small" })
}
),
/* @__PURE__ */ e("img", { srcSet: i ?? u?.({ name: "wrong-environment" }), alt: "" })
] }) }),
/* @__PURE__ */ e(p, { el: M.DIV, variant: g.TITLE, children: a.get(w) }),
c && /* @__PURE__ */ e(p, { variant: g.BODY, children: N(c) }),
(r || l || o) && /* @__PURE__ */ e("div", { className: s.button, children: [
o && o(),
r && /* @__PURE__ */ e(_, { onClick: r, children: a.get("common.actions.contactSupport.labels.reachOut") }),
!r && l && /* @__PURE__ */ e(_, { onClick: E ?? B, children: a.get("common.actions.refresh.labels.default") })
] })
]
}
);
};
export {
V as ErrorMessageDisplay,
f as IMAGE_BREAKPOINT_MEDIUM_PX
};