@blocklet/payment-react 1.16.13 → 1.16.16

package/lib/components/input.d.ts

@@ -1,25 +1,24 @@
-/// <reference types="react" />
-import { RegisterOptions } from 'react-hook-form';
+import type { RegisterOptions } from 'react-hook-form';
 declare const FormInput: import("react").ForwardRefExoticComponent<(Omit<import("@mui/material").OutlinedTextFieldProps & {
     name: string;
-    label?: string | undefined;
-    placeholder?: string | undefined;
-    errorPosition?: "bottom" | "right" | undefined;
-    rules?: RegisterOptions<import("react-hook-form").FieldValues, string> | undefined;
+    label?: string;
+    placeholder?: string;
+    errorPosition?: "right" | "bottom";
+    rules?: RegisterOptions;
     wrapperStyle?: any;
 }, "ref"> | Omit<import("@mui/material").FilledTextFieldProps & {
     name: string;
-    label?: string | undefined;
-    placeholder?: string | undefined;
-    errorPosition?: "bottom" | "right" | undefined;
-    rules?: RegisterOptions<import("react-hook-form").FieldValues, string> | undefined;
+    label?: string;
+    placeholder?: string;
+    errorPosition?: "right" | "bottom";
+    rules?: RegisterOptions;
     wrapperStyle?: any;
 }, "ref"> | Omit<import("@mui/material").StandardTextFieldProps & {
     name: string;
-    label?: string | undefined;
-    placeholder?: string | undefined;
-    errorPosition?: "bottom" | "right" | undefined;
-    rules?: RegisterOptions<import("react-hook-form").FieldValues, string> | undefined;
+    label?: string;
+    placeholder?: string;
+    errorPosition?: "right" | "bottom";
+    rules?: RegisterOptions;
     wrapperStyle?: any;
 }, "ref">) & import("react").RefAttributes<HTMLInputElement>>;
 export default FormInput;

package/lib/components/livemode.d.ts

