Feat/integration-stripe

.gitignore

@@ -10,6 +10,7 @@ node_modules
 /blob-report/
 /playwright/.cache/
 .env
+.env.apikey
 
 logs
 # Fait référence aux logs générés par le service ou container gateway (nginx)

backend/src/index.ts

@@ -1,10 +1,9 @@
 import { ApolloServer } from "@apollo/server";
 import { startStandaloneServer } from "@apollo/server/standalone";
+import * as jwt from "jsonwebtoken";
 import { createClient } from "redis";
 import "reflect-metadata";
 import { buildSchema } from "type-graphql";
-// import { authChecker } from "./authChecker";
-import * as jwt from "jsonwebtoken";
 import dataSource from "./config/datasource";
 import { fillDatabaseIfEmpty } from "./fillDatabaseIfEmpty";
 import {
@@ -14,9 +13,9 @@ import {
   UserResolver,
 } from "./resolvers";
 
-export const stripe = require("stripe")(
-  "sk_test_51PYlpd2KBZ2YS4BjFB7Un6zLAG21R4hWvzlu4hMKBxRkWvn2Ubg3opMn7fq6CeDLguzWQJ15XpqcK8A4ggUhRoGt00IsQN786f"
-);
+require("dotenv").config();
+
+export const stripe = require("stripe")(process.env.STRIPE_SECRET_KEY);
 
 export const redisClient = createClient({
   url: "redis://redis",

backend/src/resolvers/checkout.resolver.ts

@@ -19,10 +19,17 @@ export default class CheckoutResolver {
           },
           unit_amount: product.price * 100,
         },
+        adjustable_quantity: {
+          enabled: true,
+          minimum: 1,
+          maximum: 6,
+        },
         quantity: product.quantity,
       })),
       mode: "payment",
       success_url: "http://localhost:3000/stripe/success",
+      /* success_url:
+        "http://localhost:3000/stripe/success?session_id={CHECKOUT_SESSION_ID}", */
       cancel_url: "http://localhost:3000/cart",
     });
     return session.url;

docker-compose.yml

@@ -1,7 +1,6 @@
 services:
-
   backend:
-    build: 
+    build:
       context: ./backend # Fait référence au fichier nommé DockerFile par défaut du répertoire courant. Exécute les instructions à l'intérieur.
       dockerfile: Dockerfile # Indication explicite que l'on cible le fichier nommé Dockerfile.
     ports:
@@ -13,12 +12,13 @@ services:
       interval: 5s
       timeout: 5s
       retries: 10
+    env_file: .env.apikey
     depends_on:
       db:
         condition: service_healthy
 
   frontend:
-    build: 
+    build:
       context: ./frontend # Fait référence au fichier nommé DockerFile par défaut du répertoire courant. Exécute les instructions à l'intérieur.
       dockerfile: Dockerfile # Indication explicite que l'on cible le fichier nommé Dockerfile.
     restart: always
@@ -52,7 +52,7 @@ services:
 
   imagesupload:
     build: ./imagesupload
-    # build: 
+    # build:
     #   context: ./imagesupload
     #   dockerfile: Dockerfile
     volumes:

frontend/src/components/Cart/CartPage.tsx

@@ -14,20 +14,45 @@ const CartPage = () => {
   };
 
   return (
-    <div className="container mx-auto mt-10">
-      <h1 className="mb-6 text-3xl font-semibold">Mon Panier</h1>
+    <div className="container mx-auto mt-5">
       {cart.length === 0 ? (
-        <p className="text-lg">Votre panier est vide.</p>
+        <table className="min-w-full rounded-lg border-gray-300 bg-zinc-800 shadow-lg">
+          <thead>
+            <tr>
+              <th className="rounded-t-lg bg-blue-500 px-6 py-4 text-left font-bold uppercase text-white">
+                Mon Panier
+              </th>
+            </tr>
+          </thead>
+          <tbody>
+            <tr>
+              <td className="rounded-lg px-6 py-8 text-center text-white">
+                Votre panier est vide.
+              </td>
+            </tr>
+          </tbody>
+        </table>
       ) : (
-        <div>
-          {cart.map((product) => (
-            <CartProduct
-              key={product.id}
-              product={product}
-              onRemove={handleRemove}
-            />
-          ))}
-          <div className="mt-6 flex justify-between">
+        <div className="min-w-full rounded-lg border-gray-300 bg-zinc-800 shadow-lg">
+          <table className="min-w-full">
+            <thead>
+              <tr>
+                <th className="rounded-t-lg bg-blue-500 px-6 py-4 text-left font-bold uppercase text-white">
+                  Mon Panier
+                </th>
+              </tr>
+            </thead>
+            <tbody>
+              {cart.map((product) => (
+                <tr key={product.id}>
+                  <td className="px-6 py-4">
+                    <CartProduct product={product} onRemove={handleRemove} />
+                  </td>
+                </tr>
+              ))}
+            </tbody>
+          </table>
+          <div className="mt-6 flex justify-between px-6 py-4">
             <button
               onClick={handleClearCart}
               className="rounded bg-red-500 px-4 py-2 text-white hover:bg-red-600"

frontend/src/components/Cart/CartProduct.tsx

@@ -15,10 +15,10 @@ const CartProduct = ({ product, onRemove }: any) => {
         />
         <div>
           <h2 className="text-lg font-semibold">{product.name}</h2>
-          <p className="text-gray-500">Prix unitaire: {product.price_fixed}€</p>
+          <p className="text-gray-300">Prix unitaire: {product.price_fixed}€</p>
           <div className="mt-1 flex items-center space-x-2">
             <button
-              className="rounded bg-gray-800 px-2 py-1"
+              className="rounded bg-red-400 px-2 py-1 hover:bg-red-700"
               onClick={handleRemove}
             >
               Retirer
@@ -30,7 +30,7 @@ const CartProduct = ({ product, onRemove }: any) => {
         <p className="text-lg font-semibold">
           {product.price_fixed * product.quantity} €
         </p>
-        <p className="text-gray-500">Quantité: {product.quantity}</p>
+        <p className="text-gray-300">Quantité: {product.quantity}</p>
       </div>
     </div>
   );