Merge branch 'main' of https://github.com/UtkarshBirla28/ecommerce-store

.env

@@ -1 +1,7 @@
-NEXT_PUBLIC_API_URL=https://indiekart-admin.vercel.app/api/e6894349-55f6-4f50-812e-79b1c5614acf
+NEXT_PUBLIC_API_URL=https://indiekart-admin.vercel.app/api/API_KEY_COPIED_FROM_ADMIN_DASHBOARD
+
+# on gitbash run "npx auth secret" and paste it in AUTH_SECRET
+AUTH_SECRET=
+
+AUTH_GITHUB_ID=
+AUTH_GITHUB_SECRET=

.vscode/settings.json

@@ -0,0 +1,3 @@
+{
+  "typescript.tsdk": "node_modules\\typescript\\lib"
+}

PULL_REQUEST_TEMPLATE.md

@@ -1,12 +1,12 @@
-## PR Description 📜
+# PR Description 📜
 
 <!-- Please include a summary of the changes and the related issue. Please also include relevant motivation and context. List any dependencies that are required for this change. -->
 
 Fixes # <your_issue_number>
 
-<hr>
+<!-- In order to tick the check box, put an x inside them. For example, [x] like this -->
 
-### Type of Change
+## Type of Change
 
 - [ ] Bug fix (non-breaking change which fixes an issue)
 - [ ] New feature (non-breaking change which adds functionality)
@@ -21,28 +21,26 @@ Fixes # <your_issue_number>
 - [ ] Test B
 
 **Test Configuration**:
-* Firmware version:
-* Hardware:
-* Toolchain:
-* SDK:
-
+
+- Firmware version:
+- Hardware:
+- Toolchain:
+- SDK:
+
 ## Mark the task you have completed ✅
 