@@ -1,5 +1,4 @@
-/// <reference types="react" />
-import { ChipOwnProps } from '@mui/material';
+import type { ChipOwnProps } from '@mui/material';
 type Props = {
     color?: string;
     backgroundColor?: string;

package/lib/components/over-due-invoice-payment.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 import type { Invoice, PaymentCurrency, PaymentMethod, Subscription } from '@blocklet/payment-types';
 type DialogProps = {
     open?: boolean;

package/lib/components/pricing-item.d.ts

@@ -1,6 +1,5 @@
-/// <reference types="react" />
 import type { TProductExpanded } from '@blocklet/payment-types';
-import { PricingRenderProps } from '../types';
+import type { PricingRenderProps } from '../types';
 export type PricingItemProps = {
     productId: string;
     quantity: number;

package/lib/components/pricing-item.js

@@ -15,7 +15,7 @@ var _api = _interopRequireDefault(require("../libs/api"));
 var _util = require("../libs/util");
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 const fetchProduct = productId => {
-  return _api.default.get(`/api/products/${productId}`).then(res => res.data);
+  return _api.default.get(`/api/products/${productId}`).then(res => res?.data);
 };
 function PricingItem({
   productId,

package/lib/components/pricing-table.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 import type { TPricingTableExpanded } from '@blocklet/payment-types';
 type Props = {
     table: TPricingTableExpanded;

package/lib/components/status.d.ts

@@ -1,3 +1,2 @@
-/// <reference types="react" />
-import { ChipProps } from '@mui/material';
+import type { ChipProps } from '@mui/material';
 export default function Status(props: ChipProps): import("react").JSX.Element;

package/lib/components/switch-button.d.ts

@@ -1,6 +1,7 @@
 import type { LiteralUnion } from 'type-fest';
-type SwitchProps = {
+import type { SwitchProps as MuiSwitchProps } from '@mui/material';
+type CustomSwitchProps = {
     variant?: LiteralUnion<'success' | 'error' | 'warning' | 'info' | 'primary' | 'secondary', string>;
-};
-declare const _default: import("@emotion/styled").StyledComponent<import("@mui/material").SwitchProps & import("@mui/system").MUIStyledCommonProps<import("@mui/system").Theme> & SwitchProps, {}, {}>;
-export default _default;
+} & MuiSwitchProps;
+declare const SwitchButton: React.FC<CustomSwitchProps>;
+export default SwitchButton;

package/lib/components/switch-button.js

@@ -6,7 +6,7 @@ Object.defineProperty(exports, "__esModule", {
 
 var _material = require("@mui/material");
 var _system = require("@mui/system");
-module.exports = (0, _system.styled)(_material.Switch)(({
+const SwitchButton = (0, _system.styled)(_material.Switch)(({
   variant = "success",
   theme
 }) => ({
@@ -48,4 +48,5 @@ module.exports = (0, _system.styled)(_material.Switch)(({
     backgroundColor: theme.palette.mode === "dark" ? "rgba(255,255,255,.35)" : "rgba(0,0,0,.25)",
     boxSizing: "border-box"
   }
-}));
+}));
+module.exports = SwitchButton;

package/lib/components/truncated-text.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 interface TruncatedTextProps {
     text?: string;
     maxLength?: number;

package/lib/contexts/payment.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 import type { TPaymentCurrency, TPaymentMethodExpanded } from '@blocklet/payment-types';
 import type { Axios } from 'axios';
 export interface Settings {

package/lib/history/invoice/list.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 type Props = {
     customer_id?: string;
     subscription_id?: string;

package/lib/history/payment/list.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 type Props = {
     customer_id: string;
 };

package/lib/libs/util.d.ts

@@ -1,6 +1,5 @@
-/// <reference types="react" />
 import type { PaymentDetails, PriceCurrency, PriceRecurring, TInvoiceExpanded, TLineItemExpanded, TPaymentCurrency, TPaymentCurrencyExpanded, TPaymentMethod, TPaymentMethodExpanded, TPrice, TProductExpanded, TSubscriptionExpanded, TSubscriptionItemExpanded } from '@blocklet/payment-types';
-import { ActionProps, PricingRenderProps } from '../types';
+import type { ActionProps, PricingRenderProps } from '../types';
 export declare const PAYMENT_KIT_DID = "z2qaCNvKMv5GjouKdcDWexv6WqtHbpNPQDnAk";
 export declare const isPaymentKitMounted: () => any;
 export declare const getPrefix: () => string;
@@ -85,9 +84,7 @@ export declare const getSubscriptionAction: (subscription: TSubscriptionExpanded
     sx?: any;
 } | null;
 export declare const mergeExtraParams: (extra?: Record<string, any>) => string;
-export declare const flattenPaymentMethods: (methods?: TPaymentMethodExpanded[]) => import("sequelize").InferAttributes<import("@blocklet/payment-types").PaymentCurrency, {
-    omit: never;
-}>[];
+export declare const flattenPaymentMethods: (methods?: TPaymentMethodExpanded[]) => TPaymentCurrency[];
 export declare const getTxLink: (method: TPaymentMethod, details: PaymentDetails) => {
     link: string;
     text: string;

package/lib/libs/util.js

@@ -89,7 +89,7 @@ const getPrefix = () => {
   if (componentId === PAYMENT_KIT_DID) {
     return (0, _ufo.joinURL)(baseUrl, prefix);
   }
-  const component = (window.blocklet?.componentMountPoints || []).find(x => x.did === PAYMENT_KIT_DID);
+  const component = (window.blocklet?.componentMountPoints || []).find(x => x?.did === PAYMENT_KIT_DID);
   if (component) {
     return (0, _ufo.joinURL)(baseUrl, component.mountPoint);
   }

package/lib/locales/index.d.ts

@@ -3,7 +3,7 @@ export declare const translations: {
     en: any;
 };
 export declare const createTranslator: ({ fallbackLocale }: {
-    fallbackLocale?: string | undefined;
+    fallbackLocale?: string;
 }, langs?: any) => (key: string, locale?: string, data?: Record<string, any>) => string;
 export declare const translate: (key: string, locale?: string, data?: Record<string, any>) => string;
 export declare const t: (key: string, locale?: string, data?: Record<string, any>) => string;

package/lib/payment/amount.d.ts

@@ -1,5 +1,4 @@
-/// <reference types="react" />
-import { TypographyProps } from '@mui/material';
+import type { TypographyProps } from '@mui/material';
 type Props = {
     amount: string;
 } & TypographyProps;

package/lib/payment/error.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 import type { LiteralUnion } from 'type-fest';
 type ModeType = LiteralUnion<'standalone' | 'inline' | 'popup' | 'inline-minimal' | 'popup-minimal', string>;
 type Props = {

package/lib/payment/footer.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 export default function CheckoutFooter({ ...props }: {
     [x: string]: any;
 }): import("react").JSX.Element;

package/lib/payment/form/addon.d.ts

@@ -1,2 +1 @@
-/// <reference types="react" />
 export default function UserButtons(): import("react").JSX.Element;

package/lib/payment/form/address.d.ts

@@ -1,5 +1,4 @@
-/// <reference types="react" />
-import { SxProps } from '@mui/material';
+import type { SxProps } from '@mui/material';
 type Props = {
     mode: string;
     stripe: boolean;

package/lib/payment/form/currency.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 import type { TPaymentCurrency } from '@blocklet/payment-types';
 type Props = {
     value: number;

package/lib/payment/form/index.d.ts

@@ -1,6 +1,5 @@
-/// <reference types="react" />
 import 'react-international-phone/style.css';
-import { CheckoutCallbacks, CheckoutContext } from '../../types';
+import type { CheckoutCallbacks, CheckoutContext } from '../../types';
 type PageData = CheckoutContext & CheckoutCallbacks;
 declare function PaymentForm({ checkoutSession, paymentMethods, paymentIntent, paymentLink, customer, onPaid, onError, action, currencyId, }: PageData): import("react").JSX.Element;
 declare namespace PaymentForm {

package/lib/payment/form/index.js

@@ -41,7 +41,10 @@ const waitForCheckoutComplete = async sessionId => {
       throw new Error(data.paymentIntent.last_payment_error.message);
     }
     result = data;
-    return data.checkoutSession?.status === "complete" && ["paid", "no_payment_required"].includes(data.checkoutSession?.payment_status);
+    return (
+      // eslint-disable-next-line @typescript-eslint/return-await
+      data.checkoutSession?.status === "complete" && ["paid", "no_payment_required"].includes(data.checkoutSession?.payment_status)
+    );
   }, {
     interval: 2e3,
     timeout: 3 * 60 * 1e3

package/lib/payment/form/phone.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 export default function PhoneInput({ ...props }: {
     [x: string]: any;
 }): import("react").JSX.Element;

package/lib/payment/form/stripe/form.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 import type { TCustomer } from '@blocklet/payment-types';
 export type StripeCheckoutFormProps = {
     clientSecret: string;

package/lib/payment/form/stripe/index.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 import type { StripeCheckoutProps } from './form';
 declare global {
     interface Window {

package/lib/payment/header.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 import type { TCheckoutSessionExpanded } from '@blocklet/payment-types';
 type Props = {
     checkoutSession: TCheckoutSessionExpanded;

package/lib/payment/index.d.ts

@@ -1,6 +1,6 @@
-/// <reference types="react" />
+import { type BoxProps } from '@mui/material';
 import type { LiteralUnion } from 'type-fest';
-import { CheckoutCallbacks, CheckoutContext } from '../types';
+import type { CheckoutCallbacks, CheckoutContext } from '../types';
 type Props = CheckoutContext & CheckoutCallbacks & {
     completed?: boolean;
     error?: any;
@@ -15,8 +15,7 @@ declare namespace Payment {
     };
 }
 export default Payment;
-export declare const Root: import("@emotion/styled").StyledComponent<import("@mui/system").BoxOwnProps<import("@mui/material").Theme> & Omit<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
-    ref?: ((instance: HTMLDivElement | null) => void) | import("react").RefObject<HTMLDivElement> | null | undefined;
-}, keyof import("@mui/system").BoxOwnProps<import("@mui/material").Theme>> & import("@mui/system").MUIStyledCommonProps<import("@mui/system").Theme> & {
+type RootProps = {
     mode: LiteralUnion<'standalone' | 'inline' | 'popup', string>;
-}, {}, {}>;
+} & BoxProps;
+export declare const Root: React.FC<RootProps>;

package/lib/payment/product-card.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 import type { LiteralUnion } from 'type-fest';
 type Props = {
     name: string;

package/lib/payment/product-donation.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 import type { DonationSettings, TLineItemExpanded, TPaymentCurrency } from '@blocklet/payment-types';
 export default function ProductDonation({ item, settings, onChange, currency, }: {
     item: TLineItemExpanded;

package/lib/payment/product-skeleton.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 export default function ProductSkeleton({ count }: {
     count: number;
 }): import("react").JSX.Element;

package/lib/payment/skeleton/overview.d.ts

@@ -1,2 +1 @@
-/// <reference types="react" />
 export default function OverviewSkeleton(): import("react").JSX.Element;

package/lib/payment/skeleton/payment.d.ts

@@ -1,2 +1 @@
-/// <reference types="react" />
 export default function PaymentSkeleton(): import("react").JSX.Element;

package/lib/payment/success.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 type Props = {
     mode: string;
     message: string;

package/lib/payment/summary.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 import type { DonationSettings, TLineItemExpanded, TPaymentCurrency } from '@blocklet/payment-types';
 type Props = {
     items: TLineItemExpanded[];

package/lib/theme/index.d.ts

@@ -1,7 +1,7 @@
 import React from 'react';
 import { typography } from './typography';
 import './index.css';
-import { PaymentThemeOptions } from '../types';
+import type { PaymentThemeOptions } from '../types';
 export { typography };
 export declare function PaymentThemeProvider({ children, theme: customTheme, }: {
     children: React.ReactNode;

package/lib/types/index.d.ts

@@ -1,6 +1,6 @@
 import type { TCheckoutSessionExpanded, TCustomer, TPaymentIntent, TPaymentLink, TPaymentMethodExpanded } from '@blocklet/payment-types';
-import { SxProps, ThemeOptions } from '@mui/material';
-import { LiteralUnion } from 'type-fest';
+import type { SxProps, ThemeOptions } from '@mui/material';
+import type { LiteralUnion } from 'type-fest';
 export type CheckoutContext = {
     checkoutSession: TCheckoutSessionExpanded;
     paymentMethods: TPaymentMethodExpanded[];

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@blocklet/payment-react",
-  "version": "1.16.13",
+  "version": "1.16.16",
   "description": "Reusable react components for payment kit v2",
   "keywords": [
     "react",
@@ -17,14 +17,14 @@
   },
   "scripts": {
     "lint": "tsc --noEmit && eslint src tests --ext js --ext jsx --ext ts --ext tsx",
-    "lint:fix": "npm run lint -- --fix",
-    "build": "tsc --noEmit && unbuild && node tools/auto-exports.js && npm run cpfiles",
+    "lint:fix": "pnpm run lint --fix",
+    "build": "tsc --noEmit && unbuild && node tools/auto-exports.js && pnpm run cpfiles",
     "watch": "CONSOLA_LEVEL=1 nodemon -e .jsx,.js,.ts,.tsx -w src -x 'yalc publish --push'",
-    "precommit": "CI=1 npm run lint",
-    "prepush": "CI=1 npm run lint",
-    "prepublish": "npm run build",
+    "precommit": "CI=1 pnpm run lint",
+    "prepush": "CI=1 pnpm run lint",
+    "prepublish": "pnpm run build",
     "test": "node tools/jest.js",
-    "coverage": "npm run test -- --coverage",
+    "coverage": "pnpm run test --coverage",
     "storybook": "storybook dev -p 6006",
     "build-storybook": "storybook build",
     "cpfiles": "copyfiles -u 1 './src/**/*.css' lib/ && copyfiles -u 1 './src/**/*.css' es/"
@@ -53,15 +53,15 @@
     }
   },
   "dependencies": {
-    "@arcblock/did-connect": "^2.10.74",
-    "@arcblock/ux": "^2.10.74",
-    "@arcblock/ws": "^1.18.150",
-    "@blocklet/ui-react": "^2.10.74",
+    "@arcblock/did-connect": "^2.10.87",
+    "@arcblock/ux": "^2.10.87",
+    "@arcblock/ws": "^1.18.161",
+    "@blocklet/ui-react": "^2.10.87",
     "@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.150",
+    "@ocap/util": "^1.18.161",
     "@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.13",
+    "@blocklet/payment-types": "1.16.16",
     "@storybook/addon-essentials": "^7.6.20",
     "@storybook/addon-interactions": "^7.6.20",
     "@storybook/addon-links": "^7.6.20",
@@ -117,10 +117,11 @@
     "storybook": "^7.6.20",
     "ts-jest": "^29.2.5",
     "type-fest": "^4.23.0",
-    "typescript": "^4.9.5",
+    "typescript": "^5.5.4",
     "unbuild": "^2.0.0",
+    "vite": "^5.3.5",
     "vite-plugin-babel": "^1.2.0",
     "vite-plugin-node-polyfills": "^0.21.0"
   },
-  "gitHead": "5196c900b1ca5b47b23b62d8efb8c67ec456276f"
+  "gitHead": "fdffd2c105f53202dc73f3802d773a6141c5ea73"
 }

package/src/checkout/donate.tsx

@@ -25,7 +25,7 @@ import {
   TableCell,
   TableRow,
   Typography,
-  ButtonProps as MUIButtonProps,
+  type ButtonProps as MUIButtonProps,
 } from '@mui/material';
 import { useMount, useRequest, useSetState } from 'ahooks';
 import omit from 'lodash/omit';
@@ -35,7 +35,7 @@ import { useEffect, useState } from 'react';
 import TxLink from '../components/blockchain/tx';
 import api from '../libs/api';
 import { formatAmount, formatBNStr, formatDateTime, formatError, getCustomerAvatar, lazyLoad } from '../libs/util';
-import { CheckoutProps, PaymentThemeOptions } from '../types';
+import type { CheckoutProps, PaymentThemeOptions } from '../types';
 import CheckoutForm from './form';
 import { PaymentThemeProvider } from '../theme';
 import { usePaymentContext } from '../contexts/payment';
@@ -76,7 +76,7 @@ const createOrUpdateDonation = (settings: DonationSettings, livemode: boolean =
   if (!donationCache[donationKey]) {
     donationCache[donationKey] = api
       .post(`/api/donations?livemode=${livemode}`, omit(settings, ['appearance']))
-      .then((res) => res.data)
+      .then((res: any) => res?.data)
       .finally(() => {
         setTimeout(() => {
           delete donationCache[donationKey];
@@ -92,7 +92,7 @@ const fetchSupporters = (target: string, livemode: boolean = true): Promise<Dona
   if (!supporterCache[target]) {
     supporterCache[target] = api
       .get('/api/donations', { params: { target, livemode } })
-      .then((res) => res.data)
+      .then((res: any) => res?.data)
       .finally(() => {
         setTimeout(() => {
           delete supporterCache[target];

package/src/checkout/form.tsx

@@ -7,7 +7,7 @@ import { joinURL } from 'ufo';
 import api from '../libs/api';
 import { getPrefix, mergeExtraParams } from '../libs/util';
 import Payment from '../payment';
-import { CheckoutContext, CheckoutProps } from '../types';
+import type { CheckoutContext, CheckoutProps } from '../types';
 import { PaymentThemeProvider } from '../theme';
 
 const promises: { [key: string]: Promise<any> } = {};
@@ -15,7 +15,7 @@ const startFromPaymentLink = (id: string, params?: Record<string, any>): Promise
   if (!promises[id]) {
     promises[id] = api
       .post(`/api/checkout-sessions/start/${id}?${mergeExtraParams(params)}`)
-      .then((res) => res.data)
+      .then((res: any) => res?.data)
       .finally(() => {
         setTimeout(() => {
           delete promises[id];

package/src/checkout/table.tsx

@@ -10,7 +10,7 @@ import Livemode from '../components/livemode';
 import PricingTable from '../components/pricing-table';
 import api from '../libs/api';
 import { mergeExtraParams } from '../libs/util';
-import { CheckoutProps } from '../types';
+import type { CheckoutProps } from '../types';
 import CheckoutForm from './form';
 import { PaymentThemeProvider } from '../theme';
 import TruncatedText from '../components/truncated-text';
@@ -58,7 +58,7 @@ function CheckoutTableInner({ id, mode, onPaid, onError, onChange, extraParams,
           currencyId,
         })}`
       )
-      .then((res) => {
+      .then((res: any) => {
         if (mode === 'standalone') {
           let { url } = res.data;
           url = url.indexOf('?') > -1 ? `${url}&currencyId=${currencyId}` : `${url}?currencyId=${currencyId}`;
@@ -68,7 +68,7 @@ function CheckoutTableInner({ id, mode, onPaid, onError, onChange, extraParams,
           setSessionId(res.data.id);
         }
       })
-      .catch((err) => {
+      .catch((err: any) => {
         console.error(err);
         Toast.error(err.message);
       });

package/src/components/country-select.tsx

@@ -1,7 +1,9 @@
 import { useMemo, forwardRef } from 'react';
-import { Box, MenuItem, Select, SxProps, Typography } from '@mui/material';
+import { Box, MenuItem, Select, Typography } from '@mui/material';
 import { useFormContext } from 'react-hook-form';
-import { CountryIso2, FlagEmoji, defaultCountries, parseCountry } from 'react-international-phone';
+import { FlagEmoji, defaultCountries, parseCountry } from 'react-international-phone';
+import type { SxProps } from '@mui/material';
+import type { CountryIso2 } from 'react-international-phone';
 
 export type CountrySelectProps = {
   value: CountryIso2;
@@ -71,7 +73,7 @@ const CountrySelect = forwardRef<HTMLDivElement, CountrySelectProps>(({ value, o
           </Box>
         );
       }}>
-      {defaultCountries.map((c) => {
+      {defaultCountries.map((c: any) => {
         const parsed = parseCountry(c);
         return (
           <MenuItem key={parsed.iso2} value={parsed.iso2}>

package/src/components/input.tsx

@@ -1,7 +1,9 @@
 import React, { forwardRef, useImperativeHandle, useRef } from 'react';
-import { Box, FormLabel, InputAdornment, TextField, TextFieldProps, Typography } from '@mui/material';
+import { Box, FormLabel, InputAdornment, TextField, Typography } from '@mui/material';
 import get from 'lodash/get';
-import { Controller, RegisterOptions, useFormContext } from 'react-hook-form';
+import { Controller, useFormContext } from 'react-hook-form';
+import type { TextFieldProps } from '@mui/material';
+import type { RegisterOptions } from 'react-hook-form';
 
 type InputProps = TextFieldProps & {
   name: string;

package/src/components/livemode.tsx

@@ -1,5 +1,6 @@
 import { useLocaleContext } from '@arcblock/ux/lib/Locale/context';
-import { Chip, ChipOwnProps } from '@mui/material';
+import { Chip } from '@mui/material';
+import type { ChipOwnProps } from '@mui/material';
 
 type Props = {
   color?: string;

package/src/components/pricing-item.tsx

@@ -7,10 +7,10 @@ import Toast from '@arcblock/ux/lib/Toast';
 import { Box } from '@mui/system';
 import api from '../libs/api';
 import { formatError, formatTotalPrice } from '../libs/util';
-import { PricingRenderProps } from '../types';
+import type { PricingRenderProps } from '../types';
 
 const fetchProduct = (productId: string): Promise<TProductExpanded> => {
-  return api.get(`/api/products/${productId}`).then((res) => res.data);
+  return api.get(`/api/products/${productId}`).then((res: any) => res?.data);
 };
 
 export type PricingItemProps = {

package/src/components/status.tsx

@@ -1,4 +1,5 @@
-import { Chip, ChipProps } from '@mui/material';
+import { Chip } from '@mui/material';
+import type { ChipProps } from '@mui/material';
 
 export default function Status(props: ChipProps) {
   return (