80 lines
3.8 KiB
Vue
80 lines
3.8 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="flex flex-col items-center rounded-2xl border border-[var(--linen)] bg-[var(--pure-white)] p-12 text-center shadow-xl">
|
|
<div class="mb-8 flex h-20 w-20 items-center justify-center rounded-full bg-[var(--subtle-gold)] shadow-lg">
|
|
<svg
|
|
class="h-10 w-10 text-[var(--midnight-blue)]"
|
|
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-bold text-[var(--midnight-blue)] md:text-5xl">Paiement Réussi</h1>
|
|
<p class="mx-auto mt-4 max-w-md text-lg text-[var(--midnight-blue)]/80">
|
|
Votre rendez-vous a été confirmé ! L'univers vous attend.
|
|
</p>
|
|
<div class="mt-10 w-full border-t border-[var(--linen)]"></div>
|
|
<p class="mt-10 text-lg font-medium text-[var(--midnight-blue)]/90">
|
|
Votre rendez-vous est programmé. Veuillez l'ajouter à votre calendrier.
|
|
</p>
|
|
|
|
<a
|
|
:href="googleCalendarUrl"
|
|
target="_blank"
|
|
rel="noopener noreferrer"
|
|
class="mt-8 flex h-12 max-w-[480px] min-w-[200px] cursor-pointer items-center justify-center overflow-hidden rounded-full bg-[var(--midnight-blue)] px-8 text-base font-bold tracking-wide text-[var(--pure-white)] transition-all duration-300 hover:bg-[var(--spiritual-earth)] hover:shadow-[var(--spiritual-earth)]/30 hover:shadow-lg"
|
|
>
|
|
<span class="truncate">Ajouter à Google Calendar</span>
|
|
</a>
|
|
</div>
|
|
</div>
|
|
</main>
|
|
</LandingLayout>
|
|
</template>
|
|
|
|
<script setup lang="ts">
|
|
import LandingLayout from '@/layouts/app/LandingLayout.vue';
|
|
import { usePage } from '@inertiajs/vue3';
|
|
import { computed, ref } from 'vue';
|
|
|
|
const page = usePage();
|
|
|
|
const appointmentDate = computed(() => page.props.appointment_date);
|
|
const appointmentTime = computed(() => page.props.appointment_time); // Assumes you're also passing the time
|
|
|
|
const loading = ref(true);
|
|
|
|
setTimeout(() => {
|
|
loading.value = false;
|
|
}, 2000);
|
|
|
|
const googleCalendarUrl = computed(() => {
|
|
if (!appointmentDate.value) return '#';
|
|
|
|
// Combine date and time to create a full datetime object
|
|
const startDateTimeString = `${appointmentDate.value}T${appointmentTime.value || '09:00:00'}`;
|
|
const startDate = new Date(startDateTimeString);
|
|
const endDate = new Date(startDate.getTime() + 60 * 60 * 1000); // Assumes a 1-hour appointment
|
|
|
|
// Format for Google Calendar URL
|
|
const formatGoogleDate = (date: Date) => {
|
|
return date.toISOString().replace(/[-:]/g, '').split('.')[0];
|
|
};
|
|
|
|
const start = formatGoogleDate(startDate);
|
|
const end = formatGoogleDate(endDate);
|
|
|
|
const title = encodeURIComponent('Consultation de Tarot avec [Nom du site]');
|
|
const description = encodeURIComponent('Votre consultation de tarot est confirmée. Préparez vos questions !');
|
|
const location = encodeURIComponent('En ligne via [Lien de la visioconférence]');
|
|
|
|
return `https://www.google.com/calendar/render?action=TEMPLATE&text=${title}&dates=${start}/${end}&details=${description}&location=${location}`;
|
|
});
|
|
</script>
|