002d093af4
feat(SW-2863): Move contentstack router to trpc package * Add exports to packages and lint rule to prevent relative imports * Add env to trpc package * Add eslint to trpc package * Apply lint rules * Use direct imports from trpc package * Add lint-staged config to trpc * Move lang enum to common * Restructure trpc package folder structure * WIP first step * update internal imports in trpc * Fix most errors in scandic-web Just 100 left... * Move Props type out of trpc * Fix CategorizedFilters types * Move more schemas in hotel router * Fix deps * fix getNonContentstackUrls * Fix import error * Fix entry error handling * Fix generateMetadata metrics * Fix alertType enum * Fix duplicated types * lint:fix * Merge branch 'master' into feat/sw-2863-move-contentstack-router-to-trpc-package * Fix broken imports * Merge branch 'master' into feat/sw-2863-move-contentstack-router-to-trpc-package Approved-by: Linus Flood
89 lines
2.6 KiB
TypeScript
89 lines
2.6 KiB
TypeScript
import {
|
|
AdvancedMarker,
|
|
AdvancedMarkerAnchorPoint,
|
|
} from "@vis.gl/react-google-maps"
|
|
import { useIntl } from "react-intl"
|
|
|
|
import Body from "@/components/TempDesignSystem/Text/Body"
|
|
import Caption from "@/components/TempDesignSystem/Text/Caption"
|
|
|
|
import HotelMarkerByType from "../../Markers"
|
|
import PoiMarker from "../../Markers/Poi"
|
|
|
|
import styles from "./poiMapMarkers.module.css"
|
|
|
|
import type { PointOfInterest } from "@scandic-hotels/trpc/types/hotel"
|
|
import type { MarkerInfo } from "@scandic-hotels/trpc/types/marker"
|
|
|
|
export type PoiMapMarkersProps = {
|
|
activePoi?: string | null
|
|
coordinates: { lat: number; lng: number }
|
|
onActivePoiChange?: (poiName: string | null) => void
|
|
pointsOfInterest: PointOfInterest[]
|
|
markerInfo: MarkerInfo
|
|
}
|
|
|
|
export default function PoiMapMarkers({
|
|
coordinates,
|
|
pointsOfInterest,
|
|
onActivePoiChange,
|
|
activePoi,
|
|
markerInfo,
|
|
}: PoiMapMarkersProps) {
|
|
const intl = useIntl()
|
|
|
|
function toggleActivePoi(poiName: string) {
|
|
onActivePoiChange?.(activePoi === poiName ? null : poiName)
|
|
}
|
|
return (
|
|
<>
|
|
<AdvancedMarker position={coordinates} zIndex={1}>
|
|
<HotelMarkerByType
|
|
hotelId={markerInfo.hotelId}
|
|
hotelType={markerInfo.hotelType}
|
|
/>
|
|
</AdvancedMarker>
|
|
|
|
{pointsOfInterest.map((poi) => (
|
|
<AdvancedMarker
|
|
key={poi.name}
|
|
className={styles.advancedMarker}
|
|
position={poi.coordinates}
|
|
anchorPoint={AdvancedMarkerAnchorPoint.CENTER}
|
|
zIndex={activePoi === poi.name ? 2 : 0}
|
|
onMouseEnter={() => onActivePoiChange?.(poi.name ?? null)}
|
|
onMouseLeave={() => onActivePoiChange?.(null)}
|
|
onClick={() => toggleActivePoi(poi.name ?? "")}
|
|
>
|
|
<span
|
|
className={`${styles.poi} ${activePoi === poi.name ? styles.active : ""}`}
|
|
>
|
|
<PoiMarker
|
|
group={poi.group}
|
|
categoryName={poi.categoryName}
|
|
size={activePoi === poi.name ? 20 : 16}
|
|
/>
|
|
<Body className={styles.poiLabel} asChild>
|
|
<span>
|
|
{poi.name}
|
|
<Caption asChild>
|
|
<span>
|
|
{intl.formatMessage(
|
|
{
|
|
defaultMessage: "{distanceInKm} km",
|
|
},
|
|
{
|
|
distanceInKm: poi.distance,
|
|
}
|
|
)}
|
|
</span>
|
|
</Caption>
|
|
</span>
|
|
</Body>
|
|
</span>
|
|
</AdvancedMarker>
|
|
))}
|
|
</>
|
|
)
|
|
}
|