Browse Source

Refactor Order Success Page to improve icon usage and code consistency

- Imported HouseIcon and HandbagIcon from 'lucide-vue-next' for better visual representation.
- Simplified SVG elements by removing unnecessary line breaks and ensuring consistent formatting.
- Enhanced loading and success states with improved icon integration for a more cohesive user experience.
main
Bastian Masanek 1 month ago
parent
commit
f80e80009d
  1. 78
      app/pages/order/success/[orderId].vue

78
app/pages/order/success/[orderId].vue

@ -1,4 +1,6 @@
<script setup lang="ts">
import { HouseIcon, HandbagIcon } from 'lucide-vue-next'
/**
* Order Success Page (/order/success/[orderId])
*
@ -92,9 +94,7 @@ onMounted(() => {
<!-- Loading State -->
<div v-if="isLoading" class="text-center py-12">
<div
class="animate-spin rounded-full h-12 w-12 border-4 border-white/20 border-t-white mx-auto mb-4"
/>
<div class="animate-spin rounded-full h-12 w-12 border-4 border-white/20 border-t-white mx-auto mb-4" />
<p class="text-white/60">Lade Bestellung...</p>
</div>
@ -104,22 +104,10 @@ onMounted(() => {
<div class="text-center space-y-4 py-8">
<!-- Success Icon (animated checkmark) -->
<div class="flex justify-center mb-6">
<div
class="rounded-full bg-green-500/20 p-6 border-4 border-green-500/50 animate-pulse"
>
<svg
class="w-16 h-16 text-green-500"
fill="none"
stroke="currentColor"
viewBox="0 0 24 24"
xmlns="http://www.w3.org/2000/svg"
>
<path
stroke-linecap="round"
stroke-linejoin="round"
stroke-width="2"
d="M5 13l4 4L19 7"
></path>
<div class="rounded-full bg-green-500/20 p-6 border-4 border-green-500/50 animate-pulse">
<svg class="w-16 h-16 text-green-500" fill="none" stroke="currentColor" viewBox="0 0 24 24"
xmlns="http://www.w3.org/2000/svg">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"></path>
</svg>
</div>
</div>
@ -142,19 +130,10 @@ onMounted(() => {
<!-- Next Steps Info -->
<Alert class="border-blue-500/50 bg-blue-500/10">
<div class="flex items-start gap-3">
<svg
class="w-5 h-5 text-blue-400 mt-0.5 flex-shrink-0"
fill="none"
stroke="currentColor"
viewBox="0 0 24 24"
xmlns="http://www.w3.org/2000/svg"
>
<path
stroke-linecap="round"
stroke-linejoin="round"
stroke-width="2"
d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"
></path>
<svg class="w-5 h-5 text-blue-400 mt-0.5 flex-shrink-0" fill="none" stroke="currentColor"
viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"></path>
</svg>
<div>
<AlertTitle class="text-blue-400">Wie geht es weiter?</AlertTitle>
@ -181,40 +160,14 @@ onMounted(() => {
<div class="grid grid-cols-1 md:grid-cols-2 gap-4">
<NuxtLink to="/" class="w-full">
<Button variant="secondary" size="experimenta" class="w-full">
<svg
class="w-5 h-5 mr-2"
fill="none"
stroke="currentColor"
viewBox="0 0 24 24"
xmlns="http://www.w3.org/2000/svg"
>
<path
stroke-linecap="round"
stroke-linejoin="round"
stroke-width="2"
d="M3 12l2-2m0 0l7-7 7 7M5 10v10a1 1 0 001 1h3m10-11l2 2m-2-2v10a1 1 0 01-1 1h-3m-6 0a1 1 0 001-1v-4a1 1 0 011-1h2a1 1 0 011 1v4a1 1 0 001 1m-6 0h6"
></path>
</svg>
<HouseIcon class="w-5 h-5 mr-2" />
Zurück zur Startseite
</Button>
</NuxtLink>
<NuxtLink to="/experimenta" class="w-full">
<Button variant="experimenta" size="experimenta" class="w-full">
<svg
class="w-5 h-5 mr-2"
fill="none"
stroke="currentColor"
viewBox="0 0 24 24"
xmlns="http://www.w3.org/2000/svg"
>
<path
stroke-linecap="round"
stroke-linejoin="round"
stroke-width="2"
d="M16 11V7a4 4 0 00-8 0v4M5 9h14l1 12H4L5 9z"
></path>
</svg>
<HandbagIcon class="w-5 h-5 mr-2" />
Weitere Produkte kaufen
</Button>
</NuxtLink>
@ -225,10 +178,7 @@ onMounted(() => {
<p class="text-sm text-white/60">
Fragen zu deiner Bestellung? Kontaktiere uns gerne:
</p>
<a
href="mailto:info@experimenta.science"
class="text-sm text-experimenta-accent hover:underline"
>
<a href="mailto:info@experimenta.science" class="text-sm text-experimenta-accent hover:underline">
info@experimenta.science
</a>
</div>

Loading…
Cancel
Save