@blocklet/payment-react 1.18.19 → 1.18.20

package/es/locales/en.js

@@ -131,6 +131,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",
@@ -144,7 +145,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}",

package/es/locales/zh.js

@@ -131,6 +131,7 @@ export default flat({
         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",
@@ -144,7 +145,7 @@ export default flat({
         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/es/payment/donation-form.js

@@ -55,6 +55,7 @@ function PaymentInner({
 }) {
   const { t } = useLocaleContext();
   const { settings, session } = usePaymentContext();
+  const { isMobile } = useMobile();
   const [state, setState] = useSetState({
     checkoutSession,
     submitting: false,
@@ -202,20 +203,56 @@ function PaymentInner({
     ] }) : /* @__PURE__ */ jsxs(Fragment, { children: [
       benefitsState.open && /* @__PURE__ */ jsx(PaymentBeneficiaries, { data: benefits, currency, totalAmount: benefitsState.amount }),
       /* @__PURE__ */ jsxs(Stack, { sx: { display: benefitsState.open ? "none" : "block" }, children: [
-        /* @__PURE__ */ jsx(
-          Typography,
-          {
-            title: t("payment.checkout.orderSummary"),
-            sx: {
-              color: "text.primary",
-              fontSize: "18px",
-              fontWeight: "500",
-              lineHeight: "24px",
-              mb: 2
-            },
-            children: t("payment.checkout.donation.tipAmount")
-          }
-        ),
+        /* @__PURE__ */ jsxs(Stack, { direction: "row", justifyContent: "space-between", alignItems: "center", sx: { mb: 2 }, children: [
+          /* @__PURE__ */ jsx(
+            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__ */ jsxs(
+            Typography,
+            {
+              sx: {
+                color: "text.secondary",
+                fontSize: "13px",
+                display: "flex",
+                alignItems: "center",
+                gap: 0.5,
+                opacity: 0.8
+              },
+              children: [
+                /* @__PURE__ */ jsx(
+                  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__ */ jsx(
           ProductDonation,
           {

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}",

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,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@blocklet/payment-react",
-  "version": "1.18.19",
+  "version": "1.18.20",
   "description": "Reusable react components for payment kit v2",
   "keywords": [
     "react",
@@ -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.19",
+    "@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": "eabd58598ad349a5177dca2e6302c82117d9b687"
+  "gitHead": "f71a0013f704d58e4c04ebfcc5a35480a0942bcc"
 }

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}',

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}`}