feat(LOY-62): Add ScriptedRewardText component

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

@@ -0,0 +1,98 @@
+"use client"
+
+import { trpc } from "@/lib/trpc/client"
+import { Reward } from "@/server/routers/contentstack/reward/output"
+
+import Image from "@/components/Image"
+import LoadingSpinner from "@/components/LoadingSpinner"
+import Grids from "@/components/TempDesignSystem/Grids"
+import ShowMoreButton from "@/components/TempDesignSystem/ShowMoreButton"
+import Title from "@/components/TempDesignSystem/Text/Title"
+import useLang from "@/hooks/useLang"
+
+import ScriptedRewardText from "../ScriptedRewardText"
+import Redeem from "./Redeem"
+
+import styles from "./current.module.css"
+
+import type { CurrentRewardsClientProps } from "@/types/components/myPages/myPage/accountPage"
+
+export default function ClientCurrentRewards({
+  initialCurrentRewards,
+  showRedeem,
+}: CurrentRewardsClientProps) {
+  const lang = useLang()
+  const { data, isFetching, fetchNextPage, hasNextPage, isLoading } =
+    trpc.contentstack.rewards.current.useInfiniteQuery(
+      {
+        limit: 3,
+        lang,
+      },
+      {
+        getNextPageParam: (lastPage) => lastPage?.nextCursor,
+        initialData: {
+          pageParams: [undefined, 1],
+          pages: [initialCurrentRewards],
+        },
+      }
+    )
+  function loadMoreData() {
+    if (hasNextPage) {
+      fetchNextPage()
+    }
+  }
+  const filteredRewards = data?.pages.filter((page) => page?.rewards) ?? []
+  const rewards = filteredRewards
+    .flatMap((page) => page?.rewards)
+    .filter((reward): reward is Reward => !!reward)
+
+  if (isLoading) {
+    return <LoadingSpinner />
+  }
+
+  if (!rewards.length) {
+    return null
+  }
+
+  return (
+    <div>
+      <Grids.Stackable>
+        {rewards.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 || ""}
+              />
+              <ScriptedRewardText
+                rewardType={reward.rewardType}
+                rewardTierLevel={reward.rewardTierLevel}
+              />
+              <Title
+                as="h4"
+                level="h3"
+                textAlign="center"
+                textTransform="regular"
+              >
+                {reward.label}
+              </Title>
+            </div>
+            {showRedeem && (
+              <div className={styles.btnContainer}>
+                <Redeem reward={reward} />
+              </div>
+            )}
+          </article>
+        ))}
+      </Grids.Stackable>
+      {hasNextPage &&
+        (isFetching ? (
+          <LoadingSpinner />
+        ) : (
+          <ShowMoreButton loadMoreData={loadMoreData} />
+        ))}
+    </div>
+  )
+}

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

constants/membershipLevels.ts

@@ -18,4 +18,10 @@ export enum MembershipLevelEnum {
   L7 = "L7",
 }
 
+export function isMembershipLevel(value: string): value is MembershipLevelEnum {
+  return Object.values(MembershipLevelEnum).includes(
+    value as MembershipLevelEnum
+  )
+}
+
 export type MembershipLevel = keyof typeof MembershipLevelEnum

i18n/dictionaries/da.json

@@ -73,6 +73,7 @@
   "By accepting the <termsAndConditionsLink>Terms and Conditions for Scandic Friends</termsAndConditionsLink> I understand that my personal data will be processed in accordance with <privacyPolicy>Scandic's Privacy Policy</privacyPolicy>.": "Ved at acceptere <termsAndConditionsLink>vilkårene og betingelserne for Scandic Friends</termsAndConditionsLink>, forstår jeg, at mine personlige oplysninger vil blive behandlet i overensstemmelse med <privacyPolicy>Scandics privatlivspolitik</privacyPolicy>.",
   "By paying with any of the payment methods available, I accept the terms for this booking and the general <termsAndConditionsLink>Terms & Conditions</termsAndConditionsLink>, and understand that Scandic will process my personal data for this booking in accordance with <privacyPolicyLink>Scandic's Privacy policy</privacyPolicyLink>. I also accept that Scandic require a valid credit card during my visit in case anything is left unpaid.": "Ved at betale med en af de tilgængelige betalingsmetoder, accepterer jeg vilkårene for denne booking og de generelle <termsAndConditionsLink>Vilkår og betingelser</termsAndConditionsLink>, og forstår, at Scandic vil behandle min personlige data i forbindelse med denne booking i henhold til <privacyPolicyLink>Scandics Privatlivspolitik</privacyPolicyLink>. Jeg accepterer, at Scandic kræver et gyldigt kreditkort under min besøg i tilfælde af, at noget er tilbagebetalt.",
   "By signing up you accept the Scandic Friends <termsAndConditionsLink>Terms and Conditions</termsAndConditionsLink>. Your membership is valid until further notice, and you can terminate your membership at any time by sending an email to Scandic's customer service": "Ved at tilmelde dig accepterer du Scandic Friends <termsAndConditionsLink>vilkår og betingelser</termsAndConditionsLink>. Dit medlemskab er gyldigt indtil videre, og du kan til enhver tid opsige dit medlemskab ved at sende en e-mail til Scandics kundeservice",
