@payfit/unity-components
Version:
162 lines (161 loc) • 5.84 kB
JavaScript
import { Icon as e } from "../icon/Icon.js";
import { Button as t } from "../button/Button.js";
import { Text as n } from "../text/Text.js";
import { useContainerQueryLevel as r } from "../../hooks/use-container-query-level.js";
import { Code as i } from "../code/Code.js";
import { initConfig as a } from "./initConfig.js";
import { Collapsible as o } from "./parts/Collapsible.js";
import { forwardRef as s, useCallback as c, useRef as l } from "react";
import { jsx as u, jsxs as d } from "react/jsx-runtime";
import { useIntl as f } from "react-intl";
import { Illustration as p } from "@payfit/unity-illustrations";
import { tv as m } from "tailwind-variants";
//#region src/components/error-state/ErrorState.tsx
var h = m({ slots: {
container: ["uy:@container uy:w-full uy:h-full uy:content-center uy:flex-1"],
wrapper: [
"uy:border-solid uy:border-border-neutral uy:border uy:rounded-200 uy:p-300",
"uy:@section:py-600 uy:@section:px-auto",
"uy:@page:border-0 uy:@page:py-auto uy:@page:px-auto",
"uy:@app:border-0 uy:@app:py-auto uy:@app:px-auto"
],
base: ["uy:max-w-[704px] uy:flex uy:flex-col uy:items-center uy:justify-center uy:gap-150 uy:@section:gap-250 uy:w-full uy:justify-self-center"],
content: ["uy:flex uy:flex-col uy:items-center uy:justify-center uy:gap-250"],
illustration: [
"uy:@section:block",
"uy:hidden",
"uy:@page:w-[200px]",
"uy:@section:w-[200px]",
"uy:@app:w-[240px]"
],
icon: ["uy:bg-surface-neutral-lowest uy:rounded-125 uy:p-100", "uy:@section:hidden"],
informationContainer: ["uy:flex uy:flex-col uy:items-center uy:justify-center uy:gap-100 uy:@section:gap-150 uy:text-center uy"],
information: [
"uy:hidden",
"",
"uy:@section:block"
],
informationComponent: ["uy:block", "uy:@section:hidden"],
h1: ["uy:hidden uy:@app:block"],
h2: ["uy:hidden uy:@page:@max-app:block"],
h3: ["uy:hidden uy:@section:@max-page:block"],
h4: ["uy:block uy:@section:hidden"],
description: ["uy:hidden uy:@section:block uy:@section:w-full"]
} }), g = (e, t) => /* @__PURE__ */ d(o, { children: [/* @__PURE__ */ u("div", {
className: "uy:mb-200",
children: e.detailDescription ?? t?.detailDescription
}), /* @__PURE__ */ u(i, { children: e.error.message })] }), _ = (e, n) => /* @__PURE__ */ u("div", {
className: "uy:mt-200 uy:@section:block uy:hidden",
children: /* @__PURE__ */ u(t, {
onClick: () => {
window.history.go(-1);
},
color: "primary",
variant: "ghost",
children: e.backButtonLabel ?? n?.backButtonLabel
})
}), v = (e, t) => e === "generic" ? t ? "known" : "unknown" : e, y = s((i, o) => {
let { icon: s, illustration: m, onButtonPress: y, buttonLabel: b, mainTitle: x, mainDescription: S, mainDescriptionComponent: C, type: w, error: T, entityName: E, role: D = "status" } = i, { base: O, content: k, container: A, wrapper: j, illustration: M, icon: N, informationContainer: P, information: F, informationComponent: ee, description: I, h1: L, h2: R, h3: z, h4: B } = h(), V = f(), H = a(V, { noPermissionEntityName: E }), U = l(null), { level: W } = r({ ref: U }), G = c((e) => {
U.current = e, o && (typeof o == "function" ? o(e) : o.current = e);
}, [o]), K = v(w, T), q = H.get(K), J = m ?? q?.illustration, Y = s ?? q?.icon, X = b ?? q?.buttonLabel, Z = x ?? q?.mainTitle, Q = S ?? q?.mainDescription, $ = C ?? q?.mainDescriptionComponent;
return /* @__PURE__ */ u("div", {
"data-dd-privacy": "allow",
role: D,
className: A(),
ref: G,
"data-container-level": W,
children: /* @__PURE__ */ u("div", {
className: j(),
children: /* @__PURE__ */ d("div", {
className: O(),
children: [
/* @__PURE__ */ d("div", {
className: k(),
children: [
J && /* @__PURE__ */ u(p, {
src: J,
variant: "picture",
alt: V.formatMessage({
id: "unity:component:error-state:common:illustration:alt",
defaultMessage: "Error states"
}),
className: M(),
isDecorative: !0
}),
Y && /* @__PURE__ */ u(e, {
src: Y,
size: 24,
color: "content.neutral.low",
alt: V.formatMessage({
id: "unity:component:error-state:common:icon:alt",
defaultMessage: "Error states"
}),
className: N()
}),
/* @__PURE__ */ d("div", {
className: P(),
children: [
/* @__PURE__ */ u(n, {
asElement: "h1",
variant: "h1",
color: "content.neutral",
className: L(),
children: Z
}),
/* @__PURE__ */ u(n, {
asElement: "h2",
variant: "h2",
color: "content.neutral",
className: R(),
children: Z
}),
/* @__PURE__ */ u(n, {
asElement: "h3",
variant: "h3",
color: "content.neutral",
className: z(),
children: Z
}),
/* @__PURE__ */ u(n, {
asElement: "h4",
variant: "h4",
color: "content.neutral",
className: B(),
children: Z
}),
/* @__PURE__ */ u(n, {
asElement: "p",
variant: "body",
color: "content.neutral.low",
className: F(),
children: Q
}),
/* @__PURE__ */ u(n, {
asElement: "p",
variant: "body",
color: "content.neutral.low",
className: ee(),
children: $
})
]
})
]
}),
/* @__PURE__ */ u(t, {
variant: W === "component" ? "ghost" : "primary",
onPress: y,
children: X
}),
K === "unknown" && _(i, q),
K === "known" && /* @__PURE__ */ u("div", {
className: I(),
children: g(i, q)
})
]
})
})
});
});
y.displayName = "ErrorState";
//#endregion
export { y as ErrorState, h as errorState };