@blocklet/payment-react 1.14.21 → 1.14.23

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@blocklet/payment-react",
-  "version": "1.14.21",
+  "version": "1.14.23",
   "description": "Reusable react components for payment kit v2",
   "keywords": [
     "react",
@@ -18,7 +18,7 @@
   "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",
+    "build": "tsc --noEmit && unbuild && node tools/auto-exports.js && npm 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",
@@ -26,7 +26,8 @@
     "test": "node tools/jest.js",
     "coverage": "npm run test -- --coverage",
     "storybook": "storybook dev -p 6006",
-    "build-storybook": "storybook build"
+    "build-storybook": "storybook build",
+    "cpfiles": "copyfiles -u 1 './src/**/*.css' lib/ && copyfiles -u 1 './src/**/*.css' es/"
   },
   "bugs": {
     "url": "https://github.com/blocklet/payment-kit/issues"
@@ -52,15 +53,16 @@
     }
   },
   "dependencies": {
-    "@arcblock/did-connect": "^2.10.11",
-    "@arcblock/ux": "^2.10.11",
-    "@arcblock/ws": "^1.18.127",
+    "@arcblock/did-connect": "^2.10.16",
+    "@arcblock/ux": "^2.10.16",
+    "@arcblock/ws": "^1.18.128",
+    "@blocklet/ui-react": "^2.10.16",
     "@mui/icons-material": "^5.16.6",
     "@mui/lab": "^5.0.0-alpha.173",
     "@mui/material": "^5.16.6",
     "@mui/styles": "^5.16.6",
     "@mui/system": "^5.16.6",
-    "@ocap/util": "^1.18.127",
+    "@ocap/util": "^1.18.128",
     "@stripe/react-stripe-js": "^2.7.3",
     "@stripe/stripe-js": "^2.4.0",
     "@vitejs/plugin-legacy": "^5.4.1",
@@ -91,7 +93,7 @@
     "@babel/core": "^7.25.2",
     "@babel/preset-env": "^7.25.2",
     "@babel/preset-react": "^7.24.7",
-    "@blocklet/payment-types": "1.14.21",
+    "@blocklet/payment-types": "1.14.23",
     "@storybook/addon-essentials": "^7.6.20",
     "@storybook/addon-interactions": "^7.6.20",
     "@storybook/addon-links": "^7.6.20",
@@ -103,14 +105,15 @@
     "@types/react": "^18.3.3",
     "@types/react-dom": "^18.3.0",
     "@vitejs/plugin-legacy": "^5.4.1",
+    "copyfiles": "^2.4.1",
     "eslint": "^8.57.0",
     "glob": "^10.4.5",
     "import-sort-style-module": "^6.0.0",
     "jest": "^29.7.0",
     "prettier": "^3.3.3",
     "prettier-plugin-import-sort": "^0.0.7",
-    "react": "^18.3.1",
-    "react-dom": "^18.3.1",
+    "react": "18.2.0",
+    "react-dom": "18.2.0",
     "rollup-plugin-node-builtins": "^2.1.2",
     "storybook": "^7.6.20",
     "ts-jest": "^29.2.3",
@@ -120,5 +123,5 @@
     "vite-plugin-babel": "^1.2.0",
     "vite-plugin-node-polyfills": "^0.21.0"
   },
-  "gitHead": "48565120b3bdaf21533fe73626db725330c0f374"
+  "gitHead": "868311b6e37e21e5755e7a78daf335f3057dd1c8"
 }

package/src/checkout/donate.tsx

@@ -1,3 +1,4 @@
+/* eslint-disable react/require-default-props */
 /* eslint-disable @typescript-eslint/indent */
 import Dialog from '@arcblock/ux/lib/Dialog';
 import { useLocaleContext } from '@arcblock/ux/lib/Locale/context';
@@ -34,8 +35,9 @@ import { useEffect, useState } from 'react';
 import TxLink from '../components/blockchain/tx';
 import api from '../libs/api';
 import { formatAmount, formatBNStr, formatDateTime, formatError, lazyLoad } from '../libs/util';
