web/apps/scandic-web/components/HotelReservation/BookingConfirmation/Header/Actions/ManageBooking.tsx

"use client"

import { useEffect } from "react"
import { useIntl } from "react-intl"

import { myStay } from "@scandic-hotels/common/constants/routes/myStay"
import { MaterialIcon } from "@scandic-hotels/design-system/Icons/MaterialIcon"
import Link from "@scandic-hotels/design-system/Link"
import { OldDSButton as Button } from "@scandic-hotels/design-system/OldDSButton"

import useLang from "@/hooks/useLang"

import type { ManageBookingProps } from "@/types/components/hotelReservation/bookingConfirmation/actions/manageBooking"
import type { AdditionalInfoCookieValue } from "@/components/HotelReservation/FindMyBooking/AdditionalInfoForm"

export default function ManageBooking({ booking }: ManageBookingProps) {
  const intl = useIntl()
  const lang = useLang()

  const { refId, confirmationNumber } = booking
  const { email, firstName, lastName } = booking.guest
  useEffect(() => {
    // Setting the `bv` cookie allows direct access to My stay without prompting for more information.
    const value: AdditionalInfoCookieValue = {
      email,
      firstName,
      lastName,
      confirmationNumber,
    }
    document.cookie = `bv=${JSON.stringify(value)}; Path=/; Max-Age=600; Secure; SameSite=Strict`
  }, [confirmationNumber, email, firstName, lastName])

  const myStayURL = `${myStay[lang]}?RefId=${encodeURIComponent(refId)}`

  return (
    <Button
      asChild
      intent="text"
      size="small"
      theme="base"
      variant="icon"
      wrapping
    >
      <Link color="none" href={myStayURL} weight="bold">
        <MaterialIcon icon="edit_square" color="CurrentColor" />
        {intl.formatMessage({
          defaultMessage: "Manage booking",
        })}
      </Link>
    </Button>
  )
}