feat(WEB-162): final design for my profile page

server/routers/user/input.ts

@@ -1,5 +1,11 @@
 import { z } from "zod"
 
+export const getUserInputSchema = z
+  .object({
+    mask: z.boolean().default(true),
+  })
+  .default({})
+
 export const staysInput = z
   .object({
     cursor: z.number().optional(),

server/routers/user/query.ts

@@ -1,7 +1,16 @@
+import { parsePhoneNumber } from "libphonenumber-js"
+
 import * as api from "@/lib/api"
 import { protectedProcedure, router } from "@/server/trpc"
 
-import { friendTransactionsInput, staysInput } from "./input"
+import { countries } from "@/components/TempDesignSystem/Form/Country/countries"
+import * as maskValue from "@/utils/maskValue"
+
+import {
+  friendTransactionsInput,
+  getUserInputSchema,
+  staysInput,
+} from "./input"
 import {
   getCreditCardsSchema,
   getFriendTransactionsSchema,
@@ -19,53 +28,95 @@ function fakingRequest<T>(payload: T): Promise<T> {
 }
 
 export const userQueryRouter = router({
-  get: protectedProcedure.query(async function ({ ctx }) {
-    const apiResponse = await api.get(api.endpoints.v1.profile, {
-      cache: "no-store",
-      headers: {
-        Authorization: `Bearer ${ctx.session.token.access_token}`,
-      },
-    })
+  get: protectedProcedure
+    .input(getUserInputSchema)
+    .query(async function getUser({ ctx, input }) {
+      const apiResponse = await api.get(api.endpoints.v1.profile, {
+        cache: "no-store",
+        headers: {
+          Authorization: `Bearer ${ctx.session.token.access_token}`,
+        },
+      })
 
-    if (!apiResponse.ok) {
-      // switch (apiResponse.status) {
-      //   case 400:
-      //     throw badRequestError(apiResponse)
-      //   case 401:
-      //     throw unauthorizedError(apiResponse)
-      //   case 403:
-      //     throw forbiddenError(apiResponse)
-      //   default:
-      //     throw internalServerError(apiResponse)
-      // }
-      console.info(`API Response Failed - Getting User`)
-      console.info(`User: (${JSON.stringify(ctx.session.user)})`)
-      console.error(apiResponse)
-      return null
-    }
+      if (!apiResponse.ok) {
+        // switch (apiResponse.status) {
+        //   case 400:
+        //     throw badRequestError()
+        //   case 401:
+        //     throw unauthorizedError()
+        //   case 403:
+        //     throw forbiddenError()
+        //   default:
+        //     throw internalServerError()
+        // }
+        console.info(`API Response Failed - Getting User`)
+        console.info(`User: (${JSON.stringify(ctx.session.user)})`)
+        console.error(apiResponse)
+        return null
+      }
 
-    const apiJson = await apiResponse.json()
-    if (!apiJson.data?.attributes) {
-      // throw notFound(apiJson)
-      console.error(
-        `User has no data - (user: ${JSON.stringify(ctx.session.user)})`
+      const apiJson = await apiResponse.json()
+      console.log({ apiJson })
+      console.log({ attr: apiJson.data.attributes })
+      if (!apiJson.data?.attributes) {
+        // throw notFound(apiJson)
+        console.error(
+          `User has no data - (user: ${JSON.stringify(ctx.session.user)})`
+        )
+        return null
+      }
+
+      const verifiedData = getUserSchema.safeParse(apiJson.data.attributes)
+      if (!verifiedData.success) {
+        console.info(
+          `Failed to validate User - (User: ${JSON.stringify(ctx.session.user)})`
+        )
+        console.error(verifiedData.error)
+        return null
+      }
+
+      const country = countries.find(
+        (c) => c.code === verifiedData.data.address.countryCode
       )
-      return null
-    }
 
-    const verifiedData = getUserSchema.safeParse(apiJson.data.attributes)
-    if (!verifiedData.success) {
-      console.info(`Failed to validate User - (name: ${ctx.session.user?.name}`)
-      console.error(verifiedData.error)
-      return null
-    }
+      const user = {
+        ...extendedUser,
+        address: {
+          city: verifiedData.data.address.city,
+          country: country?.name ?? verifiedData.data.address.countryCode,
+          streetAddress: verifiedData.data.address.streetAddress,
+          zipCode: verifiedData.data.address.zipCode,
+        },
+        dateOfBirth: verifiedData.data.dateOfBirth,
+        email: verifiedData.data.email,
+        firstName: verifiedData.data.firstName,
+        language: verifiedData.data.language,
+        lastName: verifiedData.data.lastName,
+        memberships: verifiedData.data.memberships,
+        name: `${verifiedData.data.firstName} ${verifiedData.data.lastName}`,
+        phoneNumber: verifiedData.data.phoneNumber,
+        profileId: verifiedData.data.profileId,
+      }
 
-    return {
-      ...extendedUser,
-      ...verifiedData.data,
-      name: `${verifiedData.data.firstName} ${verifiedData.data.lastName}`,
-    }
-  }),
+      if (input.mask) {
+        if (user.address.city) {
+          user.address.city = maskValue.text(user.address.city)
+        }
+        if (user.address.streetAddress) {
+          user.address.streetAddress = maskValue.text(
+            user.address.streetAddress
+          )
+        }
+
+        user.address.zipCode = maskValue.text(verifiedData.data.address.zipCode)
+        user.email = maskValue.email(user.email)
+
+        const phonenumber = parsePhoneNumber(user.phoneNumber)
+        user.phoneNumber = `+${phonenumber.countryCallingCode} ${maskValue.phone(user.phoneNumber)}`
+      }
+
+      return user
+    }),
 
   benefits: router({
     current: protectedProcedure.query(async function (opts) {