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

"use client"

import { useIntl } from "react-intl"

import Caption from "@scandic-hotels/design-system/Caption"
import { MaterialIcon } from "@scandic-hotels/design-system/Icons/MaterialIcon"
import { OldDSButton as Button } from "@scandic-hotels/design-system/OldDSButton"
import { toast } from "@scandic-hotels/design-system/Toast"
import { Typography } from "@scandic-hotels/design-system/Typography"

import { RewardIcon } from "../../RewardIcon"

import styles from "../redeem.module.css"

import type { Campaign } from "@scandic-hotels/trpc/types/rewards"

export default function Campaign({ reward }: { reward: Campaign }) {
  const intl = useIntl()

  return (
    <>
      <div className={styles.modalContent}>
        <RewardIcon rewardId={reward.reward_id} />
        <Typography variant="Title/smLowCase" className={styles.rewardLabel}>
          <h3>{reward.label}</h3>
        </Typography>
        <Typography
          variant="Body/Paragraph/mdRegular"
          className={styles.rewardDescription}
        >
          <p>{reward.description}</p>
        </Typography>
        <div className={styles.rewardBadge}>
          <Caption textAlign="center" color="uiTextHighContrast" type="bold">
            {intl.formatMessage({
              id: "redeemFlow.promoCode",
              defaultMessage: "Promo code",
            })}
          </Caption>
          <Caption textAlign="center" color="uiTextHighContrast">
            {reward.operaRewardId}
          </Caption>
        </div>
      </div>
      <footer className={styles.modalFooter}>
        <Button
          onClick={() => {
            try {
              navigator.clipboard.writeText(reward.operaRewardId)
              toast.success(
                intl.formatMessage({
                  id: "redeemFlow.copiedToClipboard",
                  defaultMessage: "Copied to clipboard",
                })
              )
            } catch {
              toast.error(
                intl.formatMessage({
                  id: "errorMessage.copyFailed",
                  defaultMessage: "Failed to copy",
                })
              )
            }
          }}
          type="button"
          variant="icon"
          size="small"
          theme="base"
          intent="primary"
        >
          <MaterialIcon icon="content_copy" color="CurrentColor" />
          {intl.formatMessage({
            id: "redeemFlow.copyPromotionCode",
            defaultMessage: "Copy promotion code",
          })}
        </Button>
      </footer>
    </>
  )
}