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

Merge branch 'develop' into feat/performance-improvements

Browse Source
This commit is contained in:
Linus Flood
2024-11-06 13:48:26 +01:00
parent 4f7b9d24d9 0cbffc7904
commit a76857a62b
70 changed files with 1149 additions and 519 deletions
Download Patch File Download Diff File Expand all files Collapse all files

36
components/ContentType/HotelPage/Map/DynamicMap/Sidebar/index.tsx
View File

@@ -37,21 +37,26 @@ export default function Sidebar({
function moveToPoi(poiCoordinates: Coordinates) {
if (map) {
const hotelLatLng = new google.maps.LatLng(
coordinates.lat,
coordinates.lng
)
const poiLatLng = new google.maps.LatLng(
poiCoordinates.lat,
poiCoordinates.lng
)
const bounds = new google.maps.LatLngBounds()
const boundPadding = 0.02
bounds.extend(hotelLatLng)
bounds.extend(poiLatLng)
const minLat = Math.min(coordinates.lat, poiCoordinates.lat)
const maxLat = Math.max(coordinates.lat, poiCoordinates.lat)
const minLng = Math.min(coordinates.lng, poiCoordinates.lng)
const maxLng = Math.max(coordinates.lng, poiCoordinates.lng)
bounds.extend(
new google.maps.LatLng(minLat - boundPadding, minLng - boundPadding)
)
bounds.extend(
new google.maps.LatLng(maxLat + boundPadding, maxLng + boundPadding)
)
map.fitBounds(bounds)
const currentZoomLevel = map.getZoom()
if (currentZoomLevel) {
map.setZoom(currentZoomLevel - 1)
}
}
}
@@ -61,12 +66,6 @@ export default function Sidebar({
}
}
function handleMouseLeave() {
if (!isClicking) {
onActivePoiChange(null)
}
}
function handlePoiClick(poiName: string, poiCoordinates: Coordinates) {
setIsClicking(true)
toggleFullScreenSidebar()
@@ -127,7 +126,6 @@ export default function Sidebar({
<button
className={`${styles.poiButton} ${activePoi === poi.name ? styles.active : ""}`}
onMouseEnter={() => handleMouseEnter(poi.name)}
onMouseLeave={handleMouseLeave}
onClick={() =>
handlePoiClick(poi.name, poi.coordinates)
}

10
components/ContentType/HotelPage/Rooms/RoomCard/index.tsx
View File

@@ -4,15 +4,16 @@ import { useIntl } from "react-intl"
import { GalleryIcon } from "@/components/Icons"
import Image from "@/components/Image"
import RoomSidePeek from "@/components/SidePeeks/RoomSidePeek"
import Body from "@/components/TempDesignSystem/Text/Body"
import Subtitle from "@/components/TempDesignSystem/Text/Subtitle"
import RoomDetailsButton from "../RoomDetailsButton"
import styles from "./roomCard.module.css"
import type { RoomCardProps } from "@/types/components/hotelPage/room"
export function RoomCard({ room }: RoomCardProps) {
export function RoomCard({ hotelId, room }: RoomCardProps) {
const { images, name, roomSize, occupancy, id } = room
const intl = useIntl()
const mainImage = images[0]
@@ -70,7 +71,10 @@ export function RoomCard({ room }: RoomCardProps) {
</Subtitle>
<Body color="grey">{subtitle}</Body>
</div>
<RoomSidePeek room={room} buttonSize="medium" />
<RoomDetailsButton
hotelId={hotelId}
roomTypeCode={room.roomTypes[0].code}
/>
</div>
</article>
)

34
components/ContentType/HotelPage/Rooms/RoomDetailsButton/index.tsx Normal file
View File

@@ -0,0 +1,34 @@
"use client"
import { useIntl } from "react-intl"
import useSidePeekStore from "@/stores/sidepeek"
import { ChevronRightSmallIcon } from "@/components/Icons"
import Button from "@/components/TempDesignSystem/Button"
import { SidePeekEnum } from "@/types/components/hotelReservation/sidePeek"
import { ToggleSidePeekProps } from "@/types/components/hotelReservation/toggleSidePeekProps"
export default function RoomDetailsButton({
hotelId,
roomTypeCode,
}: ToggleSidePeekProps) {
const intl = useIntl()
const openSidePeek = useSidePeekStore((state) => state.openSidePeek)
return (
<Button
intent="text"
type="button"
size="medium"
theme="base"
onClick={() =>
openSidePeek({ key: SidePeekEnum.roomDetails, hotelId, roomTypeCode })
}
>
{intl.formatMessage({ id: "See room details" })}
<ChevronRightSmallIcon color="burgundy" width={20} height={20} />
</Button>
)
}

4
components/ContentType/HotelPage/Rooms/index.tsx
View File

@@ -15,7 +15,7 @@ import styles from "./rooms.module.css"
import type { RoomsProps } from "@/types/components/hotelPage/room"
import { HotelHashValues } from "@/types/components/hotelPage/tabNavigation"
export function Rooms({ rooms }: RoomsProps) {
export function Rooms({ hotelId, rooms }: RoomsProps) {
const intl = useIntl()
const showToggleButton = rooms.length > 3
const [allRoomsVisible, setAllRoomsVisible] = useState(!showToggleButton)
@@ -45,7 +45,7 @@ export function Rooms({ rooms }: RoomsProps) {
>
{rooms.map((room) => (
<div key={room.id}>
<RoomCard room={room} />
<RoomCard hotelId={hotelId} room={room} />
</div>
))}
</Grids.Stackable>

5
components/ContentType/HotelPage/index.tsx
View File

@@ -3,6 +3,7 @@ import { env } from "@/env/server"
import { serverClient } from "@/lib/trpc/server"
import AccordionSection from "@/components/Blocks/Accordion"
import HotelReservationSidePeek from "@/components/HotelReservation/SidePeek"
import SidePeekProvider from "@/components/SidePeeks/SidePeekProvider"
import Alert from "@/components/TempDesignSystem/Alert"
import SidePeek from "@/components/TempDesignSystem/SidePeek"
@@ -37,6 +38,7 @@ export default async function HotelPage() {
}
const {
hotelId,
hotelName,
hotelDescription,
hotelLocation,
@@ -97,7 +99,7 @@ export default async function HotelPage() {
</div>
) : null}
</div>
<Rooms rooms={roomCategories} />
<Rooms hotelId={hotelId} rooms={roomCategories} />
<Facilities facilities={facilities} activitiesCard={activitiesCard} />
{faq.accordions.length > 0 && (
<AccordionSection accordion={faq.accordions} title={faq.title} />
@@ -166,6 +168,7 @@ export default async function HotelPage() {
</SidePeek>
{/* eslint-enable import/no-named-as-default-member */}
</SidePeekProvider>
<HotelReservationSidePeek hotel={null} />
</div>
)
}