From f80e80009d08350ff5de62717051a58f6fdad56e Mon Sep 17 00:00:00 2001
From: Bastian Masanek <bastian.masanek@experimenta.science>
Date: Tue, 4 Nov 2025 13:40:33 +0100
Subject: [PATCH] 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.
---
 app/pages/order/success/[orderId].vue | 78 +++++----------------------
 1 file changed, 14 insertions(+), 64 deletions(-)

diff --git a/app/pages/order/success/[orderId].vue b/app/pages/order/success/[orderId].vue
index 06f82ab..9dbc930 100644
--- a/app/pages/order/success/[orderId].vue
+++ b/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>