@blocklet/discuss-kit-ux 2.1.210 → 2.1.212

package/dist/components/paywall.d.ts

@@ -0,0 +1,19 @@
+/// <reference types="react" />
+type PaywallType = 'blog' | 'post' | 'bookmark' | 'doc';
+interface PaywallProps {
+    children?: React.ReactNode;
+    cta: React.ReactNode;
+}
+interface SubscriptionPaywallProps {
+    fetchPaymentLink: (params: {
+        type: PaywallType;
+        redirect: string;
+    }) => Promise<{
+        link: string;
+    }>;
+    children?: React.ReactNode;
+    type: PaywallType;
+}
+export declare function Paywall({ children, cta, ...rest }: PaywallProps): import("react/jsx-runtime").JSX.Element;
+export declare function SubscriptionPaywall({ type, fetchPaymentLink, ...rest }: SubscriptionPaywallProps): import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/components/utils.d.ts

@@ -20,3 +20,4 @@ export declare const isInDiscussKitApp: boolean | "" | undefined;
 export declare const openProfile: (did: string, newTab?: boolean) => void;
 export declare const randomId: () => string;
 export declare const getDiscussKitClientId: () => string;
+export declare const getPaymentKitMountPoint: () => string | undefined;

package/dist/{editor-ft4Hsx-A.mjs → editor-DVSYQ5XN.mjs}

@@ -4,7 +4,7 @@ import { OnContentChangePlugin } from "@blocklet/editor/lib/ext/OnContentChangeP
 import { CtrlsShortcutPlugin } from "@blocklet/editor/lib/ext/ShortcutPlugin";
 import { SafeAreaPlugin } from "@blocklet/editor/lib/ext/SafeAreaPlugin";
 import { lazyRetry } from "@arcblock/ux/lib/Util";
