From 1b008422d3def4f5c6c7ac19f432116f06ff12b2 Mon Sep 17 00:00:00 2001 From: Pontus Dreij Date: Fri, 1 Nov 2024 10:11:27 +0100 Subject: [PATCH] feat(sw-343): fixed map page (without modal) --- .../select-hotel/@modal/(.)map/page.tsx | 14 +---- .../(standard)/select-hotel/map/page.tsx | 6 +- .../(standard)/select-hotel/utils.ts | 16 ++++++ .../SelectHotel/SelectHotelMap/index.tsx | 56 +++++++++++-------- .../SelectHotelMap/selectHotelMap.module.css | 5 ++ .../hotelReservation/selectHotel/map.ts | 1 + 6 files changed, 61 insertions(+), 37 deletions(-) diff --git a/app/[lang]/(live)/(public)/hotelreservation/(standard)/select-hotel/@modal/(.)map/page.tsx b/app/[lang]/(live)/(public)/hotelreservation/(standard)/select-hotel/@modal/(.)map/page.tsx index f2c2ab55f..eadd81bbb 100644 --- a/app/[lang]/(live)/(public)/hotelreservation/(standard)/select-hotel/@modal/(.)map/page.tsx +++ b/app/[lang]/(live)/(public)/hotelreservation/(standard)/select-hotel/@modal/(.)map/page.tsx @@ -11,6 +11,7 @@ import { setLang } from "@/i18n/serverContext" import { fetchAvailableHotels, generateChildrenString, + getCentralCoordinates, getPointOfInterests, } from "../../utils" @@ -54,17 +55,7 @@ export default async function SelectHotelMapPage({ const pointOfInterests = getPointOfInterests(hotels) - const centralCoordinates = pointOfInterests.reduce( - (acc, poi) => { - acc.lat += poi.coordinates.lat - acc.lng += poi.coordinates.lng - return acc - }, - { lat: 0, lng: 0 } - ) - - centralCoordinates.lat /= pointOfInterests.length - centralCoordinates.lng /= pointOfInterests.length + const centralCoordinates = getCentralCoordinates(pointOfInterests) return ( @@ -73,6 +64,7 @@ export default async function SelectHotelMapPage({ coordinates={centralCoordinates} pointsOfInterest={pointOfInterests} mapId={googleMapId} + isModal={true} /> ) diff --git a/app/[lang]/(live)/(public)/hotelreservation/(standard)/select-hotel/map/page.tsx b/app/[lang]/(live)/(public)/hotelreservation/(standard)/select-hotel/map/page.tsx index 5d0d9e5c4..97d4ec815 100644 --- a/app/[lang]/(live)/(public)/hotelreservation/(standard)/select-hotel/map/page.tsx +++ b/app/[lang]/(live)/(public)/hotelreservation/(standard)/select-hotel/map/page.tsx @@ -6,6 +6,7 @@ import { getLocations } from "@/lib/trpc/memoizedRequests" import { fetchAvailableHotels, generateChildrenString, + getCentralCoordinates, getFiltersFromHotels, getPointOfInterests, } from "@/app/[lang]/(live)/(public)/hotelreservation/(standard)/select-hotel/utils" @@ -55,15 +56,16 @@ export default async function SelectHotelMapPage({ const filters = getFiltersFromHotels(hotels) const pointOfInterests = getPointOfInterests(hotels) + const centralCoordinates = getCentralCoordinates(pointOfInterests) return (
) diff --git a/app/[lang]/(live)/(public)/hotelreservation/(standard)/select-hotel/utils.ts b/app/[lang]/(live)/(public)/hotelreservation/(standard)/select-hotel/utils.ts index b14268126..d33c995fe 100644 --- a/app/[lang]/(live)/(public)/hotelreservation/(standard)/select-hotel/utils.ts +++ b/app/[lang]/(live)/(public)/hotelreservation/(standard)/select-hotel/utils.ts @@ -78,3 +78,19 @@ export function getPointOfInterests(hotels: HotelData[]): PointOfInterest[] { group: PointOfInterestGroupEnum.LOCATION, })) } + +export function getCentralCoordinates(pointOfInterests: PointOfInterest[]) { + const centralCoordinates = pointOfInterests.reduce( + (acc, poi) => { + acc.lat += poi.coordinates.lat + acc.lng += poi.coordinates.lng + return acc + }, + { lat: 0, lng: 0 } + ) + + centralCoordinates.lat /= pointOfInterests.length + centralCoordinates.lng /= pointOfInterests.length + + return centralCoordinates +} diff --git a/components/HotelReservation/SelectHotel/SelectHotelMap/index.tsx b/components/HotelReservation/SelectHotel/SelectHotelMap/index.tsx index 3109d5cc3..c25bc4f15 100644 --- a/components/HotelReservation/SelectHotel/SelectHotelMap/index.tsx +++ b/components/HotelReservation/SelectHotel/SelectHotelMap/index.tsx @@ -9,7 +9,6 @@ import { selectHotel } from "@/constants/routes/hotelReservation" import { CloseIcon, CloseLargeIcon } from "@/components/Icons" import InteractiveMap from "@/components/Maps/InteractiveMap" import Button from "@/components/TempDesignSystem/Button" -import Link from "@/components/TempDesignSystem/Link" import useLang from "@/hooks/useLang" import HotelListing from "./HotelListing" @@ -23,23 +22,30 @@ export default function SelectHotelMap({ coordinates, pointsOfInterest, mapId, + isModal, }: SelectHotelMapProps) { const router = useRouter() const lang = useLang() const intl = useIntl() const [activePoi, setActivePoi] = useState(null) - function onDismiss() { + function handleModalDismiss() { router.back() } + function handlePageRedirect() { + router.push( + `${selectHotel[lang]}?${new URLSearchParams(window.location.search)}` + ) + } + const closeButton = ( - Filter and sort - {/* TODO: Add filter and sort button */} +
+
+ + Filter and sort + {/* TODO: Add filter and sort button */} +
+ +
- - ) } diff --git a/components/HotelReservation/SelectHotel/SelectHotelMap/selectHotelMap.module.css b/components/HotelReservation/SelectHotel/SelectHotelMap/selectHotelMap.module.css index adb35a386..17bf1b39e 100644 --- a/components/HotelReservation/SelectHotel/SelectHotelMap/selectHotelMap.module.css +++ b/components/HotelReservation/SelectHotel/SelectHotelMap/selectHotelMap.module.css @@ -5,6 +5,10 @@ display: none !important; } +.container { + height: 100%; +} + .filterContainer { display: flex; justify-content: space-between; @@ -16,6 +20,7 @@ z-index: 10; background-color: var(--Base-Surface-Secondary-light-Normal); padding: 0 var(--Spacing-x2); + height: 44px; } .filterContainer .closeButton { diff --git a/types/components/hotelReservation/selectHotel/map.ts b/types/components/hotelReservation/selectHotel/map.ts index 9d223d24d..0dfbe98a7 100644 --- a/types/components/hotelReservation/selectHotel/map.ts +++ b/types/components/hotelReservation/selectHotel/map.ts @@ -12,4 +12,5 @@ export interface SelectHotelMapProps { coordinates: Coordinates pointsOfInterest: PointOfInterest[] mapId: string + isModal: boolean }