@blocklet/payment-react 1.16.4 → 1.16.5

package/es/checkout/table.js

@@ -40,7 +40,12 @@ function CheckoutTableInner({ id, mode, onPaid, onError, onChange, extraParams,
     return /* @__PURE__ */ jsx(Alert, { severity: "warning", children: t("payment.checkout.noPricing") });
   }
   const handleSelect = (priceId, currencyId) => {
-    api.post(`/api/pricing-tables/${data.id}/checkout/${priceId}?${mergeExtraParams(extraParams)}`).then((res) => {
+    api.post(
+      `/api/pricing-tables/${data.id}/checkout/${priceId}?${mergeExtraParams({
+        ...extraParams,
+        currencyId
+      })}`
+    ).then((res) => {
       if (mode === "standalone") {
         let { url } = res.data;
         url = url.indexOf("?") > -1 ? `${url}&currencyId=${currencyId}` : `${url}?currencyId=${currencyId}`;

package/es/components/country-select.d.ts

@@ -7,10 +7,5 @@ export type CountrySelectProps = {
     name: string;
     sx?: SxProps;
 };
-declare function CountrySelect({ value, onChange, name, sx }: CountrySelectProps): JSX.Element;
-declare namespace CountrySelect {
-    var defaultProps: {
-        sx: {};
-    };
-}
+declare const CountrySelect: import("react").ForwardRefExoticComponent<CountrySelectProps & import("react").RefAttributes<HTMLDivElement>>;
 export default CountrySelect;

package/es/components/country-select.js

@@ -1,12 +1,9 @@
 import { jsx, jsxs } from "react/jsx-runtime";
-import { useMemo } from "react";
+import { useMemo, forwardRef } from "react";
 import { Box, MenuItem, Select, Typography } from "@mui/material";
 import { useFormContext } from "react-hook-form";
 import { FlagEmoji, defaultCountries, parseCountry } from "react-international-phone";
-CountrySelect.defaultProps = {
-  sx: {}
-};
-export default function CountrySelect({ value, onChange, name, sx }) {
+const CountrySelect = forwardRef(({ value, onChange, name, sx }, ref) => {
   const { setValue } = useFormContext();
   const countryDetail = useMemo(() => {
     const item = defaultCountries.find((v) => v[1] === value);
@@ -19,6 +16,7 @@ export default function CountrySelect({ value, onChange, name, sx }) {
   return /* @__PURE__ */ jsx(
     Select,
     {
+      ref,
       MenuProps: {
         style: {
           height: "300px",
@@ -35,7 +33,6 @@ export default function CountrySelect({ value, onChange, name, sx }) {
       },
       sx: {
         width: "100%",
-        // Remove default outline (display only on focus)
         fieldset: {
           display: "none"
         },
@@ -44,7 +41,6 @@ export default function CountrySelect({ value, onChange, name, sx }) {
             display: "block"
           }
         },
-        // Update default spacing
         ".MuiSelect-select": {
           padding: "8px",
           paddingRight: "24px !important"
@@ -54,7 +50,6 @@ export default function CountrySelect({ value, onChange, name, sx }) {
         },
         ".MuiMenuItem-root": {
           justifyContent: "flex-start"
-          // 确保内容左对齐
         },
         ...sx
       },
@@ -79,4 +74,8 @@ export default function CountrySelect({ value, onChange, name, sx }) {
       })
     }
   );
-}
+});
+CountrySelect.defaultProps = {
+  sx: {}
+};
+export default CountrySelect;

package/es/components/over-due-invoice-payment.js

@@ -9,9 +9,10 @@ import { Dialog } from "@arcblock/ux";
 import { usePaymentContext } from "../contexts/payment.js";
 import { formatAmount, formatError, getPrefix } from "../libs/util.js";
 import { useSubscription } from "../hooks/subscription.js";
+import api from "../libs/api.js";
 const fetchOverdueInvoices = async (subscriptionId) => {
-  const res = await fetch(`/api/subscriptions/${subscriptionId}/overdue/invoices`);
-  return res.json();
+  const res = await api.get(`/api/subscriptions/${subscriptionId}/overdue/invoices`);
+  return res.data;
 };
 function OverdueInvoicePayment({
   subscriptionId,

package/es/components/pricing-table.js

@@ -167,13 +167,13 @@ 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(1)) {
+      .price-table-wrap:has(> div:nth-of-type(1)) {
         max-width: 360px !important;
       }
-      .price-table-wrap:has(> div:nth-child(2)) {
+      .price-table-wrap:has(> div:nth-of-type(2)) {
         max-width: 780px !important;
       }
-      .price-table-wrap:has(> div:nth-child(3)) {
+      .price-table-wrap:has(> div:nth-of-type(3)) {
         max-width: 1200px !important;
       }
     }
@@ -482,8 +482,6 @@ function Subscribe({ x, action, onSelect, currencyId }) {
       loading: state.loading === x.price_id && !state.loaded,
       disabled: x.is_disabled,
       onClick: () => handleSelect(x.price_id),
-      loadingPosition: "end",
-      endIcon: null,
       children: action
     }
   );

package/es/components/table.js

@@ -100,6 +100,8 @@ const Wrapped = styled(Datatable)`
     border-bottom: none;
     padding-top: 12px;
     padding-bottom: 12px;
+    padding-left: 16px;
+    padding-right: 16px;
     &:first-of-type {
       padding-left: 20px;
     }

package/es/payment/summary.js

@@ -196,6 +196,7 @@ export default function PaymentSummary({
                   {
                     size: "small",
                     loadingPosition: "end",
+                    endIcon: null,
                     color: "error",
                     variant: "text",
                     loading: state.loading,
@@ -225,6 +226,7 @@ export default function PaymentSummary({
                 {
                   size: "small",
                   loadingPosition: "end",
+                  endIcon: null,
                   color: crossSellBehavior === "required" ? "info" : "info",
                   variant: crossSellBehavior === "required" ? "text" : "text",
                   loading: state.loading,

package/lib/checkout/table.js

@@ -70,7 +70,10 @@ function CheckoutTableInner({
     });
   }
   const handleSelect = (priceId, currencyId) => {
-    _api.default.post(`/api/pricing-tables/${data.id}/checkout/${priceId}?${(0, _util.mergeExtraParams)(extraParams)}`).then(res => {
+    _api.default.post(`/api/pricing-tables/${data.id}/checkout/${priceId}?${(0, _util.mergeExtraParams)({
+      ...extraParams,
+      currencyId
+    })}`).then(res => {
       if (mode === "standalone") {
         let {
           url

package/lib/components/country-select.d.ts

@@ -7,10 +7,5 @@ export type CountrySelectProps = {
     name: string;
     sx?: SxProps;
 };
-declare function CountrySelect({ value, onChange, name, sx }: CountrySelectProps): JSX.Element;
-declare namespace CountrySelect {
-    var defaultProps: {
-        sx: {};
-    };
-}
+declare const CountrySelect: import("react").ForwardRefExoticComponent<CountrySelectProps & import("react").RefAttributes<HTMLDivElement>>;
 export default CountrySelect;

package/lib/components/country-select.js

@@ -3,21 +3,18 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-module.exports = CountrySelect;
+
 var _jsxRuntime = require("react/jsx-runtime");
 var _react = require("react");
 var _material = require("@mui/material");
 var _reactHookForm = require("react-hook-form");
 var _reactInternationalPhone = require("react-international-phone");
-CountrySelect.defaultProps = {
-  sx: {}
-};
-function CountrySelect({
+const CountrySelect = (0, _react.forwardRef)(({
   value,
   onChange,
   name,
   sx
-}) {
+}, ref) => {
   const {
     setValue
   } = (0, _reactHookForm.useFormContext)();
@@ -32,6 +29,7 @@ function CountrySelect({
     setValue(name, e.target.value);
   };
   return /* @__PURE__ */(0, _jsxRuntime.jsx)(_material.Select, {
+    ref,
     MenuProps: {
       style: {
         height: "300px",
@@ -48,7 +46,6 @@ function CountrySelect({
     },
     sx: {
       width: "100%",
-      // Remove default outline (display only on focus)
       fieldset: {
         display: "none"
       },
@@ -57,7 +54,6 @@ function CountrySelect({
           display: "block"
         }
       },
-      // Update default spacing
       ".MuiSelect-select": {
         padding: "8px",
         paddingRight: "24px !important"
@@ -67,9 +63,7 @@ function CountrySelect({
       },
       ".MuiMenuItem-root": {
         justifyContent: "flex-start"
-        // 确保内容左对齐
       },
-
       ...sx
     },
     value,
@@ -112,4 +106,8 @@ function CountrySelect({
       }, parsed.iso2);
     })
   });
-}
+});
+CountrySelect.defaultProps = {
+  sx: {}
+};
+module.exports = CountrySelect;

package/lib/components/over-due-invoice-payment.js

@@ -15,10 +15,11 @@ var _ux = require("@arcblock/ux");
 var _payment = require("../contexts/payment");
 var _util = require("../libs/util");
 var _subscription = require("../hooks/subscription");
+var _api = _interopRequireDefault(require("../libs/api"));
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 const fetchOverdueInvoices = async subscriptionId => {
-  const res = await fetch(`/api/subscriptions/${subscriptionId}/overdue/invoices`);
-  return res.json();
+  const res = await _api.default.get(`/api/subscriptions/${subscriptionId}/overdue/invoices`);
+  return res.data;
 };
 function OverdueInvoicePayment({
   subscriptionId,

package/lib/components/pricing-table.js

@@ -184,13 +184,13 @@ function PricingTable({
     @media (min-width: ${({
     theme
   }) => theme.breakpoints.values.md}px) {
-      .price-table-wrap:has(> div:nth-child(1)) {
+      .price-table-wrap:has(> div:nth-of-type(1)) {
         max-width: 360px !important;
       }
-      .price-table-wrap:has(> div:nth-child(2)) {
+      .price-table-wrap:has(> div:nth-of-type(2)) {
         max-width: 780px !important;
       }
-      .price-table-wrap:has(> div:nth-child(3)) {
+      .price-table-wrap:has(> div:nth-of-type(3)) {
         max-width: 1200px !important;
       }
     }
@@ -507,8 +507,6 @@ function Subscribe({
     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/components/table.js

@@ -120,6 +120,8 @@ const Wrapped = (0, _system.styled)(_Datatable.default)`
     border-bottom: none;
     padding-top: 12px;
     padding-bottom: 12px;
+    padding-left: 16px;
+    padding-right: 16px;
     &:first-of-type {
       padding-left: 20px;
     }

package/lib/payment/summary.js

@@ -219,6 +219,7 @@ function PaymentSummary({
           children: [/* @__PURE__ */(0, _jsxRuntime.jsx)(_material.Typography, {}), /* @__PURE__ */(0, _jsxRuntime.jsx)(_lab.LoadingButton, {
             size: "small",
             loadingPosition: "end",
+            endIcon: null,
             color: "error",
             variant: "text",
             loading: state.loading,
@@ -263,6 +264,7 @@ function PaymentSummary({
             }), /* @__PURE__ */(0, _jsxRuntime.jsx)(_lab.LoadingButton, {
               size: "small",
               loadingPosition: "end",
+              endIcon: null,
               color: crossSellBehavior === "required" ? "info" : "info",
               variant: crossSellBehavior === "required" ? "text" : "text",
               loading: state.loading,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@blocklet/payment-react",
-  "version": "1.16.4",
+  "version": "1.16.5",
   "description": "Reusable react components for payment kit v2",
   "keywords": [
     "react",
@@ -53,15 +53,15 @@
     }
   },
   "dependencies": {
-    "@arcblock/did-connect": "^2.10.67",
-    "@arcblock/ux": "^2.10.67",
-    "@arcblock/ws": "^1.18.147",
-    "@blocklet/ui-react": "^2.10.67",
+    "@arcblock/did-connect": "^2.10.74",
+    "@arcblock/ux": "^2.10.74",
+    "@arcblock/ws": "^1.18.150",
+    "@blocklet/ui-react": "^2.10.74",
     "@mui/icons-material": "^5.16.6",
     "@mui/lab": "^5.0.0-alpha.173",
     "@mui/material": "^5.16.6",
     "@mui/system": "^5.16.6",
-    "@ocap/util": "^1.18.147",
+    "@ocap/util": "^1.18.150",
     "@stripe/react-stripe-js": "^2.7.3",
     "@stripe/stripe-js": "^2.4.0",
     "@vitejs/plugin-legacy": "^5.4.1",
@@ -92,7 +92,7 @@
     "@babel/core": "^7.25.2",
     "@babel/preset-env": "^7.25.2",
     "@babel/preset-react": "^7.24.7",
-    "@blocklet/payment-types": "1.16.4",
+    "@blocklet/payment-types": "1.16.5",
     "@storybook/addon-essentials": "^7.6.20",
     "@storybook/addon-interactions": "^7.6.20",
     "@storybook/addon-links": "^7.6.20",
@@ -122,5 +122,5 @@
     "vite-plugin-babel": "^1.2.0",
     "vite-plugin-node-polyfills": "^0.21.0"
   },
-  "gitHead": "d2c53c8bec3a4a34d0ef3a011ec215b69bc9a5ab"
+  "gitHead": "74e38987168230f01af52d1aff14bfa6a18c0578"
 }

package/src/checkout/table.tsx

@@ -52,7 +52,12 @@ function CheckoutTableInner({ id, mode, onPaid, onError, onChange, extraParams,
 
   const handleSelect = (priceId: string, currencyId: string) => {
     api
-      .post(`/api/pricing-tables/${data.id}/checkout/${priceId}?${mergeExtraParams(extraParams)}`)
+      .post(
+        `/api/pricing-tables/${data.id}/checkout/${priceId}?${mergeExtraParams({
+          ...extraParams,
+          currencyId,
+        })}`
+      )
       .then((res) => {
         if (mode === 'standalone') {
           let { url } = res.data;

package/src/components/country-select.tsx

@@ -1,6 +1,4 @@
-/* eslint-disable react/prop-types */
-// eslint-disable-next-line @typescript-eslint/no-unused-vars
-import React, { useMemo } from 'react';
+import { useMemo, forwardRef } from 'react';
 import { Box, MenuItem, Select, SxProps, Typography } from '@mui/material';
 import { useFormContext } from 'react-hook-form';
 import { CountryIso2, FlagEmoji, defaultCountries, parseCountry } from 'react-international-phone';
@@ -12,11 +10,7 @@ export type CountrySelectProps = {
   sx?: SxProps;
 };
 
-CountrySelect.defaultProps = {
-  sx: {},
-};
-
-export default function CountrySelect({ value, onChange, name, sx }: CountrySelectProps) {
+const CountrySelect = forwardRef<HTMLDivElement, CountrySelectProps>(({ value, onChange, name, sx }, ref) => {
   const { setValue } = useFormContext();
   const countryDetail = useMemo(() => {
     const item = defaultCountries.find((v) => v[1] === value);
@@ -30,6 +24,7 @@ export default function CountrySelect({ value, onChange, name, sx }: CountrySele
 
   return (
     <Select
+      ref={ref}
       MenuProps={{
         style: {
           height: '300px',
@@ -46,7 +41,6 @@ export default function CountrySelect({ value, onChange, name, sx }: CountrySele
       }}
       sx={{
         width: '100%',
-        // Remove default outline (display only on focus)
         fieldset: {
           display: 'none',
         },
@@ -55,7 +49,6 @@ export default function CountrySelect({ value, onChange, name, sx }: CountrySele
             display: 'block',
           },
         },
-        // Update default spacing
         '.MuiSelect-select': {
           padding: '8px',
           paddingRight: '24px !important',
@@ -64,7 +57,7 @@ export default function CountrySelect({ value, onChange, name, sx }: CountrySele
           right: 0,
         },
         '.MuiMenuItem-root': {
-          justifyContent: 'flex-start', // 确保内容左对齐
+          justifyContent: 'flex-start',
         },
         ...sx,
       }}
@@ -90,4 +83,9 @@ export default function CountrySelect({ value, onChange, name, sx }: CountrySele
       })}
     </Select>
   );
-}
+});
+
+CountrySelect.defaultProps = {
+  sx: {},
+};
+export default CountrySelect;

package/src/components/over-due-invoice-payment.tsx

@@ -9,6 +9,7 @@ import { Dialog } from '@arcblock/ux';
 import { usePaymentContext } from '../contexts/payment';
 import { formatAmount, formatError, getPrefix } from '../libs/util';
 import { useSubscription } from '../hooks/subscription';
+import api from '../libs/api';
 
 type DialogProps = {
   open?: boolean;
@@ -45,8 +46,8 @@ const fetchOverdueInvoices = async (
   summary: { [key: string]: SummaryItem };
   invoices: Invoice[];
 }> => {
-  const res = await fetch(`/api/subscriptions/${subscriptionId}/overdue/invoices`);
-  return res.json();
+  const res = await api.get(`/api/subscriptions/${subscriptionId}/overdue/invoices`);
+  return res.data;
 };
 
 function OverdueInvoicePayment({

package/src/components/pricing-table.tsx

@@ -198,13 +198,13 @@ 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(1)) {
+      .price-table-wrap:has(> div:nth-of-type(1)) {
         max-width: 360px !important;
       }
-      .price-table-wrap:has(> div:nth-child(2)) {
+      .price-table-wrap:has(> div:nth-of-type(2)) {
         max-width: 780px !important;
       }
-      .price-table-wrap:has(> div:nth-child(3)) {
+      .price-table-wrap:has(> div:nth-of-type(3)) {
         max-width: 1200px !important;
       }
     }
@@ -500,9 +500,7 @@ function Subscribe({ x, action, onSelect, currencyId }: any) {
       }}
       loading={state.loading === x.price_id && !state.loaded}
       disabled={x.is_disabled}
-      onClick={() => handleSelect(x.price_id)}
-      loadingPosition="end"
-      endIcon={null}>
+      onClick={() => handleSelect(x.price_id)}>
       {action}
     </LoadingButton>
   );

package/src/components/table.tsx

@@ -120,6 +120,8 @@ const Wrapped = styled(Datatable)`
     border-bottom: none;
     padding-top: 12px;
     padding-bottom: 12px;
+    padding-left: 16px;
+    padding-right: 16px;
     &:first-of-type {
       padding-left: 20px;
     }

package/src/payment/summary.tsx

@@ -252,6 +252,7 @@ export default function PaymentSummary({
                   <LoadingButton
                     size="small"
                     loadingPosition="end"
+                    endIcon={null}
                     color="error"
                     variant="text"
                     loading={state.loading}
@@ -284,6 +285,7 @@ export default function PaymentSummary({
                 <LoadingButton
                   size="small"
                   loadingPosition="end"
+                  endIcon={null}
                   color={crossSellBehavior === 'required' ? 'info' : 'info'}
                   variant={crossSellBehavior === 'required' ? 'text' : 'text'}
                   loading={state.loading}