From c2ae348beb624824f2d18b56698018ddb2b544a7 Mon Sep 17 00:00:00 2001
From: maxceem <maxceem@gmail.com>
Date: Mon, 14 Sep 2020 13:35:38 +0300
Subject: [PATCH] feat: "Give Application Feedback" link

ref issue #4085
---
 .../FooterNeedHelp/FooterNeedHelp.jsx         | 11 ++++++++++
 .../FooterNeedHelp/FooterNeedHelp.scss        | 15 +++++++++++++
 src/components/UserSidebar/UserSidebar.jsx    |  7 +++++++
 .../detail/containers/ProjectInfoContainer.js | 21 +++++++++++++++++--
 4 files changed, 52 insertions(+), 2 deletions(-)
 create mode 100644 src/components/FooterNeedHelp/FooterNeedHelp.jsx
 create mode 100644 src/components/FooterNeedHelp/FooterNeedHelp.scss

diff --git a/src/components/FooterNeedHelp/FooterNeedHelp.jsx b/src/components/FooterNeedHelp/FooterNeedHelp.jsx
new file mode 100644
index 000000000..2ad2548a6
--- /dev/null
+++ b/src/components/FooterNeedHelp/FooterNeedHelp.jsx
@@ -0,0 +1,11 @@
+import React from 'react'
+import './FooterNeedHelp.scss'
+
+const FooterNeedHelp = () => (
+  <p styleName="need-help">
+    Have an urgent issue?<br />
+    E: <a href="mailto:support@topcoder.com">support@topcoder.com</a>
+  </p>
+)
+
+export default FooterNeedHelp
diff --git a/src/components/FooterNeedHelp/FooterNeedHelp.scss b/src/components/FooterNeedHelp/FooterNeedHelp.scss
new file mode 100644
index 000000000..5f620860e
--- /dev/null
+++ b/src/components/FooterNeedHelp/FooterNeedHelp.scss
@@ -0,0 +1,15 @@
+@import '~tc-ui/src/styles/tc-includes';
+
+.need-help {
+  @include roboto;
+  color: $tc-gray-50;
+  font-size: 12px;
+  line-height: 150%;
+  margin-top: 2 * $base-unit;
+  padding-bottom: 8 * $base-unit;
+  text-align: center;
+
+  a {
+    color: $tc-dark-blue-110;
+  }
+}
diff --git a/src/components/UserSidebar/UserSidebar.jsx b/src/components/UserSidebar/UserSidebar.jsx
index 484d38af2..900272212 100644
--- a/src/components/UserSidebar/UserSidebar.jsx
+++ b/src/components/UserSidebar/UserSidebar.jsx
@@ -15,6 +15,7 @@ import NotificationSettingsIcon from '../../assets/icons/v.2.5/icon-notification
 import AccountSecurityIcon from '../../assets/icons/v.2.5/icon-account-security.svg'
 
 import './UserSidebar.scss'
+import FooterNeedHelp from '../FooterNeedHelp/FooterNeedHelp'
 
 const navLinks = [{
   label: 'ALL PROJECTS',
@@ -62,6 +63,11 @@ const navLinks = [{
   to: '/faqs',
   Icon: FAQIcon,
   iconClassName: 'fill',
+}, {
+  label: 'GIVE APPLICATION FEEDBACK',
+  to: '/',
+  Icon: FAQIcon,
+  iconClassName: 'fill',
 }]
 
 class UserSidebar extends React.Component {
@@ -117,6 +123,7 @@ class UserSidebar extends React.Component {
             SYSTEM
           </div>
           <MenuList navLinks={navLinks} onAccordionToggle={(i, open) => this.setAccordionOpen(i, open)} />
+          <FooterNeedHelp />
         </div>
       </div>
     )
diff --git a/src/projects/detail/containers/ProjectInfoContainer.js b/src/projects/detail/containers/ProjectInfoContainer.js
index 8cdb794ed..3e5a2461d 100644
--- a/src/projects/detail/containers/ProjectInfoContainer.js
+++ b/src/projects/detail/containers/ProjectInfoContainer.js
@@ -41,6 +41,7 @@ import {
 import { saveFeedComment } from '../../actions/projectTopics'
 
 import TailLeft from '../../../assets/icons/arrows-16px-1_tail-left.svg'
+import FAQIcon from '../../../assets/icons/faq.svg'
 
 import './ProjectInfoContainer.scss'
 import MenuList from '../../../components/MenuList/MenuList'
@@ -51,6 +52,7 @@ import {
   filterTopicAndPostChangedNotifications,
   filterFileAndLinkChangedNotifications,
 } from '../../../routes/notifications/helpers/notifications'
+import FooterNeedHelp from '../../../components/FooterNeedHelp/FooterNeedHelp'
 
 const EnhancedProjectStatus = editableProjectStatus(ProjectStatus)
 
@@ -427,13 +429,13 @@ class ProjectInfoContainer extends React.Component {
     const { showDeleteConfirm } = this.state
     const { project, currentMemberRole, isSuperUser, phases, hideInfo, hideMembers,
       productsTimelines, isProjectProcessing, notifications, projectTemplates } = this.props
-    
+
     const projectTemplateId = project.templateId
     const projectTemplateKey = _.get(project, 'details.products[0]')
     const projectTemplate = projectTemplateId
       ? _.find(projectTemplates, pt => pt.id === projectTemplateId)
       : getProjectTemplateByKey(projectTemplates, projectTemplateKey)
-    
+
     const isTaaS = PROJECT_CATEGORY_TAAS === projectTemplate.category
     let directLinks = null
     // check if direct links need to be added
@@ -587,6 +589,21 @@ class ProjectInfoContainer extends React.Component {
           {!hideMembers &&
             <TeamManagementContainer projectId={project.id} members={project.members} />
           }
+          {/* Separator above menulist */}
+          <hr styleName="separator" />
+          <div styleName="menulist-container">
+            <MenuList
+              navLinks={[
+                {
+                  label: 'GIVE APPLICATION FEEDBACK',
+                  to: '/',
+                  Icon: FAQIcon,
+                  iconClassName: 'fill',
+                }
+              ]}
+            />
+          </div>
+          <FooterNeedHelp />
         </div>
       </div>
     )