scandic/web
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Fix/SW-2429 map view

Browse Source 
* feat(SW-2429): Removed [contentType]>[uid] and use app router based structure for content types

* feat(SW-2429): Added breadcrumbs to follow contenttype folder structure

* feat(SW-2429): Removed modal/dialog functionality from map views on hotel and destination pages

* fix(SW-2429): Fixed issue with booking widget on meeting pages. Also used same structure for content types

Approved-by: Arvid Norlin
This commit is contained in:
Erik Tiekstra
2025-04-25 05:36:44 +00:00
parent 6d7fbe0894
commit b75177ad98
55 changed files with 705 additions and 730 deletions
Download Patch File Download Diff File Expand all files Collapse all files

19
apps/scandic-web/app/[lang]/(live)/(public)/(contentTypes)/@breadcrumbs/collection_page/[uid]/page.tsx Normal file
View File

@@ -0,0 +1,19 @@
import { Suspense } from "react"
import Breadcrumbs from "@/components/Breadcrumbs"
import BreadcrumbsSkeleton from "@/components/TempDesignSystem/Breadcrumbs/BreadcrumbsSkeleton"
import type { BreadcrumbsProps } from "@/components/TempDesignSystem/Breadcrumbs/breadcrumbs"
export default function CollectionPageBreadcrumbs() {
const variants: Pick<BreadcrumbsProps, "color" | "size"> = {
color: "Surface/Secondary/Default",
size: "contentWidth",
}
return (
<Suspense fallback={<BreadcrumbsSkeleton {...variants} />}>
<Breadcrumbs {...variants} />
</Suspense>
)
}

3
apps/scandic-web/app/[lang]/(live)/(public)/(contentTypes)/@breadcrumbs/content_page/[uid]/page.tsx Normal file
View File

@@ -0,0 +1,3 @@
export default function ContentPageBreadcrumbs() {
return null
}

3
apps/scandic-web/app/[lang]/(live)/(public)/(contentTypes)/@breadcrumbs/destination_city_page/[uid]/page.tsx Normal file
View File

@@ -0,0 +1,3 @@
export default function DestinationCityPageBreadcrumbs() {
return null
}

3
apps/scandic-web/app/[lang]/(live)/(public)/(contentTypes)/@breadcrumbs/destination_country_page/[uid]/page.tsx Normal file
View File

@@ -0,0 +1,3 @@
export default function DestinationCountryPageBreadcrumbs() {
return null
}

0
apps/scandic-web/app/[lang]/(live)/(public)/destination_overview_page/[uid]/@breadcrumbs/page.tsx → apps/scandic-web/app/[lang]/(live)/(public)/(contentTypes)/@breadcrumbs/destination_overview_page/[uid]/page.tsx
View File

3
apps/scandic-web/app/[lang]/(live)/(public)/(contentTypes)/@breadcrumbs/hotel_page/[uid]/page.tsx Normal file
View File

@@ -0,0 +1,3 @@
export default function HotelPageBreadcrumbs() {
return null
}

12
apps/scandic-web/app/[lang]/(live)/(public)/(contentTypes)/@breadcrumbs/loyalty_page/[uid]/page.tsx Normal file
View File

@@ -0,0 +1,12 @@
import { Suspense } from "react"
import Breadcrumbs from "@/components/Breadcrumbs"
import BreadcrumbsSkeleton from "@/components/TempDesignSystem/Breadcrumbs/BreadcrumbsSkeleton"
export default function LoyaltyPageBreadcrumbs() {
return (
<Suspense fallback={<BreadcrumbsSkeleton />}>
<Breadcrumbs />
</Suspense>
)
}

3
apps/scandic-web/app/[lang]/(live)/(public)/(contentTypes)/@breadcrumbs/start_page/[uid]/page.tsx Normal file
View File

@@ -0,0 +1,3 @@
export default function StartPageBreadcrumbs() {
return null
}

1
apps/scandic-web/app/[lang]/(live)/(public)/(contentTypes)/@preview/default.tsx Normal file
View File

@@ -0,0 +1 @@
export { default } from "./page"

0
apps/scandic-web/app/[lang]/(live)/(public)/[contentType]/[uid]/@preview/loading.tsx → apps/scandic-web/app/[lang]/(live)/(public)/(contentTypes)/@preview/loading.tsx
View File

0
apps/scandic-web/app/[lang]/(live)/(public)/[contentType]/[uid]/@preview/page.tsx → apps/scandic-web/app/[lang]/(live)/(public)/(contentTypes)/@preview/page.tsx
View File

7
apps/scandic-web/app/[lang]/(live)/(public)/(contentTypes)/collection_page/[uid]/page.tsx Normal file
View File

@@ -0,0 +1,7 @@
import CollectionPage from "@/components/ContentType/StaticPages/CollectionPage"
export { generateMetadata } from "@/utils/generateMetadata"
export default function CollectionPagePage() {
return <CollectionPage />
}

32
apps/scandic-web/app/[lang]/(live)/(public)/(contentTypes)/content_page/[uid]/page.tsx Normal file
View File

@@ -0,0 +1,32 @@
import { headers } from "next/headers"
import { notFound, redirect } from "next/navigation"
import { overview } from "@/constants/routes/myPages"
import { isSignupPage } from "@/constants/routes/signup"
import { env } from "@/env/server"
import { auth } from "@/auth"
import ContentPage from "@/components/ContentType/StaticPages/ContentPage"
import { getLang } from "@/i18n/serverContext"
import { isValidSession } from "@/utils/session"
export { generateMetadata } from "@/utils/generateMetadata"
export default async function ContentPagePage() {
const lang = getLang()
const pathname = headers().get("x-pathname") || ""
const isSignupRoute = isSignupPage(pathname)
if (isSignupRoute) {
if (!env.SHOW_SIGNUP_FLOW) {
notFound()
}
const session = await auth()
if (isValidSession(session)) {
redirect(overview[lang])
}
}
return <ContentPage />
}

25
apps/scandic-web/app/[lang]/(live)/(public)/(contentTypes)/destination_city_page/[uid]/page.tsx Normal file
View File

@@ -0,0 +1,25 @@
import { notFound } from "next/navigation"
import { Suspense } from "react"
import { env } from "@/env/server"
import DestinationCityPage from "@/components/ContentType/DestinationPage/DestinationCityPage"
import DestinationCityPageSkeleton from "@/components/ContentType/DestinationPage/DestinationCityPage/DestinationCityPageSkeleton"
import type { PageArgs } from "@/types/params"
export { generateMetadata } from "@/utils/generateMetadata"
export default function DestinationCityPagePage({
searchParams,
}: PageArgs<{}, { view?: "map" }>) {
if (env.HIDE_FOR_NEXT_RELEASE) {
notFound()
}
return (
<Suspense fallback={<DestinationCityPageSkeleton />}>
<DestinationCityPage isMapView={searchParams.view === "map"} />
</Suspense>
)
}

29
apps/scandic-web/app/[lang]/(live)/(public)/(contentTypes)/destination_country_page/[uid]/page.tsx Normal file
View File

@@ -0,0 +1,29 @@
import { notFound } from "next/navigation"
import { Suspense } from "react"
import { env } from "@/env/server"
import DestinationCountryPage from "@/components/ContentType/DestinationPage/DestinationCountryPage"
import DestinationCountryPageSkeleton from "@/components/ContentType/DestinationPage/DestinationCountryPage/DestinationCountryPageSkeleton"
import type { PageArgs } from "@/types/params"
export { generateMetadata } from "@/utils/generateMetadata"
export default function DestinationCountryPagePage({}: PageArgs<
{},
{ view?: "map" }
>) {
if (env.HIDE_FOR_NEXT_RELEASE) {
notFound()
}
return (
<Suspense fallback={<DestinationCountryPageSkeleton />}>
<DestinationCountryPage
// isMapView={searchParams.view === "map"} // Disabled until further notice
isMapView={false}
/>
</Suspense>
)
}

