onboarding gtg mostly

Helicone · Dec 9, 2024 · a1f3603 · a1f3603
1 parent 2a64587
commit a1f3603
Show file tree

Hide file tree

Showing 9 changed files with 203 additions and 194 deletions.
diff --git a/web/components/layout/auth/DesktopSidebar.tsx b/web/components/layout/auth/DesktopSidebar.tsx
@@ -19,6 +19,9 @@ import { useTheme } from "next-themes";
 import OnboardingNavItems from "./OnboardingNavItems";
 import useOnboardingContext from "../onboardingContext";
 import EndOnboardingConfirmation from "@/components/templates/onboarding/EndOnboardingConfirmation";
+import { Dialog } from "@/components/ui/dialog";
+import { DialogContent } from "@/components/ui/dialog";
+import CreateOrgForm from "@/components/templates/organization/createOrgForm";
 
 export interface NavigationItem {
   name: string;
@@ -180,6 +183,7 @@ const DesktopSidebar = ({
   const { isOnboardingVisible } = useOnboardingContext();
   const [showEndOnboardingConfirmation, setShowEndOnboardingConfirmation] =
     useState(false);
+  const [showCreateOrg, setShowCreateOrg] = useState(false);
 
   return (
     <>
@@ -309,38 +313,41 @@ const DesktopSidebar = ({
                   </nav>
                 </div>
               </div>
-              {isOnboardingVisible && (
-                <Button
-                  className="mx-2 text-[13px] font-medium"
-                  variant="outline"
-                  onClick={() => {
-                    setShowEndOnboardingConfirmation(true);
-                  }}
-                >
-                  Ready to integrate
-                </Button>
-              )}
+              {org?.currentOrg?.tier === "demo" &&
+                org?.allOrgs?.length === 1 && (
+                  <Button
+                    className="mx-2 text-[13px] font-medium"
+                    variant="outline"
+                    onClick={() => {
+                      setShowEndOnboardingConfirmation(true);
+                    }}
+                  >
+                    Ready to integrate
+                  </Button>
+                )}
 
               {/* InfoBox */}
-              {canShowInfoBox && !isCollapsed && !isOnboardingVisible && (
-                <div className="bg-slate-50 dark:bg-slate-900 rounded border border-slate-200 dark:border-slate-800 text-slate-500 dark:text-slate-400 flex flex-col md:flex-row md:gap-2 gap-4 justify-between md:justify-center md:items-center items-start px-3 py-2  mt-2 mx-2 mb-8 font-medium">
-                  <h1 className="text-xs text-start tracking-tight leading-[1.35rem]">
-                    ⚡ Introducing a new way to perfect your prompts.{" "}
-                    <Link
-                      href="https://helicone.ai/experiments"
-                      target="_blank"
-                      className="underline decoration-slate-400 decoration-1 underline-offset-2 font-medium"
-                    >
-                      Get early access here.
-                    </Link>{" "}
-                  </h1>
-                </div>
-              )}
+              {canShowInfoBox &&
+                !isCollapsed &&
+                org?.currentOrg?.tier !== "demo" && (
+                  <div className="bg-slate-50 dark:bg-slate-900 rounded border border-slate-200 dark:border-slate-800 text-slate-500 dark:text-slate-400 flex flex-col md:flex-row md:gap-2 gap-4 justify-between md:justify-center md:items-center items-start px-3 py-2  mt-2 mx-2 mb-8 font-medium">
+                    <h1 className="text-xs text-start tracking-tight leading-[1.35rem]">
+                      ⚡ Introducing a new way to perfect your prompts.{" "}
+                      <Link
+                        href="https://helicone.ai/experiments"
+                        target="_blank"
+                        className="underline decoration-slate-400 decoration-1 underline-offset-2 font-medium"
+                      >
+                        Access experiments now!
+                      </Link>{" "}
+                    </h1>
+                  </div>
+                )}
             </div>
           </div>
 
           {/* Sticky help dropdown */}
-          {!isOnboardingVisible && (
+          {org?.currentOrg?.tier !== "demo" && (
             <div className="absolute bottom-3 left-3 z-10">
               <SidebarHelpDropdown
                 changelog={changelog}
@@ -358,7 +365,28 @@ const DesktopSidebar = ({
       <EndOnboardingConfirmation
         open={showEndOnboardingConfirmation}
         setOpen={setShowEndOnboardingConfirmation}
+        onEnd={() => {
+          setShowEndOnboardingConfirmation(false);
+          setShowCreateOrg(true);
+        }}
       />
+      <Dialog open={showCreateOrg} onOpenChange={setShowCreateOrg}>
+        <DialogContent className="w-11/12 sm:max-w-md gap-8 rounded-md">
+          <CreateOrgForm
+            firstOrg={true}
+            onCancelHandler={() => {
+              setShowCreateOrg(false);
+            }}
+            onCloseHandler={() => {
+              setShowCreateOrg(false);
+            }}
+            onSuccess={(orgId) => {
+              org?.setCurrentOrg(orgId ?? "");
+              router.push("/dashboard");
+            }}
+          />
+        </DialogContent>
+      </Dialog>
     </>
   );
 };

diff --git a/web/components/layout/orgDropdown.tsx b/web/components/layout/orgDropdown.tsx
@@ -29,7 +29,6 @@ import { LogOutIcon } from "lucide-react";
 import Link from "next/link";
 import OrgMoreDropdown from "./orgMoreDropdown";
 import { Cog6ToothIcon } from "@heroicons/react/24/outline";
-import useOnboardingContext from "./onboardingContext";
 
 interface OrgDropdownProps {}
 
@@ -47,17 +46,11 @@ export default function OrgDropdown({}: OrgDropdownProps) {
   const { ownedOrgs, memberOrgs, customerOrgs } = useMemo(() => {
     const owned =
       orgContext?.allOrgs.filter(
-        (org) =>
-          org.owner === user?.id &&
-          org.organization_type !== "customer" &&
-          org.tier !== "demo"
+        (org) => org.owner === user?.id && org.organization_type !== "customer"
       ) || [];
     const member =
       orgContext?.allOrgs.filter(
-        (org) =>
-          org.owner !== user?.id &&
-          org.organization_type !== "customer" &&
-          org.tier !== "demo"
+        (org) => org.owner !== user?.id && org.organization_type !== "customer"
       ) || [];
     const customer =
       orgContext?.allOrgs.filter(
@@ -94,17 +87,14 @@ export default function OrgDropdown({}: OrgDropdownProps) {
     signOut(supabaseClient).then(() => router.push("/"));
   }, [supabaseClient, router]);
 
-  const { isOnboardingVisible } = useOnboardingContext();
-
   return (
     <>
       <DropdownMenu modal={false}>
         <DropdownMenuTrigger asChild>
           <Button
             variant="ghost"
             className={cn(
-              "flex items-center justify-start w-full ml-1 p-2 truncate",
-              isOnboardingVisible && "hover:bg-transparent cursor-default"
+              "flex items-center justify-start w-full ml-1 p-2 truncate"
             )}
           >
             {currentIcon && (
@@ -121,41 +111,28 @@ export default function OrgDropdown({}: OrgDropdownProps) {
             </p>
           </Button>
         </DropdownMenuTrigger>
-        {!isOnboardingVisible && (
-          <DropdownMenuContent className="w-[15rem] ml-2 mt-2 max-h-[90vh] flex flex-col border-slate-200">
-            <DropdownMenuLabel className="flex justify-between items-center">
-              <div className="flex gap-2">
-                {currentIcon && (
-                  <currentIcon.icon
-                    className={clsx(
-                      `text-${currentColor?.name}-500`,
-                      "mt-1 flex-shrink-0 h-4 w-4"
-                    )}
-                    aria-hidden="true"
-                  />
-                )}
-                <div className="flex flex-col gap-1">
-                  <h3 className="text-sm font-semibold text-slate-900 dark:text-slate-50">
-                    {orgContext?.currentOrg?.name}
-                  </h3>
-                  <p className="text-xs text-slate-500 font-medium max-w-[10rem] truncate">
-                    {user?.email}
-                  </p>
-                </div>
-              </div>
-              <div className="hidden sm:block">
-                <OrgMoreDropdown
-                  ownedOrgs={ownedOrgs}
-                  memberOrgs={memberOrgs}
-                  customerOrgs={customerOrgs}
-                  createNewOrgHandler={createNewOrgHandler}
-                  currentOrgId={orgContext?.currentOrg?.id}
-                  setCurrentOrg={orgContext?.setCurrentOrg}
+        <DropdownMenuContent className="w-[15rem] ml-2 mt-2 max-h-[90vh] flex flex-col border-slate-200">
+          <DropdownMenuLabel className="flex justify-between items-center">
+            <div className="flex gap-2">
+              {currentIcon && (
+                <currentIcon.icon
+                  className={clsx(
+                    `text-${currentColor?.name}-500`,
+                    "mt-1 flex-shrink-0 h-4 w-4"
+                  )}
+                  aria-hidden="true"
                 />
+              )}
+              <div className="flex flex-col gap-1">
+                <h3 className="text-sm font-semibold text-slate-900 dark:text-slate-50">
+                  {orgContext?.currentOrg?.name}
+                </h3>
+                <p className="text-xs text-slate-500 font-medium max-w-[10rem] truncate">
+                  {user?.email}
+                </p>
               </div>
-            </DropdownMenuLabel>
-            <DropdownMenuSeparator />
-            <div className="block sm:hidden">
+            </div>
+            <div className="hidden sm:block">
               <OrgMoreDropdown
                 ownedOrgs={ownedOrgs}
                 memberOrgs={memberOrgs}
@@ -164,41 +141,56 @@ export default function OrgDropdown({}: OrgDropdownProps) {
                 currentOrgId={orgContext?.currentOrg?.id}
                 setCurrentOrg={orgContext?.setCurrentOrg}
               />
-              <DropdownMenuSeparator />
             </div>
-            <DropdownMenuGroup>
+          </DropdownMenuLabel>
+          <DropdownMenuSeparator />
+          <div className="block sm:hidden">
+            <OrgMoreDropdown
+              ownedOrgs={ownedOrgs}
+              memberOrgs={memberOrgs}
+              customerOrgs={customerOrgs}
+              createNewOrgHandler={createNewOrgHandler}
+              currentOrgId={orgContext?.currentOrg?.id}
+              setCurrentOrg={orgContext?.setCurrentOrg}
+            />
+            <DropdownMenuSeparator />
+          </div>
+          <DropdownMenuGroup>
+            {orgContext?.currentOrg?.tier !== "demo" && (
               <DropdownMenuItem asChild className="cursor-pointer text-xs">
                 <Link href="/settings/members">Invite members</Link>
               </DropdownMenuItem>
-              <DropdownMenuItem
-                className={cn("hover:bg-transparent cursor-default")}
-                disableHover
-                disableClickClose
-              >
-                <div className="flex items-center justify-between w-full text-xs">
-                  <span>Dark mode</span>
-                  <Switch
-                    checked={theme === "dark"}
-                    onCheckedChange={handleThemeChange}
-                    size="md"
-                  />
-                </div>
-              </DropdownMenuItem>
-            </DropdownMenuGroup>
-            <DropdownMenuSeparator />
+            )}
+            <DropdownMenuItem
+              className={cn("hover:bg-transparent cursor-default")}
+              disableHover
+              disableClickClose
+            >
+              <div className="flex items-center justify-between w-full text-xs">
+                <span>Dark mode</span>
+                <Switch
+                  checked={theme === "dark"}
+                  onCheckedChange={handleThemeChange}
+                  size="md"
+                />
+              </div>
+            </DropdownMenuItem>
+          </DropdownMenuGroup>
+          <DropdownMenuSeparator />
 
+          {orgContext?.currentOrg?.tier !== "demo" && (
             <Link href="/settings" rel="noopener noreferrer">
               <DropdownMenuItem className="text-xs">
                 <Cog6ToothIcon className="h-4 w-4 mr-2" />
                 Settings
               </DropdownMenuItem>
             </Link>
-            <DropdownMenuItem onSelect={handleSignOut} className="text-xs">
-              <LogOutIcon className="h-4 w-4 mr-2" />
-              Sign out
-            </DropdownMenuItem>
-          </DropdownMenuContent>
-        )}
+          )}
+          <DropdownMenuItem onSelect={handleSignOut} className="text-xs">
+            <LogOutIcon className="h-4 w-4 mr-2" />
+            Sign out
+          </DropdownMenuItem>
+        </DropdownMenuContent>
       </DropdownMenu>
       <Dialog open={createOpen} onOpenChange={setCreateOpen}>
         <DialogContent className="sm:max-w-[425px]">
@@ -207,6 +199,7 @@ export default function OrgDropdown({}: OrgDropdownProps) {
             onCloseHandler={() => setCreateOpen(false)}
             onSuccess={(orgId) => {
               orgContext?.setCurrentOrg(orgId ?? "");
+              router.push("/dashboard");
             }}
           />
         </DialogContent>

diff --git a/web/components/layout/orgMoreDropdown.tsx b/web/components/layout/orgMoreDropdown.tsx
@@ -153,7 +153,9 @@ export default function OrgMoreDropdown({
           </DropdownMenuGroup>
         </>
       )}
-      <DropdownMenuSeparator />
+      {ownedOrgs.length + memberOrgs.length + customerOrgs.length > 1 && (
+        <DropdownMenuSeparator />
+      )}
       <DropdownMenuItem
         className="text-xs"
         onClick={() => createNewOrgHandler()}

diff --git a/web/components/templates/dashboard/DemoDisclaimerModal.tsx b/web/components/templates/dashboard/DemoDisclaimerModal.tsx
@@ -0,0 +1,47 @@
+import { Button } from "@/components/ui/button";
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+} from "@/components/ui/dialog";
+
+const DemoDisclaimerModal = ({
+  open,
+  setOpen,
+  onSuccess,
+}: {
+  open: boolean;
+  setOpen: (open: boolean) => void;
+  onSuccess: () => void;
+}) => {
+  return (
+    <Dialog open={open} onOpenChange={setOpen}>
+      <DialogContent>
+        <DialogHeader>
+          <DialogTitle>🎉 Welcome to Helicone!</DialogTitle>
+        </DialogHeader>
+        <DialogDescription>
+          We created a demo organization for you. Feel free to explore, and when
+          you&apos;re done, just click on{" "}
+          <span className="font-semibold">Ready to Integrate</span> in the
+          sidebar.
+        </DialogDescription>
+        <DialogFooter>
+          <Button
+            onClick={() => {
+              onSuccess();
+              setOpen(false);
+            }}
+          >
+            Start Exploring
+          </Button>
+        </DialogFooter>
+      </DialogContent>
+    </Dialog>
+  );
+};
+
+export default DemoDisclaimerModal;
diff --git a/web/components/templates/dashboard/OnboardingQuickStartModal.tsx b/web/components/templates/dashboard/OnboardingQuickStartModal.tsx
@@ -130,7 +130,9 @@ const OnboardingQuickStartModal = ({
             setCurrentStep={setCurrentStep}
           />
         )}
-        {currentStep === 3 && <EventListen setCurrentStep={setCurrentStep} />}
+        {currentStep === 3 && (
+          <EventListen setCurrentStep={setCurrentStep} close={close} />
+        )}
       </DialogContent>
     </Dialog>
   );