From 58fd2fd64af6d4f00d9fc5199aeeae70b099e009 Mon Sep 17 00:00:00 2001
From: Bastian Masanek <bastian.masanek@experimenta.science>
Date: Wed, 5 Nov 2025 03:53:15 +0100
Subject: [PATCH] Update MockPayPalButton and Sheet Components for Improved UI
 and Functionality

- Increased the simulated PayPal redirect duration from 1 second to 3 seconds for a more realistic user experience.
- Refactored button structure in MockPayPalButton.vue for cleaner code and improved readability.
- Updated z-index values in SheetContent.vue and sheet/index.ts to ensure proper layering of UI elements, enhancing visibility and interaction.
---
 app/components/Payment/MockPayPalButton.vue | 36 ++++++---------------
 app/components/ui/sheet/SheetContent.vue    |  2 +-
 app/components/ui/sheet/index.ts            |  2 +-
 3 files changed, 12 insertions(+), 28 deletions(-)

diff --git a/app/components/Payment/MockPayPalButton.vue b/app/components/Payment/MockPayPalButton.vue
index cf42532..05a74d3 100644
--- a/app/components/Payment/MockPayPalButton.vue
+++ b/app/components/Payment/MockPayPalButton.vue
@@ -51,7 +51,7 @@ async function handlePayment() {
   showPayPalSimulation.value = true
 
   // Simulate redirect to PayPal (show fake URL for 1 second)
-  await new Promise((resolve) => setTimeout(resolve, 1000))
+  await new Promise((resolve) => setTimeout(resolve, 3000))
 
   // Simulate PayPal processing (1 second)
   await new Promise((resolve) => setTimeout(resolve, 1000))
@@ -68,61 +68,45 @@ async function handlePayment() {
 <template>
   <div class="space-y-4">
     <!-- PayPal Button (Mock) -->
-    <button
-      v-if="!showPayPalSimulation"
-      type="button"
-      :disabled="loading || isProcessing"
-      @click="handlePayment"
+    <button v-if="!showPayPalSimulation" type="button" :disabled="loading || isProcessing" @click="handlePayment"
       class="w-full rounded-lg px-6 py-4 text-lg font-bold text-white shadow-lg transition-all duration-300 disabled:opacity-50 disabled:cursor-not-allowed"
       :class="{
         'bg-gradient-to-r from-[#0070ba] to-[#003087] hover:from-[#003087] hover:to-[#001c64]':
           !isProcessing,
         'bg-gray-600 cursor-wait': isProcessing,
-      }"
-    >
+      }">
       <span v-if="!isProcessing" class="flex items-center justify-center gap-2">
         <svg class="w-6 h-6" viewBox="0 0 24 24" fill="currentColor">
           <path
-            d="M7.076 21.337H2.47a.641.641 0 0 1-.633-.74L4.944 3.72a.77.77 0 0 1 .76-.633h8.433c2.76 0 4.633.578 5.575 1.716.94 1.136 1.052 2.73.337 4.745-.713 2.015-1.936 3.533-3.639 4.515-1.703.98-3.818 1.47-6.286 1.47H8.316c-.438 0-.823.314-.906.74l-.97 4.742a.641.641 0 0 1-.633.522h-.73z"
-          />
+            d="M7.076 21.337H2.47a.641.641 0 0 1-.633-.74L4.944 3.72a.77.77 0 0 1 .76-.633h8.433c2.76 0 4.633.578 5.575 1.716.94 1.136 1.052 2.73.337 4.745-.713 2.015-1.936 3.533-3.639 4.515-1.703.98-3.818 1.47-6.286 1.47H8.316c-.438 0-.823.314-.906.74l-.97 4.742a.641.641 0 0 1-.633.522h-.73z" />
           <path
             d="M19.175 7.715c-.027.183-.057.364-.09.546-1.06 5.485-4.678 7.381-9.303 7.381H7.737a.914.914 0 0 0-.9.781l-1.238 7.854a.491.491 0 0 0 .485.567h3.42c.383 0 .71-.275.77-.648l.032-.165.611-3.878.039-.213c.06-.373.387-.648.77-.648h.485c4.042 0 7.205-1.642 8.127-6.393.385-1.986.186-3.645-.816-4.812a4.024 4.024 0 0 0-1.037-.85z"
-            opacity=".7"
-          />
+            opacity=".7" />
         </svg>
         <span>Mit PayPal bezahlen</span>
         <span v-if="amount" class="text-white/90">({{ formatCurrency(amount) }})</span>
       </span>
       <span v-else class="flex items-center justify-center gap-2">
