Migrate move app and document files to root layout, migrate meet the team page and create test of the page

CONTRIBUTING.md

@@ -56,10 +56,10 @@ Chayn team members usually respond within 3 business days.
 Chayn is open to all kinds of contributions, such as:
 
 - additional software tests / test coverage
-- dependency updates *check Dependabot pull requests 
+- dependency updates \*check Dependabot pull requests
 - code (requested features, bug fixes, quality enhancements, maintenance help)
 - accessibility and language support.
-- no-code (documentation, translations) *see spam policy below for accepted documentation changes.
+- no-code (documentation, translations) \*see spam policy below for accepted documentation changes.
 
 # Chayn's Spam Contribution Policy 🚫
 

app/ThemeRegistry.tsx

@@ -0,0 +1,17 @@
+import { AppRouterCacheProvider } from '@mui/material-nextjs/v13-appRouter';
+import CssBaseline from '@mui/material/CssBaseline';
+import { ThemeProvider } from '@mui/material/styles';
+import theme from '../styles/theme';
+
+// This implementation is from mui integrations with nextjs app router
+// see https://mui.com/material-ui/integrations/nextjs/#app-router
+export default function ThemeRegistry({ children }: { children: React.ReactNode }) {
+  return (
+    <AppRouterCacheProvider>
+      <ThemeProvider theme={theme}>
+        <CssBaseline />
+        {children}
+      </ThemeProvider>
+    </AppRouterCacheProvider>
+  );
+}

pages/chat.tsx → app/[locale]/chat/chat.tsx

@@ -1,22 +1,18 @@
+'use client';
+
 import { Box } from '@mui/material';
 import { ISbStoryData, useStoryblokState } from '@storyblok/react';
-import { GetStaticPropsContext, NextPage } from 'next';
 import { useTranslations } from 'next-intl';
 import Head from 'next/head';
-import { SignUpBanner } from '../components/banner/SignUpBanner';
-import NoDataAvailable from '../components/common/NoDataAvailable';
-import CrispButton from '../components/crisp/CrispButton';
-import Header, { HeaderProps } from '../components/layout/Header';
-import StoryblokPageSection from '../components/storyblok/StoryblokPageSection';
-import { useTypedSelector } from '../hooks/store';
-import { getStoryblokPageProps } from '../utils/getStoryblokPageProps';
-import { getEventUserData } from '../utils/logEvent';
-
-interface Props {
-  story: ISbStoryData | null;
-}
+import { SignUpBanner } from '../../../components/banner/SignUpBanner';
+import NoDataAvailable from '../../../components/common/NoDataAvailable';
+import CrispButton from '../../../components/crisp/CrispButton';
+import Header, { HeaderProps } from '../../../components/layout/Header';
+import StoryblokPageSection from '../../../components/storyblok/StoryblokPageSection';
+import { useTypedSelector } from '../../../hooks/store';
+import { getEventUserData } from '../../../utils/logEvent';
 
