web/apps/scandic-web/components/Blocks/DynamicContent/Rewards/Redeem/Flows/Tier.tsx

"use client"

import { useIntl } from "react-intl"

import { JsonToHtml } from "@scandic-hotels/design-system/JsonToHtml"
import { OldDSButton as Button } from "@scandic-hotels/design-system/OldDSButton"
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
                onClick={() => setRedeemStep("confirmation")}
                intent="primary"
                theme="base"
              >
                {intl.formatMessage({
                  id: "redeemFlow.redeemBenefit",
                  defaultMessage: "Redeem benefit",
                })}
              </Button>
            </footer>
          )}

          {redeemStep === "confirmation" && (
            <footer className={styles.modalFooter}>
              <Button
                onClick={() => onRedeem(reward)}
                disabled={isRedeeming}
                intent="primary"
                theme="base"
              >
                {intl.formatMessage({
                  id: "redeemFlow.yesRedeem",
                  defaultMessage: "Yes, redeem",
                })}
              </Button>
              <Button
                onClick={() => setRedeemStep("initial")}
                intent="secondary"
                theme="base"
              >
                {intl.formatMessage({
                  id: "common.goBack",
                  defaultMessage: "Go back",
                })}
              </Button>
            </footer>
          )}
        </>
      ) : null}
    </>
  )
}