feat(LOY-10): dynamic icons based on reward id

components/Blocks/DynamicContent/Rewards/CurrentLevel/Client.tsx

@@ -2,8 +2,8 @@
 
 import { useRef,useState } from "react"
 
-import Image from "@/components/Image"
 import Pagination from "@/components/MyPages/Pagination"
+import { RewardIcon } from "@/components/Blocks/DynamicContent/Rewards/RewardIcon"
 import Grids from "@/components/TempDesignSystem/Grids"
 import Title from "@/components/TempDesignSystem/Text/Title"
 
@@ -43,12 +43,9 @@ export default function ClientCurrentRewards({
         {currentRewards.map((reward, idx) => (
           <article className={styles.card} key={`${reward.reward_id}-${idx}`}>
             <div className={styles.content}>
-              <Image
-                src="/_static/img/loyalty-award.png"
-                width={113}
-                height={125}
-                alt={reward.label || ""}
-              />
+              <div className={styles.icon}>
+                <RewardIcon rewardId={reward.reward_id} />
+              </div>
               <Title
                 as="h4"
                 level="h3"

components/Blocks/DynamicContent/Rewards/CurrentLevel/current.module.css

@@ -1,3 +1,11 @@
+.container {
+  display: flex;
+  flex-direction: column;
+  gap: var(--Spacing-x4);
+  position: relative;
+  scroll-margin-top: calc(var(--current-mobile-site-header-height) * 2);
+}
+
 .card {
   background-color: var(--UI-Opacity-White-100);
   border: 1px solid var(--Base-Border-Subtle);
@@ -122,12 +130,4 @@
   height: var(--button-height);
   display: flex;
   align-items: center;
-}
-
-.container {
-  display: flex;
-  flex-direction: column;
-  gap: var(--Spacing-x4);
-  position: relative;
-  scroll-margin-top: calc(var(--current-mobile-site-header-height) * 2);
-}
+}

components/Blocks/DynamicContent/Rewards/RewardIcon/data.ts

@@ -0,0 +1,42 @@
+import { FC } from "react"
+
+import { getIconByIconName } from "@/components/Icons/get-icon-by-icon-name"
+
+import { IconName , IconProps } from "@/types/components/icon"
+import { RewardId } from "@/types/enums/rewards"
+
+const rewardToIconMap: Record<RewardId, IconName> = {
+  // Food & beverage.
+  [RewardId.TenPercentFood]: IconName.CroissantCoffeeEgg,
+  [RewardId.FifteenPercentFood]: IconName.CroissantCoffeeEgg,
+  [RewardId.TwoForOneBreakfast]: IconName.CutleryTwo,
+  [RewardId.FreeBreakfast]: IconName.CutleryOne,
+  [RewardId.FreeKidsDrink]: IconName.KidsMocktail,
+
+  // Monetary (or exchange for points) vouchers all use the same icon.
+  [RewardId.Bonus50SEK]: IconName.Voucher,
+  [RewardId.Bonus75SEK]: IconName.Voucher,
+  [RewardId.Bonus100SEK]: IconName.Voucher,
+  [RewardId.Bonus150SEK]: IconName.Voucher,
+  [RewardId.Bonus200SEK]: IconName.Voucher,
+
+  // Hotel perks.
+  [RewardId.EarlyCheckin]: IconName.HandKey,
+  [RewardId.LateCheckout]: IconName.HotelNight,
+  [RewardId.FreeUpgrade]: IconName.MagicWand,
+  [RewardId.RoomGuarantee48H]: IconName.Bed,
+
+  // Earnings.
+  [RewardId.EarnRate25Percent]: IconName.MoneyHand,
+  [RewardId.EarnRate50Percent]: IconName.MoneyHand,
+  [RewardId.StayBoostForKids]: IconName.Kids,
+  [RewardId.MemberRate]: IconName.Coin,
+
+  // Special
+  [RewardId.YearlyExclusiveGift]: IconName.GiftOpen,
+}
+
+export function mapRewardToIcon(rewardId: string): FC<IconProps> | null {
+  const iconName = rewardToIconMap[rewardId as RewardId]
+  return getIconByIconName(iconName) || null
+}

components/Blocks/DynamicContent/Rewards/RewardIcon/index.tsx

@@ -0,0 +1,32 @@
+import { mapRewardToIcon } from "./data"
+
+import { IconProps } from "@/types/components/icon"
+
+interface RewardIconProps extends IconProps {
+  rewardId: string
+  size?: "small" | "medium" | "large"
+}
+
+// Original SVG aspect ratio is 358:202 (≈1.77:1)
+const sizeMap = {
+  small: { width: 120, height: 68 }, // 40% of card width
+  medium: { width: 180, height: 102 }, // 60% of card width
+  large: { width: 240, height: 135 }, // 80% of card width
+} as const
+
+export function RewardIcon({
+  rewardId,
+  size = "medium",
+  ...props
+}: RewardIconProps) {
+  const IconComponent = mapRewardToIcon(rewardId)
+  if (!IconComponent) return null
+
+  return (
+    <IconComponent
+      {...props}
+      width={sizeMap[size].width}
+      height={sizeMap[size].height}
+    />
+  )
+}