refactor: improve level selection logic

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

@@ -1,12 +1,11 @@
 "use client"
 
-import { Dispatch, SetStateAction, useEffect, useState } from "react"
+import { useReducer } 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"
@@ -20,7 +19,11 @@ import OverviewTableTitle from "./Title"
 
 import styles from "./overviewTable.module.css"
 
-import { ComparisonLevel } from "@/types/components/loyalty/blocks"
+import {
+  ComparisonLevel,
+  OverviewTableProps,
+} from "@/types/components/loyalty/blocks"
+import { User } from "@/types/user"
 
 // These should ultimately be fetched from Contentstack
 const titleTranslations = {
@@ -51,75 +54,102 @@ const titleTranslations = {
   ],
 }
 
+enum actions {
+  SET_SELECTED_LEVEL_A_MOBILE = "SET_SELECTED_LEVEL_A_MOBILE",
+  SET_SELECTED_LEVEL_B_MOBILE = "SET_SELECTED_LEVEL_B_MOBILE",
+  SET_SELECTED_LEVEL_A_DESKTOP = "SET_SELECTED_LEVEL_A_DESKTOP",
+  SET_SELECTED_LEVEL_B_DESKTOP = "SET_SELECTED_LEVEL_B_DESKTOP",
+  SET_SELECTED_LEVEL_C_DESKTOP = "SET_SELECTED_LEVEL_C_DESKTOP",
+}
+
 function getLevelByTier(tier: number) {
   return levelsData.levels.find(
     (level) => level.tier === tier
   ) as ComparisonLevel
 }
 
