feat: update loyalty overview table ui

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

@@ -1,8 +1,6 @@
 "use client"
 
-import { useParams } from "next/navigation"
 import { useReducer } from "react"
-import { type Key } from "react-aria-components"
 import { useIntl } from "react-intl"
 
 import { Lang } from "@/constants/languages"
@@ -21,16 +19,21 @@ import SV from "./data/SV.json"
 import BenefitList from "./BenefitList"
 import LargeTable from "./LargeTable"
 import LevelSummary from "./LevelSummary"
+import YourLevel from "./YourLevelScript"
 
 import styles from "./overviewTable.module.css"
 
+import type { Key } from "react-aria-components"
+
 import {
   ComparisonLevel,
+  DesktopSelectColumns,
+  MobileColumnHeaderProps,
   overviewTableActionsEnum,
   OverviewTableProps,
   OverviewTableReducerAction,
 } from "@/types/components/loyalty/blocks"
-import { User } from "@/types/user"
+import type { User } from "@/types/user"
 
 const levelsTranslations = {
   [Lang.en]: EN,
@@ -40,9 +43,10 @@ const levelsTranslations = {
   [Lang.fi]: FI,
   [Lang.de]: DE,
 }
-function getTranslatedLevelByTier(tier: membershipLevels, lang: Lang) {
+
+function getTranslatedLevel(membershipLevel: membershipLevels, lang: Lang) {
   return levelsTranslations[lang].levels.find(
-    (level) => level.tier === tier
+    (level) => level.level === membershipLevel
   ) as ComparisonLevel
 }
 
@@ -50,40 +54,40 @@ function getInitialState({ user, lang }: { user?: User; lang: Lang }) {
   const membership = user?.memberships ? getMembership(user.memberships) : null
   if (!membership?.membershipLevel) {
     return {
-      selectedLevelAMobile: getTranslatedLevelByTier(1, lang),
-      selectedLevelBMobile: getTranslatedLevelByTier(2, lang),
-      selectedLevelADesktop: getTranslatedLevelByTier(1, lang),
-      selectedLevelBDesktop: getTranslatedLevelByTier(2, lang),
-      selectedLevelCDesktop: getTranslatedLevelByTier(3, lang),
+      selectedLevelAMobile: getTranslatedLevel(1, lang),
+      selectedLevelBMobile: getTranslatedLevel(2, lang),
+      selectedLevelADesktop: getTranslatedLevel(1, lang),
+      selectedLevelBDesktop: getTranslatedLevel(2, lang),
+      selectedLevelCDesktop: getTranslatedLevel(3, lang),
     }
   }
   if (!membership.membershipLevel) return null
-  const tier = membershipLevels[membership.membershipLevel]
+  const level = membershipLevels[membership.membershipLevel]
 
-  switch (tier) {
+  switch (level) {
     case 6:
       return {
-        selectedLevelAMobile: getTranslatedLevelByTier(6, lang),
-        selectedLevelBMobile: getTranslatedLevelByTier(7, lang),
-        selectedLevelADesktop: getTranslatedLevelByTier(5, lang),
-        selectedLevelBDesktop: getTranslatedLevelByTier(6, lang),
-        selectedLevelCDesktop: getTranslatedLevelByTier(7, lang),
+        selectedLevelAMobile: getTranslatedLevel(6, lang),
+        selectedLevelBMobile: getTranslatedLevel(7, lang),
+        selectedLevelADesktop: getTranslatedLevel(5, lang),
+        selectedLevelBDesktop: getTranslatedLevel(6, lang),
+        selectedLevelCDesktop: getTranslatedLevel(7, lang),
       }
     case 7:
       return {
-        selectedLevelAMobile: getTranslatedLevelByTier(6, lang),
-        selectedLevelBMobile: getTranslatedLevelByTier(7, lang),
-        selectedLevelADesktop: getTranslatedLevelByTier(6, lang),
-        selectedLevelBDesktop: getTranslatedLevelByTier(7, lang),
-        selectedLevelCDesktop: getTranslatedLevelByTier(1, lang),
+        selectedLevelAMobile: getTranslatedLevel(6, lang),
+        selectedLevelBMobile: getTranslatedLevel(7, lang),
+        selectedLevelADesktop: getTranslatedLevel(6, lang),
+        selectedLevelBDesktop: getTranslatedLevel(7, lang),
+        selectedLevelCDesktop: getTranslatedLevel(1, lang),
       }
     default:
       return {
-        selectedLevelAMobile: getTranslatedLevelByTier(tier, lang),
-        selectedLevelBMobile: getTranslatedLevelByTier(tier + 1, lang),
-        selectedLevelADesktop: getTranslatedLevelByTier(tier, lang),
-        selectedLevelBDesktop: getTranslatedLevelByTier(tier + 1, lang),
-        selectedLevelCDesktop: getTranslatedLevelByTier(tier + 2, lang),
+        selectedLevelAMobile: getTranslatedLevel(level, lang),
+        selectedLevelBMobile: getTranslatedLevel(level + 1, lang),
+        selectedLevelADesktop: getTranslatedLevel(level, lang),
+        selectedLevelBDesktop: getTranslatedLevel(level + 1, lang),
+        selectedLevelCDesktop: getTranslatedLevel(level + 2, lang),
       }
   }
 }
@@ -134,7 +138,7 @@ export default function OverviewTable({ user }: OverviewTableProps) {
     return (key: Key) => {
       if (typeof key === "number") {
         dispatch({
-          payload: getTranslatedLevelByTier(key, lang),
+          payload: getTranslatedLevel(key, lang),
           type: actionType,
         })
       }
@@ -142,68 +146,106 @@ export default function OverviewTable({ user }: OverviewTableProps) {
   }
 
   const levelOptions = levelsData.levels.map((level) => ({
-    label: level.name,
-    value: level.tier,
+    label: [level.level, level.name].join(" "),
+    value: level.level,
   }))
 
+  const activeMembership = user?.memberships
+    ? getMembership(user.memberships)
+    : null
+
+  let activeMembershipLevel: membershipLevels | null = null
+  if (activeMembership?.membershipLevel) {
+    activeMembershipLevel = membershipLevels[activeMembership?.membershipLevel]
+  }
+
+  function MobileColumnHeader({ column }: MobileColumnHeaderProps) {
+    let selectedLevelMobile: ComparisonLevel
+    let actionEnumMobile: overviewTableActionsEnum
+    switch (column) {
+      case "A":
+        selectedLevelMobile = selectionState.selectedLevelAMobile
+        actionEnumMobile = overviewTableActionsEnum.SET_SELECTED_LEVEL_A_MOBILE
+        break
+      case "B":
+        selectedLevelMobile = selectionState.selectedLevelBMobile
+        actionEnumMobile = overviewTableActionsEnum.SET_SELECTED_LEVEL_B_MOBILE
+        break
+      default:
+        return null
+    }
+    return (
+      <div className={styles.columnHeader}>
+        <div className={styles.icon}>
+          {activeMembershipLevel === selectedLevelMobile.level ? (
+            <YourLevel />
+          ) : null}
+          <Image
+            src={selectedLevelMobile.icon}
+            alt={selectedLevelMobile.name}
+            height={50}
+            width={100}
+          />
+        </div>
+        <LevelSummary
+          level={
+            levelsData.levels.find(
+              (level) => level.level === selectedLevelMobile.level
+            ) as ComparisonLevel
+          }
+          showDescription={false}
+        />
+        <Select
+          aria-label={intl.formatMessage({ id: "Level" })}
+          name={`benefit` + column}
+          label={intl.formatMessage({ id: "Level" })}
+          items={levelOptions}
+          value={selectedLevelMobile.level}
+          onSelect={handleSelectChange(actionEnumMobile)}
+        />
+      </div>
+    )
+  }
+
+  function SelectDesktop({ column }: DesktopSelectColumns) {
+    let selectedLevelDesktop: ComparisonLevel
+    let actionEnumDesktop: overviewTableActionsEnum
+    switch (column) {
+      case "A":
+        selectedLevelDesktop = selectionState.selectedLevelADesktop
+        actionEnumDesktop =
+          overviewTableActionsEnum.SET_SELECTED_LEVEL_A_DESKTOP
+        break
+      case "B":
+        selectedLevelDesktop = selectionState.selectedLevelBDesktop
+        actionEnumDesktop =
+          overviewTableActionsEnum.SET_SELECTED_LEVEL_B_DESKTOP
+        break
+      case "C":
+        selectedLevelDesktop = selectionState.selectedLevelCDesktop
+        actionEnumDesktop =
+          overviewTableActionsEnum.SET_SELECTED_LEVEL_C_DESKTOP
+        break
+      default:
+        return null
+    }
+    return (
+      <Select
+        aria-label={intl.formatMessage({ id: "Level" })}
+        name={`benefit` + column}
+        label={intl.formatMessage({ id: "Level" })}
+        items={levelOptions}
+        value={selectedLevelDesktop.level}
+        onSelect={handleSelectChange(actionEnumDesktop)}
+      />
+    )
+  }
   return (
     <div>
       <div className={styles.mobileColumns}>
         <div className={styles.columnHeaderContainer}>
-          <div className={styles.columnHeader}>
-            <Select
-              name="benefitA"
-              label={intl.formatMessage({ id: "Level" })}
-              items={levelOptions}
-              value={selectionState.selectedLevelAMobile.tier}
-              onSelect={handleSelectChange(
-                overviewTableActionsEnum.SET_SELECTED_LEVEL_A_MOBILE
-              )}
-            />
-            <Image
-              className={styles.icon}
-              src={selectionState.selectedLevelAMobile.icon}
-              alt={selectionState.selectedLevelAMobile.name}
-              height={50}
-              width={100}
-            />
-
-            <LevelSummary
-              level={
-                levelsData.levels.find(
-                  (level) =>
-                    level.tier === selectionState.selectedLevelAMobile.tier
-                ) as ComparisonLevel
-              }
-            />
-          </div>
-          <div className={styles.columnHeader}>
-            <Select
-              name="benefitB"
-              label={intl.formatMessage({ id: "Level" })}
-              items={levelOptions}
-              value={selectionState.selectedLevelBMobile.tier}
-              onSelect={handleSelectChange(
-                overviewTableActionsEnum.SET_SELECTED_LEVEL_B_MOBILE
-              )}
-            />
-            <Image
-              className={styles.icon}
-              src={selectionState.selectedLevelBMobile.icon}
-              alt={selectionState.selectedLevelBMobile.name}
-              height={50}
-              width={100}
-            />
-
-            <LevelSummary
-              level={
-                levelsData.levels.find(
-                  (level) =>
-                    level.tier === selectionState.selectedLevelBMobile.tier
-                ) as ComparisonLevel
-              }
-            />
-          </div>
+          <MobileColumnHeader column={"A"} />
+          <MobileColumnHeader column={"B"} />
         </div>
         <BenefitList
           levels={[
@@ -213,100 +255,22 @@ export default function OverviewTable({ user }: OverviewTableProps) {
         />
       </div>
       <div className={styles.columns}>
-        <div className={styles.columnHeaderContainer}>
-          <div className={styles.columnHeader}>
-            <Select
-              name="benefitA"
-              label={intl.formatMessage({ id: "Level" })}
-              items={levelOptions}
-              value={selectionState.selectedLevelADesktop.tier}
-              onSelect={handleSelectChange(
-                overviewTableActionsEnum.SET_SELECTED_LEVEL_A_DESKTOP
-              )}
-            />
-            <Image
-              className={styles.icon}
-              src={selectionState.selectedLevelADesktop.icon}
-              alt={selectionState.selectedLevelADesktop.name}
-              height={50}
-              width={100}
-            />
-
-            <LevelSummary
-              level={
-                levelsData.levels.find(
-                  (level) =>
-                    level.tier === selectionState.selectedLevelADesktop.tier
-                ) as ComparisonLevel
-              }
-            />
-          </div>
-          <div className={styles.columnHeader}>
-            <Select
-              name="benefitB"
-              label={intl.formatMessage({ id: "Level" })}
-              items={levelOptions}
-              value={selectionState.selectedLevelBDesktop.tier}
-              onSelect={handleSelectChange(
-                overviewTableActionsEnum.SET_SELECTED_LEVEL_B_DESKTOP
-              )}
-            />
-            <Image
-              className={styles.icon}
-              src={selectionState.selectedLevelBDesktop.icon}
-              alt={selectionState.selectedLevelBDesktop.name}
-              height={50}
-              width={100}
-            />
-
-            <LevelSummary
-              level={
-                levelsData.levels.find(
-                  (level) =>
-                    level.tier === selectionState.selectedLevelBDesktop.tier
-                ) as ComparisonLevel
-              }
-            />
-          </div>
-          <div className={styles.columnHeader}>
-            <Select
-              name="benefitC"
-              label={intl.formatMessage({ id: "Level" })}
-              items={levelOptions}
-              value={selectionState.selectedLevelCDesktop.tier}
-              onSelect={handleSelectChange(
-                overviewTableActionsEnum.SET_SELECTED_LEVEL_C_DESKTOP
-              )}
-            />
-            <Image
-              className={styles.icon}
-              src={selectionState.selectedLevelCDesktop.icon}
-              alt={selectionState.selectedLevelCDesktop.name}
-              height={50}
-              width={100}
-            />
-
-            <LevelSummary
-              level={
-                levelsData.levels.find(
-                  (level) =>
-                    level.tier === selectionState.selectedLevelCDesktop.tier
-                ) as ComparisonLevel
-              }
-            />
-          </div>
-        </div>
-        <BenefitList
+        <LargeTable
           levels={[
             selectionState.selectedLevelADesktop,
             selectionState.selectedLevelBDesktop,
             selectionState.selectedLevelCDesktop,
           ]}
+          activeLevel={activeMembershipLevel}
+          Select={SelectDesktop}
         />
       </div>
       <div className={styles.largeTableContainer}>
         {/* Remove `as` once we have real data */}
-        <LargeTable levels={levelsData.levels as ComparisonLevel[]} />
+        <LargeTable
+          levels={levelsData.levels as ComparisonLevel[]}
+          activeLevel={activeMembershipLevel}
+        />
       </div>
     </div>
   )