@blocklet/payment-react/lib/checkout-v2/views/loading-view.js

Reusable react components for payment kit v2

"use strict";

Object.defineProperty(exports, "__esModule", {
  value: true
});
module.exports = LoadingView;
var _jsxRuntime = require("react/jsx-runtime");
var _material = require("@mui/material");
var _styles = require("@mui/material/styles");
var _Header = _interopRequireDefault(require("@blocklet/ui-react/lib/Header"));
function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
function PulsingDots() {
  return /* @__PURE__ */(0, _jsxRuntime.jsx)(_material.Box, {
    sx: {
      display: "flex",
      gap: 2,
      mt: 4
    },
    children: [0, 1, 2].map(i => /* @__PURE__ */(0, _jsxRuntime.jsx)(_material.Box, {
      sx: {
        width: 12,
        height: 12,
        borderRadius: "50%",
        bgcolor: "primary.main",
        opacity: 0.4,
        animation: `pulse 1.4s ease-in-out ${i * 0.2}s infinite`,
        "@keyframes pulse": {
          "0%, 80%, 100%": {
            transform: "scale(0.6)",
            opacity: 0.3
          },
          "40%": {
            transform: "scale(1)",
            opacity: 0.7
          }
        }
      }
    }, i))
  });
}
function LoadingDecoration() {
  return /* @__PURE__ */(0, _jsxRuntime.jsxs)(_material.Box, {
    sx: {
      position: "relative",
      width: {
        xs: 160,
        md: 200
      },
      height: {
        xs: 160,
        md: 200
      }
    },
    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)"
          }
        }
      }
    })]
  });
}
function LoadingView({
  mode = "inline"
}) {
  const isFullScreen = mode === "standalone";
  const theme = (0, _styles.useTheme)();
  const primaryColor = theme.palette.primary.main;
  const bgSx = {
    background: {
      xs: "none",
      md: `linear-gradient(160deg, ${(0, _styles.alpha)(primaryColor, 0.03)} 0%, ${(0, _styles.alpha)(primaryColor, 0.07)} 50%, ${(0, _styles.alpha)(primaryColor, 0.04)} 100%)`
    },
    bgcolor: t => t.palette.mode === "dark" ? "background.default" : "#f8faff"
  };
  const centerContent = /* @__PURE__ */(0, _jsxRuntime.jsxs)(_material.Box, {
    sx: {
      display: "flex",
      flexDirection: "column",
      alignItems: "center",
      justifyContent: "center",
      flex: 1
    },
    children: [/* @__PURE__ */(0, _jsxRuntime.jsx)(LoadingDecoration, {}), /* @__PURE__ */(0, _jsxRuntime.jsx)(PulsingDots, {})]
  });
  if (!isFullScreen) {
    return /* @__PURE__ */(0, _jsxRuntime.jsx)(_material.Box, {
      sx: {
        display: "flex",
        width: "100%",
        minHeight: {
          xs: 400,
          md: 640
        },
        maxWidth: 1120,
        mx: "auto",
        borderRadius: "16px",
        overflow: "hidden",
        boxShadow: 1,
        border: 1,
        borderColor: "divider",
        borderLeft: "4px solid",
        borderLeftColor: "primary.main",
        ...bgSx
      },
      children: centerContent
    });
  }
  return /* @__PURE__ */(0, _jsxRuntime.jsxs)(_material.Box, {
    sx: {
      width: "100%",
      height: "100vh",
      minHeight: "100vh",
      display: "flex",
      flexDirection: "column",
      position: "relative",
      overflow: "hidden",
      ...bgSx
    },
    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))
    }), centerContent]
  });
}