@blocklet/payment-react 1.18.3 → 1.18.4

package/es/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/es/checkout/donate.js

@@ -9,26 +9,38 @@ import {
   Button,
   CircularProgress,
   Hidden,
+  IconButton,
   Popover,
   Stack,
   Table,
   TableBody,
   TableCell,
   TableRow,
-  Typography
+  Typography,
+  Tooltip
 } from "@mui/material";
-import { useMount, useRequest, useSetState } from "ahooks";
+import { useRequest, useSetState } from "ahooks";
 import omit from "lodash/omit";
 import uniqBy from "lodash/unionBy";
-import { useEffect, useState } from "react";
+import { useEffect, useRef, useState } from "react";
+import { Settings } from "@mui/icons-material";
 import TxLink from "../components/blockchain/tx.js";
 import api from "../libs/api.js";
-import { formatAmount, formatBNStr, formatDateTime, formatError, getCustomerAvatar, lazyLoad } from "../libs/util.js";
+import {
+  formatAmount,
+  formatBNStr,
+  formatDateTime,
+  formatError,
+  getCustomerAvatar,
+  lazyLoad,
+  openDonationSettings
+} from "../libs/util.js";
 import CheckoutForm from "./form.js";
 import { PaymentThemeProvider } from "../theme/index.js";
 import { usePaymentContext } from "../contexts/payment.js";
 import Livemode from "../components/livemode.js";
 import { useMobile } from "../hooks/mobile.js";
+import { useDonateContext } from "../contexts/donate.js";
 const donationCache = {};
 const createOrUpdateDonation = (settings, livemode = true) => {
   const donationKey = `${settings.target}-${livemode}`;
@@ -184,13 +196,39 @@ function SupporterSimple({ supporters = [], totalAmount = "0", currency, method
     }
   );
 }
