scandic/web
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

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

Browse Source 
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
This commit is contained in:
Chuma Mcphoy (We Ahead)
2025-09-22 08:27:30 +00:00
parent db546d7167
commit 9b8ed972ec
5 changed files with 91 additions and 68 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -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>
)

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

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

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

@@ -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")