@blocklet/payment-react 1.18.3 → 1.18.5

package/src/checkout/donate.tsx

@@ -9,6 +9,7 @@ import type {
   TPaymentCurrency,
   TPaymentLink,
   TPaymentMethod,
+  TSetting,
 } from '@blocklet/payment-types';
 import {
   Alert,
@@ -18,6 +19,7 @@ import {
   Button,
   CircularProgress,
   Hidden,
+  IconButton,
   Popover,
   Stack,
   Table,
@@ -25,22 +27,33 @@ import {
   TableCell,
   TableRow,
   Typography,
+  Tooltip,
   type ButtonProps as MUIButtonProps,
 } 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';
 import api from '../libs/api';
-import { formatAmount, formatBNStr, formatDateTime, formatError, getCustomerAvatar, lazyLoad } from '../libs/util';
+import {
+  formatAmount,
+  formatBNStr,
+  formatDateTime,
+  formatError,
+  getCustomerAvatar,
+  lazyLoad,
+  openDonationSettings,
+} from '../libs/util';
 import type { CheckoutProps, PaymentThemeOptions } from '../types';
 import CheckoutForm from './form';
 import { PaymentThemeProvider } from '../theme';
 import { usePaymentContext } from '../contexts/payment';
 import Livemode from '../components/livemode';
 import { useMobile } from '../hooks/mobile';
+import { useDonateContext } from '../contexts/donate';
 
 export type DonateHistory = {
   supporters: TCheckoutSessionExpanded[];
@@ -49,14 +62,19 @@ export type DonateHistory = {
   // total?: number;
   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';
@@ -68,7 +86,8 @@ export type DonateProps = Pick<CheckoutProps, 'onPaid' | 'onError'> & {
     openDialog: () => void,
     donateTotalAmount: string,
     supporters: DonateHistory,
-    loading?: boolean
+    loading?: boolean,
+    donateSettings?: DonationSettings
   ) => React.ReactNode;
 };
 
@@ -274,13 +293,44 @@ function SupporterSimple({ supporters = [], totalAmount = '0', currency, method
   );
 }
 
-function useDonation(settings: DonationSettings, livemode: boolean, mode = 'default') {
+const defaultDonateAmount = {
+  presets: ['1', '5', '10'],
+  preset: '1',
+  minimum: '0.01',
+  maximum: '100',
+  custom: true,
+};
+function useDonation(
+  settings: RequiredDonationSettings & OptionalDonationSettings,
+  livemode: boolean,
+  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 = {} as TSetting } = 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<HTMLDivElement>(null);
+  const donation = useRequest(() => createOrUpdateDonation(donateSettings, livemode), {
     manual: true,
     loadingDelay: 300,
   });
@@ -291,16 +341,32 @@ function useDonation(settings: DonationSettings, livemode: boolean, mode = 'defa
       loadingDelay: 300,
     }
   );
+  const rootMargin = isMobile
+    ? '50px' // 移动端
+    : `${Math.min(window.innerHeight / 2, 300)}px`;
 
-  useMount(() => {
-    if (mode !== 'inline') {
-      lazyLoad(() => {
-        donation.run();
-        supporters.run();
-      });
-    }
+  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);
+    // eslint-disable-next-line consistent-return
+    return () => observer.unobserve(element);
     // eslint-disable-next-line react-hooks/exhaustive-deps
-  });
+  }, [mode]);
 
   useEffect(() => {
     if (donation.data && state.supporterLoaded === false) {
@@ -311,10 +377,13 @@ function useDonation(settings: DonationSettings, livemode: boolean, mode = 'defa
   }, [donation.data]);
 
   return {
+    containerRef,
     donation,
     supporters,
     state,
     setState,
+    donateSettings,
+    supportUpdateSettings: !!donateContext.settings,
   };
 }
 
@@ -330,13 +399,17 @@ function CheckoutDonateInner({
   children,
 }: DonateProps) {
   // eslint-disable-line
-  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 as DonateHistory)?.supporters || [], 'customer_did');
   const { t } = useLocaleContext();
   const [anchorEl, setAnchorEl] = useState<HTMLButtonElement | null>(null);
   const [popoverOpen, setPopoverOpen] = useState<boolean>(false);
   const { isMobile } = useMobile();
