Merge commit 'd3f0dac69f14c56ddc705844e3712819f096c70d'

.vscode/settings.json

@@ -25,6 +25,8 @@
     "labelClassName",
     "buttonClassName",
     "leftNodeClassName",
-    "rightNodeClassName"
+    "rightNodeClassName",
+    "buttonVariants",
+    "cva"
   ]
 }

app/apis/admin/create-subscribe-plan.ts

@@ -0,0 +1,28 @@
+import { z } from 'zod'
+
+import { HttpServer, type THttpServer } from '~/libs/http-server'
+import type { TSubscribePlanSchema } from '~/pages/form-subscriptions-plan'
+
+const subscribePlanResponseSchema = z.object({
+  data: z.object({
+    Message: z.string(),
+  }),
+})
+
+type TParameters = {
+  payload: TSubscribePlanSchema
+} & THttpServer
+
+export const createSubscribePlanRequest = async (parameters: TParameters) => {
+  const { payload, ...restParameters } = parameters
+  try {
+    const { data } = await HttpServer(restParameters).post(
+      '/api/subscribe-plan/create',
+      payload,
+    )
+    return subscribePlanResponseSchema.parse(data)
+  } catch (error) {
+    // eslint-disable-next-line unicorn/no-useless-promise-resolve-reject
+    return Promise.reject(error)
+  }
+}

app/apis/admin/update-subscribe-plan.ts

@@ -0,0 +1,29 @@
+import { z } from 'zod'
+
+import { HttpServer, type THttpServer } from '~/libs/http-server'
+import type { TSubscribePlanSchema } from '~/pages/form-subscriptions-plan'
+
+const subscribePlanResponseSchema = z.object({
+  data: z.object({
+    Message: z.string(),
+  }),
+})
+
+type TParameters = {
+  payload: TSubscribePlanSchema
+} & THttpServer
+
+export const updateSubscribePlanRequest = async (parameters: TParameters) => {
+  const { payload, ...restParameters } = parameters
+  const { id, ...restPayload } = payload
+  try {
+    const { data } = await HttpServer(restParameters).put(
+      `/api/subscribe-plan/${id}/update`,
+      restPayload,
+    )
+    return subscribePlanResponseSchema.parse(data)
+  } catch (error) {
+    // eslint-disable-next-line unicorn/no-useless-promise-resolve-reject
+    return Promise.reject(error)
+  }
+}

app/components/ui/button.tsx

@@ -1,4 +1,5 @@
 import { Button as HeadlessButton } from '@headlessui/react'
+import { ArrowPathIcon } from '@heroicons/react/20/solid'
 import { cva, type VariantProps } from 'class-variance-authority'
 import type { ReactNode, ElementType, ComponentPropsWithoutRef } from 'react'
 import { twMerge } from 'tailwind-merge'