+  "Campaign": "Kampagne",
   "Cancel": "Afbestille",
   "Change room": "Skift værelse",
   "Check in": "Check ind",

i18n/dictionaries/de.json

@@ -73,6 +73,7 @@
   "By accepting the <termsAndConditionsLink>Terms and Conditions for Scandic Friends</termsAndConditionsLink> I understand that my personal data will be processed in accordance with <privacyPolicy>Scandic's Privacy Policy</privacyPolicy>.": "Mit der Annahme der <termsAndConditionsLink>Allgemeinen Geschäftsbedingungen für Scandic Friends</termsAndConditionsLink> erkläre ich mich damit einverstanden, dass meine persönlichen Daten in Übereinstimmung mit der <privacyPolicy>Datenschutzrichtlinie von Scandic verarbeitet werden</privacyPolicy>.",
   "By paying with any of the payment methods available, I accept the terms for this booking and the general <termsAndConditionsLink>Terms & Conditions</termsAndConditionsLink>, and understand that Scandic will process my personal data for this booking in accordance with <privacyPolicyLink>Scandic's Privacy policy</privacyPolicyLink>. I also accept that Scandic require a valid credit card during my visit in case anything is left unpaid.": "Mit der Zahlung über eine der verfügbaren Zahlungsmethoden akzeptiere ich die Buchungsbedingungen und die allgemeinen <termsAndConditionsLink>Geschäftsbedingungen</termsAndConditionsLink> und verstehe, dass Scandic meine personenbezogenen Daten im Zusammenhang mit dieser Buchung gemäß der <privacyPolicyLink>Scandic Datenschutzrichtlinie</privacyPolicyLink> verarbeitet. Ich akzeptiere, dass Scandic während meines Aufenthalts eine gültige Kreditkarte für eventuelle Rückerstattungen benötigt.",
   "By signing up you accept the Scandic Friends <termsAndConditionsLink>Terms and Conditions</termsAndConditionsLink>. Your membership is valid until further notice, and you can terminate your membership at any time by sending an email to Scandic's customer service": "Mit Ihrer Anmeldung akzeptieren Sie die <termsAndConditionsLink>Allgemeinen Geschäftsbedingungen</termsAndConditionsLink> von Scandic Friends. Ihre Mitgliedschaft ist bis auf Weiteres gültig und Sie können sie jederzeit kündigen, indem Sie eine E-Mail an den Kundenservice von Scandic senden.",
+  "Campaign": "Kampagne",
   "Cancel": "Stornieren",
   "Change room": "Zimmer ändern",
   "Check in": "Einchecken",

i18n/dictionaries/en.json

@@ -76,6 +76,7 @@
   "By accepting the <termsAndConditionsLink>Terms and Conditions for Scandic Friends</termsAndConditionsLink> I understand that my personal data will be processed in accordance with <privacyPolicy>Scandic's Privacy Policy</privacyPolicy>.": "By accepting the <termsAndConditionsLink>Terms and Conditions for Scandic Friends</termsAndConditionsLink> I understand that my personal data will be processed in accordance with <privacyPolicy>Scandic's Privacy Policy</privacyPolicy>.",
   "By paying with any of the payment methods available, I accept the terms for this booking and the general <termsAndConditionsLink>Terms & Conditions</termsAndConditionsLink>, and understand that Scandic will process my personal data for this booking in accordance with <privacyPolicyLink>Scandic's Privacy policy</privacyPolicyLink>. I also accept that Scandic require a valid credit card during my visit in case anything is left unpaid.": "By paying with any of the payment methods available, I accept the terms for this booking and the general <termsAndConditionsLink>Terms & Conditions</termsAndConditionsLink>, and understand that Scandic will process my personal data for this booking in accordance with <privacyPolicyLink>Scandic's Privacy policy</privacyPolicyLink>. I also accept that Scandic require a valid credit card during my visit in case anything is left unpaid.",
   "By signing up you accept the Scandic Friends <termsAndConditionsLink>Terms and Conditions</termsAndConditionsLink>. Your membership is valid until further notice, and you can terminate your membership at any time by sending an email to Scandic's customer service": "By signing up you accept the Scandic Friends <termsAndConditionsLink>Terms and Conditions</termsAndConditionsLink>. Your membership is valid until further notice, and you can terminate your membership at any time by sending an email to Scandic's customer service",
