diff --git a/apps/scandic-web/app/[lang]/(live)/(public)/[contentType]/[uid]/@breadcrumbs/page.tsx b/apps/scandic-web/app/[lang]/(live)/(public)/[contentType]/[uid]/@breadcrumbs/page.tsx index 151efabc2..8682a8b8f 100644 --- a/apps/scandic-web/app/[lang]/(live)/(public)/[contentType]/[uid]/@breadcrumbs/page.tsx +++ b/apps/scandic-web/app/[lang]/(live)/(public)/[contentType]/[uid]/@breadcrumbs/page.tsx @@ -8,6 +8,7 @@ import { PageContentTypeEnum } from "@/types/requests/contentType" const IGNORED_CONTENT_TYPES = [ PageContentTypeEnum.hotelPage, + PageContentTypeEnum.contentPage, PageContentTypeEnum.destinationCityPage, PageContentTypeEnum.destinationCountryPage, ] diff --git a/apps/scandic-web/components/ContentType/HotelSubpage/index.tsx b/apps/scandic-web/components/ContentType/HotelSubpage/index.tsx index 8d62d15d3..c4b5bdbbd 100644 --- a/apps/scandic-web/components/ContentType/HotelSubpage/index.tsx +++ b/apps/scandic-web/components/ContentType/HotelSubpage/index.tsx @@ -11,6 +11,8 @@ import { import Breadcrumbs from "@/components/Breadcrumbs" import Hero from "@/components/Hero" +import { meetingPackageDestinationByHotelId } from "@/components/MeetingPackageWidget/utils" +import StickyMeetingPackageWidget from "@/components/StickyMeetingPackageWidget" import BreadcrumbsSkeleton from "@/components/TempDesignSystem/Breadcrumbs/BreadcrumbsSkeleton" import Button from "@/components/TempDesignSystem/Button" import Divider from "@/components/TempDesignSystem/Divider" @@ -21,7 +23,6 @@ import { safeTry } from "@/utils/safeTry" import MeetingsAdditionalContent from "./AdditionalContent/Meetings" import HotelSubpageAdditionalContent from "./AdditionalContent" import HtmlContent from "./HtmlContent" -import { MeetingWidget } from "./MeetingWidget" import HotelSubpageSidebar from "./Sidebar" import { getSubpageData, verifySubpageShouldExist } from "./utils" @@ -63,13 +64,18 @@ export default async function HotelSubpage({ const restaurantButton = restaurants.find( (restaurant) => restaurant.nameInUrl === subpage ) + const meetingPackageDestination = hotelId + ? meetingPackageDestinationByHotelId[hotelId] + : undefined return ( <>
- {meetingRooms && } + {meetingRooms && ( + + )}
}> + <> + {contentPage.meeting_package?.show_widget && ( + + )} + }> + + + + ) } diff --git a/apps/scandic-web/components/ContentType/StaticPages/index.tsx b/apps/scandic-web/components/ContentType/StaticPages/index.tsx index a29fbab33..b6c0340d2 100644 --- a/apps/scandic-web/components/ContentType/StaticPages/index.tsx +++ b/apps/scandic-web/components/ContentType/StaticPages/index.tsx @@ -15,6 +15,7 @@ import { staticPageVariants } from "./variants" import styles from "./staticPage.module.css" +import MeetingPackageWidget from "@/components/MeetingPackageWidget" import type { StaticPageProps } from "./staticPage" export default async function StaticPage({ @@ -22,7 +23,7 @@ export default async function StaticPage({ tracking, pageType, }: StaticPageProps) { - const { blocks, hero_image, header } = content + const { blocks, hero_image, header, meeting_package } = content return ( <> @@ -68,6 +69,12 @@ export default async function StaticPage({
+ {pageType === "collection" && meeting_package?.show_widget && ( + + )} {blocks ? : null}
diff --git a/apps/scandic-web/components/ContentType/StaticPages/staticPage.module.css b/apps/scandic-web/components/ContentType/StaticPages/staticPage.module.css index 57d98dc6d..95b4c8607 100644 --- a/apps/scandic-web/components/ContentType/StaticPages/staticPage.module.css +++ b/apps/scandic-web/components/ContentType/StaticPages/staticPage.module.css @@ -58,6 +58,13 @@ grid-area: main; } +.meetingPackageWidget { + border-radius: var(--Corner-radius-lg); + background-color: var(--Base-Surface-Primary-light-Normal); + box-shadow: 0px 4px 24px 0px rgba(0, 0, 0, 0.05); + overflow: hidden; +} + .button { width: fit-content; } diff --git a/apps/scandic-web/components/MeetingPackageWidget/Skeleton/skeleton.module.css b/apps/scandic-web/components/MeetingPackageWidget/Skeleton/skeleton.module.css index 76c6bdba0..a202785c7 100644 --- a/apps/scandic-web/components/MeetingPackageWidget/Skeleton/skeleton.module.css +++ b/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 */ diff --git a/apps/scandic-web/components/MeetingPackageWidget/index.tsx b/apps/scandic-web/components/MeetingPackageWidget/index.tsx index 8a1f4e783..993f70e80 100644 --- a/apps/scandic-web/components/MeetingPackageWidget/index.tsx +++ b/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 (
{isLoading && } -
-