107 lines
4.9 KiB
Vue
107 lines
4.9 KiB
Vue
<script setup lang="ts">
|
|
import ShuffleCardPresentation from '@/components/organism/ShuffleCard/ShuffleCardPresentation.vue';
|
|
import LandingLayout from '@/layouts/app/LandingLayout.vue';
|
|
import { useTarotStore } from '@/stores/tarot';
|
|
import axios from 'axios';
|
|
import { ref } from 'vue';
|
|
|
|
const cardComponent = ref();
|
|
const tarotStore = useTarotStore();
|
|
const isSelectionScreen = ref(true);
|
|
const loading = ref(false);
|
|
|
|
// This variable will hold the number of cards to draw
|
|
const drawCount = ref(0);
|
|
|
|
// This function will be called from the "offer" buttons
|
|
const handleSelection = (count: number) => {
|
|
drawCount.value = count;
|
|
|
|
// Check if the draw is free or requires payment
|
|
if (count === 1) {
|
|
// Free draw
|
|
if (tarotStore.freeDrawsRemaining > 0) {
|
|
tarotStore.useFreeDraw();
|
|
isSelectionScreen.value = false; // Switch to the shuffle screen
|
|
} else {
|
|
alert('You have used your free draw. Please choose a paid option to unlock more.');
|
|
}
|
|
} else {
|
|
// Paid draw
|
|
// This is where you'd trigger your Stripe payment component
|
|
alert(`Initiating payment process for a ${count}-card draw.`);
|
|
// For now, let's simulate a successful payment and then proceed
|
|
tarotStore.unlockNewDraws().then(() => {
|
|
isSelectionScreen.value = false;
|
|
});
|
|
}
|
|
};
|
|
|
|
const getCard = async () => {
|
|
loading.value = true;
|
|
try {
|
|
const res = await axios.post('/draw-card', { count: drawCount.value });
|
|
if (res.data) {
|
|
cardComponent.value.setDrawnCards(res.data.card);
|
|
}
|
|
} catch (error) {
|
|
console.error(error);
|
|
} finally {
|
|
loading.value = false;
|
|
}
|
|
};
|
|
</script>
|
|
|
|
<template>
|
|
<LandingLayout>
|
|
<section v-if="isSelectionScreen" class="py-20 sm:py-24">
|
|
<h2 class="mb-16 text-center text-4xl font-bold text-[var(--midnight-blue)] md:text-5xl">Explorez Nos Lectures</h2>
|
|
<div class="grid grid-cols-1 gap-8 md:grid-cols-2 lg:grid-cols-3">
|
|
<div
|
|
class="flex flex-col gap-6 rounded-2xl border border-[var(--linen)] bg-[var(--pure-white)] p-8 shadow-lg transition-all duration-300 hover:-translate-y-2 hover:shadow-2xl"
|
|
>
|
|
<div class="text-center">
|
|
<h3 class="text-2xl font-bold text-[var(--midnight-blue)]">Lecture Gratuite</h3>
|
|
<p class="mt-2 text-5xl font-bold text-[var(--subtle-gold)]">Gratuit</p>
|
|
</div>
|
|
<button
|
|
class="mt-4 flex h-12 w-full items-center justify-center rounded-full bg-[var(--linen)] px-8 font-bold tracking-wide text-[var(--midnight-blue)] transition-all duration-300 hover:bg-[var(--spiritual-earth)] hover:text-[var(--pure-white)]"
|
|
@click="handleSelection(1)"
|
|
>
|
|
Commencer
|
|
</button>
|
|
</div>
|
|
<div
|
|
class="flex scale-105 flex-col gap-6 rounded-2xl bg-[var(--midnight-blue)] p-8 shadow-lg ring-2 ring-[var(--subtle-gold)] transition-all duration-300 hover:-translate-y-2 hover:shadow-2xl"
|
|
>
|
|
<div class="text-center">
|
|
<h3 class="text-2xl font-bold text-[var(--pure-white)]">Profilage</h3>
|
|
<p class="mt-2 text-5xl font-bold text-[var(--subtle-gold)]">29€</p>
|
|
</div>
|
|
<button
|
|
class="mt-4 flex h-12 w-full items-center justify-center rounded-full bg-[var(--subtle-gold)] px-8 font-bold tracking-wide text-[var(--midnight-blue)] transition-all duration-300 hover:bg-[var(--pure-white)]"
|
|
@click="handleSelection(3)"
|
|
>
|
|
Découvrir
|
|
</button>
|
|
</div>
|
|
<div
|
|
class="flex flex-col gap-6 rounded-2xl border border-[var(--linen)] bg-[var(--pure-white)] p-8 shadow-lg transition-all duration-300 hover:-translate-y-2 hover:shadow-2xl"
|
|
>
|
|
<div class="text-center">
|
|
<h3 class="text-2xl font-bold text-[var(--midnight-blue)]">Quadrige Doré</h3>
|
|
<p class="mt-2 text-5xl font-bold text-[var(--subtle-gold)]">99€</p>
|
|
</div>
|
|
<button
|
|
class="mt-4 flex h-12 w-full items-center justify-center rounded-full bg-[var(--linen)] px-8 font-bold tracking-wide text-[var(--midnight-blue)] transition-all duration-300 hover:bg-[var(--spiritual-earth)] hover:text-[var(--pure-white)]"
|
|
@click="handleSelection(4)"
|
|
>
|
|
Explorer
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
<ShuffleCardPresentation v-else ref="cardComponent" @draw-card="getCard" />
|
|
</LandingLayout>
|
|
</template>
|