stashing code

apps/frontend/src/routes/(main)/checkout/terminated/+page.svelte

@@ -0,0 +1,61 @@
+<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 MaxWidthWrapper from "$lib/components/molecules/max-width-wrapper.svelte";
+	import Button from "$lib/components/ui/button/button.svelte";
+	import CloseIcon from "~icons/mdi/window-close";
+	import ArrowRightIcon from "~icons/solar/multiple-forward-right-line-duotone";
+	import RestartIcon from "~icons/material-symbols/restart-alt-rounded";
+	import { onMount } from "svelte";
+
+	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="grid min-h-[80vh] w-full place-items-center">
+	<MaxWidthWrapper
+		cls="flex flex-col gap-8 items-center justify-center p-4 md:p-8"
+	>
+		<div
+			class="flex w-full flex-col items-center justify-center gap-8 rounded-xl bg-white p-4 drop-shadow-lg md:p-8 md:py-12 lg:w-max"
+		>
+			<div
+				class="rounded-full bg-rose-100 p-2 text-rose-600 drop-shadow-lg"
+			>
+				<Icon icon={CloseIcon} cls="w-12 h-12" />
+			</div>
+
+			<Title size="h3" center weight="medium">Session Terminated</Title>
+			<p class="w-full max-w-prose text-center text-gray-600">
+				Unfortunately, your session has been terminated due to inactivity
+				or expiration of the booking.
+			</p>
+			<div class="flex w-full flex-col justify-center gap-4 md:flex-row">
+				{#if canRedirect}
+					<Button
+						variant="default"
+						size="lg"
+						href={`/checkout/${sid}/${tid}`}
+					>
+						<Icon icon={RestartIcon} cls="w-auto h-6" />
+						<span>Try Again</span>
+					</Button>
+				{/if}
+
+				<Button variant="defaultInverted" size="lg" href="/search">
+					<Icon icon={ArrowRightIcon} cls="w-auto h-6" />
+					<span>Back To Search</span>
+				</Button>
+			</div>
+		</div>
+	</MaxWidthWrapper>
+</div>