Add success and failure page (#186)

* Add success and failure page

* s

* Update Failure.js

* Update Success.js

Author: Abhishek-kumar09

src/Routes.js

@@ -22,6 +22,8 @@ import PrivacyView from './views/pages/documents/privacyView';
 import RefundView from './views/pages/documents/refundView';
 import ScrollReset from './components/ScrollReset';
 import coursesContent from 'src/data/courses';
+import Success from './views/pages/PaymentStatus/Success'
+import Cancelled from './views/pages/PaymentStatus/Failure'
 
 const renderRoutes = () => (
   <Suspense fallback={<LoadingScreen />}>
@@ -109,6 +111,20 @@ const renderRoutes = () => (
           </MainLayout>
         )}
       />
+      <Route
+        path="/success"
+        exact
+        render={props => (
+          <Success />
+        )}
+      />
+      <Route
+        path="/canceled"
+        exact
+        render={props => (
+          <Cancelled />
+        )}
+      />
       <Route
         path="/editProfile"
         exact

src/views/pages/PaymentStatus/Failure.js

@@ -0,0 +1,33 @@
+import { makeStyles, Typography } from '@material-ui/core';
+import React from 'react';
+import { Redirect } from 'react-router';
+
+const useStyles = makeStyles(() => ({
+  root: {
+    marginTop: '49vh'
+  }
+}));
+
+export default function Success() {
+  const classes = useStyles();
+
+  const [wait, removeWait] = React.useState(true);
+
+  setTimeout(
+    function () {
+      removeWait(false);
+    }, 
+  5000)
+
+  if (wait) {
+    return (
+      <div className={classes.root}>
+        <Typography align="center" style={{color: 'red'}}>Your last payment to codeforcause was Failed. Redirecting to home page...</Typography>
+      </div>
+    );
+  }
+
+  return (
+    <Redirect to="/" />
+  )
+}

src/views/pages/PaymentStatus/Success.js

@@ -0,0 +1,33 @@
+import { makeStyles, Typography } from '@material-ui/core';
+import React from 'react';
+import { Redirect } from 'react-router';
+
+const useStyles = makeStyles(() => ({
+  root: {
+    marginTop: '49vh'
+  }
+}));
+
+export default function Success() {
+  const classes = useStyles();
+
+  const [wait, removeWait] = React.useState(true);
+
+  setTimeout(
+    function () {
+      removeWait(false);
+    }, 
+  5000)
+
+  if (wait) {
+    return (
+      <div className={classes.root}>
+        <Typography align="center">Your last payment to codeforcause was successful. Redirecting to home page...</Typography>
+      </div>
+    );
+  }
+
+  return (
+    <Redirect to="/" />
+  )
+}