From d14902c73756590340d4092f120155113dab4ff1 Mon Sep 17 00:00:00 2001
From: padreug <padreug@aiolabs.dev>
Date: Wed, 7 Jan 2026 01:02:33 +0100
Subject: [PATCH] Simplify checkout flow and payment options
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- Combine shipping and contact info into single step
- Remove BTC Onchain and Cashu payment options (Lightning only for now)
- Add collapsible section for optional contact info (email, npub, address)
- Keep shipping address visible when required for physical delivery
- Keep message to merchant visible by default
- Add TODO comment for future payment method expansion

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
---
 src/modules/market/views/CheckoutPage.vue | 340 +++++++++++-----------
 1 file changed, 171 insertions(+), 169 deletions(-)

diff --git a/src/modules/market/views/CheckoutPage.vue b/src/modules/market/views/CheckoutPage.vue
index a5cbdb7..3b2806e 100644
--- a/src/modules/market/views/CheckoutPage.vue
+++ b/src/modules/market/views/CheckoutPage.vue
@@ -46,8 +46,8 @@
         <CardContent>
           <!-- Cart Items -->
           <div class="space-y-4 mb-6">
-            <div 
-              v-for="item in checkoutCart.products" 
+            <div
+              v-for="item in checkoutCart.products"
               :key="item.product.id"
               class="flex items-center justify-between p-4 border border-border rounded-lg"
             >
@@ -68,7 +68,7 @@
                     <Package class="w-8 h-8 text-muted-foreground" />
                   </div>
                 </div>
-                
+
                 <!-- Product Details -->
                 <div>
                   <h3 class="font-semibold text-foreground">{{ item.product.name }}</h3>
@@ -76,7 +76,7 @@
                   <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">
@@ -108,121 +108,76 @@
         </CardContent>
       </Card>
 
-      <!-- Shipping Information -->
-      <Card v-if="!orderConfirmed">
+      <!-- Shipping & Contact Information -->
+      <Card>
         <CardHeader>
-          <CardTitle>Shipping Information</CardTitle>
-          <CardDescription>Select your shipping zone</CardDescription>
+          <CardTitle>Shipping & Contact</CardTitle>
+          <CardDescription>Select shipping and provide your contact details</CardDescription>
         </CardHeader>
-        <CardContent>
+        <CardContent class="space-y-6">
           <!-- 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' }}
-                    <span v-if="!zone.requiresPhysicalShipping" class="ml-2 text-blue-600">
-                      • No shipping required
-                    </span>
-                  </p>
-                  <p v-if="zone.description" class="text-xs text-muted-foreground mt-1">
-                    {{ zone.description }}
-                  </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 v-if="availableShippingZones.length > 0">
+            <Label class="mb-3 block">Shipping Zone</Label>
+            <div 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' }}
+                      <span v-if="!zone.requiresPhysicalShipping" class="ml-2 text-blue-600">
+                        • No shipping required
+                      </span>
+                    </p>
+                    <p v-if="zone.description" class="text-xs text-muted-foreground mt-1">
+                      {{ zone.description }}
+                    </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>
-          
-          <div v-else class="text-center py-6">
+
+          <div v-else class="text-center py-4 bg-muted/50 rounded-lg">
             <p class="text-muted-foreground">This merchant hasn't configured shipping zones yet.</p>
             <p class="text-sm text-muted-foreground">Please contact the merchant for shipping information.</p>
           </div>
 
-          <!-- Confirm Order Button -->
-          <div class="mt-6">
-            <Button 
-              @click="confirmOrder"
-              :disabled="availableShippingZones.length > 0 && !selectedShippingZone"
-              class="w-full"
-              size="lg"
-            >
-              Confirm Order
-            </Button>
-          </div>
-        </CardContent>
-      </Card>
+          <!-- Separator -->
+          <div class="border-t border-border" />
 
-      <!-- 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">
-              {{ selectedShippingZone?.requiresPhysicalShipping !== false ? 'Shipping Address' : 'Contact Address (optional)' }}
-            </Label>
-            <Textarea 
+          <!-- Shipping Address (shown when required for physical delivery) -->
+          <div v-if="requiresShippingAddress">
+            <Label for="address">Shipping Address *</Label>
+            <Textarea
               id="address"
               v-model="contactData.address"
-              :placeholder="selectedShippingZone?.requiresPhysicalShipping !== false 
-                ? 'Full shipping address...' 
-                : 'Contact address (optional)...'"
+              placeholder="Full shipping address..."
               rows="3"
             />
-            <p class="text-xs text-muted-foreground mt-1">
-              {{ selectedShippingZone?.requiresPhysicalShipping !== false 
-                ? 'Required for physical delivery' 
-                : 'Optional for digital items or pickup' }}
-            </p>
+            <p class="text-xs text-muted-foreground mt-1">Required for physical delivery</p>
           </div>
 
