80 lines
4.2 KiB
Vue
80 lines
4.2 KiB
Vue
<template>
|
|
<LandingLayout>
|
|
<main class="flex flex-grow items-center justify-center">
|
|
<div class="w-full max-w-2xl px-4 py-20 sm:px-6 lg:px-8">
|
|
<div
|
|
class="relative flex flex-col items-center overflow-hidden rounded-3xl border border-[var(--c-purple)]/30 bg-gradient-to-br from-[var(--c-purple)]/20 to-[var(--c-gold)]/10 p-12 text-center shadow-2xl ring-1 ring-[var(--c-purple)]/40"
|
|
>
|
|
<div class="pointer-events-none absolute -top-16 -left-16 h-40 w-40 rounded-full bg-[var(--c-purple)]/20 blur-3xl"></div>
|
|
<div class="pointer-events-none absolute -right-16 -bottom-16 h-40 w-40 rounded-full bg-[var(--c-gold)]/15 blur-3xl"></div>
|
|
<div class="relative z-10 mb-8 flex h-20 w-20 items-center justify-center rounded-full bg-[var(--c-gold)] shadow-lg">
|
|
<svg class="h-10 w-10 text-[var(--c-purple)]" fill="currentColor" viewBox="0 0 256 256" xmlns="http://www.w3.org/2000/svg">
|
|
<path
|
|
d="M229.66,77.66l-128,128a8,8,0,0,1-11.32,0l-56-56a8,8,0,0,1,11.32-11.32L96,188.69,218.34,66.34a8,8,0,0,1,11.32,11.32Z"
|
|
></path>
|
|
</svg>
|
|
</div>
|
|
<h1 class="text-4xl font-black text-white md:text-5xl">Paiement Réussi</h1>
|
|
<p class="mx-auto mt-4 max-w-md text-lg text-white/80">Votre transaction a été complétée avec succès. L'univers vous attend.</p>
|
|
<div class="mt-10 w-full border-t border-[var(--linen)]"></div>
|
|
<p v-if="loading" class="mt-10 text-lg font-medium text-white/90">Vérification de votre paiement...</p>
|
|
<p v-else class="mt-10 text-lg font-medium text-white/90">Vous pouvez maintenant procéder à votre tirage de cartes.</p>
|
|
<button
|
|
@click="proceedToDraw"
|
|
:disabled="loading"
|
|
class="group relative mt-8 flex h-12 max-w-[480px] min-w-[200px] cursor-pointer items-center justify-center overflow-hidden rounded-full bg-gradient-to-r from-[var(--c-gold)] to-yellow-400 px-8 text-base font-bold tracking-wide text-[var(--c-purple)] shadow-lg transition-all duration-300 hover:shadow-[var(--c-gold)]/40 disabled:opacity-60"
|
|
>
|
|
<span class="relative z-10">Tirer les cartes</span>
|
|
<span
|
|
class="absolute inset-0 translate-x-[-100%] -skew-x-12 bg-gradient-to-r from-transparent via-white/30 to-transparent transition-transform duration-700 group-hover:translate-x-[100%]"
|
|
></span>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</main>
|
|
</LandingLayout>
|
|
</template>
|
|
|
|
<script setup lang="ts">
|
|
import LandingLayout from '@/layouts/app/LandingLayout.vue';
|
|
import { useTarotStore } from '@/stores/tarot';
|
|
import { router } from '@inertiajs/vue3';
|
|
import axios from 'axios';
|
|
import { onMounted, ref } from 'vue';
|
|
|
|
const tarotStore = useTarotStore();
|
|
const loading = ref(true);
|
|
const params = new URLSearchParams(window.location.search);
|
|
const clientSessionId = params.get('client_session_id');
|
|
|
|
onMounted(async () => {
|
|
if (clientSessionId) {
|
|
try {
|
|
const response = await axios.get(`/api/validate-payment?client_session_id=${clientSessionId}`);
|
|
if (response.data.success) {
|
|
// Mettez à jour le store avec les tirages payés
|
|
tarotStore.addPaidDraws(response.data.drawCount);
|
|
} else {
|
|
// Gérer le cas où le paiement n'est pas validé
|
|
alert('Paiement non validé. Veuillez réessayer.');
|
|
router.visit('/cancel');
|
|
}
|
|
} catch (error) {
|
|
console.error('Erreur lors de la validation du paiement:', error);
|
|
|
|
router.visit('/cancel');
|
|
} finally {
|
|
loading.value = false;
|
|
}
|
|
} else {
|
|
// Rediriger si l'ID de session est manquant
|
|
// router.visit('/cancel');
|
|
}
|
|
});
|
|
|
|
const proceedToDraw = () => {
|
|
// Redirige vers la page principale
|
|
router.visit(`/tirage?client_session_id=${clientSessionId}`);
|
|
};
|
|
</script>
|