old-web/frontend-react/src/components/NotificationModal.js

import React from "react";
import Dialog from "@material-ui/core/Dialog";
import DialogTitle from "@material-ui/core/DialogTitle";
import DialogContent from "@material-ui/core/DialogContent";
import DialogActions from "@material-ui/core/DialogActions";
import Slide from "@material-ui/core/Slide";
import withStyles from "@material-ui/core/styles/withStyles";
import { notificationmodalwrapper } from "utils/notificationmodalwrapper";
import modalStyle from "assets/modalStyle.js";
import Button from "@material-ui/core/Button";
import IconButton from "@material-ui/core/IconButton";
import Close from "@material-ui/icons/Close";
import Input from "@material-ui/core/Input";
import Checkbox from "@material-ui/core/Checkbox";
import FormControlLabel from "@material-ui/core/FormControlLabel";
import Typography from "@material-ui/core/Typography";
import Tooltip from "@material-ui/core/Tooltip";
import axios from "axios";

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();
  };
  handleClose = () => {
    this.props.onModalClose();
  };

  checkEmail = email =>
    /^(([^<>()[\]\\.,;:\s@"]+(\.[^<>()[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/.test(
      email
    );

  handleEmail = e => {
    this.props.onUserDataChange({ info: "email", value: e.target.value });
    this.props.onUserDataChange({
      info: "validEmail",
      value: this.checkEmail(e.target.value)
    });
  };

  handleInput = (e, infoName) => {
    this.props.onUserDataChange({ info: infoName, value: e.target.value });
  };

  isChecked = optionName => Boolean(this.props.userdata[optionName]);

  optionChange = optionName => {
    const { userdata } = this.props;
    this.props.onUserDataChange({
      info: optionName,
      value: !userdata[optionName]
    });
  };

  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 =>
        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,
      classes,
      userdata: { validEmail }
    } = this.props;

    return (
      <div>
        <button className={classes.buttonStyle} onClick={this.handleOpen}>
          Napravi notifikaciju
        </button>
        <Dialog
          classes={{
            root: classes.center,
            paper: classes.modal
          }}
          open={modal}
          TransitionComponent={Transition}
          keepMounted
          onClose={() => this.handleClose()}
          aria-labelledby="classic-modal-slide-title"
          aria-describedby="classic-modal-slide-description"
        >
          <DialogTitle
            id="classic-modal-slide-title"
            disableTypography
            className={classes.modalHeader}
          >
            <IconButton
              className={classes.modalCloseButton}
              key="close"
              aria-label="Close"
              color="inherit"
              onClick={() => this.handleClose()}
            >
              <Close className={classes.modalClose} />
            </IconButton>
            <h4 className={classes.modalTitle}>Save Market Alert</h4>
          </DialogTitle>
          <DialogContent
            id="classic-modal-slide-description"
            className={classes.modalBody}
          >
            <FormControlLabel
              className={classes.whiteText}
              control={
                <Checkbox
                  className={classes.checkBoxStyle}
                  checked={this.isChecked("emailChecked")}
                  type={"checkbox"}
                  value={""}
                  onChange={() => this.optionChange("emailChecked")}
                />
              }
              label={<Typography style={{ color: "white" }}>Email</Typography>}
            />

            {this.isChecked("emailChecked") ? (
              <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}>
            {validEmail ? (
              <Button
                onClick={this.handleSaveMarketAlert}
                className={classes.saveButton}
              >
                Save
              </Button>
            ) : (
              <Tooltip
                title="Provide a valid email"
                placement="top"
                classes={{ tooltip: classes.tooltip }}
              >
                <div>
                  <Button disabled className={classes.saveButton}>
                    Save
                  </Button>
                </div>
              </Tooltip>
            )}

            <Button
              className={classes.closeButton}
              onClick={() => this.handleClose()}
            >
              Close
            </Button>
          </DialogActions>
        </Dialog>
      </div>
    );
  }
}

export default withStyles(modalStyle)(
  notificationmodalwrapper(NotificationModal)
);