@blocklet/payment-react 1.25.9 → 1.26.0

package/lib/checkout-v2/views/loading-view.js

@@ -0,0 +1,168 @@
+"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]
+  });
+}

package/lib/checkout-v2/views/success-view.d.ts

@@ -0,0 +1,29 @@
+import type { TCheckoutSessionExpanded } from '@blocklet/payment-types';
+interface VendorInfo {
+    success: boolean;
+    status: 'delivered' | 'pending' | 'failed';
+    progress: number;
+    message: string;
+    appUrl?: string;
+    title?: string;
+    name?: string;
+    vendorType: string;
+}
+interface SuccessViewProps {
+    submit: {
+        vendorStatus: {
+            payment_status: string;
+            session_status: string;
+            vendors: VendorInfo[];
+            error: string | null;
+            isAllCompleted: boolean;
+            hasFailed: boolean;
+        } | null;
+        result: {
+            checkoutSession: TCheckoutSessionExpanded;
+        } | null;
+    };
+    session: TCheckoutSessionExpanded | null | undefined;
+}
+export default function SuccessView({ submit, session }: SuccessViewProps): import("react").JSX.Element;
+export {};