From 92f5f7f7c04b2b895ccd0107da3c9dabb8d64d97 Mon Sep 17 00:00:00 2001
From: Arvid Norlin <arvid.norlin@scandichotels.com>
Date: Fri, 31 May 2024 16:03:30 +0200
Subject: [PATCH] add LargeTable component

---
 .../DynamicContent/LoyaltyLevels/data/DA.json | 14 +++++-----
 .../DynamicContent/LoyaltyLevels/data/DE.json | 14 +++++-----
 .../DynamicContent/LoyaltyLevels/data/EN.json | 14 +++++-----
 .../DynamicContent/LoyaltyLevels/data/FI.json | 14 +++++-----
 .../DynamicContent/LoyaltyLevels/data/NO.json | 14 +++++-----
 .../DynamicContent/LoyaltyLevels/data/SV.json | 14 +++++-----
 .../DynamicContent/LoyaltyLevels/index.tsx    |  2 +-
 .../OverviewTable/LargeTable/index.tsx        | 26 +++++++++++++++++++
 .../DynamicContent/OverviewTable/index.tsx    |  5 ++++
 .../OverviewTable/overviewTable.module.css    | 14 ++++++++++
 .../MyPages/Blocks/Benefits/data/DA.json      | 14 +++++-----
 .../MyPages/Blocks/Benefits/data/DE.json      | 14 +++++-----
 .../MyPages/Blocks/Benefits/data/EN.json      | 14 +++++-----
 .../MyPages/Blocks/Benefits/data/FI.json      | 14 +++++-----
 .../MyPages/Blocks/Benefits/data/NO.json      | 14 +++++-----
 .../MyPages/Blocks/Benefits/data/SV.json      | 14 +++++-----
 types/components/loyalty/blocks.ts            | 15 +++++------
 17 files changed, 136 insertions(+), 94 deletions(-)
 create mode 100644 components/Loyalty/Blocks/DynamicContent/OverviewTable/LargeTable/index.tsx

diff --git a/components/Loyalty/Blocks/DynamicContent/LoyaltyLevels/data/DA.json b/components/Loyalty/Blocks/DynamicContent/LoyaltyLevels/data/DA.json
index 51c939064..daa0c1a26 100644
--- a/components/Loyalty/Blocks/DynamicContent/LoyaltyLevels/data/DA.json
+++ b/components/Loyalty/Blocks/DynamicContent/LoyaltyLevels/data/DA.json
@@ -28,7 +28,7 @@
           "href": ""
         }
       ],
-      "logo": "/_static/icons/loyaltyLevels/new-friend.svg"
+      "icon": "/_static/icons/loyaltyLevels/new-friend.svg"
     },
     {
       "tier": 2,
@@ -44,7 +44,7 @@
           "href": ""
         }
       ],
-      "logo": "/_static/icons/loyaltyLevels/good-friend.svg"
+      "icon": "/_static/icons/loyaltyLevels/good-friend.svg"
     },
     {
       "tier": 3,
@@ -67,7 +67,7 @@
           "href": ""
         }
       ],
-      "logo": "/_static/icons/loyaltyLevels/close-friend.svg"
+      "icon": "/_static/icons/loyaltyLevels/close-friend.svg"
     },
     {
       "tier": 4,
@@ -97,7 +97,7 @@
           "href": ""
         }
       ],
-      "logo": "/_static/icons/loyaltyLevels/dear-friend.svg"
+      "icon": "/_static/icons/loyaltyLevels/dear-friend.svg"
     },
     {
       "tier": 5,
@@ -127,7 +127,7 @@
           "href": ""
         }
       ],
-      "logo": "/_static/icons/loyaltyLevels/loyal-friend.svg"
+      "icon": "/_static/icons/loyaltyLevels/loyal-friend.svg"
     },
     {
       "tier": 6,
@@ -164,7 +164,7 @@
           "href": ""
         }
       ],
-      "logo": "/_static/icons/loyaltyLevels/true-friend.svg"
+      "icon": "/_static/icons/loyaltyLevels/true-friend.svg"
     },
     {
       "tier": 7,
@@ -194,7 +194,7 @@
           "href": ""
         }
       ],
-      "logo": "/_static/icons/loyaltyLevels/best-friend.svg"
+      "icon": "/_static/icons/loyaltyLevels/best-friend.svg"
     }
   ]
 }
