feat: update subscription handling in context and components

app/layouts/news/form-subscription.tsx

@@ -1,29 +1,25 @@
 import { zodResolver } from '@hookform/resolvers/zod'
+import { useEffect, useState } from 'react'
 import { useFetcher, useRouteLoaderData } from 'react-router'
 import { RemixFormProvider, useRemixForm } from 'remix-hook-form'
 import { z } from 'zod'
 
 import { Button } from '~/components/ui/button'
 import { Select } from '~/components/ui/select'
+import { useNewsContext } from '~/contexts/news'
 import type { loader } from '~/routes/_layout'
 
-export const subscribeSchema = z
-  .object({
-    email: z.string().email('Email tidak valid'),
-    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'),
-    subscribe_plan: z.string().min(1, 'Pilih salah satu subscription'),
-  })
-  .refine((field) => field.password === field.rePassword, {
-    message: 'Kata sandi tidak sama',
-    path: ['rePassword'],
-  })
+export const subscribeSchema = z.object({
+  subscribe_plan: z.string().min(1, 'Pilih salah satu subscription'),
+})
 
 export type TSubscribeSchema = z.infer<typeof subscribeSchema>
 
 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/_layout')
   const subscriptions = loaderData?.subscriptionsData
 
@@ -35,6 +31,20 @@ export default function FormSubscription() {
 
   const { handleSubmit } = formMethods
 
+  useEffect(() => {
+    if (!fetcher.data?.success) {
+      setError(fetcher.data?.message)
+      setDisabled(false)
+      return
+    }
+
+    setDisabled(true)
+    setError(undefined)
+    setIsSubscribeOpen(false)
+    setIsSuccessOpen('payment')
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [fetcher])
+
   return (
     <div className="flex flex-col items-center justify-center">
       <RemixFormProvider {...formMethods}>
@@ -42,7 +52,7 @@ export default function FormSubscription() {
           method="post"
           onSubmit={handleSubmit}
           className="w-full max-w-md"
-          action="/actions/register"
+          action="/actions/subscribe"
         >
           <Select
             id="subscribe_plan"
@@ -52,7 +62,12 @@ export default function FormSubscription() {
             options={subscriptions}
           />
 
+          {error && (
+            <div className="text-sm text-red-500 capitalize">{error}</div>
+          )}
+
           <Button
+            disabled={disabled}
             type="submit"
             className="mt-5 w-full rounded-md bg-[#2E2F7C] py-2 text-white transition hover:bg-blue-800"
           >