fix: read notes

- several more fixes since the data streaming was introduced
- fixes the zips downloads
- fixes the subscriptions and free access not always showing
- fixes subscription renew toggle now stays in the position you've changed it to

src/hooks.server.ts

@@ -115,7 +115,7 @@ const authGuard: Handle = async ({ event, resolve }) => {
 			.select("id, product, date_start, date_end")
 			.eq("id", user.id)
 
-		console.log(`💰 Subscriptions took ${(performance.now() - start).toFixed(2)} ms to check!`)
+		console.log(`💰 Free access took ${(performance.now() - start).toFixed(2)} ms to check!`)
 		if (err) return null
 		return data
 	}

src/lib/components/ZIPDownload.svelte

@@ -119,8 +119,8 @@
 		const zipBlob = await zip.generateAsync({ type: "blob" })
 		progress = 1
 		setTimeout(async () => (progress = -1), 2000)
-		const FileSaver = await require("file-saver")
-		return FileSaver.saveAs(zipBlob, zipName)
+		const { saveAs } = await import("file-saver")
+		return saveAs(zipBlob, zipName)
 	}
 
 	async function downloadAndZip() {

src/routes/api/scripts/+server.ts

@@ -5,7 +5,7 @@ export const POST = async ({ request, locals: { user } }) => {
 	if (!user) error(403, "You need to be logged in!")
 	const data = await request.json()
 
-	if (!Object.keys(data).includes("id")) error(403, "No script specified.")
+	if (!Object.keys(data).includes("ids")) error(403, "No script specified.")
 	const ids = data.ids as string[]
 
 	let promises: ReturnType<typeof updateDownloaders>[] = []

src/routes/subscriptions/+page.server.ts

@@ -12,11 +12,14 @@ export const load = async ({ locals: { getSubscriptions, getFreeAccess } }) => {
 		superValidate(zod(checkoutSchema))
 	])
 
+	const subscriptions = getSubscriptions()
+	const freeAccess = getFreeAccess()
+
 	return {
 		subscriptionsform: promises[0],
 		checkoutForm: promises[1],
-		subscriptions: getSubscriptions(),
-		freeAccess: getFreeAccess()
+		subscriptions,
+		freeAccess
 	}
 }
 
@@ -213,8 +216,9 @@ export const actions = {
 		}
 
 		if (!profile.customer_id) {
-			throw error(
-				403,
+			return setError(
+				form,
+				"",
 				"You don't have a customer id. This should not be possible! Please contact [email protected]"
 			)
 		}
@@ -268,6 +272,6 @@ export const actions = {
 			cancel_at_period_end: !subscription.cancel_at_period_end
 		})
 
-		return
+		return { form, subscription: subscriptionID }
 	}
 }

src/routes/subscriptions/+page.svelte

@@ -19,9 +19,11 @@
 	import { zodClient } from "sveltekit-superforms/adapters"
 
 	export let data
+	export let form
 
-	let { profile, pageDataPromise, pricesPromise, subscriptionsPromise, freeAccessPromise } = data
-	$: ({ profile, pageDataPromise, pricesPromise, subscriptionsPromise, freeAccessPromise } = data)
+	const { profile, freeAccessPromise } = data
+	let { pageDataPromise, pricesPromise, subscriptionsPromise } = data
+	$: ({ pageDataPromise, pricesPromise, subscriptionsPromise } = data)
 
 	let bundles: Awaited<typeof pageDataPromise>["bundles"] | null = null
 	let scripts: Awaited<typeof pageDataPromise>["scripts"] | null = null
@@ -36,34 +38,53 @@
 	const { errors: subscriptionsErrors, enhance: subscriptionEnhance } = superForm(
 		data.subscriptionsform,
 		{
+			id: "subscriptions",
 			dataType: "json",
 			multipleSubmits: "prevent",
 			clearOnSubmit: "errors"
 		}
 	)
 
 	let subscriptions: Subscription[] | null = null
-	$: if (subscriptionsPromise) {
-		subscriptionsPromise.then((subs) => (subscriptions = subs))
-	} else subscriptions = null
-
 	let free_access: FreeAccess[] | null = null
