@blocklet/payment-react 1.13.212 → 1.13.214

package/es/checkout/donate.js

@@ -37,7 +37,7 @@ const createOrUpdateDonation = (settings, livemode = true) => {
 const supporterCache = {};
 const fetchSupporters = (target) => {
   if (!supporterCache[target]) {
-    supporterCache[target] = api.get(`/api/donations?&target=${target}`).then((res) => res.data).finally(() => {
+    supporterCache[target] = api.get("/api/donations", { params: { target } }).then((res) => res.data).finally(() => {
       setTimeout(() => {
         delete supporterCache[target];
       }, 3e3);
@@ -45,7 +45,7 @@ const fetchSupporters = (target) => {
   }
   return supporterCache[target];
 };
-function SupporterAvatar({ supporters = [], total, currency, method }) {
+function SupporterAvatar({ supporters = [], total = 0, currency, method }) {
   const { t } = useLocaleContext();
   const customers = uniqBy(supporters, "customer_did");
   return /* @__PURE__ */ jsxs(
@@ -80,7 +80,7 @@ function SupporterAvatar({ supporters = [], total, currency, method }) {
     }
   );
 }
-function SupporterTable({ supporters = [], total, currency, method }) {
+function SupporterTable({ supporters = [], total = 0, currency, method }) {
   const { t } = useLocaleContext();
   return /* @__PURE__ */ jsxs(Box, { display: "flex", flexDirection: "column", alignItems: "center", sx: { width: "100%" }, gap: { xs: 0.5, sm: 1 }, children: [
     /* @__PURE__ */ jsx(Typography, { component: "p", color: "text.secondary", children: t("payment.checkout.donation.summary", { total }) }),

package/es/components/safe-guard.js

@@ -1,4 +1,8 @@
-import { isPaymentKitMounted } from "../util.js";
+import { PAYMENT_KIT_DID, isPaymentKitMounted } from "../util.js";
 export default function SafeGuard({ children }) {
-  return isPaymentKitMounted() ? children : null;
+  const mounted = isPaymentKitMounted();
+  if (mounted === false) {
+    console.warn(`PaymentKit is required to use this feature: https://store.blocklet.dev/blocklets/${PAYMENT_KIT_DID}`);
+  }
+  return mounted ? children : null;
 }

package/es/history/invoice/list.js

@@ -1,7 +1,8 @@
 import { jsx, jsxs } from "react/jsx-runtime";
 import { useLocaleContext } from "@arcblock/ux/lib/Locale/context";
 import { OpenInNewOutlined } from "@mui/icons-material";
-import { Box, Button, CircularProgress, Stack, Typography } from "@mui/material";
+import { Box, Button, CircularProgress, Hidden, Stack, Typography } from "@mui/material";
+import { styled } from "@mui/system";
 import { useInfiniteScroll } from "ahooks";
 import { joinURL } from "ufo";
 import api from "../../api.js";
@@ -74,7 +75,7 @@ export default function CustomerInvoiceList({
   }
   const hasMore = data && data.list.length < data.count;
   const grouped = groupByDate(data.list);
-  return /* @__PURE__ */ jsxs(Stack, { direction: "column", gap: 1, sx: { mt: 1 }, children: [
+  return /* @__PURE__ */ jsxs(Root, { direction: "column", gap: 1, sx: { mt: 1 }, children: [
     Object.entries(grouped).map(([date, invoices]) => /* @__PURE__ */ jsxs(Box, { children: [
       /* @__PURE__ */ jsx(Typography, { sx: { fontWeight: "bold", color: "text.secondary", mt: 2, mb: 1 }, children: date }),
       invoices.map((invoice) => {
@@ -82,10 +83,7 @@ export default function CustomerInvoiceList({
         return /* @__PURE__ */ jsxs(
           Stack,
           {
-            direction: {
-              xs: "column",
-              sm: "row"
-            },
+            direction: "row",
             sx: { my: 1 },
             gap: {
               xs: 0.5,
@@ -94,18 +92,18 @@ export default function CustomerInvoiceList({
             },
             flexWrap: "nowrap",
             children: [
-              /* @__PURE__ */ jsx(Box, { flex: 3, children: /* @__PURE__ */ jsx("a", { href: link.url, target: link.external ? "_blank" : target, rel: "noreferrer", children: /* @__PURE__ */ jsxs(Stack, { direction: "row", alignItems: "center", spacing: 0.5, children: [
+              /* @__PURE__ */ jsx(Box, { flex: 2, children: /* @__PURE__ */ jsx("a", { href: link.url, target: link.external ? "_blank" : target, rel: "noreferrer", children: /* @__PURE__ */ jsxs(Stack, { direction: "row", alignItems: "center", spacing: 0.5, children: [
                 /* @__PURE__ */ jsx(Typography, { component: "span", children: invoice.number }),
-                link.external && /* @__PURE__ */ jsx(OpenInNewOutlined, { fontSize: "small", sx: { color: "text.secondary" } })
+                link.external && /* @__PURE__ */ jsx(Hidden, { mdDown: true, children: /* @__PURE__ */ jsx(OpenInNewOutlined, { fontSize: "small", sx: { color: "text.secondary" } }) })
               ] }) }) }),
-              /* @__PURE__ */ jsx(Box, { flex: 3, children: /* @__PURE__ */ jsx(Typography, { children: formatToDate(invoice.created_at) }) }),
-              /* @__PURE__ */ jsx(Box, { flex: 2, children: /* @__PURE__ */ jsxs(Typography, { textAlign: "right", children: [
+              /* @__PURE__ */ jsx(Box, { flex: 1, textAlign: "right", children: /* @__PURE__ */ jsx(Typography, { children: formatToDate(invoice.created_at, "en", "HH:mm:ss") }) }),
+              /* @__PURE__ */ jsx(Box, { flex: 1, textAlign: "right", children: /* @__PURE__ */ jsxs(Typography, { children: [
                 formatBNStr(invoice.total, invoice.paymentCurrency.decimal),
                 "\xA0",
                 invoice.paymentCurrency.symbol
               ] }) }),
-              /* @__PURE__ */ jsx(Box, { flex: 2, children: /* @__PURE__ */ jsx(Status, { label: invoice.status, color: getInvoiceStatusColor(invoice.status) }) }),
-              /* @__PURE__ */ jsx(Box, { flex: 4, children: /* @__PURE__ */ jsx(Typography, { children: invoice.description || invoice.id }) })
+              /* @__PURE__ */ jsx(Box, { flex: 1, textAlign: "right", children: /* @__PURE__ */ jsx(Status, { label: invoice.status, color: getInvoiceStatusColor(invoice.status) }) }),
+              /* @__PURE__ */ jsx(Hidden, { mdDown: true, children: /* @__PURE__ */ jsx(Box, { flex: 2, className: "invoice-description", textAlign: "right", children: /* @__PURE__ */ jsx(Typography, { children: invoice.description || invoice.id }) }) })
             ]
           },
           invoice.id
@@ -127,3 +125,13 @@ CustomerInvoiceList.defaultProps = {
   target: "_self",
   action: ""
 };
+const Root = styled(Stack)`
+  @media (max-width: 600px) {
+    .invoice-description {
+      display: none !important;
+    }
+    svg[data-testid='OpenInNewOutlinedIcon'] {
+      display: none !important;
+    }
+  }
+`;

package/es/util.d.ts

@@ -3,15 +3,15 @@ import type { PaymentDetails, PriceCurrency, PriceRecurring, TLineItemExpanded,
 export declare const PAYMENT_KIT_DID = "z2qaCNvKMv5GjouKdcDWexv6WqtHbpNPQDnAk";
 export declare const isPaymentKitMounted: () => any;
 export declare const getPrefix: () => any;
-export declare function formatToDate(date: Date | string | number, locale?: string): any;
+export declare function formatToDate(date: Date | string | number, locale?: string, format?: string): any;
 export declare function formatToDatetime(date: Date | string | number, locale?: string): any;
 export declare function formatTime(date: Date | string | number, format?: string, locale?: string): any;
 export declare function formatDateTime(date: Date | string | number, locale?: string): any;
 export declare const formatLocale: (locale?: string) => string;
 export declare const formatPrettyMsLocale: (locale: string) => "zh_CN" | "en_US";
 export declare const formatError: (err: any) => any;
-export declare function formatBNStr(str?: string, decimals?: number, precision?: number, trim?: boolean): any;
-export declare function formatNumber(n: number | string, precision?: number, trim?: boolean): any;
+export declare function formatBNStr(str?: string, decimals?: number, precision?: number, trim?: boolean): string;
+export declare function formatNumber(n: number | string, precision?: number, trim?: boolean): string;
 export declare const formatPrice: (price: TPrice, currency: TPaymentCurrency, unit_label?: string, quantity?: number, bn?: boolean, locale?: string) => string;
 export declare const formatPriceAmount: (price: TPrice, currency: TPaymentCurrency, unit_label?: string, quantity?: number, bn?: boolean) => string;
 export declare function getStatementDescriptor(items: any[]): any;

package/es/util.js

@@ -20,11 +20,11 @@ export const getPrefix = () => {
   }
   return window.blocklet?.prefix;
 };
-export function formatToDate(date, locale = "en") {
+export function formatToDate(date, locale = "en", format = "YYYY-MM-DD HH:mm:ss") {
   if (!date) {
     return "-";
   }
-  return dayjs(date).locale(formatLocale(locale)).format("YYYY-MM-DD HH:mm:ss");
+  return dayjs(date).locale(formatLocale(locale)).format(format);
 }
 export function formatToDatetime(date, locale = "en") {
   if (!date) {
@@ -78,7 +78,12 @@ export function formatNumber(n, precision = 6, trim = true) {
     thousandSeparated: true,
     ...(precision || precision === 0) && { mantissa: precision }
   };
-  return trim ? trimEnd(num.format(options), "0.") : num.format(options);
+  const result = num.format(options);
+  if (!trim) {
+    return result;
+  }
+  const [left, right] = result.split(".");
+  return right ? [left, trimEnd(right, "0")].filter(Boolean).join(".") : left;
 }
 export const formatPrice = (price, currency, unit_label, quantity = 1, bn = true, locale = "en") => {
   if (price.custom_unit_amount) {

package/lib/checkout/donate.js

@@ -31,7 +31,11 @@ const createOrUpdateDonation = (settings, livemode = true) => {
 const supporterCache = {};
 const fetchSupporters = target => {
   if (!supporterCache[target]) {
-    supporterCache[target] = _api.default.get(`/api/donations?&target=${target}`).then(res => res.data).finally(() => {
+    supporterCache[target] = _api.default.get("/api/donations", {
+      params: {
+        target
+      }
+    }).then(res => res.data).finally(() => {
       setTimeout(() => {
         delete supporterCache[target];
       }, 3e3);
@@ -41,7 +45,7 @@ const fetchSupporters = target => {
 };
 function SupporterAvatar({
   supporters = [],
-  total,
+  total = 0,
   currency,
   method
 }) {
@@ -86,7 +90,7 @@ function SupporterAvatar({
 }
 function SupporterTable({
   supporters = [],
-  total,
+  total = 0,
   currency,
   method
 }) {

package/lib/components/safe-guard.js

@@ -8,5 +8,9 @@ var _util = require("../util");
 function SafeGuard({
   children
 }) {
-  return (0, _util.isPaymentKitMounted)() ? children : null;
+  const mounted = (0, _util.isPaymentKitMounted)();
+  if (mounted === false) {
+    console.warn(`PaymentKit is required to use this feature: https://store.blocklet.dev/blocklets/${_util.PAYMENT_KIT_DID}`);
+  }
+  return mounted ? children : null;
 }

package/lib/history/invoice/list.js

@@ -8,6 +8,7 @@ var _jsxRuntime = require("react/jsx-runtime");
 var _context = require("@arcblock/ux/lib/Locale/context");
 var _iconsMaterial = require("@mui/icons-material");
 var _material = require("@mui/material");
+var _system = require("@mui/system");
 var _ahooks = require("ahooks");
 var _ufo = require("ufo");
 var _api = _interopRequireDefault(require("../../api"));
@@ -103,7 +104,7 @@ function CustomerInvoiceList({
   }
   const hasMore = data && data.list.length < data.count;
   const grouped = groupByDate(data.list);
-  return /* @__PURE__ */(0, _jsxRuntime.jsxs)(_material.Stack, {
+  return /* @__PURE__ */(0, _jsxRuntime.jsxs)(Root, {
     direction: "column",
     gap: 1,
     sx: {
@@ -121,10 +122,7 @@ function CustomerInvoiceList({
       }), invoices.map(invoice => {
         const link = getInvoiceLink(invoice, action);
         return /* @__PURE__ */(0, _jsxRuntime.jsxs)(_material.Stack, {
-          direction: {
-            xs: "column",
-            sm: "row"
-          },
+          direction: "row",
           sx: {
             my: 1
           },
@@ -135,7 +133,7 @@ function CustomerInvoiceList({
           },
           flexWrap: "nowrap",
           children: [/* @__PURE__ */(0, _jsxRuntime.jsx)(_material.Box, {
-            flex: 3,
+            flex: 2,
             children: /* @__PURE__ */(0, _jsxRuntime.jsx)("a", {
               href: link.url,
               target: link.external ? "_blank" : target,
@@ -147,35 +145,45 @@ function CustomerInvoiceList({
                 children: [/* @__PURE__ */(0, _jsxRuntime.jsx)(_material.Typography, {
                   component: "span",
                   children: invoice.number
-                }), link.external && /* @__PURE__ */(0, _jsxRuntime.jsx)(_iconsMaterial.OpenInNewOutlined, {
-                  fontSize: "small",
-                  sx: {
-                    color: "text.secondary"
-                  }
+                }), link.external && /* @__PURE__ */(0, _jsxRuntime.jsx)(_material.Hidden, {
+                  mdDown: true,
+                  children: /* @__PURE__ */(0, _jsxRuntime.jsx)(_iconsMaterial.OpenInNewOutlined, {
+                    fontSize: "small",
+                    sx: {
+                      color: "text.secondary"
+                    }
+                  })
                 })]
               })
             })
           }), /* @__PURE__ */(0, _jsxRuntime.jsx)(_material.Box, {
-            flex: 3,
+            flex: 1,
+            textAlign: "right",
             children: /* @__PURE__ */(0, _jsxRuntime.jsx)(_material.Typography, {
-              children: (0, _util.formatToDate)(invoice.created_at)
+              children: (0, _util.formatToDate)(invoice.created_at, "en", "HH:mm:ss")
             })
           }), /* @__PURE__ */(0, _jsxRuntime.jsx)(_material.Box, {
-            flex: 2,
+            flex: 1,
+            textAlign: "right",
             children: /* @__PURE__ */(0, _jsxRuntime.jsxs)(_material.Typography, {
-              textAlign: "right",
               children: [(0, _util.formatBNStr)(invoice.total, invoice.paymentCurrency.decimal), "\xA0", invoice.paymentCurrency.symbol]
             })
           }), /* @__PURE__ */(0, _jsxRuntime.jsx)(_material.Box, {
-            flex: 2,
+            flex: 1,
+            textAlign: "right",
             children: /* @__PURE__ */(0, _jsxRuntime.jsx)(_status.default, {
               label: invoice.status,
               color: (0, _util.getInvoiceStatusColor)(invoice.status)
             })
-          }), /* @__PURE__ */(0, _jsxRuntime.jsx)(_material.Box, {
-            flex: 4,
-            children: /* @__PURE__ */(0, _jsxRuntime.jsx)(_material.Typography, {
-              children: invoice.description || invoice.id
+          }), /* @__PURE__ */(0, _jsxRuntime.jsx)(_material.Hidden, {
+            mdDown: true,
+            children: /* @__PURE__ */(0, _jsxRuntime.jsx)(_material.Box, {
+              flex: 2,
+              className: "invoice-description",
+              textAlign: "right",
+              children: /* @__PURE__ */(0, _jsxRuntime.jsx)(_material.Typography, {
+                children: invoice.description || invoice.id
+              })
             })
           })]
         }, invoice.id);
@@ -209,4 +217,14 @@ CustomerInvoiceList.defaultProps = {
   pageSize: 10,
   target: "_self",
   action: ""
-};
+};
+const Root = (0, _system.styled)(_material.Stack)`
+  @media (max-width: 600px) {
+    .invoice-description {
+      display: none !important;
+    }
+    svg[data-testid='OpenInNewOutlinedIcon'] {
+      display: none !important;
+    }
+  }
+`;

package/lib/util.d.ts

@@ -3,15 +3,15 @@ import type { PaymentDetails, PriceCurrency, PriceRecurring, TLineItemExpanded,
 export declare const PAYMENT_KIT_DID = "z2qaCNvKMv5GjouKdcDWexv6WqtHbpNPQDnAk";
 export declare const isPaymentKitMounted: () => any;
 export declare const getPrefix: () => any;
-export declare function formatToDate(date: Date | string | number, locale?: string): any;
+export declare function formatToDate(date: Date | string | number, locale?: string, format?: string): any;
 export declare function formatToDatetime(date: Date | string | number, locale?: string): any;
 export declare function formatTime(date: Date | string | number, format?: string, locale?: string): any;
 export declare function formatDateTime(date: Date | string | number, locale?: string): any;
 export declare const formatLocale: (locale?: string) => string;
 export declare const formatPrettyMsLocale: (locale: string) => "zh_CN" | "en_US";
 export declare const formatError: (err: any) => any;
-export declare function formatBNStr(str?: string, decimals?: number, precision?: number, trim?: boolean): any;
-export declare function formatNumber(n: number | string, precision?: number, trim?: boolean): any;
+export declare function formatBNStr(str?: string, decimals?: number, precision?: number, trim?: boolean): string;
+export declare function formatNumber(n: number | string, precision?: number, trim?: boolean): string;
 export declare const formatPrice: (price: TPrice, currency: TPaymentCurrency, unit_label?: string, quantity?: number, bn?: boolean, locale?: string) => string;
 export declare const formatPriceAmount: (price: TPrice, currency: TPaymentCurrency, unit_label?: string, quantity?: number, bn?: boolean) => string;
 export declare function getStatementDescriptor(items: any[]): any;

package/lib/util.js

@@ -65,11 +65,11 @@ const getPrefix = () => {
   return window.blocklet?.prefix;
 };
 exports.getPrefix = getPrefix;
-function formatToDate(date, locale = "en") {
+function formatToDate(date, locale = "en", format = "YYYY-MM-DD HH:mm:ss") {
   if (!date) {
     return "-";
   }
-  return (0, _dayjs.default)(date).locale(formatLocale(locale)).format("YYYY-MM-DD HH:mm:ss");
+  return (0, _dayjs.default)(date).locale(formatLocale(locale)).format(format);
 }
 function formatToDatetime(date, locale = "en") {
   if (!date) {
@@ -132,7 +132,12 @@ function formatNumber(n, precision = 6, trim = true) {
       mantissa: precision
     })
   };
-  return trim ? (0, _trimEnd.default)(num.format(options), "0.") : num.format(options);
+  const result = num.format(options);
+  if (!trim) {
+    return result;
+  }
+  const [left, right] = result.split(".");
+  return right ? [left, (0, _trimEnd.default)(right, "0")].filter(Boolean).join(".") : left;
 }
 const formatPrice = (price, currency, unit_label, quantity = 1, bn = true, locale = "en") => {
   if (price.custom_unit_amount) {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@blocklet/payment-react",
-  "version": "1.13.212",
+  "version": "1.13.214",
   "description": "Reusable react components for payment kit v2",
   "keywords": [
     "react",
@@ -90,7 +90,7 @@
     "@babel/core": "^7.23.9",
     "@babel/preset-env": "^7.23.9",
     "@babel/preset-react": "^7.23.3",
-    "@blocklet/payment-types": "1.13.212",
+    "@blocklet/payment-types": "1.13.214",
     "@storybook/addon-essentials": "^7.6.13",
     "@storybook/addon-interactions": "^7.6.13",
     "@storybook/addon-links": "^7.6.13",
@@ -119,5 +119,5 @@
     "vite-plugin-babel": "^1.2.0",
     "vite-plugin-node-polyfills": "^0.21.0"
   },
-  "gitHead": "942de3b017723af85a6c271a7e4ddd35443bc84d"
+  "gitHead": "430206bb27ea5749a12717d5bd3caf00a04b610a"
 }

package/src/checkout/donate.tsx

@@ -64,7 +64,7 @@ const supporterCache: { [key: string]: Promise<DonateHistory> } = {};
 const fetchSupporters = (target: string): Promise<DonateHistory> => {
   if (!supporterCache[target]) {
     supporterCache[target] = api
-      .get(`/api/donations?&target=${target}`)
+      .get('/api/donations', { params: { target } })
       .then((res) => res.data)
       .finally(() => {
         setTimeout(() => {
@@ -77,7 +77,7 @@ const fetchSupporters = (target: string): Promise<DonateHistory> => {
 };
 
 // eslint-disable-next-line @typescript-eslint/no-unused-vars
-function SupporterAvatar({ supporters = [], total, currency, method }: DonateHistory) {
+function SupporterAvatar({ supporters = [], total = 0, currency, method }: DonateHistory) {
   const { t } = useLocaleContext();
   const customers = uniqBy(supporters, 'customer_did');
   return (
@@ -114,7 +114,7 @@ function SupporterAvatar({ supporters = [], total, currency, method }: DonateHis
 }
 
 // eslint-disable-next-line @typescript-eslint/no-unused-vars
-function SupporterTable({ supporters = [], total, currency, method }: DonateHistory) {
+function SupporterTable({ supporters = [], total = 0, currency, method }: DonateHistory) {
   const { t } = useLocaleContext();
   return (
     <Box display="flex" flexDirection="column" alignItems="center" sx={{ width: '100%' }} gap={{ xs: 0.5, sm: 1 }}>

package/src/components/safe-guard.tsx

@@ -1,5 +1,9 @@
-import { isPaymentKitMounted } from '../util';
+import { PAYMENT_KIT_DID, isPaymentKitMounted } from '../util';
 
 export default function SafeGuard({ children }: { children: any }) {
-  return isPaymentKitMounted() ? children : null;
+  const mounted = isPaymentKitMounted();
+  if (mounted === false) {
+    console.warn(`PaymentKit is required to use this feature: https://store.blocklet.dev/blocklets/${PAYMENT_KIT_DID}`);
+  }
+  return mounted ? children : null;
 }

package/src/history/invoice/list.tsx

@@ -2,7 +2,8 @@
 import { useLocaleContext } from '@arcblock/ux/lib/Locale/context';
 import type { Paginated, TInvoiceExpanded, TSubscription } from '@blocklet/payment-types';
 import { OpenInNewOutlined } from '@mui/icons-material';
-import { Box, Button, CircularProgress, Stack, Typography } from '@mui/material';
+import { Box, Button, CircularProgress, Hidden, Stack, Typography } from '@mui/material';
+import { styled } from '@mui/system';
 import { useInfiniteScroll } from 'ahooks';
 import { joinURL } from 'ufo';
 
@@ -109,7 +110,7 @@ export default function CustomerInvoiceList({
   const grouped = groupByDate(data.list as any);
 
   return (
-    <Stack direction="column" gap={1} sx={{ mt: 1 }}>
+    <Root direction="column" gap={1} sx={{ mt: 1 }}>
       {Object.entries(grouped).map(([date, invoices]) => (
         <Box key={date}>
           <Typography sx={{ fontWeight: 'bold', color: 'text.secondary', mt: 2, mb: 1 }}>{date}</Typography>
@@ -118,10 +119,7 @@ export default function CustomerInvoiceList({
             return (
               <Stack
                 key={invoice.id}
-                direction={{
-                  xs: 'column',
-                  sm: 'row',
-                }}
+                direction="row"
                 sx={{ my: 1 }}
                 gap={{
                   xs: 0.5,
@@ -129,29 +127,35 @@ export default function CustomerInvoiceList({
                   md: 3,
                 }}
                 flexWrap="nowrap">
-                <Box flex={3}>
+                <Box flex={2}>
                   <a href={link.url} target={link.external ? '_blank' : target} rel="noreferrer">
                     <Stack direction="row" alignItems="center" spacing={0.5}>
                       <Typography component="span">{invoice.number}</Typography>
-                      {link.external && <OpenInNewOutlined fontSize="small" sx={{ color: 'text.secondary' }} />}
+                      {link.external && (
+                        <Hidden mdDown>
+                          <OpenInNewOutlined fontSize="small" sx={{ color: 'text.secondary' }} />
+                        </Hidden>
+                      )}
                     </Stack>
                   </a>
                 </Box>
-                <Box flex={3}>
-                  <Typography>{formatToDate(invoice.created_at)}</Typography>
+                <Box flex={1} textAlign="right">
+                  <Typography>{formatToDate(invoice.created_at, 'en', 'HH:mm:ss')}</Typography>
                 </Box>
-                <Box flex={2}>
-                  <Typography textAlign="right">
+                <Box flex={1} textAlign="right">
+                  <Typography>
                     {formatBNStr(invoice.total, invoice.paymentCurrency.decimal)}&nbsp;
                     {invoice.paymentCurrency.symbol}
                   </Typography>
                 </Box>
-                <Box flex={2}>
+                <Box flex={1} textAlign="right">
                   <Status label={invoice.status} color={getInvoiceStatusColor(invoice.status)} />
                 </Box>
-                <Box flex={4}>
-                  <Typography>{invoice.description || invoice.id}</Typography>
-                </Box>
+                <Hidden mdDown>
+                  <Box flex={2} className="invoice-description" textAlign="right">
+                    <Typography>{invoice.description || invoice.id}</Typography>
+                  </Box>
+                </Hidden>
               </Stack>
             );
           })}
@@ -171,7 +175,7 @@ export default function CustomerInvoiceList({
           </Typography>
         )}
       </Box>
-    </Stack>
+    </Root>
   );
 }
 
@@ -184,3 +188,14 @@ CustomerInvoiceList.defaultProps = {
   target: '_self',
   action: '',
 };
+
+const Root = styled(Stack)`
+  @media (max-width: 600px) {
+    .invoice-description {
+      display: none !important;
+    }
+    svg[data-testid='OpenInNewOutlinedIcon'] {
+      display: none !important;
+    }
+  }
+`;

package/src/util.ts

@@ -40,12 +40,12 @@ export const getPrefix = () => {
   return window.blocklet?.prefix;
 };
 
-export function formatToDate(date: Date | string | number, locale = 'en') {
+export function formatToDate(date: Date | string | number, locale = 'en', format = 'YYYY-MM-DD HH:mm:ss') {
   if (!date) {
     return '-';
   }
 
-  return dayjs(date).locale(formatLocale(locale)).format('YYYY-MM-DD HH:mm:ss');
+  return dayjs(date).locale(formatLocale(locale)).format(format);
 }
 
 export function formatToDatetime(date: Date | string | number, locale = 'en') {
@@ -118,7 +118,12 @@ export function formatNumber(n: number | string, precision: number = 6, trim: bo
     thousandSeparated: true,
     ...((precision || precision === 0) && { mantissa: precision }),
   };
-  return trim ? trimEnd(num.format(options), '0.') : num.format(options);
+  const result = num.format(options);
+  if (!trim) {
+    return result;
+  }
+  const [left, right] = result.split('.');
+  return right ? [left, trimEnd(right, '0')].filter(Boolean).join('.') : left;
 }
 
 export const formatPrice = (