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

import { useIntl } from "react-intl"

import { changeOrCancelDateFormat } from "@scandic-hotels/common/constants/dateFormats"
import { dt } from "@scandic-hotels/common/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(
    {
      id: "common.untilWithTimeAndDate",
      defaultMessage: "Until {time}, {date}",
    },
    {
      time: "18:00",
      date: fromDate.format(changeOrCancelDateFormat[lang]),
    }
  )

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