82 lines
3.0 KiB
Vue
82 lines
3.0 KiB
Vue
<script setup lang="ts">
|
|
import FullCardItem from '@/components/ui/card/FullCardItem.vue'
|
|
import LandingLayout from '@/layouts/app/LandingLayout.vue'
|
|
import axios from 'axios'
|
|
import { computed, onMounted, ref } from 'vue'
|
|
|
|
const cards = ref<Array<any>>([])
|
|
const error = ref<string | null>(null)
|
|
const loading = ref(true)
|
|
|
|
const params = new URLSearchParams(window.location.search)
|
|
const clientSessionId = params.get('client_session_id')
|
|
|
|
const hasCards = computed(() => cards.value.length > 0)
|
|
|
|
onMounted(async () => {
|
|
try {
|
|
if (!clientSessionId) {
|
|
error.value = 'No session ID provided. Please return to the payment page.'
|
|
return
|
|
}
|
|
const response = await axios.get(`/api/get-cards?client_session_id=${clientSessionId}`)
|
|
if (response.data.success) {
|
|
cards.value = response.data.cards
|
|
} else {
|
|
error.value = response.data.message || 'An error occurred while validating payment.'
|
|
}
|
|
} catch (err: any) {
|
|
console.error('Card fetch error:', err)
|
|
error.value = err.response?.data?.message || 'Failed to get cards from the server. Please contact support.'
|
|
} finally {
|
|
loading.value = false
|
|
}
|
|
})
|
|
</script>
|
|
|
|
<template>
|
|
<LandingLayout>
|
|
<main class="min-h-screen bg-gradient-to-br from-[var(--background)] to-[var(--background)]/95 py-8">
|
|
<div class="container mx-auto max-w-7xl px-4 sm:px-6 lg:px-8">
|
|
<!-- Title / meta -->
|
|
<div class="mb-10 text-center md:mb-14">
|
|
<h1 class="font-title bg-gradient-to-r from-[var(--c-purple)] to-[var(--c-purple)]/70 bg-clip-text text-3xl font-black text-transparent sm:text-4xl md:text-5xl">
|
|
Lecture complète
|
|
</h1>
|
|
<p class="mt-2 text-[var(--muted-foreground)]">
|
|
{{ hasCards ? `${cards.length} cartes révélées` : '' }}
|
|
</p>
|
|
</div>
|
|
|
|
<!-- Loading -->
|
|
<div v-if="loading" class="flex items-center justify-center py-24">
|
|
<div class="h-12 w-12 animate-spin rounded-full border-2 border-[var(--c-purple)]/30 border-t-[var(--c-purple)]"></div>
|
|
</div>
|
|
|
|
<!-- Error -->
|
|
<div v-else-if="error" class="mx-auto max-w-2xl rounded-2xl border border-red-500/30 bg-red-900/20 p-6 text-center">
|
|
<p class="font-semibold text-red-200">{{ error }}</p>
|
|
</div>
|
|
|
|
<!-- Cards Grid -->
|
|
<div v-else-if="hasCards" class="grid justify-items-center gap-5 grid-cols-[repeat(auto-fit,minmax(160px,1fr))] sm:gap-6">
|
|
<FullCardItem
|
|
v-for="(card, index) in cards"
|
|
:key="card.id || index"
|
|
:card-number="card.id"
|
|
:name="card.name"
|
|
:image-url="card.image_url"
|
|
:orientation="card.orientation"
|
|
:description="card.description"
|
|
/>
|
|
</div>
|
|
|
|
<!-- Empty -->
|
|
<div v-else class="mx-auto max-w-2xl rounded-2xl border border-[var(--color-border)]/40 bg-[var(--card)]/80 p-10 text-center">
|
|
<p class="text-[var(--muted-foreground)]">Aucune carte trouvée</p>
|
|
</div>
|
|
</div>
|
|
</main>
|
|
</LandingLayout>
|
|
</template>
|