From d28a10b6dfb238e1663298552f9f900c97aee3cb Mon Sep 17 00:00:00 2001
From: "web@ppanel" <web@ppanel.dev>
Date: Thu, 2 Jan 2025 21:58:36 +0700
Subject: [PATCH] =?UTF-8?q?=E2=9C=A8=20feat(subscribe):=20Improve=20error?=
 =?UTF-8?q?=20handling=20in=20subscription=20forms=20and=20update=20compon?=
 =?UTF-8?q?ent=20props?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 apps/admin/app/dashboard/server/node-form.tsx   | 12 ++++++++----
 .../app/dashboard/subscribe/subscribe-form.tsx  | 15 +++++++++++++--
 apps/user/components/subscribe/detail.tsx       |  8 ++++----
 apps/user/components/subscribe/purchase.tsx     | 17 ++++-------------
 apps/user/components/subscribe/renewal.tsx      | 15 ++++++---------
 5 files changed, 35 insertions(+), 32 deletions(-)

diff --git a/apps/admin/app/dashboard/server/node-form.tsx b/apps/admin/app/dashboard/server/node-form.tsx
index fc1fc21..4837952 100644
--- a/apps/admin/app/dashboard/server/node-form.tsx
+++ b/apps/admin/app/dashboard/server/node-form.tsx
@@ -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' />}{' '}
diff --git a/apps/admin/app/dashboard/subscribe/subscribe-form.tsx b/apps/admin/app/dashboard/subscribe/subscribe-form.tsx
index bd6ed95..e5bd1fc 100644
--- a/apps/admin/app/dashboard/subscribe/subscribe-form.tsx
+++ b/apps/admin/app/dashboard/subscribe/subscribe-form.tsx
@@ -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>
diff --git a/apps/user/components/subscribe/detail.tsx b/apps/user/components/subscribe/detail.tsx
index 5a99fe4..00feb42 100644
--- a/apps/user/components/subscribe/detail.tsx
+++ b/apps/user/components/subscribe/detail.tsx
@@ -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 (
diff --git a/apps/user/components/subscribe/purchase.tsx b/apps/user/components/subscribe/purchase.tsx
index 1c5e5ec..d9328ad 100644
--- a/apps/user/components/subscribe/purchase.tsx
+++ b/apps/user/components/subscribe/purchase.tsx
@@ -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) => {
diff --git a/apps/user/components/subscribe/renewal.tsx b/apps/user/components/subscribe/renewal.tsx
index cffbb7e..680175d 100644
--- a/apps/user/components/subscribe/renewal.tsx
+++ b/apps/user/components/subscribe/renewal.tsx
@@ -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) => {