main.js

import "../App.css";
import React, { Component } from "react";

class Form extends Component {
  constructor(props) {
    super(props);
    this.initialState = {
      origin: "",
      destiny: "",
      time: "",
      plan: "",
      comfm: "",
      semfm: "",
      msgErr: "",
    };
    this.state = this.initialState;
    this.calcFaleMais = this.calcFaleMais.bind(this);
    this.calc = this.calc.bind(this);
    this.inputListener = this.inputListener.bind(this);
  }
  handleSubmit = (e) => {
    e.preventDefault();
    const { origem, destino, plano } = this.state;
    if (origem === "" || destino === "" || plano === "") {
      this.setState({ msgErr: "Você deve preencher todos os campos" });
    } else {
      Promise.all([this.calc()])
        .then(() => {
          this.setState(this.initialState);
        })
        .catch((err) => {
          console.error(err);
        });
    }
  };
  calcFaleMais(valMin, plano, minutos) {
    let comfm1 = 0;
    let semfm1 = 0;
    semfm1 = (valMin * minutos).toFixed(2).toString();
    switch (plano) {
      case "FaleMais30":
        if (minutos <= 30) {
          comfm1 = "R$ 0.00";
          this.setState({ comfm: comfm1 });
        } else {
          comfm1 = ((minutos - 30) * valMin * 1.1).toFixed(2).toString();
          this.setState({ comfm: "R$ " + comfm1 });
        }
        break;
      case "FaleMais60":
        if (minutos <= 60) {
          comfm1 = "R$ 0.00";
          this.setState({ comfm: comfm1 });
        } else {
          comfm1 = ((minutos - 60) * valMin * 1.1).toFixed(2).toString();
          this.setState({ comfm: "R$ " + comfm1 });
        }
        break;
      case "FaleMais120":
        if (minutos <= 120) {
          comfm1 = "R$ 0.00";
          this.setState({ comfm: comfm1 });
        } else {
          comfm1 = ((minutos - 120) * valMin * 1.1).toFixed(2).toString();
          this.setState({ comfm: "R$ " + comfm1 });
        }
        break;
      default:
        return 0;
    }
  }
  calc() {
    const { origem, destino, tempo, plano } = this.state;
    const minutos = Number(tempo);
    var valMin = 0;
    // checa as ligações entre origem e destino
    if (
      (origem === "011" && destino === "016") ||
      (origem === "018" && destino === "011")
    ) {
      valMin = 1.9;
      this.calcFaleMais(valMin, plano, minutos);
    } else if (origem === "016" && destino === "011") {
      valMin = 2.9;
      this.calcFaleMais(valMin, plano, minutos);
    } else if (origem === "011" && destino === "017") {
      valMin = 1.7;
      this.calcFaleMais(valMin, plano, minutos);
    } else if (origem === "017" && destino === "011") {
      valMin = 2.7;
      this.calcFaleMais(valMin, plano, minutos);
    } else if (origem === "011" && destino === "018") {
      valMin = 0.9;
      this.calcFaleMais(valMin, plano, minutos);
    } else {
      this.setState({
        comfm: "-",
        semfm: "-",
      });
    }
  }
  inputListener = (event) => {
    let name;
    console.log(event);
    if (event.target.name !== undefined) {
      name = event.target.name;
    }
    let value;
    if (event.target.value !== undefined) {
      name = event.target.value;
    }

    this.setState({
      name: value,
    });
  };
  handleChange = (e) => {
    this.setState({ value: e.target.value });
  };
  render() {
    const { origem, destino, plano, tempo, msgErr } = this.state;
    return (
      <form>
        <div className="container">
          <div className="input-field col s12">
            <select
              className="browser-default"
              name="origem"
              value={origem}
              onChange={this.handleChange}
              onClick={this.inputListener}
            >
              <option value="">Origem</option>
              <option value="011">011</option>
              <option value="016">016</option>
              <option value="017">017</option>
              <option value="018">018</option>
            </select>
          </div>

          <div className="input-field col s12">
            <select
              className="browser-default"
              name="destino"
              value={destino}
              onChange={this.handleChange}
              onClick={this.inputListener}
            >
              <option value="">Destino</option>
              <option value="011">011</option>
              <option value="016">016</option>
              <option value="017">017</option>
              <option value="018">018</option>
            </select>
          </div>

          <div className="input-field col s4">
            <input
              placeholder="Tempo"
              className="validate"
              name="tempo"
              type="text"
              value={tempo}
              onChange={this.handleChange}
              onClick={this.inputListener}
            />
          </div>

          <div className="input-field col s12">
            <select
              className="browser-default"
              value={plano}
              name="plano"
              onChange={this.handleChange}
              onClick={this.inputListener}
            >
              <option value="">Plano</option>
              <option value="FaleMais 30">FaleMais 30</option>
              <option value="FaleMais 60">FaleMais 60</option>
              <option value="FaleMais 120">FaleMais 120</option>
            </select>
          </div>
          <button
            onClick={this.inputListener}
            type="submit"
            onChange={this.handleChange}
          >
            Calcular
          </button>
          <p className="err">{msgErr}</p>
        </div>
      </form>
    );
  }
}
export default Form;