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 }