@blocklet/payment-react 1.20.12 → 1.20.14

package/es/payment/summary.js

@@ -36,9 +36,9 @@ const ExpandMore = styled((props) => {
     duration: theme.transitions.duration.shortest
   })
 }));
-async function fetchCrossSell(id) {
+async function fetchCrossSell(id, skipError = true) {
   try {
-    const { data } = await api.get(`/api/checkout-sessions/${id}/cross-sell`);
+    const { data } = await api.get(`/api/checkout-sessions/${id}/cross-sell?skipError=${skipError}`);
     if (!data.error) {
       return data;
     }
@@ -103,7 +103,7 @@ export default function PaymentSummary({
   const { paymentState, ...settings } = usePaymentContext();
   const [state, setState] = useSetState({ loading: false, shake: false, expanded: items?.length < 3 });
   const { data, runAsync } = useRequest(
-    () => checkoutSessionId ? fetchCrossSell(checkoutSessionId) : Promise.resolve(null)
+    (skipError) => checkoutSessionId ? fetchCrossSell(checkoutSessionId, skipError) : Promise.resolve(null)
   );
   const sessionDiscounts = checkoutSession?.discounts || [];
   const allowPromotionCodes = !!checkoutSession?.allow_promotion_codes;
@@ -157,15 +157,15 @@ export default function PaymentSummary({
   );
   const handleUpsell = async (from, to) => {
     await onUpsell(from, to);
-    runAsync();
+    runAsync(false);
   };
   const handleQuantityChange = async (itemId, quantity) => {
     await onQuantityChange(itemId, quantity);
-    runAsync();
+    runAsync(false);
   };
   const handleDownsell = async (from) => {
     await onDownsell(from);
-    runAsync();
+    runAsync(false);
   };
   const handleApplyCrossSell = async () => {
     if (data) {

package/lib/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/lib/components/source-data-viewer.js

@@ -0,0 +1,236 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+
+var _jsxRuntime = require("react/jsx-runtime");
+var _Empty = _interopRequireDefault(require("@arcblock/ux/lib/Empty"));
+var _context = require("@arcblock/ux/lib/Locale/context");
+var _material = require("@mui/material");
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+function SourceDataViewer({
+  data,
+  compact = false,
+  maxItems = void 0,
+  locale: propLocale = void 0,
+  showGroups = false
+}) {
+  const {
+    locale: contextLocale,
+    t
+  } = (0, _context.useLocaleContext)();
+  const currentLocale = propLocale || contextLocale || "en";
+  if (!data || Array.isArray(data) && data.length === 0 || typeof data === "object" && Object.keys(data).length === 0) {
+    return /* @__PURE__ */(0, _jsxRuntime.jsx)(_Empty.default, {
+      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__ */(0, _jsxRuntime.jsx)(_material.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__ */(0, _jsxRuntime.jsxs)(_material.Box, {
+        sx: {
+          display: "flex",
+          alignItems: "center",
+          gap: 1
+        },
+        children: [/* @__PURE__ */(0, _jsxRuntime.jsx)(_material.Box, {
+          component: "img",
+          src: field.url || field.value,
+          alt: displayValue,
+          sx: {
+            width: 24,
+            height: 24,
+            borderRadius: 1,
+            objectFit: "cover"
+          }
+        }), /* @__PURE__ */(0, _jsxRuntime.jsx)(_material.Typography, {
+          variant: "body2",
+          sx: {
+            fontWeight: 500
+          },
+          children: displayValue
+        })]
+      });
+    }
+    return /* @__PURE__ */(0, _jsxRuntime.jsx)(_material.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__ */(0, _jsxRuntime.jsxs)(_material.Stack, {
+      direction: "row",
+      spacing: 1,
+      flexWrap: "wrap",
+      useFlexGap: true,
+      children: [displayItems.map(field => /* @__PURE__ */(0, _jsxRuntime.jsx)(_material.Chip, {
+        label: `${getLocalizedText(field.label)}: ${field.value}`,
+        size: "small",
+        variant: "outlined",
+        sx: {
+          maxWidth: 200
+        }
+      }, field.key)), maxItems && normalizedData.length > maxItems && /* @__PURE__ */(0, _jsxRuntime.jsx)(_material.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__ */(0, _jsxRuntime.jsx)(_material.Stack, {
+      spacing: 2.5,
+      children: Object.entries(groupedData).map(([group, fields]) => /* @__PURE__ */(0, _jsxRuntime.jsxs)(_material.Box, {
+        children: [group !== "default" && /* @__PURE__ */(0, _jsxRuntime.jsx)(_material.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__ */(0, _jsxRuntime.jsx)(_material.Stack, {
+          spacing: 1.2,
+          sx: {
+            pl: group !== "default" ? 1 : 0
+          },
+          children: fields.map(field => /* @__PURE__ */(0, _jsxRuntime.jsxs)(_material.Box, {
+            sx: {
+              display: "flex",
+              flexDirection: "row",
+              alignItems: "flex-start",
+              gap: 3,
+              minHeight: 20
+            },
+            children: [/* @__PURE__ */(0, _jsxRuntime.jsx)(_material.Typography, {
+              variant: "body2",
+              color: "text.secondary",
+              sx: {
+                fontSize: "0.8rem",
+                minWidth: 100,
+                fontWeight: 600,
+                lineHeight: 1.4
+              },
+              children: getLocalizedText(field.label)
+            }), /* @__PURE__ */(0, _jsxRuntime.jsx)(_material.Box, {
+              sx: {
+                flex: 1,
+                minWidth: 0,
+                wordBreak: "break-all",
+                whiteSpace: "wrap"
+              },
+              children: renderFieldValue(field)
+            })]
+          }, field.key))
+        })]
+      }, group))
+    });
+  }
+  return /* @__PURE__ */(0, _jsxRuntime.jsx)(_material.Stack, {
+    spacing: 1.5,
+    children: displayItems.map(field => /* @__PURE__ */(0, _jsxRuntime.jsxs)(_material.Box, {
+      sx: {
+        display: "flex",
+        flexDirection: "row",
+        alignItems: "flex-start",
+        gap: 3,
+        minHeight: 20
+      },
+      children: [/* @__PURE__ */(0, _jsxRuntime.jsx)(_material.Typography, {
+        variant: "body2",
+        color: "text.secondary",
+        sx: {
+          fontSize: "0.8rem",
+          minWidth: 100,
+          fontWeight: 600,
+          lineHeight: 1.4
+        },
+        children: getLocalizedText(field.label)
+      }), /* @__PURE__ */(0, _jsxRuntime.jsx)(_material.Box, {
+        sx: {
+          flex: 1,
+          minWidth: 0
+        },
+        children: renderFieldValue(field)
+      })]
+    }, field.key))
+  });
+}
+module.exports = SourceDataViewer;

package/lib/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/lib/history/credit/transactions-list.js

@@ -10,14 +10,15 @@ var _material = require("@mui/material");
 var _ahooks = require("ahooks");
 var _reactRouterDom = require("react-router-dom");
 var _react = _interopRequireWildcard(require("react"));
-var _ufo = require("ufo");
 var _system = require("@mui/system");
+var _ufo = require("ufo");
 var _dateRangePicker = _interopRequireDefault(require("../../components/date-range-picker"));
 var _util = require("../../libs/util");
 var _payment = require("../../contexts/payment");
 var _api = _interopRequireDefault(require("../../libs/api"));
 var _table = _interopRequireDefault(require("../../components/table"));
 var _navigation = require("../../libs/navigation");
+var _sourceDataViewer = _interopRequireDefault(require("../../components/source-data-viewer"));
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
 function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
 function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
@@ -40,6 +41,16 @@ const getGrantDetailLink = (grantId, inDashboard) => {
     connect: false
   };
 };
+const getInvoiceDetailLink = (invoiceId, inDashboard) => {
+  let path = `/customer/invoice/${invoiceId}`;
+  if (inDashboard) {
+    path = `/admin/billing/${invoiceId}`;
+  }
+  return {
+    link: (0, _navigation.createLink)(path),
+    connect: false
+  };
+};
 const TransactionsTable = _react.default.memo(props => {
   const {
     pageSize,
@@ -49,6 +60,7 @@ const TransactionsTable = _react.default.memo(props => {
     onTableDataChange,
     showAdminColumns = false,
     showTimeFilter = false,
+    includeGrants = false,
     source,
     mode = "portal"
   } = props;
@@ -71,6 +83,10 @@ const TransactionsTable = _react.default.memo(props => {
     start: void 0,
     end: void 0
   });
+  const [sourceDataPopover, setSourceDataPopover] = (0, _react.useState)({
+    anchorEl: null,
+    data: null
+  });
   const handleDateRangeChange = (0, _react.useCallback)(newValue => {
     setFilters(newValue);
     setSearch(prev => ({
@@ -91,9 +107,10 @@ const TransactionsTable = _react.default.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]
   });
   (0, _react.useEffect)(() => {
     if (showTimeFilter && !search.start && !search.end) {
@@ -113,24 +130,39 @@ const TransactionsTable = _react.default.memo(props => {
     align: "right",
     options: {
       customBodyRenderLite: (_, index) => {
-        const transaction = data?.list[index];
-        const unit = transaction.meter?.unit || transaction.paymentCurrency.symbol;
+        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 = (0, _util.formatBNStr)(amount, currency?.decimal || 0);
+        if (!includeGrants) {
+          return /* @__PURE__ */(0, _jsxRuntime.jsxs)(_material.Typography, {
+            children: [displayAmount, " ", unit]
+          });
+        }
         return /* @__PURE__ */(0, _jsxRuntime.jsxs)(_material.Typography, {
-          children: [(0, _util.formatBNStr)(transaction.credit_amount, transaction.paymentCurrency.decimal), " ", unit]
+          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__ */(0, _jsxRuntime.jsx)(_material.Stack, {
           direction: "row",
           spacing: 1,
           onClick: e => {
-            const link = getGrantDetailLink(transaction.credit_grant_id, isAdmin && mode === "dashboard");
+            const link = getGrantDetailLink(grantId, isAdmin && mode === "dashboard");
             (0, _navigation.handleNavigation)(e, link.link, navigate);
           },
           sx: {
@@ -139,23 +171,27 @@ const TransactionsTable = _react.default.memo(props => {
           children: /* @__PURE__ */(0, _jsxRuntime.jsx)(_material.Typography, {
             variant: "body2",
             sx: {
-              color: "text.link",
               cursor: "pointer"
             },
-            children: transaction.creditGrant.name || `Grant ${transaction.credit_grant_id.slice(-6)}`
+            children: grantName || `Grant ${grantId.slice(-6)}`
           })
         });
       }
     }
   }, {
     label: t("common.description"),
-    name: "subscription",
+    name: "description",
     options: {
       customBodyRenderLite: (_, index) => {
-        const transaction = data?.list[index];
+        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__ */(0, _jsxRuntime.jsx)(_material.Typography, {
           variant: "body2",
-          children: transaction.subscription?.description || transaction.description
+          sx: {
+            fontWeight: 400
+          },
+          children: description
         });
       }
     }
@@ -188,10 +224,55 @@ const TransactionsTable = _react.default.memo(props => {
     name: "created_at",
     options: {
       customBodyRenderLite: (_, index) => {
-        const transaction = data?.list[index];
+        const item = data?.list[index];
         return /* @__PURE__ */(0, _jsxRuntime.jsx)(_material.Typography, {
           variant: "body2",
-          children: (0, _util.formatToDate)(transaction.created_at, locale, "YYYY-MM-DD HH:mm:ss")
+          color: "text.secondary",
+          sx: {
+            fontSize: "0.875rem"
+          },
+          children: (0, _util.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__ */(0, _jsxRuntime.jsxs)(_material.Box, {
+          sx: {
+            display: "flex",
+            gap: 1,
+            alignItems: "center"
+          },
+          children: [isGrant && invoiceId && /* @__PURE__ */(0, _jsxRuntime.jsx)(_material.Button, {
+            variant: "text",
+            size: "small",
+            color: "primary",
+            onClick: e => {
+              e.preventDefault();
+              const link = getInvoiceDetailLink(invoiceId, isAdmin && mode === "dashboard");
+              (0, _navigation.handleNavigation)(e, link.link, navigate);
+            },
+            children: t("common.viewInvoice")
+          }), sourceData && /* @__PURE__ */(0, _jsxRuntime.jsx)(_material.Button, {
+            variant: "text",
+            size: "small",
+            color: "primary",
+            onClick: e => {
+              e.preventDefault();
+              setSourceDataPopover({
+                anchorEl: e.currentTarget,
+                data: sourceData
+              });
+            },
+            children: t("common.viewSourceData")
+          })]
         });
       }
     }
@@ -263,6 +344,40 @@ const TransactionsTable = _react.default.memo(props => {
       showMobile: false,
       mobileTDFlexDirection: "row",
       emptyNodeText: t("admin.creditTransactions.noTransactions")
+    }), /* @__PURE__ */(0, _jsxRuntime.jsx)(_material.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__ */(0, _jsxRuntime.jsx)(_sourceDataViewer.default, {
+        data: sourceDataPopover.data,
+        showGroups: true
+      })
     })]
   });
 });
@@ -292,6 +407,7 @@ function CreditTransactionsList(rawProps) {
     onTableDataChange: () => {},
     showAdminColumns: false,
     showTimeFilter: false,
+    includeGrants: false,
     mode: "portal"
   }, rawProps);
   return /* @__PURE__ */(0, _jsxRuntime.jsx)(TransactionsTable, {

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

@@ -48,6 +48,7 @@ var _exportNames = {
   AutoTopup: true,
   Collapse: true,
   PromotionCode: true,
+  SourceDataViewer: true,
   PaymentThemeProvider: true,
   translations: true,
   createTranslator: true
@@ -262,6 +263,12 @@ Object.defineProperty(exports, "SafeGuard", {
     return _safeGuard.default;
   }
 });
+Object.defineProperty(exports, "SourceDataViewer", {
+  enumerable: true,
+  get: function () {
+    return _sourceDataViewer.default;
+  }
+});
 Object.defineProperty(exports, "Status", {
   enumerable: true,
   get: function () {
@@ -376,6 +383,7 @@ var _modal = _interopRequireDefault(require("./components/auto-topup/modal"));
 var _autoTopup = _interopRequireDefault(require("./components/auto-topup"));
 var _collapse = _interopRequireDefault(require("./components/collapse"));
 var _promotionCode = _interopRequireDefault(require("./components/promotion-code"));
+var _sourceDataViewer = _interopRequireDefault(require("./components/source-data-viewer"));
 var _theme = require("./theme");
 var _util = require("./libs/util");
 Object.keys(_util).forEach(function (key) {

package/lib/locales/en.js

@@ -114,7 +114,8 @@ module.exports = (0, _flat.default)({
       confirm: "Confirm",
       cancel: "Cancel"
     },
-    paymentMethod: "Payment Method"
+    paymentMethod: "Payment Method",
+    viewInvoice: "View Invoice"
   },
   payment: {
     checkout: {

package/lib/locales/zh.js

@@ -114,7 +114,8 @@ module.exports = (0, _flat.default)({
       confirm: "\u786E\u8BA4",
       cancel: "\u53D6\u6D88"
     },
-    paymentMethod: "\u652F\u4ED8\u65B9\u5F0F"
+    paymentMethod: "\u652F\u4ED8\u65B9\u5F0F",
+    viewInvoice: "\u67E5\u770B\u8D26\u5355"
   },
   payment: {
     checkout: {