feat: update loyalty overview table ui

components/Loyalty/Blocks/DynamicContent/OverviewTable/LargeTable/DesktopHeader/desktopHeader.module.css

@@ -0,0 +1,28 @@
+.iconRow {
+  border-bottom: none;
+  position: sticky;
+  top: 0;
+  z-index: 1;
+}
+
+.verticalTableHeader {
+  min-width: 242px;
+}
+
+.iconTh {
+  padding: var(--Spacing-x5) var(--Spacing-x2) var(--Spacing-x2);
+  font-weight: var(--typography-Caption-Regular-fontWeight);
+  vertical-align: bottom;
+}
+
+.summaryTh {
+  font-size: var(--typography-Caption-Regular-fontSize);
+  font-weight: var(--typography-Caption-Regular-fontWeight);
+  padding: 0 var(--Spacing-x2) var(--Spacing-x2);
+  vertical-align: top;
+}
+
+.select {
+  font-weight: var(--typography-Caption-Regular-fontWeight);
+  padding: 0 var(--Spacing-x2) var(--Spacing-x2);
+}

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

@@ -0,0 +1,63 @@
+import Image from "@/components/Image"
+
+import LevelSummary from "../../LevelSummary"
+import YourLevel from "../../YourLevelScript"
+
+import styles from "./desktopHeader.module.css"
+
+import {
+  DesktopSelectColumns,
+  LargeTableProps,
+} from "@/types/components/loyalty/blocks"
+
+export default function DesktopHeader({
+  levels,
+  activeLevel,
+  Select,
+}: LargeTableProps) {
+  return (
+    <thead>
+      <tr className={styles.iconRow}>
+        <th className={styles.verticalTableHeader} />
+        {levels.map((level, idx) => {
+          return (
+            <th key={"image" + level.level + idx} className={styles.iconTh}>
+              {activeLevel === level.level ? <YourLevel /> : null}
+              <Image
+                height={50}
+                width={100}
+                alt={level.name}
+                src={level.icon}
+              />
+            </th>
+          )
+        })}
+      </tr>
+      <tr>
+        <th />
+        {levels.map((level, idx) => {
+          return (
+            <th
+              key={"summary" + level.level + idx}
+              className={styles.summaryTh}
+            >
+              <LevelSummary level={level} />
+            </th>
+          )
+        })}
+      </tr>
+      {Select && (
+        <tr>
+          <th />
+          {["A", "B", "C"].map((column, idx) => {
+            return (
+              <th key={column + idx} className={styles.select}>
+                <Select column={column as DesktopSelectColumns["column"]} />
+              </th>
+            )
+          })}
+        </tr>
+      )}
+    </thead>
+  )
+}

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

@@ -1,10 +1,10 @@
 import { ChevronDown } from "react-feather"
 
-import Image from "@/components/Image"
 import Title from "@/components/TempDesignSystem/Text/Title"
+import { getHighestLevel } from "@/utils/loyaltyTable"
 
 import BenefitValue from "../BenefitValue"
-import LevelSummary from "../LevelSummary"
+import DesktopHeader from "./DesktopHeader"
 
 import styles from "./largeTable.module.css"
 
@@ -13,57 +13,41 @@ import {
   LargeTableProps,
 } from "@/types/components/loyalty/blocks"
 
