feat: cloud and ee (#805)

* stripe init
git submodules for enterprise modules

* * Cloud billing UI - WIP
* Proxy websockets in dev mode
* Separate workspace login and creation for cloud
* Other fixes

* feat: billing (cloud)

* * add domain service
* prepare links from workspace hostname

* WIP

* Add exchange token generation
* Validate JWT token type during verification

* domain service

* add SkipTransform decorator

* * updates (server)
* add new packages
* new sso migration file

* WIP

* Fix hostname generation

* WIP

* WIP

* Reduce input error font-size
* set max password length

* jwt package

* license page - WIP

* * License management UI
* Move license key store to db

* add reflector

* SSO enforcement

* * Add default plan
* Add usePlan hook

* * Fix auth container margin in mobile
* Redirect login and home to select page in cloud

* update .gitignore

* Default to yearly

* * Trial messaging
* Handle ended trials

* Don't set to readonly on collab disconnect (Cloud)

* Refine trial (UI)
* Fix bug caused by using jotai optics atom in AppHeader component

* configurable database maximum pool

* Close SSO form on save

* wip

* sync

* Only show sign-in in cloud

* exclude base api part from workspaceId check

* close db connection beforeApplicationShutdown

* Add health/live endpoint

* clear cookie on hostname change

* reset currentUser atom

* Change text

* return 401 if workspace does not match

* feat: show user workspace list in cloud login page

* sync

* Add home path

* Prefetch to speed up queries

* * Add robots.txt
* Disallow login and forgot password routes

* wildcard user-agent

* Fix space query cache

* fix

* fix

* use space uuid for recent pages

* prefetch billing plans

* enhance license page

* sync

apps/client/src/components/layouts/global/app-header.tsx

@@ -1,19 +1,21 @@
-import {Group, Text, Tooltip} from "@mantine/core";
+import { Badge, Group, Text, Tooltip } from "@mantine/core";
 import classes from "./app-header.module.css";
 import React from "react";
 import TopMenu from "@/components/layouts/global/top-menu.tsx";
-import {Link} from "react-router-dom";
+import { Link } from "react-router-dom";
 import APP_ROUTE from "@/lib/app-route.ts";
-import {useAtom} from "jotai/index";
+import { useAtom } from "jotai";
 import {
   desktopSidebarAtom,
   mobileSidebarAtom,
 } from "@/components/layouts/global/hooks/atoms/sidebar-atom.ts";
-import {useToggleSidebar} from "@/components/layouts/global/hooks/hooks/use-toggle-sidebar.ts";
+import { useToggleSidebar } from "@/components/layouts/global/hooks/hooks/use-toggle-sidebar.ts";
 import SidebarToggle from "@/components/ui/sidebar-toggle-button.tsx";
 import { useTranslation } from "react-i18next";
+import useTrial from "@/ee/hooks/use-trial.tsx";
+import { isCloud } from "@/lib/config.ts";
 
-const links = [{link: APP_ROUTE.HOME, label: "Home"}];
+const links = [{ link: APP_ROUTE.HOME, label: "Home" }];
 
 export function AppHeader() {
   const { t } = useTranslation();
@@ -22,6 +24,7 @@ export function AppHeader() {
 
   const [desktopOpened] = useAtom(desktopSidebarAtom);
   const toggleDesktop = useToggleSidebar(desktopSidebarAtom);
+  const { isTrial, trialDaysLeft } = useTrial();
 
   const isHomeRoute = location.pathname.startsWith("/home");
 
@@ -38,7 +41,6 @@ export function AppHeader() {
           {!isHomeRoute && (
             <>
               <Tooltip label={t("Sidebar toggle")}>
-
                 <SidebarToggle
                   aria-label={t("Sidebar toggle")}
                   opened={mobileOpened}
@@ -63,7 +65,7 @@ export function AppHeader() {
           <Text
             size="lg"
             fw={600}
-            style={{cursor: "pointer", userSelect: "none"}}
+            style={{ cursor: "pointer", userSelect: "none" }}
             component={Link}
             to="/home"
           >
@@ -75,8 +77,21 @@ export function AppHeader() {
           </Group>
         </Group>
 
-        <Group px={"xl"}>
-          <TopMenu/>
+        <Group px={"xl"} wrap="nowrap">
+          {isCloud() && isTrial && trialDaysLeft !== 0 && (
+            <Badge
+              variant="light"
+              style={{ cursor: "pointer" }}
+              component={Link}
+              to={APP_ROUTE.SETTINGS.WORKSPACE.BILLING}
+              visibleFrom="xs"
+            >
+              {trialDaysLeft === 1
+                ? "1 day left"
+                : `${trialDaysLeft} days left`}
+            </Badge>
+          )}
+          <TopMenu />
         </Group>
       </Group>
     </>

apps/client/src/components/layouts/global/global-app-shell.tsx

@@ -1,23 +1,26 @@
 import { AppShell, Container } from "@mantine/core";
-import React, { useCallback, useEffect, useRef, useState } from "react";
+import React, { useEffect, useRef, useState } from "react";
 import { useLocation } from "react-router-dom";
 import SettingsSidebar from "@/components/settings/settings-sidebar.tsx";
 import { useAtom } from "jotai";
 import {
   asideStateAtom,
   desktopSidebarAtom,
-  mobileSidebarAtom, sidebarWidthAtom,
+  mobileSidebarAtom,
+  sidebarWidthAtom,
 } from "@/components/layouts/global/hooks/atoms/sidebar-atom.ts";
 import { SpaceSidebar } from "@/features/space/components/sidebar/space-sidebar.tsx";
 import { AppHeader } from "@/components/layouts/global/app-header.tsx";
 import Aside from "@/components/layouts/global/aside.tsx";
 import classes from "./app-shell.module.css";
+import { useTrialEndAction } from "@/ee/hooks/use-trial-end-action.tsx";
 
 export default function GlobalAppShell({
   children,
 }: {
   children: React.ReactNode;
 }) {
+  useTrialEndAction();
   const [mobileOpened] = useAtom(mobileSidebarAtom);
   const [desktopOpened] = useAtom(desktopSidebarAtom);
   const [{ isAsideOpen }] = useAtom(asideStateAtom);
@@ -37,7 +40,9 @@ export default function GlobalAppShell({
   const resize = React.useCallback(
     (mouseMoveEvent) => {
       if (isResizing) {
-        const newWidth = mouseMoveEvent.clientX - sidebarRef.current.getBoundingClientRect().left;
+        const newWidth =
+          mouseMoveEvent.clientX -
+          sidebarRef.current.getBoundingClientRect().left;
         if (newWidth < 220) {
           setSidebarWidth(220);
           return;
@@ -49,7 +54,7 @@ export default function GlobalAppShell({
         setSidebarWidth(newWidth);
       }
     },
-    [isResizing]
+    [isResizing],
   );
 
   useEffect(() => {
@@ -94,7 +99,11 @@ export default function GlobalAppShell({
         <AppHeader />
       </AppShell.Header>
       {!isHomeRoute && (
-        <AppShell.Navbar className={classes.navbar} withBorder={false} ref={sidebarRef}>
+        <AppShell.Navbar
+          className={classes.navbar}
+          withBorder={false}
+          ref={sidebarRef}
+        >
           <div className={classes.resizeHandle} onMouseDown={startResizing} />
           {isSpaceRoute && <SpaceSidebar />}
           {isSettingsRoute && <SettingsSidebar />}

apps/client/src/components/layouts/global/top-menu.tsx

@@ -33,13 +33,13 @@ export default function TopMenu() {
         <UnstyledButton>
           <Group gap={7} wrap={"nowrap"}>
             <CustomAvatar
-              avatarUrl={workspace.logo}
-              name={workspace.name}
+              avatarUrl={workspace?.logo}
+              name={workspace?.name}
               variant="filled"
               size="sm"
             />
             <Text fw={500} size="sm" lh={1} mr={3} lineClamp={1}>
-              {workspace.name}
+              {workspace?.name}
             </Text>
             <IconChevronDown size={16} />
           </Group>