feat: add subscription selection to registration form and implement API for fetching subscriptions

app/layouts/news/form-register.tsx

@@ -1,12 +1,14 @@
 import { zodResolver } from '@hookform/resolvers/zod'
 import { useEffect, useState } from 'react'
-import { useFetcher } from 'react-router'
+import { useFetcher, useRouteLoaderData } from 'react-router'
 import { RemixFormProvider, useRemixForm } from 'remix-hook-form'
 import { z } from 'zod'
 
 import { Button } from '~/components/ui/button'
 import { Input } from '~/components/ui/input'
+import { Select } from '~/components/ui/select'
 import { useNewsContext } from '~/contexts/news'
+import type { loader } from '~/routes/_layout'
 
 export const registerSchema = z
   .object({
@@ -14,6 +16,7 @@ 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'),
+    subscription: z.string().min(1, 'Pilih salah satu subscription'),
   })
   .refine((field) => field.password === field.rePassword, {
     message: 'Kata sandi tidak sama',
@@ -27,6 +30,7 @@ export const FormRegister = () => {
   const [error, setError] = useState<string>()
   const [disabled, setDisabled] = useState(false)
   const fetcher = useFetcher()
+  const loaderData = useRouteLoaderData<typeof loader>('routes/_layout')
 
   const formMethods = useRemixForm<TRegisterSchema>({
     mode: 'onSubmit',
@@ -89,18 +93,13 @@ export const FormRegister = () => {
               name="phone"
             />
 
-            {/* Subscribe*/}
-            {/* <div className="mb-4">
-              <label
-                htmlFor="subscription"
-                className="mb-1 block text-gray-700"
-              >
-                Subscription
-              </label>
-              <select className="focus:inheriten w-full rounded-md border border-[#DFDFDF] p-2">
-                <option selected>Subscription</option>
-              </select>
-            </div> */}
+            <Select
+              id="subscription"
+              name="subscription"
+              label="Subscription"
+              placeholder="Pilih Subscription"
+              options={loaderData?.subscriptionsData}
+            />
 
             {error && (
               <div className="text-sm text-red-500 capitalize">{error}</div>