@blocklet/payment-react 1.18.56 → 1.19.1

package/es/history/payment/list.js

@@ -40,45 +40,122 @@ export default function CustomerPaymentList({ customer_id }) {
     return /* @__PURE__ */ jsx(CircularProgress, {});
   }
   if (data && data.list.length === 0) {
-    return /* @__PURE__ */ jsx(Typography, { color: "text.secondary", children: t("payment.customer.payment.empty") });
+    return /* @__PURE__ */ jsx(
+      Typography,
+      {
+        sx: {
+          color: "text.secondary"
+        },
+        children: t("payment.customer.payment.empty")
+      }
+    );
   }
   const hasMore = data && data.list.length < data.count;
   const grouped = groupByDate(data.list);
-  return /* @__PURE__ */ jsxs(Stack, { direction: "column", gap: 1, sx: { mt: 1 }, children: [
-    Object.entries(grouped).map(([date, payments]) => /* @__PURE__ */ jsxs(Box, { children: [
-      /* @__PURE__ */ jsx(Typography, { sx: { fontWeight: "bold", color: "text.secondary", mt: 2, mb: 1 }, children: date }),
-      payments.map((item) => /* @__PURE__ */ jsxs(
-        Stack,
-        {
-          direction: {
-            xs: "column",
-            sm: "row"
-          },
-          sx: { my: 1 },
-          gap: {
-            xs: 0.5,
-            sm: 1.5,
-            md: 3
-          },
-          flexWrap: "nowrap",
-          children: [
-            /* @__PURE__ */ jsx(Box, { flex: 3, children: /* @__PURE__ */ jsx(Typography, { children: formatToDate(item.created_at) }) }),
-            /* @__PURE__ */ jsx(Box, { flex: 2, children: /* @__PURE__ */ jsxs(Typography, { textAlign: "right", children: [
-              formatBNStr(item.amount_received, item.paymentCurrency.decimal),
-              "\xA0",
-              item.paymentCurrency.symbol
-            ] }) }),
-            /* @__PURE__ */ jsx(Box, { flex: 3, children: /* @__PURE__ */ jsx(Status, { label: item.status, color: getPaymentIntentStatusColor(item.status) }) }),
-            /* @__PURE__ */ jsx(Box, { flex: 3, children: /* @__PURE__ */ jsx(Typography, { children: item.description || "-" }) }),
-            /* @__PURE__ */ jsx(Box, { flex: 3, sx: { minWidth: "220px" }, children: (item.payment_details?.arcblock?.tx_hash || item.payment_details?.ethereum?.tx_hash || item.payment_details?.base?.tx_hash) && /* @__PURE__ */ jsx(TxLink, { details: item.payment_details, method: item.paymentMethod, mode: "customer" }) })
-          ]
-        },
-        item.id
-      ))
-    ] }, date)),
-    /* @__PURE__ */ jsxs(Box, { children: [
-      hasMore && /* @__PURE__ */ jsx(Button, { variant: "text", type: "button", color: "inherit", onClick: loadMore, disabled: loadingMore, children: loadingMore ? t("common.loadingMore", { resource: t("payment.customer.payments") }) : t("common.loadMore", { resource: t("payment.customer.payments") }) }),
-      !hasMore && data.count > pageSize && /* @__PURE__ */ jsx(Typography, { color: "text.secondary", children: t("common.noMore", { resource: t("payment.customer.payments") }) })
-    ] })
-  ] });
+  return /* @__PURE__ */ jsxs(
+    Stack,
+    {
+      direction: "column",
+      sx: {
+        gap: 1,
+        mt: 1
+      },
+      children: [
+        Object.entries(grouped).map(([date, payments]) => /* @__PURE__ */ jsxs(Box, { children: [
+          /* @__PURE__ */ jsx(Typography, { sx: { fontWeight: "bold", color: "text.secondary", mt: 2, mb: 1 }, children: date }),
+          payments.map((item) => /* @__PURE__ */ jsxs(
+            Stack,
+            {
+              direction: {
+                xs: "column",
+                sm: "row"
+              },
+              sx: {
+                gap: {
+                  xs: 0.5,
+                  sm: 1.5,
+                  md: 3
+                },
+                flexWrap: "nowrap",
+                my: 1
+              },
+              children: [
+                /* @__PURE__ */ jsx(
+                  Box,
+                  {
+                    sx: {
+                      flex: 3
+                    },
+                    children: /* @__PURE__ */ jsx(Typography, { children: formatToDate(item.created_at) })
+                  }
+                ),
+                /* @__PURE__ */ jsx(
+                  Box,
+                  {
+                    sx: {
+                      flex: 2
+                    },
+                    children: /* @__PURE__ */ jsxs(
+                      Typography,
+                      {
+                        sx: {
+                          textAlign: "right"
+                        },
+                        children: [
+                          formatBNStr(item.amount_received, item.paymentCurrency.decimal),
+                          "\xA0",
+                          item.paymentCurrency.symbol
+                        ]
+                      }
+                    )
+                  }
+                ),
+                /* @__PURE__ */ jsx(
+                  Box,
+                  {
+                    sx: {
+                      flex: 3
+                    },
+                    children: /* @__PURE__ */ jsx(Status, { label: item.status, color: getPaymentIntentStatusColor(item.status) })
+                  }
+                ),
+                /* @__PURE__ */ jsx(
+                  Box,
+                  {
+                    sx: {
+                      flex: 3
+                    },
+                    children: /* @__PURE__ */ jsx(Typography, { children: item.description || "-" })
+                  }
+                ),
+                /* @__PURE__ */ jsx(
+                  Box,
+                  {
+                    sx: {
+                      flex: 3,
+                      minWidth: "220px"
+                    },
+                    children: (item.payment_details?.arcblock?.tx_hash || item.payment_details?.ethereum?.tx_hash || item.payment_details?.base?.tx_hash) && /* @__PURE__ */ jsx(TxLink, { details: item.payment_details, method: item.paymentMethod, mode: "customer" })
+                  }
+                )
+              ]
+            },
+            item.id
+          ))
+        ] }, date)),
+        /* @__PURE__ */ jsxs(Box, { children: [
+          hasMore && /* @__PURE__ */ jsx(Button, { variant: "text", type: "button", color: "inherit", onClick: loadMore, disabled: loadingMore, children: loadingMore ? t("common.loadingMore", { resource: t("payment.customer.payments") }) : t("common.loadMore", { resource: t("payment.customer.payments") }) }),
+          !hasMore && data.count > pageSize && /* @__PURE__ */ jsx(
+            Typography,
+            {
+              sx: {
+                color: "text.secondary"
+              },
+              children: t("common.noMore", { resource: t("payment.customer.payments") })
+            }
+          )
+        ] })
+      ]
+    }
+  );
 }

