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

import React 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 FormikFieldDateTimePicker from "./FormikFieldDateTimePicker";

// 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 timezoneList = {
  losAngeles: "America/Los_Angeles", // -8:00 (-7)
  berlin: "Europe/Berlin", // +2:00 (-1)
  newYork: "America/New_York", // -5:00 (-4)
  melbourne: "Australia/Melbourne", // +8:00
  tongatapu: "Pacific/Tongatapu", // +13:00 (+14)
  djibouti: "Africa/Djibouti", // +3:00
};
const timezone = timezoneList.melbourne;

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-%]+&?)?$/,
      "Enter correct url!"
    )
    .required("Please enter a domain"),
  username: Yup.string().min(2, "Too Short!").required("Required"),
  original_server: Yup.string()
    .matches(
      /^(([1-9]?\d|1\d\d|2[0-5][0-5]|2[0-4]\d)\.){3}([1-9]?\d|1\d\d|2[0-5][0-5]|2[0-4]\d)$/,
      "Please enter a valid IPv4 Address"
    )
    .required("Please enter a valid IP"),
  new_server: Yup.string()
    .matches(
      /^(([1-9]?\d|1\d\d|2[0-5][0-5]|2[0-4]\d)\.){3}([1-9]?\d|1\d\d|2[0-5][0-5]|2[0-4]\d)$/,
      "Please enter a valid IPv4 Address"
    )
    .required("Please enter a valid IP"),
});

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

  const onSubmit = async (values, { setSubmitting, resetForm }) => {
    callAPI
      .post("/", values)
      .then(function (response) {
        console.log(response.data.id);
        // add function here
      })
      .catch(function (error) {
        console.log(error);
      });
    setSubmitting(false);
    resetForm({ values: "" });
  };
  return (
    <Formik
      initialValues={initialValues}
      onSubmit={onSubmit}
      validationSchema={InputValidation}
    >
      {({ errors, touched }) => (
        <Form>
          <Container>
            <Row>
              <Col>
                <FormGroup>
                  <Label for="bookedDate">Date</Label>
                  <Input
                    type="date"
                    name="booked_date"
                    id="bookedDate"
                    placeholder="date placeholder"
                    mindate={Date()}
                  />
                </FormGroup>
              </Col>
              {/* <Col>
                <Field
                  name="dateTime"
                  component={FormikFieldDateTimePicker}
                  inputVariant="outlined"
                  label="Zoned Date and Time"
                  timezone={timezone}
                  helperText="Timezone specified"
                  clearable
                  margin="dense"
                />
              </Col> */}
              <Col>
                <FormGroup>
                  <Label for="bookedTime">Timeslot</Label>
                  <Input type="select" name="booked_time" id="bookedTime">
                    <option>Select</option>
                    <option>00:00-03:00</option>
                    <option>03:00-06:00</option>
                    <option>06:00-09:00</option>
                    <option>08:00-12:00</option>
                    <option>12:00-18:00</option>
                    <option>18:00-00:00</option>
                  </Input>
                </FormGroup>
              </Col>
              <Col>
                <FormGroup>
                  <Label for="bookedDomain">Domain</Label>
                  <Input
                    type="text"
                    name="domain"
                    id="bookedDomain"
                    placeholder="example.com.au"
                  />
                </FormGroup>
              </Col>
              <Col>
                <FormGroup>
                  <Label for="bookedUsername">cPanel username</Label>
                  <Input
                    type="text"
                    name="username"
                    id="bookedUsername"
                    placeholder="example"
                  />
                </FormGroup>
              </Col>
            </Row>
            <Row>
              <Col>
                <FormGroup>
                  <Label for="bookedSource">Original server</Label>
                  <Input
                    type="text"
                    name="original_server"
                    id="bookedSource"
                    placeholder="1.2.3.4"
                  />
                </FormGroup>
              </Col>
              <Col>
                <FormGroup>
                  <Label for="bookedDestination">New server</Label>
                  <Input
                    type="text"
                    name="new_server"
                    id="bookedDestination"
                    placeholder="1.2.3.4"
                  />
                </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="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>
              <Col>
                <FormGroup>
                  <Label for="bookedAgent">Agent Initials</Label>
                  <Input
                    type="text"
                    name="agent_booked"
                    id="bookedAgent"
                    placeholder="SZ"
                  />
                </FormGroup>
              </Col>
            </Row>
            <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>
            <FormGroup>
              <Label for="bookedNotes">Notes</Label>
              <Input type="textarea" name="notes" id="notes" />
            </FormGroup>
            <Submit withSpinner>Submit</Submit>
          </Container>
        </Form>
      )}
    </Formik>
  );
};