@blocklet/payment-react 1.20.13 → 1.20.14

package/es/components/source-data-viewer.d.ts

@@ -0,0 +1,23 @@
+type LocalizedText = {
+    zh: string;
+    en: string;
+};
+type SimpleSourceData = Record<string, string>;
+type StructuredSourceDataField = {
+    key: string;
+    label: string | LocalizedText;
+    value: string;
+    type?: 'text' | 'image' | 'url';
+    url?: string;
+    group?: string;
+};
+type SourceData = SimpleSourceData | StructuredSourceDataField[];
+interface SourceDataViewerProps {
+    data: SourceData;
+    compact?: boolean;
+    maxItems?: number;
+    locale?: 'en' | 'zh';
+    showGroups?: boolean;
+}
+declare function SourceDataViewer({ data, compact, maxItems, locale: propLocale, showGroups, }: SourceDataViewerProps): import("react").JSX.Element | null;
+export default SourceDataViewer;

package/es/components/source-data-viewer.js

@@ -0,0 +1,228 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import Empty from "@arcblock/ux/lib/Empty";
+import { useLocaleContext } from "@arcblock/ux/lib/Locale/context";
+import { Box, Chip, Link, Stack, Typography } from "@mui/material";
+function SourceDataViewer({
+  data,
+  compact = false,
+  maxItems = void 0,
+  locale: propLocale = void 0,
+  showGroups = false
+}) {
+  const { locale: contextLocale, t } = useLocaleContext();
+  const currentLocale = propLocale || contextLocale || "en";
+  if (!data || Array.isArray(data) && data.length === 0 || typeof data === "object" && Object.keys(data).length === 0) {
+    return /* @__PURE__ */ jsx(Empty, { children: t("common.none") });
+  }
+  const getLocalizedText = (text) => {
+    if (typeof text === "string") {
+      return text;
+    }
+    return text[currentLocale] || text.en || "";
+  };
+  const isSimpleSourceData = (sourceData) => {
+    return typeof sourceData === "object" && !Array.isArray(sourceData) && sourceData !== null;
+  };
+  const isUrlLike = (str) => {
+    try {
+      new URL(str);
+      return true;
+    } catch {
+      return /^https?:\/\/.+/.test(str) || /^www\..+/.test(str);
+    }
+  };
+  const normalizeData = (inputData) => {
+    if (isSimpleSourceData(inputData)) {
+      return Object.entries(inputData).map(([key, value]) => {
+        const stringValue = String(value);
+        const isUrl = isUrlLike(stringValue);
+        return {
+          key,
+          label: key.replace(/_/g, " ").replace(/\b\w/g, (l) => l.toUpperCase()),
+          value: stringValue,
+          type: isUrl ? "url" : "text",
+          url: isUrl ? stringValue : void 0
+        };
+      });
+    }
+    return inputData;
+  };
+  const renderFieldValue = (field) => {
+    const displayValue = field.value;
+    if (field.type === "url") {
+      return /* @__PURE__ */ jsx(
+        Link,
+        {
+          href: field.url || field.value,
+          target: "_blank",
+          rel: "noopener noreferrer",
+          sx: {
+            color: "primary.main",
+            textDecoration: "none",
+            fontSize: "0.85rem",
+            fontWeight: 600,
+            lineHeight: 1.4,
+            "&:hover": {
+              textDecoration: "underline",
+              color: "primary.dark"
+            },
+            "&:visited": {
+              color: "primary.main"
+            }
+          },
+          children: displayValue
+        }
+      );
+    }
+    if (field.type === "image") {
+      return /* @__PURE__ */ jsxs(
+        Box,
+        {
+          sx: {
+            display: "flex",
+            alignItems: "center",
+            gap: 1
+          },
+          children: [
+            /* @__PURE__ */ jsx(
+              Box,
+              {
+                component: "img",
+                src: field.url || field.value,
+                alt: displayValue,
+                sx: {
+                  width: 24,
+                  height: 24,
+                  borderRadius: 1,
+                  objectFit: "cover"
+                }
+              }
+            ),
+            /* @__PURE__ */ jsx(Typography, { variant: "body2", sx: { fontWeight: 500 }, children: displayValue })
+          ]
+        }
+      );
+    }
+    return /* @__PURE__ */ jsx(
+      Typography,
+      {
+        variant: "body2",
+        sx: {
+          fontWeight: 500,
+          color: "text.primary"
+        },
+        children: displayValue
+      }
+    );
+  };
+  if (!data || Array.isArray(data) && data.length === 0 || typeof data === "object" && Object.keys(data).length === 0) {
+    return null;
+  }
+  const normalizedData = normalizeData(data);
+  const displayItems = maxItems ? normalizedData.slice(0, maxItems) : normalizedData;
+  if (compact) {
+    return /* @__PURE__ */ jsxs(Stack, { direction: "row", spacing: 1, flexWrap: "wrap", useFlexGap: true, children: [
+      displayItems.map((field) => /* @__PURE__ */ jsx(
+        Chip,
+        {
+          label: `${getLocalizedText(field.label)}: ${field.value}`,
+          size: "small",
+          variant: "outlined",
+          sx: { maxWidth: 200 }
+        },
+        field.key
+      )),
+      maxItems && normalizedData.length > maxItems && /* @__PURE__ */ jsx(Chip, { label: `+${normalizedData.length - maxItems} more`, size: "small", color: "primary", variant: "outlined" })
+    ] });
+  }
+  if (showGroups) {
+    const groupedData = displayItems.reduce(
+      (acc, field) => {
+        const group = field.group || "default";
+        if (!acc[group]) acc[group] = [];
+        acc[group].push(field);
+        return acc;
+      },
+      {}
+    );
+    return /* @__PURE__ */ jsx(Stack, { spacing: 2.5, children: Object.entries(groupedData).map(([group, fields]) => /* @__PURE__ */ jsxs(Box, { children: [
+      group !== "default" && /* @__PURE__ */ jsx(
+        Typography,
+        {
+          variant: "subtitle2",
+          sx: {
+            mb: 1.5,
+            fontWeight: 700,
+            color: "text.primary",
+            letterSpacing: "0.5px",
+            borderBottom: "1px solid",
+            borderColor: "divider",
+            pb: 0.5
+          },
+          children: group.replace(/_/g, " ").replace(/\b\w/g, (l) => l.toUpperCase())
+        }
+      ),
+      /* @__PURE__ */ jsx(Stack, { spacing: 1.2, sx: { pl: group !== "default" ? 1 : 0 }, children: fields.map((field) => /* @__PURE__ */ jsxs(
+        Box,
+        {
+          sx: {
+            display: "flex",
+            flexDirection: "row",
+            alignItems: "flex-start",
+            gap: 3,
+            minHeight: 20
+          },
+          children: [
+            /* @__PURE__ */ jsx(
+              Typography,
+              {
+                variant: "body2",
+                color: "text.secondary",
+                sx: {
+                  fontSize: "0.8rem",
+                  minWidth: 100,
+                  fontWeight: 600,
+                  lineHeight: 1.4
+                },
+                children: getLocalizedText(field.label)
+              }
+            ),
+            /* @__PURE__ */ jsx(Box, { sx: { flex: 1, minWidth: 0, wordBreak: "break-all", whiteSpace: "wrap" }, children: renderFieldValue(field) })
+          ]
+        },
+        field.key
+      )) })
+    ] }, group)) });
+  }
+  return /* @__PURE__ */ jsx(Stack, { spacing: 1.5, children: displayItems.map((field) => /* @__PURE__ */ jsxs(
+    Box,
+    {
+      sx: {
+        display: "flex",
+        flexDirection: "row",
+        alignItems: "flex-start",
+        gap: 3,
+        minHeight: 20
+      },
+      children: [
+        /* @__PURE__ */ jsx(
+          Typography,
+          {
+            variant: "body2",
+            color: "text.secondary",
+            sx: {
+              fontSize: "0.8rem",
+              minWidth: 100,
+              fontWeight: 600,
+              lineHeight: 1.4
+            },
+            children: getLocalizedText(field.label)
+          }
+        ),
+        /* @__PURE__ */ jsx(Box, { sx: { flex: 1, minWidth: 0 }, children: renderFieldValue(field) })
+      ]
+    },
+    field.key
+  )) });
+}
+export default SourceDataViewer;

