update contact & FAQ loop compossent
This commit is contained in:
sebvtl728
@@ -1,32 +1,44 @@
|
||||
import React, { useState, useEffect } from "react";
|
||||
import { Box, TextField, Typography, Collapse } from "@mui/material";
|
||||
import { Box, TextField, Typography, Collapse, CircularProgress } from "@mui/material";
|
||||
import axios from "axios";
|
||||
|
||||
const Faq = ({ showFAQ }) => {
|
||||
const [faqSearch, setFaqSearch] = useState("");
|
||||
const [filteredFaqs, setFilteredFaqs] = useState([]);
|
||||
|
||||
const faqs = [
|
||||
{
|
||||
question: "Comment contacter notre service client ?",
|
||||
answer:
|
||||
"Vous pouvez nous appeler au +33 1 23 45 67 89 ou nous écrire via le formulaire de contact.",
|
||||
},
|
||||
{
|
||||
question: "Quels sont vos horaires d'ouverture ?",
|
||||
answer: "Nous sommes ouverts du lundi au vendredi de 9h00 à 18h00.",
|
||||
},
|
||||
{
|
||||
question: "Où êtes-vous situés ?",
|
||||
answer: "Notre adresse est 123 Rue Exemple, Paris, France.",
|
||||
},
|
||||
{
|
||||
question: "Proposez-vous des services personnalisés ?",
|
||||
answer: "Oui, contactez-nous pour discuter de vos besoins spécifiques.",
|
||||
},
|
||||
];
|
||||
const [faqs, setFaqs] = useState([]);
|
||||
const [loading, setLoading] = useState(true); // Ajout d'un état de chargement
|
||||
const [error, setError] = useState(null); // Ajout d'un état d'erreur
|
||||
|
||||
useEffect(() => {
|
||||
setFilteredFaqs(faqs);
|
||||
const fetchFaqs = async () => {
|
||||
try {
|
||||
// Requête pour récupérer les FAQs depuis l'API WordPress
|
||||
const response = await axios.get(
|
||||
"https://preprod.octopusdesign.fr/api-octopus/server/wp-json/wp/v2/pages/116?_fields=acf.faq.faq_list"
|
||||
);
|
||||
|
||||
const faqList = response.data.acf?.faq?.faq_list; // Chemin vers le répéteur dans l'API
|
||||
if (faqList && Array.isArray(faqList)) {
|
||||
const formattedFaqs = faqList.map((item) => ({
|
||||
question: item.question || "Question non définie",
|
||||
answer: item.answer || "Réponse non définie",
|
||||
}));
|
||||
|
||||
setFaqs(formattedFaqs);
|
||||
setFilteredFaqs(formattedFaqs); // Initialiser la liste filtrée
|
||||
} else {
|
||||
console.warn("Aucune FAQ trouvée dans le champ répéteur.");
|
||||
setError("Aucune FAQ disponible pour le moment.");
|
||||
}
|
||||
} catch (error) {
|
||||
console.error("Erreur lors de la récupération des FAQs :", error);
|
||||
setError("Impossible de récupérer les FAQs. Veuillez réessayer plus tard.");
|
||||
} finally {
|
||||
setLoading(false); // Désactiver le chargement
|
||||
}
|
||||
};
|
||||
|
||||
fetchFaqs();
|
||||
}, []);
|
||||
|
||||
const handleSearch = (e) => {
|
||||
@@ -51,7 +63,7 @@ const Faq = ({ showFAQ }) => {
|
||||
}}
|
||||
>
|
||||
<Typography
|
||||
variant="h4"
|
||||
variant="h3"
|
||||
sx={{
|
||||
fontWeight: "bold",
|
||||
mb: 4,
|
||||
@@ -62,40 +74,54 @@ const Faq = ({ showFAQ }) => {
|
||||
FAQ
|
||||
</Typography>
|
||||
|
||||
{/* Barre de recherche */}
|
||||
<TextField
|
||||
placeholder="Rechercher dans la FAQ..."
|
||||
fullWidth
|
||||
variant="outlined"
|
||||
value={faqSearch}
|
||||
onChange={handleSearch}
|
||||
sx={{
|
||||
mb: 4,
|
||||
}}
|
||||
/>
|
||||
{loading ? (
|
||||
<Box sx={{ textAlign: "center", py: 4 }}>
|
||||
<CircularProgress />
|
||||
</Box>
|
||||
) : error ? (
|
||||
<Typography variant="body1" sx={{ color: "red", textAlign: "center" }}>
|
||||
{error}
|
||||
</Typography>
|
||||
) : (
|
||||
<>
|
||||
{/* Barre de recherche */}
|
||||
<TextField
|
||||
placeholder="Rechercher dans la FAQ..."
|
||||
fullWidth
|
||||
variant="outlined"
|
||||
value={faqSearch}
|
||||
onChange={handleSearch}
|
||||
sx={{
|
||||
mb: 4,
|
||||
}}
|
||||
/>
|
||||
|
||||
{/* Liste des FAQs */}
|
||||
<Box>
|
||||
{filteredFaqs.length > 0 ? (
|
||||
filteredFaqs.map((faq, index) => (
|
||||
<Box key={index} sx={{ mb: 3 }}>
|
||||
<Typography variant="h6" sx={{ fontWeight: "bold" }}>
|
||||
{faq.question}
|
||||
{/* Liste des FAQs */}
|
||||
<Box>
|
||||
{filteredFaqs.length > 0 ? (
|
||||
filteredFaqs.map((faq, index) => (
|
||||
<Box key={index} sx={{ mb: 3 }}>
|
||||
<Typography variant="h4" sx={{ fontWeight: "bold" }}>
|
||||
{faq.question}
|
||||
</Typography>
|
||||
<Typography
|
||||
variant="body1"
|
||||
sx={{ color: "#666" }}
|
||||
dangerouslySetInnerHTML={{ __html: faq.answer }} // Si la réponse contient du HTML
|
||||
/>
|
||||
</Box>
|
||||
))
|
||||
) : (
|
||||
<Typography
|
||||
variant="body1"
|
||||
sx={{ color: "#999", textAlign: "center" }}
|
||||
>
|
||||
Aucun résultat trouvé. Essayez un autre mot-clé.
|
||||
</Typography>
|
||||
<Typography variant="body1" sx={{ color: "#666" }}>
|
||||
{faq.answer}
|
||||
</Typography>
|
||||
</Box>
|
||||
))
|
||||
) : (
|
||||
<Typography
|
||||
variant="body1"
|
||||
sx={{ color: "#999", textAlign: "center" }}
|
||||
>
|
||||
Aucun résultat trouvé.
|
||||
</Typography>
|
||||
)}
|
||||
</Box>
|
||||
)}
|
||||
</Box>
|
||||
</>
|
||||
)}
|
||||
</Box>
|
||||
</Collapse>
|
||||
);
|
||||
|
||||
@@ -156,7 +156,7 @@ const Contact = () => {
|
||||
>
|
||||
<Box>
|
||||
<Typography
|
||||
variant="h2"
|
||||
variant="h1"
|
||||
sx={{
|
||||
fontWeight: "bold",
|
||||
fontSize: { xs: "2rem", md: "3rem", lg: "4rem" },
|
||||
@@ -166,13 +166,16 @@ const Contact = () => {
|
||||
Contactez-nous
|
||||
</Typography>
|
||||
<Typography
|
||||
variant="h6"
|
||||
variant="body2"
|
||||
sx={{
|
||||
fontSize: { xs: "1rem", md: "1.5rem" },
|
||||
fontSize: { xs: "1rem", md: "1rem" },
|
||||
maxWidth: "600px",
|
||||
mx: "auto",
|
||||
}}
|
||||
>
|
||||
Notre bureau d’étude technique est, par essence, spécialisé.
|
||||
Vous pouvez donc faire appel à nous pour un diagnostic ponctuel portant sur tel ou tel équipement ou ouvrage du bâtiment
|
||||
(structures, chaufferie, ascenseur).<br></br> <br></br>
|
||||
Une question ? Une demande particulière ? Remplissez le formulaire
|
||||
ci-dessous ou consultez nos coordonnées.
|
||||
</Typography>
|
||||
@@ -182,6 +185,7 @@ const Contact = () => {
|
||||
{/* Section Coordonnées et Horaires */}
|
||||
<Box sx={{ padding: "40px 20px", backgroundColor: "#f9f9f9" }}>
|
||||
<Grid container spacing={4}>
|
||||
|
||||
{/* Coordonnées */}
|
||||
<Grid item xs={12} md={6}>
|
||||
<Card
|
||||
@@ -197,8 +201,9 @@ const Contact = () => {
|
||||
>
|
||||
<Box>
|
||||
<Typography
|
||||
variant="h4"
|
||||
variant="h2"
|
||||
sx={{
|
||||
fontSize: { xs: "2rem", md: "2rem", lg: "3rem" },
|
||||
fontWeight: "bold",
|
||||
color: "#0e467f",
|
||||
mb: 2,
|
||||
@@ -206,6 +211,7 @@ const Contact = () => {
|
||||
>
|
||||
Nos coordonnées
|
||||
</Typography>
|
||||
|
||||
<Typography variant="body1">
|
||||
<strong>Adresse :</strong>67 Bd Winston Churchill, Le Mans,
|
||||
France
|
||||
@@ -217,6 +223,7 @@ const Contact = () => {
|
||||
<strong>Email :</strong> contact@be-in3.com
|
||||
</Typography>
|
||||
</Box>
|
||||
|
||||
<Box
|
||||
onClick={handleOpenLightbox}
|
||||
sx={{
|
||||
@@ -268,8 +275,9 @@ const Contact = () => {
|
||||
>
|
||||
<CardContent>
|
||||
<Typography
|
||||
variant="h4"
|
||||
variant="h2"
|
||||
sx={{
|
||||
fontSize: { xs: "2rem", md: "2rem", lg: "3rem" },
|
||||
fontWeight: "bold",
|
||||
color: "#0e467f",
|
||||
mb: 2,
|
||||
@@ -278,6 +286,7 @@ const Contact = () => {
|
||||
>
|
||||
Horaires d'ouverture
|
||||
</Typography>
|
||||
|
||||
<Typography variant="body1">
|
||||
<strong>Lundi - Mardi :</strong> 9h00 - 16h00
|
||||
</Typography>
|
||||
@@ -342,8 +351,9 @@ const Contact = () => {
|
||||
}}
|
||||
>
|
||||
<Typography
|
||||
variant="h4"
|
||||
variant="h2"
|
||||
sx={{
|
||||
fontSize: { xs: "2rem", md: "2rem", lg: "3rem" }, // Responsive
|
||||
fontWeight: "bold",
|
||||
mb: 2,
|
||||
fontSize: { xs: "1.5rem", md: "2rem" },
|
||||
@@ -381,7 +391,7 @@ const Contact = () => {
|
||||
}}
|
||||
>
|
||||
<Typography
|
||||
variant="h4"
|
||||
variant="h2"
|
||||
sx={{
|
||||
mb: 4,
|
||||
textAlign: "center",
|
||||
|
||||
Reference in New Issue
Block a user