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

feat(LOY-61): add confirmation box to close when redeemed a reward

Browse Source
This commit is contained in:
Christian Andolf
2025-02-12 14:22:13 +01:00
parent 962836606e
commit b656023bac
15 changed files with 189 additions and 39 deletions
Download Patch File Download Diff File Expand all files Collapse all files

48
components/Blocks/DynamicContent/Rewards/Redeem/ConfirmClose.tsx Normal file
View File

@@ -0,0 +1,48 @@
import { useIntl } from "react-intl"
import Button from "@/components/TempDesignSystem/Button"
import Body from "@/components/TempDesignSystem/Text/Body"
import Title from "@/components/TempDesignSystem/Text/Title"
import useRedeemFlow from "./useRedeemFlow"
import styles from "./redeem.module.css"
export function ConfirmClose({ close }: { close: VoidFunction }) {
const intl = useIntl()
const { setRedeemStep } = useRedeemFlow()
return (
<>
<div className={styles.modalContent}>
<Title level="h3" textAlign="center" textTransform="regular">
{intl.formatMessage({
id: "If you close this your benefit will be removed",
})}
</Title>
<Body>
{intl.formatMessage({
id: "Have you showed this benefit to the hotel staff?",
})}
</Body>
<Body>
{intl.formatMessage({
id: "If not, please go back and do so before you close this. Once you close this your benefit will be void and removed from My Benefits.",
})}
</Body>
</div>
<footer className={styles.modalFooter}>
<Button
onClick={() => setRedeemStep("redeemed")}
intent="primary"
theme="base"
>
{intl.formatMessage({ id: "No, go back" })}
</Button>
<Button onClick={close} intent="secondary" theme="base">
{intl.formatMessage({ id: "Yes, close and remove benefit" })}
</Button>
</footer>
</>
)
}

16
components/Blocks/DynamicContent/Rewards/Redeem/Flows/Campaign.tsx
View File

