@blocklet/payment-react
Version:
Reusable react components for payment kit v2
330 lines (329 loc) • 9.91 kB
JavaScript
;
Object.defineProperty(exports, "__esModule", {
value: true
});
module.exports = ErrorView;
var _jsxRuntime = require("react/jsx-runtime");
var _material = require("@mui/material");
var _styles = require("@mui/material/styles");
var _ArrowBack = _interopRequireDefault(require("@mui/icons-material/ArrowBack"));
var _Header = _interopRequireDefault(require("@blocklet/ui-react/lib/Header"));
var _context = require("@arcblock/ux/lib/Locale/context");
var _format = require("../utils/format");
function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
function GeometricDecoration() {
const theme = (0, _styles.useTheme)();
const gridColor = (0, _styles.alpha)(theme.palette.primary.main, 0.06);
return /* @__PURE__ */(0, _jsxRuntime.jsxs)(_material.Box, {
sx: {
position: "relative",
width: {
xs: 200,
md: 260
},
height: {
xs: 200,
md: 260
},
mb: {
xs: 4,
md: 6
}
},
children: [/* @__PURE__ */(0, _jsxRuntime.jsx)(_material.Box, {
sx: {
position: "absolute",
inset: 0,
borderRadius: "38% 62% 63% 37% / 41% 44% 56% 59%",
background: t => `linear-gradient(45deg, ${(0, _styles.alpha)(t.palette.primary.main, 0.1)}, ${(0, _styles.alpha)(t.palette.primary.main, 0.03)})`,
filter: "blur(1px)",
animation: "spin 20s linear infinite",
"@keyframes spin": {
from: {
transform: "rotate(0deg)"
},
to: {
transform: "rotate(360deg)"
}
}
}
}), /* @__PURE__ */(0, _jsxRuntime.jsx)(_material.Box, {
sx: {
position: "absolute",
inset: 0,
borderRadius: "38% 62% 63% 37% / 41% 44% 56% 59%",
background: t => `linear-gradient(135deg, ${(0, _styles.alpha)(t.palette.primary.main, 0.07)}, ${(0, _styles.alpha)(t.palette.primary.main, 0.01)})`,
filter: "blur(1px)",
transform: "scale(0.88)",
opacity: 0.6,
animation: "spinReverse 15s linear infinite",
"@keyframes spinReverse": {
from: {
transform: "scale(0.88) rotate(0deg)"
},
to: {
transform: "scale(0.88) rotate(-360deg)"
}
}
}
}), /* @__PURE__ */(0, _jsxRuntime.jsx)(_material.Box, {
sx: {
position: "absolute",
inset: 0,
borderRadius: "38% 62% 63% 37% / 41% 44% 56% 59%",
overflow: "hidden",
animation: "spin 20s linear infinite"
},
children: /* @__PURE__ */(0, _jsxRuntime.jsxs)("svg", {
width: "100%",
height: "100%",
viewBox: "0 0 260 260",
fill: "none",
xmlns: "http://www.w3.org/2000/svg",
style: {
position: "absolute",
inset: 0
},
children: [[52, 87, 122, 157, 192].map(y => /* @__PURE__ */(0, _jsxRuntime.jsx)("line", {
x1: "30",
y1: y,
x2: "230",
y2: y,
stroke: gridColor,
strokeWidth: "0.5"
}, `h${y}`)), [52, 87, 122, 157, 192].map(x => /* @__PURE__ */(0, _jsxRuntime.jsx)("line", {
x1: x,
y1: "30",
x2: x,
y2: "230",
stroke: gridColor,
strokeWidth: "0.5"
}, `v${x}`)), /* @__PURE__ */(0, _jsxRuntime.jsx)("line", {
x1: "52",
y1: "52",
x2: "192",
y2: "192",
stroke: gridColor,
strokeWidth: "0.5"
}), /* @__PURE__ */(0, _jsxRuntime.jsx)("line", {
x1: "192",
y1: "52",
x2: "52",
y2: "192",
stroke: gridColor,
strokeWidth: "0.5"
}), /* @__PURE__ */(0, _jsxRuntime.jsx)("circle", {
cx: "130",
cy: "130",
r: "40",
stroke: gridColor,
strokeWidth: "0.5"
}), /* @__PURE__ */(0, _jsxRuntime.jsx)("circle", {
cx: "130",
cy: "130",
r: "75",
stroke: gridColor,
strokeWidth: "0.5"
}), [[122, 87], [157, 87], [87, 122], [122, 122], [157, 122], [192, 122], [87, 157], [122, 157], [157, 157], [122, 192], [157, 192]].map(([cx, cy]) => /* @__PURE__ */(0, _jsxRuntime.jsx)("circle", {
cx,
cy,
r: "1.5",
fill: gridColor
}, `d${cx}-${cy}`))]
})
})]
});
}
function getErrorConfig(errorCode, error, t) {
if (errorCode === "SESSION_EXPIRED") {
return {
title: t("payment.checkout.expired.title"),
description: t("payment.checkout.expired.description"),
color: "#f59e0b"
};
}
if (errorCode === "EMPTY_LINE_ITEMS") {
return {
title: t("payment.checkout.emptyItems.title"),
description: t("payment.checkout.emptyItems.description"),
color: "#94a3b8"
};
}
if (errorCode === "STOP_ACCEPTING_ORDERS") {
return {
title: t("payment.checkout.stopAcceptingOrders.title"),
description: t("payment.checkout.stopAcceptingOrders.description"),
color: "#f59e0b"
};
}
return {
title: t("payment.checkout.error.title"),
description: error,
color: "#ef4444"
};
}
function ErrorContent({
error,
errorCode = void 0
}) {
const {
t
} = (0, _context.useLocaleContext)();
const theme = (0, _styles.useTheme)();
const {
title,
description
} = getErrorConfig(errorCode, error, t);
const primaryColor = theme.palette.primary.main;
const appUrl = typeof window !== "undefined" ? window.blocklet?.appUrl : "/";
return /* @__PURE__ */(0, _jsxRuntime.jsxs)(_material.Stack, {
alignItems: "center",
justifyContent: "center",
sx: {
flex: 1,
textAlign: "center",
px: 3
},
children: [/* @__PURE__ */(0, _jsxRuntime.jsx)(GeometricDecoration, {}), /* @__PURE__ */(0, _jsxRuntime.jsx)(_material.Typography, {
component: "h1",
sx: {
fontWeight: 800,
fontSize: {
xs: 36,
md: 52
},
lineHeight: 1.05,
letterSpacing: "-0.03em",
color: "text.primary",
mb: 2
},
children: title
}), /* @__PURE__ */(0, _jsxRuntime.jsx)(_material.Typography, {
sx: {
color: "text.secondary",
fontSize: {
xs: 15,
md: 17
},
fontWeight: 300,
lineHeight: 1.7,
maxWidth: 420,
letterSpacing: "0.01em"
},
children: description
}), appUrl && /* @__PURE__ */(0, _jsxRuntime.jsx)(_material.Button, {
href: appUrl,
variant: "contained",
disableElevation: true,
startIcon: /* @__PURE__ */(0, _jsxRuntime.jsx)(_ArrowBack.default, {
sx: {
fontSize: "20px !important"
}
}),
sx: {
mt: 5,
minWidth: 240,
height: 56,
px: 6,
borderRadius: "9999px",
textTransform: "none",
fontWeight: 600,
fontSize: 16,
letterSpacing: "0.02em",
color: th => (0, _format.primaryContrastColor)(th),
boxShadow: `0 8px 32px -4px ${(0, _styles.alpha)(primaryColor, 0.3)}`,
"&:hover": {
boxShadow: `0 12px 40px -4px ${(0, _styles.alpha)(primaryColor, 0.4)}`,
transform: "translateY(-1px)"
},
transition: "all 0.2s ease"
},
children: t("common.back")
})]
});
}
function ErrorView({
error,
errorCode = void 0,
mode = "inline"
}) {
const theme = (0, _styles.useTheme)();
const primaryColor = theme.palette.primary.main;
const isFullScreen = mode === "standalone";
const meshBg = {
bgcolor: t => t.palette.mode === "dark" ? "background.default" : "#f8faff",
backgroundImage: t => t.palette.mode === "dark" ? "none" : `radial-gradient(at 0% 0%, ${(0, _styles.alpha)(primaryColor, 0.06)} 0px, transparent 50%),
radial-gradient(at 100% 0%, ${(0, _styles.alpha)(primaryColor, 0.04)} 0px, transparent 50%),
radial-gradient(at 100% 100%, ${(0, _styles.alpha)(primaryColor, 0.06)} 0px, transparent 50%),
radial-gradient(at 0% 100%, rgba(203,213,225,0.3) 0px, transparent 50%)`
};
if (!isFullScreen) {
return /* @__PURE__ */(0, _jsxRuntime.jsx)(_material.Box, {
sx: {
display: "flex",
width: "100%",
minHeight: {
xs: 400,
md: 520
},
maxWidth: 1120,
mx: "auto",
borderRadius: "16px",
overflow: "hidden",
boxShadow: 1,
border: 1,
borderColor: "divider",
...meshBg
},
children: /* @__PURE__ */(0, _jsxRuntime.jsx)(_material.Box, {
sx: {
flex: 1,
p: {
xs: 4,
md: 6
},
display: "flex",
flexDirection: "column",
justifyContent: "center",
alignItems: "center"
},
children: /* @__PURE__ */(0, _jsxRuntime.jsx)(ErrorContent, {
error,
errorCode
})
})
});
}
return /* @__PURE__ */(0, _jsxRuntime.jsxs)(_material.Box, {
sx: {
width: "100%",
height: "100vh",
minHeight: "100vh",
display: "flex",
flexDirection: "column",
position: "relative",
overflow: "hidden",
...meshBg
},
children: [/* @__PURE__ */(0, _jsxRuntime.jsx)(_Header.default, {
sx: {
position: "absolute",
top: 20,
left: 0,
right: 0,
zIndex: 10,
background: "transparent",
"& .header-container": {
height: "auto"
}
},
hideNavMenu: true,
brand: null,
description: null,
addons: buildIns => buildIns.filter(addon => ["locale-selector", "theme-mode-toggle", "session-user"].includes(addon.key))
}), /* @__PURE__ */(0, _jsxRuntime.jsx)(ErrorContent, {
error,
errorCode
})]
});
}