Merge pull request #4071 from appirio-tech/dev

Connect Release 2.11.0

Author: RishiRajSahu

.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-lock.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",

package.json

@@ -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/api/contentful.js

@@ -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/assets/icons/faq.svg

@@ -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/FAQContainer.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