109 lines
3.0 KiB
Svelte
109 lines
3.0 KiB
Svelte
<script lang="ts">
|
|
import { page } from "$app/state";
|
|
import Icon from "$lib/components/atoms/icon.svelte";
|
|
import Title from "$lib/components/atoms/title.svelte";
|
|
import { onMount } from "svelte";
|
|
import ExclamationIcon from "~icons/heroicons/exclamation-triangle-20-solid";
|
|
import ClockIcon from "~icons/heroicons/clock-20-solid";
|
|
import SupportIcon from "~icons/heroicons/chat-bubble-left-right-20-solid";
|
|
|
|
let canRedirect = $state(false);
|
|
|
|
let sid = $derived(page.url.searchParams.get("sid") as any as string);
|
|
let tid = $derived(page.url.searchParams.get("tid") as any as string);
|
|
|
|
onMount(() => {
|
|
if (sid && tid && sid.length > 0 && tid.length > 0) {
|
|
canRedirect = true;
|
|
}
|
|
});
|
|
</script>
|
|
|
|
<div class="flex min-h-screen w-full items-center justify-center bg-gradient-to-br from-red-50 via-orange-50 to-yellow-50 p-4">
|
|
<div class="w-full max-w-lg">
|
|
<div class="animate-scale-in rounded-3xl bg-white p-8 shadow-2xl md:p-12">
|
|
<!-- Error Icon with Animation -->
|
|
<div class="mb-8 flex justify-center">
|
|
<div class="animate-pulse-slow rounded-full bg-gradient-to-br from-red-400 to-red-600 p-4 shadow-lg">
|
|
<Icon icon={ExclamationIcon} cls="h-16 w-16 text-white" />
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Title -->
|
|
<Title size="h3" weight="medium" center>Session Terminated</Title>
|
|
|
|
<!-- Description -->
|
|
<p class="mb-8 mt-4 text-center text-base text-gray-600">
|
|
Your checkout session has been terminated. This may have occurred due to inactivity or a connection issue.
|
|
</p>
|
|
|
|
<!-- Reason Cards -->
|
|
<div class="mb-8 space-y-3">
|
|
<div class="flex items-start gap-3 rounded-lg border border-gray-200 bg-gray-50 p-4">
|
|
<div class="flex-shrink-0">
|
|
<div class="rounded-lg bg-orange-100 p-2">
|
|
<Icon icon={ClockIcon} cls="h-5 w-5 text-orange-600" />
|
|
</div>
|
|
</div>
|
|
<div class="flex-1">
|
|
<p class="mb-1 text-sm font-semibold text-gray-900">
|
|
Session Timeout
|
|
</p>
|
|
<p class="text-sm text-gray-600">
|
|
Sessions expire after a period of inactivity for security.
|
|
</p>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="flex items-start gap-3 rounded-lg border border-gray-200 bg-gray-50 p-4">
|
|
<div class="flex-shrink-0">
|
|
<div class="rounded-lg bg-blue-100 p-2">
|
|
<Icon icon={SupportIcon} cls="h-5 w-5 text-blue-600" />
|
|
</div>
|
|
</div>
|
|
<div class="flex-1">
|
|
<p class="mb-1 text-sm font-semibold text-gray-900">
|
|
Need Help?
|
|
</p>
|
|
<p class="text-sm text-gray-600">
|
|
Contact our support team to continue your order.
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<style>
|
|
@keyframes scale-in {
|
|
from {
|
|
opacity: 0;
|
|
transform: scale(0.9);
|
|
}
|
|
to {
|
|
opacity: 1;
|
|
transform: scale(1);
|
|
}
|
|
}
|
|
|
|
@keyframes pulse-slow {
|
|
0%, 100% {
|
|
opacity: 1;
|
|
}
|
|
50% {
|
|
opacity: 0.8;
|
|
}
|
|
}
|
|
|
|
.animate-scale-in {
|
|
animation: scale-in 0.5s cubic-bezier(0.16, 1, 0.3, 1);
|
|
}
|
|
|
|
.animate-pulse-slow {
|
|
animation: pulse-slow 2s ease-in-out infinite;
|
|
}
|
|
</style>
|