diff --git a/apps/scandic-web/components/Blocks/DynamicContent/Rewards/CurrentRewards/Client.tsx b/apps/scandic-web/components/Blocks/DynamicContent/Rewards/CurrentRewards/Client.tsx index cffb38ba7..d18b81753 100644 --- a/apps/scandic-web/components/Blocks/DynamicContent/Rewards/CurrentRewards/Client.tsx +++ b/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({
{showRedeem && } - - {reward.label} - + +

{reward.label}

+
{earliestExpirationDate ? ( ) : null} diff --git a/apps/scandic-web/components/Blocks/DynamicContent/Rewards/CurrentRewards/current.module.css b/apps/scandic-web/components/Blocks/DynamicContent/Rewards/CurrentRewards/current.module.css index 2fa8b84db..2463a5b65 100644 --- a/apps/scandic-web/components/Blocks/DynamicContent/Rewards/CurrentRewards/current.module.css +++ b/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); } diff --git a/apps/scandic-web/components/Blocks/DynamicContent/Rewards/Redeem/index.tsx b/apps/scandic-web/components/Blocks/DynamicContent/Rewards/Redeem/index.tsx index 338b85c3d..122012d3b 100644 --- a/apps/scandic-web/components/Blocks/DynamicContent/Rewards/Redeem/index.tsx +++ b/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) { setAnimation(isOpen ? "visible" : "hidden")} > - - - - - {({ close }) => { - function closeModal() { - if ( - redeemStep === "redeemed" || - redeemStep === "confirm-close" - ) { - utils.contentstack.rewards.current.invalidate({ - lang, - }) + + + {({ close }) => { + function closeModal() { + if ( + redeemStep === "redeemed" || + redeemStep === "confirm-close" + ) { + utils.contentstack.rewards.current.invalidate({ + lang, + }) + } + close() } - close() - } - return ( - <> -
- -
+ return ( + <> +
+ +
- {redeemStep === "confirm-close" ? ( - - ) : ( - getRedeemFlow(reward, membershipNumber || "") - )} - - ) - }} -
-
-
+ {redeemStep === "confirm-close" ? ( + + ) : ( + getRedeemFlow(reward, membershipNumber || "") + )} + + ) + }} + + + + )}
) diff --git a/apps/scandic-web/components/Blocks/DynamicContent/Rewards/Redeem/redeem.module.css b/apps/scandic-web/components/Blocks/DynamicContent/Rewards/Redeem/redeem.module.css index dc4b18b4a..7b3674b29 100644 --- a/apps/scandic-web/components/Blocks/DynamicContent/Rewards/Redeem/redeem.module.css +++ b/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%; +} diff --git a/apps/scandic-web/components/Blocks/DynamicContent/Rewards/Redeem/useRedeemFlow.ts b/apps/scandic-web/components/Blocks/DynamicContent/Rewards/Redeem/useRedeemFlow.ts index bde47ff13..733cbd318 100644 --- a/apps/scandic-web/components/Blocks/DynamicContent/Rewards/Redeem/useRedeemFlow.ts +++ b/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")