@blocklet/payment-react 1.18.18 → 1.18.20

package/es/payment/product-donation.js

@@ -6,6 +6,12 @@ import { useEffect, useRef } from "react";
 import { formatAmountPrecisionLimit } from "../libs/util.js";
 import { usePaymentContext } from "../contexts/payment.js";
 import { usePreventWheel } from "../hooks/scroll.js";
+import { useTabNavigation } from "../hooks/keyboard.js";
+const DONATION_PRESET_KEY_BASE = "payment-donation-preset";
+const DONATION_CUSTOM_AMOUNT_KEY_BASE = "payment-donation-custom-amount";
+const formatAmount = (amount) => {
+  return String(amount);
+};
 export default function ProductDonation({
   item,
   settings,
@@ -13,40 +19,120 @@ export default function ProductDonation({
   currency
 }) {
   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) => {
+    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(null);
+  const containerRef = 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 } = useTabNavigation(presets, handleTabSelect, {
+    includeCustom: supportCustom,
+    currentValue: state.custom ? void 0 : state.selected,
+    isCustomSelected: state.custom,
+    enabled: true,
+    selector: ".tab-navigable-card button",
+    containerRef
+  });
   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]);
   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 } = event.target;
     const min = parseFloat(settings.amount.minimum || "0");
@@ -64,111 +150,133 @@ 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 /* @__PURE__ */ jsxs(Box, { display: "flex", flexDirection: "column", alignItems: "flex-start", gap: 1.5, children: [
-    supportPreset && /* @__PURE__ */ jsxs(Grid, { container: true, spacing: 2, children: [
-      settings.amount.presets && settings.amount.presets.length > 0 && settings.amount.presets.map((amount) => /* @__PURE__ */ jsx(Grid, { item: true, xs: 6, sm: 3, children: /* @__PURE__ */ jsx(
-        Card,
-        {
-          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 } : {}
-          },
-          children: /* @__PURE__ */ jsx(CardActionArea, { onClick: () => handleSelect(amount), children: /* @__PURE__ */ jsxs(
-            Stack,
+  return /* @__PURE__ */ jsxs(
+    Box,
+    {
+      ref: containerRef,
+      display: "flex",
+      flexDirection: "column",
+      alignItems: "flex-start",
+      gap: 1.5,
+      onKeyDown: handleKeyDown,
+      tabIndex: 0,
+      sx: { outline: "none" },
+      children: [
+        supportPreset && /* @__PURE__ */ jsxs(Grid, { container: true, spacing: 2, children: [
+          presets.map((amount) => /* @__PURE__ */ jsx(Grid, { item: true, xs: 6, sm: 3, children: /* @__PURE__ */ jsx(
+            Card,
             {
-              direction: "row",
-              sx: { py: 1.5, px: 1.5 },
-              spacing: 0.5,
-              alignItems: "center",
-              justifyContent: "center",
-              children: [
-                /* @__PURE__ */ jsx(Avatar, { src: currency?.logo, sx: { width: 16, height: 16, mr: 0.5 }, alt: currency?.symbol }),
-                /* @__PURE__ */ jsx(
-                  Typography,
-                  {
-                    component: "strong",
-                    lineHeight: 1,
-                    variant: "h3",
-                    sx: { fontVariantNumeric: "tabular-nums", fontWeight: 400 },
-                    children: amount
-                  }
-                ),
-                /* @__PURE__ */ jsx(Typography, { lineHeight: 1, fontSize: 14, color: "text.secondary", children: currency?.symbol })
-              ]
+              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 } : {}
+              },
+              children: /* @__PURE__ */ jsx(
+                CardActionArea,
+                {
+                  onClick: () => handleSelect(amount),
+                  tabIndex: 0,
+                  "aria-selected": formatAmount(state.selected) === formatAmount(amount) && !state.custom,
+                  children: /* @__PURE__ */ jsxs(
+                    Stack,
+                    {
+                      direction: "row",
+                      sx: { py: 1.5, px: 1.5 },
+                      spacing: 0.5,
+                      alignItems: "center",
+                      justifyContent: "center",
+                      children: [
+                        /* @__PURE__ */ jsx(Avatar, { src: currency?.logo, sx: { width: 16, height: 16, mr: 0.5 }, alt: currency?.symbol }),
+                        /* @__PURE__ */ jsx(
+                          Typography,
+                          {
+                            component: "strong",
+                            lineHeight: 1,
+                            variant: "h3",
+                            sx: { fontVariantNumeric: "tabular-nums", fontWeight: 400 },
+                            children: amount
+                          }
+                        ),
+                        /* @__PURE__ */ jsx(Typography, { lineHeight: 1, fontSize: 14, color: "text.secondary", children: currency?.symbol })
+                      ]
+                    }
+                  )
+                }
+              )
             }
-          ) })
-        },
-        amount
-      ) }, amount)),
-      supportCustom && /* @__PURE__ */ jsx(Grid, { item: true, xs: 6, sm: 3, children: /* @__PURE__ */ jsx(
-        Card,
-        {
-          variant: "outlined",
-          sx: {
-            textAlign: "center",
-            transition: "all 0.3s",
-            cursor: "pointer",
-            "&:hover": {
-              transform: "translateY(-4px)",
-              boxShadow: 3
-            },
-            height: "42px",
-            ...state.custom ? { borderColor: "primary.main", borderWidth: 1 } : {}
-          },
-          children: /* @__PURE__ */ jsx(CardActionArea, { onClick: () => handleCustomSelect(), children: /* @__PURE__ */ jsx(
-            Stack,
+          ) }, amount)),
+          supportCustom && /* @__PURE__ */ jsx(Grid, { item: true, xs: 6, sm: 3, children: /* @__PURE__ */ jsx(
+            Card,
             {
-              direction: "row",
-              sx: { py: 1.5, px: 1.5 },
-              spacing: 0.5,
-              alignItems: "center",
-              justifyContent: "center",
-              children: /* @__PURE__ */ jsx(Typography, { variant: "h3", lineHeight: 1, sx: { fontWeight: 400 }, children: t("common.custom") })
+              variant: "outlined",
+              className: "tab-navigable-card",
+              sx: {
+                textAlign: "center",
+                transition: "all 0.3s",
+                cursor: "pointer",
+                "&:hover": {
+                  transform: "translateY(-4px)",
+                  boxShadow: 3
+                },
+                ".MuiCardActionArea-focusHighlight": {
+                  backgroundColor: "transparent"
+                },
+                height: "42px",
+                ...state.custom ? { borderColor: "primary.main", borderWidth: 1 } : {}
+              },
+              children: /* @__PURE__ */ jsx(CardActionArea, { onClick: handleCustomSelect, tabIndex: 0, "aria-selected": state.custom, children: /* @__PURE__ */ jsx(
+                Stack,
+                {
+                  direction: "row",
+                  sx: { py: 1.5, px: 1.5 },
+                  spacing: 0.5,
+                  alignItems: "center",
+                  justifyContent: "center",
+                  children: /* @__PURE__ */ jsx(Typography, { variant: "h3", lineHeight: 1, sx: { fontWeight: 400 }, children: t("common.custom") })
+                }
+              ) })
             }
-          ) })
-        },
-        "custom"
-      ) }, "custom")
-    ] }),
-    state.custom && /* @__PURE__ */ jsx(
-      TextField,
-      {
-        type: "number",
-        value: state.input,
-        onChange: handleInput,
-        margin: "none",
-        fullWidth: true,
-        error: !!state.error,
-        helperText: state.error,
-        inputRef: customInputRef,
-        InputProps: {
-          endAdornment: /* @__PURE__ */ jsxs(Stack, { direction: "row", spacing: 0.5, alignItems: "center", sx: { ml: 1 }, children: [
-            /* @__PURE__ */ jsx(Avatar, { src: currency?.logo, sx: { width: 16, height: 16 }, alt: currency?.symbol }),
-            /* @__PURE__ */ jsx(Typography, { children: currency?.symbol })
-          ] }),
-          autoComplete: "off"
-        },
-        sx: {
-          mt: preset !== "0" ? 0 : 1
-        }
-      }
-    )
-  ] });
+          ) }, "custom")
+        ] }),
+        state.custom && /* @__PURE__ */ jsx(
+          TextField,
+          {
+            type: "number",
+            value: state.input,
+            onChange: handleInput,
+            margin: "none",
+            fullWidth: true,
+            error: !!state.error,
+            helperText: state.error,
+            inputRef: customInputRef,
+            InputProps: {
+              endAdornment: /* @__PURE__ */ jsxs(Stack, { direction: "row", spacing: 0.5, alignItems: "center", sx: { ml: 1 }, children: [
+                /* @__PURE__ */ jsx(Avatar, { src: currency?.logo, sx: { width: 16, height: 16 }, alt: currency?.symbol }),
+                /* @__PURE__ */ jsx(Typography, { children: currency?.symbol })
+              ] }),
+              autoComplete: "off"
+            },
+            sx: {
+              mt: defaultPreset !== "0" ? 0 : 1
+            }
+          }
+        )
+      ]
+    }
+  );
 }

