@blocklet/payment-react 1.19.0 → 1.19.2

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

@@ -0,0 +1,215 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useLocaleContext } from "@arcblock/ux/lib/Locale/context";
+import { Box, Typography, Chip } from "@mui/material";
+import { useRequest } from "ahooks";
+import React, { useEffect, useRef, useState } from "react";
+import { useNavigate } from "react-router-dom";
+import { styled } from "@mui/system";
+import { formatBNStr, formatToDate } 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";
+const fetchData = (params = {}) => {
+  const search = new URLSearchParams();
+  Object.keys(params).forEach((key) => {
+    if (params[key]) {
+      search.set(key, String(params[key]));
+    }
+  });
+  return api.get(`/api/credit-grants?${search.toString()}`).then((res) => res.data);
+};
+export function StatusChip({ status, label }) {
+  const getStatusColor = (statusValue) => {
+    switch (statusValue) {
+      case "granted":
+        return "success";
+      case "pending":
+        return "warning";
+      case "expired":
+        return "default";
+      case "depleted":
+        return "default";
+      case "voided":
+        return "default";
+      default:
+        return "default";
+    }
+  };
+  return /* @__PURE__ */ jsx(Chip, { label: label || status, size: "small", color: getStatusColor(status) });
+}
+const getLink = (grant, inDashboard) => {
+  let path = `/customer/credit-grant/${grant.id}`;
+  if (inDashboard) {
+    path = `/admin/customers/${grant.id}`;
+  }
+  return {
+    link: createLink(path),
+    connect: false
+  };
+};
+const GrantsTable = React.memo((props) => {
+  const { pageSize, status = "", customer_id, subscription_id, onTableDataChange } = props;
+  const listKey = "credit-grants-table";
+  const { t, locale } = useLocaleContext();
+  const { session } = usePaymentContext();
+  const navigate = useNavigate();
+  const isAdmin = ["owner", "admin"].includes(session?.user?.role || "");
+  const inDashboard = props.mode === "dashboard" && isAdmin;
+  const effectiveCustomerId = customer_id || session?.user?.did;
+  const [search, setSearch] = useState({
+    pageSize: pageSize || 10,
+    page: 1
+  });
+  const { loading, data = { list: [], count: 0 } } = useRequest(
+    () => fetchData({
+      ...search,
+      status,
+      customer_id: effectiveCustomerId,
+      subscription_id
+    }),
+    {
+      refreshDeps: [search, status, effectiveCustomerId, subscription_id]
+    }
+  );
+  const prevData = useRef(data);
+  const handleLinkClick = (e, grant) => {
+    const { link } = getLink(grant, inDashboard);
+    handleNavigation(e, link, navigate, { target: link.external ? "_blank" : "_self" });
+  };
+  useEffect(() => {
+    if (onTableDataChange) {
+      onTableDataChange(data, prevData.current);
+      prevData.current = data;
+    }
+  }, [data]);
+  const columns = [
+    {
+      label: t("common.name"),
+      name: "name",
+      options: {
+        customBodyRenderLite: (_, index) => {
+          const grant = data?.list[index];
+          return /* @__PURE__ */ jsx(Box, { onClick: (e) => handleLinkClick(e, grant), children: grant.name || grant.id });
+        }
+      }
+    },
+    {
+      label: t("common.status"),
+      name: "status",
+      options: {
+        customBodyRenderLite: (_, index) => {
+          const grant = data?.list[index];
+          return /* @__PURE__ */ jsx(Box, { onClick: (e) => handleLinkClick(e, grant), children: /* @__PURE__ */ jsx(StatusChip, { status: grant.status, label: t(`admin.customer.creditGrants.status.${grant.status}`) }) });
+        }
+      }
+    },
+    {
+      label: t("common.remainingCredit"),
+      name: "remaining_amount",
+      align: "right",
+      options: {
+        customBodyRenderLite: (_, index) => {
+          const grant = data?.list[index];
+          return /* @__PURE__ */ jsx(Box, { onClick: (e) => handleLinkClick(e, grant), children: /* @__PURE__ */ jsxs(Typography, { variant: "body2", children: [
+            formatBNStr(grant.remaining_amount, grant.paymentCurrency.decimal),
+            " ",
+            grant.paymentCurrency.symbol
+          ] }) });
+        }
+      }
+    },
+    {
+      label: t("common.scope"),
+      name: "scope",
+      options: {
+        customBodyRenderLite: (_, index) => {
+          const grant = data?.list[index];
+          let scope = "general";
+          if (grant.applicability_config?.scope?.prices) {
+            scope = "specific";
+          }
+          return /* @__PURE__ */ jsx(Box, { onClick: (e) => handleLinkClick(e, grant), children: scope === "specific" ? t("common.specific") : t("common.general") });
+        }
+      }
+    },
+    {
+      label: t("common.effectiveDate"),
+      name: "effective_at",
+      options: {
+        customBodyRenderLite: (_, index) => {
+          const grant = data?.list[index];
+          const effectiveAt = grant.effective_at ? grant.effective_at * 1e3 : grant.created_at;
+          return /* @__PURE__ */ jsx(Box, { onClick: (e) => handleLinkClick(e, grant), children: formatToDate(effectiveAt, locale, "YYYY-MM-DD HH:mm") });
+        }
+      }
+    },
+    {
+      label: t("common.expirationDate"),
+      name: "expires_at",
+      options: {
+        customBodyRenderLite: (_, index) => {
+          const grant = data?.list[index];
+          return /* @__PURE__ */ jsx(Box, { onClick: (e) => handleLinkClick(e, grant), children: /* @__PURE__ */ jsx(Typography, { variant: "body2", children: grant.expires_at ? formatToDate(grant.expires_at * 1e3, locale, "YYYY-MM-DD HH:mm") : "-" }) });
+        }
+      }
+    }
+  ];
+  const onTableChange = ({ page, rowsPerPage }) => {
+    if (search.pageSize !== rowsPerPage) {
+      setSearch((x) => ({ ...x, pageSize: rowsPerPage, page: 1 }));
+    } else if (search.page !== page + 1) {
+      setSearch((x) => ({ ...x, page: page + 1 }));
+    }
+  };
+  return /* @__PURE__ */ jsx(TableRoot, { children: /* @__PURE__ */ jsx(
+    Table,
+    {
+      hasRowLink: true,
+      durable: `__${listKey}__`,
+      durableKeys: ["page", "rowsPerPage", "searchText"],
+      data: data.list,
+      columns,
+      options: {
+        count: data.count,
+        page: search.page - 1,
+        rowsPerPage: search.pageSize
+      },
+      loading,
+      onChange: onTableChange,
+      toolbar: false,
+      sx: { mt: 2 },
+      showMobile: false,
+      mobileTDFlexDirection: "row",
+      emptyNodeText: t("admin.creditGrants.noGrants")
+    }
+  ) });
+});
+const TableRoot = styled(Box)`
+  @media (max-width: ${({ theme }) => theme.breakpoints.values.md}px) {
+    .MuiTable-root > .MuiTableBody-root > .MuiTableRow-root > td.MuiTableCell-root {
+      > div {
+        width: fit-content;
+        flex: inherit;
+        font-size: 14px;
+      }
+    }
+    .invoice-summary {
+      padding-right: 20px;
+    }
+  }
+`;
+export default function CreditGrantsList(rawProps) {
+  const props = Object.assign(
+    {
+      customer_id: "",
+      subscription_id: "",
+      status: "granted,pending,depleted,expired",
+      pageSize: 10,
+      onTableDataChange: () => {
+      }
+    },
+    rawProps
+  );
+  return /* @__PURE__ */ jsx(GrantsTable, { ...props });
+}

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

