"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 ( <>
{redeemStep === "redeemed" && (
{isRestaurantOnSiteTierReward(reward) ? ( ) : ( )}
)} {reward.label} {redeemStep === "initial" && ( {reward.description} )} {redeemStep === "confirmation" && ( {reward.redeem_description} )} {redeemStep === "redeemed" && isRestaurantOnSiteTierReward(reward) && membershipNumber && ( )}
{redeemStep === "initial" && ( )} {redeemStep === "confirmation" && ( )} ) }