94 lines
4.2 KiB
Vue
94 lines
4.2 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-10 py-16">
|
|
<div class="layout-content-container flex w-full max-w-4xl flex-col items-center gap-12">
|
|
<h1 class="text-center text-5xl font-bold text-[var(--midnight-blue)]">Réservez votre consultation</h1>
|
|
<div class="flex w-full flex-wrap items-start justify-center gap-16">
|
|
<date-picker v-model:selectedDate="selectedDate" />
|
|
<div class="flex max-w-md min-w-[320px] flex-1 flex-col gap-6">
|
|
<p class="text-center text-lg text-[var(--midnight-blue)]">Entrez vos informations</p>
|
|
<form class="flex flex-col gap-6" @submit.prevent="handleAppointment">
|
|
<div>
|
|
<label class="mb-2 block text-sm font-medium text-[var(--midnight-blue)]" for="name">Nom complet</label>
|
|
<input
|
|
class="form-input w-full rounded-lg border-[var(--linen)] bg-[var(--pure-white)] p-3 text-base text-[var(--midnight-blue)] focus:border-[var(--subtle-gold)] focus:ring-[var(--subtle-gold)]"
|
|
id="name"
|
|
name="name"
|
|
placeholder="Votre nom complet"
|
|
type="text"
|
|
v-model="userForm.fullname"
|
|
/>
|
|
</div>
|
|
<div>
|
|
<label class="mb-2 block text-sm font-medium text-[var(--midnight-blue)]" for="email">Adresse e-mail</label>
|
|
<input
|
|
class="form-input w-full rounded-lg border-[var(--linen)] bg-[var(--pure-white)] p-3 text-base text-[var(--midnight-blue)] focus:border-[var(--subtle-gold)] focus:ring-[var(--subtle-gold)]"
|
|
id="email"
|
|
name="email"
|
|
placeholder="Votre adresse e-mail"
|
|
type="email"
|
|
v-model="userForm.email"
|
|
/>
|
|
</div>
|
|
<button
|
|
class="mt-6 flex h-14 w-full cursor-pointer items-center justify-center rounded-full bg-[var(--midnight-blue)] px-8 text-lg font-bold tracking-wide text-[var(--pure-white)] shadow-[var(--linen)] shadow-lg transition-colors duration-300 hover:bg-[var(--spiritual-earth)]"
|
|
type="submit"
|
|
>
|
|
<span class="truncate">Confirmer et Payer</span>
|
|
</button>
|
|
</form>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</main>
|
|
</LandingLayout>
|
|
</template>
|