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