Enhance CheckoutForm and Order components with user data integration
- Refactored CheckoutForm.vue to utilize an extended user type, incorporating additional address fields for improved user data handling. - Updated OrderSummary.vue to conditionally display salutation based on user input. - Standardized error alert styling across multiple pages, changing variant from 'destructive' to 'error' for consistency. - Adjusted button styles in various components to align with the new 'experimenta' variant. These changes aim to improve user experience by ensuring accurate data representation and consistent UI elements across the checkout and order processes.
This commit is contained in:
@@ -112,7 +112,7 @@ onMounted(() => {
|
||||
</div>
|
||||
|
||||
<!-- Error Alert -->
|
||||
<Alert v-if="error" variant="destructive" class="mb-6">
|
||||
<Alert v-if="error" variant="error" class="mb-6">
|
||||
<AlertTitle>Fehler</AlertTitle>
|
||||
<AlertDescription>{{ error }}</AlertDescription>
|
||||
</Alert>
|
||||
@@ -165,8 +165,9 @@ onMounted(() => {
|
||||
<Button
|
||||
@click="confirmOrder"
|
||||
:disabled="isConfirming"
|
||||
class="w-full bg-gradient-button bg-size-300 bg-left hover:bg-right transition-all duration-300 font-bold text-white shadow-lg hover:shadow-2xl"
|
||||
size="lg"
|
||||
variant="experimenta"
|
||||
size="experimenta"
|
||||
class="w-full"
|
||||
>
|
||||
<span v-if="!isConfirming" class="flex items-center justify-center gap-2">
|
||||
<svg
|
||||
@@ -209,8 +210,8 @@ onMounted(() => {
|
||||
|
||||
<!-- Back Link -->
|
||||
<div class="text-center pt-4">
|
||||
<NuxtLink to="/warenkorb" class="text-sm text-experimenta-accent hover:underline">
|
||||
← Zurück zum Warenkorb
|
||||
<NuxtLink to="/checkout" class="text-sm text-experimenta-accent hover:underline">
|
||||
← Zurück zur Kasse
|
||||
</NuxtLink>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -85,7 +85,7 @@ onMounted(() => {
|
||||
|
||||
<div class="container mx-auto px-4 py-8 max-w-4xl">
|
||||
<!-- Error Alert -->
|
||||
<Alert v-if="error" variant="destructive" class="mb-6">
|
||||
<Alert v-if="error" variant="error" class="mb-6">
|
||||
<AlertTitle>Fehler</AlertTitle>
|
||||
<AlertDescription>{{ error }}</AlertDescription>
|
||||
</Alert>
|
||||
@@ -179,12 +179,8 @@ onMounted(() => {
|
||||
|
||||
<!-- Action Buttons -->
|
||||
<div class="grid grid-cols-1 md:grid-cols-2 gap-4">
|
||||
<NuxtLink to="/">
|
||||
<Button
|
||||
variant="outline"
|
||||
class="w-full border-white/20 hover:bg-white/10 text-white"
|
||||
size="lg"
|
||||
>
|
||||
<NuxtLink to="/" class="w-full">
|
||||
<Button variant="secondary" size="experimenta" class="w-full">
|
||||
<svg
|
||||
class="w-5 h-5 mr-2"
|
||||
fill="none"
|
||||
@@ -203,11 +199,8 @@ onMounted(() => {
|
||||
</Button>
|
||||
</NuxtLink>
|
||||
|
||||
<NuxtLink to="/experimenta">
|
||||
<Button
|
||||
class="w-full bg-gradient-button bg-size-300 bg-left hover:bg-right transition-all duration-300 font-bold text-white shadow-lg hover:shadow-2xl"
|
||||
size="lg"
|
||||
>
|
||||
<NuxtLink to="/experimenta" class="w-full">
|
||||
<Button variant="experimenta" size="experimenta" class="w-full">
|
||||
<svg
|
||||
class="w-5 h-5 mr-2"
|
||||
fill="none"
|
||||
|
||||
Reference in New Issue
Block a user