Contentful based FAQ pages

.circleci/config.yml

@@ -128,15 +128,15 @@ workflows:
             - build-dev
           filters:
             branches:
-              only: ['dev', 'dev-msinteg']
+              only: ['dev']
 
       - deployTest01:
           context : org-global
           requires:
             - build-dev
           filters:
             branches:
-              only: ['feature/bulk-milestone-updates']
+              only: ['feature/faqs']
 
       - deployProd:
           context : org-global

config/constants/dev.js

@@ -49,5 +49,9 @@ module.exports = {
   TC_SYSTEM_USERID: process.env.DEV_TC_SYSTEM_USERID,
   MAINTENANCE_MODE: process.env.DEV_MAINTENANCE_MODE,
 
-  TC_CDN_URL: process.env.TC_CDN_URL
+  TC_CDN_URL: process.env.TC_CDN_URL,
+
+  DASHBOARD_FAQ_CONTENT_ID : process.env.DASHBOARD_FAQ_CONTENT_ID,
+  CONTENTFUL_DELIVERY_KEY : process.env.CONTENTFUL_DELIVERY_KEY,
+  CONTENTFUL_SPACE_ID : process.env.CONTENTFUL_SPACE_ID
 }

config/constants/master.js

@@ -49,5 +49,9 @@ module.exports = {
   TC_SYSTEM_USERID: process.env.PROD_TC_SYSTEM_USERID,
   MAINTENANCE_MODE: process.env.PROD_MAINTENANCE_MODE,
 
-  TC_CDN_URL: process.env.TC_CDN_URL
+  TC_CDN_URL: process.env.TC_CDN_URL,
+
+  DASHBOARD_FAQ_CONTENT_ID : process.env.DASHBOARD_FAQ_CONTENT_ID,
+  CONTENTFUL_DELIVERY_KEY : process.env.CONTENTFUL_DELIVERY_KEY,
+  CONTENTFUL_SPACE_ID : process.env.CONTENTFUL_SPACE_ID
 }

package.json

