Merge remote-tracking branch 'origin/main'

# Conflicts: # apps/web/app/[locale]/home/[account]/_components/team-account-layout-mobile-navigation.tsx # packages/features/course-management/src/server/api.ts # packages/features/event-management/src/server/api.ts # packages/supabase/src/get-supabase-client-keys.ts # pnpm-lock.yaml
2026-04-01 13:22:17 +02:00
parent abac22feb1 8d8f4e94ee
commit da8a43a3b0
34 changed files with 1608 additions and 1361 deletions
--- a/apps/web/app/[locale]/home/[account]/_components/team-account-accounts-selector.tsx
+++ b/apps/web/app/[locale]/home/[account]/_components/team-account-accounts-selector.tsx
@@ -1,9 +1,11 @@
 'use client';

+import { useContext } from 'react';
+
 import { useRouter } from 'next/navigation';

 import { AccountSelector } from '@kit/accounts/account-selector';
-import { useSidebar } from '@kit/ui/sidebar';
+import { SidebarContext } from '@kit/ui/sidebar';

 import featureFlagsConfig from '~/config/feature-flags.config';
 import pathsConfig from '~/config/paths.config';
@@ -23,7 +25,7 @@ export function TeamAccountAccountsSelector(params: {
  }>;
 }) {
  const router = useRouter();
-  const ctx = useSidebar();
+  const ctx = useContext(SidebarContext);

  return (
    <AccountSelector
--- a/apps/web/app/[locale]/home/[account]/_components/team-account-layout-mobile-navigation.tsx
+++ b/apps/web/app/[locale]/home/[account]/_components/team-account-layout-mobile-navigation.tsx
@@ -1,32 +1,28 @@
 'use client';

-import Link from 'next/link';
 import { useRouter } from 'next/navigation';

-import { Home, LogOut, Menu } from 'lucide-react';
-import * as z from 'zod';
+import { Menu } from 'lucide-react';

 import { AccountSelector } from '@kit/accounts/account-selector';
 import { useSignOut } from '@kit/supabase/hooks/use-sign-out';
-import {
-  Dialog,
-  DialogContent,
-  DialogHeader,
-  DialogTitle,
-  DialogTrigger,
-} from '@kit/ui/dialog';
 import {
  DropdownMenu,
  DropdownMenuContent,
-  DropdownMenuItem,
+  DropdownMenuGroup,
+  DropdownMenuLabel,
  DropdownMenuSeparator,
  DropdownMenuTrigger,
 } from '@kit/ui/dropdown-menu';
-import { NavigationConfigSchema } from '@kit/ui/navigation-schema';
 import { Trans } from '@kit/ui/trans';

+import {
+  MobileNavRouteLinks,
+  MobileNavSignOutItem,
+} from '~/components/mobile-navigation-shared';
 import featureFlagsConfig from '~/config/feature-flags.config';
 import pathsConfig from '~/config/paths.config';
+import { getTeamAccountSidebarConfig } from '~/config/team-account-navigation.config';

 type Accounts = Array<{
  label: string | null;
@@ -35,7 +31,6 @@ type Accounts = Array<{
 }>;

 const features = {
-  enableTeamAccounts: featureFlagsConfig.enableTeamAccounts,
  enableTeamCreation: featureFlagsConfig.enableTeamCreation,
 };

@@ -44,129 +39,23 @@ export const TeamAccountLayoutMobileNavigation = (
    account: string;
    userId: string;
    accounts: Accounts;
-    config: z.output<typeof NavigationConfigSchema>;
  }>,
 ) => {
+  const router = useRouter();
  const signOut = useSignOut();

-  const Links = props.config.routes.map((item, index) => {
-    if ('children' in item) {
-      return item.children.map((child) => {
-        return (
-          <DropdownLink
-            key={child.path}
-            Icon={child.Icon}
-            path={child.path}
-            label={child.label}
-          />
-        );
-      });
-    }
-
-    if ('divider' in item) {
-      return <DropdownMenuSeparator key={index} />;
-    }
-  });
-
  return (
    <DropdownMenu>
      <DropdownMenuTrigger>
        <Menu className={'h-9'} />
      </DropdownMenuTrigger>

-      <DropdownMenuContent sideOffset={10} className={'w-screen rounded-none'}>
-        <TeamAccountsModal
-          userId={props.userId}
-          accounts={props.accounts}
-          account={props.account}
-        />
-
-        {Links}
-
-        <DropdownMenuSeparator />
-
-        <SignOutDropdownItem onSignOut={() => signOut.mutateAsync()} />
-      </DropdownMenuContent>
-    </DropdownMenu>
-  );
-};
-
-function DropdownLink(
-  props: React.PropsWithChildren<{
-    path: string;
-    label: string;
-    Icon: React.ReactNode;
-  }>,
-) {
-  return (
-    <DropdownMenuItem
-      render={
-        <Link
-          href={props.path}
-          className={'flex h-12 w-full items-center gap-x-3 px-3'}
-        >
-          {props.Icon}
-
-          <span>
-            <Trans i18nKey={props.label} defaults={props.label} />
-          </span>
-        </Link>
-      }
-    />
-  );
-}
-
-function SignOutDropdownItem(
-  props: React.PropsWithChildren<{
-    onSignOut: () => unknown;
-  }>,
-) {
-  return (
-    <DropdownMenuItem
-      className={'flex h-12 w-full items-center space-x-2'}
-      onClick={props.onSignOut}
-    >
-      <LogOut className={'h-4'} />
-
-      <span>
-        <Trans i18nKey={'common.signOut'} />
-      </span>
-    </DropdownMenuItem>
-  );
-}
-
-function TeamAccountsModal(props: {
-  accounts: Accounts;
-  userId: string;
-  account: string;
-}) {
-  const router = useRouter();
-
-  return (
-    <Dialog>
-      <DialogTrigger
-        render={
-          <DropdownMenuItem
-            className={'flex h-12 w-full items-center space-x-2'}
-            onSelect={(e) => e.preventDefault()}
-          >
-            <Home className={'h-4'} />
-
-            <span>
-              <Trans i18nKey={'common.yourAccounts'} />
-            </span>
-          </DropdownMenuItem>
-        }
-      />
-
-      <DialogContent>
-        <DialogHeader>
-          <DialogTitle>
+      <DropdownMenuContent className={'w-screen rounded-none'}>
+        <DropdownMenuGroup>
+          <DropdownMenuLabel>
            <Trans i18nKey={'common.yourAccounts'} />
-          </DialogTitle>
-        </DialogHeader>
+          </DropdownMenuLabel>

-        <div className={'py-6'}>
          <AccountSelector
            className={'w-full max-w-full'}
            userId={props.userId}
@@ -185,8 +74,20 @@ function TeamAccountsModal(props: {
              router.replace(path);
            }}
          />
-        </div>
-      </DialogContent>
-    </Dialog>
+        </DropdownMenuGroup>
+
+        <DropdownMenuSeparator />
+
+        <DropdownMenuGroup>
+          <MobileNavRouteLinks
+            routes={getTeamAccountSidebarConfig(props.account).routes}
+          />
+        </DropdownMenuGroup>
+
+        <DropdownMenuSeparator />
+
+        <MobileNavSignOutItem onSignOut={() => signOut.mutateAsync()} />
+      </DropdownMenuContent>
+    </DropdownMenu>
  );
-}
+};
--- a/apps/web/app/[locale]/home/[account]/_components/team-account-layout-page-header.tsx
+++ b/apps/web/app/[locale]/home/[account]/_components/team-account-layout-page-header.tsx
@@ -1,13 +1,28 @@
+import { cookies } from 'next/headers';
+
 import { PageHeader } from '@kit/ui/page';

-export function TeamAccountLayoutPageHeader(
+import { getTeamAccountSidebarConfig } from '~/config/team-account-navigation.config';
+
+export async function TeamAccountLayoutPageHeader(
  props: React.PropsWithChildren<{
    title: string | React.ReactNode;
    description: string | React.ReactNode;
    account: string;
  }>,
 ) {
+  const cookieStore = await cookies();
+  const layoutStyleCookie = cookieStore.get('layout-style')?.value;
+  const defaultStyle = getTeamAccountSidebarConfig(props.account).style;
+  const displaySidebarTrigger =
+    (layoutStyleCookie ?? defaultStyle) === 'sidebar';
+
  return (
-    <PageHeader description={props.description}>{props.children}</PageHeader>
+    <PageHeader
+      description={props.description}
+      displaySidebarTrigger={displaySidebarTrigger}
+    >
+      {props.children}
+    </PageHeader>
  );
 }
--- a/apps/web/app/[locale]/home/[account]/_components/team-account-navigation-menu.tsx
+++ b/apps/web/app/[locale]/home/[account]/_components/team-account-navigation-menu.tsx
@@ -44,7 +44,9 @@ export function TeamAccountNavigationMenu(props: {
  return (
    <div className={'flex w-full flex-1 justify-between'}>
      <div className={'flex items-center space-x-8'}>
-        <AppLogo />
+        <div>
+          <AppLogo />
+        </div>

        <BorderedNavigationMenu>
          {routes.map((route) => (
@@ -53,20 +55,22 @@ export function TeamAccountNavigationMenu(props: {
        </BorderedNavigationMenu>
      </div>

-      <div className={'flex items-center justify-end space-x-2.5'}>
+      <div className={'flex items-center justify-end space-x-1'}>
        <If condition={featureFlagsConfig.enableNotifications}>
          <TeamAccountNotifications accountId={account.id} userId={user.id} />
        </If>

-        <TeamAccountAccountsSelector
-          userId={user.id}
-          selectedAccount={account.slug}
-          accounts={accounts.map((account) => ({
-            label: account.name,
-            value: account.slug,
-            image: account.picture_url,
-          }))}
-        />
+        <div>
+          <TeamAccountAccountsSelector
+            userId={user.id}
+            selectedAccount={account.slug}
+            accounts={accounts.map((account) => ({
+              label: account.name,
+              value: account.slug,
+              image: account.picture_url,
+            }))}
+          />
+        </div>

        <div>
          <ProfileAccountDropdownContainer
--- a/apps/web/app/[locale]/home/[account]/billing/_lib/server/team-billing.service.ts
+++ b/apps/web/app/[locale]/home/[account]/billing/_lib/server/team-billing.service.ts
@@ -1,4 +1,6 @@
 import 'server-only';
+import { redirect } from 'next/navigation';
+
 import { SupabaseClient } from '@supabase/supabase-js';

 import * as z from 'zod';
@@ -106,9 +108,12 @@ class TeamBillingService {
      `Creating checkout session...`,
    );

+    let checkoutToken: string | null = null;
+    let url: string | null | undefined;
+
    try {
      // call the payment gateway to create the checkout session
-      const { checkoutToken } = await service.createCheckoutSession({
+      const checkout = await service.createCheckoutSession({
        accountId,
        plan,
        returnUrl,
@@ -118,22 +123,37 @@ class TeamBillingService {
        enableDiscountField: product.enableDiscountField,
      });

-      // return the checkout token to the client
-      // so we can call the payment gateway to complete the checkout
-      return {
-        checkoutToken,
-      };
+      checkoutToken = checkout.checkoutToken;
+      url = checkout.url;
    } catch (error) {
+      const message = Error.isError(error) ? error.message : error;
+
      logger.error(
        {
          ...ctx,
-          error,
+          error: message,
        },
        `Error creating the checkout session`,
      );

      throw new Error(`Checkout not created`, { cause: error });
    }
+
+    // if URL provided, we redirect to the provider's hosted page
+    if (url) {
+      logger.info(
+        ctx,
+        `Checkout session created. Redirecting to hosted page...`,
+      );
+
+      redirect(url);
+    }
+
+    // return the checkout token to the client
+    // so we can call the payment gateway to complete the checkout
+    return {
+      checkoutToken,
+    };
  }

  /**
--- a/apps/web/app/[locale]/home/[account]/layout.tsx
+++ b/apps/web/app/[locale]/home/[account]/layout.tsx
@@ -161,10 +161,10 @@ async function SidebarLayout({
            />
          </PageNavigation>

-          <PageMobileNavigation className={'flex items-center justify-between'}>
+          <PageMobileNavigation>
            <AppLogo />

-            <div className={'flex space-x-4'}>
+            <div className={'flex'}>
              <TeamAccountLayoutMobileNavigation
                userId={data.user.id}
                accounts={accounts}
@@ -195,6 +195,12 @@ async function HeaderLayout({
  const baseConfig = getTeamAccountSidebarConfig(account);
  const config = injectAccountFeatureRoutes(baseConfig, account, features);

+  const accounts = data.accounts.map(({ name, slug, picture_url }) => ({
+    label: name,
+    value: slug,
+    image: picture_url,
+  }));
+
  return (
    <TeamAccountWorkspaceContextProvider value={data}>
      <Page style={'header'}>
@@ -202,6 +208,20 @@ async function HeaderLayout({
          <TeamAccountNavigationMenu workspace={data} config={config} />
        </PageNavigation>

+        <PageMobileNavigation className={'flex items-center justify-between'}>
+          <div>
+            <AppLogo />
+          </div>
+
+          <div>
+            <TeamAccountLayoutMobileNavigation
+              userId={data.user.id}
+              accounts={accounts}
+              account={account}
+            />
+          </div>
+        </PageMobileNavigation>
+
        {children}
      </Page>
    </TeamAccountWorkspaceContextProvider>