0
apps/scandic-web/app/[lang]/(live)/(public)/destination_overview_page/[uid]/error.tsx → apps/scandic-web/app/[lang]/(live)/(public)/(contentTypes)/destination_overview_page/[uid]/error.tsx
View File

0
apps/scandic-web/app/[lang]/(live)/(public)/destination_overview_page/[uid]/loading.tsx → apps/scandic-web/app/[lang]/(live)/(public)/(contentTypes)/destination_overview_page/[uid]/loading.tsx
View File

0
apps/scandic-web/app/[lang]/(live)/(public)/destination_overview_page/[uid]/page.tsx → apps/scandic-web/app/[lang]/(live)/(public)/(contentTypes)/destination_overview_page/[uid]/page.tsx
View File

38
apps/scandic-web/app/[lang]/(live)/(public)/(contentTypes)/hotel_page/[uid]/page.tsx Normal file
View File

@@ -0,0 +1,38 @@
import { notFound } from "next/navigation"
import { env } from "@/env/server"
import { getHotelPage } from "@/lib/trpc/memoizedRequests"
import HotelMapPage from "@/components/ContentType/HotelMapPage"
import HotelPage from "@/components/ContentType/HotelPage"
import HotelSubpage from "@/components/ContentType/HotelSubpage"
import type { PageArgs } from "@/types/params"
export { generateMetadata } from "@/utils/generateMetadata"
export default async function HotelPagePage({
searchParams,
}: PageArgs<{}, { subpage?: string; view?: "map" }>) {
if (env.HIDE_FOR_NEXT_RELEASE) {
return notFound()
}
const hotelPageData = await getHotelPage()
if (!hotelPageData) {
notFound()
}
if (searchParams.subpage) {
return (
<HotelSubpage
hotelId={hotelPageData.hotel_page_id}
subpage={searchParams.subpage}
/>
)
}
if (searchParams.view === "map") {
return <HotelMapPage hotelId={hotelPageData.hotel_page_id} />
}
return <HotelPage hotelId={hotelPageData.hotel_page_id} />
}

0
apps/scandic-web/app/[lang]/(live)/(public)/[contentType]/[uid]/layout.module.css → apps/scandic-web/app/[lang]/(live)/(public)/(contentTypes)/layout.module.css
View File

24
apps/scandic-web/app/[lang]/(live)/(public)/(contentTypes)/layout.tsx Normal file
View File

@@ -0,0 +1,24 @@
import styles from "./layout.module.css"
import type { LangParams, LayoutArgs } from "@/types/params"
export default function ContentTypeLayout({
breadcrumbs,
preview,
children,
}: React.PropsWithChildren<
LayoutArgs<LangParams> & {
breadcrumbs: React.ReactNode
preview: React.ReactNode
}
>) {
return (
<div className={styles.container}>
<section className={styles.layout}>
{preview}
{breadcrumbs}
{children}
</section>
</div>
)
}

0
apps/scandic-web/app/[lang]/(live)/(public)/[contentType]/[uid]/loading.tsx → apps/scandic-web/app/[lang]/(live)/(public)/(contentTypes)/loading.tsx
View File

7
apps/scandic-web/app/[lang]/(live)/(public)/(contentTypes)/loyalty_page/[uid]/page.tsx Normal file
View File

@@ -0,0 +1,7 @@
import LoyaltyPage from "@/components/ContentType/LoyaltyPage"
export { generateMetadata } from "@/utils/generateMetadata"
export default function LoyaltyPagePage() {
return <LoyaltyPage />
}

19
apps/scandic-web/app/[lang]/(live)/(public)/(contentTypes)/start_page/[uid]/page.tsx Normal file
View File

@@ -0,0 +1,19 @@
import { notFound } from "next/navigation"
import { env } from "@/env/server"
import StartPage from "@/components/ContentType/StartPage"
import type { BookingWidgetSearchData } from "@/types/components/bookingWidget"
import type { PageArgs } from "@/types/params"
export { generateMetadata } from "@/utils/generateMetadata"
export default function StartPagePage({
searchParams,
}: PageArgs<{}, BookingWidgetSearchData>) {
if (env.HIDE_FOR_NEXT_RELEASE) {
notFound()
}
return <StartPage searchParams={searchParams} />
}

55
apps/scandic-web/app/[lang]/(live)/(public)/[contentType]/[uid]/@breadcrumbs/page.tsx
View File

@@ -1,55 +0,0 @@
import { Suspense } from "react"
import Breadcrumbs from "@/components/Breadcrumbs"
import BreadcrumbsSkeleton from "@/components/TempDesignSystem/Breadcrumbs/BreadcrumbsSkeleton"
import type { ContentTypeParams, LangParams, PageArgs } from "@/types/params"
import { PageContentTypeEnum } from "@/types/requests/contentType"
import type { BreadcrumbsProps } from "@/components/TempDesignSystem/Breadcrumbs/breadcrumbs"
// This is a temporary solution to avoid showing breadcrumbs on certain content types.
// This should be refactored in the future to handle content types differently, similar to `destination_overview_page`.
const IGNORED_CONTENT_TYPES = [
PageContentTypeEnum.hotelPage,
PageContentTypeEnum.contentPage,
PageContentTypeEnum.destinationCityPage,
PageContentTypeEnum.destinationCountryPage,
PageContentTypeEnum.destinationOverviewPage,
PageContentTypeEnum.startPage,
]
// This function is temporary until the content types are refactored and handled differently, similar to `destination_overview_page`.
function getBreadcrumbsVariantsByContentType(
contentType: PageContentTypeEnum
): Pick<BreadcrumbsProps, "color" | "size"> | null {
switch (contentType) {
case PageContentTypeEnum.collectionPage:
return { color: "Surface/Secondary/Default", size: "contentWidth" }
default:
return null
}
}
// We need to return null for both ignored content types and non-existent content types
// In order to no having to maintain an explicit array of all content types besides the PageContentTypeEnum we convert it here.
const allowedContentTypes = Object.keys(PageContentTypeEnum)
.map((key) => {
return PageContentTypeEnum[key as keyof typeof PageContentTypeEnum]
})
.filter((c) => !IGNORED_CONTENT_TYPES.includes(c))
export default function PageBreadcrumbs({
params,
}: PageArgs<LangParams & ContentTypeParams>) {
if (!allowedContentTypes.includes(params.contentType)) {
return null
}
const variants = getBreadcrumbsVariantsByContentType(params.contentType)
return (
<Suspense fallback={<BreadcrumbsSkeleton {...variants} />}>
<Breadcrumbs {...variants} />
</Suspense>
)
}

35
apps/scandic-web/app/[lang]/(live)/(public)/[contentType]/[uid]/layout.tsx
View File

@@ -1,35 +0,0 @@
import styles from "./layout.module.css"
import type {
ContentTypeParams,
LangParams,
LayoutArgs,
UIDParams,
} from "@/types/params"
export default function ContentTypeLayout({
breadcrumbs,
preview,
children,
//params,
}: React.PropsWithChildren<
LayoutArgs<LangParams & ContentTypeParams & UIDParams> & {
breadcrumbs: React.ReactNode
preview: React.ReactNode
}
>) {
// Would like a better way to check if the contentType is valid.
// Perhaps a case for using an `{} as const` object for PageContentTypes instead?
// if (!Object.values(PageContentTypeEnum).includes(params.contentType)) {
// notFound()
// }
return (
<div className={styles.container}>
<section className={styles.layout}>
{preview}
{breadcrumbs}
{children}
</section>
</div>
)
}