@@ -0,0 +1,13 @@
+type Props = {
+    customer_id?: string;
+    subscription_id?: string;
+    credit_grant_id?: string;
+    pageSize?: number;
+    onTableDataChange?: Function;
+    showAdminColumns?: boolean;
+    showTimeFilter?: boolean;
+    source?: string;
+    mode?: 'dashboard' | 'portal';
+};
+export default function CreditTransactionsList(rawProps: Props): JSX.Element;
+export {};

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

@@ -0,0 +1,254 @@
+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 { 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 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";
+const fetchData = (params = {}) => {
+  const search = new URLSearchParams();
+  Object.keys(params).forEach((key) => {
+    if (params[key]) {
+      search.set(key, String(params[key]));
+    }
+  });
+  return api.get(`/api/credit-transactions?${search.toString()}`).then((res) => res.data);
+};
+const getGrantDetailLink = (grantId, inDashboard) => {
+  let path = `/customer/credit-grant/${grantId}`;
+  if (inDashboard) {
+    path = `/admin/customers/${grantId}`;
+  }
+  return {
+    link: createLink(path),
+    connect: false
+  };
+};
+const TransactionsTable = React.memo((props) => {
+  const {
+    pageSize,
+    customer_id,
+    subscription_id,
+    credit_grant_id,
+    onTableDataChange,
+    showAdminColumns = false,
+    showTimeFilter = false,
+    source,
+    mode = "portal"
+  } = props;
+  const listKey = "credit-transactions-table";
+  const { t, locale } = useLocaleContext();
+  const { session } = usePaymentContext();
+  const isAdmin = ["owner", "admin"].includes(session?.user?.role || "");
+  const navigate = useNavigate();
+  const effectiveCustomerId = customer_id || session?.user?.did;
+  const [search, setSearch] = useState({
+    pageSize: pageSize || 10,
+    page: 1
+  });
+  const [filters, setFilters] = useState({
+    start: void 0,
+    end: void 0
+  });
+  const handleDateRangeChange = useCallback((newValue) => {
+    setFilters(newValue);
+    setSearch((prev) => ({
+      ...prev,
+      page: 1,
+      start: newValue.start || void 0,
+      end: newValue.end || void 0
+    }));
+  }, []);
+  const { loading, data = { list: [], count: 0 } } = useRequest(
+    () => fetchData({
+      ...search,
+      customer_id: effectiveCustomerId,
+      subscription_id,
+      credit_grant_id,
+      source
+    }),
+    {
+      refreshDeps: [search, effectiveCustomerId, subscription_id, credit_grant_id, source]
+    }
+  );
+  useEffect(() => {
+    if (showTimeFilter && !search.start && !search.end) {
+      handleDateRangeChange(filters);
+    }
+  }, [showTimeFilter, handleDateRangeChange, search.start, search.end, filters]);
+  const prevData = useRef(data);
+  useEffect(() => {
+    if (onTableDataChange) {
+      onTableDataChange(data, prevData.current);
+      prevData.current = data;
+    }
+  }, [data]);
+  const columns = [
+    {
+      label: t("common.creditAmount"),
+      name: "credit_amount",
+      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
+          ] });
+        }
+      }
+    },
+    !credit_grant_id && {
+      label: t("common.creditGrant"),
+      name: "credit_grant",
+      options: {
+        customBodyRenderLite: (_, index) => {
+          const transaction = data?.list[index];
+          return /* @__PURE__ */ jsx(
+            Stack,
+            {
+              direction: "row",
+              spacing: 1,
+              onClick: (e) => {
+                const link = getGrantDetailLink(transaction.credit_grant_id, 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)}` })
+            }
+          );
+        }
+      }
+    },
+    {
+      label: t("common.description"),
+      name: "subscription",
+      options: {
+        customBodyRenderLite: (_, index) => {
+          const transaction = data?.list[index];
+          return /* @__PURE__ */ jsx(Typography, { variant: "body2", children: transaction.subscription?.description || transaction.description });
+        }
+      }
+    },
+    ...showAdminColumns && isAdmin ? [
+      {
+        label: t("common.meterEvent"),
+        name: "meter_event",
+        options: {
+          customBodyRenderLite: (_, index) => {
+            const transaction = data?.list[index];
+            if (!transaction.meter) {
+              return /* @__PURE__ */ jsx(Typography, { variant: "body2", children: "-" });
+            }
+            return /* @__PURE__ */ jsx(Link, { href: joinURL(getPrefix(), `/admin/billing/${transaction.meter.id}`), children: /* @__PURE__ */ jsx(Typography, { variant: "body2", sx: { color: "text.link" }, children: transaction.meter.event_name }) });
+          }
+        }
+      }
+    ] : [],
+    {
+      label: t("admin.creditTransactions.transactionDate"),
+      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") });
+        }
+      }
+    }
+  ].filter(Boolean);
+  const onTableChange = ({ page, rowsPerPage }) => {
+    if (search.pageSize !== rowsPerPage) {
+      setSearch((x) => ({ ...x, pageSize: rowsPerPage, page: 1 }));
+    } else if (search.page !== page + 1) {
+      setSearch((x) => ({ ...x, page: page + 1 }));
+    }
+  };
+  return /* @__PURE__ */ jsxs(TableRoot, { children: [
+    showTimeFilter && /* @__PURE__ */ jsx(Box, { sx: { my: 2 }, children: /* @__PURE__ */ jsx(Box, { sx: { mt: 2 }, children: /* @__PURE__ */ jsx(
+      Grid,
+      {
+        container: true,
+        spacing: 2,
+        sx: {
+          alignItems: "center"
+        },
+        children: /* @__PURE__ */ jsx(
+          Grid,
+          {
+            size: {
+              xs: 12,
+              sm: 6,
+              md: 4
+            },
+            children: /* @__PURE__ */ jsx(DateRangePicker, { value: filters, onChange: handleDateRangeChange, size: "small", fullWidth: true })
+          }
+        )
+      }
+    ) }) }),
+    /* @__PURE__ */ jsx(
+      Table,
+      {
+        hasRowLink: true,
+        durable: `__${listKey}__`,
+        durableKeys: ["page", "rowsPerPage"],
+        data: data.list,
+        columns,
+        options: {
+          count: data.count,
+          page: search.page - 1,
+          rowsPerPage: search.pageSize
+        },
+        loading,
+        onChange: onTableChange,
+        toolbar: false,
+        sx: { mt: 2 },
+        showMobile: false,
+        mobileTDFlexDirection: "row",
+        emptyNodeText: t("admin.creditTransactions.noTransactions")
+      }
+    )
+  ] });
+});
+const TableRoot = styled(Box)`
+  @media (max-width: ${({ theme }) => theme.breakpoints.values.md}px) {
+    .MuiTable-root > .MuiTableBody-root > .MuiTableRow-root > td.MuiTableCell-root {
+      > div {
+        width: fit-content;
+        flex: inherit;
+        font-size: 14px;
+      }
+    }
+    .invoice-summary {
+      padding-right: 20px;
+    }
+  }
+`;
+export default function CreditTransactionsList(rawProps) {
+  const props = Object.assign(
+    {
+      customer_id: "",
+      subscription_id: "",
+      credit_grant_id: "",
+      source: "",
+      pageSize: 10,
+      onTableDataChange: () => {
+      },
+      showAdminColumns: false,
+      showTimeFilter: false,
+      mode: "portal"
+    },
+    rawProps
+  );
+  return /* @__PURE__ */ jsx(TransactionsTable, { ...props });
+}

package/es/history/invoice/list.js

@@ -2,7 +2,7 @@ import { jsx, jsxs } from "react/jsx-runtime";
 import { useLocaleContext } from "@arcblock/ux/lib/Locale/context";
 import Toast from "@arcblock/ux/lib/Toast";
 import { OpenInNewOutlined } from "@mui/icons-material";
-import { Box, Button, CircularProgress, Stack, Typography, Tooltip } from "@mui/material";
+import { Box, Button, CircularProgress, Stack, Typography, Tooltip, Avatar } from "@mui/material";
 import { styled } from "@mui/system";
 import { useInfiniteScroll, useRequest, useSetState } from "ahooks";
 import React, { useEffect, useRef, useState } from "react";
@@ -160,6 +160,26 @@ const InvoiceTable = React.memo((props) => {
         }
       }
     },
+    {
+      label: t("common.paymentMethod"),
+      name: "paymentMethod",
+      options: {
+        customBodyRenderLite: (_, index) => {
+          const invoice = data?.list[index];
+          return /* @__PURE__ */ jsxs(
+            Typography,
+            {
+              sx: { display: "flex", alignItems: "center", whiteSpace: "nowrap" },
+              onClick: (e) => handleLinkClick(e, invoice),
+              children: [
+                /* @__PURE__ */ jsx(Avatar, { src: invoice.paymentMethod.logo, sx: { width: 18, height: 18, mr: 1 } }),
+                invoice.paymentMethod.name
+              ]
+            }
+          );
+        }
+      }
+    },
     {
       label: t("common.type"),
       name: "billing_reason",

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/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

@@ -1001,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/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: {