feat: replace error state handling with toast in login, register, and subscribe dialogs

app/layouts/news/dialog-subscribe-plan.tsx

@@ -1,5 +1,6 @@
 import { zodResolver } from '@hookform/resolvers/zod'
-import { useEffect, useState } from 'react'
+import { useEffect } from 'react'
+import toast from 'react-hot-toast'
 import { useFetcher, useRouteLoaderData } from 'react-router'
 import { RemixFormProvider, useRemixForm } from 'remix-hook-form'
 import { z } from 'zod'
@@ -30,7 +31,6 @@ export const DialogSubscribePlan = () => {
   const { setIsSubscribeOpen, setIsSuccessOpen, isSubscribeOpen } =
     useNewsContext()
   const fetcher = useFetcher()
-  const [error, setError] = useState<string>()
   const loaderData = useRouteLoaderData<typeof loader>('routes/_news')
   const { subscribePlanData: subscribePlan } = loaderData || {}
 
@@ -44,11 +44,10 @@ export const DialogSubscribePlan = () => {
 
   useEffect(() => {
     if (!fetcher.data?.success) {
-      setError(fetcher.data?.message)
+      toast.error(fetcher.data?.message)
       return
     }
 
-    setError(undefined)
     setIsSubscribeOpen(false)
     setIsSuccessOpen('payment')
     // eslint-disable-next-line react-hooks/exhaustive-deps
@@ -80,10 +79,6 @@ export const DialogSubscribePlan = () => {
               options={subscribePlan}
             />
 
-            {error && (
-              <div className="text-sm text-red-500 capitalize">{error}</div>
-            )}
-
             <Button
               isLoading={fetcher.state !== 'idle'}
               disabled={fetcher.state !== 'idle'}