fix: update for new account

cypress/support/commands.ts

@@ -26,8 +26,6 @@ import {
   mockGetLoginSchemaType,
   mockGetMemberBy,
   mockGetMembers,
-  mockGetOwnItems,
-  mockGetSharedItems,
   mockPatchAppData,
   mockPostAppData,
   mockProfilePage,
@@ -50,8 +48,6 @@ Cypress.Commands.add(
       cy.setCookie(CookieKeys.Session, 'somecookie');
       cy.setCookie(CookieKeys.AcceptCookies, 'true');
     }
-    mockGetOwnItems({ items, currentMember });
-    mockGetSharedItems({ items, currentMember });
     mockGetAccessibleItems(items);
     mockGetItem(
       { items, currentMember },

cypress/support/server.ts

@@ -52,66 +52,13 @@ const {
   buildGetMembersByEmailRoute,
   buildGetMembersByIdRoute,
   buildGetCurrentMemberRoute,
-  GET_OWN_ITEMS_ROUTE,
-  SHARED_ITEM_WITH_ROUTE,
   SIGN_OUT_ROUTE,
   buildGetItemGeolocationRoute,
 } = API_ROUTES;
 
 export const isError = (error?: { statusCode: number }): boolean =>
   Boolean(error?.statusCode);
 
-export const mockGetOwnItems = ({
-  items,
-  currentMember,
-}: {
-  items: MockItem[];
-  currentMember: Member | null;
-}): void => {
-  cy.intercept(
-    {
-      method: DEFAULT_GET.method,
-      url: `${API_HOST}/${GET_OWN_ITEMS_ROUTE}`,
-    },
-    ({ reply }) => {
-      if (!currentMember) {
-        return reply({ statusCode: StatusCodes.UNAUTHORIZED, body: null });
-      }
-      const own = items.filter(
-        ({ creator, path }) =>
-          creator?.id === currentMember.id && !path.includes('.'),
-      );
-      return reply(own);
-    },
-  ).as('getOwnItems');
-};
-
-export const mockGetSharedItems = ({
-  items,
-  currentMember,
-}: {
-  items: MockItem[];
-  currentMember: Member | null;
-}): void => {
-  cy.intercept(
-    {
-      method: DEFAULT_GET.method,
-      url: `${API_HOST}/${SHARED_ITEM_WITH_ROUTE}`,
-    },
-    ({ reply }) => {
-      if (!currentMember) {
-        return reply({ statusCode: StatusCodes.UNAUTHORIZED, body: null });
-      }
-      const shared = items.filter(
-        ({ memberships, path }) =>
-          memberships?.find((m) => m.memberId === currentMember.id) &&
-          isRootItem({ path }),
-      );
-      return reply(shared);
-    },
-  ).as('getSharedItems');
-};
-
 export const mockGetAccessibleItems = (items: MockItem[]): void => {
   cy.intercept(
     {

package.json

@@ -36,12 +36,12 @@
     "@emotion/cache": "11.13.1",
     "@emotion/react": "11.13.3",
     "@emotion/styled": "11.13.0",
-    "@graasp/chatbox": "3.2.1",
-    "@graasp/query-client": "3.22.3",
-    "@graasp/sdk": "4.28.0",
+    "@graasp/chatbox": "3.3.0",
+    "@graasp/query-client": "3.23.0",
+    "@graasp/sdk": "4.29.1",
     "@graasp/stylis-plugin-rtl": "2.2.0",
-    "@graasp/translations": "1.37.0",
-    "@graasp/ui": "5.0.0",
+    "@graasp/translations": "1.37.1",
+    "@graasp/ui": "5.1.0",
     "@mui/icons-material": "5.16.7",
     "@mui/lab": "5.0.0-alpha.173",
     "@mui/material": "5.16.7",
@@ -59,7 +59,7 @@
     "react-fullscreen-crossbrowser": "1.1.3",
     "react-ga4": "2.1.0",
     "react-helmet": "6.1.0",
-    "react-i18next": "15.0.1",
+    "react-i18next": "15.0.2",
     "react-intersection-observer": "9.13.1",
     "react-quill": "2.0.0",
     "react-router": "6.26.2",
@@ -70,7 +70,7 @@
   },
   "devDependencies": {
     "@commitlint/config-conventional": "19.5.0",
-    "@cypress/code-coverage": "3.12.48",
+    "@cypress/code-coverage": "3.13.1",
     "@eslint/compat": "1.1.1",
     "@eslint/eslintrc": "3.1.0",
     "@eslint/js": "9.10.0",
@@ -79,12 +79,12 @@
     "@types/lodash.isarray": "^4.0.9",
     "@types/lodash.truncate": "^4.4.9",
     "@types/node": "^20.16.5",
-    "@types/react": "18.3.5",
+    "@types/react": "18.3.8",
     "@types/react-dom": "^18.3.0",
     "@types/react-helmet": "^6.1.11",
     "@types/uuid": "10.0.0",
-    "@typescript-eslint/eslint-plugin": "8.5.0",
-    "@typescript-eslint/parser": "8.5.0",
+    "@typescript-eslint/eslint-plugin": "8.6.0",
+    "@typescript-eslint/parser": "8.6.0",
     "@vitejs/plugin-react": "^4.3.1",
     "commitlint": "19.5.0",
     "concurrently": "9.0.1",
@@ -107,10 +107,10 @@
     "prettier": "3.3.3",
     "rollup-plugin-visualizer": "5.12.0",
     "typescript": "5.6.2",
-    "vite": "5.4.5",
+    "vite": "5.4.6",
     "vite-plugin-checker": "^0.8.0",
     "vite-plugin-istanbul": "6.0.2",
-    "vitest": "2.1.0"
+    "vitest": "2.1.1"
   },
   "packageManager": "yarn@4.4.1"
 }

src/App.tsx

@@ -1,7 +1,9 @@
 import { useEffect } from 'react';
+import { Trans } from 'react-i18next';
 import {
   Link,
   Navigate,
+  Outlet,
   Route,
   Routes,
   useLocation,
@@ -12,7 +14,11 @@ import {
 import { Alert, Button, Stack, Typography } from '@mui/material';
 
 import { buildSignInPath, saveUrlForRedirection } from '@graasp/sdk';
-import { CustomInitialLoader, withAuthorization } from '@graasp/ui';
+import {
+  CustomInitialLoader,
+  PreventGuestWrapper,
+  SignedInWrapper,
+} from '@graasp/ui';
 
 import { AUTHENTICATION_HOST, DOMAIN } from '@/config/env';
 import { HOME_PATH, buildContentPagePath, buildMainPath } from '@/config/paths';
@@ -21,6 +27,8 @@ import HomePage from '@/modules/pages/HomePage';
 import ItemPage from '@/modules/pages/ItemPage';
 
 import { usePlayerTranslation } from './config/i18n';
+import { mutations } from './config/queryClient';
+import { PREVENT_GUEST_MESSAGE_ID } from './config/selectors';
 import { PLAYER } from './langs/constants';
 import PageWrapper from './modules/layout/PageWrapper';
 
@@ -56,7 +64,9 @@ const RedirectToRootContentPage = () => {
 export const App = (): JSX.Element => {
   const location = useLocation();
   const [searchParams, setSearchParams] = useSearchParams();
-  const { data: currentMember, isLoading } = useCurrentMemberContext();
+  const { data: currentAccount, isLoading } = useCurrentMemberContext();
+  const { mutate: signOut } = mutations.useSignOut();
+  const { t } = usePlayerTranslation();
 
   useEffect(
     () => {
@@ -74,20 +84,6 @@ export const App = (): JSX.Element => {
     return <CustomInitialLoader />;
   }
 
-  const props = {
-    currentMember,
-    redirectionLink: buildSignInPath({
-      host: AUTHENTICATION_HOST,
-      // allows to go back to this page after login
-      redirectionUrl: window.location.href,
-    }),
-    onRedirect: () => {
-      // save current url for later redirection after sign in
-      saveUrlForRedirection(location.pathname, DOMAIN);
-    },
-  };
-  const HomePageWithAuthorization = withAuthorization(HomePage, props);
-
   const fullscreen = Boolean(searchParams.get('fullscreen') === 'true');
 
   return (
@@ -97,7 +93,46 @@ export const App = (): JSX.Element => {
           <Route index element={<RedirectToRootContentPage />} />
           <Route path=":itemId" element={<ItemPage />} />
         </Route>
-        <Route path={HOME_PATH} element={<HomePageWithAuthorization />} />
+        <Route
+          element={
+            // redirect to sign in if not signed in
+            <SignedInWrapper
+              currentAccount={currentAccount}
+              redirectionLink={buildSignInPath({
+                host: AUTHENTICATION_HOST,
+                redirectionUrl: window.location.href,
+              })}
+              onRedirect={() => {
+                // save current url for later redirection after sign in
+                saveUrlForRedirection(location.pathname, DOMAIN);
+              }}
+            >
+              <PreventGuestWrapper
+                id={PREVENT_GUEST_MESSAGE_ID}
+                currentAccount={currentAccount}
+                buttonText={t(PLAYER.GUEST_SIGN_OUT_BUTTON)}
+                onButtonClick={() => signOut()}
+                errorText={t(PLAYER.ERROR_MESSAGE)}
+                text={
+                  <Trans
+                    t={t}
+                    i18nKey={PLAYER.GUEST_LIMITATION_TEXT}
+                    values={{
+                      name: currentAccount?.name,
+                    }}
+                    components={{ 1: <strong /> }}
+                  />
+                }
+              >
+                <Outlet />
+              </PreventGuestWrapper>
+            </SignedInWrapper>
+          }
+        >
+          <Route path={HOME_PATH} element={<HomePage />} />
+        </Route>
+
+        {/* Default redirect  */}
         <Route path="*" element={<Navigate to={HOME_PATH} />} />
       </Route>
     </Routes>

src/config/selectors.ts

@@ -74,3 +74,5 @@ export const NAVIGATION_ISLAND_CY = 'navigationIsland';
 export const TREE_NODE_GROUP_CLASS = 'tree-node-group';
 export const BACK_TO_SHORTCUT_ID = 'backToButtonShortcut';
 export const ITEM_MAP_BUTTON_ID = 'itemMapButton';
+
+export const PREVENT_GUEST_MESSAGE_ID = 'prevent-guests';

src/contexts/CurrentMemberContext.tsx

@@ -1,5 +1,7 @@
 import { createContext, useContext, useEffect } from 'react';
 
+import { AccountType } from '@graasp/sdk';
+
 import i18n from '@/config/i18n';
 import { hooks } from '@/config/queryClient';
 
@@ -20,7 +22,10 @@ export const CurrentMemberContextProvider = ({
   const query = useCurrentMember();
 
   // update language depending on user setting
-  const lang = query.data?.extra?.lang;
+  const lang =
+    query.data && query.data?.type === AccountType.Individual
+      ? query.data?.extra?.lang
+      : undefined;
   useEffect(() => {
     if (lang !== i18n.language) {
       i18n.changeLanguage(lang);

src/langs/constants.ts

@@ -38,4 +38,7 @@ export const PLAYER = {
   MAP_BUTTON_TEXT: 'MAP_BUTTON_TEXT',
   MAP_BUTTON_DISABLED_TEXT: 'MAP_BUTTON_DISABLED_TEXT',
   FROM_SHORTCUT_BUTTON_TEXT: 'FROM_SHORTCUT_BUTTON_TEXT',
+  GUEST_LIMITATION_TEXT: 'GUEST_LIMITATION_TEXT',
+  GUEST_SIGN_OUT_BUTTON: 'GUEST_SIGN_OUT_BUTTON',
+  ERROR_MESSAGE: 'ERROR_MESSAGE',
 };

src/langs/en.json

@@ -32,5 +32,7 @@
   "TREE_NAVIGATION_RELOAD_TEXT": "Reload me!",
   "MAP_BUTTON_TEXT": "See {{name}} on Map",
   "MAP_BUTTON_DISABLED_TEXT": "This item does not have a geolocation",
-  "FROM_SHORTCUT_BUTTON_TEXT": "Back to {{name}}"
+  "FROM_SHORTCUT_BUTTON_TEXT": "Back to {{name}}",
+  "GUEST_LIMITATION_TEXT": "You are currently using Graasp with the guest account <1>{{name}}</1>. In order to use all features of Graasp, you have to log out and create a Graasp account.",
+  "GUEST_SIGN_OUT_BUTTON": "Log out and Create a Graasp account"
 }

src/modules/item/Item.tsx

@@ -7,6 +7,7 @@ import { Alert, Box, Container, Divider, Skeleton, Stack } from '@mui/material';
 
 import { Api } from '@graasp/query-client';
 import {
+  AccountType,
   ActionTriggers,
   AppItemType,
   Context,
@@ -262,7 +263,12 @@ const AppContent = ({ item }: { item: AppItemType }): JSX.Element => {
       },
     });
   };
-  if (member || isSuccessMember)
+  if (member || isSuccessMember) {
+    const memberLang =
+      member && member?.type === AccountType.Individual
+        ? member.extra?.lang
+        : DEFAULT_LANG;
+
     return (
       <AppItem
         frameId={buildAppId(item.id)}
@@ -275,16 +281,17 @@ const AppContent = ({ item }: { item: AppItemType }): JSX.Element => {
         contextPayload={{
           apiHost: API_HOST,
           settings: item.settings,
-          lang: item.lang || member?.extra?.lang || DEFAULT_LANG,
+          lang: item.lang ?? memberLang,
           permission: PermissionLevel.Read,
           context: Context.Player,
-          memberId: member?.id,
+          accountId: member?.id,
           itemId: item.id,
         }}
         showCollapse={item.settings?.isCollapsible}
         onCollapse={onCollapse}
       />
     );
+  }
 
   if (isLoadingMember) {
     return (