From 2401615caad4c42accf38ae06f5c5a8bc6765fa3 Mon Sep 17 00:00:00 2001 From: Erik Tiekstra Date: Fri, 16 May 2025 06:21:09 +0000 Subject: [PATCH] fix(SW-2754): Fixed issue where server rendered html included faulty links MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Approved-by: Matilda Landström --- .../components/ButtonLink/index.tsx | 17 ++-------- .../HotelPage/SidePeeks/Amenities/index.tsx | 10 ++++-- .../MeetingsAndConferences/index.tsx | 32 +++++++++---------- .../RestaurantBar/RestaurantBarItem/index.tsx | 16 ++++++---- .../SidePeeks/WellnessAndExercise/index.tsx | 9 +++--- .../Accordions/Accessibility.tsx | 11 +++---- .../Accordions/Parking.tsx | 9 +++--- .../TempDesignSystem/Link/index.tsx | 12 +------ .../components/TempDesignSystem/Link/link.ts | 1 - .../types/components/buttonLink.ts | 10 ------ .../types/components/sidePeeks/amenities.ts | 4 +-- .../scandic-web/utils/appendSlugToPathname.ts | 14 ++++++++ 12 files changed, 67 insertions(+), 78 deletions(-) delete mode 100644 apps/scandic-web/types/components/buttonLink.ts create mode 100644 apps/scandic-web/utils/appendSlugToPathname.ts diff --git a/apps/scandic-web/components/ButtonLink/index.tsx b/apps/scandic-web/components/ButtonLink/index.tsx index 3413e6a8a..0e5297b9d 100644 --- a/apps/scandic-web/components/ButtonLink/index.tsx +++ b/apps/scandic-web/components/ButtonLink/index.tsx @@ -1,8 +1,7 @@ "use client" import Link from "next/link" -import { usePathname } from "next/navigation" -import { type ComponentProps, type PropsWithChildren, useMemo } from "react" +import { type ComponentProps, type PropsWithChildren } from "react" import { trackClick } from "@/utils/tracking" @@ -16,7 +15,6 @@ export interface ButtonLinkProps VariantProps { trackingId?: string trackingParams?: Record - appendToCurrentPath?: boolean } export default function ButtonLink({ @@ -31,10 +29,8 @@ export default function ButtonLink({ onClick = () => {}, trackingId, trackingParams, - appendToCurrentPath, ...props }: ButtonLinkProps) { - const currentPageSlug = usePathname() const classNames = variants({ variant, color, @@ -44,19 +40,10 @@ export default function ButtonLink({ className, }) - const fullUrl = useMemo(() => { - let newPath = href - if (appendToCurrentPath) { - newPath = `${currentPageSlug}${newPath}` - } - - return newPath - }, [href, appendToCurrentPath, currentPageSlug]) - return ( { onClick(e) diff --git a/apps/scandic-web/components/ContentType/HotelPage/SidePeeks/Amenities/index.tsx b/apps/scandic-web/components/ContentType/HotelPage/SidePeeks/Amenities/index.tsx index 6149fe7e8..52d7b4887 100644 --- a/apps/scandic-web/components/ContentType/HotelPage/SidePeeks/Amenities/index.tsx +++ b/apps/scandic-web/components/ContentType/HotelPage/SidePeeks/Amenities/index.tsx @@ -6,6 +6,7 @@ import AdditionalAmenities from "@/components/SidePeeks/AmenitiesSidepeekContent import Accordion from "@/components/TempDesignSystem/Accordion" import SidePeek from "@/components/TempDesignSystem/SidePeek" import { getIntl } from "@/i18n" +import { appendSlugToPathname } from "@/utils/appendSlugToPathname" import { SidepeekSlugs } from "@/types/components/hotelPage/hotelPage" import type { AmenitiesSidePeekProps } from "@/types/components/hotelPage/sidepeek/amenities" @@ -20,6 +21,11 @@ export default async function AmenitiesSidePeek({ }: AmenitiesSidePeekProps) { const intl = await getIntl() + const parkingPageHref = appendSlugToPathname(parking.parkingPageUrl) + const accessibilityPageHref = appendSlugToPathname( + accessibility.accessibilityPageUrl + ) + return ( diff --git a/apps/scandic-web/components/ContentType/HotelPage/SidePeeks/MeetingsAndConferences/index.tsx b/apps/scandic-web/components/ContentType/HotelPage/SidePeeks/MeetingsAndConferences/index.tsx index 079e5ccc1..bf241e215 100644 --- a/apps/scandic-web/components/ContentType/HotelPage/SidePeeks/MeetingsAndConferences/index.tsx +++ b/apps/scandic-web/components/ContentType/HotelPage/SidePeeks/MeetingsAndConferences/index.tsx @@ -1,10 +1,10 @@ -import Button from "@/components/TempDesignSystem/Button" -import Link from "@/components/TempDesignSystem/Link" +import ButtonLink from "@/components/ButtonLink" import SidePeek from "@/components/TempDesignSystem/SidePeek" import Body from "@/components/TempDesignSystem/Text/Body" import Subtitle from "@/components/TempDesignSystem/Text/Subtitle" import Title from "@/components/TempDesignSystem/Text/Title" import { getIntl } from "@/i18n" +import { appendSlugToPathname } from "@/utils/appendSlugToPathname" import SidePeekImages from "../Images" import { getConferenceRoomTexts } from "./util" @@ -23,6 +23,7 @@ export default async function MeetingsAndConferencesSidePeek({ const intl = await getIntl() const { seatingText, roomText } = await getConferenceRoomTexts(meetingRooms) const visibleImages = meetingFacilities?.heroImages.slice(0, 2) + const meetingPageHref = appendSlugToPathname(meetingPageUrl) return ( ) : null} - {meetingPageUrl && ( + {meetingPageHref ? (
- + + {intl.formatMessage({ + defaultMessage: "Read more", + })} +
- )} + ) : null} ) diff --git a/apps/scandic-web/components/ContentType/HotelPage/SidePeeks/RestaurantBar/RestaurantBarItem/index.tsx b/apps/scandic-web/components/ContentType/HotelPage/SidePeeks/RestaurantBar/RestaurantBarItem/index.tsx index d27c41085..bba660c34 100644 --- a/apps/scandic-web/components/ContentType/HotelPage/SidePeeks/RestaurantBar/RestaurantBarItem/index.tsx +++ b/apps/scandic-web/components/ContentType/HotelPage/SidePeeks/RestaurantBar/RestaurantBarItem/index.tsx @@ -5,6 +5,7 @@ import ButtonLink from "@/components/ButtonLink" import OpeningHours from "@/components/OpeningHours" import Link from "@/components/TempDesignSystem/Link" import { getIntl } from "@/i18n" +import { appendSlugToPathname } from "@/utils/appendSlugToPathname" import SidePeekImages from "../../Images" @@ -27,6 +28,10 @@ export default async function RestaurantBarItem({ } = restaurant const visibleImages = restaurant.content.images.slice(0, 2) + const restaurantPageHref = restaurantPage + ? appendSlugToPathname(restaurant.nameInUrl) + : null + return (
@@ -87,8 +92,8 @@ export default async function RestaurantBarItem({
) : null} - {/* If (restaurantPage && bookTableUrl && mainBody==empty), link to external restaurant page. */} - {bookTableUrl || restaurantPage ? ( + {/* If (restaurantPageHref && bookTableUrl && mainBody==empty), link to external restaurant page. */} + {bookTableUrl || restaurantPageHref ? (
{bookTableUrl ? ( - {restaurantPage && !mainBody?.length + {restaurantPageHref && !mainBody?.length ? intl.formatMessage({ defaultMessage: "Read more", }) @@ -110,14 +115,13 @@ export default async function RestaurantBarItem({ })} ) : null} - {restaurantPage && mainBody?.length ? ( + {restaurantPageHref && mainBody?.length ? ( {intl.formatMessage( { diff --git a/apps/scandic-web/components/ContentType/HotelPage/SidePeeks/WellnessAndExercise/index.tsx b/apps/scandic-web/components/ContentType/HotelPage/SidePeeks/WellnessAndExercise/index.tsx index 9d7a2f8e4..1ddfd849f 100644 --- a/apps/scandic-web/components/ContentType/HotelPage/SidePeeks/WellnessAndExercise/index.tsx +++ b/apps/scandic-web/components/ContentType/HotelPage/SidePeeks/WellnessAndExercise/index.tsx @@ -1,6 +1,7 @@ import ButtonLink from "@/components/ButtonLink" import SidePeek from "@/components/TempDesignSystem/SidePeek" import { getIntl } from "@/i18n" +import { appendSlugToPathname } from "@/utils/appendSlugToPathname" import Facility from "./Facility" @@ -15,6 +16,7 @@ export default async function WellnessAndExerciseSidePeek({ spaPage, }: WellnessAndExerciseSidePeekProps) { const intl = await getIntl() + const wellnessExercisePageHref = appendSlugToPathname(wellnessExercisePageUrl) return ( )} - {wellnessExercisePageUrl && ( + {wellnessExercisePageHref ? ( {intl.formatMessage({ defaultMessage: "Show Gym & Wellness", })} - )} + ) : null}
)} diff --git a/apps/scandic-web/components/SidePeeks/AmenitiesSidepeekContent/Accordions/Accessibility.tsx b/apps/scandic-web/components/SidePeeks/AmenitiesSidepeekContent/Accordions/Accessibility.tsx index 679e798d5..dfdc51dd0 100644 --- a/apps/scandic-web/components/SidePeeks/AmenitiesSidepeekContent/Accordions/Accessibility.tsx +++ b/apps/scandic-web/components/SidePeeks/AmenitiesSidepeekContent/Accordions/Accessibility.tsx @@ -14,11 +14,11 @@ import type { AccessibilityAccordionItemProps } from "@/types/components/sidePee export default function AccessibilityAccordionItem({ elevatorPitch, - accessibilityPageUrl, + accessibilityPageHref, }: AccessibilityAccordionItemProps) { const intl = useIntl() - if (!elevatorPitch && !accessibilityPageUrl) { + if (!elevatorPitch && !accessibilityPageHref) { return null } @@ -36,18 +36,17 @@ export default function AccessibilityAccordionItem({

{elevatorPitch}

 - {accessibilityPageUrl && ( + {accessibilityPageHref ? ( {intl.formatMessage({ defaultMessage: "About accessibility" })} - )} + ) : null}
) diff --git a/apps/scandic-web/components/SidePeeks/AmenitiesSidepeekContent/Accordions/Parking.tsx b/apps/scandic-web/components/SidePeeks/AmenitiesSidepeekContent/Accordions/Parking.tsx index 3d8af8138..cfda7e5d0 100644 --- a/apps/scandic-web/components/SidePeeks/AmenitiesSidepeekContent/Accordions/Parking.tsx +++ b/apps/scandic-web/components/SidePeeks/AmenitiesSidepeekContent/Accordions/Parking.tsx @@ -16,7 +16,7 @@ import type { ParkingAccordionItemProps } from "@/types/components/sidePeeks/ame export default function ParkingAccordionItem({ parking, elevatorPitch, - parkingPageUrl, + parkingPageHref, }: ParkingAccordionItemProps) { const intl = useIntl() @@ -39,20 +39,19 @@ export default function ParkingAccordionItem({ {parking.map((data) => ( ))} - {parkingPageUrl && ( + {parkingPageHref ? ( {intl.formatMessage({ defaultMessage: "About parking", })} - )} + ) : null} ) diff --git a/apps/scandic-web/components/TempDesignSystem/Link/index.tsx b/apps/scandic-web/components/TempDesignSystem/Link/index.tsx index 931b4594c..8fcf68733 100644 --- a/apps/scandic-web/components/TempDesignSystem/Link/index.tsx +++ b/apps/scandic-web/components/TempDesignSystem/Link/index.tsx @@ -32,7 +32,6 @@ export default function Link({ * in your component that passes the href here. */ keepSearchParams, - appendToCurrentPath, ...props }: LinkProps) { const currentPageSlug = usePathname() @@ -55,9 +54,6 @@ export default function Link({ const fullUrl = useMemo(() => { let newPath = href - if (appendToCurrentPath) { - newPath = `${currentPageSlug}${newPath}` - } if (keepSearchParams && searchParams.size) { if (newPath.includes("?")) { @@ -74,13 +70,7 @@ export default function Link({ } return newPath - }, [ - href, - searchParams, - keepSearchParams, - appendToCurrentPath, - currentPageSlug, - ]) + }, [href, searchParams, keepSearchParams]) // TODO: Remove this check (and hook) and only return when current web is deleted const isExternal = useCheckIfExternalLink(href) diff --git a/apps/scandic-web/components/TempDesignSystem/Link/link.ts b/apps/scandic-web/components/TempDesignSystem/Link/link.ts index 3e6b6c0b2..873aaedba 100644 --- a/apps/scandic-web/components/TempDesignSystem/Link/link.ts +++ b/apps/scandic-web/components/TempDesignSystem/Link/link.ts @@ -12,5 +12,4 @@ export interface LinkProps trackingId?: string trackingParams?: Record keepSearchParams?: boolean - appendToCurrentPath?: boolean } diff --git a/apps/scandic-web/types/components/buttonLink.ts b/apps/scandic-web/types/components/buttonLink.ts deleted file mode 100644 index 118247a88..000000000 --- a/apps/scandic-web/types/components/buttonLink.ts +++ /dev/null @@ -1,10 +0,0 @@ -import type { ButtonPropsSlot } from "@/components/TempDesignSystem/Button/button" - -export type ButtonLinkProps = React.PropsWithChildren & - Omit & - Pick, "onClick" | "target"> & { - href: string - trackingId?: string - trackingParams?: Record - appendToCurrentPath?: boolean - } diff --git a/apps/scandic-web/types/components/sidePeeks/amenities.ts b/apps/scandic-web/types/components/sidePeeks/amenities.ts index e1b33e783..5f7390ce1 100644 --- a/apps/scandic-web/types/components/sidePeeks/amenities.ts +++ b/apps/scandic-web/types/components/sidePeeks/amenities.ts @@ -6,7 +6,7 @@ import type { } from "@/types/hotel" export interface ParkingAccordionItemProps { - parkingPageUrl?: string + parkingPageHref?: string | null parking: Parking[] elevatorPitch?: string } @@ -22,7 +22,7 @@ export interface CheckInCheckOutAccordionItemProps { export interface AccessibilityAccordionItemProps { elevatorPitch?: string - accessibilityPageUrl?: string + accessibilityPageHref?: string | null } export interface AdditionalAmenitiesProps { diff --git a/apps/scandic-web/utils/appendSlugToPathname.ts b/apps/scandic-web/utils/appendSlugToPathname.ts new file mode 100644 index 000000000..3c9d4119c --- /dev/null +++ b/apps/scandic-web/utils/appendSlugToPathname.ts @@ -0,0 +1,14 @@ +import { headers } from "next/headers" + +import { getLang } from "@/i18n/serverContext" + +export function appendSlugToPathname(slug?: string) { + const pathname = headers().get("x-pathname") + const lang = getLang() + + if (!pathname || !slug) { + return null + } + + return `/${lang}${pathname}/${slug}` +}