@blocklet/payment-react 1.16.12 → 1.16.16

package/src/components/switch-button.tsx

@@ -1,48 +1,53 @@
 import { Switch } from '@mui/material';
 import { styled } from '@mui/system';
 import type { LiteralUnion } from 'type-fest';
+import type { SwitchProps as MuiSwitchProps } from '@mui/material';
 
-type SwitchProps = {
+type CustomSwitchProps = {
   variant?: LiteralUnion<'success' | 'error' | 'warning' | 'info' | 'primary' | 'secondary', string>;
-};
+} & MuiSwitchProps;
 
-export default styled(Switch)<SwitchProps>(({ variant = 'success', theme }) => ({
-  width: 28,
-  height: 16,
-  padding: 0,
-  display: 'inline-flex',
-  '&:active': {
-    '& .MuiSwitch-thumb': {
-      width: 15,
-    },
-    '& .MuiSwitch-switchBase.Mui-checked': {
-      transform: 'translateX(9px)',
+const SwitchButton: React.FC<CustomSwitchProps> = styled(Switch)<CustomSwitchProps>(
+  ({ variant = 'success', theme }) => ({
+    width: 28,
+    height: 16,
+    padding: 0,
+    display: 'inline-flex',
+    '&:active': {
+      '& .MuiSwitch-thumb': {
+        width: 15,
+      },
+      '& .MuiSwitch-switchBase.Mui-checked': {
+        transform: 'translateX(9px)',
+      },
     },
-  },
-  '& .MuiSwitch-switchBase': {
-    padding: 2,
-    '&.Mui-checked': {
-      transform: 'translateX(12px)',
-      color: '#fff',
-      '& + .MuiSwitch-track': {
-        opacity: 1,
-        backgroundColor: theme.palette[variant]?.light,
+    '& .MuiSwitch-switchBase': {
+      padding: 2,
+      '&.Mui-checked': {
+        transform: 'translateX(12px)',
+        color: '#fff',
+        '& + .MuiSwitch-track': {
+          opacity: 1,
+          backgroundColor: theme.palette[variant]?.light,
+        },
       },
     },
-  },
-  '& .MuiSwitch-thumb': {
-    boxShadow: '0 2px 4px 0 rgb(0 35 11 / 20%)',
-    width: 12,
-    height: 12,
-    borderRadius: 6,
-    transition: (theme.transitions as any)?.create(['width'], {
-      duration: 200,
-    }),
-  },
-  '& .MuiSwitch-track': {
-    borderRadius: 16 / 2,
-    opacity: 1,
-    backgroundColor: theme.palette.mode === 'dark' ? 'rgba(255,255,255,.35)' : 'rgba(0,0,0,.25)',
-    boxSizing: 'border-box',
-  },
-}));
+    '& .MuiSwitch-thumb': {
+      boxShadow: '0 2px 4px 0 rgb(0 35 11 / 20%)',
+      width: 12,
+      height: 12,
+      borderRadius: 6,
+      transition: (theme.transitions as any)?.create(['width'], {
+        duration: 200,
+      }),
+    },
+    '& .MuiSwitch-track': {
+      borderRadius: 16 / 2,
+      opacity: 1,
+      backgroundColor: theme.palette.mode === 'dark' ? 'rgba(255,255,255,.35)' : 'rgba(0,0,0,.25)',
+      boxSizing: 'border-box',
+    },
+  })
+);
+
+export default SwitchButton;

package/src/components/truncated-text.tsx

@@ -1,4 +1,5 @@
-import { Tooltip, TooltipProps } from '@mui/material';
+import { Tooltip } from '@mui/material';
+import type { TooltipProps } from '@mui/material';
 import { tooltipClasses } from '@mui/material/Tooltip';
 import { styled } from '@mui/system';
 import { truncateText } from '../libs/util';

package/src/contexts/payment.tsx

@@ -50,11 +50,11 @@ const getSettings = () => {
   if (!settingsPromise) {
     settingsPromise = api
       .get('/api/settings', { params: { livemode } })
-      .then(({ data }) => {
+      .then(({ data }: any) => {
         sessionStorage.setItem(cacheKey, JSON.stringify(data));
         return data;
       })
-      .catch((error) => {
+      .catch((error: any) => {
         throw error;
       })
       .finally(() => {

package/src/libs/api.ts

@@ -8,7 +8,7 @@ import { getPrefix } from './util';
 const api = createAxios();
 
 api.interceptors.request.use(
-  (config) => {
+  (config: any) => {
     const prefix = getPrefix();
     config.baseURL = prefix || '';
 
@@ -23,7 +23,7 @@ api.interceptors.request.use(
 
     return config;
   },
-  (err) => Promise.reject(err)
+  (err: any) => Promise.reject(err)
 );
 
 export default api;

package/src/libs/util.ts

@@ -15,7 +15,6 @@ import type {
   TSubscriptionExpanded,
   TSubscriptionItemExpanded,
 } from '@blocklet/payment-types';
-import type { TComponent } from '@blocklet/sdk/lib/config';
 import { BN, fromUnitToToken } from '@ocap/util';
 import omit from 'lodash/omit';
 import trimEnd from 'lodash/trimEnd';
@@ -27,7 +26,7 @@ import { joinURL } from 'ufo';
 
 import { t } from '../locales';
 import dayjs from './dayjs';
-import { ActionProps, PricingRenderProps } from '../types';
+import type { ActionProps, PricingRenderProps } from '../types';
 
 export const PAYMENT_KIT_DID = 'z2qaCNvKMv5GjouKdcDWexv6WqtHbpNPQDnAk';
 
@@ -54,7 +53,7 @@ export const getPrefix = (): string => {
   if (componentId === PAYMENT_KIT_DID) {
     return joinURL(baseUrl, prefix);
   }
-  const component = (window.blocklet?.componentMountPoints || []).find((x: TComponent) => x.did === PAYMENT_KIT_DID);
+  const component = (window.blocklet?.componentMountPoints || []).find((x: any) => x?.did === PAYMENT_KIT_DID);
   if (component) {
     return joinURL(baseUrl, component.mountPoint);
   }
@@ -774,7 +773,7 @@ export function findCurrency(methods: TPaymentMethodExpanded[], currencyId: stri
 }
 
 export function isValidCountry(code: string) {
-  return defaultCountries.some((x) => x[1] === code);
+  return defaultCountries.some((x: any) => x[1] === code);
 }
 
 export function stopEvent(e: React.SyntheticEvent<any>) {
@@ -874,7 +873,7 @@ export const mergeExtraParams = (extra: Record<string, any> = {}) => {
   return params.toString();
 };
 
-export const flattenPaymentMethods = (methods: TPaymentMethodExpanded[] = []) => {
+export const flattenPaymentMethods = (methods: TPaymentMethodExpanded[] = []): TPaymentCurrency[] => {
   const out: TPaymentCurrency[] = [];
 
   methods.forEach((method: any) => {

package/src/payment/amount.tsx

@@ -1,4 +1,5 @@
-import { Typography, TypographyProps } from '@mui/material';
+import { Typography } from '@mui/material';
+import type { TypographyProps } from '@mui/material';
 
 type Props = { amount: string } & TypographyProps;
 

package/src/payment/form/address.tsx

@@ -1,5 +1,6 @@
 import { useLocaleContext } from '@arcblock/ux/lib/Locale/context';
-import { Fade, FormLabel, InputAdornment, Stack, SxProps } from '@mui/material';
+import { Fade, FormLabel, InputAdornment, Stack } from '@mui/material';
+import type { SxProps } from '@mui/material';
 import { Controller, useFormContext } from 'react-hook-form';
 import FormInput from '../../components/input';
 import CountrySelect from '../../components/country-select';

package/src/payment/form/index.tsx

@@ -34,7 +34,7 @@ import {
   getQueryParams,
   getStatementDescriptor,
 } from '../../libs/util';
-import { CheckoutCallbacks, CheckoutContext } from '../../types';
+import type { CheckoutCallbacks, CheckoutContext } from '../../types';
 import AddressForm from './address';
 import CurrencySelector from './currency';
 import PhoneInput from './phone';
@@ -59,6 +59,7 @@ const waitForCheckoutComplete = async (sessionId: string) => {
       result = data;
 
       return (
+        // eslint-disable-next-line @typescript-eslint/return-await
         data.checkoutSession?.status === 'complete' &&
         ['paid', 'no_payment_required'].includes(data.checkoutSession?.payment_status)
       );

package/src/payment/form/phone.tsx

@@ -3,7 +3,8 @@ import { InputAdornment } from '@mui/material';
 import omit from 'lodash/omit';
 import { useEffect } from 'react';
 import { useFormContext, useWatch } from 'react-hook-form';
-import { CountryIso2, defaultCountries, usePhoneInput } from 'react-international-phone';
+import { defaultCountries, usePhoneInput } from 'react-international-phone';
+import type { CountryIso2 } from 'react-international-phone';
 
 import FormInput from '../../components/input';
 import { isValidCountry } from '../../libs/util';
@@ -18,7 +19,7 @@ export default function PhoneInput({ ...props }) {
     defaultCountry: isValidCountry(values[countryFieldName]) ? values[countryFieldName] : 'us',
     value: values[props.name] || '',
     countries: defaultCountries,
-    onChange: (data) => {
+    onChange: (data: any) => {
       setValue(props.name, data.phone);
       setValue(countryFieldName, data.country);
     },

package/src/payment/index.tsx

@@ -12,7 +12,7 @@ import type {
   TPaymentMethodExpanded,
 } from '@blocklet/payment-types';
 import { ArrowBackOutlined } from '@mui/icons-material';
-import { Box, Fade, Stack } from '@mui/material';
+import { Box, Fade, Stack, type BoxProps } from '@mui/material';
 import { styled } from '@mui/system';
 import { fromTokenToUnit } from '@ocap/util';
 import { useSetState } from 'ahooks';
@@ -31,7 +31,7 @@ import {
   isMobileSafari,
   isValidCountry,
 } from '../libs/util';
-import { CheckoutCallbacks, CheckoutContext, CheckoutFormData } from '../types';
+import type { CheckoutCallbacks, CheckoutContext, CheckoutFormData } from '../types';
 import PaymentError from './error';
 import CheckoutFooter from './footer';
 import PaymentForm from './form';
@@ -470,7 +470,8 @@ export default function Payment({
 
 type MainProps = CheckoutContext & CheckoutCallbacks & { completed?: boolean; showCheckoutSummary?: boolean };
 
-export const Root = styled(Box)<{ mode: LiteralUnion<'standalone' | 'inline' | 'popup', string> }>`
+type RootProps = { mode: LiteralUnion<'standalone' | 'inline' | 'popup', string> } & BoxProps;
+export const Root: React.FC<RootProps> = styled(Box)<RootProps>`
   box-sizing: border-box;
   display: flex;
   flex-direction: column;

package/src/payment/summary.tsx

@@ -2,18 +2,8 @@ import { useLocaleContext } from '@arcblock/ux/lib/Locale/context';
 import type { DonationSettings, TLineItemExpanded, TPaymentCurrency } from '@blocklet/payment-types';
 import { HelpOutline } from '@mui/icons-material';
 import { LoadingButton } from '@mui/lab';
-import {
-  Box,
-  Divider,
-  Fade,
-  Grow,
-  Stack,
-  Tooltip,
-  Typography,
-  Collapse,
-  IconButton,
-  IconButtonProps,
-} from '@mui/material';
+import { Box, Divider, Fade, Grow, Stack, Tooltip, Typography, Collapse, IconButton } from '@mui/material';
+import type { IconButtonProps } from '@mui/material';
 import { BN, fromTokenToUnit, fromUnitToToken } from '@ocap/util';
 import { useRequest, useSetState } from 'ahooks';
 import noop from 'lodash/noop';

package/src/theme/index.tsx

@@ -7,7 +7,7 @@ import React from 'react';
 
 import { typography } from './typography';
 import './index.css';
-import { PaymentThemeOptions } from '../types';
+import type { PaymentThemeOptions } from '../types';
 
 export { typography };
 

package/src/types/index.ts

@@ -6,8 +6,8 @@ import type {
   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;