scandic/web
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Some pr fixes

Browse Source
This commit is contained in:
Linus Flood
2024-09-12 19:40:52 +02:00
parent 8f878ac66b
commit df90387f1a
6 changed files with 76 additions and 89 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -1,9 +1,6 @@
import { Suspense } from "react"
import { serverClient } from "@/lib/trpc/server" import { serverClient } from "@/lib/trpc/server"
import BookingWidget from "@/components/BookingWidget" import BookingWidget from "@/components/BookingWidget"
import LoadingSpinner from "@/components/LoadingSpinner"
export default async function BookingWidgetPage() { export default async function BookingWidgetPage() {
// Get the booking widget show/hide status based on page specific settings // Get the booking widget show/hide status based on page specific settings
@@ -11,10 +8,10 @@ export default async function BookingWidgetPage() {
await serverClient().contentstack.bookingwidget.getToggle() await serverClient().contentstack.bookingwidget.getToggle()
return ( return (
<Suspense fallback={<LoadingSpinner />}> <>
{bookingWidgetToggle && bookingWidgetToggle.hideBookingWidget ? null : ( {bookingWidgetToggle && bookingWidgetToggle.hideBookingWidget ? null : (
<BookingWidget /> <BookingWidget />
)} )}
</Suspense> </>
) )
} }

6
app/[lang]/(live)/layout.tsx
View File

@@ -2,6 +2,7 @@ import "@/app/globals.css"
import "@scandic-hotels/design-system/style.css" import "@scandic-hotels/design-system/style.css"
import Script from "next/script" import Script from "next/script"
import { Suspense } from "react"
import TrpcProvider from "@/lib/trpc/Provider" import TrpcProvider from "@/lib/trpc/Provider"
@@ -10,6 +11,7 @@ import AdobeSDKScript from "@/components/Current/AdobeSDKScript"
import VwoScript from "@/components/Current/VwoScript" import VwoScript from "@/components/Current/VwoScript"
import Footer from "@/components/Footer" import Footer from "@/components/Footer"
import Header from "@/components/Header" import Header from "@/components/Header"
import LoadingSpinner from "@/components/LoadingSpinner"
import { ToastHandler } from "@/components/TempDesignSystem/Toasts" import { ToastHandler } from "@/components/TempDesignSystem/Toasts"
import { preloadUserTracking } from "@/components/TrackingSDK" import { preloadUserTracking } from "@/components/TrackingSDK"
import { getIntl } from "@/i18n" import { getIntl } from "@/i18n"
@@ -54,7 +56,9 @@ export default async function RootLayout({
<body> <body>
<ServerIntlProvider intl={{ defaultLocale, locale, messages }}> <ServerIntlProvider intl={{ defaultLocale, locale, messages }}>
<TrpcProvider> <TrpcProvider>
<Header languageSwitcher={languageSwitcher} /> <Suspense fallback={<LoadingSpinner />}>
<Header languageSwitcher={languageSwitcher} />
</Suspense>
{bookingwidget} {bookingwidget}
{children} {children}
<ToastHandler /> <ToastHandler />

10
components/BookingWidget/index.tsx
View File

@@ -1,17 +1,11 @@
import { Suspense } from "react"
import Form from "@/components/Forms/BookingWidget" import Form from "@/components/Forms/BookingWidget"
import LoadingSpinner from "../LoadingSpinner"
import styles from "./bookingWidget.module.css" import styles from "./bookingWidget.module.css"
export default async function BookingWidget() { export default function BookingWidget() {
return ( return (
<section className={styles.container}> <section className={styles.container}>
<Suspense fallback={<LoadingSpinner />}> <Form />
<Form />
</Suspense>
</section> </section>
) )
} }

2
components/Header/TopMenu/index.tsx
View File

@@ -26,7 +26,7 @@ export default async function TopMenu({
</HeaderLink> </HeaderLink>
) : null} ) : null}
<div className={styles.options}> <div className={styles.options}>
<Suspense>{languageSwitcher}</Suspense> {languageSwitcher}
<HeaderLink href="#"> <HeaderLink href="#">
<SearchIcon width={20} height={20} color="burgundy" /> <SearchIcon width={20} height={20} color="burgundy" />
{intl.formatMessage({ id: "Find booking" })} {intl.formatMessage({ id: "Find booking" })}

68
components/MyPages/Breadcrumbs/index.tsx
View File

@@ -1,5 +1,3 @@
import { Suspense } from "react"
import { serverClient } from "@/lib/trpc/server" import { serverClient } from "@/lib/trpc/server"
import { ChevronRightIcon, HouseIcon } from "@/components/Icons" import { ChevronRightIcon, HouseIcon } from "@/components/Icons"
@@ -18,46 +16,44 @@ export default async function Breadcrumbs() {
return ( return (
<nav className={styles.breadcrumbs}> <nav className={styles.breadcrumbs}>
<ul className={styles.list}> <ul className={styles.list}>
<Suspense> {homeBreadcrumb ? (
{homeBreadcrumb ? ( <li className={styles.listItem}>
<li className={styles.listItem}> <Link
<Link className={styles.homeLink}
className={styles.homeLink} color="peach80"
color="peach80" href={homeBreadcrumb.href!}
href={homeBreadcrumb.href!} variant="breadcrumb"
variant="breadcrumb" >
> <HouseIcon color="peach80" />
<HouseIcon color="peach80" /> </Link>
</Link> <ChevronRightIcon aria-hidden="true" color="peach80" />
<ChevronRightIcon aria-hidden="true" color="peach80" /> </li>
</li> ) : null}
) : null}
{breadcrumbs.map((breadcrumb) => {
if (breadcrumb.href) {
return (
<li key={breadcrumb.uid} className={styles.listItem}>
<Link
color="peach80"
href={breadcrumb.href}
variant="breadcrumb"
>
{breadcrumb.title}
</Link>
<ChevronRightIcon aria-hidden="true" color="peach80" />
</li>
)
}
{breadcrumbs.map((breadcrumb) => {
if (breadcrumb.href) {
return ( return (
<li key={breadcrumb.uid} className={styles.listItem}> <li key={breadcrumb.uid} className={styles.listItem}>
<Footnote color="burgundy" textTransform="bold"> <Link
color="peach80"
href={breadcrumb.href}
variant="breadcrumb"
>
{breadcrumb.title} {breadcrumb.title}
</Footnote> </Link>
<ChevronRightIcon aria-hidden="true" color="peach80" />
</li> </li>
) )
})} }
</Suspense>
return (
<li key={breadcrumb.uid} className={styles.listItem}>
<Footnote color="burgundy" textTransform="bold">
{breadcrumb.title}
</Footnote>
</li>
)
})}
</ul> </ul>
</nav> </nav>
) )

72
components/MyPages/Sidebar/index.tsx
View File

@@ -19,44 +19,40 @@ export default async function SidebarMyPages() {
<aside className={styles.sidebar}> <aside className={styles.sidebar}>
<nav className={styles.nav}> <nav className={styles.nav}>
<Subtitle type="two">{navigation?.title}</Subtitle> <Subtitle type="two">{navigation?.title}</Subtitle>
<Suspense> {navigation?.menuItems.map((menuItem, idx) => (
{navigation?.menuItems.map((menuItem, idx) => ( <Fragment key={`${menuItem.display_sign_out_link}-${idx}`}>
<Fragment key={`${menuItem.display_sign_out_link}-${idx}`}> <Divider color="beige" />
<Divider color="beige" /> <ul className={styles.list}>
<ul className={styles.list}> {menuItem.links.map((link) => (
{menuItem.links.map((link) => ( <li key={link.uid}>
<li key={link.uid}> <Link
<Link color="burgundy"
color="burgundy" href={link.originalUrl || link.url}
href={link.originalUrl || link.url} partialMatch
partialMatch prefetch={true}
prefetch={true} size={menuItem.display_sign_out_link ? "small" : "regular"}
size={ variant="sidebar"
menuItem.display_sign_out_link ? "small" : "regular" >
} {link.linkText}
variant="sidebar" </Link>
> </li>
{link.linkText} ))}
</Link> {menuItem.display_sign_out_link ? (
</li> <li>
))} <Link
{menuItem.display_sign_out_link ? ( color="burgundy"
<li> href={logout[getLang()]}
<Link prefetch={false}
color="burgundy" size="small"
href={logout[getLang()]} variant="sidebar"
prefetch={false} >
size="small" {formatMessage({ id: "Log out" })}
variant="sidebar" </Link>
> </li>
{formatMessage({ id: "Log out" })} ) : null}
</Link> </ul>
</li> </Fragment>
) : null} ))}
</ul>
</Fragment>
))}
</Suspense>
</nav> </nav>
</aside> </aside>
) )