feat: update subscription handling in context and components

app/layouts/news/default.tsx

@@ -25,8 +25,8 @@ export const NewsDefaultLayout = (properties: PropsWithChildren) => {
     setIsForgetOpen,
     isSuccessOpen,
     setIsSuccessOpen,
-    isInitSubscribeOpen,
-    setIsInitSubscribeOpen,
+    isSubscribeOpen,
+    setIsSubscribeOpen,
   } = useNewsContext()
   return (
     <main className="relative min-h-dvh bg-[#ECECEC]">
@@ -69,8 +69,8 @@ export const NewsDefaultLayout = (properties: PropsWithChildren) => {
       </PopupModal>
 
       <PopupModal
-        isOpen={isInitSubscribeOpen}
-        onClose={() => setIsInitSubscribeOpen(false)}
+        isOpen={isSubscribeOpen}
+        onClose={() => setIsSubscribeOpen(false)}
         description="Selamat Datang, silakan Pilih Subscription Anda untuk melanjutkan!"
       >
         <FormSubscription />

app/layouts/news/form-login.tsx

@@ -20,7 +20,7 @@ export const FormLogin = () => {
     setIsRegisterOpen,
     setIsLoginOpen,
     setIsForgetOpen,
-    setIsInitSubscribeOpen,
+    setIsSubscribeOpen,
   } = useNewsContext()
   const fetcher = useFetcher()
   const [error, setError] = useState<string>()
@@ -46,7 +46,7 @@ export const FormLogin = () => {
     setIsLoginOpen(false)
 
     if (fetcher.data?.user.subscribe_plan_code === 'basic') {
-      setIsInitSubscribeOpen(true)
+      setIsSubscribeOpen(true)
     }
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [fetcher])

app/layouts/news/form-register.tsx

@@ -26,7 +26,8 @@ export const registerSchema = z
 export type TRegisterSchema = z.infer<typeof registerSchema>
 
 export const FormRegister = () => {
-  const { setIsLoginOpen, setIsRegisterOpen } = useNewsContext()
+  const { setIsLoginOpen, setIsRegisterOpen, setIsSuccessOpen } =
+    useNewsContext()
   const [error, setError] = useState<string>()
   const [disabled, setDisabled] = useState(false)
   const fetcher = useFetcher()
@@ -51,6 +52,7 @@ export const FormRegister = () => {
     setDisabled(true)
     setError(undefined)
     setIsRegisterOpen(false)
+    setIsSuccessOpen('register')
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [fetcher])
 

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"
           >