[+] Fixed 'payments' redirections issues

Merge pull request #54 from hubHarmony/animate

package-lock.json

@@ -16,6 +16,7 @@
         "@testing-library/react": "^16.0.0",
         "@types/jest": "^29.5.12",
         "@types/node": "^20.14.9",
+        "animate.css": "^4.1.1",
         "firebase": "^10.12.2",
         "jest": "^29.7.0",
         "prop-types": "^15.8.1",
@@ -4038,6 +4039,12 @@
         "url": "https://github.com/sponsors/epoberezkin"
       }
     },
+    "node_modules/animate.css": {
+      "version": "4.1.1",
+      "resolved": "https://registry.npmjs.org/animate.css/-/animate.css-4.1.1.tgz",
+      "integrity": "sha512-+mRmCTv6SbCmtYJCN4faJMNFVNN5EuCTTprDTAo7YzIGji2KADmakjVA3+8mVDkZ2Bf09vayB35lSQIex2+QaQ==",
+      "license": "MIT"
+    },
     "node_modules/ansi-colors": {
       "version": "4.1.3",
       "resolved": "https://registry.npmjs.org/ansi-colors/-/ansi-colors-4.1.3.tgz",

package.json

@@ -19,6 +19,7 @@
     "@testing-library/react": "^16.0.0",
     "@types/jest": "^29.5.12",
     "@types/node": "^20.14.9",
+    "animate.css": "^4.1.1",
     "firebase": "^10.12.2",
     "jest": "^29.7.0",
     "prop-types": "^15.8.1",

src/App.jsx

@@ -5,9 +5,9 @@ import 'react-toastify/dist/ReactToastify.css';
 import { auth, getUserSubscription } from './service/firebase';
 import styles from './App.module.scss';
 import Loading from './pages/Loading/loading';
-import Pricing from './pages/Payement/Pricing/Pricing';
-import PaymentForm from './pages/Payement/PaymentForm/PaymentForm';
-import Checkout from './pages/Payement/Checkout';
+import Pricing from './pages/Payment/Pricing/Pricing';
+import PaymentForm from './pages/Payment/PaymentForm/PaymentForm';
+import Checkout from './pages/Payment/Checkout';
 
 const LoginPage = lazy(() => import('./pages/LoginPage/LoginPage'));
 const ServerDetails = lazy(() => import('./pages/ServerDetails/ServerDetails'));
@@ -82,9 +82,9 @@ const App = () => {
             <Route path="/createServer" element={user ? <CreatePage user={user} /> : <Navigate to="/login" />} />
 
             {/* Routes with Subscription Levels */}
-            <Route path="/createServer/java" element={user ? (subscription > 0 ? <Javapick user={user} /> : <Navigate to="/payement?package=Basique" />) : <Navigate to="/login" />} />
-            <Route path="/createServer/bedrock" element={user ? (subscription > 1 ? <Bedrock user={user} /> : <Navigate to="/payement?package=Standard" />) : <Navigate to="/login" />} />
-            <Route path="/createServer/modpack" element={user ? (subscription > 2 ? <Modpack user={user} /> : <Navigate to="/payement?package=Premium" />) : <Navigate to="/login" />} />
+            <Route path="/createServer/java" element={user ? (subscription > 0 ? <Javapick user={user} /> : <Navigate to="/payment?package=Basique" />) : <Navigate to="/login" />} />
+            <Route path="/createServer/bedrock" element={user ? (subscription > 1 ? <Bedrock user={user} /> : <Navigate to="/payment?package=Standard" />) : <Navigate to="/login" />} />
+            <Route path="/createServer/modpack" element={user ? (subscription > 2 ? <Modpack user={user} /> : <Navigate to="/payment?package=Premium" />) : <Navigate to="/login" />} />
 
             {/* Server Details Route */}
             <Route path="/server/:serverName/*" element={user ? <ServerDetails user={user} /> : <Navigate to="/login" />} />

src/components/serverCards/DefaultServerCard.jsx

@@ -5,6 +5,7 @@ import fabric from '../../assets/frameworks/fabric.png';
 import forge from '../../assets/frameworks/forge.png';
 import PropTypes from "prop-types";
 import { FaTrash } from 'react-icons/fa';
+import 'animate.css/animate.min.css';
 
 const ServerCard = ({ status, version, name, framework, onRunClick, onStopClick, onDeleteClick, countPlayers, maxPlayers, favoriteServer }) => {
 
@@ -50,8 +51,8 @@ const ServerCard = ({ status, version, name, framework, onRunClick, onStopClick,
 
   return (
     <Link 
-      to={`/server/${name}/options`} 
-      className={favoriteServer ? styles.favoriteserverCard : styles.serverCard}
+      to={`/server/${name}/options`}
+      className={`${favoriteServer ? styles.favoriteserverCard : styles.serverCard} animate__animated animate__fadeInUp`}
       state={{ status }}>
       <div className={styles.header}>
         <div className={styles.serverInfo}>

src/pages/CreateServer/CreateServer.jsx

@@ -38,21 +38,21 @@ 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={() => (subscription > 0) ? navigate('/CreateServer/java') : navigate('/payement?package=Gratuit')}>    
+          <div className={styles.GameCard} onClick={() => (subscription > 0) ? navigate('/CreateServer/java') : navigate('/payment?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={() => (subscription > 1) ? navigate('/CreateServer/bedrock') : navigate('/payement?package=Standard')}> 
+          <div className={styles.GameCard} onClick={() => (subscription > 1) ? navigate('/CreateServer/bedrock') : navigate('/payment?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={() => (subscription > 2) ? navigate('/CreateServer/modpack') : navigate('/payement?package=Premium')}>
+          <div className={styles.GameCard} onClick={() => (subscription > 2) ? navigate('/CreateServer/modpack') : navigate('/payment?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>

src/pages/DashboardPage/DashboardPage.jsx

@@ -62,12 +62,12 @@ const DashboardPage = ({ user }) => {
     try {
       if (subscription === 0) {
         if (framework === "paper") {
-          navigate('/payement?package=Gratuit');
+          navigate('/payment?package=Gratuit');
         } if (framework === "Bedrock") {
-          navigate('/payement?package=Standard');
+          navigate('/payment?package=Standard');
         }
           else {
-            navigate('/payement?package=Standard');
+            navigate('/payment?package=Standard');
           }
       } 
 
@@ -76,7 +76,7 @@ const DashboardPage = ({ user }) => {
           await serviiApi.serverRun(serverName);
           updateServersFromApi();
         } else {
-          navigate('/payement?package=Standard');
+          navigate('/payment?package=Standard');
         }
       } 
       else if (subscription === 2) {
@@ -84,7 +84,7 @@ const DashboardPage = ({ user }) => {
           await serviiApi.serverRun(serverName);
           updateServersFromApi();
         } else {
-          navigate('/payement?package=Premium');
+          navigate('/payment?package=Premium');
         }
       } 
       else if (subscription === 3) {