🛂(frontend) button request access only on parent

The children reflect the parent access. So we can
request access only on the parent document.

src/frontend/apps/impress/src/components/Loading.tsx

@@ -1,7 +1,7 @@
 import { Loader } from '@openfun/cunningham-react';
 import { useTranslation } from 'react-i18next';
 
-import { Box } from './Box';
+import { Box, BoxProps } from './Box';
 import { Icon } from './Icon';
 import { Text } from './Text';
 
@@ -36,8 +36,8 @@ export const LoadMoreText = ({
   );
 };
 
-export const Loading = () => (
-  <Box $align="center" $justify="center" $height="100%">
+export const Loading = (props: BoxProps) => (
+  <Box $align="center" $justify="center" $height="100%" {...props}>
     <Loader />
   </Box>
 );

src/frontend/apps/impress/src/features/docs/doc-share/components/DocShareAccessRequest.tsx

@@ -8,7 +8,14 @@ import { useMemo, useState } from 'react';
 import { useTranslation } from 'react-i18next';
 import { createGlobalStyle } from 'styled-components';
 
-import { Box, BoxButton, Icon, LoadMoreText } from '@/components';
+import {
+  Box,
+  BoxButton,
+  Icon,
+  LoadMoreText,
+  Loading,
+  Text,
+} from '@/components';
 import { QuickSearchData, QuickSearchGroup } from '@/components/quick-search';
 import { useCunninghamTheme } from '@/cunningham';
 import { AccessRequest, Doc } from '@/docs/doc-management/';
@@ -161,7 +168,11 @@ export const ButtonAccessRequest = ({
   ...buttonProps
 }: ButtonAccessRequestProps) => {
   const { authenticated } = useAuth();
-  const { data: requests } = useDocAccessRequests({
+  const {
+    data: requests,
+    error: docAccessError,
+    isLoading,
+  } = useDocAccessRequests({
     docId,
     page: 1,
   });
@@ -175,14 +186,28 @@ export const ButtonAccessRequest = ({
     },
   });
 
-  const hasRequested = !!(
-    requests && requests?.results.find((request) => request.document === docId)
-  );
-
   if (!authenticated) {
     return null;
   }
 
+  if (docAccessError?.status === 404) {
+    return (
+      <Text $maxWidth="320px" $textAlign="center" $variation="600" $size="sm">
+        {t(
+          'As this is a sub-document, please request access to the parent document to enable these features.',
+        )}
+      </Text>
+    );
+  }
+
+  if (isLoading) {
+    return <Loading $height="auto" />;
+  }
+
+  const hasRequested = !!(
+    requests && requests?.results.find((request) => request.document === docId)
+  );
+
   return (
     <Button
       onClick={() => createRequest({ docId })}

src/frontend/apps/impress/src/features/docs/doc-share/components/DocShareModal.tsx

@@ -179,7 +179,7 @@ export const DocShareModal = ({ doc, onClose, isRootDoc = true }: Props) => {
                     $size="sm"
                   >
                     {t(
-                      'You do not have permission to view users sharing this document or modify link settings.',
+                      'You can view this document but need additional access to see its members or modify settings.',
                     )}
                   </Text>
                   <ButtonAccessRequest

src/frontend/apps/impress/src/pages/docs/[id]/403.tsx

@@ -46,7 +46,11 @@ interface DocProps {
 
 const DocPage403 = ({ id }: DocProps) => {
   const { t } = useTranslation();
-  const { data: requests, isLoading: isLoadingRequest } = useDocAccessRequests({
+  const {
+    data: requests,
+    isLoading: isLoadingRequest,
+    error: docAccessError,
+  } = useDocAccessRequests({
     docId: id,
     page: 1,
   });
@@ -56,7 +60,7 @@ const DocPage403 = ({ id }: DocProps) => {
     (request) => request.document === id,
   );
 
-  const { error, isLoading: isLoadingDoc } = useDoc(
+  const { error: docError, isLoading: isLoadingDoc } = useDoc(
     { id },
     {
       staleTime: 0,
@@ -71,7 +75,7 @@ const DocPage403 = ({ id }: DocProps) => {
     },
   );
 
-  if (!isLoadingDoc && error?.status !== 403) {
+  if (!isLoadingDoc && docError?.status !== 403) {
     void replace(`/docs/${id}`);
     return <Loading />;
   }
@@ -115,6 +119,21 @@ const DocPage403 = ({ id }: DocProps) => {
               : t('Insufficient access rights to view the document.')}
           </Text>
 
+          {docAccessError?.status === 404 && (
+            <Text
+              as="p"
+              $maxWidth="320px"
+              $textAlign="center"
+              $variation="600"
+              $size="sm"
+              $margin={{ top: '0' }}
+            >
+              {t(
+                "You're currently viewing a sub-document. To gain access, please request permission from the main document.",
+              )}
+            </Text>
+          )}
+
           <Box $direction="row" $gap="0.7rem">
             <StyledLink href="/">
               <StyledButton
@@ -124,7 +143,9 @@ const DocPage403 = ({ id }: DocProps) => {
                 {t('Home')}
               </StyledButton>
             </StyledLink>
-            <ButtonAccessRequest docId={id} />
+            {docAccessError?.status !== 404 && (
+              <ButtonAccessRequest docId={id} />
+            )}
           </Box>
         </Box>
       </Box>