Merge branch 'stripe'

Author: whkelvin

Dockerfile

@@ -4,6 +4,11 @@ ARG DATABASE_URL
 ARG GOOGLE_OAUTH_CLIENT_ID
 ARG GOOGLE_OAUTH_CLIENT_SECRET
 ARG GOOGLE_OAUTH_CALLBACK_URL
+ARG STRIPE_SECRET_KEY
+ARG STRIPE_WEBHOOK_SECRET
+ARG STRIPE_INDIE_HACKER_PLAN_PRICE_ID
+ARG DOMAIN
+
 RUN mkdir /app
 
 COPY . /app

package-lock.json

@@ -16,17 +16,18 @@
     "@sveltejs/adapter-node": "^5.2.1",
     "@sveltejs/kit": "^2.5.27",
     "@sveltejs/vite-plugin-svelte": "^4.0.0",
+    "@tailwindcss/container-queries": "^0.1.1",
     "@tailwindcss/typography": "^0.5.15",
     "@types/eslint": "^9.6.0",
     "@types/gtag.js": "^0.0.20",
     "@types/node": "^22.5.4",
     "autoprefixer": "^10.4.20",
-    "bits-ui": "^1.0.0-next.77",
+    "bits-ui": "^1.0.0-next.78",
     "clsx": "^2.1.1",
     "embla-carousel-svelte": "^8.3.1",
-    "eslint": "^9.0.0",
+    "eslint": "^9.18.0",
     "eslint-config-prettier": "^9.1.0",
-    "eslint-plugin-svelte": "^2.45.1",
+    "eslint-plugin-svelte": "^2.46.1",
     "globals": "^15.0.0",
     "lucide-svelte": "^0.452.0",
     "prettier": "^3.1.1",
@@ -40,18 +41,20 @@
     "tailwindcss": "^3.4.9",
     "tailwindcss-animate": "^1.0.7",
     "typescript": "^5.5.0",
