Set up Premium offering page

.gitignore

@@ -6,3 +6,4 @@ package-lock.json
 cypress/videos
 cypress/screenshots
 .env
+.vscode/

src/components/App.js

@@ -12,6 +12,7 @@ import Subscriptions from './Subscriptions'
 import PayPalSuccess from './PayPalSuccess'
 import MembershipPlansPage from '../containers/MembershipPlansPage'
 import PremiumMobMembershipPage from '../containers/PremiumMobMembershipPage'
+import PremiumMembershipPage from '../containers/PremiumMembershipPage'
 import { withCookies } from 'react-cookie'
 
 class App extends Component {
@@ -63,6 +64,7 @@ class App extends Component {
           />
           <Route path='/membership-plans' component={MembershipPlansPage} />
           <Route path='/premiummob' component={PremiumMobMembershipPage} />
+          <Route path='/premium' component={PremiumMembershipPage} />
         </Switch>
       </Fragment>
     )

src/containers/PremiumMembershipPage.js

@@ -0,0 +1,34 @@
+import React, { Component } from 'react'
+import { RingLoader } from 'react-spinners'
+import { Container } from 'semantic-ui-react'
+import axios from 'axios'
+import ReactHtmlParser from 'react-html-parser'
+
+export default class PremiumMembershipPage extends Component {
+  state = { premiumMembershipPage: null }
+  componentDidMount () {
+    axios.get('api/v1/static-pages/premium')
+      .then(response => {
+        this.setState({ premiumMembershipPage: response.data })
+      })
+  }
+
+  render () {
+    let { premiumMembershipPage } = this.state
+    if (premiumMembershipPage) {
+      return (
+        <Container>
+          <div>
+            { ReactHtmlParser(premiumMembershipPage) }
+          </div>
+        </Container>
+      )
+    } else {
+      return (
+        <Container>
+          <RingLoader sizeUnit={'px'} size={200} color={'#34495E'} />
+        </Container>
+      )
+    }
+  }
+}

src/tests/containers/PremiumMembershipPage.test.js

@@ -0,0 +1,34 @@
+import React from 'react'
+import { mount } from 'enzyme'
+import PremiumMembershipPage from '../../containers/PremiumMembershipPage'
+import moxios from 'moxios'
+
+describe('PremiumMembershipPage', () => {
+  let wrapper
+  beforeEach(() => {
+    moxios.install()
+    wrapper = mount(<PremiumMembershipPage />)
+  })
+
+  afterEach(() => {
+    moxios.uninstall()
+  })
+
+  it('fetches the premium static page after component mounts', done => {
+    expect.assertions(1)
+    moxios.wait(() => {
+      let request = moxios.requests.mostRecent()
+      request.respondWith({
+        status: 200,
+        response: '<h1 id="premium-membership">Premium Membership</h1>'
+      }).then(() => {
+        expect(wrapper.html()).toContain('<h1 id="premium-membership">Premium Membership</h1>')
+        done()
+      })
+    })
+  })
+
+  it('displays a spinner while fetching the static membership plans page', () => {
+    expect(wrapper.find('Loader').props().loading).toBe(true)
+  })
+})