Disponibilities public listing (#48)

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/06/2024 10:37:22 AM"
+    "x-generation-date": "02/07/2024 10:13:36 AM"
   },
   "x-strapi-config": {
     "path": "/documentation",

web/components/Campaign/CampaignContext.tsx

@@ -15,10 +15,12 @@ export type ActiveCampaign = Campaign & {
 interface ICampaignContext {
   activeCampaigns?: ActiveCampaign[]
   currentCampaign?: ActiveCampaign
+  isLoading?: boolean
 }
 
 const CampaignContext = React.createContext<ICampaignContext>({
   activeCampaigns: undefined,
+  isLoading: false,
 })
 
 export default CampaignContext

web/components/Campaign/CampaignHelper.tsx

@@ -0,0 +1,35 @@
+import { HStack, Text, Flex, Button, StackProps } from '@chakra-ui/react'
+import { useTranslation } from 'next-i18next'
+import { ActiveCampaign } from '~components/Campaign/CampaignContext'
+
+const CampaignHelper = ({
+  campaign,
+  ...props
+}: { campaign?: ActiveCampaign } & StackProps) => {
+  const { t } = useTranslation('common')
+
+  return (
+    <HStack
+      backgroundColor={campaign ? 'campaign.light' : 'blue.200'}
+      borderRadius="sm"
+      paddingX={8}
+      paddingY={2}
+      marginBottom={4}
+      {...props}
+    >
+      <Text flex={4}>
+        <Text as="span" fontWeight="bold" marginRight={1}>
+          {campaign ? campaign?.title : t('solidarity.helper_title')}
+        </Text>
+        {campaign ? campaign.description : t('solidarity.helper')}
+      </Text>
+      <Flex flex={1} justifyContent="flex-end">
+        <Button variant={campaign ? 'campaign' : 'blueFill'}>
+          {t('show')}
+        </Button>
+      </Flex>
+    </HStack>
+  )
+}
+
+export default CampaignHelper

web/components/Campaign/CampaignProvider.tsx

@@ -17,12 +17,15 @@ const CampaignProvider = ({ children }: ICampaignProvider) => {
     }),
     [],
   )
