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

import { useIntl } from "react-intl"

import { CancellationRuleEnum } from "@scandic-hotels/common/constants/booking"
import { changeOrCancelDateFormat } from "@scandic-hotels/common/constants/dateFormats"
import { dt } from "@scandic-hotels/common/dt"

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

import useLang from "@/hooks/useLang"

import Row from "./Row"

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

  const { checkInDate, isFlexBooking, isChangeBooking } = useMyStayStore(
    (state) => ({
      checkInDate: state.bookedRoom.checkInDate,
      isFlexBooking:
        state.bookedRoom.rateDefinition.cancellationRule ===
        CancellationRuleEnum.CancellableBefore6PM,
      isChangeBooking:
        state.bookedRoom.rateDefinition.cancellationRule ===
        CancellationRuleEnum.Changeable,
    })
  )

  if (!isFlexBooking && !isChangeBooking) {
    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]),
    }
  )

  const title = isChangeBooking
    ? intl.formatMessage({
        id: "booking.changeTitle",
        defaultMessage: "Change",
      })
    : intl.formatMessage({
        id: "booking.changeOrCancel",
        defaultMessage: "Change or cancel",
      })

  return <Row icon="refresh" text={text} title={title} />
}