package/es/hooks/keyboard.d.ts

@@ -13,7 +13,7 @@ type TabNavigationOptions<T> = {
     /** a selector to find navigable elements */
     selector?: string;
     /** an element container reference, limiting the query DOM range to improve performance */
-    containerRef?: RefObject<HTMLElement>;
+    containerRef?: RefObject<HTMLElement | null>;
     /** the type of the current value, can be 'index' or 'value' */
     valueType?: 'index' | 'value';
 };

package/es/hooks/keyboard.js

@@ -19,8 +19,7 @@ export const useTabNavigation = (items, onSelect, options) => {
   }, [containerRef, selector]);
   const determineCurrentIndex = useCallback(() => {
     const allOptions = includeCustom ? [...items, "custom"] : items;
-    if (allOptions.length === 0)
-      return -1;
+    if (allOptions.length === 0) return -1;
     if (!hasTabbed.current) {
       if (isCustomSelected && includeCustom) {
         return items.length;
@@ -60,8 +59,7 @@ export const useTabNavigation = (items, onSelect, options) => {
   );
   const handleKeyDown = useCallback(
     (e) => {
-      if (!enabled || e.key !== "Tab")
-        return;
+      if (!enabled || e.key !== "Tab") return;
       e.preventDefault();
       e.stopPropagation();
       const currentIndex = determineCurrentIndex();

package/es/index.d.ts

@@ -5,6 +5,7 @@ import TxGas from './components/blockchain/gas';
 import TxLink from './components/blockchain/tx';
 import ConfirmDialog from './components/confirm';
 import FormInput from './components/input';
+import FormLabel from './components/label';
 import Livemode from './components/livemode';
 import PricingTable from './components/pricing-table';
 import Table from './components/table';
@@ -13,6 +14,8 @@ import Status from './components/status';
 import Switch from './components/switch-button';
 import CustomerInvoiceList from './history/invoice/list';
 import CustomerPaymentList from './history/payment/list';
+import CreditGrantsList, { StatusChip as CreditStatusChip } from './history/credit/grants-list';
+import CreditTransactionsList from './history/credit/transactions-list';
 import api from './libs/api';
 import dayjs from './libs/dayjs';
 import Amount from './payment/amount';
@@ -32,6 +35,7 @@ import OverdueInvoicePayment from './components/over-due-invoice-payment';
 import PaymentBeneficiaries from './components/payment-beneficiaries';
 import LoadingButton from './components/loading-button';
 import ResumeSubscription from './components/resume-subscription';
+import DateRangePicker from './components/date-range-picker';
 export { PaymentThemeProvider } from './theme';
 export * from './libs/util';
 export * from './libs/connect';
@@ -46,4 +50,4 @@ export * from './hooks/scroll';
 export * from './hooks/keyboard';
 export * from './libs/validator';
 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, ResumeSubscription, };
+export { createLazyComponent, api, dayjs, FormInput, FormLabel, 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, ResumeSubscription, CreditGrantsList, CreditTransactionsList, DateRangePicker, CreditStatusChip, };

package/es/index.js

@@ -5,6 +5,7 @@ import TxGas from "./components/blockchain/gas.js";
 import TxLink from "./components/blockchain/tx.js";
 import ConfirmDialog from "./components/confirm.js";
 import FormInput from "./components/input.js";
+import FormLabel from "./components/label.js";
 import Livemode from "./components/livemode.js";
 import PricingTable from "./components/pricing-table.js";
 import Table from "./components/table.js";
@@ -13,6 +14,8 @@ import Status from "./components/status.js";
 import Switch from "./components/switch-button.js";
 import CustomerInvoiceList from "./history/invoice/list.js";
 import CustomerPaymentList from "./history/payment/list.js";
+import CreditGrantsList, { StatusChip as CreditStatusChip } from "./history/credit/grants-list.js";
+import CreditTransactionsList from "./history/credit/transactions-list.js";
 import api from "./libs/api.js";
 import dayjs from "./libs/dayjs.js";
 import Amount from "./payment/amount.js";
@@ -32,6 +35,7 @@ import OverdueInvoicePayment from "./components/over-due-invoice-payment.js";
 import PaymentBeneficiaries from "./components/payment-beneficiaries.js";
 import LoadingButton from "./components/loading-button.js";
 import ResumeSubscription from "./components/resume-subscription.js";
+import DateRangePicker from "./components/date-range-picker.js";
 export { PaymentThemeProvider } from "./theme/index.js";
 export * from "./libs/util.js";
 export * from "./libs/connect.js";
@@ -51,6 +55,7 @@ export {
   api,
   dayjs,
   FormInput,
+  FormLabel,
   PhoneInput,
   AddressForm,
   StripeForm,
@@ -81,5 +86,9 @@ export {
   PaymentBeneficiaries,
   LoadingButton,
   DonateDetails,
-  ResumeSubscription
+  ResumeSubscription,
+  CreditGrantsList,
+  CreditTransactionsList,
+  DateRangePicker,
+  CreditStatusChip
 };

package/es/libs/cached-request.js

@@ -27,8 +27,7 @@ export class CachedRequest {
   getCachedData() {
     const cache = this.getCache();
     const data = this.options.strategy === "memory" ? cache.get(this.cacheKey) : cache.getItem(this.cacheKey);
-    if (!data)
-      return null;
+    if (!data) return null;
     const parsed = JSON.parse(data);
     if (this.options.ttl && parsed.timestamp) {
       const isExpired = Date.now() - parsed.timestamp > this.options.ttl;
@@ -61,8 +60,7 @@ export class CachedRequest {
   }
   fetch(forceRefresh = false) {
     const cachedData = !forceRefresh && this.getCachedData();
-    if (cachedData)
-      return Promise.resolve(cachedData);
+    if (cachedData) return Promise.resolve(cachedData);
     const globalItem = globalCache.get(this.cacheKey);
     if (globalItem?.promise) {
       return globalItem.promise;

package/es/libs/phone-validator.js

@@ -14,8 +14,7 @@ export const getPhoneUtil = async () => {
   return phoneUtil;
 };
 export const validatePhoneNumber = async (phoneNumber) => {
-  if (!phoneNumber)
-    return true;
+  if (!phoneNumber) return true;
   try {
     let util = null;
     try {

package/es/libs/util.d.ts

@@ -129,3 +129,5 @@ export declare function parseMarkedText(text: string): Array<{
     content: string;
 }>;
 export declare function getTokenBalanceLink(method: TPaymentMethod, address: string): string;
+export declare function isCreditMetered(price: TPrice): boolean;
+export declare function showStaking(method: TPaymentMethod, currency: TPaymentCurrency, noStake: boolean): boolean;

package/es/libs/util.js

@@ -971,14 +971,12 @@ export function getUserProfileLink(userDid, locale = "en") {
   );
 }
 export function parseMarkedText(text) {
-  if (!text)
-    return [];
+  if (!text) return [];
   const parts = text.split(/(#([^#]*)#)/);
   const result = [];
   for (let i = 0; i < parts.length; i++) {
     const part = parts[i];
-    if (!part)
-      continue;
+    if (!part) continue;
     if (i % 3 === 0) {
       result.push({ type: "text", content: part });
     } else if (i % 3 === 1 && part.startsWith("#") && part.endsWith("#")) {
@@ -1003,3 +1001,15 @@ export function getTokenBalanceLink(method, address) {
   }
   return "";
 }
+export function isCreditMetered(price) {
+  return !!(price.type === "recurring" && price.recurring?.usage_type === "metered" && price.recurring?.meter_id);
+}
+export function showStaking(method, currency, noStake) {
+  if (noStake) {
+    return false;
+  }
+  if (method.type === "arcblock") {
+    return currency.type !== "credit";
+  }
+  return true;
+}

package/es/libs/validator.js

@@ -58,8 +58,7 @@ const POSTAL_CODE_SUPPORTED_COUNTRIES = [
   "ZM"
 ];
 export function validatePostalCode(postalCode, country) {
-  if (!postalCode)
-    return true;
+  if (!postalCode) return true;
   const countryUpper = country?.toUpperCase();
   const isSupported = country && POSTAL_CODE_SUPPORTED_COUNTRIES.includes(countryUpper);
   try {
@@ -70,8 +69,7 @@ export function validatePostalCode(postalCode, country) {
   }
 }
 export function getFieldValidation(fieldName, validations, locale = "en") {
-  if (!validations || !validations[fieldName])
-    return {};
+  if (!validations || !validations[fieldName]) return {};
   const fieldValidation = validations[fieldName];
   const rules = {};
   if (fieldValidation.pattern) {

package/es/locales/en.js

@@ -28,6 +28,10 @@ export default flat({
     remove: "Remove",
     removed: "Resource removed",
     confirm: "Confirm",
+    clear: "Clear",
+    selectTimeRange: "Select time range",
+    startDate: "Start date",
+    endDate: "End date",
     upload: "Upload",
     change: "Change",
     cancel: "Cancel",
@@ -100,7 +104,8 @@ export default flat({
       scan: "Use following methods to complete this {action}",
       confirm: "Confirm",
       cancel: "Cancel"
-    }
+    },
+    paymentMethod: "Payment Method"
   },
   payment: {
     checkout: {
@@ -204,6 +209,11 @@ export default flat({
         add: "Add to order",
         remove: "Remove from order"
       },
+      credit: {
+        oneTimeInfo: "You will receive {amount} {symbol} credits after payment",
+        recurringInfo: "You will receive {amount} {symbol} credits {period}",
+        expiresIn: "credits have a validity period of {duration} {unit}"
+      },
       expired: {
         title: "Expired Link",
         description: "This link has expired. This means that your payment has already been processed or your session has expired."
@@ -232,7 +242,15 @@ export default flat({
         payer: "Account",
         amount: "Amount",
         failed: "Account changed, please pay manually.",
-        balanceLink: "View Balance"
+        balanceLink: "View Balance",
+        credit: {
+          title: "Confirm Credit Payment",
+          availableAmount: "Available Credit: {amount}",
+          confirmMessage: "You will use {amount} credits to subscribe to this service.",
+          meteringSubscriptionMessage: "This subscription service will deduct credits in real-time based on actual usage. You currently have {available} credits available. Confirm to continue?",
+          insufficientTitle: "Insufficient Credit",
+          insufficientMessage: "This subscription service will deduct credits in real-time based on actual usage. You currently have insufficient credits. Please top up your credits first."
+        }
       }
     },
     customer: {

package/es/locales/zh.js

@@ -31,6 +31,10 @@ export default flat({
     change: "\u66F4\u6362",
     confirm: "\u786E\u8BA4",
     cancel: "\u53D6\u6D88",
+    clear: "\u6E05\u7A7A",
+    selectTimeRange: "\u9009\u62E9\u65F6\u95F4\u8303\u56F4",
+    startDate: "\u5F00\u59CB\u65E5\u671F",
+    endDate: "\u7ED3\u675F\u65E5\u671F",
     close: "\u5173\u95ED",
     back: "\u8FD4\u56DE",
     every: "\u6BCF",
@@ -100,7 +104,8 @@ export default flat({
       scan: "\u4F7F\u7528\u4EE5\u4E0B\u65B9\u5F0F\u5B8C\u6210\u672C\u6B21{action}",
       confirm: "\u786E\u8BA4",
       cancel: "\u53D6\u6D88"
-    }
+    },
+    paymentMethod: "\u652F\u4ED8\u65B9\u5F0F"
   },
   payment: {
     checkout: {
@@ -212,6 +217,11 @@ export default flat({
         add: "\u6DFB\u52A0\u5230\u8BA2\u5355",
         remove: "\u4ECE\u8BA2\u5355\u79FB\u9664"
       },
+      credit: {
+        oneTimeInfo: "\u4ED8\u6B3E\u5B8C\u6210\u540E\u60A8\u5C06\u83B7\u5F97 {amount} {symbol} \u989D\u5EA6",
+        recurringInfo: "\u60A8\u5C06{period}\u83B7\u5F97 {amount} {symbol} \u989D\u5EA6",
+        expiresIn: "\u989D\u5EA6\u6709\u6548\u671F\u4E3A {duration} {unit}"
+      },
       emptyItems: {
         title: "\u6CA1\u6709\u4EFB\u4F55\u8D2D\u4E70\u9879\u76EE",
         description: "\u53EF\u80FD\u8FD9\u4E2A\u4ED8\u6B3E\u94FE\u63A5\u6CA1\u6709\u6B63\u786E\u914D\u7F6E"
@@ -232,7 +242,15 @@ export default flat({
         payer: "\u8D26\u6237\u5730\u5740",
         amount: "\u652F\u4ED8\u91D1\u989D",
         failed: "\u8D26\u6237\u53D1\u751F\u53D8\u5316\uFF0C\u65E0\u6CD5\u81EA\u52A8\u5B8C\u6210\u652F\u4ED8\uFF0C\u8BF7\u624B\u52A8\u652F\u4ED8\u3002",
-        balanceLink: "\u67E5\u770B\u4F59\u989D"
+        balanceLink: "\u67E5\u770B\u4F59\u989D",
+        credit: {
+          title: "\u786E\u8BA4\u989D\u5EA6\u652F\u4ED8",
+          availableAmount: "\u53EF\u7528\u989D\u5EA6\uFF1A{amount}",
+          confirmMessage: "\u60A8\u5C06\u4F7F\u7528 {amount} \u989D\u5EA6\u6765\u8BA2\u9605\u6B64\u670D\u52A1\u3002",
+          meteringSubscriptionMessage: "\u6B64\u8BA2\u9605\u670D\u52A1\u5C06\u6839\u636E\u5B9E\u9645\u4F7F\u7528\u60C5\u51B5\u5B9E\u65F6\u6263\u9664\u989D\u5EA6\u3002\u60A8\u5F53\u524D\u53EF\u7528\u989D\u5EA6\u4E3A {available}\uFF0C\u786E\u8BA4\u662F\u5426\u7EE7\u7EED\uFF1F",
+          insufficientTitle: "\u989D\u5EA6\u4E0D\u8DB3",
+          insufficientMessage: "\u6B64\u8BA2\u9605\u670D\u52A1\u5C06\u6839\u636E\u5B9E\u9645\u4F7F\u7528\u60C5\u51B5\u5B9E\u65F6\u6263\u9664\u989D\u5EA6\u3002\u60A8\u5F53\u524D\u53EF\u7528\u989D\u5EA6\u4E0D\u8DB3\uFF0C\u8BF7\u5148\u5145\u503C\u989D\u5EA6\u3002"
+        }
       }
     },
     customer: {

package/es/payment/amount.d.ts

@@ -2,10 +2,5 @@ import type { TypographyProps } from '@mui/material';
 type Props = {
     amount: string;
 } & TypographyProps;
-declare function PaymentAmount({ amount, sx }: Props): import("react").JSX.Element;
-declare namespace PaymentAmount {
-    var defaultProps: {
-        sx: {};
-    };
-}
-export default PaymentAmount;
+export default function PaymentAmount({ amount, sx }: Props): import("react").JSX.Element;
+export {};

package/es/payment/amount.js

@@ -1,6 +1,6 @@
 import { jsx } from "react/jsx-runtime";
 import { Typography } from "@mui/material";
-export default function PaymentAmount({ amount, sx }) {
+export default function PaymentAmount({ amount, sx = {} }) {
   return /* @__PURE__ */ jsx(
     Typography,
     {
@@ -17,7 +17,3 @@ export default function PaymentAmount({ amount, sx }) {
     }
   );
 }
-PaymentAmount.defaultProps = {
-  // eslint-disable-next-line react/default-props-match-prop-types
-  sx: {}
-};

package/es/payment/donation-form.d.ts

@@ -8,17 +8,9 @@ type Props = CheckoutContext & CheckoutCallbacks & {
     formRender?: Record<string, any>;
     id: string;
 };
-declare function DonationForm({ checkoutSession, paymentMethods, paymentIntent, paymentLink, customer, completed, error, mode, onPaid, onError, onChange, goBack, action, showCheckoutSummary, formRender, id, }: Props): import("react").JSX.Element;
-declare namespace DonationForm {
-    var defaultProps: {
-        completed: boolean;
-        error: null;
-        showCheckoutSummary: boolean;
-        formRender: {};
-    };
-}
-export default DonationForm;
+export default function DonationForm({ checkoutSession, paymentMethods, paymentIntent, paymentLink, customer, completed, error, mode, onPaid, onError, onChange, goBack, action, showCheckoutSummary, formRender, id, }: Props): import("react").JSX.Element;
 type RootProps = {
     mode: LiteralUnion<'standalone' | 'inline' | 'popup', string>;
 } & BoxProps;
 export declare const Root: React.FC<RootProps>;
+export {};