@blocklet/payment-react 1.13.144 → 1.13.146

package/es/checkout/form.js

@@ -1,11 +1,9 @@
 import { jsx } from "react/jsx-runtime";
 import { useRequest, useSetState } from "ahooks";
 import noop from "lodash/noop";
-import { useEffect } from "react";
-import { joinURL } from "ufo";
 import api from "../api.js";
 import Payment from "../payment/index.js";
-import { getPrefix, mergeExtraParams } from "../util.js";
+import { mergeExtraParams } from "../util.js";
 const startFromPaymentLink = async (id, params) => {
   const { data } = await api.post(`/api/checkout-sessions/start/${id}?${mergeExtraParams(params)}`);
   return data;
@@ -23,11 +21,6 @@ export default function CheckoutForm({ id, onPaid, onError, mode, goBack, extraP
   const { error: apiError, data } = useRequest(
     () => type === "paymentLink" ? startFromPaymentLink(id, extraParams) : fetchCheckoutSession(id)
   );
-  useEffect(() => {
-    if (type === "paymentLink" && mode === "standalone" && data) {
-      window.location.replace(joinURL(getPrefix(), `/checkout/pay/${data.checkoutSession.id}`));
-    }
-  }, [type, mode, data]);
   const handlePaid = () => {
     setState({ completed: true });
     onPaid?.(data);

package/es/components/pricing-table.js

@@ -18,7 +18,7 @@ import {
 } from "@mui/material";
 import { styled } from "@mui/system";
 import { useSetState } from "ahooks";
-import { useEffect } from "react";
+import { useEffect, useState } from "react";
 import Amount from "../payment/amount.js";
 import { formatError, formatPriceAmount, formatRecurring } from "../util.js";
 const groupItemsByRecurring = (items) => {
@@ -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: "", loaded: false });
+  const [state, setState] = useSetState({ interval });
   const { recurring, grouped } = groupItemsByRecurring(table.items);
   useEffect(() => {
     if (table) {
@@ -53,15 +53,6 @@ export default function PricingTable({ table, alignItems, interval, mode, onSele
       }
     }
   }, [table]);
-  const handleSelect = async (priceId) => {
-    try {
-      setState({ loading: priceId, loaded: true });
-      await onSelect(priceId);
-    } catch (err) {
-      console.error(err);
-      Toast.error(formatError(err));
-    }
-  };
   const Root = styled(Box)`
     @media (max-width: ${({ theme }) => theme.breakpoints.values.sm}px) {
       .price-table-item {
@@ -69,7 +60,7 @@ export default function PricingTable({ table, alignItems, interval, mode, onSele
       }
     }
     @media (min-width: ${({ theme }) => theme.breakpoints.values.md}px) {
-      .price-table-wrap:has(> div:nth-child(2)) {
+      .price-table-wrap:has(> div:nth-child(1)) {
         width: 300px !important;
       }
       .price-table-wrap:has(> div:nth-child(2)) {
@@ -78,6 +69,16 @@ export default function PricingTable({ table, alignItems, interval, mode, onSele
       .price-table-wrap:has(> div:nth-child(3)) {
         width: 900px !important;
       }
+      .price-table-wrap:has(> div:nth-child(1)) > .price-table-item {
+        width: 90% !important;
+      }
+      .price-table-wrap:has(> div:nth-child(2)) > .price-table-item {
+        // 当子元素为2的时候，子元素给宽度
+        width: 60% !important;
+      }
+      .price-table-wrap:has(> div:nth-child(3)) > .price-table-item {
+        width: 30% !important;
+      }
     }
   `;
   return /* @__PURE__ */ jsx(Root, { children: /* @__PURE__ */ jsxs(
@@ -134,7 +135,6 @@ export default function PricingTable({ table, alignItems, interval, mode, onSele
                     className: "price-table-item",
                     justifyContent: "center",
                     sx: {
-                      width: 0.9 / grouped[state.interval].length,
                       cursor: "pointer",
                       borderWidth: "1px",
                       borderStyle: "solid",
@@ -162,21 +162,7 @@ export default function PricingTable({ table, alignItems, interval, mode, onSele
                           /* @__PURE__ */ jsx(Typography, { component: "span", color: "text.secondary", fontSize: "0.8rem", children: formatRecurring(x.price.recurring, false, "", locale) })
                         ] })
                       ] }),
-                      /* @__PURE__ */ jsx(
-                        LoadingButton,
-                        {
-                          fullWidth: true,
-                          size: "large",
-                          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 && !state.loaded,
-                          disabled: x.is_disabled,
-                          onClick: () => handleSelect(x.price_id),
-                          loadingPosition: "end",
-                          children: action
-                        }
-                      ),
+                      /* @__PURE__ */ jsx(Loading, { x, action, onSelect }),
                       x.product.features.length > 0 && /* @__PURE__ */ jsxs(Box, { children: [
                         /* @__PURE__ */ jsx(Typography, { children: t("payment.checkout.include") }),
                         /* @__PURE__ */ jsx(List, { dense: true, children: x.product.features.map((f) => /* @__PURE__ */ jsxs(ListItem, { disableGutters: true, disablePadding: true, children: [
@@ -195,3 +181,31 @@ export default function PricingTable({ table, alignItems, interval, mode, onSele
     }
   ) });
 }
+function Loading({ x, action, onSelect }) {
+  const [state, setState] = useState({ loading: "", loaded: false });
+  const handleSelect = async (priceId) => {
+    try {
+      setState({ loading: priceId, loaded: true });
+      await onSelect(priceId);
+    } catch (err) {
+      console.error(err);
+      Toast.error(formatError(err));
+    }
+  };
+  return /* @__PURE__ */ jsx(
+    LoadingButton,
+    {
+      fullWidth: true,
+      size: "large",
+      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 && !state.loaded,
+      disabled: x.is_disabled,
+      onClick: () => handleSelect(x.price_id),
+      loadingPosition: "end",
+      endIcon: null,
+      children: action
+    }
+  );
+}

package/lib/checkout/form.js

@@ -7,8 +7,6 @@ module.exports = CheckoutForm;
 var _jsxRuntime = require("react/jsx-runtime");
 var _ahooks = require("ahooks");
 var _noop = _interopRequireDefault(require("lodash/noop"));
-var _react = require("react");
-var _ufo = require("ufo");
 var _api = _interopRequireDefault(require("../api"));
 var _payment = _interopRequireDefault(require("../payment"));
 var _util = require("../util");
@@ -45,11 +43,6 @@ function CheckoutForm({
     error: apiError,
     data
   } = (0, _ahooks.useRequest)(() => type === "paymentLink" ? startFromPaymentLink(id, extraParams) : fetchCheckoutSession(id));
-  (0, _react.useEffect)(() => {
-    if (type === "paymentLink" && mode === "standalone" && data) {
-      window.location.replace((0, _ufo.joinURL)((0, _util.getPrefix)(), `/checkout/pay/${data.checkoutSession.id}`));
-    }
-  }, [type, mode, data]);
   const handlePaid = () => {
     setState({
       completed: true

package/lib/components/pricing-table.js

@@ -49,9 +49,7 @@ function PricingTable({
     locale
   } = (0, _context.useLocaleContext)();
   const [state, setState] = (0, _ahooks.useSetState)({
-    interval,
-    loading: "",
-    loaded: false
+    interval
   });
   const {
     recurring,
@@ -69,18 +67,6 @@ function PricingTable({
       }
     }
   }, [table]);
-  const handleSelect = async priceId => {
-    try {
-      setState({
-        loading: priceId,
-        loaded: true
-      });
-      await onSelect(priceId);
-    } catch (err) {
-      console.error(err);
-      _Toast.default.error((0, _util.formatError)(err));
-    }
-  };
   const Root = (0, _system.styled)(_material.Box)`
     @media (max-width: ${({
     theme
@@ -92,7 +78,7 @@ function PricingTable({
     @media (min-width: ${({
     theme
   }) => theme.breakpoints.values.md}px) {
-      .price-table-wrap:has(> div:nth-child(2)) {
+      .price-table-wrap:has(> div:nth-child(1)) {
         width: 300px !important;
       }
       .price-table-wrap:has(> div:nth-child(2)) {
@@ -101,6 +87,16 @@ function PricingTable({
       .price-table-wrap:has(> div:nth-child(3)) {
         width: 900px !important;
       }
+      .price-table-wrap:has(> div:nth-child(1)) > .price-table-item {
+        width: 90% !important;
+      }
+      .price-table-wrap:has(> div:nth-child(2)) > .price-table-item {
+        // 当子元素为2的时候，子元素给宽度
+        width: 60% !important;
+      }
+      .price-table-wrap:has(> div:nth-child(3)) > .price-table-item {
+        width: 30% !important;
+      }
     }
   `;
   return /* @__PURE__ */(0, _jsxRuntime.jsx)(Root, {
@@ -156,7 +152,6 @@ function PricingTable({
               className: "price-table-item",
               justifyContent: "center",
               sx: {
-                width: 0.9 / grouped[state.interval].length,
                 cursor: "pointer",
                 borderWidth: "1px",
                 borderStyle: "solid",
@@ -210,19 +205,10 @@ function PricingTable({
                     children: (0, _util.formatRecurring)(x.price.recurring, false, "", locale)
                   })]
                 })]
-              }), /* @__PURE__ */(0, _jsxRuntime.jsx)(_lab.LoadingButton, {
-                fullWidth: true,
-                size: "large",
-                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 && !state.loaded,
-                disabled: x.is_disabled,
-                onClick: () => handleSelect(x.price_id),
-                loadingPosition: "end",
-                children: action
+              }), /* @__PURE__ */(0, _jsxRuntime.jsx)(Loading, {
+                x,
+                action,
+                onSelect
               }), x.product.features.length > 0 && /* @__PURE__ */(0, _jsxRuntime.jsxs)(_material.Box, {
                 children: [/* @__PURE__ */(0, _jsxRuntime.jsx)(_material.Typography, {
                   children: t("payment.checkout.include")
@@ -251,4 +237,41 @@ function PricingTable({
       })]
     })
   });
+}
+function Loading({
+  x,
+  action,
+  onSelect
+}) {
+  const [state, setState] = (0, _react.useState)({
+    loading: "",
+    loaded: false
+  });
+  const handleSelect = async priceId => {
+    try {
+      setState({
+        loading: priceId,
+        loaded: true
+      });
+      await onSelect(priceId);
+    } catch (err) {
+      console.error(err);
+      _Toast.default.error((0, _util.formatError)(err));
+    }
+  };
+  return /* @__PURE__ */(0, _jsxRuntime.jsx)(_lab.LoadingButton, {
+    fullWidth: true,
+    size: "large",
+    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 && !state.loaded,
+    disabled: x.is_disabled,
+    onClick: () => handleSelect(x.price_id),
+    loadingPosition: "end",
+    endIcon: null,
+    children: action
+  });
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@blocklet/payment-react",
-  "version": "1.13.144",
+  "version": "1.13.146",
   "description": "Reusable react components for payment kit v2",
   "keywords": [
     "react",
@@ -89,7 +89,7 @@
     "@babel/core": "^7.23.9",
     "@babel/preset-env": "^7.23.9",
     "@babel/preset-react": "^7.23.3",
-    "@blocklet/payment-types": "1.13.144",
+    "@blocklet/payment-types": "1.13.146",
     "@storybook/addon-essentials": "^7.6.13",
     "@storybook/addon-interactions": "^7.6.13",
     "@storybook/addon-links": "^7.6.13",
@@ -118,5 +118,5 @@
     "vite-plugin-babel": "^1.2.0",
     "vite-plugin-node-polyfills": "^0.19.0"
   },
-  "gitHead": "ffef3d0804ed91778330d90394718922388d3403"
+  "gitHead": "d7b68b409a84dd6ad962d298a74155fcdd9993db"
 }

package/src/checkout/form.tsx

@@ -2,13 +2,11 @@
 import { TCheckoutSessionExpanded, TPaymentMethodExpanded } from '@blocklet/payment-types';
 import { useRequest, useSetState } from 'ahooks';
 import noop from 'lodash/noop';
-import { useEffect } from 'react';
-import { joinURL } from 'ufo';
 
 import api from '../api';
 import Payment from '../payment';
 import { CheckoutContext, CheckoutProps } from '../types';
-import { getPrefix, mergeExtraParams } from '../util';
+import { mergeExtraParams } from '../util';
 
 const startFromPaymentLink = async (id: string, params?: Record<string, any>): Promise<CheckoutContext> => {
   const { data } = await api.post(`/api/checkout-sessions/start/${id}?${mergeExtraParams(params)}`);
@@ -34,12 +32,6 @@ export default function CheckoutForm({ id, onPaid, onError, mode, goBack, extraP
     type === 'paymentLink' ? startFromPaymentLink(id, extraParams) : fetchCheckoutSession(id)
   );
 
-  useEffect(() => {
-    if (type === 'paymentLink' && mode === 'standalone' && data) {
-      window.location.replace(joinURL(getPrefix(), `/checkout/pay/${data.checkoutSession.id}`));
-    }
-  }, [type, mode, data]);
-
   const handlePaid = () => {
     setState({ completed: true });
     onPaid?.(data as CheckoutContext);

package/src/components/pricing-table.tsx

@@ -19,7 +19,7 @@ import {
 } from '@mui/material';
 import { styled } from '@mui/system';
 import { useSetState } from 'ahooks';
-import { useEffect } from 'react';
+import { useEffect, useState } from 'react';
 
 import Amount from '../payment/amount';
 import { formatError, formatPriceAmount, formatRecurring } from '../util';
@@ -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: '', loaded: false });
+  const [state, setState] = useSetState({ interval });
   const { recurring, grouped } = groupItemsByRecurring(table.items);
 
   useEffect(() => {
@@ -74,16 +74,6 @@ export default function PricingTable({ table, alignItems, interval, mode, onSele
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [table]);
 
-  const handleSelect = async (priceId: string) => {
-    try {
-      setState({ loading: priceId, loaded: true });
-      await onSelect(priceId);
-    } catch (err) {
-      console.error(err);
-      Toast.error(formatError(err));
-    }
-  };
-
   const Root = styled(Box)`
     @media (max-width: ${({ theme }) => theme.breakpoints.values.sm}px) {
       .price-table-item {
@@ -91,7 +81,7 @@ export default function PricingTable({ table, alignItems, interval, mode, onSele
       }
     }
     @media (min-width: ${({ theme }) => theme.breakpoints.values.md}px) {
-      .price-table-wrap:has(> div:nth-child(2)) {
+      .price-table-wrap:has(> div:nth-child(1)) {
         width: 300px !important;
       }
       .price-table-wrap:has(> div:nth-child(2)) {
@@ -100,6 +90,16 @@ export default function PricingTable({ table, alignItems, interval, mode, onSele
       .price-table-wrap:has(> div:nth-child(3)) {
         width: 900px !important;
       }
+      .price-table-wrap:has(> div:nth-child(1)) > .price-table-item {
+        width: 90% !important;
+      }
+      .price-table-wrap:has(> div:nth-child(2)) > .price-table-item {
+        // 当子元素为2的时候，子元素给宽度
+        width: 60% !important;
+      }
+      .price-table-wrap:has(> div:nth-child(3)) > .price-table-item {
+        width: 30% !important;
+      }
     }
   `;
   return (
@@ -159,7 +159,6 @@ export default function PricingTable({ table, alignItems, interval, mode, onSele
                     className="price-table-item"
                     justifyContent="center"
                     sx={{
-                      width: 0.9 / grouped[state.interval as string].length,
                       cursor: 'pointer',
                       borderWidth: '1px',
                       borderStyle: 'solid',
@@ -192,18 +191,7 @@ export default function PricingTable({ table, alignItems, interval, mode, onSele
                         </Typography>
                       </Stack>
                     </Stack>
-                    <LoadingButton
-                      fullWidth
-                      size="large"
-                      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 && !state.loaded}
-                      disabled={x.is_disabled}
-                      onClick={() => handleSelect(x.price_id)}
-                      loadingPosition="end">
-                      {action}
-                    </LoadingButton>
+                    <Loading x={x} action={action} onSelect={onSelect} />
                     {x.product.features.length > 0 && (
                       <Box>
                         <Typography>{t('payment.checkout.include')}</Typography>
@@ -229,3 +217,33 @@ export default function PricingTable({ table, alignItems, interval, mode, onSele
     </Root>
   );
 }
+
+function Loading({ x, action, onSelect }: any) {
+  const [state, setState] = useState({ loading: '', loaded: false });
+
+  const handleSelect = async (priceId: string) => {
+    try {
+      setState({ loading: priceId, loaded: true });
+      await onSelect(priceId);
+    } catch (err) {
+      console.error(err);
+      Toast.error(formatError(err));
+    }
+  };
+
+  return (
+    <LoadingButton
+      fullWidth
+      size="large"
+      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 && !state.loaded}
+      disabled={x.is_disabled}
+      onClick={() => handleSelect(x.price_id)}
+      loadingPosition="end"
+      endIcon={null}>
+      {action}
+    </LoadingButton>
+  );
+}