@blocklet/payment-react 1.18.3 → 1.18.4

package/es/libs/cached-request.js

@@ -0,0 +1,79 @@
+import { globalCache } from "./cache.js";
+export class CachedRequest {
+  cacheKey;
+  fetchData;
+  options;
+  constructor(cacheKey, fetchData, options = {}) {
+    this.cacheKey = cacheKey;
+    this.fetchData = fetchData;
+    this.options = {
+      strategy: "session",
+      ttl: 0,
+      ...options
+    };
+  }
+  getCache() {
+    const { strategy } = this.options;
+    switch (strategy) {
+      case "local":
+        return localStorage;
+      case "memory":
+        return globalCache;
+      case "session":
+      default:
+        return sessionStorage;
+    }
+  }
+  getCachedData() {
+    const cache = this.getCache();
+    const data = this.options.strategy === "memory" ? cache.get(this.cacheKey) : cache.getItem(this.cacheKey);
+    if (!data)
+      return null;
+    const parsed = JSON.parse(data);
+    if (this.options.ttl && parsed.timestamp) {
+      const isExpired = Date.now() - parsed.timestamp > this.options.ttl;
+      if (isExpired) {
+        this.clearCache();
+        return null;
+      }
+    }
+    return parsed.data;
+  }
+  setCachedData(data) {
+    const cache = this.getCache();
+    const value = JSON.stringify({
+      data,
+      timestamp: Date.now()
+    });
+    if (this.options.strategy === "memory") {
+      cache.set(this.cacheKey, value);
+    } else {
+      cache.setItem(this.cacheKey, value);
+    }
+  }
+  clearCache() {
+    const cache = this.getCache();
+    if (this.options.strategy === "memory") {
+      cache.delete(this.cacheKey);
+    } else {
+      cache.removeItem(this.cacheKey);
+    }
+  }
+  fetch(forceRefresh = false) {
+    const cachedData = !forceRefresh && this.getCachedData();
+    if (cachedData)
+      return Promise.resolve(cachedData);
+    const globalItem = globalCache.get(this.cacheKey);
+    if (globalItem?.promise) {
+      return globalItem.promise;
+    }
+    const newPromise = this.fetchData().then(({ data }) => {
+      this.setCachedData(data);
+      return data;
+    }).finally(() => {
+      globalCache.delete(this.cacheKey);
+    });
+    globalCache.set(this.cacheKey, { promise: newPromise });
+    return newPromise;
+  }
+}

package/es/libs/util.d.ts

@@ -111,3 +111,5 @@ export declare function getInvoiceDescriptionAndReason(invoice: TInvoiceExpanded
     reason: string;
     type: string;
 };
+export declare function getPaymentKitComponent(): any;
+export declare function openDonationSettings(openInNewTab?: boolean): void;

package/es/libs/util.js

@@ -913,3 +913,16 @@ export function getInvoiceDescriptionAndReason(invoice, locale = "en") {
     type: invoiceType
   };
 }
+export function getPaymentKitComponent() {
+  const paymentKit = window.blocklet?.componentMountPoints?.find((c) => c.did === PAYMENT_KIT_DID);
+  return paymentKit || null;
+}
+export function openDonationSettings(openInNewTab = false) {
+  const paymentKit = getPaymentKitComponent();
+  if (paymentKit) {
+    window.open(
+      `${window.location.origin}${paymentKit.mountPoint === "/" ? "" : paymentKit.mountPoint}/integrations/donations`,
+      openInNewTab ? "_blank" : "_self"
+    );
+  }
+}

package/es/locales/en.js

@@ -134,7 +134,14 @@ export default flat({
           one: "{name} will receive all tips",
           multiple: "Tips will be distributed to {count} beneficiaries",
           view: "Click to view details"
-        }
+        },
+        inactive: "Donation feature is not enabled",
+        enable: "Enable Donation",
+        enableSuccess: "Enable Success",
+        configPrompt: "Donation feature is enabled, you can configure donation options in Payment Kit",
+        configNow: "Configure Now",
+        later: "Configure Later",
+        configTip: "Configure donation settings in Payment Kit"
       },
       cardPay: "{action} with card",
       empty: "No thing to pay",