@@ -83,11 +83,13 @@
     "webpack-merge": "^4.1.1"
   },
   "dependencies": {
+    "@contentful/rich-text-react-renderer": "^13.4.0",
     "appirio-tech-react-components": "git+https://github.com/appirio-tech/react-components.git#feature/connectv2",
     "axios": "^0.19.2",
     "brace": "^0.11.1",
     "classnames": "^2.2.3",
     "coffeescript": "^1.12.7",
+    "contentful": "^7.14.4",
     "draft-js": "0.10.5",
     "draft-js-drag-n-drop-plugin": "^2.0.0-rc2",
     "draft-js-image-plugin": "^2.0.0-rc2",

src/api/contentful.js

@@ -0,0 +1,14 @@
+import { createClient } from 'contentful'
+import { CONTENTFUL_DELIVERY_KEY, CONTENTFUL_SPACE_ID } from '../config/constants'
+
+export function getClient() {
+  return createClient({
+    space: CONTENTFUL_SPACE_ID,
+    accessToken: CONTENTFUL_DELIVERY_KEY,
+  })
+}
+
+export function getEntry(id) {
+  const client = getClient()
+  return client.getEntry(id, { include: 10 })
+}

src/components/FAQ/FAQContainer.jsx

@@ -0,0 +1,54 @@
+import React, { Component } from 'react'
+import FAQItem from './FAQItem'
+import { getEntry } from '../../api/contentful'
+import spinnerWhileLoading from '../../components/LoadingSpinner'
+import './FAQContainer.scss'
+
+
+const FAQList = ({ entry }) => (
+  <div styleName="faq-list-container">
+    { 
+      entry.fields.items.map((item, idx) => {
+        return (
+          <FAQItem key={idx} item={item} />
+        )}
+      )
+    }
+  </div>
+)
+
+const EnhancedFAQContainer = spinnerWhileLoading(props => {
+  return !props.isLoading
+})(FAQList)
+
+class FAQContainer extends Component {
+  constructor(props) {
+    super(props)
+    this.state = {
+      faqs: null,
+      isLoading: true
+    }
+  }
+
+  componentWillMount() {
+    getEntry(this.props.contentKey).then((entry) => {
+      this.setState({ faqs: entry, isLoading: false })
+    })
+  }
+
+  render() {
+    const { pageTitle } = this.props
+    const { faqs, isLoading } = this.state
+
+    return (
+      <div styleName="main">
+        <h1 styleName="title">{pageTitle}</h1>
+        <div styleName="content">
+          <EnhancedFAQContainer entry={faqs} isLoading={isLoading} />
+        </div>
+      </div>
+    )
+  }
+}
+
+export default FAQContainer

src/components/FAQ/FAQContainer.scss

@@ -0,0 +1,52 @@
+@import '~tc-ui/src/styles/tc-includes';
+@import "../../styles/includes";
+
+
+.faq-list-container {
+
+}
+
+.accordion {
+  & + & {
+    margin-top: 2 * $base-unit;
+  }
+}
+
+.main {
+  background-color: $tc-white;
+  border-radius: 6px;
+  max-width: 960px;
+  padding: 35px 35px 20px 35px;
+  flex-grow: 1;
+  margin: auto;
+  margin-top: 20px;
+  margin-bottom: 260px; // gives space to show country selection list
+
+  @media screen and (max-width: $screen-md - 1px) {
+    padding: 0;
+    margin: 0;
+    max-width: none;
+    margin-bottom: 260px; // gives space to show country selection list in mobile view
+  }
+}
+
+.title {
+  font-weight: 400;
+  @include roboto-condensed;
+  color: $tc-black;
+  font-size: 20px;
+  line-height: 30px;
+  text-align: left;
+  text-transform: uppercase;
+
+  @media screen and (max-width: $screen-md - 1px) {
+    display: none;
+  }
+}
+
+.content {
+  margin-top: 25px;
+  @media screen and (max-width: $screen-md - 1px) {
+    margin-top: 0;
+  }
+}

src/components/FAQ/FAQItem.jsx

@@ -0,0 +1,42 @@
+import React, { Component } from 'react'
+import cn from 'classnames'
+import { documentToReactComponents } from '@contentful/rich-text-react-renderer'
+import IconX from ' ../../assets/icons/ui-x-mark.svg'
+import IconCarretDown from '../../assets/icons/arrow-6px-carret-down-normal.svg'
+import './FAQItem.scss'
+
+
+class FAQItem extends Component  {
+  constructor(props) {
+    super(props)
+    this.state = { isOpen : false }
+
+    this.toggle = this.toggle.bind(this)
+  }
+
+  toggle(evt) {
+    evt.preventDefault()
+
+    this.setState({
+      isOpen: !this.state.isOpen
+    })
+  }
+
+  render() {
+    const {item} = this.props
+    const {isOpen} = this.state
+    return (
+      <div styleName={cn('accordion', { 'is-open': isOpen })}>
+        <div styleName="header" onClick={this.toggle}>
+          <div styleName="title">{item.fields.question}</div>
+          <div styleName="toggle">
+            {isOpen ? <IconX styleName="toggle-icon" /> : <IconCarretDown styleName="toggle-icon" />}
+          </div>
+        </div>
+        <div styleName="content">{documentToReactComponents(item.fields.answer)}</div>
+      </div>
+    )
+  }
+}
+
+export default FAQItem

src/components/FAQ/FAQItem.scss

@@ -0,0 +1,69 @@
+@import '~tc-ui/src/styles/tc-includes';
+
+.accordion {
+  border: 1px solid $tc-gray-neutral-dark;
+  border-radius: 3px;
+  padding-left: 5 * $base-unit;
+
+  & + & {
+    margin-top: 2 * $base-unit;
+  }
+}
+
+
+.accordion .header {
+  align-items: center;
+  cursor: pointer;
+  display: flex;
+  justify-content: space-between;
+  height: 8 * $base-unit;
+  padding: 0;
+  text-align: left;
+  width: 100%;
+}
+
+.accordion .title {
+  @include roboto-bold;
+  font-size: $tc-label-md;
+  overflow: hidden;
+  line-height: 3 * $base-unit;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.accordion .value {
+  @include roboto;
+  color: $tc-gray-80;
+  flex: 1 0 auto;
+  font-size: $tc-label-lg;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  width: 0;
+}
+
+.accordion .toggle {
+  align-items: center;
+  display: flex;
+  justify-content: center;
+  height: 36px;
+  width: 36px;
+}
+
+.accordion  .toggle-icon {
+  height: auto;
+  width: 10px;
+}
+
+.accordion .content {
+  display: none;
+  color: $tc-gray-70;
+  @include roboto;
+  font-size: $tc-label-md;
+  line-height: 20px;
+  text-align: left;
+  margin-bottom: 2 * $base-unit;
+}
+
+.accordion.is-open .content {
+  display: block;
+}

src/components/UserSidebar/UserSidebar.jsx

@@ -7,6 +7,7 @@ import { withRouter } from 'react-router-dom'
 import UserSummary from '../UserSummary/UserSummary'
 import MenuList from '../MenuList/MenuList'
 import NotificationsIcon from '../../assets/icons/ui-bell.svg'
+import FAQIcon from '../../assets/icons/faq.svg'
 import AllProjectsIcon from '../../assets/icons/v.2.5/icon-all-projects.svg'
 import MyProfileIcon from '../../assets/icons/v.2.5/icon-my-profile.svg'
 import ReportsIcon from '../../assets/icons/v.2.5/icon-reports.svg'
@@ -56,6 +57,11 @@ const navLinks = [{
   to: '/notifications',
   Icon: NotificationsIcon,
   iconClassName: 'fill',
+}, {
+  label: 'HOW TOPCODER WORKS',
+  to: '/faqs',
+  Icon: FAQIcon,
+  iconClassName: 'fill',
 }]
 
 class UserSidebar extends React.Component {

src/config/constants.js

@@ -985,3 +985,11 @@ export const PROJECT_REPORTS = {
  * Report session length in seconds
  */
 export const REPORT_SESSION_LENGTH = 25 * 60 // 25 minutes (5 minutes less than the report session)
+
+
+/**
+ * Contentful Content Ids
+ */
+export const DASHBOARD_FAQ_CONTENT_ID = process.env.DASHBOARD_FAQ_CONTENT_ID
+export const CONTENTFUL_DELIVERY_KEY = process.env.CONTENTFUL_DELIVERY_KEY
+export const CONTENTFUL_SPACE_ID = process.env.CONTENTFUL_SPACE_ID

src/helpers/projectHelper.js

@@ -18,6 +18,7 @@ import DashboardIcon from '../assets/icons/v.2.5/icon-dashboard.svg'
 import MessagesIcon from '../assets/icons/v.2.5/icon-messages.svg'
 import ReportsIcon from '../assets/icons/v.2.5/icon-reports.svg'
 import AssetsLibraryIcon from '../assets/icons/v.2.5/icon-assets-library.svg'
+import FAQIcon from '../assets/icons/faq.svg'
 import InvisibleIcon from '../assets/icons/invisible.svg'
 
 import { formatNumberWithCommas } from './format'
@@ -282,6 +283,7 @@ export function getProjectNavLinks(project, projectId) {
     // Commented out till it needs to go live.
     { label: 'Reports', to: `/projects/${projectId}/reports`, Icon: ReportsIcon, iconClassName: 'stroke' },
     { label: 'Assets Library', to: `/projects/${projectId}/assets`, Icon: AssetsLibraryIcon, iconClassName: 'stroke' },
+    { label: 'FAQ', to: `/projects/${projectId}/faqs`, Icon: FAQIcon, iconClassName: 'fill' },
   ] : [
     { label: 'Dashboard', to: `/projects/${projectId}`, Icon: DashboardIcon, iconClassName: 'stroke' },
     messagesTab,