feat: refactor user authentication and subscription dialogs for improved structure and consistency

2025-03-15 15:24:01 +08:00
parent 6d99a37f20
commit c7195b7428
13 changed files with 404 additions and 389 deletions
@@ -0,0 +1,100 @@
+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 { DialogNews } from '~/components/dialog/news'
+import { Button } from '~/components/ui/button'
+import { Combobox } from '~/components/ui/combobox'
+import { useNewsContext } from '~/contexts/news'
+import type { loader } from '~/routes/_news'
+
+export const subscribeSchema = z.object({
+  subscribe_plan: z
+    .object({
+      id: z.string(),
+      code: z.string(),
+      name: z.string(),
+    })
+    .optional()
+    .nullable()
+    .refine((data) => !!data, {
+      message: 'Please select a subscription',
+    }),
+})
+
+export type TSubscribeSchema = z.infer<typeof subscribeSchema>
+
+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 || {}
+
+  const formMethods = useRemixForm<TSubscribeSchema>({
+    mode: 'onSubmit',
+    fetcher,
+    resolver: zodResolver(subscribeSchema),
+  })
+
+  const { handleSubmit } = formMethods
+
+  useEffect(() => {
+    if (!fetcher.data?.success) {
+      setError(fetcher.data?.message)
+      return
+    }
+
+    setError(undefined)
+    setIsSubscribeOpen(false)
+    setIsSuccessOpen('payment')
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [fetcher])
+
+  return (
+    <DialogNews
+      isOpen={isSubscribeOpen}
+      onClose={() => {
+        if (fetcher.state === 'idle') {
+          setIsSubscribeOpen(false)
+        }
+      }}
+      description="Selamat Datang, silakan Pilih Subscribe Plan Anda untuk melanjutkan!"
+    >
+      <div className="flex flex-col items-center justify-center">
+        <RemixFormProvider {...formMethods}>
+          <fetcher.Form
+            method="post"
+            onSubmit={handleSubmit}
+            className="w-full max-w-md"
+            action="/actions/subscribe"
+          >
+            <Combobox
+              id="subscribe_plan"
+              name="subscribe_plan"
+              label="Subscribe Plan"
+              placeholder="Pilih Subscribe Plan"
+              options={subscribePlan}
+            />
+
+            {error && (
+              <div className="text-sm text-red-500 capitalize">{error}</div>
+            )}
+
+            <Button
+              isLoading={fetcher.state !== 'idle'}
+              disabled={fetcher.state !== 'idle'}
+              type="submit"
+              className="mt-5 w-full rounded-md py-2"
+            >
+              Lanjutkan
+            </Button>
+          </fetcher.Form>
+        </RemixFormProvider>
+      </div>
+    </DialogNews>
+  )
+}