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}
+    />
+  )
+}

components/Icons/Voucher.tsx

@@ -0,0 +1,36 @@
+import type { IconProps } from "@/types/components/icon"
+
+export default function VoucherIcon({ color, ...props }: IconProps) {
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      viewBox="0 0 358 202"
+      fill="none"
+      {...props}
+    >
+      <clipPath id="a">
+        <path d="M0 .375h358V201.75H0z" />
+      </clipPath>
+      <g clip-path="url(#a)">
+        <path fill="#fff" d="M0 .375h358V201.75H0z" />
+        <g fill="#4d001b">
+          <path d="M117.481 107.462c-.185-.315-.011-.663.365-.697l3.353-.325a.48.48 0 0 1 .455.236l5.059 8.794.152-.017 3.257-9.609a.51.51 0 0 1 .399-.32l3.352-.325c.377-.04.612.269.495.612l-6.256 17.734a.5.5 0 0 1-.399.32l-.253.022a.47.47 0 0 1-.455-.235zM143.959 103.953c5.043-.494 9.468 3.167 9.962 8.21s-3.145 9.44-8.187 9.934a9.035 9.035 0 0 1-9.934-8.16c-.495-5.042 3.116-9.49 8.159-9.984m1.382 14.112c2.774-.27 4.818-2.763 4.548-5.509s-2.763-4.846-5.537-4.571c-2.746.269-4.79 2.785-4.52 5.559.269 2.746 2.757 4.796 5.509 4.527zM155.898 103.519a.5.5 0 0 1 .432-.527l3.1-.304c.275-.028.5.18.528.433l.999 10.209c.174 1.763 1.623 3.049 3.409 2.869 1.814-.179 3.01-1.718 2.842-3.481l-1-10.209a.486.486 0 0 1 .432-.528l3.1-.304c.253-.022.5.18.528.433l1.016 10.411c.377 3.83-2.538 7.323-6.519 7.71-3.959.388-7.469-2.476-7.845-6.306l-1.017-10.411zM182.061 100.224c2.521-.247 4.465.354 6.329 1.747a.47.47 0 0 1 .095.702l-1.763 2.235a.446.446 0 0 1-.629.061 5.19 5.19 0 0 0-3.527-.954c-2.847.28-4.705 2.852-4.43 5.677.275 2.797 2.617 4.908 5.464 4.633 1.185-.118 2.426-.668 3.257-1.539.163-.168.488-.202.657-.039l2.173 1.898c.191.157.202.489.039.685-1.55 1.831-3.644 2.825-5.885 3.044-5.043.494-9.49-3.117-9.984-8.16s3.167-9.496 8.21-9.99zM191.276 100.055a.504.504 0 0 1 .433-.528l2.998-.292c.275-.028.5.18.528.433l.623 6.351 7.211-.707-.623-6.352a.486.486 0 0 1 .432-.528l2.999-.292c.252-.022.5.18.528.433l1.634 16.684c.022.252-.18.5-.433.528l-2.998.292a.485.485 0 0 1-.528-.433l-.652-6.626-7.21.707.651 6.627a.486.486 0 0 1-.432.528l-2.999.292a.504.504 0 0 1-.528-.433zM210.734 98.152a.487.487 0 0 1 .433-.528l10.434-1.022a.484.484 0 0 1 .527.433l.27 2.746a.486.486 0 0 1-.432.527l-6.981.686.304 3.127 5.744-.561c.253-.023.5.18.528.432l.27 2.746c.028.275-.18.5-.433.528l-5.744.562.331 3.403 6.98-.685c.275-.028.5.179.528.432l.27 2.746a.487.487 0 0 1-.433.528l-10.434 1.022a.486.486 0 0 1-.528-.432l-1.634-16.684zM225.503 96.708a.486.486 0 0 1 .432-.528l7.536-.735c3.027-.298 5.734 1.91 6.026 4.908.225 2.319-1.129 4.335-3.235 5.43l4.077 6.065c.208.309.073.73-.359.775l-3.353.326a.46.46 0 0 1-.426-.186l-4.004-6.351-1.741.169.629 6.424c.022.253-.18.5-.433.528l-2.998.292a.486.486 0 0 1-.528-.433l-1.634-16.684zm8.373 6.301c1.033-.101 1.819-1.145 1.718-2.201s-1.067-1.83-2.1-1.73l-3.729.365.388 3.931 3.728-.365z" />
+        </g>
+        <path
+          fill="#cd0921"
+          d="M185.11 140.69c-31.891 1.528-33.177 2.769-34.767 33.453-1.589-30.684-2.88-31.925-34.766-33.453 31.891-1.527 33.177-2.768 34.766-33.452 1.59 30.684 2.881 31.925 34.767 33.452M235.6 57.713c-43.465 2.365-45.223 4.285-47.391 51.731-2.167-47.446-3.925-49.366-47.39-51.73 43.465-2.365 45.223-4.285 47.39-51.732 2.168 47.447 3.926 49.367 47.391 51.731"
+        />
+        <path
+          stroke="#4d001b"
+          stroke-miterlimit="10"
+          stroke-width="1.685"
+          d="M262.19 59.623c-.062-.629-.933-1.056-1.561-.994q-3.303.325-6.599.64c-3.302.326-3.302.287-6.604.612s-3.262.702-6.559 1.022c-3.296.32-3.313.174-6.615.5s-3.336-.017-6.632.309-3.313.196-6.61.517c-3.296.32-3.24.954-6.536 1.28-3.297.326-3.341-.135-6.643.19s-3.297.349-6.593.67c-3.297.32-3.291.403-6.593.73s-3.313.173-6.609.499c-3.297.326-3.308.264-6.604.584s-3.291.432-6.588.758c-3.296.326-3.285.444-6.587.77s-3.285.449-6.587.769-3.347-.169-6.649.151-3.296.348-6.598.669-3.246.887-6.542 1.207c-3.297.32-3.353-.208-6.655.118s-3.24.943-6.542 1.269-3.307.213-6.609.534-3.353-.197-6.649.129c-3.297.325-3.285.471-6.587.792s-3.319.134-6.621.454-3.235 1-6.537 1.326-3.307.292-6.61.612c-.628.061-1.364.331-1.302.966.224 2.302.747 4.582.971 6.884s.056 4.65.287 6.952c.23 2.303.449 4.61.674 6.919.224 2.308.977 4.56 1.201 6.862s.37 4.616.596 6.924c.224 2.308.005 4.656.235 6.958.225 2.302.905 4.565 1.13 6.874s.218 4.632.443 6.94c.224 2.303.904 4.566 1.129 6.874s.286 4.627.51 6.93.09 4.644.315 6.952.921 4.565 1.151 6.868c.062.629.382 1.471 1.011 1.409 3.302-.326 3.291-.387 6.593-.707 3.302-.321 3.302-.281 6.604-.607s3.296-.354 6.598-.674 3.24-.954 6.537-1.28 3.33-.039 6.626-.365 3.28-.551 6.576-.871 3.336.04 6.632-.28 3.319-.124 6.615-.444 3.252-.786 6.554-1.112 3.307-.236 6.609-.561 3.341.089 6.638-.236c3.296-.326 3.274-.596 6.57-.916s3.268-.657 6.57-.982c3.302-.326 3.325-.079 6.621-.399s3.274-.612 6.57-.938 3.364.32 6.666 0 3.235-1 6.537-1.325c3.302-.326 3.341.095 6.643-.225s3.274-.589 6.576-.915 3.352.219 6.654-.107 3.257-.741 6.559-1.061 3.342.09 6.644-.236 3.262-.741 6.564-1.067 3.319-.129 6.621-.455 3.302-.314 6.604-.64 3.291-.472 6.593-.798c.629-.061 1.044-.578.983-1.207-.315-3.19-.377-3.184-.691-6.374-.315-3.189 0-3.217-.315-6.413-.314-3.195-.741-3.15-1.055-6.34-.315-3.189.179-3.24-.13-6.435-.207-2.128-.651-4.234-.859-6.363-.208-2.128-.64-4.234-.848-6.362s-.224-4.274-.432-6.402-.36-4.262-.567-6.39c-.208-2.129-.382-4.257-.59-6.385s-.825-4.218-1.033-6.346.241-4.318.033-6.447c-.207-2.128-.758-4.223-.965-6.351-.208-2.128-.107-4.285-.315-6.413z"
+        />
+        <path
+          fill="#cd0921"
+          d="M143.122 35.325c-18.891.943-19.655 1.707-20.598 20.598-.944-18.891-1.707-19.655-20.598-20.598 18.891-.944 19.654-1.708 20.598-20.598.943 18.89 1.707 19.654 20.598 20.598M248.813 176.168c-18.891.944-19.654 1.708-20.598 20.598-.943-18.89-1.707-19.654-20.598-20.598 18.891-.943 19.655-1.707 20.598-20.598.944 18.891 1.707 19.655 20.598 20.598"
+        />
+      </g>
+    </svg>
+  )
+}

