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

"use client"

import { useIntl } from "react-intl"

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

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

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, guaranteeInfo, priceType } = 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 = !!guaranteeInfo

  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" type={priceType} />
          }
          image={{
            src: "/_static/img/scandic-coin.svg",
            alt: "Scandic coin",
          }}
          texts={[`${intl.formatMessage({ id: "Payment" })}: ${paymentMethod}`]}
          supportingText={bookingDate}
          chip={
            isCancelled ? (
              <IconChip
                color="red"
                icon={
                  <MaterialIcon
                    icon="cancel"
                    size={20}
                    color="Icon/Feedback/Error"
                  />
                }
              >
                <Typography variant="Body/Supporting text (caption)/smBold">
                  <span>{intl.formatMessage({ id: "Cancelled" })}</span>
                </Typography>
              </IconChip>
            ) : (
              <IconChip
                color={isPaid ? "green" : "red"}
                icon={
                  isPaid ? (
                    <MaterialIcon
                      icon="check_circle"
                      size={20}
                      color="Icon/Feedback/Success"
                    />
                  ) : (
                    <MaterialIcon
                      icon="cancel"
                      size={20}
                      color="Icon/Interactive/Accent"
                    />
                  )
                }
              >
                <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: (
                <MaterialIcon
                  icon="directions"
                  size={20}
                  color="Icon/Interactive/Default"
                />
              ),
              onClick: () => trackMyStayPageLink("see on map"),
            },
            {
              href: `mailto:${hotel.contactInformation.email}`,
              text: intl.formatMessage({ id: "Email" }),
              icon: (
                <MaterialIcon
                  icon="mail"
                  size={20}
                  color="Icon/Interactive/Default"
                />
              ),
              onClick: () => trackMyStayPageLink("email us"),
            },
            {
              href: hotel.contactInformation.websiteUrl,
              text: intl.formatMessage({ id: "Homepage" }),
              icon: (
                <MaterialIcon
                  icon="link"
                  size={20}
                  color="Icon/Interactive/Default"
                />
              ),
              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>
  )
}