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 dayjs from "../../utils/day";
import React, { useCallback, useMemo, useState } from "react";
import { useTranslation } from "react-i18next";
import { connect } from "react-redux";
import { createStructuredSelector } from "reselect";
import { calculateScheduleLoad } from "../../redux/application/application.actions";
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";
import InstanceRenderManager from "../../utils/instanceRenderMgr";

const mapStateToProps = createStructuredSelector({
  bodyshop: selectBodyshop
});

const mapDispatchToProps = (dispatch) => ({
  calculateScheduleLoad: (endDate) => dispatch(calculateScheduleLoad(endDate))
});

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

  const handleSmartScheduling = useCallback(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);
    }
  }, [jobId]);

  const handleDateBlur = useCallback(() => {
    const values = form.getFieldsValue();

    if (lbrHrsData) {
      const totalHours =
        (lbrHrsData.jobs_by_pk.labhrs.aggregate.sum.mod_lb_hrs || 0) +
        (lbrHrsData.jobs_by_pk.larhrs.aggregate.sum.mod_lb_hrs || 0);

      if (values.start && !values.scheduled_completion)
        form.setFieldsValue({
          scheduled_completion: dayjs(values.start).businessDaysAdd(totalHours / bodyshop.target_touchtime, "day")
        });
    }
  }, [form, lbrHrsData, bodyshop.target_touchtime]);

  const colorOptions = useMemo(() => {
    return (
      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>
      ))
    );
  }, [bodyshop.appt_colors]);

  const altTransportOptions = useMemo(() => {
    return (
      bodyshop.appt_alt_transport &&
      bodyshop.appt_alt_transport.map((alt) => (
        <Select.Option key={alt} value={alt}>
          {alt}
        </Select.Option>
      ))
    );
  }, [bodyshop.appt_alt_transport]);

  const smartOptionsButtons = useMemo(() => {
    return smartOptions.map((d, idx) => (
      <Button
        className="imex-flex-row__margin"
        key={idx}
        onClick={() => {
          const ssDate = dayjs(d);
          if (ssDate.isBefore(dayjs())) {
            form.setFieldsValue({ start: dayjs() });
          } else {
            form.setFieldsValue({
              start: dayjs(d).add(8, "hour")
            });
          }
          handleDateBlur();
        }}
      >
        <DateFormatter includeDay>{d}</DateFormatter>
      </Button>
    ));
  }, [smartOptions, form, handleDateBlur]);

  return (
    <Row gutter={[16, 16]}>
      <Col span={12}>
        <Space>
          <Typography.Title level={3}>{lbrHrsData?.jobs_by_pk?.ro_number}</Typography.Title>
          <Typography.Title level={4}>{`B/R Hrs:${
            lbrHrsData?.jobs_by_pk.labhrs?.aggregate?.sum?.mod_lb_hrs || 0
          }/${lbrHrsData?.jobs_by_pk.larhrs?.aggregate?.sum?.mod_lb_hrs || 0}`}</Typography.Title>
        </Space>
        <LayoutFormRow grow>
          <Form.Item
            name="start"
            label={t("appointments.fields.time")}
            rules={[
              {
                required: true
              }
            ]}
          >
            <DateTimePicker onBlur={handleDateBlur} onlyFuture />
          </Form.Item>
          <Form.Item
            name="scheduled_completion"
            label={t("jobs.fields.scheduled_completion")}
            rules={[
              {
                required: true
              }
            ]}
          >
            <DateTimePicker onlyFuture />
          </Form.Item>
        </LayoutFormRow>
        {InstanceRenderManager({
          imex: (
            <>
              <Typography.Title level={4}>{t("appointments.labels.smartscheduling")}</Typography.Title>
              <Space wrap>
                <Button onClick={handleSmartScheduling} loading={loading}>
                  {t("appointments.actions.calculate")}
                </Button>
                {smartOptionsButtons}
              </Space>
            </>
          ),
          rome: "USE_IMEX",
          promanager: <></>
        })}

        <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>{colorOptions}</Select>
          </Form.Item>
          <Form.Item name={"alt_transport"} label={t("jobs.fields.alt_transport")}>
            <Select allowClear>{altTransportOptions}</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={(prev, cur) => prev.start !== cur.start}>
          {() => {
            const values = form.getFieldsValue();
            if (values.start) {
              calculateScheduleLoad(dayjs(values.start).add(3, "day"));
            }
            return (
              <div className="schedule-job-modal">
                <ScheduleDayViewContainer day={values.start} />
              </div>
            );
          }}
        </Form.Item>
      </Col>
    </Row>
  );
});

export default connect(mapStateToProps, mapDispatchToProps)(ScheduleJobModalComponent);