feat(LOY-62): Add ScriptedRewardText component

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

@@ -0,0 +1,56 @@
+import { useIntl } from "react-intl"
+
+import {
+  isMembershipLevel,
+  MembershipLevelEnum,
+} from "@/constants/membershipLevels"
+
+import BiroScript from "@/components/TempDesignSystem/Text/BiroScript"
+
+import type { ScriptedRewardTextProps } from "@/types/components/myPages/myPage/accountPage"
+
+const TIER_TO_FRIEND_MAP: Record<MembershipLevelEnum, string> = {
+  [MembershipLevelEnum.L1]: "New Friend",
+  [MembershipLevelEnum.L2]: "Good Friend",
+  [MembershipLevelEnum.L3]: "Close Friend",
+  [MembershipLevelEnum.L4]: "Dear Friend",
+  [MembershipLevelEnum.L5]: "Loyal Friend",
+  [MembershipLevelEnum.L6]: "True Friend",
+  [MembershipLevelEnum.L7]: "Best Friend",
+}
+
+export default function ScriptedRewardText({
+  rewardType,
+  rewardTierLevel,
+}: ScriptedRewardTextProps) {
+  const intl = useIntl()
+
+  let label: string | null = null
+
+  switch (rewardType) {
+    case "Tier":
+      if (rewardTierLevel && isMembershipLevel(rewardTierLevel)) {
+        label = TIER_TO_FRIEND_MAP[rewardTierLevel]
+      }
+      break
+
+    case "Campaign":
+      label = intl.formatMessage({ id: "Campaign" })
+      break
+
+    case "Surprise":
+      label = intl.formatMessage({ id: "Surprise!" })
+      break
+
+    // TODO: Add Voucher type
+
+    default:
+      label = null
+  }
+
+  return (
+    <BiroScript type="two" color="red" tilted="small">
+      {label}
+    </BiroScript>
+  )
+}