Merged in fix/LOY-369-Redeem-tier-rewards (pull request #2822)

fix(LOY-369): Able to redeem tier rewards

* fix(LOY-369): able to redeem on site tier rewards

* fix(LOY-369): single mutation call

* fix(LOY-369): apply coupon check for all tier rewards


Approved-by: Linus Flood
Approved-by: Matilda Landström

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

@@ -2,7 +2,7 @@
 
 import { useRef, useState } from "react"
 
-import Title from "@scandic-hotels/design-system/Title"
+import { Typography } from "@scandic-hotels/design-system/Typography"
 import { trpc } from "@scandic-hotels/trpc/client"
 import { type Reward } from "@scandic-hotels/trpc/types/rewards"
 
@@ -75,14 +75,9 @@ export default function ClientCurrentRewards({
               <div className={styles.content}>
                 <RewardIcon rewardId={reward.reward_id} />
                 {showRedeem && <ScriptedRewardText reward={reward} />}
-                <Title
+                <Typography variant="Title/smLowCase">
-                  as="h4"
+                  <h4 className={styles.title}>{reward.label}</h4>
-                  level="h3"
+                </Typography>
-                  textAlign="center"
-                  textTransform="regular"
-                >
-                  {reward.label}
-                </Title>
                 {earliestExpirationDate ? (
                   <ExpirationDate expirationDate={earliestExpirationDate} />
                 ) : null}

apps/scandic-web/components/Blocks/DynamicContent/Rewards/CurrentRewards/current.module.css

@@ -24,6 +24,11 @@
   padding: var(--Spacing-x3);
 }
 
+.title {
+  color: var(--Text-Heading);
+  text-align: center;
+}
+
 .btnContainer {
   padding: 0 var(--Spacing-x3) var(--Spacing-x3);
 }

apps/scandic-web/components/Blocks/DynamicContent/Rewards/Redeem/index.tsx

@@ -11,8 +11,8 @@ import {
 import { useIntl } from "react-intl"
 
 import { logger } from "@scandic-hotels/common/logger"
+import { Button } from "@scandic-hotels/design-system/Button"
 import { MaterialIcon } from "@scandic-hotels/design-system/Icons/MaterialIcon"
-import { OldDSButton as Button } from "@scandic-hotels/design-system/OldDSButton"
 import { trpc } from "@scandic-hotels/trpc/client"
 
 import useLang from "@/hooks/useLang"
@@ -70,7 +70,12 @@ export default function Redeem({ reward, membershipNumber }: RedeemProps) {
       <DialogTrigger
         onOpenChange={(isOpen) => setAnimation(isOpen ? "visible" : "hidden")}
       >
-        <Button intent="primary" fullWidth>
+        <Button
+          variant="Tertiary"
+          size="Large"
+          typography="Body/Paragraph/mdBold"
+          className={styles.redeemButton}
+        >
           {reward.redeemLocation === "Non-redeemable"
             ? intl.formatMessage({
                 defaultMessage: "How to use",
@@ -79,6 +84,7 @@ export default function Redeem({ reward, membershipNumber }: RedeemProps) {
                 defaultMessage: "Open",
               })}
         </Button>
+        {animation !== "unmounted" && (
           <MotionOverlay
             className={styles.overlay}
             isExiting={animation === "hidden"}
@@ -138,6 +144,7 @@ export default function Redeem({ reward, membershipNumber }: RedeemProps) {
               </Dialog>
             </MotionModal>
           </MotionOverlay>
+        )}
       </DialogTrigger>
     </RedeemContext.Provider>
   )

apps/scandic-web/components/Blocks/DynamicContent/Rewards/Redeem/redeem.module.css

@@ -125,3 +125,7 @@
   display: grid;
   gap: var(--Spacing-x-half);
 }
+
+.redeemButton {
+  width: 100%;
+}

apps/scandic-web/components/Blocks/DynamicContent/Rewards/Redeem/useRedeemFlow.ts

@@ -5,7 +5,7 @@ import { createContext, useCallback, useContext, useEffect } from "react"
 import { logger } from "@scandic-hotels/common/logger"
 import { trpc } from "@scandic-hotels/trpc/client"
 
-import { getFirstRedeemableCoupon } from "@/utils/rewards"
+import { getFirstRedeemableCoupon, isTierType } from "@/utils/rewards"
 
 import type { Reward } from "@scandic-hotels/trpc/types/rewards"
 
@@ -34,9 +34,21 @@ export default function useRedeemFlow() {
 
   const onRedeem = useCallback(
     (reward: Reward) => {
+      let couponCode: string | undefined
+
+      if (isTierType(reward.rewardType)) {
+        couponCode = undefined
+      } else {
         const coupon = getFirstRedeemableCoupon(reward)
+        if (!coupon) {
+          logger.error("No redeemable coupon found for reward", reward)
+          return
+        }
+        couponCode = coupon.couponCode
+      }
+
       update.mutate(
-        { rewardId: reward.id, couponCode: coupon.couponCode },
+        { rewardId: reward.id, couponCode },
         {
           onSuccess() {
             setRedeemStep("redeemed")