Setup page "Terms of service" (#550)

* refactor: convert current info dialogs to full screen pages

* feat: setup terms of service page

* feat: make term titles anchor links

* feat: add terms of service message to project overview page

* fix: tweak copy

* fix: mark message as seen when component unmounts

Author: annavik

ui/package.json

@@ -34,6 +34,7 @@
     "react-error-boundary": "^4.0.11",
     "react-hook-form": "^7.43.9",
     "react-leaflet": "^4.2.1",
+    "react-markdown": "^9.0.1",
     "react-plotly.js": "^2.6.0",
     "react-router-dom": "^6.8.2",
     "typescript": "^4.4.2",

ui/public/index.css

@@ -37,7 +37,8 @@ button,
 fieldset,
 input,
 li,
-ul {
+ul,
+ol {
   all: unset;
 }
 

ui/src/app.tsx

@@ -6,7 +6,9 @@ import { Analytics } from 'components/analytics'
 import { CookieDialog } from 'components/cookie-dialog/cookie-dialog'
 import { ErrorBoundary } from 'components/error-boundary/error-boundary'
 import { Header } from 'components/header/header'
+import { InfoPage } from 'components/info-page/info-page'
 import { Menu } from 'components/menu/menu'
+import { TermsOfServiceInfo } from 'components/terms-of-service-info/terms-of-service-info'
 import { useProjectDetails } from 'data-services/hooks/projects/useProjectDetails'
 import { Auth } from 'pages/auth/auth'
 import { Login } from 'pages/auth/login'
@@ -82,6 +84,7 @@ export const App = () => (
           <Route path="collections/:id" element={<CollectionDetails />} />
           <Route path="*" element={<UnderConstruction />} />
         </Route>
+        <Route path="/:slug" element={<InfoPageContainer />} />
       </Routes>
     </div>
     <ReactQueryDevtools initialIsOpen={false} />
@@ -122,6 +125,7 @@ const ProjectsContainer = () => {
 
   return (
     <main className={styles.main}>
+      <TermsOfServiceInfo />
       <div className={styles.content}>
         <ErrorBoundary>
           <Projects />
@@ -183,3 +187,17 @@ const ProjectContainer = () => {
     </>
   )
 }
+
+const InfoPageContainer = () => {
+  const { slug } = useParams()
+
+  return (
+    <main className={styles.main}>
+      <div className={styles.content}>
+        <ErrorBoundary>
+          <InfoPage slug={slug as string} />
+        </ErrorBoundary>
+      </div>
+    </main>
+  )
+}

ui/src/components/header/header.tsx

@@ -1,6 +1,4 @@
-import { InfoDialog } from 'components/info-dialog/info-dialog'
 import { useLogout } from 'data-services/hooks/auth/useLogout'
-import { usePages } from 'data-services/hooks/pages/usePages'
 import { Button, ButtonTheme } from 'design-system/components/button/button'
 import { Link, useLocation, useNavigate } from 'react-router-dom'
 import { APP_ROUTES } from 'utils/constants'
@@ -15,7 +13,6 @@ import { UserInfoDialog } from './user-info-dialog/user-info-dialog'
 export const Header = () => {
   const location = useLocation()
   const navigate = useNavigate()
-  const { pages = [] } = usePages()
   const { user } = useUser()
   const { logout, isLoading: isLogoutLoading } = useLogout()
 
@@ -35,11 +32,12 @@ export const Header = () => {
       <BetaInfo />
       <div className={styles.rightContent}>
         <div className={styles.infoPages}>
-          {pages.map((page) => (
-            <InfoDialog key={page.id} name={page.name} slug={page.slug} />
-          ))}
+          <Button
+            label="Terms of Service"
+            theme={ButtonTheme.Plain}
+            onClick={() => navigate(APP_ROUTES.TERMS_OF_SERVICE)}
+          />
         </div>
-
         {user.loggedIn ? (
           <>
             <Button

ui/src/components/info-dialog/info-dialog.module.scss

@@ -0,0 +1,103 @@
+@import 'src/design-system/variables/colors.scss';
+@import 'src/design-system/variables/typography.scss';
+@import 'src/design-system/variables/variables.scss';
+
+.wrapper {
+  position: relative;
+  width: 100%;
+  min-height: 320px;
+  margin: 16px auto;
+}
+
+.loadingWrapper {
+  position: absolute;
+  width: 100%;
+  height: 100%;
+  top: 0;
+  right: 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.container {
+  padding: 64px;
+  border-radius: 8px;
+  border: 1px solid $color-neutral-100;
+  background: $color-generic-white;
+  color: $color-neutral-800;
+}
+
+.content {
+  max-width: $small-screen-breakpoint;
+  min-height: 320px;
+  margin: 0 auto;
+
+  h1 {
+    @include heading-5();
+    margin: 0;
+
+    &:not(:last-child) {
+      margin-bottom: 32px;
+    }
+  }
+
+  h2 {
+    @include heading-6();
+    margin: 0;
+
+    &:not(:last-child) {
+      margin-bottom: 32px;
+    }
+  }
+
+  h3 {
+    @include paragraph-large();
+    margin: 0;
+
+    &:not(:last-child) {
+      margin-bottom: 32px;
+    }
+  }
+
+  p {
+    @include paragraph-small();
+    margin: 0;
+
+    &:not(:last-child) {
+      margin-bottom: 32px;
+    }
+  }
+
+  a {
+    color: $color-primary-1-600;
+    font-weight: 600;
+  }
+
+  strong {
+    font-weight: 600;
+  }
+
+  ol {
+    display: block;
+    list-style-type: decimal;
+    margin: 0 0 32px 64px;
+
+    li {
+      display: list-item;
+      @include paragraph-small();
+
+      &:not(:last-child) {
+        margin-bottom: 32px;
+      }
+    }
+
+    &:has(h2) {
+      margin: 0 0 8px;
+
+      li {
+        @include heading-6();
+      }
+    }
+  }
+}

ui/src/components/info-dialog/info-dialog.tsx

@@ -0,0 +1,49 @@
+import { usePageDetails } from 'data-services/hooks/pages/usePageDetails'
+import { LoadingSpinner } from 'design-system/components/loading-spinner/loading-spinner'
+import { Error } from 'pages/error/error'
+import styles from './info-page.module.scss'
+import { TERMS_OF_SERVICE_SLUG } from './terms-of-service-page/constants'
+import { TermsOfServicePage } from './terms-of-service-page/terms-of-service-page'
+
+export const InfoPage = ({ slug }: { slug: string }) => {
+  if (slug === TERMS_OF_SERVICE_SLUG) {
+    return <TermsOfServicePage />
+  }
+
+  return <InfoPageContent slug={slug} />
+}
+
+const InfoPageContent = ({ slug }: { slug: string }) => {
+  const { page, isLoading, error } = usePageDetails(slug)
+
+  if (isLoading) {
+    return (
+      <div className={styles.wrapper}>
+        <div className={styles.loadingWrapper}>
+          <LoadingSpinner />
+        </div>
+      </div>
+    )
+  }
+
+  if (error) {
+    return (
+      <div className={styles.wrapper}>
+        <Error error={error} />
+      </div>
+    )
+  }
+
+  return (
+    <div className={styles.wrapper}>
+      <div className={styles.container}>
+        {page ? (
+          <div
+            dangerouslySetInnerHTML={{ __html: page.html }}
+            className={styles.content}
+          />
+        ) : null}
+      </div>
+    </div>
+  )
+}

ui/src/components/info-dialog/useActiveInfoPage.ts

@@ -0,0 +1 @@
+export const TERMS_OF_SERVICE_SLUG = 'terms-of-service'