Add spinner to Subscriptions component

AgileVentures · Feb 12, 2019 · 119831a · 119831a
1 parent ca0892c
commit 119831a
Show file tree

Hide file tree

Showing 7 changed files with 114 additions and 37 deletions.
diff --git a/package.json b/package.json
@@ -33,6 +33,7 @@
     "react": "16.8.0",
     "react-cookie": "^3.0.8",
     "react-dom": "16.8.0",
+    "react-loading-overlay": "^1.0.1",
     "react-redux": "^6.0.0",
     "react-router-dom": "^4.3.1",
     "react-select": "^2.3.0",

diff --git a/src/components/PayPalAgreementNew.js b/src/components/PayPalAgreementNew.js
@@ -1,10 +1,10 @@
 import React from 'react'
 import { Segment, Header } from 'semantic-ui-react'
 
-export default ({ cookies, createBillingAgreement }) => (
+export default ({ cookies, createBillingAgreement, setLoading }) => (
   <Segment padded='very' className='paypal-section' raised>
     <Header as='h5'>Get Premium via Paypal:</Header>
-    <form onSubmit={createBillingAgreement(cookies)}>
+    <form onClick={setLoading} onSubmit={createBillingAgreement(cookies)}>
       <input
         type='image'
         name='submit'

diff --git a/src/components/Subscriptions.js b/src/components/Subscriptions.js
@@ -1,18 +1,21 @@
-import React, { Fragment, useEffect } from 'react'
+import React, { Fragment, useEffect, useState } from 'react'
 import { connect } from 'react-redux'
 import { setLastLocation } from '../actions/setLastLocationAction'
 import { Header, Container, Segment, Grid } from 'semantic-ui-react'
 import PayPalAgreementNew from './PayPalAgreementNew'
 import createBillingAgreement from '../helpers/createBillingAgreement'
 import queryString from 'query-string'
+import LoadingOverlay from 'react-loading-overlay'
+import { RingLoader } from 'react-spinners'
 import '../assets/Subscriptions.css'
 
 export const Subscriptions = props => {
+  const [loading, setLoading] = useState(false)
   useEffect(() => {
     const path = props.location.pathname
     const search = props.location.search
     props.setLastLocation(path, search)
-    if (!props.loggedInUser.data || !props.cookies.get('_WebsiteOne_session')) {
+    if (!props.loggedInUser || !props.cookies.get('_WebsiteOne_session')) {
       props.history.push({ pathname: '/login' })
     }
   })
@@ -21,30 +24,44 @@ export const Subscriptions = props => {
   return (
     <Fragment>
       <Container>
-        <Header as='h1'>
-          AgileVentures {plan.charAt(0).toUpperCase() + plan.slice(1)}{' '}
-          Membership
-        </Header>
-        <Header as='h5'>
-          The price for {plan.charAt(0).toUpperCase() + plan.slice(1)}{' '}
-          Membership is £10.00/Month
-        </Header>
-        <Header as='h5'>7 day free trial! No charge for 7 days</Header>
-        <Grid columns={2} divided className='payment-section'>
-          <Grid.Row>
-            <Grid.Column>
-              <PayPalAgreementNew
-                cookies={props.cookies}
-                createBillingAgreement={createBillingAgreement}
-              />
-            </Grid.Column>
-            <Grid.Column>
-              <Segment>
-                <Header as='h5'>Get Premium Mob via Credit/Debit Card:</Header>
-              </Segment>
-            </Grid.Column>
-          </Grid.Row>
-        </Grid>
+        <LoadingOverlay
+          active={loading}
+          styles={{
+            overlay: (base) => ({
+              ...base,
+              background: 'rbg(255, 255, 255, 0.3)'
+            })
+          }}
+          text={<RingLoader sizeUnit={'px'} size={200} color={'#ee7335'} />}
+        >
+          <Header as='h1'>
+            AgileVentures {plan.charAt(0).toUpperCase() + plan.slice(1)}{' '}
+            Membership
+          </Header>
+          <Header as='h5'>
+            The price for {plan.charAt(0).toUpperCase() + plan.slice(1)}{' '}
+            Membership is £10.00/Month
+          </Header>
+          <Header as='h5'>7 day free trial! No charge for 7 days</Header>
+          <Grid columns={2} divided className='payment-section'>
+            <Grid.Row>
+              <Grid.Column>
+                <PayPalAgreementNew
+                  cookies={props.cookies}
+                  createBillingAgreement={createBillingAgreement}
+                  setLoading={setLoading}
+                />
+              </Grid.Column>
+              <Grid.Column>
+                <Segment>
+                  <Header as='h5'>
+                    Get Premium Mob via Credit/Debit Card:
+                  </Header>
+                </Segment>
+              </Grid.Column>
+            </Grid.Row>
+          </Grid>
+        </LoadingOverlay>
       </Container>
     </Fragment>
   )

diff --git a/src/tests/actions/postLogInInfoAction.test.js b/src/tests/actions/postLogInInfoAction.test.js
@@ -35,4 +35,4 @@ describe('postLogInInfo action', () => {
         expect(store.getActions()[0].payload.data).toEqual(expectedActions.payload)
       })
   })
-})
+})
diff --git a/src/tests/components/Subscriptions.test.js b/src/tests/components/Subscriptions.test.js
@@ -3,7 +3,6 @@ import { mount } from 'enzyme'
 import { Subscriptions } from '../../components/Subscriptions'
 
 describe('Subscriptions', () => {
-  let wrapper
   const props = {
     cookies: { get: () => {} },
     setLastLocation: jest.fn(),
@@ -13,11 +12,7 @@ describe('Subscriptions', () => {
   }
 
   beforeEach(() => {
-    wrapper = mount(<Subscriptions {...props} />)
-  })
-
-  it('should render PayPalAgreementNew', () => {
-    expect(wrapper.find('PayPalAgreementNew')).toBeTruthy()
+    mount(<Subscriptions {...props} />)
   })
 
   it('should call setLastLocation', () => {

diff --git a/src/tests/helpers/createBillingAgreement.test.js b/src/tests/helpers/createBillingAgreement.test.js
@@ -38,6 +38,6 @@ describe('createBillingAgreement helper', () => {
     createBillingAgreement(cookies)(event).then(
       window.location.assign(billingAgreementResponse.data.redirect_url)
     )
-    expect(window.location.assign).toHaveBeenCalled()
+    expect(window.location.assign).toHaveBeenCalledWith(billingAgreementResponse.data.redirect_url)
   })
 })
diff --git a/yarn.lock b/yarn.lock
@@ -753,6 +753,16 @@
     "@emotion/utils" "0.11.1"
     "@emotion/weak-memoize" "0.2.2"
 
+"@emotion/cache@^10.0.7":
+  version "10.0.7"
+  resolved "https://registry.yarnpkg.com/@emotion/cache/-/cache-10.0.7.tgz#6221de2e939f62022c04b4df2c165ce577809f23"
+  integrity sha512-wscXuawG+nQhSNbDpJdAqvv5d2g1O+fpwf/wD/CAmW/wsuN8hNzahWh2ldSVakqO9sINewyQNFl74IeDeTkRZg==
+  dependencies:
+    "@emotion/sheet" "0.9.2"
+    "@emotion/stylis" "0.8.3"
+    "@emotion/utils" "0.11.1"
+    "@emotion/weak-memoize" "0.2.2"
+
 "@emotion/core@^10.0.4":
   version "10.0.6"
   resolved "https://registry.yarnpkg.com/@emotion/core/-/core-10.0.6.tgz#c10d7884a525728f05589b31da1c804a5d7449fa"
@@ -804,6 +814,17 @@
     "@emotion/utils" "0.11.1"
     csstype "^2.5.7"
 
+"@emotion/serialize@^0.11.4":
+  version "0.11.4"
+  resolved "https://registry.yarnpkg.com/@emotion/serialize/-/serialize-0.11.4.tgz#691e615184a23cd3b9ae9b1eaa79eb8798e52379"
+  integrity sha512-JKmn+Qnc8f6OZKSHmNq1RpO27raIi6Kj0uqBaSOUVMW6NI0M3wLpV4pK5hZO4I+1WuCC39hOBPgQ/GcgoHbDeg==
+  dependencies:
+    "@emotion/hash" "0.7.1"
+    "@emotion/memoize" "0.7.1"
+    "@emotion/unitless" "0.7.3"
+    "@emotion/utils" "0.11.1"
+    csstype "^2.5.7"
+
 "@emotion/serialize@^0.9.1":
   version "0.9.1"
   resolved "https://registry.yarnpkg.com/@emotion/serialize/-/serialize-0.9.1.tgz#a494982a6920730dba6303eb018220a2b629c145"
@@ -1789,6 +1810,22 @@ babel-plugin-emotion@^10.0.6:
     find-root "^1.1.0"
     source-map "^0.5.7"
 
+babel-plugin-emotion@^10.0.7:
+  version "10.0.7"
+  resolved "https://registry.yarnpkg.com/babel-plugin-emotion/-/babel-plugin-emotion-10.0.7.tgz#3634ada6dee762140f27db07387feaec8d2cb619"
+  integrity sha512-5PdLJYme3tFN97M3tBbEUS/rJVkS9EMbo7rs7/7BAUEUVMWehm1kb5DEbp16Rs+UsI3rTXRan1iqpL022T8XxA==
+  dependencies:
+    "@babel/helper-module-imports" "^7.0.0"
+    "@emotion/hash" "0.7.1"
+    "@emotion/memoize" "0.7.1"
+    "@emotion/serialize" "^0.11.4"
+    babel-plugin-macros "^2.0.0"
+    babel-plugin-syntax-jsx "^6.18.0"
+    convert-source-map "^1.5.0"
+    escape-string-regexp "^1.0.5"
+    find-root "^1.1.0"
+    source-map "^0.5.7"
+
 babel-plugin-emotion@^9.2.11:
   version "9.2.11"
   resolved "https://registry.yarnpkg.com/babel-plugin-emotion/-/babel-plugin-emotion-9.2.11.tgz#319c005a9ee1d15bb447f59fe504c35fd5807728"
@@ -3344,6 +3381,16 @@ create-ecdh@^4.0.0:
     bn.js "^4.1.0"
     elliptic "^6.0.0"
 
+create-emotion@^10.0.7:
+  version "10.0.7"
+  resolved "https://registry.yarnpkg.com/create-emotion/-/create-emotion-10.0.7.tgz#608d69c550e2f57827383762d416a9ddf75d8bed"
+  integrity sha512-2T6vvvh7XN/MvI3far2SXeQ5s7wti/dae6jKuHxkK4IA1IKdYocKTujZ+r56azZ8fguq3Qj4ua1AJ2vHCq7VTg==
+  dependencies:
+    "@emotion/cache" "^10.0.7"
+    "@emotion/serialize" "^0.11.4"
+    "@emotion/sheet" "0.9.2"
+    "@emotion/utils" "0.11.1"
+
 create-emotion@^9.2.12:
   version "9.2.12"
   resolved "https://registry.yarnpkg.com/create-emotion/-/create-emotion-9.2.12.tgz#0fc8e7f92c4f8bb924b0fef6781f66b1d07cb26f"
@@ -4124,6 +4171,14 @@ emojis-list@^2.0.0:
   resolved "https://registry.yarnpkg.com/emojis-list/-/emojis-list-2.1.0.tgz#4daa4d9db00f9819880c79fa457ae5b09a1fd389"
   integrity sha1-TapNnbAPmBmIDHn6RXrlsJof04k=
 
+emotion@^10.0.1:
+  version "10.0.7"
+  resolved "https://registry.yarnpkg.com/emotion/-/emotion-10.0.7.tgz#74ea432c7004c2bd5452d017d52e307a7a31a835"
+  integrity sha512-k1gGBoel9rlHvHIUVHyk4iJPsRaDsrpr7vKivOmdJAH2Va+smxIYvsjjzXnxTeqJt5IwcVBareuoAJMxeShG/w==
+  dependencies:
+    babel-plugin-emotion "^10.0.7"
+    create-emotion "^10.0.7"
+
 emotion@^9.1.2:
   version "9.2.12"
   resolved "https://registry.yarnpkg.com/emotion/-/emotion-9.2.12.tgz#53925aaa005614e65c6e43db8243c843574d1ea9"
@@ -8906,6 +8961,15 @@ react-lifecycles-compat@^3.0.2, react-lifecycles-compat@^3.0.4:
   resolved "https://registry.yarnpkg.com/react-lifecycles-compat/-/react-lifecycles-compat-3.0.4.tgz#4f1a273afdfc8f3488a8c516bfda78f872352362"
   integrity sha512-fBASbA6LnOU9dOU2eW7aQ8xmYBSXUIWr+UmF9b1efZBazGNO+rcXT/icdKnYm2pTwcRylVUYwW7H1PHfLekVzA==
 
+react-loading-overlay@^1.0.1:
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/react-loading-overlay/-/react-loading-overlay-1.0.1.tgz#ee3b1ad56c45bb2f1ba46d4820ba0d06cd319a91"
+  integrity sha512-aUjtZ8tNXBSx+MbD2SQs0boPbeTAGTh+I5U9nWjDzMasKlYr58RJpr57c8W7uApeLpOkAGbInExRi6GamNC2bA==
+  dependencies:
+    emotion "^10.0.1"
+    prop-types "^15.6.2"
+    react-transition-group "^2.5.0"
+
 react-redux@^6.0.0:
   version "6.0.0"
   resolved "https://registry.yarnpkg.com/react-redux/-/react-redux-6.0.0.tgz#09e86eeed5febb98e9442458ad2970c8f1a173ef"
@@ -8975,7 +9039,7 @@ react-test-renderer@^16.0.0-0:
     react-is "^16.7.0"
     scheduler "^0.12.0"
 
-react-transition-group@^2.2.1:
+react-transition-group@^2.2.1, react-transition-group@^2.5.0:
   version "2.5.3"
   resolved "https://registry.yarnpkg.com/react-transition-group/-/react-transition-group-2.5.3.tgz#26de363cab19e5c88ae5dbae105c706cf953bb92"
   integrity sha512-2DGFck6h99kLNr8pOFk+z4Soq3iISydwOFeeEVPjTN6+Y01CmvbWmnN02VuTWyFdnRtIDPe+wy2q6Ui8snBPZg==