Modify success and failure page (#187)

Author: Abhishek-kumar09

src/views/pages/PaymentStatus/Failure.js

@@ -1,33 +1,37 @@
-import { makeStyles, Typography } from '@material-ui/core';
+import { makeStyles, Typography, Link } from '@material-ui/core';
 import React from 'react';
-import { Redirect } from 'react-router';
+import CustomButton from '../../../components/Button/ButtonComponent'
 
-const useStyles = makeStyles(() => ({
-  root: {
-    marginTop: '49vh'
+const useStyles = makeStyles((theme) => ({
+  root: {    
+    marginTop: '35vh',
+    textAlign: 'center',
+    color: theme.palette.text
+  },
+  button: {
+    marginTop: '40px'
   }
 }));
 
 export default function Success() {
   const classes = useStyles();
 
-  const [wait, removeWait] = React.useState(true);
-
-  setTimeout(
-    function () {
-      removeWait(false);
-    }, 
-  5000)
-
-  if (wait) {
+  if (true) {
     return (
       <div className={classes.root}>
-        <Typography align="center" style={{color: 'red'}}>Your last payment to codeforcause was Failed. Redirecting to home page...</Typography>
+        <Typography align="center">Your last payment to codeforcause was Failed. You can retry the payment on the course website.</Typography>
+        <Typography align="center">Connect with us at {` `}
+          <Link
+            href="mailto:team@codeforcause.org"
+          >team@codeforcause.org</Link>
+          {` `}or{` `}
+          <Link
+            href="tel:+919810468685"
+          >+91 98104 68685</Link>
+
+          {` `} in case of any help.</Typography>
+        <CustomButton className={classes.button} title="Go Back To Homepage" href="/" />
       </div>
     );
   }
-
-  return (
-    <Redirect to="/" />
-  )
 }

src/views/pages/PaymentStatus/Success.js

@@ -1,35 +1,37 @@
-import { makeStyles, Typography } from '@material-ui/core';
+import { makeStyles, Typography, Link } from '@material-ui/core';
 import React from 'react';
-import { Redirect } from 'react-router';
+import CustomButton from '../../../components/Button/ButtonComponent'
 
-const useStyles = makeStyles(() => ({
-  root: {
-    marginTop: '49vh'
+const useStyles = makeStyles((theme) => ({
+  root: {    
+    marginTop: '35vh',
+    textAlign: 'center',
+    color: theme.palette.text
+  },
+  button: {
+    marginTop: '40px'
   }
 }));
 
 export default function Success() {
   const classes = useStyles();
 
-  const [wait, removeWait] = React.useState(true);
-
-  setTimeout(
-    function () {
-      removeWait(false);
-    }, 
-  7000)
-
-  if (wait) {
+  if (true) {
     return (
       <div className={classes.root}>
-        <Typography align="center">Your last payment to codeforcause was successful. We will connect you within 24 hours for further details.</Typography>
-        <Typography align="center">Connect with us is case of any doubt.</Typography>
-        <Typography align="center">Redirecting to home page...</Typography>
+        <Typography align="center">Your last payment to codeforcause was successful. We will connect with you within 24 hours with more details.</Typography>
+        <Typography align="center">Connect with us at {` `}
+          <Link
+            href="mailto:team@codeforcause.org"
+          >team@codeforcause.org</Link>
+          {` `}or{` `}
+          <Link
+            href="tel:+919810468685"
+          >+91 98104 68685</Link>
+
+          {` `} in case of any doubt.</Typography>
+        <CustomButton className={classes.button} title="Go Back To Homepage" href="/" />
       </div>
     );
   }
-
-  return (
-    <Redirect to="/" />
-  )
 }