2025-07-25 06:45:54 -07:00

84 lines
3.2 KiB
TypeScript

'use client';
import useGlobalStore from '@/config/use-global';
import { updateUserNotify } from '@/services/user/user';
import { zodResolver } from '@hookform/resolvers/zod';
import { Button } from '@workspace/ui/components/button';
import { Card, CardContent, CardHeader, CardTitle } from '@workspace/ui/components/card';
import { Form, FormControl, FormField, FormItem, FormLabel } from '@workspace/ui/components/form';
import { Switch } from '@workspace/ui/components/switch';
import { useTranslations } from 'next-intl';
import { useForm } from 'react-hook-form';
import { toast } from 'sonner';
import { z } from 'zod';
const FormSchema = z.object({
enable_balance_notify: z.boolean().default(false),
enable_login_notify: z.boolean().default(false),
enable_subscribe_notify: z.boolean().default(false),
enable_trade_notify: z.boolean().default(false),
});
export default function NotifySettings() {
const t = useTranslations('profile');
const { user, getUserInfo } = useGlobalStore();
const form = useForm<z.infer<typeof FormSchema>>({
resolver: zodResolver(FormSchema),
defaultValues: {
enable_balance_notify: user?.enable_balance_notify ?? false,
enable_login_notify: user?.enable_login_notify ?? false,
enable_subscribe_notify: user?.enable_subscribe_notify ?? false,
enable_trade_notify: user?.enable_trade_notify ?? false,
},
});
async function onSubmit(data: z.infer<typeof FormSchema>) {
await updateUserNotify(data);
toast.success(t('notify.updateSuccess'));
await getUserInfo();
}
return (
<Card className='min-w-80'>
<CardHeader className='bg-muted/50'>
<CardTitle className='flex items-center justify-between'>
{t('notify.notificationSettings')}
<Button type='submit' size='sm' form='notify-form'>
{t('notify.save')}
</Button>
</CardTitle>
</CardHeader>
<CardContent className='grid gap-6 p-6'>
<Form {...form}>
<form id='notify-form' onSubmit={form.handleSubmit(onSubmit)} className='space-y-4'>
<div className='space-y-4'>
{[
{ name: 'enable_balance_notify', label: 'balanceChange' },
{ name: 'enable_login_notify', label: 'login' },
{ name: 'enable_subscribe_notify', label: 'subscribe' },
{ name: 'enable_trade_notify', label: 'finance' },
].map(({ name, label }) => (
<FormField
key={name}
control={form.control}
name={name as any}
render={({ field }) => (
<FormItem className='flex items-center justify-between space-x-4'>
<FormLabel className='text-muted-foreground'>
{t(`notify.${label}`)}
</FormLabel>
<FormControl>
<Switch checked={field.value} onCheckedChange={field.onChange} />
</FormControl>
</FormItem>
)}
/>
))}
</div>
</form>
</Form>
</CardContent>
</Card>
);
}