fix(LOY-10): provide fallback icon for current rewards

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

@@ -1,42 +1,68 @@
 import { FC } from "react"
 
 import { getIconByIconName } from "@/components/Icons/get-icon-by-icon-name"
+import { isValidRewardId } from "@/utils/rewards"
 
-import { IconName , IconProps } from "@/types/components/icon"
+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,
+function getIconForRewardId(rewardId: RewardId): IconName {
+  switch (rewardId) {
+    // Food & beverage
+    case RewardId.TenPercentFood:
+    case RewardId.FifteenPercentFood:
+      return IconName.CroissantCoffeeEgg
+    case RewardId.TwoForOneBreakfast:
+      return IconName.CutleryTwo
+    case RewardId.FreeBreakfast:
+      return IconName.CutleryOne
+    case RewardId.FreeKidsDrink:
+      return 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,
+    // Monetary vouchers
+    case RewardId.Bonus50SEK:
+    case RewardId.Bonus75SEK:
+    case RewardId.Bonus100SEK:
+    case RewardId.Bonus150SEK:
+    case RewardId.Bonus200SEK:
+      return IconName.Voucher
 
-  // Hotel perks.
-  [RewardId.EarlyCheckin]: IconName.HandKey,
-  [RewardId.LateCheckout]: IconName.HotelNight,
-  [RewardId.FreeUpgrade]: IconName.MagicWand,
-  [RewardId.RoomGuarantee48H]: IconName.Bed,
+    // Hotel perks
+    case RewardId.EarlyCheckin:
+      return IconName.HandKey
+    case RewardId.LateCheckout:
+      return IconName.HotelNight
+    case RewardId.FreeUpgrade:
+      return IconName.MagicWand
+    case RewardId.RoomGuarantee48H:
+      return IconName.Bed
 
-  // Earnings.
-  [RewardId.EarnRate25Percent]: IconName.MoneyHand,
-  [RewardId.EarnRate50Percent]: IconName.MoneyHand,
-  [RewardId.StayBoostForKids]: IconName.Kids,
-  [RewardId.MemberRate]: IconName.Coin,
+    // Earnings
+    case RewardId.EarnRate25Percent:
+    case RewardId.EarnRate50Percent:
+      return IconName.MoneyHand
+    case RewardId.StayBoostForKids:
+      return IconName.Kids
+    case RewardId.MemberRate:
+      return IconName.Coin
 
-  // Special
-  [RewardId.YearlyExclusiveGift]: IconName.GiftOpen,
+    // Special
+    case RewardId.YearlyExclusiveGift:
+      return IconName.GiftOpen
+
+    default: {
+      const unhandledRewardId: never = rewardId
+      return IconName.GiftOpen
+    }
+  }
 }
 
 export function mapRewardToIcon(rewardId: string): FC<IconProps> | null {
-  const iconName = rewardToIconMap[rewardId as RewardId]
-  return getIconByIconName(iconName) || null
+  if (!isValidRewardId(rewardId)) {
+    // TODO: Update once UX has decided on fallback icon.
+    return getIconByIconName(IconName.GiftOpen)
+  }
+
+  const iconName = getIconForRewardId(rewardId)
+  return getIconByIconName(iconName)
 }

utils/rewards.ts

@@ -0,0 +1,5 @@
+import { RewardId } from "@/types/enums/rewards"
+
+export function isValidRewardId(id: string): id is RewardId {
+  return Object.values(RewardId).includes(id as RewardId)
+}