111
apps/scandic-web/app/[lang]/(live)/(public)/[contentType]/[uid]/page.tsx
View File

@@ -1,111 +0,0 @@
import { headers } from "next/headers"
import { notFound, redirect } from "next/navigation"
import { Suspense } from "react"
import { overview } from "@/constants/routes/myPages"
import { isSignupPage } from "@/constants/routes/signup"
import { env } from "@/env/server"
import { getHotelPage } from "@/lib/trpc/memoizedRequests"
import { auth } from "@/auth"
import DestinationCityPage from "@/components/ContentType/DestinationPage/DestinationCityPage"
import DestinationCityPageSkeleton from "@/components/ContentType/DestinationPage/DestinationCityPage/DestinationCityPageSkeleton"
import DestinationCountryPage from "@/components/ContentType/DestinationPage/DestinationCountryPage"
import DestinationCountryPageSkeleton from "@/components/ContentType/DestinationPage/DestinationCountryPage/DestinationCountryPageSkeleton"
import HotelPage from "@/components/ContentType/HotelPage"
import HotelSubpage from "@/components/ContentType/HotelSubpage"
import LoyaltyPage from "@/components/ContentType/LoyaltyPage"
import StartPage from "@/components/ContentType/StartPage"
import CollectionPage from "@/components/ContentType/StaticPages/CollectionPage"
import ContentPage from "@/components/ContentType/StaticPages/ContentPage"
import { getLang } from "@/i18n/serverContext"
import { isValidSession } from "@/utils/session"
import type {
LangParams,
NonAppRouterContentTypeParams,
PageArgs,
UIDParams,
} from "@/types/params"
import { PageContentTypeEnum } from "@/types/requests/contentType"
export { generateMetadata } from "@/utils/generateMetadata"
export default async function ContentTypePage({
params,
searchParams,
}: PageArgs<
LangParams & NonAppRouterContentTypeParams & UIDParams,
{ subpage?: string; filterFromUrl?: string }
>) {
const pathname = headers().get("x-pathname") || ""
switch (params.contentType) {
case PageContentTypeEnum.collectionPage:
return <CollectionPage />
case PageContentTypeEnum.contentPage: {
const isSignupRoute = isSignupPage(pathname)
if (isSignupRoute) {
if (!env.SHOW_SIGNUP_FLOW) {
return notFound()
}
const session = await auth()
if (isValidSession(session)) {
redirect(overview[getLang()])
}
}
return <ContentPage />
}
case PageContentTypeEnum.loyaltyPage:
return <LoyaltyPage />
case PageContentTypeEnum.destinationCountryPage:
if (env.HIDE_FOR_NEXT_RELEASE) {
return notFound()
}
return (
<Suspense fallback={<DestinationCountryPageSkeleton />}>
<DestinationCountryPage />
</Suspense>
)
case PageContentTypeEnum.destinationCityPage:
if (env.HIDE_FOR_NEXT_RELEASE) {
return notFound()
}
return (
<Suspense fallback={<DestinationCityPageSkeleton />}>
<DestinationCityPage />
</Suspense>
)
case PageContentTypeEnum.hotelPage:
if (env.HIDE_FOR_NEXT_RELEASE) {
return notFound()
}
const hotelPageData = await getHotelPage()
if (hotelPageData) {
if (searchParams.subpage) {
return (
<HotelSubpage
hotelId={hotelPageData.hotel_page_id}
subpage={searchParams.subpage}
/>
)
}
return <HotelPage hotelId={hotelPageData.hotel_page_id} />
}
notFound()
case PageContentTypeEnum.startPage:
if (env.HIDE_FOR_NEXT_RELEASE) {
return notFound()
}
return <StartPage searchParams={searchParams} />
default:
const type: never = params.contentType
console.error(`Unsupported content type given: ${type}`)
notFound()
}
}

1
apps/scandic-web/app/[lang]/(live)/(public)/destination_overview_page/[uid]/@preview/loading.tsx
View File

@@ -1 +0,0 @@
export { default } from "../../../[contentType]/[uid]/@preview/loading"

1
apps/scandic-web/app/[lang]/(live)/(public)/destination_overview_page/[uid]/@preview/page.tsx
View File

@@ -1 +0,0 @@
export { default } from "../../../[contentType]/[uid]/@preview/page"

1
apps/scandic-web/app/[lang]/(live)/(public)/destination_overview_page/[uid]/layout.tsx
View File

@@ -1 +0,0 @@
export { default } from "../../[contentType]/[uid]/layout"

24
apps/scandic-web/app/[lang]/(live)/@bookingwidget/(contentTypes)/destination_city_page/[uid]/page.tsx Normal file
View File

@@ -0,0 +1,24 @@
import { env } from "@/env/server"
import { getDestinationCityPage } from "@/lib/trpc/memoizedRequests"
import BookingWidget from "@/components/BookingWidget"
import type { BookingWidgetSearchData } from "@/types/components/bookingWidget"
import type { PageArgs } from "@/types/params"
export default async function BookingWidgetDestinationCityPage({
searchParams,
}: PageArgs<{}, BookingWidgetSearchData>) {
if (!env.ENABLE_BOOKING_WIDGET) {
return null
}
const { bookingCode } = searchParams
const pageData = await getDestinationCityPage()
const bookingWidgetSearchParams = {
bookingCode: bookingCode ?? "",
city: pageData?.city.name ?? "",
}
return <BookingWidget bookingWidgetSearchParams={bookingWidgetSearchParams} />
}

39
apps/scandic-web/app/[lang]/(live)/@bookingwidget/(contentTypes)/hotel_page/[uid]/page.tsx Normal file
View File

@@ -0,0 +1,39 @@
import { env } from "@/env/server"
import { getHotel, getHotelPage } from "@/lib/trpc/memoizedRequests"
import BookingWidget from "@/components/BookingWidget"
import { getLang } from "@/i18n/serverContext"
import type { BookingWidgetSearchData } from "@/types/components/bookingWidget"
import type { PageArgs } from "@/types/params"
export default async function BookingWidgetHotelPage({
searchParams,
}: PageArgs<{}, BookingWidgetSearchData & { subpage?: string }>) {
if (!env.ENABLE_BOOKING_WIDGET) {
return null
}
const { bookingCode, subpage } = searchParams
const hotelPageData = await getHotelPage()
const hotelData = await getHotel({
hotelId: hotelPageData?.hotel_page_id || "",
language: getLang(),
isCardOnlyPayment: false,
})
const isMeetingSubpage =
subpage && hotelData?.additionalData.meetingRooms.nameInUrl === subpage
if (isMeetingSubpage) {
return null
}
const bookingWidgetSearchParams = {
bookingCode: bookingCode ?? "",
hotel: hotelData?.hotel.id ?? "",
city: hotelData?.hotel.cityName ?? "",
}
return <BookingWidget bookingWidgetSearchParams={bookingWidgetSearchParams} />
}

3
apps/scandic-web/app/[lang]/(live)/@bookingwidget/(contentTypes)/start_page/[uid]/page.tsx Normal file
View File

@@ -0,0 +1,3 @@
export default async function BookingWidgetStartPage() {
return null
}

1
apps/scandic-web/app/[lang]/(live)/@bookingwidget/[contentType]/[uid]/[...paths]/page.tsx
View File

@@ -1 +0,0 @@
export { default } from "../page"

64
apps/scandic-web/app/[lang]/(live)/@bookingwidget/[contentType]/[uid]/page.tsx
View File

