Working

mitodl · Jan 13, 2025 · c3518e4 · c3518e4
1 parent 9d70b20
commit c3518e4
Show file tree

Hide file tree

Showing 3 changed files with 45 additions and 52 deletions.
diff --git a/src/app/page.tsx b/src/app/page.tsx
@@ -1,7 +1,10 @@
 "use client";
 import React, { useState } from "react";
 import { useSearchParams, useRouter } from "next/navigation";
-import { useMetaIntegratedSystemsList, useMetaProductsList } from "@/services/ecommerce/meta/hooks";
+import {
+  useMetaIntegratedSystemsList,
+  useMetaProductsList,
+} from "@/services/ecommerce/meta/hooks";
 import { styled } from "@mitodl/smoot-design";
 import { Typography, Button } from "@mui/material";
 import Container from "@mui/material/Container";
@@ -19,6 +22,7 @@ import type {
 import {
   usePaymentsBasketList,
   usePaymentsBasketRetrieve,
+  usePaymentsBasketCreateFromProduct,
 } from "@/services/ecommerce/payments/hooks";
 import {
   BasketItemWithProduct,
@@ -96,41 +100,31 @@ const CartItemsContainer = styled.div`
   flex-grow: 1;
 `;
 
-const CartBody: React.FC<CartBodyProps> = ({ systemId, cartItems }) => {
+const CartBody: React.FC<CartBodyProps & { refreshKey: number }> = ({
+  systemId,
+  refreshKey,
+}) => {
   const basket = usePaymentsBasketList({
     integrated_system: systemId,
   }) as UseQueryResult<PaginatedBasketWithProductList>;
   const basketDetails = usePaymentsBasketRetrieve(
     basket.data?.results[0]?.id || 0,
-    { enabled: !!basket.data?.count },
+    {
+      enabled: !!basket.data?.count,
+      queryKey: ["basketDetails", systemId, refreshKey], // Add refreshKey to query key
+    },
   ) as UseQueryResult<BasketWithProduct>;
-  let cartItemsList = cartItems;
-
-  // Update the basket with items from cartItemsList
-
-
-  if (
-    basketDetails.isFetched &&
-    basketDetails?.data?.basket_items &&
-    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 ? (
+    basketDetails.data.basket_items.length > 0 ? (
     <CartBodyContainer>
       <CartItemsContainer>
-        {cartItemsList.map((item: BasketItemWithProduct) => (
+        {basketDetails.data.basket_items.map((item: BasketItemWithProduct) => (
           <CartItem item={item} key={`ue-basket-item-${item.id}`} />
         ))}
       </CartItemsContainer>
-      <CartSummary cartId={basketDetails.data.id} />
+      <CartSummary cartId={basketDetails.data.id} refreshKey={refreshKey} />
     </CartBodyContainer>
   ) : (
     <CartBodyContainer>
@@ -148,32 +142,29 @@ 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 products = useMetaProductsList(system || "");
+  const createBasketFromProduct = usePaymentsBasketCreateFromProduct();
+  const [selectedProductId, setSelectedProductId] = useState<number | null>(
+    null,
+  );
+  const [refreshKey, setRefreshKey] = useState(0);
 
-    const selectedProduct = products.data?.results.find(
+  const addToCart = async () => {
+    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]);
+    try {
+      const response = await createBasketFromProduct.mutateAsync({
+        sku: selectedProduct.sku,
+        system_slug: selectedSystem?.slug,
+      });
+
+      if (response && response.id) {
+        setRefreshKey((prev) => prev + 1); // Increment refreshKey to trigger updates
+      }
+    } catch (error) {
+      console.error("Failed to add product to cart", error);
     }
   };
 
@@ -210,7 +201,9 @@ const Cart: React.FC<CartProps> = ({ system }) => {
             You are about to purchase the following:
           </Typography>
         </CartHeader>
-        {selectedSystem && <CartBody systemId={selectedSystem.id} cartItems={cartItems} />}
+        {selectedSystem && (
+          <CartBody systemId={selectedSystem.id} refreshKey={refreshKey} />
+        )}
       </CartContainer>
     )
   );

diff --git a/src/page-components/CartSummary/CartSummary.tsx b/src/page-components/CartSummary/CartSummary.tsx
@@ -21,6 +21,7 @@ import { BasketWithProduct } from "@mitodl/unified-ecommerce-api-axios/v0";
 
 type CartSummaryProps = {
   cartId: number;
+  refreshKey: number;
 };
 
 type CartSummaryDiscountProps = {
@@ -102,11 +103,10 @@ const CartSummaryDiscount: React.FC<CartSummaryDiscountProps> = ({
   );
 };
 
-const CartSummary: React.FC<CartSummaryProps> = (props) => {
-  const { cartId } = props;
-  const basket = usePaymentsBasketRetrieve(
-    cartId,
-  ) as UseQueryResult<BasketWithProduct>;
+const CartSummary: React.FC<CartSummaryProps> = ({ cartId, refreshKey }) => {
+  const basket = usePaymentsBasketRetrieve(cartId, {
+    queryKey: ["basket", cartId, refreshKey], // Include refreshKey in the query key
+  }) as UseQueryResult<BasketWithProduct>;
 
   return (
     basket.data && (

diff --git a/src/services/ecommerce/payments/hooks.ts b/src/services/ecommerce/payments/hooks.ts
@@ -38,7 +38,7 @@ const usePaymentsBasketRetrieve = (id: number, opts: ExtraQueryOpts = {}) => {
   });
 };
 
-const usePaymentsBaksetCreateFromProduct = () => {
+const usePaymentsBasketCreateFromProduct = () => {
   const client = useQueryClient();
   return useMutation({
     mutationFn: (
@@ -78,7 +78,7 @@ const usePaymentsCheckoutStartCheckout = () => {
 export {
   usePaymentsBasketList,
   usePaymentsBasketRetrieve,
-  usePaymentsBaksetCreateFromProduct,
+  usePaymentsBasketCreateFromProduct,
   usePaymentsBasketAddDiscount,
   usePaymentsCheckoutStartCheckout,
 };