Dev

package.json

@@ -22,6 +22,7 @@
     "mapbox-gl": "^3.1.2",
     "mui": "^0.0.1",
     "react": "^18.2.0",
+    "react-cookie-consent": "^9.0.0",
     "react-dom": "^18.2.0",
     "react-hook-form": "^7.50.1",
     "react-redux": "^9.0.4",

src/App.tsx

@@ -2,16 +2,19 @@ import { Box, Stack } from '@mui/material'
 import { Outlet } from 'react-router-dom'
 import Header from './features/common/layout/Header'
 import Footer from './features/common/layout/Footer'
+import CookieConsentComponent from './features/legal/CookieConsent'
 
 function App() {
 
   return (
     <Stack>
       <Header />
+      <CookieConsentComponent/>
       <Box minHeight={"95vh"}>
         <Outlet />
       </Box>
       <Footer />
+
     </Stack>
   )
 }

src/assets/images.tsx

@@ -15,7 +15,20 @@ export const internalImages = {
     langEn: { url: "language/flag_EN.png", alt: "" },
     genericCity: { url: "generic_city.png", alt: "" },
     manWithMap: {url: "man_with_map.png", alt: "man looking at map"},
-    manStanding: {url: "man_standing_trans.png", alt: "man standing looking left"}
+    manStanding: {url: "man_standing_trans.png", alt: "man standing looking left"},
+    manStandingRight: {url: "man_standing_looking_right.png", alt: "man standing looking right"},
+    happyLawyer: {url: "happy_lawyer.png", alt: "man with papers smiling"},
+    coupleWithSuitcase1: {url: "couple_with_suitcase_1.png", alt: "a couple holding suitcases smiling"},
+    cityscape1: {url: "places/cityscape_1.png", alt: "A generic european cityscape"},
+    cityscape2: {url: "places/cityscape_2.png", alt: "A generic european cityscape"},
+    trainStation1: {url: "places/train_station_1.png", alt: "A smiling woman in a 1960's train station"},
+    trainStation2: {url: "places/train_station_2.png", alt: "A 1960's train station"},
+    airport1: {url: "places/airport_1.png", alt: "A woman overlooking an airport with mountains in the background"},
+    airport2: {url: "places/airport_2.png", alt: "A woman overlooking an airport with mountains in the background"},
+    port1: {url: "places/port_1.png", alt: "A generic european port"},
+    port2: {url: "places/port_2.png", alt: "A generic european port"},
+    busStation1: {url: "places/bus_station_1.png", alt: "A generic european bus station"},
+    busStation2: {url: "places/bus_station_2.png", alt: "A generic european bus station"},
 }
 
 export type InternalImage = keyof typeof internalImages;

src/features/common/ContainerWithImage.tsx

@@ -0,0 +1,65 @@
+import { useMemo } from "react";
+import { Box, BoxProps } from "@mui/material";
+import { InternalImage, getInternalImageUrl } from "../../assets/images";
+
+
+
+type ContainerWithImage = BoxProps & {
+    url: InternalImage;
+    blur?: number;
+}
+
+export default function ContainerWithImage({ url, blur, ...props }: ContainerWithImage) {
+
+    const style = useMemo(() => ({
+        backgroundImage: `url(${getInternalImageUrl(url)})`,
+        backgroundSize: 'cover',
+        backgroundRepeat: 'no-repeat',
+        backgroundPosition: 'center',
+        filter: `blur(${blur ?? 0}px)`,
+        position: "absolute",
+        left: 0,
+        right: 0,
+        top: 0,
+        bottom: 0,
+        zIndex: 1
+    }), [url, blur])
+
+    const { children, ...boxProps } = props
+
+    return (
+        <Box sx={{ position: "relative", overflow: "hidden" }} {...boxProps}>
+            <Box sx={styles.childBox}>
+                {children}
+            </Box>
+            <Box sx={style}>
+            </Box>
+        </Box>
+    )
+}
+
+const styles = {
+    childBox: {
+        position: "absolute",
+        left: 0,
+        right: 0,
+        top: 0,
+        bottom: 0,
+        display: "flex",
+        justifyContent: "center",
+        alignItems: "center",
+        "& > *": { position: 'relative', zIndex: 4 }
+    },
+    creditBox: {
+        color: "white",
+        position: "absolute",
+        alignItems: "center",
+        justifyContent: "right",
+        flexWrap: "wrap",
+        right: 0,
+        bottom: 0,
+        zIndex: 3,
+        px: .5,
+        userSelect: "none"
+    }
+}

