feat: review

web/components/Account/AccountMenu.tsx

@@ -1,35 +1,35 @@
-import React, { useMemo } from 'react'
-import { Box, Image, Flex, Text, VStack, BoxProps } from '@chakra-ui/react'
-import {
-  ROUTE_USE_POLICY,
-  ROUTE_ACCOUNT_INFORMATION,
-  ROUTE_ACCOUNT_REQUEST,
-  ROUTE_ACCOUNT_BOOKING,
-  ROUTE_ACCOUNT_MESSAGE,
-  ROUTE_ACCOUNT_PLACES,
-  ROUTE_ACCOUNT_APPLICATIONS,
-  ROUTE_ACCOUNT_MY_APPLICATIONS,
-} from '~constants'
-import Link from '~components/Link'
-import Back from 'public/assets/img/back.svg'
-import Notif from '~components/Notif'
-import Profile from 'public/assets/img/user.svg'
+import { Box, BoxProps, Flex, Image, Text, VStack } from '@chakra-ui/react'
+import { signOut } from 'next-auth/client'
+import { useTranslation } from 'next-i18next'
+import { useRouter } from 'next/router'
 import Applications from 'public/assets/img/applicationsSmall.svg'
 import ApplicationsLoading from 'public/assets/img/applicationsSmallLoading.svg'
+import Back from 'public/assets/img/back.svg'
+import Calendar from 'public/assets/img/calendar.svg'
 import Charte from 'public/assets/img/charte.svg'
-import Logout from 'public/assets/img/logout.svg'
 import Home from 'public/assets/img/home.svg'
-import Calendar from 'public/assets/img/calendar.svg'
+import Logout from 'public/assets/img/logout.svg'
 import Message from 'public/assets/img/message.svg'
 import Question from 'public/assets/img/question.svg'
-import { useTranslation } from 'next-i18next'
-import { signOut } from 'next-auth/client'
-import { useRouter } from 'next/router'
-import { UsersPermissionsUser } from '~typings/api'
-import { useMyNotifications } from '~hooks/useMyNotifications'
-import { useUserIsComplete } from '~hooks/useUserIsComplete'
+import Profile from 'public/assets/img/user.svg'
+import { useMemo } from 'react'
 import useCampaignContext from '~components/Campaign/useCampaignContext'
+import Link from '~components/Link'
+import Notif from '~components/Notif'
+import {
+  ROUTE_ACCOUNT_APPLICATIONS,
+  ROUTE_ACCOUNT_BOOKING,
+  ROUTE_ACCOUNT_INFORMATION,
+  ROUTE_ACCOUNT_MESSAGE,
+  ROUTE_ACCOUNT_MY_APPLICATIONS,
+  ROUTE_ACCOUNT_PLACES,
+  ROUTE_ACCOUNT_REQUEST,
+  ROUTE_USE_POLICY,
+} from '~constants'
 import { useMyApplications } from '~hooks/useMyApplications'
