feat(LOY-154): add expiration date to rewards

apps/scandic-web/components/Blocks/DynamicContent/Rewards/CurrentRewards/Client.tsx

@@ -7,9 +7,11 @@ import { trpc } from "@/lib/trpc/client"
 import { RewardIcon } from "@/components/Blocks/DynamicContent/Rewards/RewardIcon"
 import ScriptedRewardText from "@/components/Blocks/DynamicContent/Rewards/ScriptedRewardText"
 import Pagination from "@/components/MyPages/Pagination"
+import ExpirationDate from "@/components/Rewards/ExpirationDate"
 import Grids from "@/components/TempDesignSystem/Grids"
 import Title from "@/components/TempDesignSystem/Text/Title"
 import useLang from "@/hooks/useLang"
+import { getEarliestExpirationDate } from "@/utils/rewards"
 
 import Redeem from "../Redeem"
 
@@ -67,32 +69,44 @@ export default function ClientCurrentRewards({
   return (
     <div ref={containerRef} className={styles.container}>
       <Grids.Stackable>
-        {currentRewards.map((reward, idx) => (
-          <article className={styles.card} key={`${reward.reward_id}-${idx}`}>
-            <div className={styles.content}>
-              <RewardIcon rewardId={reward.reward_id} />
-              {showRedeem && (
-                <ScriptedRewardText
-                  rewardType={reward.rewardType}
-                  rewardTierLevel={reward.rewardTierLevel}
-                />
-              )}
-              <Title
-                as="h4"
-                level="h3"
-                textAlign="center"
-                textTransform="regular"
-              >
-                {reward.label}
-              </Title>
-            </div>
-            {showRedeem && "redeem_description" in reward && (
-              <div className={styles.btnContainer}>
-                <Redeem reward={reward} membershipNumber={membershipNumber} />
+        {currentRewards.map((reward, idx) => {
+          const earliestExpirationDate =
+            "coupons" in reward
+              ? getEarliestExpirationDate(reward.coupons)
+              : null
+
+          return (
+            <article className={styles.card} key={`${reward.reward_id}-${idx}`}>
+              <div className={styles.content}>
+                <RewardIcon rewardId={reward.reward_id} />
+                {showRedeem && (
+                  <ScriptedRewardText
+                    rewardType={reward.rewardType}
+                    rewardTierLevel={reward.rewardTierLevel}
+                  />
+                )}
+                <Title
+                  as="h4"
+                  level="h3"
+                  textAlign="center"
+                  textTransform="regular"
+                >
+                  {reward.label}
+                </Title>
+
+                {earliestExpirationDate ? (
+                  <ExpirationDate expirationDate={earliestExpirationDate} />
+                ) : null}
               </div>
-            )}
-          </article>
-        ))}
+
+              {showRedeem && "redeem_description" in reward && (
+                <div className={styles.btnContainer}>
+                  <Redeem reward={reward} membershipNumber={membershipNumber} />
+                </div>
+              )}
+            </article>
+          )
+        })}
       </Grids.Stackable>
       {totalPages > 1 && (
         <Pagination

apps/scandic-web/components/MyPages/Surprises/Slide.tsx

@@ -1,51 +1,19 @@
-import { useIntl } from "react-intl"
-
-import { dt } from "@/lib/dt"
-
+import ExpirationDate from "@/components/Rewards/ExpirationDate"
 import Body from "@/components/TempDesignSystem/Text/Body"
-import Caption from "@/components/TempDesignSystem/Text/Caption"
-import useLang from "@/hooks/useLang"
+import { getEarliestExpirationDate } from "@/utils/rewards"
 
 import Card from "./Card"
 
-import styles from "./surprises.module.css"
-
-import type { Dayjs } from "dayjs"
-
 import type { SlideProps } from "@/types/components/blocks/surprises"
 
 export default function Slide({ surprise }: SlideProps) {
-  const lang = useLang()
-  const intl = useIntl()
-
-  const earliestExpirationDate = surprise.coupons
-    .map(({ expiresAt }) => expiresAt)
-    .filter((expiresAt): expiresAt is string => !!expiresAt)
-    .reduce((earliestDate: Dayjs | null, expiresAt) => {
-      const expiresAtDate = dt(expiresAt)
-      if (!earliestDate) {
-        return expiresAtDate
-      }
-
-      return earliestDate.isBefore(expiresAtDate) ? earliestDate : expiresAtDate
-    }, null)
+  const earliestExpirationDate = getEarliestExpirationDate(surprise.coupons)
 
   return (
     <Card title={surprise.label}>
       <Body textAlign="center">{surprise.description}</Body>
       {earliestExpirationDate ? (
-        <div className={styles.badge}>
-          <Caption>
-            {intl.formatMessage(
-              { id: "Valid through {expirationDate}" },
-              {
-                expirationDate: dt(earliestExpirationDate)
-                  .locale(lang)
-                  .format("D MMM YYYY"),
-              }
-            )}
-          </Caption>
-        </div>
+        <ExpirationDate expirationDate={earliestExpirationDate} />
       ) : null}
     </Card>
   )

apps/scandic-web/components/MyPages/Surprises/surprises.module.css

@@ -125,16 +125,6 @@
   transform: rotate(180deg);
 }
 
-.badge {
-  padding: var(--Spacing-x1) var(--Spacing-x-one-and-half);
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  gap: var(--Spacing-x-half);
-  background-color: var(--Base-Surface-Secondary-light-Normal);
-  border-radius: var(--Corner-radius-Small);
-}
-
 .close {
   background: none;
   border: none;

apps/scandic-web/components/Rewards/ExpirationDate/expirationDate.module.css

@@ -0,0 +1,9 @@
+.badge {
+  padding: var(--Spacing-x1) var(--Spacing-x-one-and-half);
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: var(--Spacing-x-half);
+  background-color: var(--Base-Surface-Secondary-light-Normal);
+  border-radius: var(--Corner-radius-Small);
+}

apps/scandic-web/components/Rewards/ExpirationDate/index.tsx

@@ -0,0 +1,36 @@
+"use client"
+
+import { useIntl } from "react-intl"
+
+import { dt } from "@/lib/dt"
+
+import Body from "@/components/TempDesignSystem/Text/Body"
+import useLang from "@/hooks/useLang"
+
+import styles from "./expirationDate.module.css"
+
+import type { Dayjs } from "dayjs"
+
+export default function ExpirationDate({
+  expirationDate,
+}: {
+  expirationDate: Dayjs | string
+}) {
+  const intl = useIntl()
+  const lang = useLang()
+
+  return (
+    <div className={styles.badge}>
+      <Body textTransform="bold">
+        {intl.formatMessage(
+          { id: "Valid through {expirationDate}" },
+          {
+            expirationDate: dt(expirationDate)
+              .locale(lang)
+              .format("D MMM YYYY"),
+          }
+        )}
+      </Body>
+    </div>
+  )
+}

apps/scandic-web/server/routers/contentstack/reward/output.ts

@@ -212,6 +212,7 @@ export type Reward = CMSReward & {
   rewardTierLevel: string | undefined
   operaRewardId: string
   couponCode: string | undefined
+  coupons: Coupon[]
 }
 
 export type RewardWithRedeem = CMSRewardWithRedeem & {
@@ -221,10 +222,18 @@ export type RewardWithRedeem = CMSRewardWithRedeem & {
   rewardTierLevel: string | undefined
   operaRewardId: string
   couponCode: string | undefined
+  coupons: Coupon[]
+}
+
+export interface Coupon {
+  couponCode?: string
+  expiresAt?: string
+  unwrapped: boolean
+  state: "claimed" | "redeemed" | "viewed"
 }
 
 export interface Surprise extends Omit<Reward, "operaRewardId" | "couponCode"> {
-  coupons: { couponCode?: string | undefined; expiresAt?: string }[]
+  coupons: Coupon[]
 }
 
 // New endpoint related types and schemas.

apps/scandic-web/server/routers/contentstack/reward/query.ts

@@ -287,6 +287,8 @@ export const rewardQueryRouter = router({
                 ? apiReward.operaRewardId
                 : "",
             couponCode: firstRedeemableCouponToExpire,
+            coupons:
+              apiReward && "coupon" in apiReward ? apiReward.coupon || [] : [],
           }
         })
 

apps/scandic-web/utils/rewards.ts

@@ -3,49 +3,74 @@ import {
   REWARD_IDS,
   REWARD_TYPES,
 } from "@/constants/rewards"
+import { dt } from "@/lib/dt"
+
+import type { Dayjs } from "dayjs"
 
 import type {
   RestaurantRewardId,
   RewardId,
   RewardType,
 } from "@/types/components/myPages/rewards"
-import type { RewardWithRedeem } from "@/server/routers/contentstack/reward/output"
+import type {
+  Coupon,
+  RewardWithRedeem,
+} from "@/server/routers/contentstack/reward/output"
 
-export function isValidRewardId(id: string): id is RewardId {
+export {
+  getEarliestExpirationDate,
+  getRewardType,
+  isOnSiteTierReward,
+  isRestaurantOnSiteTierReward,
+  isRestaurantReward,
+  isTierType,
+  isValidRewardId,
+  redeemLocationIsOnSite,
+}
+
+function isValidRewardId(id: string): id is RewardId {
   return Object.values<string>(REWARD_IDS).includes(id)
 }
 
-export function isRestaurantReward(
-  rewardId: string
-): rewardId is RestaurantRewardId {
+function isRestaurantReward(rewardId: string): rewardId is RestaurantRewardId {
   return RESTAURANT_REWARD_IDS.some((id) => id === rewardId)
 }
 
-export function redeemLocationIsOnSite(
+function redeemLocationIsOnSite(
   location: RewardWithRedeem["redeemLocation"]
 ): location is "On-site" {
   return location === "On-site"
 }
 
-export function isTierType(
-  type: RewardWithRedeem["rewardType"]
-): type is "Tier" {
+function isTierType(type: RewardWithRedeem["rewardType"]): type is "Tier" {
   return type === "Tier"
 }
 
-export function isOnSiteTierReward(reward: RewardWithRedeem): boolean {
+function isOnSiteTierReward(reward: RewardWithRedeem): boolean {
   return (
     redeemLocationIsOnSite(reward.redeemLocation) &&
     isTierType(reward.rewardType)
   )
 }
 
-export function isRestaurantOnSiteTierReward(
-  reward: RewardWithRedeem
-): boolean {
+function isRestaurantOnSiteTierReward(reward: RewardWithRedeem): boolean {
   return isOnSiteTierReward(reward) && isRestaurantReward(reward.reward_id)
 }
 
-export function getRewardType(type?: string): RewardType | null {
+function getRewardType(type?: string): RewardType | null {
   return REWARD_TYPES.find((t) => t === type) ?? null
 }
+
+function getEarliestExpirationDate(coupons: Coupon[]) {
+  return coupons
+    .map(({ expiresAt }) => expiresAt)
+    .filter((expiresAt): expiresAt is string => !!expiresAt)
+    .reduce((earliestDate: Dayjs | null, expiresAt) => {
+      const expiresAtDate = dt(expiresAt)
+      if (!earliestDate) {
+        return expiresAtDate
+      }
+
+      return earliestDate.isBefore(expiresAtDate) ? earliestDate : expiresAtDate
+    }, null)
+}