Merge branch 'develop' into feature/tracking

app/[lang]/(live)/(public)/hotelreservation/(standard)/[step]/layout.module.css

@@ -0,0 +1,24 @@
+.layout {
+  min-height: 100dvh;
+  background-color: var(--Scandic-Brand-Warm-White);
+}
+
+.content {
+  display: grid;
+  gap: var(--Spacing-x3) var(--Spacing-x9);
+  grid-template-columns: 1fr 340px;
+  grid-template-rows: auto 1fr;
+  margin: var(--Spacing-x5) auto 0;
+  padding-top: var(--Spacing-x6);
+  /* simulates padding on viewport smaller than --max-width-navigation */
+  width: min(
+    calc(100dvw - (var(--Spacing-x2) * 2)),
+    var(--max-width-navigation)
+  );
+}
+
+.summary {
+  align-self: flex-start;
+  grid-column: 2 / 3;
+  grid-row: 1/-1;
+}

app/[lang]/(live)/(public)/hotelreservation/(standard)/[step]/layout.tsx

@@ -0,0 +1,55 @@
+import { redirect } from "next/navigation"
+
+import {
+  getCreditCardsSafely,
+  getHotelData,
+  getProfileSafely,
+} from "@/lib/trpc/memoizedRequests"
+
+import EnterDetailsProvider from "@/components/HotelReservation/EnterDetails/Provider"
+import SelectedRoom from "@/components/HotelReservation/EnterDetails/SelectedRoom"
+import SidePeek from "@/components/HotelReservation/EnterDetails/SidePeek"
+import Summary from "@/components/HotelReservation/EnterDetails/Summary"
+import HotelSelectionHeader from "@/components/HotelReservation/HotelSelectionHeader"
+import { setLang } from "@/i18n/serverContext"
+
+import styles from "./layout.module.css"
+
+import { StepEnum } from "@/types/components/enterDetails/step"
+import type { LangParams, LayoutArgs } from "@/types/params"
+
+function preload(id: string, lang: string) {
+  void getHotelData(id, lang)
+  void getProfileSafely()
+  void getCreditCardsSafely()
+}
+
+export default async function StepLayout({
+  children,
+  params,
+}: React.PropsWithChildren<LayoutArgs<LangParams & { step: StepEnum }>>) {
+  setLang(params.lang)
+  preload("811", params.lang)
+
+  const hotel = await getHotelData("811", params.lang)
+
+  if (!hotel?.data) {
+    redirect(`/${params.lang}`)
+  }
+
+  return (
+    <EnterDetailsProvider step={params.step}>
+      <main className={styles.layout}>
+        <HotelSelectionHeader hotel={hotel.data.attributes} />
+        <div className={styles.content}>
+          <SelectedRoom />
+          {children}
+          <aside className={styles.summary}>
+            <Summary />
+          </aside>
+        </div>
+        <SidePeek hotel={hotel.data.attributes} />
+      </main>
+    </EnterDetailsProvider>
+  )
+}

app/[lang]/(live)/(public)/hotelreservation/(standard)/[step]/page.tsx