@@ -1,64 +0,0 @@
import { env } from "@/env/server"
import { getHotel, getHotelPage } from "@/lib/trpc/memoizedRequests"
import BookingWidget from "@/components/BookingWidget"
import { getLang } from "@/i18n/serverContext"
import type { BookingWidgetSearchData } from "@/types/components/bookingWidget"
import type { ContentTypeParams, PageArgs } from "@/types/params"
import { PageContentTypeEnum } from "@/types/requests/contentType"
export default async function BookingWidgetPage({
params,
searchParams,
}: PageArgs<ContentTypeParams, BookingWidgetSearchData>) {
if (!env.ENABLE_BOOKING_WIDGET) {
return null
}
if (params.contentType === PageContentTypeEnum.startPage) {
return null
}
if (params.contentType === PageContentTypeEnum.hotelPage) {
return (
<BookingWidgetOnHotelPage
bookingCode={searchParams.bookingCode}
subpage={searchParams.subpage}
/>
)
}
return <BookingWidget bookingWidgetSearchParams={searchParams} />
}
async function BookingWidgetOnHotelPage({
bookingCode,
subpage,
}: {
bookingCode?: string
subpage: string
}) {
const hotelPageData = await getHotelPage()
const hotelData = await getHotel({
hotelId: hotelPageData?.hotel_page_id || "",
language: getLang(),
isCardOnlyPayment: false,
})
const isMeetingSubpage =
hotelData?.additionalData.meetingRooms.nameInUrl === subpage
if (isMeetingSubpage) {
return null
}
const hotelPageParams = {
bookingCode: bookingCode ?? "",
hotel: hotelData?.hotel.id ?? "",
city: hotelData?.hotel.cityName ?? "",
}
return <BookingWidget bookingWidgetSearchParams={hotelPageParams} />
}

4
apps/scandic-web/components/ContentType/DestinationPage/DestinationCityPage/CityMap/cityMap.module.css
View File

