Improved Order API endpoints and declare better types/response models

frontend/src/components/modals/CancelOrderModal.tsx

@@ -11,18 +11,16 @@ import { Label } from "@/components/ui/label";
 import { paths } from "@/gen/api";
 import { useAlertQueue } from "@/hooks/useAlertQueue";
 import { useAuthentication } from "@/hooks/useAuth";
-
-type Order =
-  paths["/orders/user-orders"]["get"]["responses"][200]["content"]["application/json"][0];
+import type { OrderWithProduct } from "@/lib/types/orders";
 
 type RefundRequest =
   paths["/stripe/refunds/{order_id}"]["put"]["requestBody"]["content"]["application/json"];
 
 interface CancelOrderModalProps {
   isOpen: boolean;
   onOpenChange: (open: boolean) => void;
-  order: Order;
-  onOrderUpdate: (updatedOrder: Order) => void;
+  order: OrderWithProduct;
+  onOrderUpdate: (updatedOrder: OrderWithProduct) => void;
 }
 
 const CancelOrderModal: React.FC<CancelOrderModalProps> = ({
@@ -90,7 +88,7 @@ const CancelOrderModal: React.FC<CancelOrderModalProps> = ({
 
     try {
       const { data, error } = await client.PUT("/stripe/refunds/{order_id}", {
-        params: { path: { order_id: order.id } },
+        params: { path: { order_id: order.order.id } },
         body: cancellation,
       });
 
@@ -99,7 +97,10 @@ const CancelOrderModal: React.FC<CancelOrderModalProps> = ({
         console.error("Error canceling order:", error);
       } else {
         addAlert("Order successfully canceled", "success");
-        onOrderUpdate(data);
+        onOrderUpdate({
+          order: data,
+          product: order.product,
+        });
       }
 
       onOpenChange(false);

frontend/src/components/modals/EditAddressModal.tsx

@@ -9,18 +9,15 @@ import {
 } from "@/components/ui/dialog";
 import { Input } from "@/components/ui/input";
 import { Label } from "@/components/ui/label";
-import { paths } from "@/gen/api";
 import { useAlertQueue } from "@/hooks/useAlertQueue";
 import { useAuthentication } from "@/hooks/useAuth";
-
-type Order =
-  paths["/orders/user-orders"]["get"]["responses"][200]["content"]["application/json"][0];
+import type { OrderWithProduct } from "@/lib/types/orders";
 
 interface EditAddressModalProps {
   isOpen: boolean;
   onOpenChange: (open: boolean) => void;
-  order: Order;
-  onOrderUpdate: (updatedOrder: Order) => void;
+  order: OrderWithProduct;
+  onOrderUpdate: (updatedOrder: OrderWithProduct) => void;
 }
 
 const EditAddressModal: React.FC<EditAddressModalProps> = ({
@@ -32,13 +29,13 @@ const EditAddressModal: React.FC<EditAddressModalProps> = ({
   const { client } = useAuthentication();
   const { addAlert, addErrorAlert } = useAlertQueue();
   const [address, setAddress] = useState({
-    shipping_name: order.shipping_name || "",
-    shipping_address_line1: order.shipping_address_line1 || "",
-    shipping_address_line2: order.shipping_address_line2 || "",
-    shipping_city: order.shipping_city || "",
-    shipping_state: order.shipping_state || "",
-    shipping_postal_code: order.shipping_postal_code || "",
-    shipping_country: order.shipping_country || "",
+    shipping_name: order.order.shipping_name || "",
+    shipping_address_line1: order.order.shipping_address_line1 || "",
+    shipping_address_line2: order.order.shipping_address_line2 || "",
+    shipping_city: order.order.shipping_city || "",
+    shipping_state: order.order.shipping_state || "",
+    shipping_postal_code: order.order.shipping_postal_code || "",
+    shipping_country: order.order.shipping_country || "",
   });
 
   const handleInputChange = (e: React.ChangeEvent<HTMLInputElement>) => {
@@ -50,9 +47,9 @@ const EditAddressModal: React.FC<EditAddressModalProps> = ({
     e.preventDefault();
     try {
       const { data, error } = await client.PUT(
-        "/orders/update-order-address/{order_id}",
+        "/orders/{order_id}/shipping-address",
         {
-          params: { path: { order_id: order.id } },
+          params: { path: { order_id: order.order.id } },
           body: address,
         },
       );
@@ -62,7 +59,10 @@ const EditAddressModal: React.FC<EditAddressModalProps> = ({
         console.error("Error updating address:", error);
       } else {
         addAlert("Delivery address updated", "success");
-        onOrderUpdate(data);
+        onOrderUpdate({
+          order: data,
+          product: order.product,
+        });
       }
 
       onOpenChange(false);

frontend/src/components/orders/OrderCard.tsx

@@ -8,16 +8,10 @@ import {
   DropdownMenuItem,
   DropdownMenuTrigger,
 } from "@/components/ui/dropdown-menu";
-import type { paths } from "@/gen/api";
+import type { OrderWithProduct } from "@/lib/types/orders";
 import { formatPrice } from "@/lib/utils/formatNumber";
 import { normalizeStatus } from "@/lib/utils/formatString";
 
-type OrderWithProduct =
-  paths["/orders/user-orders-with-products"]["get"]["responses"][200]["content"]["application/json"][0];
-
-type Order =
-  paths["/orders/user-orders"]["get"]["responses"][200]["content"]["application/json"][0];
-
 enum OrderStatus {
   PREORDER = -1,
   PROCESSING = 0,
@@ -60,7 +54,7 @@ const canModifyStatuses = [
 const OrderCard: React.FC<{ orderWithProduct: OrderWithProduct }> = ({
   orderWithProduct: initialOrderWithProduct,
 }) => {
-  const [orderWithProduct, setOrderWithProduct] = useState(
+  const [orderWithProduct, setOrderWithProduct] = useState<OrderWithProduct>(
     initialOrderWithProduct,
   );
   const { order, product } = orderWithProduct;
@@ -92,8 +86,8 @@ const OrderCard: React.FC<{ orderWithProduct: OrderWithProduct }> = ({
 
   const unitPrice = order.price_amount / order.quantity;
 
-  const handleOrderUpdate = (updatedOrder: Order) => {
-    setOrderWithProduct((prev) => ({ ...prev, order: updatedOrder }));
+  const handleOrderUpdate = (updatedOrder: OrderWithProduct) => {
+    setOrderWithProduct(updatedOrder);
   };
 
   const canModifyOrder = () => {
@@ -281,13 +275,13 @@ const OrderCard: React.FC<{ orderWithProduct: OrderWithProduct }> = ({
       <EditAddressModal
         isOpen={isEditAddressModalOpen}
         onOpenChange={setIsEditAddressModalOpen}
-        order={order}
+        order={orderWithProduct}
         onOrderUpdate={handleOrderUpdate}
       />
       <CancelOrderModal
         isOpen={isCancelOrderModalOpen}
         onOpenChange={setIsCancelOrderModalOpen}
-        order={order}
+        order={orderWithProduct}
         onOrderUpdate={handleOrderUpdate}
       />
     </div>

frontend/src/components/pages/Orders.tsx

@@ -4,15 +4,12 @@ import { useNavigate } from "react-router-dom";
 import OrderCard from "@/components/orders/OrderCard";
 import Spinner from "@/components/ui/Spinner";
 import { Button } from "@/components/ui/button";
-import type { paths } from "@/gen/api";
 import { useAlertQueue } from "@/hooks/useAlertQueue";
 import { useAuthentication } from "@/hooks/useAuth";
 import { ApiError } from "@/lib/types/api";
+import type { OrderWithProduct } from "@/lib/types/orders";
 import ROUTES from "@/lib/types/routes";
 
-type OrderWithProduct =
-  paths["/orders/user-orders-with-products"]["get"]["responses"][200]["content"]["application/json"][number];
-
 const OrdersPage: React.FC = () => {
   const navigate = useNavigate();
   const { api, currentUser, isAuthenticated, isLoading } = useAuthentication();
@@ -25,9 +22,10 @@ const OrdersPage: React.FC = () => {
       if (isAuthenticated && currentUser) {
         setLoadingOrders(true);
         try {
-          const { data, error } = await api.client.GET(
-            "/orders/user-orders-with-products",
-          );
+          const { data, error } = await api.client.GET("/orders/me", {
+            params: { query: { include_products: true } },
+          });
+
           if (error) {
             const apiError = error as ApiError;
             if (apiError.status === 500) {
@@ -38,7 +36,7 @@ const OrdersPage: React.FC = () => {
             }
             setOrders([]);
           } else {
-            setOrders(data || []);
+            setOrders(data as OrderWithProduct[]);
           }
         } finally {
           setLoadingOrders(false);