@blocklet/payment-react 1.13.133 → 1.13.135

package/es/checkout/table.d.ts

@@ -1,3 +1,3 @@
 /// <reference types="react" />
 import { CheckoutProps } from '../types';
-export default function CheckoutTable({ id, onPaid, onError, mode, extraParams }: CheckoutProps): import("react").JSX.Element;
+export default function CheckoutTable({ id, onPaid, onError, mode, extraParams, goBack }: CheckoutProps): import("react").JSX.Element;

package/es/checkout/table.js

@@ -15,12 +15,13 @@ const fetchData = async (id) => {
   const { data } = await api.get(`/api/pricing-tables/${id}`);
   return data;
 };
-export default function CheckoutTable({ id, onPaid, onError, mode, extraParams }) {
+export default function CheckoutTable({ id, onPaid, onError, mode, extraParams, goBack }) {
   if (!id.startsWith("prctbl_")) {
     throw new Error("A valid pricing table id is required.");
   }
-  const { t } = useLocaleContext();
   const [sessionId, setSessionId] = useState("");
+  const hashSessionId = window.location.hash.slice(1);
+  const { t } = useLocaleContext();
   const { error, loading, data } = useRequest(() => fetchData(id));
   if (error) {
     return /* @__PURE__ */ jsx(Alert, { severity: "error", children: error.message });
@@ -49,6 +50,7 @@ export default function CheckoutTable({ id, onPaid, onError, mode, extraParams }
       if (mode === "standalone") {
         window.location.replace(res.data.url);
       } else {
+        window.location.hash = res.data.id;
         setSessionId(res.data.id);
       }
     }).catch((err) => {
@@ -56,10 +58,17 @@ export default function CheckoutTable({ id, onPaid, onError, mode, extraParams }
       Toast.error(err.message);
     });
   };
-  const goBack = () => {
-    setSessionId("");
-  };
-  if (!sessionId) {
+  const prop = {};
+  if (goBack) {
+    prop.goBack = () => {
+      window.location.hash = "";
+      if (typeof goBack !== "undefined") {
+        goBack();
+      }
+      setSessionId("");
+    };
+  }
+  if (!sessionId && !hashSessionId) {
     if (mode === "standalone") {
       return /* @__PURE__ */ jsxs(Stack, { direction: "column", alignItems: "center", spacing: 4, children: [
         /* @__PURE__ */ jsxs(Typography, { variant: "h4", color: "text.primary", fontWeight: 600, children: [
@@ -71,5 +80,5 @@ export default function CheckoutTable({ id, onPaid, onError, mode, extraParams }
     }
     return /* @__PURE__ */ jsx(PricingTable, { mode: "select", table: data, onSelect: handleSelect });
   }
-  return /* @__PURE__ */ jsx(Box, { children: /* @__PURE__ */ jsx(CheckoutForm, { id: sessionId, onPaid, onError, mode, goBack }) });
+  return /* @__PURE__ */ jsx(Box, { children: /* @__PURE__ */ jsx(CheckoutForm, { id: hashSessionId || sessionId, onPaid, onError, mode, ...prop }) });
 }

package/es/components/pricing-table.js

@@ -41,7 +41,7 @@ PricingTable.defaultProps = {
 };
 export default function PricingTable({ table, alignItems, interval, mode, onSelect }) {
   const { t, locale } = useLocaleContext();
-  const [state, setState] = useSetState({ interval, loading: "" });
+  const [state, setState] = useSetState({ interval, loading: "", loaded: false });
   const { recurring, grouped } = groupItemsByRecurring(table.items);
   useEffect(() => {
     if (table) {
@@ -55,7 +55,7 @@ export default function PricingTable({ table, alignItems, interval, mode, onSele
   }, [table]);
   const handleSelect = async (priceId) => {
     try {
-      setState({ loading: priceId });
+      setState({ loading: priceId, loaded: true });
       await onSelect(priceId);
     } catch (err) {
       console.error(err);
@@ -68,6 +68,17 @@ export default function PricingTable({ table, alignItems, interval, mode, onSele
         width: 90% !important;
       }
     }
+    @media (min-width: ${({ theme }) => theme.breakpoints.values.lg}px) {
+      .price-table-wrap:has(> div:nth-child(2)) {
+        width: 300px !important;
+      }
+      .price-table-wrap:has(> div:nth-child(2)) {
+        width: 600px !important;
+      }
+      .price-table-wrap:has(> div:nth-child(3)) {
+        width: 900px !important;
+      }
+    }
   `;
   return /* @__PURE__ */ jsx(Root, { children: /* @__PURE__ */ jsxs(
     Stack,
@@ -159,9 +170,10 @@ export default function PricingTable({ table, alignItems, interval, mode, onSele
                           variant: x.is_highlight || x.is_selected ? "contained" : "outlined",
                           color: x.is_highlight || x.is_selected ? "primary" : "info",
                           sx: { fontSize: "1.2rem" },
-                          loading: state.loading === x.price_id,
+                          loading: state.loading === x.price_id && !state.loaded,
                           disabled: x.is_disabled,
                           onClick: () => handleSelect(x.price_id),
+                          loadingPosition: "end",
                           children: action
                         }
                       ),

package/es/history/payment/list.js

@@ -3,10 +3,11 @@ import { useLocaleContext } from "@arcblock/ux/lib/Locale/context";
 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.js";
 import TxLink from "../../components/blockchain/tx.js";
 import Status from "../../components/status.js";
-import { formatToDate, getPaymentIntentStatusColor } from "../../util.js";
+import { formatToDate, getPaymentIntentStatusColor, getPrefix } from "../../util.js";
 const groupByDate = (items) => {
   const grouped = {};
   items.forEach((item) => {
@@ -63,6 +64,7 @@ export default function CustomerPaymentList({ customer_id }) {
           },
           flexWrap: "nowrap",
           children: [
+            /* @__PURE__ */ jsx(Box, { flex: 3, children: /* @__PURE__ */ jsx("a", { href: joinURL(window.location.origin, getPrefix(), `/customer/payment/${item.id}`), children: /* @__PURE__ */ jsx(Typography, { children: item.id }) }) }),
             /* @__PURE__ */ jsx(Box, { flex: 3, children: /* @__PURE__ */ jsx(Typography, { children: formatToDate(item.created_at) }) }),
             /* @__PURE__ */ jsx(Box, { flex: 2, children: /* @__PURE__ */ jsxs(Typography, { textAlign: "right", children: [
               fromUnitToToken(item.amount, item.paymentCurrency.decimal),

package/es/payment/index.js

@@ -177,14 +177,14 @@ export function PaymentInner({
     }
   };
   return /* @__PURE__ */ jsx(FormProvider, { ...methods, children: /* @__PURE__ */ jsxs(Root, { mode, children: [
-    mode !== "standalone" ? /* @__PURE__ */ jsx(
+    goBack && /* @__PURE__ */ jsx(
       ArrowBackOutlined,
       {
         sx: { mr: 0.5, color: "text.secondary", alignSelf: "flex-start", margin: "16px 0", cursor: "pointer" },
         onClick: goBack,
         fontSize: "medium"
       }
-    ) : null,
+    ),
     /* @__PURE__ */ jsxs(Stack, { className: "cko-container", sx: { gap: { sm: mode === "standalone" ? 0 : 8 } }, children: [
       /* @__PURE__ */ jsx(Fade, { in: true, children: /* @__PURE__ */ jsxs(Stack, { className: "cko-overview", direction: "column", children: [
         mode === "standalone" ? /* @__PURE__ */ jsx(PaymentHeader, { checkoutSession: state.checkoutSession }) : null,

package/lib/checkout/table.d.ts

@@ -1,3 +1,3 @@
 /// <reference types="react" />
 import { CheckoutProps } from '../types';
-export default function CheckoutTable({ id, onPaid, onError, mode, extraParams }: CheckoutProps): import("react").JSX.Element;
+export default function CheckoutTable({ id, onPaid, onError, mode, extraParams, goBack }: CheckoutProps): import("react").JSX.Element;

package/lib/checkout/table.js

@@ -29,15 +29,17 @@ function CheckoutTable({
   onPaid,
   onError,
   mode,
-  extraParams
+  extraParams,
+  goBack
 }) {
   if (!id.startsWith("prctbl_")) {
     throw new Error("A valid pricing table id is required.");
   }
+  const [sessionId, setSessionId] = (0, _react.useState)("");
+  const hashSessionId = window.location.hash.slice(1);
   const {
     t
   } = (0, _context.useLocaleContext)();
-  const [sessionId, setSessionId] = (0, _react.useState)("");
   const {
     error,
     loading,
@@ -79,6 +81,7 @@ function CheckoutTable({
       if (mode === "standalone") {
         window.location.replace(res.data.url);
       } else {
+        window.location.hash = res.data.id;
         setSessionId(res.data.id);
       }
     }).catch(err => {
@@ -86,10 +89,17 @@ function CheckoutTable({
       _Toast.default.error(err.message);
     });
   };
-  const goBack = () => {
-    setSessionId("");
-  };
-  if (!sessionId) {
+  const prop = {};
+  if (goBack) {
+    prop.goBack = () => {
+      window.location.hash = "";
+      if (typeof goBack !== "undefined") {
+        goBack();
+      }
+      setSessionId("");
+    };
+  }
+  if (!sessionId && !hashSessionId) {
     if (mode === "standalone") {
       return /* @__PURE__ */(0, _jsxRuntime.jsxs)(_material.Stack, {
         direction: "column",
@@ -114,11 +124,11 @@ function CheckoutTable({
   }
   return /* @__PURE__ */(0, _jsxRuntime.jsx)(_system.Box, {
     children: /* @__PURE__ */(0, _jsxRuntime.jsx)(_form.default, {
-      id: sessionId,
+      id: hashSessionId || sessionId,
       onPaid,
       onError,
       mode,
-      goBack
+      ...prop
     })
   });
 }

package/lib/components/pricing-table.js

@@ -50,7 +50,8 @@ function PricingTable({
   } = (0, _context.useLocaleContext)();
   const [state, setState] = (0, _ahooks.useSetState)({
     interval,
-    loading: ""
+    loading: "",
+    loaded: false
   });
   const {
     recurring,
@@ -71,7 +72,8 @@ function PricingTable({
   const handleSelect = async priceId => {
     try {
       setState({
-        loading: priceId
+        loading: priceId,
+        loaded: true
       });
       await onSelect(priceId);
     } catch (err) {
@@ -87,6 +89,19 @@ function PricingTable({
         width: 90% !important;
       }
     }
+    @media (min-width: ${({
+    theme
+  }) => theme.breakpoints.values.lg}px) {
+      .price-table-wrap:has(> div:nth-child(2)) {
+        width: 300px !important;
+      }
+      .price-table-wrap:has(> div:nth-child(2)) {
+        width: 600px !important;
+      }
+      .price-table-wrap:has(> div:nth-child(3)) {
+        width: 900px !important;
+      }
+    }
   `;
   return /* @__PURE__ */(0, _jsxRuntime.jsx)(Root, {
     children: /* @__PURE__ */(0, _jsxRuntime.jsxs)(_material.Stack, {
@@ -203,9 +218,10 @@ function PricingTable({
                 sx: {
                   fontSize: "1.2rem"
                 },
-                loading: state.loading === x.price_id,
+                loading: state.loading === x.price_id && !state.loaded,
                 disabled: x.is_disabled,
                 onClick: () => handleSelect(x.price_id),
+                loadingPosition: "end",
                 children: action
               }), x.product.features.length > 0 && /* @__PURE__ */(0, _jsxRuntime.jsxs)(_material.Box, {
                 children: [/* @__PURE__ */(0, _jsxRuntime.jsx)(_material.Typography, {

package/lib/history/payment/list.js

@@ -9,6 +9,7 @@ var _context = require("@arcblock/ux/lib/Locale/context");
 var _material = require("@mui/material");
 var _util = require("@ocap/util");
 var _ahooks = require("ahooks");
+var _ufo = require("ufo");
 var _api = _interopRequireDefault(require("../../api"));
 var _tx = _interopRequireDefault(require("../../components/blockchain/tx"));
 var _status = _interopRequireDefault(require("../../components/status"));
@@ -95,6 +96,14 @@ function CustomerPaymentList({
         },
         flexWrap: "nowrap",
         children: [/* @__PURE__ */(0, _jsxRuntime.jsx)(_material.Box, {
+          flex: 3,
+          children: /* @__PURE__ */(0, _jsxRuntime.jsx)("a", {
+            href: (0, _ufo.joinURL)(window.location.origin, (0, _util2.getPrefix)(), `/customer/payment/${item.id}`),
+            children: /* @__PURE__ */(0, _jsxRuntime.jsx)(_material.Typography, {
+              children: item.id
+            })
+          })
+        }), /* @__PURE__ */(0, _jsxRuntime.jsx)(_material.Box, {
           flex: 3,
           children: /* @__PURE__ */(0, _jsxRuntime.jsx)(_material.Typography, {
             children: (0, _util2.formatToDate)(item.created_at)

package/lib/payment/index.js

@@ -227,7 +227,7 @@ function PaymentInner({
     ...methods,
     children: /* @__PURE__ */(0, _jsxRuntime.jsxs)(Root, {
       mode,
-      children: [mode !== "standalone" ? /* @__PURE__ */(0, _jsxRuntime.jsx)(_iconsMaterial.ArrowBackOutlined, {
+      children: [goBack && /* @__PURE__ */(0, _jsxRuntime.jsx)(_iconsMaterial.ArrowBackOutlined, {
         sx: {
           mr: 0.5,
           color: "text.secondary",
@@ -237,7 +237,7 @@ function PaymentInner({
         },
         onClick: goBack,
         fontSize: "medium"
-      }) : null, /* @__PURE__ */(0, _jsxRuntime.jsxs)(_material.Stack, {
+      }), /* @__PURE__ */(0, _jsxRuntime.jsxs)(_material.Stack, {
         className: "cko-container",
         sx: {
           gap: {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@blocklet/payment-react",
-  "version": "1.13.133",
+  "version": "1.13.135",
   "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.133",
+    "@blocklet/payment-types": "1.13.135",
     "@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": "44fb37dff90e613692afb8b4afd982f27558811f"
+  "gitHead": "938ddc52dccee653caa0917a65212dd5df8cadd8"
 }

package/src/checkout/table.tsx

@@ -19,13 +19,15 @@ const fetchData = async (id: string): Promise<TPricingTableExpanded> => {
   return data;
 };
 
-export default function CheckoutTable({ id, onPaid, onError, mode, extraParams }: CheckoutProps) {
+export default function CheckoutTable({ id, onPaid, onError, mode, extraParams, goBack }: CheckoutProps) {
   if (!id.startsWith('prctbl_')) {
     throw new Error('A valid pricing table id is required.');
   }
 
-  const { t } = useLocaleContext();
   const [sessionId, setSessionId] = useState('');
+  const hashSessionId = window.location.hash.slice(1);
+
+  const { t } = useLocaleContext();
   const { error, loading, data } = useRequest(() => fetchData(id));
 
   if (error) {
@@ -57,6 +59,7 @@ export default function CheckoutTable({ id, onPaid, onError, mode, extraParams }
         if (mode === 'standalone') {
           window.location.replace(res.data.url);
         } else {
+          window.location.hash = res.data.id;
           setSessionId(res.data.id);
         }
       })
@@ -66,11 +69,19 @@ export default function CheckoutTable({ id, onPaid, onError, mode, extraParams }
       });
   };
 
-  const goBack = () => {
-    setSessionId('');
-  };
+  const prop: any = {};
+
+  if (goBack) {
+    prop.goBack = () => {
+      window.location.hash = '';
+      if (typeof goBack !== 'undefined') {
+        goBack();
+      }
+      setSessionId('');
+    };
+  }
 
-  if (!sessionId) {
+  if (!sessionId && !hashSessionId) {
     if (mode === 'standalone') {
       return (
         <Stack direction="column" alignItems="center" spacing={4}>
@@ -88,7 +99,7 @@ export default function CheckoutTable({ id, onPaid, onError, mode, extraParams }
 
   return (
     <Box>
-      <CheckoutForm id={sessionId} onPaid={onPaid} onError={onError} mode={mode} goBack={goBack} />
+      <CheckoutForm id={hashSessionId || sessionId} onPaid={onPaid} onError={onError} mode={mode} {...prop} />
     </Box>
   );
 }

package/src/components/pricing-table.tsx

@@ -59,7 +59,7 @@ PricingTable.defaultProps = {
 
 export default function PricingTable({ table, alignItems, interval, mode, onSelect }: Props) {
   const { t, locale } = useLocaleContext();
-  const [state, setState] = useSetState({ interval, loading: '' });
+  const [state, setState] = useSetState({ interval, loading: '', loaded: false });
   const { recurring, grouped } = groupItemsByRecurring(table.items);
 
   useEffect(() => {
@@ -76,7 +76,7 @@ export default function PricingTable({ table, alignItems, interval, mode, onSele
 
   const handleSelect = async (priceId: string) => {
     try {
-      setState({ loading: priceId });
+      setState({ loading: priceId, loaded: true });
       await onSelect(priceId);
     } catch (err) {
       console.error(err);
@@ -90,6 +90,17 @@ export default function PricingTable({ table, alignItems, interval, mode, onSele
         width: 90% !important;
       }
     }
+    @media (min-width: ${({ theme }) => theme.breakpoints.values.lg}px) {
+      .price-table-wrap:has(> div:nth-child(2)) {
+        width: 300px !important;
+      }
+      .price-table-wrap:has(> div:nth-child(2)) {
+        width: 600px !important;
+      }
+      .price-table-wrap:has(> div:nth-child(3)) {
+        width: 900px !important;
+      }
+    }
   `;
   return (
     <Root>
@@ -187,9 +198,10 @@ export default function PricingTable({ table, alignItems, interval, mode, onSele
                       variant={x.is_highlight || x.is_selected ? 'contained' : 'outlined'}
                       color={x.is_highlight || x.is_selected ? 'primary' : 'info'}
                       sx={{ fontSize: '1.2rem' }}
-                      loading={state.loading === x.price_id}
+                      loading={state.loading === x.price_id && !state.loaded}
                       disabled={x.is_disabled}
-                      onClick={() => handleSelect(x.price_id)}>
+                      onClick={() => handleSelect(x.price_id)}
+                      loadingPosition="end">
                       {action}
                     </LoadingButton>
                     {x.product.features.length > 0 && (

package/src/history/payment/list.tsx

@@ -4,11 +4,12 @@ import type { Paginated, TPaymentIntentExpanded } 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 TxLink from '../../components/blockchain/tx';
 import Status from '../../components/status';
-import { formatToDate, getPaymentIntentStatusColor } from '../../util';
+import { formatToDate, getPaymentIntentStatusColor, getPrefix } from '../../util';
 
 const groupByDate = (items: TPaymentIntentExpanded[]) => {
   const grouped: { [key: string]: TPaymentIntentExpanded[] } = {};
@@ -80,6 +81,11 @@ export default function CustomerPaymentList({ customer_id }: Props) {
                 md: 3,
               }}
               flexWrap="nowrap">
+              <Box flex={3}>
+                <a href={joinURL(window.location.origin, getPrefix(), `/customer/payment/${item.id}`)}>
+                  <Typography>{item.id}</Typography>
+                </a>
+              </Box>
               <Box flex={3}>
                 <Typography>{formatToDate(item.created_at)}</Typography>
               </Box>

package/src/payment/index.tsx

@@ -216,13 +216,13 @@ export function PaymentInner({
   return (
     <FormProvider {...methods}>
       <Root mode={mode}>
-        {mode !== 'standalone' ? (
+        {goBack && (
           <ArrowBackOutlined
             sx={{ mr: 0.5, color: 'text.secondary', alignSelf: 'flex-start', margin: '16px 0', cursor: 'pointer' }}
             onClick={goBack}
             fontSize="medium"
           />
-        ) : null}
+        )}
         <Stack className="cko-container" sx={{ gap: { sm: mode === 'standalone' ? 0 : 8 } }}>
           <Fade in>
             <Stack className="cko-overview" direction="column">