add footer on public pages

frontend/app/src/domains/commons/components/Footer.css

@@ -0,0 +1,30 @@
+.footer {
+    font-size: 0.8rem;
+    background-color: black;
+    color: gray;
+    display: grid;
+    grid-template-columns: repeat(auto-fill, minmax(300px, max-content));
+    justify-content: space-around;
+    margin-top: 5rem;
+    padding: 1rem;
+  }
+
+  .footer a {
+    color: gray;
+    cursor: pointer;
+    text-decoration: underline;
+  }
+
+  .footer-item {
+    margin-bottom: 1rem;
+  }
+
+  .footer-contact {
+    display: inline-flex;
+    align-items: center;
+  }
+
+  .footer-contact img {
+    filter: contrast(0.1);
+    height: 1.4rem;
+  }

frontend/app/src/domains/commons/components/Footer.tsx

@@ -0,0 +1,52 @@
+import React, { useEffect, useState } from "react"
+import './Footer.css'
+import contact from '../../../resources/images/contact.svg'
+import { UrlService } from "../service/UrlService.ts"
+import GeneralTermsAndConditions from "./GeneralTermsAndConditions.tsx"
+
+export default function Footer() {
+    const [customerFrontendUrl, setCustomerFrontendUrl] = useState<String | undefined>(undefined)
+    const [producerFrontendUrl, setProducerFrontendUrl] = useState<String | undefined>(undefined)
+    const [generalTermsAndConditionsShown, setGeneralTermsAndConditionsShown] = useState<boolean>(false)
+
+    useEffect(() => {
+        const loadUrls = async () => {
+            const urlService = new UrlService()
+            setCustomerFrontendUrl(await urlService.getCustomerFrontentUrl())
+            setProducerFrontendUrl(await urlService.getProducerFrontentUrl())
+        }
+        loadUrls()
+    })
+
+    function displayGeneralTermsAndConditions() {
+        if (generalTermsAndConditionsShown) {
+            return <GeneralTermsAndConditions closeCallback={() => setGeneralTermsAndConditionsShown(false)}/>
+        }
+        return <></>
+    }
+
+    return <>
+        <div className="footer">
+            <div>
+                <div className="footer-item"><a onClick={() => setGeneralTermsAndConditionsShown(true)}>Conditions générales de vente</a></div>
+                <div className="footer-item"><a href={customerFrontendUrl}>Espace clients</a></div>
+                <div className="footer-item"><a href={producerFrontendUrl}>Espace éleveurs</a></div>
+            </div>
+            <div className="footer-item">
+                <div>SAS ESTEBEN</div>
+                <div>5 rue des Marronniers 57580 BECHY</div>
+                <div>Email : <a href="mailto:[email protected]">[email protected]</a></div>
+                <div className="footer-contact">
+                <div>Téléphone : </div>
+                <img src={contact}/>
+                </div>
+                <div>Siren : 901293399</div>
+                <div>N° TVA : FR6890129339900019</div>
+            </div>
+            <div className="footer-item">
+                <div>Icones par <a href="https://www.flaticon.com/authors/freepik" title="Freepik">Freepik</a> sur <a href="https://www.flaticon.com/" title="Flaticon">www.flaticon.com</a></div>
+            </div>
+        </div>
+        {displayGeneralTermsAndConditions()}
+    </>
+}

frontend/app/src/domains/commons/components/GeneralTermsAndConditions.tsx