@@ -0,0 +1,79 @@
+import { notFound } from "next/navigation"
+
+import {
+  getCreditCardsSafely,
+  getHotelData,
+  getProfileSafely,
+} from "@/lib/trpc/memoizedRequests"
+
+import BedType from "@/components/HotelReservation/EnterDetails/BedType"
+import Breakfast from "@/components/HotelReservation/EnterDetails/Breakfast"
+import Details from "@/components/HotelReservation/EnterDetails/Details"
+import HistoryStateManager from "@/components/HotelReservation/EnterDetails/HistoryStateManager"
+import Payment from "@/components/HotelReservation/EnterDetails/Payment"
+import SectionAccordion from "@/components/HotelReservation/EnterDetails/SectionAccordion"
+import { getIntl } from "@/i18n"
+
+import { StepEnum } from "@/types/components/enterDetails/step"
+import type { LangParams, PageArgs } from "@/types/params"
+
+function isValidStep(step: string): step is StepEnum {
+  return Object.values(StepEnum).includes(step as StepEnum)
+}
+
+export default async function StepPage({
+  params,
+}: PageArgs<LangParams & { step: StepEnum }>) {
+  const { step, lang } = params
+
+  const intl = await getIntl()
+
+  const hotel = await getHotelData("811", lang)
+  const user = await getProfileSafely()
+  const savedCreditCards = await getCreditCardsSafely()
+
+  if (!isValidStep(step) || !hotel) {
+    return notFound()
+  }
+
+  return (
+    <section>
+      <HistoryStateManager />
+      <SectionAccordion
+        header="Select bed"
+        step={StepEnum.selectBed}
+        label={intl.formatMessage({ id: "Request bedtype" })}
+      >
+        <BedType />
+      </SectionAccordion>
+      <SectionAccordion
+        header="Food options"
+        step={StepEnum.breakfast}
+        label={intl.formatMessage({ id: "Select breakfast options" })}
+      >
+        <Breakfast />
+      </SectionAccordion>
+      <SectionAccordion
+        header="Details"
+        step={StepEnum.details}
+        label={intl.formatMessage({ id: "Enter your details" })}
+      >
+        <Details user={user} />
+      </SectionAccordion>
+      <SectionAccordion
+        header="Payment"
+        step={StepEnum.payment}
+        label={intl.formatMessage({ id: "Select payment method" })}
+      >
+        <Payment
+          hotelId={hotel.data.attributes.operaId}
+          otherPaymentOptions={
+            hotel.data.attributes.merchantInformationData
+              .alternatePaymentOptions
+          }
+          savedCreditCards={savedCreditCards}
+        />
+      </SectionAccordion>
+    </section>
+  )
+}

app/[lang]/(live)/(public)/hotelreservation/(standard)/layout.module.css

@@ -0,0 +1,4 @@
+.layout {
+  min-height: 100dvh;
+  background-color: var(--Base-Background-Primary-Normal);
+}

app/[lang]/(live)/(public)/hotelreservation/(standard)/layout.tsx

@@ -0,0 +1,16 @@
+import { notFound } from "next/navigation"
+
+import { env } from "@/env/server"
+
+import styles from "./layout.module.css"
+
+import { LangParams, LayoutArgs } from "@/types/params"
+
+export default function HotelReservationLayout({
+  children,
+}: React.PropsWithChildren<LayoutArgs<LangParams>>) {
+  if (env.HIDE_FOR_NEXT_RELEASE) {
+    return notFound()
+  }
+  return <div className={styles.layout}>{children}</div>
+}

app/[lang]/(live)/(public)/hotelreservation/(standard)/page.tsx

@@ -0,0 +1,8 @@
+import { setLang } from "@/i18n/serverContext"
+
+import type { LangParams, PageArgs } from "@/types/params"
+
+export default function HotelReservationPage({ params }: PageArgs<LangParams>) {
+  setLang(params.lang)
+  return null
+}

app/[lang]/(live)/(public)/hotelreservation/(standard)/select-hotel/map/page.module.css

@@ -0,0 +1,6 @@
+.main {
+  display: grid;
+  background-color: var(--Scandic-Brand-Warm-White);
+  min-height: 100dvh;
+  grid-template-columns: 420px 1fr;
+}

app/[lang]/(live)/(public)/hotelreservation/(standard)/select-hotel/map/page.tsx

