Enhance checkout flow with new components and validation

- Added AddressForm and CheckoutForm components for user input during checkout. - Implemented validation using Zod and VeeValidate for billing address fields. - Created OrderSummary and MockPayPalButton components for order confirmation and payment simulation. - Updated CartSheet and CartSidebar to navigate to the new checkout page at '/kasse'. - Introduced new API endpoints for validating checkout data and creating orders. - Enhanced user experience with responsive design and error handling. These changes complete the checkout functionality, allowing users to enter billing information, simulate payment, and confirm orders.
2025-11-03 15:38:16 +01:00
parent 47fe14c6cc
commit 527379a2cd
44 changed files with 4957 additions and 142 deletions
--- a/server/api/checkout/validate.post.ts
+++ b/server/api/checkout/validate.post.ts
@@ -0,0 +1,74 @@
+/**
+ * POST /api/checkout/validate
+ *
+ * Validates checkout data before creating an order
+ *
+ * Request Body:
+ * {
+ *   salutation: 'male' | 'female' | 'other',
+ *   firstName: string,
+ *   lastName: string,
+ *   dateOfBirth: string (YYYY-MM-DD),
+ *   street: string,
+ *   postCode: string (5 digits),
+ *   city: string,
+ *   countryCode: string (ISO 3166-1 alpha-2, default: 'DE'),
+ *   saveAddress: boolean (optional)
+ * }
+ *
+ * Response:
+ * {
+ *   success: true,
+ *   message: string
+ * }
+ *
+ * Errors:
+ * - 401: Not authenticated
+ * - 400: Empty cart
+ * - 422: Validation errors
+ */
+
+import { checkoutSchema } from '../../utils/schemas/checkout'
+
+export default defineEventHandler(async (event) => {
+  // 1. Require authentication
+  const { user } = await requireUserSession(event)
+
+  // 2. Check if cart has items
+  const cart = await getOrCreateCart(event)
+  const cartSummary = await getCartWithItems(cart.id)
+
+  if (cartSummary.itemCount === 0) {
+    throw createError({
+      statusCode: 400,
+      statusMessage: 'Cart is empty',
+      message: 'Dein Warenkorb ist leer. Füge Produkte hinzu, um fortzufahren.',
+    })
+  }
+
+  // 3. Validate checkout data
+  const body = await readBody(event)
+
+  try {
+    const validatedData = await checkoutSchema.parseAsync(body)
+
+    return {
+      success: true,
+      message: 'Checkout-Daten sind gültig',
+      data: validatedData,
+    }
+  } catch (error: any) {
+    // Zod validation errors
+    if (error.errors) {
+      throw createError({
+        statusCode: 422,
+        statusMessage: 'Validation error',
+        message: 'Bitte überprüfe deine Eingaben',
+        data: error.errors,
+      })
+    }
+
+    // Unknown error
+    throw error
+  }
+})
--- a/server/api/orders/[id].get.ts
+++ b/server/api/orders/[id].get.ts
@@ -0,0 +1,89 @@
+/**
+ * GET /api/orders/[id]
+ *
+ * Fetch order details by ID
+ *
+ * Security:
+ * - Requires authentication
+ * - Users can only access their own orders
+ *
+ * Response:
+ * {
+ *   id: string
+ *   orderNumber: string
+ *   totalAmount: string
+ *   status: string
+ *   billingAddress: BillingAddress
+ *   items: OrderItem[]
+ *   createdAt: Date
+ * }
+ */
+
+import { eq, and } from 'drizzle-orm'
+import { orders, orderItems } from '../../database/schema'
+
+export default defineEventHandler(async (event) => {
+  // Require authentication
+  const { user } = await requireUserSession(event)
+
+  // Get order ID from URL parameter
+  const orderId = getRouterParam(event, 'id')
+
+  if (!orderId) {
+    throw createError({
+      statusCode: 400,
+      statusMessage: 'Order ID is required',
+    })
+  }
+
+  const db = useDatabase()
+
+  // Fetch order with items
+  const order = await db.query.orders.findFirst({
+    where: and(eq(orders.id, orderId), eq(orders.userId, user.id)),
+    with: {
+      items: {
+        with: {
+          product: true,
+        },
+      },
+    },
+  })
+
+  if (!order) {
+    throw createError({
+      statusCode: 404,
+      statusMessage: 'Order not found',
+    })
+  }
+
+  // Transform items to include price and product snapshot data
+  const transformedItems = order.items.map((item: any) => ({
+    id: item.id,
+    orderId: item.orderId,
+    productId: item.productId,
+    quantity: item.quantity,
+    priceSnapshot: item.priceSnapshot,
+    productSnapshot: item.productSnapshot,
+    product: {
+      id: item.product.id,
+      name: item.product.name,
+      description: item.product.description,
+      imageUrl: item.product.imageUrl,
+    },
+    subtotal: Number.parseFloat(item.priceSnapshot) * item.quantity,
+  }))
+
+  return {
+    id: order.id,
+    orderNumber: order.orderNumber,
+    totalAmount: order.totalAmount,
+    status: order.status,
+    billingAddress: order.billingAddress,
+    items: transformedItems,
+    paymentId: order.paymentId,
+    paymentCompletedAt: order.paymentCompletedAt,
+    createdAt: order.createdAt,
+    updatedAt: order.updatedAt,
+  }
+})
--- a/server/api/orders/confirm/[id].post.ts
+++ b/server/api/orders/confirm/[id].post.ts
@@ -0,0 +1,85 @@
+/**
+ * POST /api/orders/confirm/[id]
+ *
+ * Confirm an order after mock payment
+ *
+ * Security:
+ * - Requires authentication
+ * - Users can only confirm their own orders
+ * - Order must be in 'pending' status
+ *
+ * Behavior:
+ * - Updates order status: 'pending' → 'completed'
+ * - Stores completion timestamp
+ * - Clears user's cart
+ * - Returns order details
+ *
+ * Response:
+ * {
+ *   success: true
+ *   order: Order
+ *   message: string
+ * }
+ */
+
+import { eq, and } from 'drizzle-orm'
+import { orders, cartItems } from '../../../database/schema'
+
+export default defineEventHandler(async (event) => {
+  // Require authentication
+  const { user } = await requireUserSession(event)
+
+  // Get order ID from URL parameter
+  const orderId = getRouterParam(event, 'id')
+
+  if (!orderId) {
+    throw createError({
+      statusCode: 400,
+      statusMessage: 'Order ID is required',
+    })
+  }
+
+  const db = useDatabase()
+
+  // Fetch order
+  const order = await db.query.orders.findFirst({
+    where: and(eq(orders.id, orderId), eq(orders.userId, user.id)),
+  })
+
+  if (!order) {
+    throw createError({
+      statusCode: 404,
+      statusMessage: 'Order not found',
+    })
+  }
+
+  // Validate order status
+  if (order.status !== 'pending') {
+    throw createError({
+      statusCode: 400,
+      statusMessage: `Order cannot be confirmed. Current status: ${order.status}`,
+    })
+  }
+
+  // Update order status to completed
+  const [updatedOrder] = await db
+    .update(orders)
+    .set({
+      status: 'completed',
+      paymentCompletedAt: new Date(),
+      paymentId: `MOCK-${Date.now()}`, // Mock payment ID
+      updatedAt: new Date(),
+    })
+    .where(eq(orders.id, orderId))
+    .returning()
+
+  // Clear user's cart
+  const cart = await getOrCreateCart(event)
+  await db.delete(cartItems).where(eq(cartItems.cartId, cart.id))
+
+  return {
+    success: true,
+    order: updatedOrder,
+    message: 'Bestellung erfolgreich bestätigt',
+  }
+})
--- a/server/api/orders/create.post.ts
+++ b/server/api/orders/create.post.ts
@@ -0,0 +1,145 @@
+/**
+ * POST /api/orders/create
+ *
+ * Create a new order from the user's cart
+ *
+ * Request Body:
+ * {
+ *   salutation: 'male' | 'female' | 'other'
+ *   firstName: string
+ *   lastName: string
+ *   dateOfBirth: string (YYYY-MM-DD)
+ *   street: string
+ *   postCode: string
+ *   city: string
+ *   countryCode: string
+ *   saveAddress: boolean (optional, default: false)
+ * }
+ *
+ * Behavior:
+ * - Creates order with status 'pending'
+ * - Copies cart items to order_items with price snapshot
+ * - Stores billing address snapshot in order
+ * - Generates unique order number (format: EXP-2025-00001)
+ * - Optionally saves address to user profile
+ * - Does NOT clear cart (cart is cleared after order confirmation)
+ *
+ * Response:
+ * {
+ *   success: true
+ *   orderId: string
+ *   orderNumber: string
+ *   message: string
+ * }
+ */
+
+import { checkoutSchema } from '../../utils/schemas/checkout'
+import { orders, orderItems, users } from '../../database/schema'
+import { eq, desc, sql } from 'drizzle-orm'
+
+export default defineEventHandler(async (event) => {
+  // Require authentication
+  const { user } = await requireUserSession(event)
+
+  // Validate request body
+  const body = await readBody(event)
+  const checkoutData = await checkoutSchema.parseAsync(body)
+
+  const db = useDatabase()
+
+  // Get user's cart
+  const cart = await getOrCreateCart(event)
+  const cartSummary = await getCartWithItems(cart.id)
+
+  // Validate cart has items
+  if (cartSummary.items.length === 0) {
+    throw createError({
+      statusCode: 400,
+      statusMessage: 'Warenkorb ist leer',
+    })
+  }
+
+  // Generate unique order number
+  // Format: EXP-YYYY-NNNNN (e.g., EXP-2025-00001)
+  const year = new Date().getFullYear()
+
+  // Get the highest order number for this year
+  const lastOrder = await db.query.orders.findFirst({
+    where: sql`${orders.orderNumber} LIKE ${`EXP-${year}-%`}`,
+    orderBy: desc(orders.createdAt),
+  })
+
+  let sequenceNumber = 1
+  if (lastOrder) {
+    // Extract sequence number from last order number (EXP-2025-00123 -> 123)
+    const match = lastOrder.orderNumber.match(/EXP-\d{4}-(\d{5})/)
+    if (match) {
+      sequenceNumber = Number.parseInt(match[1], 10) + 1
+    }
+  }
+
+  const orderNumber = `EXP-${year}-${String(sequenceNumber).padStart(5, '0')}`
+
+  // Prepare billing address (exclude saveAddress flag)
+  const billingAddress = {
+    salutation: checkoutData.salutation,
+    firstName: checkoutData.firstName,
+    lastName: checkoutData.lastName,
+    dateOfBirth: checkoutData.dateOfBirth,
+    street: checkoutData.street,
+    postCode: checkoutData.postCode,
+    city: checkoutData.city,
+    countryCode: checkoutData.countryCode,
+  }
+
+  // Create order
+  const [order] = await db
+    .insert(orders)
+    .values({
+      orderNumber,
+      userId: user.id,
+      totalAmount: cartSummary.total.toFixed(2),
+      status: 'pending', // Order starts as pending (awaiting mock payment)
+      billingAddress,
+    })
+    .returning()
+
+  // Create order items with price snapshots
+  const orderItemsData = cartSummary.items.map((item) => ({
+    orderId: order.id,
+    productId: item.productId,
+    quantity: item.quantity,
+    priceSnapshot: item.product.price, // Snapshot price at time of order
+    productSnapshot: {
+      name: item.product.name,
+      description: item.product.description,
+      navProductId: item.product.navProductId,
+      category: item.product.category,
+    },
+  }))
+
+  await db.insert(orderItems).values(orderItemsData)
+
+  // Optionally save address to user profile
+  if (checkoutData.saveAddress) {
+    await db
+      .update(users)
+      .set({
+        salutation: checkoutData.salutation,
+        dateOfBirth: new Date(checkoutData.dateOfBirth),
+        street: checkoutData.street,
+        postCode: checkoutData.postCode,
+        city: checkoutData.city,
+        countryCode: checkoutData.countryCode,
+        updatedAt: new Date(),
+      })
+      .where(eq(users.id, user.id))
+  }
+
+  return {
+    success: true,
+    orderId: order.id,
+    orderNumber: order.orderNumber,
+    message: 'Bestellung erfolgreich erstellt',
+  }
+})
--- a/server/api/payment/mock-paypal.post.ts
+++ b/server/api/payment/mock-paypal.post.ts
@@ -0,0 +1,87 @@
+/**
+ * POST /api/payment/mock-paypal
+ *
+ * Mock PayPal payment endpoint for MVP development
+ *
+ * This endpoint simulates a PayPal payment without making actual API calls.
+ * It's used for testing the checkout flow end-to-end before real PayPal integration.
+ *
+ * Request Body:
+ * {
+ *   orderId: string (UUID)
+ * }
+ *
+ * Behavior:
+ * - Validates order exists and belongs to logged-in user
+ * - Validates order status is 'pending'
+ * - Returns immediate "success" response with mock payment ID
+ * - Does NOT update order status (that happens in /api/orders/confirm/[id])
+ *
+ * Response:
+ * {
+ *   success: true,
+ *   paymentId: string (mock ID),
+ *   message: string
+ * }
+ *
+ * Errors:
+ * - 401: Not authenticated
+ * - 400: Invalid request
+ * - 404: Order not found
+ */
+
+import { z } from 'zod'
+import { eq, and } from 'drizzle-orm'
+import { orders } from '../../database/schema'
+
+const mockPaymentSchema = z.object({
+  orderId: z.string().uuid('Invalid order ID'),
+})
+
+export default defineEventHandler(async (event) => {
+  // 1. Require authentication
+  const { user } = await requireUserSession(event)
+
+  // 2. Validate request body
+  const body = await readBody(event)
+  const { orderId } = await mockPaymentSchema.parseAsync(body)
+
+  const db = useDatabase()
+
+  // 3. Fetch order
+  const order = await db.query.orders.findFirst({
+    where: and(eq(orders.id, orderId), eq(orders.userId, user.id)),
+  })
+
+  if (!order) {
+    throw createError({
+      statusCode: 404,
+      statusMessage: 'Order not found',
+      message: 'Bestellung wurde nicht gefunden',
+    })
+  }
+
+  // 4. Validate order status
+  if (order.status !== 'pending') {
+    throw createError({
+      statusCode: 400,
+      statusMessage: 'Invalid order status',
+      message: `Bestellung kann nicht bezahlt werden. Status: ${order.status}`,
+    })
+  }
+
+  // 5. Simulate PayPal processing delay (optional)
+  // In real implementation, this would be replaced with actual PayPal API call
+  await new Promise((resolve) => setTimeout(resolve, 500)) // 500ms delay
+
+  // 6. Generate mock payment ID
+  const mockPaymentId = `MOCK-PAYPAL-${Date.now()}-${orderId.slice(0, 8)}`
+
+  // 7. Return success response
+  // Note: Order status is NOT updated here. That happens in /api/orders/confirm/[id]
+  return {
+    success: true,
+    paymentId: mockPaymentId,
+    message: 'Mock-Zahlung erfolgreich',
+  }
+})