added org creation / switching

.gitignore

@@ -11,6 +11,7 @@ supabase.sh
 **/.vercel/
 **/.DS_Store
 **/.env*
+tests/
 # **/.npmrc
 
 **/test.nnb

frontend/src/views/onboarding/OnboardingView.tsx

@@ -6,11 +6,7 @@ import { Input } from "@/components/ui/input";
 import { Button } from "@/components/ui/button";
 import { slugify } from "@/utils/formatUtils/formatTextUtils";
 import { CustomToaster } from "@/components/general/CustomToaster";
-import { useAxiosInstance } from "@/services/useAxiosInstance";
-import { OrgService } from "@/services/OrgService";
 import { toast } from "react-hot-toast";
-import { getBackendErr } from "@/utils/genUtils";
-import { AppEnv } from "@autumn/shared";
 import {
   OrganizationList,
   OrganizationSwitcher,
@@ -97,7 +93,12 @@ function OnboardingView({ sessionClaims }: { sessionClaims: any }) {
         </div>
       </div>
     );
-  } else return <LoadingScreen />;
+  } else
+    return (
+      <div className="flex flex-col items-center justify-center h-screen w-screen bg-stone-50">
+        <OrganizationList hidePersonal={true} />
+      </div>
+    );
 }
 
 export default OnboardingView;

frontend/src/views/sidebar/SidebarTop.tsx

@@ -5,9 +5,26 @@ import { Avatar, cn } from "@nextui-org/react";
 import { Button } from "@/components/ui/button";
 import { ChevronLeft, ChevronRight } from "lucide-react";
 import { AppEnv } from "@autumn/shared";
+import { OrganizationSwitcher, useOrganization } from "@clerk/nextjs";
+import React, { useEffect, useState } from "react";
+import { useRouter } from "next/navigation";
 
 export function SidebarTop({ orgName, env }: { orgName: string; env: AppEnv }) {
   const { state, toggleSidebar } = useSidebar();
+  const { organization, isLoaded } = useOrganization();
+  const router = useRouter();
+  const [curOrgId, setCurOrgId] = useState<string | null>(null);
+
+  useEffect(() => {
+    if (organization) {
+      setCurOrgId(organization.id);
+    }
+
+    if (curOrgId !== null && organization?.id !== curOrgId) {
+      window.location.href = "/sandbox/customers";
+      router.refresh();
+    }
+  }, [organization]);
 
   return (
     <SidebarHeader className="px-3 pt-4 mb-2 w-full">
@@ -18,15 +35,36 @@ export function SidebarTop({ orgName, env }: { orgName: string; env: AppEnv }) {
         )}
       >
         {state == "expanded" && (
-          <div className="flex items-center gap-2 text-sm font-medium">
-            <Avatar
-              size="sm"
-              className="w-6 h-6"
-              fallback={orgName[0]}
-              radius="md"
-            />
-            <p>{orgName}</p>
-          </div>
+          <React.Fragment>
+            {isLoaded ? (
+              <OrganizationSwitcher
+                appearance={{
+                  elements: {
+                    organizationSwitcherTrigger: "px-0",
+                  },
+                }}
+                hidePersonal={true}
+                skipInvitationScreen={true}
+                afterSwitchOrganizationUrl="/sandbox/customers"
+                afterCreateOrganizationUrl="/sandbox/customers"
+                // afterSelectOrganizationUrl="/sandbox/customer"
+                // onOrganizationChange={(organization) => {
+                //   console.log(organization);
+                //   router.refresh();
+                // }}
+              />
+            ) : (
+              <div className="flex items-center gap-2 text-sm font-medium h-7">
+                <Avatar
+                  size="sm"
+                  className="w-5 h-5 mr-1"
+                  fallback={orgName[0]}
+                  radius="md"
+                />
+                <p className="text-zinc-600">{orgName}</p>
+              </div>
+            )}
+          </React.Fragment>
         )}
 
         <Button

package.json

@@ -4,7 +4,8 @@
   "workspaces": [
     "frontend",
     "server",
-    "shared"
+    "shared",
+    "tests"
   ],
   "type": "module",
   "scripts": {