-	$: if (freeAccessPromise) {
-		freeAccessPromise.then((free) => (free_access = free))
-	} else subscriptions = null
+
+	if (subscriptionsPromise) subscriptionsPromise.then((subs) => (subscriptions = subs))
+	if (freeAccessPromise) freeAccessPromise.then((free) => (free_access = free))
 
 	$: if (subscriptions && bundles && scripts) {
-		subscriptions.forEach((sub) => {
-			bundles?.forEach((bundle) => {
-				if (sub.product === bundle.id) bundle.active = false
+		for (let i = 0; i < subscriptions.length; i++) {
+			const product = subscriptions[i].product
+
+			bundles.forEach((bundle) => {
+				if (product === bundle.id) bundle.active = false
 			})
+			scripts.forEach((script) => {
+				if (product === script.id) script.active = false
+			})
+		}
+	}
 
-			scripts?.forEach((script) => {
-				if (sub.product === script.id) script.active = false
+	$: if (free_access && bundles && scripts) {
+		for (let i = 0; i < free_access.length; i++) {
+			const product = free_access[i].product
+
+			bundles.forEach((bundle) => {
+				if (product === bundle.id) bundle.active = false
+			})
+			scripts.forEach((script) => {
+				if (product === script.id) script.active = false
 			})
-		})
+		}
+	}
+
+	function toggleSub(subscription: string) {
+		if (!subscriptions) return
+		const i = subscriptions.findIndex((sub) => sub.subscription === subscription)
+		if (i > -1) subscriptions[i].cancel = !subscriptions[i].cancel
 	}
 
+	$: if (form?.subscription) toggleSub(form.subscription)
+
 	let subsform: HTMLFormElement
 
 	let {
@@ -72,6 +93,7 @@
 		enhance: checkoutEnhance,
 		allErrors
 	} = superForm(data.checkoutForm, {
+		id: "checkout",
 		dataType: "json",
 		multipleSubmits: "prevent",
 		clearOnSubmit: "errors",
@@ -85,11 +107,13 @@
 		enhance: checkoutEnhance,
 		allErrors
 	} = superForm(data.checkoutForm, {
+		id: "checkout",
 		dataType: "json",
 		multipleSubmits: "prevent",
 		clearOnSubmit: "errors",
 		taintedMessage: null,
-		validators: zodClient(checkoutSchema)
+		validators: zodClient(checkoutSchema),
+		warnings: { duplicateId: false }
 	}))
 
 	function changePriceInterval(prices: Price[], index: number, productIndex: number) {
@@ -101,11 +125,13 @@
 	}
 
 	async function getBundle(id: string) {
-		return bundles?.find((bundle) => bundle.id === id)
+		const { bundles } = await pageDataPromise
+		return bundles.find((bundle) => bundle.id === id)
 	}
 
 	async function getScript(id: string) {
-		return scripts?.find((script) => script.id === id)
+		const { scripts } = await pageDataPromise
+		return scripts.find((script) => script.id === id)
 	}
 
 	let userLocale = "pt-PT"
@@ -176,10 +202,34 @@
 								{#each subscriptions as subscription}
 									{@const price = getPrice(subscription.price, prices)}
 									{#await getBundle(subscription.product)}
-										<tr>
-											<td colspan="7">
-												<span class="flex justify-center text-center py-3">...</span>
-											</td>
+										<tr> </tr><tr class="table-row">
+											<TableCell alignment="left" padding={0}>
+												<div class="mx-3">
+													<div>Loading...</div>
+													<div class="text-xs text-left">by Loading...</div>
+												</div>
+											</TableCell>
+											<TableCell padding={0}>
+												<button class="btn hover:cursor-pointer hover:text-primary-500">
+													<RotateCw size={16} />
+													<span>Loading...</span>
+												</button>
+											</TableCell>
+											<TableCell>...</TableCell>
+											<TableCell>...</TableCell>
+											<TableCell>Loading...</TableCell>
+											<TableCell>Loading...</TableCell>
+											<TableCell>
+												<SlideToggle
+													name="placeholder"
+													checked={false}
+													size="sm"
+													active="variant-filled-success"
+													background="variant-filled-surface"
+													disabled={true}
+													class="disabled"
+												/>
+											</TableCell>
 										</tr>
 									{:then bundle}
 										{#if bundle}

src/routes/subscriptions/+page.ts

@@ -31,6 +31,7 @@ export const load = async ({ parent, data }) => {
 		id: string
 		username: string
 	}
+
 	const cachedUsers: User[] = []
 
 	async function getProfile(id: string) {