refactor(SW-898): replace signup server action with TRPC

components/Forms/Signup/index.tsx

@@ -1,12 +1,13 @@
 "use client"
 
 import { zodResolver } from "@hookform/resolvers/zod"
+import { useRouter } from "next/navigation"
 import { FormProvider, useForm } from "react-hook-form"
 import { useIntl } from "react-intl"
 
 import { privacyPolicy } from "@/constants/currentWebHrefs"
+import { trpc } from "@/lib/trpc/client"
 
-import { registerUser } from "@/actions/registerUser"
 import Button from "@/components/TempDesignSystem/Button"
 import Checkbox from "@/components/TempDesignSystem/Form/Checkbox"
 import CountrySelect from "@/components/TempDesignSystem/Form/Country"
@@ -30,12 +31,25 @@ import type { SignUpFormProps } from "@/types/components/form/signupForm"
 
 export default function SignupForm({ link, subtitle, title }: SignUpFormProps) {
   const intl = useIntl()
+  const router = useRouter()
   const lang = useLang()
   const country = intl.formatMessage({ id: "Country" })
   const email = intl.formatMessage({ id: "Email address" })
   const phoneNumber = intl.formatMessage({ id: "Phone number" })
   const zipCode = intl.formatMessage({ id: "Zip code" })
 
+  const signup = trpc.user.signup.useMutation({
+    onSuccess: (data) => {
+      if (data.success && data.redirectUrl) {
+        router.push(data.redirectUrl)
+      }
+    },
+    onError: (error) => {
+      toast.error(intl.formatMessage({ id: "Something went wrong!" }))
+      console.error("Component Signup error:", error)
+    },
+  })
+
   const methods = useForm<SignUpSchema>({
     defaultValues: {
       firstName: "",
@@ -56,19 +70,7 @@ export default function SignupForm({ link, subtitle, title }: SignUpFormProps) {
   })
 
   async function onSubmit(data: SignUpSchema) {
-    try {
-      const result = await registerUser(data)
-      if (result && !result.success) {
-        toast.error(intl.formatMessage({ id: "Something went wrong!" }))
-      }
-    } catch (error) {
-      // The server-side redirect will throw an error, which we can ignore
-      // as it's handled by Next.js.
-      if (error instanceof Error && error.message.includes("NEXT_REDIRECT")) {
-        return
-      }
-      toast.error(intl.formatMessage({ id: "Something went wrong!" }))
-    }
+    signup.mutate({ ...data, language: lang })
   }
 
   return (
@@ -79,11 +81,6 @@ export default function SignupForm({ link, subtitle, title }: SignUpFormProps) {
           className={styles.form}
           id="register"
           onSubmit={methods.handleSubmit(onSubmit)}
-          /**
-           * Ignoring since ts doesn't recognize that tRPC
-           * parses FormData before reaching the route
-           * @ts-ignore */
-          action={registerUser}
         >
           <section className={styles.userInfo}>
             <div className={styles.container}>
@@ -194,7 +191,7 @@ export default function SignupForm({ link, subtitle, title }: SignUpFormProps) {
               type="submit"
               theme="base"
               intent="primary"
-              disabled={methods.formState.isSubmitting}
+              disabled={methods.formState.isSubmitting || signup.isPending}
               data-testid="submit"
             >
               {intl.formatMessage({ id: "Sign up to Scandic Friends" })}