@blocklet/payment-react 1.13.211 → 1.13.213

package/es/components/safe-guard.d.ts

@@ -0,0 +1,3 @@
+export default function SafeGuard({ children }: {
+    children: any;
+}): any;

package/es/components/safe-guard.js

@@ -0,0 +1,8 @@
+import { PAYMENT_KIT_DID, isPaymentKitMounted } from "../util.js";
+export default function SafeGuard({ children }) {
+  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/index.d.ts

@@ -7,6 +7,7 @@ import ConfirmDialog from './components/confirm';
 import FormInput from './components/input';
 import Livemode from './components/livemode';
 import PricingTable from './components/pricing-table';
+import SafeGuard from './components/safe-guard';
 import Status from './components/status';
 import Switch from './components/switch-button';
 import dayjs from './dayjs';
@@ -24,4 +25,4 @@ import PaymentSummary from './payment/summary';
 export * from './util';
 export * from './contexts/payment';
 export { translations, createTranslator } from './locales';
-export { api, dayjs, FormInput, PhoneInput, AddressForm, StripeForm, Status, Livemode, Switch, ConfirmDialog, CheckoutForm, CheckoutTable, CheckoutDonate, CurrencySelector, Payment, PaymentSummary, PricingTable, ProductSkeleton, Amount, CustomerInvoiceList, CustomerPaymentList, MiniInvoiceList, TxLink, };
+export { api, dayjs, FormInput, PhoneInput, AddressForm, StripeForm, Status, Livemode, Switch, ConfirmDialog, CheckoutForm, CheckoutTable, CheckoutDonate, CurrencySelector, Payment, PaymentSummary, PricingTable, ProductSkeleton, Amount, CustomerInvoiceList, CustomerPaymentList, MiniInvoiceList, TxLink, SafeGuard, };

package/es/index.js

@@ -7,6 +7,7 @@ import ConfirmDialog from "./components/confirm.js";
 import FormInput from "./components/input.js";
 import Livemode from "./components/livemode.js";
 import PricingTable from "./components/pricing-table.js";
+import SafeGuard from "./components/safe-guard.js";
 import Status from "./components/status.js";
 import Switch from "./components/switch-button.js";
 import dayjs from "./dayjs.js";
@@ -47,5 +48,6 @@ export {
   CustomerInvoiceList,
   CustomerPaymentList,
   MiniInvoiceList,
-  TxLink
+  TxLink,
+  SafeGuard
 };

package/es/util.d.ts

@@ -1,8 +1,9 @@
 /// <reference types="react" />
 import type { PaymentDetails, PriceCurrency, PriceRecurring, TLineItemExpanded, TPaymentCurrency, TPaymentMethod, TPaymentMethodExpanded, TPrice, TSubscriptionExpanded, TSubscriptionItemExpanded } from '@blocklet/payment-types';
 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;

package/es/util.js

@@ -6,6 +6,9 @@ import { joinURL } from "ufo";
 import dayjs from "./dayjs.js";
 import { t } from "./locales/index.js";
 export const PAYMENT_KIT_DID = "z2qaCNvKMv5GjouKdcDWexv6WqtHbpNPQDnAk";
+export const isPaymentKitMounted = () => {
+  return (window.blocklet?.componentMountPoints || []).some((x) => x.did === PAYMENT_KIT_DID);
+};
 export const getPrefix = () => {
   const componentId = (window?.blocklet?.componentId || "").split("/").pop();
   if (componentId === PAYMENT_KIT_DID) {
@@ -17,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) {

package/lib/components/safe-guard.d.ts

@@ -0,0 +1,3 @@
+export default function SafeGuard({ children }: {
+    children: any;
+}): any;

package/lib/components/safe-guard.js

@@ -0,0 +1,16 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+module.exports = SafeGuard;
+var _util = require("../util");
+function SafeGuard({
+  children
+}) {
+  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/index.d.ts

@@ -7,6 +7,7 @@ import ConfirmDialog from './components/confirm';
 import FormInput from './components/input';
 import Livemode from './components/livemode';
 import PricingTable from './components/pricing-table';
+import SafeGuard from './components/safe-guard';
 import Status from './components/status';
 import Switch from './components/switch-button';
 import dayjs from './dayjs';
@@ -24,4 +25,4 @@ import PaymentSummary from './payment/summary';
 export * from './util';
 export * from './contexts/payment';
 export { translations, createTranslator } from './locales';
-export { api, dayjs, FormInput, PhoneInput, AddressForm, StripeForm, Status, Livemode, Switch, ConfirmDialog, CheckoutForm, CheckoutTable, CheckoutDonate, CurrencySelector, Payment, PaymentSummary, PricingTable, ProductSkeleton, Amount, CustomerInvoiceList, CustomerPaymentList, MiniInvoiceList, TxLink, };
+export { api, dayjs, FormInput, PhoneInput, AddressForm, StripeForm, Status, Livemode, Switch, ConfirmDialog, CheckoutForm, CheckoutTable, CheckoutDonate, CurrencySelector, Payment, PaymentSummary, PricingTable, ProductSkeleton, Amount, CustomerInvoiceList, CustomerPaymentList, MiniInvoiceList, TxLink, SafeGuard, };

package/lib/index.js

@@ -13,6 +13,7 @@ var _exportNames = {
   FormInput: true,
   Livemode: true,
   PricingTable: true,
+  SafeGuard: true,
   Status: true,
   Switch: true,
   dayjs: true,
@@ -132,6 +133,12 @@ Object.defineProperty(exports, "ProductSkeleton", {
     return _productSkeleton.default;
   }
 });
+Object.defineProperty(exports, "SafeGuard", {
+  enumerable: true,
+  get: function () {
+    return _safeGuard.default;
+  }
+});
 Object.defineProperty(exports, "Status", {
   enumerable: true,
   get: function () {
@@ -189,6 +196,7 @@ var _confirm = _interopRequireDefault(require("./components/confirm"));
 var _input = _interopRequireDefault(require("./components/input"));
 var _livemode = _interopRequireDefault(require("./components/livemode"));
 var _pricingTable = _interopRequireDefault(require("./components/pricing-table"));
+var _safeGuard = _interopRequireDefault(require("./components/safe-guard"));
 var _status = _interopRequireDefault(require("./components/status"));
 var _switchButton = _interopRequireDefault(require("./components/switch-button"));
 var _dayjs = _interopRequireDefault(require("./dayjs"));

package/lib/util.d.ts

@@ -1,8 +1,9 @@
 /// <reference types="react" />
 import type { PaymentDetails, PriceCurrency, PriceRecurring, TLineItemExpanded, TPaymentCurrency, TPaymentMethod, TPaymentMethodExpanded, TPrice, TSubscriptionExpanded, TSubscriptionItemExpanded } from '@blocklet/payment-types';
 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;

package/lib/util.js

@@ -35,6 +35,7 @@ exports.getSubscriptionAction = void 0;
 exports.getSubscriptionStatusColor = getSubscriptionStatusColor;
 exports.getTxLink = exports.getSubscriptionTimeSummary = void 0;
 exports.getWebhookStatusColor = getWebhookStatusColor;
+exports.isPaymentKitMounted = void 0;
 exports.isValidCountry = isValidCountry;
 exports.mergeExtraParams = void 0;
 exports.sleep = sleep;
@@ -48,6 +49,10 @@ var _dayjs = _interopRequireDefault(require("./dayjs"));
 var _locales = require("./locales");
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 const PAYMENT_KIT_DID = exports.PAYMENT_KIT_DID = "z2qaCNvKMv5GjouKdcDWexv6WqtHbpNPQDnAk";
+const isPaymentKitMounted = () => {
+  return (window.blocklet?.componentMountPoints || []).some(x => x.did === PAYMENT_KIT_DID);
+};
+exports.isPaymentKitMounted = isPaymentKitMounted;
 const getPrefix = () => {
   const componentId = (window?.blocklet?.componentId || "").split("/").pop();
   if (componentId === PAYMENT_KIT_DID) {
@@ -60,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) {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@blocklet/payment-react",
-  "version": "1.13.211",
+  "version": "1.13.213",
   "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.211",
+    "@blocklet/payment-types": "1.13.213",
     "@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": "2fe03028e2284261a1a62260d82a2e79ec45ce4a"
+  "gitHead": "209467c5da3ab2fa17f5ce802bcd8b086e7c08e5"
 }

package/src/components/safe-guard.tsx

@@ -0,0 +1,9 @@
+import { PAYMENT_KIT_DID, isPaymentKitMounted } from '../util';
+
+export default function SafeGuard({ children }: { children: any }) {
+  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/index.ts

@@ -7,6 +7,7 @@ import ConfirmDialog from './components/confirm';
 import FormInput from './components/input';
 import Livemode from './components/livemode';
 import PricingTable from './components/pricing-table';
+import SafeGuard from './components/safe-guard';
 import Status from './components/status';
 import Switch from './components/switch-button';
 import dayjs from './dayjs';
@@ -51,4 +52,5 @@ export {
   CustomerPaymentList,
   MiniInvoiceList,
   TxLink,
+  SafeGuard,
 };

package/src/util.ts

@@ -23,6 +23,10 @@ import { t } from './locales';
 
 export const PAYMENT_KIT_DID = 'z2qaCNvKMv5GjouKdcDWexv6WqtHbpNPQDnAk';
 
+export const isPaymentKitMounted = () => {
+  return (window.blocklet?.componentMountPoints || []).some((x: any) => x.did === PAYMENT_KIT_DID);
+};
+
 export const getPrefix = () => {
   const componentId = (window?.blocklet?.componentId || '').split('/').pop();
   if (componentId === PAYMENT_KIT_DID) {
@@ -36,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') {