Merged in feat/sw-2873-move-selecthotel-to-booking-flow (pull request #2727)
feat(SW-2873): Move select-hotel to booking flow * crude setup of select-hotel in partner-sas * wip * Fix linting * restructure tracking files * Remove dependency on trpc in tracking hooks * Move pageview tracking to common * Fix some lint and import issues * Add AlternativeHotelsPage * Add SelectHotelMapPage * Add AlternativeHotelsMapPage * remove next dependency in tracking store * Remove dependency on react in tracking hooks * move isSameBooking to booking-flow * Inject searchParamsComparator into tracking store * Move useTrackHardNavigation to common * Move useTrackSoftNavigation to common * Add TrackingSDK to partner-sas * call serverclient in layout * Remove unused css * Update types * Move HotelPin type * Fix todos * Merge branch 'master' into feat/sw-2873-move-selecthotel-to-booking-flow * Merge branch 'master' into feat/sw-2873-move-selecthotel-to-booking-flow * Fix component Approved-by: Joakim Jäderberg
This commit is contained in:
Anton Gunnarsson
134
packages/booking-flow/lib/pages/AlternativeHotelsMapPage.tsx
Normal file
134
packages/booking-flow/lib/pages/AlternativeHotelsMapPage.tsx
Normal file
@@ -0,0 +1,134 @@
|
||||
import { notFound } from "next/navigation"
|
||||
import { Suspense } from "react"
|
||||
|
||||
import { safeTry } from "@scandic-hotels/common/utils/safeTry"
|
||||
|
||||
import { env } from "../../env/server"
|
||||
import { MapContainer } from "../components/MapContainer"
|
||||
import {
|
||||
getFiltersFromHotels,
|
||||
getHotels,
|
||||
} from "../components/SelectHotel/helpers"
|
||||
import {
|
||||
SelectHotelMap,
|
||||
SelectHotelMapSkeleton,
|
||||
} from "../components/SelectHotel/SelectHotelMap"
|
||||
import { getHotelSearchDetails } from "../misc/getHotelSearchDetails"
|
||||
import { getSelectHotelTracking } from "../misc/selectHotelTracking"
|
||||
import { getCityCoordinates } from "../trpc/memoizedRequests/getCityCoordinates"
|
||||
import { parseSelectHotelSearchParams } from "../utils/url"
|
||||
|
||||
import type { Lang } from "@scandic-hotels/common/constants/language"
|
||||
import type {
|
||||
TrackingSDKHotelInfo,
|
||||
TrackingSDKPageData,
|
||||
} from "@scandic-hotels/common/tracking/types"
|
||||
|
||||
import type { NextSearchParams } from "../types"
|
||||
|
||||
export async function AlternativeHotelsMapPage({
|
||||
lang,
|
||||
searchParams,
|
||||
renderTracking,
|
||||
}: {
|
||||
lang: Lang
|
||||
searchParams: NextSearchParams
|
||||
renderTracking: (trackingProps: {
|
||||
hotelsTrackingData: TrackingSDKHotelInfo
|
||||
pageTrackingData: TrackingSDKPageData
|
||||
}) => React.ReactNode
|
||||
}) {
|
||||
const googleMapId = env.GOOGLE_DYNAMIC_MAP_ID
|
||||
const googleMapsApiKey = env.GOOGLE_STATIC_MAP_KEY
|
||||
|
||||
const booking = parseSelectHotelSearchParams(searchParams)
|
||||
|
||||
if (!booking) return notFound()
|
||||
|
||||
const getHotelSearchDetailsPromise = safeTry(
|
||||
getHotelSearchDetails({ ...booking, lang, isAlternativeHotels: true })
|
||||
)
|
||||
|
||||
const [searchDetails] = await getHotelSearchDetailsPromise
|
||||
|
||||
if (!searchDetails) {
|
||||
return notFound()
|
||||
}
|
||||
|
||||
const {
|
||||
city,
|
||||
cityIdentifier,
|
||||
hotel: isAlternativeFor,
|
||||
redemption,
|
||||
} = searchDetails
|
||||
|
||||
if (!city) {
|
||||
return notFound()
|
||||
}
|
||||
|
||||
const hotels = await getHotels({
|
||||
fromDate: booking.fromDate,
|
||||
toDate: booking.toDate,
|
||||
rooms: booking.rooms,
|
||||
isAlternativeFor,
|
||||
bookingCode: booking.bookingCode,
|
||||
city,
|
||||
redemption: !!redemption,
|
||||
lang,
|
||||
})
|
||||
|
||||
const cityCoordinates = await getCityCoordinates({
|
||||
city: city.name,
|
||||
hotel: { address: hotels?.[0]?.hotel?.address.streetAddress },
|
||||
})
|
||||
|
||||
const arrivalDate = new Date(booking.fromDate)
|
||||
const departureDate = new Date(booking.toDate)
|
||||
const isRedemptionAvailability = redemption
|
||||
? hotels.some(
|
||||
(hotel) => hotel.availability.productType?.redemptions?.length
|
||||
)
|
||||
: false
|
||||
|
||||
const isBookingCodeRateAvailable = booking.bookingCode
|
||||
? hotels?.some((hotel) => hotel.availability.bookingCode)
|
||||
: false
|
||||
|
||||
const { hotelsTrackingData, pageTrackingData } = getSelectHotelTracking({
|
||||
lang,
|
||||
pageId: isAlternativeFor ? "alternative-hotels" : "select-hotel",
|
||||
pageName: "hotelreservation|alternative-hotels|mapview",
|
||||
siteSections: "hotelreservation|altervative-hotels|mapview",
|
||||
arrivalDate,
|
||||
departureDate,
|
||||
rooms: booking.rooms,
|
||||
hotelsResult: hotels.length,
|
||||
searchTerm: isAlternativeFor ? booking.hotelId : cityIdentifier,
|
||||
country: hotels?.[0]?.hotel.address.country,
|
||||
hotelCity: hotels?.[0]?.hotel.address.city,
|
||||
bookingCode: booking.bookingCode,
|
||||
isBookingCodeRateAvailable,
|
||||
isRedemption: redemption,
|
||||
isRedemptionAvailable: isRedemptionAvailability,
|
||||
})
|
||||
|
||||
const filterList = getFiltersFromHotels(hotels)
|
||||
|
||||
return (
|
||||
<MapContainer>
|
||||
<Suspense key={booking.hotelId} fallback={<SelectHotelMapSkeleton />}>
|
||||
<SelectHotelMap
|
||||
apiKey={googleMapsApiKey}
|
||||
mapId={googleMapId}
|
||||
hotels={hotels}
|
||||
cityCoordinates={cityCoordinates}
|
||||
bookingCode={booking.bookingCode}
|
||||
isBookingCodeRateAvailable={isBookingCodeRateAvailable}
|
||||
isAlternativeHotels={true}
|
||||
filterList={filterList}
|
||||
/>
|
||||
{renderTracking({ hotelsTrackingData, pageTrackingData })}
|
||||
</Suspense>
|
||||
</MapContainer>
|
||||
)
|
||||
}
|
||||
137
packages/booking-flow/lib/pages/AlternativeHotelsPage.tsx
Normal file
137
packages/booking-flow/lib/pages/AlternativeHotelsPage.tsx
Normal file
@@ -0,0 +1,137 @@
|
||||
import stringify from "json-stable-stringify-without-jsonify"
|
||||
import { cookies } from "next/headers"
|
||||
import { notFound } from "next/navigation"
|
||||
import { Suspense } from "react"
|
||||
|
||||
import { FamilyAndFriendsCodes } from "@scandic-hotels/common/constants/familyAndFriends"
|
||||
|
||||
import { AlternativeHotelsPageTitle } from "../components/AlternativeHotelsPageTitle"
|
||||
import FnFNotAllowedAlert from "../components/FnFNotAllowedAlert"
|
||||
import { SelectHotel } from "../components/SelectHotel"
|
||||
import { getHotels } from "../components/SelectHotel/helpers"
|
||||
import { getHotelSearchDetails } from "../misc/getHotelSearchDetails"
|
||||
import { getSelectHotelTracking } from "../misc/selectHotelTracking"
|
||||
import { parseSelectHotelSearchParams } from "../utils/url"
|
||||
|
||||
import type { Lang } from "@scandic-hotels/common/constants/language"
|
||||
import type {
|
||||
TrackingSDKHotelInfo,
|
||||
TrackingSDKPageData,
|
||||
} from "@scandic-hotels/common/tracking/types"
|
||||
|
||||
import type { NextSearchParams } from "../types"
|
||||
|
||||
export async function AlternativeHotelsPage({
|
||||
lang,
|
||||
searchParams,
|
||||
renderTracking,
|
||||
}: {
|
||||
lang: Lang
|
||||
searchParams: NextSearchParams
|
||||
renderTracking: (trackingProps: {
|
||||
hotelsTrackingData: TrackingSDKHotelInfo
|
||||
pageTrackingData: TrackingSDKPageData
|
||||
}) => React.ReactNode
|
||||
}) {
|
||||
const booking = parseSelectHotelSearchParams(searchParams)
|
||||
|
||||
if (!booking) return notFound()
|
||||
|
||||
const searchDetails = await getHotelSearchDetails({
|
||||
...booking,
|
||||
lang,
|
||||
isAlternativeHotels: true,
|
||||
})
|
||||
|
||||
if (!searchDetails || !searchDetails.hotel || !searchDetails.city) {
|
||||
return notFound()
|
||||
}
|
||||
|
||||
// TODO move logic to function to reuse
|
||||
if (
|
||||
booking.bookingCode &&
|
||||
FamilyAndFriendsCodes.includes(booking.bookingCode)
|
||||
) {
|
||||
const cookieStore = await cookies()
|
||||
const isInvalidFNF = cookieStore.get("sc")?.value !== "1"
|
||||
|
||||
if (isInvalidFNF) {
|
||||
return <FnFNotAllowedAlert />
|
||||
}
|
||||
}
|
||||
|
||||
// TODO: This needs to be refactored into its
|
||||
// own functions
|
||||
const hotels = await getHotels({
|
||||
fromDate: booking.fromDate,
|
||||
toDate: booking.toDate,
|
||||
rooms: booking.rooms,
|
||||
isAlternativeFor: searchDetails.hotel,
|
||||
bookingCode: booking.bookingCode,
|
||||
city: searchDetails.city,
|
||||
redemption: !!searchDetails.redemption,
|
||||
lang,
|
||||
})
|
||||
|
||||
const arrivalDate = new Date(booking.fromDate)
|
||||
const departureDate = new Date(booking.toDate)
|
||||
|
||||
const isRedemptionAvailability = searchDetails.redemption
|
||||
? hotels.some(
|
||||
(hotel) => hotel.availability.productType?.redemptions?.length
|
||||
)
|
||||
: false
|
||||
|
||||
const isBookingCodeRateAvailable = booking.bookingCode
|
||||
? hotels.some(
|
||||
(hotel) =>
|
||||
hotel.availability.bookingCode &&
|
||||
hotel.availability.status === "Available"
|
||||
)
|
||||
: false
|
||||
|
||||
const { hotelsTrackingData, pageTrackingData } = getSelectHotelTracking({
|
||||
lang,
|
||||
pageId: searchDetails.hotel ? "alternative-hotels" : "select-hotel",
|
||||
pageName: searchDetails.hotel
|
||||
? "hotelreservation|alternative-hotels"
|
||||
: "hotelreservation|select-hotel",
|
||||
siteSections: searchDetails.hotel
|
||||
? "hotelreservation|alternative-hotels"
|
||||
: "hotelreservation|select-hotel",
|
||||
arrivalDate,
|
||||
departureDate,
|
||||
rooms: booking.rooms,
|
||||
hotelsResult: hotels?.length ?? 0,
|
||||
searchTerm: searchDetails.hotel
|
||||
? booking.hotelId
|
||||
: searchDetails.cityIdentifier,
|
||||
country: hotels?.[0]?.hotel.address.country,
|
||||
hotelCity: hotels?.[0]?.hotel.address.city,
|
||||
bookingCode: booking.bookingCode,
|
||||
isBookingCodeRateAvailable,
|
||||
isRedemption: searchDetails.redemption,
|
||||
isRedemptionAvailable: isRedemptionAvailability,
|
||||
})
|
||||
|
||||
const suspenseKey = stringify(searchParams)
|
||||
|
||||
return (
|
||||
<>
|
||||
<SelectHotel
|
||||
bookingCode={booking.bookingCode}
|
||||
city={searchDetails.city}
|
||||
hotels={hotels}
|
||||
isAlternative={!!searchDetails.hotel}
|
||||
isBookingCodeRateAvailable={isBookingCodeRateAvailable}
|
||||
title={
|
||||
<AlternativeHotelsPageTitle hotelName={searchDetails.hotel.name} />
|
||||
}
|
||||
lang={lang}
|
||||
/>
|
||||
<Suspense key={`${suspenseKey}-tracking`} fallback={null}>
|
||||
{renderTracking({ hotelsTrackingData, pageTrackingData })}
|
||||
</Suspense>
|
||||
</>
|
||||
)
|
||||
}
|
||||
136
packages/booking-flow/lib/pages/SelectHotelMapPage.tsx
Normal file
136
packages/booking-flow/lib/pages/SelectHotelMapPage.tsx
Normal file
@@ -0,0 +1,136 @@
|
||||
import stringify from "json-stable-stringify-without-jsonify"
|
||||
import { notFound } from "next/navigation"
|
||||
import { Suspense } from "react"
|
||||
|
||||
import { safeTry } from "@scandic-hotels/common/utils/safeTry"
|
||||
|
||||
import { env } from "../../env/server"
|
||||
import { MapContainer } from "../components/MapContainer"
|
||||
import {
|
||||
getFiltersFromHotels,
|
||||
getHotels,
|
||||
} from "../components/SelectHotel/helpers"
|
||||
import {
|
||||
SelectHotelMap,
|
||||
SelectHotelMapSkeleton,
|
||||
} from "../components/SelectHotel/SelectHotelMap"
|
||||
import { getHotelSearchDetails } from "../misc/getHotelSearchDetails"
|
||||
import { getSelectHotelTracking } from "../misc/selectHotelTracking"
|
||||
import { getCityCoordinates } from "../trpc/memoizedRequests/getCityCoordinates"
|
||||
import { parseSelectHotelSearchParams } from "../utils/url"
|
||||
|
||||
import type { Lang } from "@scandic-hotels/common/constants/language"
|
||||
import type {
|
||||
TrackingSDKHotelInfo,
|
||||
TrackingSDKPageData,
|
||||
} from "@scandic-hotels/common/tracking/types"
|
||||
|
||||
import type { NextSearchParams } from "../types"
|
||||
|
||||
export async function SelectHotelMapPage({
|
||||
lang,
|
||||
searchParams,
|
||||
renderTracking,
|
||||
}: {
|
||||
lang: Lang
|
||||
searchParams: NextSearchParams
|
||||
renderTracking: (trackingProps: {
|
||||
hotelsTrackingData: TrackingSDKHotelInfo
|
||||
pageTrackingData: TrackingSDKPageData
|
||||
}) => React.ReactNode
|
||||
}) {
|
||||
const googleMapId = env.GOOGLE_DYNAMIC_MAP_ID
|
||||
const googleMapsApiKey = env.GOOGLE_STATIC_MAP_KEY
|
||||
|
||||
const booking = parseSelectHotelSearchParams(searchParams)
|
||||
|
||||
if (!booking) return notFound()
|
||||
|
||||
const getHotelSearchDetailsPromise = safeTry(
|
||||
getHotelSearchDetails({ ...booking, lang })
|
||||
)
|
||||
|
||||
const [searchDetails] = await getHotelSearchDetailsPromise
|
||||
|
||||
if (!searchDetails) {
|
||||
return notFound()
|
||||
}
|
||||
|
||||
const {
|
||||
city,
|
||||
cityIdentifier,
|
||||
hotel: isAlternativeFor,
|
||||
redemption,
|
||||
} = searchDetails
|
||||
|
||||
if (!city) {
|
||||
return notFound()
|
||||
}
|
||||
|
||||
const hotels = await getHotels({
|
||||
fromDate: booking.fromDate,
|
||||
toDate: booking.toDate,
|
||||
rooms: booking.rooms,
|
||||
isAlternativeFor,
|
||||
bookingCode: booking.bookingCode,
|
||||
city,
|
||||
redemption: !!redemption,
|
||||
lang,
|
||||
})
|
||||
|
||||
const cityCoordinates = await getCityCoordinates({
|
||||
city: city.name,
|
||||
hotel: { address: hotels?.[0]?.hotel?.address.streetAddress },
|
||||
})
|
||||
|
||||
const arrivalDate = new Date(booking.fromDate)
|
||||
const departureDate = new Date(booking.toDate)
|
||||
const isRedemptionAvailability = redemption
|
||||
? hotels.some(
|
||||
(hotel) => hotel.availability.productType?.redemptions?.length
|
||||
)
|
||||
: false
|
||||
|
||||
const isBookingCodeRateAvailable = booking.bookingCode
|
||||
? hotels?.some((hotel) => hotel.availability.bookingCode)
|
||||
: false
|
||||
|
||||
const { hotelsTrackingData, pageTrackingData } = getSelectHotelTracking({
|
||||
lang,
|
||||
pageId: isAlternativeFor ? "alternative-hotels" : "select-hotel",
|
||||
pageName: "hotelreservation|select-hotel|mapview",
|
||||
siteSections: "hotelreservation|select-hotel|mapview",
|
||||
arrivalDate,
|
||||
departureDate,
|
||||
rooms: booking.rooms,
|
||||
hotelsResult: hotels.length,
|
||||
searchTerm: isAlternativeFor ? booking.hotelId : cityIdentifier,
|
||||
country: hotels?.[0]?.hotel.address.country,
|
||||
hotelCity: hotels?.[0]?.hotel.address.city,
|
||||
bookingCode: booking.bookingCode,
|
||||
isBookingCodeRateAvailable,
|
||||
isRedemption: redemption,
|
||||
isRedemptionAvailable: isRedemptionAvailability,
|
||||
})
|
||||
|
||||
const filterList = getFiltersFromHotels(hotels)
|
||||
|
||||
const suspenseKey = stringify(searchParams)
|
||||
|
||||
return (
|
||||
<MapContainer>
|
||||
<Suspense key={suspenseKey} fallback={<SelectHotelMapSkeleton />}>
|
||||
<SelectHotelMap
|
||||
apiKey={googleMapsApiKey}
|
||||
mapId={googleMapId}
|
||||
hotels={hotels}
|
||||
cityCoordinates={cityCoordinates}
|
||||
bookingCode={booking.bookingCode}
|
||||
isBookingCodeRateAvailable={isBookingCodeRateAvailable}
|
||||
filterList={filterList}
|
||||
/>
|
||||
{renderTracking({ hotelsTrackingData, pageTrackingData })}
|
||||
</Suspense>
|
||||
</MapContainer>
|
||||
)
|
||||
}
|
||||
120
packages/booking-flow/lib/pages/SelectHotelPage.tsx
Normal file
120
packages/booking-flow/lib/pages/SelectHotelPage.tsx
Normal file
@@ -0,0 +1,120 @@
|
||||
import stringify from "json-stable-stringify-without-jsonify"
|
||||
import { cookies } from "next/headers"
|
||||
import { notFound } from "next/navigation"
|
||||
import { Suspense } from "react"
|
||||
|
||||
import { FamilyAndFriendsCodes } from "@scandic-hotels/common/constants/familyAndFriends"
|
||||
|
||||
import FnFNotAllowedAlert from "../components/FnFNotAllowedAlert"
|
||||
import { SelectHotel } from "../components/SelectHotel"
|
||||
import { getHotels } from "../components/SelectHotel/helpers"
|
||||
import { getHotelSearchDetails } from "../misc/getHotelSearchDetails"
|
||||
import { getSelectHotelTracking } from "../misc/selectHotelTracking"
|
||||
import { parseSelectHotelSearchParams } from "../utils/url"
|
||||
|
||||
import type { Lang } from "@scandic-hotels/common/constants/language"
|
||||
import type {
|
||||
TrackingSDKHotelInfo,
|
||||
TrackingSDKPageData,
|
||||
} from "@scandic-hotels/common/tracking/types"
|
||||
|
||||
import type { NextSearchParams } from "../types"
|
||||
|
||||
export async function SelectHotelPage({
|
||||
lang,
|
||||
searchParams,
|
||||
renderTracking,
|
||||
}: {
|
||||
lang: Lang
|
||||
searchParams: NextSearchParams
|
||||
renderTracking: (trackingProps: {
|
||||
hotelsTrackingData: TrackingSDKHotelInfo
|
||||
pageTrackingData: TrackingSDKPageData
|
||||
}) => React.ReactNode
|
||||
}) {
|
||||
const booking = parseSelectHotelSearchParams(searchParams)
|
||||
|
||||
if (!booking) return notFound()
|
||||
|
||||
const searchDetails = await getHotelSearchDetails({ ...booking, lang })
|
||||
|
||||
if (!searchDetails || !searchDetails.city) return notFound()
|
||||
|
||||
if (
|
||||
booking.bookingCode &&
|
||||
FamilyAndFriendsCodes.includes(booking.bookingCode)
|
||||
) {
|
||||
const cookieStore = await cookies()
|
||||
const isInvalidFNF = cookieStore.get("sc")?.value !== "1"
|
||||
|
||||
if (isInvalidFNF) {
|
||||
return <FnFNotAllowedAlert />
|
||||
}
|
||||
}
|
||||
|
||||
const { city, redemption } = searchDetails
|
||||
|
||||
const hotels = await getHotels({
|
||||
fromDate: booking.fromDate,
|
||||
toDate: booking.toDate,
|
||||
rooms: booking.rooms,
|
||||
isAlternativeFor: null,
|
||||
bookingCode: booking.bookingCode,
|
||||
city: city,
|
||||
redemption: !!redemption,
|
||||
lang,
|
||||
})
|
||||
|
||||
const isRedemptionAvailability = redemption
|
||||
? hotels.some(
|
||||
(hotel) => hotel.availability.productType?.redemptions?.length
|
||||
)
|
||||
: false
|
||||
|
||||
const isBookingCodeRateAvailable = booking.bookingCode
|
||||
? hotels.some(
|
||||
(hotel) =>
|
||||
hotel.availability.bookingCode &&
|
||||
hotel.availability.status === "Available"
|
||||
)
|
||||
: false
|
||||
|
||||
const arrivalDate = new Date(booking.fromDate)
|
||||
const departureDate = new Date(booking.toDate)
|
||||
|
||||
const { hotelsTrackingData, pageTrackingData } = getSelectHotelTracking({
|
||||
rooms: booking.rooms,
|
||||
lang: lang,
|
||||
pageId: "select-hotel",
|
||||
pageName: "hotelreservation|select-hotel",
|
||||
siteSections: "hotelreservation|select-hotel",
|
||||
arrivalDate,
|
||||
departureDate,
|
||||
hotelsResult: hotels?.length ?? 0,
|
||||
searchTerm: booking.hotelId,
|
||||
country: hotels?.[0]?.hotel.address.country,
|
||||
hotelCity: hotels?.[0]?.hotel.address.city,
|
||||
bookingCode: booking.bookingCode,
|
||||
isBookingCodeRateAvailable,
|
||||
isRedemption: redemption,
|
||||
isRedemptionAvailable: isRedemptionAvailability,
|
||||
})
|
||||
|
||||
const suspenseKey = stringify(searchParams)
|
||||
|
||||
return (
|
||||
<>
|
||||
<SelectHotel
|
||||
bookingCode={booking.bookingCode}
|
||||
isBookingCodeRateAvailable={isBookingCodeRateAvailable}
|
||||
city={city}
|
||||
hotels={hotels}
|
||||
title={city.name}
|
||||
lang={lang}
|
||||
/>
|
||||
<Suspense key={`${suspenseKey}-tracking`} fallback={null}>
|
||||
{renderTracking({ hotelsTrackingData, pageTrackingData })}
|
||||
</Suspense>
|
||||
</>
|
||||
)
|
||||
}
|
||||
Reference in New Issue
Block a user