feat: add length, price, and status fields to subscription plan schema and forms

app/apis/common/get-subscriptions.ts

@@ -8,6 +8,9 @@ const subscriptionResponseSchema = z.object({
       id: z.string(),
       code: z.string(),
       name: z.string(),
+      length: z.number().optional(),
+      price: z.number().optional(),
+      status: z.number().optional(),
     }),
   ),
 })

app/pages/form-subscriptions-plan/index.tsx

@@ -1,3 +1,4 @@
+import { Field, Label, Select } from '@headlessui/react'
 import { zodResolver } from '@hookform/resolvers/zod'
 import { useEffect, useState } from 'react'
 import { useFetcher, useNavigate } from 'react-router'
@@ -13,6 +14,9 @@ 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 = {
@@ -31,6 +35,9 @@ export const FormSubscribePlanPage = (properties: TProperties) => {
       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>()
@@ -101,6 +108,41 @@ export const FormSubscribePlanPage = (properties: TProperties) => {
                 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>

app/routes/actions.admin.subscribe-plan.create.ts

@@ -29,7 +29,7 @@ export const action = async ({ request }: Route.ActionArgs) => {
       return data({ success: false, errors, defaultValues }, { status: 400 })
     }
 
-    const { data: tagsData } = await createSubscribePlanRequest({
+    const { data: subscribePlanData } = await createSubscribePlanRequest({
       accessToken: staffToken,
       payload,
     })
@@ -37,7 +37,7 @@ export const action = async ({ request }: Route.ActionArgs) => {
     return data(
       {
         success: true,
-        tagsData,
+        subscribePlanData,
       },
       {
         status: 200,

app/routes/actions.admin.subscribe-plan.update.ts

@@ -5,8 +5,10 @@ import { XiorError } from 'xior'
 
 import { updateSubscribePlanRequest } from '~/apis/admin/update-subscribe-plan'
 import { handleCookie } from '~/libs/cookies'
-import type { TSubscribePlanSchema } from '~/pages/form-subscriptions-plan'
+import {
-import { createTagSchema } from '~/pages/form-tag'
+  createSubscribePlanSchema,
+  type TSubscribePlanSchema,
+} from '~/pages/form-subscriptions-plan'
 
 import type { Route } from './+types/actions.register'
 
@@ -19,7 +21,7 @@ export const action = async ({ request }: Route.ActionArgs) => {
       receivedValues: defaultValues,
     } = await getValidatedFormData<TSubscribePlanSchema>(
       request,
-      zodResolver(createTagSchema),
+      zodResolver(createSubscribePlanSchema),
       false,
     )
 
@@ -27,7 +29,7 @@ export const action = async ({ request }: Route.ActionArgs) => {
       return data({ success: false, errors, defaultValues }, { status: 400 })
     }
 
-    const { data: tagData } = await updateSubscribePlanRequest({
+    const { data: subscribePlanData } = await updateSubscribePlanRequest({
       accessToken: staffToken,
       payload,
     })
@@ -35,7 +37,7 @@ export const action = async ({ request }: Route.ActionArgs) => {
     return data(
       {
         success: true,
-        tagData,
+        subscribePlanData,
       },
       {
         status: 200,