+          <!-- Message to Merchant (visible) -->
           <div>
             <Label for="message">Message to Merchant (optional)</Label>
-            <Textarea 
+            <Textarea
               id="message"
               v-model="contactData.message"
               placeholder="Any special instructions or notes..."
@@ -230,40 +185,72 @@
             />
           </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>
+          <!-- Optional Contact Info (collapsible) -->
+          <Collapsible v-model:open="showOptionalContact">
+            <CollapsibleTrigger class="flex items-center gap-2 text-sm text-muted-foreground hover:text-foreground transition-colors cursor-pointer w-full">
+              <ChevronDown
+                class="w-4 h-4 transition-transform"
+                :class="{ 'rotate-180': showOptionalContact }"
+              />
+              <span>Additional contact info (optional)</span>
+            </CollapsibleTrigger>
+            <CollapsibleContent class="pt-4 space-y-4">
+              <!-- Contact Address (optional for digital/pickup) -->
+              <div v-if="!requiresShippingAddress">
+                <Label for="address">Contact Address</Label>
+                <Textarea
+                  id="address"
+                  v-model="contactData.address"
+                  placeholder="Contact address (optional)..."
+                  rows="3"
+                />
+                <p class="text-xs text-muted-foreground mt-1">Optional for digital items or pickup</p>
               </div>
-            </div>
+
+              <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
+                <div>
+                  <Label for="email">Email</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</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>
+            </CollapsibleContent>
+          </Collapsible>
+
+          <!-- Payment Method (Lightning only for now) -->
+          <div class="flex items-center gap-2 text-sm text-muted-foreground">
+            <span>⚡</span>
+            <span>Payment via Lightning Network</span>
           </div>
 
           <!-- Place Order Button -->
           <div class="pt-4 border-t border-border">
-            <Button 
+            <Button
               @click="placeOrder"
-              :disabled="isPlacingOrder || (selectedShippingZone?.requiresPhysicalShipping !== false && !contactData.address)"
+              :disabled="isPlacingOrder || !canPlaceOrder"
               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="selectedShippingZone?.requiresPhysicalShipping !== false && !contactData.address" 
-               class="text-xs text-destructive mt-2 text-center">
-              Shipping address is required for physical delivery
+            <p v-if="!canPlaceOrder" class="text-xs text-destructive mt-2 text-center">
+              {{ orderValidationMessage }}
             </p>
           </div>
         </CardContent>
@@ -279,12 +266,12 @@ import { useRoute } from 'vue-router'
 import { useMarketStore } from '@/modules/market/stores/market'
 import { injectService, SERVICE_TOKENS } from '@/core/di-container'
 import { auth } from '@/composables/useAuthService'