-  const { connect } = usePaymentContext();
+  const { connect, session } = usePaymentContext();
 
   const handlePaid = (...args: any[]) => {
     if (onPaid) {
@@ -370,20 +443,22 @@ function CheckoutDonateInner({
     setState({ open: true });
   };
 
+  const inlineText = inlineOptions?.button?.text || donateSettings.appearance.button.text;
+
   const inlineRender = (
     <>
       <Button
-        size={(settings.appearance?.button?.size || 'medium') as any}
-        color={(settings.appearance?.button?.color || 'primary') as any}
-        variant={(settings.appearance?.button?.variant || 'contained') as any}
-        {...settings.appearance?.button}
+        size={(donateSettings.appearance?.button?.size || 'medium') as any}
+        color={(donateSettings.appearance?.button?.color || 'primary') as any}
+        variant={(donateSettings.appearance?.button?.variant || 'contained') as any}
+        {...donateSettings.appearance?.button}
         onClick={handlePopoverOpen}>
         <Stack direction="row" alignItems="center" spacing={0.5}>
-          {settings.appearance.button.icon}
-          {typeof settings.appearance.button.text === 'string' ? (
-            <Typography sx={{ whiteSpace: 'nowrap' }}>{settings.appearance.button.text}</Typography>
+          {donateSettings.appearance.button.icon}
+          {typeof donateSettings.appearance.button.text === 'string' ? (
+            <Typography sx={{ whiteSpace: 'nowrap' }}>{donateSettings.appearance.button.text}</Typography>
           ) : (
-            settings.appearance.button.text
+            donateSettings.appearance.button.text
           )}
         </Stack>
       </Button>
@@ -425,10 +500,10 @@ function CheckoutDonateInner({
             <Button {...inlineOptions.button} onClick={() => startDonate()}>
               <Stack direction="row" alignItems="center" spacing={0.5}>
                 {inlineOptions?.button?.icon}
-                {typeof inlineOptions?.button?.text === 'string' ? (
-                  <Typography sx={{ whiteSpace: 'nowrap' }}>{inlineOptions?.button?.text}</Typography>
+                {typeof inlineText === 'string' ? (
+                  <Typography sx={{ whiteSpace: 'nowrap' }}>{inlineText}</Typography>
                 ) : (
-                  inlineOptions?.button?.text
+                  inlineText
                 )}
               </Stack>
             </Button>
@@ -446,24 +521,24 @@ function CheckoutDonateInner({
       alignItems="center"
       gap={{ xs: 1, sm: 2 }}>
       <Button
-        size={(settings.appearance?.button?.size || 'medium') as any}
-        color={(settings.appearance?.button?.color || 'primary') as any}
-        variant={(settings.appearance?.button?.variant || 'contained') as any}
-        {...settings.appearance?.button}
+        size={(donateSettings.appearance?.button?.size || 'medium') as any}
+        color={(donateSettings.appearance?.button?.color || 'primary') as any}
+        variant={(donateSettings.appearance?.button?.variant || 'contained') as any}
+        {...donateSettings.appearance?.button}
         onClick={() => startDonate()}>
         <Stack direction="row" alignItems="center" spacing={0.5}>
-          {settings.appearance.button.icon}
-          {typeof settings.appearance.button.text === 'string' ? (
-            <Typography>{settings.appearance.button.text}</Typography>
+          {donateSettings.appearance.button.icon}
+          {typeof donateSettings.appearance.button.text === 'string' ? (
+            <Typography>{donateSettings.appearance.button.text}</Typography>
           ) : (
-            settings.appearance.button.text
+            donateSettings.appearance.button.text
           )}
         </Stack>
       </Button>
-      {supporters.data && settings.appearance.history.variant === 'avatar' && (
+      {supporters.data && donateSettings.appearance.history.variant === 'avatar' && (
         <SupporterAvatar {...(supporters.data as DonateHistory)} />
       )}
-      {supporters.data && settings.appearance.history.variant === 'table' && (
+      {supporters.data && donateSettings.appearance.history.variant === 'table' && (
         <SupporterTable {...(supporters.data as DonateHistory)} />
       )}
     </Box>
@@ -482,7 +557,8 @@ function CheckoutDonateInner({
               (supporters.data as DonateHistory)?.currency?.decimal
             )} ${(supporters.data as DonateHistory)?.currency?.symbol}`,
             (supporters.data as DonateHistory) || {},
-            !!supporters.loading
+            !!supporters.loading,
+            donateSettings
           )}
         </>
       ) : (
@@ -494,8 +570,10 @@ function CheckoutDonateInner({
     return defaultRender;
   };
 
+  const isAdmin = ['owner', 'admin'].includes(session?.user?.role);
+
   return (
-    <>
+    <div ref={containerRef}>
       {renderInnerView()}
       {donation.data && (
         <Dialog
@@ -503,9 +581,21 @@ function CheckoutDonateInner({
           title={
             <Box display="flex" alignItems="center" gap={0.5}>
               <Typography variant="h3" sx={{ maxWidth: 320, textOverflow: 'ellipsis', overflow: 'hidden' }}>
-                {settings.title}
+                {donateSettings.title}
               </Typography>
-              {!donation.data.livemode && <Livemode sx={{ width: 'fit-content' }} />}
+              {supportUpdateSettings && isAdmin && (
+                <Tooltip title={t('payment.checkout.donation.configTip')} placement="bottom">
+                  <IconButton
+                    size="small"
+                    onClick={(e) => {
+                      e.stopPropagation();
+                      openDonationSettings(true);
+                    }}>
+                    <Settings fontSize="small" sx={{ ml: -0.5 }} />
+                  </IconButton>
+                </Tooltip>
+              )}
+              {!donation.data.livemode && <Livemode sx={{ width: 'fit-content', ml: 0.5 }} />}
             </Box>
           }
           maxWidth="md"
@@ -552,7 +642,7 @@ function CheckoutDonateInner({
               id={donation.data?.id}
               onPaid={handlePaid}
               onError={onError}
-              action={settings.appearance?.button?.text}
+              action={donateSettings.appearance?.button?.text}
               mode="inline"
               theme={theme}
               formType="donation"
@@ -580,7 +670,7 @@ function CheckoutDonateInner({
           </Box>
         </Dialog>
       )}
-    </>
+    </div>
   );
 }
 

package/src/contexts/donate.tsx

@@ -0,0 +1,234 @@
+import type { TSetting } from '@blocklet/payment-types';
+import { useRequest } from 'ahooks';
+import type { Axios } from 'axios';
+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';
+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?: {
+    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;
+};
+
+// @ts-ignore
+const DonateContext = createContext<DonateContextType>({ api });
+const { Provider, Consumer } = DonateContext;
+
+const fetchDonateSetting = (
+  params: {
+    mountLocation: string;
+    description: string;
+    defaultSettings?: DonateConfigSettings;
+    active?: boolean;
+    componentDid?: string;
+  },
+  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: 1000 * 60 * 60,
+      strategy: 'local',
+    }
+  );
+  return cachedRequest.fetch(forceRefresh);
+};
+
+function DonateProvider({
+  mountLocation,
+  description,
+  defaultSettings = {},
+  children,
+  active = true,
+  enableDonate = false,
+}: DonateContextProps) {
+  const { t } = useLocaleContext();
+  const [showConfirm, setShowConfirm] = useState(false);
+  const { session } = usePaymentContext();
+  const isAdmin = ['owner', 'admin'].includes(session?.user?.role);
+  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: DonateConfigSettings) => {
+    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 as TSetting)?.active) return;
+    try {
+      await api.put(`/api/settings/${(data as TSetting).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 (
+    <Provider
+      value={{
+        settings: data as TSetting,
+        refresh: run,
+        updateSettings,
+        api,
+      }}>
+      {(data as TSetting)?.active === false ? (
+        <>
+          {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}
+                sx={{ width: 'fit-content' }}>
+                {t('payment.checkout.donation.enable')}
+              </Button>
+            </Stack>
+          )}
+
+          {showConfirm && (
+            <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
+      )}
+    </Provider>
+  );
+}
+
+function useDonateContext() {
+  const context = useContext(DonateContext);
+  return context;
+}
+
+DonateProvider.defaultProps = {
+  defaultSettings: {},
+  active: true,
+  enableDonate: false,
+};
+
+export const clearDonateCache = (mountLocation: string) => {
+  const livemode = localStorage.getItem('livemode') !== 'false';
+  const cacheKey = `donate-settings-${mountLocation}-${livemode}`;
+  localStorage.removeItem(cacheKey);
+};
+
+export const clearDonateSettings = async (mountLocation: string) => {
+  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/src/contexts/payment.tsx

@@ -6,6 +6,7 @@ import { createContext, useContext, useState } from 'react';
 
 import api from '../libs/api';
 import { getPrefix } from '../libs/util';
+import { CachedRequest } from '../libs/cached-request';
 
 export interface Settings {
   paymentMethods: TPaymentMethodExpanded[];
@@ -39,29 +40,13 @@ export type PaymentContextProps = {
 const PaymentContext = createContext<PaymentContextType>({ api });
 const { Provider, Consumer } = PaymentContext;
 
-let settingsPromise: Promise<any> | null = 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 }: any) => {
-        sessionStorage.setItem(cacheKey, JSON.stringify(data));
-        return data;
-      })
-      .catch((error: any) => {
-        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: string, methods: TPaymentMethodExpanded[]) => {

package/src/index.ts

@@ -36,7 +36,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/src/libs/cache.ts

@@ -0,0 +1,33 @@
+type CacheItem = {
+  promise: Promise<any> | null;
+};
+
+class GlobalCacheManager {
+  private static instance: GlobalCacheManager;
+  private cacheMap: Map<string, CacheItem>;
+
+  private constructor() {
+    this.cacheMap = new Map();
+  }
+
+  static getInstance() {
+    if (!GlobalCacheManager.instance) {
+      GlobalCacheManager.instance = new GlobalCacheManager();
+    }
+    return GlobalCacheManager.instance;
+  }
+
+  get(cacheKey: string): CacheItem | undefined {
+    return this.cacheMap.get(cacheKey);
+  }
+
+  set(cacheKey: string, item: CacheItem) {
+    this.cacheMap.set(cacheKey, item);
+  }
+
+  delete(cacheKey: string) {
+    this.cacheMap.delete(cacheKey);
+  }
+}
+
+export const globalCache = GlobalCacheManager.getInstance();