From 5623d8167f99912d57946643e83e4fe6a11a4cd9 Mon Sep 17 00:00:00 2001
From: Josh Creek <8179928+jcreek@users.noreply.github.com>
Date: Sun, 5 May 2024 12:33:14 +0100
Subject: [PATCH] feat(*): Add basic order confirmation page

---
 .../checkout/OrderConfirmationItem.svelte     | 49 ++++++++++
 src/routes/checkout/success/+page.svelte      | 94 ++++++++++++++++++-
 2 files changed, 138 insertions(+), 5 deletions(-)
 create mode 100644 src/lib/components/checkout/OrderConfirmationItem.svelte

diff --git a/src/lib/components/checkout/OrderConfirmationItem.svelte b/src/lib/components/checkout/OrderConfirmationItem.svelte
new file mode 100644
index 0000000..abdca69
--- /dev/null
+++ b/src/lib/components/checkout/OrderConfirmationItem.svelte
@@ -0,0 +1,49 @@
+<script lang="ts">
+	export let imgAlt = '';
+	export let imgSrc = '';
+	export let itemCategoryDescription = '';
+	export let itemName = '';
+	export let price = 0;
+	export let quantity = 0;
+</script>
+
+<div class="grid grid-cols-1 lg:grid-cols-2 min-[550px]:gap-6 border-b border-gray-200 py-6">
+	<div
+		class="flex items-center flex-col min-[550px]:flex-row gap-3 min-[550px]:gap-6 w-full max-xl:justify-center max-xl:max-w-xl max-xl:mx-auto"
+	>
+		<div class="img-box">
+			<img src={imgSrc} alt={imgAlt} class="xl:w-[140px]" />
+		</div>
+		<div class="pro-data w-full max-w-sm">
+			<h5 class="font-semibold text-xl leading-8 text-black max-[550px]:text-center">
+				{itemName}
+			</h5>
+			<p
+				class="font-normal text-lg leading-8 text-gray-500 my-2 min-[550px]:my-3 max-[550px]:text-center"
+			>
+				{itemCategoryDescription}
+			</p>
+
+			<div class="flex items-center">
+				<h6
+					class="font-medium text-lg leading-8 text-indigo-600 max-[550px]:text-center pr-4 mr-4 border-r border-gray-200"
+				>
+					£ {price.toFixed(2)}
+				</h6>
+				<p class="font-medium text-base leading-7 text-black">
+					Qty: <span class="text-gray-500">{quantity}</span>
+				</p>
+			</div>
+		</div>
+	</div>
+	<div
+		class="flex items-center flex-col min-[550px]:flex-row w-full max-xl:max-w-xl max-xl:mx-auto gap-2"
+	>
+		<div class="flex items-center w-full mx-auto justify-center"></div>
+		<h6
+			class="text-indigo-600 font-manrope font-bold text-2xl leading-9 w-full max-w-[176px] text-center"
+		>
+			£{(price * quantity).toFixed(2)}
+		</h6>
+	</div>
+</div>
diff --git a/src/routes/checkout/success/+page.svelte b/src/routes/checkout/success/+page.svelte
index 412d1ba..cd8fab6 100644
--- a/src/routes/checkout/success/+page.svelte
+++ b/src/routes/checkout/success/+page.svelte
@@ -1,6 +1,90 @@
-<section>
-	<p>
-		We appreciate your business! If you have any questions, please email
-		<a href="mailto:orders@example.com">orders@example.com</a>.
-	</p>
+<script lang="ts">
+	import { onMount, onDestroy } from 'svelte';
+	import { basket, type Basket, type Item } from '$lib/stores/basket.js';
+	import OrderConfirmationItem from '$lib/components/checkout/OrderConfirmationItem.svelte';
+
+	let orderConfirmationBasket: Basket;
+	let localBasket: Basket;
+	const unsubscribe = basket.subscribe((value) => {
+		localBasket = value;
+	});
+	onDestroy(unsubscribe);
+
+	onMount(() => {
+		calculateSubtotal();
+
+		// Create a deep copy of the basket to store the order confirmation then clear the basket
+		orderConfirmationBasket = JSON.parse(JSON.stringify(localBasket));
+		localBasket = { items: [], subtotal: 0 };
+		basket.set(localBasket);
+		unsubscribe();
+		if (typeof localStorage !== 'undefined') {
+			localStorage.removeItem('basket');
+		}
+	});
+
+	function calculateSubtotal() {
+		let subtotal = 0;
+		localBasket.items.forEach((item) => {
+			subtotal += item.price * item.quantity;
+		});
+		localBasket.subtotal = subtotal;
+	}
+</script>
+
+<section class="py-24 relative">
+	<div class="w-full max-w-7xl px-4 md:px-5 lg-6 mx-auto">
+		<h2 class="font-manrope font-bold text-4xl leading-10 text-black text-center">
+			Payment Successful
+		</h2>
+		<p class="mt-4 font-normal text-lg leading-8 text-gray-500 mb-11 text-center">
+			Thanks for making a purchase you can check our order summary below
+		</p>
+		<div
+			class="main-box border border-gray-200 rounded-xl pt-6 max-w-xl max-lg:mx-auto lg:max-w-full"
+		>
+			<!-- <div
+				class="flex flex-col lg:flex-row lg:items-center justify-between px-6 pb-6 border-b border-gray-200"
+			>
+				<div class="data">
+					<p class="font-semibold text-base leading-7 text-black">
+						Order Id: <span class="text-indigo-600 font-medium">#10234987</span>
+					</p>
+					<p class="font-semibold text-base leading-7 text-black mt-4">
+						Order Payment : <span class="text-gray-400 font-medium"> 18th march 2021</span>
+					</p>
+				</div>
+				<button
+					class="rounded-full py-3 px-7 font-semibold text-sm leading-7 text-white bg-indigo-600 max-lg:mt-5 shadow-sm shadow-transparent transition-all duration-500 hover:bg-indigo-700 hover:shadow-indigo-400"
+					>Track Your Order</button
+				>
+			</div> -->
+			<div class="w-full px-3 min-[400px]:px-6">
+				{#if orderConfirmationBasket == undefined}
+					<p class="font-semibold text-lg leading-7 text-black text-center">
+						No items in the basket
+					</p>
+				{:else}
+					{#each orderConfirmationBasket.items as item (item.id)}
+						<OrderConfirmationItem
+							itemCategoryDescription={item.categoryDescription}
+							itemName={item.name}
+							imgAlt={item.imgAlt}
+							imgSrc={item.imgSrc}
+							price={item.price}
+							quantity={item.quantity}
+						/>
+					{/each}
+				{/if}
+			</div>
+			<div
+				class="w-full border-t border-gray-200 px-6 flex flex-col lg:flex-row items-center justify-between"
+			>
+				<div class="flex flex-col sm:flex-row items-center max-lg:border-b border-gray-200"></div>
+				<p class="font-semibold text-lg text-black py-6">
+					Total Price: <span class="text-indigo-600"> $xx.xx</span>
+				</p>
+			</div>
+		</div>
+	</div>
 </section>