@blocklet/payment-react 1.13.130 → 1.13.132

package/lib/history/payment/list.js

@@ -10,6 +10,7 @@ var _material = require("@mui/material");
 var _util = require("@ocap/util");
 var _ahooks = require("ahooks");
 var _api = _interopRequireDefault(require("../../api"));
+var _tx = _interopRequireDefault(require("../../components/blockchain/tx"));
 var _status = _interopRequireDefault(require("../../components/status"));
 var _util2 = require("../../util");
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
@@ -111,9 +112,19 @@ function CustomerPaymentList({
             color: (0, _util2.getPaymentIntentStatusColor)(item.status)
           })
         }), /* @__PURE__ */(0, _jsxRuntime.jsx)(_material.Box, {
-          flex: 4,
+          flex: 3,
           children: /* @__PURE__ */(0, _jsxRuntime.jsx)(_material.Typography, {
-            children: item.description || item.id
+            children: item.description || "-"
+          })
+        }), /* @__PURE__ */(0, _jsxRuntime.jsx)(_material.Box, {
+          flex: 3,
+          sx: {
+            minWidth: "220px"
+          },
+          children: item.payment_details?.arcblock?.tx_hash && /* @__PURE__ */(0, _jsxRuntime.jsx)(_tx.default, {
+            details: item.payment_details,
+            method: item.paymentMethod,
+            mode: "customer"
           })
         })]
       }, item.id))]

package/lib/index.d.ts

@@ -1,6 +1,7 @@
 import api from './api';
 import CheckoutForm from './checkout/form';
 import CheckoutTable from './checkout/table';
+import TxLink from './components/blockchain/tx';
 import ConfirmDialog from './components/confirm';
 import FormInput from './components/input';
 import Livemode from './components/livemode';
@@ -18,4 +19,4 @@ import ProductSkeleton from './payment/product-skeleton';
 export * from './util';
 export * from './contexts/payment';
 export { translations, createTranslator } from './locales';
-export { api, dayjs, FormInput, PhoneInput, Status, Livemode, Switch, ConfirmDialog, CheckoutForm, CheckoutTable, Payment, PricingTable, ProductSkeleton, Amount, CustomerInvoiceList, CustomerPaymentList, MiniInvoiceList, };
+export { api, dayjs, FormInput, PhoneInput, Status, Livemode, Switch, ConfirmDialog, CheckoutForm, CheckoutTable, Payment, PricingTable, ProductSkeleton, Amount, CustomerInvoiceList, CustomerPaymentList, MiniInvoiceList, TxLink, };

package/lib/index.js

@@ -7,6 +7,7 @@ var _exportNames = {
   api: true,
   CheckoutForm: true,
   CheckoutTable: true,
+  TxLink: true,
   ConfirmDialog: true,
   FormInput: true,
   Livemode: true,
@@ -114,6 +115,12 @@ Object.defineProperty(exports, "Switch", {
     return _switchButton.default;
   }
 });
+Object.defineProperty(exports, "TxLink", {
+  enumerable: true,
+  get: function () {
+    return _tx.default;
+  }
+});
 Object.defineProperty(exports, "api", {
   enumerable: true,
   get: function () {
@@ -141,6 +148,7 @@ Object.defineProperty(exports, "translations", {
 var _api = _interopRequireDefault(require("./api"));
 var _form = _interopRequireDefault(require("./checkout/form"));
 var _table = _interopRequireDefault(require("./checkout/table"));
+var _tx = _interopRequireDefault(require("./components/blockchain/tx"));
 var _confirm = _interopRequireDefault(require("./components/confirm"));
 var _input = _interopRequireDefault(require("./components/input"));
 var _livemode = _interopRequireDefault(require("./components/livemode"));

package/lib/locales/en.js

@@ -209,17 +209,17 @@ module.exports = (0, _flat.default)({
         pay: "Pay this invoice",
         paySuccess: "You have successfully paid the invoice",
         payError: "Failed to paid the invoice",
-        empty: "Seems you do not have any invoice here"
+        empty: "There are no invoices here"
       },
       payment: {
-        empty: "Seems you do not have any payment here"
+        empty: "There are no payments here"
       },
       subscriptions: {
         plan: "Plan",
         nextInvoice: "Next Invoice",
         title: "Manage subscriptions",
         current: "Current subscription",
-        empty: "Seems you do not have any subscriptions here"
+        empty: "There are no subscriptions here"
       }
     }
   }

package/lib/locales/zh.js

@@ -209,17 +209,17 @@ module.exports = (0, _flat.default)({
         pay: "\u652F\u4ED8\u6B64\u53D1\u7968",
         paySuccess: "\u652F\u4ED8\u6210\u529F",
         payError: "\u652F\u4ED8\u5931\u8D25",
-        empty: "\u4F60\u6CA1\u6709\u4EFB\u4F55\u53D1\u7968"
+        empty: "\u6CA1\u6709\u4EFB\u4F55\u53D1\u7968"
       },
       payment: {
-        empty: "\u4F60\u6CA1\u6709\u4EFB\u4F55\u652F\u4ED8"
+        empty: "\u6CA1\u6709\u4EFB\u4F55\u652F\u4ED8"
       },
       subscriptions: {
         plan: "\u8BA2\u9605",
         nextInvoice: "\u4E0B\u4E00\u5F20\u53D1\u7968",
         title: "\u8BA2\u9605\u7BA1\u7406",
         current: "\u5F53\u524D\u8BA2\u9605",
-        empty: "\u4F60\u8FD8\u6CA1\u6709\u4EFB\u4F55\u8BA2\u9605"
+        empty: "\u6CA1\u6709\u4EFB\u4F55\u8BA2\u9605"
       }
     }
   }

package/lib/payment/index.js

@@ -308,7 +308,7 @@ const Root = exports.Root = (0, _system.styled)(_material.Box)`
 
   .cko-container {
     width: 100%;
-    max-width: 1000px;
+    max-width: ${props => props.mode.endsWith("-minimal") ? "400px" : "1000px"};
     display: flex;
     flex-direction: row;
     justify-content: space-between;
@@ -317,9 +317,10 @@ const Root = exports.Root = (0, _system.styled)(_material.Box)`
   }
 
   .cko-overview {
-    width: 400px;
+    width: ${props => props.mode.endsWith("-minimal") ? "100%" : "400px"};
     min-height: ${props => props.mode === "standalone" ? "540px" : "auto"};
     position: relative;
+    display: ${props => props.mode.endsWith("-minimal") ? "none" : "block"};
   }
   .cko-header {
     left: 0;
@@ -336,7 +337,7 @@ const Root = exports.Root = (0, _system.styled)(_material.Box)`
   }
 
   .cko-payment {
-    width: 400px;
+    width: ${props => props.mode.endsWith("-minimal") ? "100%" : "400px"};
     .MuiInputBase-root {
       border-radius: 0;
     }
@@ -425,6 +426,7 @@ const Root = exports.Root = (0, _system.styled)(_material.Box)`
     bottom: 0;
     left: 12px;
     margin: 12px 0;
+    display: ${props => props.mode.endsWith("-minimal") ? "none" : "block"};
   }
 
   @media (max-width: ${({

package/lib/types/index.d.ts

@@ -11,7 +11,7 @@ export type CheckoutContext = {
 export type CheckoutProps = Partial<CheckoutCallbacks> & {
     id: string;
     extraParams?: Record<string, any>;
-    mode?: LiteralUnion<'standalone' | 'inline' | 'popup', string>;
+    mode?: LiteralUnion<'standalone' | 'inline' | 'popup' | 'inline-minimal' | 'popup-minimal', string>;
 };
 export type CheckoutCallbacks = {
     onPaid: (res: CheckoutContext) => void;

package/lib/util.d.ts

@@ -22,6 +22,7 @@ export declare function formatLineItemPricing(item: TLineItemExpanded, currency:
 };
 export declare function getSubscriptionStatusColor(status: string): "success" | "primary" | "warning" | "error" | "default";
 export declare function getPaymentIntentStatusColor(status: string): "success" | "warning" | "default";
+export declare function getRefundStatusColor(status: string): "success" | "warning" | "default";
 export declare function getInvoiceStatusColor(status: string): "success" | "warning" | "default" | "secondary";
 export declare function getWebhookStatusColor(status: string): "success" | "default";
 export declare function getCheckoutAmount(items: TLineItemExpanded[], currency: TPaymentCurrency, includeFreeTrial?: boolean, upsell?: boolean): {

package/lib/util.js

@@ -24,6 +24,7 @@ exports.getPrefix = void 0;
 exports.getPriceCurrencyOptions = getPriceCurrencyOptions;
 exports.getPriceUintAmountByCurrency = getPriceUintAmountByCurrency;
 exports.getRecurringPeriod = getRecurringPeriod;
+exports.getRefundStatusColor = getRefundStatusColor;
 exports.getStatementDescriptor = getStatementDescriptor;
 exports.getSubscriptionAction = void 0;
 exports.getSubscriptionStatusColor = getSubscriptionStatusColor;
@@ -257,6 +258,18 @@ function getPaymentIntentStatusColor(status) {
       return "default";
   }
 }
+function getRefundStatusColor(status) {
+  switch (status) {
+    case "succeeded":
+      return "success";
+    case "requires_action":
+      return "warning";
+    case "canceled":
+    case "pending":
+    default:
+      return "default";
+  }
+}
 function getInvoiceStatusColor(status) {
   switch (status) {
     case "paid":
@@ -282,9 +295,12 @@ function getWebhookStatusColor(status) {
 }
 function getCheckoutAmount(items, currency, includeFreeTrial = false, upsell = true) {
   let renew = new _util.BN(0);
-  const total = items.reduce((acc, x) => {
+  const total = items.filter(x => {
+    const price = upsell ? x.upsell_price || x.price : x.price;
+    return price != null;
+  }).reduce((acc, x) => {
     const price = upsell ? x.upsell_price || x.price : x.price;
-    if (price.type === "recurring") {
+    if (price?.type === "recurring") {
       renew = renew.add(new _util.BN(getPriceUintAmountByCurrency(price, currency)).mul(new _util.BN(x.quantity)));
       if (includeFreeTrial) {
         return acc;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@blocklet/payment-react",
-  "version": "1.13.130",
+  "version": "1.13.132",
   "description": "Reusable react components for payment kit v2",
   "keywords": [
     "react",
@@ -89,7 +89,7 @@
     "@babel/core": "^7.19.3",
     "@babel/preset-env": "^7.19.3",
     "@babel/preset-react": "^7.18.6",
-    "@blocklet/payment-types": "1.13.130",
+    "@blocklet/payment-types": "1.13.132",
     "@storybook/addon-essentials": "^7.6.10",
     "@storybook/addon-interactions": "^7.6.10",
     "@storybook/addon-links": "^7.6.10",
@@ -118,5 +118,5 @@
     "vite-plugin-babel": "^1.2.0",
     "vite-plugin-node-polyfills": "^0.19.0"
   },
-  "gitHead": "95aaa56f16ce303e514aa7dde9e542628d7acd2c"
+  "gitHead": "d1b6e7bace2743798d22c33f245c32a4c5ba3200"
 }

package/src/components/blockchain/tx.tsx

@@ -0,0 +1,77 @@
+import type { PaymentDetails, TPaymentMethod } from '@blocklet/payment-types';
+import { OpenInNewOutlined } from '@mui/icons-material';
+import { Link, Stack, Typography } from '@mui/material';
+import { joinURL } from 'ufo';
+
+const getTxLink = (method: TPaymentMethod, details: PaymentDetails) => {
+  if (method.type === 'arcblock' && details.arcblock?.tx_hash) {
+    return {
+      link: joinURL(method.settings.arcblock?.explorer_host as string, '/txs', details.arcblock?.tx_hash as string),
+      text: details.arcblock?.tx_hash as string,
+    };
+  }
+  if (method.type === 'bitcoin' && details.bitcoin?.tx_hash) {
+    return {
+      link: joinURL(method.settings.bitcoin?.explorer_host as string, '/tx', details.bitcoin?.tx_hash as string),
+      text: details.bitcoin?.tx_hash as string,
+    };
+  }
+  if (method.type === 'ethereum' && details.ethereum?.tx_hash) {
+    return {
+      link: joinURL(method.settings.ethereum?.explorer_host as string, '/tx', details.ethereum?.tx_hash as string),
+      text: details.ethereum?.tx_hash as string,
+    };
+  }
+  if (method.type === 'stripe') {
+    const dashboard = method.livemode ? 'https://dashboard.stripe.com' : 'https://dashboard.stripe.com/test';
+    return {
+      link: joinURL(
+        method.settings.stripe?.dashboard || dashboard,
+        'payments',
+        details.stripe?.payment_intent_id as string
+      ),
+      text: details.stripe?.payment_intent_id as string,
+    };
+  }
+
+  return { text: 'N/A', link: '' };
+};
+
+TxLink.defaultProps = {
+  mode: 'dashboard',
+};
+
+export default function TxLink(props: {
+  details: PaymentDetails;
+  method: TPaymentMethod;
+  mode?: 'customer' | 'dashboard';
+}) {
+  if (!props.details || (props.mode === 'customer' && props.method.type === 'stripe')) {
+    return (
+      <Typography component="small" color="text.secondary">
+        None
+      </Typography>
+    );
+  }
+
+  const { text, link } = getTxLink(props.method, props.details);
+
+  if (link) {
+    return (
+      <Link href={link} target="_blank" rel="noopener noreferrer">
+        <Stack component="span" direction="row" alignItems="center" spacing={1}>
+          <Typography component="span" color="primary">
+            {text.length > 40 ? [text.slice(0, 8), text.slice(-8)].join('...') : text}
+          </Typography>
+          <OpenInNewOutlined fontSize="small" />
+        </Stack>
+      </Link>
+    );
+  }
+
+  return (
+    <Typography component="small" color="text.secondary">
+      None
+    </Typography>
+  );
+}

package/src/history/invoice/list.tsx

@@ -4,10 +4,11 @@ import type { Paginated, TInvoiceExpanded } from '@blocklet/payment-types';
 import { Box, Button, CircularProgress, Stack, Typography } from '@mui/material';
 import { fromUnitToToken } from '@ocap/util';
 import { useInfiniteScroll } from 'ahooks';
+import { joinURL } from 'ufo';
 
 import api from '../../api';
 import Status from '../../components/status';
-import { formatToDate, getInvoiceStatusColor } from '../../util';
+import { formatToDate, getInvoiceStatusColor, getPrefix } from '../../util';
 
 const groupByDate = (items: TInvoiceExpanded[]) => {
   const grouped: { [key: string]: TInvoiceExpanded[] } = {};
@@ -83,7 +84,7 @@ export default function CustomerInvoiceList({ customer_id, subscription_id }: Pr
               }}
               flexWrap="nowrap">
               <Box flex={3}>
-                <a href={`/customer/invoice/${invoice.id}`}>
+                <a href={joinURL(window.location.origin, getPrefix(), `/customer/invoice/${invoice.id}`)}>
                   <Typography component="span">{invoice.number}</Typography>
                 </a>
               </Box>

package/src/history/mini-invoice/list.tsx

@@ -4,6 +4,7 @@ import type { Paginated, TInvoiceExpanded, TSubscriptionExpanded } from '@blockl
 import { Box, Button, CircularProgress, Divider, List, ListItem, ListSubheader, Typography } from '@mui/material';
 import { fromUnitToToken } from '@ocap/util';
 import { useRequest } from 'ahooks';
+import { joinURL } from 'ufo';
 
 import api from '../../api';
 import Status from '../../components/status';
@@ -12,6 +13,7 @@ import {
   formatTime,
   formatToDate,
   getInvoiceStatusColor,
+  getPrefix,
   getSubscriptionStatusColor,
 } from '../../util';
 
@@ -37,7 +39,7 @@ export default function MiniInvoiceList() {
     fetchInvoiceData({ page: 1, pageSize: 10, status: 'open,paid,uncollectible', subscription_id: subscriptionId })
   );
 
-  if (!data || !subscription) {
+  if (!subscription || !data) {
     return (
       <Position>
         <CircularProgress />
@@ -45,13 +47,7 @@ export default function MiniInvoiceList() {
     );
   }
 
-  if (data && data.list.length === 0) {
-    return (
-      <Position>
-        <Typography color="text.secondary">{t('payment.customer.invoice.empty')}</Typography>
-      </Position>
-    );
-  }
+  const invoices = data.list || [];
 
   const infoList = [
     {
@@ -66,8 +62,10 @@ export default function MiniInvoiceList() {
       name: t('common.status'),
       value: <Status label={subscription.status} color={getSubscriptionStatusColor(subscription.status)} />,
     },
+  ];
 
-    {
+  if (subscription.status === 'active' || subscription.status === 'trailing') {
+    infoList.push({
       name: t('payment.customer.subscriptions.nextInvoice'),
       value: (
         <Typography
@@ -79,13 +77,14 @@ export default function MiniInvoiceList() {
           {formatTime(subscription.current_period_end * 1000)}
         </Typography>
       ),
-    },
-  ];
+    });
+  }
 
   return (
     <Position>
       <Typography title={t('payment.checkout.subscription')} />
       <Box
+        className="mini-invoice-wrap"
         sx={{
           display: 'flex',
           flexDirection: 'column',
@@ -111,34 +110,40 @@ export default function MiniInvoiceList() {
           </List>
         </Box>
         <Divider />
-        <Box sx={{ marginTop: '12px' }}>
-          <List
-            sx={{ overflow: 'auto', maxHeight: { xs: '240px', md: '360px', padding: 0 } }}
-            className="mini-invoice-list">
+        <Box sx={{ marginTop: '12px', flex: 1 }}>
+          <List sx={{ overflow: 'auto' }} className="mini-invoice-list">
             <ListSubheader disableGutters sx={{ padding: 0 }}>
               <Typography component="h2" variant="h6" fontSize="16px">
                 {t('payment.customer.invoices')}
               </Typography>
             </ListSubheader>
-            {(data.list || []).map((item: any) => {
-              return (
-                <ListItem key={item.id} disableGutters sx={{ display: 'flex', justifyContent: 'space-between' }}>
-                  <Typography component="span" sx={{ flex: 3 }}>
-                    {formatToDate(item.created_at)}
-                  </Typography>
-                  <Typography component="span" sx={{ flex: 1 }}>
-                    {fromUnitToToken(item.total, item.paymentCurrency.decimal)}&nbsp;
-                    {item.paymentCurrency.symbol}
-                  </Typography>
-                  <Typography component="span" sx={{ flex: 2, textAlign: 'right' }}>
-                    <Status label={item.status} color={getInvoiceStatusColor(item.status)} sx={{ flex: 2 }} />
-                  </Typography>
-                </ListItem>
-              );
-            })}
+            {(invoices as any).length === 0 ? (
+              <Typography color="text.secondary">{t('payment.customer.invoice.empty')}</Typography>
+            ) : (
+              (invoices as any).map((item: any) => {
+                return (
+                  <ListItem key={item.id} disableGutters sx={{ display: 'flex', justifyContent: 'space-between' }}>
+                    <Typography component="span" sx={{ flex: 3 }}>
+                      {formatToDate(item.created_at)}
+                    </Typography>
+                    <Typography component="span" sx={{ flex: 1, textAlign: 'right' }}>
+                      {fromUnitToToken(item.total, item.paymentCurrency.decimal)}&nbsp;
+                      {item.paymentCurrency.symbol}
+                    </Typography>
+                    <Typography component="span" sx={{ flex: 2, textAlign: 'right' }}>
+                      <Status label={item.status} color={getInvoiceStatusColor(item.status)} sx={{ flex: 2 }} />
+                    </Typography>
+                  </ListItem>
+                );
+              })
+            )}
           </List>
         </Box>
-        <Button target="_top" variant="contained" sx={{ marginTop: '10px 0', width: '100%' }} href="">
+        <Button
+          target="_blank"
+          variant="contained"
+          sx={{ marginTop: '10px 0', width: '100%', color: '#fff!important' }}
+          href={joinURL(window.location.origin, getPrefix(), `/customer/subscription/${subscription.id}`)}>
           {t('payment.customer.subscriptions.title')}
         </Button>
       </Box>
@@ -151,7 +156,6 @@ function Position({ children }: any) {
     <Box
       className="mini-invoice-box" // 预留 class 用于设置定位
       sx={{
-        justifyContent: 'center',
         padding: '8px',
         width: '100%',
         maxWidth: '500px',

package/src/history/payment/list.tsx

@@ -6,6 +6,7 @@ import { fromUnitToToken } from '@ocap/util';
 import { useInfiniteScroll } from 'ahooks';
 
 import api from '../../api';
+import TxLink from '../../components/blockchain/tx';
 import Status from '../../components/status';
 import { formatToDate, getPaymentIntentStatusColor } from '../../util';
 
@@ -91,8 +92,17 @@ export default function CustomerPaymentList({ customer_id }: Props) {
               <Box flex={3}>
                 <Status label={item.status} color={getPaymentIntentStatusColor(item.status)} />
               </Box>
-              <Box flex={4}>
-                <Typography>{item.description || item.id}</Typography>
+              <Box flex={3}>
+                <Typography>{item.description || '-'}</Typography>
+              </Box>
+              <Box flex={3} sx={{ minWidth: '220px' }}>
+                {(item as any).payment_details?.arcblock?.tx_hash && (
+                  <TxLink
+                    details={(item as any).payment_details}
+                    method={(item as any).paymentMethod}
+                    mode="customer"
+                  />
+                )}
               </Box>
             </Stack>
           ))}

package/src/index.ts

@@ -1,6 +1,7 @@
 import api from './api';
 import CheckoutForm from './checkout/form';
 import CheckoutTable from './checkout/table';
+import TxLink from './components/blockchain/tx';
 import ConfirmDialog from './components/confirm';
 import FormInput from './components/input';
 import Livemode from './components/livemode';
@@ -39,4 +40,5 @@ export {
   CustomerInvoiceList,
   CustomerPaymentList,
   MiniInvoiceList,
+  TxLink,
 };

package/src/locales/en.tsx

@@ -207,17 +207,17 @@ export default flat({
         pay: 'Pay this invoice',
         paySuccess: 'You have successfully paid the invoice',
         payError: 'Failed to paid the invoice',
-        empty: 'Seems you do not have any invoice here',
+        empty: 'There are no invoices here',
       },
       payment: {
-        empty: 'Seems you do not have any payment here',
+        empty: 'There are no payments here',
       },
       subscriptions: {
         plan: 'Plan',
         nextInvoice: 'Next Invoice',
         title: 'Manage subscriptions',
         current: 'Current subscription',
-        empty: 'Seems you do not have any subscriptions here',
+        empty: 'There are no subscriptions here',
       },
     },
   },

package/src/locales/zh.tsx

@@ -203,17 +203,17 @@ export default flat({
         pay: '支付此发票',
         paySuccess: '支付成功',
         payError: '支付失败',
-        empty: '你没有任何发票',
+        empty: '没有任何发票',
       },
       payment: {
-        empty: '你没有任何支付',
+        empty: '没有任何支付',
       },
       subscriptions: {
         plan: '订阅',
         nextInvoice: '下一张发票',
         title: '订阅管理',
         current: '当前订阅',
-        empty: '你还没有任何订阅',
+        empty: '没有任何订阅',
       },
     },
   },

package/src/payment/index.tsx

@@ -294,7 +294,7 @@ export const Root = styled(Box)<{ mode: LiteralUnion<'standalone' | 'inline' | '
 
   .cko-container {
     width: 100%;
-    max-width: 1000px;
+    max-width: ${(props) => (props.mode.endsWith('-minimal') ? '400px' : '1000px')};
     display: flex;
     flex-direction: row;
     justify-content: space-between;
@@ -303,9 +303,10 @@ export const Root = styled(Box)<{ mode: LiteralUnion<'standalone' | 'inline' | '
   }
 
   .cko-overview {
-    width: 400px;
+    width: ${(props) => (props.mode.endsWith('-minimal') ? '100%' : '400px')};
     min-height: ${(props) => (props.mode === 'standalone' ? '540px' : 'auto')};
     position: relative;
+    display: ${(props) => (props.mode.endsWith('-minimal') ? 'none' : 'block')};
   }
   .cko-header {
     left: 0;
@@ -322,7 +323,7 @@ export const Root = styled(Box)<{ mode: LiteralUnion<'standalone' | 'inline' | '
   }
 
   .cko-payment {
-    width: 400px;
+    width: ${(props) => (props.mode.endsWith('-minimal') ? '100%' : '400px')};
     .MuiInputBase-root {
       border-radius: 0;
     }
@@ -411,6 +412,7 @@ export const Root = styled(Box)<{ mode: LiteralUnion<'standalone' | 'inline' | '
     bottom: 0;
     left: 12px;
     margin: 12px 0;
+    display: ${(props) => (props.mode.endsWith('-minimal') ? 'none' : 'block')};
   }
 
   @media (max-width: ${({ theme }) => theme.breakpoints.values.md}px) {

package/src/types/index.ts

@@ -20,7 +20,7 @@ export type CheckoutContext = {
 export type CheckoutProps = Partial<CheckoutCallbacks> & {
   id: string;
   extraParams?: Record<string, any>;
-  mode?: LiteralUnion<'standalone' | 'inline' | 'popup', string>;
+  mode?: LiteralUnion<'standalone' | 'inline' | 'popup' | 'inline-minimal' | 'popup-minimal', string>;
 };
 
 export type CheckoutCallbacks = {

package/src/util.ts

@@ -292,6 +292,19 @@ export function getPaymentIntentStatusColor(status: string) {
   }
 }
 
+export function getRefundStatusColor(status: string) {
+  switch (status) {
+    case 'succeeded':
+      return 'success';
+    case 'requires_action':
+      return 'warning';
+    case 'canceled':
+    case 'pending':
+    default:
+      return 'default';
+  }
+}
+
 export function getInvoiceStatusColor(status: string) {
   switch (status) {
     case 'paid':
@@ -324,11 +337,14 @@ export function getCheckoutAmount(
   upsell = true
 ) {
   let renew = new BN(0);
-
   const total = items
+    .filter((x) => {
+      const price = upsell ? x.upsell_price || x.price : x.price;
+      return price != null;
+    })
     .reduce((acc, x) => {
       const price = upsell ? x.upsell_price || x.price : x.price;
-      if (price.type === 'recurring') {
+      if (price?.type === 'recurring') {
         renew = renew.add(new BN(getPriceUintAmountByCurrency(price, currency)).mul(new BN(x.quantity)));
 
         if (includeFreeTrial) {