From d23f6adeff0146b0004c4e407c8b5f87ead1aeef Mon Sep 17 00:00:00 2001
From: Torwent <Torwent@users.noreply.github.com>
Date: Tue, 9 Jan 2024 13:19:16 +0100
Subject: [PATCH] fix: read notes

- reworked the dashboard so it's less overwhelming. it now has tabs for each "category" of thing you are looking at.
- added front-end for editing stripe's business name (aka doing business as)
- made the default for new connect accounts to have their business name as their discord username
---
 src/lib/backend/data.server.ts              |  32 +++
 src/lib/backend/schemas.ts                  |   4 +
 src/routes/dashboard/Table.svelte           |   3 +-
 src/routes/dashboard/[slug]/+page.server.ts |  52 ++++-
 src/routes/dashboard/[slug]/+page.svelte    | 237 ++++++++++++++------
 src/routes/dashboard/[slug]/+page.ts        |   7 +
 6 files changed, 255 insertions(+), 80 deletions(-)

diff --git a/src/lib/backend/data.server.ts b/src/lib/backend/data.server.ts
index 0123e1d..c0c24f6 100644
--- a/src/lib/backend/data.server.ts
+++ b/src/lib/backend/data.server.ts
@@ -292,6 +292,7 @@ export async function createStripeConnectAccount(
 			},
 			business_profile: {
 				mcc: "5734",
+				name: scripter.profiles.username,
 				support_url: "https://waspscripts.com/scripters/" + scripter.url,
 				url: "https://waspscripts.com/scripters/" + scripter.url,
 				support_email: "support@waspscripts.com"
@@ -352,6 +353,37 @@ export async function finishStripeAccountSetup(baseURL: string, account: string)
 	return accountLink.url
 }
 
+export async function getStripeAccount(id: string) {
+	let stripeAccount: Stripe.Response<Stripe.Account> | null = null
+
+	try {
+		stripeAccount = await stripe.accounts.retrieve(id)
+	} catch (error) {
+		console.error(
+			"An error occurred when calling the Stripe API to create an account session",
+			error
+		)
+	}
+
+	return stripeAccount
+}
+
+export async function updateStripeAccount(id: string, dba: string) {
+	let stripeAccount: Stripe.Response<Stripe.Account> | null = null
+
+	try {
+		stripeAccount = await stripe.accounts.update(id, { business_profile: { name: dba } })
+	} catch (error) {
+		console.error(
+			"An error occurred when calling the Stripe API to create an account session",
+			error
+		)
+		return false
+	}
+
+	return true
+}
+
 export async function getStripeSession(account: string) {
 	let accountSession: Stripe.Response<Stripe.AccountSession> | null = null
 
diff --git a/src/lib/backend/schemas.ts b/src/lib/backend/schemas.ts
index e4479d2..692eb7b 100644
--- a/src/lib/backend/schemas.ts
+++ b/src/lib/backend/schemas.ts
@@ -359,6 +359,10 @@ export const countryCodeSchema = z.object({
 	code: z.string().length(2, "Country codes have to be only 2 letters")
 })
 
+export const dbaSchema = z.object({
+	dba: z.string().min(3, "Your name needs to be longer")
+})
+
 export type PriceSchema = z.infer<typeof priceSchema>
 export type BundleSchema = z.infer<typeof newBundleSchema>
 export type NewScriptSchema = z.infer<typeof newScriptSchema>
diff --git a/src/routes/dashboard/Table.svelte b/src/routes/dashboard/Table.svelte
index c57fdfd..e09a40b 100644
--- a/src/routes/dashboard/Table.svelte
+++ b/src/routes/dashboard/Table.svelte
@@ -25,8 +25,7 @@
 		multipleSubmits: "prevent",
 		clearOnSubmit: "errors-and-message",
 		validators: schema,
-		resetForm: true,
-		invalidateAll: true
+		resetForm: true
 	})
 
 	const btnText = action.includes("dd") ? "Add" : "Save"
