[CP-2963] I want to see the list of categories on the Help page

libs/core/__deprecated__/renderer/components/rest/menu/menu-group.component.tsx

@@ -15,9 +15,9 @@
 import { IconSize } from "Core/__deprecated__/renderer/components/core/icon/icon.component"
 import RangeIcon from "Core/__deprecated__/renderer/components/core/icon/range-icon.component"
 import BatteryIcon from "Core/__deprecated__/renderer/components/core/icon/battery-icon.component"
 import { views } from "Core/__deprecated__/renderer/constants/views"
 import { ipcRenderer } from "electron-better-ipc"
 import { HelpActions } from "Core/__deprecated__/common/enums/help-actions.enum"
 import {
   HeaderIcon,
   HeaderIconBg,
@@ -94,19 +94,6 @@
                 ? { label: button.label }
                 : { labelMessage: button.label }),
             }
-            if (button === views.help) {
-              const openHelpWindow = () =>
-                ipcRenderer.callMain(HelpActions.OpenWindow)
-              return (
-                <LinkWrapper key={index}>
-                  <Button
-                    {...buttonMenuConfig}
-                    onClick={openHelpWindow}
-                    data-testid={testId}
-                  />
-                </LinkWrapper>
-              )
-            }
             return (
               <LinkWrapper key={index}>
                 <NotificationBadge

libs/core/__deprecated__/renderer/locales/default/en-US.json

@@ -436,7 +436,8 @@
   "module.filesManager.detachedDuringUploadErrorModalTextInfo": "Make sure your device stays connected and try again.",
   "module.filesManager.detachedDuringUploadErrorModalActionButton": "Close",
   "module.generic.viewBackButton": "Back to {name}",
-  "module.help": "Help",
+  "module.help": "Mudita Help Center",
+  "module.help.deviceSelectorTitle": "Which device are you using with Mudita Center?",
   "module.help.answerError": "Something went wrong",
   "module.help.backLinkText": "Back",
   "module.help.supportTooltipDescription": "Contact support",

libs/core/core/components/apps/base-app/base-app-routes.tsx

@@ -30,9 +30,14 @@ import ConfiguredDevicesDiscovery from "Core/discovery-device/components/configu
 import DevicesInitialization from "Core/device-initialization/components/devices-initialization.component"
 import AvailableDeviceListContainer from "Core/discovery-device/components/available-device-list.container"
 import DeviceConnecting from "Core/discovery-device/components/device-connecting.component"
-import { GenericView } from "generic-view/feature"
-import { APIConnectionDemo, DataMigrationPage } from "generic-view/ui"
 import ManageSounds from "Core/files-manager/components/manage-sounds.component"
+import { GenericView } from "generic-view/feature"
+import {
+  APIConnectionDemo,
+  ArticlePage,
+  DataMigrationPage,
+  HelpPage,
+} from "generic-view/ui"
 
 // AUTO DISABLED - fix me if you like :)
 // eslint-disable-next-line @typescript-eslint/explicit-module-boundary-types
@@ -58,7 +63,13 @@ export default () => (
         </LayoutDesktopWrapperWithoutHeader>
       </Route>
 
-      <Route exact path={[URL_DISCOVERY_DEVICE.root, URL_DISCOVERY_DEVICE.deviceConnecting]}>
+      <Route
+        exact
+        path={[
+          URL_DISCOVERY_DEVICE.root,
+          URL_DISCOVERY_DEVICE.deviceConnecting,
+        ]}
+      >
         <LayoutBlankWrapper closeable={false}>
           <Route
             path={URL_DISCOVERY_DEVICE.root}
@@ -73,7 +84,6 @@ export default () => (
         </LayoutBlankWrapper>
       </Route>
 
-
       <Route exact path={[URL_DISCOVERY_DEVICE.availableDeviceListModal]}>
         <LayoutBlankWrapper>
           <Route
@@ -120,6 +130,12 @@ export default () => (
             <Route path={URL_OVERVIEW.root} component={Overview} exact />
             <Route path={URL_MAIN.contacts} component={Contacts} exact />
             <Route path={URL_MAIN.settings} component={BackupContainer} exact />
+            <Route
+              path={`${URL_MAIN.help}/:categoryId/:articleId`}
+              component={ArticlePage}
+            />
+            <Route path={`${URL_MAIN.help}/:categoryId`} component={HelpPage} />
+            <Route path={URL_MAIN.help} component={HelpPage} />
             <Route
               path={`${URL_MAIN.settings}${URL_TABS.about}`}
               component={AboutContainer}

libs/generic-view/theme/src/lib/color.ts

@@ -14,6 +14,7 @@ export const color = {
   grey4: "#D2D6DB",
   grey5: "#F4F5F6",
   grey6: "#FBFBFB",
+  grey7: "#EDEDED",
   red1: "#E96A6A",
   green: "#DFEFDE",
 } as const

libs/generic-view/ui/src/index.ts

@@ -22,6 +22,8 @@ export * from "./lib/predefined/backup-restore/backup-restore-error"
 export * from "./lib/predefined/import-contacts/import-contacts-error"
 export * from "./lib/predefined/data-migration/components/transfer-error-modal"
 export { DataMigrationPage } from "./lib/predefined/data-migration/data-migration"
+export { HelpPage } from "./lib/predefined/help/help-page"
+export { ArticlePage } from "./lib/predefined/help/article-page"
 
 const apiComponents = {
   ...predefinedComponents,

libs/generic-view/ui/src/lib/predefined/help/article-page.tsx

@@ -0,0 +1,25 @@
+/**
+ * Copyright (c) Mudita sp. z o.o. All rights reserved.
+ * For licensing, see https://github.com/mudita/mudita-center/blob/master/LICENSE.md
+ */
+
+import React from "react"
+import { FunctionComponent } from "Core/core/types/function-component.interface"
+import { GenericThemeProvider } from "generic-view/theme"
+import styled from "styled-components"
+
+const Article: FunctionComponent = () => {
+  return <Wrapper>
+
+  </Wrapper>
+}
+
+export const ArticlePage: FunctionComponent = () => {
+  return (
+    <GenericThemeProvider>
+      <Article />
+    </GenericThemeProvider>
+  )
+}
+
+const Wrapper = styled.div``

libs/generic-view/ui/src/lib/predefined/help/components/articles-list.tsx

@@ -0,0 +1,63 @@
+/**
+ * Copyright (c) Mudita sp. z o.o. All rights reserved.
+ * For licensing, see https://github.com/mudita/mudita-center/blob/master/LICENSE.md
+ */
+
+import React from "react"
+import { FunctionComponent } from "Core/core/types/function-component.interface"
+import { useParams } from "react-router"
+import styled from "styled-components"
+import { NavLink } from "react-router-dom"
+import { URL_MAIN } from "Core/__deprecated__/renderer/constants/urls"
+import helpData from "../help.json"
+
+interface Props {
+  articleIds: string[]
+}
+
+export const ArticlesList: FunctionComponent<Props> = ({ articleIds = [] }) => {
+  const { categoryId } = useParams<{
+    categoryId?: string
+  }>()
+  return (
+    <Wrapper>
+      {articleIds.map((id) => {
+        const article = helpData.articles[id as keyof typeof helpData.articles]
+        if (!article) {
+          return null
+        }
+        return (
+          <Link
+            key={id}
+            to={`${URL_MAIN.help}/${categoryId}/${id}`}
+            title={article.title}
+          >
+            {article.title}
+          </Link>
+        )
+      })}
+    </Wrapper>
+  )
+}
+
+const Wrapper = styled.div`
+  display: flex;
+  flex-direction: column;
+  gap: 0.8rem;
+`
+
+const Link = styled(NavLink)`
+  color: ${({ theme }) => theme.color.grey1};
+  font-size: ${({ theme }) => theme.fontSize.paragraph3};
+  line-height: ${({ theme }) => theme.lineHeight.paragraph3};
+  letter-spacing: 0.05em;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+  overflow: hidden;
+  max-width: 100%;
+
+  &:hover {
+    text-decoration: underline;
+    color: ${({ theme }) => theme.color.black};
+  }
+`

libs/generic-view/ui/src/lib/predefined/help/components/category-tabs.tsx

@@ -0,0 +1,76 @@
+/**
+ * Copyright (c) Mudita sp. z o.o. All rights reserved.
+ * For licensing, see https://github.com/mudita/mudita-center/blob/master/LICENSE.md
+ */
+
+import React from "react"
+import { FunctionComponent } from "Core/core/types/function-component.interface"
+import styled from "styled-components"
+import { NavLink } from "react-router-dom"
+import helpData from "../help.json"
+
+export const CategoryTabs: FunctionComponent = () => {
+  return (
+    <Wrapper>
+      {helpData.categories.map((category) => {
+        return (
+          <Tab key={category.id} to={`/help/${category.id}`}>
+            <span className={"normal"}>{category.name}</span>
+            <span className={"bold"} aria-hidden={true}>
+              {category.name}
+            </span>
+          </Tab>
+        )
+      })}
+    </Wrapper>
+  )
+}
+
+const Wrapper = styled.div`
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  gap: 0.6rem;
+`
+
+const Tab = styled(NavLink)`
+  padding: 0.4rem 1.6rem;
+  border-radius: 2rem;
+  min-width: 7.2rem;
+  text-align: center;
+  font-size: ${({ theme }) => theme.fontSize.paragraph1};
+  color: ${({ theme }) => theme.color.grey1};
+  position: relative;
+
+  span {
+    &.normal {
+      position: absolute;
+      left: 50%;
+      top: 50%;
+      transform: translate(-50%, -50%);
+      visibility: visible;
+      white-space: nowrap;
+    }
+    &.bold {
+      font-weight: ${({ theme }) => theme.fontWeight.bold};
+      visibility: hidden;
+    }
+  }
+
+  &:hover,
+  &.active {
+    background-color: ${({ theme }) => theme.color.grey7};
+    color: ${({ theme }) => theme.color.black};
+  }
+
+  &.active {
+    span {
+      &.normal {
+        visibility: hidden;
+      }
+      &.bold {
+        visibility: visible;
+      }
+    }
+  }
+`

libs/generic-view/ui/src/lib/predefined/help/components/subcategories-list.tsx

@@ -0,0 +1,62 @@
+/**
+ * Copyright (c) Mudita sp. z o.o. All rights reserved.
+ * For licensing, see https://github.com/mudita/mudita-center/blob/master/LICENSE.md
+ */
+
+import React from "react"
+import { FunctionComponent } from "Core/core/types/function-component.interface"
+import { useParams } from "react-router"
+import styled from "styled-components"
+import helpData from "../help.json"
+import { Subcategory } from "./subcategory"
+
+export const SubcategoriesList: FunctionComponent = () => {
+  const { categoryId } = useParams<{
+    categoryId?: string
+  }>()
+  const category = helpData.categories.find(
+    (category) => category.id === categoryId
+  )
+
+  if (!category) {
+    return null
+  }
+
+  const columns = [
+    category.subcategoriesLeftColumn,
+    category.subcategoriesRightColumn,
+  ]
+
+  return (
+    <Wrapper>
+      {columns.map((column, index) => {
+        return (
+          <Column key={index}>
+            {column.map((id) => (
+              <Subcategory key={id} id={id} />
+            ))}
+          </Column>
+        )
+      })}
+    </Wrapper>
+  )
+}
+
+const Column = styled.div`
+  display: flex;
+  flex-direction: column;
+  gap: 3.2rem;
+`
+
+const Wrapper = styled.div`
+  display: flex;
+  flex-direction: row;
+  margin-top: 4.6rem;
+  justify-content: space-between;
+
+  &:has(${Column} + ${Column}) {
+    ${Column} {
+      width: 32rem;
+    }
+  }
+`

libs/generic-view/ui/src/lib/predefined/help/components/subcategory.tsx

@@ -0,0 +1,58 @@
+/**
+ * Copyright (c) Mudita sp. z o.o. All rights reserved.
+ * For licensing, see https://github.com/mudita/mudita-center/blob/master/LICENSE.md
+ */
+
+import React from "react"
+import { FunctionComponent } from "Core/core/types/function-component.interface"
+import styled from "styled-components"
+import { H5 } from "../../../texts/headers"
+import { ArticlesList } from "./articles-list"
+import helpData from "../help.json"
+
+interface Props {
+  id: string
+}
+
+export const Subcategory: FunctionComponent<Props> = ({ id }) => {
+  const subcategory =
+    helpData.subcategories[id as keyof typeof helpData.subcategories]
+  const assets = helpData.assets
+
+  if (!subcategory || !subcategory.articles.length) {
+    return null
+  }
+  const icon =
+    "icon" in subcategory
+      ? assets[subcategory.icon as keyof typeof assets]
+      : undefined
+  return (
+    <Wrapper key={subcategory.id}>
+      <Title>
+        {icon && <Image src={icon} />}
+        {subcategory.name}
+      </Title>
+      <ArticlesList articleIds={subcategory.articles} />
+    </Wrapper>
+  )
+}
+
+const Wrapper = styled.div`
+  display: flex;
+  flex-direction: column;
+  gap: 1.4rem;
+`
+
+const Title = styled(H5)`
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  gap: 0.8rem;
+`
+
+const Image = styled.img`
+  height: 2.2rem;
+  width: 2.2rem;
+  display: block;
+  margin: 0;
+`