Add billing counter component to sidebar (#234)

* WIP: Add billing counter component to sidebar
Fixes #233

* Clean up and add ref

* Add `ml-*` colors to tailwind.config.js to match ZDS

* Use className prop to remove border radius

* Override limited state component text with TTC-specific messaging

* First pass at hooking up real data

* Add @kittycad/react-shared 0.1.4

* Move logic to billing.ts file

* Clean up and TODO

* Fix lint

* Clean up

---------

Co-authored-by: Frank Noirot <frankjohnson1993@gmail.com>

Author: pierremtb

package-lock.json

@@ -51,13 +51,18 @@
 	"type": "module",
 	"dependencies": {
 		"@kittycad/lib": "2.0.40",
+		"@kittycad/react-shared": "^0.1.4",
 		"@threlte/core": "^6.1.0",
 		"@threlte/extras": "^7.3.0",
 		"@types/core-js": "^2.5.8",
+		"@types/react": "^18.3.17",
+		"@types/react-dom": "^18.3.5",
 		"@vercel/analytics": "^1.1.1",
 		"@vercel/speed-insights": "^1.0.2",
 		"core-js-pure": "^3.35.0",
 		"object.groupby": "^1.0.1",
+		"react": "^18.3.1",
+		"react-dom": "^18.3.1",
 		"svelte-autosize": "^1.1.0",
 		"three": "^0.160.0"
 	}

package.json

@@ -0,0 +1,38 @@
+<script lang="ts">
+	import type { BillingDialogProps } from '@kittycad/react-shared'
+	import { createElement } from 'react'
+	import { createRoot, type Root } from 'react-dom/client'
+	import { onDestroy, onMount } from 'svelte'
+
+	// TODO: Figure out what we do with this boilerplate, or go with a lib
+	// got this from:
+	// - https://joyofcode.xyz/using-react-libraries-in-svelte
+	// - https://pandemicode.dev/using-react-within-your-svelte-applications-3b1f2a75aefc
+	let htmlElement: HTMLElement
+	let reactRoot: Root
+
+	onMount(() => {
+		const props = $$props as BillingDialogProps
+		try {
+			reactRoot = createRoot(htmlElement)
+			import('@kittycad/react-shared').then(({ BillingDialog }) => {
+				const element = createElement(BillingDialog, { ...props })
+				reactRoot.render(element)
+			})
+		} catch (err) {
+			console.log('Failed to mount', { err })
+		}
+	})
+
+	onDestroy(() => {
+		try {
+			if (reactRoot) {
+				reactRoot.unmount()
+			}
+		} catch (err) {
+			console.log('Failed to destroy', { err })
+		}
+	})
+</script>
+
+<div bind:this={htmlElement} class="root-el" />

src/components/BillingDialog.svelte

@@ -56,8 +56,8 @@
 		if (component || elementScroll) {
 			const element = elementScroll ? elementScroll : component.parentNode
 
-			element?.removeEventListener('scroll', null)
-			element?.removeEventListener('resize', null)
+			element?.removeEventListener('scroll', onScroll)
+			element?.removeEventListener('resize', onScroll)
 		}
 	})
 </script>

src/components/InfiniteScroll.svelte

@@ -2,9 +2,13 @@
 	import Close from 'components/Icons/Close.svelte'
 	import Sidebar from 'components/Icons/Sidebar.svelte'
 	import GenerationList from 'components/GenerationList.svelte'
+	import BillingDialog from './BillingDialog.svelte'
 	import { page } from '$app/stores'
+	import { env } from '$lib/env'
 
 	export let className = ''
+	export let credits: number | undefined
+	export let allowance: number | undefined
 	let isSidebarOpen = false
 
 	// Close the sidebar on navigation
@@ -34,6 +38,18 @@
 		<div class="flex-auto overflow-hidden border-b border-chalkboard-30 dark:border-chalkboard-90">
 			<GenerationList />
 		</div>
+		<div>
+			<BillingDialog
+				upgradeHref={env.VITE_SITE_BASE_URL + '/design-studio-pricing'}
+				{credits}
+				{allowance}
+				className="rounded-none"
+				text={{
+					heading: { limited: 'Get more Text-to-CAD credits' },
+					paragraph: { limited: 'Upgrade your plan, starting at $20!' }
+				}}
+			/>
+		</div>
 	</div>
 </nav>
 

src/components/Sidebar.svelte

