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

"use client"

import { useIntl } from "react-intl"

import { Typography } from "@scandic-hotels/design-system/Typography"

import { CancellationRuleEnum } from "@/constants/booking"
import { dt } from "@/lib/dt"
import { useMyStayRoomDetailsStore } from "@/stores/my-stay/myStayRoomDetailsStore"

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

import TotalPrice from "../Rooms/TotalPrice"
import SummaryCard from "./SummaryCard"

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

import type { Hotel } from "@/types/hotel"

interface BookingSummaryProps {
  hotel: Hotel
}

export default function BookingSummary({ hotel }: BookingSummaryProps) {
  const intl = useIntl()
  const lang = useLang()

  const bookedRoom = useMyStayRoomDetailsStore((state) => state.bookedRoom)

  const {
    isCancelled,
    createDateTime,
    rateDefinition,
    guaranteeInfo,
    checkInDate,
  } = bookedRoom

  const directionsUrl = `https://www.google.com/maps/dir/?api=1&destination=${hotel.location.latitude},${hotel.location.longitude}`

  const bookingDate = dt(createDateTime).locale(lang).format("D MMMM YYYY")

  const isPaid =
    rateDefinition.cancellationRule !==
      CancellationRuleEnum.CancellableBefore6PM ||
    dt(checkInDate).startOf("day").isBefore(dt().startOf("day"))

  const paymentMethod = guaranteeInfo?.paymentMethodDescription
    ?.toLocaleLowerCase()
    .startsWith("visa")
    ? intl.formatMessage({ id: "Card" })
    : guaranteeInfo?.paymentMethodDescription
      ? guaranteeInfo?.paymentMethodDescription
      : intl.formatMessage({ id: "N/A" })

  return (
    <div className={styles.bookingSummary}>
      <Typography variant="Title/sm">
        <h2 className={styles.title}>
          {intl.formatMessage({ id: "Booking summary" })}
        </h2>
      </Typography>
      <div className={styles.bookingSummaryContent}>
        <SummaryCard
          title={<TotalPrice variant="Body/Paragraph/mdBold" />}
          image={{
            src: "/_static/img/scandic-coin.svg",
            alt: "Scandic coin",
          }}
          texts={[`${intl.formatMessage({ id: "Payment" })}: ${paymentMethod}`]}
          supportingText={bookingDate}
          chip={
            isCancelled ? (
              <IconChip
                color={"red"}
                icon={<CrossCircleIcon width={20} height={20} color="red" />}
              >
                <Typography variant="Body/Supporting text (caption)/smBold">
                  <span>{intl.formatMessage({ id: "Cancelled" })}</span>
                </Typography>
              </IconChip>
            ) : (
              <IconChip
                color={isPaid ? "green" : "red"}
                icon={
                  isPaid ? (
                    <CheckCircleIcon width={20} height={20} color="green" />
                  ) : (
                    <CrossCircleIcon width={20} height={20} color="red" />
                  )
                }
              >
                <Typography variant="Body/Supporting text (caption)/smRegular">
                  <span>
                    <strong>{intl.formatMessage({ id: "Status" })}:</strong>{" "}
                    {isPaid
                      ? intl.formatMessage({ id: "Paid" })
                      : intl.formatMessage({ id: "Unpaid" })}
                  </span>
                </Typography>
              </IconChip>
            )
          }
        />
        <SummaryCard
          title={
            <Typography variant="Body/Paragraph/mdBold">
              <p>{hotel.name}</p>
            </Typography>
          }
          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}>
                  <Typography variant="Body/Paragraph/mdRegular">
                    <span>{alert.text}</span>
                  </Typography>
                </li>
              ))}
            </ul>
          </Toast>
        </div>
      )}
    </div>
  )
}