diff --git a/src/App.tsx b/src/App.tsx index a22b226b..847f60ab 100644 --- a/src/App.tsx +++ b/src/App.tsx @@ -1,80 +1,18 @@ -import { BrowserRouter as Router, Routes, Route } from "react-router-dom"; -import { QueryClient, QueryClientProvider } from "@tanstack/react-query"; - -import NotFound from "shared/components/NotFound"; -import useDocker from "shared/hooks/useDocker"; -import DownloadDockerWall from "shared/components/DownloadDockerWall"; -import { DISPLAY_WELCOME_SCREEN_KEY, isBrowserEnv } from "shared/helpers/utils"; - -import PremChat from "modules/prem-chat/components/PremChat"; -import Service from "modules/service/components/Service"; -import ServiceDetail from "modules/service-detail/components/ServiceDetail"; -import Settings from "modules/settings/components/Settings"; -import { ToastContainer } from "react-toastify"; -import "react-toastify/dist/ReactToastify.css"; import Modal from "react-modal"; -import WelcomeScreen from "shared/components/WelcomeScreen"; -import { useState } from "react"; +import Onboarding from "modules/onboarding/components/Onboarding"; +import { isBrowserEnv } from "shared/helpers/utils"; +import AppRouter from "AppRouter"; Modal.setAppElement("#root"); -const queryClient = new QueryClient({ - defaultOptions: { - queries: { - refetchOnWindowFocus: false, - staleTime: 1000 * 60, - retry: 1, - }, - }, -}); - function App() { - const { - isDockerRunning, - isContainerRunning, - isServerRunning, - handleCheckIsDockerRunning, - } = useDocker(); const isBrowser = isBrowserEnv(); - const [displayWelcomeScreen, setDisplayWelcomeScreen] = useState( - sessionStorage.getItem(DISPLAY_WELCOME_SCREEN_KEY) === null - ); - const closeWelcomeScreen = () => { - setDisplayWelcomeScreen(false); - sessionStorage.setItem(DISPLAY_WELCOME_SCREEN_KEY, "false"); - }; - - if (!isBrowser && displayWelcomeScreen) { - return ; + if (!isBrowser) { + return } />; } - if (!isBrowser) - if (!isDockerRunning || !isContainerRunning || !isServerRunning) - return ( - - ); - - return ( - - - - } /> - } /> - } - /> - } /> - } /> - - - - - ); + return ; } export default App; diff --git a/src/AppRouter.tsx b/src/AppRouter.tsx new file mode 100644 index 00000000..6bc34f08 --- /dev/null +++ b/src/AppRouter.tsx @@ -0,0 +1,41 @@ +import { QueryClient, QueryClientProvider } from "@tanstack/react-query"; +import PremChat from "modules/prem-chat/components/PremChat"; +import ServiceDetail from "modules/service-detail/components/ServiceDetail"; +import Service from "modules/service/components/Service"; +import Settings from "modules/settings/components/Settings"; +import { Route, BrowserRouter as Router, Routes } from "react-router-dom"; +import NotFound from "shared/components/NotFound"; +import { ToastContainer } from "react-toastify"; +import "react-toastify/dist/ReactToastify.css"; + +const queryClient = new QueryClient({ + defaultOptions: { + queries: { + refetchOnWindowFocus: false, + staleTime: 1000 * 60, + retry: 1, + }, + }, +}); + +const AppRouter = () => { + return ( + + + + } /> + } /> + } + /> + } /> + } /> + + + + + ); +}; + +export default AppRouter; diff --git a/src/assets/css/styles.css b/src/assets/css/styles.css index e2598996..29c9479d 100644 --- a/src/assets/css/styles.css +++ b/src/assets/css/styles.css @@ -18,9 +18,21 @@ header img { @apply w-[140px]; } -.docker-not-detected { +.system-check { @apply dark:bg-darkjunglegreen min-h-screen; } +.system-check__requirements p, +.system-check__requirements button { + @apply text-sm; +} +.system-check__requirements p:last-child, +.system-check__requirements button { + @apply w-[150px]; +} +.system-check__container { + min-height: calc(100vh - 182px); + @apply flex mb-[70px] items-center; +} .scrollbar-none { scrollbar-width: none; @@ -37,11 +49,6 @@ header img { @apply absolute top-0 right-0 left-0 w-full h-full bg-contain bottom-0; } -.docker-not-detected__modal { - @apply text-white relative; - background: #26262a; - margin: 1.5px; -} .docker-modal-wrap { background: linear-gradient( 131.93deg, @@ -52,9 +59,6 @@ header img { ); } -.docker-not-detected__modal hr { - border-color: rgba(237, 237, 237, 0.34); -} .modal-height { margin-bottom: 70px; diff --git a/src/assets/images/computer.svg b/src/assets/images/computer.svg new file mode 100644 index 00000000..ff87b91a --- /dev/null +++ b/src/assets/images/computer.svg @@ -0,0 +1,11 @@ + + + + + + + + + + + diff --git a/src/modules/onboarding/components/Dependency.tsx b/src/modules/onboarding/components/Dependency.tsx new file mode 100644 index 00000000..86b4f450 --- /dev/null +++ b/src/modules/onboarding/components/Dependency.tsx @@ -0,0 +1,50 @@ +import { Tooltip } from "react-tooltip"; +import { DependencyProps } from "../types"; + +const Dependency = ({ isRunning, name, status, tooltip }: DependencyProps) => { + return ( +
+

{name}

+ {isRunning && ( +

✓ {status}

+ )} + {!isRunning && ( + <> + + {tooltip && ( + + {tooltip} + + )} + + )} +
+ ); +}; + +export default Dependency; \ No newline at end of file diff --git a/src/modules/onboarding/components/Onboarding.tsx b/src/modules/onboarding/components/Onboarding.tsx new file mode 100644 index 00000000..6d8647fb --- /dev/null +++ b/src/modules/onboarding/components/Onboarding.tsx @@ -0,0 +1,45 @@ +import useDocker from "shared/hooks/useDocker"; +import useWelcomeScreen from "shared/hooks/useWelcomeScreen"; +import WelcomeScreen from "./WelcomeScreen"; +import SystemCheck from "./SystemCheck"; +import { useState } from "react"; +import { OnboardingProps } from "../types"; + +const Onboarding = ({ redirectTo }: OnboardingProps) => { + const { displayWelcomeScreen, setDisplayWelcomeScreen, closeWelcomeScreen } = + useWelcomeScreen(); + const { + isDockerRunning, + isContainerRunning, + isServerRunning, + handleCheckIsDockerRunning, + } = useDocker(); + + const [isSystemChecked, setIsSystemChecked] = useState(false); + + const isSystemCheckRequired = + !isDockerRunning || + !isContainerRunning || + !isServerRunning || + !isSystemChecked; + + if (displayWelcomeScreen) { + return ; + } + + if (isSystemCheckRequired) { + return ( + setDisplayWelcomeScreen(true)} + next={() => setIsSystemChecked(true)} + /> + ); + } + + return redirectTo; +}; + +export default Onboarding; diff --git a/src/modules/onboarding/components/SystemCheck.tsx b/src/modules/onboarding/components/SystemCheck.tsx new file mode 100644 index 00000000..7efd862e --- /dev/null +++ b/src/modules/onboarding/components/SystemCheck.tsx @@ -0,0 +1,117 @@ +import { Tooltip } from "react-tooltip"; +import Logo from "assets/images/brand-logo.svg"; +import arrow from "assets/images/arrow.svg"; +import computerLogo from "assets/images/computer.svg"; +import appleLogo from "assets/images/apple.svg"; +import { SystemCheckProps } from "../types"; +import Dependency from "./Dependency"; +import PrimaryButton from "shared/components/PrimaryButton"; + + +const SystemCheck = ({ + handleCheckIsDockerRunning, + isDockerRunning, + isServerRunning, + back, + next, +}: SystemCheckProps) => { + return ( +
+
+

Don't have requirements? Try the +  Prem App +   demo.

+
+
+ logo + +
+
+
+
+
+ computerLogo +
+

System Check

+

+ For Prem App to run smoothly you need: +

+
+
+

Requirements:

+ + In order to run Prem App you need to have +
Docker installed and running. +
+ } + /> + + In order to run Prem App you need to have +
Daemon installed and running. +
+ } + /> + + + In order to run Prem App you need to have +
+ at least 16gb of memory. +
+ } + /> +
+
+ +
+
+ + + + +
+ ); +}; + +export default SystemCheck; diff --git a/src/shared/components/WelcomeScreen.tsx b/src/modules/onboarding/components/WelcomeScreen.tsx similarity index 88% rename from src/shared/components/WelcomeScreen.tsx rename to src/modules/onboarding/components/WelcomeScreen.tsx index 4f3d037c..b7b19d4d 100644 --- a/src/shared/components/WelcomeScreen.tsx +++ b/src/modules/onboarding/components/WelcomeScreen.tsx @@ -1,9 +1,6 @@ -import PrimaryButton from "./PrimaryButton"; +import PrimaryButton from "shared/components/PrimaryButton"; import Logo from "assets/images/brand-logo.svg"; - -type WelcomeScreenProps = { - close: () => void; -}; +import { WelcomeScreenProps } from "../types"; const WelcomeScreen = ({ close }: WelcomeScreenProps) => { return ( diff --git a/src/modules/onboarding/types.ts b/src/modules/onboarding/types.ts new file mode 100644 index 00000000..294095f0 --- /dev/null +++ b/src/modules/onboarding/types.ts @@ -0,0 +1,24 @@ +import { ReactElement } from "react"; + +export type WelcomeScreenProps = { + close: () => void; +}; + +export type SystemCheckProps = { + handleCheckIsDockerRunning: () => void; + isDockerRunning: boolean; + isServerRunning: boolean; + back: () => void; + next: () => void; +}; + +export type DependencyProps = { + isRunning: boolean; + name: string; + status: string; + tooltip?: string | ReactElement; +}; + +export type OnboardingProps = { + redirectTo: ReactElement; +}; diff --git a/src/shared/components/DownloadDockerWall.tsx b/src/shared/components/DownloadDockerWall.tsx deleted file mode 100644 index ee831d51..00000000 --- a/src/shared/components/DownloadDockerWall.tsx +++ /dev/null @@ -1,100 +0,0 @@ -import { DownloadDockerWallProps } from "shared/types"; -import WarningLogo from "assets/images/warning.svg"; -import appleLogo from "assets/images/apple.svg"; -import Header from "./Header"; -import { Tooltip } from "react-tooltip"; - -const DownloadDockerWall = ({ - handleCheckIsDockerRunning, - isDockerRunning, -}: DownloadDockerWallProps) => { - return ( -
-
-
-
-
-
- WarningLogo -
-

- Docker not Detected -

-

- In order to run Prem App you need to have
Docker - installed and running. -

-
- -
-

Dependencies

-
-

Docker

- {isDockerRunning && ( -

- ✓ Found -

- )} - {!isDockerRunning && ( - <> - - - In order to run Prem App you need to have -
Docker installed and running. - - - )} -
-
-
-
-
- -
-
-
-
-
- ); -}; - -export default DownloadDockerWall; diff --git a/src/shared/hooks/useWelcomeScreen.ts b/src/shared/hooks/useWelcomeScreen.ts new file mode 100644 index 00000000..1cf02984 --- /dev/null +++ b/src/shared/hooks/useWelcomeScreen.ts @@ -0,0 +1,13 @@ +import { useCallback, useState } from "react"; + +const useWelcomeScreen = () => { + const [displayWelcomeScreen, setDisplayWelcomeScreen] = useState(true); + + const closeWelcomeScreen = useCallback(() => { + setDisplayWelcomeScreen(false); + }, [setDisplayWelcomeScreen]); + + return { displayWelcomeScreen, setDisplayWelcomeScreen, closeWelcomeScreen }; +}; + +export default useWelcomeScreen; diff --git a/src/shared/types/index.ts b/src/shared/types/index.ts index d2920ade..bc81185d 100644 --- a/src/shared/types/index.ts +++ b/src/shared/types/index.ts @@ -4,11 +4,6 @@ export type BotReplyProps = { reply: string; }; -export type DownloadDockerWallProps = { - handleCheckIsDockerRunning: () => void; - isDockerRunning: boolean; -}; - export type SidebarProps = { toggleStatus: boolean; toggle: () => void;