package/es/history/credit/transactions-list.d.ts

@@ -6,6 +6,7 @@ type Props = {
     onTableDataChange?: Function;
     showAdminColumns?: boolean;
     showTimeFilter?: boolean;
+    includeGrants?: boolean;
     source?: string;
     mode?: 'dashboard' | 'portal';
 };

package/es/history/credit/transactions-list.js

@@ -1,17 +1,18 @@
 import { jsx, jsxs } from "react/jsx-runtime";
 import { useLocaleContext } from "@arcblock/ux/lib/Locale/context";
-import { Box, Typography, Stack, Link, Grid } from "@mui/material";
+import { Box, Typography, Grid, Stack, Link, Button, Popover } from "@mui/material";
 import { useRequest } from "ahooks";
 import { useNavigate } from "react-router-dom";
 import React, { useCallback, useEffect, useRef, useState } from "react";
-import { joinURL } from "ufo";
 import { styled } from "@mui/system";
+import { joinURL } from "ufo";
 import DateRangePicker from "../../components/date-range-picker.js";
 import { formatBNStr, formatToDate, getPrefix } from "../../libs/util.js";
 import { usePaymentContext } from "../../contexts/payment.js";
 import api from "../../libs/api.js";
 import Table from "../../components/table.js";
 import { createLink, handleNavigation } from "../../libs/navigation.js";
