feat: update subscription handling in context and components

app/components/popup/success-modal.tsx

@@ -6,7 +6,7 @@ import {
   DialogTitle,
 } from '@headlessui/react'
 import type { ReactNode } from 'react'
-import { useRouteLoaderData } from 'react-router'
+import { Link, useRouteLoaderData } from 'react-router'
 
 import { LeftArrow } from '~/components/icons/left-arrow'
 import { Button } from '~/components/ui/button'
@@ -34,7 +34,7 @@ const DESCRIPTIONS: DescriptionMap = {
 }
 
 export const SuccessModal = ({ isOpen, onClose }: ModalProperties) => {
-  const { setIsLoginOpen, setIsInitSubscribeOpen } = useNewsContext()
+  const { setIsLoginOpen, setIsSubscribeOpen } = useNewsContext()
   const loaderData = useRouteLoaderData<typeof loader>('routes/_layout')
   const userData = loaderData?.userData
 
@@ -93,6 +93,8 @@ export const SuccessModal = ({ isOpen, onClose }: ModalProperties) => {
                   <Button
                     className="mt-5 w-full rounded-md"
                     variant="newsPrimary"
+                    as={Link}
+                    to="/"
                     onClick={onClose}
                   >
                     Back to Home
@@ -112,7 +114,7 @@ export const SuccessModal = ({ isOpen, onClose }: ModalProperties) => {
                       variant="newsSecondary"
                       onClick={() => {
                         onClose()
-                        setIsInitSubscribeOpen(true)
+                        setIsSubscribeOpen(true)
                       }}
                     >
                       Select Subscription

app/contexts/news.tsx

@@ -20,8 +20,8 @@ type NewsContextProperties = {
   setIsSuccessOpen: Dispatch<
     SetStateAction<ModalProperties['isOpen'] | undefined>
   >
-  isInitSubscribeOpen: boolean
+  isSubscribeOpen: boolean
-  setIsInitSubscribeOpen: Dispatch<SetStateAction<boolean>>
+  setIsSubscribeOpen: Dispatch<SetStateAction<boolean>>
 }
 
 const NewsContext = createContext<NewsContextProperties | undefined>(undefined)
@@ -32,7 +32,7 @@ export const NewsProvider = ({ children }: PropsWithChildren) => {
   const [isForgetOpen, setIsForgetOpen] = useState(false)
   const [isSuccessOpen, setIsSuccessOpen] =
     useState<ModalProperties['isOpen']>()
-  const [isInitSubscribeOpen, setIsInitSubscribeOpen] = useState(false)
+  const [isSubscribeOpen, setIsSubscribeOpen] = useState(false)
 
   return (
     <NewsContext.Provider
@@ -45,8 +45,8 @@ export const NewsProvider = ({ children }: PropsWithChildren) => {
         setIsForgetOpen,
         isSuccessOpen,
         setIsSuccessOpen,
-        isInitSubscribeOpen,
+        isSubscribeOpen,
-        setIsInitSubscribeOpen,
+        setIsSubscribeOpen,
       }}
     >
       {children}

app/layouts/news/default.tsx

@@ -25,8 +25,8 @@ export const NewsDefaultLayout = (properties: PropsWithChildren) => {
     setIsForgetOpen,
     isSuccessOpen,
     setIsSuccessOpen,
-    isInitSubscribeOpen,
+    isSubscribeOpen,
-    setIsInitSubscribeOpen,
+    setIsSubscribeOpen,
   } = useNewsContext()
   return (
     <main className="relative min-h-dvh bg-[#ECECEC]">
@@ -69,8 +69,8 @@ export const NewsDefaultLayout = (properties: PropsWithChildren) => {
       </PopupModal>
 
       <PopupModal
-        isOpen={isInitSubscribeOpen}
+        isOpen={isSubscribeOpen}
-        onClose={() => setIsInitSubscribeOpen(false)}
+        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
+export const subscribeSchema = z.object({
-  .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 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"
           >

app/routes/actions.subscribe.ts

@@ -0,0 +1,69 @@
+import { zodResolver } from '@hookform/resolvers/zod'
+import { data } from 'react-router'
+import { getValidatedFormData } from 'remix-hook-form'
+import { XiorError } from 'xior'
+
+import { getUser } from '~/apis/news/get-user'
+import {
+  subscribeSchema,
+  type TSubscribeSchema,
+} from '~/layouts/news/form-subscription'
+import { handleCookie } from '~/libs/cookies'
+
+import type { Route } from './+types/actions.register'
+
+export const action = async ({ request }: Route.ActionArgs) => {
+  const { userToken } = await handleCookie(request)
+  try {
+    const {
+      errors,
+      data: payload,
+      receivedValues: defaultValues,
+    } = await getValidatedFormData<TSubscribeSchema>(
+      request,
+      zodResolver(subscribeSchema),
+      false,
+    )
+
+    if (errors) {
+      return data({ success: false, errors, defaultValues }, { status: 400 })
+    }
+
+    // TODO: implement subscribe
+    console.log('payload', payload) // eslint-disable-line no-console
+
+    const { data: userData } = await getUser({
+      accessToken: userToken,
+    })
+
+    return data(
+      {
+        success: true,
+        user: userData,
+      },
+      {
+        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 },
+    )
+  }
+}