Erik Tiekstra
2ef2b2e28d
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
55 lines
1.3 KiB
TypeScript
55 lines
1.3 KiB
TypeScript
"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>
|
|
)
|
|
}
|