@@ -0,0 +1,135 @@
+import type { Models } from '@kittycad/lib/types'
+import { env } from '$lib/env'
+
+// Stolen from modeling-app, need to see what we do with those
+enum Tier {
+	Free = 'free',
+	Pro = 'pro',
+	Organization = 'organization',
+	Unknown = 'unknown'
+}
+
+type OrgOrError = Models['Org_type'] | number | Error
+type SubscriptionsOrError = Models['ZooProductSubscriptions_type'] | number | Error
+type TierBasedOn = {
+	orgOrError: OrgOrError
+	subscriptionsOrError: SubscriptionsOrError
+}
+
+type ExcludeErr<T> = Exclude<T, Error>
+export function isErr<T>(value: ExcludeErr<T> | Error): value is Error {
+	return value instanceof Error
+}
+
+const toTierFrom = (args: TierBasedOn): Tier => {
+	if (typeof args.orgOrError !== 'number' && !('error_code' in args.orgOrError)) {
+		return Tier.Organization
+	} else if (typeof args.subscriptionsOrError !== 'number' && !isErr(args.subscriptionsOrError)) {
+		const subscriptions: Models['ZooProductSubscriptions_type'] = args.subscriptionsOrError
+		if (subscriptions.modeling_app.name === 'pro') {
+			return Tier.Pro
+		} else {
+			return Tier.Free
+		}
+	}
+
+	return Tier.Unknown
+}
+
+/**
+ * Copied logic from https://github.com/KittyCAD/modeling-app/blob/49d40f28b703505743f90948a38ede929d4f28e0/src/machines/billingMachine.ts#L91
+ */
+export async function getBillingInfo(token: string) {
+	const billingOrError: Models['CustomerBalance_type'] | number | Error = await fetch(
+		`${env.VITE_API_BASE_URL}/user/payment/balance`,
+		{
+			method: 'GET',
+			headers: {
+				'Content-Type': 'application/json',
+				Authorization: `Bearer ${token}`
+			}
+		}
+	)
+		.then((res) => res.json())
+		.catch((e) => {
+			console.error('Error fetching balance:', e)
+		})
+
+	if (typeof billingOrError === 'number') {
+		return new Error('Received error code: ' + billingOrError)
+	}
+
+	if (isErr(billingOrError)) {
+		return billingOrError
+	}
+
+	const billing: Models['CustomerBalance_type'] = billingOrError
+
+	const subscriptionsOrError: Models['ZooProductSubscriptions_type'] | number | Error = await fetch(
+		`${env.VITE_API_BASE_URL}/user/payment/subscriptions`,
+		{
+			method: 'GET',
+			headers: {
+				'Content-Type': 'application/json',
+				Authorization: `Bearer ${token}`
+			}
+		}
+	)
+		.then((res) => res.json())
+		.catch((e) => {
+			console.error('Error fetching subscriptions:', e)
+		})
+
+	if (typeof subscriptionsOrError === 'number') {
+		return new Error('Received error code: ' + subscriptionsOrError)
+	}
+
+	if (isErr(subscriptionsOrError)) {
+		return subscriptionsOrError
+	}
+
+	const orgOrError: Models['Org_type'] | number | Error = await fetch(
+		`${env.VITE_API_BASE_URL}/org`,
+		{
+			method: 'GET',
+			headers: {
+				'Content-Type': 'application/json',
+				Authorization: `Bearer ${token}`
+			}
+		}
+	)
+		.then((res) => res.json())
+		.catch((e) => {
+			console.error('Error fetching org:', e)
+		})
+
+	const tier = toTierFrom({
+		orgOrError,
+		subscriptionsOrError
+	})
+
+	let credits =
+		Number(billing.monthly_api_credits_remaining) + Number(billing.stable_api_credits_remaining)
+	let allowance = undefined
+
+	switch (tier) {
+		case Tier.Organization:
+		case Tier.Pro:
+			credits = Infinity
+			break
+		case Tier.Free:
+			// TS too dumb Tier.Free has the same logic
+			if (typeof subscriptionsOrError !== 'number' && !isErr(subscriptionsOrError)) {
+				allowance = Number(subscriptionsOrError.modeling_app.monthly_pay_as_you_go_api_credits)
+			}
+			break
+		case Tier.Unknown:
+			break
+	}
+
+	return {
+		tier,
+		credits,
+		allowance
+	}
+}

src/lib/billing.ts

@@ -4,6 +4,7 @@ import { hooksUserMocks, isUserMock } from '$lib/mocks.js'
 import { SIGN_OUT_PARAM } from '$lib/paths.js'
 import { redirect } from '@sveltejs/kit'
 import { env } from '$lib/env'
+import { getBillingInfo, isErr } from '$lib/billing'
 
 export const load = async ({ cookies, request, url, fetch }) => {
 	if (url.searchParams.get(SIGN_OUT_PARAM)) {
@@ -46,10 +47,21 @@ export const load = async ({ cookies, request, url, fetch }) => {
 			}
 		}
 
-		// Return the user and token
+		const billing = await getBillingInfo(token)
+		if (isErr(billing)) {
+			console.error('Error fetching billing info:', billing)
+			return {
+				user: currentUser,
+				token: token
+			}
+		}
+
 		return {
 			user: currentUser,
-			token: token
+			token: token,
+			tier: billing.tier,
+			credits: billing.credits,
+			allowance: billing.allowance
 		}
 	}
 

src/routes/(sidebarLayout)/+layout.server.ts

@@ -9,7 +9,7 @@
 <div class="h-screen overflow-hidden flex flex-col" style="height: 100dvh;">
 	<AppHeader user={data ? data.user : undefined} />
 	<div class="pane-layout">
-		<Sidebar className="md:w-80" />
+		<Sidebar className="md:w-80" credits={data.credits} allowance={data.allowance} />
 		<main>
 			<div class="main-content">
 				<slot />