@@ -10,17 +10,16 @@ import Title from "@/components/TempDesignSystem/Text/Title"
import { toast } from "@/components/TempDesignSystem/Toasts"
import { RewardIcon } from "../../RewardIcon"
import useRedeemFlow from "../useRedeemFlow"
import styles from "../redeem.module.css"
import type { RewardWithRedeem } from "@/server/routers/contentstack/reward/output"
export default function Campaign({ reward }: { reward: RewardWithRedeem }) {
export default function Campaign() {
const { reward } = useRedeemFlow()
const intl = useIntl()
function handleCopy() {
navigator.clipboard.writeText(reward.operaRewardId)
toast.success(intl.formatMessage({ id: "Copied to clipboard" }))
if (!reward) {
return null
}
return (
@@ -42,7 +41,10 @@ export default function Campaign({ reward }: { reward: RewardWithRedeem }) {
</div>
<footer className={styles.modalFooter}>
<Button
onClick={handleCopy}
onClick={() => {
navigator.clipboard.writeText(reward.operaRewardId)
toast.success(intl.formatMessage({ id: "Copied to clipboard" }))
}}
type="button"
variant="icon"
size="small"

13
components/Blocks/DynamicContent/Rewards/Redeem/Flows/Tier.tsx
View File

@@ -15,19 +15,20 @@ import useRedeemFlow from "../useRedeemFlow"
import styles from "../redeem.module.css"
import type { RewardWithRedeem } from "@/server/routers/contentstack/reward/output"
export default function Tier({
reward,
membershipNumber,
}: {
reward: RewardWithRedeem
membershipNumber: string
}) {
const { onRedeem, redeemStep, setRedeemStep, isRedeeming } =
useRedeemFlow(reward)
const { reward, onRedeem, redeemStep, setRedeemStep, isRedeeming } =
useRedeemFlow()
const intl = useIntl()
if (!reward) {
return null
}
return (
<>
<div className={styles.modalContent}>

12
components/Blocks/DynamicContent/Rewards/Redeem/TimedRedeemedBadge.tsx
View File

@@ -2,14 +2,20 @@
import { useIntl } from "react-intl"
import { dt } from "@/lib/dt"
import Countdown from "@/components/Countdown"
import { CheckCircleIcon } from "@/components/Icons"
import Caption from "@/components/TempDesignSystem/Text/Caption"
import useRedeemFlow from "./useRedeemFlow"
import styles from "./redeem.module.css"
export default function TimedRedeemedBadge() {
const intl = useIntl()
const { timeRemaining, setTimeRemaining } = useRedeemFlow()
const duration = dt.duration(timeRemaining)
return (
<>
@@ -21,7 +27,11 @@ export default function TimedRedeemedBadge() {
})}
</Caption>
</div>
<Countdown />
<Countdown
minutes={duration.minutes()}
seconds={duration.seconds()}
onChange={(newTime) => setTimeRemaining(newTime)}
/>
</>
)
}

68
components/Blocks/DynamicContent/Rewards/Redeem/index.tsx
View File

@@ -18,6 +18,7 @@ import useLang from "@/hooks/useLang"
import Campaign from "./Flows/Campaign"
import Tier from "./Flows/Tier"
import { ConfirmClose } from "./ConfirmClose"
import { RedeemContext } from "./useRedeemFlow"
import styles from "./redeem.module.css"
@@ -32,12 +33,15 @@ import type { RewardWithRedeem } from "@/server/routers/contentstack/reward/outp
const MotionOverlay = motion(ModalOverlay)
const MotionModal = motion(Modal)
const thirtyMinutesInMs = 1000 * 60 * 30
export default function Redeem({ reward, membershipNumber }: RedeemProps) {
const [animation, setAnimation] = useState<RedeemModalState>("unmounted")
const intl = useIntl()
const lang = useLang()
const utils = trpc.useUtils()
const [redeemStep, setRedeemStep] = useState<RedeemStep>("initial")
const [timeRemaining, setTimeRemaining] = useState(thirtyMinutesInMs)
function modalStateHandler(newAnimationState: RedeemModalState) {
setAnimation((currentAnimationState) =>
@@ -51,7 +55,16 @@ export default function Redeem({ reward, membershipNumber }: RedeemProps) {
}
return (
<RedeemContext.Provider value={{ redeemStep, setRedeemStep }}>
<RedeemContext.Provider
value={{
reward,
redeemStep,
setRedeemStep,
defaultTimeRemaining: thirtyMinutesInMs,
timeRemaining,
setTimeRemaining,
}}
>
<DialogTrigger
onOpenChange={(isOpen) => setAnimation(isOpen ? "visible" : "hidden")}
>
@@ -75,24 +88,39 @@ export default function Redeem({ reward, membershipNumber }: RedeemProps) {
animate={animation}
>
<Dialog className={styles.dialog} aria-label={reward.label}>
{({ close }) => (
<>
<header className={styles.modalHeader}>
<button
onClick={() => {
utils.contentstack.rewards.current.invalidate({ lang })
close()
}}
type="button"
className={styles.modalClose}
>
<CloseLargeIcon />
</button>
</header>
{({ close }) => {
function closeModal() {
utils.contentstack.rewards.current.invalidate({
lang,
})
close()
}
return (
<>
<header className={styles.modalHeader}>
<button
onClick={() => {
if (redeemStep === "redeemed") {
setRedeemStep("confirm-close")
} else {
closeModal()
}
}}
type="button"
className={styles.modalClose}
>
<CloseLargeIcon />
</button>
</header>
{getRedeemFlow(reward, membershipNumber || "")}
</>
)}
{redeemStep === "confirm-close" ? (
<ConfirmClose close={closeModal} />
) : (
getRedeemFlow(reward, membershipNumber || "")
)}
</>
)
}}
</Dialog>
</MotionModal>
</MotionOverlay>
@@ -130,10 +158,10 @@ const variants = {
function getRedeemFlow(reward: RewardWithRedeem, membershipNumber: string) {
switch (reward.rewardType) {
case "Campaign":
return <Campaign reward={reward} />
return <Campaign />
case "Surprise":
case "Tier":
return <Tier reward={reward} membershipNumber={membershipNumber} />
return <Tier membershipNumber={membershipNumber} />
default:
console.warn("Unsupported reward type for redeem:", reward.rewardType)
return null

26
components/Blocks/DynamicContent/Rewards/Redeem/useRedeemFlow.ts
View File

@@ -1,6 +1,6 @@
"use client"
import { createContext, useCallback, useContext } from "react"
import { createContext, useCallback, useContext, useEffect } from "react"
import { trpc } from "@/lib/trpc/client"
@@ -10,12 +10,23 @@ import type { RedeemFlowContext } from "@/types/components/myPages/myPage/accoun
import type { RewardWithRedeem } from "@/server/routers/contentstack/reward/output"
export const RedeemContext = createContext<RedeemFlowContext>({
reward: null,
redeemStep: "initial",
setRedeemStep: () => undefined,
defaultTimeRemaining: 0,
timeRemaining: 0,
setTimeRemaining: () => undefined,
})
export default function useRedeemFlow(reward: RewardWithRedeem) {
const { redeemStep, setRedeemStep } = useContext(RedeemContext)
export default function useRedeemFlow() {
const {
reward,
redeemStep,
setRedeemStep,
defaultTimeRemaining,
timeRemaining,
setTimeRemaining,
} = useContext(RedeemContext)
const lang = useLang()
const update = trpc.contentstack.rewards.redeem.useMutation<{
@@ -38,10 +49,19 @@ export default function useRedeemFlow(reward: RewardWithRedeem) {
}
}, [reward, update, setRedeemStep])
useEffect(() => {
if (redeemStep === "initial") {
setTimeRemaining(defaultTimeRemaining)
}
}, [redeemStep, setTimeRemaining, defaultTimeRemaining])
return {
reward,
onRedeem,
redeemStep,
setRedeemStep,
isRedeeming: update.isPending,
timeRemaining,
setTimeRemaining,
}
}