+import { useMyNotifications } from '~hooks/useMyNotifications'
+import { useUserIsComplete } from '~hooks/useUserIsComplete'
+import { UsersPermissionsUser } from '~typings/api'
 
 const accountItems = {
   title: 'myAccount',
@@ -155,8 +155,14 @@ const AccountMenu = ({ user }: { user: UsersPermissionsUser }) => {
     (user?.type === 'place' &&
       placeCampaigns?.length &&
       applications?.length) ||
-    (user?.type === 'company' && currentCampaign && currentCampaign.mode !== "closed")
+    (user?.type === 'company' &&
+      currentCampaign &&
+      currentCampaign.mode !== 'closed')
 
+  const hideApplication =
+    currentCampaign?.mode === 'preselections' &&
+    !applications?.length &&
+    user?.type === 'company'
 
   const displayMenu = ({ title, items, translationParams = {} }) => {
     const isDisactivated = !isComplete && title === 'dashboard'
@@ -259,7 +265,9 @@ const AccountMenu = ({ user }: { user: UsersPermissionsUser }) => {
           {user?.confirmed &&
             user?.accepted &&
             displayMenu(user?.type === 'company' ? companyItems : placeItems)}
-          {displayApplications && displayMenu(applicationItems)}
+          {displayApplications &&
+            !hideApplication &&
+            displayMenu(applicationItems)}
           {displayMenu(accountItems)}
         </VStack>
       </Box>

web/components/Account/Application/Place/ApplicationPlaceList.tsx

@@ -1,22 +1,22 @@
-import React, { useEffect, useMemo, useState } from 'react'
 import {
-  Flex,
-  Text,
-  SimpleGrid,
   Box,
   Divider as ChakraDivider,
   DividerProps,
+  Flex,
+  SimpleGrid,
+  Text,
   useDisclosure,
 } from '@chakra-ui/react'
 import { useTranslation } from 'next-i18next'
-import { Application } from '~typings/api'
+import { useRouter } from 'next/router'
 import Chevron from 'public/assets/img/chevron-down.svg'
-import Cell from '~components/Account/Booking/Cell'
-import ApplicationPlaceHelper from '~components/Account/Application/Place/ApplicationsHelpers/ApplicationPlaceHelper'
+import { useEffect, useMemo, useState } from 'react'
 import ApplicationPlaceListItem from '~components/Account/Application/Place/ApplicationPlaceListItem'
-import useSelectedCampaign from '~hooks/useSelectedCampaign'
+import ApplicationPlaceHelper from '~components/Account/Application/Place/ApplicationsHelpers/ApplicationPlaceHelper'
 import ApplicationDetailDrawer from '~components/Account/Application/Place/DetailDrawer/ApplicationDetailDrawer'
-import { useRouter } from 'next/router'
+import Cell from '~components/Account/Booking/Cell'
+import useSelectedCampaign from '~hooks/useSelectedCampaign'
+import { Application } from '~typings/api'
 
 interface Props {
   applications: Application[]
@@ -55,7 +55,7 @@ const ApplicationPlaceList = ({ applications = [] }: Props) => {
       list.filter((application) => {
         return (
           !query.search?.length ||
-          `${application?.company?.structureName} (${application.company.firstname} ${application.company.lastname})`
+          `${application?.company?.structureName} (${application.company?.firstname} ${application.company?.lastname})`
             .toLowerCase()
             ?.includes((query.search as string)?.toLowerCase())
         )

web/components/Account/Application/Place/ApplicationPlaceListItem.tsx

@@ -1,12 +1,12 @@
-import React, { Fragment } from 'react'
-import { Application } from '~typings/api'
-import { Text, Button, HStack } from '@chakra-ui/react'
+import { Button, HStack, Text } from '@chakra-ui/react'
 import { useTranslation } from 'next-i18next'
+import { Fragment } from 'react'
+import ApplicationDownloadButton from '~components/Account/Application/Place/ApplicationDownloadButton'
+import ApplicationStatusIcon from '~components/Account/Application/Place/ApplicationStatusIcon'
 import Cell from '~components/Account/Booking/Cell'
 import Link from '~components/Link'
 import useSelectedCampaign from '~hooks/useSelectedCampaign'
-import ApplicationStatusIcon from '~components/Account/Application/Place/ApplicationStatusIcon'
-import ApplicationDownloadButton from '~components/Account/Application/Place/ApplicationDownloadButton'
+import { Application } from '~typings/api'
 
 interface Props {
   application: Application
@@ -30,7 +30,7 @@ const ApplicationPlaceListItem = ({ application, onSelect }: Props) => {
           fontWeight="500"
           pr={2}
           as="span"
-        >{`${application?.company?.structureName} (${application.company.firstname} ${application.company.lastname})`}</Text>
+        >{`${application?.company?.structureName} (${application.company?.firstname} ${application.company?.lastname})`}</Text>
         <ApplicationStatusIcon status={application?.status} />
       </Cell>
       <Cell cursor="default">

web/components/Account/Application/Place/DetailDrawer/ApplicationDetailDrawer.tsx

@@ -1,27 +1,25 @@
 import {
+  Box,
+  Divider,
   Drawer,
   DrawerCloseButton,
   DrawerContent,
   DrawerHeader,
   DrawerOverlay,
-  VStack,
-  Divider,
   Grid,
   GridItem,
-  Box,
-  Skeleton,
+  VStack,
 } from '@chakra-ui/react'
 import { useTranslation } from 'next-i18next'
 import ApplicationDetailHeader from '~components/Account/Application/Place/DetailDrawer/ApplicationDetailHeader'
-import { Application } from '~typings/api'
 import ApplicationRightPanel from '~components/Account/Application/Place/DetailDrawer/ApplicationRightPanel'
+import { Application } from '~typings/api'
 
-import { useEffect, useState } from 'react'
-import { Document, Page } from 'react-pdf'
+import { useState } from 'react'
 
+import ApplicationDetails from '~components/Account/Application/Place/DetailDrawer/ApplicationDetails'
 import useToast from '~hooks/useToast'
 import { handleApplicationDownload } from '~utils/pdf'
-import ApplicationDetails from '~components/Account/Application/Place/DetailDrawer/ApplicationDetails'
 
 const ApplicationDetailDrawer = ({
   isOpen,
@@ -36,11 +34,8 @@ const ApplicationDetailDrawer = ({
 }) => {
   const { t } = useTranslation('application')
   const { id } = application ?? {}
-  const [displayPdf, setDisplayPdf] = useState(false)
   const [isDownloading, setIsDownloading] = useState(false)
-  const [scales, setScales] = useState([])
   const { errorToast } = useToast()
-  const [numPages, setNumPages] = useState(0)
 
   const handleDownload = async () => {
     setIsDownloading(true)
@@ -57,22 +52,17 @@ const ApplicationDetailDrawer = ({
     }
   }
 
-  useEffect(() => {
-    setTimeout(() => {
-      setDisplayPdf(true)
-    }, 1500)
-  }, [id, isOpen])
-
   if (!application) {
     return null
   }
 
+  const pdfUrl = application?.creation_file?.[0]?.url
+
   return (
     <Drawer
       isOpen={isOpen}
       placement="right"
       onClose={() => {
-        setDisplayPdf(false)
         onClose()
       }}
       size="xl"
@@ -87,11 +77,7 @@ const ApplicationDetailDrawer = ({
           <ApplicationDetailHeader application={application} />
           <Divider />
           <Box width="100%" height="100%" paddingBottom={'100px'}>
-            <Grid
-              templateColumns={'repeat(3, 1fr)'}
-              width="100%"
-              height="100%"
-            >
+            <Grid templateColumns={'repeat(3, 1fr)'} width="100%" height="100%">
               <GridItem
                 colSpan={{ base: 3, md: 2 }}
                 overflowX="auto"
@@ -101,49 +87,19 @@ const ApplicationDetailDrawer = ({
                 width="100%"
                 flexDirection="column"
               >
-                <ApplicationDetails application={application} />
-                <Divider opacity={0.4} />
-                {displayPdf && (
-                  <Document
-                    file={application?.creation_file?.[0]?.url}
-                    onLoadSuccess={({ numPages }) => {
-                      setNumPages(numPages)
-                    }}
-                    loading={
-                      <Skeleton
-                        height="100vh"
-                        width="100vw"
-                        variant="rectangle"
-                      />
-                    }
-                    style={{ height: '100%' }}
-                  >
-                    {Array.from(new Array(numPages), (_el, index) => (
-                      <Page
-                        key={`page_${index + 1}`}
-                        pageNumber={index + 1}
-                        onRenderSuccess={(page) => {
-                          const viewport = page.getViewport({ scale: 1 })
-                          if (viewport) {
-                            const orientation =
-                              viewport.width > viewport.height
-                                ? 'landscape'
-                                : 'portrait'
-                            // Adjust the scale based on the orientation
-                            const scale =
-                              orientation === 'landscape' ? 0.7 : 1.0
-                            setScales((prevScales) => {
-                              const newScales = [...prevScales]
-                              newScales[index] = scale
-                              return newScales
-                            })
-                          }
-                        }}
-                        scale={scales[index] || 1.0}
-                      />
-                    ))}
-                  </Document>
-                )}
+                <Box>
+                  <ApplicationDetails application={application} />
+                  <Divider opacity={0.4} />
+                  {pdfUrl && (
+                    <Box
+                      as="object"
+                      data={pdfUrl}
+                      type="application/pdf"
+                      width="100%"
+                      height="100%"
+                    />
+                  )}
+                </Box>
               </GridItem>
               <GridItem
                 colSpan={{ base: 3, md: 1 }}

web/components/pdfs/ApplicationHeader.tsx

@@ -47,7 +47,7 @@ const ApplicationHeader = ({ application }: { application: Application }) => {
           {application?.disponibility?.espace?.name}
         </Text>
         <Text style={{ fontSize: FONT_SIZE_BIG }}>
-          {`${format(application?.disponibility?.start, 'dd/MM')} → ${format(
+          {`${format(application?.disponibility?.start, 'dd/MM')} - ${format(
             application?.disponibility?.end,
             'dd/MM',
           )}`}

web/pages/api/pdfs/all/[id].tsx

@@ -1,10 +1,10 @@
 // @ts-ignore
 import { renderToStream } from '@react-pdf/renderer'
+import AdmZip from 'adm-zip'
+import { getSession } from 'next-auth/client'
 import { client } from '~api/client-api'
 import ApplicationDocument from '~components/pdfs/ApplicationDocument'
-import { getSession } from 'next-auth/client'
 import { formatDisponibilityZipName, getBufferFromStream } from '~utils/pdf'
-import AdmZip  from "adm-zip"
 
 const MultipleApplication = async (req, res) => {
   const { id: disponibilityId } = req.query
@@ -29,34 +29,36 @@ const MultipleApplication = async (req, res) => {
   )
 
   const disponibility = applications?.[0]?.disponibility
-  const campaign = applications?.[0]?.campaign
-
-  const zip = new AdmZip();
+  const zip = new AdmZip()
 
   for (const application of applications) {
-    const name = application.company?.structureName;
+    const refLabel = `Ref. ${application.id}`
+    const name = `${refLabel} - ${application.company?.structureName}`
     const stream = await renderToStream(
       <ApplicationDocument application={application} />,
     )
     const streamBuffer = await getBufferFromStream(stream)
-    await zip.addFile(`${name}/candidature.pdf`, streamBuffer);
+    await zip.addFile(`${name}/${refLabel} - Candidature.pdf`, streamBuffer)
 
     if (application?.creation_file?.[0]?.url) {
       const creationFile = await fetch(application?.creation_file?.[0]?.url)
-      
+
       // @ts-ignore
       const creationFileArrayBuffer = await creationFile.buffer()
-      await zip.addFile(`${name}/dossier-artistique.pdf`, creationFileArrayBuffer);
+      await zip.addFile(
+        `${name}/${refLabel} - Dossier artistique.pdf`,
+        creationFileArrayBuffer,
+      )
     }
   }
 
-  const zipBuffer = zip.toBuffer();
+  const zipBuffer = zip.toBuffer()
 
   res.setHeader('Content-Type', 'application/zip')
   res.setHeader(
     'Content-Disposition',
     // @ts-expect-error
-    'attachment; filename=' + formatDisponibilityZipName(disponibility, campaign),
+    'attachment; filename=' + formatDisponibilityZipName(disponibility),
   )
   res.send(zipBuffer)
 }