✅ UI refactor and some logical fixes

apps/frontend/src/routes/(main)/checkout/[sid]/[plid]/+page.svelte

@@ -32,7 +32,6 @@
 		}
 		productStore.set(pageData.data);
 		checkoutVM.loading = false;
-		checkoutVM.setupPinger();
 
 		setTimeout(async () => {
 			await ckFlowVM.initFlow();
@@ -48,7 +47,9 @@
 	{#if !pageData.data || !!pageData.error}
 		<!-- Error State -->
 		<div class="flex min-h-screen w-full items-center justify-center p-4">
-			<div class="animate-fade-in w-full max-w-md rounded-2xl bg-white p-8 shadow-xl">
+			<div
+				class="animate-fade-in w-full max-w-md rounded-2xl bg-white p-8 shadow-xl"
+			>
 				<div class="mb-6 flex justify-center">
 					<div class="rounded-full bg-red-100 p-3">
 						<Icon icon={SearchIcon} cls="h-12 w-12 text-red-600" />
@@ -56,10 +57,11 @@
 				</div>
 				<Title size="h4" weight="medium" center>Product Not Found</Title>
 				<p class="mb-6 mt-3 text-center text-gray-600">
-					Something went wrong. Please try again or contact support for assistance.
+					Something went wrong. Please try again or contact support for
+					assistance.
 				</p>
 				<div class="flex justify-center">
-					<a 
+					<a
 						href="/"
 						class="inline-flex items-center justify-center rounded-lg bg-gray-900 px-6 py-3 text-sm font-medium text-white transition-colors hover:bg-gray-800"
 					>
@@ -87,7 +89,9 @@
 			<div class="flex flex-col gap-6 lg:flex-row lg:gap-8">
 				<!-- Left Column: Forms -->
 				<div class="flex-1">
-					<div class="rounded-2xl bg-white p-6 shadow-lg md:p-8 lg:p-10">
+					<div
+						class="rounded-2xl bg-white p-6 shadow-lg md:p-8 lg:p-10"
+					>
 						{#if checkoutVM.loading}
 							<CheckoutLoadingSection />
 						{:else if checkoutVM.checkoutStep === CheckoutStep.Initial}