129 lines
3.9 KiB
TypeScript
129 lines
3.9 KiB
TypeScript
"use client"
|
|
|
|
import { useIntl } from "react-intl"
|
|
|
|
import { Button } from "@scandic-hotels/design-system/Button"
|
|
import { JsonToHtml } from "@scandic-hotels/design-system/JsonToHtml"
|
|
import { Typography } from "@scandic-hotels/design-system/Typography"
|
|
|
|
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 { Surprise, Tier } from "@scandic-hotels/trpc/types/rewards"
|
|
|
|
export default function Tier({
|
|
reward,
|
|
membershipNumber,
|
|
}: {
|
|
reward: Tier | Surprise
|
|
membershipNumber: string
|
|
}) {
|
|
const { onRedeem, redeemStep, setRedeemStep, isRedeeming } = useRedeemFlow()
|
|
|
|
const intl = useIntl()
|
|
|
|
return (
|
|
<>
|
|
<div className={styles.modalContent}>
|
|
{redeemStep === "redeemed" && (
|
|
<div className={styles.badge}>
|
|
{isRestaurantOnSiteTierReward(reward) ? (
|
|
<ActiveRedeemedBadge />
|
|
) : (
|
|
<TimedRedeemedBadge />
|
|
)}
|
|
</div>
|
|
)}
|
|
<RewardIcon rewardId={reward.reward_id} />
|
|
<Typography variant="Title/smLowCase" className={styles.rewardLabel}>
|
|
<h3>{reward.label}</h3>
|
|
</Typography>
|
|
|
|
{reward.redeemLocation !== "Non-redeemable" && (
|
|
<>
|
|
{redeemStep === "initial" && (
|
|
<Typography
|
|
variant="Body/Paragraph/mdRegular"
|
|
className={styles.rewardDescription}
|
|
>
|
|
<p>{reward.description}</p>
|
|
</Typography>
|
|
)}
|
|
|
|
{redeemStep === "confirmation" && reward.redeem_description && (
|
|
<JsonToHtml
|
|
embeds={
|
|
reward.redeem_description.embedded_itemsConnection.edges
|
|
}
|
|
nodes={reward.redeem_description.json.children}
|
|
/>
|
|
)}
|
|
|
|
{redeemStep === "redeemed" &&
|
|
isRestaurantOnSiteTierReward(reward) &&
|
|
membershipNumber && (
|
|
<MembershipNumberBadge membershipNumber={membershipNumber} />
|
|
)}
|
|
</>
|
|
)}
|
|
{reward.redeemLocation === "Non-redeemable" &&
|
|
reward.redeem_description && (
|
|
<JsonToHtml
|
|
embeds={reward.redeem_description.embedded_itemsConnection.edges}
|
|
nodes={reward.redeem_description.json.children}
|
|
/>
|
|
)}
|
|
</div>
|
|
|
|
{reward.redeemLocation !== "Non-redeemable" ? (
|
|
<>
|
|
{redeemStep === "initial" && (
|
|
<footer className={styles.modalFooter}>
|
|
<Button
|
|
onPress={() => setRedeemStep("confirmation")}
|
|
variant="Primary"
|
|
>
|
|
{intl.formatMessage({
|
|
id: "redeemFlow.redeemBenefit",
|
|
defaultMessage: "Redeem benefit",
|
|
})}
|
|
</Button>
|
|
</footer>
|
|
)}
|
|
|
|
{redeemStep === "confirmation" && (
|
|
<footer className={styles.modalFooter}>
|
|
<Button
|
|
onPress={() => onRedeem(reward)}
|
|
isDisabled={isRedeeming}
|
|
variant="Primary"
|
|
>
|
|
{intl.formatMessage({
|
|
id: "redeemFlow.yesRedeem",
|
|
defaultMessage: "Yes, redeem",
|
|
})}
|
|
</Button>
|
|
<Button
|
|
onPress={() => setRedeemStep("initial")}
|
|
variant="Secondary"
|
|
>
|
|
{intl.formatMessage({
|
|
id: "common.goBack",
|
|
defaultMessage: "Go back",
|
|
})}
|
|
</Button>
|
|
</footer>
|
|
)}
|
|
</>
|
|
) : null}
|
|
</>
|
|
)
|
|
}
|