@blocklet/payment-react 1.14.20 → 1.14.22

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';
@@ -36,6 +37,7 @@ import api from '../libs/api';
 import { formatAmount, formatBNStr, formatDateTime, formatError, lazyLoad } from '../libs/util';
 import { CheckoutProps } 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;
   };
+  customTheme?: boolean;
 };
 
 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,6 +458,17 @@ export default function CheckoutDonate({
   );
 }
 
+export default function CheckoutDonate(props: DonateProps) {
+  if (props.customTheme) {
+    return <CheckoutDonateInner {...props} />;
+  }
+  return (
+    <PaymentThemeProvider>
+      <CheckoutDonateInner {...props} />
+    </PaymentThemeProvider>
+  );
+}
+
 CheckoutDonate.defaultProps = {
   livemode: true,
   timeout: 5000,

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,7 @@ export default function CheckoutForm({
   goBack,
   extraParams,
   action,
+  customTheme = false,
 }: CheckoutProps) {
   if (!id.startsWith('plink_') && !id.startsWith('cs_')) {
     throw new Error('Either a checkoutSession or a paymentLink id is required.');
@@ -73,6 +75,27 @@ export default function CheckoutForm({
     onError?.(err);
   };
 
+  if (!customTheme) {
+    return (
+      <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}
+        />
+      </PaymentThemeProvider>
+    );
+  }
   return (
     <Payment
       checkoutSession={data?.checkoutSession as TCheckoutSessionExpanded}

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,14 @@ export default function CheckoutTable({ id, mode, onPaid, onError, onChange, ext
     </Box>
   );
 }
+
+export default function CheckoutTable(props: CheckoutProps) {
+  if (props.customTheme) {
+    return <CheckoutTableInner {...props} />;
+  }
+  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',
       }}
     />
   );

package/src/components/table.tsx

@@ -0,0 +1,200 @@
+/* eslint-disable @typescript-eslint/indent */
+import React from 'react';
+import Empty from '@arcblock/ux/lib/Empty';
+import Datatable from '@arcblock/ux/lib/Datatable';
+import { useLocaleContext } from '@arcblock/ux/lib/Locale/context';
+import { styled } from '@mui/system';
+
+import { useMobile } from '../hooks/mobile';
+
+function EmptyStub() {
+  return null;
+}
+
+const Table = React.memo(
+  ({ options, columns, toolbar = true, footer = true, hasRowLink = false, emptyNodeText = '', ...rest }: any) => {
+    const { locale, t } = useLocaleContext();
+    const { isMobile } = useMobile();
+
+    const defaultOptions = {
+      print: false,
+      download: false,
+      filter: false,
+      selectableRows: 'none',
+      rowsPerPage: 10,
+      rowsPerPageOptions: [10, 20, 50, 100],
+      searchDebounceTime: 300,
+      tableBodyHeight: '100%',
+      loading: true,
+    };
+
+    const components: any = {};
+    if (!toolbar) {
+      components.TableToolbar = EmptyStub;
+    }
+    if (!footer) {
+      components.TableFooter = EmptyStub;
+    }
+
+    // components.TableHead = EmptyStub2
+    return (
+      <Wrapped
+        locale={locale}
+        options={{ ...defaultOptions, ...options }}
+        columns={columns.map((x: any) => {
+          x.options = x.options || {};
+          x.options.filter = x.options.filter || false;
+          x.options.sort = x.options.sort || false;
+          return x;
+        })}
+        emptyNode={<Empty>{emptyNodeText || t('empty.records')}</Empty>}
+        {...rest}
+        components={components}
+        hasRowLink={hasRowLink}
+        isMobile={isMobile}
+      />
+    );
+  }
+);
+
+const Wrapped = styled(Datatable)`
+  ${(props) =>
+    props.hasRowLink
+      ? `.MuiTableCell-root {
+    font-size: 1rem !important;
+  }`
+      : ''}
+  .MuiPaper-root {
+    border-radius: 8px;
+    overflow: hidden;
+  }
+  table.MuiTable-root {
+    outline: 1px solid var(--stroke-border-base, #eff1f5);
+    border-radius: var(--radius-m, 8px);
+    overflow: hidden;
+  }
+  [class*='MUIDataTable-responsiveBase'] {
+    outline: 1px solid var(--stroke-border-base, #eff1f5);
+    border-radius: var(--radius-m, 8px);
+  }
+
+  th.MuiTableCell-head {
+    padding: 8px 16px 8px 16px;
+    text-transform: inherit;
+    background: var(--backgrounds-bg-subtle, #f9fafb);
+    border-bottom: none;
+    &:first-of-type {
+      border-top-left-radius: 8px;
+      padding-left: 20px;
+    }
+    &:last-of-type {
+      border-top-right-radius: 8px;
+    }
+  }
+
+  tr.MuiTableRow-root:not(.MuiTableRow-footer):hover {
+    background: #f5f5f5;
+  }
+  tr.MuiTableRow-root:last-of-type td:first-of-type {
+    border-bottom-left-radius: 8px;
+  }
+
+  tr.MuiTableRow-root:last-of-type td:last-of-type {
+    border-bottom-right-radius: 8px;
+  }
+
+  tr.MuiTableRow-root:nth-of-type(even) {
+    background: var(--backgrounds-bg-subtle, #f9fafb);
+  }
+  td.MuiTableCell-root {
+    border-bottom: none;
+    &:first-of-type {
+      padding-left: 20px;
+    }
+    &.MuiTableCell-footer {
+      border: none;
+    }
+  }
+
+  .datatable-footer {
+    .MuiTableRow-root.MuiTableRow-footer {
+      border: none;
+    }
+    table.MuiTable-root {
+      outline: none;
+      overflow: hidden;
+    }
+    .MuiTablePagination-input {
+      background: none;
+    }
+    div.MuiSelect-select {
+      padding: 0 24px 0 0;
+    }
+  }
+
+  th a,
+  td a {
+    text-decoration: none;
+    display: block;
+    color: inherit;
+    &:first-of-type {
+      padding-left: 0;
+    }
+  }
+
+  > div {
+    overflow: auto;
+  }
+  @media (max-width: ${({ theme }) => theme.breakpoints.values.md}px) {
+    th a,
+    td a {
+      text-decoration: none;
+      display: block;
+      color: inherit;
+      padding-top: 0;
+      padding-bottom: 0;
+      padding-right: 0;
+    }
+    tr.MuiTableRow-root {
+      border: none;
+      padding: 20px;
+      display: block;
+    }
+    td.MuiTableCell-root:first-of-type {
+      padding-left: 0;
+      margin-top: 0;
+    }
+    td.MuiTableCell-root {
+      margin: 0;
+      margin-top: 8px;
+      align-items: center;
+      padding: 0;
+      flex-wrap: wrap;
+      flex-direction: ${({ mobileTDFlexDirection = 'column' }) => mobileTDFlexDirection || 'row'};
+      align-items: ${({ mobileTDFlexDirection = 'column' }) =>
+        mobileTDFlexDirection === 'column' ? 'flex-start' : 'center'};
+      justify-content: ${({ mobileTDFlexDirection = 'column' }) =>
+        mobileTDFlexDirection === 'column' ? 'flex-start' : 'space-between'};
+    }
+    td.MuiTableCell-root > div {
+      margin-bottom: 4px;
+    }
+    .MuiTable-root > .MuiTableBody-root > .MuiTableRow-root > td.MuiTableCell-root {
+      display: flex;
+      flex-direction: ${({ mobileTDFlexDirection = 'column' }) => mobileTDFlexDirection || 'row'};
+      align-items: flex-start;
+      justify-content: ${({ mobileTDFlexDirection = 'column' }) =>
+        mobileTDFlexDirection === 'row' ? 'space-between' : 'flex-start'};
+      flex-wrap: ${({ mobileTDFlexDirection = 'column' }) => (mobileTDFlexDirection === 'row' ? 'nowrap' : 'wrap')};
+      word-break: break-all;
+      &.datatables-noprint {
+        justify-content: center;
+      }
+    }
+    [class*='MUIDataTable-responsiveBase'] tr:not([class*='responsiveSimple']) td.MuiTableCell-body > div {
+      width: inherit;
+    }
+  }
+`;
+
+export default Table;

package/src/contexts/payment.tsx

@@ -2,7 +2,7 @@ import type { TPaymentCurrency, TPaymentMethodExpanded } from '@blocklet/payment
 import { Alert } from '@mui/material';
 import { useLocalStorageState, useRequest } from 'ahooks';
 import type { Axios } from 'axios';
-import { createContext, useContext } from 'react';
+import { createContext, useContext, useState } from 'react';
 
 import api from '../libs/api';
 import { getPrefix } from '../libs/util';
@@ -23,6 +23,8 @@ export type PaymentContextType = {
   getMethod: (methodId: string) => TPaymentMethodExpanded | undefined;
   setLivemode: (livemode: boolean) => void;
   api: Axios;
+  payable: boolean;
+  setPayable: (status: boolean) => void;
 };
 
 export type PaymentContextProps = {
@@ -60,6 +62,7 @@ function PaymentProvider({ session, connect, children, baseUrl }: PaymentContext
   const { data, error, run, loading } = useRequest(getSettings);
   const [livemode, setLivemode] = useLocalStorageState('livemode', { defaultValue: true });
   const prefix = getPrefix();
+  const [payable, setPayable] = useState(true);
 
   if (error) {
     return <Alert severity="error">{error.message}</Alert>;
@@ -82,6 +85,8 @@ function PaymentProvider({ session, connect, children, baseUrl }: PaymentContext
         refresh: run,
         setLivemode,
         api,
+        payable,
+        setPayable,
       }}>
       {children}
     </Provider>