feat: add preview mode (#533)

* feat: add preview component

* fix: display in copyright text

* fix: test

cypress/e2e/player/island.cy.ts

@@ -7,7 +7,7 @@ import {
 import {
   ITEM_CHATBOX_BUTTON_ID,
   ITEM_MAP_BUTTON_ID,
-  NAVIGATION_ISLAND_ID,
+  NAVIGATION_ISLAND_CLASSNAME,
   buildDocumentId,
   buildTreeItemClass,
 } from '../../../src/config/selectors';
@@ -118,6 +118,7 @@ describe('Island', () => {
     });
   });
 
+  // test is flaky
   it('Shows only one island when folder contains shortcut', () => {
     const items = getFolderWithShortcutFixture();
     const parent = items[0];
@@ -128,7 +129,7 @@ describe('Island', () => {
       'contain',
       getDocumentExtra(documentTarget.extra as DocumentItemExtra).content,
     );
-    cy.get(`#${NAVIGATION_ISLAND_ID}`)
+    cy.get(`.${NAVIGATION_ISLAND_CLASSNAME}`)
       .should('be.visible')
       .and('have.length', 1);
   });

src/config/selectors.ts

@@ -179,7 +179,7 @@ export const FORBIDDEN_CONTENT_CONTAINER_ID = 'forbiddenContentContainer';
 
 export const USER_SWITCH_SIGN_IN_BUTTON_ID = 'userSwitchSignInButton';
 
-export const NAVIGATION_ISLAND_ID = 'navigationIsland';
+export const NAVIGATION_ISLAND_CLASSNAME = 'navigationIsland';
 export const ITEM_CHATBOX_BUTTON_ID = 'itemChatboxButton';
 export const ITEM_MAP_BUTTON_ID = 'itemMapButton';
 export const ITEM_PINNED_BUTTON_ID = 'itemPinnedButton';

src/modules/landing/footer/CopyrightText.stories.tsx

@@ -0,0 +1,14 @@
+import { Meta, StoryObj } from '@storybook/react';
+
+import { CopyrightText } from './CopyrightText';
+
+const meta = {
+  component: CopyrightText,
+} satisfies Meta<typeof CopyrightText>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Default = {
+  args: {},
+} satisfies Story;

src/modules/landing/footer/CopyrightText.tsx

@@ -0,0 +1,31 @@
+import { useState } from 'react';
+
+import { Typography } from '@mui/material';
+
+import { usePreviewMode } from '~landing/preview/PreviewModeContext';
+
+export function CopyrightText() {
+  const [clickCounter, setClickCounter] = useState(0);
+  const { togglePreview, isEnabled: isPreviewEnabled } = usePreviewMode();
+
+  const handleClick = () => {
+    if (clickCounter === 2) {
+      togglePreview();
+      // reset counter
+      setClickCounter(0);
+    } else {
+      setClickCounter((s) => s + 1);
+    }
+  };
+  return (
+    <Typography
+      textAlign="center"
+      variant="note"
+      onClick={handleClick}
+      sx={{ userSelect: 'none' }}
+    >
+      &copy; Graasp 2014 - {new Date().getFullYear()}
+      {isPreviewEnabled ? ' (preview)' : ''}
+    </Typography>
+  );
+}

src/modules/landing/footer/Footer.tsx

@@ -8,6 +8,7 @@ import LanguageSwitch from '@/components/ui/LanguageSwitch';
 import { NS } from '@/config/constants';
 import { OnChangeLangProp } from '@/types';
 
+import { CopyrightText } from './CopyrightText';
 import { FooterSection } from './FooterSection';
 import {
   FacebookIcon,
@@ -191,9 +192,7 @@ export function Footer({ onChangeLang }: Readonly<FooterProps>): JSX.Element {
           alignItems="center"
           justifyContent="center"
         >
-          <Typography textAlign="center" variant="note">
-            &copy; Graasp 2014 - {new Date().getFullYear()}
-          </Typography>
+          <CopyrightText />
         </Stack>
       </Stack>
     </Stack>

src/modules/landing/preview/PreviewModeContext.tsx

@@ -0,0 +1,74 @@
+import {
+  ReactNode,
+  createContext,
+  useContext,
+  useEffect,
+  useMemo,
+  useState,
+} from 'react';
+
+const PREVIEW_STORAGE_KEY = 'graasp-preview';
+
+type PreviewContextType = {
+  togglePreview: () => void;
+  isEnabled: boolean;
+};
+const PreviewContext = createContext<PreviewContextType>({
+  isEnabled: false,
+  togglePreview: () => console.error('no Preview context present'),
+});
+
+const isPreviewEnabled = () => {
+  const isPresent = localStorage.getItem(PREVIEW_STORAGE_KEY) != null;
+  return isPresent;
+};
+
+export function PreviewContextProvider({
+  children,
+}: Readonly<{ children: ReactNode }>) {
+  const [isEnabled, setIsEnabled] = useState(isPreviewEnabled());
+
+  useEffect(() => {
+    function listenForStorageChanges(event: StorageEvent) {
+      if (event.key === PREVIEW_STORAGE_KEY) {
+        // sync the local state
+        setIsEnabled(isPreviewEnabled());
+      }
+      // discard the event otherwise
+    }
+    window.addEventListener('storage', listenForStorageChanges);
+    return () => window.removeEventListener('storage', listenForStorageChanges);
+  }, []);
+
+  const value = useMemo(
+    () => ({
+      togglePreview: () => {
+        if (isPreviewEnabled()) {
+          window.localStorage.removeItem(PREVIEW_STORAGE_KEY);
+          setIsEnabled(false);
+        } else {
+          window.localStorage.setItem(PREVIEW_STORAGE_KEY, 'enabled');
+          setIsEnabled(true);
+        }
+      },
+      isEnabled,
+    }),
+    [isEnabled],
+  );
+
+  return (
+    <PreviewContext.Provider value={value}>{children}</PreviewContext.Provider>
+  );
+}
+
+export function usePreviewMode() {
+  return useContext<PreviewContextType>(PreviewContext);
+}
+
+export function Preview({ children }: { children: ReactNode }) {
+  const { isEnabled } = usePreviewMode();
+  if (isEnabled) {
+    return children;
+  }
+  return null;
+}

src/modules/player/navigationIsland/NavigationIsland.tsx

@@ -1,6 +1,6 @@
 import { Box, Stack } from '@mui/material';
 
-import { NAVIGATION_ISLAND_ID } from '@/config/selectors';
+import { NAVIGATION_ISLAND_CLASSNAME } from '@/config/selectors';
 
 import useChatButton from './ChatButton';
 import useGeolocationButton from './GeolocationButton';
@@ -26,7 +26,7 @@ const NavigationIslandBox = (): JSX.Element | null => {
 
   return (
     <Box
-      id={NAVIGATION_ISLAND_ID}
+      className={NAVIGATION_ISLAND_CLASSNAME}
       // set some background and shadow
       bgcolor="white"
       boxShadow="0px 3px 6px 0px rgba(0, 0, 0, 0.25)"

src/routes/__root.tsx

@@ -12,6 +12,8 @@ import { AuthContextType } from '@/AuthContext';
 import { NotFoundComponent } from '@/components/NotFoundComponent';
 import { ReactQueryDevtools } from '@/config/queryClient';
 
+import { PreviewContextProvider } from '~landing/preview/PreviewModeContext';
+
 export const Route = createRootRouteWithContext<{ auth: AuthContextType }>()({
   component: RootComponent,
   notFoundComponent: NotFoundComponent,
@@ -32,7 +34,9 @@ function RootComponent() {
   return (
     <Stack id="__root">
       <ScrollRestoration />
-      <Outlet />
+      <PreviewContextProvider>
+        <Outlet />
+      </PreviewContextProvider>
       {import.meta.env.MODE !== 'test' && <ReactQueryDevtools />}
       <Suspense>
         <TanStackRouterDevtools />

src/routes/_landing.tsx

@@ -19,6 +19,7 @@ import { OnChangeLangProp } from '@/types';
 
 import { Footer } from '~landing/footer/Footer';
 import { RightHeader } from '~landing/header/RightHeader';
+import { usePreviewMode } from '~landing/preview/PreviewModeContext';
 
 export const Route = createFileRoute('/_landing')({
   component: RouteComponent,
@@ -30,7 +31,7 @@ function RouteComponent() {
   const { isMobile } = useMobileView();
   const { fill: primary } = useButtonColor('primary');
   const { mutate } = mutations.useEditCurrentMember();
-
+  const { isEnabled: isPreviewEnabled } = usePreviewMode();
   const onChangeLang: OnChangeLangProp = (lang: string) => {
     if (isAuthenticated) {
       mutate({ extra: { lang } });
@@ -76,7 +77,12 @@ function RouteComponent() {
             <GraaspLogo height={44} sx={{ fill: primary! }} />
             {!isMobile && (
               <Typography fontWeight="bold" variant="h2" color="primary">
-                Graasp
+                Graasp{' '}
+                {isPreviewEnabled ? (
+                  <Typography variant="note">preview</Typography>
+                ) : (
+                  ''
+                )}
               </Typography>
             )}
           </Stack>

src/routes/_landing/features.tsx

@@ -4,7 +4,9 @@ import { BlendedLearningSection } from '~landing/features/BlendedLearningSection
 import { GraaspFeaturesSection } from '~landing/features/GraaspFeaturesSection';
 import { PlatformOverviewSection } from '~landing/features/PlatformOverviewSection';
 import { TitleSection } from '~landing/features/TitleSection';
+import { PricingPlansSection } from '~landing/features/pricing/PricingPlansSection';
 import { NewsLetter } from '~landing/home/NewsLetter';
+import { Preview } from '~landing/preview/PreviewModeContext';
 
 export const Route = createFileRoute('/_landing/features')({
   component: RouteComponent,
@@ -17,8 +19,12 @@ function RouteComponent() {
       <PlatformOverviewSection />
       <BlendedLearningSection />
       <GraaspFeaturesSection />
-      {/* <PricingPlansSection /> */}
-      {/* <BlogSection /> */}
+      <Preview>
+        <PricingPlansSection />
+      </Preview>
+      {/* <Preview>
+        <BlogSection />
+      </Preview> */}
       <NewsLetter />
     </>
   );