diff --git a/components/Loyalty/Blocks/DynamicContent/LoyaltyLevels/data/DE.json b/components/Loyalty/Blocks/DynamicContent/LoyaltyLevels/data/DE.json
index 51c939064..daa0c1a26 100644
--- a/components/Loyalty/Blocks/DynamicContent/LoyaltyLevels/data/DE.json
+++ b/components/Loyalty/Blocks/DynamicContent/LoyaltyLevels/data/DE.json
@@ -28,7 +28,7 @@
           "href": ""
         }
       ],
-      "logo": "/_static/icons/loyaltyLevels/new-friend.svg"
+      "icon": "/_static/icons/loyaltyLevels/new-friend.svg"
     },
     {
       "tier": 2,
@@ -44,7 +44,7 @@
           "href": ""
         }
       ],
-      "logo": "/_static/icons/loyaltyLevels/good-friend.svg"
+      "icon": "/_static/icons/loyaltyLevels/good-friend.svg"
     },
     {
       "tier": 3,
@@ -67,7 +67,7 @@
           "href": ""
         }
       ],
-      "logo": "/_static/icons/loyaltyLevels/close-friend.svg"
+      "icon": "/_static/icons/loyaltyLevels/close-friend.svg"
     },
     {
       "tier": 4,
@@ -97,7 +97,7 @@
           "href": ""
         }
       ],
-      "logo": "/_static/icons/loyaltyLevels/dear-friend.svg"
+      "icon": "/_static/icons/loyaltyLevels/dear-friend.svg"
     },
     {
       "tier": 5,
@@ -127,7 +127,7 @@
           "href": ""
         }
       ],
-      "logo": "/_static/icons/loyaltyLevels/loyal-friend.svg"
+      "icon": "/_static/icons/loyaltyLevels/loyal-friend.svg"
     },
     {
       "tier": 6,
@@ -164,7 +164,7 @@
           "href": ""
         }
       ],
-      "logo": "/_static/icons/loyaltyLevels/true-friend.svg"
+      "icon": "/_static/icons/loyaltyLevels/true-friend.svg"
     },
     {
       "tier": 7,
@@ -194,7 +194,7 @@
           "href": ""
         }
       ],
-      "logo": "/_static/icons/loyaltyLevels/best-friend.svg"
+      "icon": "/_static/icons/loyaltyLevels/best-friend.svg"
     }
   ]
 }
diff --git a/components/Loyalty/Blocks/DynamicContent/LoyaltyLevels/data/EN.json b/components/Loyalty/Blocks/DynamicContent/LoyaltyLevels/data/EN.json
index 51c939064..daa0c1a26 100644
--- a/components/Loyalty/Blocks/DynamicContent/LoyaltyLevels/data/EN.json
+++ b/components/Loyalty/Blocks/DynamicContent/LoyaltyLevels/data/EN.json
@@ -28,7 +28,7 @@
           "href": ""
         }
       ],
-      "logo": "/_static/icons/loyaltyLevels/new-friend.svg"
+      "icon": "/_static/icons/loyaltyLevels/new-friend.svg"
     },
     {
       "tier": 2,
@@ -44,7 +44,7 @@
           "href": ""
         }
       ],
-      "logo": "/_static/icons/loyaltyLevels/good-friend.svg"
+      "icon": "/_static/icons/loyaltyLevels/good-friend.svg"
     },
     {
       "tier": 3,
@@ -67,7 +67,7 @@
           "href": ""
         }
       ],
-      "logo": "/_static/icons/loyaltyLevels/close-friend.svg"
+      "icon": "/_static/icons/loyaltyLevels/close-friend.svg"
     },
     {
       "tier": 4,
@@ -97,7 +97,7 @@
           "href": ""
         }
       ],
-      "logo": "/_static/icons/loyaltyLevels/dear-friend.svg"
+      "icon": "/_static/icons/loyaltyLevels/dear-friend.svg"
     },
     {
       "tier": 5,
@@ -127,7 +127,7 @@
           "href": ""
         }
       ],
-      "logo": "/_static/icons/loyaltyLevels/loyal-friend.svg"
+      "icon": "/_static/icons/loyaltyLevels/loyal-friend.svg"
     },
     {
       "tier": 6,
@@ -164,7 +164,7 @@
           "href": ""
         }
       ],
