mirror of
https://github.com/jcreek/SvelteKitSaasBoilerplate.git
synced 2026-07-12 18:43:50 +00:00
feat(*): Add basic order confirmation page
This commit is contained in:
Josh Creek
@@ -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>
|
||||
@@ -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>.
|
||||
<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>
|
||||
|
||||
Reference in New Issue
Block a user