web/apps/scandic-web/components/HotelReservation/MyStay/BookingSummary/index.tsx

"use client"

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

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

import {
  CheckCircleIcon,
  DirectionsIcon,
  EmailIcon,
  LinkIcon,
} from "@/components/Icons"
import CrossCircleIcon from "@/components/Icons/CrossCircle"
import IconChip from "@/components/TempDesignSystem/IconChip"
import Body from "@/components/TempDesignSystem/Text/Body"
import Caption from "@/components/TempDesignSystem/Text/Caption"
import Subtitle from "@/components/TempDesignSystem/Text/Subtitle"
import { Toast } from "@/components/TempDesignSystem/Toasts"
import useLang from "@/hooks/useLang"
import { formatPrice } from "@/utils/numberFormatting"
import { trackMyStayPageLink } from "@/utils/tracking"

import { useMyStayRoomDetailsStore } from "../stores/myStayRoomDetailsStore"
import { useMyStayTotalPriceStore } from "../stores/myStayTotalPrice"
import { formatChildBedPreferences } from "../utils"
import SummaryCard from "./SummaryCard"

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

import type { Hotel, Room } from "@/types/hotel"
import type { BookingConfirmation } from "@/types/trpc/routers/booking/confirmation"

interface BookingSummaryProps {
  booking: BookingConfirmation["booking"]
  hotel: Hotel
  room: Room | null
}

export default function BookingSummary({
  booking,
  hotel,
  room,
}: BookingSummaryProps) {
  const intl = useIntl()
  const lang = useLang()
  const {
    totalPrice,
    currencyCode,
    actions: { setRoomPrice },
  } = useMyStayTotalPriceStore()
  const {
    actions: { setRoomDetails },
  } = useMyStayRoomDetailsStore()

  const childrenAsString = formatChildBedPreferences({
    childrenAges: booking.childrenAges,
    childBedPreferences: booking.childBedPreferences,
  })

  useEffect(() => {
    // Add price information
    setRoomPrice({
      id: booking.confirmationNumber,
      totalPrice: booking.totalPrice,
      currencyCode: booking.currencyCode,
      isMainBooking: true,
    })

    // Add room details
    setRoomDetails({
      id: booking.confirmationNumber,
      hotelId: booking.hotelId,
      checkInDate: booking.checkInDate,
      checkOutDate: booking.checkOutDate,
      adults: booking.adults,
      children: childrenAsString,
      roomName: room?.name ?? booking.roomTypeCode ?? "",
      roomTypeCode: booking.roomTypeCode ?? "",
      rateCode: booking.rateDefinition.rateCode ?? "",
      bookingCode: booking.bookingCode ?? "",
      isCancelable: booking.isCancelable,
      mainRoom: booking.mainRoom,
    })
  }, [booking, room, childrenAsString, setRoomPrice, setRoomDetails])

  const directionsUrl = `https://www.google.com/maps/dir/?api=1&destination=${hotel.location.latitude},${hotel.location.longitude}`
  const isPaid =
    booking.rateDefinition.cancellationRule !== "CancellableBefore6PM"
  const bookingDate = dt(booking.createDateTime)
    .locale(lang)
    .format("D MMMM YYYY")

  return (
    <div className={styles.bookingSummary}>
      <Subtitle textTransform="uppercase" color="burgundy">
        {intl.formatMessage({ id: "Booking summary" })}
      </Subtitle>
      <div className={styles.bookingSummaryContent}>
        <SummaryCard
          title={formatPrice(intl, totalPrice, currencyCode)}
          image={{
            src: "/_static/img/scandic-coin.svg",
            alt: "Scandic coin",
          }}
          texts={[`${intl.formatMessage({ id: "Payment" })}: N/A`]}
          supportingText={bookingDate}
          chip={
            <IconChip
              color={isPaid ? "green" : "red"}
              icon={
                isPaid ? (
                  <CheckCircleIcon width={20} height={20} color="green" />
                ) : (
                  <CrossCircleIcon width={20} height={20} color="red" />
                )
              }
            >
              <Caption color={isPaid ? "green" : "red"}>
                <strong>{intl.formatMessage({ id: "Status" })}:</strong>{" "}
                {isPaid
                  ? intl.formatMessage({ id: "Paid" })
                  : intl.formatMessage({ id: "Unpaid" })}
              </Caption>
            </IconChip>
          }
        />
        <SummaryCard
          title={hotel.name}
          image={{
            src: "/_static/img/scandic-service.svg",
            alt: "Scandic service",
          }}
          texts={[
            hotel.address.streetAddress,
            `${hotel.address.zipCode} ${hotel.address.city}`,
          ]}
          supportingText={intl.formatMessage(
            { id: "Long {long} ∙ Lat {lat}" },
            {
              lat: hotel.location.latitude,
              long: hotel.location.longitude,
            }
          )}
          links={[
            {
              href: directionsUrl,
              text: intl.formatMessage({ id: "Directions" }),
              icon: <DirectionsIcon width={20} height={20} color="burgundy" />,
              onClick: () => trackMyStayPageLink("see on map"),
            },
            {
              href: `mailto:${hotel.contactInformation.email}`,
              text: intl.formatMessage({ id: "Email" }),
              icon: <EmailIcon width={20} height={20} color="burgundy" />,
              onClick: () => trackMyStayPageLink("email us"),
            },
            {
              href: hotel.contactInformation.websiteUrl,
              text: intl.formatMessage({ id: "Homepage" }),
              icon: <LinkIcon width={20} height={20} color="burgundy" />,
              onClick: () => trackMyStayPageLink("hotel homepage"),
            },
          ]}
        />
      </div>
      {hotel.specialAlerts.length > 0 && (
        <div className={styles.toast}>
          <Toast variant="info">
            <ul>
              {hotel.specialAlerts.map((alert) => (
                <li key={alert.id}>
                  <Body color="uiTextHighContrast">{alert.text}</Body>
                </li>
              ))}
            </ul>
          </Toast>
        </div>
      )}
    </div>
  )
}