+  "Campaign": "Campaign",
   "Cancel": "Cancel",
   "Cancellation policy": "Cancellation policy",
   "Change room": "Change room",

i18n/dictionaries/fi.json

@@ -73,6 +73,7 @@
   "By accepting the <termsAndConditionsLink>Terms and Conditions for Scandic Friends</termsAndConditionsLink> I understand that my personal data will be processed in accordance with <privacyPolicy>Scandic's Privacy Policy</privacyPolicy>.": "Kyllä, <termsAndConditionsLink>hyväksyn Scandic Friends -jäsenyyttä</termsAndConditionsLink> koskevat ehdot ja ymmärrän, että Scandic käsittelee henkilötietojani <privacyPolicy>Scandicin Tietosuojaselosteen mukaisesti</privacyPolicy>.",
   "By paying with any of the payment methods available, I accept the terms for this booking and the general <termsAndConditionsLink>Terms & Conditions</termsAndConditionsLink>, and understand that Scandic will process my personal data for this booking in accordance with <privacyPolicyLink>Scandic's Privacy policy</privacyPolicyLink>. I also accept that Scandic require a valid credit card during my visit in case anything is left unpaid.": "Maksamalla minkä tahansa saatavilla olevan maksutavan avulla hyväksyn tämän varauksen ehdot ja yleiset <termsAndConditionsLink>ehdot ja ehtoja</termsAndConditionsLink>, ja ymmärrän, että Scandic käsittelee minun henkilötietoni tässä varauksessa mukaisesti <privacyPolicyLink>Scandicin tietosuojavaltuuden</privacyPolicyLink> mukaisesti. Hyväksyn myös, että Scandic vaatii validin luottokortin majoituksen ajan, jos jokin jää maksamatta.",
   "By signing up you accept the Scandic Friends <termsAndConditionsLink>Terms and Conditions</termsAndConditionsLink>. Your membership is valid until further notice, and you can terminate your membership at any time by sending an email to Scandic's customer service": "Rekisteröitymällä hyväksyt Scandic Friendsin <termsAndConditionsLink>käyttöehdot</termsAndConditionsLink>. Jäsenyytesi on voimassa toistaiseksi ja voit lopettaa jäsenyytesi milloin tahansa lähettämällä sähköpostia Scandicin asiakaspalveluun",
+  "Campaign": "Kampanja",
   "Cancel": "Peruuttaa",
   "Change room": "Vaihda huonetta",
   "Check in": "Sisäänkirjautuminen",

i18n/dictionaries/no.json

@@ -73,6 +73,7 @@
   "By accepting the <termsAndConditionsLink>Terms and Conditions for Scandic Friends</termsAndConditionsLink> I understand that my personal data will be processed in accordance with <privacyPolicy>Scandic's Privacy Policy</privacyPolicy>.": "Ved å akseptere <termsAndConditionsLink>vilkårene og betingelsene for Scandic Friends</termsAndConditionsLink>, er jeg inneforstått med at mine personopplysninger vil bli behandlet i samsvar med <privacyPolicy>Scandics personvernpolicy</privacyPolicy>.",
   "By paying with any of the payment methods available, I accept the terms for this booking and the general <termsAndConditionsLink>Terms & Conditions</termsAndConditionsLink>, and understand that Scandic will process my personal data for this booking in accordance with <privacyPolicyLink>Scandic's Privacy policy</privacyPolicyLink>. I also accept that Scandic require a valid credit card during my visit in case anything is left unpaid.": "Ved å betale med en av de tilgjengelige betalingsmetodene godtar jeg vilkårene og betingelsene for denne bestillingen og de generelle <termsAndConditionsLink>vilkårene</termsAndConditionsLink>, og forstår at Scandic vil behandle mine personopplysninger i forbindelse med denne bestillingen i henhold til <privacyPolicyLink> Scandics personvernpolicy</privacyPolicyLink>. Jeg aksepterer at Scandic krever et gyldig kredittkort under mitt besøk i tilfelle noe blir refundert.",
   "By signing up you accept the Scandic Friends <termsAndConditionsLink>Terms and Conditions</termsAndConditionsLink>. Your membership is valid until further notice, and you can terminate your membership at any time by sending an email to Scandic's customer service": "Ved å registrere deg godtar du Scandic Friends <termsAndConditionsLink>vilkår og betingelser</termsAndConditionsLink>. Medlemskapet ditt er gyldig inntil videre, og du kan si opp medlemskapet ditt når som helst ved å sende en e-post til Scandics kundeservice",
