@blocklet/payment-react 1.18.18 → 1.18.20

package/README.md

@@ -323,18 +323,20 @@ function DonationPage() {
 
 - `OverdueInvoicePayment` component
   - Display overdue invoices for a subscription, and support batch payment
-  - props:
-    - `subscriptionId`: [required] The subscription ID
-    - `onPaid`: [optional] Callback function called after successful payment
-    - `mode`: [optional] Component mode, `default` or `custom` (default is `default`)
-    - `dialogProps`: [optional] Dialog properties, default is `{ open: true }`
-    - `children`: [optional] Custom rendering with payment data when `mode` is `custom`
-  - Custom mode:
-    - `children` will receive two parameters:
-      - `handlePay`: Function to start the
-
- payment process
-      - `data`: Payment data (includes `subscription`, `summary`, `invoices`, `subscriptionUrl`)
+  - Props:
+    - `subscriptionId`: [Optional] The subscription ID
+    - `customerId`: [Optional] The customer ID or DID
+    - `onPaid`: [Optional] Callback function called after successful payment, receives `(id, currencyId, type)`
+    - `mode`: [Optional] Component mode, `default` or `custom` (default is `default`)
+    - `dialogProps`: [Optional] Dialog properties, default is `{ open: true }`
+    - `detailLinkOptions`: [Optional] Detail link options, format: `{ enabled, onClick, title }`
+    - `successToast`: [Optional] Whether to show success toast, default is `true`
+    - `children`: [Optional] Custom rendering function, used only when `mode="custom"`
+
+  - Custom Mode:
+    - `children` function receives two parameters:
+      - `handlePay`: Function to start the payment process
+      - `data`: Payment data (includes `subscription`, `summary`, `invoices`, `subscriptionCount`, `detailUrl`)
 ```tsx
 import {
   PaymentProvider,
@@ -346,7 +348,7 @@ import {
 function SubscriptionPage({ subscriptionId }) {
   return (
     <PaymentProvider session={session}>
-      {/* Handle overdue payments */}
+      {/* Handle subscription overdue payments */}
       <OverdueInvoicePayment
         subscriptionId={subscriptionId}
         onPaid={() => {
@@ -354,6 +356,14 @@ function SubscriptionPage({ subscriptionId }) {
           refetchSubscription();
         }}
       />
+      {/* Handle customer overdue payment */}
+      <OverdueInvoicePayment
+        customerId={session.user.did}
+        onPaid={() => {
+          // Refresh customer status
+          refetch();
+        }}
+      />
 
       {/* Custom Overdue Invoice Payment */}
       <OverdueInvoicePayment

package/es/components/livemode.js

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

package/es/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/es/hooks/keyboard.js

@@ -0,0 +1,86 @@
+import { useCallback, useRef } from "react";
+export 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 = useRef(false);
+  const findNavigableElements = useCallback(() => {
+    if (containerRef?.current) {
+      return containerRef.current.querySelectorAll(selector);
+    }
+    return document.querySelectorAll(selector);
+  }, [containerRef, selector]);
+  const determineCurrentIndex = 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 = 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 = 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 = useCallback(() => {
+    hasTabbed.current = false;
+  }, []);
+  return {
+    handleKeyDown,
+    resetTabNavigation,
+    isTabNavigationActive: hasTabbed.current
+  };
+};

package/es/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/es/index.js

@@ -42,6 +42,7 @@ export * from "./hooks/subscription.js";
 export * from "./hooks/mobile.js";
 export * from "./hooks/table.js";
 export * from "./hooks/scroll.js";
+export * from "./hooks/keyboard.js";
 export { translations, createTranslator } from "./locales/index.js";
 export {
   createLazyComponent,

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}",
@@ -161,7 +162,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/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/es/payment/form/index.js

@@ -342,6 +342,17 @@ export default function PaymentForm({
   const onStripeCancel = () => {
     setState({ stripePaying: false });
   };
+  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__ */ jsxs(Fragment, { children: [
       /* @__PURE__ */ jsx(Box, { className: "cko-payment-submit-btn", children: /* @__PURE__ */ jsxs(