bodyshop/client/src/components/schedule-job-modal/schedule-job-modal.component.jsx

import { Button, Col, Form, Row, Select, Switch } from "antd";
import axios from "axios";
import moment from "moment";
import React, { useState } from "react";
import { useTranslation } from "react-i18next";
import { connect } from "react-redux";
import { createStructuredSelector } from "reselect";
import { selectBodyshop } from "../../redux/user/user.selectors";
import { DateFormatter } from "../../utils/DateFormatter";
import DateTimePicker from "../form-date-time-picker/form-date-time-picker.component";
import EmailInput from "../form-items-formatted/email-form-item.component";
import LayoutFormRow from "../layout-form-row/layout-form-row.component";
import ScheduleDayViewContainer from "../schedule-day-view/schedule-day-view.container";
import ScheduleExistingAppointmentsList from "../schedule-existing-appointments-list/schedule-existing-appointments-list.component";

const mapStateToProps = createStructuredSelector({
  bodyshop: selectBodyshop,
});
const mapDispatchToProps = (dispatch) => ({
  //setUserLanguage: language => dispatch(setUserLanguage(language))
});

export function ScheduleJobModalComponent({
  bodyshop,
  form,
  existingAppointments,
  lbrHrsData,
  jobId,
}) {
  const { t } = useTranslation();
  const [loading, setLoading] = useState(false);
  const [smartOptions, setSmartOptions] = useState([]);

  const handleAuto = async () => {
    setLoading(true);
    try {
      const response = await axios.post("/scheduling/job", {
        jobId: jobId,
      });
      if (response.data) setSmartOptions(response.data);
    } catch (error) {
      console.log("error", error, error.message);
    } finally {
      setLoading(false);
    }
  };

  const handleDateBlur = () => {
    const values = form.getFieldsValue();
    if (lbrHrsData) {
      const totalHours =
        lbrHrsData.jobs_by_pk.labhrs.aggregate.sum.mod_lb_hrs +
        lbrHrsData.jobs_by_pk.larhrs.aggregate.sum.mod_lb_hrs;

      if (values.start && !values.scheduled_completion)
        form.setFieldsValue({
          scheduled_completion: moment(values.start).businessAdd(
            totalHours / bodyshop.target_touchtime,
            "days"
          ),
        });
    }
  };

  //TODO Existing appointments list only refreshes sometimes after modal close. May have to do with the container class.
  return (
    <Row gutter={[32, 32]}>
      <Col span={12}>
        <LayoutFormRow grow>
          <Form.Item
            name="start"
            label={t("appointments.fields.time")}
            rules={[
              {
                required: true,
                message: t("general.validation.required"),
              },
            ]}
          >
            <DateTimePicker onBlur={handleDateBlur} />
          </Form.Item>
          <Button onClick={handleAuto} loading={loading}>
            {t("appointments.actions.smartscheduling")}
          </Button>
          <div className="imex-flex-row imex-flex-row__flex-space-around">
            {smartOptions.map((d, idx) => (
              <Button
                className="imex-flex-row__margin"
                key={idx}
                onClick={() => {
                  form.setFieldsValue({ start: new moment(d).add(8, "hours") });
                  handleDateBlur();
                }}
              >
                <DateFormatter>{d}</DateFormatter>
              </Button>
            ))}
          </div>
        </LayoutFormRow>
        <LayoutFormRow grow>
          <Form.Item
            name="scheduled_completion"
            label={t("jobs.fields.scheduled_completion")}
            rules={[
              {
                required: true,
                message: t("general.validation.required"),
              },
            ]}
          >
            <DateTimePicker />
          </Form.Item>
          <Form.Item
            name="notifyCustomer"
            valuePropName="checked"
            label={t("jobs.labels.appointmentconfirmation")}
          >
            <Switch />
          </Form.Item>
          <Form.Item name="email" label={t("jobs.fields.ownr_ea")}>
            <EmailInput />
          </Form.Item>
          <Form.Item name="color" label={t("appointments.fields.color")}>
            <Select>
              {bodyshop.appt_colors &&
                bodyshop.appt_colors.map((color) => (
                  <Select.Option
                    style={{ color: color.color.hex }}
                    key={color.color.hex}
                    value={color.color.hex}
                  >
                    {color.label}
                  </Select.Option>
                ))}
            </Select>
          </Form.Item>
          <Form.Item
            name={"alt_transport"}
            label={t("appointments.fields.alt_transport")}
          >
            <Select>
              {bodyshop.appt_alt_transport &&
                bodyshop.appt_alt_transport.map((alt) => (
                  <Select.Option key={alt}>{alt}</Select.Option>
                ))}
            </Select>
          </Form.Item>
        </LayoutFormRow>
        {t("appointments.labels.history")}
        <ScheduleExistingAppointmentsList
          existingAppointments={existingAppointments}
        />
      </Col>
      <Col span={12}>
        <Form.Item shouldUpdate>
          {() => {
            const values = form.getFieldsValue();

            return (
              <div style={{ height: "70vh" }}>
                <ScheduleDayViewContainer day={values.start} />
              </div>
            );
          }}
        </Form.Item>
      </Col>
    </Row>
  );
}
export default connect(
  mapStateToProps,
  mapDispatchToProps
)(ScheduleJobModalComponent);