@blocklet/payment-react 1.18.18 → 1.18.20

package/lib/payment/form/index.js

@@ -409,6 +409,17 @@ function PaymentForm({
       stripePaying: false
     });
   };
+  (0, _react.useEffect)(() => {
+    const handleKeyDown = e => {
+      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]);
   if (onlyShowBtn) {
     return /* @__PURE__ */(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
       children: [/* @__PURE__ */(0, _jsxRuntime.jsx)(_material.Box, {

package/lib/payment/product-donation.js

@@ -12,6 +12,12 @@ var _react = require("react");
 var _util = require("../libs/util");
 var _payment = require("../contexts/payment");
 var _scroll = require("../hooks/scroll");
+var _keyboard = require("../hooks/keyboard");
+const DONATION_PRESET_KEY_BASE = "payment-donation-preset";
+const DONATION_CUSTOM_AMOUNT_KEY_BASE = "payment-donation-custom-amount";
+const formatAmount = amount => {
+  return String(amount);
+};
 function ProductDonation({
   item,
   settings,
@@ -23,20 +29,109 @@ function ProductDonation({
     locale
   } = (0, _context.useLocaleContext)();
   const {
-    setPayable
+    setPayable,
+    session
   } = (0, _payment.usePaymentContext)();
   (0, _scroll.usePreventWheel)();
-  const presets = settings?.amount?.presets || [];
-  const preset = settings?.amount?.preset || presets?.[0] || "0";
+  const presets = (settings?.amount?.presets || []).map(formatAmount);
+  const getUserStorageKey = base => {
+    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] = (0, _ahooks.useSetState)({
-    selected: preset,
-    input: "",
-    custom: !supportPreset,
+    selected: defaultPreset === "custom" ? "" : defaultPreset,
+    input: defaultCustomAmount,
+    custom: !supportPreset || defaultPreset === "custom",
     error: ""
   });
   const customInputRef = (0, _react.useRef)(null);
+  const containerRef = (0, _react.useRef)(null);
+  const handleSelect = amount => {
+    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 => {
+    if (selectedItem === "custom") {
+      handleCustomSelect();
+    } else {
+      handleSelect(selectedItem);
+    }
+  };
+  const {
+    handleKeyDown
+  } = (0, _keyboard.useTabNavigation)(presets, handleTabSelect, {
+    includeCustom: supportCustom,
+    currentValue: state.custom ? void 0 : state.selected,
+    isCustomSelected: state.custom,
+    enabled: true,
+    selector: ".tab-navigable-card button",
+    containerRef
+  });
   (0, _react.useEffect)(() => {
     if (settings.amount.preset) {
       setState({
@@ -48,35 +143,38 @@ function ProductDonation({
         amount: settings.amount.preset
       });
     } else if (settings.amount.presets && settings.amount.presets.length > 0) {
+      const isCustom = defaultPreset === "custom";
       setState({
-        selected: settings.amount.presets[0],
-        custom: false
-      });
-      onChange({
-        priceId: item.price_id,
-        amount: settings.amount.presets[0]
+        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]);
   (0, _react.useEffect)(() => {
+    if (containerRef.current) {
+      containerRef.current.focus();
+    }
     if (state.custom) {
       setTimeout(() => {
         customInputRef.current?.focus();
       }, 0);
     }
   }, [state.custom]);
-  const handleSelect = amount => {
-    setPayable(true);
-    setState({
-      selected: amount,
-      custom: false,
-      error: ""
-    });
-    onChange({
-      priceId: item.price_id,
-      amount
-    });
-  };
   const handleInput = event => {
     const {
       value
@@ -110,32 +208,31 @@ function ProductDonation({
     });
     onChange({
       priceId: item.price_id,
-      amount: value
+      amount: formatAmount(value)
     });
-  };
-  const handleCustomSelect = () => {
-    setState({
-      custom: true,
-      error: ""
-    });
-    if (!state.input) {
-      setPayable(false);
-    }
+    localStorage.setItem(getUserStorageKey(DONATION_CUSTOM_AMOUNT_KEY_BASE), formatAmount(value));
   };
   return /* @__PURE__ */(0, _jsxRuntime.jsxs)(_material.Box, {
+    ref: containerRef,
     display: "flex",
     flexDirection: "column",
     alignItems: "flex-start",
     gap: 1.5,
+    onKeyDown: handleKeyDown,
+    tabIndex: 0,
+    sx: {
+      outline: "none"
+    },
     children: [supportPreset && /* @__PURE__ */(0, _jsxRuntime.jsxs)(_material.Grid, {
       container: true,
       spacing: 2,
-      children: [settings.amount.presets && settings.amount.presets.length > 0 && settings.amount.presets.map(amount => /* @__PURE__ */(0, _jsxRuntime.jsx)(_material.Grid, {
+      children: [presets.map(amount => /* @__PURE__ */(0, _jsxRuntime.jsx)(_material.Grid, {
         item: true,
         xs: 6,
         sm: 3,
         children: /* @__PURE__ */(0, _jsxRuntime.jsx)(_material.Card, {
           variant: "outlined",
+          className: "tab-navigable-card",
           sx: {
             minWidth: 115,
             textAlign: "center",
@@ -145,14 +242,19 @@ function ProductDonation({
               transform: "translateY(-4px)",
               boxShadow: 3
             },
+            ".MuiCardActionArea-focusHighlight": {
+              backgroundColor: "transparent"
+            },
             height: "42px",
-            ...(state.selected === amount && !state.custom ? {
+            ...(formatAmount(state.selected) === formatAmount(amount) && !state.custom ? {
               borderColor: "primary.main",
               borderWidth: 1
             } : {})
           },
           children: /* @__PURE__ */(0, _jsxRuntime.jsx)(_material.CardActionArea, {
             onClick: () => handleSelect(amount),
+            tabIndex: 0,
+            "aria-selected": formatAmount(state.selected) === formatAmount(amount) && !state.custom,
             children: /* @__PURE__ */(0, _jsxRuntime.jsxs)(_material.Stack, {
               direction: "row",
               sx: {
@@ -187,13 +289,14 @@ function ProductDonation({
               })]
             })
           })
-        }, amount)
+        })
       }, amount)), supportCustom && /* @__PURE__ */(0, _jsxRuntime.jsx)(_material.Grid, {
         item: true,
         xs: 6,
         sm: 3,
         children: /* @__PURE__ */(0, _jsxRuntime.jsx)(_material.Card, {
           variant: "outlined",
+          className: "tab-navigable-card",
           sx: {
             textAlign: "center",
             transition: "all 0.3s",
@@ -202,6 +305,9 @@ function ProductDonation({
               transform: "translateY(-4px)",
               boxShadow: 3
             },
+            ".MuiCardActionArea-focusHighlight": {
+              backgroundColor: "transparent"
+            },
             height: "42px",
             ...(state.custom ? {
               borderColor: "primary.main",
@@ -209,7 +315,9 @@ function ProductDonation({
             } : {})
           },
           children: /* @__PURE__ */(0, _jsxRuntime.jsx)(_material.CardActionArea, {
-            onClick: () => handleCustomSelect(),
+            onClick: handleCustomSelect,
+            tabIndex: 0,
+            "aria-selected": state.custom,
             children: /* @__PURE__ */(0, _jsxRuntime.jsx)(_material.Stack, {
               direction: "row",
               sx: {
@@ -229,7 +337,7 @@ function ProductDonation({
               })
             })
           })
-        }, "custom")
+        })
       }, "custom")]
     }), state.custom && /* @__PURE__ */(0, _jsxRuntime.jsx)(_material.TextField, {
       type: "number",
@@ -262,7 +370,7 @@ function ProductDonation({
         autoComplete: "off"
       },
       sx: {
-        mt: preset !== "0" ? 0 : 1
+        mt: defaultPreset !== "0" ? 0 : 1
       }
     })]
   });

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@blocklet/payment-react",
-  "version": "1.18.18",
+  "version": "1.18.20",
   "description": "Reusable react components for payment kit v2",
   "keywords": [
     "react",
@@ -54,10 +54,10 @@
     }
   },
   "dependencies": {
-    "@arcblock/did-connect": "^2.12.26",
-    "@arcblock/ux": "^2.12.26",
+    "@arcblock/did-connect": "^2.12.36",
+    "@arcblock/ux": "^2.12.36",
     "@arcblock/ws": "^1.19.15",
-    "@blocklet/ui-react": "^2.12.26",
+    "@blocklet/ui-react": "^2.12.36",
     "@mui/icons-material": "^5.16.6",
     "@mui/lab": "^5.0.0-alpha.173",
     "@mui/material": "^5.16.6",
@@ -93,7 +93,7 @@
     "@babel/core": "^7.25.2",
     "@babel/preset-env": "^7.25.2",
     "@babel/preset-react": "^7.24.7",
-    "@blocklet/payment-types": "1.18.18",
+    "@blocklet/payment-types": "1.18.20",
     "@storybook/addon-essentials": "^7.6.20",
     "@storybook/addon-interactions": "^7.6.20",
     "@storybook/addon-links": "^7.6.20",
@@ -124,5 +124,5 @@
     "vite-plugin-babel": "^1.2.0",
     "vite-plugin-node-polyfills": "^0.21.0"
   },
-  "gitHead": "511a531693837c4e0784d4961f8755e5818a27d5"
+  "gitHead": "f71a0013f704d58e4c04ebfcc5a35480a0942bcc"
 }

package/src/components/livemode.tsx

@@ -16,8 +16,8 @@ export default function Livemode({ color, backgroundColor, sx }: Props) {
       color="warning"
       sx={{
         ml: 2,
-        height: 18,
-        lineHeight: 1.2,
+        height: '18px',
+        lineHeight: '18px',
         textTransform: 'uppercase',
         fontSize: '0.7rem',
         fontWeight: 'bold',

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

@@ -134,6 +134,7 @@ export default flat({
         empty: 'No supporters yet',
         gaveTips: '{count} people gave tips',
         tipAmount: 'Tip Amount',
+        tabHint: 'to switch amount',
         benefits: {
           one: '{name} will receive all tips',
           multiple: 'Tips will be distributed to {count} beneficiaries',
@@ -147,7 +148,7 @@ export default flat({
         later: 'Configure Later',
         configTip: 'Configure donation settings in Payment Kit',
       },
-      cardPay: '{action} with card',
+      cardPay: '{action} with bank card',
       empty: 'No thing to pay',
       per: 'per',
       pay: 'Pay {payee}',
@@ -164,7 +165,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/locales/zh.tsx

@@ -133,6 +133,7 @@ export default flat({
         empty: '❤️ 支持一下',
         gaveTips: '已有 {count} 人打赏',
         tipAmount: '打赏金额',
+        tabHint: '快速切换金额',
         benefits: {
           one: '{name} 将获得全部打赏',
           multiple: '打赏将按比例分配给 {count} 位受益人',
@@ -146,7 +147,7 @@ export default flat({
         later: '稍后配置',
         configTip: '前往 Payment Kit 配置打赏选项',
       },
-      cardPay: '使用卡片{action}',
+      cardPay: '使用银行卡{action}',
       empty: '没有可支付的项目',
       per: '每',
       pay: '付款给 {payee}',

package/src/payment/donation-form.tsx

@@ -74,6 +74,7 @@ function PaymentInner({
 }: MainProps) {
   const { t } = useLocaleContext();
   const { settings, session } = usePaymentContext();
+  const { isMobile } = useMobile();
   const [state, setState] = useSetState({
     checkoutSession,
     submitting: false,
@@ -238,17 +239,49 @@ function PaymentInner({
             )}
 
             <Stack sx={{ display: benefitsState.open ? 'none' : 'block' }}>
-              <Typography
-                title={t('payment.checkout.orderSummary')}
-                sx={{
-                  color: 'text.primary',
-                  fontSize: '18px',
-                  fontWeight: '500',
-                  lineHeight: '24px',
-                  mb: 2,
-                }}>
-                {t('payment.checkout.donation.tipAmount')}
-              </Typography>
+              <Stack direction="row" justifyContent="space-between" alignItems="center" sx={{ mb: 2 }}>
+                <Typography
+                  title={t('payment.checkout.orderSummary')}
+                  sx={{
+                    color: 'text.primary',
+                    fontSize: '18px',
+                    fontWeight: '500',
+                    lineHeight: '24px',
+                  }}>
+                  {t('payment.checkout.donation.tipAmount')}
+                </Typography>
+
+                {!isMobile && donationSettings?.amount?.presets && donationSettings.amount.presets.length > 0 && (
+                  <Typography
+                    sx={{
+                      color: 'text.secondary',
+                      fontSize: '13px',
+                      display: 'flex',
+                      alignItems: 'center',
+                      gap: 0.5,
+                      opacity: 0.8,
+                    }}>
+                    <Box
+                      component="span"
+                      sx={{
+                        border: '1px solid',
+                        borderColor: 'divider',
+                        borderRadius: 0.75,
+                        px: 0.75,
+                        py: 0.25,
+                        fontSize: '12px',
+                        lineHeight: 1,
+                        color: 'text.secondary',
+                        fontWeight: '400',
+                        bgcolor: 'transparent',
+                      }}>
+                      Tab
+                    </Box>
+                    {t('payment.checkout.donation.tabHint')}
+                  </Typography>
+                )}
+              </Stack>
+
               {items.map((x: TLineItemExpanded) => (
                 <ProductDonation
                   key={`${x.price_id}-${currency.id}`}

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 (
       <>