ppanel-web/apps/admin/app/dashboard/payment/stripe-wechat-pay.tsx

'use client';

import {
  getStripeWeChatPayPaymentConfig,
  updateStripeWeChatPayPaymentConfig,
} from '@/services/admin/payment';
import { useQuery } from '@tanstack/react-query';
import { Label } from '@workspace/ui/components/label';
import {
  Select,
  SelectContent,
  SelectGroup,
  SelectItem,
  SelectTrigger,
  SelectValue,
} from '@workspace/ui/components/select';
import { Switch } from '@workspace/ui/components/switch';
import { Table, TableBody, TableCell, TableRow } from '@workspace/ui/components/table';
import { EnhancedInput } from '@workspace/ui/custom-components/enhanced-input';
import { unitConversion } from '@workspace/ui/utils';
import { useTranslations } from 'next-intl';
import { toast } from 'sonner';

export default function StripeWeChatPay() {
  const t = useTranslations('payment');

  const { data, refetch } = useQuery({
    queryKey: ['getStripeWeChatPayPaymentConfig'],
    queryFn: async () => {
      const { data } = await getStripeWeChatPayPaymentConfig();
      return data.data;
    },
  });

  async function updateConfig(key: string, value: unknown) {
    if (data?.[key] === value) return;
    try {
      await updateStripeWeChatPayPaymentConfig({
        ...data,
        mark: 'stripe_wechat_pay',
        [key]: value,
      } as any);
      toast.success(t('saveSuccess'));
      refetch();
    } catch (error) {
      /* empty */
    }
  }

  return (
    <Table>
      <TableBody>
        <TableRow>
          <TableCell>
            <Label>{t('wechatPay')}</Label>
            <p className='text-muted-foreground text-xs'>{t('enableDescription')}</p>
          </TableCell>
          <TableCell className='text-right'>
            <Switch
              checked={data?.enable}
              onCheckedChange={async (checked) => {
                updateConfig('enable', checked);
              }}
            />
          </TableCell>
        </TableRow>
        <TableRow>
          <TableCell>
            <Label>{t('showName')}</Label>
            <p className='text-muted-foreground text-xs'>{t('showNameDescription')}</p>
          </TableCell>
          <TableCell className='text-right'>
            <EnhancedInput
              placeholder={t('inputPlaceholder')}
              value={data?.name}
              onValueBlur={(value) => {
                updateConfig('name', value);
              }}
            />
          </TableCell>
        </TableRow>
        <TableRow>
          <TableCell>
            <Label>{t('iconUrl')}</Label>
            <p className='text-muted-foreground text-xs'>{t('iconUrlDescription')}</p>
          </TableCell>
          <TableCell className='text-right'>
            <EnhancedInput
              placeholder={t('inputPlaceholder')}
              value={data?.icon}
              onValueBlur={(value) => {
                updateConfig('icon', value);
              }}
            />
          </TableCell>
        </TableRow>
        <TableRow>
          <TableCell>
            <Label>{t('notifyUrl')}</Label>
            <p className='text-muted-foreground text-xs'>{t('notifyUrlDescription')}</p>
          </TableCell>
          <TableCell className='text-right'>
            <EnhancedInput
              placeholder={t('inputPlaceholder')}
              value={data?.domain}
              onValueBlur={(value) => {
                updateConfig('domain', value);
              }}
            />
          </TableCell>
        </TableRow>
        <TableRow>
          <TableCell>
            <Label>{t('feeMode')}</Label>
            <p className='text-muted-foreground text-xs'>{t('feeModeDescription')}</p>
          </TableCell>
          <TableCell className='text-right'>
            <Select
              value={String(data?.fee_mode)}
              onValueChange={(value) => {
                updateConfig('fee_mode', Number(value));
              }}
            >
              <SelectTrigger>
                <SelectValue placeholder='请选择' />
              </SelectTrigger>
              <SelectContent>
                <SelectGroup>
                  <SelectItem value='0'>{t('feeModeItems.0')}</SelectItem>
                  <SelectItem value='1'>{t('feeModeItems.1')}</SelectItem>
                  <SelectItem value='2'>{t('feeModeItems.2')}</SelectItem>
                  <SelectItem value='3'>{t('feeModeItems.3')}</SelectItem>
                </SelectGroup>
              </SelectContent>
            </Select>
          </TableCell>
        </TableRow>
        <TableRow>
          <TableCell>
            <Label>{t('feePercent')}</Label>
            <p className='text-muted-foreground text-xs'>{t('feePercentDescription')}</p>
          </TableCell>
          <TableCell className='text-right'>
            <EnhancedInput
              placeholder={t('inputPlaceholder')}
              type='number'
              min={0}
              max={100}
              value={data?.fee_percent}
              onValueBlur={(value) => {
                updateConfig('fee_percent', value);
              }}
              suffix='%'
            />
          </TableCell>
        </TableRow>
        <TableRow>
          <TableCell>
            <Label>{t('fixedFee')}</Label>
            <p className='text-muted-foreground text-xs'>{t('fixedFeeDescription')}</p>
          </TableCell>
          <TableCell className='text-right'>
            <EnhancedInput
              placeholder={t('inputPlaceholder')}
              type='number'
              min={0}
              value={data?.fee_amount}
              formatInput={(value) => unitConversion('centsToDollars', value)}
              formatOutput={(value) => unitConversion('dollarsToCents', value)}
              onValueBlur={(value) => updateConfig('fee_amount', value)}
            />
          </TableCell>
        </TableRow>

        <TableRow>
          <TableCell>
            <Label>{t('stripe.publicKey')}</Label>
            <p className='text-muted-foreground text-xs' />
          </TableCell>
          <TableCell className='text-right'>
            <EnhancedInput
              placeholder={t('inputPlaceholder')}
              value={data?.config.public_key}
              onValueBlur={(value) => {
                updateConfig('config', {
                  ...data?.config,
                  public_key: value,
                });
              }}
            />
          </TableCell>
        </TableRow>
        <TableRow>
          <TableCell>
            <Label>{t('stripe.secretKey')}</Label>
            <p className='text-muted-foreground text-xs' />
          </TableCell>
          <TableCell className='text-right'>
            <EnhancedInput
              placeholder={t('inputPlaceholder')}
              value={data?.config.secret_key}
              onValueBlur={(value) => {
                updateConfig('config', {
                  ...data?.config,
                  secret_key: value,
                });
              }}
            />
          </TableCell>
        </TableRow>
        <TableRow>
          <TableCell>
            <Label>{t('stripe.webhookSecret')}</Label>
            <p className='text-muted-foreground text-xs' />
          </TableCell>
          <TableCell className='text-right'>
            <EnhancedInput
              placeholder={t('inputPlaceholder')}
              value={data?.config.webhook_secret}
              onValueBlur={(value) => {
                updateConfig('config', {
                  ...data?.config,
                  webhook_secret: value,
                });
              }}
            />
          </TableCell>
        </TableRow>
      </TableBody>
    </Table>
  );
}