diff --git a/components/ContentType/HotelPage/AmenitiesList/index.tsx b/components/ContentType/HotelPage/AmenitiesList/index.tsx
index 32631adb7..2877f8a52 100644
--- a/components/ContentType/HotelPage/AmenitiesList/index.tsx
+++ b/components/ContentType/HotelPage/AmenitiesList/index.tsx
@@ -3,6 +3,7 @@ import { ChevronRightIcon } from "@/components/Icons"
import Link from "@/components/TempDesignSystem/Link"
import SidePeekContainer from "@/components/TempDesignSystem/SidePeek/Container"
import SidePeekContent from "@/components/TempDesignSystem/SidePeek/Content"
+import { generateSidePeekLink } from "@/components/TempDesignSystem/SidePeek/data"
import Body from "@/components/TempDesignSystem/Text/Body"
import Subtitle from "@/components/TempDesignSystem/Text/Subtitle"
import { getIntl } from "@/i18n"
@@ -17,6 +18,7 @@ export default async function AmenitiesList({
detailedFacilities: HotelData["data"]["attributes"]["detailedFacilities"]
}) {
const { formatMessage } = await getIntl()
+ const sidePeekLink = generateSidePeekLink("amenities")
const sortedAmenities = detailedFacilities
.sort((a, b) => b.sortOrder - a.sortOrder)
.slice(0, 5)
@@ -36,12 +38,7 @@ export default async function AmenitiesList({
)
})}
-
+
{formatMessage({ id: "Show all amenities" })}
diff --git a/components/TempDesignSystem/SidePeek/Container/index.tsx b/components/TempDesignSystem/SidePeek/Container/index.tsx
index 9517a9fd1..907e834f3 100644
--- a/components/TempDesignSystem/SidePeek/Container/index.tsx
+++ b/components/TempDesignSystem/SidePeek/Container/index.tsx
@@ -4,6 +4,7 @@ import { usePathname, useRouter, useSearchParams } from "next/navigation"
import React, { Children, cloneElement, useEffect, useState } from "react"
import SidePeek from "@/components/TempDesignSystem/SidePeek"
+import { SidePeekContentKey } from "@/components/TempDesignSystem/SidePeek/types"
export default function SidePeekContainer({
children,
@@ -11,14 +12,18 @@ export default function SidePeekContainer({
const router = useRouter()
const pathname = usePathname()
const searchParams = useSearchParams()
- const [activeSidePeek, setActiveSidePeek] = useState(() => {
- const sidePeekParam = searchParams.get("sidepeek")
-
- return sidePeekParam || null
- })
+ const [activeSidePeek, setActiveSidePeek] =
+ useState(() => {
+ const sidePeekParam = searchParams.get(
+ "sidepeek"
+ ) as SidePeekContentKey | null
+ return sidePeekParam || null
+ })
useEffect(() => {
- const sidePeekParam = searchParams.get("sidepeek")
+ const sidePeekParam = searchParams.get(
+ "sidepeek"
+ ) as SidePeekContentKey | null
if (sidePeekParam !== activeSidePeek) {
setActiveSidePeek(sidePeekParam)
}
@@ -39,7 +44,8 @@ export default function SidePeekContainer({
return child
}
return cloneElement(child as React.ReactElement, {
- isActive: child.props.contentKey === activeSidePeek,
+ isActive:
+ (child.props.contentKey as SidePeekContentKey) === activeSidePeek,
})
})
diff --git a/components/TempDesignSystem/SidePeek/data.ts b/components/TempDesignSystem/SidePeek/data.ts
new file mode 100644
index 000000000..b60452af1
--- /dev/null
+++ b/components/TempDesignSystem/SidePeek/data.ts
@@ -0,0 +1,5 @@
+import { SidePeekContentKey } from "./types"
+
+export const generateSidePeekLink = (key: SidePeekContentKey) => {
+ return `?sidepeek=${key}`
+}
diff --git a/components/TempDesignSystem/SidePeek/types.ts b/components/TempDesignSystem/SidePeek/types.ts
index e37554aff..10410ec6d 100644
--- a/components/TempDesignSystem/SidePeek/types.ts
+++ b/components/TempDesignSystem/SidePeek/types.ts
@@ -1,3 +1,5 @@
+export type SidePeekContentKey = "amenities" | "read_more_about_the_hotel"
+
export type SidePeekProps = {
activeContent: string | null
onClose: (isOpen: boolean) => void
@@ -5,7 +7,7 @@ export type SidePeekProps = {
export type SidePeekContentProps = {
title?: string
- contentKey: string
+ contentKey: SidePeekContentKey
isActive?: boolean
onClose?: () => void
}