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

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 (

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) => {

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) => {