Merged in feat/SW-1230-meeting-booking-widget (pull request #1507)

feat(SW-1230): Added meeting booking widget to hotel meeting pages

* feat(SW-1230): Added meeting booking widget to hotel meeting pages


Approved-by: Fredrik Thorsson

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

@@ -0,0 +1,54 @@
+"use client"
+
+import Script from "next/script"
+import { 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"
+
+interface MeetingPackageWidgetProps {
+  hotelId?: string
+  className?: string
+}
+
+export default function MeetingPackageWidget({
+  hotelId,
+  className = "",
+}: MeetingPackageWidgetProps) {
+  const lang = useLang()
+  const [isLoading, setIsLoading] = useState(true)
+  const destination = hotelId
+    ? meetingPackageDestinationByHotelId[hotelId]
+    : undefined
+
+  function handleOnReady() {
+    setIsLoading(false)
+  }
+
+  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}
+      />
+    </div>
+  )
+}