-import { 
-  Card, 
-  CardHeader, 
-  CardTitle, 
-  CardDescription, 
-  CardContent 
+import {
+  Card,
+  CardHeader,
+  CardTitle,
+  CardDescription,
+  CardContent
 } from '@/components/ui/card'
 import { Button } from '@/components/ui/button'
 import { Input } from '@/components/ui/input'
@@ -293,8 +280,14 @@ import { Label } from '@/components/ui/label'
 import ProgressiveImage from '@/components/ui/image/ProgressiveImage.vue'
 import {
   Package,
-  CheckCircle
+  CheckCircle,
+  ChevronDown
 } from 'lucide-vue-next'
+import {
+  Collapsible,
+  CollapsibleContent,
+  CollapsibleTrigger
+} from '@/components/ui/collapsible'
 
 const route = useRoute()
 const marketStore = useMarketStore()
@@ -303,11 +296,10 @@ const authService = injectService(SERVICE_TOKENS.AUTH_SERVICE) as any
 // 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')
+const showOptionalContact = ref(false)
 
 // Form data
 const contactData = ref({
@@ -317,12 +309,7 @@ const contactData = ref({
   message: ''
 })
 
-// Payment methods
-const paymentMethods = [
-  { label: 'Lightning Network', value: 'ln' },
-  { label: 'BTC Onchain', value: 'btc' },
-  { label: 'Cashu', value: 'cashu' }
-]
+// TODO: Add BTC Onchain and Cashu payment options in the future
 
 // Computed
 const stallId = computed(() => route.params.stallId as string)
@@ -341,7 +328,7 @@ const currentStall = computed(() => {
 
 const orderSubtotal = computed(() => {
   if (!checkoutCart.value?.products) return 0
-  return checkoutCart.value.products.reduce((total, item) => 
+  return checkoutCart.value.products.reduce((total, item) =>
     total + (item.product.price * item.quantity), 0
   )
 })
@@ -355,22 +342,22 @@ const orderTotal = computed(() => {
 // Get shipping zones from the current stall
 const availableShippingZones = computed(() => {
   if (!currentStall.value) return []
-  
+
   // Use standardized shipping property from domain model
   const zones = currentStall.value.shipping || []
-  
+
   // Ensure zones have required properties and determine shipping requirements
   return zones.map(zone => {
     const zoneName = zone.name || 'Shipping Zone'
     const lowerName = zoneName.toLowerCase()
-    
+
     // Determine if this zone requires physical shipping
-    const requiresPhysicalShipping = zone.requiresPhysicalShipping !== false && 
-      !lowerName.includes('digital') && 
-      !lowerName.includes('pickup') && 
-      !lowerName.includes('download') && 
+    const requiresPhysicalShipping = zone.requiresPhysicalShipping !== false &&
+      !lowerName.includes('digital') &&
+      !lowerName.includes('pickup') &&
+      !lowerName.includes('download') &&
       zone.cost > 0 // Free usually means digital or pickup
-    
+
     return {
       id: zone.id || zoneName.toLowerCase().replace(/\s+/g, '-'),
       name: zoneName,
@@ -383,26 +370,41 @@ const availableShippingZones = computed(() => {
   })
 })
 
+// Determine if shipping address is required
+const requiresShippingAddress = computed(() => {
+  return selectedShippingZone.value?.requiresPhysicalShipping !== false
+})
+
+// Validation for placing order
+const canPlaceOrder = computed(() => {
+  // Must select shipping zone if zones are available
+  if (availableShippingZones.value.length > 0 && !selectedShippingZone.value) {
+    return false
+  }
+  // Must provide address if physical shipping is required
+  if (requiresShippingAddress.value && !contactData.value.address) {
+    return false
+  }
+  return true
+})
+
+const orderValidationMessage = computed(() => {
+  if (availableShippingZones.value.length > 0 && !selectedShippingZone.value) {
+    return 'Please select a shipping zone'
+  }
+  if (requiresShippingAddress.value && !contactData.value.address) {
+    return 'Shipping address is required for physical delivery'
+  }
+  return ''
+})
+
 // Methods
 const selectShippingZone = (zone: any) => {
   selectedShippingZone.value = zone
 }
 
-const confirmOrder = () => {
-  // Allow proceeding if no shipping zones are available (e.g., for digital goods)
-  if (availableShippingZones.value.length > 0 && !selectedShippingZone.value) {
-    error.value = 'Please select a shipping zone'
-    return
-  }
-  orderConfirmed.value = true
-}
-
 const placeOrder = async () => {
-  // Only require shipping address if selected zone requires physical shipping
-  const requiresShippingAddress = selectedShippingZone.value?.requiresPhysicalShipping !== false
-  
-  if (requiresShippingAddress && !contactData.value.address) {
-    error.value = 'Shipping address is required for this delivery method'
+  if (!canPlaceOrder.value) {
     return
   }
 
@@ -426,14 +428,14 @@ const placeOrder = async () => {
       hasPubkey: !!authService.user.value?.pubkey,
       nostrPubkey: authService.user.value?.pubkey
     })
-    
+
     // Try to get pubkey from main auth first, fallback to auth service
     const userPubkey = auth.currentUser.value?.pubkey || authService.user.value?.pubkey
-    
+
     if (!auth.isAuthenticated.value) {
       throw new Error('You must be logged in to place an order')
     }
-    
+
     if (!userPubkey) {
       throw new Error('Nostr identity required: Please configure your Nostr public key in your profile settings to place orders.')
     }
@@ -464,7 +466,7 @@ const placeOrder = async () => {
         currency: checkoutCart.value.currency,
         requiresPhysicalShipping: false
       },
-      paymentMethod: paymentMethod.value === 'ln' ? 'lightning' as const : 'btc_onchain' as const,
+      paymentMethod: 'lightning' as const,
       subtotal: orderSubtotal.value,
       shippingCost: selectedShippingZone.value?.cost || 0,
       total: orderTotal.value,
@@ -473,13 +475,13 @@ const placeOrder = async () => {
     }
 
     console.log('Creating order:', orderData)
-    
+
     // Create and place the order via the market store
     const order = await marketStore.createAndPlaceOrder(orderData)
-    
+
     console.log('Order placed successfully:', order)
     orderPlaced.value = true
-    
+
   } catch (err) {
     console.error('Failed to place order:', err)
     error.value = err instanceof Error ? err.message : 'Failed to place order'
@@ -505,12 +507,12 @@ onMounted(() => {
   if (!cart || cart.id !== stallId.value) {
     error.value = 'No checkout data found for this stall'
   }
-  
+
   // Auto-select shipping zone if there's only one
   if (availableShippingZones.value.length === 1) {
     selectedShippingZone.value = availableShippingZones.value[0]
   }
-  
+
   isLoading.value = false
 })
-</script>
\ No newline at end of file
+</script>