Merge pull request #395 from SE-GUC/react_dev

Last Merge to master (probably)
SE-GUC · May 5, 2019 · d449ce5 · d449ce5
2 parents a3a8eeb + 3824265
commit d449ce5
Show file tree

Hide file tree

Showing 5 changed files with 82 additions and 18 deletions.
diff --git a/client/src/components/PayMyFees/CheckoutForm.js b/client/src/components/PayMyFees/CheckoutForm.js
@@ -1,14 +1,21 @@
 import React, { Component } from "react";
 import { CardElement, injectStripe } from "react-stripe-elements";
 import axios from "axios";
+import CircularProgress from "@material-ui/core/CircularProgress";
+import SnackBar from "../snackbar";
 
 class CheckoutForm extends Component {
   constructor(props) {
     super(props);
     this.submit = this.submit.bind(this);
   }
+  state = {
+    clicked: false
+  };
 
   async submit(ev) {
+    await this.setState({ clicked: true });
+    await this.setState({ alerted: false, alertType: "", alertMsg: "" });
     let { token } = await this.props.stripe.createToken({ name: "Payment" });
     let verdict = {};
     try {
@@ -21,17 +28,38 @@ class CheckoutForm extends Component {
       verdict = { completed: false, failed: true };
     }
     this.props.submitAction(verdict);
+    await this.setState({ clicked:false });
   }
 
   render() {
+    let alertSnack;
+    if (this.state.alerted)
+      alertSnack = (
+        <SnackBar
+          message={this.state.alertMsg}
+          variant={this.state.alertType}
+        />
+      );
     return (
       <div className="checkout">
+        {alertSnack}
         <p>Would you like to complete the payment?</p>
         <CardElement />
-        <button style={btnStyle} onClick={this.submit}>
-          {"$ "}
-          Pay{" "}
-        </button>
+        {this.state.clicked ? (
+          <CircularProgress
+            style={{
+              display: "inlineBlock",
+              marginTop: "2%",
+              marginLeft: "3%",
+              marginBottom: "1%"
+            }}
+          />
+        ) : (
+          <button style={btnStyle} onClick={this.submit}>
+            {"$ "}
+            Pay{" "}
+          </button>
+        )}
       </div>
     );
   }

diff --git a/client/src/components/PayMyFees/PayMyFeesItem.js b/client/src/components/PayMyFees/PayMyFeesItem.js
@@ -1,27 +1,61 @@
 import React, { Component } from "react";
 import PayMyFees from "./PayMyFees";
+import SnackBar from "../snackbar";
 
 class PayMyFeesItem extends Component {
-  state = { clicked: false, completed: false, failed: false };
+  state = {
+    clicked: false,
+    completed: false,
+    failed: false,
+    alerted: false,
+    alertType: "",
+    alertMsg: ""
+  };
 
-  onClick = () => {
+  onClick = async () => {
+    await this.setState({ alerted: false, alertType: "", alertMsg: "" });
     this.setState({
       clicked: !this.state.clicked,
       completed: false,
       failed: false
     });
   };
 
-  submitAction = verdict => {
+  submitAction = async verdict => {
+    await this.setState({ alerted: false, alertType: "", alertMsg: "" });
     this.setState({
       clicked: false,
       completed: verdict.completed,
       failed: verdict.failed
     });
+    if (this.state.failed) {
+      await this.setState({
+        alerted: true,
+        alertType: "error",
+        alertMsg: "Payment Failed! Please check your card information!"
+      });
+    }
+    if (this.state.completed) {
+      await this.setState({
+        alerted: true,
+        alertType: "success",
+        alertMsg:
+          "Payment has been received successfully, your Company has been established!"
+      });
+    }
   };
 
   render() {
-    const { clicked, completed, failed } = this.state;
+    let alertSnack;
+    if (this.state.alerted)
+      alertSnack = (
+        <SnackBar
+          message={this.state.alertMsg}
+          variant={this.state.alertType}
+        />
+      );
+
+    const { clicked } = this.state;
     if (clicked) {
       return (
         <React.Fragment>
@@ -30,18 +64,20 @@ class PayMyFeesItem extends Component {
             caseId={this.props.caseId}
             submitAction={this.submitAction}
           />
+          {alertSnack}
           <button onClick={this.onClick} style={cancelBtnStyle}>
             cancel
           </button>
         </React.Fragment>
       );
     } else {
-      if (failed) alert("Payment Failed! Please check your card information!");
-      if (completed) alert("Payment has been received successfully");
       return (
-        <button onClick={this.onClick} style={payBtnStyle}>
-          Pay Fees
-        </button>
+        <div>
+          {alertSnack}
+          <button onClick={this.onClick} style={payBtnStyle}>
+            Pay Fees
+          </button>
+        </div>
       );
     }
   }

diff --git a/client/src/components/caseComponents/LawyerViewCase.js b/client/src/components/caseComponents/LawyerViewCase.js
@@ -18,6 +18,7 @@ export default class LawyerViewCase extends Component {
     alertMsg: ""
   };
   async componentDidMount() {
+    await this.setState({ finished: false });
     if (!localStorage.jwtToken) {
       alert("You must login!");
       await this.setState({ home: 1 });

diff --git a/client/src/components/dCaseComponents/CaseContainer.js b/client/src/components/dCaseComponents/CaseContainer.js
@@ -261,6 +261,7 @@ class CaseContainer extends Component {
     });
   };
   async componentDidMount() {
+    await this.setState({ finished: false });
     const data = await parseJwt(localStorage.jwtToken);
     await this.setState({ loggedInType: data.type });
 
@@ -848,9 +849,9 @@ class CaseContainer extends Component {
                       ) : (
                         <div
                           style={{
-                            fontSize: "36px",
-                            marginLeft: "10%",
-                            marginTop: "7%"
+                            fontSize: "17px",
+                            marginLeft: "5%",
+                            marginTop: "5%"
                           }}
                         >
                           {calcFees(this.props.expandedCase) + " EGP"}

diff --git a/client/src/components/snackbar.js b/client/src/components/snackbar.js
@@ -43,8 +43,6 @@ const styles1 = {
 function MySnackbarContent(props) {
   const classes = { ...styles1 };
   const { message, onClose, variant } = props;
-  console.log(classes.error);
-  console.log(variant);
   return (
     <SnackbarContent
       className="MySnackbarContent-error-46"