Feat/nav access campaign links (#82)

* Fix selected campaign picking with hook * Fix scroll tableau + Comapgnie Admind Listing candidatures fix * Add nav links
AtelierdeParis · Feb 23, 2024 · 2b90453 · 2b90453
1 parent b2e07fc
commit 2b90453
Show file tree

Hide file tree

Showing 19 changed files with 175 additions and 77 deletions.
diff --git a/web/components/Account/Application/Company/ApplicationCompanyList.tsx b/web/components/Account/Application/Company/ApplicationCompanyList.tsx
@@ -58,7 +58,10 @@ const ApplicationCompanyList = ({ applications = [] }: Props) => {
           {t('company.title', { title: currentCampaign?.title })}
         </Text>
       </Flex>
-      <SimpleGrid gridTemplateColumns="fit-content(300px) minmax(auto, 300px) minmax(auto, auto) minmax(auto, auto) minmax(auto, auto) fit-content(300px)">
+      <SimpleGrid
+        gridTemplateColumns="fit-content(300px) minmax(auto, 300px) minmax(auto, auto) minmax(auto, auto) minmax(auto, auto) fit-content(300px)"
+        overflowX="auto"
+      >
         <Cell isHeader>
           <Text pl="9px">{t('company.table.head.number')}</Text>
         </Cell>

diff --git a/web/components/Account/Application/Company/ApplicationsHelpers/ApplicationCompanyHelper.tsx b/web/components/Account/Application/Company/ApplicationsHelpers/ApplicationCompanyHelper.tsx
@@ -1,21 +1,30 @@
-import { Box, Button, Stack, Text } from '@chakra-ui/react'
-import { useTranslation } from 'next-i18next'
 import useCampaignContext from '~components/Campaign/useCampaignContext'
-import { ROUTE_PLACES } from '~constants'
 import { useCurrentUser } from '~hooks/useCurrentUser'
-import { format } from '~utils/date'
-import Link from '~components/Link'
 import OpenApplications from '~components/Account/Application/Company/ApplicationsHelpers/OpenApplications'
 import ClosedApplications from '~components/Account/Application/Company/ApplicationsHelpers/ClosedApplications'
+import { getEndDateTime } from '~components/Campaign/CampaignProvider'
+import FullApplications from '~components/Account/Application/Company/ApplicationsHelpers/FullApplications'
 
 const ApplicationCompanyHelper = () => {
-  const { remainingApplications } = useCurrentUser()
+  const { remainingApplications, applications } = useCurrentUser()
   const { currentCampaign } = useCampaignContext()
-  const { t } = useTranslation('application')
+  const today = new Date()
+
+  if (
+    applications.length > 0 &&
+    !remainingApplications &&
+    currentCampaign.mode === 'applications'
+  ) {
+    return <FullApplications numApplications={applications?.length} />
+  }
+
   if (remainingApplications > 0 && currentCampaign.mode === 'applications')
     return <OpenApplications remainingApplications={remainingApplications} />
 
-  if (currentCampaign.mode === 'preselections') {
+  if (
+    today <= getEndDateTime(currentCampaign.preselection_end) &&
+    today >= getEndDateTime(currentCampaign.application_end)
+  ) {
     return <ClosedApplications />
   }
   return null

diff --git a/web/components/Account/Application/Company/ApplicationsHelpers/FullApplications.tsx b/web/components/Account/Application/Company/ApplicationsHelpers/FullApplications.tsx
@@ -0,0 +1,36 @@
+import { Box, Stack, Text } from '@chakra-ui/react'
+import { useTranslation } from 'next-i18next'
+import useCampaignContext from '~components/Campaign/useCampaignContext'
+import { format } from '~utils/date'
+
+const FullApplications = ({ numApplications }: { numApplications: number }) => {
+  const { currentCampaign } = useCampaignContext()
+  const { t } = useTranslation('application')
+
+  return (
+    <Box paddingY={6}>
+      <Stack
+        backgroundColor="grayBackground"
+        direction={{ base: 'column', md: 'row' }}
+        p={2}
+        borderRadius="4px"
+        justifyContent="space-between"
+        alignItems={{ base: 'flex-start', md: 'center' }}
+        spacing={2}
+      >
+        <Box>
+          <Text as="span" fontWeight="bold">
+            {t(`company.helper.full_start${numApplications > 1 ? 's' : ''}`)}
+          </Text>
+          <Text as="span" pl={1}>
+            {t('company.helper.full_end', {
+              date: format(currentCampaign.preselection_end),
+            })}
+          </Text>
+        </Box>
+      </Stack>
+    </Box>
+  )
+}
+
+export default FullApplications
diff --git a/web/components/Account/Application/Company/ApplicationsHelpers/OpenApplications.tsx b/web/components/Account/Application/Company/ApplicationsHelpers/OpenApplications.tsx
@@ -43,6 +43,8 @@ const OpenApplications = ({
           size="lg"
           whiteSpace={'break-spaces'}
           textAlign="center"
+          p={4}
+          height="auto"
         >
           {t('company.helper.cta')}
         </Button>

diff --git a/web/components/Account/Application/ConfirmButton.tsx b/web/components/Account/Application/ConfirmButton.tsx
@@ -27,7 +27,7 @@ const ConfirmButton = ({
   const { isOpen, onClose, onToggle } = useDisclosure()
 
   return (
-    <Popover isOpen={isOpen} onClose={onClose}>
+    <Popover isOpen={isOpen} onClose={onClose} placement="bottom-end">
       <PopoverTrigger>
         <Box onClick={onToggle}>{children}</Box>
       </PopoverTrigger>

diff --git a/web/components/Account/Application/Place/ApplicationPlaceList.tsx b/web/components/Account/Application/Place/ApplicationPlaceList.tsx
@@ -14,6 +14,7 @@ import Cell from '~components/Account/Booking/Cell'
 import useCampaignContext from '~components/Campaign/useCampaignContext'
 import ApplicationPlaceHelper from '~components/Account/Application/Place/ApplicationsHelpers/ApplicationPlaceHelper'
 import ApplicationPlaceListItem from '~components/Account/Application/Place/ApplicationPlaceListItem'
+import useSelectedCampaign from '~hooks/useSelectedCampaign'
 
 interface Props {
   applications: Application[]
@@ -24,11 +25,10 @@ const Divider = (props: DividerProps) => (
 )
 
 const ApplicationPlaceList = ({ applications = [] }: Props) => {
-  const { currentCampaign } = useCampaignContext()
   const { t } = useTranslation('application')
   const [list, setList] = useState<Application[]>([])
   const [isDesc, setDesc] = useState<boolean>(true)
-
+  const { selectedCampaign } = useSelectedCampaign()
   useEffect(() => {
     setList(applications)
     setDesc(true)
@@ -44,8 +44,11 @@ const ApplicationPlaceList = ({ applications = [] }: Props) => {
       <ApplicationPlaceHelper applications={applications} />
       <SimpleGrid
         gridTemplateColumns={`fit-content(300px) minmax(200px, auto) minmax(auto, auto) minmax(auto, auto)${
-          currentCampaign?.mode === 'preselections' ? 'minmax(auto, auto)' : ''
+          ['preselections', 'closed']?.includes(selectedCampaign?.mode)
+            ? 'minmax(auto, auto)'
+            : ''
         }`}
+        overflowX="auto"
       >
         <Cell isHeader>
           <Text pl="9px">{t('place.table.head.number')}</Text>
@@ -73,7 +76,7 @@ const ApplicationPlaceList = ({ applications = [] }: Props) => {
           <Divider />
           <Text>{t('place.table.head.creation')}</Text>
         </Cell>
-        {currentCampaign?.mode === 'preselections' && (
+        {['preselections', 'closed']?.includes(selectedCampaign?.mode) && (
           <Cell isHeader>
             <Divider />
           </Cell>

diff --git a/web/components/Account/Application/Place/ApplicationPlaceListItem.tsx b/web/components/Account/Application/Place/ApplicationPlaceListItem.tsx
@@ -4,20 +4,15 @@ import { Text, Button, IconButton, HStack } from '@chakra-ui/react'
 import { useTranslation } from 'next-i18next'
 import Cell from '~components/Account/Booking/Cell'
 import Link from '~components/Link'
-import useCampaignContext from '~components/Campaign/useCampaignContext'
 import DownloadApplication from 'public/assets/img/downloadApplication.svg'
-import { useRouter } from 'next/router'
+import useSelectedCampaign from '~hooks/useSelectedCampaign'
 
 interface Props {
   application: Application
 }
 
 const ApplicationPlaceListItem = ({ application }: Props) => {
-  const { allPlaceCampaigns } = useCampaignContext()
-  const { query } = useRouter()
-  const selectedCampaign = allPlaceCampaigns?.find(
-    (c) => c.id.toString() === query.campaign.toString(),
-  )
+  const { selectedCampaign } = useSelectedCampaign()
   const { t } = useTranslation('application')
 
   return (
@@ -45,9 +40,8 @@ const ApplicationPlaceListItem = ({ application }: Props) => {
           {application?.creation_title}
         </Text>
       </Cell>
-
-      <Cell>
-        {['preselections', 'closed']?.includes(selectedCampaign?.mode) ? (
+      {['preselections', 'closed']?.includes(selectedCampaign?.mode) && (
+        <Cell>
           <HStack spacing={2}>
             <IconButton
               px={2}
@@ -78,10 +72,8 @@ const ApplicationPlaceListItem = ({ application }: Props) => {
               {t('place.table.buttons.details')}
             </Button>
           </HStack>
-        ) : (
-          ''
-        )}
-      </Cell>
+        </Cell>
+      )}
     </Fragment>
   )
 }

diff --git a/web/components/Account/Application/Place/ApplicationsHelpers/ApplicationPlaceHelper.tsx b/web/components/Account/Application/Place/ApplicationsHelpers/ApplicationPlaceHelper.tsx
@@ -1,25 +1,20 @@
-import useCampaignContext from '~components/Campaign/useCampaignContext'
 import MissingSelections from '~components/Account/Application/Place/ApplicationsHelpers/MissingSelections'
 import ConfirmSelections from '~components/Account/Application/Place/ApplicationsHelpers/ConfirmSelections'
 import ValidatedSelections from '~components/Account/Application/Place/ApplicationsHelpers/ValidatedSelections'
 import { Application } from '~typings/api'
-import { useRouter } from 'next/router'
 import ClosedCampaign from '~components/Account/Application/Place/ApplicationsHelpers/ClosedCampaign'
+import useSelectedCampaign from '~hooks/useSelectedCampaign'
 
 const ApplicationPlaceHelper = ({
   applications,
 }: {
   applications: Application[]
 }) => {
-  const { allPlaceCampaigns } = useCampaignContext()
   const preselections = applications?.filter(
     (application) => application?.status === 'preselected',
   ).length
 
-  const { query } = useRouter()
-  const selectedCampaign = allPlaceCampaigns?.find(
-    (c) => c.id.toString() === query.campaign.toString(),
-  )
+  const { selectedCampaign } = useSelectedCampaign()
   const missingPreselections =
     selectedCampaign?.preselections_max - preselections
 

diff --git a/web/components/Account/Application/Place/ApplicationsHelpers/MissingSelections.tsx b/web/components/Account/Application/Place/ApplicationsHelpers/MissingSelections.tsx
@@ -1,16 +1,16 @@
 import { Box, HStack, Text } from '@chakra-ui/react'
 import { useTranslation } from 'next-i18next'
-import useCampaignContext from '~components/Campaign/useCampaignContext'
 import { format } from '~utils/date'
 import PreselectionsWarning from 'public/assets/img/preselectionsWarning.svg'
+import useSelectedCampaign from '~hooks/useSelectedCampaign'
 
 const MissingSelections = ({
   missingPreselections,
 }: {
   missingPreselections: number
 }) => {
   const { t } = useTranslation('application')
-  const { currentCampaign } = useCampaignContext()
+  const { selectedCampaign } = useSelectedCampaign()
 
   return (
     <Box paddingY={2}>
@@ -20,7 +20,7 @@ const MissingSelections = ({
           <Box color="orange.600" pl={1}>
             <Text as="span">
               {t('place.helper.preselection_start', {
-                date: format(currentCampaign?.preselection_end),
+                date: format(selectedCampaign?.preselection_end),
               })}
             </Text>
             <Text as="span" fontWeight="bold" pl={1}>

diff --git a/web/components/Account/Application/Place/CampaignSelector/CampaignSelector.tsx b/web/components/Account/Application/Place/CampaignSelector/CampaignSelector.tsx
@@ -5,6 +5,7 @@ import { useEffect } from 'react'
 import CampaignSelectorField from '~components/Account/Application/Place/CampaignSelector/CampaignSelectorField'
 import useCampaignContext from '~components/Campaign/useCampaignContext'
 import { ROUTE_ACCOUNT_APPLICATIONS } from '~constants'
+import useSelectedCampaign from '~hooks/useSelectedCampaign'
 
 const CampaignSelector = ({ children }) => {
   const router = useRouter()
@@ -21,9 +22,7 @@ const CampaignSelector = ({ children }) => {
     }
   }, [allPlaceCampaigns])
 
-  const selectedCampaign = allPlaceCampaigns?.find(
-    (c) => c.id?.toString() === campaign?.toString(),
-  )
+  const { selectedCampaign } = useSelectedCampaign()
 
   if (!selectedCampaign) return null
 

diff --git a/web/components/Campaign/CampaignProvider.tsx b/web/components/Campaign/CampaignProvider.tsx
@@ -9,6 +9,20 @@ interface ICampaignProvider {
   children: React.ReactNode
 }
 
+export const getStartDateTime = (date) => {
+  const newDate = new Date(date)
+  newDate.setHours(0)
+  newDate.setMinutes(1)
+  return newDate
+}
+
+export const getEndDateTime = (date) => {
+  const newDate = new Date(date)
+  newDate.setHours(23)
+  newDate.setMinutes(59)
+  return newDate
+}
+
 const CampaignProvider = ({ children }: ICampaignProvider) => {
   const today = new Date()
   const { data: user } = useCurrentUser()
@@ -40,21 +54,21 @@ const CampaignProvider = ({ children }: ICampaignProvider) => {
 
   const getCampaignMode = (campaign) => {
     if (
-      today >= new Date(campaign.disponibility_start) &&
-      today <= new Date(campaign.disponibility_end)
+      today >= getStartDateTime(campaign.disponibility_start) &&
+      today <= getEndDateTime(campaign.disponibility_end)
     ) {
       return 'disponibilities'
     } else if (
-      today >= new Date(campaign.application_start) &&
-      today <= new Date(campaign.application_end)
+      today >= getStartDateTime(campaign.application_start) &&
+      today <= getEndDateTime(campaign.application_end)
     ) {
       return 'applications'
     } else if (
-      today >= new Date(campaign.preselection_start) &&
-      today <= new Date(campaign.preselection_end)
+      today >= getStartDateTime(campaign.preselection_start) &&
+      today <= getEndDateTime(campaign.preselection_end)
     ) {
       return 'preselections'
-    } else if (today >= new Date(campaign.preselection_end)) {
+    } else if (today >= getEndDateTime(campaign.preselection_end)) {
       return 'closed'
     }
     return null
@@ -106,15 +120,15 @@ const CampaignProvider = ({ children }: ICampaignProvider) => {
     (currentCampaign?.mode === 'disponibilities' && isCampaignPlace) ||
     currentCampaign?.mode === 'applications'
 
-  console.log(
-    activeCampaigns,
-    currentCampaign,
-    isCampaignPlace,
-    hasActiveCampaign,
-    isLoading,
-    allPlaceCampaigns,
-    isLoadingAllPlaceCampaigns,
-  )
+  // console.log(
+  //   activeCampaigns,
+  //   currentCampaign,
+  //   isCampaignPlace,
+  //   hasActiveCampaign,
+  //   isLoading,
+  //   allPlaceCampaigns,
+  //   isLoadingAllPlaceCampaigns,
+  // )
   return (
     <CampaignContext.Provider
       value={{

diff --git a/web/components/FooterMenu.tsx b/web/components/FooterMenu.tsx
@@ -14,6 +14,7 @@ import { Box, Flex, Text, Link as ChakraLink, Divider } from '@chakra-ui/react'
 import { useTranslation } from 'next-i18next'
 import SigninModal from '~components/Signin/SigninModal'
 import { useSession } from 'next-auth/client'
+import useCampaignContext from '~components/Campaign/useCampaignContext'
 
 const MenuItem = ({ href, text }) => {
   return (
@@ -26,6 +27,7 @@ const MenuItem = ({ href, text }) => {
 const FooterMenu = () => {
   const [session, loading] = useSession()
   const { t } = useTranslation()
+  const { currentCampaign } = useCampaignContext()
   return (
     <Box>
       <Flex pr={12}>
@@ -54,6 +56,12 @@ const FooterMenu = () => {
       <Box>
         <MenuItem href={ROUTE_CGU} text={t('nav.cgu')} />
         <MenuItem href={ROUTE_USE_POLICY} text={t('nav.policy')} />
+        {currentCampaign && currentCampaign?.chart_url && (
+          <MenuItem
+            href={currentCampaign?.chart_url}
+            text={t('nav.campaign_chart', { title: currentCampaign?.title })}
+          />
+        )}
       </Box>
     </Box>
   )

diff --git a/web/components/MobileMenu.tsx b/web/components/MobileMenu.tsx
@@ -114,14 +114,22 @@ const MobileMenu = ({ colorMode }: Props) => {
                   />
                   <MenuItem
                     href={`${ROUTE_PLACES}?tab=1`}
-                    text={t('nav.places_emergence')}
+                    text={t('nav.places_emergence', {
+                      title: currentCampaign?.title,
+                    })}
                   />
                 </>
               ) : (
                 <MenuItem href={ROUTE_PLACES} text={t('nav.places')} />
               )}
 
               <MenuItem href={ROUTE_PROJECT} text={t('nav.project')} />
+              {currentCampaign && currentCampaign?.article_link && (
+                <MenuItem
+                  href={currentCampaign?.article_link}
+                  text={t('nav.campaign', { title: currentCampaign?.title })}
+                />
+              )}
               <MenuItem href={ROUTE_ACTU} text={t('nav.news')} />
               <MenuItem href={ROUTE_FAQ} text={t('nav.faq')} />
               <MenuItem href={ROUTE_CONTACT} text={t('nav.contact')} />