@@ -8,11 +9,14 @@ const buttonVariants = cva(
   {
     variants: {
       variant: {
-        newsPrimary: 'bg-[#2E2F7C] text-white text-lg',
+        newsPrimary:
-        newsPrimaryOutline: 'border-[3px] border-white text-white text-lg',
+          'bg-[#2E2F7C] text-white text-lg hover:bg-[#4C5CA0] hover:shadow transition active:bg-[#6970B4]',
-        newsSecondary: 'border-[3px] border-[#2E2F7C] text-[#2E2F7C] text-lg',
+        newsPrimaryOutline:
+          'border-[3px] bg-[#2E2F7C]  border-white text-white text-lg hover:bg-[#4C5CA0] hover:shadow-lg active:shadow-2xl transition active:bg-[#6970B4]',
+        newsSecondary:
+          'border-[3px] bg-white hover:shadow-lg active:shadow-2xl border-[#2E2F7C] text-[#2E2F7C] hover:text-[#4C5CA0] active:text-[#6970B4] text-lg hover:border-[#4C5CA0] transition active:border-[#6970B4]',
         icon: '',
-        link: '',
+        link: 'font-semibold text-[#2E2F7C] hover:text-[#4C5CA0] active:text-[#6970B4] transition',
       },
       size: {
         default: 'h-[50px] w-[150px]',
@@ -35,6 +39,7 @@ type ButtonBaseProperties = {
   variant?: VariantProps<typeof buttonVariants>['variant']
   size?: VariantProps<typeof buttonVariants>['size']
   className?: string
+  isLoading?: boolean
 }
 
 type PolymorphicReference<C extends ElementType> =
@@ -45,22 +50,27 @@ type ButtonProperties<C extends ElementType> = ButtonBaseProperties & {
   ref?: PolymorphicReference<C>
 } & Omit<ComponentPropsWithoutRef<C>, keyof ButtonBaseProperties>
 
-export const Button = <C extends ElementType = 'button'>({
+export const Button = <C extends ElementType = 'button'>(
+  properties: ButtonProperties<C>,
+) => {
+  const {
     as,
     children,
     variant,
     size,
     className,
-  ...properties
+    isLoading = false,
-}: ButtonProperties<C>) => {
+    ...restProperties
+  } = properties
   const Component = as || HeadlessButton
   const classes = twMerge(buttonVariants({ variant, size, className }))
 
   return (
     <Component
       className={classes}
-      {...properties}
+      {...restProperties}
     >
+      {isLoading && <ArrowPathIcon className="animate-spin" />}
       {children}
     </Component>
   )

app/layouts/news/form-forgot-password.tsx

@@ -22,7 +22,7 @@ export const FormForgotPassword = () => {
           </div>
 
           {/* Tombol Masuk */}
-          <Button className="mt-5 w-full rounded-md bg-[#2E2F7C] py-2 text-white transition hover:bg-blue-800">
+          <Button className="mt-5 w-full rounded-md py-2">
             Reset Password
           </Button>
         </form>

app/layouts/news/form-login.tsx

@@ -24,7 +24,6 @@ export const FormLogin = () => {
   } = useNewsContext()
   const fetcher = useFetcher()
   const [error, setError] = useState<string>()
-  const [disabled, setDisabled] = useState(false)
 
   const formMethods = useRemixForm<TLoginSchema>({
     mode: 'onSubmit',
@@ -37,11 +36,9 @@ export const FormLogin = () => {
   useEffect(() => {
     if (!fetcher.data?.success) {
       setError(fetcher.data?.message)
-      setDisabled(false)
       return
     }
 
-    setDisabled(true)
     setError(undefined)
     setIsLoginOpen(false)
 
@@ -87,7 +84,6 @@ export const FormLogin = () => {
                   setIsLoginOpen(false)
                   setIsForgetOpen(true)
                 }}
-                className="font-semibold text-[#2E2F7C]"
                 variant="link"
                 size="fit"
               >
@@ -96,9 +92,10 @@ export const FormLogin = () => {
             </div>
 
             <Button
-              disabled={disabled}
+              isLoading={fetcher.state !== 'idle'}
+              disabled={fetcher.state !== 'idle'}
               type="submit"
-              className="w-full rounded-md bg-[#2E2F7C] py-2 text-white transition hover:bg-blue-800"
+              className="w-full rounded-md py-2"
             >
               Masuk
             </Button>
@@ -113,7 +110,6 @@ export const FormLogin = () => {
               setIsLoginOpen(false)
               setIsRegisterOpen(true)
             }}
-            className="font-semibold text-[#2E2F7C]"
             variant="link"
             size="fit"
           >

app/layouts/news/form-register.tsx

@@ -40,7 +40,6 @@ export const FormRegister = () => {
   const { setIsLoginOpen, setIsRegisterOpen, setIsSuccessOpen } =
     useNewsContext()
   const [error, setError] = useState<string>()
-  const [disabled, setDisabled] = useState(false)
   const fetcher = useFetcher()
   const loaderData = useRouteLoaderData<typeof loader>('routes/_news')
   const { subscriptionsData: subscriptions } = loaderData || {}
@@ -56,11 +55,9 @@ export const FormRegister = () => {
   useEffect(() => {
     if (!fetcher.data?.success) {
       setError(fetcher.data?.message)
-      setDisabled(false)
       return
     }
 
-    setDisabled(true)
     setError(undefined)
     setIsRegisterOpen(false)
     setIsSuccessOpen('register')
@@ -120,9 +117,10 @@ export const FormRegister = () => {
             )}
 
             <Button
-              disabled={disabled}
+              isLoading={fetcher.state !== 'idle'}
+              disabled={fetcher.state !== 'idle'}
               type="submit"
-              className="w-full rounded-md bg-[#2E2F7C] py-2 text-white transition hover:bg-blue-800"
+              className="w-full rounded-md py-2"
             >
               Daftar
             </Button>
@@ -137,7 +135,6 @@ export const FormRegister = () => {
               setIsLoginOpen(true)
               setIsRegisterOpen(false)
             }}
-            className="font-semibold text-[#2E2F7C]"
             variant="link"
             size="fit"
           >

app/layouts/news/form-subscription.tsx

@@ -29,7 +29,6 @@ export default function FormSubscription() {
   const { setIsSubscribeOpen, setIsSuccessOpen } = useNewsContext()
   const fetcher = useFetcher()
   const [error, setError] = useState<string>()
-  const [disabled, setDisabled] = useState(false)
   const loaderData = useRouteLoaderData<typeof loader>('routes/_news')
   const { subscriptionsData: subscriptions } = loaderData || {}
 
@@ -44,11 +43,9 @@ export default function FormSubscription() {
   useEffect(() => {
     if (!fetcher.data?.success) {
       setError(fetcher.data?.message)
-      setDisabled(false)
       return
     }
 
-    setDisabled(true)
     setError(undefined)
     setIsSubscribeOpen(false)
     setIsSuccessOpen('payment')
@@ -77,9 +74,10 @@ export default function FormSubscription() {
           )}
 
           <Button
-            disabled={disabled}
+            isLoading={fetcher.state !== 'idle'}
+            disabled={fetcher.state !== 'idle'}
             type="submit"
-            className="mt-5 w-full rounded-md bg-[#2E2F7C] py-2 text-white transition hover:bg-blue-800"
+            className="mt-5 w-full rounded-md py-2"
           >
             Lanjutkan
           </Button>

app/layouts/news/header-menu-mobile.tsx

@@ -71,7 +71,7 @@ export default function HeaderMenuMobile(properties: THeaderMenuMobile) {
                 >
                   <Button
                     variant="newsSecondary"
-                    className="w-full bg-white px-[35px] py-3 text-center text-[#2E2F7C] sm:hidden"
+                    className="w-full px-[35px] py-3 text-center sm:hidden"
                     type="submit"
                   >
                     Logout
@@ -80,7 +80,7 @@ export default function HeaderMenuMobile(properties: THeaderMenuMobile) {
               ) : (
                 <Button
                   variant="newsSecondary"
-                  className="w-full bg-white px-[35px] py-3 text-center text-[#2E2F7C] sm:hidden"
+                  className="w-full px-[35px] py-3 text-center sm:hidden"
                   onClick={() => {
                     setIsMenuOpen(false)
                     setIsLoginOpen(true)

app/layouts/news/header-menu.tsx

@@ -1,5 +1,6 @@
 import { Link, useRouteLoaderData } from 'react-router'
 
+import { Button } from '~/components/ui/button'
 import HeaderMenuMobile from '~/layouts/news/header-menu-mobile'
 import type { loader } from '~/routes/_news'
 
@@ -17,15 +18,17 @@ export const HeaderMenu = () => {
     <>
       <div className="hidden h-[60px] items-center justify-between bg-[#2E2F7C] text-xl font-medium text-white sm:flex">
         {menu?.map((item) => (
-          <Link
+          <Button
+            as={Link}
             key={item.id}
             to={`/category/${item.code}`}
+            size="fit"
             className={
-              'flex h-full items-center justify-center border-r border-white px-[35px]'
+              'flex h-full items-center justify-center border-r border-white px-[35px] text-xl'
             }
           >
             {item.name}
-          </Link>
+          </Button>
         ))}
         <HeaderSearch />
       </div>

app/layouts/news/header-top.tsx

@@ -34,8 +34,10 @@ export const HeaderTop = () => {
           >
             <Button
               variant="newsSecondary"
-              className="hidden sm:block"
+              className="hidden sm:flex"
               type="submit"
+              disabled={fetcher.state !== 'idle'}
+              isLoading={fetcher.state !== 'idle'}
             >
               Logout
             </Button>

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

@@ -0,0 +1,109 @@
+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(),
+})
+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 || '',
+    },
+  })
+  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>
+          </fetcher.Form>
+        </RemixFormProvider>
+      </div>
+    </div>
+  )
+}

app/routes/_admin.lg-admin._dashboard.subscribe-plan.create.tsx

@@ -0,0 +1,4 @@
+import { FormSubscribePlanPage } from '~/pages/form-subscriptions-plan'
+
+const DashboardSubscribePlanCreateLayout = () => <FormSubscribePlanPage />
+export default DashboardSubscribePlanCreateLayout

app/routes/_admin.lg-admin._dashboard.subscribe-plan.update.$id.tsx

@@ -0,0 +1,20 @@
+import { getSubscriptions } from '~/apis/common/get-subscriptions'
+import { FormSubscribePlanPage } from '~/pages/form-subscriptions-plan'
+
+import type { Route } from './+types/_admin.lg-admin._dashboard.subscribe-plan.update.$id'
+
+export const loader = async ({ params }: Route.LoaderArgs) => {
+  const { data: subscribePlansData } = await getSubscriptions()
+  const subscribePlanData = subscribePlansData.find(
+    (subscribePlan) => subscribePlan.id === params.id,
+  )
+  return { subscribePlanData }
+}
+
+const DashboardSubscribePlanUpdateLayout = ({
+  loaderData,
+}: Route.ComponentProps) => {
+  const { subscribePlanData } = loaderData || {}
+  return <FormSubscribePlanPage subscribePlanData={subscribePlanData} />
+}
+export default DashboardSubscribePlanUpdateLayout

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

@@ -0,0 +1,67 @@
+import { zodResolver } from '@hookform/resolvers/zod'
+import { data } from 'react-router'
+import { getValidatedFormData } from 'remix-hook-form'
+import { XiorError } from 'xior'
+
+import { createSubscribePlanRequest } from '~/apis/admin/create-subscribe-plan'
+import { handleCookie } from '~/libs/cookies'
+import {
+  createSubscribePlanSchema,
+  type TSubscribePlanSchema,
+} from '~/pages/form-subscriptions-plan'
+
+import type { Route } from './+types/actions.register'
+
+export const action = async ({ request }: Route.ActionArgs) => {
+  const { staffToken } = await handleCookie(request)
+  try {
+    const {
+      errors,
+      data: payload,
+      receivedValues: defaultValues,
+    } = await getValidatedFormData<TSubscribePlanSchema>(
+      request,
+      zodResolver(createSubscribePlanSchema),
+      false,
+    )
+
+    if (errors) {
+      return data({ success: false, errors, defaultValues }, { status: 400 })
+    }
+
+    const { data: tagsData } = await createSubscribePlanRequest({
+      accessToken: staffToken,
+      payload,
+    })
+
+    return data(
+      {
+        success: true,
+        tagsData,
+      },
+      {
+        status: 200,
+        statusText: 'OK',
+      },
+    )
+  } catch (error) {
+    if (error instanceof XiorError) {
+      return data(
+        {
+          success: false,
+          message: error?.response?.data?.error?.message || error.message,
+        },
+        {
+          status: error?.response?.status || 500,
+        },
+      )
+    }
+    return data(
+      {
+        success: false,
+        message: 'Internal server error',
+      },
+      { status: 500 },
+    )
+  }
+}

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

@@ -0,0 +1,65 @@
+import { zodResolver } from '@hookform/resolvers/zod'
+import { data } from 'react-router'
+import { getValidatedFormData } from 'remix-hook-form'
+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 { createTagSchema } from '~/pages/form-tag'
+
+import type { Route } from './+types/actions.register'
+
+export const action = async ({ request }: Route.ActionArgs) => {
+  const { staffToken } = await handleCookie(request)
+  try {
+    const {
+      errors,
+      data: payload,
+      receivedValues: defaultValues,
+    } = await getValidatedFormData<TSubscribePlanSchema>(
+      request,
+      zodResolver(createTagSchema),
+      false,
+    )
+
+    if (errors) {
+      return data({ success: false, errors, defaultValues }, { status: 400 })
+    }
+
+    const { data: tagData } = await updateSubscribePlanRequest({
+      accessToken: staffToken,
+      payload,
+    })
+
+    return data(
+      {
+        success: true,
+        tagData,
+      },
+      {
+        status: 200,
+        statusText: 'OK',
+      },
+    )
+  } catch (error) {
+    if (error instanceof XiorError) {
+      return data(
+        {
+          success: false,
+          message: error?.response?.data?.error?.message || error.message,
+        },
+        {
+          status: error?.response?.status || 500,
+        },
+      )
+    }
+    return data(
+      {
+        success: false,
+        message: 'Internal server error',
+      },
+      { status: 500 },
+    )
+  }
+}