@@ -0,0 +1,67 @@
+import React, { useState } from "react"
+import { Button, Dialog, DialogActions, DialogContent, DialogContentText, DialogTitle } from "@mui/material";
+
+export default function GeneralTermsAndConditions({closeCallback: closeCallback}) {
+
+  return <>
+    <Dialog
+      fullScreen
+      open
+      onClose={closeCallback}
+      aria-labelledby="responsive-dialog-title"
+    >
+      <DialogTitle id="responsive-dialog-title">Conditions générales d'utilisation</DialogTitle>
+      <DialogContent>
+        <DialogContentText>
+          <h2>Description du service</h2>
+          <div>
+            ViandeEnDirect.eu est un service de vente et de livraison de produits alimentaires fermiers.
+          </div>
+
+          <h2>Livraison de la marchandise</h2>
+          <div>
+            La livraison de la marchandise est faite au lieu et à la date définie lors de la commande sur le site ViandeEnDirect.eu.
+
+            Le vendeur et client s'engagent à se présenter au rendez-vous de livraison à l'adresse, à la date et aux horaires indiqués lors de la commande.
+            <ul>
+              <li>
+                Si le client ne se présente au rendez-vous de livraison, la marchandise sera acheminée chez le vendeur et congelée.
+                Le client pourra se rendre à l'adresse du vendeur pour récupérer sa marchandise jusqu'à 48h après le rendez-vous de livraison.
+                Au delà du délai de 48h, la vente sera annulée, le montant d'achat sera remboursé à hauteur de 50%.
+              </li>
+              <li>
+                Si le vendeur ne se présente pas au rendez-vous de livraison, il s'engage à prévenir le client pour convenir d'un autre rendez-vous de livraison.
+              </li>
+            </ul>
+          </div>
+
+          <h2>Réglement</h2>
+          <div>
+            Sauf mention explicite sur la présentation du produit, toute commande ne sera validée qu'après le réglement de la commande sur le site ViandeEnDirect.eu.
+          </div>
+
+          <h2>Respect de la chaîne du froid</h2>
+          <div>
+            Pour les produits frais vendus sur ViandeEnDirect.eu :
+            <ul>
+              <li>Le vendeur s'engage à respecter la chaîne du froid de la production à la livraison de la marchandise.</li>
+              <li>Le client s'engage à respecter la chaîne du froid dès réception de la marchandise et jusqu'à sa consommation.</li>
+            </ul>
+          </div>
+
+          <h2>Aucun retour de marchandise</h2>
+          <div>
+            Après réception de la marchandise par le client, tout retour de la marchandise au vendeur est impossible.
+          </div>
+
+
+        </DialogContentText>
+      </DialogContent>
+      <DialogActions>
+        <Button autoFocus onClick={closeCallback}>
+          Fermer
+        </Button>
+      </DialogActions>
+    </Dialog>
+  </>
+}

frontend/app/src/domains/welcome/Welcome.tsx

@@ -1,5 +1,4 @@
 import React from 'react'
-import { useEffect, useState } from 'react'
 
 import { AppBar, Box, CssBaseline, Toolbar, Typography } from '@mui/material'
 

frontend/app/src/layouts/customer/CustomerLayout.tsx

@@ -8,6 +8,7 @@ import { Login, Logout } from '@mui/icons-material'
 import { Navigate, Outlet, useLoaderData, useNavigate } from 'react-router-dom'
 import { ApiBuilder } from '../../api/ApiBuilder.ts'
 import { UrlService } from '../../domains/commons/service/UrlService.ts'
+import Footer from '../../domains/commons/components/Footer.tsx'
 
 
 export default function CustomerLayout() {
@@ -47,23 +48,26 @@ export default function CustomerLayout() {
     }
 
     return (
-        <Box sx={{ display: 'flex' }}>
-            <CssBaseline />
-            <AppBar
-                position="fixed"
-                sx={{
-                    zIndex: (theme) => theme.zIndex.drawer + 1,
-                }}
-            >
-                <Toolbar>
-                    <Typography variant="h5" component="div" sx={{ flexGrow: 1 }}>
-                        Viande en direct
-                    </Typography>
-                    {displayAuthenticationButton()}
-                </Toolbar>
-            </AppBar>
-            <Outlet/>
-        </Box>
+        <>
+            <Box sx={{ display: 'flex' }}>
+                <CssBaseline />
+                <AppBar
+                    position="fixed"
+                    sx={{
+                        zIndex: (theme) => theme.zIndex.drawer + 1,
+                    }}
+                >
+                    <Toolbar>
+                        <Typography variant="h5" component="div" sx={{ flexGrow: 1 }}>
+                            Viande en direct
+                        </Typography>
+                        {displayAuthenticationButton()}
+                    </Toolbar>
+                </AppBar>
+                <Outlet/>
+            </Box>
+            <Footer/>
+        </>
     )
 }
 

frontend/app/src/layouts/producer/AnonymousLayout.tsx

@@ -3,6 +3,7 @@ import { AppBar, Box, Typography, CssBaseline, Toolbar, Grid, Paper, Button } fr
 import { useKeycloak } from '@react-keycloak/web'
 import React from 'react';
 import { Navigate } from 'react-router-dom';
+import Footer from '../../domains/commons/components/Footer.tsx';
 
 export default function AnonymousLayout() {
 
@@ -61,6 +62,7 @@ export default function AnonymousLayout() {
                 </Grid>
 
             </Box>
+            <Footer/>
         </Box>
     }