-const Chat: NextPage<Props> = ({ story }) => {
+const Chat = ({ story }: { story: ISbStoryData | null }) => {
   story = useStoryblokState(story);
 
   const t = useTranslations('Courses');
@@ -68,21 +64,4 @@ const Chat: NextPage<Props> = ({ story }) => {
   );
 };
 
-export async function getStaticProps({ locale, preview = false }: GetStaticPropsContext) {
-  const storyblokProps = await getStoryblokPageProps('chat', locale, preview);
-
-  return {
-    props: {
-      ...storyblokProps,
-      messages: {
-        ...require(`../messages/shared/${locale}.json`),
-        ...require(`../messages/navigation/${locale}.json`),
-        ...require(`../messages/courses/${locale}.json`),
-        ...require(`../messages/chat/${locale}.json`),
-      },
-    },
-    revalidate: 3600, // revalidate every hour
-  };
-}
-
 export default Chat;

app/[locale]/chat/page.tsx

@@ -0,0 +1,19 @@
+import { getLocale } from 'next-intl/server';
+import { locales } from '../../../i18n/config';
+import { getStoryblokPageProps } from '../../../utils/getStoryblokPageProps';
+import Chat from './chat';
+
+export const revalidate = 3600;
+
+export default async function Page() {
+  const preview = false;
+  const locale = await getLocale();
+  const storyblokProps = await getStoryblokPageProps('chat', locale, preview);
+  return <Chat story={storyblokProps?.story}></Chat>;
+}
+
+export async function generateStaticParams() {
+  return locales.map((locale) => {
+    return { params: { locale } };
+  });
+}

app/[locale]/layout.tsx

@@ -0,0 +1,13 @@
+import { locales } from '../../i18n/config';
+
+const Layout = ({ children }: { children: React.ReactNode }) => {
+  return <>{children}</>;
+};
+
+export async function generateStaticParams() {
+  return locales.map((locale) => {
+    return { params: { locale } };
+  });
+}
+
+export default Layout;

app/[locale]/meet-the-team/meet-the-team.tsx

@@ -0,0 +1,23 @@
+'use client';
+
+import { ISbStoryData, useStoryblokState } from '@storyblok/react';
+import NoDataAvailable from '../../../components/common/NoDataAvailable';
+import StoryblokMeetTheTeamPage, {
+  StoryblokMeetTheTeamPageProps,
+} from '../../../components/storyblok/StoryblokMeetTheTeamPage';
+
+interface MeetTheTeamProps {
+  story: ISbStoryData | null;
+}
+
+const MeetTheTeam = ({ story }: MeetTheTeamProps) => {
+  const storyData = useStoryblokState(story);
+
+  if (!storyData) {
+    return <NoDataAvailable />;
+  }
+
+  return <StoryblokMeetTheTeamPage {...(storyData.content as StoryblokMeetTheTeamPageProps)} />;
+};
+
+export default MeetTheTeam;

app/[locale]/meet-the-team/page.tsx

@@ -0,0 +1,11 @@
+import { getStoryblokPageProps } from '../../../utils/getStoryblokPageProps';
+import MeetTheTeam from './meet-the-team';
+
+export const revalidate = 3600;
+
+export default async function Page({ params }: { params: { locale: string } }) {
+  const preview = false;
+  const locale = params.locale;
+  const storyblokProps = await getStoryblokPageProps('meet-the-team', locale, preview);
+  return <MeetTheTeam story={storyblokProps?.story}></MeetTheTeam>;
+}

app/[locale]/welcome/[partnerName]/page.tsx

@@ -0,0 +1,46 @@
+import { getStoryblokApi, ISbStoriesParams, ISbStoryData } from '@storyblok/react';
+import { locales } from '../../../../i18n/config';
+import { getStoryblokPageProps } from '../../../../utils/getStoryblokPageProps';
+import Welcome from './welcome';
+
+export const revalidate = 3600;
+
+export default async function Page({
+  params,
+}: {
+  params: { partnerName: string; locale: string };
+}) {
+  const preview = false;
+  const locale = params.locale;
+  const partnerName = params?.partnerName;
+  const storyblokProps = await getStoryblokPageProps(`welcome/${partnerName}`, locale, preview);
+  return <Welcome story={storyblokProps?.story}></Welcome>;
+}
+
+export async function generateStaticParams() {
+  let sbParams: ISbStoriesParams = {
+    published: true,
+    starts_with: 'partnership/',
+  };
+
+  const storyblokApi = getStoryblokApi();
+  let data = await storyblokApi.getAll('cdn/links', sbParams);
+
+  let paths: any = [];
+
+  data.forEach((story: Partial<ISbStoryData>) => {
+    if (!story.slug) return;
+
+    // get array for slug because of catch all
+    let splittedSlug = story.slug.split('/');
+
+    if (locales) {
+      // create additional languages
+      for (const locale of locales) {
+        paths.push({ params: { partnerName: splittedSlug[1] } });
+      }
+    }
+  });
+
+  return paths;
+}

app/[locale]/welcome/[partnerName]/welcome.tsx

@@ -0,0 +1,28 @@
+'use client';
+
+import { ISbStoryData, useStoryblokState } from '@storyblok/react';
+import NoDataAvailable from '../../../../components/common/NoDataAvailable';
+import StoryblokWelcomePage, {
+  StoryblokWelcomePageProps,
+} from '../../../../components/storyblok/StoryblokWelcomePage';
+
+interface WelcomeProps {
+  story: ISbStoryData | null;
+}
+
+const Welcome = ({ story }: WelcomeProps) => {
+  story = useStoryblokState(story);
+
+  if (!story) {
+    return <NoDataAvailable />;
+  }
+
+  return (
+    <StoryblokWelcomePage
+      {...(story.content as StoryblokWelcomePageProps)}
+      storySlug={story.slug}
+    />
+  );
+};
+
+export default Welcome;

app/appLayout.tsx

@@ -0,0 +1,61 @@
+'use client';
+
+import { Analytics } from '@mui/icons-material';
+import { usePathname } from 'next/navigation';
+import { Hotjar } from 'nextjs-hotjar';
+import { useEffect } from 'react';
+import { AppBarSpacer } from '../components/layout/AppBarSpacer';
+import Consent from '../components/layout/Consent';
+import Footer from '../components/layout/Footer';
+import LanguageMenuAppRoute from '../components/layout/LanguageMenuAppRoute';
+import LeaveSiteButton from '../components/layout/LeaveSiteButton';
+import TopBar from '../components/layout/TopBar';
+import firebase from '../config/firebase';
+import { AuthGuard } from '../guards/AuthGuard';
+
+interface AppLayoutProps {
+  children?: React.ReactNode;
+}
+
+// Init firebase
+firebase;
+
+export default function AppLayout({ children }: AppLayoutProps) {
+  const pathname = usePathname();
+
+  // Get top level directory of path e.g pathname /courses/course_name has pathHead courses
+  const pathHead = pathname?.split('/')[1]; // E.g. courses | therapy | partner-admin
+
+  useEffect(() => {
+    // Check if entry path is from a partner referral and if so, store referring partner in local storage
+    // This enables us to redirect a user to the correct sign up page later (e.g. in SignUpBanner)
+    const path = pathname;
+
+    if (path?.includes('/welcome/')) {
+      const referralPartner = path.split('/')[2]; // Gets "bumble" from /welcome/bumble
+
+      if (referralPartner) {
+        window.localStorage.setItem('referralPartner', referralPartner);
+      }
+    }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []);
+
+  return (
+    <>
+      <TopBar>
+        <LanguageMenuAppRoute />
+      </TopBar>
+      <AppBarSpacer />
+      {pathHead !== 'partner-admin' && <LeaveSiteButton />}
+      <AuthGuard>{children as JSX.Element}</AuthGuard>
+      <Footer />
+      <Consent />
+      {!!process.env.NEXT_PUBLIC_HOTJAR_ID && process.env.NEXT_PUBLIC_ENV !== 'local' && (
+        <Hotjar id={process.env.NEXT_PUBLIC_HOTJAR_ID} sv={6} strategy="lazyOnload" />
+      )}
+      {/* Vercel analytics */}
+      <Analytics />
+    </>
+  );
+}

app/layout.tsx

@@ -0,0 +1,91 @@
+import newrelic from 'newrelic';
+import Script from 'next/script';
+
+import { Metadata } from 'next';
+import { NextIntlClientProvider } from 'next-intl';
+import { getLocale, getMessages } from 'next-intl/server';
+import CrispScript from '../components/crisp/CrispScript';
+import GoogleTagManagerScript from '../components/head/GoogleTagManagerScript';
+import OpenGraphMetadata from '../components/head/OpenGraphMetadata';
+import RollbarScript from '../components/head/RollbarScript';
+import ErrorBoundary from '../components/layout/ErrorBoundary';
+import { storyblok } from '../config/storyblok';
+import StoreProvider from '../store/storeProvider';
+import '../styles/globals.css';
+import AppLayout from './appLayout';
+import ThemeRegistry from './ThemeRegistry';
+
+// Init storyblok
+storyblok;
+
+export const metadata: Metadata = {
+  title: 'Bloom',
+};
+
+export const dynamicParams = false;
+
+export default async function RootLayout({
+  // Layouts must accept a children prop.
+  // This will be populated with nested layouts or pages
+  children,
+}: {
+  children: React.ReactNode;
+}) {
+  // Configuration according to Newrelic app router example
+  // See https://github.com/newrelic/newrelic-node-nextjs?tab=readme-ov-file#example-projects
+  // @ts-ignore
+  if (newrelic.agent.collector.isConnected() === false) {
+    await new Promise((resolve) => {
+      // @ts-ignore
+      newrelic.agent.on('connected', resolve);
+    });
+  }
+
+  const browserTimingHeader = newrelic.getBrowserTimingHeader({
+    hasToRemoveScriptWrapper: true,
+    // @ts-ignore
+    allowTransactionlessInjection: true,
+  });
+
+  const locale = await getLocale();
+
+  // Providing all messages to the client
+  // side is the easiest way to get started
+  const messages = await getMessages();
+
+  return (
+    <html lang={locale}>
+      <head>
+        <OpenGraphMetadata />
+        <GoogleTagManagerScript />
+        <RollbarScript />
+      </head>
+      <body>
+        <StoreProvider>
+          <ErrorBoundary>
+            <NextIntlClientProvider messages={messages}>
+              <CrispScript />
+              <ThemeRegistry>
+                <AppLayout>{children}</AppLayout>
+              </ThemeRegistry>
+            </NextIntlClientProvider>
+          </ErrorBoundary>
+        </StoreProvider>
+        <Script
+          // We have to set an id for inline scripts.
+          // See https://nextjs.org/docs/app/building-your-application/optimizing/scripts#inline-scripts
+          id="nr-browser-agent"
+          // By setting the strategy to "beforeInteractive" we guarantee that
+          // the script will be added to the document's `head` element.
+          strategy="beforeInteractive"
+          // The body of the script element comes from the async evaluation
+          // of `getInitialProps`. We use the special
+          // `dangerouslySetInnerHTML` to provide that element body. Since
+          // it requires an object with an `__html` property, we pass in an
+          // object literal.
+          dangerouslySetInnerHTML={{ __html: browserTimingHeader }}
+        />
+      </body>
+    </html>
+  );
+}

app/not-found.tsx

@@ -0,0 +1,5 @@
+import { redirect } from 'next/navigation';
+
+export default function Page() {
+  redirect('/404');
+}