feat: basic checkout page added and database updated

.github/workflows/qodana_code_quality.yml

@@ -5,7 +5,7 @@ on:
   push:
     branches: # Specify your branches here
       - main # The 'main' branch
-      - 'releases/*' # The release branches
+      - "releases/*" # The release branches
 
 jobs:
   qodana:
@@ -17,12 +17,12 @@ jobs:
     steps:
       - uses: actions/checkout@v3
         with:
-          ref: ${{ github.event.pull_request.head.sha }}  # to check out the actual pull request commit, not the merge commit
-          fetch-depth: 0  # a full history is required for pull request analysis
-      - name: 'Qodana Scan'
+          ref: ${{ github.event.pull_request.head.sha }} # to check out the actual pull request commit, not the merge commit
+          fetch-depth: 0 # a full history is required for pull request analysis
+      - name: "Qodana Scan"
         uses: JetBrains/qodana-action@v2024.1
         with:
           pr-mode: false
         env:
           QODANA_TOKEN: ${{ secrets.QODANA_TOKEN_1776540167 }}
-          QODANA_ENDPOINT: 'https://qodana.cloud'
+          QODANA_ENDPOINT: "https://qodana.cloud"

database/schema/users.ts

@@ -21,6 +21,7 @@ export const userTable = table("users", {
     .notNull()
     .defaultNow(),
   verifiedAt: timestamp("verified_at"),
+  checkoutAt: timestamp("checkout_at"),
   onboardedAt: timestamp("onboarded_at"),
   createdAt: timestamp("created_at").notNull().defaultNow(),
   updatedAt: timestamp("updated_at"),

qodana.yaml

@@ -3,4 +3,4 @@ linter: jetbrains/qodana-js:2024.1
 profile:
   name: qodana.recommended
 include:
-  - name: CheckDependencyLicenses
+  - name: CheckDependencyLicenses

src/app/app/_components/account_page/panels/activities/NewActivityForm.tsx

@@ -138,6 +138,7 @@ export function NewActivityForm({
                       {...field}
                       placeholder={`Enter title for ${activityType}`}
                       className="h-8"
+                      autoFocus={activityType === "call"}
                     />
                   </FormControl>
                   <FormMessage />
@@ -198,6 +199,7 @@ export function NewActivityForm({
               <FormControl>
                 <Textarea
                   {...field}
+                  autoFocus={activityType === "comment"}
                   placeholder={`Enter ${activityType === "comment" ? "comment" : "notes"}`}
                 />
               </FormControl>

src/app/app/_components/sidebar/app-sidebar.tsx

@@ -77,7 +77,9 @@ export function AppSidebar({
   const [loadedPathnames, setLoadedPathnames] = React.useState<string[]>([]);
   const [loadingPathname, setLoadingPathname] = React.useState<string>("");
   const { user, cookieselectedworkspaceid: cookieSelectedWorkspaceId } = props;
-  const router = useRouter();
+  const router = useRouter({
+    fancy: true,
+  });
 
   const { commandOpen, setCommandOpen } = React.useContext(CommandContext);
 

src/app/app/deals/_components/DealViewSwitcher.tsx

@@ -13,7 +13,9 @@ interface DealViewSwitcherProps {
 export function DealViewSwitcher({ view, setView }: DealViewSwitcherProps) {
   const gridActive = view === "grid";
   const boardActive = view === "board";
-  const router = useRouter();
+  const router = useRouter({
+    fancy: true,
+  });
   return (
     <div>
       <div className="flex h-8 items-center rounded-lg ring-1 ring-border">

src/app/app/layout.tsx

@@ -5,6 +5,7 @@ import { redirect } from "next/navigation";
 import { getUserById } from "@/data-access/users";
 import { fetchAuthenticatedUser } from "@/lib/session";
 import {
+  afterCheckoutUrl,
   afterSignUpUrl,
   afterVerifyUrl,
   unauthenticatedUrl,
@@ -36,9 +37,12 @@ export default async function ApplicationLayout({
   if (!dbUser.verifiedAt) {
     return redirect(afterSignUpUrl);
   }
-  if (!dbUser.onboardedAt) {
+  if (!dbUser.checkoutAt) {
     return redirect(afterVerifyUrl);
   }
+  if (!dbUser.onboardedAt) {
+    return redirect(afterCheckoutUrl);
+  }
 
   const workspaces = await getAllUserWorkspaces(dbUser.id);
 

src/app/(access)/login/_components/LoginForm.tsx → src/app/login/_components/LoginForm.tsx

@@ -58,15 +58,15 @@ export const LoginForm = ({
 
   return (
     <main className="grid h-screen items-center">
-      <Link
+      {/* <Link
         href="/signup"
         className={cn(
           buttonVariants({ variant: "outline" }),
           "absolute right-4 top-4 md:right-8 md:top-8",
         )}
       >
         Sign Up
-      </Link>
+      </Link> */}
       <div>
         <div className="mx-auto flex w-full flex-col justify-center space-y-6 sm:w-[350px]">
           <div className="flex flex-col space-y-2 text-center">

src/app/(access)/login/page.tsx → src/app/login/page.tsx

@@ -1,4 +1,4 @@
-import { LoginForm } from "@/app/(access)/login/_components/LoginForm";
+import { LoginForm } from "@/app/login/_components/LoginForm";
 import { loginAction } from "@/server/login";
 import { Metadata } from "next";
 import { fetchAuthenticatedUser } from "@/lib/session";
@@ -13,7 +13,7 @@ export const metadata: Metadata = {
 export default async function LoginPage() {
   const user = await fetchAuthenticatedUser();
   const dbUser = await getUserById(user?.id || "");
-  if (dbUser && dbUser.verifiedAt) {
+  if (dbUser && dbUser.verifiedAt && dbUser.checkoutAt) {
     return redirect(authenticatedUrl);
   }
   return <LoginForm login={loginAction} />;

src/app/(access)/signup/_components/SignUpForm.tsx → src/app/signup/_components/SignUpForm.tsx

@@ -16,13 +16,14 @@ import { Loader } from "lucide-react";
 
 import Image from "next/image";
 import Link from "@/components/performance-link";
-import React, { useState } from "react";
+import React, { useEffect, useState } from "react";
 import { useForm } from "react-hook-form";
 import { z } from "zod";
 import { toast } from "sonner";
 import { PasswordField } from "@/components/ui/password-input";
 import { useRouter } from "@/hooks/use-performance-router";
 import { useServerAction } from "zsa-react";
+import { useSearchParams } from "next/navigation";
 
 export const SignUpForm = ({
   signUp,
@@ -33,6 +34,16 @@ export const SignUpForm = ({
   const [isSubmitting, setIsSubmitting] = useState(false);
   const router = useRouter();
 
+  const searchParams = useSearchParams();
+
+  useEffect(() => {
+    if (searchParams.get("redirecterror") === "nouser") {
+      toast.error(
+        "You need to create an account or login before accessing the checkout page.",
+      );
+    }
+  }, [searchParams]);
+
   const form = useForm<z.infer<typeof signUpSchema>>({
     resolver: zodResolver(signUpSchema),
     defaultValues: {

src/app/signup/checkout/_components/DemoCheckoutButton.tsx

@@ -0,0 +1,27 @@
+"use client";
+import { Button } from "@/components/ui/button";
+import { setUserCheckoutAction } from "@/server/billing";
+import React from "react";
+import { toast } from "sonner";
+import { useServerAction } from "zsa-react";
+
+export function DemoCheckoutButton() {
+  const { execute } = useServerAction(setUserCheckoutAction);
+  async function handleClick() {
+    try {
+      const [data, err] = await execute();
+      if (err) {
+        toast.error(err.message);
+      } else {
+        toast.success("Checkout Completed");
+      }
+    } catch (error) {
+      toast.error("Something Went Wrong. Failed to complete checkout.");
+    }
+  }
+  return (
+    <Button className="h-7" variant="outline" onClick={handleClick}>
+      Complete Checkout (DEMO)
+    </Button>
+  );
+}

src/app/signup/checkout/page.tsx

@@ -0,0 +1,35 @@
+import { Metadata } from "next";
+import { fetchAuthenticatedUser } from "@/lib/session";
+import { redirect } from "next/navigation";
+import { getUserById } from "@/data-access/users";
+import { authenticatedUrl } from "@/constants";
+import { Link } from "next-view-transitions";
+import { DemoCheckoutButton } from "./_components/DemoCheckoutButton";
+
+export const metadata: Metadata = {
+  title: "Sign Up",
+};
+
+export default async function CheckoutPage() {
+  const user = await fetchAuthenticatedUser();
+  const PADDLE_DOMAIN_APPROVED = false;
+  if (!user) return redirect("/signup?redirecterror=nouser");
+  const dbUser = await getUserById(user.id || "");
+  if (PADDLE_DOMAIN_APPROVED) {
+    if (
+      dbUser &&
+      dbUser.verifiedAt &&
+      dbUser.onboardedAt &&
+      dbUser.checkoutAt
+    ) {
+      return redirect(authenticatedUrl);
+    }
+  }
+
+  return (
+    <main className="flex h-screen flex-col items-center justify-center gap-5">
+      Checkout Page here.... (Embedded checkout from paddle)
+      <DemoCheckoutButton />
+    </main>
+  );
+}

src/app/(access)/onboarding/page.tsx → src/app/signup/onboarding/page.tsx

@@ -4,7 +4,7 @@ import { getUserById } from "@/data-access/users";
 import { fetchAuthenticatedUser } from "@/lib/session";
 import { redirect } from "next/navigation";
 import { authenticatedUrl, unauthenticatedUrl } from "@/constants";
-import { OnboardingForm } from "@/app/(access)/onboarding/_components/OnboardingForm";
+import { OnboardingForm } from "@/app/signup/onboarding/_components/OnboardingForm";
 
 export const metadata: Metadata = {
   title: "Onboarding",
@@ -16,7 +16,10 @@ const OnboardingPage = async () => {
     return redirect(unauthenticatedUrl);
   }
   const dbUser = await getUserById(user.id);
-  if (dbUser?.verifiedAt && dbUser?.onboardedAt) {
+  if (
+    (dbUser?.verifiedAt && dbUser?.onboardedAt) ||
+    (dbUser?.checkoutAt && dbUser?.verifiedAt && dbUser?.onboardedAt)
+  ) {
     return redirect(authenticatedUrl);
   }
   return <OnboardingForm />;

src/app/(access)/signup/page.tsx → src/app/signup/page.tsx

@@ -1,4 +1,4 @@
-import { SignUpForm } from "@/app/(access)/signup/_components/SignUpForm";
+import { SignUpForm } from "@/app/signup/_components/SignUpForm";
 import { signUpAction } from "@/server/signup";
 import { Metadata } from "next";
 import { fetchAuthenticatedUser } from "@/lib/session";
@@ -13,7 +13,7 @@ export const metadata: Metadata = {
 export default async function LoginPage() {
   const user = await fetchAuthenticatedUser();
   const dbUser = await getUserById(user?.id || "");
-  if (dbUser && dbUser.verifiedAt && dbUser.onboardedAt) {
+  if (dbUser && dbUser.verifiedAt && dbUser.onboardedAt && dbUser.checkoutAt) {
     return redirect(authenticatedUrl);
   }
   return <SignUpForm signUp={signUpAction} />;

src/constants.ts

@@ -1,5 +1,6 @@
-export const afterSignUpUrl = "/verify-email";
-export const afterVerifyUrl = "/onboarding";
+export const afterSignUpUrl = "/signup/verify-email";
+export const afterVerifyUrl = "/signup/checkout";
+export const afterCheckoutUrl = "/signup/onboarding";
 export const authenticatedUrl = "/app/home";
 export const unauthenticatedUrl = "/login";
 

src/server/billing.ts

@@ -0,0 +1,19 @@
+"use server";
+import { createServerAction } from "zsa";
+import { getUserById, updateUser } from "@/data-access/users";
+import { redirect } from "next/navigation";
+import { authenticatedUrl } from "@/constants";
+import { fetchAuthenticatedUser } from "@/lib/session";
+import { authenticatedAction } from "@/lib/zsa";
+
+export const setUserCheckoutAction = authenticatedAction
+  .createServerAction()
+  .handler(async ({ input, ctx }) => {
+    const { user } = ctx;
+    const updatedUser = await updateUser(user.id, {
+      checkoutAt: new Date(),
+      updatedAt: new Date(),
+    });
+    if (!updatedUser) throw new Error("Couldn't set user as checked out");
+    return redirect(authenticatedUrl);
+  });