src/features/common/InfoPopover.tsx

@@ -0,0 +1,60 @@
+import { Close, HelpOutline } from "@mui/icons-material";
+import { Box, Tooltip, IconButton, Popover, Typography, BoxProps, Stack } from "@mui/material";
+import { useState } from "react";
+
+type InfoPopoverProps = BoxProps & {
+    helpTitle: string;
+    helpBody: string;
+}
+
+export default function InfoPopover({ helpBody, helpTitle, ...props }: InfoPopoverProps) {
+    const [anchorEl, setAnchorEl] = useState<HTMLButtonElement | null>(null);
+    const handleClick = (event: React.MouseEvent<HTMLButtonElement>) => {
+        setAnchorEl(event.currentTarget);
+    };
+
+    const handleClose = () => {
+        setAnchorEl(null);
+    };
+
+    return (
+        <Box sx={{
+            ...props.sx,
+            width: "fit-content",
+            height: "fit-content"
+        }} {...props}>
+            <Tooltip title={helpTitle}>
+                <IconButton onClick={handleClick} color="info" sx={{ color: "white" }}>
+                    <HelpOutline />
+                </IconButton>
+            </Tooltip>
+            <Popover
+                id={Boolean(anchorEl) ? `popover-${Math.random()}` : undefined}
+                open={Boolean(anchorEl)}
+                anchorEl={anchorEl}
+                onClose={handleClose}
+                sx={{ maxWidth: 1000, pt: 25, }}
+            >
+                <Stack sx={{ minWidth: 500 }}>
+                    <Box sx={styles.closeButton}>
+                        <Typography variant="h6">{helpTitle}</Typography>
+                        <IconButton onClick={handleClose} >
+                            <Close />
+                        </IconButton>
+                    </Box>
+                    <Typography sx={{ px: 1, pb: 1 }} variant="body1">{helpBody}</Typography>
+                </Stack>
+
+            </Popover>
+
+        </Box>
+    )
+}
+
+const styles = {
+    closeButton: {
+        justifyContent: "space-between",
+        display: "flex",
+        p: 1,
+    }
+}

src/features/common/SearchItemType.ts

@@ -8,7 +8,7 @@ export enum SearchItemType {
     TRAIN_STATION = "TRAIN_STATION"
 }
 