+  "Campaign": "Kampanje",
   "Cancel": "Avbryt",
   "Change room": "Endre rom",
   "Check in": "Sjekk inn",

i18n/dictionaries/sv.json

@@ -73,6 +73,7 @@
   "By accepting the <termsAndConditionsLink>Terms and Conditions for Scandic Friends</termsAndConditionsLink> I understand that my personal data will be processed in accordance with <privacyPolicy>Scandic's Privacy Policy</privacyPolicy>.": "Genom att acceptera <termsAndConditionsLink>villkoren för Scandic Friends</termsAndConditionsLink> förstår jag att mina personuppgifter kommer att behandlas i enlighet med <privacyPolicy>Scandics Integritetspolicy</privacyPolicy>.",
   "By paying with any of the payment methods available, I accept the terms for this booking and the general <termsAndConditionsLink>Terms & Conditions</termsAndConditionsLink>, and understand that Scandic will process my personal data for this booking in accordance with <privacyPolicyLink>Scandic's Privacy policy</privacyPolicyLink>. I also accept that Scandic require a valid credit card during my visit in case anything is left unpaid.": "Genom att betala med någon av de tillgängliga betalningsmetoderna accepterar jag villkoren för denna bokning och de generella <termsAndConditionsLink>Villkoren och villkoren</termsAndConditionsLink>, och förstår att Scandic kommer att behandla min personliga data i samband med denna bokning i enlighet med <privacyPolicyLink>Scandics integritetspolicy</privacyPolicyLink>. Jag accepterar att Scandic kräver ett giltigt kreditkort under min besök i fall att något är tillbaka betalt.",
   "By signing up you accept the Scandic Friends <termsAndConditionsLink>Terms and Conditions</termsAndConditionsLink>. Your membership is valid until further notice, and you can terminate your membership at any time by sending an email to Scandic's customer service": "Genom att registrera dig accepterar du Scandic Friends <termsAndConditionsLink>Användarvillkor</termsAndConditionsLink>. Ditt medlemskap gäller tills vidare och du kan när som helst säga upp ditt medlemskap genom att skicka ett mejl till Scandics kundtjänst",
+  "Campaign": "Kampanj",
   "Cancel": "Avbryt",
   "Change room": "Ändra rum",
   "Check in": "Checka in",

server/routers/contentstack/reward/output.ts

@@ -166,6 +166,7 @@ export type Reward = CMSReward & {
   id: string | undefined
   rewardType: string | undefined
   redeemLocation: string | undefined
+  rewardTierLevel: string | undefined
   operaRewardId: string
 }
 
@@ -173,6 +174,7 @@ export type RewardWithRedeem = CMSRewardWithRedeem & {
   id: string | undefined
   rewardType: string | undefined
   redeemLocation: string | undefined
+  rewardTierLevel: string | undefined
   operaRewardId: string
 }
 

server/routers/contentstack/reward/query.ts

@@ -257,6 +257,10 @@ export const rewardQueryRouter = router({
           id: apiReward?.id,
           rewardType: apiReward?.rewardType,
           redeemLocation: apiReward?.redeemLocation,
+          rewardTierLevel:
+            apiReward && "rewardTierLevel" in apiReward
+              ? apiReward.rewardTierLevel
+              : undefined,
           operaRewardId:
             apiReward && "operaRewardId" in apiReward
               ? apiReward.operaRewardId

types/components/myPages/myPage/accountPage.ts

@@ -35,6 +35,11 @@ export interface RedeemProps {
   membershipNumber?: string | null
 }
 
+export interface ScriptedRewardTextProps {
+  rewardType?: string
+  rewardTierLevel?: string
+}
+
 export type RedeemModalState = "unmounted" | "hidden" | "visible"
 
 export type RedeemStep = "initial" | "confirmation" | "redeemed"