@blocklet/payment-react 1.18.4 → 1.18.5

package/es/checkout/donate.js

@@ -274,7 +274,7 @@ function useDonation(settings, livemode, mode = "default") {
     state,
     setState,
     donateSettings,
-    supportUpdateSettings: !!donateContext
+    supportUpdateSettings: !!donateContext.settings
   };
 }
 function CheckoutDonateInner({

package/es/contexts/donate.js

@@ -8,6 +8,7 @@ import api from "../libs/api.js";
 import { formatError, getPaymentKitComponent, openDonationSettings } from "../libs/util.js";
 import { CachedRequest } from "../libs/cached-request.js";
 import ConfirmDialog from "../components/confirm.js";
+import { usePaymentContext } from "./payment.js";
 const DonateContext = createContext({ api });
 const { Provider, Consumer } = DonateContext;
 const fetchDonateSetting = (params, forceRefresh = false) => {
@@ -38,6 +39,8 @@ function DonateProvider({
 }) {
   const { t } = useLocaleContext();
   const [showConfirm, setShowConfirm] = useState(false);
+  const { session } = usePaymentContext();
+  const isAdmin = ["owner", "admin"].includes(session?.user?.role);
   const {
     data = {
       settings: {},
@@ -107,9 +110,19 @@ function DonateProvider({
         api
       },
       children: data?.active === false ? /* @__PURE__ */ jsxs(Fragment, { children: [
-        enableDonate && /* @__PURE__ */ jsxs(Stack, { spacing: 1, sx: { p: 2, bgcolor: "background.neutral", borderRadius: 1 }, children: [
+        enableDonate && isAdmin && /* @__PURE__ */ jsxs(Stack, { spacing: 1, sx: { alignItems: "center" }, children: [
           /* @__PURE__ */ jsx(Typography, { color: "text.secondary", children: t("payment.checkout.donation.inactive") }),
-          /* @__PURE__ */ jsx(Button, { size: "small", variant: "outlined", color: "primary", onClick: handleEnable, children: t("payment.checkout.donation.enable") })
+          /* @__PURE__ */ jsx(
+            Button,
+            {
+              size: "small",
+              variant: "outlined",
+              color: "primary",
+              onClick: handleEnable,
+              sx: { width: "fit-content" },
+              children: t("payment.checkout.donation.enable")
+            }
+          )
         ] }),
         showConfirm && /* @__PURE__ */ jsx(
           ConfirmDialog,

package/es/libs/util.js

@@ -920,9 +920,7 @@ export function getPaymentKitComponent() {
 export function openDonationSettings(openInNewTab = false) {
   const paymentKit = getPaymentKitComponent();
   if (paymentKit) {
-    window.open(
-      `${window.location.origin}${paymentKit.mountPoint === "/" ? "" : paymentKit.mountPoint}/integrations/donations`,
-      openInNewTab ? "_blank" : "_self"
-    );
+    const mountPoint = paymentKit.mountPoint.endsWith("/") ? paymentKit.mountPoint.slice(0, -1) : paymentKit.mountPoint;
+    window.open(`${window.location.origin}${mountPoint}/integrations/donations`, openInNewTab ? "_blank" : "_self");
   }
 }

package/lib/checkout/donate.js

@@ -337,7 +337,7 @@ function useDonation(settings, livemode, mode = "default") {
     state,
     setState,
     donateSettings,
-    supportUpdateSettings: !!donateContext
+    supportUpdateSettings: !!donateContext.settings
   };
 }
 function CheckoutDonateInner({

package/lib/contexts/donate.js

@@ -17,6 +17,7 @@ var _api = _interopRequireDefault(require("../libs/api"));
 var _util = require("../libs/util");
 var _cachedRequest = require("../libs/cached-request");
 var _confirm = _interopRequireDefault(require("../components/confirm"));
+var _payment = require("./payment");
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 const DonateContext = exports.DonateContext = (0, _react.createContext)({
   api: _api.default
@@ -52,6 +53,10 @@ function DonateProvider({
     t
   } = (0, _context.useLocaleContext)();
   const [showConfirm, setShowConfirm] = (0, _react.useState)(false);
+  const {
+    session
+  } = (0, _payment.usePaymentContext)();
+  const isAdmin = ["owner", "admin"].includes(session?.user?.role);
   const {
     data = {
       settings: {},
@@ -114,12 +119,10 @@ function DonateProvider({
       api: _api.default
     },
     children: data?.active === false ? /* @__PURE__ */(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
-      children: [enableDonate && /* @__PURE__ */(0, _jsxRuntime.jsxs)(_material.Stack, {
+      children: [enableDonate && isAdmin && /* @__PURE__ */(0, _jsxRuntime.jsxs)(_material.Stack, {
         spacing: 1,
         sx: {
-          p: 2,
-          bgcolor: "background.neutral",
-          borderRadius: 1
+          alignItems: "center"
         },
         children: [/* @__PURE__ */(0, _jsxRuntime.jsx)(_material.Typography, {
           color: "text.secondary",
@@ -129,6 +132,9 @@ function DonateProvider({
           variant: "outlined",
           color: "primary",
           onClick: handleEnable,
+          sx: {
+            width: "fit-content"
+          },
           children: t("payment.checkout.donation.enable")
         })]
       }), showConfirm && /* @__PURE__ */(0, _jsxRuntime.jsx)(_confirm.default, {

package/lib/libs/util.js

@@ -1106,6 +1106,7 @@ function getPaymentKitComponent() {
 function openDonationSettings(openInNewTab = false) {
   const paymentKit = getPaymentKitComponent();
   if (paymentKit) {
-    window.open(`${window.location.origin}${paymentKit.mountPoint === "/" ? "" : paymentKit.mountPoint}/integrations/donations`, openInNewTab ? "_blank" : "_self");
+    const mountPoint = paymentKit.mountPoint.endsWith("/") ? paymentKit.mountPoint.slice(0, -1) : paymentKit.mountPoint;
+    window.open(`${window.location.origin}${mountPoint}/integrations/donations`, openInNewTab ? "_blank" : "_self");
   }
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@blocklet/payment-react",
-  "version": "1.18.4",
+  "version": "1.18.5",
   "description": "Reusable react components for payment kit v2",
   "keywords": [
     "react",
@@ -92,7 +92,7 @@
     "@babel/core": "^7.25.2",
     "@babel/preset-env": "^7.25.2",
     "@babel/preset-react": "^7.24.7",
-    "@blocklet/payment-types": "1.18.4",
+    "@blocklet/payment-types": "1.18.5",
     "@storybook/addon-essentials": "^7.6.20",
     "@storybook/addon-interactions": "^7.6.20",
     "@storybook/addon-links": "^7.6.20",
@@ -123,5 +123,5 @@
     "vite-plugin-babel": "^1.2.0",
     "vite-plugin-node-polyfills": "^0.21.0"
   },
-  "gitHead": "003d3b762bc9e3e224e4814dea95ff02d014868d"
+  "gitHead": "83cca0f1ac5814964c8bedd04f34a3a2a986f554"
 }

package/src/checkout/donate.tsx

@@ -383,7 +383,7 @@ function useDonation(
     state,
     setState,
     donateSettings,
-    supportUpdateSettings: !!donateContext,
+    supportUpdateSettings: !!donateContext.settings,
   };
 }
 

package/src/contexts/donate.tsx

@@ -10,6 +10,7 @@ import api from '../libs/api';
 import { formatError, getPaymentKitComponent, openDonationSettings } from '../libs/util';
 import { CachedRequest } from '../libs/cached-request';
 import ConfirmDialog from '../components/confirm';
+import { usePaymentContext } from './payment';
 
 export interface DonateConfigSettings {
   amount?: {
@@ -83,6 +84,8 @@ function DonateProvider({
 }: DonateContextProps) {
   const { t } = useLocaleContext();
   const [showConfirm, setShowConfirm] = useState(false);
+  const { session } = usePaymentContext();
+  const isAdmin = ['owner', 'admin'].includes(session?.user?.role);
   const {
     data = {
       settings: {},
@@ -157,10 +160,15 @@ function DonateProvider({
       }}>
       {(data as TSetting)?.active === false ? (
         <>
-          {enableDonate && (
-            <Stack spacing={1} sx={{ p: 2, bgcolor: 'background.neutral', borderRadius: 1 }}>
+          {enableDonate && isAdmin && (
+            <Stack spacing={1} sx={{ alignItems: 'center' }}>
               <Typography color="text.secondary">{t('payment.checkout.donation.inactive')}</Typography>
-              <Button size="small" variant="outlined" color="primary" onClick={handleEnable}>
+              <Button
+                size="small"
+                variant="outlined"
+                color="primary"
+                onClick={handleEnable}
+                sx={{ width: 'fit-content' }}>
                 {t('payment.checkout.donation.enable')}
               </Button>
             </Stack>

package/src/libs/util.ts

@@ -1180,9 +1180,7 @@ export function getPaymentKitComponent() {
 export function openDonationSettings(openInNewTab: boolean = false) {
   const paymentKit = getPaymentKitComponent();
   if (paymentKit) {
-    window.open(
-      `${window.location.origin}${paymentKit.mountPoint === '/' ? '' : paymentKit.mountPoint}/integrations/donations`,
-      openInNewTab ? '_blank' : '_self'
-    );
+    const mountPoint = paymentKit.mountPoint.endsWith('/') ? paymentKit.mountPoint.slice(0, -1) : paymentKit.mountPoint;
+    window.open(`${window.location.origin}${mountPoint}/integrations/donations`, openInNewTab ? '_blank' : '_self');
   }
 }