-      "logo": "/_static/icons/loyaltyLevels/true-friend.svg"
+      "icon": "/_static/icons/loyaltyLevels/true-friend.svg"
     },
     {
       "tier": 7,
@@ -194,7 +194,7 @@
           "href": ""
         }
       ],
-      "logo": "/_static/icons/loyaltyLevels/best-friend.svg"
+      "icon": "/_static/icons/loyaltyLevels/best-friend.svg"
     }
   ]
 }
diff --git a/components/Loyalty/Blocks/DynamicContent/LoyaltyLevels/data/FI.json b/components/Loyalty/Blocks/DynamicContent/LoyaltyLevels/data/FI.json
index 51c939064..daa0c1a26 100644
--- a/components/Loyalty/Blocks/DynamicContent/LoyaltyLevels/data/FI.json
+++ b/components/Loyalty/Blocks/DynamicContent/LoyaltyLevels/data/FI.json
@@ -28,7 +28,7 @@
           "href": ""
         }
       ],
-      "logo": "/_static/icons/loyaltyLevels/new-friend.svg"
+      "icon": "/_static/icons/loyaltyLevels/new-friend.svg"
     },
     {
       "tier": 2,
@@ -44,7 +44,7 @@
           "href": ""
         }
       ],
-      "logo": "/_static/icons/loyaltyLevels/good-friend.svg"
+      "icon": "/_static/icons/loyaltyLevels/good-friend.svg"
     },
     {
       "tier": 3,
@@ -67,7 +67,7 @@
           "href": ""
         }
       ],
-      "logo": "/_static/icons/loyaltyLevels/close-friend.svg"
+      "icon": "/_static/icons/loyaltyLevels/close-friend.svg"
     },
     {
       "tier": 4,
@@ -97,7 +97,7 @@
           "href": ""
         }
       ],
-      "logo": "/_static/icons/loyaltyLevels/dear-friend.svg"
+      "icon": "/_static/icons/loyaltyLevels/dear-friend.svg"
     },
     {
       "tier": 5,
@@ -127,7 +127,7 @@
           "href": ""
         }
       ],
-      "logo": "/_static/icons/loyaltyLevels/loyal-friend.svg"
+      "icon": "/_static/icons/loyaltyLevels/loyal-friend.svg"
     },
     {
       "tier": 6,
@@ -164,7 +164,7 @@
           "href": ""
         }
       ],
-      "logo": "/_static/icons/loyaltyLevels/true-friend.svg"
+      "icon": "/_static/icons/loyaltyLevels/true-friend.svg"
     },
     {
       "tier": 7,
@@ -194,7 +194,7 @@
           "href": ""
         }
       ],
-      "logo": "/_static/icons/loyaltyLevels/best-friend.svg"
+      "icon": "/_static/icons/loyaltyLevels/best-friend.svg"
     }
   ]
 }
diff --git a/components/Loyalty/Blocks/DynamicContent/LoyaltyLevels/data/NO.json b/components/Loyalty/Blocks/DynamicContent/LoyaltyLevels/data/NO.json
index 21f36f708..74a836b42 100644
--- a/components/Loyalty/Blocks/DynamicContent/LoyaltyLevels/data/NO.json
+++ b/components/Loyalty/Blocks/DynamicContent/LoyaltyLevels/data/NO.json
@@ -28,7 +28,7 @@
           "href": ""
         }
       ],
-      "logo": "/_static/icons/loyaltylevels/new-friend.svg"
+      "icon": "/_static/icons/loyaltylevels/new-friend.svg"
     },
     {
       "tier": 2,
@@ -44,7 +44,7 @@
           "href": ""
         }
       ],
-      "logo": "/_static/icons/loyaltylevels/good-friend.svg"
+      "icon": "/_static/icons/loyaltylevels/good-friend.svg"
     },
     {
       "tier": 3,
@@ -67,7 +67,7 @@
           "href": ""
         }
       ],
-      "logo": "/_static/icons/loyaltylevels/close-friend.svg"
+      "icon": "/_static/icons/loyaltylevels/close-friend.svg"
     },
     {
       "tier": 4,
@@ -97,7 +97,7 @@
           "href": ""
         }
       ],
