web/apps/scandic-web/components/HotelReservation/MyStay/Rooms/SingleRoom/Details/ModifyBy.tsx

import { useIntl } from "react-intl"

import { dt } from "@/lib/dt"
import { useMyStayStore } from "@/stores/my-stay"

import { hasModifiableRate } from "@/components/HotelReservation/MyStay/utils"
import useLang from "@/hooks/useLang"

import Row from "./Row"

export default function ModifyBy() {
  const intl = useIntl()
  const lang = useLang()

  const { checkInDate, isModifyable } = useMyStayStore((state) => ({
    checkInDate: state.bookedRoom.checkInDate,
    isModifyable: hasModifiableRate(
      state.bookedRoom.rateDefinition.cancellationRule
    ),
  }))

  if (!isModifyable) {
    return null
  }

  const fromDate = dt(checkInDate).locale(lang)

  const text = intl.formatMessage(
    {
      defaultMessage: "Until {time}, {date}",
    },
    {
      time: "18:00",
      date: fromDate.format("dddd D MMM"),
    }
  )

  return (
    <Row
      icon="refresh"
      text={text}
      title={intl.formatMessage({
        defaultMessage: "Change or cancel",
      })}
    />
  )
}