@blocklet/payment-react 1.24.2 → 1.24.4

package/es/contexts/payment.js

@@ -4,6 +4,7 @@ import { useLocalStorageState, useRequest } from "ahooks";
 import { createContext, useContext, useEffect, useState } from "react";
 import axios from "axios";
 import { joinURL } from "ufo";
+import useBus from "use-bus";
 import api from "../libs/api.js";
 import { getPrefix, PAYMENT_KIT_DID } from "../libs/util.js";
 import { CachedRequest } from "../libs/cached-request.js";
@@ -116,6 +117,12 @@ function PaymentProvider({
   } = useRequest(getSettings, {
     refreshDeps: [livemode]
   });
+  useBus(
+    // @ts-ignore
+    ["paymentMethod.created", "paymentMethod.updated", "paymentCurrency.added", "paymentCurrency.updated"],
+    () => run(true),
+    [run]
+  );
   useEffect(() => {
     const didSpace = session?.user?.didSpace;
     const userDid = session?.user?.did;

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

@@ -1,9 +1,9 @@
 import { jsx, jsxs } from "react/jsx-runtime";
 import { useLocaleContext } from "@arcblock/ux/lib/Locale/context";
-import { Box, Typography, Grid, Stack, Link, Button, Chip } from "@mui/material";
+import { Box, Typography, Grid, Stack, Link, Button } from "@mui/material";
 import { useRequest } from "ahooks";
 import { useNavigate } from "react-router-dom";
-import React, { useCallback, useEffect, useRef, useState } from "react";
+import React, { useEffect, useRef, useState } from "react";
 import { styled } from "@mui/system";
 import { joinURL } from "ufo";
 import DateRangePicker from "../../components/date-range-picker.js";
@@ -41,16 +41,102 @@ const getInvoiceDetailLink = (invoiceId, inDashboard) => {
     connect: false
   };
 };
-const getTransactionDetailLink = (transactionId, inDashboard) => {
-  let path = `/customer/credit-transaction/${transactionId}`;
+const getSubscriptionDetailLink = (subscriptionId, inDashboard) => {
+  let path = `/customer/subscription/${subscriptionId}`;
   if (inDashboard) {
-    path = `/admin/customers/${transactionId}`;
+    path = `/admin/billing/${subscriptionId}`;
   }
   return {
     link: createLink(path),
     connect: false
   };
 };
+const getCreditTransactionDetailLink = (transactionId) => {
+  const path = `/customer/credit-transaction/${transactionId}`;
+  return {
+    link: createLink(path),
+    connect: false
+  };
+};
+const getMeterEventDetailLink = (meterEventId) => {
+  const path = `/admin/billing/${meterEventId}`;
+  return {
+    link: createLink(path),
+    connect: false
+  };
+};
+const getSubscriptionId = (item) => item.metadata?.subscription_id || item.subscription_id || item.invoice?.subscription_id;
+const getInvoiceId = (item) => item.metadata?.invoice_id || item.invoice?.id;
+const getMeterEventId = (item) => item.source || item.metadata?.meter_event_id;
+const getCreditActivityFlags = (item) => {
+  const isGrant = item.activity_type === "grant";
+  const isScheduled = isGrant && item.metadata?.delivery_mode === "schedule";
+  const isDepleted = isGrant && item.status === "depleted";
+  const isExpired = isGrant && (item.status === "expired" || item.status === "voided");
+  const isInactive = isDepleted || isExpired;
+  return { isGrant, isScheduled, isDepleted, isExpired, isInactive };
+};
+const getTransactionDetailLink = (item, inDashboard) => {
+  if (item.activity_type === "grant") {
+    const invoiceId = getInvoiceId(item);
+    if (invoiceId) {
+      return getInvoiceDetailLink(invoiceId, inDashboard);
+    }
+    return getGrantDetailLink(item.id, inDashboard);
+  }
+  if (!inDashboard) {
+    return getCreditTransactionDetailLink(item.id);
+  }
+  const meterEventId = getMeterEventId(item);
+  if (!meterEventId) {
+    return null;
+  }
+  return getMeterEventDetailLink(meterEventId);
+};
+const getTransactionDescription = (item, t) => {
+  const { isGrant, isScheduled, isInactive } = getCreditActivityFlags(item);
+  const isPaid = isGrant && item.category === "paid" && (!isScheduled || item.metadata?.schedule_seq === 1);
+  if (!isGrant) {
+    const secondLine = item.metadata?.is_repayment ? t("common.creditActivity.repayment") : item.description || "";
+    return {
+      isGrant,
+      isInactive,
+      activityType: t("common.creditActivity.consumption"),
+      secondLine
+    };
+  }
+  if (isPaid) {
+    let secondLine = item.description || "";
+    if (item.invoice?.total && item.invoice?.paymentCurrency) {
+      const invoiceCurrency = item.invoice.paymentCurrency;
+      const paidAmount = formatCreditAmount(
+        formatBNStr(item.invoice.total, invoiceCurrency.decimal || 0),
+        invoiceCurrency.symbol || ""
+      );
+      secondLine = t("common.creditActivity.paidAmount", { amount: paidAmount });
+    }
+    return {
+      isGrant,
+      isInactive,
+      activityType: t("common.creditActivity.paidGrant"),
+      secondLine
+    };
+  }
+  if (isScheduled) {
+    return {
+      isGrant,
+      isInactive,
+      activityType: t("common.creditActivity.resetGrant"),
+      secondLine: item.description || ""
+    };
+  }
+  return {
+    isGrant,
+    isInactive,
+    activityType: t("common.creditActivity.promotionalGrant"),
+    secondLine: item.description || ""
+  };
+};
 const TransactionsTable = React.memo((props) => {
   const {
     pageSize,
@@ -68,6 +154,7 @@ const TransactionsTable = React.memo((props) => {
   const { t, locale } = useLocaleContext();
   const { session } = usePaymentContext();
   const isAdmin = ["owner", "admin"].includes(session?.user?.role || "");
+  const isDashboard = isAdmin && mode === "dashboard";
   const navigate = useNavigate();
   const effectiveCustomerId = customer_id || session?.user?.did;
   const [search, setSearch] = useState({
@@ -78,7 +165,7 @@ const TransactionsTable = React.memo((props) => {
     start: void 0,
     end: void 0
   });
-  const handleDateRangeChange = useCallback((newValue) => {
+  const handleDateRangeChange = (newValue) => {
     setFilters(newValue);
     setSearch((prev) => ({
       ...prev,
@@ -86,7 +173,7 @@ const TransactionsTable = React.memo((props) => {
       start: newValue.start || void 0,
       end: newValue.end || void 0
     }));
-  }, []);
+  };
   const { loading, data = { list: [], count: 0 } } = useRequest(
     () => fetchData({
       ...search,
@@ -102,9 +189,14 @@ const TransactionsTable = React.memo((props) => {
   );
   useEffect(() => {
     if (showTimeFilter && !search.start && !search.end) {
-      handleDateRangeChange(filters);
+      setSearch((prev) => ({
+        ...prev,
+        page: 1,
+        start: filters.start || void 0,
+        end: filters.end || void 0
+      }));
     }
-  }, [showTimeFilter, handleDateRangeChange, search.start, search.end, filters]);
+  }, [showTimeFilter, search.start, search.end, filters.start, filters.end]);
   const prevData = useRef(data);
   useEffect(() => {
     if (onTableDataChange) {
@@ -113,105 +205,94 @@ const TransactionsTable = React.memo((props) => {
     }
   }, [data]);
   const handleTransactionClick = (e, item) => {
-    if (item.activity_type === "grant") {
-      const { link } = getGrantDetailLink(item.id, isAdmin && mode === "dashboard");
-      handleNavigation(e, link, navigate, { target: link.external ? "_blank" : "_self" });
-    } else {
-      const { link } = getTransactionDetailLink(item.id, isAdmin && mode === "dashboard");
-      handleNavigation(e, link, navigate, { target: link.external ? "_blank" : "_self" });
+    const detail = getTransactionDetailLink(item, isDashboard);
+    if (!detail) {
+      return;
     }
+    handleNavigation(e, detail.link, navigate, { target: detail.link.external ? "_blank" : "_self" });
+  };
+  const openSubscription = (e, subscriptionId) => {
+    e.preventDefault();
+    const link = getSubscriptionDetailLink(subscriptionId, isDashboard);
+    handleNavigation(e, link.link, navigate);
   };
+  const openInvoice = (e, invoiceId) => {
+    e.preventDefault();
+    const link = getInvoiceDetailLink(invoiceId, isDashboard);
+    handleNavigation(e, link.link, navigate);
+  };
+  const renderActionButton = (label, onClick) => /* @__PURE__ */ jsx(Button, { variant: "text", size: "small", color: "primary", sx: { whiteSpace: "nowrap" }, onClick, children: label });
   const columns = [
     {
-      label: t("common.amount"),
-      name: "credit_amount",
-      align: "right",
+      label: t("common.date"),
+      name: "created_at",
       options: {
+        setCellProps: () => ({ style: { width: "25%" } }),
         customBodyRenderLite: (_, index) => {
           const item = data?.list[index];
-          const isGrant = item.activity_type === "grant";
-          const isExpiredGrant = isGrant && item.status === "expired";
-          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 = formatCreditAmount(formatBNStr(amount, currency?.decimal || 0), unit);
-          if (!includeGrants) {
-            return /* @__PURE__ */ jsx(Box, { onClick: (e) => handleTransactionClick(e, item), children: /* @__PURE__ */ jsx(Typography, { children: displayAmount }) });
-          }
-          const amountNode = /* @__PURE__ */ jsxs(
-            Typography,
-            {
-              sx: {
-                color: isGrant ? isExpiredGrant ? "text.disabled" : "success.main" : "error.main"
-              },
-              children: [
-                isGrant ? "+" : "-",
-                " ",
-                displayAmount
-              ]
-            }
-          );
-          return /* @__PURE__ */ jsx(Box, { onClick: (e) => handleTransactionClick(e, item), children: /* @__PURE__ */ jsxs(Stack, { direction: "row", spacing: 1, alignItems: "center", justifyContent: "flex-end", sx: { width: "100%" }, children: [
-            isExpiredGrant && /* @__PURE__ */ jsx(
-              Chip,
-              {
-                label: t("admin.creditGrants.status.expired"),
-                size: "small",
-                variant: "outlined",
-                sx: {
-                  mr: 2,
-                  height: 18,
-                  fontSize: "12px",
-                  color: "text.disabled",
-                  borderColor: "text.disabled"
-                }
-              }
-            ),
-            amountNode
-          ] }) });
+          return /* @__PURE__ */ jsx(Box, { onClick: (e) => handleTransactionClick(e, item), children: /* @__PURE__ */ jsx(Typography, { variant: "body2", sx: { fontSize: "0.875rem" }, children: formatToDate(item.created_at, locale, "YYYY-MM-DD HH:mm") }) });
         }
       }
     },
     {
-      label: t("common.creditGrant"),
-      name: "credit_grant",
+      label: t("common.description"),
+      name: "description",
       options: {
+        setCellProps: () => ({ style: { width: "25%" } }),
         customBodyRenderLite: (_, index) => {
           const item = data?.list[index];
-          const isGrant = item.activity_type === "grant";
-          const isExpiredGrant = isGrant && item.status === "expired";
-          const grantName = isGrant ? item.name : item.creditGrant.name;
-          const grantId = isGrant ? item.id : item.credit_grant_id;
-          const nameNode = /* @__PURE__ */ jsx(Typography, { variant: "body2", sx: { cursor: "pointer", color: isExpiredGrant ? "text.disabled" : void 0 }, children: grantName || `Grant ${grantId.slice(-6)}` });
-          return /* @__PURE__ */ jsx(
-            Stack,
-            {
-              direction: "row",
-              spacing: 1,
-              onClick: (e) => {
-                const link = getGrantDetailLink(grantId, isAdmin && mode === "dashboard");
-                handleNavigation(e, link.link, navigate);
-              },
-              sx: {
-                alignItems: "center"
-              },
-              children: nameNode
-            }
-          );
+          const { activityType, secondLine, isInactive, isGrant } = getTransactionDescription(item, t);
+          return /* @__PURE__ */ jsx(Box, { onClick: (e) => handleTransactionClick(e, item), sx: { cursor: "pointer" }, children: /* @__PURE__ */ jsxs(Stack, { direction: "column", spacing: 0.25, children: [
+            /* @__PURE__ */ jsx(
+              Typography,
+              {
+                variant: "body2",
+                sx: {
+                  color: isInactive ? "text.secondary" : isGrant ? "success.main" : "error.main"
+                },
+                children: activityType
+              }
+            ),
+            secondLine && /* @__PURE__ */ jsx(Typography, { variant: "caption", sx: { color: "text.secondary" }, children: secondLine })
+          ] }) });
         }
       }
     },
     {
-      label: t("common.description"),
-      name: "description",
+      label: t("common.amount"),
+      name: "credit_amount",
+      align: "right",
       options: {
+        setCellProps: () => ({ style: { width: "20%" } }),
+        customHeadLabelRender: () => /* @__PURE__ */ jsx(Box, { sx: { pr: 5 }, children: t("common.amount") }),
         customBodyRenderLite: (_, index) => {
           const item = data?.list[index];
-          const isGrant = item.activity_type === "grant";
-          const isExpiredGrant = isGrant && item.status === "expired";
-          const description = isGrant ? item.name || item.description || "Credit Granted" : item.subscription?.description || item.description || `${item.meter_event_name} usage`;
-          const descriptionNode = /* @__PURE__ */ jsx(Typography, { variant: "body2", sx: { fontWeight: 400, color: isExpiredGrant ? "text.disabled" : void 0 }, children: description });
-          return /* @__PURE__ */ jsx(Box, { onClick: (e) => handleTransactionClick(e, item), children: descriptionNode });
+          const { isGrant, isDepleted, isExpired, isInactive } = getCreditActivityFlags(item);
+          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 = formatCreditAmount(formatBNStr(amount, currency?.decimal || 0), unit);
+          if (!includeGrants) {
+            return /* @__PURE__ */ jsx(Box, { onClick: (e) => handleTransactionClick(e, item), sx: { pr: 5 }, children: /* @__PURE__ */ jsx(Typography, { children: displayAmount }) });
+          }
+          return /* @__PURE__ */ jsx(Box, { onClick: (e) => handleTransactionClick(e, item), sx: { pr: 5 }, children: /* @__PURE__ */ jsxs(Stack, { direction: "column", spacing: 0.25, alignItems: "flex-end", children: [
+            /* @__PURE__ */ jsxs(
+              Typography,
+              {
+                sx: {
+                  fontWeight: 500,
+                  color: isInactive ? "text.secondary" : isGrant ? "success.main" : "error.main",
+                  whiteSpace: "nowrap"
+                },
+                children: [
+                  isGrant ? "+" : "-",
+                  " ",
+                  displayAmount
+                ]
+              }
+            ),
+            isDepleted ? /* @__PURE__ */ jsx(Typography, { variant: "caption", sx: { color: "text.secondary" }, children: t("common.consumed") }) : isExpired ? /* @__PURE__ */ jsx(Typography, { variant: "caption", sx: { color: "text.secondary" }, children: t("common.expired") }) : null
+          ] }) });
         }
       }
     },
@@ -230,63 +311,21 @@ const TransactionsTable = React.memo((props) => {
         }
       }
     ] : [],
-    {
-      label: t("common.date"),
-      name: "created_at",
-      options: {
-        customBodyRenderLite: (_, index) => {
-          const item = data?.list[index];
-          return /* @__PURE__ */ jsx(Box, { onClick: (e) => handleTransactionClick(e, item), children: /* @__PURE__ */ jsx(
-            Typography,
-            {
-              variant: "body2",
-              sx: {
-                color: "text.secondary",
-                fontSize: "0.875rem"
-              },
-              children: formatToDate(item.created_at, locale, "YYYY-MM-DD HH:mm")
-            }
-          ) });
-        }
-      }
-    },
     {
       label: t("common.actions"),
       name: "actions",
       options: {
+        setCellProps: () => ({ style: { width: "25%" } }),
         customBodyRenderLite: (_, index) => {
           const item = data?.list[index];
-          const isGrant = item.activity_type === "grant";
-          const invoiceId = isGrant ? item.metadata?.invoice_id : null;
-          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")
-              }
-            ),
-            !isGrant && /* @__PURE__ */ jsx(
-              Button,
-              {
-                variant: "text",
-                size: "small",
-                color: "primary",
-                onClick: (e) => {
-                  e.preventDefault();
-                  const link = getTransactionDetailLink(item.id, isAdmin && mode === "dashboard");
-                  handleNavigation(e, link.link, navigate);
-                },
-                children: t("common.viewDetail")
-              }
-            )
+          const { isGrant, isScheduled } = getCreditActivityFlags(item);
+          const isPaid = isGrant && item.category === "paid" && !isScheduled;
+          const subscriptionId = getSubscriptionId(item);
+          const invoiceId = isGrant ? getInvoiceId(item) : null;
+          const shouldShowSubscription = Boolean(subscriptionId) && (!isGrant || isScheduled || isPaid);
+          return /* @__PURE__ */ jsxs(Box, { sx: { display: "flex", gap: 1, alignItems: "center", flexWrap: "nowrap" }, children: [
+            shouldShowSubscription && subscriptionId ? renderActionButton(t("common.viewSubscription"), (e) => openSubscription(e, subscriptionId)) : null,
+            isPaid && invoiceId ? renderActionButton(t("common.viewInvoice"), (e) => openInvoice(e, invoiceId)) : null
           ] });
         }
       }

package/es/history/invoice/list.js

@@ -15,6 +15,7 @@ import api from "../../libs/api.js";
 import StripePaymentAction from "../../components/stripe-payment-action.js";
 import {
   formatBNStr,
+  formatCreditAmount,
   formatError,
   formatToDate,
   formatToDatetime,
@@ -80,6 +81,7 @@ const InvoiceTable = React.memo((props) => {
   const listKey = "invoice-table";
   const { t, locale } = useLocaleContext();
   const navigate = useNavigate();
+  const { getCurrency } = usePaymentContext();
   const [search, setSearch] = useState({
     pageSize: pageSize || 10,
     page: 1
@@ -203,19 +205,97 @@ const InvoiceTable = React.memo((props) => {
     },
     ...relatedSubscription ? [
       {
-        label: t("common.relatedSubscription"),
-        name: "subscription",
+        label: t("common.purchaseItems"),
+        name: "purchase_items",
         options: {
           customBodyRenderLite: (_, index) => {
             const invoice = data?.list[index];
-            return invoice.subscription_id ? /* @__PURE__ */ jsx(
-              Box,
+            const lines = invoice.lines || [];
+            const items = lines.map((line) => {
+              const name = line.price?.product?.name || line.description;
+              if (!name) {
+                return null;
+              }
+              const quantity = Number(line.quantity || 0);
+              const label = Number.isFinite(quantity) && quantity > 1 ? `${name} x${quantity}` : name;
+              const lineKey = line.id || line.price?.id || line.price?.product?.id || line.description || name;
+              return { key: String(lineKey), label };
+            }).filter(Boolean);
+            if (items.length === 0 && invoice.subscription?.description) {
+              items.push({
+                key: `subscription-${invoice.subscription_id || invoice.id}`,
+                label: invoice.subscription.description
+              });
+            }
+            const isSubscription = Boolean(invoice.subscription_id);
+            const clickableProps = isSubscription ? { onClick: (e) => handleRelatedSubscriptionClick(e, invoice) } : {};
+            if (items.length === 0) {
+              return /* @__PURE__ */ jsx(Box, { sx: { color: "text.lighter" }, children: /* @__PURE__ */ jsx(Typography, { sx: { fontSize: 14 }, children: t("common.none") }) });
+            }
+            return /* @__PURE__ */ jsx(Box, { ...clickableProps, sx: isSubscription ? { cursor: "pointer" } : void 0, children: /* @__PURE__ */ jsx(Stack, { spacing: 0.5, children: items.map((item) => /* @__PURE__ */ jsx(
+              Typography,
               {
-                onClick: (e) => handleRelatedSubscriptionClick(e, invoice),
-                sx: { color: "text.link", cursor: "pointer" },
-                children: invoice.subscription?.description
+                sx: { fontSize: 14, color: isSubscription ? "text.link" : "text.primary" },
+                noWrap: true,
+                children: item.label
+              },
+              `${invoice.id}-item-${item.key}`
+            )) }) });
+          }
+        }
+      },
+      {
+        label: t("common.credits"),
+        name: "credits",
+        options: {
+          customBodyRenderLite: (_, index) => {
+            const invoice = data?.list[index];
+            const lines = invoice.lines || [];
+            const creditItems = [];
+            lines.forEach((line) => {
+              const lineKey = String(
+                line.id || line.price?.id || line.price?.product?.id || line.description || invoice.id
+              );
+              const pushCreditItem = (suffix, label) => {
+                creditItems.push({ key: `${lineKey}-${suffix}`, label });
+              };
+              const creditConfig = line.price?.metadata?.credit_config;
+              const creditAmount = Number(creditConfig?.credit_amount || 0);
+              if (creditAmount > 0) {
+                const quantity = Number(line.quantity || 0);
+                const totalAmount = creditAmount * (Number.isFinite(quantity) && quantity > 0 ? quantity : 1);
+                const currencySymbol = getCurrency(creditConfig?.currency_id)?.symbol || creditConfig?.currency_id || "Credits";
+                pushCreditItem("amount", `+${formatCreditAmount(String(totalAmount), currencySymbol)}`);
+                return;
+              }
+              const scheduleConfig = creditConfig?.schedule;
+              const scheduledAmount = Number(scheduleConfig?.amount_per_grant || 0);
+              if (scheduleConfig?.enabled && scheduleConfig?.delivery_mode === "schedule" && scheduledAmount > 0) {
+                const quantity = Number(line.quantity || 0);
+                const totalAmount = scheduledAmount * (Number.isFinite(quantity) && quantity > 0 ? quantity : 1);
+                const currencySymbol = getCurrency(creditConfig?.currency_id)?.symbol || creditConfig?.currency_id || "Credits";
+                pushCreditItem("schedule", `+${formatCreditAmount(String(totalAmount), currencySymbol)}`);
+                return;
               }
-            ) : /* @__PURE__ */ jsx(Box, { onClick: (e) => handleLinkClick(e, invoice), sx: { ...linkStyle, color: "text.lighter" }, children: t("common.none") });
+              const creditInfo = line.price?.credit;
+              const creditInfoAmount = Number(creditInfo?.amount || 0);
+              if (creditInfoAmount > 0) {
+                const currencySymbol = creditInfo.currency?.symbol || "Credits";
+                pushCreditItem("credit", `+${formatCreditAmount(String(creditInfoAmount), currencySymbol)}`);
+              }
+            });
+            if (creditItems.length === 0) {
+              return "-";
+            }
+            return /* @__PURE__ */ jsx(Stack, { spacing: 0.5, children: creditItems.map((creditItem) => /* @__PURE__ */ jsx(
+              Typography,
+              {
+                sx: { fontSize: 14, color: "success.main" },
+                noWrap: true,
+                children: creditItem.label
+              },
+              `${invoice.id}-credit-${creditItem.key}`
+            )) });
           }
         }
       }
@@ -234,17 +314,6 @@ const InvoiceTable = React.memo((props) => {
         }
       }
     },
-    {
-      label: t("common.description"),
-      name: "",
-      options: {
-        sort: false,
-        customBodyRenderLite: (val, index) => {
-          const invoice = data?.list[index];
-          return /* @__PURE__ */ jsx(Box, { onClick: (e) => handleLinkClick(e, invoice), sx: linkStyle, children: getInvoiceDescriptionAndReason(invoice, locale)?.description || invoice.id });
-        }
-      }
-    },
     {
       label: t("common.status"),
       name: "status",

package/es/locales/en.js

@@ -65,14 +65,24 @@ export default flat({
     remainingBalance: "Remaining Balance",
     credits: "credits",
     ofCredits: "of credits",
+    creditActivity: {
+      consumption: "Credit Consumed",
+      paidGrant: "Credit Top-up",
+      paidAmount: "Paid {amount}",
+      promotionalGrant: "Bonus",
+      resetGrant: "Credit Reset",
+      repayment: "Repayment"
+    },
     transferStatus: "Transaction Status",
     sourceData: "Source Data",
     viewGrant: "View Grant",
-    viewSubscription: "View Subscription",
+    viewSubscription: "Subscription Detail",
     view: "View",
     meterEvent: "Meter Event",
     source: "Source",
     viewDetail: "View Detail",
+    viewTransactionDetail: "Transaction Detail",
+    viewConsumptionDetail: "Consumption Detail",
     customer: "Customer",
     currency: "Currency",
     custom: "Custom",
@@ -119,6 +129,8 @@ export default flat({
     slashStakeAmount: "Slash Stake Amount",
     know: "I know",
     relatedSubscription: "Subscription",
+    subscriptionOrCredit: "Subscription / Credit",
+    purchaseItems: "Purchase Items",
     connect: {
       defaultScan: "Use the following methods to complete this action",
       scan: "Use the following methods to complete this {action}",
@@ -126,8 +138,10 @@ export default flat({
       cancel: "Cancel"
     },
     paymentMethod: "Payment Method",
-    viewInvoice: "View Invoice",
-    submit: "Submit"
+    viewInvoice: "Invoice Detail",
+    submit: "Submit",
+    expired: "Expired",
+    consumed: "Consumed"
   },
   payment: {
     checkout: {
@@ -488,7 +502,9 @@ export default flat({
         amount: "Amount",
         paymentConfirmTitle: "Payment Confirmation",
         paymentConfirmDescription: "After completing this payment, the payment method you use will be automatically set as the default for this subscription. Additionally, we will retry payment for any other unpaid invoices associated with this subscription.",
-        continue: "Continue"
+        continue: "Continue",
+        credit: "Credit",
+        creditRefresh: "Refresh every {interval} {unit}"
       },
       overduePayment: {
         setupPaymentDescription: "Use your saved card or add a new one to complete payment via Stripe.",