-      "logo": "/_static/icons/loyaltylevels/dear-friend.svg"
+      "icon": "/_static/icons/loyaltylevels/dear-friend.svg"
     },
     {
       "tier": 5,
@@ -127,7 +127,7 @@
           "href": ""
         }
       ],
-      "logo": "/_static/icons/loyaltylevels/loyal-friend.svg"
+      "icon": "/_static/icons/loyaltylevels/loyal-friend.svg"
     },
     {
       "tier": 6,
@@ -164,7 +164,7 @@
           "href": ""
         }
       ],
-      "logo": "/_static/icons/loyaltylevels/true-friend.svg"
+      "icon": "/_static/icons/loyaltylevels/true-friend.svg"
     },
     {
       "tier": 7,
@@ -194,7 +194,7 @@
           "href": ""
         }
       ],
-      "logo": "/_static/icons/loyaltylevels/best-friend.svg"
+      "icon": "/_static/icons/loyaltylevels/best-friend.svg"
     }
   ]
 }
diff --git a/components/Loyalty/Blocks/DynamicContent/LoyaltyLevels/data/SV.json b/components/Loyalty/Blocks/DynamicContent/LoyaltyLevels/data/SV.json
index 21f36f708..74a836b42 100644
--- a/components/Loyalty/Blocks/DynamicContent/LoyaltyLevels/data/SV.json
+++ b/components/Loyalty/Blocks/DynamicContent/LoyaltyLevels/data/SV.json
@@ -28,7 +28,7 @@
           "href": ""
         }
       ],
-      "logo": "/_static/icons/loyaltylevels/new-friend.svg"
+      "icon": "/_static/icons/loyaltylevels/new-friend.svg"
     },
     {
       "tier": 2,
@@ -44,7 +44,7 @@
           "href": ""
         }
       ],
-      "logo": "/_static/icons/loyaltylevels/good-friend.svg"
+      "icon": "/_static/icons/loyaltylevels/good-friend.svg"
     },
     {
       "tier": 3,
@@ -67,7 +67,7 @@
           "href": ""
         }
       ],
-      "logo": "/_static/icons/loyaltylevels/close-friend.svg"
+      "icon": "/_static/icons/loyaltylevels/close-friend.svg"
     },
     {
       "tier": 4,
@@ -97,7 +97,7 @@
           "href": ""
         }
       ],
-      "logo": "/_static/icons/loyaltylevels/dear-friend.svg"
+      "icon": "/_static/icons/loyaltylevels/dear-friend.svg"
     },
     {
       "tier": 5,
@@ -127,7 +127,7 @@
           "href": ""
         }
       ],
-      "logo": "/_static/icons/loyaltylevels/loyal-friend.svg"
+      "icon": "/_static/icons/loyaltylevels/loyal-friend.svg"
     },
     {
       "tier": 6,
@@ -164,7 +164,7 @@
           "href": ""
         }
       ],
-      "logo": "/_static/icons/loyaltylevels/true-friend.svg"
+      "icon": "/_static/icons/loyaltylevels/true-friend.svg"
     },
     {
       "tier": 7,
@@ -194,7 +194,7 @@
           "href": ""
         }
       ],
-      "logo": "/_static/icons/loyaltylevels/best-friend.svg"
+      "icon": "/_static/icons/loyaltylevels/best-friend.svg"
     }
   ]
 }
