Add direct onboarding routes
Co-Authored-By: Paperclip <noreply@paperclip.ing>
This commit is contained in:
@@ -1,5 +1,5 @@
|
|||||||
import { useEffect, useRef } from "react";
|
import { useEffect, useRef } from "react";
|
||||||
import { Navigate, Outlet, Route, Routes, useLocation } from "@/lib/router";
|
import { Navigate, Outlet, Route, Routes, useLocation, useParams } from "@/lib/router";
|
||||||
import { useQuery } from "@tanstack/react-query";
|
import { useQuery } from "@tanstack/react-query";
|
||||||
import { Button } from "@/components/ui/button";
|
import { Button } from "@/components/ui/button";
|
||||||
import { Layout } from "./components/Layout";
|
import { Layout } from "./components/Layout";
|
||||||
@@ -108,6 +108,7 @@ function boardRoutes() {
|
|||||||
<>
|
<>
|
||||||
<Route index element={<Navigate to="dashboard" replace />} />
|
<Route index element={<Navigate to="dashboard" replace />} />
|
||||||
<Route path="dashboard" element={<Dashboard />} />
|
<Route path="dashboard" element={<Dashboard />} />
|
||||||
|
<Route path="onboarding" element={<OnboardingRoutePage />} />
|
||||||
<Route path="companies" element={<Companies />} />
|
<Route path="companies" element={<Companies />} />
|
||||||
<Route path="company/settings" element={<CompanySettings />} />
|
<Route path="company/settings" element={<CompanySettings />} />
|
||||||
<Route path="settings" element={<LegacySettingsRedirect />} />
|
<Route path="settings" element={<LegacySettingsRedirect />} />
|
||||||
@@ -164,6 +165,57 @@ function LegacySettingsRedirect() {
|
|||||||
return <Navigate to={`/instance/settings${location.search}${location.hash}`} replace />;
|
return <Navigate to={`/instance/settings${location.search}${location.hash}`} replace />;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
function OnboardingRoutePage() {
|
||||||
|
const { companies, loading } = useCompany();
|
||||||
|
const { onboardingOpen, openOnboarding } = useDialog();
|
||||||
|
const { companyPrefix } = useParams<{ companyPrefix?: string }>();
|
||||||
|
const opened = useRef(false);
|
||||||
|
const matchedCompany = companyPrefix
|
||||||
|
? companies.find((company) => company.issuePrefix.toUpperCase() === companyPrefix.toUpperCase()) ?? null
|
||||||
|
: null;
|
||||||
|
|
||||||
|
useEffect(() => {
|
||||||
|
if (loading || opened.current || onboardingOpen) return;
|
||||||
|
opened.current = true;
|
||||||
|
if (matchedCompany) {
|
||||||
|
openOnboarding({ initialStep: 2, companyId: matchedCompany.id });
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
openOnboarding();
|
||||||
|
}, [companyPrefix, loading, matchedCompany, onboardingOpen, openOnboarding]);
|
||||||
|
|
||||||
|
const title = matchedCompany
|
||||||
|
? `Add another agent to ${matchedCompany.name}`
|
||||||
|
: companies.length > 0
|
||||||
|
? "Create another company"
|
||||||
|
: "Create your first company";
|
||||||
|
const description = matchedCompany
|
||||||
|
? "Run onboarding again to add an agent and a starter task for this company."
|
||||||
|
: companies.length > 0
|
||||||
|
? "Run onboarding again to create another company and seed its first agent."
|
||||||
|
: "Get started by creating a company and your first agent.";
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div className="mx-auto max-w-xl py-10">
|
||||||
|
<div className="rounded-lg border border-border bg-card p-6">
|
||||||
|
<h1 className="text-xl font-semibold">{title}</h1>
|
||||||
|
<p className="mt-2 text-sm text-muted-foreground">{description}</p>
|
||||||
|
<div className="mt-4">
|
||||||
|
<Button
|
||||||
|
onClick={() =>
|
||||||
|
matchedCompany
|
||||||
|
? openOnboarding({ initialStep: 2, companyId: matchedCompany.id })
|
||||||
|
: openOnboarding()
|
||||||
|
}
|
||||||
|
>
|
||||||
|
{matchedCompany ? "Add Agent" : "Start Onboarding"}
|
||||||
|
</Button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
function CompanyRootRedirect() {
|
function CompanyRootRedirect() {
|
||||||
const { companies, selectedCompany, loading } = useCompany();
|
const { companies, selectedCompany, loading } = useCompany();
|
||||||
const { onboardingOpen } = useDialog();
|
const { onboardingOpen } = useDialog();
|
||||||
@@ -242,6 +294,7 @@ export function App() {
|
|||||||
|
|
||||||
<Route element={<CloudAccessGate />}>
|
<Route element={<CloudAccessGate />}>
|
||||||
<Route index element={<CompanyRootRedirect />} />
|
<Route index element={<CompanyRootRedirect />} />
|
||||||
|
<Route path="onboarding" element={<OnboardingRoutePage />} />
|
||||||
<Route path="instance" element={<Navigate to="/instance/settings" replace />} />
|
<Route path="instance" element={<Navigate to="/instance/settings" replace />} />
|
||||||
<Route path="instance/settings" element={<Layout />}>
|
<Route path="instance/settings" element={<Layout />}>
|
||||||
<Route index element={<InstanceSettings />} />
|
<Route index element={<InstanceSettings />} />
|
||||||
|
|||||||
Reference in New Issue
Block a user