MigratorProject-frontend/src/components/root/common/Forms/CPanelBooking.js

import React, { useState } from "react";
import "bootstrap/dist/css/bootstrap.min.css";
import moment from "moment";
import { Col, FormGroup, Row, Container, Label } from "reactstrap";
import { Formik, Form, Field } from "formik";
import * as Yup from "yup";
import { Input, Submit } from "formstrap";
import { callAPI } from "../../../actions/API";
import Msgbox from "../../../actions/Msgbox";
import { builfArrayFromObject } from "../../../actions/Error";

// Main form and POST Request to add migrations
// found at /book under the web hosting migration tab
// Things to add:
// better date time picking.

const InputValidation = Yup.object().shape({
  domain: Yup.string()
    .matches(
      /^((https?):\/\/)?(www.)?[a-z0-9]+(\.[a-z]{2,}){1,3}(#?\/?[a-zA-Z0-9#]+)*\/?(\?[a-zA-Z0-9-_]+=[a-zA-Z0-9-%]+&?)?$/i,
      "Enter correct url!"
    )
    .required("Please enter a domain"),
  username: Yup.string().min(2, "Too Short!").required("Required"),
  original_server: Yup.string()
    .required("Please enter a valid IPv4 or domain"),
  new_server: Yup.string()
    .required("Please enter a valid IPv4 or domain"),
  agent_booked: Yup.string()
    .min(2, "Too short!")
    .required("Please enter your name!"),
  booked_time: Yup.string().required("Time is needed!"),
  ticket_id: Yup.string().required("Please add a ticket ID!"),
  brand: Yup.string().required("Bush Did 911"),
  migration_type: Yup.string().required("Type is required!"),
  booked_date: Yup.date().required("Please enter a date!"),
});

export const CPanelBooking = (timeslots) => {
  const [respID, setRespID] = useState(0);
  const [error, setError] = useState(0);

  const initialValues = {
    submit_time: moment().format("YYYY-MM-DD"),
    dateTime: "2019-03-11T12:00:00.000Z",
  };

  const onSubmit = async (values, { setSubmitting, resetForm }) => {
    console.log(values);
    callAPI
      .post("/book/", values)
      .then(function (response) {
        // console.log(response);
        // add function here
        setRespID(response.data.id);
        setError(0);
        resetForm({ values: "" });
      })
      .catch(function (error) {
        setError(builfArrayFromObject(error.response.data));
        setRespID(0);
      });
    setSubmitting(false);
  };

  return (
    <Formik
      initialValues={initialValues}
      onSubmit={onSubmit}
      validationSchema={InputValidation}
    >
      {({
        handleSubmit,
        handleChange,
        handleBlur,
        values,
        touched,
        isValid,
        errors,
      }) => (
        <Form noValidate onSubmit={handleSubmit}>
          <Container>
            <Row>
              <Col>
                <FormGroup>
                  <Label for="bookedDate">Date *</Label>
                  <Input
                    type="date"
                    name="booked_date"
                    id="bookedDate"
                    placeholder="date placeholder"
                    mindate={Date()}
                  />
                </FormGroup>
                <FormGroup>
                  <Label for="bookedTime">Timeslot *</Label>
                  <Input
                    type="select"
                    name="booked_time"
                    id="bookedTime"
                    className="has-success"
                  >
                    <option>Select</option>
                    {timeslots.timeslots.map((slot) => <option>{slot}</option>)}
                  </Input>
                </FormGroup>
              </Col>
              <Col>
                <FormGroup>
                  <Label for="bookedDomain">Domain *</Label>
                  <Input
                    type="text"
                    name="domain"
                    id="bookedDomain"
                    placeholder="example.com.au"
                  />
                </FormGroup>
                <FormGroup>
                  <Label for="bookedUsername">cPanel username *</Label>
                  <Input
                    type="text"
                    name="username"
                    id="bookedUsername"
                    placeholder="example"
                  />
                </FormGroup>
              </Col>
              <Col>
                <FormGroup>
                  <Label for="bookedSource">Original server *</Label>
                  <Input
                    type="text"
                    name="original_server"
                    id="bookedSource"
                    placeholder="1.2.3.4 / example.com"
                  />
                </FormGroup>
                <FormGroup>
                  <Label for="bookedDestination">New server *</Label>
                  <Input
                    type="text"
                    name="new_server"
                    id="bookedDestination"
                    placeholder="1.2.3.4 / S111.SYD1"
                  />
                </FormGroup>
              </Col>
            </Row>

            <Row>
              <Col>
                <FormGroup>
                  <Label for="bookedBrand">Brand *</Label>
                  <Input type="select" name="brand" id="bookedBrand">
                    <option>Select</option>
                    <option>VentraIP</option>
                    <option>Zuver</option>
                    <option>Synergy</option>
                  </Input>
                </FormGroup>
              </Col>
              <Col>
                <FormGroup>
                  <Label for="bookedTicket">Ticket ID *</Label>
                  <Input
                    type="text"
                    name="ticket_id"
                    id="bookedTicket"
                    placeholder="VIP-A1234567"
                  />
                </FormGroup>
              </Col>
              <Col>
                <FormGroup>
                  <Label for="bookedAgent">Agent Initials *</Label>
                  <Input
                    type="text"
                    name="agent_booked"
                    id="bookedAgent"
                    placeholder="SZ"
                  />
                </FormGroup>
              </Col>
              <Col>
                <FormGroup>
                  <Label for="bookedType">Migration type *</Label>
                  <Input type="select" name="migration_type" id="bookedType">
                    <option>Select</option>
                    <option>cPanel</option>
                    <option>Plesk</option>
                    <option>Other</option>
                  </Input>
                </FormGroup>
              </Col>
            </Row>
            <Row>
              <Col md={4}>
                <FormGroup>
                  <Label for="bookedAdditionalDomains">Addon Domains</Label>
                  <Input
                    type="text"
                    name="additional_domains"
                    id="bookedAdditionalDomains"
                    placeholder="example.com.au,example.net.au"
                  />
                </FormGroup>
                <FormGroup>
                  <Label for="bookedTermDate">
                    Estimated termination date (internal migrations only)
                  </Label>
                  <Input type="date" name="term_date" id="bookedTermDate" />
                </FormGroup>
              </Col>
              <Col md={8}>
                <FormGroup>
                  <Label for="bookedNotes">Notes</Label>
                  <Input name="notes" id="notes" type="textarea" rows={6} />
                </FormGroup>
              </Col>
            </Row>
            <Submit withSpinner>Submit</Submit>
          </Container>
          {respID ? <Msgbox linkid={respID}></Msgbox> : null}
          {error ? <Msgbox error={error}></Msgbox> : null}
        </Form>
      )}
    </Formik>
  );
};