feat(SW-237): Updated parallel route to the root layout

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

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

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

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

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

@@ -3,23 +3,18 @@ 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}>
-      {bookingwidget}
+      {breadcrumbs}
-      <section className={styles.layout}>
+      <section className={styles.content}>
-        {breadcrumbs}
+        <Sidebar />
-        <section className={styles.content}>
+        {children}
-          <Sidebar />
-          {children}
-        </section>
       </section>
-    </>
+    </section>
   )
 }

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

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

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

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

app/[lang]/(live)/@bookingwidget/[...paths]/page.tsx

@@ -0,0 +1 @@
+export { default } from "../page"

app/[lang]/(live)/@bookingwidget/default.tsx

@@ -0,0 +1 @@
+export { default } from "./page"

app/[lang]/(live)/@bookingwidget/page.tsx

@@ -0,0 +1,20 @@
+import { serverClient } from "@/lib/trpc/server"
+
+import BookingWidget from "@/components/BookingWidget"
+import { getLang } from "@/i18n/serverContext"
+
+export default async function BookingWidgetPage() {
+  // 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 : (
+        <BookingWidget />
+      )}
+    </>
+  )
+}

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

@@ -21,9 +21,11 @@ export default async function RootLayout({
   children,
   params,
   header,
+  bookingwidget,
 }: React.PropsWithChildren<
   LayoutArgs<LangParams> & {
     header: React.ReactNode
+    bookingwidget: React.ReactNode
   }
 >) {
   setLang(params.lang)
@@ -52,6 +54,7 @@ export default async function RootLayout({
         <ServerIntlProvider intl={{ defaultLocale, locale, messages }}>
           <TrpcProvider>
             {header}
+            {bookingwidget}
             {children}
             <ToastHandler />
             <Footer />

components/BookingWidget/index.tsx

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