From a80894b90bf58ce4b1799333ed63009a9607a9cc Mon Sep 17 00:00:00 2001
From: Max Kovalenko <mxsshere@gmail.com>
Date: Thu, 26 Dec 2019 17:50:57 -0500
Subject: [PATCH] help section

---
 src/Routes.tsx                  |  8 ++++--
 src/layouts/app/AppLayout.tsx   |  1 +
 src/layouts/help/HelpLayout.tsx | 51 +++++++++++++++++++++++++++++++++
 3 files changed, 58 insertions(+), 2 deletions(-)
 create mode 100644 src/layouts/help/HelpLayout.tsx

diff --git a/src/Routes.tsx b/src/Routes.tsx
index 3e76bf7..d357a20 100644
--- a/src/Routes.tsx
+++ b/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>
diff --git a/src/layouts/app/AppLayout.tsx b/src/layouts/app/AppLayout.tsx
index 49f72f1..e8c8534 100644
--- a/src/layouts/app/AppLayout.tsx
+++ b/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>
diff --git a/src/layouts/help/HelpLayout.tsx b/src/layouts/help/HelpLayout.tsx
new file mode 100644
index 0000000..07113f5
--- /dev/null
+++ b/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;