payment-kit 1.18.24 → 1.18.26

package/src/components/customer/notification-preference.tsx

@@ -0,0 +1,428 @@
+import React, { useEffect, useState, useRef } from 'react';
+import Dialog from '@arcblock/ux/lib/Dialog';
+import { useLocaleContext } from '@arcblock/ux/lib/Locale/context';
+import { NotificationsOutlined, DateRangeOutlined } from '@mui/icons-material';
+import {
+  Button,
+  CircularProgress,
+  Stack,
+  Typography,
+  FormControl,
+  Select,
+  MenuItem,
+  TextField,
+  Box,
+  Paper,
+  Alert,
+  Popper,
+  ClickAwayListener,
+} from '@mui/material';
+import { useRequest } from 'ahooks';
+import { FormProvider, useForm, Controller, Control } from 'react-hook-form';
+import { useMobile } from '@blocklet/payment-react';
+import api from '../../libs/api';
+
+export type NotificationFrequency = 'default' | 'daily' | 'weekly' | 'monthly';
+
+export interface NotificationPreferences {
+  notification: {
+    frequency: NotificationFrequency;
+    schedule?: {
+      time: string;
+      date?: number;
+    };
+  };
+}
+
+interface NotificationPreferenceDialogProps {
+  open: boolean;
+  onClose: () => void;
+}
+
+const fetchPreferences = async () => {
+  const { data } = await api.get('/api/customers/me');
+  return data.preference || { notification: { frequency: 'default' } };
+};
+
+const updatePreferences = async (preferences: NotificationPreferences) => {
+  const { data } = await api.put('/api/customers/preference', preferences);
+  return data;
+};
+
+const validateTimeFormat = (time: string) => {
+  const timeRegex = /^([01]?[0-9]|2[0-3]):[0-5][0-9]$/;
+  return timeRegex.test(time);
+};
+
+function TimeSelector({
+  name,
+  control,
+  required,
+  timeFormatErrorMessage,
+}: {
+  name: string;
+  control: Control<any>;
+  required: boolean;
+  timeFormatErrorMessage: string;
+}) {
+  return (
+    <Controller
+      name={name}
+      control={control}
+      rules={{
+        required,
+        validate: (value) => validateTimeFormat(value) || timeFormatErrorMessage,
+      }}
+      render={({ field, fieldState }) => (
+        <TextField
+          type="time"
+          size="small"
+          sx={{
+            minWidth: 'fit-content',
+          }}
+          {...field}
+          error={!!fieldState.error}
+          helperText={fieldState.error?.message}
+        />
+      )}
+    />
+  );
+}
+
+DaySelector.defaultProps = {
+  onBlur: () => {},
+};
+
+function DaySelector({
+  value,
+  onChange,
+  onBlur,
+}: {
+  value: number;
+  onChange: (day: number) => void;
+  onBlur?: () => void;
+}) {
+  const { t } = useLocaleContext();
+  const [open, setOpen] = useState(false);
+  const anchorRef = useRef<HTMLButtonElement>(null);
+
+  const handleClickAway = () => {
+    setOpen(false);
+    onBlur?.();
+  };
+
+  return (
+    <Box>
+      <Button
+        ref={anchorRef}
+        variant="outlined"
+        onClick={() => setOpen(!open)}
+        sx={{
+          minWidth: 'fit-content',
+          display: 'flex',
+          alignItems: 'center',
+          justifyContent: 'space-between',
+          backgroundColor: 'var(--backgrounds-bg-field)',
+          '&:hover, &:focus': {
+            borderColor: 'primary.main',
+          },
+        }}
+        size="large"
+        startIcon={<DateRangeOutlined fontSize="small" color="action" sx={{ fontSize: '1rem !important' }} />}
+        endIcon={
+          <Typography
+            variant="caption"
+            color="text.secondary"
+            sx={{ fontSize: '0.75rem !important', lineHeight: 'normal' }}>
+            {t('notification.preferences.day')}
+          </Typography>
+        }>
+        {value || 1}
+      </Button>
+
+      <Popper
+        open={open}
+        anchorEl={anchorRef.current}
+        placement="bottom-start"
+        style={{ zIndex: 1300 }}
+        modifiers={[
+          {
+            name: 'offset',
+            options: {
+              offset: [0, 8],
+            },
+          },
+        ]}>
+        <ClickAwayListener onClickAway={handleClickAway}>
+          <Paper
+            variant="outlined"
+            sx={{
+              p: 1,
+              borderRadius: 1,
+              width: '280px',
+              boxShadow: 3,
+            }}>
+            <Box
+              sx={{
+                display: 'grid',
+                gridTemplateColumns: 'repeat(7, 1fr)',
+                gap: 0.5,
+              }}>
+              {Array.from({ length: 31 }, (_, i) => i + 1).map((day) => (
+                <Button
+                  key={day}
+                  size="small"
+                  variant={value === day ? 'contained' : 'text'}
+                  onClick={() => {
+                    onChange(day);
+                    setOpen(false);
+                  }}
+                  sx={{
+                    minWidth: 30,
+                    height: 30,
+                    p: 0,
+                  }}>
+                  {day}
+                </Button>
+              ))}
+            </Box>
+          </Paper>
+        </ClickAwayListener>
+      </Popper>
+    </Box>
+  );
+}
+
+export function NotificationPreferenceDialog({ open, onClose }: NotificationPreferenceDialogProps) {
+  const { t } = useLocaleContext();
+  const [selectedDate, setSelectedDate] = useState<number>(1);
+
+  const { data, loading } = useRequest(fetchPreferences, {
+    manual: false,
+    refreshDeps: [open],
+  });
+
+  const methods = useForm<NotificationPreferences>({
+    mode: 'onChange',
+    defaultValues: {
+      notification: {
+        frequency: 'default',
+        schedule: {
+          time: '10:00',
+          date: 1,
+        },
+      },
+    },
+  });
+
+  const {
+    handleSubmit,
+    watch,
+    reset,
+    control,
+    setValue,
+    formState: { isValid },
+  } = methods;
+
+  const frequency = watch('notification.frequency');
+  const dateValue = watch('notification.schedule.date');
+  const needsSchedule = frequency !== 'default';
+
+  useEffect(() => {
+    if (data && open) {
+      reset(data);
+      if (data.notification?.schedule?.date) {
+        setSelectedDate(data.notification.schedule.date);
+      }
+    }
+  }, [data, reset, open]);
+
+  useEffect(() => {
+    if (dateValue) {
+      setSelectedDate(dateValue);
+    }
+  }, [dateValue]);
+
+  const { loading: updating, runAsync: runUpdate } = useRequest(updatePreferences, {
+    manual: true,
+    onSuccess: () => {
+      onClose();
+    },
+  });
+
+  const onSubmit = (formData: NotificationPreferences) => {
+    runUpdate(formData);
+  };
+
+  const handleMonthDaySelect = (day: number) => {
+    setValue('notification.schedule.date', day, { shouldValidate: true });
+    setSelectedDate(day);
+  };
+
+  const getDayName = (dayIndex: number) => {
+    const days = ['sunday', 'monday', 'tuesday', 'wednesday', 'thursday', 'friday', 'saturday'];
+    return t(`common.days.${days[dayIndex]}`);
+  };
+
+  const handleFrequencyChange = (event: React.ChangeEvent<HTMLInputElement> | any) => {
+    setValue('notification.frequency', event.target.value as NotificationFrequency);
+  };
+
+  return (
+    <Dialog
+      open={open}
+      onClose={onClose}
+      disableEscapeKeyDown
+      title={
+        <Stack direction="row" alignItems="center" spacing={1}>
+          <NotificationsOutlined fontSize="small" />
+          <Typography variant="h6" component="span">
+            {t('notification.preferences.title')}
+          </Typography>
+        </Stack>
+      }
+      maxWidth="sm"
+      fullWidth
+      className="base-dialog"
+      actions={
+        <Stack direction="row" spacing={2}>
+          <Button variant="outlined" color="inherit" onClick={onClose}>
+            {t('common.cancel')}
+          </Button>
+          <Button
+            variant="contained"
+            color="primary"
+            disabled={loading || updating || !isValid}
+            onClick={handleSubmit(onSubmit)}>
+            {updating && <CircularProgress size={20} sx={{ mr: 1 }} />}
+            {t('common.save')}
+          </Button>
+        </Stack>
+      }>
+      {loading ? (
+        <Stack alignItems="center" justifyContent="center" height={200}>
+          <CircularProgress />
+        </Stack>
+      ) : (
+        <FormProvider {...methods}>
+          <Box>
+            <Alert severity="info">{t('notification.preferences.subscriptionRenewalNote')}</Alert>
+            <Typography id="frequency-label" sx={{ color: 'text.primary', mt: 2, mb: 1 }}>
+              {t('notification.preferences.frequency.label')}
+            </Typography>
+            <Stack flexDirection="row">
+              <Box
+                sx={{
+                  display: 'flex',
+                  alignItems: 'center',
+                  flexWrap: 'nowrap',
+                  gap: { xs: 0.5, sm: 1, md: 2 },
+                  width: '100%',
+                  overflow: 'auto',
+                  pb: 1,
+                }}>
+                <FormControl sx={{ width: { xs: '100px', sm: '120px' }, minWidth: 'fit-content' }}>
+                  <Select
+                    value={frequency}
+                    onChange={handleFrequencyChange}
+                    size="small"
+                    displayEmpty
+                    sx={{
+                      fontSize: { xs: '0.85rem', sm: '0.9rem' },
+                    }}>
+                    <MenuItem value="default">{t('notification.preferences.frequency.default')}</MenuItem>
+                    <MenuItem value="daily">{t('notification.preferences.frequency.daily')}</MenuItem>
+                    <MenuItem value="weekly">{t('notification.preferences.frequency.weekly')}</MenuItem>
+                    <MenuItem value="monthly">{t('notification.preferences.frequency.monthly')}</MenuItem>
+                  </Select>
+                </FormControl>
+
+                {frequency !== 'default' && (
+                  <>
+                    {frequency === 'weekly' && (
+                      <Controller
+                        name="notification.schedule.date"
+                        control={control}
+                        render={({ field }) => (
+                          <Select size="small" sx={{ minWidth: 120 }} value={field.value} onChange={field.onChange}>
+                            {[0, 1, 2, 3, 4, 5, 6].map((day) => (
+                              <MenuItem key={day} value={day}>
+                                {getDayName(day)}
+                              </MenuItem>
+                            ))}
+                          </Select>
+                        )}
+                      />
+                    )}
+
+                    {frequency === 'monthly' && <DaySelector value={dateValue || 1} onChange={handleMonthDaySelect} />}
+
+                    <TimeSelector
+                      name="notification.schedule.time"
+                      control={control}
+                      required={needsSchedule}
+                      timeFormatErrorMessage={t('notification.preferences.timeFormatError')}
+                    />
+                  </>
+                )}
+              </Box>
+            </Stack>
+            {selectedDate > 28 && frequency === 'monthly' && (
+              <Typography
+                variant="caption"
+                color="text.secondary"
+                sx={{
+                  fontStyle: 'italic',
+                  display: 'flex',
+                  alignItems: 'center',
+                  gap: 0.5,
+                }}>
+                <Box component="span" sx={{ fontSize: '0.8rem' }}>
+                  ⚠️
+                </Box>
+                {t('notification.preferences.monthlyHelp')}
+              </Typography>
+            )}
+          </Box>
+        </FormProvider>
+      )}
+    </Dialog>
+  );
+}
+
+export default function NotificationPreference() {
+  const { t } = useLocaleContext();
+  const { isMobile } = useMobile();
+  const [open, setOpen] = React.useState(false);
+
+  return (
+    <>
+      {isMobile ? (
+        <Button
+          size="small"
+          variant="outlined"
+          sx={{
+            minWidth: 0,
+            width: 32,
+            height: 32,
+            borderRadius: '50%',
+          }}
+          onClick={() => setOpen(true)}>
+          <NotificationsOutlined fontSize="small" />
+        </Button>
+      ) : (
+        <Button
+          startIcon={<NotificationsOutlined />}
+          size="small"
+          onClick={() => setOpen(true)}
+          variant="outlined"
+          sx={{
+            whiteSpace: 'nowrap',
+          }}>
+          {t('notification.preferences.button')}
+        </Button>
+      )}
+      <NotificationPreferenceDialog open={open} onClose={() => setOpen(false)} />
+    </>
+  );
+}

