Connect Release 2.11.0

.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,50 @@
+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 { CONTENTFUL_NODE_TYPES } from '../../config/constants'
+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
+
+    const FormattedHyperLink = ({ value, url }) => <a href={url} target="_blank" className="hyperlink-style">{value}</a>
+    const options = {
+      renderNode: {/* eslint-disable no-unused-vars*/
+        [CONTENTFUL_NODE_TYPES.HYPERLINK]: (node, children) => <FormattedHyperLink value={node.content[0].value} url={node.data.uri}/>
+      }
+    }
+    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, options)}</div>
+      </div>
+    )
+  }
+}
+
+export default FAQItem

src/components/FAQ/FAQItem.scss

@@ -0,0 +1,77 @@
+@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;
+
+  a {
+    cursor: pointer;
+    color: $tc-dark-blue;
+    &:hover {
+      text-decoration: underline;
+    }
+  }
+}
+
+.accordion.is-open .content {
+  display: block;
+}

src/components/Footer/Footer.jsx

@@ -1,21 +1,21 @@
 import React from 'react'
-import MenuBar from 'appirio-tech-react-components/components/MenuBar/MenuBar'
+//import MenuBar from 'appirio-tech-react-components/components/MenuBar/MenuBar'
 import moment from 'moment'
 import MediaQuery from 'react-responsive'
-import FooterV2 from '../FooterV2/FooterV2'
+//import FooterV2 from '../FooterV2/FooterV2'
 import { NEW_PROJECT_PATH, SCREEN_BREAKPOINT_MD } from '../../config/constants'
 
 require('./Footer.scss')
 
 const Footer = () => {
   const currentYear = moment().format('YYYY')
-  const otherNavigationItems = [
-    {img: '', text: 'About', link: 'https://www.topcoder.com/company/', target: '_blank'},
+  /*const otherNavigationItems = [
+    {img: '', text: 'Aboutss', link: 'https://www.topcoder.com/company/', target: '_blank'},
     {img: '', text: 'Contact us', link: 'https://www.topcoder.com/contact-us/', target: '_blank'},
     {img: '', text: 'Privacy', link: 'https://www.topcoder.com/privacy-policy/', target: '_blank'},
     {img: '', text: 'Terms', link: 'https://connect.topcoder.com/terms', target: '_blank'},
     {img: '', text: 'Our Process', link: 'https://www.topcoder.com/solutions/how-it-works/', target: '_blank'}
-  ]
+  ]*/
   const isProjectDetails = /projects\/\d+/.test(window.location.pathname)
   const isCreateProject = window.location.pathname.startsWith(NEW_PROJECT_PATH)
   const isNotificationsPage = window.location.pathname.startsWith('/notifications')
@@ -33,14 +33,14 @@ const Footer = () => {
           return (shouldHideOnDesktop ? null :
             <div className="Footer">
               <p className="copyright-notice">© Topcoder { currentYear }</p>
-              <div className="footer-menu">
+              {/*<div className="footer-menu">
                 <MenuBar items={otherNavigationItems} orientation="horizontal" mobileBreakPoint={SCREEN_BREAKPOINT_MD - 1} />
-              </div>
+          </div>*/}
             </div>
           )
         } else {
           return (shouldHideOnMobile ? null :
-            <FooterV2 />
+            {/*<FooterV2 />*/}
           )
         }
       }}