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

actions/registerUser.ts

@@ -1,89 +0,0 @@
-"use server"
-
-import { parsePhoneNumber } from "libphonenumber-js"
-import { redirect } from "next/navigation"
-import { z } from "zod"
-
-import { signupVerify } from "@/constants/routes/signup"
-import * as api from "@/lib/api"
-import { serviceServerActionProcedure } from "@/server/trpc"
-
-import { signUpSchema } from "@/components/Forms/Signup/schema"
-import { passwordValidator } from "@/utils/passwordValidator"
-import { phoneValidator } from "@/utils/phoneValidator"
-
-const registerUserPayload = z.object({
-  language: z.string(),
-  firstName: z.string(),
-  lastName: z.string(),
-  email: z.string(),
-  phoneNumber: phoneValidator("Phone is required"),
-  dateOfBirth: z.string(),
-  address: z.object({
-    city: z.string().default(""),
-    country: z.string().default(""),
-    countryCode: z.string().default(""),
-    zipCode: z.string().default(""),
-    streetAddress: z.string().default(""),
-  }),
-  password: passwordValidator("Password is required"),
-})
-
-export const registerUser = serviceServerActionProcedure
-  .input(signUpSchema)
-  .mutation(async function ({ ctx, input }) {
-    const payload = {
-      ...input,
-      language: ctx.lang,
-      phoneNumber: input.phoneNumber.replace(/\s+/g, ""),
-    }
-
-    const parsedPayload = registerUserPayload.safeParse(payload)
-    if (!parsedPayload.success) {
-      console.error(
-        "registerUser payload validation error",
-        JSON.stringify({
-          query: input,
-          error: parsedPayload.error,
-        })
-      )
-
-      return { success: false, error: "Validation error" }
-    }
-
-    let apiResponse
-    try {
-      apiResponse = await api.post(api.endpoints.v1.Profile.profile, {
-        body: parsedPayload.data,
-        headers: {
-          Authorization: `Bearer ${ctx.serviceToken}`,
-        },
-      })
-    } catch (error) {
-      console.error("Unexpected error", error)
-      return { success: false, error: "Unexpected error" }
-    }
-
-    if (!apiResponse.ok) {
-      const text = await apiResponse.text()
-      console.error(
-        "registerUser api error",
-        JSON.stringify({
-          query: input,
-          error: {
-            status: apiResponse.status,
-            statusText: apiResponse.statusText,
-            error: text,
-          },
-        })
-      )
-      return { success: false, error: "API error" }
-    }
-
-    const json = await apiResponse.json()
-    console.log("registerUser: json", json)
-
-    // Note: The redirect needs to be called after the try/catch block.
-    // See: https://nextjs.org/docs/app/api-reference/functions/redirect
-    redirect(signupVerify[ctx.lang])
-  })

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 {
+    signup.mutate({ ...data, language: lang })
-      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!" }))
-    }
   }
 
   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" })}

server/routers/user/input.ts

@@ -1,5 +1,9 @@
 import { z } from "zod"
 
