From fbc7366dd6fc216a6675e1b26244e9a8e0f54980 Mon Sep 17 00:00:00 2001
From: Niclas Edenvin <niclas.edenvin@scandichotels.com>
Date: Mon, 19 May 2025 13:25:54 +0000
Subject: [PATCH] Merged in feat/SW-1749-sidepeek-hotel-cta (pull request
 #2123)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

feat(SW-1749): add link to hotel page in sidepeek

* feat(SW-1749): add link to hotel page in sidepeek


Approved-by: Matilda Landström
---
 .../HotelReservation/SidePeek/index.tsx          |  4 ++--
 .../amenitiesSidePeek.module.css                 |  3 +++
 .../SidePeeks/AmenitiesSidePeek/index.tsx        | 16 ++++++++++++++++
 .../components/SidePeeks/HotelSidePeek/index.tsx | 13 +++++++++++++
 apps/scandic-web/server/routers/hotels/query.ts  | 15 ++++++++++++++-
 .../hotelReservation/amenitiesSidePeek.ts        |  2 +-
 .../components/hotelReservation/hotelSidePeek.ts |  2 +-
 7 files changed, 50 insertions(+), 5 deletions(-)
 create mode 100644 apps/scandic-web/components/SidePeeks/AmenitiesSidePeek/amenitiesSidePeek.module.css

diff --git a/apps/scandic-web/components/HotelReservation/SidePeek/index.tsx b/apps/scandic-web/components/HotelReservation/SidePeek/index.tsx
index 6c6011ec6..2b67bb627 100644
--- a/apps/scandic-web/components/HotelReservation/SidePeek/index.tsx
+++ b/apps/scandic-web/components/HotelReservation/SidePeek/index.tsx
@@ -68,14 +68,14 @@ export default function HotelReservationSidePeek() {
           <>
             <HotelSidePeek
               additionalHotelData={hotelData.additionalData}
-              hotel={hotelData.hotel}
+              hotel={{ ...hotelData.hotel, url: hotelData.url }}
               restaurants={hotelData.restaurants}
               activeSidePeek={activeSidePeek}
               close={handleCloseClick}
               showCTA={showCTA}
             />
             <AmenitiesSidePeek
-              hotel={hotelData.hotel}
+              hotel={{ ...hotelData.hotel, url: hotelData.url }}
               restaurants={hotelData.restaurants}
               additionalHotelData={hotelData.additionalData}
               activeSidePeek={activeSidePeek}
diff --git a/apps/scandic-web/components/SidePeeks/AmenitiesSidePeek/amenitiesSidePeek.module.css b/apps/scandic-web/components/SidePeeks/AmenitiesSidePeek/amenitiesSidePeek.module.css
new file mode 100644
index 000000000..38d89aefb
--- /dev/null
+++ b/apps/scandic-web/components/SidePeeks/AmenitiesSidePeek/amenitiesSidePeek.module.css
@@ -0,0 +1,3 @@
+.button {
+  margin-top: var(--Space-x2);
+}
diff --git a/apps/scandic-web/components/SidePeeks/AmenitiesSidePeek/index.tsx b/apps/scandic-web/components/SidePeeks/AmenitiesSidePeek/index.tsx
index 20c8436c6..fa93fe7f1 100644
--- a/apps/scandic-web/components/SidePeeks/AmenitiesSidePeek/index.tsx
+++ b/apps/scandic-web/components/SidePeeks/AmenitiesSidePeek/index.tsx
@@ -2,6 +2,7 @@
 
 import { useIntl } from "react-intl"
 
+import ButtonLink from "@/components/ButtonLink"
 import AdditionalAmenities from "@/components/SidePeeks/AmenitiesSidepeekContent/AdditionalAmenities"
 import Accordion from "@/components/TempDesignSystem/Accordion"
 import SidePeek from "@/components/TempDesignSystem/SidePeek"
@@ -11,6 +12,8 @@ import BreakfastAccordionItem from "../AmenitiesSidepeekContent/Accordions/Break
 import CheckInCheckOutAccordionItem from "../AmenitiesSidepeekContent/Accordions/CheckInCheckOut"
 import ParkingAccordionItem from "../AmenitiesSidepeekContent/Accordions/Parking"
 
+import styles from "./amenitiesSidePeek.module.css"
+
 import type { AmenitiesSidePeekProps } from "@/types/components/hotelReservation/amenitiesSidePeek"
 import { SidePeekEnum } from "@/types/components/hotelReservation/sidePeek"
 
@@ -44,6 +47,19 @@ export default function AmenitiesSidePeek({
         />
         <AdditionalAmenities amenities={hotel.detailedFacilities} />
       </Accordion>
+      {hotel.url ? (
+        <ButtonLink
+          href={hotel.url}
+          variant="Secondary"
+          size="Medium"
+          typography="Body/Paragraph/mdBold"
+          className={styles.button}
+        >
+          {intl.formatMessage({
+            defaultMessage: "Read more about the hotel",
+          })}
+        </ButtonLink>
+      ) : null}
     </SidePeek>
   )
 }
diff --git a/apps/scandic-web/components/SidePeeks/HotelSidePeek/index.tsx b/apps/scandic-web/components/SidePeeks/HotelSidePeek/index.tsx
index e0483a0e2..3bc7baef5 100644
--- a/apps/scandic-web/components/SidePeeks/HotelSidePeek/index.tsx
+++ b/apps/scandic-web/components/SidePeeks/HotelSidePeek/index.tsx
@@ -4,6 +4,7 @@ import { useIntl } from "react-intl"
 
 import { Typography } from "@scandic-hotels/design-system/Typography"
 
+import ButtonLink from "@/components/ButtonLink"
 import Contact from "@/components/HotelReservation/Contact"
 import AdditionalAmenities from "@/components/SidePeeks/AmenitiesSidepeekContent/AdditionalAmenities"
 import Accordion from "@/components/TempDesignSystem/Accordion"
@@ -59,6 +60,18 @@ export default function HotelSidePeek({
           />
           <AdditionalAmenities amenities={hotel.detailedFacilities} />
         </Accordion>
+        {hotel.url ? (
+          <ButtonLink
+            href={hotel.url}
+            variant="Secondary"
+            size="Medium"
+            typography="Body/Paragraph/mdBold"
+          >
+            {intl.formatMessage({
+              defaultMessage: "Read more about the hotel",
+            })}
+          </ButtonLink>
+        ) : null}
       </div>
     </SidePeek>
   )
diff --git a/apps/scandic-web/server/routers/hotels/query.ts b/apps/scandic-web/server/routers/hotels/query.ts
index 66e7f3c38..4ccfc462d 100644
--- a/apps/scandic-web/server/routers/hotels/query.ts
+++ b/apps/scandic-web/server/routers/hotels/query.ts
@@ -474,7 +474,20 @@ export const hotelQueryRouter = router({
   get: serviceProcedure
     .input(hotelInputSchema)
     .query(async ({ ctx, input }) => {
-      return getHotel(input, ctx.serviceToken)
+      const { hotelId, language } = input
+
+      const [hotelData, hotelPages] = await Promise.all([
+        getHotel(input, ctx.serviceToken),
+        getHotelPageUrls(language),
+      ])
+      const hotelPage = hotelPages.find((page) => page.hotelId === hotelId)
+
+      return hotelData
+        ? {
+            ...hotelData,
+            url: hotelPage?.url ?? null,
+          }
+        : null
     }),
   hotels: router({
     byCountry: router({
diff --git a/apps/scandic-web/types/components/hotelReservation/amenitiesSidePeek.ts b/apps/scandic-web/types/components/hotelReservation/amenitiesSidePeek.ts
index 81725b76a..f8cf9da6f 100644
--- a/apps/scandic-web/types/components/hotelReservation/amenitiesSidePeek.ts
+++ b/apps/scandic-web/types/components/hotelReservation/amenitiesSidePeek.ts
@@ -2,7 +2,7 @@ import type { SidePeekEnum } from "@/types/components/hotelReservation/sidePeek"
 import type { AdditionalData, Hotel, Restaurant } from "@/types/hotel"
 
 export type AmenitiesSidePeekProps = {
-  hotel: Hotel
+  hotel: Hotel & { url: string | null }
   restaurants: Restaurant[]
   additionalHotelData: AdditionalData | undefined
   activeSidePeek: SidePeekEnum
diff --git a/apps/scandic-web/types/components/hotelReservation/hotelSidePeek.ts b/apps/scandic-web/types/components/hotelReservation/hotelSidePeek.ts
index ac7345be2..24a71105c 100644
--- a/apps/scandic-web/types/components/hotelReservation/hotelSidePeek.ts
+++ b/apps/scandic-web/types/components/hotelReservation/hotelSidePeek.ts
@@ -2,7 +2,7 @@ import type { SidePeekEnum } from "@/types/components/hotelReservation/sidePeek"
 import type { AdditionalData, Hotel, Restaurant } from "@/types/hotel"
 
 export type HotelSidePeekProps = {
-  hotel: Hotel
+  hotel: Hotel & { url: string | null }
   restaurants: Restaurant[]
   additionalHotelData: AdditionalData | undefined
   activeSidePeek: SidePeekEnum