S-VPN/panel-web
3
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

✨ feat(subscribe): Improve error handling in subscription forms and update component props

Browse Source
This commit is contained in:
web@ppanel 2025-01-02 21:58:36 +07:00
parent f99c6048ad
commit d28a10b6df
5 changed files with 35 additions and 32 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

12
apps/admin/app/dashboard/server/node-form.tsx
View File

@ -40,8 +40,8 @@ import { unitConversion } from '@workspace/ui/utils';
import { useTranslations } from 'next-intl';
import { useEffect, useState } from 'react';
import { useForm } from 'react-hook-form';
import { toast } from 'sonner';
import { formSchema, protocols } from './form-schema';
interface NodeFormProps<T> {
onSubmit: (data: T) => Promise<boolean> | boolean;
initialValues?: T;
@ -56,7 +56,7 @@ export default function NodeForm<T extends { [x: string]: any }>({
loading,
trigger,
title,
}: NodeFormProps<T>) {
}: Readonly<NodeFormProps<T>>) {
const t = useTranslations('server.node');
const [open, setOpen] = useState(false);
@ -853,8 +853,12 @@ export default function NodeForm<T extends { [x: string]: any }>({
<Button
disabled={loading}
onClick={form.handleSubmit(handleSubmit, (errors) => {
console.log(errors);
return errors;
const keys = Object.keys(errors);
for (const key of keys) {
const formattedKey = key.replace(/_([a-z])/g, (_, letter) => letter.toUpperCase());
toast.error(`${t(`form.${formattedKey}`)} is ${errors[key]?.message}`);
return false;
}
})}
>
{loading && <Icon icon='mdi:loading' className='mr-2 animate-spin' />}{' '}

15
apps/admin/app/dashboard/subscribe/subscribe-form.tsx
View File

@ -44,6 +44,7 @@ import { useTranslations } from 'next-intl';
import { assign, shake } from 'radash';
import { useEffect, useState } from 'react';
import { useForm } from 'react-hook-form';
import { toast } from 'sonner';
import { z } from 'zod';
interface SubscribeFormProps<T> {
@ -77,7 +78,7 @@ export default function SubscribeForm<T extends Record<string, any>>({
loading,
trigger,
title,
}: SubscribeFormProps<T>) {
}: Readonly<SubscribeFormProps<T>>) {
const t = useTranslations('subscribe');
const [open, setOpen] = useState(false);
@ -783,7 +784,17 @@ export default function SubscribeForm<T extends Record<string, any>>({
>
{t('form.cancel')}
</Button>
<Button disabled={loading} onClick={form.handleSubmit(handleSubmit)}>
<Button
disabled={loading}
onClick={form.handleSubmit(handleSubmit, (errors) => {
const keys = Object.keys(errors);
for (const key of keys) {
const formattedKey = key.replace(/_([a-z])/g, (_, letter) => letter.toUpperCase());
toast.error(`${t(`form.${formattedKey}`)} is ${errors[key]?.message}`);
return false;
}
})}
>
{loading && <Icon icon='mdi:loading' className='mr-2 animate-spin' />}
{t('form.confirm')}
</Button>

8
apps/user/components/subscribe/detail.tsx
View File

@ -3,16 +3,16 @@
import { Display } from '@/components/display';
import { useTranslations } from 'next-intl';
export function SubscribeDetail({
subscribe,
}: {
interface SubscribeDetailProps {
subscribe?: Partial<
API.Subscribe & {
name: string;
quantity: number;
}
>;
}) {
}
export function SubscribeDetail({ subscribe }: Readonly<SubscribeDetailProps>) {
const t = useTranslations('subscribe.detail');
return (

17
apps/user/components/subscribe/purchase.tsx
View File

@ -3,7 +3,6 @@
import CouponInput from '@/components/subscribe/coupon-input';
import DurationSelector from '@/components/subscribe/duration-selector';
import PaymentMethods from '@/components/subscribe/payment-methods';
import SubscribeSelector from '@/components/subscribe/subscribe-selector';
import useGlobalStore from '@/config/use-global';
import { checkoutOrder, preCreateOrder, purchase } from '@/services/user/order';
import { useQuery } from '@tanstack/react-query';
@ -18,13 +17,12 @@ import { useCallback, useEffect, useState, useTransition } from 'react';
import { SubscribeBilling } from './billing';
import { SubscribeDetail } from './detail';
export default function Purchase({
subscribe,
setSubscribe,
}: {
interface PurchaseProps {
subscribe?: API.Subscribe;
setSubscribe: (subscribe?: API.Subscribe) => void;
}) {
}
export default function Purchase({ subscribe, setSubscribe }: Readonly<PurchaseProps>) {
const t = useTranslations('subscribe');
const { getUserInfo } = useGlobalStore();
const router = useRouter();
@ -140,13 +138,6 @@ export default function Purchase({
coupon={params.coupon}
onChange={(value) => handleChange('coupon', value)}
/>
<SubscribeSelector
value={params.discount_subscribe_id}
data={order?.discount_list || []}
onChange={(value) => {
handleChange('discount_subscribe_id', value);
}}
/>
<PaymentMethods
value={params.payment!}
onChange={(value) => {

15
apps/user/components/subscribe/renewal.tsx
View File

@ -3,7 +3,6 @@
import CouponInput from '@/components/subscribe/coupon-input';
import DurationSelector from '@/components/subscribe/duration-selector';
import PaymentMethods from '@/components/subscribe/payment-methods';
import SubscribeSelector from '@/components/subscribe/subscribe-selector';
import useGlobalStore from '@/config/use-global';
import { checkoutOrder, preCreateOrder, renewal } from '@/services/user/order';
import { useQuery } from '@tanstack/react-query';
@ -24,7 +23,12 @@ import { useCallback, useEffect, useState, useTransition } from 'react';
import { SubscribeBilling } from './billing';
import { SubscribeDetail } from './detail';
export default function Renewal({ token, subscribe }: { token: string; subscribe: API.Subscribe }) {
interface RenewalProps {
token: string;
subscribe: API.Subscribe;
}
export default function Renewal({ token, subscribe }: Readonly<RenewalProps>) {
const t = useTranslations('subscribe');
const { getUserInfo } = useGlobalStore();
const [open, setOpen] = useState<boolean>(false);
@ -141,13 +145,6 @@ export default function Renewal({ token, subscribe }: { token: string; subscribe
coupon={params.coupon}
onChange={(value) => handleChange('coupon', value)}
/>
<SubscribeSelector
value={params.discount_subscribe_id}
data={order?.discount_list || []}
onChange={(value) => {
handleChange('discount_subscribe_id', value);
}}
/>
<PaymentMethods
value={params.payment!}
onChange={(value) => {