package/es/locales/zh.js

@@ -134,7 +134,14 @@ export default flat({
           one: "{name} \u5C06\u83B7\u5F97\u5168\u90E8\u6253\u8D4F",
           multiple: "\u6253\u8D4F\u5C06\u6309\u6BD4\u4F8B\u5206\u914D\u7ED9 {count} \u4F4D\u53D7\u76CA\u4EBA",
           view: "\u70B9\u51FB\u67E5\u770B\u8BE6\u60C5"
-        }
+        },
+        inactive: "\u6253\u8D4F\u529F\u80FD\u6682\u672A\u5F00\u542F",
+        enable: "\u542F\u7528\u6253\u8D4F",
+        enableSuccess: "\u542F\u7528\u6210\u529F",
+        configPrompt: "\u6253\u8D4F\u529F\u80FD\u5DF2\u542F\u7528\uFF0C\u60A8\u53EF\u4EE5\u524D\u5F80 Payment Kit \u8FDB\u4E00\u6B65\u914D\u7F6E\u6253\u8D4F\u9009\u9879",
+        configNow: "\u7ACB\u5373\u914D\u7F6E",
+        later: "\u7A0D\u540E\u914D\u7F6E",
+        configTip: "\u524D\u5F80 Payment Kit \u914D\u7F6E\u6253\u8D4F\u9009\u9879"
       },
       cardPay: "\u4F7F\u7528\u5361\u7247{action}",
       empty: "\u6CA1\u6709\u53EF\u652F\u4ED8\u7684\u9879\u76EE",

package/es/payment/skeleton/donation.js

