feat(many): ✨ Add CartPage and paiment via stripe

WildCodeSchool · Jul 17, 2024 · 88d80d2 · 88d80d2
1 parent 7b44b78
commit 88d80d2
Show file tree

Hide file tree

Showing 9 changed files with 54 additions and 37 deletions.
diff --git a/backend/src/index.ts b/backend/src/index.ts
@@ -14,7 +14,7 @@ import {
 } from "./resolvers";
 
 export const stripe = require("stripe")(
-  "sk_test_51PYtGs2LoS9LYHUfkC2a7A35Xn1TocRl3VQVkQt6piwZk9PgzVXnmqsvCLxmzVbVWmBJNN3dW2ZqAskRz4kO4q1L00vfty1flt"
+  "sk_test_51PYlpd2KBZ2YS4BjFB7Un6zLAG21R4hWvzlu4hMKBxRkWvn2Ubg3opMn7fq6CeDLguzWQJ15XpqcK8A4ggUhRoGt00IsQN786f"
 );
 
 export const redisClient = createClient({

diff --git a/frontend/src/components/Cart/CartPage.tsx b/frontend/src/components/Cart/CartPage.tsx
@@ -1,4 +1,4 @@
-import CartProduct from "components/Cart/CartProduct";
+import CartProduct from "components/cart/CartProduct";
 import CheckoutButton from "components/CheckoutButton";
 import { useCart } from "contexts/CartContext";
 

diff --git a/frontend/src/components/Cart/CartProduct.tsx b/frontend/src/components/Cart/CartProduct.tsx
@@ -13,7 +13,7 @@ const CartProduct = ({ product, onRemove }: any) => {
         />
         <div>
           <h2 className="text-lg font-semibold">{product.name}</h2>
-          <p className="text-gray-500">Prix unitaire: {product.price}€</p>
+          <p className="text-gray-500">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"
@@ -26,7 +26,7 @@ const CartProduct = ({ product, onRemove }: any) => {
       </div>
       <div>
         <p className="text-lg font-semibold">
-          {product.price * product.quantity} €
+          {product.price_fixed * product.quantity} €
         </p>
         <p className="text-gray-500">Quantité: {product.quantity}</p>
       </div>

diff --git a/frontend/src/components/CheckoutButton.tsx b/frontend/src/components/CheckoutButton.tsx
@@ -30,7 +30,7 @@ const CheckoutButton = () => {
       id: parseInt(product.id),
       name: product.name,
       // picture: product.picture,
-      price: product.price,
+      price: product.price_fixed,
       quantity: product.quantity,
     }));
 
@@ -48,7 +48,7 @@ const CheckoutButton = () => {
       className="flex items-center rounded bg-blue-500 px-4 py-2 text-white hover:bg-blue-600"
     >
       Commander
-      <IoBagCheckOutline className="ml-2" />
+      <IoBagCheckOutline className="ml-2 text-lg" />
     </button>
   );
 };

diff --git a/frontend/src/components/cards/product-rent/CardProductRent.tsx b/frontend/src/components/cards/product-rent/CardProductRent.tsx
@@ -12,6 +12,8 @@ import { useCart } from "contexts/CartContext";
 import { useUserDatesResearch } from "contexts/UserDatesResearchContext";
 
 import Image from "next/image";
+import { FaCartArrowDown } from "react-icons/fa6";
+
 import CardProductRentAvailabilityViewer from "../../../components/cards/product-rent/CardProductRentAvailabilityViewer";
 
 const CardProductRent = ({
@@ -25,7 +27,18 @@ const CardProductRent = ({
   quantity,
 }: ProductType) => {
   const { dates: userRequestedRentDates } = useUserDatesResearch();
-  const { addToCart } = useCart(); // Utilisez le contexte de panier
+
+  const { addToCart } = useCart();
+
+  const handleAddToCart = () => {
+    const productToAdd = {
+      id,
+      name,
+      price_fixed,
+      quantity: 1,
+    };
+    addToCart(productToAdd);
+  };
 
   const isUnavailable = isDateRangeOverlap(
     userRequestedRentDates,
@@ -50,16 +63,8 @@ const CardProductRent = ({
   };
 
   const [isHovered, setIsHovered] = useState(false);
-  const handleMouseEnter = () => {
-    setIsHovered(true);
-  };
-  const handleMouseLeave = () => {
-    setIsHovered(false);
-  };
-
-  const handleAddToCart = () => {
-    addToCart({ id, name, price: price_fixed, quantity: 1 });
-  };
+  const handleMouseEnter = () => setIsHovered(true);
+  const handleMouseLeave = () => setIsHovered(false);
 
   return (
     <article className="relative flex flex-col gap-4 rounded-md bg-lowcontrast p-4">
@@ -74,9 +79,8 @@ const CardProductRent = ({
           />
         </section>
         <div className="flex grow flex-col gap-10 text-hightcontrast">
-          <div className="flex flex-col gap-3">
+          <div className="flex h-full flex-col gap-3">
             <section className="flex flex-col gap-3">
-              {/* ITEM FIRST ICONS */}
               <div className="flex items-center justify-end gap-3">
                 {isUnavailable ? (
                   <div className="flex w-max items-center justify-center rounded bg-danger px-3 py-1">
@@ -92,7 +96,6 @@ const CardProductRent = ({
                   </div>
                 )}
               </div>
-              {/* ITEM MAIN INFOS */}
               <div className="flex flex-col border-l-4 border-warning px-3 py-1">
                 <h1 className="text-lg font-semibold text-hightcontrast">
                   {name || <em>NO TITLE...</em>}
@@ -102,24 +105,34 @@ const CardProductRent = ({
                     onMouseEnter={handleMouseEnter}
                     onMouseLeave={handleMouseLeave}
                     href={`/products/category/${category.id}`}
-                    className={` w-max cursor-pointer rounded px-2 py-1 text-sm ${isHovered ? "bg-indigo-500" : getCategoryColor(category.name)}`}
+                    className={`w-max cursor-pointer rounded px-2 py-1 text-sm ${isHovered ? "bg-indigo-500" : getCategoryColor(category.name)}`}
                   >
                     {category.name}
                   </Link>
                 )}
               </div>
             </section>
 
-            <section className="flex h-10 flex-col gap-3">
+            <section className="flex flex-col gap-3">
               <p className="text-base font-medium opacity-70">
                 {description_short || <em>NO DESCRIPTION...</em>}
               </p>
             </section>
           </div>
           <div className="flex grow basis-0 flex-col items-start justify-end">
+            <button
+              onClick={(e) => {
+                e.preventDefault();
+                handleAddToCart();
+              }}
+              className="mb-2 flex w-fit items-center justify-center rounded bg-blue-500 px-4 py-2 text-sm text-white hover:bg-blue-600	"
+            >
+              Ajouter au panier <FaCartArrowDown className="ml-2" />
+            </button>
+
             <section className="flex flex-col items-start justify-center">
               <p className="text-sm font-medium">
-                {convertToCurrency(price_fixed).in("EUR").valueWithSymbol} (+
+                {convertToCurrency(price_fixed).in("EUR").valueWithSymbol} (+{" "}
                 {convertToCurrency(price_daily).in("EUR").valueWithSymbol} par
                 jours)
               </p>
@@ -131,12 +144,6 @@ const CardProductRent = ({
         </div>
       </Link>
       <div className="inline-flex gap-3.5">
-        <button
-          onClick={handleAddToCart}
-          className="mt-2 rounded bg-blue-500 px-4 py-2 text-white hover:bg-blue-600"
-        >
-          Ajouter au panier
-        </button>
         <CardProductRentAvailabilityViewer />
       </div>
     </article>

diff --git a/frontend/src/components/headers/MainHeader.tsx b/frontend/src/components/headers/MainHeader.tsx
@@ -1,3 +1,4 @@
+import { useCart } from "contexts/CartContext";
 import Image from "next/image";
 import Link from "next/link";
 import { useState } from "react";
@@ -14,6 +15,13 @@ export default function MainHeader() {
   const [searchValue, setSearchValue] = useState("");
   const [menuVisible, setMenuVisible] = useState(false);
 
+  const { cart } = useCart();
+
+  const cartItemCount = cart.reduce(
+    (total, product) => total + product.quantity,
+    0,
+  );
+
   const toggleSearch = () => setSearchActive(!searchActive);
   const toggleMenu = () => setMenuVisible(!menuVisible);
 
@@ -97,7 +105,7 @@ export default function MainHeader() {
             <div className="relative ease-out hover:scale-90 hover:text-indigo-500">
               <FaShoppingBag size={32} className="relative" />
               <div className="absolute -bottom-3 -right-3 flex h-2 w-2 items-center justify-center rounded-full bg-red-500 p-3 text-xs text-white">
-                0
+                {cartItemCount}
               </div>
             </div>
           </Link>

diff --git a/frontend/src/contexts/CartContext.tsx b/frontend/src/contexts/CartContext.tsx
@@ -1,9 +1,10 @@
+import CartProduct from "components/cart/CartProduct";
 import { createContext, ReactNode, useContext, useState } from "react";
 
 interface CartProduct {
   id: number;
   name: string;
-  price: number;
+  price_fixed: number;
   quantity: number;
   // picture: string;
 }

diff --git a/frontend/src/pages/_app.tsx b/frontend/src/pages/_app.tsx
@@ -34,14 +34,15 @@ const client = new ApolloClient({
 function App({ Component, pageProps: { session, ...pageProps } }: AppProps) {
   return (
     <ApolloProvider client={client}>
-      <Layout>
-        <CartProvider>
+      <CartProvider>
+        <Layout>
           <UserDatesResearchProvider>
             <Component {...pageProps} />
           </UserDatesResearchProvider>
-        </CartProvider>
-        <ToastContainer />
-      </Layout>
+
+          <ToastContainer />
+        </Layout>
+      </CartProvider>
     </ApolloProvider>
   );
 }

diff --git a/frontend/src/pages/cart.tsx b/frontend/src/pages/cart.tsx
@@ -1,4 +1,4 @@
-import CartPage from "components/Cart/CartPage";
+import CartPage from "components/cart/CartPage";
 
 const Cart = () => {
   return (