diff --git a/src/routes/dashboard/[slug]/+page.server.ts b/src/routes/dashboard/[slug]/+page.server.ts
index 5f9a4ea..900904c 100644
--- a/src/routes/dashboard/[slug]/+page.server.ts
+++ b/src/routes/dashboard/[slug]/+page.server.ts
@@ -8,11 +8,14 @@ import {
 	finishStripeAccountSetup,
 	updateStripePrice,
 	updateStripeProduct,
-	getStripeSession
+	getStripeSession,
+	getStripeAccount,
+	updateStripeAccount
 } from "$lib/backend/data.server"
 import {
 	bundleArraySchema,
 	countryCodeSchema,
+	dbaSchema,
 	newBundleSchema,
 	newScriptArraySchema,
 	scriptArraySchema
@@ -35,6 +38,7 @@ export const load = async (event) => {
 
 	const promises = await Promise.all([
 		superValidate(event, countryCodeSchema),
+		superValidate(event, dbaSchema),
 		superValidate(event, bundleArraySchema),
 		superValidate(event, newBundleSchema),
 		superValidate(event, scriptArraySchema),
@@ -43,15 +47,21 @@ export const load = async (event) => {
 	])
 
 	event.depends("dashboard:stripe_session")
-	const stripeSession = promises[5].stripe ? await getStripeSession(promises[5].stripe) : null
+
+	const scripter = promises[6]
+
+	const stripeAccount = scripter.stripe ? await getStripeAccount(scripter.stripe) : null
+	const stripeSession = scripter.stripe ? await getStripeSession(scripter.stripe) : null
 
 	return {
 		countryForm: promises[0],
-		bundlesForm: promises[1],
-		newBundleForm: promises[2],
-		scriptsForm: promises[3],
-		newScriptForm: promises[4],
-		stripeSession: stripeSession
+		dbaForm: promises[1],
+		bundlesForm: promises[2],
+		newBundleForm: promises[3],
+		scriptsForm: promises[4],
+		newScriptForm: promises[5],
+		stripeAccount,
+		stripeSession
 	}
 }
 
@@ -108,6 +118,34 @@ export const actions = {
 		return
 	},
 
+	displayName: async ({
+		request,
+		locals: { supabaseServer, getSession, getProfile },
+		url: { origin },
+		params: { slug }
+	}) => {
+		const promises = await Promise.all([getSession(), getProfile(), request.formData()])
+		const profile = promises[1]
+
+		if (!promises[0] || !profile) {
+			return await doLogin(supabaseServer, origin, new URLSearchParams("login&provider=discord"))
+		}
+
+		if (!UUID_V4_REGEX.test(slug)) throw error(403, "Invalid dashboard UUID.")
+		if (profile.id !== slug && !profile.roles.administrator)
+			throw error(403, "You cannot access another scripter dashboard.")
+
+		const scripter = await getScripterDashboard(supabaseServer, slug)
+
+		const form = await superValidate(promises[2], dbaSchema)
+		if (!form.valid) return setError(form, "", "The name you set is not valid!")
+		if (!scripter.stripe) return setError(form, "", "The user is missing a stripe profile!")
+
+		const success = await updateStripeAccount(scripter.stripe, form.data.dba)
+		if (!success) return setError(form, "", "Failed to update stripe's business name")
+		return
+	},
+
 	bundleEdit: async ({
 		request,
 		locals: { supabaseServer, getSession, getProfile },
diff --git a/src/routes/dashboard/[slug]/+page.svelte b/src/routes/dashboard/[slug]/+page.svelte
index cad7615..d1dbb3f 100644
--- a/src/routes/dashboard/[slug]/+page.svelte
+++ b/src/routes/dashboard/[slug]/+page.svelte
@@ -1,11 +1,12 @@
 <script lang="ts">
 	import TableHeader from "$lib/components/tables/TableHeader.svelte"
 	import TableCell from "$lib/components/tables/TableCell.svelte"
-	import { onMount } from "svelte"
+	import { onDestroy, onMount } from "svelte"
 	import { invalidate } from "$app/navigation"
 	import {
 		bundleArraySchema,
 		countryCodeSchema,
+		dbaSchema,
 		newBundleSchema,
 		newScriptArraySchema,
 		scriptArraySchema
@@ -14,17 +15,53 @@
 	import { superForm } from "sveltekit-superforms/client"
 	import { PUBLIC_STRIPE_PUBLISHABLE_KEY } from "$env/static/public"
 	import { browser } from "$app/environment"
+	import type { RealtimeChannel } from "@supabase/supabase-js"
+	import { Tab, TabGroup } from "@skeletonlabs/skeleton"
+	import { FileCode, Landmark, Package } from "lucide-svelte"
+	import type { StripeConnectInstance } from "@stripe/connect-js"
 
 	export let data
 	let { supabaseClient, profile, scripter, stats } = data
 
-	const { form, errors, enhance, allErrors } = superForm(data.countryForm, {
+	const {
+		form: countryForm,
+		errors: countryErrors,
+		enhance: countryEnhance,
+		allErrors: countryAllErrors
+	} = superForm(data.countryForm, {
 		dataType: "json",
 		multipleSubmits: "prevent",
 		clearOnSubmit: "errors-and-message",
-		validators: countryCodeSchema
+		validators: countryCodeSchema,
+		resetForm: true
 	})
 
+	const {
+		form: dbaForm,
+		errors: dbaErrors,
+		enhance: dbaEnhance,
+		allErrors: dbaAllErrors
+	} = superForm(data.dbaForm, {
+		dataType: "json",
+		multipleSubmits: "prevent",
+		clearOnSubmit: "errors-and-message",
+		validators: dbaSchema,
+		resetForm: true
+	})
+
+	let tabSet: number = 0
+	let subscription: RealtimeChannel | undefined
+
+	let paymentContainer: HTMLElement | undefined
+	let payoutContainer: HTMLElement | undefined
+
+	let stripeConnectInstance: StripeConnectInstance | undefined
+
+	$: if (paymentContainer && stripeConnectInstance)
+		paymentContainer.appendChild(stripeConnectInstance.create("payments"))
+	$: if (payoutContainer && stripeConnectInstance)
+		payoutContainer.appendChild(stripeConnectInstance.create("payouts"))
+
 	onMount(async () => {
 		if (browser && document) {
 			const connectJS = await import("@stripe/connect-js")
@@ -34,20 +71,13 @@
 				return data.stripeSession ?? ""
 			}
 
-			const stripeConnectInstance = connectJS.loadConnectAndInitialize({
+			stripeConnectInstance = connectJS.loadConnectAndInitialize({
 				publishableKey: PUBLIC_STRIPE_PUBLISHABLE_KEY,
 				fetchClientSecret: fetchClientSecret
 			})
-			const paymentComponent = stripeConnectInstance.create("payments")
-			const paymentContainer = document.getElementById("stripePaymentsContainer")
-			const payoutComponent = stripeConnectInstance.create("payouts")
-			const payoutContainer = document.getElementById("stripePayoutsContainer")
-
-			if (paymentContainer) paymentContainer.appendChild(paymentComponent)
-			if (payoutContainer) payoutContainer.appendChild(payoutComponent)
 		}
 
-		const subscription = supabaseClient
+		subscription = supabaseClient
 			.channel("products-subscription-changes")
 			.on(
 				"postgres_changes",
@@ -60,8 +90,10 @@
 				() => invalidate("dashboard")
 			)
 			.subscribe()
+	})
 
-		return () => subscription.unsubscribe()
+	onDestroy(async () => {
+		if (subscription) await subscription.unsubscribe()
 	})
 </script>
 
@@ -75,12 +107,17 @@
 		<a href="/scripters/{scripter.url}" class="btn variant-filled-secondary">Scripter profile</a>
 	</div>
 	{#if !scripter.stripe}
-		<form method="POST" action="?/createStripe" class="my-32 grid place-items-center" use:enhance>
+		<form
+			method="POST"
+			action="?/createStripe"
+			class="my-32 grid place-items-center"
+			use:countryEnhance
+		>
 			<h3>Stripe Account</h3>
 
 			<div class="my-4">
 				<label for="code">Choose a country (this cannot be changed later):</label>
-				<select class="select" name="code" id="code" bind:value={$form.code}>
+				<select class="select" name="code" id="code" bind:value={$countryForm.code}>
 					<option value="AU">Australia (AU)</option>
 					<option value="AT">Austria (AT)</option>
 					<option value="BE">Belgium (BE)</option>
@@ -125,18 +162,18 @@
 					<option value="US">United States (US)</option>
 				</select>
 			</div>
-			{#if $errors && $errors.code}
+			{#if $countryErrors && $countryErrors.code}
 				<div
 					class="max-h-24 bg-surface-700 rounded-md overflow-y-scroll overflow-x-hidden text-error-500"
 				>
-					{$errors.code}
+					{$countryErrors.code}
 				</div>
 			{/if}
-			{#if $allErrors}
+			{#if $countryAllErrors}
 				<div
 					class="max-h-24 bg-surface-700 rounded-md overflow-y-scroll overflow-x-hidden text-error-500"
 				>
-					{#each $allErrors as error, i}
+					{#each $countryAllErrors as error, i}
 						{#if i === 0}
 							Errors:
 						{/if}
@@ -149,7 +186,7 @@
 					{/each}
 				</div>
 			{/if}
-			<button disabled={$form.code === ""} class="btn variant-filled-secondary">
+			<button disabled={$countryForm.code === ""} class="btn variant-filled-secondary">
 				Create stripe connected account
 			</button>
 		</form>
@@ -198,57 +235,115 @@
 	</h5>
 
 	{#if scripter.stripe}
-		<h3 class="justify-center text-center my-12">Bundles</h3>
-
-		<Table
-			id="bundleEdit"
-			schema={bundleArraySchema}
-			data={data.bundlesForm}
-			headers={[
-				"Title",
-				"Price (Week/Month/Year)",
-				"Subscribers (Week/Month/Year)",
-				"Scripts",
-				"Action"
-			]}
-			subscriptions={[0, 5, 10]}
-			action={"bundleEdit&product"}
-		/>
-
-		<Table
-			id="bundleAdd"
-			schema={newBundleSchema}
-			data={data.newBundleForm}
-			headers={["New Bundle", "Price (Week/Month/Year)", "Scripts", "Action"]}
-			action={"bundleAdd"}
-		/>
-
-		<h3 class="justify-center text-center mt-32 my-12">Premium scripts</h3>
-
-		<Table
-			id="scriptEdit"
-			schema={scriptArraySchema}
-			data={data.scriptsForm}
-			headers={["Title", "Price (Week/Month/Year)", "Subscribers (Week/Month/Year)", "Action"]}
-			subscriptions={[0, 5, 10]}
-			action={"scriptEdit&product"}
-		/>
-
-		<Table
-			id="scriptAdd"
-			schema={newScriptArraySchema}
-			data={data.newScriptForm}
-			headers={["New Premium Script", "Price (Week/Month/Year)", "Action"]}
-			action={"scriptAdd&script"}
-		/>
-
-		<div class="my-16 mx-auto max-w-7xl">
-			<h3 class="text-center">Stripe Dashboard</h3>
-
-			<h5 class="text-center my-4">Payments</h5>
-			<div id="stripePaymentsContainer" class="my-8" />
-			<h5 class="text-center my-4">Payouts</h5>
-			<div id="stripePayoutsContainer" class="my-8" />
+		<div class="border-surface-500 border-2 rounded-md">
+			<TabGroup
+				justify="justify-center"
+				regionList="max-w-7xl mx-auto my-8"
+				regionPanel="max-w-7xl mx-auto my-8"
+				border="border-0"
+				active="border-b-2 border-primary-500 text-primary-500"
+			>
+				<Tab bind:group={tabSet} name="tab1" value={0}>
+					<div class="flex justify-end"><Landmark />Stripe</div>
+				</Tab>
+				<Tab bind:group={tabSet} name="tab2" value={1}>
+					<div class="flex justify-end"><Package /> Bundles</div>
+				</Tab>
+				<Tab bind:group={tabSet} name="tab3" value={2}>
+					<div class="flex justify-end"><FileCode /> Scripts</div>
+				</Tab>
+				<!-- Tab Panels --->
+				<svelte:fragment slot="panel">
+					{#if tabSet === 0}
+						<form
+							method="POST"
+							action="?/displayName"
+							class="my-32 place-items-center flex"
+							use:dbaEnhance
+						>
+							<div class="my-4">
+								<label for="dba">Invoice display name:</label>
+								<input class="input" name="dba" id="dba" bind:value={$dbaForm.dba} />
+								{#if $dbaErrors && $dbaErrors.dba}
+									<div
+										class="max-h-24 bg-surface-700 rounded-md overflow-y-scroll overflow-x-hidden text-error-500"
+									>
+										{$dbaErrors.dba}
+									</div>
+								{/if}
+								{#if $dbaAllErrors}
+									<div
+										class="max-h-24 bg-surface-700 rounded-md overflow-y-scroll overflow-x-hidden text-error-500"
+									>
+										{#each $dbaAllErrors as error, i}
+											{#if i === 0}
+												Errors:
+											{/if}
+											<small class="mx-8 text-error-500 flex rounded-md">
+												Error path: {error.path}
+												{#each error.messages as messages}
+													{messages}
+												{/each}
+											</small>
+										{/each}
+									</div>
+								{/if}
+							</div>
+							<button class="btn variant-filled-secondary mt-6 mx-4 h-10">Update</button>
+						</form>
+
+						<h5 class="text-center my-4">Payments</h5>
+						<div class="my-8" bind:this={paymentContainer} />
+						<h5 class="text-center my-4">Payouts</h5>
+						<div class="my-8" bind:this={payoutContainer} />
+					{:else if tabSet === 1}
+						<Table
+							id="bundleEdit"
+							schema={bundleArraySchema}
+							data={data.bundlesForm}
+							headers={[
+								"Title",
+								"Price (Week/Month/Year)",
+								"Subscribers (Week/Month/Year)",
+								"Scripts",
+								"Action"
+							]}
+							subscriptions={[0, 5, 10]}
+							action={"bundleEdit&product"}
+						/>
+
+						<Table
+							id="bundleAdd"
+							schema={newBundleSchema}
+							data={data.newBundleForm}
+							headers={["New Bundle", "Price (Week/Month/Year)", "Scripts", "Action"]}
+							action={"bundleAdd"}
+						/>
+					{:else if tabSet === 2}
+						<Table
+							id="scriptEdit"
+							schema={scriptArraySchema}
+							data={data.scriptsForm}
+							headers={[
+								"Title",
+								"Price (Week/Month/Year)",
+								"Subscribers (Week/Month/Year)",
+								"Action"
+							]}
+							subscriptions={[0, 5, 10]}
+							action={"scriptEdit&product"}
+						/>
+
+						<Table
+							id="scriptAdd"
+							schema={newScriptArraySchema}
+							data={data.newScriptForm}
+							headers={["New Premium Script", "Price (Week/Month/Year)", "Action"]}
+							action={"scriptAdd&script"}
+						/>
+					{/if}
+				</svelte:fragment>
+			</TabGroup>
 		</div>
 	{/if}
 </main>
diff --git a/src/routes/dashboard/[slug]/+page.ts b/src/routes/dashboard/[slug]/+page.ts
index 969deae..480f628 100644
--- a/src/routes/dashboard/[slug]/+page.ts
+++ b/src/routes/dashboard/[slug]/+page.ts
@@ -279,9 +279,16 @@ export const load = async ({ parent, data, depends, url, params: { slug } }) =>
 		{ amount: 50, currency: "eur", interval: "year" }
 	]
 
+	const stripeAccount = data.stripeAccount
+	const dbaForm = data.dbaForm
+
+	dbaForm.data.dba = stripeAccount?.business_profile?.name ?? ""
+
 	return {
+		stripeAccount,
 		stripeSession: data.stripeSession,
 		countryForm: data.countryForm,
+		dbaForm,
 		bundlesForm,
 		newBundleForm,
 		scriptsForm,