Applications company improvement

back/extensions/documentation/documentation/1.0.0/full_documentation.json

@@ -14,7 +14,7 @@
       "name": "Apache 2.0",
       "url": "https://www.apache.org/licenses/LICENSE-2.0.html"
     },
-    "x-generation-date": "02/22/2024 12:58:52 PM"
+    "x-generation-date": "02/22/2024 1:55:11 PM"
   },
   "x-strapi-config": {
     "path": "/documentation",

web/components/Account/Application/Company/ApplicationCompanyList.tsx

@@ -13,7 +13,7 @@ import Chevron from 'public/assets/img/chevron-down.svg'
 import Cell from '~components/Account/Booking/Cell'
 import ApplicationCompanyListItem from '~components/Account/Application/Company/ApplicationCompanyListItem'
 import useCampaignContext from '~components/Campaign/useCampaignContext'
-import ApplicationCompanyHelper from '~components/Account/Application/Company/ApplicationCompanyHelper'
+import ApplicationCompanyHelper from '~components/Account/Application/Company/ApplicationsHelpers/ApplicationCompanyHelper'
 
 interface Props {
   applications: Application[]

web/components/Account/Application/Company/ApplicationCompanyListItem.tsx

@@ -8,12 +8,14 @@ import ConfirmButton from '~components/Account/Application/ConfirmButton'
 import { client } from '~api/client-api'
 import useToast from '~hooks/useToast'
 import { useQueryClient } from 'react-query'
+import useCampaignContext from '~components/Campaign/useCampaignContext'
 
 interface Props {
   application: Application
 }
 
 const ApplicationCompanyListItem = ({ application }: Props) => {
+  const { currentCampaign } = useCampaignContext()
   const { errorToast, successToast } = useToast()
   const { t } = useTranslation('application')
   const queryClient = useQueryClient()
@@ -60,24 +62,26 @@ const ApplicationCompanyListItem = ({ application }: Props) => {
         <Text>{application?.creation_title}</Text>
       </Cell>
       <Cell>
-        <ConfirmButton
-          helper={t('company.table.delete_helper')}
-          handleConfirm={onDelete}
-          confirmLabel={t('company.table.delete')}
-        >
-          <Button
-            px={2}
-            py={1}
-            variant="outline"
-            color="grayText.1"
-            colorScheme="gray"
-            size="sm"
-            borderRadius="sm"
-            fontSize="md"
+        {currentCampaign?.mode === 'applications' && (
+          <ConfirmButton
+            helper={t('company.table.delete_helper')}
+            handleConfirm={onDelete}
+            confirmLabel={t('company.table.delete')}
           >
-            {t('company.table.delete')}
-          </Button>
-        </ConfirmButton>
+            <Button
+              px={2}
+              py={1}
+              variant="outline"
+              color="grayText.1"
+              colorScheme="gray"
+              size="sm"
+              borderRadius="sm"
+              fontSize="md"
+            >
+              {t('company.table.delete')}
+            </Button>
+          </ConfirmButton>
+        )}
       </Cell>
     </Fragment>
   )

web/components/Account/Application/Company/ApplicationsHelpers/ApplicationCompanyHelper.tsx

@@ -0,0 +1,24 @@
+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'
+
+const ApplicationCompanyHelper = () => {
+  const { remainingApplications } = useCurrentUser()
+  const { currentCampaign } = useCampaignContext()
+  const { t } = useTranslation('application')
+  if (remainingApplications > 0 && currentCampaign.mode === 'applications')
+    return <OpenApplications remainingApplications={remainingApplications} />
+
+  if (currentCampaign.mode === 'preselections') {
+    return <ClosedApplications />
+  }
+  return null
+}
+
+export default ApplicationCompanyHelper

web/components/Account/Application/Company/ApplicationsHelpers/ClosedApplications.tsx

@@ -0,0 +1,38 @@
+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 ClosedApplications = () => {
+  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.closed_start`, {
+              title: currentCampaign.title,
+            })}
+          </Text>
+          <Text as="span" pl={1}>
+            {t('company.helper.closed_end', {
+              date: format(currentCampaign.preselection_end),
+            })}
+          </Text>
+        </Box>
+      </Stack>
+    </Box>
+  )
+}
+
+export default ClosedApplications

web/components/Account/Application/Company/ApplicationsHelpers/OpenApplications.tsx

@@ -0,0 +1,54 @@
+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 { format } from '~utils/date'
+import Link from '~components/Link'
+
+const OpenApplications = ({
+  remainingApplications,
+}: {
+  remainingApplications: 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">
+            {t(`company.helper.start${remainingApplications > 1 ? 's' : ''}`, {
+              num: remainingApplications,
+            })}
+          </Text>
+          <Text as="span" fontWeight="bold">
+            {t('company.helper.end', {
+              date: format(currentCampaign.application_end),
+            })}
+          </Text>
+        </Box>
+        <Button
+          as={Link}
+          href={ROUTE_PLACES + '?tab=1'}
+          colorScheme="blue"
+          size="lg"
+          whiteSpace={'break-spaces'}
+          textAlign="center"
+        >
+          {t('company.helper.cta')}
+        </Button>
+      </Stack>
+    </Box>
+  )
+}
+
+export default OpenApplications

web/components/Account/Application/Place/SelectionHelpers/ValidatedSelections.tsx

@@ -1,5 +1,5 @@
 import { Box, HStack, Text } from '@chakra-ui/react'
-import PreselectionsValidated from 'public/assets/img/PreselectionsValidated.svg'
+import PreselectionsValidated from 'public/assets/img/preselectionsValidated.svg'
 import { useTranslation } from 'next-i18next'
 
 const ValidatedSelections = () => {

web/components/Account/Application/Place/ApplicationSelector.tsx → web/components/Account/Application/Place/Selectors/ApplicationSelector.tsx

@@ -1,6 +1,7 @@
 import { HStack, Select } from '@chakra-ui/react'
 import { useRouter } from 'next/router'
 import { useEffect, useMemo, useState } from 'react'
+import SelectMenu from '~components/Account/Application/Place/Selectors/SelectMenu'
 import useCampaignContext from '~components/Campaign/useCampaignContext'
 import { ROUTE_ACCOUNT_APPLICATIONS } from '~constants'
 import { Espace } from '~typings/api'
@@ -54,7 +55,23 @@ const ApplicationSelector = ({ places }: { places: Espace[] }) => {
   const dispoOptions = useMemo(() => getDispoOptions(espace), [espace])
 
   return (
-    <HStack paddingY={4}>
+    <HStack paddingBottom={4}>
+      <SelectMenu
+        options={places.map((place) => ({
+          value: place.id,
+          label: place.name,
+        }))}
+        onChange={(data) => {
+          console.log(data)
+
+          // const disponibility = getDispoOptions(e.target.value)[0]?.id
+          // router.push({
+          //   pathname: router.pathname,
+          //   query: { espace: e.target.value, disponibility },
+          // })
+        }}
+        value={espace as string}
+      />
       <Select
         width="auto"
         borderRadius="18px"

web/components/Account/Application/Place/Selectors/SelectMenu.tsx

@@ -0,0 +1,44 @@
+import { useTranslation } from 'next-i18next'
+import Select from 'react-select'
+
+const colourStyles = {
+  container: (styles) => ({
+    ...styles,
+    width: '100%',
+  }),
+  valueContainer: (styles) => ({
+    ...styles,
+    padding: '2px 8px 2px 3px',
+  }),
+  control: (styles, state) => ({
+    ...styles,
+    backgroundColor: 'white',
+    width: '100%',
+  }),
+}
+
+const SelectMenu = ({
+  options = [],
+  onChange,
+  value,
+}: {
+  options: any
+  onChange: any
+  value: string
+}) => {
+  const { t } = useTranslation('application')
+  return (
+    <Select
+      name="colors"
+      placeholder={t('search')}
+      options={options}
+      className="basic-multi-select"
+      classNamePrefix="select"
+      styles={colourStyles}
+      onChange={onChange}
+      value={value}
+    />
+  )
+}
+
+export default SelectMenu

web/pages/compte/candidatures/index.tsx

@@ -6,11 +6,13 @@ import { requireAuth } from '~utils/auth'
 import { NextSeo } from 'next-seo'
 import { useTranslation } from 'next-i18next'
 import useCampaignContext from '~components/Campaign/useCampaignContext'
-import { Flex, Text } from '@chakra-ui/react'
-import ApplicationSelector from '~components/Account/Application/Place/ApplicationSelector'
+import { Box, Flex, HStack, Text } from '@chakra-ui/react'
+import ApplicationSelector from '~components/Account/Application/Place/Selectors/ApplicationSelector'
 import ApplicationPlaceData from '~components/Account/Application/Place/ApplicationPlaceData'
 import { useRouter } from 'next/router'
 import { useMyPlaces } from '~hooks/useMyPlaces'
+import PlacesAdminCampaignHelper from '~components/Campaign/Places/Admin/PlacesAdminCampaignHelper'
+import { format } from '~utils/date'
 
 const PlaceApplications = () => {
   const { t } = useTranslation('application')
@@ -41,6 +43,16 @@ const PlaceApplications = () => {
     return (
       <>
         <NextSeo title={tAccount('title.requests')} />
+        {currentCampaign?.mode === 'applications' && (
+          <Box paddingY={4}>
+            <PlacesAdminCampaignHelper
+              title={t(`place.helper.open_applications_start`, {
+                title: currentCampaign?.title,
+              })}
+              description={t(`place.helper.open_applications_end`)}
+            />
+          </Box>
+        )}
         <Flex
           alignItems="center"
           pt={{ base: 4, md: 8 }}
@@ -59,15 +71,17 @@ const PlaceApplications = () => {
           </Text>
         </Flex>
         {Boolean(places?.length) && (
-          <ApplicationSelector
-            places={places?.map((p) => ({
-              ...p,
-              disponibilities: p.disponibilities?.filter(
-                //@ts-expect-error
-                (d) => d.campaign === currentCampaign?.id,
-              ),
-            }))}
-          />
+          <HStack>
+            <ApplicationSelector
+              places={places?.map((p) => ({
+                ...p,
+                disponibilities: p.disponibilities?.filter(
+                  //@ts-expect-error
+                  (d) => d.campaign === currentCampaign?.id,
+                ),
+              }))}
+            />
+          </HStack>
         )}
 
         {Boolean(searchParams && Object.keys(searchParams)?.length) && (