check server creation

src/pages/CreateServer/CreateServer.jsx

@@ -4,11 +4,26 @@ import Navbar from '../../components/navbar/Navbar';
 import { useNavigate } from 'react-router-dom'; 
 import bedrockimg from '../../assets/bedrock.png';
 import modedimg from '../../assets/moded.png';
-import javaimg from '../../assets/java.png'
+import javaimg from '../../assets/java.png';
+import { getUserSubscription } from "../../service/firebase";
+import { useState, useEffect } from 'react';
 
 const CreateServer = ({ user }) => {
   const navigate = useNavigate();
+  const [subscription, setSubscription] = useState(0); 
 
+  useEffect(() => {
+    const fetchSubscription = async () => {
+      try {
+        const userSubscription = await getUserSubscription(user.uid);
+        setSubscription(userSubscription || 0); 
+      } catch (error) {
+        console.error('Error fetching subscription:', error);
+      }
+    };
+
+    fetchSubscription();
+  }, [user.uid]); 
 
   return (
     <div className={styles.Container}>
@@ -23,20 +38,22 @@ const CreateServer = ({ user }) => {
         <div className={styles.title}>Création du serveur</div>
         <div className={styles.subtitle}>De quelle façon voulez-vous jouer ?</div>
         <div className={styles.GamesContainer}>
-                <div className={styles.GameCard} onClick={() => navigate('/CreateServer/java')}>    
-                  <img src={javaimg} className={styles.imgCard}/>         
+          <div className={styles.GameCard} onClick={() => (subscription > 0) ? navigate('/CreateServer/java') : navigate('/payement?package=Gratuit')}>    
+            <img src={javaimg} className={styles.imgCard} alt="Java Edition" />         
             <div className={styles.Gamesubtitle}>Java Edition</div>
             <div className={styles.Gamedescription}>Découvrez la version classique de Minecraft sur PC, avec un large éventail de mises à jour et de fonctionnalités, couvrant plus de vingt versions !</div>
             <button className={styles.GameButton}>Choisir ce modèle</button>
           </div>
-                <div className={styles.GameCard} onClick={() => navigate('/CreateServer/bedrock')}> 
-                  <img src={bedrockimg} className={styles.imgCard}/>   
+
+          <div className={styles.GameCard} onClick={() => (subscription > 1) ? navigate('/CreateServer/bedrock') : navigate('/payement?package=Standard')}> 
+            <img src={bedrockimg} className={styles.imgCard} alt="Mini-jeu" />   
             <div className={styles.Gamesubtitle}>Mini-jeu</div>
             <div className={styles.Gamedescription}>Plongez dans Minecraft avec des cartes personnalisées et des règles uniques, en solo ou avec vos amis.</div>
             <button className={styles.GameButton}>Choisir ce modèle</button>
           </div>
-                <div className={styles.GameCard} onClick={() => navigate('/CreateServer/modpack')}>
-                  <img src={modedimg} className={styles.imgCard}/>   
+
+          <div className={styles.GameCard} onClick={() => (subscription > 2) ? navigate('/CreateServer/bedrock') : navigate('/payement?package=Premium')}>
+            <img src={modedimg} className={styles.imgCard} alt="Minecraft Modé" />   
             <div className={styles.Gamesubtitle}>Minecraft Modé</div>
             <div className={styles.Gamedescription}>Explorez la version modifiée de Minecraft sur PC, avec des modpacks riches et variés, contenant plus de 200 mods pour une expérience de jeu personnalisée.</div>
             <button className={styles.GameButton}>Choisir ce modèle</button>
@@ -48,14 +65,12 @@ const CreateServer = ({ user }) => {
 };
 
 CreateServer.propTypes = {
-  user: PropTypes.oneOfType([
-    PropTypes.shape({
+  user: PropTypes.shape({
     uid: PropTypes.string.isRequired,
     displayName: PropTypes.string,
     email: PropTypes.string,
     photoURL: PropTypes.string,
-    }),
-  ]),
+  }).isRequired,
 };
 
 export default CreateServer;