-import { CheckoutProps } from '../types';
+import { CheckoutProps, PaymentThemeOptions } from '../types';
 import CheckoutForm from './form';
+import { PaymentThemeProvider } from '../theme';
 
 export type DonateHistory = {
   supporters: TCheckoutSessionExpanded[];
@@ -58,6 +60,7 @@ export type DonateProps = Pick<CheckoutProps, 'onPaid' | 'onError'> & {
   inlineOptions?: {
     button?: ButtonType;
   };
+  theme?: 'default' | 'inherit' | PaymentThemeOptions;
 };
 
 const donationCache: { [key: string]: Promise<TPaymentLink> } = {};
@@ -298,15 +301,7 @@ function useDonation(settings: DonationSettings, livemode: boolean = true, mode
   };
 }
 
-export default function CheckoutDonate({
-  settings,
-  livemode,
-  timeout,
-  onPaid,
-  onError,
-  mode,
-  inlineOptions = {},
-}: DonateProps) {
+function CheckoutDonateInner({ settings, livemode, timeout, onPaid, onError, mode, inlineOptions = {} }: DonateProps) {
   // eslint-disable-line
   const { state, setState, donation, supporters } = useDonation(settings, livemode, mode);
 
@@ -448,7 +443,7 @@ export default function CheckoutDonate({
           showCloseButton
           disableEscapeKeyDown
           onClose={(e: any, reason: string) => setState({ open: reason === 'backdropClick' })}>
-          <Box sx={{ mb: 1, mt: -2, height: '100%' }}>
+          <Box sx={{ mb: 1, height: '100%' }}>
             <CheckoutForm
               id={donation.data?.id}
               onPaid={handlePaid}
@@ -463,7 +458,26 @@ export default function CheckoutDonate({
   );
 }
 
+export default function CheckoutDonate(props: DonateProps) {
+  if (props.theme === 'inherit') {
+    return <CheckoutDonateInner {...props} />;
+  }
+  if (props.theme && typeof props.theme === 'object') {
+    return (
+      <PaymentThemeProvider theme={props.theme}>
+        <CheckoutDonateInner {...props} />
+      </PaymentThemeProvider>
+    );
+  }
+  return (
+    <PaymentThemeProvider>
+      <CheckoutDonateInner {...props} />
+    </PaymentThemeProvider>
+  );
+}
+
 CheckoutDonate.defaultProps = {
+  theme: 'default',
   livemode: true,
   timeout: 5000,
   mode: 'default',

package/src/checkout/form.tsx

@@ -8,6 +8,7 @@ import api from '../libs/api';
 import { getPrefix, mergeExtraParams } from '../libs/util';
 import Payment from '../payment';
 import { CheckoutContext, CheckoutProps } from '../types';
+import { PaymentThemeProvider } from '../theme';
 
 const promises: { [key: string]: Promise<any> } = {};
 const startFromPaymentLink = (id: string, params?: Record<string, any>): Promise<CheckoutContext> => {
@@ -39,6 +40,8 @@ export default function CheckoutForm({
   goBack,
   extraParams,
   action,
+  theme = 'default',
+  ...restProps
 }: CheckoutProps) {
   if (!id.startsWith('plink_') && !id.startsWith('cs_')) {
     throw new Error('Either a checkoutSession or a paymentLink id is required.');
@@ -73,22 +76,67 @@ export default function CheckoutForm({
     onError?.(err);
   };
 
+  if (theme === 'inherit') {
+    return (
+      <Payment
+        checkoutSession={data?.checkoutSession as TCheckoutSessionExpanded}
+        paymentMethods={data?.paymentMethods as TPaymentMethodExpanded[]}
+        paymentIntent={data?.paymentIntent}
+        paymentLink={data?.paymentLink}
+        customer={data?.customer}
+        completed={state.completed}
+        error={apiError || state.appError}
+        onPaid={handlePaid}
+        onError={handleError}
+        onChange={onChange}
+        goBack={goBack}
+        mode={mode as string}
+        action={action}
+        {...restProps}
+      />
+    );
+  }
+  if (theme && typeof theme === 'object') {
+    return (
+      <PaymentThemeProvider theme={theme}>
+        <Payment
+          checkoutSession={data?.checkoutSession as TCheckoutSessionExpanded}
+          paymentMethods={data?.paymentMethods as TPaymentMethodExpanded[]}
+          paymentIntent={data?.paymentIntent}
+          paymentLink={data?.paymentLink}
+          customer={data?.customer}
+          completed={state.completed}
+          error={apiError || state.appError}
+          onPaid={handlePaid}
+          onError={handleError}
+          onChange={onChange}
+          goBack={goBack}
+          mode={mode as string}
+          action={action}
+          {...restProps}
+        />
+      </PaymentThemeProvider>
+    );
+  }
   return (
-    <Payment
-      checkoutSession={data?.checkoutSession as TCheckoutSessionExpanded}
-      paymentMethods={data?.paymentMethods as TPaymentMethodExpanded[]}
-      paymentIntent={data?.paymentIntent}
-      paymentLink={data?.paymentLink}
-      customer={data?.customer}
-      completed={state.completed}
-      error={apiError || state.appError}
-      onPaid={handlePaid}
-      onError={handleError}
-      onChange={onChange}
-      goBack={goBack}
-      mode={mode as string}
-      action={action}
-    />
+    <PaymentThemeProvider>
+      <Payment
+        checkoutSession={data?.checkoutSession as TCheckoutSessionExpanded}
+        paymentMethods={data?.paymentMethods as TPaymentMethodExpanded[]}
+        paymentIntent={data?.paymentIntent}
+        paymentLink={data?.paymentLink}
+        customer={data?.customer}
+        completed={state.completed}
+        error={apiError || state.appError}
+        onPaid={handlePaid}
+        onError={handleError}
+        onChange={onChange}
+        goBack={goBack}
+        mode={mode as string}
+        action={action}
+        {...restProps}
+      />
+    </PaymentThemeProvider>
   );
 }
 

package/src/checkout/table.tsx

@@ -12,6 +12,7 @@ import api from '../libs/api';
 import { mergeExtraParams } from '../libs/util';
 import { CheckoutProps } from '../types';
 import CheckoutForm from './form';
+import { PaymentThemeProvider } from '../theme';
 
 const fetchData = async (id: string): Promise<TPricingTableExpanded> => {
   const { data } = await api.get(`/api/pricing-tables/${id}`);
@@ -25,7 +26,7 @@ const ensureProtocol = (url: string): string => {
   return url;
 };
 
-export default function CheckoutTable({ id, mode, onPaid, onError, onChange, extraParams, goBack }: CheckoutProps) {
+function CheckoutTableInner({ id, mode, onPaid, onError, onChange, extraParams, goBack }: CheckoutProps) {
   if (!id.startsWith('prctbl_')) {
     throw new Error('A valid pricing table id is required.');
   }
@@ -123,3 +124,21 @@ export default function CheckoutTable({ id, mode, onPaid, onError, onChange, ext
     </Box>
   );
 }
+
+export default function CheckoutTable(props: CheckoutProps) {
+  if (props.theme === 'inherit') {
+    return <CheckoutTableInner {...props} />;
+  }
+  if (props.theme && typeof props.theme === 'object') {
+    return (
+      <PaymentThemeProvider theme={props.theme}>
+        <CheckoutTableInner {...props} />
+      </PaymentThemeProvider>
+    );
+  }
+  return (
+    <PaymentThemeProvider>
+      <CheckoutTableInner {...props} />
+    </PaymentThemeProvider>
+  );
+}

package/src/components/blockchain/tx.tsx

@@ -36,8 +36,9 @@ export default function TxLink(props: {
           direction="row"
           alignItems="center"
           justifyContent={props.align === 'left' ? 'flex-start' : 'flex-end'}
+          sx={{ color: 'text.link' }}
           spacing={1}>
-          <Typography component="span" color="primary">
+          <Typography component="span" color="text.link">
             {text.length > 40 ? [text.slice(0, 6), text.slice(-6)].join('...') : text}
           </Typography>
           <OpenInNewOutlined fontSize="small" />

package/src/components/country-select.tsx

@@ -0,0 +1,93 @@
+/* eslint-disable react/prop-types */
+// eslint-disable-next-line @typescript-eslint/no-unused-vars
+import React, { useMemo } 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';
+
+export type CountrySelectProps = {
+  value: CountryIso2;
+  onChange: (value: CountryIso2) => void;
+  name: string;
+  sx?: SxProps;
+};
+
+CountrySelect.defaultProps = {
+  sx: {},
+};
+
+export default function CountrySelect({ value, onChange, name, sx }: CountrySelectProps) {
+  const { setValue } = useFormContext();
+  const countryDetail = useMemo(() => {
+    const item = defaultCountries.find((v) => v[1] === value);
+    return value && item ? parseCountry(item) : { name: '' };
+  }, [value]);
+
+  const onCountryChange = (e: any) => {
+    onChange(e.target.value as CountryIso2);
+    setValue(name, e.target.value);
+  };
+
+  return (
+    <Select
+      MenuProps={{
+        style: {
+          height: '300px',
+          top: '10px',
+        },
+        anchorOrigin: {
+          vertical: 'bottom',
+          horizontal: 'left',
+        },
+        transformOrigin: {
+          vertical: 'top',
+          horizontal: 'left',
+        },
+      }}
+      sx={{
+        width: '100%',
+        // Remove default outline (display only on focus)
+        fieldset: {
+          display: 'none',
+        },
+        '&.Mui-focused:has(div[aria-expanded="false"])': {
+          fieldset: {
+            display: 'block',
+          },
+        },
+        // Update default spacing
+        '.MuiSelect-select': {
+          padding: '8px',
+          paddingRight: '24px !important',
+        },
+        svg: {
+          right: 0,
+        },
+        '.MuiMenuItem-root': {
+          justifyContent: 'flex-start', // 确保内容左对齐
+        },
+        ...sx,
+      }}
+      value={value}
+      onChange={onCountryChange}
+      renderValue={(code) => {
+        return (
+          <Box display="flex" alignItems="center" flexWrap="nowrap" gap={0.5} sx={{ cursor: 'pointer' }}>
+            <FlagEmoji iso2={code} style={{ display: 'flex' }} />
+            <Typography>{countryDetail?.name}</Typography>
+          </Box>
+        );
+      }}>
+      {defaultCountries.map((c) => {
+        const parsed = parseCountry(c);
+        return (
+          <MenuItem key={parsed.iso2} value={parsed.iso2}>
+            <FlagEmoji iso2={parsed.iso2} style={{ marginRight: '8px' }} />
+            <Typography marginRight="8px">{parsed.name}</Typography>
+            <Typography color="gray">+{parsed.dialCode}</Typography>
+          </MenuItem>
+        );
+      })}
+    </Select>
+  );
+}

package/src/components/input.tsx

@@ -1,3 +1,4 @@
+import React, { forwardRef, useImperativeHandle, useRef } from 'react';
 import { Box, FormLabel, InputAdornment, TextField, TextFieldProps, Typography } from '@mui/material';
 import get from 'lodash/get';
 import { Controller, RegisterOptions, useFormContext } from 'react-hook-form';
@@ -11,15 +12,7 @@ type InputProps = TextFieldProps & {
   wrapperStyle?: React.CSSProperties;
 };
 
-FormInput.defaultProps = {
-  label: '',
-  placeholder: '',
-  errorPosition: 'bottom',
-  rules: {},
-  wrapperStyle: {},
-};
-
-export function FormInputError({ error }: { error: string }) {
+function FormInputError({ error }: { error: string }) {
   return (
     <InputAdornment position="end">
       <Typography component="span" color="error">
@@ -29,40 +22,50 @@ export function FormInputError({ error }: { error: string }) {
   );
 }
 
-export default function FormInput({
-  name,
-  label,
-  placeholder,
-  rules,
-  errorPosition,
-  wrapperStyle,
-  ...rest
-}: InputProps) {
-  const { control, formState } = useFormContext();
-  const error = get(formState.errors, name)?.message as string;
-  return (
-    <Controller
-      name={name}
-      control={control}
-      rules={rules}
-      render={({ field }) => (
-        <Box sx={{ width: '100%', ...wrapperStyle }}>
-          {!!label && <FormLabel>{label}</FormLabel>}
-          <TextField
-            fullWidth
-            error={!!get(formState.errors, name)}
-            helperText={errorPosition === 'bottom' && error ? error : ''}
-            placeholder={placeholder}
-            size="small"
-            {...field}
-            {...rest}
-            InputProps={Object.assign(
-              rest.InputProps || {},
-              errorPosition === 'right' && error ? { endAdornment: <FormInputError error={error} /> } : {}
-            )}
-          />
-        </Box>
-      )}
-    />
-  );
-}
+const FormInput = forwardRef<HTMLInputElement, InputProps>(
+  ({ name, label, placeholder, rules, errorPosition, wrapperStyle, ...rest }, ref) => {
+    const { control, formState } = useFormContext();
+    const inputRef = useRef<HTMLInputElement | null>(null);
+    useImperativeHandle(ref, () => {
+      return inputRef.current as HTMLInputElement;
+    });
+    const error = get(formState.errors, name)?.message as string;
+
+    return (
+      <Controller
+        name={name}
+        control={control}
+        rules={rules}
+        render={({ field }) => (
+          <Box sx={{ width: '100%', ...wrapperStyle }}>
+            {!!label && <FormLabel sx={{ color: 'text.primary' }}>{label}</FormLabel>}
+            <TextField
+              fullWidth
+              error={!!get(formState.errors, name)}
+              helperText={errorPosition === 'bottom' && error ? error : ''}
+              placeholder={placeholder}
+              size="small"
+              {...field}
+              {...rest}
+              inputRef={inputRef}
+              InputProps={Object.assign(
+                rest.InputProps || {},
+                errorPosition === 'right' && error ? { endAdornment: <FormInputError error={error} /> } : {}
+              )}
+            />
+          </Box>
+        )}
+      />
+    );
+  }
+);
+
+FormInput.defaultProps = {
+  label: '',
+  placeholder: '',
+  errorPosition: 'bottom',
+  rules: {},
+  wrapperStyle: {},
+};
+
+export default FormInput;

package/src/components/livemode.tsx

@@ -12,6 +12,7 @@ export default function Livemode({ color, backgroundColor, sx }: Props) {
     <Chip
       label={t('common.livemode')}
       size="small"
+      color="warning"
       sx={{
         ml: 2,
         height: 18,

package/src/components/pricing-table.tsx

@@ -276,7 +276,6 @@ export default function PricingTable({ table, alignItems, interval, mode, onSele
                         color="text.primary"
                         fontWeight={600}
                         sx={{
-                          color: '#4B5563',
                           fontSize: '18px !important',
                           fontWeight: '600',
                         }}>
@@ -303,7 +302,6 @@ export default function PricingTable({ table, alignItems, interval, mode, onSele
                       color="text.secondary"
                       sx={{
                         marginTop: '0px !important',
-                        color: '#4b5563',
                         fontWeight: '400',
                         fontSize: '16px',
                         textAlign: 'left',

package/src/components/status.tsx

@@ -4,14 +4,13 @@ export default function Status(props: ChipProps) {
   return (
     <Chip
       size="small"
-      variant="outlined"
+      variant="filled"
       {...props}
       sx={{
         ...(props.sx || {}),
         borderRadius: '4px',
         height: 20,
         textTransform: 'capitalize',
-        marginRight: '10px',
       }}
     />
   );