93 lines
2.7 KiB
TypeScript
93 lines
2.7 KiB
TypeScript
"use client"
|
|
|
|
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 { isRestaurantOnSiteTierReward } from "@/utils/rewards"
|
|
|
|
import { RewardIcon } from "../../RewardIcon"
|
|
import ActiveRedeemedBadge from "../ActiveRedeemedBadge"
|
|
import MembershipNumberBadge from "../MembershipNumberBadge"
|
|
import TimedRedeemedBadge from "../TimedRedeemedBadge"
|
|
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 intl = useIntl()
|
|
|
|
return (
|
|
<>
|
|
<div className={styles.modalContent}>
|
|
{redeemStep === "redeemed" && (
|
|
<div className={styles.badge}>
|
|
{isRestaurantOnSiteTierReward(reward) ? (
|
|
<ActiveRedeemedBadge />
|
|
) : (
|
|
<TimedRedeemedBadge />
|
|
)}
|
|
</div>
|
|
)}
|
|
<RewardIcon rewardId={reward.reward_id} />
|
|
<Title level="h3" textAlign="center" textTransform="regular">
|
|
{reward.label}
|
|
</Title>
|
|
|
|
{redeemStep === "initial" && (
|
|
<Body textAlign="center">{reward.description}</Body>
|
|
)}
|
|
|
|
{redeemStep === "confirmation" && (
|
|
<Body textAlign="center">{reward.redeem_description}</Body>
|
|
)}
|
|
|
|
{redeemStep === "redeemed" &&
|
|
isRestaurantOnSiteTierReward(reward) &&
|
|
membershipNumber && (
|
|
<MembershipNumberBadge membershipNumber={membershipNumber} />
|
|
)}
|
|
</div>
|
|
|
|
{redeemStep === "initial" && (
|
|
<footer className={styles.modalFooter}>
|
|
<Button
|
|
onClick={() => setRedeemStep("confirmation")}
|
|
intent="primary"
|
|
theme="base"
|
|
>
|
|
{intl.formatMessage({ id: "Redeem benefit" })}
|
|
</Button>
|
|
</footer>
|
|
)}
|
|
|
|
{redeemStep === "confirmation" && (
|
|
<footer className={styles.modalFooter}>
|
|
<Button
|
|
onClick={onRedeem}
|
|
disabled={isRedeeming}
|
|
intent="primary"
|
|
theme="base"
|
|
>
|
|
{intl.formatMessage({ id: "Yes, redeem" })}
|
|
</Button>
|
|
<Button onClick={close} intent="secondary" theme="base">
|
|
{intl.formatMessage({ id: "Go back" })}
|
|
</Button>
|
|
</footer>
|
|
)}
|
|
</>
|
|
)
|
|
}
|