call works but cors error

Author: cp-at-mit

package.json

@@ -20,7 +20,7 @@
     "@emotion/styled": "^11.11.0",
     "@faker-js/faker": "^9.0.0",
     "@mitodl/smoot-design": "^1.1.1",
-    "@mitodl/unified-ecommerce-api-axios": "^2024.12.20",
+    "@mitodl/unified-ecommerce-api-axios": "^2025.1.24",
     "@mui/material": "^6.1.8",
     "@mui/material-nextjs": "^6.1.8",
     "@remixicon/react": "^4.2.0",

src/app/page.tsx

@@ -112,16 +112,16 @@ const CartBody: React.FC<CartBodyProps & { refreshKey: number }> = ({
     },
   ) as UseQueryResult<BasketWithProduct>;
 
+  // remove item from basket
   const removeItem = usePaymentsBasketitemsDestroy();
 
-  const handleRemoveItem = (itemId: number) => {
-    console.log("Removing item", itemId);
-    removeItem.mutate(itemId, {
-      onSuccess: () => {
-        // Optionally, refetch the basket details or update the state to reflect the removal
-        basket.refetch();
-      },
-    });
+  const handleRemoveItem = async (id: number) => {
+    try {
+      await removeItem.mutateAsync(id);
+      setRefreshKey((prev) => prev + 1);
+    } catch (error) {
+      console.error("Failed to remove item from cart", error);
+    }
   };
 
   return basketDetails.isFetched &&

src/services/ecommerce/payments/hooks.ts

@@ -10,6 +10,7 @@ import type {
   PaymentsApiPaymentsBasketsCreateFromProductCreateRequest,
   PaymentsApiPaymentsBasketsAddDiscountCreateRequest,
   PaymentsApiPaymentsCheckoutCreateRequest,
+  PaymentsApiPaymentsBasketitemsDestroyRequest,
 } from "@mitodl/unified-ecommerce-api-axios/v0";
 
 type ExtraQueryOpts = Omit<UseQueryOptions, "queryKey" | "queryFn">;
@@ -42,6 +43,20 @@ const usePaymentsBasketRetrieve = (
   });
 };
 
+const usePaymentsBasketitemsDestroy = () => {
+  const client = useQueryClient();
+
+  return useMutation({
+    mutationFn: (id: number) =>
+      paymentsApi
+        .paymentsBasketitemsDestroy({ id })
+        .then((response) => response.data),
+    onSuccess: () => {
+      client.invalidateQueries({ queryKey: ["paymentsBaskets"] });
+    },
+  });
+};
+
 const usePaymentsBasketCreateFromProduct = () => {
   const client = useQueryClient();
   return useMutation({
@@ -70,17 +85,6 @@ const usePaymentsBasketAddDiscount = () => {
   });
 };
 
-const usePaymentsBasketitemsDestroy = () => {
-  const client = useQueryClient();
-  return useMutation({
-    mutationFn: (id: number) =>
-      paymentsApi.paymentsBasketitemsDestroy({ id }).then((response) => response.data),
-    onSuccess: () => {
-      client.invalidateQueries(["paymentsBaskets"]);
-    },
-  });
-}
-
 const usePaymentsCheckoutStartCheckout = () => {
   return useMutation({
     mutationFn: (request: PaymentsApiPaymentsCheckoutCreateRequest) =>

yarn.lock

@@ -1287,13 +1287,13 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@mitodl/unified-ecommerce-api-axios@npm:^2024.12.20":
-  version: 2024.12.20
-  resolution: "@mitodl/unified-ecommerce-api-axios@npm:2024.12.20"
+"@mitodl/unified-ecommerce-api-axios@npm:^2025.1.24":
+  version: 2025.1.24
+  resolution: "@mitodl/unified-ecommerce-api-axios@npm:2025.1.24"
   dependencies:
     "@types/node": "npm:^20.11.19"
     axios: "npm:^1.6.5"
-  checksum: 10c0/4690438e59a84b5e6673912dbebcf886b966b903d631d44ea6b2449ed8c835bd1a9fddd3a955e776f99abd09c6d3e1d6d14b1eb52fdb6513fda7ae08e28b4380
+  checksum: 10c0/e5a3291ef2c6d13ebaf5fef325e643650b33269b1c9b03d65ba499886da4af6aa8b771a4da888f656d3a9d3a707581d477efd9fda4a69af1140ff7da6cc963e8
   languageName: node
   linkType: hard
 
@@ -10001,7 +10001,7 @@ __metadata:
     "@emotion/styled": "npm:^11.11.0"
     "@faker-js/faker": "npm:^9.0.0"
     "@mitodl/smoot-design": "npm:^1.1.1"
-    "@mitodl/unified-ecommerce-api-axios": "npm:^2024.12.20"
+    "@mitodl/unified-ecommerce-api-axios": "npm:^2025.1.24"
     "@mui/material": "npm:^6.1.8"
     "@mui/material-nextjs": "npm:^6.1.8"
     "@remixicon/react": "npm:^4.2.0"