bam/my2
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

Update MockPayPalButton and Sheet Components for Improved UI and Functionality

Browse Source 
- 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.
This commit is contained in:
Bastian Masanek
2025-11-05 03:53:15 +01:00
parent 5899988d60
commit 58fd2fd64a
3 changed files with 12 additions and 28 deletions
Download Patch File Download Diff File Expand all files Collapse all files

36
app/components/Payment/MockPayPalButton.vue
View File

@@ -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.