check server creation

src/pages/CreateServer/CreateServer.jsx

@@ -2,60 +2,75 @@ import styles from './CreateServer.module.scss';
 import PropTypes from "prop-types";
 import Navbar from '../../components/navbar/Navbar';
 import { useNavigate } from 'react-router-dom'; 
-import  bedrockimg from '../../assets/bedrock.png';
+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}>
       <Navbar 
-          user={user} 
+        user={user} 
-          hasShadow={false} 
+        hasShadow={false} 
-          showBackButton={true} 
+        showBackButton={true} 
-          onBackClick={() => navigate('/dashboard')}  
+        onBackClick={() => navigate('/dashboard')}  
-        />
+      />
 
-        <div className={styles.GamesChoice}>
+      <div className={styles.GamesChoice}>
-            <div className={styles.title}>Création du serveur</div>
+        <div className={styles.title}>Création du serveur</div>
-            <div className={styles.subtitle}>De quelle façon voulez-vous jouer ?</div>
+        <div className={styles.subtitle}>De quelle façon voulez-vous jouer ?</div>
-            <div className={styles.GamesContainer}>
+        <div className={styles.GamesContainer}>
-                <div className={styles.GameCard} onClick={() => navigate('/CreateServer/java')}>    
+          <div className={styles.GameCard} onClick={() => (subscription > 0) ? navigate('/CreateServer/java') : navigate('/payement?package=Gratuit')}>    
-                  <img src={javaimg} className={styles.imgCard}/>         
+            <img src={javaimg} className={styles.imgCard} alt="Java Edition" />         
-                  <div className={styles.Gamesubtitle}>Java Edition</div>
+            <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>
+            <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>
+            <button className={styles.GameButton}>Choisir ce modèle</button>
-                </div>
+          </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')}> 
-                  <div className={styles.Gamesubtitle}>Mini-jeu</div>
+            <img src={bedrockimg} className={styles.imgCard} alt="Mini-jeu" />   
-                  <div className={styles.Gamedescription}>Plongez dans Minecraft avec des cartes personnalisées et des règles uniques, en solo ou avec vos amis.</div>
+            <div className={styles.Gamesubtitle}>Mini-jeu</div>
-                  <button className={styles.GameButton}>Choisir ce modèle </button>
+            <div className={styles.Gamedescription}>Plongez dans Minecraft avec des cartes personnalisées et des règles uniques, en solo ou avec vos amis.</div>
-                  </div>
+            <button className={styles.GameButton}>Choisir ce modèle</button>
-                <div className={styles.GameCard} onClick={() => navigate('/CreateServer/modpack')}>
+          </div>
-                  <img src={modedimg} className={styles.imgCard}/>   
+
-                  <div className={styles.Gamesubtitle}>Minecraft Modé</div>
+          <div className={styles.GameCard} onClick={() => (subscription > 2) ? navigate('/CreateServer/bedrock') : navigate('/payement?package=Premium')}>
-                  <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>
+            <img src={modedimg} className={styles.imgCard} alt="Minecraft Modé" />   
-                  <button className={styles.GameButton}>Choisir ce modèle </button>
+            <div className={styles.Gamesubtitle}>Minecraft Modé</div>
-                </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>
-            </div>
+            <button className={styles.GameButton}>Choisir ce modèle</button>
+          </div>
         </div>
+      </div>
     </div>
   );
 };
 
 CreateServer.propTypes = {
-  user: PropTypes.oneOfType([
+  user: PropTypes.shape({
-    PropTypes.shape({
+    uid: PropTypes.string.isRequired,
-      uid: PropTypes.string.isRequired,
+    displayName: PropTypes.string,
-      displayName: PropTypes.string,
+    email: PropTypes.string,
-      email: PropTypes.string,
+    photoURL: PropTypes.string,
-      photoURL: PropTypes.string,
+  }).isRequired,
-    }),
-  ]),
 };
 
 export default CreateServer;