@@ -0,0 +1,58 @@
+import { env } from "@/env/server"
+
+import {
+  fetchAvailableHotels,
+  getFiltersFromHotels,
+} from "@/app/[lang]/(live)/(public)/hotelreservation/(standard)/select-hotel/utils"
+import SelectHotelMap from "@/components/HotelReservation/SelectHotel/SelectHotelMap"
+import { setLang } from "@/i18n/serverContext"
+
+import styles from "./page.module.css"
+
+import {
+  PointOfInterest,
+  PointOfInterestCategoryNameEnum,
+  PointOfInterestGroupEnum,
+} from "@/types/hotel"
+import { LangParams, PageArgs } from "@/types/params"
+
+export default async function SelectHotelMapPage({
+  params,
+}: PageArgs<LangParams, {}>) {
+  const googleMapId = env.GOOGLE_DYNAMIC_MAP_ID
+  const googleMapsApiKey = env.GOOGLE_STATIC_MAP_KEY
+  setLang(params.lang)
+
+  const hotels = await fetchAvailableHotels({
+    cityId: "8ec4bba3-1c38-4606-82d1-bbe3f6738e54",
+    roomStayStartDate: "2024-11-02",
+    roomStayEndDate: "2024-11-03",
+    adults: 1,
+  })
+
+  const filters = getFiltersFromHotels(hotels)
+
+  // TODO: this is just a quick transformation to get something there. May need rework
+  const pointOfInterests: PointOfInterest[] = hotels.map((hotel) => ({
+    coordinates: {
+      lat: hotel.hotelData.location.latitude,
+      lng: hotel.hotelData.location.longitude,
+    },
+    name: hotel.hotelData.name,
+    distance: hotel.hotelData.location.distanceToCentre,
+    categoryName: PointOfInterestCategoryNameEnum.HOTEL,
+    group: PointOfInterestGroupEnum.LOCATION,
+  }))
+
+  return (
+    <main className={styles.main}>
+      <SelectHotelMap
+        apiKey={googleMapsApiKey}
+        // TODO: use correct coordinates. The city center?
+        coordinates={{ lat: 59.32, lng: 18.01 }}
+        pointsOfInterest={pointOfInterests}
+        mapId={googleMapId}
+      />
+    </main>
+  )
+}

app/[lang]/(live)/(public)/hotelreservation/(standard)/select-hotel/page.module.css

@@ -0,0 +1,26 @@
+.main {
+  display: flex;
+  gap: var(--Spacing-x4);
+  padding: var(--Spacing-x4) var(--Spacing-x4) 0 var(--Spacing-x4);
+  background-color: var(--Scandic-Brand-Warm-White);
+  min-height: 100dvh;
+  flex-direction: column;
+  max-width: var(--max-width);
+  margin: 0 auto;
+}
+
+.section {
+  display: flex;
+  flex-direction: column;
+}
+
+.link {
+  display: flex;
+  padding: var(--Spacing-x2) var(--Spacing-x0);
+}
+
+@media (min-width: 768px) {
+  .main {
+    flex-direction: row;
+  }
+}

app/[lang]/(live)/(public)/hotelreservation/(standard)/select-hotel/page.tsx

