feat(cloud): improved workspace onboarding (#462)

* feat: setup onboarding and select plan page

* feat: add workspace details step

* refactor: optimize board rendering in workspace details

* feat: tweak padding in boards mockup

* fix: validate/convert slug input

* refactor: tweak onboarding steps UX

* feat: add team to workspace plans

* feat: allow setting description when creating a workspace

* feat: add logging to next api routes

* feat: create worspace on checkout.session.completed

* chore: update types

* refactor: improve webhook logs

* feat: create workspace on successful activation

* feat: set slug on workspace name change

* feat: add returnUrl params

apps/web/src/components/Dashboard.tsx

@@ -1,4 +1,6 @@
 import { useTheme } from "next-themes";
+import { useRouter } from "next/navigation";
+import { env } from "next-runtime-env";
 import { useEffect, useRef, useState } from "react";
 import {
   TbLayoutSidebarLeftCollapse,
@@ -43,6 +45,7 @@ export default function Dashboard({
   const { resolvedTheme } = useTheme();
   const { openModal } = useModal();
   const { availableWorkspaces, hasLoaded } = useWorkspace();
+  const router = useRouter();
 
   const { data: session, isPending: sessionLoading } = authClient.useSession();
   const { data: user, isLoading: userLoading } = api.user.getUser.useQuery(
@@ -98,9 +101,13 @@ export default function Dashboard({
 
   useEffect(() => {
     if (hasLoaded && availableWorkspaces.length === 0) {
-      openModal("NEW_WORKSPACE", undefined, undefined, false);
+      if (env("NEXT_PUBLIC_KAN_ENV") === "cloud") {
+        router.push(`/onboarding/select-plan?returnUrl=${encodeURIComponent(window.location.pathname)}`);
+      } else {
+        openModal("NEW_WORKSPACE", undefined, undefined, false);
+      }
     }
-  }, [hasLoaded, availableWorkspaces.length, openModal]);
+  }, [hasLoaded, availableWorkspaces.length, openModal, router]);
 
   const isDarkMode = resolvedTheme === "dark";
 

apps/web/src/components/Input.tsx

@@ -88,7 +88,7 @@ const Input = forwardRef<HTMLInputElement, InputProps>(
             </button>
           )}
           {iconRight && type !== "password" && (
-            <div className="absolute right-3 top-1/2 -translate-y-1/2">
+            <div className="absolute right-3 top-1/2 -translate-y-1/2 leading-[0]">
               {iconRight}
             </div>
           )}

apps/web/src/components/NewWorkspaceForm.tsx

@@ -127,7 +127,7 @@ export function NewWorkspaceForm() {
                 body: JSON.stringify({
                   slug: slug || undefined,
                   workspacePublicId: values.publicId,
-                  cancelUrl: "/settings/workspace?upgrade=pro",
+                  cancelUrl: window.location.pathname + window.location.search,
                   successUrl: "/boards",
                 }),
               },

apps/web/src/components/Toggle.tsx

@@ -7,15 +7,17 @@ const Toggle = ({
   label,
   disabled,
   showLabel = true,
+  labelPosition = "before",
 }: {
   isChecked: boolean;
   onChange: () => void;
   label: string;
   disabled?: boolean;
   showLabel?: boolean;
+  labelPosition?: "before" | "after";
 }) => (
-  <div className="mr-4 flex items-center justify-end">
-    {showLabel && (
+  <div className="flex items-center">
+    {showLabel && labelPosition === "before" && (
       <span className="mr-2 text-xs text-light-900 dark:text-dark-900">
         {label}
       </span>
@@ -38,6 +40,11 @@ const Toggle = ({
         )}
       />
     </Switch>
+    {showLabel && labelPosition === "after" && (
+      <span className="ml-2 text-xs text-light-900 dark:text-dark-900">
+        {label}
+      </span>
+    )}
   </div>
 );
 

apps/web/src/components/WorkspaceMenu.tsx

@@ -1,5 +1,7 @@
 import { Button, Menu, Transition } from "@headlessui/react";
 import { t } from "@lingui/core/macro";
+import { useRouter } from "next/navigation";
+import { env } from "next-runtime-env";
 import { Fragment, useState } from "react";
 import { HiCheck, HiMagnifyingGlass } from "react-icons/hi2";
 import { twMerge } from "tailwind-merge";
@@ -18,6 +20,7 @@ export default function WorkspaceMenu({
   const { workspace, isLoading, availableWorkspaces, switchWorkspace } =
     useWorkspace();
   const { openModal } = useModal();
+  const router = useRouter();
   const [isOpen, setIsOpen] = useState(false);
 
   const { tooltipContent: commandPaletteShortcutTooltipContent } =
@@ -147,7 +150,11 @@ export default function WorkspaceMenu({
             <div className="border-t-[1px] border-light-600 p-1 dark:border-dark-500">
               <Menu.Item>
                 <button
-                  onClick={() => openModal("NEW_WORKSPACE")}
+                  onClick={() =>
+                    env("NEXT_PUBLIC_KAN_ENV") === "cloud"
+                      ? router.push(`/onboarding/select-plan?returnUrl=${encodeURIComponent(window.location.pathname)}`)
+                      : openModal("NEW_WORKSPACE")
+                  }
                   className="flex w-full items-center justify-between rounded-[5px] px-3 py-2 text-left text-xs text-neutral-900 hover:bg-light-200 dark:text-dark-1000 dark:hover:bg-dark-400"
                 >
                   {t`Create workspace`}