-    "typescript-eslint": "^8.0.0",
+    "typescript-eslint": "^8.20.0",
     "vite": "^5.4.4"
   },
   "type": "module",
   "dependencies": {
     "@oslojs/crypto": "^1.0.1",
     "@oslojs/encoding": "^1.1.0",
     "@prisma/client": "^6.1.0",
+    "@types/stripe-v3": "^3.1.33",
     "@yizy/spec": "npm:@jsr/yizy__spec@^0.0.1",
     "arctic": "^2.3.3",
     "handlebars": "^4.7.8",
     "mode-watcher": "^0.4.1",
+    "stripe": "^17.5.0",
     "svelte-highlight": "^7.7.0",
     "swapy": "^0.4.2",
     "uuid": "^11.0.3",

package.json

@@ -0,0 +1,14 @@
+-- CreateTable
+CREATE TABLE "StripeSubscription" (
+    "id" SERIAL NOT NULL,
+    "uuid" TEXT NOT NULL,
+    "userId" INTEGER NOT NULL,
+    "active" BOOLEAN NOT NULL,
+    "stripeId" TEXT NOT NULL,
+    "stripeSubscriptionId" TEXT NOT NULL,
+
+    CONSTRAINT "StripeSubscription_pkey" PRIMARY KEY ("id")
+);
+
+-- AddForeignKey
+ALTER TABLE "StripeSubscription" ADD CONSTRAINT "StripeSubscription_userId_fkey" FOREIGN KEY ("userId") REFERENCES "User"("id") ON DELETE RESTRICT ON UPDATE CASCADE;

prisma/migrations/20250119172021_stripe_integration/migration.sql

@@ -25,6 +25,7 @@ model User {
   Workspaces                 BridgeWorkspaceAndUser[]
   Workspace                  Workspace[]
   Specification              Specification[]
+  Subscription StripeSubscription[]
 }
 
 model Workspace {
@@ -85,3 +86,13 @@ model SpecificationSnapshot {
   creatorId      Int
   createdBy      User          @relation(references: [id], fields: [creatorId], onDelete: Cascade)
 }
+
+model StripeSubscription {
+  id Int @id @default(autoincrement())
+  uuid String
+  userId Int
+  user User @relation(references: [id], fields: [userId])
+  active Boolean
+  stripeId String
+  stripeSubscriptionId String
+}

prisma/schema.prisma

@@ -49,6 +49,7 @@
 
 div::-webkit-scrollbar {
 	width: 6px;
+	height: 6px;
 }
 
 div::-webkit-scrollbar-track {
@@ -65,6 +66,7 @@ div::-webkit-scrollbar-corner {
 
 textarea::-webkit-scrollbar {
 	width: 6px;
+	height: 6px;
 }
 
 textarea::-webkit-scrollbar-track {

src/app.css

@@ -1,5 +1,5 @@
 // See https://kit.svelte.dev/docs/types#app
-import type { SessionValidationResult } from "$lib/server/services/data/dbService";
+import type { SessionValidationResult } from "$lib/server/services/data/db/dbService";
 
 // for information about these interfaces
 declare global {

src/app.d.ts

@@ -1,5 +1,5 @@
 import { dev } from "$app/environment";
-import { validateSessionToken } from "$lib/server/services/data/dbService";
+import { validateSessionToken } from "$lib/server/services/data/db/dbService";
 import { type Handle, json, type RequestEvent } from "@sveltejs/kit";
 
 export function setSessionTokenCookie(
@@ -46,7 +46,16 @@ function isApiRoute(url: string) {
   return url.toString().includes("/api") &&
     !url.toString().includes("/api/auth");
 }
+
+function isStripeWebhook(url: string) {
+  return url.toString().includes("/api/stripe/webhook");
+}
+
 export const handle: Handle = async ({ event, resolve }) => {
+  if (isStripeWebhook(event.url.toString())) {
+    return resolve(event);
+  }
+
   const url = event.url.toString();
   const token = event.cookies.get("sessionToken") ?? null;
   if (token === null) {

src/hooks.server.ts

@@ -6,15 +6,20 @@
 	import YizyLogo from './YIZYLogo.svelte';
 	import Button from './button/button.svelte';
 	import { User } from 'lucide-svelte';
-	import * as localStorageService from '$lib/localStorageService';
 	import { onMount } from 'svelte';
 
-	let { onOpenSidebarBtnClicked }: { onOpenSidebarBtnClicked?: () => void } = $props();
+	let {
+		isUserLoggedIn,
+		userHasActiveSubscription,
+		onOpenSidebarBtnClicked
+	}: {
+		isUserLoggedIn: boolean;
+		userHasActiveSubscription: boolean;
+		onOpenSidebarBtnClicked?: () => void;
+	} = $props();
 
-	let isLoggedIn = $state(false);
 	let isMounted = $state(false);
 	onMount(() => {
-		isLoggedIn = localStorageService.getIsLoggedIn();
 		isMounted = true;
 	});
 
@@ -38,22 +43,25 @@
 			class="mx-2 my-auto hidden text-sm font-bold hover:text-primary sm:mx-4 sm:text-lg md:block"
 			>Home</a>
 
-		<a
-			href="/demo"
-			class="mx-2 my-auto hidden text-center text-sm font-bold hover:text-primary sm:mx-4 sm:text-left sm:text-lg md:block"
-			>Demo</a>
-
 		<a
 			href="/doc/introduction"
 			class="mx-2 my-auto hidden text-center text-sm font-bold hover:text-primary sm:mx-4 sm:text-left sm:text-lg md:block"
 			>Documentation</a>
 
-		{#if !isLoggedIn && isMounted}
+		{#if !isUserLoggedIn && isMounted}
 			<a
 				href="/login"
 				class="mx-2 my-auto hidden text-center text-sm font-bold hover:text-primary sm:mx-4 sm:text-left sm:text-lg md:block"
 				>Login</a>
 		{/if}
+
+		{#if userHasActiveSubscription}
+			<a
+				href="/app"
+				class="mx-2 my-auto hidden text-center text-sm font-bold hover:text-primary sm:mx-4 sm:text-left sm:text-lg md:block">
+				App
+			</a>
+		{/if}
 		<div class="ml-4 flex h-full">
 			<a
 				href="https://github.com/YIZY-API/yizy-web-app"
@@ -66,7 +74,7 @@
 		<div class="my-auto ml-2 hidden md:block">
 			<DarkModeToggle />
 		</div>
-		{#if isLoggedIn && isMounted}
+		{#if isUserLoggedIn && isMounted}
 			<DropdownMenu.Root>
 				<DropdownMenu.Trigger>
 					<div class="my-auto ml-2 hidden md:block">
@@ -81,14 +89,21 @@
 						<DropdownMenu.Separator />
 						<DropdownMenu.Item>
 							<button
-								class="bg-transparent"
+								class="bg-transparent outline-none"
 								onclick={() => {
-									localStorageService.setClientSideLogoutState();
 									window.location.href = '/api/auth/logout';
 								}}>
 								Log out
 							</button>
 						</DropdownMenu.Item>
+
+						{#if userHasActiveSubscription}
+							<DropdownMenu.Item>
+								<form action="/api/stripe/createPortalSession" method="POST">
+									<button class="bg-transparent" type="submit"> Billing </button>
+								</form>
+							</DropdownMenu.Item>
+						{/if}
 					</DropdownMenu.Group>
 				</DropdownMenu.Content>
 			</DropdownMenu.Root>

src/lib/components/ui/Navbar.svelte

@@ -27,8 +27,7 @@
 			if (val != '') {
 				lang = convertStringToProgrammingLanguage(val);
 			}
-		}}
-		controlledValue={true}>
+		}}>
 		<Select.Trigger class="mt-2 w-[300px]">{triggerContent}</Select.Trigger>
 		<Select.Content>
 			<Select.Group>