From 8aeb7a3197d5d20ee5bc7816efb39345c83ed4a6 Mon Sep 17 00:00:00 2001
From: Ardeman <are.theman@gmail.com>
Date: Tue, 4 Mar 2025 09:00:10 +0800
Subject: [PATCH] feat: replace Select component with Combobox for subscription
 selection and update validation schema

---
 app/layouts/news/form-subscription.tsx | 16 +++++++++++++---
 1 file changed, 13 insertions(+), 3 deletions(-)

diff --git a/app/layouts/news/form-subscription.tsx b/app/layouts/news/form-subscription.tsx
index d631530..8a8e5e5 100644
--- a/app/layouts/news/form-subscription.tsx
+++ b/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"