@blocklet/payment-react 1.18.18 → 1.18.19

package/src/hooks/keyboard.ts

@@ -0,0 +1,159 @@
+import { useCallback, KeyboardEvent, useRef, RefObject } from 'react';
+
+type TabNavigationOptions<T> = {
+  /** whether to include custom option as the last item */
+  includeCustom?: boolean;
+  /** the value or index of the current selected item */
+  currentValue?: T | number;
+  /** whether the current selected item is custom */
+  isCustomSelected?: boolean;
+  /** a function to compare values, used to determine the current selected item */
+  compareValue?: (item: T, value: any) => boolean;
+  /** whether to allow Tab key navigation */
+  enabled?: boolean;
+  /** a selector to find navigable elements */
+  selector?: string;
+  /** an element container reference, limiting the query DOM range to improve performance */
+  containerRef?: RefObject<HTMLElement>;
+  /** the type of the current value, can be 'index' or 'value' */
+  valueType?: 'index' | 'value';
+};
+
+/**
+ * Tab key navigation hook - implement Tab key circular navigation between a set of options
+ *
+ * @param items an array of options, can be a simple type (string, number) array or an object array
+ * @param onSelect callback when an item is selected
+ * @param options configuration options
+ * @returns an object containing the event handler and control functions
+ *
+ * @example
+ * // simple string array
+ * const { handleKeyDown } = useTabNavigation(['10', '20', '50'], handleSelect);
+ *
+ * // object array
+ * const { handleKeyDown } = useTabNavigation(
+ *   [{id: 1, name: 'A'}, {id: 2, name: 'B'}],
+ *   handleSelect,
+ *   { compareValue: (item, value) => item.id === value.id }
+ * );
+ */
+export const useTabNavigation = <T>(
+  items: T[],
+  onSelect: (item: T | 'custom', index: number) => void,
+  options?: TabNavigationOptions<T>
+) => {
+  const {
+    valueType = 'value',
+    includeCustom = false,
+    currentValue,
+    isCustomSelected = false,
+    compareValue = (item: T, value: any) => item === value,
+    enabled = true,
+    selector = '.tab-navigable-card button',
+    containerRef,
+  } = options || {};
+
+  const hasTabbed = useRef(false);
+
+  const findNavigableElements = useCallback(() => {
+    if (containerRef?.current) {
+      return containerRef.current.querySelectorAll(selector);
+    }
+    return document.querySelectorAll(selector);
+  }, [containerRef, selector]);
+
+  // get current index
+  const determineCurrentIndex = useCallback(() => {
+    const allOptions = includeCustom ? [...items, 'custom' as any] : items;
+    if (allOptions.length === 0) return -1;
+
+    // if not tabbed, determine start point by currentValue
+    if (!hasTabbed.current) {
+      if (isCustomSelected && includeCustom) {
+        return items.length; // current selected custom option
+      }
+
+      if (currentValue !== undefined) {
+        if (valueType === 'index' && typeof currentValue === 'number') {
+          // if currentValue is index
+          return currentValue >= 0 && currentValue < items.length ? currentValue : -1;
+        }
+        // if currentValue is value, find matched item
+        return items.findIndex((item) => compareValue(item, currentValue));
+      }
+    } else {
+      // if tabbed, find current focused element
+      const focusedElement = document.activeElement;
+      const navigableElements = findNavigableElements();
+
+      for (let i = 0; i < navigableElements.length; i++) {
+        if (navigableElements[i] === focusedElement) {
+          return i;
+        }
+      }
+    }
+
+    return -1;
+  }, [items, includeCustom, isCustomSelected, currentValue, valueType, compareValue, findNavigableElements]);
+
+  // get next index
+  const getNextIndex = useCallback(
+    (currentIndex: number, isShiftKey: boolean) => {
+      const totalOptions = includeCustom ? items.length + 1 : items.length;
+
+      if (currentIndex === -1) {
+        return 0; // no current selected item, start from first item
+      }
+
+      if (isShiftKey) {
+        // Shift+Tab forward
+        return currentIndex === 0 ? totalOptions - 1 : currentIndex - 1;
+      }
+      // Tab backward
+      return currentIndex === totalOptions - 1 ? 0 : currentIndex + 1;
+    },
+    [items, includeCustom]
+  );
+
+  const handleKeyDown = useCallback(
+    (e: KeyboardEvent) => {
+      // if navigation is disabled or not Tab key, do not handle event
+      if (!enabled || e.key !== 'Tab') return;
+
+      e.preventDefault();
+      e.stopPropagation();
+
+      // determine current index and next index
+      const currentIndex = determineCurrentIndex();
+      const nextIndex = getNextIndex(currentIndex, e.shiftKey);
+
+      // mark as handled Tab event
+      hasTabbed.current = true;
+
+      // execute select callback
+      const selectedItem = nextIndex === items.length ? 'custom' : items[nextIndex];
+      onSelect(selectedItem, nextIndex);
+
+      // focus to next element
+      setTimeout(() => {
+        const elements = findNavigableElements();
+        if (elements[nextIndex]) {
+          (elements[nextIndex] as HTMLElement).focus();
+        }
+      }, 0);
+    },
+    [items, onSelect, enabled, determineCurrentIndex, getNextIndex, findNavigableElements]
+  );
+
+  // reset Tab state method
+  const resetTabNavigation = useCallback(() => {
+    hasTabbed.current = false;
+  }, []);
+
+  return {
+    handleKeyDown,
+    resetTabNavigation,
+    isTabNavigationActive: hasTabbed.current,
+  };
+};

