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
-                  as="h4"
-                  level="h3"
-                  textAlign="center"
-                  textTransform="regular"
-                >
-                  {reward.label}
-                </Title>
+                <Typography variant="Title/smLowCase">
+                  <h4 className={styles.title}>{reward.label}</h4>
+                </Typography>
                 {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,65 +84,67 @@ export default function Redeem({ reward, membershipNumber }: RedeemProps) {
                 defaultMessage: "Open",
               })}
         </Button>
-        <MotionOverlay
-          className={styles.overlay}
-          isExiting={animation === "hidden"}
-          onAnimationComplete={modalStateHandler}
-          variants={variants.fade}
-          initial="hidden"
-          animate={animation}
-        >
-          <MotionModal
-            className={styles.modal}
-            variants={variants.slideInOut}
+        {animation !== "unmounted" && (
+          <MotionOverlay
+            className={styles.overlay}
+            isExiting={animation === "hidden"}
+            onAnimationComplete={modalStateHandler}
+            variants={variants.fade}
             initial="hidden"
             animate={animation}
           >
-            <Dialog className={styles.dialog} aria-label={reward.label}>
-              {({ close }) => {
-                function closeModal() {
-                  if (
-                    redeemStep === "redeemed" ||
-                    redeemStep === "confirm-close"
-                  ) {
-                    utils.contentstack.rewards.current.invalidate({
-                      lang,
-                    })
+            <MotionModal
+              className={styles.modal}
+              variants={variants.slideInOut}
+              initial="hidden"
+              animate={animation}
+            >
+              <Dialog className={styles.dialog} aria-label={reward.label}>
+                {({ close }) => {
+                  function closeModal() {
+                    if (
+                      redeemStep === "redeemed" ||
+                      redeemStep === "confirm-close"
+                    ) {
+                      utils.contentstack.rewards.current.invalidate({
+                        lang,
+                      })
+                    }
+                    close()
                   }
-                  close()
-                }
-                return (
-                  <>
-                    <header className={styles.modalHeader}>
-                      <button
-                        onClick={() => {
-                          if (
-                            redeemStep === "redeemed" &&
-                            !isRestaurantOnSiteTierReward(reward)
-                          ) {
-                            setRedeemStep("confirm-close")
-                          } else {
-                            closeModal()
-                          }
-                        }}
-                        type="button"
-                        className={styles.modalClose}
-                      >
-                        <MaterialIcon icon="close" />
-                      </button>
-                    </header>
+                  return (
+                    <>
+                      <header className={styles.modalHeader}>
+                        <button
+                          onClick={() => {
+                            if (
+                              redeemStep === "redeemed" &&
+                              !isRestaurantOnSiteTierReward(reward)
+                            ) {
+                              setRedeemStep("confirm-close")
+                            } else {
+                              closeModal()
+                            }
+                          }}
+                          type="button"
+                          className={styles.modalClose}
+                        >
+                          <MaterialIcon icon="close" />
+                        </button>
+                      </header>
 
-                    {redeemStep === "confirm-close" ? (
-                      <ConfirmClose close={closeModal} />
-                    ) : (
-                      getRedeemFlow(reward, membershipNumber || "")
-                    )}
-                  </>
-                )
-              }}
-            </Dialog>
-          </MotionModal>
-        </MotionOverlay>
+                      {redeemStep === "confirm-close" ? (
+                        <ConfirmClose close={closeModal} />
+                      ) : (
+                        getRedeemFlow(reward, membershipNumber || "")
+                      )}
+                    </>
+                  )
+                }}
+              </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) => {
-      const coupon = getFirstRedeemableCoupon(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")