Merge pull request #325 from Consensys/dx-team/issues/1519-create-ter…

…ms-of-use-page

Create new terms of use page

src/components/ConsenSysToU.js

@@ -0,0 +1,84 @@
+import PropTypes from 'prop-types'
+import React, { useEffect, useState } from 'react'
+import styled from 'styled-components'
+import consensysData from '../lib/api/consensys/getData'
+import Loading from './Loading'
+
+const ConsenSysToU = ({ pageId }) => {
+  const [loading, setLoading] = useState(true)
+  const [data, setData] = useState('')
+  const [headerData, setHeaderData] = useState({
+    title: '',
+    description: '',
+  })
+
+  useEffect(() => {
+    consensysData
+      .getToU(pageId, {
+        _fields: 'id,title,modules.rich-text,header_component',
+      })
+      .then(response => {
+        try {
+          if (response && response.modules?.length) {
+            const { content } = response.modules[0].children[0].config
+            const { title, description } = response.header_component[0]?.config
+            setData(content)
+            setHeaderData({ title, description })
+            setLoading(false)
+            return
+          }
+          setLoading(false)
+        } catch (error) {
+          setLoading(false)
+        }
+      })
+  }, [])
+
+  return (
+    <Wrapper>
+      {loading ? (
+        <Loading />
+      ) : (
+        <>
+          <h1
+            className="title"
+            dangerouslySetInnerHTML={{ __html: headerData.title || 'Terms of use' }}
+          />
+          <h2
+            className="description"
+            dangerouslySetInnerHTML={{ __html: headerData.description || 'Last Updated: ' }}
+          />
+          <div dangerouslySetInnerHTML={{ __html: data || 'No Data' }} />
+        </>
+      )}
+    </Wrapper>
+  )
+}
+
+export default ConsenSysToU
+
+ConsenSysToU.propTypes = {
+  pageId: PropTypes.string.isRequired,
+}
+
+const Wrapper = styled.div`
+  min-height: calc(100vh - 94px);
+
+  h1.title {
+    text-align: center;
+     & > p {
+      margin-bottom: 0;
+    }
+  }
+
+  h2.description {
+    font-weight: 400;
+    text-align: center;
+    margin-bottom: 32px;
+    font-size: 16px;
+  }
+
+  h4 {
+    margin: 24px 0;
+  }
+`

src/components/Contentful/ContentfulConsenSysToU.js

@@ -0,0 +1,18 @@
+import React from 'react'
+import PropTypes from 'prop-types'
+import ConsenSysToU from '../ConsenSysToU'
+
+const ContentfulConsenSysToU = props => {
+  const {
+    moduleConfig: { pageId },
+  } = props
+  return <ConsenSysToU pageId={pageId} />
+}
+
+export default ContentfulConsenSysToU
+
+ContentfulConsenSysToU.propTypes = {
+  moduleConfig: PropTypes.shape({
+    pageId: PropTypes.string,
+  }),
+}

src/components/Contentful/index.js

@@ -16,6 +16,7 @@ import ContentfulRichText from './ContentfulRichText'
 import ContentfulSeo from './ContentfulSeo'
 import ContentfulPopupAnnouncement from './ContentfulPopupAnnouncement'
 import ContentfulConsenSysResources from './ContentfulConsenSysResources'
+import ContentfulConsenSysToU from './ContentfulConsenSysToU'
 import ContentfulNewsCategory from './ContentfulNewsCategory'
 import ContentfulTimeline from './ContentfulTimeline'
 import ContentfulNewsLayout from './ContentfulNewsLayout'
@@ -44,4 +45,5 @@ export {
   ContentfulTimeline,
   ContentfulNewsLayout,
   ContentfulLayout,
+  ContentfulConsenSysToU,
 }

src/components/Tab/TabContent.js

@@ -27,7 +27,7 @@ const Content = styled.div`
 
   ${({ typeLayout }) =>
     typeLayout === 'module'
-    ? `
+      ? `
     min-height: 200px;
     margin-top: 72px;
   `

src/fragments/ContentfulContent.js

@@ -430,6 +430,9 @@ export const ContentfulLayoutModuleContainerFields = graphql`
       ... on ContentfulTimeline {
         ...ContentfulTimelineFields
       }
+      ... on ContentfulConsenSysToU {
+        ...ContentfulConsenSysToUFields
+      }
     }
     backgroundColor
     displayHeadline
@@ -480,6 +483,17 @@ export const ContentfulConsenSysResourcesFields = graphql`
   }
 `
 
+export const ContentfulConsenSysToUFields = graphql`
+  fragment ContentfulConsenSysToUFields on ContentfulConsenSysToU {
+    contentful_id
+    internal {
+      type
+    }
+    title
+    pageId
+  }
+`
+
 export const ContentfulCardFields = graphql`
   fragment ContentfulCardFields on ContentfulCard {
     contentful_id

src/lib/api/consensys/getData.js

@@ -5,6 +5,10 @@ const consensysData = {
     const url = '/posts'
     return axiosClient.get(url, { params })
   },
+  getToU: (pageId, params) => {
+    const url = `/pages/${pageId}`
+    return axiosClient.get(url, { params })
+  },
 }
 
 export default consensysData