-import { i as inferInitialEditorState, I as ImagePathFixerPlugin, V as VideoPathFixerPlugin, a as isEmptyContent, s as stringify, g as getExcerptSync } from "./index-Cm1TeDDQ.mjs";
+import { i as inferInitialEditorState, I as ImagePathFixerPlugin, V as VideoPathFixerPlugin, a as isEmptyContent, s as stringify, g as getExcerptSync } from "./index-DoRK59kW.mjs";
 const BlockletEditor = lazyRetry(() => import("@blocklet/editor"));
 const Root = styled(Box)`
   .be-editable,

package/dist/{index-Cm1TeDDQ.mjs → index-DoRK59kW.mjs}

@@ -1,7 +1,7 @@
 var __defProp = Object.defineProperty;
 var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
 var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "symbol" ? key + "" : key, value);
-var _a, _b, _c, _d, _e, _f;
+var _a, _b, _c, _d, _e, _f, _i, _j;
 import { Labels2, LabelPicker } from "@blocklet/labels";
 import { jsx, jsxs, Fragment } from "react/jsx-runtime";
 import { useTheme, ThemeProvider, styled as styled$2 } from "@mui/material/styles";
@@ -369,6 +369,11 @@ const getDiscussKitClientId = () => {
   }
   return window.__discuss_kit_client_id__;
 };
+const getPaymentKitMountPoint = () => {
+  var _a2, _b2;
+  const info = (_b2 = (_a2 = window.blocklet) == null ? void 0 : _a2.componentMountPoints) == null ? void 0 : _b2.find((x) => x.did === "z2qaCNvKMv5GjouKdcDWexv6WqtHbpNPQDnAk");
+  return info == null ? void 0 : info.mountPoint;
+};
 const utils = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({
   __proto__: null,
   blockletExists,
@@ -380,6 +385,7 @@ const utils = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.definePropert
   getDraftSessionKeyPrefix,
   getExcerptFromLexicalContent,
   getLastItem,
+  getPaymentKitMountPoint,
   getPreference,
   getResizedAvatar,
   isInDiscussKitApp,
@@ -4918,7 +4924,7 @@ function Back({ url, fallbackUrl, iconOnly, sx, icon, ...rest }) {
 }
 const tablerSend = (props) => /* @__PURE__ */ jsx("svg", { viewBox: "0 0 24 24", width: "1.2em", height: "1.2em", ...props, children: /* @__PURE__ */ jsx("path", { fill: "none", stroke: "currentColor", strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M10 14L21 3m0 0l-6.5 18a.55.55 0 0 1-1 0L10 14l-7-3.5a.55.55 0 0 1 0-1z" }) });
 const tablerLetterCase = (props) => /* @__PURE__ */ jsx("svg", { viewBox: "0 0 24 24", width: "1.2em", height: "1.2em", ...props, children: /* @__PURE__ */ jsx("path", { fill: "none", stroke: "currentColor", strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M14 15.5a3.5 3.5 0 1 0 7 0a3.5 3.5 0 1 0-7 0M3 19V8.5a3.5 3.5 0 0 1 7 0V19m-7-6h7m11-1v7" }) });
-const Editor = lazyRetry(() => import("./editor-ft4Hsx-A.mjs"));
+const Editor = lazyRetry(() => import("./editor-DVSYQ5XN.mjs"));
 function LazyEditor(props) {
   const fallback2 = /* @__PURE__ */ jsxs(Box, { sx: { px: 3 }, children: [
     /* @__PURE__ */ jsx(Skeleton, {}),
@@ -12432,6 +12438,109 @@ function SegmentedControl({ value, options, onChange, sx, ...rest }) {
     }
   ) });
 }
+const paymentKitMountPoint = getPaymentKitMountPoint();
+const buttonDisabledProps = {
+  color: "inherit",
+  variant: "contained",
+  sx: {
+    color: "grey.800",
+    cursor: "not-allowed"
+  }
+};
+const isBlurSubscriptionPublicType = ((_j = (_i = window == null ? void 0 : window.blocklet) == null ? void 0 : _i.preferences) == null ? void 0 : _j.subscriptionPublicType) === "blur";
+function Paywall({ children, cta, ...rest }) {
+  return /* @__PURE__ */ jsxs(Box, { ...rest, children: [
+    /* @__PURE__ */ jsx(
+      Box,
+      {
+        sx: {
+          ...isBlurSubscriptionPublicType && {
+            maxHeight: "70vh",
+            overflow: "hidden",
+            position: "relative"
+          }
+        },
+        children
+      }
+    ),
+    /* @__PURE__ */ jsx(
+      Box,
+      {
+        className: "paywall",
+        sx: {
+          display: "flex",
+          flexDirection: "column",
+          alignItems: "center",
+          py: 6,
+          color: "#fff",
+          bgcolor: "#000",
+          borderRadius: 2,
+          position: "sticky",
+          bottom: 16,
+          // 向上白色渐变背景
+          ":before": {
+            content: '""',
+            position: "absolute",
+            left: 0,
+            right: 0,
+            top: "-50%",
+            height: "50%",
+            background: "linear-gradient(transparent, rgba(255, 255, 255, 0.9) 85%)"
+          }
+        },
+        children: cta
+      }
+    )
+  ] });
+}
+function SubscriptionPaywall({ type, fetchPaymentLink, ...rest }) {
+  const { session } = useSessionContext();
+  const { t } = useLocaleContext();
+  const { data, loading } = useRequest(() => fetchPaymentLink({ type, redirect: window.location.href }));
+  const paymentLink = paymentKitMountPoint && (data == null ? void 0 : data.link) ? joinURL(paymentKitMountPoint, data.link) : null;
+  const loginAndReloadPage = () => {
+    session.login(() => {
+      window.location.reload();
+    });
+  };
+  const isDisabled = !paymentLink && !loading;
+  return /* @__PURE__ */ jsx(
+    Paywall,
+    {
+      ...rest,
+      cta: /* @__PURE__ */ jsxs(Fragment, { children: [
+        /* @__PURE__ */ jsx(Typography$1, { variant: "h2", sx: { fontWeight: "bold" }, children: t("paywall.subscription.title") }),
+        /* @__PURE__ */ jsx(Typography$1, { variant: "body1", sx: { maxWidth: 600, mt: 1, mx: 4, textAlign: "center" }, children: t("paywall.subscription.desc") }),
+        /* @__PURE__ */ jsx(Box, { sx: { mt: 6 }, children: /* @__PURE__ */ jsxs(
+          Button$1,
+          {
+            href: paymentLink || "#",
+            color: "primary",
+            variant: "contained",
+            size: "large",
+            ...isDisabled ? buttonDisabledProps : {},
+            children: [
+              t("paywall.subscription.subscribeNow"),
+              loading && /* @__PURE__ */ jsx(CircularProgress, { size: 16, sx: { ml: 1, color: "#fff" } })
+            ]
+          }
+        ) }),
+        !(session == null ? void 0 : session.user) && /* @__PURE__ */ jsxs(Typography$1, { variant: "body1", sx: { mt: 2, color: "grey.400" }, children: [
+          /* @__PURE__ */ jsx(Box, { component: "span", sx: { display: "inline-block", mr: 1 }, children: t("paywall.subscription.alreadySubscribe") }),
+          /* @__PURE__ */ jsx(
+            Box,
+            {
+              component: "span",
+              sx: { textDecoration: "underline", fontWeight: "bold", cursor: "pointer" },
+              onClick: loginAndReloadPage,
+              children: t("common.connect")
+            }
+          )
+        ] })
+      ] })
+    }
+  );
+}
 export {
   ChatListInWallet as $,
   Avatar as A,
@@ -12473,6 +12582,8 @@ export {
   useConfirm as a8,
   ConfirmProvider as a9,
   useArcSphereDialog as aA,
+  Paywall as aB,
+  SubscriptionPaywall as aC,
   SecureLabelPicker as aa,
   useApiErrorHandler as ab,
   useDefaultApiErrorHandler as ac,

package/dist/index.d.ts

@@ -30,3 +30,4 @@ export * from './ws';
 export * from './components/toast';
 export * from './components/arcsphere';
 export { default as RelativeTime } from './components/shared/relative-time';
+export * from './components/paywall';

package/dist/index.es.js

@@ -1,5 +1,5 @@
 export * from "@blocklet/labels";
-import { U, o, X, A, n, ae, B, G, L, K, N, aq, Z, Y, a0, _, $, a2, x, C, y, z, F, a6, a7, ai, a9, Q, T, ad, D, ah, ag, J, H, b, m, af, M, P, ap, w, v, R, S, aa, ar, q, a3, a5, aj, am, al, az, as, O, an, at, aw, ax, l, ay, h, p, r, k, av, t, j, ab, aA, W, c, a1, E, a8, ac, e, u, ao, d, au, a4, ak, f } from "./index-Cm1TeDDQ.mjs";
+import { U, o, X, A, n, ae, B, G, L, K, N, aq, Z, Y, a0, _, $, a2, x, C, y, z, F, a6, a7, ai, a9, Q, T, ad, D, ah, ag, J, H, b, m, af, M, P, aB, ap, w, v, R, S, aa, ar, aC, q, a3, a5, aj, am, al, az, as, O, an, at, aw, ax, l, ay, h, p, r, k, av, t, j, ab, aA, W, c, a1, E, a8, ac, e, u, ao, d, au, a4, ak, f } from "./index-DoRK59kW.mjs";
 import "react/jsx-runtime";
 import "react";
 import "@mui/material/Box";
@@ -49,6 +49,7 @@ export {
   af as LazyEditor,
   M as Menu,
   P as Pagination,
+  aB as Paywall,
   ap as PointUpProvider,
   w as Post,
   v as PostContent,
@@ -56,6 +57,7 @@ export {
   S as ScrollableEditorWrapper,
   aa as SecureLabelPicker,
   ar as SegmentedControl,
+  aC as SubscriptionPaywall,
   q as SystemUser,
   a3 as UnreadNotificationContext,
   a5 as UnreadNotificationProvider,

package/dist/index.umd.js

@@ -5,7 +5,7 @@
 var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
 var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "symbol" ? key + "" : key, value);
 
-  var _a, _b, _c, _d, _e, _f;
+  var _a, _b, _c, _d, _e, _f, _i, _j;
   const typography = {
     h1: {
       fontSize: "1.875rem",
@@ -293,6 +293,11 @@ var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "sy
     }
     return window.__discuss_kit_client_id__;
   };
+  const getPaymentKitMountPoint = () => {
+    var _a2, _b2;
+    const info = (_b2 = (_a2 = window.blocklet) == null ? void 0 : _a2.componentMountPoints) == null ? void 0 : _b2.find((x) => x.did === "z2qaCNvKMv5GjouKdcDWexv6WqtHbpNPQDnAk");
+    return info == null ? void 0 : info.mountPoint;
+  };
   const utils = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({
     __proto__: null,
     blockletExists,
@@ -304,6 +309,7 @@ var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "sy
     getDraftSessionKeyPrefix,
     getExcerptFromLexicalContent,
     getLastItem,
+    getPaymentKitMountPoint,
     getPreference,
     getResizedAvatar,
     isInDiscussKitApp,
@@ -12356,6 +12362,109 @@ var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "sy
       }
     ) });
   }
+  const paymentKitMountPoint = getPaymentKitMountPoint();
+  const buttonDisabledProps = {
+    color: "inherit",
+    variant: "contained",
+    sx: {
+      color: "grey.800",
+      cursor: "not-allowed"
+    }
+  };
+  const isBlurSubscriptionPublicType = ((_j = (_i = window == null ? void 0 : window.blocklet) == null ? void 0 : _i.preferences) == null ? void 0 : _j.subscriptionPublicType) === "blur";
+  function Paywall({ children, cta, ...rest }) {
+    return /* @__PURE__ */ jsxRuntime.jsxs(material.Box, { ...rest, children: [
+      /* @__PURE__ */ jsxRuntime.jsx(
+        material.Box,
+        {
+          sx: {
+            ...isBlurSubscriptionPublicType && {
+              maxHeight: "70vh",
+              overflow: "hidden",
+              position: "relative"
+            }
+          },
+          children
+        }
+      ),
+      /* @__PURE__ */ jsxRuntime.jsx(
+        material.Box,
+        {
+          className: "paywall",
+          sx: {
+            display: "flex",
+            flexDirection: "column",
+            alignItems: "center",
+            py: 6,
+            color: "#fff",
+            bgcolor: "#000",
+            borderRadius: 2,
+            position: "sticky",
+            bottom: 16,
+            // 向上白色渐变背景
+            ":before": {
+              content: '""',
+              position: "absolute",
+              left: 0,
+              right: 0,
+              top: "-50%",
+              height: "50%",
+              background: "linear-gradient(transparent, rgba(255, 255, 255, 0.9) 85%)"
+            }
+          },
+          children: cta
+        }
+      )
+    ] });
+  }
+  function SubscriptionPaywall({ type, fetchPaymentLink, ...rest }) {
+    const { session } = useSessionContext();
+    const { t } = context.useLocaleContext();
+    const { data, loading } = ahooks.useRequest(() => fetchPaymentLink({ type, redirect: window.location.href }));
+    const paymentLink = paymentKitMountPoint && (data == null ? void 0 : data.link) ? ufo.joinURL(paymentKitMountPoint, data.link) : null;
+    const loginAndReloadPage = () => {
+      session.login(() => {
+        window.location.reload();
+      });
+    };
+    const isDisabled = !paymentLink && !loading;
+    return /* @__PURE__ */ jsxRuntime.jsx(
+      Paywall,
+      {
+        ...rest,
+        cta: /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+          /* @__PURE__ */ jsxRuntime.jsx(material.Typography, { variant: "h2", sx: { fontWeight: "bold" }, children: t("paywall.subscription.title") }),
+          /* @__PURE__ */ jsxRuntime.jsx(material.Typography, { variant: "body1", sx: { maxWidth: 600, mt: 1, mx: 4, textAlign: "center" }, children: t("paywall.subscription.desc") }),
+          /* @__PURE__ */ jsxRuntime.jsx(material.Box, { sx: { mt: 6 }, children: /* @__PURE__ */ jsxRuntime.jsxs(
+            material.Button,
+            {
+              href: paymentLink || "#",
+              color: "primary",
+              variant: "contained",
+              size: "large",
+              ...isDisabled ? buttonDisabledProps : {},
+              children: [
+                t("paywall.subscription.subscribeNow"),
+                loading && /* @__PURE__ */ jsxRuntime.jsx(material.CircularProgress, { size: 16, sx: { ml: 1, color: "#fff" } })
+              ]
+            }
+          ) }),
+          !(session == null ? void 0 : session.user) && /* @__PURE__ */ jsxRuntime.jsxs(material.Typography, { variant: "body1", sx: { mt: 2, color: "grey.400" }, children: [
+            /* @__PURE__ */ jsxRuntime.jsx(material.Box, { component: "span", sx: { display: "inline-block", mr: 1 }, children: t("paywall.subscription.alreadySubscribe") }),
+            /* @__PURE__ */ jsxRuntime.jsx(
+              material.Box,
+              {
+                component: "span",
+                sx: { textDecoration: "underline", fontWeight: "bold", cursor: "pointer" },
+                onClick: loginAndReloadPage,
+                children: t("common.connect")
+              }
+            )
+          ] })
+        ] })
+      }
+    );
+  }
   const BlockletEditor = Util.lazyRetry(() => import("@blocklet/editor"));
   const Root = material.styled(material.Box)`
   .be-editable,
