Add new routes for shopping cart and checkout pages in market module

- Introduce routes for the Shopping Cart and Checkout pages, enhancing user navigation within the market module.
- Implement a redirect for the Market Dashboard to improve user flow.
- Add an alias for clearCheckout for consistency in the market store functions.

src/modules/market/index.ts

@@ -90,6 +90,28 @@ export const marketModule: ModulePlugin = {
         title: 'Market Dashboard',
         requiresAuth: true
       }
+    },
+    {
+      path: '/market-dashboard',
+      redirect: '/market/dashboard'
+    },
+    {
+      path: '/cart',
+      name: 'cart',
+      component: () => import('./views/CartPage.vue'),
+      meta: {
+        title: 'Shopping Cart',
+        requiresAuth: false
+      }
+    },
+    {
+      path: '/checkout/:stallId',
+      name: 'checkout',
+      component: () => import('./views/CheckoutPage.vue'),
+      meta: {
+        title: 'Checkout',
+        requiresAuth: false
+      }
     }
   ] as RouteRecordRaw[],
 

src/modules/market/stores/market.ts

@@ -860,6 +860,7 @@ export const useMarketStore = defineStore('market', () => {
     clearAllStallCarts,
     setCheckoutCart,
     clearCheckout,
+    clearCheckoutCart: clearCheckout, // Alias for consistency
     setShippingZone,
     createOrder,
     updateOrderStatus,

src/modules/market/views/CartPage.vue

@@ -0,0 +1,9 @@
+<template>
+  <div class="container mx-auto px-4 py-8 max-w-6xl">
+    <ShoppingCart />
+  </div>
+</template>
+
+<script setup lang="ts">
+import ShoppingCart from '../components/ShoppingCart.vue'
+</script>

src/modules/market/views/CheckoutPage.vue

@@ -0,0 +1,397 @@
+<template>
+  <div class="container mx-auto px-4 py-8 max-w-4xl">
+    <!-- Loading State -->
+    <div v-if="isLoading" class="flex justify-center items-center min-h-64">
+      <div class="animate-spin rounded-full h-12 w-12 border-b-2 border-primary"></div>
+    </div>
+
+    <!-- Error State -->
+    <div v-else-if="error || !checkoutCart" class="text-center py-12">
+      <h2 class="text-2xl font-bold text-red-600 mb-4">Checkout Error</h2>
+      <p class="text-muted-foreground mb-4">{{ error || 'Cart not found' }}</p>
+      <Button @click="$router.push('/cart')" variant="outline">
+        Return to Cart
+      </Button>
+    </div>
+
+    <!-- Checkout Content -->
+    <div v-else class="space-y-8">
+      <!-- Header -->
+      <div class="text-center">
+        <h1 class="text-3xl font-bold text-foreground mb-2">Checkout</h1>
+        <p class="text-muted-foreground">{{ stallName }}</p>
+      </div>
+
+      <!-- Order Review -->
+      <Card>
+        <CardHeader>
+          <CardTitle>Order Review</CardTitle>
+          <CardDescription>Review your items before placing the order</CardDescription>
+        </CardHeader>
+        <CardContent>
+          <!-- Cart Items -->
+          <div class="space-y-4 mb-6">
+            <div 
+              v-for="item in checkoutCart.products" 
+              :key="item.product.id"
+              class="flex items-center justify-between p-4 border border-border rounded-lg"
+            >
+              <div class="flex items-center space-x-4">
+                <!-- Product Image -->
+                <div class="w-16 h-16 bg-muted rounded-lg flex items-center justify-center">
+                  <img 
+                    v-if="item.product.images?.[0]" 
+                    :src="item.product.images[0]" 
+                    :alt="item.product.name"
+                    class="w-full h-full object-cover rounded-lg"
+                  />
+                  <Package v-else class="w-8 h-8 text-muted-foreground" />
+                </div>
+                
+                <!-- Product Details -->
+                <div>
+                  <h3 class="font-semibold text-foreground">{{ item.product.name }}</h3>
+                  <p class="text-sm text-muted-foreground">{{ formatPrice(item.product.price, item.product.currency) }} each</p>
+                  <p class="text-sm text-muted-foreground">Quantity: {{ item.quantity }}</p>
+                </div>
+              </div>
+              
+              <!-- Item Total -->
+              <div class="text-right">
+                <p class="font-semibold text-foreground">
+                  {{ formatPrice(item.product.price * item.quantity, item.product.currency) }}
+                </p>
+              </div>
+            </div>
+          </div>
+
+          <!-- Order Summary -->
+          <div class="border-t border-border pt-4">
+            <div class="space-y-2">
+              <div class="flex justify-between text-sm">
+                <span class="text-muted-foreground">Subtotal</span>
+                <span class="text-foreground">{{ formatPrice(orderSubtotal, checkoutCart.currency) }}</span>
+              </div>
+              <div class="flex justify-between text-sm">
+                <span class="text-muted-foreground">Shipping</span>
+                <span class="text-foreground">
+                  {{ selectedShippingZone ? formatPrice(selectedShippingZone.cost, checkoutCart.currency) : 'Select zone' }}
+                </span>
+              </div>
+              <div class="flex justify-between text-lg font-semibold border-t border-border pt-2">
+                <span>Total</span>
+                <span class="text-green-600">{{ formatPrice(orderTotal, checkoutCart.currency) }}</span>
+              </div>
+            </div>
+          </div>
+        </CardContent>
+      </Card>
+
+      <!-- Shipping Information -->
+      <Card v-if="!orderConfirmed">
+        <CardHeader>
+          <CardTitle>Shipping Information</CardTitle>
+          <CardDescription>Select your shipping zone</CardDescription>
+        </CardHeader>
+        <CardContent>
+          <!-- Shipping Zones -->
+          <div v-if="availableShippingZones.length > 0" class="space-y-3">
+            <div 
+              v-for="zone in availableShippingZones"
+              :key="zone.id"
+              @click="selectShippingZone(zone)"
+              :class="[
+                'p-4 border rounded-lg cursor-pointer transition-colors',
+                selectedShippingZone?.id === zone.id 
+                  ? 'border-primary bg-primary/10' 
+                  : 'border-border hover:border-primary/50'
+              ]"
+            >
+              <div class="flex justify-between items-center">
+                <div>
+                  <h3 class="font-medium text-foreground">{{ zone.name }}</h3>
+                  <p class="text-sm text-muted-foreground">{{ zone.countries?.join(', ') || 'Available' }}</p>
+                </div>
+                <div class="text-right">
+                  <p class="font-semibold text-foreground">
+                    {{ formatPrice(zone.cost, checkoutCart.currency) }}
+                  </p>
+                  <p class="text-xs text-muted-foreground">shipping</p>
+                </div>
+              </div>
+            </div>
+          </div>
+          
+          <div v-else class="text-center py-6">
+            <p class="text-muted-foreground">No shipping zones available</p>
+          </div>
+
+          <!-- Confirm Order Button -->
+          <div class="mt-6">
+            <Button 
+              @click="confirmOrder"
+              :disabled="!selectedShippingZone"
+              class="w-full"
+              size="lg"
+            >
+              Confirm Order
+            </Button>
+          </div>
+        </CardContent>
+      </Card>
+
+      <!-- Contact & Payment Information -->
+      <Card v-if="orderConfirmed">
+        <CardHeader>
+          <CardTitle>Contact & Payment Information</CardTitle>
+          <CardDescription>Provide your details for order processing</CardDescription>
+        </CardHeader>
+        <CardContent class="space-y-6">
+          <!-- Contact Form -->
+          <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
+            <div>
+              <Label for="email">Email (optional)</Label>
+              <Input 
+                id="email"
+                v-model="contactData.email"
+                type="email"
+                placeholder="your@email.com"
+              />
+              <p class="text-xs text-muted-foreground mt-1">Merchant may not use email</p>
+            </div>
+            
+            <div>
+              <Label for="npub">Alternative Npub (optional)</Label>
+              <Input 
+                id="npub"
+                v-model="contactData.npub"
+                placeholder="npub..."
+              />
+              <p class="text-xs text-muted-foreground mt-1">Different Npub for communication</p>
+            </div>
+          </div>
+
+          <div>
+            <Label for="address">Shipping Address</Label>
+            <Textarea 
+              id="address"
+              v-model="contactData.address"
+              placeholder="Full shipping address..."
+              rows="3"
+            />
+            <p class="text-xs text-muted-foreground mt-1">Required for physical shipping</p>
+          </div>
+
+          <div>
+            <Label for="message">Message to Merchant (optional)</Label>
+            <Textarea 
+              id="message"
+              v-model="contactData.message"
+              placeholder="Any special instructions or notes..."
+              rows="3"
+            />
+          </div>
+
+          <!-- Payment Method Selection -->
+          <div>
+            <Label>Payment Method</Label>
+            <div class="flex gap-3 mt-2">
+              <div 
+                v-for="method in paymentMethods"
+                :key="method.value"
+                @click="paymentMethod = method.value"
+                :class="[
+                  'p-3 border rounded-lg cursor-pointer text-center flex-1 transition-colors',
+                  paymentMethod === method.value 
+                    ? 'border-primary bg-primary/10' 
+                    : 'border-border hover:border-primary/50'
+                ]"
+              >
+                <p class="font-medium">{{ method.label }}</p>
+              </div>
+            </div>
+          </div>
+
+          <!-- Place Order Button -->
+          <div class="pt-4 border-t border-border">
+            <Button 
+              @click="placeOrder"
+              :disabled="isPlacingOrder || !contactData.address"
+              class="w-full"
+              size="lg"
+            >
+              <span v-if="isPlacingOrder" class="animate-spin mr-2">⚡</span>
+              Place Order - {{ formatPrice(orderTotal, checkoutCart.currency) }}
+            </Button>
+            <p v-if="!contactData.address" class="text-xs text-destructive mt-2 text-center">
+              Shipping address is required
+            </p>
+          </div>
+        </CardContent>
+      </Card>
+
+      <!-- Order Placed Success -->
+      <Card v-if="orderPlaced">
+        <CardContent class="text-center py-8">
+          <CheckCircle class="w-16 h-16 text-green-600 mx-auto mb-4" />
+          <h3 class="text-xl font-semibold text-foreground mb-2">Order Placed Successfully!</h3>
+          <p class="text-muted-foreground mb-6">Your order has been sent to the merchant.</p>
+          <div class="flex gap-3 justify-center">
+            <Button @click="$router.push('/market')" variant="outline">
+              Continue Shopping
+            </Button>
+            <Button @click="$router.push('/market/dashboard')" variant="default">
+              View Orders
+            </Button>
+          </div>
+        </CardContent>
+      </Card>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref, computed, onMounted } from 'vue'
+import { useRoute, useRouter } from 'vue-router'
+import { useMarketStore } from '@/stores/market'
+import { 
+  Card, 
+  CardHeader, 
+  CardTitle, 
+  CardDescription, 
+  CardContent 
+} from '@/components/ui/card'
+import { Button } from '@/components/ui/button'
+import { Input } from '@/components/ui/input'
+import { Textarea } from '@/components/ui/textarea'
+import { Label } from '@/components/ui/label'
+import { 
+  Package, 
+  CheckCircle 
+} from 'lucide-vue-next'
+
+const route = useRoute()
+const router = useRouter()
+const marketStore = useMarketStore()
+
+// State
+const isLoading = ref(true)
+const error = ref<string | null>(null)
+const orderConfirmed = ref(false)
+const orderPlaced = ref(false)
+const isPlacingOrder = ref(false)
+const selectedShippingZone = ref<any>(null)
+const paymentMethod = ref('ln')
+
+// Form data
+const contactData = ref({
+  email: '',
+  npub: '',
+  address: '',
+  message: ''
+})
+
+// Payment methods
+const paymentMethods = [
+  { label: 'Lightning Network', value: 'ln' },
+  { label: 'BTC Onchain', value: 'btc' },
+  { label: 'Cashu', value: 'cashu' }
+]
+
+// Computed
+const stallId = computed(() => route.params.stallId as string)
+const checkoutCart = computed(() => marketStore.checkoutCart)
+
+const stallName = computed(() => {
+  if (!checkoutCart.value) return ''
+  const stall = marketStore.stalls.find(s => s.id === checkoutCart.value?.id)
+  return stall?.name || 'Unknown Stall'
+})
+
+const orderSubtotal = computed(() => {
+  if (!checkoutCart.value?.products) return 0
+  return checkoutCart.value.products.reduce((total, item) => 
+    total + (item.product.price * item.quantity), 0
+  )
+})
+
+const orderTotal = computed(() => {
+  const subtotal = orderSubtotal.value
+  const shipping = selectedShippingZone.value?.cost || 0
+  return subtotal + shipping
+})
+
+// Mock shipping zones (in real app, would come from stall data)
+const availableShippingZones = computed(() => [
+  { id: 'local', name: 'Local Delivery', cost: 500, countries: ['Local Area'] },
+  { id: 'national', name: 'National Shipping', cost: 2000, countries: ['Domestic'] },
+  { id: 'international', name: 'International', cost: 5000, countries: ['Worldwide'] }
+])
+
+// Methods
+const selectShippingZone = (zone: any) => {
+  selectedShippingZone.value = zone
+}
+
+const confirmOrder = () => {
+  if (!selectedShippingZone.value) {
+    error.value = 'Please select a shipping zone'
+    return
+  }
+  orderConfirmed.value = true
+}
+
+const placeOrder = async () => {
+  if (!contactData.value.address) {
+    error.value = 'Shipping address is required'
+    return
+  }
+
+  isPlacingOrder.value = true
+  error.value = null
+
+  try {
+    // Mock order placement
+    await new Promise(resolve => setTimeout(resolve, 2000))
+    
+    // In real app, would create Nostr order event and handle payment
+    console.log('Placing order:', {
+      stallId: stallId.value,
+      cart: checkoutCart.value,
+      shipping: selectedShippingZone.value,
+      contact: contactData.value,
+      paymentMethod: paymentMethod.value,
+      total: orderTotal.value
+    })
+
+    // Clear the checkout cart
+    marketStore.clearCheckoutCart()
+    
+    orderPlaced.value = true
+  } catch (err) {
+    error.value = err instanceof Error ? err.message : 'Failed to place order'
+  } finally {
+    isPlacingOrder.value = false
+  }
+}
+
+const formatPrice = (price: number, currency: string) => {
+  if (currency === 'sats' || currency === 'sat') {
+    return `${price.toLocaleString()} sats`
+  }
+  return new Intl.NumberFormat('en-US', {
+    style: 'currency',
+    currency: currency.toUpperCase()
+  }).format(price)
+}
+
+// Initialize
+onMounted(() => {
+  // Check if we have a checkout cart for this stall
+  const cart = marketStore.checkoutCart
+  if (!cart || cart.id !== stallId.value) {
+    error.value = 'No checkout data found for this stall'
+  }
+  isLoading.value = false
+})
+</script>