+import SourceDataViewer from "../../components/source-data-viewer.js";
 const fetchData = (params = {}) => {
   const search = new URLSearchParams();
   Object.keys(params).forEach((key) => {
@@ -31,6 +32,16 @@ const getGrantDetailLink = (grantId, inDashboard) => {
     connect: false
   };
 };
+const getInvoiceDetailLink = (invoiceId, inDashboard) => {
+  let path = `/customer/invoice/${invoiceId}`;
+  if (inDashboard) {
+    path = `/admin/billing/${invoiceId}`;
+  }
+  return {
+    link: createLink(path),
+    connect: false
+  };
+};
 const TransactionsTable = React.memo((props) => {
   const {
     pageSize,
@@ -40,6 +51,7 @@ const TransactionsTable = React.memo((props) => {
     onTableDataChange,
     showAdminColumns = false,
     showTimeFilter = false,
+    includeGrants = false,
     source,
     mode = "portal"
   } = props;
@@ -57,6 +69,7 @@ const TransactionsTable = React.memo((props) => {
     start: void 0,
     end: void 0
   });
+  const [sourceDataPopover, setSourceDataPopover] = useState({ anchorEl: null, data: null });
   const handleDateRangeChange = useCallback((newValue) => {
     setFilters(newValue);
     setSearch((prev) => ({
@@ -72,10 +85,11 @@ const TransactionsTable = React.memo((props) => {
       customer_id: effectiveCustomerId,
       subscription_id,
       credit_grant_id,
-      source
+      source,
+      include_grants: includeGrants
     }),
     {
-      refreshDeps: [search, effectiveCustomerId, subscription_id, credit_grant_id, source]
+      refreshDeps: [search, effectiveCustomerId, subscription_id, credit_grant_id, source, includeGrants]
     }
   );
   useEffect(() => {
@@ -97,35 +111,59 @@ const TransactionsTable = React.memo((props) => {
       align: "right",
       options: {
         customBodyRenderLite: (_, index) => {
-          const transaction = data?.list[index];
-          const unit = transaction.meter?.unit || transaction.paymentCurrency.symbol;
-          return /* @__PURE__ */ jsxs(Typography, { children: [
-            formatBNStr(transaction.credit_amount, transaction.paymentCurrency.decimal),
-            " ",
-            unit
-          ] });
+          const item = data?.list[index];
+          const isGrant = item.activity_type === "grant";
+          const amount = isGrant ? item.amount : item.credit_amount;
+          const currency = item.paymentCurrency || item.currency;
+          const unit = !isGrant && item.meter?.unit ? item.meter.unit : currency?.symbol;
+          const displayAmount = formatBNStr(amount, currency?.decimal || 0);
+          if (!includeGrants) {
+            return /* @__PURE__ */ jsxs(Typography, { children: [
+              displayAmount,
+              " ",
+              unit
+            ] });
+          }
+          return /* @__PURE__ */ jsxs(
+            Typography,
+            {
+              sx: {
+                color: isGrant ? "success.main" : "error.main"
+              },
+              children: [
+                isGrant ? "+" : "-",
+                " ",
+                displayAmount,
+                " ",
+                unit
+              ]
+            }
+          );
         }
       }
     },
-    !credit_grant_id && {
+    {
       label: t("common.creditGrant"),
       name: "credit_grant",
       options: {
         customBodyRenderLite: (_, index) => {
-          const transaction = data?.list[index];
+          const item = data?.list[index];
+          const isGrant = item.activity_type === "grant";
+          const grantName = isGrant ? item.name : item.creditGrant.name;
+          const grantId = isGrant ? item.id : item.credit_grant_id;
           return /* @__PURE__ */ jsx(
             Stack,
             {
               direction: "row",
               spacing: 1,
               onClick: (e) => {
-                const link = getGrantDetailLink(transaction.credit_grant_id, isAdmin && mode === "dashboard");
+                const link = getGrantDetailLink(grantId, isAdmin && mode === "dashboard");
                 handleNavigation(e, link.link, navigate);
               },
               sx: {
                 alignItems: "center"
               },
-              children: /* @__PURE__ */ jsx(Typography, { variant: "body2", sx: { color: "text.link", cursor: "pointer" }, children: transaction.creditGrant.name || `Grant ${transaction.credit_grant_id.slice(-6)}` })
+              children: /* @__PURE__ */ jsx(Typography, { variant: "body2", sx: { cursor: "pointer" }, children: grantName || `Grant ${grantId.slice(-6)}` })
             }
           );
         }
@@ -133,11 +171,13 @@ const TransactionsTable = React.memo((props) => {
     },
     {
       label: t("common.description"),
-      name: "subscription",
+      name: "description",
       options: {
         customBodyRenderLite: (_, index) => {
-          const transaction = data?.list[index];
-          return /* @__PURE__ */ jsx(Typography, { variant: "body2", children: transaction.subscription?.description || transaction.description });
+          const item = data?.list[index];
+          const isGrant = item.activity_type === "grant";
+          const description = isGrant ? item.name || item.description || "Credit Granted" : item.subscription?.description || item.description || `${item.meter_event_name} usage`;
+          return /* @__PURE__ */ jsx(Typography, { variant: "body2", sx: { fontWeight: 400 }, children: description });
         }
       }
     },
@@ -161,8 +201,52 @@ const TransactionsTable = React.memo((props) => {
       name: "created_at",
       options: {
         customBodyRenderLite: (_, index) => {
-          const transaction = data?.list[index];
-          return /* @__PURE__ */ jsx(Typography, { variant: "body2", children: formatToDate(transaction.created_at, locale, "YYYY-MM-DD HH:mm:ss") });
+          const item = data?.list[index];
+          return /* @__PURE__ */ jsx(Typography, { variant: "body2", color: "text.secondary", sx: { fontSize: "0.875rem" }, children: formatToDate(item.created_at, locale, "YYYY-MM-DD HH:mm") });
+        }
+      }
+    },
+    {
+      label: t("common.actions"),
+      name: "actions",
+      options: {
+        customBodyRenderLite: (_, index) => {
+          const item = data?.list[index];
+          const isGrant = item.activity_type === "grant";
+          const invoiceId = isGrant ? item.metadata?.invoice_id : null;
+          const sourceData = !isGrant && item.meterEvent?.source_data;
+          return /* @__PURE__ */ jsxs(Box, { sx: { display: "flex", gap: 1, alignItems: "center" }, children: [
+            isGrant && invoiceId && /* @__PURE__ */ jsx(
+              Button,
+              {
+                variant: "text",
+                size: "small",
+                color: "primary",
+                onClick: (e) => {
+                  e.preventDefault();
+                  const link = getInvoiceDetailLink(invoiceId, isAdmin && mode === "dashboard");
+                  handleNavigation(e, link.link, navigate);
+                },
+                children: t("common.viewInvoice")
+              }
+            ),
+            sourceData && /* @__PURE__ */ jsx(
+              Button,
+              {
+                variant: "text",
+                size: "small",
+                color: "primary",
+                onClick: (e) => {
+                  e.preventDefault();
+                  setSourceDataPopover({
+                    anchorEl: e.currentTarget,
+                    data: sourceData
+                  });
+                },
+                children: t("common.viewSourceData")
+              }
+            )
+          ] });
         }
       }
     }
@@ -217,6 +301,38 @@ const TransactionsTable = React.memo((props) => {
         mobileTDFlexDirection: "row",
         emptyNodeText: t("admin.creditTransactions.noTransactions")
       }
+    ),
+    /* @__PURE__ */ jsx(
+      Popover,
+      {
+        open: Boolean(sourceDataPopover.anchorEl),
+        anchorEl: sourceDataPopover.anchorEl,
+        onClose: () => setSourceDataPopover({ anchorEl: null, data: null }),
+        anchorOrigin: {
+          vertical: "bottom",
+          horizontal: "left"
+        },
+        transformOrigin: {
+          vertical: "top",
+          horizontal: "left"
+        },
+        slotProps: {
+          paper: {
+            sx: {
+              minWidth: {
+                xs: 0,
+                md: 320
+              },
+              maxHeight: 450,
+              p: {
+                xs: 1,
+                md: 3
+              }
+            }
+          }
+        },
+        children: sourceDataPopover.data && /* @__PURE__ */ jsx(SourceDataViewer, { data: sourceDataPopover.data, showGroups: true })
+      }
     )
   ] });
 });
@@ -246,6 +362,7 @@ export default function CreditTransactionsList(rawProps) {
       },
       showAdminColumns: false,
       showTimeFilter: false,
+      includeGrants: false,
       mode: "portal"
     },
     rawProps

package/es/index.d.ts

@@ -40,6 +40,7 @@ import AutoTopupModal from './components/auto-topup/modal';
 import AutoTopup from './components/auto-topup';
 import Collapse from './components/collapse';
 import PromotionCode from './components/promotion-code';
+import SourceDataViewer from './components/source-data-viewer';
 export { PaymentThemeProvider } from './theme';
 export * from './libs/util';
 export * from './libs/connect';
@@ -54,4 +55,4 @@ export * from './hooks/scroll';
 export * from './hooks/keyboard';
 export * from './libs/validator';
 export { translations, createTranslator } from './locales';
-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, AutoTopupModal, AutoTopup, Collapse, PromotionCode, };
+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, AutoTopupModal, AutoTopup, Collapse, PromotionCode, SourceDataViewer, };

package/es/index.js

@@ -40,6 +40,7 @@ import AutoTopupModal from "./components/auto-topup/modal.js";
 import AutoTopup from "./components/auto-topup/index.js";
 import Collapse from "./components/collapse.js";
 import PromotionCode from "./components/promotion-code.js";
+import SourceDataViewer from "./components/source-data-viewer.js";
 export { PaymentThemeProvider } from "./theme/index.js";
 export * from "./libs/util.js";
 export * from "./libs/connect.js";
@@ -98,5 +99,6 @@ export {
   AutoTopupModal,
   AutoTopup,
   Collapse,
-  PromotionCode
+  PromotionCode,
+  SourceDataViewer
 };

package/es/locales/en.js

@@ -107,7 +107,8 @@ export default flat({
       confirm: "Confirm",
       cancel: "Cancel"
     },
-    paymentMethod: "Payment Method"
+    paymentMethod: "Payment Method",
+    viewInvoice: "View Invoice"
   },
   payment: {
     checkout: {

package/es/locales/zh.js

@@ -107,7 +107,8 @@ export default flat({
       confirm: "\u786E\u8BA4",
       cancel: "\u53D6\u6D88"
     },
-    paymentMethod: "\u652F\u4ED8\u65B9\u5F0F"
+    paymentMethod: "\u652F\u4ED8\u65B9\u5F0F",
+    viewInvoice: "\u67E5\u770B\u8D26\u5355"
   },
   payment: {
     checkout: {

package/es/payment/index.js

@@ -135,10 +135,7 @@ function PaymentInner({
   const currencyId = useWatch({ control: methods.control, name: "payment_currency", defaultValue: defaultCurrencyId });
   const currency = findCurrency(paymentMethods, currencyId) || settings.baseCurrency;
   const method = paymentMethods.find((x) => x.id === currency.payment_method_id);
-  useEffect(() => {
-    if (onChange) {
-      onChange(methods.getValues());
-    }
+  const recalculatePromotion = () => {
     if (state.checkoutSession?.discounts?.length) {
       api.post(`/api/checkout-sessions/${state.checkoutSession.id}/recalculate-promotion`, {
         currency_id: currencyId
@@ -146,10 +143,20 @@ function PaymentInner({
         onPromotionUpdate();
       });
     }
+  };
+  useEffect(() => {
+    if (onChange) {
+      onChange(methods.getValues());
+    }
+    recalculatePromotion();
   }, [currencyId]);
   const onUpsell = async (from, to) => {
     try {
       const { data } = await api.put(`/api/checkout-sessions/${state.checkoutSession.id}/upsell`, { from, to });
+      if (data.discounts?.length) {
+        recalculatePromotion();
+        return;
+      }
       setState({ checkoutSession: data });
     } catch (err) {
       console.error(err);
@@ -159,6 +166,10 @@ function PaymentInner({
   const onDownsell = async (from) => {
     try {
       const { data } = await api.put(`/api/checkout-sessions/${state.checkoutSession.id}/downsell`, { from });
+      if (data.discounts?.length) {
+        recalculatePromotion();
+        return;
+      }
       setState({ checkoutSession: data });
     } catch (err) {
       console.error(err);
@@ -168,6 +179,10 @@ function PaymentInner({
   const onApplyCrossSell = async (to) => {
     try {
       const { data } = await api.put(`/api/checkout-sessions/${state.checkoutSession.id}/cross-sell`, { to });
+      if (data.discounts?.length) {
+        recalculatePromotion();
+        return;
+      }
       setState({ checkoutSession: data });
     } catch (err) {
       console.error(err);
@@ -180,6 +195,10 @@ function PaymentInner({
         itemId,
         quantity
       });
+      if (data.discounts?.length) {
+        recalculatePromotion();
+        return;
+      }
       setState({ checkoutSession: data });
     } catch (err) {
       console.error(err);
@@ -189,6 +208,10 @@ function PaymentInner({
   const onCancelCrossSell = async () => {
     try {
       const { data } = await api.delete(`/api/checkout-sessions/${state.checkoutSession.id}/cross-sell`);
+      if (data.discounts?.length) {
+        recalculatePromotion();
+        return;
+      }
       setState({ checkoutSession: data });
     } catch (err) {
       console.error(err);
@@ -201,6 +224,10 @@ function PaymentInner({
         priceId,
         amount: fromTokenToUnit(amount, currency.decimal).toString()
       });
+      if (data.discounts?.length) {
+        recalculatePromotion();
+        return;
+      }
       setState({ checkoutSession: data });
     } catch (err) {
       console.error(err);