118 lines
4.4 KiB
TypeScript
118 lines
4.4 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/airo-ui/components/button';
|
|
import { Card } from '@workspace/airo-ui/components/card';
|
|
|
|
import { AiroButton } from '@workspace/airo-ui/components/AiroButton';
|
|
import {
|
|
Form,
|
|
FormControl,
|
|
FormField,
|
|
FormItem,
|
|
FormLabel,
|
|
} from '@workspace/airo-ui/components/form';
|
|
import { Switch } from '@workspace/airo-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='flex h-full flex-col justify-between rounded-[20px] border border-[#D9D9D9] p-4 text-[#666666] shadow-[0px_0px_52.6px_1px_rgba(15,44,83,0.05)] sm:p-6'>
|
|
<div className={'mb-3'}>
|
|
<div className={'flex items-center justify-between font-bold sm:text-xl'}>
|
|
{t('notify.notificationSettings')}
|
|
<Button
|
|
type='submit'
|
|
size='sm'
|
|
form='notify-form'
|
|
className={
|
|
'h-[32px] w-[110px] rounded-[50px] border-0 border-[#0F2C53] bg-[#0F2C53] text-center text-base font-medium leading-[32px] text-white transition hover:bg-[#225BA9] hover:text-white sm:hidden'
|
|
}
|
|
>
|
|
{t('notify.save')}
|
|
</Button>
|
|
</div>
|
|
<div className={'text-xs font-light sm:text-[15px]'}>{t('notify.description')}</div>
|
|
</div>
|
|
<Form {...form}>
|
|
<form
|
|
id='notify-form'
|
|
onSubmit={form.handleSubmit(onSubmit)}
|
|
className='space-y-2 sm:space-y-4'
|
|
>
|
|
<div className='grid grid-cols-2 gap-2.5 sm:grid-cols-1 sm:gap-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 flex-col items-center justify-center rounded-[20px] bg-[#EAEAEA] py-2.5'>
|
|
<FormLabel className='text-muted-foreground text-sm text-[#848484]'>
|
|
{t(`notify.${label}`)}
|
|
</FormLabel>
|
|
<FormControl>
|
|
<Switch
|
|
className={
|
|
'data-[state=checked]:border-[#87ACC8] data-[state=unchecked]:border-[#B1B2BC] data-[state-unchecked]:bg-[#D9D9D9] data-[state=checked]:bg-[#A8D4ED]'
|
|
}
|
|
thumbClassName={'border-[#D9D9D9] border'}
|
|
checked={field.value}
|
|
onCheckedChange={field.onChange}
|
|
/>
|
|
</FormControl>
|
|
</FormItem>
|
|
)}
|
|
/>
|
|
))}
|
|
</div>
|
|
</form>
|
|
</Form>
|
|
<div className={'mt-8 hidden justify-center sm:flex'}>
|
|
<AiroButton
|
|
type='submit'
|
|
form='notify-form'
|
|
className={'h-full px-[55px] py-[9px] text-xl'}
|
|
>
|
|
{t('notify.save')}
|
|
</AiroButton>
|
|
</div>
|
|
</Card>
|
|
);
|
|
}
|