help section

src/Routes.tsx

@@ -20,6 +20,7 @@ import ProjectPricingLayout from "./layouts/entity/project/pricing/ProjectPricin
 import RegisterLayout from "./layouts/auth/register/RegisterLayout";
 import ConfirmEmailLayout from "./layouts/auth/confirmEmail/ConfirmEmailLayout";
 import NotFoundLayout from "./layouts/404/NotFoundLayout";
+import HelpLayout from "./layouts/help/HelpLayout";
 
 class Routes extends React.Component {
     render() {
@@ -33,6 +34,10 @@ class Routes extends React.Component {
                     <Route path="/register" exact component={RegisterLayout}/>
                     <Route path="/register/confirm-email" exact component={ConfirmEmailLayout}/>
 
+                    <Route path="/help" exact component={HelpLayout}/>
+
+                    {/* Home */}
+
                     <Route path="/home" exact component={HomeMainLayout}/>
                     <Route path="/home/integrations" exact component={HomeIntegrationsLayout}/>
 
@@ -61,8 +66,7 @@ class Routes extends React.Component {
                     <Route path="/:owner/:alias/pricing" exact component={ProjectPricingLayout}/>
 
                     <Route path="/:owner/:alias/board/:boardGuid" exact component={BoardPage}/>
-                </Switch>
-                <Switch>
+
                     <Route component={NotFoundLayout}/>
                 </Switch>
             </div>

src/layouts/app/AppLayout.tsx

@@ -35,6 +35,7 @@ class AppLayout extends React.Component {
                         >
                             <Menu.Item key="1"><Link to={"/"}><Icon type={"share-alt"}/>Explore</Link></Menu.Item>
                             {loginOrHomeLink}
+                            <Menu.Item key="help"><Link to={"/help"}><Icon type={"question-circle"}/>Help</Link></Menu.Item>
                             {
                                 window.App.isAuthorized() ?
                                     <Menu.Item key="4"><Link onClick={this.logout} to={"/login"}>Logout</Link></Menu.Item>

src/layouts/help/HelpLayout.tsx

@@ -0,0 +1,51 @@
+import React from "react";
+import {Card, Col, Row, Collapse, Icon} from "antd";
+import styles from "../auth/login/styles.module.css";
+import FullContainerPage from "../../components/layout/simple/fullpage/FullContainerPage";
+
+const { Panel } = Collapse;
+
+interface IProps {
+}
+
+interface IState {
+}
+
+class HelpLayout extends React.Component<IProps, IState> {
+    getContents() {
+        return [
+            {
+                question: "How long it takes for a transaction to be approved?",
+                content: <div>
+                    For security purposes all current transactions (invoices) are processed manually thus it can take up to 24 hours to confirm your transaction.
+                    If it takes longer than that - please send us an email.
+                </div>
+            },
+            {
+                question: "As a developer - how can I set up my products that I will sell?",
+                content: <div>You need to go to project settings - pricing and set up possible plans there.</div>
+            }
+        ];
+    }
+
+    render() {
+        return <FullContainerPage>
+            <Row type={"flex"} justify={"center"}>
+                <Col xxl={16} xl={16} md={20} xs={24} className={styles.verticalCenter}>
+                    <Card>
+                        <h3 className={"ant-typography"}>Help section <Icon type={"question-circle"}/></h3>
+                        <Collapse>
+                            {this.getContents().map((question, i: number) => {
+                            return <Panel header={question.question} key={i}>
+                                <p>{question.content}</p>
+                            </Panel>;
+                            })}
+                        </Collapse>
+                    </Card>
+                </Col>
+            </Row>
+        </FullContainerPage>;
+    }
+}
+
+export default HelpLayout;