@@ -0,0 +1,100 @@
+import { differenceInCalendarDays, format, isWeekend } from "date-fns"
+
+import { Lang } from "@/constants/languages"
+import { selectHotelMap } from "@/constants/routes/hotelReservation"
+
+import {
+  fetchAvailableHotels,
+  getFiltersFromHotels,
+} from "@/app/[lang]/(live)/(public)/hotelreservation/(standard)/select-hotel/utils"
+import HotelCardListing from "@/components/HotelReservation/HotelCardListing"
+import HotelFilter from "@/components/HotelReservation/SelectHotel/HotelFilter"
+import { ChevronRightIcon } from "@/components/Icons"
+import StaticMap from "@/components/Maps/StaticMap"
+import Link from "@/components/TempDesignSystem/Link"
+import TrackingSDK from "@/components/TrackingSDK"
+import { getIntl } from "@/i18n"
+import { setLang } from "@/i18n/serverContext"
+
+import styles from "./page.module.css"
+
+import {
+  TrackingChannelEnum,
+  TrackingSDKHotelInfo,
+  TrackingSDKPageData,
+} from "@/types/components/tracking"
+import { LangParams, PageArgs } from "@/types/params"
+
+export default async function SelectHotelPage({
+  params,
+}: PageArgs<LangParams>) {
+  setLang(params.lang)
+
+  const tempSearchTerm = "Stockholm"
+  const tempArrivalDate = new Date("2024-10-25")
+  const tempDepartureDate = new Date("2024-10-26")
+  const intl = await getIntl()
+
+  const hotels = await fetchAvailableHotels({
+    cityId: "8ec4bba3-1c38-4606-82d1-bbe3f6738e54",
+    roomStayStartDate: "2024-11-02",
+    roomStayEndDate: "2024-11-03",
+    adults: 1,
+  })
+
+  const filterList = getFiltersFromHotels(hotels)
+
+  const pageTrackingData: TrackingSDKPageData = {
+    pageId: "select-hotel",
+    domainLanguage: params.lang as Lang,
+    channel: TrackingChannelEnum["hotelreservation"],
+    pageName: "hotelreservation|select-hotel",
+    siteSections: "hotelreservation|select-hotel",
+    pageType: "bookinghotelspage",
+  }
+
+  const hotelsTrackingData: TrackingSDKHotelInfo = {
+    availableResults: hotels.length,
+    searchTerm: tempSearchTerm,
+    arrivalDate: format(tempArrivalDate, "yyyy-MM-dd"),
+    departureDate: format(tempDepartureDate, "yyyy-MM-dd"),
+    noOfAdults: 1, // TODO: Use values from searchParams
+    noOfChildren: 0, // TODO: Use values from searchParams
+    noOfRooms: 1, // TODO: Use values from searchParams
+    duration: differenceInCalendarDays(tempDepartureDate, tempArrivalDate),
+    leadTime: differenceInCalendarDays(tempArrivalDate, new Date()),
+    searchType: "destination",
+    bookingTypeofDay: isWeekend(tempArrivalDate) ? "weekend" : "weekday",
+    country: hotels[0].hotelData.address.country,
+    region: hotels[0].hotelData.address.city,
+  }
+
+  return (
+    <main className={styles.main}>
+      <section className={styles.section}>
+        <Link href={selectHotelMap[params.lang]} keepSearchParams>
+          <StaticMap
+            city={tempSearchTerm}
+            width={340}
+            height={180}
+            zoomLevel={11}
+            mapType="roadmap"
+            altText={`Map of ${tempSearchTerm} city center`}
+          />
+        </Link>
+        <Link
+          className={styles.link}
+          color="burgundy"
+          href={selectHotelMap[params.lang]}
+          keepSearchParams
+        >
+          {intl.formatMessage({ id: "Show map" })}
+          <ChevronRightIcon color="burgundy" />
+        </Link>
+        <HotelFilter filters={filterList} />
+      </section>
+      <HotelCardListing hotelData={hotels} />
+      <TrackingSDK pageData={pageTrackingData} hotelInfo={hotelsTrackingData} />
+    </main>
+  )
+}

app/[lang]/(live)/(public)/hotelreservation/(standard)/select-hotel/utils.ts

@@ -0,0 +1,43 @@
+import { serverClient } from "@/lib/trpc/server"
+
+import { getLang } from "@/i18n/serverContext"
+
+import { AvailabilityInput } from "@/types/components/hotelReservation/selectHotel/availabilityInput"
+import { HotelData } from "@/types/components/hotelReservation/selectHotel/hotelCardListingProps"
+import { Filter } from "@/types/components/hotelReservation/selectHotel/hotelFilters"
+
+export async function fetchAvailableHotels(
+  input: AvailabilityInput
+): Promise<HotelData[]> {
+  const availableHotels = await serverClient().hotel.availability.hotels(input)
+
+  if (!availableHotels) throw new Error()
+
+  const language = getLang()
+  const hotels = availableHotels.availability.map(async (hotel) => {
+    const hotelData = await serverClient().hotel.hotelData.get({
+      hotelId: hotel.hotelId.toString(),
+      language,
+    })
+
+    if (!hotelData) throw new Error()
+
+    return {
+      hotelData: hotelData.data.attributes,
+      price: hotel.bestPricePerNight,
+    }
+  })
+
+  return await Promise.all(hotels)
+}
+
+export function getFiltersFromHotels(hotels: HotelData[]) {
+  const filters = hotels.flatMap((hotel) => hotel.hotelData.detailedFacilities)
+
+  const uniqueFilterIds = [...new Set(filters.map((filter) => filter.id))]
+  const filterList: Filter[] = uniqueFilterIds
+    .map((filterId) => filters.find((filter) => filter.id === filterId))
+    .filter((filter): filter is Filter => filter !== undefined)
+
+  return filterList
+}