package/src/index.ts

@@ -44,6 +44,7 @@ export * from './hooks/subscription';
 export * from './hooks/mobile';
 export * from './hooks/table';
 export * from './hooks/scroll';
+export * from './hooks/keyboard';
 
 export { translations, createTranslator } from './locales';
 

package/src/locales/en.tsx

@@ -164,7 +164,7 @@ export default flat({
         payment: 'Thanks for your purchase',
         subscription: 'Thanks for your subscribing',
         setup: 'Thanks for your subscribing',
-        donate: 'Thanks for your support',
+        donate: 'Thanks for your tip',
         tip: 'A payment to {payee} has been completed. You can view the details of this payment in your account.',
       },
       confirm: 'Confirming allows {payee} to charge or reduce your staking. You can cancel or revoke staking anytime.',

package/src/payment/form/index.tsx

@@ -429,6 +429,26 @@ export default function PaymentForm({
     setState({ stripePaying: false });
   };
 
+  useEffect(() => {
+    const handleKeyDown = (e: KeyboardEvent) => {
+      if (
+        e.key === 'Enter' &&
+        !state.submitting &&
+        !state.paying &&
+        !state.stripePaying &&
+        quantityInventoryStatus &&
+        payable
+      ) {
+        onAction();
+      }
+    };
+
+    window.addEventListener('keydown', handleKeyDown);
+    return () => {
+      window.removeEventListener('keydown', handleKeyDown);
+    };
+  }, [state.submitting, state.paying, state.stripePaying, quantityInventoryStatus, payable]); // eslint-disable-line react-hooks/exhaustive-deps
+
   if (onlyShowBtn) {
     return (
       <>

package/src/payment/product-donation.tsx

@@ -7,6 +7,15 @@ import { useEffect, useRef } from 'react';
 import { formatAmountPrecisionLimit } from '../libs/util';
 import { usePaymentContext } from '../contexts/payment';
 import { usePreventWheel } from '../hooks/scroll';
+import { useTabNavigation } from '../hooks/keyboard';
+
+// LocalStorage key base for preset selection
+const DONATION_PRESET_KEY_BASE = 'payment-donation-preset';
+const DONATION_CUSTOM_AMOUNT_KEY_BASE = 'payment-donation-custom-amount';
+
+const formatAmount = (amount: string | number): string => {
+  return String(amount);
+};
 
 export default function ProductDonation({
   item,
@@ -20,32 +29,129 @@ export default function ProductDonation({
   currency: TPaymentCurrency;
 }) {
   const { t, locale } = useLocaleContext();
-  const { setPayable } = usePaymentContext();
+  const { setPayable, session } = usePaymentContext();
   usePreventWheel();
-  const presets = settings?.amount?.presets || [];
-  const preset = settings?.amount?.preset || presets?.[0] || '0';
+  const presets = (settings?.amount?.presets || []).map(formatAmount);
+
+  const getUserStorageKey = (base: string) => {
+    const userDid = session?.user?.did;
+    return userDid ? `${base}:${userDid}` : base;
+  };
+
+  const getSavedCustomAmount = () => {
+    try {
+      return localStorage.getItem(getUserStorageKey(DONATION_CUSTOM_AMOUNT_KEY_BASE)) || '';
+    } catch (e) {
+      console.warn('Failed to access localStorage', e);
+      return '';
+    }
+  };
+
+  const getDefaultPreset = () => {
+    if (settings?.amount?.preset) {
+      return formatAmount(settings.amount.preset);
+    }
+
+    try {
+      const savedPreset = localStorage.getItem(getUserStorageKey(DONATION_PRESET_KEY_BASE));
+      if (savedPreset) {
+        if (presets.includes(formatAmount(savedPreset))) {
+          return formatAmount(savedPreset);
+        }
+        if (savedPreset === 'custom' && supportCustom) {
+          return 'custom';
+        }
+      }
+    } catch (e) {
+      console.warn('Failed to access localStorage', e);
+    }
+    if (presets.length > 0) {
+      const middleIndex = Math.floor(presets.length / 2);
+      return presets[middleIndex] || presets[0];
+    }
+    return '0';
+  };
+
   const supportPreset = presets.length > 0;
   const supportCustom = !!settings?.amount?.custom;
+  const defaultPreset = getDefaultPreset();
+  const defaultCustomAmount = defaultPreset === 'custom' ? getSavedCustomAmount() : '';
+
   const [state, setState] = useSetState({
-    selected: preset,
-    input: '',
-    custom: !supportPreset,
+    selected: defaultPreset === 'custom' ? '' : defaultPreset,
+    input: defaultCustomAmount,
+    custom: !supportPreset || defaultPreset === 'custom',
     error: '',
   });
+
   const customInputRef = useRef<HTMLInputElement>(null);
+  const containerRef = useRef<HTMLDivElement>(null);
+
+  const handleSelect = (amount: string) => {
+    setPayable(true);
+    setState({ selected: formatAmount(amount), custom: false, error: '' });
+    onChange({ priceId: item.price_id, amount: formatAmount(amount) });
+    localStorage.setItem(getUserStorageKey(DONATION_PRESET_KEY_BASE), formatAmount(amount));
+  };
+
+  const handleCustomSelect = () => {
+    setState({ custom: true, selected: '', error: '' });
+    const savedCustomAmount = getSavedCustomAmount();
+    if (savedCustomAmount) {
+      setState({ input: savedCustomAmount });
+      onChange({ priceId: item.price_id, amount: savedCustomAmount });
+      setPayable(true);
+    } else if (!state.input) {
+      setPayable(false);
+    }
+    localStorage.setItem(getUserStorageKey(DONATION_PRESET_KEY_BASE), 'custom');
+  };
+
+  const handleTabSelect = (selectedItem: string | 'custom') => {
+    if (selectedItem === 'custom') {
+      handleCustomSelect();
+    } else {
+      handleSelect(selectedItem as string);
+    }
+  };
+
+  // 使用useTabNavigation进行键盘导航
+  const { handleKeyDown } = useTabNavigation(presets, handleTabSelect, {
+    includeCustom: supportCustom,
+    currentValue: state.custom ? undefined : state.selected,
+    isCustomSelected: state.custom,
+    enabled: true,
+    selector: '.tab-navigable-card button',
+    containerRef,
+  });
 
-  // Set default amount
   useEffect(() => {
     if (settings.amount.preset) {
       setState({ selected: settings.amount.preset, custom: false });
       onChange({ priceId: item.price_id, amount: settings.amount.preset });
     } else if (settings.amount.presets && settings.amount.presets.length > 0) {
-      setState({ selected: settings.amount.presets[0], custom: false });
-      onChange({ priceId: item.price_id, amount: settings.amount.presets[0] });
+      const isCustom = defaultPreset === 'custom';
+      setState({
+        selected: isCustom ? '' : defaultPreset,
+        custom: isCustom,
+        input: isCustom ? getSavedCustomAmount() : '',
+      });
+
+      if (!isCustom) {
+        onChange({ priceId: item.price_id, amount: defaultPreset });
+      } else if (defaultCustomAmount) {
+        onChange({ priceId: item.price_id, amount: defaultCustomAmount });
+        setPayable(true);
+      } else {
+        setPayable(false);
+      }
     }
   }, [settings.amount.preset, settings.amount.presets]); // eslint-disable-line
 
   useEffect(() => {
+    if (containerRef.current) {
+      containerRef.current.focus();
+    }
     if (state.custom) {
       setTimeout(() => {
         customInputRef.current?.focus();
@@ -53,12 +159,6 @@ export default function ProductDonation({
     }
   }, [state.custom]);
 
-  const handleSelect = (amount: string) => {
-    setPayable(true);
-    setState({ selected: amount, custom: false, error: '' });
-    onChange({ priceId: item.price_id, amount });
-  };
-
   const handleInput = (event: any) => {
     const { value } = event.target;
     const min = parseFloat(settings.amount.minimum || '0');
@@ -78,69 +178,75 @@ export default function ProductDonation({
     }
     setPayable(true);
     setState({ error: '', input: value });
-    onChange({ priceId: item.price_id, amount: value });
-  };
-
-  const handleCustomSelect = () => {
-    setState({ custom: true, error: '' });
-    if (!state.input) {
-      setPayable(false);
-    }
+    onChange({ priceId: item.price_id, amount: formatAmount(value) });
+    localStorage.setItem(getUserStorageKey(DONATION_CUSTOM_AMOUNT_KEY_BASE), formatAmount(value));
   };
 
   return (
-    <Box display="flex" flexDirection="column" alignItems="flex-start" gap={1.5}>
+    <Box
+      ref={containerRef}
+      display="flex"
+      flexDirection="column"
+      alignItems="flex-start"
+      gap={1.5}
+      onKeyDown={handleKeyDown}
+      tabIndex={0}
+      sx={{ outline: 'none' }}>
       {supportPreset && (
         <Grid container spacing={2}>
-          {settings.amount.presets &&
-            settings.amount.presets.length > 0 &&
-            settings.amount.presets.map((amount) => (
-              <Grid item xs={6} sm={3} key={amount}>
-                <Card
-                  key={amount}
-                  variant="outlined"
-                  sx={{
-                    minWidth: 115,
-                    textAlign: 'center',
-                    transition: 'all 0.3s',
-                    cursor: 'pointer',
-                    '&:hover': {
-                      transform: 'translateY(-4px)',
-                      boxShadow: 3,
-                    },
-                    height: '42px',
-                    ...(state.selected === amount && !state.custom
-                      ? { borderColor: 'primary.main', borderWidth: 1 }
-                      : {}),
-                  }}>
-                  <CardActionArea onClick={() => handleSelect(amount)}>
-                    <Stack
-                      direction="row"
-                      sx={{ py: 1.5, px: 1.5 }}
-                      spacing={0.5}
-                      alignItems="center"
-                      justifyContent="center">
-                      <Avatar src={currency?.logo} sx={{ width: 16, height: 16, mr: 0.5 }} alt={currency?.symbol} />
-                      <Typography
-                        component="strong"
-                        lineHeight={1}
-                        variant="h3"
-                        sx={{ fontVariantNumeric: 'tabular-nums', fontWeight: 400 }}>
-                        {amount}
-                      </Typography>
-                      <Typography lineHeight={1} fontSize={14} color="text.secondary">
-                        {currency?.symbol}
-                      </Typography>
-                    </Stack>
-                  </CardActionArea>
-                </Card>
-              </Grid>
-            ))}
+          {presets.map((amount) => (
+            <Grid item xs={6} sm={3} key={amount}>
+              <Card
+                variant="outlined"
+                className="tab-navigable-card"
+                sx={{
+                  minWidth: 115,
+                  textAlign: 'center',
+                  transition: 'all 0.3s',
+                  cursor: 'pointer',
+                  '&:hover': {
+                    transform: 'translateY(-4px)',
+                    boxShadow: 3,
+                  },
+                  '.MuiCardActionArea-focusHighlight': {
+                    backgroundColor: 'transparent',
+                  },
+                  height: '42px',
+                  ...(formatAmount(state.selected) === formatAmount(amount) && !state.custom
+                    ? { borderColor: 'primary.main', borderWidth: 1 }
+                    : {}),
+                }}>
+                <CardActionArea
+                  onClick={() => handleSelect(amount)}
+                  tabIndex={0}
+                  aria-selected={formatAmount(state.selected) === formatAmount(amount) && !state.custom}>
+                  <Stack
+                    direction="row"
+                    sx={{ py: 1.5, px: 1.5 }}
+                    spacing={0.5}
+                    alignItems="center"
+                    justifyContent="center">
+                    <Avatar src={currency?.logo} sx={{ width: 16, height: 16, mr: 0.5 }} alt={currency?.symbol} />
+                    <Typography
+                      component="strong"
+                      lineHeight={1}
+                      variant="h3"
+                      sx={{ fontVariantNumeric: 'tabular-nums', fontWeight: 400 }}>
+                      {amount}
+                    </Typography>
+                    <Typography lineHeight={1} fontSize={14} color="text.secondary">
+                      {currency?.symbol}
+                    </Typography>
+                  </Stack>
+                </CardActionArea>
+              </Card>
+            </Grid>
+          ))}
           {supportCustom && (
             <Grid item xs={6} sm={3} key="custom">
               <Card
-                key="custom"
                 variant="outlined"
+                className="tab-navigable-card"
                 sx={{
                   textAlign: 'center',
                   transition: 'all 0.3s',
@@ -149,10 +255,13 @@ export default function ProductDonation({
                     transform: 'translateY(-4px)',
                     boxShadow: 3,
                   },
+                  '.MuiCardActionArea-focusHighlight': {
+                    backgroundColor: 'transparent',
+                  },
                   height: '42px',
                   ...(state.custom ? { borderColor: 'primary.main', borderWidth: 1 } : {}),
                 }}>
-                <CardActionArea onClick={() => handleCustomSelect()}>
+                <CardActionArea onClick={handleCustomSelect} tabIndex={0} aria-selected={state.custom}>
                   <Stack
                     direction="row"
                     sx={{ py: 1.5, px: 1.5 }}
@@ -179,7 +288,6 @@ export default function ProductDonation({
           error={!!state.error}
           helperText={state.error}
           inputRef={customInputRef}
-          // eslint-disable-next-line react/jsx-no-duplicate-props
           InputProps={{
             endAdornment: (
               <Stack direction="row" spacing={0.5} alignItems="center" sx={{ ml: 1 }}>
@@ -190,7 +298,7 @@ export default function ProductDonation({
             autoComplete: 'off',
           }}
           sx={{
-            mt: preset !== '0' ? 0 : 1,
+            mt: defaultPreset !== '0' ? 0 : 1,
           }}
         />
       )}