+import { Lang } from "@/constants/languages"
+
+import { signUpSchema } from "@/components/Forms/Signup/schema"
+
 // Query
 export const staysInput = z
   .object({
@@ -35,3 +39,7 @@ export const saveCreditCardInput = z.object({
   transactionId: z.string(),
   merchantId: z.string().optional(),
 })
+
+export const signupInput = signUpSchema.extend({
+  language: z.nativeEnum(Lang),
+})

server/routers/user/mutation.ts

@@ -1,17 +1,21 @@
 import { metrics } from "@opentelemetry/api"
 
+import { signupVerify } from "@/constants/routes/signup"
 import { env } from "@/env/server"
 import * as api from "@/lib/api"
+import { badRequestError, serverErrorByStatus } from "@/server/errors/trpc"
 import {
   initiateSaveCardSchema,
+  signupPayloadSchema,
   subscriberIdSchema,
 } from "@/server/routers/user/output"
-import { protectedProcedure, router } from "@/server/trpc"
+import { protectedProcedure, router,serviceProcedure } from "@/server/trpc"
 
 import {
   addCreditCardInput,
   deleteCreditCardInput,
   saveCreditCardInput,
+  signupInput,
 } from "./input"
 
 const meter = metrics.getMeter("trpc.user")
@@ -24,6 +28,9 @@ const generatePreferencesLinkSuccessCounter = meter.createCounter(
 const generatePreferencesLinkFailCounter = meter.createCounter(
   "trpc.user.generatePreferencesLink-fail"
 )
+const signupCounter = meter.createCounter("trpc.user.signup")
+const signupSuccessCounter = meter.createCounter("trpc.user.signup-success")
+const signupFailCounter = meter.createCounter("trpc.user.signup-fail")
 
 export const userMutationRouter = router({
   creditCard: router({
@@ -208,4 +215,67 @@ export const userMutationRouter = router({
     generatePreferencesLinkSuccessCounter.add(1)
     return preferencesLink.toString()
   }),
+  signup: serviceProcedure.input(signupInput).mutation(async function ({
+    ctx,
+    input,
+  }) {
+    const payload = {
+      ...input,
+      language: input.language,
+      phoneNumber: input.phoneNumber.replace(/\s+/g, ""),
+    }
+    signupCounter.add(1)
+
+    const parsedPayload = signupPayloadSchema.safeParse(payload)
+    if (!parsedPayload.success) {
+      signupFailCounter.add(1, {
+        error_type: "validation_error",
+        error: JSON.stringify(parsedPayload.error),
+      })
+      console.error(
+        "api.user.signup validation error",
+        JSON.stringify({
+          query: input,
+          error: parsedPayload.error,
+        })
+      )
+      throw badRequestError(parsedPayload.error)
+    }
+
+    const apiResponse = await api.post(api.endpoints.v1.Profile.profile, {
+      body: parsedPayload.data,
+      headers: {
+        Authorization: `Bearer ${ctx.serviceToken}`,
+      },
+    })
+
+    if (!apiResponse.ok) {
+      const text = await apiResponse.text()
+      signupFailCounter.add(1, {
+        error_type: "http_error",
+        error: JSON.stringify({
+          status: apiResponse.status,
+          statusText: apiResponse.statusText,
+          error: text,
+        }),
+      })
+      console.error(
+        "api.user.signup api error",
+        JSON.stringify({
+          error: {
+            status: apiResponse.status,
+            statusText: apiResponse.statusText,
+            error: text,
+          },
+        })
+      )
+      throw serverErrorByStatus(apiResponse.status, text)
+    }
+    signupSuccessCounter.add(1)
+    console.info("api.user.signup success", JSON.stringify({}))
+    return {
+      success: true,
+      redirectUrl: signupVerify[input.language],
+    }
+  }),
 })

server/routers/user/output.ts

@@ -1,6 +1,8 @@
 import { z } from "zod"
 
 import { countriesMap } from "@/components/TempDesignSystem/Form/Country/countries"
+import { passwordValidator } from "@/utils/passwordValidator"
+import { phoneValidator } from "@/utils/phoneValidator"
 import { getMembership } from "@/utils/user"
 
 export const membershipSchema = z.object({
@@ -244,3 +246,20 @@ export const initiateSaveCardSchema = z.object({
 export const subscriberIdSchema = z.object({
   subscriberId: z.string(),
 })
+
+export const signupPayloadSchema = z.object({
+  language: z.string(),
+  firstName: z.string(),
+  lastName: z.string(),
+  email: z.string(),
+  phoneNumber: phoneValidator("Phone is required"),
+  dateOfBirth: z.string(),
+  address: z.object({
+    city: z.string().default(""),
+    country: z.string().default(""),
+    countryCode: z.string().default(""),
+    zipCode: z.string().default(""),
+    streetAddress: z.string().default(""),
+  }),
+  password: passwordValidator("Password is required"),
+})

server/trpc.ts

@@ -121,7 +121,7 @@ export const safeProtectedProcedure = t.procedure.use(async function (opts) {
   })
 })
 
-export const serviceProcedure = t.procedure.use(async (opts) => {
+export const serviceProcedure = t.procedure.use(async function (opts) {
   const { access_token } = await getServiceToken()
   if (!access_token) {
     throw internalServerError(`[serviceProcedure] No service token`)