@@ -12435,6 +12544,7 @@ var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "sy
   exports2.LazyEditor = LazyEditor;
   exports2.Menu = Menu;
   exports2.Pagination = Pagination;
+  exports2.Paywall = Paywall;
   exports2.PointUpProvider = PointUpProvider;
   exports2.Post = PostComponent;
   exports2.PostContent = PostContent;
@@ -12442,6 +12552,7 @@ var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "sy
   exports2.ScrollableEditorWrapper = ScrollableEditorWrapper;
   exports2.SecureLabelPicker = SecureLabelPicker;
   exports2.SegmentedControl = SegmentedControl;
+  exports2.SubscriptionPaywall = SubscriptionPaywall;
   exports2.SystemUser = SystemUser;
   exports2.UnreadNotificationContext = UnreadNotificationContext;
   exports2.UnreadNotificationProvider = UnreadNotificationProvider;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@blocklet/discuss-kit-ux",
-  "version": "2.1.210",
+  "version": "2.1.212",
   "files": [
     "dist"
   ],
@@ -45,8 +45,8 @@
     "ufo": "^1.5.4",
     "unstated-next": "^1.1.0",
     "url-join": "^4.0.1",
-    "@blocklet/editor": "^2.1.210",
-    "@blocklet/labels": "^2.1.210"
+    "@blocklet/editor": "^2.1.212",
+    "@blocklet/labels": "^2.1.212"
   },
   "peerDependencies": {
     "@arcblock/did-connect": "^2.10.36",