diff --git a/components/Loyalty/Blocks/DynamicContent/LoyaltyLevels/index.tsx b/components/Loyalty/Blocks/DynamicContent/LoyaltyLevels/index.tsx
index 4f0365df5..29d57ba94 100644
--- a/components/Loyalty/Blocks/DynamicContent/LoyaltyLevels/index.tsx
+++ b/components/Loyalty/Blocks/DynamicContent/LoyaltyLevels/index.tsx
@@ -56,7 +56,7 @@ function LevelCard({ formatMessage, lang, level }: LevelCardProps) {
       <Title className={styles.tierHeading} level="h4">
         {level.tier}
       </Title>
-      <Image src={level.logo} alt={level.name} width={140} height={54} />
+      <Image src={level.icon} alt={level.name} width={140} height={54} />
       <p className={styles.qualifications}>{qualifications}</p>
       {level.benefits.map((benefit) => (
         <p key={benefit.title} className={styles.benefits}>
diff --git a/components/Loyalty/Blocks/DynamicContent/OverviewTable/LargeTable/index.tsx b/components/Loyalty/Blocks/DynamicContent/OverviewTable/LargeTable/index.tsx
new file mode 100644
index 000000000..8db525088
--- /dev/null
+++ b/components/Loyalty/Blocks/DynamicContent/OverviewTable/LargeTable/index.tsx
@@ -0,0 +1,26 @@
+import Image from "@/components/Image"
+
+import { LargeTableProps } from "@/types/components/loyalty/blocks"
+
+export default function LargeTable({ levels }: LargeTableProps) {
+  return (
+    <table>
+      <thead>
+        <th />
+        {levels.map((level) => {
+          console.log({ level })
+          return (
+            <th key={level.tier}>
+              <Image
+                src={level.icon}
+                alt={level.name}
+                width={140}
+                height={54}
+              />
+            </th>
+          )
+        })}
+      </thead>
+    </table>
+  )
+}
diff --git a/components/Loyalty/Blocks/DynamicContent/OverviewTable/index.tsx b/components/Loyalty/Blocks/DynamicContent/OverviewTable/index.tsx
index a41ae9b2f..2d78835d0 100644
--- a/components/Loyalty/Blocks/DynamicContent/OverviewTable/index.tsx
+++ b/components/Loyalty/Blocks/DynamicContent/OverviewTable/index.tsx
@@ -10,6 +10,7 @@ import Select from "@/components/TempDesignSystem/Form/Select"
 
 import levelsData from "./data/EN.json"
 import BenefitList from "./BenefitList"
+import LargeTable from "./LargeTable"
 import LevelSummary from "./LevelSummary"
 import OverviewTableTitle from "./Title"
 
@@ -178,6 +179,10 @@ export default function OverviewTable() {
           levels={[selectedLevelA, selectedLevelB, selectedLevelC]}
         />
       </div>
+      <div className={styles.largeTableContainer}>
+        {/* Remove `as` once we have real data */}
+        <LargeTable levels={levelsData.levels as ComparisonLevel[]} />
+      </div>
     </div>
   )
 }
diff --git a/components/Loyalty/Blocks/DynamicContent/OverviewTable/overviewTable.module.css b/components/Loyalty/Blocks/DynamicContent/OverviewTable/overviewTable.module.css
index 0a916423d..e219c5500 100644
--- a/components/Loyalty/Blocks/DynamicContent/OverviewTable/overviewTable.module.css
+++ b/components/Loyalty/Blocks/DynamicContent/OverviewTable/overviewTable.module.css
@@ -25,6 +25,10 @@
   margin: 0;
 }
 
+.largeTableContainer {
+  display: none;
+}
+
 .columns {
   display: none;
   position: relative;
@@ -95,3 +99,13 @@
     margin: 0 calc(var(--Spacing-x2) * -1);
   }
 }
+
+@media screen and (min-width: 1367px) {
+  .columns {
+    display: none;
+  }
+
+  .largeTableContainer {
+    display: block;
+  }
+}
diff --git a/components/MyPages/Blocks/Benefits/data/DA.json b/components/MyPages/Blocks/Benefits/data/DA.json
index 21f36f708..74a836b42 100644
--- a/components/MyPages/Blocks/Benefits/data/DA.json
+++ b/components/MyPages/Blocks/Benefits/data/DA.json
@@ -28,7 +28,7 @@
           "href": ""
         }
       ],
-      "logo": "/_static/icons/loyaltylevels/new-friend.svg"
+      "icon": "/_static/icons/loyaltylevels/new-friend.svg"
     },
     {
       "tier": 2,
@@ -44,7 +44,7 @@
           "href": ""
         }
       ],
-      "logo": "/_static/icons/loyaltylevels/good-friend.svg"
+      "icon": "/_static/icons/loyaltylevels/good-friend.svg"
     },
     {
       "tier": 3,
@@ -67,7 +67,7 @@
           "href": ""
         }
       ],
-      "logo": "/_static/icons/loyaltylevels/close-friend.svg"
+      "icon": "/_static/icons/loyaltylevels/close-friend.svg"
     },
     {
       "tier": 4,
@@ -97,7 +97,7 @@
           "href": ""
         }
       ],
-      "logo": "/_static/icons/loyaltylevels/dear-friend.svg"
+      "icon": "/_static/icons/loyaltylevels/dear-friend.svg"
     },
     {
       "tier": 5,
@@ -127,7 +127,7 @@
           "href": ""
         }
       ],
