feat: add a more detailed balance information to the scripter dashboa…

…rd than what stripe provides
Torwent · Jan 24, 2024 · f941a7d · f941a7d
1 parent 39c62be
commit f941a7d
Show file tree

Hide file tree

Showing 3 changed files with 34 additions and 6 deletions.
diff --git a/src/lib/backend/data.server.ts b/src/lib/backend/data.server.ts
@@ -366,7 +366,7 @@ export async function createStripeConnectAccount(
 			},
 			metadata: { id: scripter.id, username: scripter.profiles.username },
 			settings: {
-				payouts: { schedule: { interval: "weekly", delay_days: 10, weekly_anchor: "monday" } }
+				payouts: { schedule: { interval: "weekly", delay_days: 7, weekly_anchor: "monday" } }
 			}
 		})
 	} catch (error) {
@@ -421,7 +421,7 @@ export async function finishStripeConnectAccountSetup(baseURL: string, account:
 }
 
 export async function getStripeConnectAccount(id: string) {
-	let stripeAccount: Stripe.Response<Stripe.Account> | null = null
+	let stripeAccount: Stripe.Account | null = null
 
 	try {
 		stripeAccount = await stripe.accounts.retrieve(id)
@@ -432,7 +432,19 @@ export async function getStripeConnectAccount(id: string) {
 		)
 	}
 
-	return stripeAccount
+	let stripeBalance: Stripe.Balance | null = null
+	try {
+		stripeBalance = await stripe.balance.retrieve({
+			stripeAccount: id
+		})
+	} catch (error) {
+		console.error(
+			"An error occurred when calling the Stripe API to create an account session",
+			error
+		)
+	}
+
+	return { stripeAccount, stripeBalance }
 }
 
 export async function updateStripeConnectAccount(id: string, dba: string) {

diff --git a/src/routes/dashboard/[slug]/+page.svelte b/src/routes/dashboard/[slug]/+page.svelte
@@ -17,7 +17,7 @@
 	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 { Currency, FileCode, Landmark, Package } from "lucide-svelte"
 	import type { StripeConnectInstance } from "@stripe/connect-js"
 
 	export let data
@@ -249,6 +249,10 @@
 				<!-- Tab Panels --->
 				<svelte:fragment slot="panel">
 					{#if tabSet === 0}
+						{@const available = data.stripeBalance?.available[0].amount ?? 0}
+						{@const pending = data.stripeBalance?.pending[0].amount ?? 0}
+						{@const currency = data.stripeBalance?.available[0].currency ?? ""}
+
 						<div class="flex justify-around">
 							<form
 								method="POST"
@@ -297,6 +301,15 @@
 							</form>
 						</div>
 
+						<div class="flex justify-around my-8">
+							<h4>
+								Balance: {(available + pending) / 100}
+								{currency}
+							</h4>
+							<h4>Available: {available / 100} {currency}</h4>
+							<h4>Settling: {pending / 100} {currency}</h4>
+						</div>
+
 						{#if data.stripeAccount?.requirements?.currently_due && data.stripeAccount?.requirements?.currently_due.length > 0}
 							<div class="mb-24">
 								<span class="my-2">Missing account information:</span>
@@ -312,7 +325,8 @@
 								</small>
 							</div>
 						{/if}
-						<h5 class="text-center my-4">Payments</h5>
+
+						<h5 class="text-center mt-12 mb-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} />

diff --git a/src/routes/dashboard/[slug]/+page.ts b/src/routes/dashboard/[slug]/+page.ts
@@ -339,13 +339,15 @@ export const load = async ({ parent, data, depends, url, params: { slug } }) =>
 		{ amount: 50, currency: "eur", interval: "year" }
 	]
 
-	const stripeAccount = data.stripeAccount
+	const stripeAccount = data.stripeAccount?.stripeAccount ?? null
+	const stripeBalance = data.stripeAccount?.stripeBalance ?? null
 	const dbaForm = data.dbaForm
 
 	dbaForm.data.dba = stripeAccount?.business_profile?.name ?? ""
 
 	return {
 		stripeAccount,
+		stripeBalance,
 		stripeSession: data.stripeSession,
 		countryForm: data.countryForm,
 		dbaForm,