feat: replace Select component with Combobox for subscription selection and update validation schema

app/layouts/news/form-subscription.tsx

@@ -5,12 +5,22 @@ import { RemixFormProvider, useRemixForm } from 'remix-hook-form'
 import { z } from 'zod'
 
 import { Button } from '~/components/ui/button'
-import { Select } from '~/components/ui/select'
+import { Combobox } from '~/components/ui/combobox'
 import { useNewsContext } from '~/contexts/news'
 import type { loader } from '~/routes/_layout'
 
 export const subscribeSchema = z.object({
-  subscribe_plan: z.string().min(1, 'Pilih salah satu subscription'),
+  subscribe_plan: z
+    .object({
+      id: z.string(),
+      code: z.string(),
+      name: z.string(),
+    })
+    .optional()
+    .nullable()
+    .refine((data) => !!data, {
+      message: 'Please select a subscription',
+    }),
 })
 
 export type TSubscribeSchema = z.infer<typeof subscribeSchema>
@@ -54,7 +64,7 @@ export default function FormSubscription() {
           className="w-full max-w-md"
           action="/actions/subscribe"
         >
-          <Select
+          <Combobox
             id="subscribe_plan"
             name="subscribe_plan"
             label="Subscription"