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

app/apis/common/get-subscriptions.ts

@@ -0,0 +1,23 @@
+import { z } from 'zod'
+
+import { HttpServer, type THttpServer } from '~/libs/http-server'
+
+const subscriptionSchema = z.object({
+  data: z.array(
+    z.object({
+      id: z.string(),
+      code: z.string(),
+      name: z.string(),
+    }),
+  ),
+})
+
+export const getSubscriptions = async (parameters?: THttpServer) => {
+  try {
+    const { data } = await HttpServer(parameters).get(`/api/subscribe-plan`)
+    return subscriptionSchema.parse(data)
+  } catch (error) {
+    // eslint-disable-next-line unicorn/no-useless-promise-resolve-reject
+    return Promise.reject(error)
+  }
+}

app/components/ui/select.tsx

@@ -0,0 +1,67 @@
+import { Field, Label, Select as HeadlessSelect } from '@headlessui/react'
+import { type ComponentProps, type ReactNode } from 'react'
+import {
+  get,
+  type FieldError,
+  type FieldValues,
+  type Path,
+  type RegisterOptions,
+} from 'react-hook-form'
+import { useRemixFormContext } from 'remix-hook-form'
+
+type TInputProperties<T extends FieldValues> = Omit<
+  ComponentProps<'select'>,
+  'size'
+> & {
+  id: string
+  label?: ReactNode
+  name: Path<T>
+  rules?: RegisterOptions
+  placeholder?: string
+  options?: {
+    code: string
+    name: string
+    id: string
+  }[]
+}
+
+export const Select = <TFormValues extends Record<string, unknown>>(
+  properties: TInputProperties<TFormValues>,
+) => {
+  const { id, label, name, rules, disabled, placeholder, options, ...rest } =
+    properties
+
+  const {
+    register,
+    formState: { errors },
+  } = useRemixFormContext()
+
+  const error: FieldError = get(errors, name)
+
+  return (
+    <Field
+      className="relative"
+      disabled={disabled}
+      id={id}
+    >
+      <Label className="mb-1 block text-gray-700">
+        {label} {error && <span className="text-red-500">{error.message}</span>}
+      </Label>
+      <HeadlessSelect
+        className="focus:inheriten h-[42px] w-full rounded-md border border-[#DFDFDF] p-2"
+        {...register(name, rules)}
+        {...rest}
+      >
+        <option value="">{placeholder}</option>
+        {options?.map((option) => (
+          <option
+            key={option.id}
+            value={option.code}
+          >
+            {option.name}
+          </option>
+        ))}
+      </HeadlessSelect>
+    </Field>
+  )
+}

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>

app/routes/_layout.tsx

@@ -1,5 +1,6 @@
 import { Outlet } from 'react-router'
 
+import { getSubscriptions } from '~/apis/common/get-subscriptions'
 import { NewsProvider } from '~/contexts/news'
 import { NewsDefaultLayout } from '~/layouts/news/default'
 import { handleCookie } from '~/libs/cookies'
@@ -8,9 +9,11 @@ import type { Route } from './+types/_layout'
 
 export const loader = async ({ request }: Route.LoaderArgs) => {
   const { userToken } = await handleCookie(request)
+  const { data: subscriptionsData } = await getSubscriptions()
 
   return {
     userToken,
+    subscriptionsData,
   }
 }