implement logic to select compared levels based on membershipLevel

components/Loyalty/Blocks/DynamicContent/OverviewTable/index.tsx

@@ -1,13 +1,16 @@
 "use client"
 
-import { Dispatch, SetStateAction, useState } from "react"
+import { Dispatch, SetStateAction, useEffect, useState } from "react"
 import { type Key } from "react-aria-components"
 import { useIntl } from "react-intl"
 
 import { Lang } from "@/constants/languages"
+import { membershipLevels } from "@/constants/membershipLevels"
+import { trpc } from "@/lib/trpc/client"
 
 import Image from "@/components/Image"
 import Select from "@/components/TempDesignSystem/Form/Select"
+import { getMembership } from "@/utils/user"
 
 import levelsData from "./data/EN.json"
 import BenefitList from "./BenefitList"
@@ -56,19 +59,59 @@ function getLevelByTier(tier: number) {
 
 export default function OverviewTable() {
   const intl = useIntl()
-  const [selectedLevelA, setSelectedLevelA] = useState(getLevelByTier(1))
+  // TODO: Should isLoading be used for some loader, or is it fine to just use default values and rerender?
-  const [selectedLevelB, setSelectedLevelB] = useState(getLevelByTier(2))
+  // Also, since it's fine to not be authenticated, how should the error be handled?
-  const [selectedLevelC, setSelectedLevelC] = useState(getLevelByTier(3))
+  const { data, isLoading } = trpc.user.get.useQuery()
 
-  const defaultLevelA = levelsData.levels.find(
+  const [selectedLevelAMobile, setSelectedLevelAMobile] = useState(
-    (level) => level.tier === selectedLevelA.tier
+    getLevelByTier(1)
-  ) as ComparisonLevel
+  )
-  const defaultLevelB = levelsData.levels.find(
+  const [selectedLevelBMobile, setSelectedLevelBMobile] = useState(
-    (level) => level.tier === selectedLevelB.tier
+    getLevelByTier(2)
-  ) as ComparisonLevel
+  )
-  const defaultLevelC = levelsData.levels.find(
+
-    (level) => level.tier === selectedLevelC.tier
+  const [selectedLevelADesktop, setSelectedLevelADesktop] = useState(
-  ) as ComparisonLevel
+    getLevelByTier(1)
+  )
+  const [selectedLevelBDesktop, setSelectedLevelBDesktop] = useState(
+    getLevelByTier(2)
+  )
+  const [selectedLevelCDesktop, setSelectedLevelCDesktop] = useState(
+    getLevelByTier(3)
+  )
+
+  useEffect(() => {
+    const membership = data?.memberships
+      ? getMembership(data.memberships)
+      : null
+    if (membership) {
+      const tier = membershipLevels[membership.membershipLevel]
+
+      // The logic on which levels to display for upper levels is as requested by UI
+      if (tier === 6) {
+        setSelectedLevelAMobile(getLevelByTier(6))
+        setSelectedLevelBMobile(getLevelByTier(7))
+
+        setSelectedLevelADesktop(getLevelByTier(5))
+        setSelectedLevelBDesktop(getLevelByTier(6))
+        setSelectedLevelCDesktop(getLevelByTier(7))
+      } else if (tier === 7) {
+        setSelectedLevelAMobile(getLevelByTier(6))
+        setSelectedLevelBMobile(getLevelByTier(7))
+
+        setSelectedLevelADesktop(getLevelByTier(6))
+        setSelectedLevelBDesktop(getLevelByTier(7))
+        setSelectedLevelCDesktop(getLevelByTier(1))
+      } else {
+        setSelectedLevelAMobile(getLevelByTier(tier))
+        setSelectedLevelBMobile(getLevelByTier(tier + 1))
+
+        setSelectedLevelADesktop(getLevelByTier(tier))
+        setSelectedLevelBDesktop(getLevelByTier(tier + 1))
+        setSelectedLevelCDesktop(getLevelByTier(tier + 2))
+      }
+    }
+  }, [isLoading, data?.memberships])
 
   function handleSelectChange(
     callback: Dispatch<SetStateAction<ComparisonLevel>>
@@ -105,13 +148,13 @@ export default function OverviewTable() {
               name="benefitA"
               label={intl.formatMessage({ id: "Level" })}
               items={levelOptions}
-              defaultSelectedKey={selectedLevelA.tier}
+              value={selectedLevelAMobile.tier}
-              onSelect={handleSelectChange(setSelectedLevelA)}
+              onSelect={handleSelectChange(setSelectedLevelAMobile)}
             />
             <Image
               className={styles.icon}
-              src={defaultLevelA.icon}
+              src={selectedLevelAMobile.icon}
-              alt={defaultLevelA.name}
+              alt={selectedLevelAMobile.name}
               height={50}
               width={100}
             />
@@ -119,7 +162,7 @@ export default function OverviewTable() {
             <LevelSummary
               level={
                 levelsData.levels.find(
-                  (level) => level.tier === selectedLevelA.tier
+                  (level) => level.tier === selectedLevelAMobile.tier
                 ) as ComparisonLevel
               }
             />
@@ -129,13 +172,13 @@ export default function OverviewTable() {
               name="benefitB"
               label={intl.formatMessage({ id: "Level" })}
               items={levelOptions}
-              defaultSelectedKey={selectedLevelB.tier}
+              value={selectedLevelBMobile.tier}
-              onSelect={handleSelectChange(setSelectedLevelB)}
+              onSelect={handleSelectChange(setSelectedLevelBMobile)}
             />
             <Image
               className={styles.icon}
-              src={defaultLevelB.icon}
+              src={selectedLevelBMobile.icon}
-              alt={defaultLevelB.name}
+              alt={selectedLevelBMobile.name}
               height={50}
               width={100}
             />
@@ -143,13 +186,13 @@ export default function OverviewTable() {
             <LevelSummary
               level={
                 levelsData.levels.find(
-                  (level) => level.tier === selectedLevelB.tier
+                  (level) => level.tier === selectedLevelBMobile.tier
                 ) as ComparisonLevel
               }
             />
           </div>
         </div>
-        <BenefitList levels={[selectedLevelA, selectedLevelB]} />
+        <BenefitList levels={[selectedLevelAMobile, selectedLevelBMobile]} />
       </div>
       <div className={styles.columns}>
         <div className={styles.columnHeaderContainer}>
@@ -158,13 +201,13 @@ export default function OverviewTable() {
               name="benefitA"
               label={intl.formatMessage({ id: "Level" })}
               items={levelOptions}
-              defaultSelectedKey={selectedLevelA.tier}
+              value={selectedLevelADesktop.tier}
-              onSelect={handleSelectChange(setSelectedLevelA)}
+              onSelect={handleSelectChange(setSelectedLevelADesktop)}
             />
             <Image
               className={styles.icon}
-              src={defaultLevelA.icon}
+              src={selectedLevelADesktop.icon}
-              alt={defaultLevelA.name}
+              alt={selectedLevelADesktop.name}
               height={50}
               width={100}
             />
@@ -172,7 +215,7 @@ export default function OverviewTable() {
             <LevelSummary
               level={
                 levelsData.levels.find(
-                  (level) => level.tier === selectedLevelA.tier
+                  (level) => level.tier === selectedLevelADesktop.tier
                 ) as ComparisonLevel
               }
             />
@@ -182,13 +225,13 @@ export default function OverviewTable() {
               name="benefitB"
               label={intl.formatMessage({ id: "Level" })}
               items={levelOptions}
-              defaultSelectedKey={selectedLevelB.tier}
+              value={selectedLevelBDesktop.tier}
-              onSelect={handleSelectChange(setSelectedLevelB)}
+              onSelect={handleSelectChange(setSelectedLevelBDesktop)}
             />
             <Image
               className={styles.icon}
-              src={defaultLevelB.icon}
+              src={selectedLevelBDesktop.icon}
-              alt={defaultLevelB.name}
+              alt={selectedLevelBDesktop.name}
               height={50}
               width={100}
             />
@@ -196,7 +239,7 @@ export default function OverviewTable() {
             <LevelSummary
               level={
                 levelsData.levels.find(
-                  (level) => level.tier === selectedLevelB.tier
+                  (level) => level.tier === selectedLevelBDesktop.tier
                 ) as ComparisonLevel
               }
             />
@@ -206,13 +249,13 @@ export default function OverviewTable() {
               name="benefitC"
               label={intl.formatMessage({ id: "Level" })}
               items={levelOptions}
-              defaultSelectedKey={selectedLevelC.tier}
+              value={selectedLevelCDesktop.tier}
-              onSelect={handleSelectChange(setSelectedLevelC)}
+              onSelect={handleSelectChange(setSelectedLevelCDesktop)}
             />
             <Image
               className={styles.icon}
-              src={defaultLevelC.icon}
+              src={selectedLevelCDesktop.icon}
-              alt={defaultLevelC.name}
+              alt={selectedLevelCDesktop.name}
               height={50}
               width={100}
             />
@@ -220,14 +263,18 @@ export default function OverviewTable() {
             <LevelSummary
               level={
                 levelsData.levels.find(
-                  (level) => level.tier === selectedLevelC.tier
+                  (level) => level.tier === selectedLevelCDesktop.tier
                 ) as ComparisonLevel
               }
             />
           </div>
         </div>
         <BenefitList
-          levels={[selectedLevelA, selectedLevelB, selectedLevelC]}
+          levels={[
+            selectedLevelADesktop,
+            selectedLevelBDesktop,
+            selectedLevelCDesktop,
+          ]}
         />
       </div>
       <div className={styles.largeTableContainer}>

components/MyPages/Blocks/Overview/Buttons/CopyButton.tsx

@@ -2,11 +2,13 @@
 
 import Image from "@/components/Image"
 import Button from "@/components/TempDesignSystem/Button"
+import { getMembership } from "@/utils/user"
 
 import type { User } from "@/types/user"
 
-export default function CopyButton({ membership }: Pick<User, "membership">) {
+export default function CopyButton({ memberships }: Pick<User, "memberships">) {
   function handleCopy() {
+    const membership = getMembership(memberships)
     console.log(`COPIED! (${membership ? membership.membershipNumber : "N/A"})`)
   }
 

components/MyPages/Blocks/Overview/Friend/index.tsx

@@ -2,6 +2,7 @@ import { GoodFriend } from "@/components/Levels"
 import BiroScript from "@/components/TempDesignSystem/Text/BiroScript"
 import Title from "@/components/TempDesignSystem/Text/Title"
 import { getIntl } from "@/i18n"
+import { getMembership } from "@/utils/user"
 
 import styles from "./friend.module.css"
 
@@ -9,6 +10,7 @@ import type { UserProps } from "@/types/components/myPages/user"
 
 export default async function Friend({ user }: UserProps) {
   const { formatMessage } = await getIntl()
+  const membership = getMembership(user.memberships)
   return (
     <section className={styles.friend}>
       <header className={styles.header}>
@@ -26,7 +28,7 @@ export default async function Friend({ user }: UserProps) {
             {formatMessage({ id: "Membership ID" })}:
           </p>
           <p className={styles.membershipId}>
-            {user.membership ? user.membership.membershipNumber : "N/A"}
+            {membership ? membership.membershipNumber : "N/A"}
           </p>
         </div>
       </div>

components/MyPages/Blocks/Overview/Stats/Points/index.tsx

@@ -1,5 +1,6 @@
 import Title from "@/components/TempDesignSystem/Text/Title"
 import { getIntl } from "@/i18n"
+import { getMembership } from "@/utils/user"
 
 import Label from "../Label"
 
@@ -9,18 +10,19 @@ import type { UserProps } from "@/types/components/myPages/user"
 
 export default async function Points({ user }: UserProps) {
   const { formatMessage } = await getIntl()
+  const membership = getMembership(user.memberships)
   return (
     <section className={styles.points}>
       <article>
         <Label>{formatMessage({ id: "Total Points" })}</Label>
         <Title color="pale" level="h2">
-          {user.membership ? user.membership.currentPoints : "N/A"}
+          {membership ? membership.currentPoints : "N/A"}
         </Title>
       </article>
       <article>
         <Label>{formatMessage({ id: "Points until next level" })}</Label>
         <Title color="pale" level="h2">
-          {user.membership ? user.membership.currentPoints : "N/A"}
+          {membership ? membership.currentPoints : "N/A"}
         </Title>
       </article>
     </section>

components/MyPages/Blocks/Points/CurrentPointsBalance/index.tsx

@@ -1,7 +1,10 @@
+import { get } from "http"
+
 import { serverClient } from "@/lib/trpc/server"
 
 import Header from "@/components/MyPages/Blocks/Header"
 import { getIntl } from "@/i18n"
+import { getMembership } from "@/utils/user"
 
 import styles from "./currentPointsBalance.module.css"
 
@@ -15,6 +18,7 @@ async function CurrentPointsBalance({
 }: AccountPageComponentProps) {
   const user = await serverClient().user.get()
   const { formatMessage } = await getIntl()
+  const membership = getMembership(user.memberships)
   return (
     <div>
       <Header title={title} link={link} subtitle={subtitle} />
@@ -23,7 +27,7 @@ async function CurrentPointsBalance({
         <h2>{`${formatMessage({ id: "Total points" })}*`}</h2>
         <p
           className={styles.points}
-        >{`${formatMessage({ id: "Points" })}: ${user.membership?.currentPoints || "N/A"}`}</p>
+        >{`${formatMessage({ id: "Points" })}: ${membership?.currentPoints || "N/A"}`}</p>
         <p className={styles.disclaimer}>
           {`*${formatMessage({ id: "Points may take up to 10 days to be displayed." })}`}
         </p>

constants/membershipLevels.ts

@@ -0,0 +1,9 @@
+export enum membershipLevels {
+  L1 = 1,
+  L2 = 2,
+  L3 = 3,
+  L4 = 4,
+  L5 = 5,
+  L6 = 6,
+  L7 = 7,
+}

server/routers/user/output.ts

@@ -1,5 +1,7 @@
 import { z } from "zod"
 
+import { membershipLevels } from "@/constants/membershipLevels"
+
 import { countriesMap } from "@/components/TempDesignSystem/Form/Country/countries"
 
 export const getUserSchema = z.object({
@@ -14,14 +16,16 @@ export const getUserSchema = z.object({
   firstName: z.string(),
   language: z.string(),
   lastName: z.string(),
-  membership: z
+  memberships: z.array(
-    .object({
+    z.object({
       currentPoints: z.number(),
       expirationDate: z.string(),
       membershipNumber: z.string(),
+      membershipLevel: z.enum(["L1", "L2", "L3", "L4", "L5", "L6", "L7"]),
       memberSince: z.string(),
+      membershipType: z.string(),
     })
-    .optional(),
+  ),
   phoneNumber: z.string(),
   profileId: z.string(),
 })

utils/user.ts

@@ -0,0 +1,7 @@
+import { User } from "@/types/user"
+
+export function getMembership(memberships: User["memberships"]) {
+  return memberships?.find(
+    (membership) => membership.membershipType.toLowerCase() === "guestpr"
+  )
+}