Able to add products to cart

src/app/page.tsx

@@ -3,7 +3,7 @@ import React, { useState } from "react";
 import { useSearchParams, useRouter } from "next/navigation";
 import { useMetaIntegratedSystemsList, useMetaProductsList } from "@/services/ecommerce/meta/hooks";
 import { styled } from "@mitodl/smoot-design";
-import { Typography } from "@mui/material";
+import { Typography, Button } from "@mui/material";
 import Container from "@mui/material/Container";
 import { getCurrentSystem } from "@/utils/system";
 import { Card } from "@/components/Card/Card";
@@ -32,6 +32,7 @@ type CartProps = {
 
 type CartBodyProps = {
   systemId: number;
+  cartItems: BasketItemWithProduct[];
 };
 
 const SelectSystemContainer = styled.div`
@@ -45,7 +46,6 @@ const ProductListContainer = styled.div`
 const SelectSystem: React.FC = () => {
   const systems = useMetaIntegratedSystemsList();
   const [selectedSystem, setSelectedSystem] = useState<string | null>(null);
-  const products = useMetaProductsList(selectedSystem || "");
   const router = useRouter();
 
   const hndSystemChange = (ev: React.ChangeEvent<HTMLSelectElement>) => {
@@ -72,16 +72,6 @@ const SelectSystem: React.FC = () => {
           <p>Loading systems...</p>
         )}
       </SelectSystemContainer>
-      {selectedSystem && products.isFetched && products.data && (
-        <ProductListContainer>
-          <Typography variant="h6">Products:</Typography>
-          <ul>
-            {products.data.results.map((product: Product) => (
-              <li key={product.id}>{product.name}</li>
-            ))}
-          </ul>
-        </ProductListContainer>
-      )}
     </>
   );
 };
@@ -106,21 +96,37 @@ const CartItemsContainer = styled.div`
   flex-grow: 1;
 `;
 
-const CartBody: React.FC<CartBodyProps> = ({ systemId }) => {
+const CartBody: React.FC<CartBodyProps> = ({ systemId, cartItems }) => {
   const basket = usePaymentsBasketList({
     integrated_system: systemId,
   }) as UseQueryResult<PaginatedBasketWithProductList>;
   const basketDetails = usePaymentsBasketRetrieve(
     basket.data?.results[0]?.id || 0,
     { enabled: !!basket.data?.count },
   ) as UseQueryResult<BasketWithProduct>;
+  let cartItemsList = cartItems;
 
-  return basketDetails.isFetched &&
+  // Update the basket with items from cartItemsList
+
+
+  if (
+    basketDetails.isFetched &&
     basketDetails?.data?.basket_items &&
-    basketDetails.data.basket_items.length > 0 ? (
+    basketDetails.data.basket_items.length > 0
+  ) {
+    cartItemsList = cartItemsList.concat(
+      basketDetails.data.basket_items.map(
+        (item: BasketItemWithProduct) => item,
+      ),
+    );
+  }
+
+  return basketDetails.isFetched &&
+    basketDetails?.data?.id &&
+    cartItemsList.length > 0 ? (
     <CartBodyContainer>
       <CartItemsContainer>
-        {basketDetails.data.basket_items.map((item: BasketItemWithProduct) => (
+        {cartItemsList.map((item: BasketItemWithProduct) => (
           <CartItem item={item} key={`ue-basket-item-${item.id}`} />
         ))}
       </CartItemsContainer>
@@ -142,16 +148,69 @@ const Cart: React.FC<CartProps> = ({ system }) => {
   const selectedSystem = systems.data?.results.find(
     (integratedSystem: IntegratedSystem) => integratedSystem.slug === system,
   );
+  const products = useMetaProductsList(selectedSystem || "");
+  const [cartItems, setCartItems] = useState<BasketItemWithProduct[]>([]);
+  const [selectedProductId, setSelectedProductId] = useState<number | null>(null);
+
+  const addToCart = () => {
+    if (!selectedProductId) return;
+
+    const selectedProduct = products.data?.results.find(
+      (product: Product) => product.id === selectedProductId,
+    );
+
+    if (
+      selectedProduct &&
+      !cartItems.some((item) => item.product.id === selectedProduct.id)
+    ) {
+      const basketItemWithProduct = {
+        id: selectedProduct.id,
+        product: selectedProduct,
+        quantity: 1,
+        price: selectedProduct.price,
+        total: selectedProduct.price,
+        product_name: selectedProduct.name,
+        product_description: selectedProduct.description,
+        product_image: selectedProduct.image,
+      };
+      setCartItems((prevItems) => [...prevItems, basketItemWithProduct]);
+    }
+  };
 
   return (
-    selectedSystem && (
+    selectedSystem &&
+    products.isFetched &&
+    products.data && (
       <CartContainer>
+        <ProductListContainer>
+          <Typography variant="h6">Products:</Typography>
+          <label htmlFor="products">Select a product:</label>
+          <select
+            id="products"
+            onChange={(e) => setSelectedProductId(Number(e.target.value))}
+          >
+            <option value="">Select a product</option>
+            {products.data.results.map((product: Product) => (
+              <option key={product.id} value={product.id}>
+                {product.name}
+              </option>
+            ))}
+          </select>
+          <Button
+            variant="contained"
+            color="primary"
+            onClick={addToCart}
+            style={{ marginLeft: "8px" }}
+          >
+            Add to Cart
+          </Button>
+        </ProductListContainer>
         <CartHeader>
           <Typography variant="h3">
             You are about to purchase the following:
           </Typography>
         </CartHeader>
-        {selectedSystem && <CartBody systemId={selectedSystem.id} />}
+        {selectedSystem && <CartBody systemId={selectedSystem.id} cartItems={cartItems} />}
       </CartContainer>
     )
   );