package/lib/components/livemode.js

@@ -21,8 +21,8 @@ function Livemode({
     color: "warning",
     sx: {
       ml: 2,
-      height: 18,
-      lineHeight: 1.2,
+      height: "18px",
+      lineHeight: "18px",
       textTransform: "uppercase",
       fontSize: "0.7rem",
       fontWeight: "bold",

package/lib/hooks/keyboard.d.ts

@@ -0,0 +1,44 @@
+import { KeyboardEvent, 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 declare const useTabNavigation: <T>(items: T[], onSelect: (item: T | "custom", index: number) => void, options?: TabNavigationOptions<T>) => {
+    handleKeyDown: (e: KeyboardEvent) => void;
+    resetTabNavigation: () => void;
+    isTabNavigationActive: boolean;
+};
+export {};

package/lib/hooks/keyboard.js

@@ -0,0 +1,85 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.useTabNavigation = void 0;
+var _react = require("react");
+const useTabNavigation = (items, onSelect, options) => {
+  const {
+    valueType = "value",
+    includeCustom = false,
+    currentValue,
+    isCustomSelected = false,
+    compareValue = (item, value) => item === value,
+    enabled = true,
+    selector = ".tab-navigable-card button",
+    containerRef
+  } = options || {};
+  const hasTabbed = (0, _react.useRef)(false);
+  const findNavigableElements = (0, _react.useCallback)(() => {
+    if (containerRef?.current) {
+      return containerRef.current.querySelectorAll(selector);
+    }
+    return document.querySelectorAll(selector);
+  }, [containerRef, selector]);
+  const determineCurrentIndex = (0, _react.useCallback)(() => {
+    const allOptions = includeCustom ? [...items, "custom"] : items;
+    if (allOptions.length === 0) return -1;
+    if (!hasTabbed.current) {
+      if (isCustomSelected && includeCustom) {
+        return items.length;
+      }
+      if (currentValue !== void 0) {
+        if (valueType === "index" && typeof currentValue === "number") {
+          return currentValue >= 0 && currentValue < items.length ? currentValue : -1;
+        }
+        return items.findIndex(item => compareValue(item, currentValue));
+      }
+    } else {
+      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]);
+  const getNextIndex = (0, _react.useCallback)((currentIndex, isShiftKey) => {
+    const totalOptions = includeCustom ? items.length + 1 : items.length;
+    if (currentIndex === -1) {
+      return 0;
+    }
+    if (isShiftKey) {
+      return currentIndex === 0 ? totalOptions - 1 : currentIndex - 1;
+    }
+    return currentIndex === totalOptions - 1 ? 0 : currentIndex + 1;
+  }, [items, includeCustom]);
+  const handleKeyDown = (0, _react.useCallback)(e => {
+    if (!enabled || e.key !== "Tab") return;
+    e.preventDefault();
+    e.stopPropagation();
+    const currentIndex = determineCurrentIndex();
+    const nextIndex = getNextIndex(currentIndex, e.shiftKey);
+    hasTabbed.current = true;
+    const selectedItem = nextIndex === items.length ? "custom" : items[nextIndex];
+    onSelect(selectedItem, nextIndex);
+    setTimeout(() => {
+      const elements = findNavigableElements();
+      if (elements[nextIndex]) {
+        elements[nextIndex].focus();
+      }
+    }, 0);
+  }, [items, onSelect, enabled, determineCurrentIndex, getNextIndex, findNavigableElements]);
+  const resetTabNavigation = (0, _react.useCallback)(() => {
+    hasTabbed.current = false;
+  }, []);
+  return {
+    handleKeyDown,
+    resetTabNavigation,
+    isTabNavigationActive: hasTabbed.current
+  };
+};
+exports.useTabNavigation = useTabNavigation;

package/lib/index.d.ts

@@ -42,5 +42,6 @@ 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';
 export { createLazyComponent, api, dayjs, FormInput, PhoneInput, AddressForm, StripeForm, Status, Livemode, Switch, ConfirmDialog, CheckoutForm, CheckoutTable, CheckoutDonate, CurrencySelector, Payment, PaymentSummary, PricingTable, ProductSkeleton, Amount, CustomerInvoiceList, CustomerPaymentList, TxLink, TxGas, SafeGuard, PricingItem, CountrySelect, Table, TruncatedText, Link, OverdueInvoicePayment, PaymentBeneficiaries, LoadingButton, DonateDetails, };

package/lib/index.js

@@ -418,6 +418,18 @@ Object.keys(_scroll).forEach(function (key) {
     }
   });
 });
+var _keyboard = require("./hooks/keyboard");
+Object.keys(_keyboard).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
+  if (key in exports && exports[key] === _keyboard[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function () {
+      return _keyboard[key];
+    }
+  });
+});
 var _locales = require("./locales");
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }

package/lib/locales/en.js

@@ -138,6 +138,7 @@ module.exports = (0, _flat.default)({
         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",
@@ -151,7 +152,7 @@ module.exports = (0, _flat.default)({
         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}",
@@ -168,7 +169,7 @@ module.exports = (0, _flat.default)({
         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/lib/locales/zh.js

@@ -138,6 +138,7 @@ module.exports = (0, _flat.default)({
         empty: "\u2764\uFE0F \u652F\u6301\u4E00\u4E0B",
         gaveTips: "\u5DF2\u6709 {count} \u4EBA\u6253\u8D4F",
         tipAmount: "\u6253\u8D4F\u91D1\u989D",
+        tabHint: "\u5FEB\u901F\u5207\u6362\u91D1\u989D",
         benefits: {
           one: "{name} \u5C06\u83B7\u5F97\u5168\u90E8\u6253\u8D4F",
           multiple: "\u6253\u8D4F\u5C06\u6309\u6BD4\u4F8B\u5206\u914D\u7ED9 {count} \u4F4D\u53D7\u76CA\u4EBA",
@@ -151,7 +152,7 @@ module.exports = (0, _flat.default)({
         later: "\u7A0D\u540E\u914D\u7F6E",
         configTip: "\u524D\u5F80 Payment Kit \u914D\u7F6E\u6253\u8D4F\u9009\u9879"
       },
-      cardPay: "\u4F7F\u7528\u5361\u7247{action}",
+      cardPay: "\u4F7F\u7528\u94F6\u884C\u5361{action}",
       empty: "\u6CA1\u6709\u53EF\u652F\u4ED8\u7684\u9879\u76EE",
       per: "\u6BCF",
       pay: "\u4ED8\u6B3E\u7ED9 {payee}",

package/lib/payment/donation-form.js

@@ -62,6 +62,9 @@ function PaymentInner({
     settings,
     session
   } = (0, _payment.usePaymentContext)();
+  const {
+    isMobile
+  } = (0, _mobile.useMobile)();
   const [state, setState] = (0, _ahooks.useSetState)({
     checkoutSession,
     submitting: false,
@@ -234,16 +237,48 @@ function PaymentInner({
           sx: {
             display: benefitsState.open ? "none" : "block"
           },
-          children: [/* @__PURE__ */(0, _jsxRuntime.jsx)(_material.Typography, {
-            title: t("payment.checkout.orderSummary"),
+          children: [/* @__PURE__ */(0, _jsxRuntime.jsxs)(_material.Stack, {
+            direction: "row",
+            justifyContent: "space-between",
+            alignItems: "center",
             sx: {
-              color: "text.primary",
-              fontSize: "18px",
-              fontWeight: "500",
-              lineHeight: "24px",
               mb: 2
             },
-            children: t("payment.checkout.donation.tipAmount")
+            children: [/* @__PURE__ */(0, _jsxRuntime.jsx)(_material.Typography, {
+              title: t("payment.checkout.orderSummary"),
+              sx: {
+                color: "text.primary",
+                fontSize: "18px",
+                fontWeight: "500",
+                lineHeight: "24px"
+              },
+              children: t("payment.checkout.donation.tipAmount")
+            }), !isMobile && donationSettings?.amount?.presets && donationSettings.amount.presets.length > 0 && /* @__PURE__ */(0, _jsxRuntime.jsxs)(_material.Typography, {
+              sx: {
+                color: "text.secondary",
+                fontSize: "13px",
+                display: "flex",
+                alignItems: "center",
+                gap: 0.5,
+                opacity: 0.8
+              },
+              children: [/* @__PURE__ */(0, _jsxRuntime.jsx)(_material.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"
+                },
+                children: "Tab"
+              }), t("payment.checkout.donation.tabHint")]
+            })]
           }), items.map(x => /* @__PURE__ */(0, _jsxRuntime.jsx)(_productDonation.default, {
             item: x,
             settings: donationSettings,