200 lines
9.7 KiB
Vue
200 lines
9.7 KiB
Vue
<script setup lang="ts">
|
|
import CardResult from '@/components/ui/card/CardResult.vue';
|
|
import LandingLayout from '@/layouts/app/LandingLayout.vue';
|
|
import { router } from '@inertiajs/vue3';
|
|
import axios from 'axios';
|
|
import { computed, onMounted, ref } from 'vue';
|
|
|
|
const goToBooking = () => {
|
|
router.visit('/rendez-vous');
|
|
};
|
|
|
|
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 () => {
|
|
if (!clientSessionId) {
|
|
error.value = 'No session ID provided. Please return to the payment page.';
|
|
loading.value = false;
|
|
return;
|
|
}
|
|
|
|
try {
|
|
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="flex flex-1 justify-center px-4 py-8 sm:px-6 sm:py-12 md:py-16 lg:px-8">
|
|
<div class="layout-content-container flex w-full max-w-4xl flex-col">
|
|
<!-- Header Section -->
|
|
<div class="mb-8 text-center md:mb-12">
|
|
<h1 class="text-midnight-blue mb-2 text-3xl font-bold sm:text-4xl md:text-5xl">Votre Lecture</h1>
|
|
<p class="text-spiritual-earth mx-auto max-w-2xl text-base sm:text-lg">
|
|
Voici une analyse détaillée de votre lecture choisie. Veuillez vérifier avant de procéder au paiement.
|
|
</p>
|
|
</div>
|
|
|
|
<!-- Loading State -->
|
|
<div v-if="loading" class="flex items-center justify-center py-16">
|
|
<div class="h-12 w-12 animate-spin rounded-full border-t-2 border-b-2 border-[var(--subtle-gold)]"></div>
|
|
</div>
|
|
|
|
<!-- Error State -->
|
|
<div v-else-if="error" class="mb-8 rounded-lg bg-red-50 p-6 text-center">
|
|
<div class="mb-2 font-medium text-red-700">Erreur</div>
|
|
<p class="text-red-600">{{ error }}</p>
|
|
<button @click="$router.back()" class="mt-4 rounded-md bg-red-600 px-4 py-2 text-white transition-colors hover:bg-red-700">
|
|
Retour
|
|
</button>
|
|
</div>
|
|
|
|
<!-- Empty State -->
|
|
<div v-else-if="!hasCards" class="rounded-lg bg-gray-50 p-8 text-center">
|
|
<p class="text-gray-600">Aucune carte n'a été trouvée pour votre session.</p>
|
|
</div>
|
|
|
|
<!-- Cards Results -->
|
|
<div v-else class="mb-8 md:mb-12">
|
|
<div class="space-y-6 md:space-y-8">
|
|
<card-result
|
|
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>
|
|
</div>
|
|
|
|
<!-- Consultation CTA -->
|
|
<div
|
|
v-if="!loading && !error"
|
|
class="border-linen rounded-lg border bg-white p-6 text-center shadow-sm transition-all duration-300 hover:shadow-md md:p-8 lg:p-12"
|
|
>
|
|
<div class="bg-subtle-gold mx-auto mb-6 h-1 w-16 rounded-full"></div>
|
|
|
|
<!-- Nouveau contenu -->
|
|
<div class="space-y-6 text-left">
|
|
<!-- En-tête -->
|
|
<div class="text-center">
|
|
<h3 class="text-midnight-blue mb-4 font-heading text-xl font-bold md:text-2xl">Cher.e Explorateur des Symboles,</h3>
|
|
</div>
|
|
|
|
<!-- Grilles de lecture -->
|
|
<div class="space-y-3">
|
|
<p class="text-midnight-blue/80 font-medium">Votre tirage en ligne vous a offert 3 grilles de lecture :</p>
|
|
<div class="space-y-2 pl-4">
|
|
<div class="flex items-start space-x-2">
|
|
<span class="text-subtle-gold mt-1">✦</span>
|
|
<p class="text-midnight-blue/80"><strong>La carte-miroir :</strong> votre reflet immédiat</p>
|
|
</div>
|
|
<div class="flex items-start space-x-2">
|
|
<span class="text-subtle-gold mt-1">✦</span>
|
|
<p class="text-midnight-blue/80"><strong>Les résonances croisées :</strong> interactions énergétiques</p>
|
|
</div>
|
|
<div class="flex items-start space-x-2">
|
|
<span class="text-subtle-gold mt-1">✦</span>
|
|
<p class="text-midnight-blue/80"><strong>Les flux prospectifs :</strong> potentialités à modeler</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Explication consultation -->
|
|
<div class="space-y-3">
|
|
<p class="text-midnight-blue/80">
|
|
Ces révélations ne sont qu'un prélude à ce que nous pourrions accomplir en consultation directe. Parce que les arcanes
|
|
:
|
|
</p>
|
|
<div class="space-y-1 pl-4">
|
|
<p class="text-midnight-blue/80">• S'adaptent à votre voix et à vos micro-expressions</p>
|
|
<p class="text-midnight-blue/80">• Se densifient grâce au dialogue intuitif en temps réel</p>
|
|
<p class="text-midnight-blue/80">• Se transmuent en plan d'action sur-mesure</p>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Offre Éclaireur -->
|
|
<div class="space-y-3">
|
|
<div class="flex items-center space-x-2">
|
|
<span class="text-spiritual-earth text-lg">➤</span>
|
|
<h4 class="text-midnight-blue font-heading text-lg font-bold">Offre Éclaireur :</h4>
|
|
</div>
|
|
<p class="text-midnight-blue/80">Bénéficiez d'une analyse approfondie où nous :</p>
|
|
<div class="space-y-2 pl-4">
|
|
<div class="flex items-start space-x-2">
|
|
<span class="text-spiritual-earth mt-1">1.</span>
|
|
<p class="text-midnight-blue/80">
|
|
Décrypterons les synchronicités entre votre tirage et celui que nous réaliserons ensemble
|
|
</p>
|
|
</div>
|
|
<div class="flex items-start space-x-2">
|
|
<span class="text-spiritual-earth mt-1">2.</span>
|
|
<p class="text-midnight-blue/80">Activerons les ponts cachés entre passé, présent et futur</p>
|
|
</div>
|
|
<div class="flex items-start space-x-2">
|
|
<span class="text-spiritual-earth mt-1">3.</span>
|
|
<p class="text-midnight-blue/80">Cristalliserons une boussole stratégique pour vos prochains choix</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Bouton CTA et informations -->
|
|
<div class="mt-8 space-y-4">
|
|
<button
|
|
@click="goToBooking"
|
|
class="hover:bg-opacity-90 focus:ring-opacity-50 mt-4 inline-flex h-12 min-w-[160px] items-center justify-center rounded-full bg-[var(--subtle-gold)] px-6 text-base font-bold tracking-wide text-[var(--midnight-blue)] transition-all duration-300 hover:shadow-lg focus:ring-2 focus:ring-[var(--subtle-gold)] focus:outline-none md:mt-6 md:px-8"
|
|
>
|
|
Réserver ma session amplifiée ici
|
|
</button>
|
|
|
|
<!-- Informations tarif et durée -->
|
|
<div class="space-y-2">
|
|
<p class="text-spiritual-earth text-sm font-semibold">Durée limitée à 15 jours</p>
|
|
<p class="text-midnight-blue text-lg font-bold">Tarif préférentiel pour les détenteurs de tirage numérique : 390 €</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</main>
|
|
</LandingLayout>
|
|
</template>
|
|
|
|
<style scoped>
|
|
.layout-content-container {
|
|
animation: fadeIn 0.6s ease-out;
|
|
}
|
|
|
|
@keyframes fadeIn {
|
|
from {
|
|
opacity: 0;
|
|
transform: translateY(10px);
|
|
}
|
|
to {
|
|
opacity: 1;
|
|
transform: translateY(0);
|
|
}
|
|
}
|
|
</style>
|