@adyen/adyen-platform-experience-web
Version:
71 lines (70 loc) • 2.76 kB
JavaScript
import { jsx as r } from "../../../external/preact/jsx-runtime/dist/jsxRuntime.module.js";
import h from "../Typography/Typography.js";
import { TypographyVariant as n } from "../Typography/types.js";
import { useCallback as I } from "../../../external/preact/hooks/dist/hooks.module.js";
import N from "../../../core/Context/useCoreContext.js";
/* empty css */
import k from "../../../images/no-results.svg.js";
import w from "classnames";
import { Fragment as p } from "../../../external/preact/dist/preact.module.js";
import g from "../Button/Button.js";
const f = {
md: 680
}, L = ({
title: x,
message: a,
imageDesktop: t,
imageMobile: o,
withImage: u,
centered: v,
refreshComponent: l,
onContactSupport: m,
translationValues: i,
absolutePosition: E = !0,
outlined: y = !0,
renderSecondaryButton: c,
withBackground: T
}) => {
const { i18n: e, updateCore: _ } = N(), A = I(
(s) => Array.isArray(s) ? s.map(
(d, b) => b === 0 ? /* @__PURE__ */ r(p, { children: [
e.get(d),
i && i[d] && /* @__PURE__ */ r(p, { children: i[d] })
] }) : /* @__PURE__ */ r(p, { children: [
/* @__PURE__ */ r("br", {}),
e.get(d),
i && i[d] && /* @__PURE__ */ r(p, { children: i[d] })
] })
) : e.get(s),
[e, i]
);
return /* @__PURE__ */ r(
"div",
{
className: w(["adyen-pe-error-message-display"], {
"adyen-pe-error-message-display--absolute-position": E,
"adyen-pe-error-message-display--outlined": y,
"adyen-pe-error-message-display--with-background": T !== !1 && !y,
"adyen-pe-error-message-display--centered": v
}),
children: [
(t || o || u) && /* @__PURE__ */ r("div", { className: "adyen-pe-error-message-display__illustration", children: /* @__PURE__ */ r("picture", { children: [
/* @__PURE__ */ r("source", { type: "image/svg+xml", media: `(min-width: ${f.md}px)`, srcSet: t }),
/* @__PURE__ */ r("source", { type: "image/svg+xml", media: `(max-width: ${f.md}px)`, srcSet: o }),
/* @__PURE__ */ r("img", { srcSet: t ?? k, alt: e.get("thereWasAnUnexpectedError") })
] }) }),
/* @__PURE__ */ r(h, { variant: n.TITLE, children: e.get(x) }),
a && /* @__PURE__ */ r(h, { variant: n.BODY, children: A(a) }),
(m || l || c) && /* @__PURE__ */ r("div", { className: "adyen-pe-error-message-display__button", children: [
c && c(),
m && /* @__PURE__ */ r(g, { onClick: m, children: e.get("reachOutToSupport") }),
!m && l && /* @__PURE__ */ r(g, { onClick: _, children: e.get("refresh") })
] })
]
}
);
};
export {
L as ErrorMessageDisplay,
f as IMAGE_BREAKPOINT_SIZES
};