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

Loading…
Cancel
Save