@blocklet/payment-react 1.13.131 → 1.13.132

package/es/history/payment/list.js

@@ -70,7 +70,7 @@ export default function CustomerPaymentList({ customer_id }) {
               item.paymentCurrency.symbol
             ] }) }),
             /* @__PURE__ */ jsx(Box, { flex: 3, children: /* @__PURE__ */ jsx(Status, { label: item.status, color: getPaymentIntentStatusColor(item.status) }) }),
-            /* @__PURE__ */ jsx(Box, { flex: 3, children: /* @__PURE__ */ jsx(Typography, { children: item.description || item.id }) }),
+            /* @__PURE__ */ jsx(Box, { flex: 3, children: /* @__PURE__ */ jsx(Typography, { children: item.description || "-" }) }),
             /* @__PURE__ */ jsx(Box, { flex: 3, sx: { minWidth: "220px" }, children: item.payment_details?.arcblock?.tx_hash && /* @__PURE__ */ jsx(
               TxLink,
               {

package/es/payment/index.js

@@ -250,7 +250,7 @@ export const Root = styled(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;
@@ -259,9 +259,10 @@ export const Root = styled(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;
@@ -278,7 +279,7 @@ export const Root = styled(Box)`
   }
 
   .cko-payment {
-    width: 400px;
+    width: ${(props) => props.mode.endsWith("-minimal") ? "100%" : "400px"};
     .MuiInputBase-root {
       border-radius: 0;
     }
@@ -367,6 +368,7 @@ export const Root = styled(Box)`
     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/es/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/es/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/es/util.js

@@ -201,6 +201,18 @@ export function getPaymentIntentStatusColor(status) {
       return "default";
   }
 }
+export function getRefundStatusColor(status) {
+  switch (status) {
+    case "succeeded":
+      return "success";
+    case "requires_action":
+      return "warning";
+    case "canceled":
+    case "pending":
+    default:
+      return "default";
+  }
+}
 export function getInvoiceStatusColor(status) {
   switch (status) {
     case "paid":

package/lib/history/payment/list.js

@@ -114,7 +114,7 @@ function CustomerPaymentList({
         }), /* @__PURE__ */(0, _jsxRuntime.jsx)(_material.Box, {
           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,

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":

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@blocklet/payment-react",
-  "version": "1.13.131",
+  "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.131",
+    "@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": "a1a5072b1a0c564cce5ba4aee5fc4801cfef4a46"
+  "gitHead": "d1b6e7bace2743798d22c33f245c32a4c5ba3200"
 }

package/src/history/payment/list.tsx

@@ -93,7 +93,7 @@ export default function CustomerPaymentList({ customer_id }: Props) {
                 <Status label={item.status} color={getPaymentIntentStatusColor(item.status)} />
               </Box>
               <Box flex={3}>
-                <Typography>{item.description || item.id}</Typography>
+                <Typography>{item.description || '-'}</Typography>
               </Box>
               <Box flex={3} sx={{ minWidth: '220px' }}>
                 {(item as any).payment_details?.arcblock?.tx_hash && (

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':