-export const searchItemTypeToMapPointType: {[key in SearchItemType]: MapPointType} = {
+export const searchItemTypeToMapPointType: { [key in SearchItemType]: MapPointType } = {
     [SearchItemType.AIRPORT]: MapPointType.AIRPORT,
     [SearchItemType.BUS_STATION]: MapPointType.BUS_STATION,
     [SearchItemType.CITY]: MapPointType.SEARCH_ITEM,
@@ -17,26 +17,26 @@ export const searchItemTypeToMapPointType: {[key in SearchItemType]: MapPointTyp
 }
 
 
-export const searchItemTypeToMapPointTypeConnection: {[key in SearchItemType]: MapPointType} = {
+export const searchItemTypeToMapPointTypeConnection: { [key in SearchItemType]: MapPointType } = {
     [SearchItemType.AIRPORT]: MapPointType.AIRPORT_CONNECTION,
     [SearchItemType.BUS_STATION]: MapPointType.BUS_STATION_CONNECTION,
     [SearchItemType.CITY]: MapPointType.SEARCH_ITEM_CONNECTION,
     [SearchItemType.TRAIN_STATION]: MapPointType.TRAIN_STATION_CONNECTION,
     [SearchItemType.PORT]: MapPointType.PORT_CONNECTION,
 }
 
-export const mapPointTypeToSearchItemType: {[key in Partial<MapPointType>]: SearchItemType} = {
+export const mapPointTypeToSearchItemType: { [key in Partial<MapPointType>]: SearchItemType } = {
     [MapPointType.AIRPORT]: SearchItemType.AIRPORT,
     [MapPointType.BUS_STATION]: SearchItemType.BUS_STATION,
     [MapPointType.SEARCH_ITEM]: SearchItemType.CITY,
     [MapPointType.TRAIN_STATION]: SearchItemType.TRAIN_STATION,
     [MapPointType.PORT]: SearchItemType.PORT,
-    [MapPointType.ORIGIN]:SearchItemType.CITY,
-    [MapPointType.DESTINATION]:SearchItemType.CITY,
-    [MapPointType.INTERMEDIATE]:SearchItemType.CITY,
-    [MapPointType.PORT_CONNECTION]:SearchItemType.CITY,
-    [MapPointType.AIRPORT_CONNECTION]:SearchItemType.CITY,
-    [MapPointType.BUS_STATION_CONNECTION]:SearchItemType.CITY,
-    [MapPointType.TRAIN_STATION_CONNECTION]:SearchItemType.CITY,
-    [MapPointType.SEARCH_ITEM_CONNECTION]:SearchItemType.CITY
+    [MapPointType.ORIGIN]: SearchItemType.CITY,
+    [MapPointType.DESTINATION]: SearchItemType.CITY,
+    [MapPointType.INTERMEDIATE]: SearchItemType.CITY,
+    [MapPointType.PORT_CONNECTION]: SearchItemType.PORT,
+    [MapPointType.AIRPORT_CONNECTION]: SearchItemType.AIRPORT,
+    [MapPointType.BUS_STATION_CONNECTION]: SearchItemType.BUS_STATION,
+    [MapPointType.TRAIN_STATION_CONNECTION]: SearchItemType.TRAIN_STATION,
+    [MapPointType.SEARCH_ITEM_CONNECTION]: SearchItemType.CITY
 }

src/features/common/layout/Footer.tsx

@@ -39,7 +39,8 @@ export default function Footer() {
                         <Image url="shortLogo" height={100} />
                     </Grid>
                     <Grid item>
-                        <Typography variant="caption">Wander by Way ©2024 {environment}</Typography>
+                        <Typography variant="caption">Wander by Way ©2024</Typography>
+                        {environment === "DEV" && <Typography variant="caption">{environment}</Typography>}
                     </Grid>
                 </Grid>
             </Grid>

src/features/common/layout/Header.tsx

@@ -1,23 +1,23 @@
 import { Box, Divider, Grid, Typography } from "@mui/material";
 import LanguageButton from "../../../translations/LanguageButton";
 import { useBreakPoint } from "../../../useBreakpoint";
-
+import { NavLink } from "react-router-dom";
+import { endPoints } from "../../../main";
 
 const small = ["sx", "sm"]
 
 export default function Header() {
     const breakPoint = useBreakPoint();
     return (
-        <Box my={2} >
+        <Box my={2} mx={2}>
             <Grid container direction={small.includes(breakPoint) ? "column-reverse" : "row"}>
                 <Grid item xs={12} sm={6} textAlign={small.includes(breakPoint) ? "center" : "left"}>
-                    <Typography variant="h4">Wander By Way</Typography>
+                    <Typography variant="h4" component={NavLink} to={endPoints.home.entrypoint} sx={{textDecoration: "none", color: "black"}}>Wander By Way</Typography>
                 </Grid>
                 <Grid display={"flex"} item xs={12} sm={6} justifyContent={"right"}>
                     <LanguageButton />
                 </Grid>
             </Grid>
-
             <Divider />
         </Box>
     )