legalgo-FE-reactrouter/app/pages/form-subscriptions-plan/index.tsx

import { Field, Label, Select } from '@headlessui/react'
import { zodResolver } from '@hookform/resolvers/zod'
import { useEffect, useState } from 'react'
import { useFetcher, useNavigate } 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 { TitleDashboard } from '~/components/ui/title-dashboard'
import { urlFriendlyCode } from '~/utils/formatter'

export const createSubscribePlanSchema = z.object({
  id: z.string().optional(),
  name: z.string().min(3, 'Nama minimal 3 karakter'),
  code: z.string(),
  length: z.preprocess(Number, z.number().optional()),
  price: z.preprocess(Number, z.number().optional()),
  status: z.boolean().optional(),
})
export type TSubscribePlanSchema = z.infer<typeof createSubscribePlanSchema>
type TProperties = {
  subscribePlanData?: TSubscribePlanSchema
}

export const FormSubscribePlanPage = (properties: TProperties) => {
  const { subscribePlanData } = properties || {}
  const fetcher = useFetcher()
  const navigate = useNavigate()
  const formMethods = useRemixForm<TSubscribePlanSchema>({
    mode: 'onSubmit',
    fetcher,
    resolver: zodResolver(createSubscribePlanSchema),
    values: {
      id: subscribePlanData?.id || undefined,
      code: subscribePlanData?.code || '',
      name: subscribePlanData?.name || '',
      length: subscribePlanData?.length || undefined,
      price: subscribePlanData?.price || undefined,
      status: subscribePlanData?.status || undefined,
    },
  })
  const [error, setError] = useState<string>()
  const [disabled, setDisabled] = useState(false)

  const { handleSubmit, watch, setValue } = formMethods
  const watchName = watch('name')

  useEffect(() => {
    if (!fetcher.data?.success) {
      setError(fetcher.data?.message)
      setDisabled(false)
      return
    }
    navigate('/lg-admin/subscribe-plan')
    setDisabled(true)
    setError(undefined)
    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, [fetcher])

  useEffect(() => {
    setValue('code', urlFriendlyCode(watchName))
    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, [watchName])

  return (
    <div className="relative">
      <TitleDashboard
        title={`${subscribePlanData ? 'Update' : 'Buat'} Subscribe Plan`}
      />
      <div>
        <RemixFormProvider {...formMethods}>
          <fetcher.Form
            method="post"
            onSubmit={handleSubmit}
            action={`/actions/admin/subscribe-plan/${subscribePlanData ? 'update' : 'create'}`}
            className="space-y-4"
          >
            {error && (
              <div className="text-sm text-red-500 capitalize">{error}</div>
            )}
            <div className="flex items-end justify-between gap-4">
              <Input
                id="name"
                label="Subscribe Plan"
                placeholder="Masukkan Nama Subscribe Plan"
                name="name"
                className="border-0 bg-white shadow read-only:bg-gray-100 focus:ring-1 focus:ring-[#2E2F7C] focus:outline-none disabled:bg-gray-100"
                labelClassName="text-sm font-medium text-[#363636]"
                containerClassName="flex-1"
              />
              <Input
                id="code"
                label="Kode"
                placeholder="Masukkan Kode Subscribe Plan"
                readOnly
                name="code"
                className="border-0 bg-white shadow read-only:bg-gray-100 focus:ring-1 focus:ring-[#2E2F7C] focus:outline-none disabled:bg-gray-100"
                labelClassName="text-sm font-medium text-[#363636]"
                containerClassName="flex-1"
              />
              <Button
                disabled={disabled}
                type="submit"
                size="lg"
                className="text-md h-[42px] rounded-md"
              >
                Save
              </Button>
            </div>
            <div className="flex items-end justify-between gap-4">
              <Input
                id="length"
                label="Length"
                type="number"
                placeholder="Masukkan Subscribe Plan Length (days)"
                name="length"
                className="border-0 bg-white shadow read-only:bg-gray-100 focus:ring-1 focus:ring-[#2E2F7C] focus:outline-none"
                labelClassName="text-sm font-medium text-[#363636]"
                containerClassName="flex-1"
              />
              <Input
                id="price"
                label="Price"
                placeholder="Masukkan Price"
                type="number"
                name="price"
                className="border-0 bg-white shadow read-only:bg-gray-100 focus:ring-1 focus:ring-[#2E2F7C] focus:outline-none"
                labelClassName="text-sm font-medium text-[#363636]"
                containerClassName="flex-1"
              />

              <Field className={'flex-1'}>
                <Label className="mb-2 block text-sm font-medium">Status</Label>
                <Select
                  name="status"
                  id="status"
                  className="w-full rounded-lg bg-white p-2 shadow focus:ring-1 focus:ring-[#2E2F7C] focus:outline-none"
                >
                  <option disabled>Pilih Status</option>
                  <option value={1}>Aktif</option>
                  <option value={0}>Nonaktif</option>
                </Select>
              </Field>
            </div>
          </fetcher.Form>
        </RemixFormProvider>
      </div>
    </div>
  )
}