Merged in feat/SW-1749-sidepeek-hotel-cta (pull request #2123)

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

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}

apps/scandic-web/components/SidePeeks/AmenitiesSidePeek/amenitiesSidePeek.module.css

@@ -0,0 +1,3 @@
+.button {
+  margin-top: var(--Space-x2);
+}

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>
   )
 }

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>
   )

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({

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

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