basket total

esadakman · esadakman · commit 8800015a5bed · 2023-01-20T10:38:20.000+03:00
diff --git a/components/ProductFeed.js b/components/ProductFeed.js
@@ -1,7 +1,7 @@
 import React, { useState } from "react";
 import Product from "./Product";
 
-function ProductFeed({ products }) { 
+function ProductFeed({ products }) {
   return (
     <div className="grid grid-flow-row-dense md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 lg:-mt-28 mx-auto  sm:mt-0 mt-12">
       {/* {products.slice(0,4)
@@ -15,6 +15,7 @@ function ProductFeed({ products }) {
           description={product.description}
           category={product.category}
           image={product.image}
+          priority={true}
         />
       ))}
       <img
@@ -32,6 +33,7 @@ function ProductFeed({ products }) {
             description={product.description}
             category={product.category}
             image={product.image}
+            priority={true}
           />
         ))}
       </div>
@@ -44,6 +46,7 @@ function ProductFeed({ products }) {
           description={product.description}
           category={product.category}
           image={product.image}
+          priority={true}
         />
       ))}
     </div>
diff --git a/pages/checkout.js b/pages/checkout.js
@@ -1,29 +1,33 @@
 import Image from "next/image";
 import Header from "../components/Header";
 import { useSelector } from "react-redux";
-import { selectItems } from "../slices/basketSlice";
+import { selectItems,selectTotal } from "../slices/basketSlice";
 import CheckoutProduct from "../components/CheckoutProduct";
 import Head from "next/head";
+import Currency from "react-currency-formatter";
+import { useSession } from "next-auth/client";
 
 function checkout() {
   const items = useSelector(selectItems);
-  // console.log(items);
+  const total = useSelector(selectTotal);
+  const [session] = useSession();
+
   return (
     <div className="bg-gray-100">
       <Head>
         <title>Checkout Page</title>
       </Head>
       <Header />
-      <main className="lg:flex max-w-screen-2xl mx-auto">
+      <main className="lg:flex max-w-screen-2xl mx-auto mt-28" >
         {/* Left */}
-        <div className="flex-grow m-5 shadow-sm">
+        <div className="flex-grow m-5 shadow-sm  ">
           <Image
             src="https:links.papareact.com/ikj"
-            width={1020}
+            width={1050}
             height={250}
-            alt="shopping banner"
+            alt="shopping banner" 
             priority={true}
-            className="w-auto h-auto object-contain"
+            className="w-auto h-auto object-contain "
           />
 
           <div className="flex flex-col p-5 space-y-10 bg-white">
@@ -48,6 +52,26 @@ function checkout() {
           </div>
         </div>
         {/* Right */}
+        <div className="flex flex-col bg-white p-10 shadow-md min-w-fit">
+          {items.length > 0 && (
+            <>
+              <h2>
+                Subtotal ({items.length} items):
+                <span className="font-bold">
+                  <Currency quantity={total} />
+                </span>
+              </h2>
+              <button
+                className={`button mt-2 ${
+                  !session &&
+                  "from-gray-300 to-gray-500 border-gray-200 text-gray-300 cursor-not-allowed"
+                }`}
+              >
+                {!session ? "Sign in to checkout" : "Proceed to checkout"}
+              </button>
+            </>
+          )}
+        </div>
       </main>
     </div>
   );
diff --git a/slices/basketSlice.js b/slices/basketSlice.js
@@ -33,5 +33,7 @@ export const { addToBasket, removeFromBasket } = basketSlice.actions;
 
 // Selectors - This is how we pull information from the Global store slice
 export const selectItems = (state) => state.basket.items;
+export const selectTotal = (state) =>
+  state.basket.items.reduce((total, item) => total + item.price, 0);
 
 export default basketSlice.reducer;
