feat/SW-1756-meeting-package-content-pages

* feat(SW-1230): Changes to script to be able to reload after soft navigation
* feat(SW-1756): Added meeting package widget on content pages

Approved-by: Matilda Landström

apps/scandic-web/components/MeetingPackageWidget/Skeleton/skeleton.module.css

@@ -1,11 +1,14 @@
 .mobile,
 .desktop {
-  padding: var(--Spacing-x2) 0;
+  padding: var(--Spacing-x2) var(--Spacing-x2);
   background-color: var(--Base-Surface-Primary-light-Normal);
 }
 
 .desktop {
   display: none;
+  width: 100%;
+  max-width: var(--max-width-page);
+  margin: 0 auto;
 }
 
 /* Meeting booking widget changes design at 948px */

apps/scandic-web/components/MeetingPackageWidget/index.tsx

@@ -1,53 +1,58 @@
 "use client"
 
-import Script from "next/script"
-import { useState } from "react"
+import { useEffect, useState } from "react"
 
 import useLang from "@/hooks/useLang"
 
 import MeetingPackageWidgetSkeleton from "./Skeleton"
-import { meetingPackageDestinationByHotelId } from "./utils"
 
 import styles from "./meetingPackageWidget.module.css"
 
-const SOURCE = "https://bookingengine-mp.s3.eu-west-2.amazonaws.com/script.js"
+const SOURCE =
+  "https://scandic-bookingengine.s3.eu-central-1.amazonaws.com/script_stage.js"
 
 interface MeetingPackageWidgetProps {
-  hotelId?: string
+  destination?: string
   className?: string
 }
 
 export default function MeetingPackageWidget({
-  hotelId,
-  className = "",
+  destination,
+  className,
 }: MeetingPackageWidgetProps) {
   const lang = useLang()
   const [isLoading, setIsLoading] = useState(true)
-  const destination = hotelId
-    ? meetingPackageDestinationByHotelId[hotelId]
-    : undefined
 
-  function handleOnReady() {
-    setIsLoading(false)
-  }
+  useEffect(() => {
+    const script = document.createElement("script")
+    script.src = SOURCE
+    script.setAttribute("langcode", lang)
+    script.setAttribute("whitelabel_id", "224905")
+    script.setAttribute("widget_id", "scandic_default_new")
+    script.setAttribute("version", "frontpage-scandic")
+    if (destination) {
+      script.setAttribute("destination", destination)
+    }
+    document.body.appendChild(script)
+
+    function onLoad() {
+      setIsLoading(false)
+    }
+
+    script.addEventListener("load", onLoad)
+
+    return () => {
+      script.removeEventListener("load", onLoad)
+      document.body.removeChild(script)
+    }
+  }, [destination, lang])
 
   return (
     <div className={className}>
       {isLoading && <MeetingPackageWidgetSkeleton />}
-
       <div
         id="mp-booking-engine-iframe-container"
-        className={`${styles.widget} ${!isLoading ? styles.ready : ""}`}
-      />
-      <Script
-        //@ts-expect-error: invalid attributes because of external script
-        langcode={lang}
-        destination={destination}
-        whitelabel_id="224905"
-        widget_id="scandic_default_new"
-        version="frontpage-scandic"
-        src={SOURCE}
-        onReady={handleOnReady}
+        className={`${styles.widget} ${isLoading ? styles.isLoading : ""}`}
       />
     </div>
   )

apps/scandic-web/components/MeetingPackageWidget/meetingPackageWidget.module.css

@@ -1,7 +1,12 @@
-/* Hiding widget on mobile for now as the widget is not ready for mobile use at the moment */
-
 .widget {
-  background-color: var(--Base-Surface-Primary-light-Normal);
+  width: 100%;
+  max-width: var(--max-width-page);
+  margin: 0 auto;
+  /* Hiding widget on mobile for now as the widget is not ready for mobile use at the moment */
+  display: none;
+}
+
+.widget.isLoading {
   display: none;
 }
 
@@ -9,8 +14,6 @@
 @media screen and (min-width: 948px) {
   .widget {
     background-color: var(--Base-Surface-Primary-light-Normal);
-  }
-  .widget.ready {
     display: block;
   }
 }