Merged develop into feat/sw-700-designglitch-divider

components/Blocks/DynamicContent/OverviewTable/index.tsx

@@ -1,3 +1,4 @@
+import { getMembershipLevelSafely } from "@/lib/trpc/memoizedRequests"
 import { serverClient } from "@/lib/trpc/server"
 
 import SectionWrapper from "../SectionWrapper"
@@ -9,8 +10,11 @@ export default async function OverviewTable({
   dynamic_content,
   firstItem,
 }: OverviewTableProps) {
-  const levels = await serverClient().contentstack.rewards.all()
-  const membershipLevel = await serverClient().user.safeMembershipLevel()
+  const [levels, membershipLevel] = await Promise.all([
+    serverClient().contentstack.rewards.all(),
+    getMembershipLevelSafely(),
+  ])
+
   return (
     <SectionWrapper dynamic_content={dynamic_content} firstItem={firstItem}>
       <OverviewTableClient

components/Blocks/DynamicContent/Points/ExpiringPoints/index.tsx

@@ -1,4 +1,4 @@
-import { serverClient } from "@/lib/trpc/server"
+import { getMembershipLevel } from "@/lib/trpc/memoizedRequests"
 
 import SectionContainer from "@/components/Section/Container"
 import SectionHeader from "@/components/Section/Header"
@@ -12,7 +12,7 @@ export default async function ExpiringPoints({
   subtitle,
   title,
 }: AccountPageComponentProps) {
-  const membershipLevel = await serverClient().user.membershipLevel()
+  const membershipLevel = await getMembershipLevel()
 
   if (!membershipLevel?.pointsToExpire || !membershipLevel?.pointsExpiryDate) {
     return null

components/Blocks/DynamicContent/Rewards/NextLevel/index.tsx

@@ -1,6 +1,7 @@
 import { Lock } from "react-feather"
 
 import { MembershipLevelEnum } from "@/constants/membershipLevels"
+import { getMembershipLevel } from "@/lib/trpc/memoizedRequests"
 import { serverClient } from "@/lib/trpc/server"
 
 import SectionContainer from "@/components/Section/Container"
@@ -22,7 +23,7 @@ export default async function NextLevelRewardsBlock({
   link,
 }: AccountPageComponentProps) {
   const intl = await getIntl()
-  const membershipLevel = await serverClient().user.membershipLevel()
+  const membershipLevel = await getMembershipLevel()
 
   if (!membershipLevel || !membershipLevel?.nextLevel) {
     return null

components/Blocks/DynamicContent/index.tsx

@@ -1,3 +1,5 @@
+import { Suspense } from "react"
+
 import { env } from "@/env/server"
 
 import HowItWorks from "@/components/Blocks/DynamicContent/HowItWorks"
@@ -14,14 +16,21 @@ import SignUpVerification from "@/components/Blocks/DynamicContent/SignUpVerific
 import PreviousStays from "@/components/Blocks/DynamicContent/Stays/Previous"
 import SoonestStays from "@/components/Blocks/DynamicContent/Stays/Soonest"
 import UpcomingStays from "@/components/Blocks/DynamicContent/Stays/Upcoming"
+import LoadingSpinner from "@/components/LoadingSpinner"
 
 import type { DynamicContentProps } from "@/types/components/blocks/dynamicContent"
 import { DynamicContentEnum } from "@/types/enums/dynamicContent"
 
-export default async function DynamicContent({
-  dynamic_content,
-  firstItem,
-}: DynamicContentProps) {
+export default function DynamicContent(props: DynamicContentProps) {
+  return (
+    <Suspense fallback={<LoadingSpinner />}>
+      <DynamicContentBlocks {...props} />
+    </Suspense>
+  )
+}
+
+function DynamicContentBlocks(props: DynamicContentProps) {
+  const { dynamic_content, firstItem } = props
   switch (dynamic_content.component) {
     case DynamicContentEnum.Blocks.components.current_benefits:
       return <CurrentRewardsBlock {...dynamic_content} />

components/Breadcrumbs/BreadcrumbsSkeleton.tsx

@@ -0,0 +1,25 @@
+import { ChevronRightIcon, HouseIcon } from "@/components/Icons"
+import Footnote from "@/components/TempDesignSystem/Text/Footnote"
+
+import styles from "./breadcrumbs.module.css"
+
+export default function BreadcrumbsSkeleton() {
+  return (
+    <nav className={styles.breadcrumbs}>
+      <ul className={styles.list}>
+        <li className={styles.listItem}>
+          <span className={styles.homeLink} color="peach80">
+            <HouseIcon color="peach80" />
+          </span>
+          <ChevronRightIcon aria-hidden="true" color="peach80" />
+        </li>
+
+        <li className={styles.listItem}>
+          <Footnote color="burgundy" type="bold">
+            ...
+          </Footnote>
+        </li>
+      </ul>
+    </nav>
+  )
+}

components/Current/Header/HeaderFallback/index.tsx

@@ -1,6 +1,6 @@
 import { homeHrefs } from "@/constants/homeHrefs"
 import { env } from "@/env/server"
-import { serverClient } from "@/lib/trpc/server"
+import { getCurrentHeader } from "@/lib/trpc/memoizedRequests"
 
 import { getLang } from "@/i18n/serverContext"
 
@@ -11,9 +11,7 @@ import TopMenu from "../TopMenu"
 import styles from "../header.module.css"
 
 export default async function HeaderFallback() {
-  const data = await serverClient().contentstack.base.currentHeader({
-    lang: getLang(),
-  })
+  const data = await getCurrentHeader(getLang())
 
   if (!data?.header) {
     return null

components/Current/Header/TopMenu/index.tsx

@@ -1,6 +1,6 @@
 import { logout } from "@/constants/routes/handleAuth"
 import { overview } from "@/constants/routes/myPages"
-import { serverClient } from "@/lib/trpc/server"
+import { getName } from "@/lib/trpc/memoizedRequests"
 
 import Link from "@/components/TempDesignSystem/Link"
 import { getIntl } from "@/i18n"
@@ -23,7 +23,7 @@ export default async function TopMenu({
   languageSwitcher,
 }: TopMenuProps) {
   const { formatMessage } = await getIntl()
-  const user = await serverClient().user.name()
+  const user = await getName()
   return (
     <div className={styles.topMenu}>
       <div className={styles.container}>

components/Current/Header/index.tsx

@@ -1,7 +1,11 @@
 import { homeHrefs } from "@/constants/homeHrefs"
 import { env } from "@/env/server"
-import { getLanguageSwitcher } from "@/lib/trpc/memoizedRequests"
-import { serverClient } from "@/lib/trpc/server"
+import {
+  getCurrentHeader,
+  getLanguageSwitcher,
+  getMyPagesNavigation,
+  getName,
+} from "@/lib/trpc/memoizedRequests"
 
 import { getLang } from "@/i18n/serverContext"
 
@@ -15,12 +19,10 @@ import styles from "./header.module.css"
 
 export default async function Header() {
   const [data, user, languages, navigation] = await Promise.all([
-    serverClient().contentstack.base.currentHeader({
-      lang: getLang(),
-    }),
-    serverClient().user.name(),
+    getCurrentHeader(getLang()),
+    getName(),
     getLanguageSwitcher(),
-    serverClient().contentstack.myPages.navigation.get(),
+    getMyPagesNavigation(),
   ])
 
   if (!navigation || !languages || !data?.header) {

components/Header/MainMenu/MyPagesMenuWrapper/index.tsx

@@ -1,5 +1,10 @@
 import { MembershipLevelEnum } from "@/constants/membershipLevels"
 import { myPages } from "@/constants/routes/myPages"
+import {
+  getMembershipLevelSafely,
+  getMyPagesNavigation,
+  getName,
+} from "@/lib/trpc/memoizedRequests"
 import { serverClient } from "@/lib/trpc/server"
 
 import Link from "@/components/TempDesignSystem/Link"
@@ -16,9 +21,9 @@ export default async function MyPagesMenuWrapper() {
   const lang = getLang()
   const [intl, myPagesNavigation, user, membership] = await Promise.all([
     getIntl(),
-    serverClient().contentstack.myPages.navigation.get(),
-    serverClient().user.name(),
-    serverClient().user.safeMembershipLevel(),
+    getMyPagesNavigation(),
+    getName(),
+    getMembershipLevelSafely(),
   ])
 
   const membershipLevel = membership?.membershipLevel

components/MyPages/Sidebar/index.tsx

@@ -1,7 +1,7 @@
 import { Fragment } from "react"
 
 import { logout } from "@/constants/routes/handleAuth"
-import { serverClient } from "@/lib/trpc/server"
+import { getMyPagesNavigation } from "@/lib/trpc/memoizedRequests"
 
 import Divider from "@/components/TempDesignSystem/Divider"
 import Link from "@/components/TempDesignSystem/Link"
@@ -12,7 +12,7 @@ import { getLang } from "@/i18n/serverContext"
 import styles from "./sidebar.module.css"
 
 export default async function SidebarMyPages() {
-  const navigation = await serverClient().contentstack.myPages.navigation.get()
+  const navigation = await getMyPagesNavigation()
   const { formatMessage } = await getIntl()
 
   return (

components/Sidebar/JoinLoyalty/index.tsx

@@ -1,4 +1,4 @@
-import { serverClient } from "@/lib/trpc/server"
+import { getName } from "@/lib/trpc/memoizedRequests"
 
 import LoginButton from "@/components/Current/Header/LoginButton"
 import ArrowRight from "@/components/Icons/ArrowRight"
@@ -19,7 +19,7 @@ export default async function JoinLoyaltyContact({
   block,
 }: JoinLoyaltyContactProps) {
   const intl = await getIntl()
-  const user = await serverClient().user.name()
+  const user = await getName()
 
   // Check if we have user, that means we are logged in.
   if (user) {

components/Sidebar/MyPagesNavigation.tsx

@@ -1,9 +1,9 @@
-import { serverClient } from "@/lib/trpc/server"
+import { getName } from "@/lib/trpc/memoizedRequests"
 
 import MyPagesSidebar from "@/components/MyPages/Sidebar"
 
 export default async function MyPagesNavigation() {
-  const user = await serverClient().user.name()
+  const user = await getName()
 
   // Check if we have user, that means we are logged in andt the My Pages menu can show.
   if (!user) {

components/TempDesignSystem/Alert/index.tsx

@@ -51,7 +51,7 @@ export default function Alert({
                   <span> {phoneContact.displayText} </span>
                   <Link
                     color="burgundy"
-                    href={`tel:${phoneContact.phoneNumber}`}
+                    href={`tel:${phoneContact.phoneNumber.replace(/ /g, "")}`}
                   >
                     {phoneContact.phoneNumber}
                   </Link>

components/TrackingSDK/index.tsx

@@ -1,3 +1,4 @@
+import { getUserTracking } from "@/lib/trpc/memoizedRequests"
 import { serverClient } from "@/lib/trpc/server"
 
 import RouterTransition from "@/components/TrackingSDK/RouterTransition"
@@ -7,7 +8,7 @@ import TrackingSDKClient from "./Client"
 import { TrackingSDKPageData } from "@/types/components/tracking"
 
 export const preloadUserTracking = () => {
-  void serverClient().user.tracking()
+  void getUserTracking()
 }
 
 export default async function TrackingSDK({
@@ -15,7 +16,7 @@ export default async function TrackingSDK({
 }: {
   pageData: TrackingSDKPageData
 }) {
-  const userTrackingData = await serverClient().user.tracking()
+  const userTrackingData = await getUserTracking()
 
   return (
     <>