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

Merged in feat/SW-1459-country-map-sidebar (pull request #1323)

Browse Source 
feat(SW-1459): Added sidebar with citylist on destination country pages

* feat(SW-1459): Added sidebar with citylist on destination country pages


Approved-by: Fredrik Thorsson
Approved-by: Matilda Landström
This commit is contained in:
Erik Tiekstra
2025-02-13 06:45:27 +00:00
parent c0e4553d9f
commit 599c11ba37
12 changed files with 158 additions and 10 deletions
Download Patch File Download Diff File Expand all files Collapse all files

17
components/ContentType/DestinationPage/DestinationCountryPage/CountryMap/CityList/cityList.module.css Normal file
View File

@@ -0,0 +1,17 @@
.cityListWrapper {
display: grid;
gap: var(--Spacing-x3);
}
.header {
display: flex;
justify-content: space-between;
align-items: center;
gap: var(--Spacing-x2);
}
.cityList {
display: grid;
gap: var(--Spacing-x3);
list-style: none;
}

36
components/ContentType/DestinationPage/DestinationCountryPage/CountryMap/CityList/index.tsx Normal file
View File

@@ -0,0 +1,36 @@
import Body from "@/components/TempDesignSystem/Text/Body"
import { getIntl } from "@/i18n"
import CityListItem from "../CityListItem"
import styles from "./cityList.module.css"
import type { DestinationCityListItem } from "@/types/trpc/routers/contentstack/destinationCityPage"
interface CityListProps {
cities: DestinationCityListItem[]
}
export default async function CityList({ cities }: CityListProps) {
const intl = await getIntl()
return (
<div className={styles.cityListWrapper}>
<div className={styles.header}>
<Body>
{intl.formatMessage(
{ id: "{count} destinations" },
{ count: cities.length }
)}
</Body>
</div>
<ul className={styles.cityList}>
{cities.map((city) => (
<li key={city.system.uid}>
<CityListItem city={city} />
</li>
))}
</ul>
</div>
)
}

22
components/ContentType/DestinationPage/DestinationCountryPage/CountryMap/CityListItem/cityListItem.module.css Normal file
View File

@@ -0,0 +1,22 @@
.cityListItem {
background-color: var(--Base-Surface-Primary-light-Normal);
border: 1px solid var(--Base-Border-Subtle);
border-radius: var(--Corner-radius-Medium);
overflow: hidden;
}
.imageWrapper {
position: relative;
height: 200px;
width: 100%;
}
.imageWrapper img {
object-fit: cover;
}
.content {
display: grid;
gap: var(--Spacing-x2);
padding: var(--Spacing-x2) var(--Spacing-x3);
}

51
components/ContentType/DestinationPage/DestinationCountryPage/CountryMap/CityListItem/index.tsx Normal file
View File

@@ -0,0 +1,51 @@
import Link from "next/link"
import ImageGallery from "@/components/ImageGallery"
import Button from "@/components/TempDesignSystem/Button"
import Subtitle from "@/components/TempDesignSystem/Text/Subtitle"
import { getIntl } from "@/i18n"
import { mapImageVaultImagesToGalleryImages } from "@/utils/imageGallery"
import ExperienceList from "../../../ExperienceList"
import styles from "./cityListItem.module.css"
import type { DestinationCityListItem } from "@/types/trpc/routers/contentstack/destinationCityPage"
interface CityListItemProps {
city: DestinationCityListItem
}
export default async function CityListItem({ city }: CityListItemProps) {
const intl = await getIntl()
const galleryImages = mapImageVaultImagesToGalleryImages(city.images)
return (
<article className={styles.cityListItem}>
<div className={styles.imageWrapper}>
<ImageGallery
images={galleryImages}
fill
title={intl.formatMessage(
{ id: "{title} - Image gallery" },
{ title: city.cityName }
)}
/>
</div>
<section className={styles.content}>
<Subtitle asChild>
<h3>{city.heading}</h3>
</Subtitle>
<ExperienceList experiences={city.experiences} />
<Button intent="tertiary" theme="base" size="small" asChild>
<Link href={city.url}>
{intl.formatMessage(
{ id: "Explore {city}" },
{ city: city.cityName }
)}
</Link>
</Button>
</section>
</article>
)
}

24
components/ContentType/DestinationPage/DestinationCountryPage/CountryMap/index.tsx
View File

@@ -1,20 +1,31 @@
import { env } from "@/env/server" import { env } from "@/env/server"
import { getHotelsByCountry } from "@/lib/trpc/memoizedRequests" import {
getDestinationCityPagesByCountry,
getHotelsByCountry,
} from "@/lib/trpc/memoizedRequests"
import Title from "@/components/TempDesignSystem/Text/Title" import Title from "@/components/TempDesignSystem/Text/Title"
import { getIntl } from "@/i18n"
import Map from "../../Map" import Map from "../../Map"
import CityList from "./CityList"
import type { Country } from "@/types/enums/country" import type { Country } from "@/types/enums/country"
interface CountryMapProps { interface CountryMapProps {
country: Country country: Country
} }
export function preloadHotels(country: Country) {
export function preload(country: Country) {
void getHotelsByCountry(country) void getHotelsByCountry(country)
void getDestinationCityPagesByCountry(country)
} }
export default async function CountryMap({ country }: CountryMapProps) { export default async function CountryMap({ country }: CountryMapProps) {
const hotels = await getHotelsByCountry(country) const intl = await getIntl()
const [hotels, cities] = await Promise.all([
getHotelsByCountry(country),
getDestinationCityPagesByCountry(country),
])
return ( return (
<Map <Map
@@ -22,11 +33,10 @@ export default async function CountryMap({ country }: CountryMapProps) {
mapId={env.GOOGLE_DYNAMIC_MAP_ID} mapId={env.GOOGLE_DYNAMIC_MAP_ID}
apiKey={env.GOOGLE_STATIC_MAP_KEY} apiKey={env.GOOGLE_STATIC_MAP_KEY}
> >
<div> <Title level="h2" as="h3" textTransform="regular">
<Title level="h2" as="h3"> {intl.formatMessage({ id: `Destinations in {country}` }, { country })}
{country}
</Title> </Title>
</div> <CityList cities={cities} />
</Map> </Map>
) )
} }

4
components/ContentType/DestinationPage/DestinationCountryPage/index.tsx
View File

@@ -16,7 +16,7 @@ import SidebarContentWrapper from "../SidebarContentWrapper"
import DestinationPageSidePeek from "../Sidepeek" import DestinationPageSidePeek from "../Sidepeek"
import StaticMap from "../StaticMap" import StaticMap from "../StaticMap"
import TopImages from "../TopImages" import TopImages from "../TopImages"
import CountryMap, { preloadHotels } from "./CountryMap" import CountryMap, { preload } from "./CountryMap"
import styles from "./destinationCountryPage.module.css" import styles from "./destinationCountryPage.module.css"
@@ -42,7 +42,7 @@ export default async function DestinationCountryPage() {
destination_settings, destination_settings,
} = destinationCountryPage } = destinationCountryPage
preloadHotels(destination_settings.country) preload(destination_settings.country)
return ( return (
<> <>

2
i18n/dictionaries/da.json
View File

@@ -154,6 +154,7 @@
"Day": "Dag", "Day": "Dag",
"Description": "Beskrivelse", "Description": "Beskrivelse",
"Destination": "Destination", "Destination": "Destination",
"Destinations in {country}": "Destinationer i {country}",
"Details": "Detaljer", "Details": "Detaljer",
"Dialog": "Dialog", "Dialog": "Dialog",
"Didn't receive a code? <resendOtpLink>Resend code</resendOtpLink>": "Didn't receive a code? <resendOtpLink>Resend code</resendOtpLink>", "Didn't receive a code? <resendOtpLink>Resend code</resendOtpLink>": "Didn't receive a code? <resendOtpLink>Resend code</resendOtpLink>",
@@ -685,6 +686,7 @@
"{checkOutDate} from {checkOutTime}": "{checkOutDate} fra {checkOutTime}", "{checkOutDate} from {checkOutTime}": "{checkOutDate} fra {checkOutTime}",
"{count, plural, one {{count} Hotel} other {{count} Hotels}}": "{count, plural, one {# hotel} other {# hoteller}}", "{count, plural, one {{count} Hotel} other {{count} Hotels}}": "{count, plural, one {# hotel} other {# hoteller}}",
"{count, plural, one {{count} Location} other {{count} Locations}}": "{count, plural, one {# sted} other {# steder}}", "{count, plural, one {{count} Location} other {{count} Locations}}": "{count, plural, one {# sted} other {# steder}}",
"{count} destinations": "{count} destinationer",
"{count} lowercase letter": "{count} lille bogstav", "{count} lowercase letter": "{count} lille bogstav",
"{count} number": "{count} nummer", "{count} number": "{count} nummer",
"{count} special character": "{count} speciel karakter", "{count} special character": "{count} speciel karakter",

2
i18n/dictionaries/de.json
View File

@@ -155,6 +155,7 @@
"Day": "Tag", "Day": "Tag",
"Description": "Beschreibung", "Description": "Beschreibung",
"Destination": "Bestimmungsort", "Destination": "Bestimmungsort",
"Destinations in {country}": "Ziele in {country}",
"Details": "Details", "Details": "Details",
"Dialog": "Dialog", "Dialog": "Dialog",
"Didn't receive a code? <resendOtpLink>Resend code</resendOtpLink>": "Didn't receive a code? <resendOtpLink>Resend code</resendOtpLink>", "Didn't receive a code? <resendOtpLink>Resend code</resendOtpLink>": "Didn't receive a code? <resendOtpLink>Resend code</resendOtpLink>",
@@ -685,6 +686,7 @@
"{checkOutDate} from {checkOutTime}": "{checkOutDate} aus {checkOutTime}", "{checkOutDate} from {checkOutTime}": "{checkOutDate} aus {checkOutTime}",
"{count, plural, one {{count} Hotel} other {{count} Hotels}}": "{count, plural, one {{count} Hotel} other {{count} Hotels}}}", "{count, plural, one {{count} Hotel} other {{count} Hotels}}": "{count, plural, one {{count} Hotel} other {{count} Hotels}}}",
"{count, plural, one {{count} Location} other {{count} Locations}}": "{count, plural, one {# Standort} other {# Standorte}}", "{count, plural, one {{count} Location} other {{count} Locations}}": "{count, plural, one {# Standort} other {# Standorte}}",
"{count} destinations": "{count} Ziele",
"{count} lowercase letter": "{count} Kleinbuchstabe", "{count} lowercase letter": "{count} Kleinbuchstabe",
"{count} number": "{count} nummer", "{count} number": "{count} nummer",
"{count} special character": "{count} sonderzeichen", "{count} special character": "{count} sonderzeichen",

2
i18n/dictionaries/en.json
View File

@@ -158,6 +158,7 @@
"Day": "Day", "Day": "Day",
"Description": "Description", "Description": "Description",
"Destination": "Destination", "Destination": "Destination",
"Destinations in {country}": "Destinations in {country}",
"Details": "Details", "Details": "Details",
"Dialog": "Dialog", "Dialog": "Dialog",
"Didn't receive a code? <resendOtpLink>Resend code</resendOtpLink>": "Didn't receive a code? <resendOtpLink>Resend code</resendOtpLink>", "Didn't receive a code? <resendOtpLink>Resend code</resendOtpLink>": "Didn't receive a code? <resendOtpLink>Resend code</resendOtpLink>",
@@ -688,6 +689,7 @@
"{checkOutDate} from {checkOutTime}": "{checkOutDate} from {checkOutTime}", "{checkOutDate} from {checkOutTime}": "{checkOutDate} from {checkOutTime}",
"{count, plural, one {{count} Hotel} other {{count} Hotels}}": "{count, plural, one {{count} Hotel} other {{count} Hotels}}", "{count, plural, one {{count} Hotel} other {{count} Hotels}}": "{count, plural, one {{count} Hotel} other {{count} Hotels}}",
"{count, plural, one {{count} Location} other {{count} Locations}}": "{count, plural, one {{count} Location} other {{count} Locations}}", "{count, plural, one {{count} Location} other {{count} Locations}}": "{count, plural, one {{count} Location} other {{count} Locations}}",
"{count} destinations": "{count} destinations",
"{count} lowercase letter": "{count} lowercase letter", "{count} lowercase letter": "{count} lowercase letter",
"{count} number": "{count} number", "{count} number": "{count} number",
"{count} special character": "{count} special character", "{count} special character": "{count} special character",

2
i18n/dictionaries/fi.json
View File

@@ -154,6 +154,7 @@
"Day": "Päivä", "Day": "Päivä",
"Description": "Kuvaus", "Description": "Kuvaus",
"Destination": "Kohde", "Destination": "Kohde",
"Destinations in {country}": "Kohteet maassa {country}",
"Details": "Tiedot", "Details": "Tiedot",
"Dialog": "Dialog", "Dialog": "Dialog",
"Didn't receive a code? <resendOtpLink>Resend code</resendOtpLink>": "Didn't receive a code? <resendOtpLink>Resend code</resendOtpLink>", "Didn't receive a code? <resendOtpLink>Resend code</resendOtpLink>": "Didn't receive a code? <resendOtpLink>Resend code</resendOtpLink>",
@@ -685,6 +686,7 @@
"{checkOutDate} from {checkOutTime}": "{checkOutDate} alkaen {checkOutTime}", "{checkOutDate} from {checkOutTime}": "{checkOutDate} alkaen {checkOutTime}",
"{count, plural, one {{count} Hotel} other {{count} Hotels}}": "{count, plural, one {# hotelli} other {# hotellit}}", "{count, plural, one {{count} Hotel} other {{count} Hotels}}": "{count, plural, one {# hotelli} other {# hotellit}}",
"{count, plural, one {{count} Location} other {{count} Locations}}": "{count, plural, one {# sijainti} other {# sijainnit}}", "{count, plural, one {{count} Location} other {{count} Locations}}": "{count, plural, one {# sijainti} other {# sijainnit}}",
"{count} destinations": "{count} kohdetta",
"{count} lowercase letter": "{count} pien kirjain", "{count} lowercase letter": "{count} pien kirjain",
"{count} number": "{count} määrä", "{count} number": "{count} määrä",
"{count} special character": "{count} erikoishahmo", "{count} special character": "{count} erikoishahmo",

2
i18n/dictionaries/no.json
View File

@@ -153,6 +153,7 @@
"Day": "Dag", "Day": "Dag",
"Description": "Beskrivelse", "Description": "Beskrivelse",
"Destination": "Destinasjon", "Destination": "Destinasjon",
"Destinations in {country}": "Destinasjoner i {country}",
"Details": "Detaljer", "Details": "Detaljer",
"Dialog": "Dialog", "Dialog": "Dialog",
"Didn't receive a code? <resendOtpLink>Resend code</resendOtpLink>": "Didn't receive a code? <resendOtpLink>Resend code</resendOtpLink>", "Didn't receive a code? <resendOtpLink>Resend code</resendOtpLink>": "Didn't receive a code? <resendOtpLink>Resend code</resendOtpLink>",
@@ -683,6 +684,7 @@
"{checkOutDate} from {checkOutTime}": "{checkOutDate} fra {checkOutTime}", "{checkOutDate} from {checkOutTime}": "{checkOutDate} fra {checkOutTime}",
"{count, plural, one {{count} Hotel} other {{count} Hotels}}": "{count, plural, one {# hotell} other {# hoteller}}", "{count, plural, one {{count} Hotel} other {{count} Hotels}}": "{count, plural, one {# hotell} other {# hoteller}}",
"{count, plural, one {{count} Location} other {{count} Locations}}": "{count, plural, one {# sted} other {# steder}}", "{count, plural, one {{count} Location} other {{count} Locations}}": "{count, plural, one {# sted} other {# steder}}",
"{count} destinations": "{count} destinasjoner",
"{count} lowercase letter": "{count} liten bokstav", "{count} lowercase letter": "{count} liten bokstav",
"{count} number": "{count} antall", "{count} number": "{count} antall",
"{count} special character": "{count} spesiell karakter", "{count} special character": "{count} spesiell karakter",

2
i18n/dictionaries/sv.json
View File

@@ -153,6 +153,7 @@
"Day": "Dag", "Day": "Dag",
"Description": "Beskrivning", "Description": "Beskrivning",
"Destination": "Destination", "Destination": "Destination",
"Destinations in {country}": "Destinationer i {country}",
"Details": "Detaljer", "Details": "Detaljer",
"Dialog": "Dialog", "Dialog": "Dialog",
"Didn't receive a code? <resendOtpLink>Resend code</resendOtpLink>": "Didn't receive a code? <resendOtpLink>Resend code</resendOtpLink>", "Didn't receive a code? <resendOtpLink>Resend code</resendOtpLink>": "Didn't receive a code? <resendOtpLink>Resend code</resendOtpLink>",
@@ -685,6 +686,7 @@
"{checkOutDate} from {checkOutTime}": "{checkOutDate} från {checkOutTime}", "{checkOutDate} from {checkOutTime}": "{checkOutDate} från {checkOutTime}",
"{count, plural, one {{count} Hotel} other {{count} Hotels}}": "{count, plural, one {# hotell} other {# hotell}}", "{count, plural, one {{count} Hotel} other {{count} Hotels}}": "{count, plural, one {# hotell} other {# hotell}}",
"{count, plural, one {{count} Location} other {{count} Locations}}": "{count, plural, one {# plats} other {# platser}}", "{count, plural, one {{count} Location} other {{count} Locations}}": "{count, plural, one {# plats} other {# platser}}",
"{count} destinations": "{count} destinationer",
"{count} lowercase letter": "{count} liten bokstav", "{count} lowercase letter": "{count} liten bokstav",
"{count} number": "{count} nummer", "{count} number": "{count} nummer",
"{count} special character": "{count} speciell karaktär", "{count} special character": "{count} speciell karaktär",