-        <div
-          class="animate-spin rounded-full h-5 w-5 border-2 border-white/20 border-t-white"
-        />
+        <div class="animate-spin rounded-full h-5 w-5 border-2 border-white/20 border-t-white" />
         Verbinde mit PayPal...
       </span>
     </button>
 
     <!-- PayPal Simulation Overlay -->
-    <div
-      v-if="showPayPalSimulation"
-      class="rounded-lg border-2 border-[#0070ba] bg-white p-8 text-center space-y-4"
-    >
+    <div v-if="showPayPalSimulation" class="rounded-lg border-2 border-[#0070ba] bg-white p-8 text-center space-y-4">
       <div class="flex items-center justify-center gap-2 mb-4">
         <svg class="w-12 h-12 text-[#0070ba]" viewBox="0 0 24 24" fill="currentColor">
           <path
-            d="M7.076 21.337H2.47a.641.641 0 0 1-.633-.74L4.944 3.72a.77.77 0 0 1 .76-.633h8.433c2.76 0 4.633.578 5.575 1.716.94 1.136 1.052 2.73.337 4.745-.713 2.015-1.936 3.533-3.639 4.515-1.703.98-3.818 1.47-6.286 1.47H8.316c-.438 0-.823.314-.906.74l-.97 4.742a.641.641 0 0 1-.633.522h-.73z"
-          />
+            d="M7.076 21.337H2.47a.641.641 0 0 1-.633-.74L4.944 3.72a.77.77 0 0 1 .76-.633h8.433c2.76 0 4.633.578 5.575 1.716.94 1.136 1.052 2.73.337 4.745-.713 2.015-1.936 3.533-3.639 4.515-1.703.98-3.818 1.47-6.286 1.47H8.316c-.438 0-.823.314-.906.74l-.97 4.742a.641.641 0 0 1-.633.522h-.73z" />
           <path
             d="M19.175 7.715c-.027.183-.057.364-.09.546-1.06 5.485-4.678 7.381-9.303 7.381H7.737a.914.914 0 0 0-.9.781l-1.238 7.854a.491.491 0 0 0 .485.567h3.42c.383 0 .71-.275.77-.648l.032-.165.611-3.878.039-.213c.06-.373.387-.648.77-.648h.485c4.042 0 7.205-1.642 8.127-6.393.385-1.986.186-3.645-.816-4.812a4.024 4.024 0 0 0-1.037-.85z"
-            opacity=".7"
-          />
+            opacity=".7" />
         </svg>
         <span class="text-2xl font-bold text-[#0070ba]">PayPal</span>
       </div>
 
       <div class="animate-pulse">
-        <div
-          class="animate-spin rounded-full h-12 w-12 border-4 border-[#0070ba]/20 border-t-[#0070ba] mx-auto mb-4"
-        />
+        <div class="animate-spin rounded-full h-12 w-12 border-4 border-[#0070ba]/20 border-t-[#0070ba] mx-auto mb-4" />
         <p class="text-lg font-semibold text-gray-800">Zahlung wird verarbeitet...</p>
         <p class="text-sm text-gray-600 mt-2">
           Du wirst zu PayPal weitergeleitet und kehrst automatisch zurück.
diff --git a/app/components/ui/sheet/SheetContent.vue b/app/components/ui/sheet/SheetContent.vue
index f5aed59..56249c9 100644
--- a/app/components/ui/sheet/SheetContent.vue
+++ b/app/components/ui/sheet/SheetContent.vue
@@ -36,7 +36,7 @@ const forwarded = useForwardPropsEmits(delegatedProps, emits)
 <template>
   <DialogPortal>
     <DialogOverlay
-      class="fixed inset-0 z-50 bg-black/80 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0" />
+      class="fixed inset-0 z-[100] bg-black/80 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0" />
     <DialogContent :class="cn(sheetVariants({ side }), props.class)" v-bind="{ ...forwarded, ...$attrs }">
       <slot />
 
diff --git a/app/components/ui/sheet/index.ts b/app/components/ui/sheet/index.ts
index a370633..4e41308 100644
--- a/app/components/ui/sheet/index.ts
+++ b/app/components/ui/sheet/index.ts
@@ -11,7 +11,7 @@ export { default as SheetTitle } from "./SheetTitle.vue"
 export { default as SheetTrigger } from "./SheetTrigger.vue"
 
 export const sheetVariants = cva(
-  "fixed z-50 gap-4 bg-background p-6 shadow-lg transition ease-in-out data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:duration-300 data-[state=open]:duration-500",
+  "fixed z-[100] gap-4 bg-background p-6 shadow-lg transition ease-in-out data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:duration-300 data-[state=open]:duration-500",
   {
     variants: {
       side: {