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