From b61983368c2098346989fe7c056d2bb48eae7657 Mon Sep 17 00:00:00 2001
From: OllyNicholass <OllyNicholass@users.noreply.github.com>
Date: Tue, 15 Oct 2024 23:47:34 +0100
Subject: [PATCH] feat: display interval for subscriptions

---
 src/lib/components/products/ProductsListItem.svelte | 5 ++++-
 src/routes/products/[productId]/+page.svelte        | 2 +-
 2 files changed, 5 insertions(+), 2 deletions(-)

diff --git a/src/lib/components/products/ProductsListItem.svelte b/src/lib/components/products/ProductsListItem.svelte
index 40574a5..927738b 100644
--- a/src/lib/components/products/ProductsListItem.svelte
+++ b/src/lib/components/products/ProductsListItem.svelte
@@ -1,5 +1,8 @@
 <script lang="ts">
 	export let product;
+
+	const defaultPrice = product.prices[0];
+	const isSubscription = defaultPrice.type === 'recurring';
 </script>
 
 <a href="/products/{product.id}" class="max-w-[384px] mx-auto">
@@ -13,7 +16,7 @@
 	<div class="mt-5 flex items-center justify-between">
 		<div class="">
 			<h6 class="font-medium text-xl leading-8 text-black mb-2">{product.name}</h6>
-			<h6 class="font-semibold text-xl leading-8 text-indigo-600">£{product.actualPrice}</h6>
+			<h6 class="font-semibold text-xl leading-8 text-indigo-600">£{product.actualPrice} {isSubscription ? `/ ${defaultPrice.interval}` : ''}</h6>
 		</div>
 		<button
 			class="p-2 min-[400px]:p-4 rounded-full bg-white border border-gray-300 flex items-center justify-center group shadow-sm shadow-transparent transition-all duration-500 hover:shadow-gray-200 hover:border-gray-400 hover:bg-gray-50"
diff --git a/src/routes/products/[productId]/+page.svelte b/src/routes/products/[productId]/+page.svelte
index b7b1092..a481043 100644
--- a/src/routes/products/[productId]/+page.svelte
+++ b/src/routes/products/[productId]/+page.svelte
@@ -85,7 +85,7 @@
 						<h6
 							class="font-manrope font-semibold text-2xl leading-9 text-gray-900 pr-5 sm:border-r border-gray-200 mr-5"
 						>
-							£{item.price}
+							£{item.price} {item.isSubscription ? `/ ${item.interval}` : ''}
 						</h6>
 						<div class="flex items-center gap-2">
 							<div class="flex items-center gap-1">