Simplify checkout flow and payment options
- 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>
This commit is contained in:
parent
cdf09ab6e3
commit
b89ee8bf92
1 changed files with 171 additions and 169 deletions
|
|
@ -108,118 +108,73 @@
|
|||
</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>
|
||||
<!-- 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
|
||||
|
|
@ -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
|
||||
@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>
|
||||
|
|
@ -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)
|
||||
|
|
@ -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
|
||||
}
|
||||
|
||||
|
|
@ -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,
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue