feature/single course pricing (#558)

* feature(update account with purchases)

* fix(unlock lesson for single stripe purchase)

Author: codercatdev

apps/codingcatdev/src/lib/client/firebase.ts

@@ -29,6 +29,7 @@ import {
 } from 'firebase/analytics';
 
 import { env } from '$env/dynamic/public';
+import { getStorage, type FirebaseStorage } from 'firebase/storage';
 
 export const firebaseConfig = {
 	apiKey: env.PUBLIC_FB_API_KEY,
@@ -45,6 +46,7 @@ export let auth: Auth;
 export let firestore: Firestore;
 export let functions: Functions;
 export let analytics: Analytics;
+export let storage: FirebaseStorage;
 
 if (
 	!app &&
@@ -65,6 +67,7 @@ if (
 	firestore = initializeFirestore(app, { ignoreUndefinedProperties: true });
 	functions = getFunctions(app);
 	analytics = getAnalytics(app);
+	storage = getStorage(app);
 } else {
 	if (
 		browser &&

apps/codingcatdev/src/lib/server/firebase.ts

@@ -102,3 +102,34 @@ export const getStripeProducts = async () => {
 	}
 	return products;
 };
+
+export const didUserPurchase = async (slug: string, uid?: string) => {
+	if (!uid) return false;
+
+	// User
+	const auth = getAuth(app);
+	const user = await auth.getUser(uid);
+
+	const db = getFirestore();
+
+	if (!db) return false;
+
+	const snapshot = await db
+		.collection(`stripe-customers/${user.uid}/payments`)
+		.where('canceled_at', '==', null)
+		.get();
+
+	if (snapshot.empty) return false;
+
+	for (const doc of snapshot.docs) {
+		const payment = doc.data();
+		for (const item of payment?.items) {
+			const productSnapshot = await db.doc(`stripe-products/${item?.price?.product}`).get();
+			if (!productSnapshot) return false;
+
+			const product = productSnapshot.data();
+			if (product?.metadata?.slug === slug) return true;
+		}
+	}
+	return false;
+};

apps/codingcatdev/src/routes/(content-single)/course/+layout.server.ts

@@ -1,7 +1,7 @@
 import { error, redirect } from '@sveltejs/kit';
 import { allowLocal, filterContent, getContentTypePath } from '$lib/server/content';
 import { ContentType, type Course, type Author, type Sponsor } from '$lib/types';
-import { getShowDrafts } from '$lib/server/firebase';
+import { didUserPurchase, getShowDrafts } from '$lib/server/firebase';
 
 //export const prerender = false;
 
@@ -28,7 +28,7 @@ export const load = async ({ url, parent }) => {
 			contentItems: [md],
 			userPreview: showDrafts
 		});
-		const course = contentItems?.at(0);
+		let course = contentItems?.at(0);
 		if (!course) throw error(404);
 
 		// Content is good, fetch surrounding items
@@ -48,7 +48,24 @@ export const load = async ({ url, parent }) => {
 			}
 		}
 
-		const content = course.lesson?.find((l) => l.slug === lessonSlug);
+		/*
+		 * Single Course Purchase check to see if lesson should be unlocked
+		 * stripe-products/productId/metadata.slug will have course
+		 * this shoudl be updated in the stripe product and it will push to firestore
+		 */
+
+		const singlePurchase = await didUserPurchase(course.slug, data?.user?.uid);
+
+		course = {
+			...course,
+			lesson: course.lesson?.map((l) => {
+				return { ...l, locked: l.locked ? !singlePurchase : l.locked };
+			})
+		};
+
+		// Mark any of the current lessons as locked or not
+		let content = course.lesson?.find((l) => l.slug === lessonSlug);
+
 		if (
 			lessonSlug &&
 			content?.locked &&
@@ -62,7 +79,8 @@ export const load = async ({ url, parent }) => {
 			content,
 			course,
 			authors,
-			sponsors
+			sponsors,
+			singlePurchase
 		};
 	} catch (e) {
 		console.error(e);

apps/codingcatdev/src/routes/(content-single)/course/LessonCards.svelte

@@ -1,5 +1,6 @@
 <script lang="ts">
 	import Image from '$lib/components/content/Image.svelte';
+	import { ContentType } from '$lib/types';
 
 	import type { LayoutData } from './$types';
 	import ProCourseMark from './ProCourseMark.svelte';
@@ -39,7 +40,12 @@
 						<div class="p-4">
 							<header class="relative py-6 text-2xl font-bold capitalize card-header">
 								<div class="absolute top-0 right-0">
-									<ProCourseMark locked={l?.locked} lesson={l} {data} />
+									<ProCourseMark
+										locked={l?.locked}
+										lesson={l}
+										{data}
+										contentType={ContentType.lesson}
+									/>
 								</div>
 								<div>
 									{l.title}

apps/codingcatdev/src/routes/(content-single)/course/LessonList.svelte

@@ -1,6 +1,7 @@
 <script lang="ts">
 	import { afterNavigate } from '$app/navigation';
 	import { storeCurrentUrl } from '$lib/stores/stores';
+	import { ContentType } from '$lib/types';
 	import type { LayoutData } from './$types';
 	import ProCourseMark from './ProCourseMark.svelte';
 	export let data: LayoutData;
@@ -48,7 +49,12 @@
 																{l.title}
 															</a>
 															<div class="flex gap-1 absolute right-1 top-1">
-																<ProCourseMark locked={l?.locked} lesson={l} {data} />
+																<ProCourseMark
+																	locked={l?.locked}
+																	lesson={l}
+																	{data}
+																	contentType={ContentType.lesson}
+																/>
 															</div>
 														</li>
 													{/each}

apps/codingcatdev/src/routes/(content-single)/course/ProCourseMark.svelte

@@ -1,8 +1,7 @@
 <script lang="ts">
 	import Locked from './Locked.svelte';
 	import type { LayoutData } from './$types';
-	import type { Content, Course, Lesson, Saved } from '$lib/types';
-	import { ContentType } from '$lib/types';
+	import { ContentType, type Content, type Course, type Lesson, type Saved } from '$lib/types';
 	import ProCourseCompleted from './ProCourseCompleted.svelte';
 	import ProCourseBookmarked from './ProCourseBookmarked.svelte';
 	import ProSaved from './ProSaved.svelte';
@@ -18,6 +17,7 @@
 	};
 	export let lesson: Lesson | undefined = undefined;
 	export let locked: boolean | undefined = undefined;
+	export let contentType: ContentType | undefined = undefined;
 
 	const user = userStore(auth);
 </script>
@@ -47,11 +47,10 @@
 				savedRef="/bookmarked"
 				savedIconSource={Bookmark}
 			/>
-		</div>{/if}
-{:else if data.content?.type === ContentType.lesson}
+		</div>
+	{/if}
+{:else if contentType === ContentType.lesson}
 	<div class="flex w-12 gap-1">
 		<Locked {locked} />
 	</div>
-{:else}
-	<div />
 {/if}

apps/codingcatdev/src/routes/(content-single)/course/sveltekit-firebase/+page.md

@@ -5,9 +5,9 @@ authors:
 cloudinary_convert: false
 cover: https://media.codingcat.dev/image/upload/v1702159174/main-codingcatdev-photo/courses/sveltekit-firebase/SvelteFirebaseCourse.png
 excerpt: 'Learn how to use SvelteKit and Firebase to build high-performance, scalable web applications.'
-published: draft
+published: published
 slug: sveltekit-firebase
-start: Jan 1, 2024
+start: Dec 15, 2023
 title: 'Learn SvelteKit and Firebase: The Ultimate Guide'
 youtube:
 ---

apps/codingcatdev/src/routes/(content-single)/course/sveltekit-firebase/lesson/1_1-welcome/+page.md

@@ -6,9 +6,9 @@ cloudinary_convert: false
 cover: https://media.codingcat.dev/image/upload/v1702154357/main-codingcatdev-photo/courses/sveltekit-firebase/sveltekit-firebase-welcome/sveltekit-firebase-welcome.png
 excerpt: Thank you for trusting me to teach you this course!
 locked: false
-published: draft
+published: published
 slug: welcome
-start: April 17, 2023
+start: Dec 15, 2023
 section: Welcome and Resources
 title: Welcome
 weight: 1

apps/codingcatdev/src/routes/(content-single)/course/sveltekit-firebase/lesson/1_2-resources/+page.md

@@ -6,9 +6,9 @@ cloudinary_convert: false
 cover: https://media.codingcat.dev/video/upload/v1702220205/main-codingcatdev-photo/courses/sveltekit-firebase/sveltekit-firebase-resources/sveltekit-firebase-resources.mp4
 excerpt: Resources and links for the course.
 locked: false
-published: draft
+published: published
 slug: welcome
-start: April 17, 2023
+start: Dec 15, 2023
 title: Resources
 weight: 2
 videoCloudinary: https://media.codingcat.dev/video/upload/v1702162150/main-codingcatdev-photo/courses/sveltekit-firebase/sveltekit-firebase-resources/sveltekit-firebase-resources.mp4

apps/codingcatdev/src/routes/(content-single)/course/sveltekit-firebase/lesson/2_1-intro-to-svelte/+page.md

@@ -6,12 +6,12 @@ cloudinary_convert: false
 cover: https://media.codingcat.dev/image/upload/v1702235179/main-codingcatdev-photo/courses/sveltekit-firebase/svelte-firebase-intro-to-svelte/sveltekit-firebase-intro-svelte.png
 excerpt: What is Svelte?
 locked: false
-published: draft
+published: published
 slug: intro-to-svelte
-start: April 17, 2023
+start: Dec 15, 2023
 section: Intro / Project Setup
 title: Intro to Svelte
-weight: 3
+weight: 2.1
 videoCloudinary:
 youtube: https://youtu.be/gjsJFZsiXOU
 ---