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.
1 month ago · 58fd2fd64a
3 changed files with 12 additions and 28 deletions
--- 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.
--- 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 />

--- 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: {