Skip to content

Commit

Permalink
List spaces with campaign disponibilities
Browse files Browse the repository at this point in the history
  • Loading branch information
Lucieo committed Feb 7, 2024
1 parent 36046ad commit 357d8a1
Show file tree
Hide file tree
Showing 19 changed files with 526 additions and 292 deletions.
Original file line number Diff line number Diff line change
Expand Up @@ -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",
Expand Down
35 changes: 35 additions & 0 deletions web/components/Campaign/CampaignHelper.tsx
Original file line number Diff line number Diff line change
@@ -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
3 changes: 2 additions & 1 deletion web/components/Campaign/CampaignProvider.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -22,7 +22,8 @@ const CampaignProvider = ({ children }: ICampaignProvider) => {
useEffect(() => {
if (Boolean(campaigns?.length)) {
const activeCampaigns = campaigns?.map((campaign) => {
const mode = getCampaignMode(campaign)
// const mode = getCampaignMode(campaign)
const mode = 'applications'
const limitDate = getLimitDate(campaign, mode)
return { ...campaign, mode, limitDate }
})
Expand Down
5 changes: 3 additions & 2 deletions web/components/Campaign/HomeInsert/HomeCampaignInsert.tsx
Original file line number Diff line number Diff line change
@@ -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,
Expand All @@ -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"
Expand Down
55 changes: 24 additions & 31 deletions web/components/Home/HomePlaces.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -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'
Expand All @@ -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
Expand All @@ -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

Expand All @@ -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 }}>
Expand All @@ -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
Expand Down
5 changes: 3 additions & 2 deletions web/components/Home/HomeSearch.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -6,7 +6,6 @@ import {
Divider,
useTheme,
useBreakpointValue,
Tag,
VStack,
Stack,
HStack,
Expand All @@ -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()

Expand All @@ -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%">
Expand Down
22 changes: 20 additions & 2 deletions web/components/MobileMenu.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -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()
Expand All @@ -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',
Expand All @@ -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) {
Expand Down Expand Up @@ -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')} />
Expand Down
13 changes: 10 additions & 3 deletions web/components/Navigation/Header.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -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>
Expand Down
17 changes: 17 additions & 0 deletions web/components/Place/PlaceGridCard.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -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,
Expand All @@ -43,6 +46,13 @@ const PlaceGridCard = ({ place, searchParams }: Props) => {
disposInRange || place?.disponibilities,
)

const isCampaignPlace =
currentCampaign &&
place?.disponibilities?.some(
//@ts-expect-error
(d) => d?.campaign === currentCampaign?.id,
)

return (
<LinkBox>
<LinkOverlay
Expand All @@ -60,6 +70,13 @@ const PlaceGridCard = ({ place, searchParams }: Props) => {
h="100%"
id={`place-${place.id}`}
>
{isCampaignPlace && (
<Tag status="campaign">
{tCommon('campaign.partner', {
title: currentCampaign?.title,
})}
</Tag>
)}
<AspectRatio
w="100%"
maxH="250px"
Expand Down
17 changes: 13 additions & 4 deletions web/components/Place/PlaceSearch.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -19,34 +19,43 @@ import Pin from 'public/assets/img/pin-outline.svg'
import { useTranslation } from 'next-i18next'
import { useFormContext } from 'react-hook-form'
import { SurfaceOptions, HeightOptions } from '~utils/search'
import useCampaignContext from '~components/Campaign/useCampaignContext'

const selectProps = {
variant: 'unstyled',
h: '22px',
pl: 3,
}

const PlaceSearch = ({ onSubmit }) => {
const PlaceSearch = ({
onSubmit,
isCampaignTab,
}: {
onSubmit: any
isCampaignTab?: boolean
}) => {
const theme = useTheme()
const [isLoading, setLoading] = useState(false)
const [hasMoreFilters, setMoreFilter] = useState(false)
const { t } = useTranslation('place')
const form = useFormContext()
const isMobile = useBreakpointValue({ base: true, lg: false })
const city = form.watch('city')
const { currentCampaign } = useCampaignContext()

return (
<form onSubmit={form.handleSubmit(onSubmit)}>
<Flex
bgColor="blue.100"
bgColor={isCampaignTab ? 'campaign.light' : 'blue.100'}
px={{ base: 3, md: 5 }}
py={{ base: 4, md: 6 }}
borderRadius="md"
borderTopLeftRadius={currentCampaign ? 0 : 'md'}
position="relative"
zIndex={100}
mb={{ base: 0, sm: 10 }}
mt={6}
direction="column"
mt={currentCampaign ? 0 : 6}
>
<SimpleGrid columns={{ base: 1, md: 2, lg: 4 }} rowGap={0} w="100%">
<Flex
Expand Down Expand Up @@ -261,8 +270,8 @@ const PlaceSearch = ({ onSubmit }) => {
</Button>
<Button
type="submit"
colorScheme="blue"
size="lg"
variant={isCampaignTab ? 'campaign' : 'blueFill'}
// isDisabled={isDisabled}
isLoading={isLoading}
>
Expand Down
Loading

0 comments on commit 357d8a1

Please sign in to comment.