Feat/application form fix (#85)

* Clean logs

* Application form fix

web/components/Account/Place/ListItem/PlaceListItem.tsx

@@ -22,7 +22,7 @@ interface Props {
 
 const PlaceListItem = ({ place, setVisible, isFirst }: Props) => {
   const isComplete = useIsComplete(place)
-  const { currentCampaign } = useCampaignContext()
+  const { currentCampaign, isCampaignPlace } = useCampaignContext()
 
   useEffect(() => {
     if (!isComplete) {
@@ -32,7 +32,8 @@ const PlaceListItem = ({ place, setVisible, isFirst }: Props) => {
 
   const { campaignDisposNum } = useCampaignDispo(place?.disponibilities)
   const showCampaignDisponibilities =
-    currentCampaign?.mode === 'disponibilities' || campaignDisposNum
+    (currentCampaign?.mode === 'disponibilities' || campaignDisposNum) &&
+    isCampaignPlace
 
   return (
     <Flex

web/components/Campaign/CampaignProvider.tsx

@@ -111,11 +111,13 @@ const CampaignProvider = ({ children }: ICampaignProvider) => {
   )
 
   const currentCampaign = activeCampaigns?.[0]
+
   const isCampaignPlace =
     user?.type === 'place' &&
     Boolean(
       currentCampaign?.users_permissions_users.find((el) => el.id === user?.id),
     )
+
   const hasActiveCampaign =
     (currentCampaign?.mode === 'disponibilities' && isCampaignPlace) ||
     currentCampaign?.mode === 'applications'

web/components/Campaign/CampaignTag.tsx

@@ -43,7 +43,7 @@ const CampaignTag = ({
       </Box>
     )
   }
-  console.log(hasCampaignDispo && !isCampaignTab)
+
   if (hasCampaignDispo && !isCampaignTab) {
     return (
       <Box position={isGrid ? 'relative' : undefined}>

web/components/Campaign/Places/Application/ApplicationConfirmed.tsx

@@ -10,9 +10,12 @@ import {
 import Link from '~components/Link'
 import { useTranslation } from 'next-i18next'
 import { ROUTE_ACCOUNT_MY_APPLICATIONS } from '~constants'
+import useCampaignContext from '~components/Campaign/useCampaignContext'
+import { format } from '~utils/date'
 
-const ApplicationConfirmed = ({ structureName }) => {
+const ApplicationConfirmed = () => {
   const { t } = useTranslation('place')
+  const { currentCampaign } = useCampaignContext()
 
   return (
     <Flex maxW="38rem" m="0 auto" direction="column" px={3}>
@@ -21,7 +24,12 @@ const ApplicationConfirmed = ({ structureName }) => {
       </Heading>
       <Text mb={{ base: 6, md: 14 }}>
         {t('campaignApplication.confirmed.text', {
-          place: structureName,
+          campaign: currentCampaign?.title,
+          preselection_start: format(
+            currentCampaign?.preselection_start,
+            'dd/MM',
+          ),
+          preselection_end: format(currentCampaign?.preselection_end, 'dd/MM'),
         })}
       </Text>
       <Center>

web/components/Campaign/Places/Application/ApplicationCreation.tsx

@@ -32,6 +32,7 @@ const ApplicationCreation = () => {
         helper={t('campaignApplication.creation.file_helper')}
         acceptableTypes={['application/pdf']}
         maxSize={5}
+        cta={t('campaignApplication.creation.file_cta')}
       />
 
       <TextAreaField

web/components/Campaign/Places/Application/ApplicationEligibility.tsx

@@ -1,4 +1,4 @@
-import { VStack, Text, Button } from '@chakra-ui/react'
+import { VStack, Text, Button, Box } from '@chakra-ui/react'
 import Link from '~components/Link'
 import ApplicationFormTitle from '~components/Campaign/Places/Application/ApplicationFormTitle'
 import useCampaignContext from '~components/Campaign/useCampaignContext'
@@ -12,35 +12,64 @@ const ApplicationEligibility = () => {
 
   return (
     <VStack width="100%" alignItems="stretch" spacing={8}>
-      <ApplicationFormTitle
-        title={t('campaignApplication.eligibility.title')}
-        position="4."
-      />
+      {currentCampaign?.eligibility && (
+        <>
+          <ApplicationFormTitle
+            title={t('campaignApplication.eligibility.title')}
+            position="4."
+          />
 
-      {currentCampaign?.chart_url && (
-        <Text>
-          <Text as="span">
-            {t('campaignApplication.eligibility.chart_front')}
-          </Text>
-          <Button
-            as={Link}
-            pl={1}
-            href={currentCampaign?.chart_url}
-            variant="lineBlue"
-          >
-            {t('campaignApplication.eligibility.chart')}
-          </Button>
-          <Text as="span" pl={1}>
-            {t('campaignApplication.eligibility.chart_back')}
-          </Text>
-        </Text>
-      )}
+          {currentCampaign?.chart_url && (
+            <Text>
+              <Text as="span">
+                {t('campaignApplication.eligibility.chart_front')}
+              </Text>
+              <Button
+                as={Link}
+                pl={1}
+                href={currentCampaign?.chart_url}
+                variant="lineBlue"
+              >
+                {t('campaignApplication.eligibility.chart')}
+              </Button>
+              <Text as="span" pl={1}>
+                {t('campaignApplication.eligibility.chart_back')}
+              </Text>
+            </Text>
+          )}
 
-      <MarkdownRenderer>{currentCampaign?.eligibility}</MarkdownRenderer>
+          <MarkdownRenderer>{currentCampaign?.eligibility}</MarkdownRenderer>
+        </>
+      )}
 
       <CheckboxField
         name="eligibility"
-        label={t('campaignApplication.eligibility.label')}
+        label={
+          <Box>
+            <Text as="span">
+              {t(
+                currentCampaign?.eligibility
+                  ? 'campaignApplication.eligibility.label_start'
+                  : 'campaignApplication.eligibility.no_eligibility_label_start',
+              )}
+            </Text>
+
+            <Text
+              color="blue.500"
+              as={Link}
+              target="_blank"
+              textDecoration="underline"
+              href={currentCampaign?.chart_url}
+            >
+              {t('campaignApplication.eligibility.label_cgu')}
+            </Text>
+            <Text as="span" pl={1}>
+              {t('campaignApplication.eligibility.label_end', {
+                title: currentCampaign?.title,
+              })}
+            </Text>
+          </Box>
+        }
       />
     </VStack>
   )

web/components/Campaign/Places/Application/ApplicationForm.tsx

@@ -136,7 +136,7 @@ const ApplicationForm = ({
             >
               <Text>
                 {t('campaignApplication.confirm', {
-                  place: currentCampaign?.title,
+                  place: place?.users_permissions_user?.structureName,
                 })}
               </Text>
 

web/components/Campaign/Places/Application/ApplicationGeneral.tsx

@@ -1,13 +1,11 @@
-import { VStack, Text, Box, Textarea } from '@chakra-ui/react'
+import { VStack } from '@chakra-ui/react'
 import { useTranslation } from 'next-i18next'
 import ApplicationFormTitle from '~components/Campaign/Places/Application/ApplicationFormTitle'
 import BooleanField from '~components/Campaign/Places/Application/Inputs/BooleanField'
 import TextAreaField from '~components/Campaign/Places/Application/Inputs/TextAreaField'
-import useCampaignContext from '~components/Campaign/useCampaignContext'
 import { Espace } from '~typings/api'
 
 const ApplicationGeneral = ({ place }: { place: Espace }) => {
-  const { currentCampaign } = useCampaignContext()
   const { t } = useTranslation('place')
   return (
     <VStack width="100%" alignItems="stretch" spacing={6}>
@@ -18,7 +16,7 @@ const ApplicationGeneral = ({ place }: { place: Espace }) => {
 
       <BooleanField
         label={t('campaignApplication.general.subtitle', {
-          place: place?.name,
+          place: place.users_permissions_user.structureName,
         })}
         name="already_supported"
       />

web/components/Campaign/Places/Application/CampaignApplicationPopin.tsx

@@ -20,12 +20,7 @@ const CampaignApplicationPopin = ({ events, place, back }: Props) => {
   const [isConfirmed, setConfirmed] = useState(false)
   const { t } = useTranslation('place')
 
-  if (isConfirmed)
-    return (
-      <ApplicationConfirmed
-        structureName={place.users_permissions_user.structureName}
-      />
-    )
+  if (isConfirmed) return <ApplicationConfirmed />
 
   return (
     <Box

web/components/Campaign/Places/Application/CampaignApplicationSchedule.tsx

@@ -56,7 +56,7 @@ const CampaignApplicationSchedule = ({
               />
             ))}
           </VStack>
-          <BookingRecap />
+          <BookingRecap isCampaignMode />
         </VStack>
 
         <VStack

web/components/Campaign/Places/Application/CampaignApplicationScheduleItem.tsx

@@ -78,7 +78,6 @@ const CampaignApplicationScheduleItem = ({
   )
 
   const handleClick = (e) => {
-    console.log('click')
     if (isSelected) {
       setSelected(
         //@ts-expect-error

web/components/Campaign/Places/Application/Inputs/CheckboxField.tsx

@@ -1,4 +1,4 @@
-import { Checkbox, InputProps } from '@chakra-ui/react'
+import { Box, Checkbox, InputProps } from '@chakra-ui/react'
 import { useController, useFormContext } from 'react-hook-form'
 import { ReactNode } from 'react-markdown'
 import FormField from '~components/FormField'
@@ -7,7 +7,7 @@ const CheckboxField = ({
   label,
   name,
   ...props
-}: { label: string; name: string } & InputProps) => {
+}: { label: string | ReactNode; name: string } & InputProps) => {
   const { errors, control } = useFormContext()
 
   const { field } = useController({
@@ -25,9 +25,14 @@ const CheckboxField = ({
         onChange={onChange}
         value={field?.value}
         color={errors[name] ? 'red.500' : undefined}
+        display="flex"
+        alignItems={'flex-start'}
+        flexDir="row"
         {...props}
       >
-        {label}
+        <Box pl={2} flex={1} mt={-1}>
+          {label}
+        </Box>
       </Checkbox>
     </FormField>
   )