-      "logo": "/_static/icons/loyaltylevels/loyal-friend.svg"
+      "icon": "/_static/icons/loyaltylevels/loyal-friend.svg"
     },
     {
       "tier": 6,
@@ -164,7 +164,7 @@
           "href": ""
         }
       ],
-      "logo": "/_static/icons/loyaltylevels/true-friend.svg"
+      "icon": "/_static/icons/loyaltylevels/true-friend.svg"
     },
     {
       "tier": 7,
@@ -194,7 +194,7 @@
           "href": ""
         }
       ],
-      "logo": "/_static/icons/loyaltylevels/best-friend.svg"
+      "icon": "/_static/icons/loyaltylevels/best-friend.svg"
     }
   ]
 }
diff --git a/components/MyPages/Blocks/Benefits/data/DE.json b/components/MyPages/Blocks/Benefits/data/DE.json
index 21f36f708..74a836b42 100644
--- a/components/MyPages/Blocks/Benefits/data/DE.json
+++ b/components/MyPages/Blocks/Benefits/data/DE.json
@@ -28,7 +28,7 @@
           "href": ""
         }
       ],
-      "logo": "/_static/icons/loyaltylevels/new-friend.svg"
+      "icon": "/_static/icons/loyaltylevels/new-friend.svg"
     },
     {
       "tier": 2,
@@ -44,7 +44,7 @@
           "href": ""
         }
       ],
-      "logo": "/_static/icons/loyaltylevels/good-friend.svg"
+      "icon": "/_static/icons/loyaltylevels/good-friend.svg"
     },
     {
       "tier": 3,
@@ -67,7 +67,7 @@
           "href": ""
         }
       ],
-      "logo": "/_static/icons/loyaltylevels/close-friend.svg"
+      "icon": "/_static/icons/loyaltylevels/close-friend.svg"
     },
     {
       "tier": 4,
@@ -97,7 +97,7 @@
           "href": ""
         }
       ],
-      "logo": "/_static/icons/loyaltylevels/dear-friend.svg"
+      "icon": "/_static/icons/loyaltylevels/dear-friend.svg"
     },
     {
       "tier": 5,
@@ -127,7 +127,7 @@
           "href": ""
         }
       ],
-      "logo": "/_static/icons/loyaltylevels/loyal-friend.svg"
+      "icon": "/_static/icons/loyaltylevels/loyal-friend.svg"
     },
     {
       "tier": 6,
@@ -164,7 +164,7 @@
           "href": ""
         }
       ],
-      "logo": "/_static/icons/loyaltylevels/true-friend.svg"
+      "icon": "/_static/icons/loyaltylevels/true-friend.svg"
     },
     {
       "tier": 7,
@@ -194,7 +194,7 @@
           "href": ""
         }
       ],
-      "logo": "/_static/icons/loyaltylevels/best-friend.svg"
+      "icon": "/_static/icons/loyaltylevels/best-friend.svg"
     }
   ]
 }
diff --git a/components/MyPages/Blocks/Benefits/data/EN.json b/components/MyPages/Blocks/Benefits/data/EN.json
index 21f36f708..74a836b42 100644
--- a/components/MyPages/Blocks/Benefits/data/EN.json
+++ b/components/MyPages/Blocks/Benefits/data/EN.json
@@ -28,7 +28,7 @@
           "href": ""
         }
       ],
-      "logo": "/_static/icons/loyaltylevels/new-friend.svg"
+      "icon": "/_static/icons/loyaltylevels/new-friend.svg"
     },
     {
       "tier": 2,
@@ -44,7 +44,7 @@
           "href": ""
         }
       ],
-      "logo": "/_static/icons/loyaltylevels/good-friend.svg"
+      "icon": "/_static/icons/loyaltylevels/good-friend.svg"
     },
     {
       "tier": 3,
@@ -67,7 +67,7 @@
           "href": ""
         }
       ],
-      "logo": "/_static/icons/loyaltylevels/close-friend.svg"
+      "icon": "/_static/icons/loyaltylevels/close-friend.svg"
     },
     {
       "tier": 4,
@@ -97,7 +97,7 @@
           "href": ""
         }
       ],
