feat(SW-237): Implemented page based toggle for BW

app/[lang]/(live)/(protected)/my-pages/@bookingwidget/[...path]/page.tsx

@@ -0,0 +1,5 @@
+import BookingWidgetContainer from "@/components/BookingWidgetContainer"
+
+export default function BookingWidgetPage() {
+  return <BookingWidgetContainer />
+}

app/[lang]/(live)/(protected)/my-pages/@bookingwidget/default.tsx

@@ -0,0 +1,3 @@
+export default function DefaultBookingWidgetPage() {
+  return null
+}

app/[lang]/(live)/(protected)/my-pages/layout.tsx

@@ -3,18 +3,23 @@ import Sidebar from "@/components/MyPages/Sidebar"
 import styles from "./layout.module.css"
 
 export default async function MyPagesLayout({
+  bookingwidget,
   breadcrumbs,
   children,
 }: React.PropsWithChildren & {
+  bookingwidget: React.ReactNode
   breadcrumbs: React.ReactNode
 }) {
   return (
-    <section className={styles.layout}>
+    <>
-      {breadcrumbs}
+      {bookingwidget}
-      <section className={styles.content}>
+      <section className={styles.layout}>
-        <Sidebar />
+        {breadcrumbs}
-        {children}
+        <section className={styles.content}>
+          <Sidebar />
+          {children}
+        </section>
       </section>
-    </section>
+    </>
   )
 }

app/[lang]/(live)/(public)/[contentType]/[uid]/layout.tsx

@@ -1,3 +1,5 @@
+import BookingWidgetContainer from "@/components/BookingWidgetContainer"
+
 import styles from "./layout.module.css"
 
 import {
@@ -16,9 +18,12 @@ export default function ContentTypeLayout({
   }
 >) {
   return (
-    <section className={styles.layout}>
+    <>
-      {breadcrumbs}
+      <BookingWidgetContainer />
-      {children}
+      <section className={styles.layout}>
-    </section>
+        {breadcrumbs}
+        {children}
+      </section>
+    </>
   )
 }

app/[lang]/(live)/(public)/hotelreservation/layout.tsx

@@ -1,3 +1,5 @@
+import BookingWidgetContainer from "@/components/BookingWidgetContainer"
+
 import styles from "./layout.module.css"
 
 import { LangParams, LayoutArgs } from "@/types/params"
@@ -5,5 +7,10 @@ import { LangParams, LayoutArgs } from "@/types/params"
 export default function HotelReservationLayout({
   children,
 }: React.PropsWithChildren<LayoutArgs<LangParams>>) {
-  return <div className={styles.layout}>{children}</div>
+  return (
+    <>
+      <BookingWidgetContainer />
+      <div className={styles.layout}>{children}</div>
+    </>
+  )
 }

app/[lang]/(live-current)/layout.tsx

@@ -4,6 +4,7 @@ import "@scandic-hotels/design-system/style.css"
 import Script from "next/script"
 
 import TokenRefresher from "@/components/Auth/TokenRefresher"
+import BookingWidgetContainer from "@/components/BookingWidgetContainer"
 import AdobeScript from "@/components/Current/AdobeScript"
 import Footer from "@/components/Current/Footer"
 import Header from "@/components/Current/Header"
@@ -71,6 +72,7 @@ export default async function RootLayout({
             myPagesMobileDropdown={myPagesMobileDropdown}
             languageSwitcher={languageSwitcher}
           />
+          <BookingWidgetContainer />
           {children}
           <Footer />
           <TokenRefresher />

components/BookingWidget/index.tsx

@@ -1,11 +0,0 @@
-import Form from "../Forms/BookingWidget"
-
-import styles from "./bookingWidget.module.css"
-
-export function BookingWidget() {
-  return (
-    <section className={styles.container}>
-      <Form />
-    </section>
-  )
-}

components/BookingWidgetContainer/index.tsx

@@ -0,0 +1,23 @@
+import { serverClient } from "@/lib/trpc/server"
+import { getLang } from "@/i18n/serverContext"
+
+import Form from "@/components/Forms/BookingWidget"
+import styles from "./bookingWidget.module.css"
+
+export default async function BookingWidgetContainer() {
+  // Get the booking widget show/hide status based on page specific settings
+  const bookingWidgetToggle =
+    await serverClient().contentstack.base.page_settings({
+      lang: getLang(),
+    })
+
+  return (
+    <>
+      {bookingWidgetToggle && bookingWidgetToggle.hideBookingWidget ? null : (
+        <section className={styles.container}>
+          <Form />
+        </section>
+      )}
+    </>
+  )
+}

components/Current/Header/index.tsx

@@ -1,8 +1,6 @@
 import { homeHrefs } from "@/constants/homeHrefs"
 import { env } from "@/env/server"
 import { serverClient } from "@/lib/trpc/server"
-
-import { BookingWidget } from "@/components/BookingWidget"
 import { getLang } from "@/i18n/serverContext"
 
 import { MainMenu } from "./MainMenu"
@@ -24,12 +22,6 @@ export default async function Header({
 
   const user = await serverClient().user.name()
 
-  // Get the booking widget show/hide status based on page specific settings
-  const bookingWidgetToggle =
-    await serverClient().contentstack.base.page_settings({
-      lang: getLang(),
-    })
-
   if (!data) {
     return null
   }
@@ -61,9 +53,6 @@ export default async function Header({
         bookingHref={homeHref}
         user={user}
       />
-      {bookingWidgetToggle && bookingWidgetToggle.hideBookingWidget ? null : (
-        <BookingWidget />
-      )}
     </header>
   )
 }