-  const { data: campaigns } = useCampaigns(activeCampaignsQueryParameters)
+  const { data: campaigns, isLoading } = useCampaigns(
+    activeCampaignsQueryParameters,
+  )
 
   useEffect(() => {
     if (Boolean(campaigns?.length)) {
       const activeCampaigns = campaigns?.map((campaign) => {
         const mode = getCampaignMode(campaign)
+        // const mode = 'applications'
         const limitDate = getLimitDate(campaign, mode)
         return { ...campaign, mode, limitDate }
       })
@@ -72,6 +75,7 @@ const CampaignProvider = ({ children }: ICampaignProvider) => {
       value={{
         activeCampaigns,
         currentCampaign: activeCampaigns?.[0],
+        isLoading,
       }}
     >
       {children}

web/components/Campaign/HomeInsert/HomeCampaignInsert.tsx

@@ -1,9 +1,10 @@
-import { VStack, Text, Tag, Box, Button, Stack } from '@chakra-ui/react'
+import { VStack, Text, Box, Button, Stack } from '@chakra-ui/react'
 import Hands from 'public/assets/img/hands-outline.svg'
 import theme from '~theme'
 import { useTranslation } from 'next-i18next'
 import { ROUTE_ACCOUNT_PLACES, ROUTE_PLACES } from '~constants'
 import { CampaignMode } from '~components/Campaign/CampaignContext'
+import Tag from '~components/Tag'
 
 const HomeCampaignInsert = ({
   mode,
@@ -28,7 +29,7 @@ const HomeCampaignInsert = ({
       height="100%"
     >
       <VStack alignItems="flex-start" spacing={4}>
-        <Tag variant="campaign">{t('campaign.tag', { title })}</Tag>
+        <Tag status="campaign">{title}</Tag>
         <Stack
           paddingLeft={4}
           alignItems="flex-start"

web/components/Home/HomePlaces.tsx

@@ -6,7 +6,6 @@ import {
   Button,
   useBreakpointValue,
   HStack,
-  Tag,
 } from '@chakra-ui/react'
 import { useTranslation } from 'next-i18next'
 import Arrow from 'public/assets/img/arrow-bottom.svg'
@@ -16,6 +15,8 @@ import { ActiveCampaign } from '~components/Campaign/CampaignContext'
 import { format } from '~utils/date'
 import Link from '~components/Link'
 import { ROUTE_PLACES } from '~constants'
+import CampaignHelper from '~components/Campaign/CampaignHelper'
+import Tag from '~components/Tag'
 
 interface Props {
   campaign?: ActiveCampaign
@@ -29,11 +30,21 @@ const HomePlaces = ({ campaign }: Props) => {
     lg: true,
   })
   const { t } = useTranslation('home')
-  const { data: places } = usePlaces({
-    published_eq: true,
-    _limit: 20,
-    _sort: 'dispoAsc',
-  })
+  const { t: tCommon } = useTranslation('common')
+  const filters = campaign
+    ? {
+        'disponibilities.campaign': campaign?.id,
+      }
+    : {}
+  const { data: places } = usePlaces(
+    {
+      published_eq: true,
+      _limit: 20,
+      _sort: 'dispoAsc',
+      ...filters,
+    },
+    campaign && 'campaignPlaces',
+  )
 
   if (!places || places.length === 0) return null
 
@@ -44,38 +55,18 @@ const HomePlaces = ({ campaign }: Props) => {
           <Arrow />
         </Box>
         <Text textStyle="h2" mb={4} pl={3} lineHeight={1}>
-          {campaign
-            ? t('places.campaign.title', { title: campaign?.title })
-            : t('places.title')}
+          {campaign ? campaign?.title : t('places.title')}
         </Text>
         {campaign && (
-          <Tag variant="campaign">
-            {t('places.campaign.tag', {
+          <Tag status="campaign">
+            {tCommon('campaign.open', {
               date: format(new Date(campaign?.limitDate), 'd MMMM yyyy'),
             })}
           </Tag>
         )}
       </HStack>
 
-      <HStack
-        backgroundColor={campaign ? 'campaign.light' : 'blue.200'}
-        borderRadius="sm"
-        paddingX={8}
-        paddingY={2}
-        marginBottom={4}
-      >
-        <Text flex={4}>
-          <Text as="span" fontWeight="bold" marginRight={1}>
-            {campaign ? campaign?.title : t('places.solidarity.helper_title')}
-          </Text>
-          {campaign ? campaign.description : t('places.solidarity.helper')}
-        </Text>
-        <Flex flex={1} justifyContent="flex-end">
-          <Button variant={campaign ? 'campaign' : 'blueFill'}>
-            {t('places.show')}
-          </Button>
-        </Flex>
-      </HStack>
+      <CampaignHelper campaign={campaign} />
 
       <PlaceGrid places={places.slice(0, isLgOrSm ? 4 : 3)} />
       <Flex justifyContent="center" pt={10} pb={{ base: 6, md: 0 }}>
@@ -89,7 +80,9 @@ const HomePlaces = ({ campaign }: Props) => {
             color={'campaign.dark'}
             _hover={{ bg: 'campaign.light', textDecor: 'none' }}
           >
-            {t('places.campaign.cta', { title: campaign?.title })}
+            {t('places.campaign.cta', {
+              title: campaign?.title.toLowerCase(),
+            })}
           </Button>
         ) : (
           <Button

web/components/Home/HomeSearch.tsx

@@ -6,7 +6,6 @@ import {
   Divider,
   useTheme,
   useBreakpointValue,
-  Tag,
   VStack,
   Stack,
   HStack,
@@ -21,11 +20,13 @@ import { formatSearchToQuery } from '~utils/search'
 import { useTranslation } from 'next-i18next'
 import { useForm } from 'react-hook-form'
 import { useRouter } from 'next/router'
+import Tag from '~components/Tag'
 
 const HomeSearch = ({ hasActiveCampaign }: { hasActiveCampaign?: boolean }) => {
   const isMobile = useBreakpointValue({ base: true, md: false })
   const { control, handleSubmit } = useForm()
   const { t } = useTranslation('home')
+  const { t: tCommon } = useTranslation('common')
   const theme = useTheme()
   const router = useRouter()
 
@@ -50,7 +51,7 @@ const HomeSearch = ({ hasActiveCampaign }: { hasActiveCampaign?: boolean }) => {
     >
       {hasActiveCampaign && (
         <Box>
-          <Tag variant="blue">{t('solidarity.tag')}</Tag>
+          <Tag status="solidarity">{tCommon('solidarity.tag')}</Tag>
         </Box>
       )}
       <Box width="100%">

web/components/MobileMenu.tsx

@@ -30,6 +30,7 @@ import { useRouter } from 'next/router'
 import { useCurrentUser } from '~hooks/useCurrentUser'
 import Squares from 'public/assets/img/squares.svg'
 import AuthenticatedMenu from '~components/AuthenticatedMenu'
+import useCampaignContext from '~components/Campaign/useCampaignContext'
 
 const MenuItem = ({ href, text }) => {
   const router = useRouter()
@@ -42,7 +43,9 @@ const MenuItem = ({ href, text }) => {
       lineHeight="1.2"
       borderBottom="1px solid"
       borderBottomColor={
-        router.pathname === href ? 'orange.500' : 'transparent'
+        router.pathname === href || router?.asPath === href
+          ? 'orange.500'
+          : 'transparent'
       }
       _hover={{
         borderColor: 'orange.500',
@@ -62,6 +65,7 @@ const MobileMenu = ({ colorMode }: Props) => {
   const { t } = useTranslation('common')
   const { data: user } = useCurrentUser()
   const router = useRouter()
+  const { currentCampaign } = useCampaignContext()
 
   useEffect(() => {
     if (isOpen) {
@@ -102,7 +106,21 @@ const MobileMenu = ({ colorMode }: Props) => {
               flexDirection="column"
               py={6}
             >
-              <MenuItem href={ROUTE_PLACES} text={t('nav.places')} />
+              {currentCampaign?.mode === 'applications' ? (
+                <>
+                  <MenuItem
+                    href={`${ROUTE_PLACES}?tab=0`}
+                    text={t('nav.places_regular')}
+                  />
+                  <MenuItem
+                    href={`${ROUTE_PLACES}?tab=1`}
+                    text={t('nav.places_emergence')}
+                  />
+                </>
+              ) : (
+                <MenuItem href={ROUTE_PLACES} text={t('nav.places')} />
+              )}
+
               <MenuItem href={ROUTE_PROJECT} text={t('nav.project')} />
               <MenuItem href={ROUTE_ACTU} text={t('nav.news')} />
               <MenuItem href={ROUTE_FAQ} text={t('nav.faq')} />

web/components/Navigation/Header.tsx

@@ -76,13 +76,20 @@ const Header = ({ colorMode }: Props) => {
         >
           {currentCampaign?.mode === 'applications' ? (
             <Menu>
-              <MenuButton>{t('nav.places')}</MenuButton>
+              <MenuButton
+                display={{
+                  base: 'none',
+                  lg: 'block',
+                }}
+              >
+                {t('nav.places')}
+              </MenuButton>
               <Portal>
                 <MenuList rootProps={{ zIndex: 100 }}>
-                  <DropdownNavButton href={ROUTE_PLACES}>
+                  <DropdownNavButton href={`${ROUTE_PLACES}?tab=0`}>
                     {t('nav.places_regular')}
                   </DropdownNavButton>
-                  <DropdownNavButton href={ROUTE_PLACES}>
+                  <DropdownNavButton href={`${ROUTE_PLACES}?tab=1`}>
                     {t('nav.places_emergence')}
                   </DropdownNavButton>
                 </MenuList>

web/components/Place/PlaceGridCard.tsx

@@ -19,14 +19,17 @@ import { SearchQuery } from '~utils/search'
 import useDispoInRange from '~hooks/useDispoInRange'
 import useNbDispoPerWeek from '~hooks/useNbDispoPerWeek'
 import addWeeks from 'date-fns/addWeeks'
+import useCampaignContext from '~components/Campaign/useCampaignContext'
 
 interface Props {
   place: Espace
   searchParams?: SearchQuery
 }
 
 const PlaceGridCard = ({ place, searchParams }: Props) => {
+  const { currentCampaign } = useCampaignContext()
   const { t } = useTranslation('place')
+  const { t: tCommon } = useTranslation('common')
 
   const disposInRange = useDispoInRange(
     place?.disponibilities,
@@ -43,6 +46,13 @@ const PlaceGridCard = ({ place, searchParams }: Props) => {
     disposInRange || place?.disponibilities,
   )
 
+  const isCampaignPlace =
+    currentCampaign?.mode === 'applications' &&
+    place?.disponibilities?.some(
+      //@ts-expect-error
+      (d) => d?.campaign === currentCampaign?.id,
+    )
+
   return (
     <LinkBox>
       <LinkOverlay
@@ -60,6 +70,18 @@ const PlaceGridCard = ({ place, searchParams }: Props) => {
           h="100%"
           id={`place-${place.id}`}
         >
+          {isCampaignPlace && (
+            <Box position="relative">
+              <Tag
+                status="campaign"
+                style={{ position: 'absolute', top: 0, right: 0, zIndex: 2 }}
+              >
+                {tCommon('campaign.partner', {
+                  title: currentCampaign?.title,
+                })}
+              </Tag>
+            </Box>
+          )}
           <AspectRatio
             w="100%"
             maxH="250px"