provided creating order on checkout

src/api/order-service.ts

@@ -1,4 +1,4 @@
-import type { OrderDetailsResponse } from "../types/orders";
+import type { OrderCreateRequest, OrderCreateResponse, OrderDetailsResponse } from "../types/orders";
 import { API_BASE_URL, apiCall } from "./utils";
 
 export const fetchUserOrders = async (): Promise<OrderDetailsResponse[]> => {
@@ -54,3 +54,30 @@ export const fetchAllOrders = async (): Promise<OrderDetailsResponse[]> => {
     throw error;
   }
 };
+
+export const createOrder = async (order: OrderCreateRequest): Promise<OrderCreateResponse> => {
+  const jwtToken = localStorage.getItem("token");
+  if (!jwtToken) {
+    throw new Error("Authorization token not found. Please log in.");
+  }
+
+  try {
+    const response = await apiCall(`${API_BASE_URL}/api/orders/grpc`, {
+      method: "POST",
+      headers: {
+        Authorization: `Bearer ${jwtToken}`,
+        "Content-Type": "application/json",
+      },
+      body: JSON.stringify(order),
+    });
+
+    if (!response.ok) {
+      throw new Error(`Failed to create order: ${response.status} ${response.statusText}`);
+    }
+
+    return await response.json();
+  } catch (error) {
+    console.error("API Error creating order:", error);
+    throw error;
+  }
+};

src/pages/CartPage.tsx

@@ -27,6 +27,7 @@ import {
   useTheme,
 } from "@mui/material";
 import { useNavigate } from "react-router-dom";
+import { createOrder } from "../api/order-service.ts";
 
 const SHIPPING_COST = 19.99;
 const FREE_SHIPPING_THRESHOLD = 500;
@@ -284,9 +285,21 @@ const CartPage: React.FC = () => {
   const shipping = subtotal >= FREE_SHIPPING_THRESHOLD ? 0 : SHIPPING_COST;
   const total = subtotal + shipping;
 
-  const handleCheckout = () => {
+  const handleCheckout = async () => {
     // Generate UUID for order
-    const orderId = crypto.randomUUID();
+    const order = await createOrder({
+      items: safeCartItems.map((item) => ({
+        itemId: item.id,
+        name: item.name,
+        variantId: item.id,
+        quantity: item.quantity,
+        price: item.price,
+        imageUrl: item.image,
+        description: item.name,
+        isReturnable: true,
+      })),
+    });
+    const orderId = order.orderId
     navigate(`/order/${orderId}`);
   };
 

src/types/orders.ts

@@ -16,6 +16,35 @@ export interface OrderDetailsResponse {
   items: OrderItemDetails[];
 }
 
+export interface OrderCreateRequest {
+  items: OrderCreateItemDto[];
+}
+
+export interface OrderCreateItemDto {
+  itemId: string;
+  name: string;
+  variantId: string;
+  quantity: number;
+  price: number;
+  imageUrl: string;
+  description: string;
+  isReturnable: boolean;
+}
+
+export interface FailedReservationVariantDto {
+  variantId: string;
+  requestedQuantity: number;
+  availableQuantity: number;
+}
+
+export interface OrderCreateResponse {
+  isSuccess: boolean;
+  orderId: string;
+  reservedVariantIds: string[];
+  failedVariants: FailedReservationVariantDto[];
+}
+
+
 export const getStatusLabel = (status: string): string => {
   return STATUS_LABELS[status as OrderStatus] || status;
 };