feat: scaffhold subscription table and ui

apps/web/components/settings.tsx

@@ -5,7 +5,7 @@ import { useRouter } from "next/router";
 import { updateUser } from "@documenso/features";
 import { getUser } from "@documenso/lib/api";
 import { Button } from "@documenso/ui";
-import { KeyIcon, UserCircleIcon } from "@heroicons/react/24/outline";
+import { CreditCardIcon, KeyIcon, UserCircleIcon } from "@heroicons/react/24/outline";
 import { useSession } from "next-auth/react";
 
 const subNavigation = [
@@ -21,6 +21,12 @@ const subNavigation = [
     icon: KeyIcon,
     current: false,
   },
+  {
+    name: "Billing",
+    href: "/settings/billing",
+    icon: CreditCardIcon,
+    current: false,
+  },
 ];
 
 function classNames(...classes: any) {
@@ -33,7 +39,6 @@ export default function Setttings() {
     email: "",
     name: "",
   });
-
   useEffect(() => {
     getUser().then((res: any) => {
       res.json().then((j: any) => {
@@ -158,6 +163,7 @@ export default function Setttings() {
                 <Button onClick={() => updateUser(user)}>Save</Button>
               </div>
             </form>
+
             <div
               hidden={subNavigation.filter((e) => e.current)[0]?.name !== subNavigation[1].name}
               className="min-h-[251px] divide-y divide-gray-200 lg:col-span-9">
@@ -171,9 +177,33 @@ export default function Setttings() {
                 </div>
               </div>
             </div>
+
+            <div
+              hidden={subNavigation.filter((e) => e.current)[0]?.name !== subNavigation?.[2]?.name}
+              className="min-h-[251px] divide-y divide-gray-200 lg:col-span-9">
+              {/* Billing section */}
+              <div className="py-6 px-4 sm:p-6 lg:pb-8">
+                <div>
+                  <h2 className="text-lg font-medium leading-6 text-gray-900">Billing</h2>
+                  <p className="mt-1 text-sm text-gray-500">
+                    Your subscription is currently <strong>{user?.subscription ? 'Active' : 'Inactive'}</strong>.
+                  </p>
+
+                  <p className="mt-1 text-sm text-gray-500">
+                    We use Stripe to process payments. Your card details are never stored on our
+                    servers.
+                  </p>
+
+                  <div className="mt-8">
+                    <Button onClick={() => {}}>Manage my subscription</Button>
+                  </div>
+                </div>
+              </div>
+            </div>
           </div>
         </div>
       </div>
+
       <div className="mt-10 max-w-[1100px]" hidden={!!user.email}>
         <div className="ph-item">
           <div className="ph-col-12">

apps/web/next.config.js

@@ -1,12 +1,12 @@
-/** @type {import('next').NextConfig} */
 require("dotenv").config({ path: "../../.env" });
 
+/** @type {import('next').NextConfig} */
 const nextConfig = {
   reactStrictMode: true,
   swcMinify: false,
 };
 
-const withTM = require("next-transpile-modules")([
+const transpileModules = require("next-transpile-modules")([
   "@documenso/prisma",
   "@documenso/lib",
   "@documenso/ui",
@@ -15,8 +15,10 @@ const withTM = require("next-transpile-modules")([
   "@documenso/signing",
   "react-signature-canvas",
 ]);
-const plugins = [];
-plugins.push(withTM);
+
+const plugins = [
+  transpileModules
+];
 
 const moduleExports = () => plugins.reduce((acc, next) => next(acc), nextConfig);
 

apps/web/package.json

@@ -7,9 +7,11 @@
     "build": "next build",
     "start": "next start",
     "lint": "next lint",
-    "db-studio": "prisma db studio"
+    "db-studio": "prisma db studio",
+    "stripe:listen": "stripe listen --forward-to localhost:3000/api/stripe/webhook"
   },
   "dependencies": {
+    "@documenso/lib": "*",
     "@documenso/pdf": "*",
     "@documenso/prisma": "*",
     "@documenso/ui": "*",
@@ -42,11 +44,11 @@
     "@tailwindcss/forms": "^0.5.3",
     "@types/bcryptjs": "^2.4.2",
     "@types/filesystem": "^0.0.32",
-    "@types/react-dom": "18.0.9",
     "@types/formidable": "^2.0.5",
     "@types/node": "^18.11.18",
     "@types/nodemailer": "^6.4.7",
     "@types/nodemailer-sendgrid": "^1.0.0",
+    "@types/react-dom": "18.0.9",
     "@types/react-pdf": "^6.2.0",
     "@types/react-resizable": "^3.0.3",
     "autoprefixer": "^10.4.13",
@@ -57,6 +59,7 @@
     "next-transpile-modules": "^10.0.0",
     "postcss": "^8.4.19",
     "sass": "^1.57.1",
+    "stripe-cli": "^0.1.0",
     "tailwindcss": "^3.2.4",
     "typescript": "4.8.4"
   }

apps/web/pages/settings/billing.tsx

@@ -0,0 +1 @@
+export { default } from ".";

apps/web/process-env.d.ts

@@ -0,0 +1,24 @@
+declare namespace NodeJS {
+  export interface ProcessEnv {
+    DATABASE_URL: string;
+    NEXT_PUBLIC_WEBAPP_URL: string;
+    NEXTAUTH_SECRET: string;
+    NEXTAUTH_URL: string;
+    
+    SENDGRID_API_KEY?: string;
+    SMTP_MAIL_HOST?: string;
+    SMTP_MAIL_PORT?: string;
+    SMTP_MAIL_USER?: string;
+    SMTP_MAIL_PASSWORD?: string;
+    
+    MAIL_FROM: string;
+
+    STRIPE_API_KEY?: string;
+    STRIPE_WEBHOOK_SECRET?: string;
+    STRIPE_COMMUNITY_PLAN_MONTHLY_PRICE_ID?: string;
+    STRIPE_COMMUNITY_PLAN_YEARLY_PRICE_ID?: string;
+    
+    NEXT_PUBLIC_ALLOW_SIGNUP?: string;
+    NEXT_PUBLIC_ALLOW_SUBSCRIPTIONS?: string;
+  }
+}

apps/web/tsconfig.json

@@ -21,6 +21,6 @@
     "../../packages/types/next-auth.d.ts",
     "**/*.ts",
     "**/*.tsx"
-  ],
+, "../../packages/lib/process-env.d.ts"  ],
   "exclude": ["node_modules"]
 }