@@ -1,3 +1,7 @@
.title {
color: var(--Text-Heading);
}
@media screen and (max-width: 949px) {
.title {
display: none;

17
apps/scandic-web/components/ContentType/DestinationPage/DestinationCityPage/CityMap/index.tsx
View File

@@ -1,9 +1,9 @@
"use client"
import { useIntl } from "react-intl"
import { useDestinationDataStore } from "@/stores/destination-data"
import { Typography } from "@scandic-hotels/design-system/Typography"
import Title from "@/components/TempDesignSystem/Text/Title"
import { useDestinationDataStore } from "@/stores/destination-data"
import Map from "../../Map"
import { getHeadingText } from "../../utils"
@@ -44,14 +44,11 @@ export default function CityMap({
pageType="city"
defaultLocation={defaultLocation}
>
<Title
level="h2"
as="h3"
textTransform="regular"
className={styles.title}
>
{getHeadingText(intl, city.name, allFilters, activeFilters[0])}
</Title>
<Typography variant="Title/sm">
<h1 className={styles.title}>
{getHeadingText(intl, city.name, allFilters, activeFilters[0])}
</h1>
</Typography>
<HotelList />
</Map>
)

87
apps/scandic-web/components/ContentType/DestinationPage/DestinationCityPage/index.tsx
View File

@@ -21,7 +21,13 @@ import DestinationCityPageSkeleton from "./DestinationCityPageSkeleton"
import styles from "./destinationCityPage.module.css"
export default async function DestinationCityPage() {
interface DestinationCityPageProps {
isMapView: boolean
}
export default async function DestinationCityPage({
isMapView,
}: DestinationCityPageProps) {
const pageData = await getDestinationCityPage()
if (!pageData) {
@@ -46,45 +52,48 @@ export default async function DestinationCityPage() {
<>
<Suspense fallback={<DestinationCityPageSkeleton />}>
<HotelDataContainer cityIdentifier={cityIdentifier}>
<div className={styles.pageContainer}>
<header className={styles.header}>
<Suspense fallback={<BreadcrumbsSkeleton />}>
<Breadcrumbs />
</Suspense>
{images?.length ? (
<TopImages images={images} destinationName={city.name} />
) : null}
</header>
<main className={styles.mainContent}>
<HotelListing />
{blocks && <Blocks blocks={blocks} />}
</main>
<aside className={styles.sidebar}>
<SidebarContentWrapper location={city.name} preamble={preamble}>
<ExperienceList experiences={experiences} />
{has_sidepeek && sidepeek_content && (
<DestinationPageSidePeek
buttonText={sidepeek_button_text}
sidePeekContent={sidepeek_content}
location={city.name}
/>
)}
{isMapView ? (
<CityMap
mapId={env.GOOGLE_DYNAMIC_MAP_ID}
apiKey={env.GOOGLE_STATIC_MAP_KEY}
city={city}
defaultLocation={destination_settings.location}
/>
) : (
<div className={styles.pageContainer}>
<header className={styles.header}>
<Suspense fallback={<BreadcrumbsSkeleton />}>
<Breadcrumbs />
</Suspense>
{images?.length ? (
<TopImages images={images} destinationName={city.name} />
) : null}
</header>
<main className={styles.mainContent}>
<HotelListing />
{blocks && <Blocks blocks={blocks} />}
</main>
<aside className={styles.sidebar}>
<SidebarContentWrapper location={city.name} preamble={preamble}>
<ExperienceList experiences={experiences} />
{has_sidepeek && sidepeek_content && (
<DestinationPageSidePeek
buttonText={sidepeek_button_text}
sidePeekContent={sidepeek_content}
location={city.name}
/>
)}
{destination_settings.city && (
<StaticMap
city={destination_settings.city}
location={destination_settings.location}
/>
)}
</SidebarContentWrapper>
</aside>
</div>
<CityMap
mapId={env.GOOGLE_DYNAMIC_MAP_ID}
apiKey={env.GOOGLE_STATIC_MAP_KEY}
city={city}
defaultLocation={destination_settings.location}
/>
{destination_settings.city && (
<StaticMap
city={destination_settings.city}
location={destination_settings.location}
/>
)}
</SidebarContentWrapper>
</aside>
</div>
)}
</HotelDataContainer>
</Suspense>
<DestinationTracking pageData={tracking} />

4
apps/scandic-web/components/ContentType/DestinationPage/DestinationCountryPage/CountryMap/countryMap.module.css
View File

@@ -1,3 +1,7 @@
.title {
color: var(--Text-Heading);
}
@media screen and (max-width: 949px) {
.title {
display: none;

17
apps/scandic-web/components/ContentType/DestinationPage/DestinationCountryPage/CountryMap/index.tsx
View File

@@ -2,9 +2,9 @@
import { useIntl } from "react-intl"
import { useDestinationDataStore } from "@/stores/destination-data"
import { Typography } from "@scandic-hotels/design-system/Typography"
import Title from "@/components/TempDesignSystem/Text/Title"
import { useDestinationDataStore } from "@/stores/destination-data"
import Map from "../../Map"
import { getHeadingText } from "../../utils"
@@ -44,14 +44,11 @@ export default function CountryMap({
pageType="country"
defaultLocation={defaultLocation}
>
<Title
level="h2"
as="h3"
textTransform="regular"
className={styles.title}
>
{getHeadingText(intl, country, allFilters, activeFilters[0])}
</Title>
<Typography variant="Title/sm">
<h1 className={styles.title}>
{getHeadingText(intl, country, allFilters, activeFilters[0])}
</h1>
</Typography>
<CityList />
</Map>
)

81
apps/scandic-web/components/ContentType/DestinationPage/DestinationCountryPage/index.tsx
View File

@@ -1,6 +1,7 @@
import { notFound } from "next/navigation"
import { Suspense } from "react"
import { env } from "@/env/server"
import { getDestinationCountryPage } from "@/lib/trpc/memoizedRequests"
import Breadcrumbs from "@/components/Breadcrumbs"
@@ -14,11 +15,18 @@ import SidebarContentWrapper from "../SidebarContentWrapper"
import DestinationPageSidePeek from "../Sidepeek"
import TopImages from "../TopImages"
import DestinationTracking from "../Tracking"
import CountryMap from "./CountryMap"
import DestinationCountryPageSkeleton from "./DestinationCountryPageSkeleton"
import styles from "./destinationCountryPage.module.css"
export default async function DestinationCountryPage() {
interface DestinationCountryPageProps {
isMapView: boolean
}
export default async function DestinationCountryPage({
isMapView,
}: DestinationCountryPageProps) {
const pageData = await getDestinationCountryPage()
if (!pageData) {
@@ -43,38 +51,47 @@ export default async function DestinationCountryPage() {
<>
<Suspense fallback={<DestinationCountryPageSkeleton />}>
<CityDataContainer country={destination_settings.country}>
<div className={styles.pageContainer}>
<header className={styles.header}>
<Suspense fallback={<BreadcrumbsSkeleton />}>
<Breadcrumbs />
</Suspense>
{images?.length ? (
<TopImages
images={images}
destinationName={translatedCountry}
/>
) : null}
</header>
<main className={styles.mainContent}>
<CityListing />
{blocks && <Blocks blocks={blocks} />}
</main>
<aside className={styles.sidebar}>
<SidebarContentWrapper
location={translatedCountry}
preamble={preamble}
>
<ExperienceList experiences={experiences} />
{has_sidepeek && sidepeek_content && (
<DestinationPageSidePeek
buttonText={sidepeek_button_text}
sidePeekContent={sidepeek_content}
location={translatedCountry}
{isMapView ? (
<CountryMap
mapId={env.GOOGLE_DYNAMIC_MAP_ID}
apiKey={env.GOOGLE_STATIC_MAP_KEY}
country={translatedCountry}
defaultLocation={destination_settings.location}
/>
) : (
<div className={styles.pageContainer}>
<header className={styles.header}>
<Suspense fallback={<BreadcrumbsSkeleton />}>
<Breadcrumbs />
</Suspense>
{images?.length ? (
<TopImages
images={images}
destinationName={translatedCountry}
/>
)}
</SidebarContentWrapper>
</aside>
</div>
) : null}
</header>
<main className={styles.mainContent}>
<CityListing />
{blocks && <Blocks blocks={blocks} />}
</main>
<aside className={styles.sidebar}>
<SidebarContentWrapper
location={translatedCountry}
preamble={preamble}
>
<ExperienceList experiences={experiences} />
{has_sidepeek && sidepeek_content && (
<DestinationPageSidePeek
buttonText={sidepeek_button_text}
sidePeekContent={sidepeek_content}
location={translatedCountry}
/>
)}
</SidebarContentWrapper>
</aside>
</div>
)}
</CityDataContainer>
</Suspense>
<DestinationTracking pageData={tracking} />

2
apps/scandic-web/components/ContentType/DestinationPage/Map/DynamicMap/index.tsx
View File

@@ -51,7 +51,7 @@ export default function DynamicMap({
const pageType = usePageType()
const { activeMarker } = useDestinationPageHotelsMapStore()
const ref = useRef<HTMLDivElement>(null)
const [hasFittedBounds, setHasFittedBounds] = useState(false)
const [hasFittedBounds, setHasFittedBounds] = useState(!!activeMarker)
useEffect(() => {
if (ref.current && activeMarker && pageType === "overview") {

115
apps/scandic-web/components/ContentType/DestinationPage/Map/index.tsx
View File

@@ -1,15 +1,13 @@
"use client"
import { useRouter, useSearchParams } from "next/navigation"
import { useRouter } from "next/navigation"
import {
type PropsWithChildren,
useCallback,
useEffect,
useMemo,
useRef,
useState,
} from "react"
import { Dialog, Modal } from "react-aria-components"
import { useIntl } from "react-intl"
import { MaterialIcon } from "@scandic-hotels/design-system/Icons/MaterialIcon"
@@ -48,17 +46,11 @@ export default function Map({
children,
}: PropsWithChildren<MapProps>) {
const router = useRouter()
const searchParams = useSearchParams()
const { activeMarker: activeHotelId, setActiveMarker } =
useDestinationPageHotelsMapStore()
const isMapView = useMemo(
() => searchParams.get("view") === "map",
[searchParams]
)
const activeHotel = hotels.find(({ hotel }) => hotel.id === activeHotelId)
const rootDiv = useRef<HTMLDivElement | null>(null)
const [mapHeight, setMapHeight] = useState("0px")
const [scrollHeightWhenOpened, setScrollHeightWhenOpened] = useState(0)
const [mapHeight, setMapHeight] = useState("100dvh")
const intl = useIntl()
@@ -92,25 +84,6 @@ export default function Map({
setMapHeight(`calc(100dvh - ${topPosition + scrollY}px)`)
}, [])
// Making sure the map is always opened at the top of the page,
// just below the header and booking widget as these should stay visible.
// When closing, the page should scroll back to the position it was before opening the map.
useEffect(() => {
// Skip the first render
if (!rootDiv.current) {
return
}
if (isMapView && scrollHeightWhenOpened === 0) {
const scrollY = window.scrollY
setScrollHeightWhenOpened(scrollY)
window.scrollTo({ top: 0, behavior: "instant" })
} else if (!isMapView && scrollHeightWhenOpened !== 0) {
window.scrollTo({ top: scrollHeightWhenOpened, behavior: "instant" })
setScrollHeightWhenOpened(0)
}
}, [isMapView, scrollHeightWhenOpened, rootDiv])
useEffect(() => {
const debouncedResizeHandler = debounce(function () {
handleMapHeight()
@@ -125,7 +98,7 @@ export default function Map({
observer.unobserve(document.documentElement)
}
}
}, [rootDiv, isMapView, handleMapHeight])
}, [rootDiv, handleMapHeight])
function handleClose() {
const url = new URL(window.location.href)
@@ -136,57 +109,39 @@ export default function Map({
return (
<MapProvider apiKey={apiKey} pageType={pageType}>
<div className={styles.wrapper} ref={rootDiv}>
<Modal
isOpen={isMapView}
UNSTABLE_portalContainer={rootDiv.current || undefined}
>
<Dialog
className={styles.dialog}
style={
{ "--destination-map-height": mapHeight } as React.CSSProperties
}
aria-label={intl.formatMessage({
defaultMessage: "Map view",
})}
<div
className={styles.mapWrapper}
style={{ height: mapHeight }}
ref={rootDiv}
>
<div className={styles.mobileNavigation}>
<Button
intent="text"
theme="base"
variant="icon"
onClick={handleClose}
>
<div className={styles.mobileNavigation}>
<Button
intent="text"
theme="base"
variant="icon"
onClick={handleClose}
>
<MaterialIcon
icon="chevron_left"
size={20}
color="CurrentColor"
/>
{intl.formatMessage({
defaultMessage: "Back",
})}
</Button>
<DestinationFilterAndSort
listType={pageType === "city" ? "hotel" : "city"}
/>
</div>
<aside className={styles.sidebar}>{children}</aside>
<DynamicMap
markers={markers}
mapId={mapId}
onClose={handleClose}
defaultCenter={defaultCenter}
defaultZoom={defaultZoom}
fitBounds={!activeHotel}
gestureHandling="greedy"
>
<MapContent
geojson={geoJson}
hasActiveFilters={hasActiveFilters}
/>
</DynamicMap>
</Dialog>
</Modal>
<MaterialIcon icon="chevron_left" size={20} color="CurrentColor" />
{intl.formatMessage({
defaultMessage: "Back",
})}
</Button>
<DestinationFilterAndSort
listType={pageType === "city" ? "hotel" : "city"}
/>
</div>
<aside className={styles.sidebar}>{children}</aside>
<DynamicMap
markers={markers}
mapId={mapId}
onClose={handleClose}
defaultCenter={defaultCenter}
defaultZoom={defaultZoom}
fitBounds={!activeHotel}
gestureHandling="greedy"
>
<MapContent geojson={geoJson} hasActiveFilters={hasActiveFilters} />
</DynamicMap>
</div>
</MapProvider>
)

22
apps/scandic-web/components/ContentType/DestinationPage/Map/map.module.css
View File

@@ -1,14 +1,10 @@
.dialog {
--destination-map-height: 100dvh;
position: absolute;
top: 0;
left: 0;
height: var(--destination-map-height);
width: 100dvw;
z-index: var(--hotel-dynamic-map-z-index);
.mapWrapper {
position: fixed;
display: flex;
height: 100dvh;
width: 100dvw;
background-color: var(--Base-Surface-Primary-light-Normal);
z-index: 1;
}
.sidebar {
@@ -22,12 +18,6 @@
gap: var(--Spacing-x4);
}
.wrapper {
position: absolute;
top: 0;
left: 0;
}
.closeButton {
pointer-events: initial;
box-shadow: var(--button-box-shadow);
@@ -39,7 +29,7 @@
}
@media screen and (max-width: 949px) {
.dialog {
.mapWrapper {
flex-direction: column;
}

2
apps/scandic-web/components/ContentType/DestinationPage/Map/utils.ts
View File

@@ -42,7 +42,7 @@ export function getHotelMapMarkers(hotels: DestinationPagesHotelData[]) {
: null,
url: url,
tripadvisor: hotel.tripadvisor,
amenities: hotel.detailedFacilities,
amenities: hotel.detailedFacilities.slice(0, 3),
image: getImage({ hotel, url }),
}))

113
apps/scandic-web/components/ContentType/HotelMapPage/Client.tsx Normal file
View File

@@ -0,0 +1,113 @@
"use client"
import { APIProvider } from "@vis.gl/react-google-maps"
import { useRouter } from "next/navigation"
import { useCallback, useEffect, useRef, useState } from "react"
import { useIntl } from "react-intl"
import { Button } from "@scandic-hotels/design-system/Button"
import { MaterialIcon } from "@scandic-hotels/design-system/Icons/MaterialIcon"
import InteractiveMap from "@/components/Maps/InteractiveMap"
import { debounce } from "@/utils/debounce"
import Sidebar from "./Sidebar"
import styles from "./hotelMapPage.module.css"
import type { Coordinates } from "@/types/components/maps/coordinates"
import type { PointOfInterest } from "@/types/hotel"
interface HotelMapPageClientProps {
apiKey: string
hotelName: string
coordinates: Coordinates
pointsOfInterest: PointOfInterest[]
mapId: string
}
export default function HotelMapPageClient({
apiKey,
hotelName,
coordinates,
pointsOfInterest,
mapId,
}: HotelMapPageClientProps) {
const intl = useIntl()
const router = useRouter()
const rootDiv = useRef<HTMLDivElement | null>(null)
const [mapHeight, setMapHeight] = useState("100dvh")
const [activePoi, setActivePoi] = useState<string | null>(null)
// Calculate the height of the map based on the viewport height from the start-point (below the header and booking widget)
const handleMapHeight = useCallback(() => {
const topPosition = rootDiv.current?.getBoundingClientRect().top ?? 0
const scrollY = window.scrollY
setMapHeight(`calc(100dvh - ${topPosition + scrollY}px)`)
}, [])
function handleClose() {
const url = new URL(window.location.href)
url.searchParams.delete("view")
router.push(url.toString())
}
useEffect(() => {
const debouncedResizeHandler = debounce(function () {
handleMapHeight()
})
const observer = new ResizeObserver(debouncedResizeHandler)
observer.observe(document.documentElement)
return () => {
if (observer) {
observer.unobserve(document.documentElement)
}
}
}, [rootDiv, handleMapHeight])
const closeButton = (
<Button
variant="Primary"
color="Inverted"
size="Small"
className={styles.closeButton}
onPress={handleClose}
typography="Body/Supporting text (caption)/smBold"
>
<MaterialIcon icon="close" size={20} color="CurrentColor" />
<span>
{intl.formatMessage({
defaultMessage: "Close the map",
})}
</span>
</Button>
)
return (
<APIProvider apiKey={apiKey}>
<div
className={styles.mapWrapper}
ref={rootDiv}
style={{ "--hotel-map-height": mapHeight } as React.CSSProperties}
>
<Sidebar
activePoi={activePoi}
hotelName={hotelName}
pointsOfInterest={pointsOfInterest}
onActivePoiChange={(poi) => setActivePoi(poi ?? null)}
coordinates={coordinates}
/>
<InteractiveMap
closeButton={closeButton}
coordinates={coordinates}
pointsOfInterest={pointsOfInterest}
activePoi={activePoi}
onActivePoiChange={(poi) => setActivePoi(poi ?? null)}
mapId={mapId}
/>
</div>
</APIProvider>
)
}

98
apps/scandic-web/components/ContentType/HotelPage/Map/DynamicMap/Sidebar/index.tsx → apps/scandic-web/components/ContentType/HotelMapPage/Sidebar/index.tsx
View File

@@ -1,13 +1,14 @@
"use client"
import { useMap } from "@vis.gl/react-google-maps"
import { cx } from "class-variance-authority"
import { useState } from "react"
import { Button as AriaButton } from "react-aria-components"
import { useIntl } from "react-intl"
import { Typography } from "@scandic-hotels/design-system/Typography"
import PoiMarker from "@/components/Maps/Markers/Poi"
import Button from "@/components/TempDesignSystem/Button"
import Body from "@/components/TempDesignSystem/Text/Body"
import Title from "@/components/TempDesignSystem/Text/Title"
import styles from "./sidebar.module.css"
@@ -134,64 +135,61 @@ export default function Sidebar({
isFullScreenSidebar ? styles.fullscreen : ""
}`}
>
<Button
theme="base"
intent="text"
wrapping
fullWidth
className={styles.sidebarToggle}
onClick={toggleFullScreenSidebar}
>
<Body textTransform="bold" color="textMediumContrast" asChild>
<span>{isFullScreenSidebar ? viewAsMapMsg : viewAsListMsg}</span>
</Body>
</Button>
<Typography variant="Body/Paragraph/mdBold">
<AriaButton
className={styles.sidebarToggle}
onPress={toggleFullScreenSidebar}
>
{isFullScreenSidebar ? viewAsMapMsg : viewAsListMsg}
</AriaButton>
</Typography>
<div className={styles.sidebarContent}>
<Title as="h4" level="h2" textTransform="regular">
{intl.formatMessage(
{
defaultMessage: "Things nearby {hotelName}",
},
{ hotelName }
)}
</Title>
<Typography variant="Title/sm">
<h1 className={styles.title}>
{intl.formatMessage(
{
defaultMessage: "Things nearby {hotelName}",
},
{ hotelName }
)}
</h1>
</Typography>
{poisInGroups.map(({ group, pois }) =>
pois.length ? (
<div key={group} className={styles.poiGroup}>
<Body
color="black"
textTransform="bold"
className={styles.poiHeading}
asChild
>
<h3>
<Typography variant="Body/Paragraph/mdBold">
<h3 className={styles.poiHeading}>
<PoiMarker group={group} />
{translatePOIGroup(group)}
</h3>
</Body>
</Typography>
<ul className={styles.poiList}>
{pois.map((poi) => (
<li key={poi.name} className={styles.poiItem}>
<button
className={`${styles.poiButton} ${activePoi === poi.name ? styles.active : ""}`}
onMouseEnter={() => handleMouseEnter(poi.name)}
onClick={() =>
handlePoiClick(poi.name, poi.coordinates)
}
>
<span>{poi.name}</span>
<span>
{intl.formatMessage(
{
defaultMessage: "{distanceInKm} km",
},
{
distanceInKm: poi.distance,
}
)}
</span>
</button>
<Typography variant="Body/Paragraph/mdRegular">
<AriaButton
className={cx(styles.poiButton, {
[styles.active]: activePoi === poi.name,
})}
onHoverStart={() => handleMouseEnter(poi.name)}
onPress={() =>
handlePoiClick(poi.name, poi.coordinates)
}
>
<span>{poi.name}</span>
<span>
{intl.formatMessage(
{
defaultMessage: "{distanceInKm} km",
},
{
distanceInKm: poi.distance,
}
)}
</span>
</AriaButton>
</Typography>
</li>
))}
</ul>

51
apps/scandic-web/components/ContentType/HotelPage/Map/DynamicMap/Sidebar/sidebar.module.css → apps/scandic-web/components/ContentType/HotelMapPage/Sidebar/sidebar.module.css
View File

@@ -5,20 +5,21 @@
.sidebarContent {
display: grid;
gap: var(--Spacing-x5);
gap: var(--Space-x5);
align-content: start;
overflow-y: auto;
}
.poiGroup {
display: grid;
gap: var(--Spacing-x2);
gap: var(--Space-x2);
}
.poiHeading {
display: flex;
align-items: center;
gap: var(--Spacing-x1);
gap: var(--Space-x1);
color: var(--Text-Default);
}
.poiList {
@@ -26,23 +27,20 @@
}
.poiItem {
padding: var(--Spacing-x1) 0;
border-bottom: 1px solid var(--Base-Border-Subtle);
padding: var(--Space-x1) 0;
border-bottom: 1px solid var(--Border-Default);
}
.poiButton {
background-color: var(--Base-Surface-Primary-light-Normal);
border-width: 0;
font-family: var(--typography-Body-Regular-fontFamily);
font-size: var(--typography-Body-Regular-fontSize);
font-weight: var(--typography-Body-Regular-fontWeight);
color: var(--UI-Text-High-contrast);
width: 100%;
display: grid;
grid-template-columns: 1fr max-content;
gap: var(--Spacing-x2);
align-items: center;
padding: var(--Spacing-x-half) var(--Spacing-x1);
gap: var(--Space-x2);
background-color: var(--Base-Surface-Primary-light-Normal);
border-width: 0;
color: var(--Text-Default);
width: 100%;
padding: var(--Space-x05) var(--Space-x1);
border-radius: var(--Corner-radius-Medium);
cursor: pointer;
text-align: left;
@@ -52,6 +50,10 @@
background-color: var(--Base-Surface-Primary-light-Hover);
}
.title {
color: var(--Text-Heading);
}
@media screen and (max-width: 767px) {
.sidebar {
--sidebar-mobile-toggle-height: 84px;
@@ -84,24 +86,27 @@
bottom: 0;
}
button.sidebarToggle {
.sidebarToggle {
position: relative;
margin-top: var(--Spacing-x4);
padding: var(--Spacing-x2) !important;
color: var(--Text-Secondary);
background-color: var(--Base-Surface-Primary-light-Normal);
border-width: 0;
margin-top: var(--Space-x4);
padding: var(--Space-x2);
}
button.sidebarToggle::before {
.sidebarToggle::before {
content: "";
position: absolute;
display: block;
top: -0.5rem;
width: 100px;
width: 46px;
height: 3px;
background-color: var(--UI-Text-High-contrast);
background-color: var(--Icon-Interactive-Disabled);
}
.sidebarContent {
padding: var(--Spacing-x3) var(--Spacing-x2);
padding: var(--Space-x3) var(--Space-x2);
height: var(--sidebar-mobile-content-height);
}
}
@@ -115,12 +120,12 @@
background-color: var(--Base-Surface-Primary-light-Normal);
}
button.sidebarToggle {
.sidebarToggle {
display: none;
}
.sidebarContent {
padding: var(--Spacing-x4) var(--Spacing-x5) var(--Spacing-x9);
padding: var(--Space-x4) var(--Space-x5) var(--Space-x8);
height: 100%;
position: relative;
}

20
apps/scandic-web/components/ContentType/HotelPage/Map/DynamicMap/dynamicMap.module.css → apps/scandic-web/components/ContentType/HotelMapPage/hotelMapPage.module.css
View File

@@ -1,23 +1,17 @@
.dynamicMap {
.mapWrapper {
--hotel-map-height: 100dvh;
position: absolute;
top: 0;
left: 0;
position: fixed;
display: flex;
height: var(--hotel-map-height);
width: 100dvw;
z-index: var(--hotel-dynamic-map-z-index);
display: flex;
background-color: var(--Base-Surface-Primary-light-Normal);
}
.wrapper {
position: absolute;
top: 0;
left: 0;
z-index: 1;
}
.closeButton {
pointer-events: initial;
box-shadow: var(--button-box-shadow);
gap: var(--Spacing-x-half);
color: var(--Component-Button-Inverted-On-fill-Default);
pointer-events: initial;
gap: var(--Space-x05);
}

42
apps/scandic-web/components/ContentType/HotelMapPage/index.tsx Normal file
View File

@@ -0,0 +1,42 @@
import { notFound } from "next/navigation"
import { env } from "@/env/server"
import { getHotel, getHotelPage } from "@/lib/trpc/memoizedRequests"
import { getLang } from "@/i18n/serverContext"
import HotelMapPageClient from "./Client"
interface HotelMapPageProps {
hotelId: string
}
export default async function HotelMapPage({ hotelId }: HotelMapPageProps) {
const lang = getLang()
const hotelPageData = await getHotelPage()
const hotelData = await getHotel({
hotelId,
isCardOnlyPayment: false,
language: lang,
})
if (!hotelPageData || !hotelData) {
notFound()
}
const { name, location, pointsOfInterest } = hotelData.hotel
const coordinates = {
lat: location.latitude,
lng: location.longitude,
}
return (
<HotelMapPageClient
apiKey={env.GOOGLE_STATIC_MAP_KEY}
mapId={env.GOOGLE_DYNAMIC_MAP_ID}
hotelName={name}
coordinates={coordinates}
pointsOfInterest={pointsOfInterest}
/>
)
}

142
apps/scandic-web/components/ContentType/HotelPage/Map/DynamicMap/index.tsx
View File

@@ -1,142 +0,0 @@
"use client"
import { APIProvider } from "@vis.gl/react-google-maps"
import { useRouter, useSearchParams } from "next/navigation"
import { useCallback, useEffect, useMemo, useRef, useState } from "react"
import { Dialog, Modal } from "react-aria-components"
import { useIntl } from "react-intl"
import { MaterialIcon } from "@scandic-hotels/design-system/Icons/MaterialIcon"
import InteractiveMap from "@/components/Maps/InteractiveMap"
import Button from "@/components/TempDesignSystem/Button"
import { debounce } from "@/utils/debounce"
import Sidebar from "./Sidebar"
import styles from "./dynamicMap.module.css"
import type { DynamicMapProps } from "@/types/components/hotelPage/map/dynamicMap"
export default function DynamicMap({
apiKey,
hotelName,
coordinates,
pointsOfInterest,
mapId,
}: DynamicMapProps) {
const intl = useIntl()
const router = useRouter()
const searchParams = useSearchParams()
const isMapView = useMemo(
() => searchParams.get("view") === "map",
[searchParams]
)
const rootDiv = useRef<HTMLDivElement | null>(null)
const [mapHeight, setMapHeight] = useState("0px")
const [scrollHeightWhenOpened, setScrollHeightWhenOpened] = useState(0)
const [activePoi, setActivePoi] = useState<string | null>(null)
// Calculate the height of the map based on the viewport height from the start-point (below the header and booking widget)
const handleMapHeight = useCallback(() => {
const topPosition = rootDiv.current?.getBoundingClientRect().top ?? 0
const scrollY = window.scrollY
setMapHeight(`calc(100dvh - ${topPosition + scrollY}px)`)
}, [])
function handleClose() {
const url = new URL(window.location.href)
url.searchParams.delete("view")
router.push(url.toString())
}
// Making sure the map is always opened at the top of the page,
// just below the header and booking widget as these should stay visible.
// When closing, the page should scroll back to the position it was before opening the map.
useEffect(() => {
// Skip the first render
if (!rootDiv.current) {
return
}
if (isMapView && scrollHeightWhenOpened === 0) {
const scrollY = window.scrollY
setScrollHeightWhenOpened(scrollY)
window.scrollTo({ top: 0, behavior: "instant" })
} else if (!isMapView && scrollHeightWhenOpened !== 0) {
window.scrollTo({ top: scrollHeightWhenOpened, behavior: "instant" })
setScrollHeightWhenOpened(0)
}
}, [isMapView, scrollHeightWhenOpened, rootDiv])
useEffect(() => {
const debouncedResizeHandler = debounce(function () {
handleMapHeight()
})
const observer = new ResizeObserver(debouncedResizeHandler)
observer.observe(document.documentElement)
return () => {
if (observer) {
observer.unobserve(document.documentElement)
}
}
}, [rootDiv, isMapView, handleMapHeight])
const closeButton = (
<Button
theme="base"
intent="inverted"
variant="icon"
size="small"
className={styles.closeButton}
onClick={handleClose}
>
<MaterialIcon icon="close" color="CurrentColor" />
<span>
{intl.formatMessage({
defaultMessage: "Close the map",
})}
</span>
</Button>
)
return (
<APIProvider apiKey={apiKey}>
<div className={styles.wrapper} ref={rootDiv}>
<Modal
isOpen={isMapView}
UNSTABLE_portalContainer={rootDiv.current || undefined}
>
<Dialog
className={styles.dynamicMap}
style={{ "--hotel-map-height": mapHeight } as React.CSSProperties}
aria-label={intl.formatMessage(
{
defaultMessage: "Things nearby {hotelName}",
},
{ hotelName }
)}
>
<Sidebar
activePoi={activePoi}
hotelName={hotelName}
pointsOfInterest={pointsOfInterest}
onActivePoiChange={(poi) => setActivePoi(poi ?? null)}
coordinates={coordinates}
/>
<InteractiveMap
closeButton={closeButton}
coordinates={coordinates}
pointsOfInterest={pointsOfInterest}
activePoi={activePoi}
onActivePoiChange={(poi) => setActivePoi(poi ?? null)}
mapId={mapId}
/>
</Dialog>
</Modal>
</div>
</APIProvider>
)
}

30
apps/scandic-web/components/ContentType/HotelPage/index.tsx
View File

@@ -1,7 +1,6 @@
import { notFound } from "next/navigation"
import { Suspense } from "react"
import { env } from "@/env/server"
import {
getHotel,
getHotelPage,
@@ -18,7 +17,6 @@ import { setFacilityCards } from "@/utils/facilityCards"
import { generateHotelSchema } from "@/utils/jsonSchemas"
import { safeTry } from "@/utils/safeTry"
import DynamicMap from "./Map/DynamicMap"
import MapCard from "./Map/MapCard"
import MapWithCardWrapper from "./Map/MapWithCard"
import MobileMapToggle from "./Map/MobileMapToggle"
@@ -65,9 +63,6 @@ export default async function HotelPage({ hotelId }: HotelPageProps) {
getMeetingRooms({ hotelId, language: lang })
)
const googleMapsApiKey = env.GOOGLE_STATIC_MAP_KEY
const googleMapId = env.GOOGLE_DYNAMIC_MAP_ID
if (!hotelData?.hotel || !hotelPageData) {
return notFound()
}
@@ -203,24 +198,13 @@ export default async function HotelPage({ hotelId }: HotelPageProps) {
<AccordionSection accordion={faq.accordions} title={faq.title} />
)}
</main>
{googleMapsApiKey ? (
<>
<aside className={styles.mapContainer}>
<MapWithCardWrapper>
<StaticMap coordinates={coordinates} hotelName={name} />
<MapCard hotelName={name} pois={topThreePois} />
</MapWithCardWrapper>
</aside>
<MobileMapToggle />
<DynamicMap
apiKey={googleMapsApiKey}
hotelName={name}
coordinates={coordinates}
pointsOfInterest={pointsOfInterest}
mapId={googleMapId}
/>
</>
) : null}
<aside className={styles.mapContainer}>
<MapWithCardWrapper>
<StaticMap coordinates={coordinates} hotelName={name} />
<MapCard hotelName={name} pois={topThreePois} />
</MapWithCardWrapper>
</aside>
<MobileMapToggle />
<SidePeeks hotelId={hotelId}>
<AmenitiesSidePeek
amenitiesList={detailedFacilities}

4
apps/scandic-web/components/Maps/InteractiveMap/index.tsx
View File

@@ -90,7 +90,7 @@ export default function InteractiveMap({
defaultMessage: "Zoom in",
})}
>
<MaterialIcon icon="remove" color="CurrentColor" size={20} />
<MaterialIcon icon="remove" color="CurrentColor" />
</Button>
<Button
theme="base"
@@ -103,7 +103,7 @@ export default function InteractiveMap({
defaultMessage: "Zoom out",
})}
>
<MaterialIcon icon="add" color="CurrentColor" size={20} />
<MaterialIcon icon="add" color="CurrentColor" />
</Button>
</div>
</div>

6
apps/scandic-web/components/Maps/Markers/Poi/poi.module.css
View File

@@ -1,11 +1,9 @@
/* 2024-09-18: At the moment, the background-colors for the poi marker is unknown.
This will be handled later. */
.icon {
width: 24px;
height: 24px;
display: flex;
justify-content: center;
align-items: center;
padding: var(--Spacing-x-half);
border-radius: var(--Corner-radius-Rounded);
background-color: var(--UI-Text-Placeholder);
}

15
apps/scandic-web/types/params.ts
View File

@@ -29,21 +29,6 @@ export type ContentTypeParams = {
| PageContentTypeEnum.startPage
}
// This is purely for use in `apps/scandic-web/app/[lang]/(live)/(public)/[contentType]/[uid]/page.tsx`
// It is meant as an interim solution while we move away from the switch-case
// approach into routing these based on App router.
// Folders in `apps/scandic-web/app/[lang]/(live)/(public)` should not be in this type.
export type NonAppRouterContentTypeParams = {
contentType:
| PageContentTypeEnum.loyaltyPage
| PageContentTypeEnum.contentPage
| PageContentTypeEnum.hotelPage
| PageContentTypeEnum.collectionPage
| PageContentTypeEnum.destinationCountryPage
| PageContentTypeEnum.destinationCityPage
| PageContentTypeEnum.startPage
}
export type ContentTypeWebviewParams = {
contentType: "loyalty-page" | "account-page"
}