web/components/MyPages/Blocks/Points/EarnAndBurn/JourneyTable/Table/Row/index.tsx

"use client"

import { useIntl } from "react-intl"

import { dt } from "@/lib/dt"

import Link from "@/components/TempDesignSystem/Link"
import useLang from "@/hooks/useLang"

import AwardPoints from "./AwardPoints"

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

import type { RowProps } from "@/types/components/myPages/myPage/earnAndBurn"
import { RewardTransactionTypes } from "@/types/components/myPages/myPage/enums"

export default function Row({ transaction }: RowProps) {
  const intl = useIntl()
  const lang = useLang()

  const nightString = `${transaction.nights} ${transaction.nights === 1 ? intl.formatMessage({ id: "night" }) : intl.formatMessage({ id: "nights" })}`

  let description =
    transaction.hotelName && transaction.city
      ? `${transaction.hotelName}, ${transaction.city} ${nightString}`
      : `${nightString}`

  switch (transaction.type) {
    case RewardTransactionTypes.stay:
    case RewardTransactionTypes.stayAdj:
      if (transaction.hotelId === "ORS") {
        description = intl.formatMessage({ id: "Former Scandic Hotel" })
      }
      if (transaction.confirmationNumber === "BALFWD") {
        description = intl.formatMessage({
          id: "Points earned prior to May 1, 2021",
        })
      }
      break
    case RewardTransactionTypes.ancillary:
      description = intl.formatMessage({ id: "Extras to your booking" })
      break
    case RewardTransactionTypes.enrollment:
      description = intl.formatMessage({ id: "Sign up bonus" })
      break
    case RewardTransactionTypes.mastercard_points:
      description = intl.formatMessage({ id: "Scandic Friends Mastercard" })
      break
    case RewardTransactionTypes.tui_points:
      description = intl.formatMessage({ id: "TUI Points" })

    case RewardTransactionTypes.pointShop:
      description = intl.formatMessage({ id: "Scandic Friends Point Shop" })
      break
  }

  const arrival = dt(transaction.checkinDate).locale(lang).format("DD MMM YYYY")

  function renderConfirmationNumber() {
    if (transaction.confirmationNumber === "BALFWD") return null

    if (
      transaction.bookingUrl &&
      (transaction.type === RewardTransactionTypes.stay ||
        transaction.type === RewardTransactionTypes.rewardNight)
    ) {
      return (
        <Link variant="underscored" href={transaction.bookingUrl}>
          {transaction.confirmationNumber}
        </Link>
      )
    }

    return transaction.confirmationNumber
  }

  return (
    <tr className={styles.tr}>
      <AwardPoints
        awardPoints={transaction.awardPoints}
        isCalculated={transaction.pointsCalculated}
      />
      <td className={`${styles.td} ${styles.description}`}>{description}</td>
      <td className={styles.td}>{renderConfirmationNumber()}</td>
      <td className={styles.td}>
        {transaction.checkinDate && transaction.confirmationNumber !== "BALFWD"
          ? arrival
          : null}
      </td>
    </tr>
  )
}