211 lines
11 KiB
TypeScript
211 lines
11 KiB
TypeScript
import React from 'react';
|
|
import { createBrowserRouter, Outlet, Navigate, useLocation, useParams } from 'react-router-dom';
|
|
import { useQuery } from '@tanstack/react-query';
|
|
import RouteErrorElement from '@/components/RouteErrorElement';
|
|
import { useAuth } from './auth/context';
|
|
import { useEventContext } from './context/EventContext';
|
|
import {
|
|
ADMIN_BASE_PATH,
|
|
ADMIN_BILLING_PATH,
|
|
ADMIN_DEFAULT_AFTER_LOGIN_PATH,
|
|
ADMIN_EVENTS_PATH,
|
|
ADMIN_LOGIN_PATH,
|
|
ADMIN_LOGIN_START_PATH,
|
|
ADMIN_PUBLIC_LANDING_PATH,
|
|
ADMIN_WELCOME_BASE_PATH,
|
|
} from './constants';
|
|
import { getTenantPackagesOverview } from './api';
|
|
import { getSelectedPackageId } from './mobile/lib/onboardingSelection';
|
|
import { resolveOnboardingRedirect } from './mobile/lib/onboardingGuard';
|
|
const AuthCallbackPage = React.lazy(() => import('./mobile/AuthCallbackPage'));
|
|
const LoginStartPage = React.lazy(() => import('./mobile/LoginStartPage'));
|
|
const LogoutPage = React.lazy(() => import('./mobile/LogoutPage'));
|
|
const MobileEventsPage = React.lazy(() => import('./mobile/EventsPage'));
|
|
const MobileEventDetailPage = React.lazy(() => import('./mobile/EventDetailPage'));
|
|
const MobileEventPhotoboothPage = React.lazy(() => import('./mobile/EventPhotoboothPage'));
|
|
const MobileBrandingPage = React.lazy(() => import('./mobile/BrandingPage'));
|
|
const MobileEventFormPage = React.lazy(() => import('./mobile/EventFormPage'));
|
|
const MobileQrPrintPage = React.lazy(() => import('./mobile/QrPrintPage'));
|
|
const MobileQrLayoutCustomizePage = React.lazy(() => import('./mobile/QrLayoutCustomizePage'));
|
|
const MobileEventGuestNotificationsPage = React.lazy(() => import('./mobile/EventGuestNotificationsPage'));
|
|
const MobileEventPhotosPage = React.lazy(() => import('./mobile/EventPhotosPage'));
|
|
const MobileEventMembersPage = React.lazy(() => import('./mobile/EventMembersPage'));
|
|
const MobileEventTasksPage = React.lazy(() => import('./mobile/EventTasksPage'));
|
|
const MobileEventRecapPage = React.lazy(() => import('./mobile/EventRecapPage'));
|
|
const MobileNotificationsPage = React.lazy(() => import('./mobile/NotificationsPage'));
|
|
const MobileProfilePage = React.lazy(() => import('./mobile/ProfilePage'));
|
|
const MobileBillingPage = React.lazy(() => import('./mobile/BillingPage'));
|
|
const MobileSettingsPage = React.lazy(() => import('./mobile/SettingsPage'));
|
|
const MobileLoginPage = React.lazy(() => import('./mobile/LoginPage'));
|
|
const MobileDashboardPage = React.lazy(() => import('./mobile/DashboardPage'));
|
|
const MobileTasksTabPage = React.lazy(() => import('./mobile/TasksTabPage'));
|
|
const MobileUploadsTabPage = React.lazy(() => import('./mobile/UploadsTabPage'));
|
|
const MobileAnimatedOutlet = React.lazy(() => import('./mobile/components/MobileAnimatedOutlet'));
|
|
const MobileWelcomeLandingPage = React.lazy(() => import('./mobile/welcome/WelcomeLandingPage'));
|
|
const MobileWelcomePackagesPage = React.lazy(() => import('./mobile/welcome/WelcomePackagesPage'));
|
|
const MobileWelcomeSummaryPage = React.lazy(() => import('./mobile/welcome/WelcomeSummaryPage'));
|
|
const MobileWelcomeEventPage = React.lazy(() => import('./mobile/welcome/WelcomeEventPage'));
|
|
|
|
function RequireAuth() {
|
|
const { status } = useAuth();
|
|
const location = useLocation();
|
|
const { hasEvents, isLoading: eventsLoading } = useEventContext();
|
|
const selectedPackageId = getSelectedPackageId();
|
|
const isWelcomePath = location.pathname.startsWith(ADMIN_WELCOME_BASE_PATH);
|
|
const isBillingPath = location.pathname.startsWith(ADMIN_BILLING_PATH);
|
|
const shouldCheckPackages =
|
|
status === 'authenticated' && !eventsLoading && !hasEvents && !isWelcomePath && !isBillingPath;
|
|
|
|
const { data: packagesData, isLoading: packagesLoading } = useQuery({
|
|
queryKey: ['mobile', 'onboarding', 'packages-overview'],
|
|
queryFn: () => getTenantPackagesOverview({ force: true }),
|
|
enabled: shouldCheckPackages,
|
|
staleTime: 60_000,
|
|
});
|
|
|
|
const hasActivePackage =
|
|
Boolean(packagesData?.activePackage) || Boolean(packagesData?.packages?.some((pkg) => pkg.active));
|
|
|
|
const redirectTarget = resolveOnboardingRedirect({
|
|
hasEvents,
|
|
hasActivePackage,
|
|
selectedPackageId,
|
|
pathname: location.pathname,
|
|
isWelcomePath,
|
|
isBillingPath,
|
|
});
|
|
|
|
if (status === 'loading') {
|
|
return (
|
|
<div className="flex min-h-screen items-center justify-center text-sm text-muted-foreground">
|
|
Bitte warten ...
|
|
</div>
|
|
);
|
|
}
|
|
|
|
if (status === 'unauthenticated') {
|
|
return <Navigate to={ADMIN_LOGIN_START_PATH} state={{ from: location }} replace />;
|
|
}
|
|
|
|
if (!isWelcomePath && !isBillingPath && (eventsLoading || packagesLoading)) {
|
|
return (
|
|
<div className="flex min-h-screen items-center justify-center text-sm text-muted-foreground">
|
|
Bitte warten ...
|
|
</div>
|
|
);
|
|
}
|
|
|
|
if (redirectTarget) {
|
|
return <Navigate to={redirectTarget} replace />;
|
|
}
|
|
|
|
return (
|
|
<React.Suspense fallback={<Outlet />}>
|
|
<MobileAnimatedOutlet />
|
|
</React.Suspense>
|
|
);
|
|
}
|
|
|
|
function LandingGate() {
|
|
const { status } = useAuth();
|
|
|
|
if (status === 'loading') {
|
|
return (
|
|
<div className="flex min-h-screen items-center justify-center text-sm text-muted-foreground">
|
|
Bitte warten ...
|
|
</div>
|
|
);
|
|
}
|
|
|
|
if (status === 'authenticated') {
|
|
return <Navigate to={ADMIN_DEFAULT_AFTER_LOGIN_PATH} replace />;
|
|
}
|
|
|
|
return <Navigate to={ADMIN_LOGIN_PATH} replace />;
|
|
}
|
|
|
|
function RequireAdminAccess({ children }: { children: React.ReactNode }) {
|
|
const { user } = useAuth();
|
|
|
|
if (user?.role === 'member') {
|
|
return <Navigate to={ADMIN_EVENTS_PATH} replace />;
|
|
}
|
|
|
|
return <>{children}</>;
|
|
}
|
|
|
|
function RedirectToMobileEvent({ buildPath }: { buildPath: (slug: string) => string }) {
|
|
const { slug } = useParams<{ slug?: string }>();
|
|
if (!slug) {
|
|
return <Navigate to={ADMIN_EVENTS_PATH} replace />;
|
|
}
|
|
return <Navigate to={buildPath(slug)} replace />;
|
|
}
|
|
|
|
export const router = createBrowserRouter([
|
|
{
|
|
path: ADMIN_BASE_PATH,
|
|
element: <Outlet />,
|
|
errorElement: <RouteErrorElement />,
|
|
children: [
|
|
{ index: true, element: <LandingGate /> },
|
|
{ path: 'login', element: <MobileLoginPage /> },
|
|
{ path: 'mobile/login', element: <MobileLoginPage /> },
|
|
{ path: 'start', element: <LoginStartPage /> },
|
|
{ path: 'logout', element: <LogoutPage /> },
|
|
{ path: 'auth/callback', element: <AuthCallbackPage /> },
|
|
{
|
|
element: <RequireAuth />,
|
|
children: [
|
|
{ path: 'dashboard', element: <RequireAdminAccess><MobileDashboardPage /></RequireAdminAccess> },
|
|
{ path: 'live', element: <RequireAdminAccess><MobileDashboardPage /></RequireAdminAccess> },
|
|
{ path: 'events', element: <Navigate to={ADMIN_EVENTS_PATH} replace /> },
|
|
{ path: 'events/new', element: <Navigate to={`${ADMIN_EVENTS_PATH}/new`} replace /> },
|
|
{ path: 'events/:slug', element: <RedirectToMobileEvent buildPath={(slug) => `${ADMIN_EVENTS_PATH}/${slug}`} /> },
|
|
{ path: 'events/:slug/recap', element: <RedirectToMobileEvent buildPath={(slug) => `${ADMIN_EVENTS_PATH}/${slug}`} /> },
|
|
{ path: 'events/:slug/edit', element: <RedirectToMobileEvent buildPath={(slug) => `${ADMIN_EVENTS_PATH}/${slug}/edit`} /> },
|
|
{ path: 'events/:slug/photos', element: <RedirectToMobileEvent buildPath={(slug) => `${ADMIN_EVENTS_PATH}/${slug}/photos`} /> },
|
|
{ path: 'events/:slug/members', element: <RedirectToMobileEvent buildPath={(slug) => `${ADMIN_EVENTS_PATH}/${slug}/members`} /> },
|
|
{ path: 'events/:slug/tasks', element: <RedirectToMobileEvent buildPath={(slug) => `${ADMIN_EVENTS_PATH}/${slug}/tasks`} /> },
|
|
{ path: 'events/:slug/invites', element: <RedirectToMobileEvent buildPath={(slug) => `${ADMIN_EVENTS_PATH}/${slug}/qr`} /> },
|
|
{ path: 'events/:slug/branding', element: <RedirectToMobileEvent buildPath={(slug) => `${ADMIN_EVENTS_PATH}/${slug}/branding`} /> },
|
|
{ path: 'events/:slug/photobooth', element: <RedirectToMobileEvent buildPath={(slug) => `${ADMIN_EVENTS_PATH}/${slug}/photobooth`} /> },
|
|
{ path: 'events/:slug/guest-notifications', element: <RedirectToMobileEvent buildPath={(slug) => `${ADMIN_EVENTS_PATH}/${slug}/guest-notifications`} /> },
|
|
{ path: 'events/:slug/toolkit', element: <RedirectToMobileEvent buildPath={(slug) => `${ADMIN_EVENTS_PATH}/${slug}`} /> },
|
|
{ path: 'mobile/events', element: <MobileEventsPage /> },
|
|
{ path: 'mobile/events/:slug', element: <MobileEventDetailPage /> },
|
|
{ path: 'mobile/events/:slug/branding', element: <RequireAdminAccess><MobileBrandingPage /></RequireAdminAccess> },
|
|
{ path: 'mobile/events/new', element: <RequireAdminAccess><MobileEventFormPage /></RequireAdminAccess> },
|
|
{ path: 'mobile/events/:slug/edit', element: <RequireAdminAccess><MobileEventFormPage /></RequireAdminAccess> },
|
|
{ path: 'mobile/events/:slug/qr', element: <RequireAdminAccess><MobileQrPrintPage /></RequireAdminAccess> },
|
|
{ path: 'mobile/events/:slug/qr/customize/:tokenId?', element: <RequireAdminAccess><MobileQrLayoutCustomizePage /></RequireAdminAccess> },
|
|
{ path: 'mobile/events/:slug/photos', element: <MobileEventPhotosPage /> },
|
|
{ path: 'mobile/events/:slug/photos/:photoId', element: <MobileEventPhotosPage /> },
|
|
{ path: 'mobile/events/:slug/recap', element: <RequireAdminAccess><MobileEventRecapPage /></RequireAdminAccess> },
|
|
{ path: 'mobile/events/:slug/members', element: <RequireAdminAccess><MobileEventMembersPage /></RequireAdminAccess> },
|
|
{ path: 'mobile/events/:slug/tasks', element: <MobileEventTasksPage /> },
|
|
{ path: 'mobile/events/:slug/photobooth', element: <RequireAdminAccess><MobileEventPhotoboothPage /></RequireAdminAccess> },
|
|
{ path: 'mobile/events/:slug/guest-notifications', element: <RequireAdminAccess><MobileEventGuestNotificationsPage /></RequireAdminAccess> },
|
|
{ path: 'mobile/notifications', element: <MobileNotificationsPage /> },
|
|
{ path: 'mobile/notifications/:notificationId', element: <MobileNotificationsPage /> },
|
|
{ path: 'mobile/profile', element: <RequireAdminAccess><MobileProfilePage /></RequireAdminAccess> },
|
|
{ path: 'mobile/billing', element: <RequireAdminAccess><MobileBillingPage /></RequireAdminAccess> },
|
|
{ path: 'mobile/settings', element: <RequireAdminAccess><MobileSettingsPage /></RequireAdminAccess> },
|
|
{ path: 'mobile/dashboard', element: <MobileDashboardPage /> },
|
|
{ path: 'mobile/tasks', element: <MobileTasksTabPage /> },
|
|
{ path: 'mobile/uploads', element: <MobileUploadsTabPage /> },
|
|
{ path: 'mobile/welcome', element: <MobileWelcomeLandingPage /> },
|
|
{ path: 'mobile/welcome/packages', element: <MobileWelcomePackagesPage /> },
|
|
{ path: 'mobile/welcome/summary', element: <MobileWelcomeSummaryPage /> },
|
|
{ path: 'mobile/welcome/event', element: <MobileWelcomeEventPage /> },
|
|
],
|
|
},
|
|
],
|
|
},
|
|
{
|
|
path: '*',
|
|
element: <Navigate to={ADMIN_PUBLIC_LANDING_PATH} replace />,
|
|
errorElement: <RouteErrorElement />,
|
|
},
|
|
]);
|