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

import {
  Button,
  Col,
  Form,
  Input,
  Row,
  Select,
  Space,
  Switch,
  Typography,
} 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";
import "./schedule-job-modal.scss";
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 handleSmartScheduling = 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"
          ),
        });
    }
  };

  return (
    <Row gutter={[16, 16]}>
      <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} onlyFuture />
          </Form.Item>
          <Form.Item
            name="scheduled_completion"
            label={t("jobs.fields.scheduled_completion")}
            rules={[
              {
                required: true,
                //message: t("general.validation.required"),
              },
            ]}
          >
            <DateTimePicker onlyFuture />
          </Form.Item>
        </LayoutFormRow>

        <Typography.Title level={4}>
          {t("appointments.labels.smartscheduling")}
        </Typography.Title>

        {
          // smartOptions.length > 0 && (
          // <div>{t("appointments.labels.suggesteddates")}</div>
          // )
        }
        <Space wrap>
          <Button onClick={handleSmartScheduling} loading={loading}>
            {t("appointments.actions.calculate")}
          </Button>
          {smartOptions.map((d, idx) => (
            <Button
              className="imex-flex-row__margin"
              key={idx}
              onClick={() => {
                form.setFieldsValue({ start: new moment(d).add(8, "hours") });
                handleDateBlur();
              }}
            >
              <DateFormatter includeDay>{d}</DateFormatter>
            </Button>
          ))}
        </Space>

        <LayoutFormRow grow>
          <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 disabled={!form.getFieldValue("notifyCustomer")} />
          </Form.Item>
        </LayoutFormRow>
        <LayoutFormRow grow>
          <Form.Item name="color" label={t("appointments.fields.color")}>
            <Select allowClear>
              {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("jobs.fields.alt_transport")}
          >
            <Select allowClear>
              {bodyshop.appt_alt_transport &&
                bodyshop.appt_alt_transport.map((alt) => (
                  <Select.Option key={alt}>{alt}</Select.Option>
                ))}
            </Select>
          </Form.Item>
          <Form.Item name={"note"} label={t("appointments.fields.note")}>
            <Input />
          </Form.Item>
        </LayoutFormRow>
        {t("appointments.labels.history")}
        <ScheduleExistingAppointmentsList
          existingAppointments={existingAppointments}
        />
      </Col>
      <Col span={12}>
        <Form.Item shouldUpdate>
          {() => {
            const values = form.getFieldsValue();

            return (
              <div className="schedule-job-modal">
                <ScheduleDayViewContainer day={values.start} />
              </div>
            );
          }}
        </Form.Item>
      </Col>
    </Row>
  );
}
export default connect(
  mapStateToProps,
  mapDispatchToProps
)(ScheduleJobModalComponent);