feat: add Combobox component for subscription selection and integrate with form validation

app/layouts/news/form-register.tsx

@@ -1,3 +1,4 @@
+import { DevTool } from '@hookform/devtools'
 import { zodResolver } from '@hookform/resolvers/zod'
 import { useEffect, useState } from 'react'
 import { useFetcher, useRouteLoaderData } from 'react-router'
@@ -5,8 +6,8 @@ import { RemixFormProvider, useRemixForm } from 'remix-hook-form'
 import { z } from 'zod'
 
 import { Button } from '~/components/ui/button'
+import { Combobox } from '~/components/ui/combobox'
 import { Input } from '~/components/ui/input'
-import { Select } from '~/components/ui/select'
 import { useNewsContext } from '~/contexts/news'
 import type { loader } from '~/routes/_layout'
 
@@ -16,7 +17,17 @@ export const registerSchema = z
     password: z.string().min(6, 'Kata sandi minimal 6 karakter'),
     rePassword: z.string().min(6, 'Kata sandi minimal 6 karakter'),
     phone: z.string().min(10, 'No telepon tidak valid'),
-    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',
+      }),
   })
   .refine((field) => field.password === field.rePassword, {
     message: 'Kata sandi tidak sama',
@@ -40,7 +51,7 @@ export const FormRegister = () => {
     resolver: zodResolver(registerSchema),
   })
 
-  const { handleSubmit } = formMethods
+  const { handleSubmit, control } = formMethods
 
   useEffect(() => {
     if (!fetcher.data?.success) {
@@ -96,7 +107,7 @@ export const FormRegister = () => {
               name="phone"
             />
 
-            <Select
+            <Combobox
               id="subscribe_plan"
               name="subscribe_plan"
               label="Subscription"
@@ -134,6 +145,7 @@ export const FormRegister = () => {
           </Button>
         </div>
       </div>
+      <DevTool control={control} />
     </div>
   )
 }