@blocklet/payment-react 1.18.0 → 1.18.2

package/src/payment/form/index.tsx

@@ -1,3 +1,4 @@
+/* eslint-disable @typescript-eslint/indent */
 import 'react-international-phone/style.css';
 
 import { useLocaleContext } from '@arcblock/ux/lib/Locale/context';
@@ -10,8 +11,7 @@ import type {
   TPaymentIntent,
   TPaymentMethodExpanded,
 } from '@blocklet/payment-types';
-import { LoadingButton } from '@mui/lab';
-import { Box, Divider, Fade, FormLabel, Stack, Typography } from '@mui/material';
+import { Box, Button, CircularProgress, Divider, Fade, FormLabel, Stack, Typography } from '@mui/material';
 import { useMemoizedFn, useSetState } from 'ahooks';
 import pWaitFor from 'p-wait-for';
 import { useEffect, useMemo, useRef, useState } from 'react';
@@ -42,7 +42,7 @@ import StripeCheckout from './stripe';
 import { useMobile } from '../../hooks/mobile';
 import { validatePhoneNumber } from '../../libs/phone-validator';
 
-const waitForCheckoutComplete = async (sessionId: string) => {
+export const waitForCheckoutComplete = async (sessionId: string) => {
   let result: CheckoutContext;
 
   await pWaitFor(
@@ -71,14 +71,19 @@ const waitForCheckoutComplete = async (sessionId: string) => {
   return result;
 };
 
-const hasDidWallet = (user: any) => {
+export const hasDidWallet = (user: any) => {
   const connected = user?.connectedAccounts || user?.extraConfigs?.connectedAccounts || [];
   return connected.some((x: any) => x.provider === 'wallet');
 };
 
-type PageData = CheckoutContext & CheckoutCallbacks;
+type PageData = CheckoutContext &
+  CheckoutCallbacks & {
+    onlyShowBtn?: boolean;
+  };
 
-PaymentForm.defaultProps = {};
+PaymentForm.defaultProps = {
+  onlyShowBtn: false,
+};
 
 // FIXME: https://stripe.com/docs/elements/address-element
 // TODO: https://country-regions.github.io/react-country-region-selector/
@@ -96,6 +101,7 @@ export default function PaymentForm({
   // mode,
   action,
   currencyId,
+  onlyShowBtn,
 }: PageData) {
   // const theme = useTheme();
   const { t } = useLocaleContext();
@@ -398,6 +404,47 @@ export default function PaymentForm({
     setState({ stripePaying: false });
   };
 
+  if (onlyShowBtn) {
+    return (
+      <>
+        <Box className="cko-payment-submit-btn">
+          <Button
+            variant="contained"
+            color="primary"
+            size="large"
+            className="cko-submit-button"
+            onClick={() => {
+              if (state.submitting || state.paying) {
+                return;
+              }
+              onAction();
+            }}
+            fullWidth
+            disabled={state.stripePaying || !quantityInventoryStatus || !payable}>
+            {(state.submitting || state.paying) && (
+              <CircularProgress size={16} sx={{ mr: 0.5, color: 'var(--foregrounds-fg-on-color, #fff)' }} />
+            )}
+            {state.submitting || state.paying ? t('payment.checkout.processing') : buttonText}
+          </Button>
+        </Box>
+        {state.customerLimited && (
+          <ConfirmDialog
+            onConfirm={() =>
+              window.open(
+                joinURL(getPrefix(), `/customer/invoice/past-due?referer=${encodeURIComponent(window.location.href)}`),
+                '_self'
+              )
+            }
+            onCancel={() => setState({ customerLimited: false })}
+            confirm={t('payment.customer.pastDue.alert.confirm')}
+            title={t('payment.customer.pastDue.alert.title')}
+            message={t('payment.customer.pastDue.alert.description')}
+            color="primary"
+          />
+        )}
+      </>
+    );
+  }
   return (
     <>
       <Fade in>
@@ -498,20 +545,28 @@ export default function PaymentForm({
         </Stack>
       </Fade>
       <Divider sx={{ mt: 2.5, mb: 2.5 }} />
+
       <Fade in>
         <Stack className="cko-payment-submit">
           <Box className="cko-payment-submit-btn">
-            <LoadingButton
+            <Button
               variant="contained"
               color="primary"
               size="large"
               className="cko-submit-button"
-              onClick={onAction}
+              onClick={() => {
+                if (state.submitting || state.paying) {
+                  return;
+                }
+                onAction();
+              }}
               fullWidth
-              disabled={state.submitting || state.paying || state.stripePaying || !quantityInventoryStatus || !payable}
-              loading={state.submitting || state.paying}>
+              disabled={state.stripePaying || !quantityInventoryStatus || !payable}>
+              {(state.submitting || state.paying) && (
+                <CircularProgress size={16} sx={{ mr: 0.5, color: 'var(--foregrounds-fg-on-color, #fff)' }} />
+              )}
               {state.submitting || state.paying ? t('payment.checkout.processing') : buttonText}
-            </LoadingButton>
+            </Button>
           </Box>
 
           {['subscription', 'setup'].includes(checkoutSession.mode) && (

package/src/payment/product-donation.tsx

@@ -1,10 +1,9 @@
 import { useLocaleContext } from '@arcblock/ux/lib/Locale/context';
 import type { DonationSettings, TLineItemExpanded, TPaymentCurrency } from '@blocklet/payment-types';
-import { Box, Card, CardActionArea, FormControlLabel, Stack, TextField, Typography } from '@mui/material';
+import { Avatar, Box, Card, CardActionArea, Grid, Stack, TextField, Typography } from '@mui/material';
 import { useSetState } from 'ahooks';
-import { useEffect } from 'react';
+import { useEffect, useRef } from 'react';
 
-import Switch from '../components/switch-button';
 import { formatAmountPrecisionLimit } from '../libs/util';
 import { usePaymentContext } from '../contexts/payment';
 import { usePreventWheel } from '../hooks/scroll';
@@ -23,13 +22,17 @@ export default function ProductDonation({
   const { t, locale } = useLocaleContext();
   const { setPayable } = usePaymentContext();
   usePreventWheel();
-  const preset = settings.amount.preset || settings.amount.presets?.[0] || '0';
+  const presets = settings?.amount?.presets || [];
+  const preset = settings?.amount?.preset || presets?.[0] || '0';
+  const supportPreset = presets.length > 0;
+  const supportCustom = !!settings?.amount?.custom;
   const [state, setState] = useSetState({
     selected: preset,
     input: '',
-    custom: settings.amount.presets?.length === 0,
+    custom: !supportPreset,
     error: '',
   });
+  const customInputRef = useRef<HTMLInputElement>(null);
 
   // Set default amount
   useEffect(() => {
@@ -42,7 +45,16 @@ export default function ProductDonation({
     }
   }, [settings.amount.preset, settings.amount.presets]); // eslint-disable-line
 
+  useEffect(() => {
+    if (state.custom) {
+      setTimeout(() => {
+        customInputRef.current?.focus();
+      }, 0);
+    }
+  }, [state.custom]);
+
   const handleSelect = (amount: string) => {
+    setPayable(true);
     setState({ selected: amount, custom: false, error: '' });
     onChange({ priceId: item.price_id, amount });
   };
@@ -69,71 +81,114 @@ export default function ProductDonation({
     onChange({ priceId: item.price_id, amount: value });
   };
 
-  const handleToggle = (event: any) => {
-    if (event.target.checked) {
-      setState({ custom: true, input: state.selected, error: '' });
-    } else {
-      setPayable(true);
-      handleSelect(preset);
+  const handleCustomSelect = () => {
+    setState({ custom: true, error: '' });
+    if (!state.input) {
+      setPayable(false);
     }
   };
 
   return (
     <Box display="flex" flexDirection="column" alignItems="flex-start" gap={1.5}>
-      {settings.amount.custom && preset !== '0' && (
-        <FormControlLabel
-          control={<Switch checked={state.custom} sx={{ marginRight: 0.4 }} onChange={handleToggle} />}
-          label={state.custom ? t('payment.checkout.donation.select') : t('payment.checkout.donation.custom')}
-          sx={{ marginRight: 2, marginLeft: 0.5, color: 'text.lighter' }}
-        />
-      )}
-      {!state.custom && (
-        <Box display="flex" flexWrap="wrap" alignItems="center" gap={1.5}>
+      {supportPreset && (
+        <Grid container spacing={2}>
           {settings.amount.presets &&
             settings.amount.presets.length > 0 &&
             settings.amount.presets.map((amount) => (
+              <Grid item xs={6} sm={3} key={amount}>
+                <Card
+                  key={amount}
+                  variant="outlined"
+                  sx={{
+                    minWidth: 115,
+                    textAlign: 'center',
+                    transition: 'all 0.3s',
+                    cursor: 'pointer',
+                    '&:hover': {
+                      transform: 'translateY(-4px)',
+                      boxShadow: 3,
+                    },
+                    height: '42px',
+                    ...(state.selected === amount && !state.custom
+                      ? { borderColor: 'primary.main', borderWidth: 1 }
+                      : {}),
+                  }}>
+                  <CardActionArea onClick={() => handleSelect(amount)}>
+                    <Stack
+                      direction="row"
+                      sx={{ py: 1.5, px: 1.5 }}
+                      spacing={0.5}
+                      alignItems="center"
+                      justifyContent="center">
+                      <Avatar src={currency?.logo} sx={{ width: 16, height: 16, mr: 0.5 }} alt={currency?.symbol} />
+                      <Typography
+                        component="strong"
+                        lineHeight={1}
+                        variant="h3"
+                        sx={{ fontVariantNumeric: 'tabular-nums', fontWeight: 400 }}>
+                        {amount}
+                      </Typography>
+                      <Typography lineHeight={1} fontSize={14} color="text.secondary">
+                        {currency?.symbol}
+                      </Typography>
+                    </Stack>
+                  </CardActionArea>
+                </Card>
+              </Grid>
+            ))}
+          {supportCustom && (
+            <Grid item xs={6} sm={3} key="custom">
               <Card
-                key={amount}
+                key="custom"
                 variant="outlined"
                 sx={{
-                  minWidth: 115,
                   textAlign: 'center',
-                  ...(state.selected === amount && !state.custom ? { borderColor: 'primary.main' } : {}),
+                  transition: 'all 0.3s',
+                  cursor: 'pointer',
+                  '&:hover': {
+                    transform: 'translateY(-4px)',
+                    boxShadow: 3,
+                  },
+                  height: '42px',
+                  ...(state.custom ? { borderColor: 'primary.main', borderWidth: 1 } : {}),
                 }}>
-                <CardActionArea onClick={() => handleSelect(amount)}>
+                <CardActionArea onClick={() => handleCustomSelect()}>
                   <Stack
                     direction="row"
-                    sx={{ py: 1, px: 0.5 }}
+                    sx={{ py: 1.5, px: 1.5 }}
                     spacing={0.5}
-                    alignItems="flex-end"
+                    alignItems="center"
                     justifyContent="center">
-                    <Typography
-                      component="strong"
-                      lineHeight={1}
-                      variant="h3"
-                      sx={{ fontVariantNumeric: 'tabular-nums', fontWeight: 400 }}>
-                      {amount}
+                    <Typography variant="h3" lineHeight={1} sx={{ fontWeight: 400 }}>
+                      {t('common.custom')}
                     </Typography>
-                    <Typography component="small" lineHeight={1} fontSize={12}>
-                      ABT
-                    </Typography>{' '}
                   </Stack>
                 </CardActionArea>
               </Card>
-            ))}
-        </Box>
+            </Grid>
+          )}
+        </Grid>
       )}
       {state.custom && (
         <TextField
-          label={preset !== '0' ? null : t('payment.checkout.donation.custom')}
           type="number"
           value={state.input}
           onChange={handleInput}
-          inputProps={{ min: settings.amount.minimum, max: settings.amount.maximum }}
           margin="none"
           fullWidth
           error={!!state.error}
           helperText={state.error}
+          inputRef={customInputRef}
+          // eslint-disable-next-line react/jsx-no-duplicate-props
+          InputProps={{
+            endAdornment: (
+              <Stack direction="row" spacing={0.5} alignItems="center" sx={{ ml: 1 }}>
+                <Avatar src={currency?.logo} sx={{ width: 16, height: 16 }} alt={currency?.symbol} />
+                <Typography>{currency?.symbol}</Typography>
+              </Stack>
+            ),
+            autoComplete: 'off',
+          }}
           sx={{
             mt: preset !== '0' ? 0 : 1,
           }}

package/src/payment/skeleton/donation.tsx

@@ -0,0 +1,35 @@
+import { Box, Divider, Fade, Skeleton, Stack } from '@mui/material';
+
+export default function DonationSkeleton() {
+  return (
+    <Fade in>
+      <Stack direction="column">
+        <Skeleton variant="text" sx={{ fontSize: '2rem', width: '40%' }} />
+        <Skeleton sx={{ mt: 2 }} variant="rounded" height={80} />
+        <Divider
+          sx={{
+            mt: {
+              xs: '16px',
+              md: '16px',
+            },
+            mb: {
+              xs: '16px',
+              md: '16px',
+            },
+          }}
+        />
+        <Stack direction="row" justifyContent="space-between" spacing={2}>
+          <Skeleton variant="text" sx={{ fontSize: '1.5rem', width: '40%' }} />
+          <Box display="flex" alignItems="center" gap={2}>
+            <Box>
+              <Skeleton height={60} width={80} />
+            </Box>
+            <Box>
+              <Skeleton height={60} width={120} />
+            </Box>
+          </Box>
+        </Stack>
+      </Stack>
+    </Fade>
+  );
+}

package/src/theme/index.tsx

@@ -48,6 +48,9 @@ export function PaymentThemeProvider({
               minHeight: '1.65em',
               lineHeight: '1.65em',
             },
+            '&.Mui-focused .MuiOutlinedInput-notchedOutline': {
+              borderWidth: '1px',
+            },
           },
         },
       },
@@ -121,6 +124,9 @@ export function PaymentThemeProvider({
       },
       MuiPopover: {
         styleOverrides: {
+          root: {
+            zIndex: 1200,
+          },
           paper: ({ theme }) => ({
             border: `1px solid ${theme.palette.divider}`,
             boxShadow: '0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1)',
@@ -241,6 +247,13 @@ export function PaymentThemeProvider({
           },
         },
       },
+      MuiDialog: {
+        styleOverrides: {
+          root: {
+            zIndex: 1200,
+          },
+        },
+      },
     },
   };
 

package/src/types/index.ts

@@ -46,6 +46,8 @@ export type CheckoutProps = Partial<CheckoutCallbacks> & {
   action?: string;
   mode?: LiteralUnion<'standalone' | 'inline' | 'popup' | 'inline-minimal' | 'popup-minimal', string>;
   theme?: 'default' | 'inherit' | PaymentThemeOptions;
+  formType?: 'donation' | 'payment';
+  formRender?: Record<string, any>;
 };
 
 export type CheckoutCallbacks = {