-      "logo": "/_static/icons/loyaltylevels/dear-friend.svg"
+      "icon": "/_static/icons/loyaltylevels/dear-friend.svg"
     },
     {
       "tier": 5,
@@ -127,7 +127,7 @@
           "href": ""
         }
       ],
-      "logo": "/_static/icons/loyaltylevels/loyal-friend.svg"
+      "icon": "/_static/icons/loyaltylevels/loyal-friend.svg"
     },
     {
       "tier": 6,
@@ -164,7 +164,7 @@
           "href": ""
         }
       ],
-      "logo": "/_static/icons/loyaltylevels/true-friend.svg"
+      "icon": "/_static/icons/loyaltylevels/true-friend.svg"
     },
     {
       "tier": 7,
@@ -194,7 +194,7 @@
           "href": ""
         }
       ],
-      "logo": "/_static/icons/loyaltylevels/best-friend.svg"
+      "icon": "/_static/icons/loyaltylevels/best-friend.svg"
     }
   ]
 }
diff --git a/components/MyPages/Blocks/Benefits/data/FI.json b/components/MyPages/Blocks/Benefits/data/FI.json
index 21f36f708..74a836b42 100644
--- a/components/MyPages/Blocks/Benefits/data/FI.json
+++ b/components/MyPages/Blocks/Benefits/data/FI.json
@@ -28,7 +28,7 @@
           "href": ""
         }
       ],
-      "logo": "/_static/icons/loyaltylevels/new-friend.svg"
+      "icon": "/_static/icons/loyaltylevels/new-friend.svg"
     },
     {
       "tier": 2,
@@ -44,7 +44,7 @@
           "href": ""
         }
       ],
-      "logo": "/_static/icons/loyaltylevels/good-friend.svg"
+      "icon": "/_static/icons/loyaltylevels/good-friend.svg"
     },
     {
       "tier": 3,
@@ -67,7 +67,7 @@
           "href": ""
         }
       ],
-      "logo": "/_static/icons/loyaltylevels/close-friend.svg"
+      "icon": "/_static/icons/loyaltylevels/close-friend.svg"
     },
     {
       "tier": 4,
@@ -97,7 +97,7 @@
           "href": ""
         }
       ],
-      "logo": "/_static/icons/loyaltylevels/dear-friend.svg"
+      "icon": "/_static/icons/loyaltylevels/dear-friend.svg"
     },
     {
       "tier": 5,
@@ -127,7 +127,7 @@
           "href": ""
         }
       ],
-      "logo": "/_static/icons/loyaltylevels/loyal-friend.svg"
+      "icon": "/_static/icons/loyaltylevels/loyal-friend.svg"
     },
     {
       "tier": 6,
@@ -164,7 +164,7 @@
           "href": ""
         }
       ],
-      "logo": "/_static/icons/loyaltylevels/true-friend.svg"
+      "icon": "/_static/icons/loyaltylevels/true-friend.svg"
     },
     {
       "tier": 7,
@@ -194,7 +194,7 @@
           "href": ""
         }
       ],
-      "logo": "/_static/icons/loyaltylevels/best-friend.svg"
+      "icon": "/_static/icons/loyaltylevels/best-friend.svg"
     }
   ]
 }
diff --git a/components/MyPages/Blocks/Benefits/data/NO.json b/components/MyPages/Blocks/Benefits/data/NO.json
index 21f36f708..74a836b42 100644
--- a/components/MyPages/Blocks/Benefits/data/NO.json
+++ b/components/MyPages/Blocks/Benefits/data/NO.json
@@ -28,7 +28,7 @@
           "href": ""
         }
       ],
-      "logo": "/_static/icons/loyaltylevels/new-friend.svg"
+      "icon": "/_static/icons/loyaltylevels/new-friend.svg"
     },
     {
       "tier": 2,
@@ -44,7 +44,7 @@
           "href": ""
         }
       ],
-      "logo": "/_static/icons/loyaltylevels/good-friend.svg"
+      "icon": "/_static/icons/loyaltylevels/good-friend.svg"
     },
     {
       "tier": 3,
@@ -67,7 +67,7 @@
           "href": ""
         }
       ],
-      "logo": "/_static/icons/loyaltylevels/close-friend.svg"
+      "icon": "/_static/icons/loyaltylevels/close-friend.svg"
     },
     {
       "tier": 4,
@@ -97,7 +97,7 @@
           "href": ""
         }
       ],