-export default function OverviewTable() {
+function getInitialState(user?: User) {
-  const intl = useIntl()
+  const membership = user?.memberships ? getMembership(user.memberships) : null
-  // TODO: Should isLoading be used for some loader, or is it fine to just use default values and rerender?
+  if (!membership) {
-  // Also, since it's fine to not be authenticated, how should the error be handled?
+    return {
-  const { data, isLoading } = trpc.user.get.useQuery()
+      selectedLevelAMobile: getLevelByTier(1),
-
+      selectedLevelBMobile: getLevelByTier(2),
-  const [selectedLevelAMobile, setSelectedLevelAMobile] = useState(
+      selectedLevelADesktop: getLevelByTier(1),
-    getLevelByTier(1)
+      selectedLevelBDesktop: getLevelByTier(2),
-  )
+      selectedLevelCDesktop: getLevelByTier(3),
-  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])
+  }
+  const tier = membershipLevels[membership.membershipLevel]
 
-  function handleSelectChange(
+  switch (tier) {
-    callback: Dispatch<SetStateAction<ComparisonLevel>>
+    case 6:
-  ) {
+      return {
+        selectedLevelAMobile: getLevelByTier(6),
+        selectedLevelBMobile: getLevelByTier(7),
+        selectedLevelADesktop: getLevelByTier(5),
+        selectedLevelBDesktop: getLevelByTier(6),
+        selectedLevelCDesktop: getLevelByTier(7),
+      }
+    case 7:
+      return {
+        selectedLevelAMobile: getLevelByTier(6),
+        selectedLevelBMobile: getLevelByTier(7),
+        selectedLevelADesktop: getLevelByTier(6),
+        selectedLevelBDesktop: getLevelByTier(7),
+        selectedLevelCDesktop: getLevelByTier(1),
+      }
+    default:
+      return {
+        selectedLevelAMobile: getLevelByTier(tier),
+        selectedLevelBMobile: getLevelByTier(tier + 1),
+        selectedLevelADesktop: getLevelByTier(tier),
+        selectedLevelBDesktop: getLevelByTier(tier + 1),
+        selectedLevelCDesktop: getLevelByTier(tier + 2),
+      }
+  }
+}
+
+function reducer(state: any, action: any) {
+  switch (action.type) {
+    case actions.SET_SELECTED_LEVEL_A_MOBILE:
+      return {
+        ...state,
+        selectedLevelAMobile: action.payload,
+      }
+    case actions.SET_SELECTED_LEVEL_B_MOBILE:
+      return {
+        ...state,
+        selectedLevelBMobile: action.payload,
+      }
+    case actions.SET_SELECTED_LEVEL_A_DESKTOP:
+      return {
+        ...state,
+        selectedLevelADesktop: action.payload,
+      }
+    case actions.SET_SELECTED_LEVEL_B_DESKTOP:
+      return {
+        ...state,
+        selectedLevelBDesktop: action.payload,
+      }
+    case actions.SET_SELECTED_LEVEL_C_DESKTOP:
+      return {
+        ...state,
+        selectedLevelCDesktop: action.payload,
+      }
+    default:
+      return state
+  }
+}
+
+export default function OverviewTable({ user }: OverviewTableProps) {
+  const intl = useIntl()
+
+  const [selectionState, dispatch] = useReducer(reducer, user, getInitialState)
+
+  function handleSelectChange(actionType: string) {
     return (key: Key) => {
       if (typeof key === "number") {
-        const level = getLevelByTier(key)
+        dispatch({ payload: getLevelByTier(key), type: actionType })
-        callback(level)
       }
     }
   }
@@ -148,13 +178,13 @@ export default function OverviewTable() {
               name="benefitA"
               label={intl.formatMessage({ id: "Level" })}
               items={levelOptions}
-              value={selectedLevelAMobile.tier}
+              value={selectionState.selectedLevelAMobile.tier}
-              onSelect={handleSelectChange(setSelectedLevelAMobile)}
+              onSelect={handleSelectChange(actions.SET_SELECTED_LEVEL_A_MOBILE)}
             />
             <Image
               className={styles.icon}
-              src={selectedLevelAMobile.icon}
+              src={selectionState.selectedLevelAMobile.icon}
-              alt={selectedLevelAMobile.name}
+              alt={selectionState.selectedLevelAMobile.name}
               height={50}
               width={100}
             />
@@ -162,7 +192,8 @@ export default function OverviewTable() {
             <LevelSummary
               level={
                 levelsData.levels.find(
-                  (level) => level.tier === selectedLevelAMobile.tier
+                  (level) =>
+                    level.tier === selectionState.selectedLevelAMobile.tier
                 ) as ComparisonLevel
               }
             />
@@ -172,13 +203,13 @@ export default function OverviewTable() {
               name="benefitB"
               label={intl.formatMessage({ id: "Level" })}
               items={levelOptions}
-              value={selectedLevelBMobile.tier}
+              value={selectionState.selectedLevelBMobile.tier}
-              onSelect={handleSelectChange(setSelectedLevelBMobile)}
+              onSelect={handleSelectChange(actions.SET_SELECTED_LEVEL_B_MOBILE)}
             />
             <Image
               className={styles.icon}
-              src={selectedLevelBMobile.icon}
+              src={selectionState.selectedLevelBMobile.icon}
-              alt={selectedLevelBMobile.name}
+              alt={selectionState.selectedLevelBMobile.name}
               height={50}
               width={100}
             />
@@ -186,13 +217,19 @@ export default function OverviewTable() {
             <LevelSummary
               level={
                 levelsData.levels.find(
-                  (level) => level.tier === selectedLevelBMobile.tier
+                  (level) =>
+                    level.tier === selectionState.selectedLevelBMobile.tier
                 ) as ComparisonLevel
               }
             />
           </div>
         </div>
-        <BenefitList levels={[selectedLevelAMobile, selectedLevelBMobile]} />
+        <BenefitList
+          levels={[
+            selectionState.selectedLevelAMobile,
+            selectionState.selectedLevelBMobile,
+          ]}
+        />
       </div>
       <div className={styles.columns}>
         <div className={styles.columnHeaderContainer}>
@@ -201,13 +238,15 @@ export default function OverviewTable() {
               name="benefitA"
               label={intl.formatMessage({ id: "Level" })}
               items={levelOptions}
-              value={selectedLevelADesktop.tier}
+              value={selectionState.selectedLevelADesktop.tier}
-              onSelect={handleSelectChange(setSelectedLevelADesktop)}
+              onSelect={handleSelectChange(
+                actions.SET_SELECTED_LEVEL_A_DESKTOP
+              )}
             />
             <Image
               className={styles.icon}
-              src={selectedLevelADesktop.icon}
+              src={selectionState.selectedLevelADesktop.icon}
-              alt={selectedLevelADesktop.name}
+              alt={selectionState.selectedLevelADesktop.name}
               height={50}
               width={100}
             />
@@ -215,7 +254,8 @@ export default function OverviewTable() {
             <LevelSummary
               level={
                 levelsData.levels.find(
-                  (level) => level.tier === selectedLevelADesktop.tier
+                  (level) =>
+                    level.tier === selectionState.selectedLevelADesktop.tier
                 ) as ComparisonLevel
               }
             />
@@ -225,13 +265,15 @@ export default function OverviewTable() {
               name="benefitB"
               label={intl.formatMessage({ id: "Level" })}
               items={levelOptions}
-              value={selectedLevelBDesktop.tier}
+              value={selectionState.selectedLevelBDesktop.tier}
-              onSelect={handleSelectChange(setSelectedLevelBDesktop)}
+              onSelect={handleSelectChange(
+                actions.SET_SELECTED_LEVEL_B_DESKTOP
+              )}
             />
             <Image
               className={styles.icon}
-              src={selectedLevelBDesktop.icon}
+              src={selectionState.selectedLevelBDesktop.icon}
-              alt={selectedLevelBDesktop.name}
+              alt={selectionState.selectedLevelBDesktop.name}
               height={50}
               width={100}
             />
@@ -239,7 +281,8 @@ export default function OverviewTable() {
             <LevelSummary
               level={
                 levelsData.levels.find(
-                  (level) => level.tier === selectedLevelBDesktop.tier
+                  (level) =>
+                    level.tier === selectionState.selectedLevelBDesktop.tier
                 ) as ComparisonLevel
               }
             />
@@ -249,13 +292,15 @@ export default function OverviewTable() {
               name="benefitC"
               label={intl.formatMessage({ id: "Level" })}
               items={levelOptions}
-              value={selectedLevelCDesktop.tier}
+              value={selectionState.selectedLevelCDesktop.tier}
-              onSelect={handleSelectChange(setSelectedLevelCDesktop)}
+              onSelect={handleSelectChange(
+                actions.SET_SELECTED_LEVEL_C_DESKTOP
+              )}
             />
             <Image
               className={styles.icon}
-              src={selectedLevelCDesktop.icon}
+              src={selectionState.selectedLevelCDesktop.icon}
-              alt={selectedLevelCDesktop.name}
+              alt={selectionState.selectedLevelCDesktop.name}
               height={50}
               width={100}
             />
@@ -263,7 +308,8 @@ export default function OverviewTable() {
             <LevelSummary
               level={
                 levelsData.levels.find(
-                  (level) => level.tier === selectedLevelCDesktop.tier
+                  (level) =>
+                    level.tier === selectionState.selectedLevelCDesktop.tier
                 ) as ComparisonLevel
               }
             />
@@ -271,9 +317,9 @@ export default function OverviewTable() {
         </div>
         <BenefitList
           levels={[
-            selectedLevelADesktop,
+            selectionState.selectedLevelADesktop,
-            selectedLevelBDesktop,
+            selectionState.selectedLevelBDesktop,
-            selectedLevelCDesktop,
+            selectionState.selectedLevelCDesktop,
           ]}
         />
       </div>

components/Loyalty/Blocks/DynamicContent/index.tsx

@@ -14,14 +14,14 @@ import type {
 } from "@/types/components/loyalty/blocks"
 import { LoyaltyComponentEnum } from "@/types/components/loyalty/enums"
 
-function DynamicComponentBlock({ component }: DynamicComponentProps) {
+function DynamicComponentBlock({ component, user }: DynamicComponentProps) {
   switch (component) {
     case LoyaltyComponentEnum.how_it_works:
       return <HowItWorks />
     case LoyaltyComponentEnum.loyalty_levels:
       return <LoyaltyLevels />
     case LoyaltyComponentEnum.overview_table:
-      return <OverviewTable />
+      return <OverviewTable user={user} />
     default:
       return null
   }
@@ -29,6 +29,7 @@ function DynamicComponentBlock({ component }: DynamicComponentProps) {
 
 export default function DynamicContent({
   dynamicContent,
+  user,
 }: DynamicContentProps) {
   const displayHeader = !!(
     dynamicContent.title ||
@@ -52,7 +53,14 @@ export default function DynamicContent({
           </Subtitle>
         </header>
       ) : null}
-      <DynamicComponentBlock component={dynamicContent.component} />
+      {dynamicContent.component === LoyaltyComponentEnum.overview_table ? (
+        <DynamicComponentBlock
+          component={dynamicContent.component}
+          user={user}
+        />
+      ) : (
+        <DynamicComponentBlock component={dynamicContent.component} />
+      )}
     </section>
   )
 }

components/Loyalty/Blocks/index.tsx

@@ -1,3 +1,5 @@
+import { serverClient } from "@/lib/trpc/server"
+
 import JsonToHtml from "@/components/JsonToHtml"
 import DynamicContentBlock from "@/components/Loyalty/Blocks/DynamicContent"
 import Shortcuts from "@/components/MyPages/Blocks/Shortcuts"
@@ -7,7 +9,9 @@ import CardsGrid from "./CardsGrid"
 import type { BlocksProps } from "@/types/components/loyalty/blocks"
 import { LoyaltyBlocksTypenameEnum } from "@/types/components/loyalty/enums"
 
-export function Blocks({ blocks }: BlocksProps) {
+export async function Blocks({ blocks }: BlocksProps) {
+  const user = await serverClient().user.get()
+  console.log({ user })
   return blocks.map((block) => {
     switch (block.__typename) {
       case LoyaltyBlocksTypenameEnum.LoyaltyPageBlocksContent:
@@ -20,7 +24,12 @@ export function Blocks({ blocks }: BlocksProps) {
           </section>
         )
       case LoyaltyBlocksTypenameEnum.LoyaltyPageBlocksDynamicContent:
-        return <DynamicContentBlock dynamicContent={block.dynamic_content} />
+        return (
+          <DynamicContentBlock
+            dynamicContent={block.dynamic_content}
+            user={user}
+          />
+        )
       case LoyaltyBlocksTypenameEnum.LoyaltyPageBlocksShortcuts:
         return (
           <Shortcuts

types/components/loyalty/blocks.ts

@@ -8,16 +8,20 @@ import {
 
 import type { IntlFormatters } from "@formatjs/intl"
 
+import { User } from "@/types/user"
+
 export type BlocksProps = {
   blocks: Block[]
 }
 
 export type DynamicContentProps = {
   dynamicContent: DynamicContent["dynamic_content"]
+  user?: User
 }
 
 export type DynamicComponentProps = {
   component: DynamicContent["dynamic_content"]["component"]
+  user?: User
 }
 
 export type CardsGridProps = Pick<CardsGrid, "cards_grid">
@@ -33,6 +37,8 @@ type OverviewTableTitleTranslation = {
 
 export type OverviewTableTitleProps = { texts: OverviewTableTitleTranslation[] }
 
+export type OverviewTableProps = { user?: User }
+
 export type Level = {
   tier: number
   name: string