components/Icons/get-icon-by-icon-name.ts

@@ -8,6 +8,7 @@ import {
   AirplaneIcon,
   ArrowRightIcon,
   BarIcon,
+  BedIcon,
   BikingIcon,
   BusinessIcon,
   CalendarIcon,
@@ -26,11 +27,15 @@ import {
   CloseIcon,
   CloseLargeIcon,
   CoffeeAltIcon,
+  CoinIcon,
   ConciergeIcon,
   ConvenienceStore24hIcon,
   CoolIcon,
+  CroissantCoffeeEggIcon,
   CrossCircle,
   CulturalIcon,
+  CutleryOneIcon,
+  CutleryTwoIcon,
   DoorOpenIcon,
   DresserIcon,
   ElectricBikeIcon,
@@ -46,25 +51,32 @@ import {
   GalleryIcon,
   GarageIcon,
   GiftIcon,
+  GiftOpenIcon,
   GlobeIcon,
   GolfIcon,
   GroceriesIcon,
+  HandKeyIcon,
   HangerAltIcon,
   HangerIcon,
   HeatIcon,
+  HotelNightIcon,
   HouseIcon,
   ImageIcon,
   InfoCircleIcon,
   InstagramIcon,
   KayakingIcon,
   KettleIcon,
+  KidsIcon,
+  KidsMocktailIcon,
   LampIcon,
   LaundryMachineIcon,
   LocalBarIcon,
   LocationIcon,
   LockIcon,
+  MagicWandIcon,
   MapIcon,
   MinusIcon,
+  MoneyHandIcon,
   MuseumIcon,
   NatureIcon,
   NightlifeIcon,
@@ -97,6 +109,7 @@ import {
   TshirtIcon,
   TshirtWashIcon,
   TvCastingIcon,
+  VoucherIcon,
   WarningTriangle,
   WifiIcon,
 } from "."
@@ -121,6 +134,8 @@ export function getIconByIconName(
       return ArrowRightIcon
     case IconName.Bar:
       return BarIcon
+    case IconName.Bed:
+      return BedIcon
     case IconName.Biking:
       return BikingIcon
     case IconName.Business:
@@ -161,12 +176,20 @@ export function getIconByIconName(
       return ConvenienceStore24hIcon
     case IconName.Cool:
       return CoolIcon
+    case IconName.Coin:
+      return CoinIcon
     case IconName.CoffeeAlt:
       return CoffeeAltIcon
     case IconName.Concierge:
       return ConciergeIcon
+    case IconName.CroissantCoffeeEgg:
+      return CroissantCoffeeEggIcon
     case IconName.Cultural:
       return CulturalIcon
+    case IconName.CutleryOne:
+      return CutleryOneIcon
+    case IconName.CutleryTwo:
+      return CutleryTwoIcon
     case IconName.DoorOpen:
       return DoorOpenIcon
     case IconName.Dresser:
@@ -197,18 +220,24 @@ export function getIconByIconName(
       return GarageIcon
     case IconName.Gift:
       return GiftIcon
+    case IconName.GiftOpen:
+      return GiftOpenIcon
     case IconName.Globe:
       return GlobeIcon
     case IconName.Golf:
       return GolfIcon
     case IconName.Groceries:
       return GroceriesIcon
+    case IconName.HandKey:
+      return HandKeyIcon
     case IconName.Hanger:
       return HangerIcon
     case IconName.HangerAlt:
       return HangerAltIcon
     case IconName.Heat:
       return HeatIcon
+    case IconName.HotelNight:
+      return HotelNightIcon
     case IconName.House:
       return HouseIcon
     case IconName.Image:
@@ -221,6 +250,10 @@ export function getIconByIconName(
       return KayakingIcon
     case IconName.Kettle:
       return KettleIcon
+    case IconName.Kids:
+      return KidsIcon
+    case IconName.KidsMocktail:
+      return KidsMocktailIcon
     case IconName.Lamp:
       return LampIcon
     case IconName.LaundryMachine:
@@ -235,6 +268,10 @@ export function getIconByIconName(
       return MapIcon
     case IconName.Minus:
       return MinusIcon
+    case IconName.MagicWand:
+      return MagicWandIcon
+    case IconName.MoneyHand:
+      return MoneyHandIcon
     case IconName.Museum:
       return MuseumIcon
     case IconName.Nature:
@@ -301,6 +338,8 @@ export function getIconByIconName(
       return TvCastingIcon
     case IconName.WarningTriangle:
       return WarningTriangle
+    case IconName.Voucher:
+      return VoucherIcon
     case IconName.Wifi:
       return WifiIcon
     default:

components/Icons/index.tsx

@@ -10,6 +10,7 @@ export { default as ArrowUpIcon } from "./ArrowUp"
 export { default as BalconyIcon } from "./Balcony"
 export { default as BarIcon } from "./Bar"
 export { default as BathtubIcon } from "./Bathtub"
+export { default as BedIcon } from "./Bed"
 export { default as BedDoubleIcon } from "./BedDouble"
 export { default as BedHotelIcon } from "./BedHotel"
 export { default as BedroomParentIcon } from "./BedroomParent"
@@ -40,14 +41,18 @@ export { default as CloseLargeIcon } from "./CloseLarge"
 export { default as CoffeeIcon } from "./Coffee"
 export { default as CoffeeAltIcon } from "./CoffeeAlt"
 export { default as CoffeeMakerIcon } from "./CoffeeMaker"
+export { default as CoinIcon } from "./Coin"
 export { default as ConciergeIcon } from "./Concierge"
 export { default as ContractIcon } from "./Contract"
 export { default as ConvenienceStore24hIcon } from "./ConvenienceStore24h"
 export { default as CoolIcon } from "./Cool"
 export { default as CreditCard } from "./CreditCard"
 export { default as CreditCardAddIcon } from "./CreditCardAdd"
+export { default as CroissantCoffeeEggIcon } from "./CroissantCoffeeEgg"
 export { default as CrossCircle } from "./CrossCircle"
 export { default as CulturalIcon } from "./Cultural"
+export { default as CutleryOneIcon } from "./CutleryOne"
+export { default as CutleryTwoIcon } from "./CutleryTwo"
 export { default as DeleteIcon } from "./Delete"
 export { default as DeskIcon } from "./Desk"
 export { default as DiningIcon } from "./Dining"
@@ -73,16 +78,19 @@ export { default as FootstoolIcon } from "./Footstool"
 export { default as GalleryIcon } from "./Gallery"
 export { default as GarageIcon } from "./Garage"
 export { default as GiftIcon } from "./Gift"
+export { default as GiftOpenIcon } from "./GiftOpen"
 export { default as GlobeIcon } from "./Globe"
 export { default as GolfIcon } from "./Golf"
 export { default as GroceriesIcon } from "./Groceries"
 export { default as HairdryerIcon } from "./Hairdryer"
+export { default as HandKeyIcon } from "./HandKey"
 export { default as HandSoapIcon } from "./HandSoap"
 export { default as HangerIcon } from "./Hanger"
 export { default as HangerAltIcon } from "./HangerAlt"
 export { default as HealthBeautyIcon } from "./HealthBeauty"
 export { default as HeartIcon } from "./Heart"
 export { default as HeatIcon } from "./Heat"
+export { default as HotelNightIcon } from "./HotelNight"
 export { default as HouseIcon } from "./House"
 export { default as ImageIcon } from "./Image"
 export { default as InfoCircleIcon } from "./InfoCircle"
@@ -90,6 +98,8 @@ export { default as InstagramIcon } from "./Instagram"
 export { default as IronIcon } from "./Iron"
 export { default as KayakingIcon } from "./Kayaking"
 export { default as KettleIcon } from "./Kettle"
+export { default as KidsIcon } from "./Kids"
+export { default as KidsMocktailIcon } from "./KidsMocktail"
 export { default as KingBedIcon } from "./KingBed"
 export { default as KingBedSmallIcon } from "./KingBedSmall"
 export { default as LampIcon } from "./Lamp"
@@ -106,10 +116,12 @@ export { default as MarskiLogoIcon } from "./Logos/Marski"
 export { default as ScandicGoLogoIcon } from "./Logos/ScandicGoLogo"
 export { default as ScandicLogoIcon } from "./Logos/ScandicLogo"
 export { default as LuggageIcon } from "./Luggage"
+export { default as MagicWandIcon } from "./MagicWand"
 export { default as MapIcon } from "./Map"
 export { default as MicrowaveIcon } from "./Microwave"
 export { default as MinusIcon } from "./Minus"
 export { default as MirrorIcon } from "./Mirror"
+export { default as MoneyHandIcon } from "./MoneyHand"
 export { default as MuseumIcon } from "./Museum"
 export { default as NatureIcon } from "./Nature"
 export { default as NightlifeIcon } from "./Nightlife"
@@ -148,6 +160,7 @@ export { default as TripAdvisorIcon } from "./TripAdvisor"
 export { default as TshirtIcon } from "./Tshirt"
 export { default as TshirtWashIcon } from "./TshirtWash"
 export { default as TvCastingIcon } from "./TvCasting"
+export { default as VoucherIcon } from "./Voucher"
 export { default as WarningTriangle } from "./WarningTriangle"
 export { default as WheelchairIcon } from "./Wheelchair"
 export { default as WifiIcon } from "./Wifi"

components/MyPages/Surprises/Card.tsx

@@ -13,7 +13,7 @@ export default function Card({ title, children }: CardProps) {
   return (
     <div className={styles.content}>
       <Image
-        src="/_static/img/loyalty-award.png"
+        src="/_static/img/rewards/loyalty-award.png"
         width={113}
         height={125}
         alt={intl.formatMessage({ id: "Surprise!" })}

types/components/icon.ts

@@ -14,6 +14,7 @@ export enum IconName {
   Airplane = "Airplane",
   ArrowRight = "ArrowRight",
   Bar = "Bar",
+  Bed = "Bed",
   Biking = "Biking",
   Business = "Business",
   Calendar = "Calendar",
@@ -32,11 +33,15 @@ export enum IconName {
   Close = "Close",
   CloseLarge = "CloseLarge",
   CoffeeAlt = "CoffeeAlt",
+  Coin = "Coin",
   Concierge = "Concierge",
   ConvenienceStore24h = "ConvenienceStore24h",
   Cool = "Cool",
+  CroissantCoffeeEgg = "CroissantCoffeeEgg",
   CrossCircle = "CrossCircle",
   Cultural = "Cultural",
+  CutleryOne = "CutleryOne",
+  CutleryTwo = "CutleryTwo",
   DoorOpen = "DoorOpen",
   Dresser = "Dresser",
   ElectricBike = "ElectricBike",
@@ -52,25 +57,32 @@ export enum IconName {
   Gallery = "Gallery",
   Garage = "Garage",
   Gift = "Gift",
+  GiftOpen = "GiftOpen",
   Globe = "Globe",
   Golf = "Golf",
   Groceries = "Groceries",
   Hanger = "Hanger",
   HangerAlt = "HangerAlt",
+  HandKey = "HandKey",
+  KidsMocktail = "KidsMocktail",
   Heat = "Heat",
   House = "House",
+  HotelNight = "HotelNight",
   Image = "Image",
   InfoCircle = "InfoCircle",
   Instagram = "Instagram",
   Kayaking = "Kayaking",
   Kettle = "Kettle",
+  Kids = "Kids",
   Lamp = "Lamp",
   LaundryMachine = "LaundryMachine",
   LocalBar = "LocalBar",
   Location = "Location",
   Lock = "Lock",
+  MagicWand = "MagicWand",
   Map = "Map",
   Minus = "Minus",
+  MoneyHand = "MoneyHand",
   Museum = "Museum",
   Nature = "Nature",
   Nightlife = "Nightlife",
@@ -103,6 +115,7 @@ export enum IconName {
   Tshirt = "Tshirt",
   TshirtWash = "TshirtWash",
   TvCasting = "TvCasting",
+  Voucher = "Voucher",
   WarningTriangle = "WarningTriangle",
   Wifi = "Wifi",
 }

types/enums/rewards.ts

@@ -0,0 +1,31 @@
+export enum RewardId {
+  // Food & Beverage
+  TenPercentFood = "tier_10_percent_food_tier",
+  TwoForOneBreakfast = "tier_2_for_one_breakfast",
+  FifteenPercentFood = "tier_15_percent_food",
+  FreeKidsDrink = "tier_free_kids_drink",
+  FreeBreakfast = "tier_free_breakfast",
+
+  // Monetary Vouchers
+  Bonus50SEK = "tier_50_SEK_bonus_voucher",
+  Bonus75SEK = "tier_75_SEK_bonus_voucher",
+  Bonus100SEK = "tier_100_SEK_bonus_voucher",
+  Bonus150SEK = "tier_150_SEK_bonus_voucher",
+  Bonus200SEK = "tier_200_SEK_bonus_voucher",
+
+  // Hotel Perks
+  EarlyCheckin = "tier_early_checkin_tier",
+  LateCheckout = "tier_late_checkout",
+  FreeUpgrade = "tier_free_upgrade",
+  RoomGuarantee48H = "tier_48_h_room_guarantee",
+  // GymAccess = "tier_gym_access",
+
+  // Earning & Points
+  EarnRate25Percent = "tier_25_percent_earn_rate",
+  EarnRate50Percent = "tier_50_percent_earn_rate",
+  StayBoostForKids = "tier_stay_boost_for_kids",
+  MemberRate = "tier_member_rate",
+
+  // Special
+  YearlyExclusiveGift = "tier_yearly_exclusive_gift",
+}