some refactoring and enabling payment (final)

frontend-react/src/components/NotificationModal.js

@@ -21,7 +21,12 @@ function Transition(props) {
   return <Slide direction="down" {...props} />;
 }
 
+let token = "";
 class NotificationModal extends React.Component {
+  componentDidMount() {
+    console.log("load sandbox");
+    window.TCO.loadPubKey("sandbox");
+  }
   handleOpen = () => {
     this.props.onModalOpen();
   };
@@ -34,7 +39,7 @@ class NotificationModal extends React.Component {
       email
     );
 
-  handleInput = e => {
+  handleEmail = e => {
     this.props.onUserDataChange({ info: "email", value: e.target.value });
     this.props.onUserDataChange({
       info: "validEmail",
@@ -42,6 +47,10 @@ class NotificationModal extends React.Component {
     });
   };
 
+  handleInput = (e, infoName) => {
+    this.props.onUserDataChange({ info: infoName, value: e.target.value });
+  };
+
   isChecked = optionName => Boolean(this.props.userdata[optionName]);
 
   optionChange = optionName => {
@@ -52,20 +61,62 @@ class NotificationModal extends React.Component {
     });
   };
 
-  handleSaveMarketAlert = () => {
+  successCallback = data => {
+    token = data.response.token.token;
     const {
       userdata: { email, last_date, olx_url }
     } = this.props;
+
     axios
       .post("/marketalerts", {
         email,
         last_date,
         olx_url
       })
-      .then(response => console.log(response.data))
+      .then(response =>
+        axios
+          .post("/payforalert", {
+            email,
+            token
+          })
+          .then(response => {
+            this.handleClose();
+            alert("Market Alert Created");
+          })
+          .catch(error => console.log(error))
+      )
       .catch(error => console.log(error));
   };
 
+  errorCallback = data => {
+    if (data.errorCode === 200) {
+      this.tokenRequest();
+    } else {
+      alert(data.errorMsg);
+    }
+  };
+
+  tokenRequest = () => {
+    const {
+      userdata: { ccNo, expYear, expMonth, cvv }
+    } = this.props;
+    const sellerId = "901402692";
+    const publishableKey = "93546B8D-B726-4376-A6DF-F698FD8893CA";
+    var args = {
+      sellerId,
+      publishableKey,
+      ccNo,
+      cvv,
+      expMonth,
+      expYear
+    };
+    window.TCO.requestToken(this.successCallback, this.errorCallback, args);
+  };
+
+  handleSaveMarketAlert = () => {
+    this.tokenRequest();
+  };
+
   render() {
     const {
       modal,
@@ -125,15 +176,66 @@ class NotificationModal extends React.Component {
             />
 
             {this.isChecked("emailChecked") ? (
-              <Input
-                className={classes.inputStyle}
-                placeholder="Email"
-                inputProps={{
-                  "aria-label": "Min"
-                }}
-                type="email"
-                onChange={this.handleInput}
-              />
+              <div>
+                <Input
+                  className={classes.inputStyle}
+                  placeholder="Email"
+                  inputProps={{
+                    "aria-label": "Email"
+                  }}
+                  type="email"
+                  onChange={this.handleEmail}
+                />
+                <Input
+                  className={classes.inputStyle}
+                  type="hidden"
+                  value={token}
+                />
+                <Input
+                  className={classes.inputStyle}
+                  placeholder="Card Number"
+                  inputProps={{
+                    "aria-label": "Card Number"
+                  }}
+                  required
+                  autoComplete="off"
+                  type="number"
+                  onChange={e => this.handleInput(e, "ccNo")}
+                />
+                <Input
+                  className={classes.inputStyle}
+                  placeholder="Expiration Year"
+                  inputProps={{
+                    "aria-label": "Expiration Year"
+                  }}
+                  required
+                  autoComplete="off"
+                  type="number"
+                  onChange={e => this.handleInput(e, "expYear")}
+                />
+                <Input
+                  className={classes.inputStyle}
+                  placeholder="Expiration Month"
+                  inputProps={{
+                    "aria-label": "Expiration Month"
+                  }}
+                  required
+                  autoComplete="off"
+                  type="number"
+                  onChange={e => this.handleInput(e, "expMonth")}
+                />
+                <Input
+                  className={classes.inputStyle}
+                  placeholder="CVV"
+                  inputProps={{
+                    "aria-label": "CVV"
+                  }}
+                  required
+                  autoComplete="off"
+                  type="number"
+                  onChange={e => this.handleInput(e, "cvv")}
+                />
+              </div>
             ) : null}
           </DialogContent>
           <DialogActions className={classes.modalFooter}>