-      "logo": "/_static/icons/loyaltylevels/dear-friend.svg"
+      "icon": "/_static/icons/loyaltylevels/dear-friend.svg"
     },
     {
       "tier": 5,
@@ -127,7 +127,7 @@
           "href": ""
         }
       ],
-      "logo": "/_static/icons/loyaltylevels/loyal-friend.svg"
+      "icon": "/_static/icons/loyaltylevels/loyal-friend.svg"
     },
     {
       "tier": 6,
@@ -164,7 +164,7 @@
           "href": ""
         }
       ],
-      "logo": "/_static/icons/loyaltylevels/true-friend.svg"
+      "icon": "/_static/icons/loyaltylevels/true-friend.svg"
     },
     {
       "tier": 7,
@@ -194,7 +194,7 @@
           "href": ""
         }
       ],
-      "logo": "/_static/icons/loyaltylevels/best-friend.svg"
+      "icon": "/_static/icons/loyaltylevels/best-friend.svg"
     }
   ]
 }
diff --git a/components/MyPages/Blocks/Benefits/data/SV.json b/components/MyPages/Blocks/Benefits/data/SV.json
index 21f36f708..74a836b42 100644
--- a/components/MyPages/Blocks/Benefits/data/SV.json
+++ b/components/MyPages/Blocks/Benefits/data/SV.json
@@ -28,7 +28,7 @@
           "href": ""
         }
       ],
-      "logo": "/_static/icons/loyaltylevels/new-friend.svg"
+      "icon": "/_static/icons/loyaltylevels/new-friend.svg"
     },
     {
       "tier": 2,
@@ -44,7 +44,7 @@
           "href": ""
         }
       ],
-      "logo": "/_static/icons/loyaltylevels/good-friend.svg"
+      "icon": "/_static/icons/loyaltylevels/good-friend.svg"
     },
     {
       "tier": 3,
@@ -67,7 +67,7 @@
           "href": ""
         }
       ],
-      "logo": "/_static/icons/loyaltylevels/close-friend.svg"
+      "icon": "/_static/icons/loyaltylevels/close-friend.svg"
     },
     {
       "tier": 4,
@@ -97,7 +97,7 @@
           "href": ""
         }
       ],
-      "logo": "/_static/icons/loyaltylevels/dear-friend.svg"
+      "icon": "/_static/icons/loyaltylevels/dear-friend.svg"
     },
     {
       "tier": 5,
@@ -127,7 +127,7 @@
           "href": ""
         }
       ],
-      "logo": "/_static/icons/loyaltylevels/loyal-friend.svg"
+      "icon": "/_static/icons/loyaltylevels/loyal-friend.svg"
     },
     {
       "tier": 6,
@@ -164,7 +164,7 @@
           "href": ""
         }
       ],
-      "logo": "/_static/icons/loyaltylevels/true-friend.svg"
+      "icon": "/_static/icons/loyaltylevels/true-friend.svg"
     },
     {
       "tier": 7,
@@ -194,7 +194,7 @@
           "href": ""
         }
       ],
-      "logo": "/_static/icons/loyaltylevels/best-friend.svg"
+      "icon": "/_static/icons/loyaltylevels/best-friend.svg"
     }
   ]
 }
diff --git a/types/components/loyalty/blocks.ts b/types/components/loyalty/blocks.ts
index 1789d393f..159883fcf 100644
--- a/types/components/loyalty/blocks.ts
+++ b/types/components/loyalty/blocks.ts
@@ -38,21 +38,14 @@ export type Level = {
   name: string
   requiredPoints: number
   requiredNights?: number
-  logo: string
+  icon: string
   benefits: Benefit[]
 }
 
 export type LevelCardProps = {
   formatMessage: IntlFormatters["formatMessage"]
   lang: Lang
-  level: {
-    tier: number
-    name: string
-    requiredPoints: number
-    requiredNights?: number
-    benefits: Benefit[]
-    logo: string
-  }
+  level: Level
 }
 
 export type ComparisonLevel = {
@@ -95,3 +88,7 @@ export type BenefitValueProps = {
 export type BenefitListProps = {
   levels: ComparisonLevel[]
 }
+
+export type LargeTableProps = {
+  levels: ComparisonLevel[]
+}