@@ -3,7 +3,7 @@ import { Box, Divider, Fade, Skeleton, Stack } from "@mui/material";
 export default function DonationSkeleton() {
   return /* @__PURE__ */ jsx(Fade, { in: true, children: /* @__PURE__ */ jsxs(Stack, { direction: "column", children: [
     /* @__PURE__ */ jsx(Skeleton, { variant: "text", sx: { fontSize: "2rem", width: "40%" } }),
-    /* @__PURE__ */ jsx(Skeleton, { sx: { mt: 2 }, variant: "rounded", height: 80 }),
+    /* @__PURE__ */ jsx(Skeleton, { sx: { mt: 2 }, variant: "rounded", height: 40 }),
     /* @__PURE__ */ jsx(
       Divider,
       {

package/lib/checkout/donate.d.ts

@@ -7,12 +7,14 @@ export type DonateHistory = {
     method: TPaymentMethod;
     totalAmount: string;
 };
+export type RequiredDonationSettings = Pick<DonationSettings, 'target' | 'title' | 'description' | 'reference' | 'beneficiaries'>;
+type OptionalDonationSettings = Partial<Omit<DonationSettings, keyof RequiredDonationSettings>>;
 export interface ButtonType extends Omit<MUIButtonProps, 'text' | 'icon'> {
-    text: string | React.ReactNode;
+    text?: string | React.ReactNode;
     icon: React.ReactNode;
 }
 export type DonateProps = Pick<CheckoutProps, 'onPaid' | 'onError'> & {
-    settings: DonationSettings;
+    settings: RequiredDonationSettings & OptionalDonationSettings;
     livemode?: boolean;
     timeout?: number;
     mode?: 'inline' | 'default' | 'custom';
@@ -20,7 +22,7 @@ export type DonateProps = Pick<CheckoutProps, 'onPaid' | 'onError'> & {
         button?: ButtonType;
     };
     theme?: 'default' | 'inherit' | PaymentThemeOptions;
-    children?: (openDialog: () => void, donateTotalAmount: string, supporters: DonateHistory, loading?: boolean) => React.ReactNode;
+    children?: (openDialog: () => void, donateTotalAmount: string, supporters: DonateHistory, loading?: boolean, donateSettings?: DonationSettings) => React.ReactNode;
 };
 declare function CheckoutDonate(props: DonateProps): import("react").JSX.Element;
 declare namespace CheckoutDonate {

package/lib/checkout/donate.js

@@ -12,6 +12,7 @@ var _ahooks = require("ahooks");
 var _omit = _interopRequireDefault(require("lodash/omit"));
 var _unionBy = _interopRequireDefault(require("lodash/unionBy"));
 var _react = require("react");
+var _iconsMaterial = require("@mui/icons-material");
 var _tx = _interopRequireDefault(require("../components/blockchain/tx"));
 var _api = _interopRequireDefault(require("../libs/api"));
 var _util = require("../libs/util");
@@ -20,6 +21,7 @@ var _theme = require("../theme");
 var _payment = require("../contexts/payment");
 var _livemode = _interopRequireDefault(require("../components/livemode"));
 var _mobile = require("../hooks/mobile");
+var _donate = require("../contexts/donate");
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 const donationCache = {};
 const createOrUpdateDonation = (settings, livemode = true) => {
@@ -256,13 +258,43 @@ function SupporterSimple({
     })]
   });
 }
+const defaultDonateAmount = {
+  presets: ["1", "5", "10"],
+  preset: "1",
+  minimum: "0.01",
+  maximum: "100",
+  custom: true
+};
 function useDonation(settings, livemode, mode = "default") {
   const [state, setState] = (0, _ahooks.useSetState)({
     open: false,
     supporterLoaded: false,
     exist: false
   });
-  const donation = (0, _ahooks.useRequest)(() => createOrUpdateDonation(settings, livemode), {
+  const donateContext = (0, _donate.useDonateContext)();
+  const {
+    isMobile
+  } = (0, _mobile.useMobile)();
+  const {
+    settings: donateConfig = {}
+  } = donateContext || {};
+  const donateSettings = {
+    ...settings,
+    amount: settings.amount || donateConfig?.settings?.amount || defaultDonateAmount,
+    appearance: {
+      button: {
+        ...(settings?.appearance?.button || {}),
+        text: settings?.appearance?.button?.text || donateConfig?.settings?.btnText || "Donate",
+        icon: settings?.appearance?.button?.icon || donateConfig?.settings?.icon || null
+      },
+      history: {
+        variant: settings?.appearance?.history?.variant || donateConfig?.settings?.historyType || "avatar"
+      }
+    }
+  };
+  const hasRequestedRef = (0, _react.useRef)(false);
+  const containerRef = (0, _react.useRef)(null);
+  const donation = (0, _ahooks.useRequest)(() => createOrUpdateDonation(donateSettings, livemode), {
     manual: true,
     loadingDelay: 300
   });
@@ -270,14 +302,26 @@ function useDonation(settings, livemode, mode = "default") {
     manual: true,
     loadingDelay: 300
   });
-  (0, _ahooks.useMount)(() => {
-    if (mode !== "inline") {
-      (0, _util.lazyLoad)(() => {
-        donation.run();
-        supporters.run();
-      });
-    }
-  });
+  const rootMargin = isMobile ? "50px" : `${Math.min(window.innerHeight / 2, 300)}px`;
+  (0, _react.useEffect)(() => {
+    if (mode === "inline") return;
+    const element = containerRef.current;
+    if (!element) return;
+    const observer = new IntersectionObserver(([entry]) => {
+      if (entry.isIntersecting && !hasRequestedRef.current) {
+        hasRequestedRef.current = true;
+        (0, _util.lazyLoad)(() => {
+          donation.run();
+          supporters.run();
+        });
+      }
+    }, {
+      threshold: 0,
+      rootMargin
+    });
+    observer.observe(element);
+    return () => observer.unobserve(element);
+  }, [mode]);
   (0, _react.useEffect)(() => {
     if (donation.data && state.supporterLoaded === false) {
       setState({
@@ -287,10 +331,13 @@ function useDonation(settings, livemode, mode = "default") {
     }
   }, [donation.data]);
   return {
+    containerRef,
     donation,
     supporters,
     state,
-    setState
+    setState,
+    donateSettings,
+    supportUpdateSettings: !!donateContext
   };
 }
 function CheckoutDonateInner({
@@ -305,10 +352,13 @@ function CheckoutDonateInner({
   children
 }) {
   const {
+    containerRef,
     state,
     setState,
     donation,
-    supporters
+    supporters,
+    donateSettings,
+    supportUpdateSettings
   } = useDonation(settings, livemode, mode);
   const customers = (0, _unionBy.default)(supporters?.data?.supporters || [], "customer_did");
   const {
@@ -320,7 +370,8 @@ function CheckoutDonateInner({
     isMobile
   } = (0, _mobile.useMobile)();
   const {
-    connect
+    connect,
+    session
   } = (0, _payment.usePaymentContext)();
   const handlePaid = (...args) => {
     if (onPaid) {
@@ -353,23 +404,24 @@ function CheckoutDonateInner({
       open: true
     });
   };
+  const inlineText = inlineOptions?.button?.text || donateSettings.appearance.button.text;
   const inlineRender = /* @__PURE__ */(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
     children: [/* @__PURE__ */(0, _jsxRuntime.jsx)(_material.Button, {
-      size: settings.appearance?.button?.size || "medium",
-      color: settings.appearance?.button?.color || "primary",
-      variant: settings.appearance?.button?.variant || "contained",
-      ...settings.appearance?.button,
+      size: donateSettings.appearance?.button?.size || "medium",
+      color: donateSettings.appearance?.button?.color || "primary",
+      variant: donateSettings.appearance?.button?.variant || "contained",
+      ...donateSettings.appearance?.button,
       onClick: handlePopoverOpen,
       children: /* @__PURE__ */(0, _jsxRuntime.jsxs)(_material.Stack, {
         direction: "row",
         alignItems: "center",
         spacing: 0.5,
-        children: [settings.appearance.button.icon, typeof settings.appearance.button.text === "string" ? /* @__PURE__ */(0, _jsxRuntime.jsx)(_material.Typography, {
+        children: [donateSettings.appearance.button.icon, typeof donateSettings.appearance.button.text === "string" ? /* @__PURE__ */(0, _jsxRuntime.jsx)(_material.Typography, {
           sx: {
             whiteSpace: "nowrap"
           },
-          children: settings.appearance.button.text
-        }) : settings.appearance.button.text]
+          children: donateSettings.appearance.button.text
+        }) : donateSettings.appearance.button.text]
       })
     }), /* @__PURE__ */(0, _jsxRuntime.jsx)(_material.Popover, {
       id: "mouse-over-popper",
@@ -414,12 +466,12 @@ function CheckoutDonateInner({
               direction: "row",
               alignItems: "center",
               spacing: 0.5,
-              children: [inlineOptions?.button?.icon, typeof inlineOptions?.button?.text === "string" ? /* @__PURE__ */(0, _jsxRuntime.jsx)(_material.Typography, {
+              children: [inlineOptions?.button?.icon, typeof inlineText === "string" ? /* @__PURE__ */(0, _jsxRuntime.jsx)(_material.Typography, {
                 sx: {
                   whiteSpace: "nowrap"
                 },
-                children: inlineOptions?.button?.text
-              }) : inlineOptions?.button?.text]
+                children: inlineText
+              }) : inlineText]
             })
           }), /* @__PURE__ */(0, _jsxRuntime.jsx)(SupporterSimple, {
             ...supporters.data
@@ -442,22 +494,22 @@ function CheckoutDonateInner({
       sm: 2
     },
     children: [/* @__PURE__ */(0, _jsxRuntime.jsx)(_material.Button, {
-      size: settings.appearance?.button?.size || "medium",
-      color: settings.appearance?.button?.color || "primary",
-      variant: settings.appearance?.button?.variant || "contained",
-      ...settings.appearance?.button,
+      size: donateSettings.appearance?.button?.size || "medium",
+      color: donateSettings.appearance?.button?.color || "primary",
+      variant: donateSettings.appearance?.button?.variant || "contained",
+      ...donateSettings.appearance?.button,
       onClick: () => startDonate(),
       children: /* @__PURE__ */(0, _jsxRuntime.jsxs)(_material.Stack, {
         direction: "row",
         alignItems: "center",
         spacing: 0.5,
-        children: [settings.appearance.button.icon, typeof settings.appearance.button.text === "string" ? /* @__PURE__ */(0, _jsxRuntime.jsx)(_material.Typography, {
-          children: settings.appearance.button.text
-        }) : settings.appearance.button.text]
+        children: [donateSettings.appearance.button.icon, typeof donateSettings.appearance.button.text === "string" ? /* @__PURE__ */(0, _jsxRuntime.jsx)(_material.Typography, {
+          children: donateSettings.appearance.button.text
+        }) : donateSettings.appearance.button.text]
       })
-    }), supporters.data && settings.appearance.history.variant === "avatar" && /* @__PURE__ */(0, _jsxRuntime.jsx)(SupporterAvatar, {
+    }), supporters.data && donateSettings.appearance.history.variant === "avatar" && /* @__PURE__ */(0, _jsxRuntime.jsx)(SupporterAvatar, {
       ...supporters.data
-    }), supporters.data && settings.appearance.history.variant === "table" && /* @__PURE__ */(0, _jsxRuntime.jsx)(SupporterTable, {
+    }), supporters.data && donateSettings.appearance.history.variant === "table" && /* @__PURE__ */(0, _jsxRuntime.jsx)(SupporterTable, {
       ...supporters.data
     })]
   });
@@ -467,7 +519,7 @@ function CheckoutDonateInner({
     }
     if (mode === "custom") {
       return children && typeof children === "function" ? /* @__PURE__ */(0, _jsxRuntime.jsx)(_jsxRuntime.Fragment, {
-        children: children(startDonate, `${(0, _util.formatAmount)(supporters.data?.totalAmount || "0", supporters.data?.currency?.decimal)} ${supporters.data?.currency?.symbol}`, supporters.data || {}, !!supporters.loading)
+        children: children(startDonate, `${(0, _util.formatAmount)(supporters.data?.totalAmount || "0", supporters.data?.currency?.decimal)} ${supporters.data?.currency?.symbol}`, supporters.data || {}, !!supporters.loading, donateSettings)
       }) : /* @__PURE__ */(0, _jsxRuntime.jsxs)(_material.Typography, {
         children: ["Please provide a valid render function ", /* @__PURE__ */(0, _jsxRuntime.jsx)("pre", {
           children: "(openDonate, donateTotalAmount, supporters) => ReactNode"
@@ -476,7 +528,9 @@ function CheckoutDonateInner({
     }
     return defaultRender;
   };
-  return /* @__PURE__ */(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
+  const isAdmin = ["owner", "admin"].includes(session?.user?.role);
+  return /* @__PURE__ */(0, _jsxRuntime.jsxs)("div", {
+    ref: containerRef,
     children: [renderInnerView(), donation.data && /* @__PURE__ */(0, _jsxRuntime.jsx)(_Dialog.default, {
       open: state.open,
       title: /* @__PURE__ */(0, _jsxRuntime.jsxs)(_material.Box, {
@@ -490,10 +544,27 @@ function CheckoutDonateInner({
             textOverflow: "ellipsis",
             overflow: "hidden"
           },
-          children: settings.title
+          children: donateSettings.title
+        }), supportUpdateSettings && isAdmin && /* @__PURE__ */(0, _jsxRuntime.jsx)(_material.Tooltip, {
+          title: t("payment.checkout.donation.configTip"),
+          placement: "bottom",
+          children: /* @__PURE__ */(0, _jsxRuntime.jsx)(_material.IconButton, {
+            size: "small",
+            onClick: e => {
+              e.stopPropagation();
+              (0, _util.openDonationSettings)(true);
+            },
+            children: /* @__PURE__ */(0, _jsxRuntime.jsx)(_iconsMaterial.Settings, {
+              fontSize: "small",
+              sx: {
+                ml: -0.5
+              }
+            })
+          })
         }), !donation.data.livemode && /* @__PURE__ */(0, _jsxRuntime.jsx)(_livemode.default, {
           sx: {
-            width: "fit-content"
+            width: "fit-content",
+            ml: 0.5
           }
         })]
       }),
@@ -551,7 +622,7 @@ function CheckoutDonateInner({
           id: donation.data?.id,
           onPaid: handlePaid,
           onError,
-          action: settings.appearance?.button?.text,
+          action: donateSettings.appearance?.button?.text,
           mode: "inline",
           theme,
           formType: "donation",

package/lib/contexts/donate.d.ts

@@ -0,0 +1,41 @@
+import type { TSetting } from '@blocklet/payment-types';
+import type { Axios } from 'axios';
+export interface DonateConfigSettings {
+    amount?: {
+        presets?: string[];
+        preset?: string;
+        custom: boolean;
+        minimum?: string;
+        maximum?: string;
+    };
+    btnText?: string;
+    historyType?: 'table' | 'avatar';
+}
+export type DonateContextType = {
+    settings: TSetting;
+    refresh: (forceRefresh?: boolean) => void;
+    updateSettings: (newSettings: DonateConfigSettings) => Promise<void>;
+    api: Axios;
+};
+export type DonateContextProps = {
+    mountLocation: string;
+    description: string;
+    defaultSettings?: DonateConfigSettings;
+    children: any;
+    active?: boolean;
+    enableDonate?: boolean;
+};
+declare const DonateContext: import("react").Context<DonateContextType>;
+declare const Consumer: import("react").Consumer<DonateContextType>;
+declare function DonateProvider({ mountLocation, description, defaultSettings, children, active, enableDonate, }: DonateContextProps): import("react").JSX.Element | null;
+declare namespace DonateProvider {
+    var defaultProps: {
+        defaultSettings: {};
+        active: boolean;
+        enableDonate: boolean;
+    };
+}
+declare function useDonateContext(): DonateContextType;
+export declare const clearDonateCache: (mountLocation: string) => void;
+export declare const clearDonateSettings: (mountLocation: string) => Promise<void>;
+export { DonateContext, DonateProvider, Consumer as DonateConsumer, useDonateContext };

package/lib/contexts/donate.js

@@ -0,0 +1,181 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.DonateContext = exports.DonateConsumer = void 0;
+exports.DonateProvider = DonateProvider;
+exports.clearDonateSettings = exports.clearDonateCache = void 0;
+exports.useDonateContext = useDonateContext;
+var _jsxRuntime = require("react/jsx-runtime");
+var _ahooks = require("ahooks");
+var _react = require("react");
+var _Toast = _interopRequireDefault(require("@arcblock/ux/lib/Toast"));
+var _context = require("@arcblock/ux/lib/Locale/context");
+var _material = require("@mui/material");
+var _api = _interopRequireDefault(require("../libs/api"));
+var _util = require("../libs/util");
+var _cachedRequest = require("../libs/cached-request");
+var _confirm = _interopRequireDefault(require("../components/confirm"));
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+const DonateContext = exports.DonateContext = (0, _react.createContext)({
+  api: _api.default
+});
+const {
+  Provider,
+  Consumer
+} = DonateContext;
+exports.DonateConsumer = Consumer;
+const fetchDonateSetting = (params, forceRefresh = false) => {
+  const livemode = localStorage.getItem("livemode") !== "false";
+  const cacheKey = `donate-settings-${params.mountLocation}-${livemode}`;
+  const cachedRequest = new _cachedRequest.CachedRequest(cacheKey, () => _api.default.post("/api/settings", {
+    ...params,
+    type: "donate",
+    livemode,
+    settings: params.defaultSettings
+  }), {
+    ttl: 1e3 * 60 * 60,
+    strategy: "local"
+  });
+  return cachedRequest.fetch(forceRefresh);
+};
+function DonateProvider({
+  mountLocation,
+  description,
+  defaultSettings = {},
+  children,
+  active = true,
+  enableDonate = false
+}) {
+  const {
+    t
+  } = (0, _context.useLocaleContext)();
+  const [showConfirm, setShowConfirm] = (0, _react.useState)(false);
+  const {
+    data = {
+      settings: {},
+      active: true
+    },
+    error,
+    run,
+    loading
+  } = (0, _ahooks.useRequest)(forceRender => fetchDonateSetting({
+    mountLocation,
+    description,
+    defaultSettings,
+    active,
+    componentDid: window.blocklet?.componentId?.split("/").pop()
+  }, forceRender), {
+    refreshDeps: [mountLocation],
+    onError: err => {
+      _Toast.default.error((0, _util.formatError)(err));
+    }
+  });
+  const updateSettings = async newSettings => {
+    try {
+      const livemode = localStorage.getItem("livemode") !== "false";
+      await _api.default.put(`/api/settings/${mountLocation}`, {
+        livemode,
+        settings: newSettings
+      });
+      run(true);
+      _Toast.default.success(t("common.saved"));
+    } catch (err) {
+      _Toast.default.error((0, _util.formatError)(err));
+      throw err;
+    }
+  };
+  const supportPaymentKit = (0, _util.getPaymentKitComponent)();
+  const handleEnable = async () => {
+    if (!enableDonate || !data || data?.active) return;
+    try {
+      await _api.default.put(`/api/settings/${data.id}`, {
+        active: true
+      });
+      if (supportPaymentKit) {
+        setShowConfirm(true);
+      } else {
+        _Toast.default.success(t("payment.checkout.donation.enableSuccess"));
+        run(true);
+      }
+    } catch (err) {
+      _Toast.default.error((0, _util.formatError)(err));
+    }
+  };
+  if (loading || error) {
+    return null;
+  }
+  return /* @__PURE__ */(0, _jsxRuntime.jsx)(Provider, {
+    value: {
+      settings: data,
+      refresh: run,
+      updateSettings,
+      api: _api.default
+    },
+    children: data?.active === false ? /* @__PURE__ */(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
+      children: [enableDonate && /* @__PURE__ */(0, _jsxRuntime.jsxs)(_material.Stack, {
+        spacing: 1,
+        sx: {
+          p: 2,
+          bgcolor: "background.neutral",
+          borderRadius: 1
+        },
+        children: [/* @__PURE__ */(0, _jsxRuntime.jsx)(_material.Typography, {
+          color: "text.secondary",
+          children: t("payment.checkout.donation.inactive")
+        }), /* @__PURE__ */(0, _jsxRuntime.jsx)(_material.Button, {
+          size: "small",
+          variant: "outlined",
+          color: "primary",
+          onClick: handleEnable,
+          children: t("payment.checkout.donation.enable")
+        })]
+      }), showConfirm && /* @__PURE__ */(0, _jsxRuntime.jsx)(_confirm.default, {
+        title: t("payment.checkout.donation.enableSuccess"),
+        message: t("payment.checkout.donation.configPrompt"),
+        cancel: t("payment.checkout.donation.later"),
+        confirm: t("payment.checkout.donation.configNow"),
+        onCancel: () => {
+          setShowConfirm(false);
+          run(true);
+        },
+        color: "primary",
+        onConfirm: () => {
+          run(true);
+          (0, _util.openDonationSettings)(false);
+          setShowConfirm(false);
+        }
+      })]
+    }) : children
+  });
+}
+function useDonateContext() {
+  const context = (0, _react.useContext)(DonateContext);
+  return context;
+}
+DonateProvider.defaultProps = {
+  defaultSettings: {},
+  active: true,
+  enableDonate: false
+};
+const clearDonateCache = mountLocation => {
+  const livemode = localStorage.getItem("livemode") !== "false";
+  const cacheKey = `donate-settings-${mountLocation}-${livemode}`;
+  localStorage.removeItem(cacheKey);
+};
+exports.clearDonateCache = clearDonateCache;
+const clearDonateSettings = async mountLocation => {
+  try {
+    const livemode = localStorage.getItem("livemode") !== "false";
+    await _api.default.delete(`/api/settings/${mountLocation}`, {
+      params: {
+        livemode
+      }
+    });
+    clearDonateCache(mountLocation);
+  } catch (err) {
+    _Toast.default.error((0, _util.formatError)(err));
+  }
+};
+exports.clearDonateSettings = clearDonateSettings;