Merge pull request #13 from jcreek/12-subtotals-on-checkout-confirmation-items-only-provide-the-unit-price-following-feat-1-changes

fix(#12): Ensure unit prices are displayed correctly

src/lib/components/checkout/OrderConfirmationItem.svelte

@@ -30,7 +30,7 @@
 				<h6
 					class="font-medium text-lg leading-8 text-indigo-600 max-[550px]:text-center pr-4 mr-4 border-r border-gray-200"
 				>
-					{ formatCurrency(price, currency) }
+					{formatCurrency(price, currency)}
 				</h6>
 				<p class="font-medium text-base leading-7 text-black">
 					Qty: <span class="text-gray-500">{quantity}</span>
@@ -45,7 +45,7 @@
 		<h6
 			class="text-indigo-600 font-manrope font-bold text-2xl leading-9 w-full max-w-[176px] text-center"
 		>
-			{ formatCurrency(price, currency) }
+			{formatCurrency(price * quantity, currency)}
 		</h6>
 	</div>
 </div>

src/routes/checkout/success/+page.svelte

@@ -11,11 +11,7 @@
 		localBasket = value;
 	});
 
-	let { 
-		checkoutSession,
-		lineItems,
-		paymentStatus
-	} = data;
+	let { checkoutSession, lineItems, paymentStatus } = data;
 
 	onDestroy(unsubscribe);
 
@@ -76,7 +72,7 @@
 					{#each lineItems as item (item.id)}
 						<OrderConfirmationItem
 							itemName={item.description}
-							price={item.amount_total / 100}
+							price={item.price.unit_amount / 100}
 							quantity={item.quantity}
 							currency={item.currency}
 						/>
@@ -89,7 +85,12 @@
 				<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">
 					{#if checkoutSession?.amount_total != null}
-						Total Price: <span class="text-indigo-600"> {formatCurrency(checkoutSession?.amount_total / 100, checkoutSession?.currency ?? 'gbp')}</span>
+						Total Price: <span class="text-indigo-600">
+							{formatCurrency(
+								checkoutSession?.amount_total / 100,
+								checkoutSession?.currency ?? 'gbp'
+							)}</span
+						>
 					{/if}
 				</p>
 			</div>