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))
-  const [selectedLevelB, setSelectedLevelB] = useState(getLevelByTier(2))
-  const [selectedLevelC, setSelectedLevelC] = useState(getLevelByTier(3))
+  // TODO: Should isLoading be used for some loader, or is it fine to just use default values and rerender?
+  // Also, since it's fine to not be authenticated, how should the error be handled?
+  const { data, isLoading } = trpc.user.get.useQuery()
 
-  const defaultLevelA = levelsData.levels.find(
-    (level) => level.tier === selectedLevelA.tier
-  ) as ComparisonLevel
-  const defaultLevelB = levelsData.levels.find(
-    (level) => level.tier === selectedLevelB.tier
-  ) as ComparisonLevel
-  const defaultLevelC = levelsData.levels.find(
-    (level) => level.tier === selectedLevelC.tier
-  ) as ComparisonLevel
+  const [selectedLevelAMobile, setSelectedLevelAMobile] = useState(
+    getLevelByTier(1)
+  )
+  const [selectedLevelBMobile, setSelectedLevelBMobile] = useState(
+    getLevelByTier(2)
+  )
+
+  const [selectedLevelADesktop, setSelectedLevelADesktop] = useState(
+    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}
-              onSelect={handleSelectChange(setSelectedLevelA)}
+              value={selectedLevelAMobile.tier}
+              onSelect={handleSelectChange(setSelectedLevelAMobile)}
             />
             <Image
               className={styles.icon}
-              src={defaultLevelA.icon}
-              alt={defaultLevelA.name}
+              src={selectedLevelAMobile.icon}
+              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}
-              onSelect={handleSelectChange(setSelectedLevelB)}
+              value={selectedLevelBMobile.tier}
+              onSelect={handleSelectChange(setSelectedLevelBMobile)}
             />
             <Image
               className={styles.icon}
-              src={defaultLevelB.icon}
-              alt={defaultLevelB.name}
+              src={selectedLevelBMobile.icon}
+              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}
-              onSelect={handleSelectChange(setSelectedLevelA)}
+              value={selectedLevelADesktop.tier}
+              onSelect={handleSelectChange(setSelectedLevelADesktop)}
             />
             <Image
               className={styles.icon}
-              src={defaultLevelA.icon}
-              alt={defaultLevelA.name}
+              src={selectedLevelADesktop.icon}
+              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}
-              onSelect={handleSelectChange(setSelectedLevelB)}
+              value={selectedLevelBDesktop.tier}
+              onSelect={handleSelectChange(setSelectedLevelBDesktop)}
             />
             <Image
               className={styles.icon}
-              src={defaultLevelB.icon}
-              alt={defaultLevelB.name}
+              src={selectedLevelBDesktop.icon}
+              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}
-              onSelect={handleSelectChange(setSelectedLevelC)}
+              value={selectedLevelCDesktop.tier}
+              onSelect={handleSelectChange(setSelectedLevelCDesktop)}
             />
             <Image
               className={styles.icon}
-              src={defaultLevelC.icon}
-              alt={defaultLevelC.name}
+              src={selectedLevelCDesktop.icon}
+              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}>