app/[lang]/(live)/(public)/hotelreservation/(standard)/select-rate/page.module.css

@@ -0,0 +1,24 @@
+.page {
+  min-height: 100dvh;
+  padding-top: var(--Spacing-x6);
+  padding-left: var(--Spacing-x2);
+  padding-right: var(--Spacing-x2);
+  background-color: var(--Scandic-Brand-Warm-White);
+}
+
+.content {
+  max-width: var(--max-width);
+  margin: 0 auto;
+  display: flex;
+  flex-direction: column;
+  gap: var(--Spacing-x7);
+  padding: var(--Spacing-x2);
+}
+
+.main {
+  flex-grow: 1;
+}
+
+.summary {
+  max-width: 340px;
+}

app/[lang]/(live)/(public)/hotelreservation/(standard)/select-rate/page.tsx

@@ -0,0 +1,66 @@
+import { getProfileSafely } from "@/lib/trpc/memoizedRequests"
+import { serverClient } from "@/lib/trpc/server"
+
+import HotelInfoCard from "@/components/HotelReservation/SelectRate/HotelInfoCard"
+import RoomSelection from "@/components/HotelReservation/SelectRate/RoomSelection"
+import getHotelReservationQueryParams from "@/components/HotelReservation/SelectRate/RoomSelection/utils"
+import { setLang } from "@/i18n/serverContext"
+
+import styles from "./page.module.css"
+
+import { SelectRateSearchParams } from "@/types/components/hotelReservation/selectRate/selectRate"
+import { LangParams, PageArgs } from "@/types/params"
+
+export default async function SelectRatePage({
+  params,
+  searchParams,
+}: PageArgs<LangParams & { section: string }, SelectRateSearchParams>) {
+  setLang(params.lang)
+
+  const selectRoomParams = new URLSearchParams(searchParams)
+  const selectRoomParamsObject =
+    getHotelReservationQueryParams(selectRoomParams)
+  const adults = selectRoomParamsObject.room[0].adults // TODO: Handle multiple rooms
+  const children = selectRoomParamsObject.room[0].child?.length // TODO: Handle multiple rooms
+
+  const [hotelData, roomConfigurations, user] = await Promise.all([
+    serverClient().hotel.hotelData.get({
+      hotelId: searchParams.hotel,
+      language: params.lang,
+      include: ["RoomCategories"],
+    }),
+    serverClient().hotel.availability.rooms({
+      hotelId: parseInt(searchParams.hotel, 10),
+      roomStayStartDate: searchParams.fromDate,
+      roomStayEndDate: searchParams.toDate,
+      adults,
+      children,
+    }),
+    getProfileSafely(),
+  ])
+
+  if (!roomConfigurations) {
+    return "No rooms found" // TODO: Add a proper error message
+  }
+
+  if (!hotelData) {
+    return "No hotel data found" // TODO: Add a proper error message
+  }
+
+  const roomCategories = hotelData?.included
+
+  return (
+    <div>
+      <HotelInfoCard hotelData={hotelData} />
+      <div className={styles.content}>
+        <div className={styles.main}>
+          <RoomSelection
+            roomConfigurations={roomConfigurations}
+            roomCategories={roomCategories ?? []}
+            user={user}
+          />
+        </div>
+      </div>
+    </div>
+  )
+}