package/src/components/layout/user.tsx

@@ -19,7 +19,7 @@ export default function UserLayout(props: any) {
 
   useEffect(() => {
     events.once('logout', () => {
-      window.location.href = `${window.location.origin}/.well-known/service/user`;
+      session.login(() => {}, { openMode: 'redirect', redirect: window.location.href });
     });
   }, []);
 

package/src/locales/en.tsx

@@ -37,6 +37,36 @@ export default flat({
     copySuccess: 'Copy Success',
     copyFailed: 'Copy Failed',
     copyTip: 'Please copy manually',
+    save: 'Save',
+    cancel: 'Cancel',
+    know: 'I Know',
+    confirm: 'Confirm',
+    days: {
+      sunday: 'Sunday',
+      monday: 'Monday',
+      tuesday: 'Tuesday',
+      wednesday: 'Wednesday',
+      thursday: 'Thursday',
+      friday: 'Friday',
+      saturday: 'Saturday',
+    },
+  },
+  notification: {
+    preferences: {
+      title: 'Email Notification Settings',
+      button: 'Email Settings',
+      frequency: {
+        label: 'Notification Frequency',
+        default: 'Instant Notifications (Default)',
+        daily: 'Daily',
+        weekly: 'Weekly',
+        monthly: 'Monthly',
+      },
+      day: 'Day',
+      timeFormatError: 'Please enter a valid time in 24-hour format (HH:MM)',
+      monthlyHelp: 'If day is not available in a month, the last day will be used',
+      subscriptionRenewalNote: 'This setting applies to subscription renewal notifications.',
+    },
   },
   admin: {
     balances: 'Balances',

package/src/locales/zh.tsx

@@ -36,6 +36,36 @@ export default flat({
     copySuccess: '复制成功',
     copyFailed: '复制失败',
     copyTip: '请手动复制',
+    save: '保存',
+    cancel: '取消',
+    know: '知道了',
+    confirm: '确认',
+    days: {
+      sunday: '星期日',
+      monday: '星期一',
+      tuesday: '星期二',
+      wednesday: '星期三',
+      thursday: '星期四',
+      friday: '星期五',
+      saturday: '星期六',
+    },
+  },
+  notification: {
+    preferences: {
+      title: '邮件通知设置',
+      button: '邮件设置',
+      frequency: {
+        label: '通知频率',
+        default: '即时通知 (默认)',
+        daily: '每日',
+        weekly: '每周',
+        monthly: '每月',
+      },
+      day: '日',
+      timeFormatError: '请输入有效的时间，格式为24小时制 (HH:MM)',
+      monthlyHelp: '如果所选日期在某月不存在，将使用该月的最后一天',
+      subscriptionRenewalNote: '此设置适用于订阅续费通知。',
+    },
   },
   admin: {
     balances: '余额',

package/src/pages/customer/index.tsx

@@ -40,6 +40,7 @@ import { joinURL } from 'ufo';
 
 import { useTransitionContext } from '../../components/progress-bar';
 import CurrentSubscriptions from '../../components/subscription/portal/list';
+import NotificationPreference from '../../components/customer/notification-preference';
 import { useSessionContext } from '../../contexts/session';
 import api from '../../libs/api';
 import CustomerRevenueList from '../../components/payouts/portal/list';
@@ -200,7 +201,7 @@ const isCardVisible = (type: string, config: any, data: any, currency: any, meth
     data?.summary?.[summaryKey]?.[currency.id] && data?.summary?.[summaryKey]?.[currency.id] !== '0';
 
   if (type === 'balance') {
-    return method?.type === 'arcblock' && (config.alwaysShow || hasSummaryValue);
+    return method?.type === 'arcblock' || config.alwaysShow || hasSummaryValue;
   }
 
   return config.alwaysShow || hasSummaryValue;
@@ -339,28 +340,31 @@ export default function CustomerHome() {
       <Box className="base-card section section-subscription">
         <Box className="section-header">
           <Typography variant="h3">{t('admin.subscription.name')}</Typography>
-          {subscriptionStatus && (
-            <FormControl
-              sx={{
-                '.MuiInputBase-root': {
-                  background: 'none',
-                  border: 'none',
-                },
-                '.MuiOutlinedInput-notchedOutline': {
-                  border: 'none',
-                },
-              }}>
-              <Select
-                value={state.onlyActive ? 'active' : ''}
-                onChange={onToggleActive}
-                displayEmpty
-                IconComponent={ExpandMore}
-                inputProps={{ 'aria-label': 'Without label' }}>
-                <MenuItem value="">All</MenuItem>
-                <MenuItem value="active">Active</MenuItem>
-              </Select>
-            </FormControl>
-          )}
+          <Stack direction="row" spacing={1} alignItems="center">
+            <NotificationPreference />
+            {subscriptionStatus && (
+              <FormControl
+                sx={{
+                  '.MuiInputBase-root': {
+                    background: 'none',
+                    border: 'none',
+                  },
+                  '.MuiOutlinedInput-notchedOutline': {
+                    border: 'none',
+                  },
+                }}>
+                <Select
+                  value={state.onlyActive ? 'active' : ''}
+                  onChange={onToggleActive}
+                  displayEmpty
+                  IconComponent={ExpandMore}
+                  inputProps={{ 'aria-label': 'Without label' }}>
+                  <MenuItem value="">All</MenuItem>
+                  <MenuItem value="active">Active</MenuItem>
+                </Select>
+              </FormControl>
+            )}
+          </Stack>
         </Box>
         <Box className="section-body">
           {subscriptionLoading ? (

package/src/pages/customer/recharge/account.tsx

@@ -26,12 +26,13 @@ import {
   api,
   formatBNStr,
   formatPrice,
+  formatNumber,
 } from '@blocklet/payment-react';
 import type { TPaymentCurrency, TPaymentMethod } from '@blocklet/payment-types';
 import { joinURL } from 'ufo';
 import { AccountBalanceWalletOutlined, ArrowBackOutlined, ArrowForwardOutlined } from '@mui/icons-material';
 import Empty from '@arcblock/ux/lib/Empty';
-import { BN } from '@ocap/util';
+import { BN, fromUnitToToken } from '@ocap/util';
 import RechargeList from '../../../components/invoice/recharge';
 import { getTokenBalanceLink, goBackOrFallback } from '../../../libs/util';
 import { useSessionContext } from '../../../contexts/session';
@@ -120,14 +121,19 @@ export default function BalanceRechargePage() {
         if (data.recommendedRecharge && data.recommendedRecharge.amount && data.recommendedRecharge.amount !== '0') {
           const baseAmount = data.recommendedRecharge.amount;
           const decimal = data.currency.decimal || 0;
+          const calcCycleAmount = (cycle: number) => {
+            const cycleAmount = fromUnitToToken(new BN(baseAmount).mul(new BN(String(cycle))).toString(), decimal);
+            return Math.ceil(parseFloat(cycleAmount)).toString();
+          };
           setUnitCycle({
-            amount: parseFloat(formatBNStr(baseAmount, decimal, 6, true)).toString(),
+            amount: fromUnitToToken(baseAmount, decimal),
             interval: data.recommendedRecharge.interval as TimeUnit,
             cycle: data.recommendedRecharge.cycle,
           });
-          setPresetAmounts([
+
+          const newPresetAmounts = [
             {
-              amount: Math.ceil(parseFloat(formatBNStr(baseAmount, decimal, 6, true))).toString(),
+              amount: calcCycleAmount(1),
               multiplier: data.recommendedRecharge.cycle,
               label: t('common.estimatedDuration', {
                 duration: formatSmartDuration(1, data.recommendedRecharge.interval as TimeUnit, {
@@ -136,9 +142,7 @@ export default function BalanceRechargePage() {
               }),
             },
             {
-              amount: Math.ceil(
-                parseFloat(formatBNStr(new BN(baseAmount).mul(new BN('4')).toString(), decimal, 6, true))
-              ).toString(),
+              amount: calcCycleAmount(4),
               multiplier: data.recommendedRecharge.cycle * 4,
               label: t('common.estimatedDuration', {
                 duration: formatSmartDuration(4, data.recommendedRecharge.interval as TimeUnit, {
@@ -147,9 +151,7 @@ export default function BalanceRechargePage() {
               }),
             },
             {
-              amount: Math.ceil(
-                parseFloat(formatBNStr(new BN(baseAmount).mul(new BN('8')).toString(), decimal, 6, true))
-              ).toString(),
+              amount: calcCycleAmount(8),
               multiplier: data.recommendedRecharge.cycle * 8,
               label: t('common.estimatedDuration', {
                 duration: formatSmartDuration(8, data.recommendedRecharge.interval as TimeUnit, {
@@ -157,13 +159,13 @@ export default function BalanceRechargePage() {
                 }),
               }),
             },
-          ]);
+          ];
 
-          setAmount(
-            Math.ceil(
-              parseFloat(formatBNStr(new BN(baseAmount).mul(new BN('4')).toString(), decimal, 6, true))
-            ).toString()
-          );
+          setPresetAmounts(newPresetAmounts);
+          const midAmount = calcCycleAmount(4);
+          if (!customAmount && !newPresetAmounts.find((item) => item.amount === midAmount)) {
+            setAmount(midAmount);
+          }
         } else {
           setPresetAmounts([
             { amount: '10', multiplier: 0, label: '' },
@@ -442,7 +444,7 @@ export default function BalanceRechargePage() {
                             fontWeight: 600,
                             color: amount === presetAmount && !customAmount ? 'primary.main' : 'text.primary',
                           }}>
-                          {presetAmount} {currency.symbol}
+                          {formatNumber(presetAmount)} {currency.symbol}
                         </Typography>
                         {multiplier > 0 && label && (
                           <Typography variant="caption" align="center" color="text.secondary">