-<!----Please delete options that are not relevant. In order to tick the check box just but x inside them for example [x] like this----->
+<!----Please delete options that are not relevant.----->
 
 - [ ] I follow [CONTRIBUTING GUIDELINE](https://github.com/Indie-Kart/ecommerce-store/blob/main/Contributing.md) & [CODE OF CONDUCT](https://github.com/Indie-Kart/ecommerce-store/blob/main/CODE_OF_CONDUCT.md) of this project.
 - [ ] I have performed a self-review of my own code or work.
 - [ ] I have commented my code, particularly in hard-to-understand areas.
 - [ ] My changes generates no new warnings.
 - [ ] I have followed proper naming convention showed in [CONTRIBUTING GUIDELINE](https://github.com/Indie-Kart/ecommerce-store/blob/main/Contributing.md)
-- [ ] I have added screenshot for website preview in assets/images 
-- [ ] I have added README.md in my folder 
-
-<hr>
+- [ ] I have added screenshot for website preview in assets/images
+- [ ] I have added README.md in my folder
 
 ## Add your screenshots(Optional) 📸
 
---- 
-<br>
+---
 
 ## Thank you soo much for contributing to our repository 💗

actions/PriceFilter.tsx

@@ -2,7 +2,7 @@
 
 import qs from "query-string";
 import { useRouter, useSearchParams } from "next/navigation";
-import Button from "@/components/ui/button";
+import { Button } from "@/components/ui/button";
 import { cn } from "@/lib/utils";
 import { PriceRange } from "@/types";
 
@@ -27,22 +27,26 @@ const PriceFilter: React.FC = () => {
     let query: any = {
       ...current,
       minPrice: String(range.min),
-      maxPrice: range.max === null ? 'null' : String(range.max),
+      maxPrice: range.max === null ? "null" : String(range.max),
     };
 
     // Check if the current selected filter is the same as the clicked one, if so, clear it
     if (
       selectedMinPrice === String(range.min) &&
-      (selectedMaxPrice === String(range.max) || (range.max === null && selectedMaxPrice === 'null'))
+      (selectedMaxPrice === String(range.max) ||
+        (range.max === null && selectedMaxPrice === "null"))
     ) {
       delete query.minPrice;
       delete query.maxPrice;
     }
 
-    const url = qs.stringifyUrl({
-      url: window.location.href,
-      query,
-    }, { skipNull: true });
+    const url = qs.stringifyUrl(
+      {
+        url: window.location.href,
+        query,
+      },
+      { skipNull: true }
+    );
 
     router.push(url);
   };
@@ -56,10 +60,11 @@ const PriceFilter: React.FC = () => {
           <div key={range.id} className="flex items-center">
             <Button
               className={cn(
-                'rounded-md text-sm text-gray-800 p-2 bg-white border border-gray-300',
+                "rounded-md text-sm text-gray-800 p-2 bg-white border border-gray-300",
                 selectedMinPrice === String(range.min) &&
-                (selectedMaxPrice === String(range.max) || (range.max === null && selectedMaxPrice === 'null')) &&
-                'bg-black text-white'
+                  (selectedMaxPrice === String(range.max) ||
+                    (range.max === null && selectedMaxPrice === "null")) &&
+                  "bg-black text-white"
               )}
               onClick={() => onClick(range)}
             >

actions/get-products.tsx

@@ -1,21 +1,21 @@
 import { Product } from "@/types";
 import qs from "query-string";
 
-const URL=`${process.env.NEXT_PUBLIC_API_URL}/products`;
+const URL = `${process.env.NEXT_PUBLIC_API_URL}/products`;
 
 interface Query {
   categoryId?: string;
   colorId?: string;
   sizeId?: string;
   isFeatured?: boolean;
-  minPrice?:string;
-  maxPrice?:string;
+  minPrice?: string;
+  maxPrice?: string;
 }
 
 const getProducts = async (query: Query): Promise<Product[]> => {
   const url = qs.stringifyUrl({
     url: URL,
-    query: { 
+    query: {
       colorId: query.colorId,
       sizeId: query.sizeId,
       categoryId: query.categoryId,
@@ -27,6 +27,10 @@ const getProducts = async (query: Query): Promise<Product[]> => {
 
   const res = await fetch(url);
 
+  if (!res.ok) {
+    throw new Error("An error occurred while fetching the data.");
+  }
+
   return res.json();
 };
 

app/(routes)/cart/components/cart-item-info.tsx

@@ -1,25 +1,40 @@
+import React from "react";
+
+interface Product {
+  name: string;
+  color: string;
+  size: string;
+  price: string;
+  // Add more properties as needed
+}
+
 interface CartItemInfoProps {
-  product: Record<string, any>;
+  product: Product;
 }
+export interface QuantityDetail {
+  id: string;
+  quantity: number;
+  // Add more properties as needed
+}
+
 
-const CartItemInfo: React.FC<CartItemInfoProps> = ({
-  product
-}) => {
-  return ( 
+const CartItemInfo: React.FC<CartItemInfoProps> = ({ product }) => {
+  return (
     <div>
       <div className="flex justify-between">
-        <p className=" text-sm font-semibold text-black">
-          {product.name}
-        </p>
+        <p className="text-sm font-semibold text-black">{product.name}</p>
       </div>
 
       <div className="mt-1 flex text-sm">
         <p className="text-gray-500">{product.color}</p>
-        <p className="ml-4 border-l border-gray-200 pl-4 text-gray-500">{product.size}</p>
+        <p className="ml-4 border-l border-gray-200 pl-4 text-gray-500">
+          {product.size}
+        </p>
       </div>
       <p className="mt-1 text-sm font-medium text-gray-900">{product.price}</p>
     </div>
   );
-}
- 
+};
+
 export default CartItemInfo;
+

app/(routes)/cart/components/cart-item.tsx

@@ -1,27 +1,30 @@
-import Image from "next/image";
-import { toast } from "react-hot-toast";
-import { X } from "lucide-react";
-
+import React from "react";
+import { Product } from "@/types";
+import {QuantityDetail} from "./cart-item-info"; // Adjusted import
 import IconButton from "@/components/ui/icon-button";
 import Currency from "@/components/ui/currency";
 import useCart from "@/hooks/use-cart";
-import { Product } from "@/types";
-
-
+import { X } from "lucide-react";
+import Image from "next/image";
 interface CartItemProps {
   data: Product;
+  quantity: QuantityDetail[]; // This should match the interface definition
+  handleAdd: (data: Product) => void;
+  handleDec: (data: Product) => void;
 }
-
 const CartItem: React.FC<CartItemProps> = ({
-  data
+  data,
+  quantity,
+  handleAdd,
+  handleDec,
 }) => {
   const cart = useCart();
 
   const onRemove = () => {
     cart.removeItem(data.id);
   };
 
-  return ( 
+  return (
     <li className="flex py-6 border-b">
       <div className="relative h-24 w-24 rounded-md overflow-hidden sm:h-48 sm:w-48">
         <Image
@@ -37,20 +40,57 @@ const CartItem: React.FC<CartItemProps> = ({
         </div>
         <div className="relative pr-9 sm:grid sm:grid-cols-2 sm:gap-x-6 sm:pr-0">
           <div className="flex justify-between">
-            <p className=" text-lg font-semibold text-black">
-              {data.name}
-            </p>
+            <p className=" text-lg font-semibold text-black">{data.name}</p>
           </div>
 
           <div className="mt-1 flex text-sm">
             <p className="text-gray-500">{data.color.name}</p>
-            <p className="ml-4 border-l border-gray-200 pl-4 text-gray-500">{data.size.name}</p>
+            <p className="ml-4 border-l border-gray-200 pl-4 text-gray-500">
+              {data.size.name}
+            </p>
           </div>
           <Currency value={data.price} />
+          <div className="flex flex-col items-center justify-center gap-4">
+            {quantity
+              .filter((item) => item.id === data.id)
+              .map((item) => (
+                <div className="flex items-center justify-center gap-4" key={item.id}>
+                  <button
+                    className="h-4 w-4 border border-gray-300 p-4 flex justify-center items-center rounded-full"
+                    onClick={() => handleAdd(data)}
+                  >
+                    <span>+</span>
+                  </button>
+                  <span>{item.quantity}</span>
+                  <button
+                    className="h-4 w-4 border border-gray-300 p-4 flex justify-center items-center rounded-full"
+                    onClick={() => handleDec(data)}
+                  >
+                    <span>-</span>
+                  </button>
+                </div>
+              ))}
+            <div>
+              <p className="flex">
+                Price :{" "}
+                <Currency
+                  value={
+                    Number(
+                      quantity.find((item) => item.id === data.id)?.quantity ?? 0
+                    ) * Number(data.price)
+                  }
+                />
+              </p>
+            </div>
+          </div>
         </div>
       </div>
     </li>
   );
-}
- 
+};
+
 export default CartItem;
+
+
+
+