98 lines
5.0 KiB
Vue
98 lines
5.0 KiB
Vue
<script setup lang="ts">
|
|
import DatePicker from '@/components/DatePicker.vue';
|
|
import LandingLayout from '@/layouts/app/LandingLayout.vue';
|
|
import { loadStripe } from '@stripe/stripe-js';
|
|
import axios from 'axios';
|
|
import { ref } from 'vue';
|
|
|
|
interface UserForm {
|
|
fullname: string;
|
|
email: string;
|
|
}
|
|
|
|
const userForm = ref<UserForm>({
|
|
fullname: '',
|
|
email: '',
|
|
});
|
|
const selectedDate = ref(new Date());
|
|
|
|
const loading = ref<boolean>(false);
|
|
|
|
const handleAppointment = () => {
|
|
redirectToStipeCheckout();
|
|
};
|
|
|
|
const redirectToStipeCheckout = async () => {
|
|
loading.value = true;
|
|
try {
|
|
const res = await axios.post('/checkout-rendez-vous', {
|
|
userForm: userForm.value,
|
|
selectedDate: selectedDate.value,
|
|
});
|
|
const sessionId = res.data.sessionId;
|
|
const stripe = await loadStripe(import.meta.env.VITE_STRIPE_PUBLISHABLE_KEY!);
|
|
if (stripe) {
|
|
const { error } = await stripe.redirectToCheckout({ sessionId });
|
|
|
|
if (error) {
|
|
console.error('Stripe redirect error:', error.message);
|
|
}
|
|
}
|
|
} catch (error) {
|
|
console.error('Error initiating Stripe checkout:', error);
|
|
} finally {
|
|
loading.value = false;
|
|
}
|
|
};
|
|
</script>
|
|
|
|
<template>
|
|
<LandingLayout>
|
|
<main class="flex flex-1 justify-center px-6 py-16 sm:px-8 lg:px-10">
|
|
<div class="layout-content-container flex w-full max-w-5xl flex-col items-center gap-12">
|
|
<h1 class="text-center text-4xl font-black text-white md:text-5xl">Réservez votre consultation</h1>
|
|
<div class="flex w-full flex-wrap items-start justify-center gap-10 md:gap-16">
|
|
<date-picker v-model:selectedDate="selectedDate" />
|
|
<div class="relative flex min-w-[320px] max-w-md flex-1 flex-col gap-6 overflow-hidden rounded-2xl border border-[var(--c-purple)]/30 bg-gradient-to-br from-[var(--card)] to-[var(--card)]/90 p-6 shadow-xl ring-1 ring-[var(--c-purple)]/40 md:p-8">
|
|
<div class="pointer-events-none absolute -left-16 -top-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>
|
|
<p class="relative z-10 text-center text-lg font-black text-white">Entrez vos informations</p>
|
|
<form class="relative z-10 flex flex-col gap-6" @submit.prevent="handleAppointment">
|
|
<div>
|
|
<label class="mb-2 block text-sm font-black text-white" for="name">Nom complet</label>
|
|
<input
|
|
class="w-full rounded-lg border border-[var(--c-purple)]/40 bg-black/40 p-3 text-base text-white placeholder-white/40 outline-none ring-0 transition-colors focus:border-[var(--c-purple)] focus:ring-0"
|
|
id="name"
|
|
name="name"
|
|
placeholder="Votre nom complet"
|
|
type="text"
|
|
v-model="userForm.fullname"
|
|
/>
|
|
</div>
|
|
<div>
|
|
<label class="mb-2 block text-sm font-black text-white" for="email">Adresse e-mail</label>
|
|
<input
|
|
class="w-full rounded-lg border border-[var(--c-purple)]/40 bg-black/40 p-3 text-base text-white placeholder-white/40 outline-none ring-0 transition-colors focus:border-[var(--c-purple)] focus:ring-0"
|
|
id="email"
|
|
name="email"
|
|
placeholder="Votre adresse e-mail"
|
|
type="email"
|
|
v-model="userForm.email"
|
|
/>
|
|
</div>
|
|
<button
|
|
class="group relative mt-2 flex h-14 w-full cursor-pointer items-center justify-center overflow-hidden rounded-full bg-gradient-to-r from-[var(--c-gold)] to-yellow-400 px-8 text-lg font-bold tracking-wide text-[var(--c-purple)] shadow-lg transition-all duration-300 hover:shadow-[var(--c-gold)]/40 disabled:opacity-60"
|
|
type="submit"
|
|
:disabled="loading"
|
|
>
|
|
<span class="relative z-10">Confirmer et Payer</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>
|
|
</form>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</main>
|
|
</LandingLayout>
|
|
</template>
|