-export default function LargeTable({ levels }: LargeTableProps) {
+export default function LargeTable({
+  levels,
+  activeLevel,
+  Select,
+}: LargeTableProps) {
+  const highestLevel = getHighestLevel(levels)
   return (
     <table className={styles.table}>
-      <thead>
-        <tr className={styles.iconRow}>
-          <th className={styles.verticalTableHeader} />
-
-          {levels.map((level) => {
+      <DesktopHeader
+        levels={levels}
+        activeLevel={activeLevel}
+        Select={Select}
+      />
+      <tbody className={styles.tbody}>
+        {highestLevel?.benefits
+          .filter((benefit) => benefit.unlocked)
+          .map((benefit, index) => {
             return (
-              <th key={level.tier} className={styles.iconTh}>
-                <Image
-                  height={50}
-                  width={100}
-                  alt={level.name}
-                  src={level.icon}
-                />
-              </th>
+              <tr key={benefit.name} className={styles.tr}>
+                <th scope={"row"} className={styles.benefitTh}>
+                  <BenefitTableHeader
+                    name={benefit.name}
+                    description={benefit.description}
+                  />
+                </th>
+                {levels.map((level, idx) => {
+                  return (
+                    <td key={"icon" + level.level + idx} className={styles.td}>
+                      <BenefitValue benefit={level.benefits[index]} />
+                    </td>
+                  )
+                })}
+              </tr>
             )
           })}
-        </tr>
-        <tr>
-          <th />
-          {levels.map((level) => {
-            return (
-              <th key={level.tier} className={styles.summaryTh}>
-                <LevelSummary level={level} />
-              </th>
-            )
-          })}
-        </tr>
-      </thead>
-      <tbody>
-        {levels[0].benefits.map((benefit, index) => {
-          return (
-            <tr key={benefit.name} className={styles.tr}>
-              <th scope={"row"} className={styles.benefitTh}>
-                <BenefitTableHeader
-                  name={benefit.name}
-                  description={benefit.description}
-                />
-              </th>
-              {levels.map((level) => {
-                return (
-                  <td key={level.tier} className={styles.td}>
-                    <BenefitValue benefit={level.benefits[index]} />
-                  </td>
-                )
-              })}
-            </tr>
-          )
-        })}
       </tbody>
     </table>
   )

components/Loyalty/Blocks/DynamicContent/OverviewTable/LargeTable/largeTable.module.css

@@ -3,44 +3,26 @@
   border-collapse: collapse;
   background-color: var(--Scandic-Opacity-White-100);
   border-radius: var(--Corner-radius-Medium);
+  color: var(--UI-Grey-100);
 }
 
-.iconRow {
-  border-bottom: none;
-  position: sticky;
-  top: 0;
-  z-index: 1;
+.tr {
+  border-bottom: 1px solid var(--Base-Border-Subtle);
 }
 
-.verticalTableHeader {
-  width: 242px;
-}
-
-.iconTh {
-  padding: var(--Spacing-x3) var(--Spacing-x2) var(--Spacing-x2);
-  background-color: #fff;
-}
-
-.summaryTh {
-  font-size: var(--typography-Caption-Regular-fontSize);
-  font-weight: 400;
-  padding: 0 var(--Spacing-x3) var(--Spacing-x2);
-  vertical-align: top;
+.tr:last-child {
+  border: none;
 }
 
 .td {
-  border-top: 1px solid var(--Scandic-Beige-20);
-  border-bottom: 1px solid var(--Scandic-Beige-20);
   font-size: var(--typography-Footnote-Regular-fontSize);
   text-align: center;
 }
 
 .benefitTh {
-  border-top: 1px solid var(--Scandic-Beige-20);
-  border-bottom: 1px solid var(--Scandic-Beige-20);
   padding: var(--Spacing-x3) var(--Spacing-x2);
   font-size: var(--typography-Caption-Regular-fontSize);
-  font-weight: 400;
+  font-weight: var(--typography-Caption-Regular-fontWeight);
 }
 
 .details[open] .chevron {
@@ -58,12 +40,13 @@
   margin: 0;
   padding-top: var(--Spacing-x1);
   text-align: start;
-  padding-right: calc(24px + var(--Spacing-x1));
+  padding-right: calc(var(--Spacing-x3) + var(--Spacing-x1));
 }
 
 .chevron {
   display: flex;
   align-self: start;
+  color: var(--UI-Grey-80);
 }
 
 .summary::-webkit-details-marker {