+const defaultDonateAmount = {
+  presets: ["1", "5", "10"],
+  preset: "1",
+  minimum: "0.01",
+  maximum: "100",
+  custom: true
+};
 function useDonation(settings, livemode, mode = "default") {
   const [state, setState] = useSetState({
     open: false,
     supporterLoaded: false,
     exist: false
   });
-  const donation = useRequest(() => createOrUpdateDonation(settings, livemode), {
+  const donateContext = useDonateContext();
+  const { isMobile } = 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 = useRef(false);
+  const containerRef = useRef(null);
+  const donation = useRequest(() => createOrUpdateDonation(donateSettings, livemode), {
     manual: true,
     loadingDelay: 300
   });
@@ -201,14 +239,28 @@ function useDonation(settings, livemode, mode = "default") {
       loadingDelay: 300
     }
   );
-  useMount(() => {
-    if (mode !== "inline") {
-      lazyLoad(() => {
-        donation.run();
-        supporters.run();
-      });
-    }
-  });
+  const rootMargin = isMobile ? "50px" : `${Math.min(window.innerHeight / 2, 300)}px`;
+  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;
+          lazyLoad(() => {
+            donation.run();
+            supporters.run();
+          });
+        }
+      },
+      { threshold: 0, rootMargin }
+    );
+    observer.observe(element);
+    return () => observer.unobserve(element);
+  }, [mode]);
   useEffect(() => {
     if (donation.data && state.supporterLoaded === false) {
       setState({ supporterLoaded: true });
@@ -216,10 +268,13 @@ function useDonation(settings, livemode, mode = "default") {
     }
   }, [donation.data]);
   return {
+    containerRef,
     donation,
     supporters,
     state,
-    setState
+    setState,
+    donateSettings,
+    supportUpdateSettings: !!donateContext
   };
 }
 function CheckoutDonateInner({
@@ -233,13 +288,17 @@ function CheckoutDonateInner({
   theme,
   children
 }) {
-  const { state, setState, donation, supporters } = useDonation(settings, livemode, mode);
+  const { containerRef, state, setState, donation, supporters, donateSettings, supportUpdateSettings } = useDonation(
+    settings,
+    livemode,
+    mode
+  );
   const customers = uniqBy(supporters?.data?.supporters || [], "customer_did");
   const { t } = useLocaleContext();
   const [anchorEl, setAnchorEl] = useState(null);
   const [popoverOpen, setPopoverOpen] = useState(false);
   const { isMobile } = useMobile();
-  const { connect } = usePaymentContext();
+  const { connect, session } = usePaymentContext();
   const handlePaid = (...args) => {
     if (onPaid) {
       onPaid(...args);
@@ -264,18 +323,19 @@ function CheckoutDonateInner({
   const startDonate = () => {
     setState({ open: true });
   };
+  const inlineText = inlineOptions?.button?.text || donateSettings.appearance.button.text;
   const inlineRender = /* @__PURE__ */ jsxs(Fragment, { children: [
     /* @__PURE__ */ jsx(
       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__ */ jsxs(Stack, { direction: "row", alignItems: "center", spacing: 0.5, children: [
-          settings.appearance.button.icon,
-          typeof settings.appearance.button.text === "string" ? /* @__PURE__ */ jsx(Typography, { sx: { whiteSpace: "nowrap" }, children: settings.appearance.button.text }) : settings.appearance.button.text
+          donateSettings.appearance.button.icon,
+          typeof donateSettings.appearance.button.text === "string" ? /* @__PURE__ */ jsx(Typography, { sx: { whiteSpace: "nowrap" }, children: donateSettings.appearance.button.text }) : donateSettings.appearance.button.text
         ] })
       }
     ),
@@ -322,7 +382,7 @@ function CheckoutDonateInner({
               /* @__PURE__ */ jsxs(Box, { display: "flex", alignItems: "center", flexDirection: "column", gap: 2, children: [
                 /* @__PURE__ */ jsx(Button, { ...inlineOptions.button, onClick: () => startDonate(), children: /* @__PURE__ */ jsxs(Stack, { direction: "row", alignItems: "center", spacing: 0.5, children: [
                   inlineOptions?.button?.icon,
-                  typeof inlineOptions?.button?.text === "string" ? /* @__PURE__ */ jsx(Typography, { sx: { whiteSpace: "nowrap" }, children: inlineOptions?.button?.text }) : inlineOptions?.button?.text
+                  typeof inlineText === "string" ? /* @__PURE__ */ jsx(Typography, { sx: { whiteSpace: "nowrap" }, children: inlineText }) : inlineText
                 ] }) }),
                 /* @__PURE__ */ jsx(SupporterSimple, { ...supporters.data })
               ] })
@@ -344,19 +404,19 @@ function CheckoutDonateInner({
         /* @__PURE__ */ jsx(
           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__ */ jsxs(Stack, { direction: "row", alignItems: "center", spacing: 0.5, children: [
-              settings.appearance.button.icon,
-              typeof settings.appearance.button.text === "string" ? /* @__PURE__ */ jsx(Typography, { children: settings.appearance.button.text }) : settings.appearance.button.text
+              donateSettings.appearance.button.icon,
+              typeof donateSettings.appearance.button.text === "string" ? /* @__PURE__ */ jsx(Typography, { children: donateSettings.appearance.button.text }) : donateSettings.appearance.button.text
             ] })
           }
         ),
-        supporters.data && settings.appearance.history.variant === "avatar" && /* @__PURE__ */ jsx(SupporterAvatar, { ...supporters.data }),
-        supporters.data && settings.appearance.history.variant === "table" && /* @__PURE__ */ jsx(SupporterTable, { ...supporters.data })
+        supporters.data && donateSettings.appearance.history.variant === "avatar" && /* @__PURE__ */ jsx(SupporterAvatar, { ...supporters.data }),
+        supporters.data && donateSettings.appearance.history.variant === "table" && /* @__PURE__ */ jsx(SupporterTable, { ...supporters.data })
       ]
     }
   );
@@ -372,7 +432,8 @@ function CheckoutDonateInner({
           supporters.data?.currency?.decimal
         )} ${supporters.data?.currency?.symbol}`,
         supporters.data || {},
-        !!supporters.loading
+        !!supporters.loading,
+        donateSettings
       ) }) : /* @__PURE__ */ jsxs(Typography, { children: [
         "Please provide a valid render function ",
         /* @__PURE__ */ jsx("pre", { children: "(openDonate, donateTotalAmount, supporters) => ReactNode" })
@@ -380,15 +441,27 @@ function CheckoutDonateInner({
     }
     return defaultRender;
   };
-  return /* @__PURE__ */ jsxs(Fragment, { children: [
+  const isAdmin = ["owner", "admin"].includes(session?.user?.role);
+  return /* @__PURE__ */ jsxs("div", { ref: containerRef, children: [
     renderInnerView(),
     donation.data && /* @__PURE__ */ jsx(
       Dialog,
       {
         open: state.open,
         title: /* @__PURE__ */ jsxs(Box, { display: "flex", alignItems: "center", gap: 0.5, children: [
-          /* @__PURE__ */ jsx(Typography, { variant: "h3", sx: { maxWidth: 320, textOverflow: "ellipsis", overflow: "hidden" }, children: settings.title }),
-          !donation.data.livemode && /* @__PURE__ */ jsx(Livemode, { sx: { width: "fit-content" } })
+          /* @__PURE__ */ jsx(Typography, { variant: "h3", sx: { maxWidth: 320, textOverflow: "ellipsis", overflow: "hidden" }, children: donateSettings.title }),
+          supportUpdateSettings && isAdmin && /* @__PURE__ */ jsx(Tooltip, { title: t("payment.checkout.donation.configTip"), placement: "bottom", children: /* @__PURE__ */ jsx(
+            IconButton,
+            {
+              size: "small",
+              onClick: (e) => {
+                e.stopPropagation();
+                openDonationSettings(true);
+              },
+              children: /* @__PURE__ */ jsx(Settings, { fontSize: "small", sx: { ml: -0.5 } })
+            }
+          ) }),
+          !donation.data.livemode && /* @__PURE__ */ jsx(Livemode, { sx: { width: "fit-content", ml: 0.5 } })
         ] }),
         maxWidth: "md",
         toolbar: isMobile ? null : /* @__PURE__ */ jsxs(Box, { display: "flex", alignItems: "center", gap: 1, sx: { color: "text.secondary" }, children: [
@@ -430,7 +503,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/es/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/es/contexts/donate.js

@@ -0,0 +1,164 @@
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { useRequest } from "ahooks";
+import { createContext, useContext, useState } from "react";
+import Toast from "@arcblock/ux/lib/Toast";
+import { useLocaleContext } from "@arcblock/ux/lib/Locale/context";
+import { Button, Stack, Typography } from "@mui/material";
+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";
+const DonateContext = createContext({ api });
+const { Provider, Consumer } = DonateContext;
+const fetchDonateSetting = (params, forceRefresh = false) => {
+  const livemode = localStorage.getItem("livemode") !== "false";
+  const cacheKey = `donate-settings-${params.mountLocation}-${livemode}`;
+  const cachedRequest = new CachedRequest(
+    cacheKey,
+    () => api.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 } = useLocaleContext();
+  const [showConfirm, setShowConfirm] = useState(false);
+  const {
+    data = {
+      settings: {},
+      active: true
+    },
+    error,
+    run,
+    loading
+  } = useRequest(
+    (forceRender) => fetchDonateSetting(
+      {
+        mountLocation,
+        description,
+        defaultSettings,
+        active,
+        componentDid: window.blocklet?.componentId?.split("/").pop()
+      },
+      forceRender
+    ),
+    {
+      refreshDeps: [mountLocation],
+      onError: (err) => {
+        Toast.error(formatError(err));
+      }
+    }
+  );
+  const updateSettings = async (newSettings) => {
+    try {
+      const livemode = localStorage.getItem("livemode") !== "false";
+      await api.put(`/api/settings/${mountLocation}`, {
+        livemode,
+        settings: newSettings
+      });
+      run(true);
+      Toast.success(t("common.saved"));
+    } catch (err) {
+      Toast.error(formatError(err));
+      throw err;
+    }
+  };
+  const supportPaymentKit = getPaymentKitComponent();
+  const handleEnable = async () => {
+    if (!enableDonate || !data || data?.active)
+      return;
+    try {
+      await api.put(`/api/settings/${data.id}`, { active: true });
+      if (supportPaymentKit) {
+        setShowConfirm(true);
+      } else {
+        Toast.success(t("payment.checkout.donation.enableSuccess"));
+        run(true);
+      }
+    } catch (err) {
+      Toast.error(formatError(err));
+    }
+  };
+  if (loading || error) {
+    return null;
+  }
+  return /* @__PURE__ */ jsx(
+    Provider,
+    {
+      value: {
+        settings: data,
+        refresh: run,
+        updateSettings,
+        api
+      },
+      children: data?.active === false ? /* @__PURE__ */ jsxs(Fragment, { children: [
+        enableDonate && /* @__PURE__ */ jsxs(Stack, { spacing: 1, sx: { p: 2, bgcolor: "background.neutral", borderRadius: 1 }, 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") })
+        ] }),
+        showConfirm && /* @__PURE__ */ jsx(
+          ConfirmDialog,
+          {
+            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);
+              openDonationSettings(false);
+              setShowConfirm(false);
+            }
+          }
+        )
+      ] }) : children
+    }
+  );
+}
+function useDonateContext() {
+  const context = useContext(DonateContext);
+  return context;
+}
+DonateProvider.defaultProps = {
+  defaultSettings: {},
+  active: true,
+  enableDonate: false
+};
+export const clearDonateCache = (mountLocation) => {
+  const livemode = localStorage.getItem("livemode") !== "false";
+  const cacheKey = `donate-settings-${mountLocation}-${livemode}`;
+  localStorage.removeItem(cacheKey);
+};
+export const clearDonateSettings = async (mountLocation) => {
+  try {
+    const livemode = localStorage.getItem("livemode") !== "false";
+    await api.delete(`/api/settings/${mountLocation}`, {
+      params: {
+        livemode
+      }
+    });
+    clearDonateCache(mountLocation);
+  } catch (err) {
+    Toast.error(formatError(err));
+  }
+};
+export { DonateContext, DonateProvider, Consumer as DonateConsumer, useDonateContext };

package/es/contexts/payment.js

@@ -4,27 +4,14 @@ import { useLocalStorageState, useRequest } from "ahooks";
 import { createContext, useContext, useState } from "react";
 import api from "../libs/api.js";
 import { getPrefix } from "../libs/util.js";
+import { CachedRequest } from "../libs/cached-request.js";
 const PaymentContext = createContext({ api });
 const { Provider, Consumer } = PaymentContext;
-let settingsPromise = null;
 const getSettings = (forceRefresh = false) => {
   const livemode = localStorage.getItem("livemode") !== "false";
   const cacheKey = `payment-settings-${window.location.pathname}-${livemode}`;
-  const cachedData = sessionStorage.getItem(cacheKey);
-  if (cachedData && !forceRefresh) {
-    return JSON.parse(cachedData);
-  }
-  if (!settingsPromise) {
-    settingsPromise = api.get("/api/settings", { params: { livemode } }).then(({ data }) => {
-      sessionStorage.setItem(cacheKey, JSON.stringify(data));
-      return data;
-    }).catch((error) => {
-      throw error;
-    }).finally(() => {
-      settingsPromise = null;
-    });
-  }
-  return settingsPromise;
+  const cachedRequest = new CachedRequest(cacheKey, () => api.get("/api/settings", { params: { livemode } }));
+  return cachedRequest.fetch(forceRefresh);
 };
 const getCurrency = (currencyId, methods) => {
   const currencies = methods.reduce((acc, x) => acc.concat(x.payment_currencies), []);

package/es/index.d.ts

@@ -34,7 +34,9 @@ export { PaymentThemeProvider } from './theme';
 export * from './libs/util';
 export * from './libs/connect';
 export * from './libs/phone-validator';
+export * from './libs/cached-request';
 export * from './contexts/payment';
+export * from './contexts/donate';
 export * from './hooks/subscription';
 export * from './hooks/mobile';
 export * from './hooks/table';

package/es/index.js

@@ -34,7 +34,9 @@ export { PaymentThemeProvider } from "./theme/index.js";
 export * from "./libs/util.js";
 export * from "./libs/connect.js";
 export * from "./libs/phone-validator.js";
+export * from "./libs/cached-request.js";
 export * from "./contexts/payment.js";
+export * from "./contexts/donate.js";
 export * from "./hooks/subscription.js";
 export * from "./hooks/mobile.js";
 export * from "./hooks/table.js";

package/es/libs/cache.d.ts

@@ -0,0 +1,14 @@
+type CacheItem = {
+    promise: Promise<any> | null;
+};
+declare class GlobalCacheManager {
+    private static instance;
+    private cacheMap;
+    private constructor();
+    static getInstance(): GlobalCacheManager;
+    get(cacheKey: string): CacheItem | undefined;
+    set(cacheKey: string, item: CacheItem): void;
+    delete(cacheKey: string): void;
+}
+export declare const globalCache: GlobalCacheManager;
+export {};

package/es/libs/cache.js

@@ -0,0 +1,23 @@
+class GlobalCacheManager {
+  static instance;
+  cacheMap;
+  constructor() {
+    this.cacheMap = /* @__PURE__ */ new Map();
+  }
+  static getInstance() {
+    if (!GlobalCacheManager.instance) {
+      GlobalCacheManager.instance = new GlobalCacheManager();
+    }
+    return GlobalCacheManager.instance;
+  }
+  get(cacheKey) {
+    return this.cacheMap.get(cacheKey);
+  }
+  set(cacheKey, item) {
+    this.cacheMap.set(cacheKey, item);
+  }
+  delete(cacheKey) {
+    this.cacheMap.delete(cacheKey);
+  }
+}
+export const globalCache = GlobalCacheManager.getInstance();

package/es/libs/cached-request.d.ts

@@ -0,0 +1,17 @@
+type CacheStrategy = 'session' | 'local' | 'memory';
+interface CacheOptions {
+    strategy?: CacheStrategy;
+    ttl?: number;
+}
+export declare class CachedRequest {
+    private cacheKey;
+    private fetchData;
+    private options;
+    constructor(cacheKey: string, fetchData: () => Promise<any>, options?: CacheOptions);
+    private getCache;
+    private getCachedData;
+    private setCachedData;
+    private clearCache;
+    fetch(forceRefresh?: boolean): Promise<any>;
+}
+export {};