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 { 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 dayjs from "../../utils/day";
import BlurWrapper from "../feature-wrapper/blur-wrapper.component";
import { HasFeatureAccess } from "../feature-wrapper/feature-wrapper.component";
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 LockWrapperComponent from "../lock-wrapper/lock-wrapper.component";
import ScheduleDayViewContainer from "../schedule-day-view/schedule-day-view.container";
import ScheduleExistingAppointmentsList from "../schedule-existing-appointments-list/schedule-existing-appointments-list.component";
import UpsellComponent, { upsellEnum } from "../upsell/upsell.component";
import "./schedule-job-modal.scss";

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

export function ScheduleJobModalComponent({
  bodyshop,
  form,
  existingAppointments,
  lbrHrsData,
  jobId,
  calculateScheduleLoad
}) {
  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) {
        const addDays = bodyshop.ss_configuration.nobusinessdays
          ? dayjs(values.start).add(totalHours / (bodyshop.target_touchtime || 1), "day")
          : dayjs(values.start).businessDaysAdd(totalHours / (bodyshop.target_touchtime || 1), "day");
        form.setFieldsValue({ scheduled_completion: addDays });
      }
    }
  };

  const hasSmartSchedulingAccess = HasFeatureAccess({ bodyshop, featureName: "smartscheduling" });

  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
                //message: t("general.validation.required"),
              }
            ]}
          >
            <DateTimePicker onBlur={handleDateBlur} onlyFuture isSeparatedTime />
          </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>
            <Space wrap>
              <Button onClick={handleSmartScheduling} loading={loading}>
                <LockWrapperComponent featureName="smartscheduling">
                  {t("appointments.actions.calculate")}
                </LockWrapperComponent>
              </Button>

              {smartOptions.map((d, idx) => (
                <Button
                  key={idx}
                  className="imex-flex-row__margin"
                  disabled={!hasSmartSchedulingAccess}
                  onClick={() => {
                    const ssDate = dayjs(d);
                    if (ssDate.isBefore(dayjs())) {
                      form.setFieldsValue({ start: dayjs() });
                    } else {
                      form.setFieldsValue({
                        start: dayjs(d).add(8, "hour")
                      });
                    }
                    handleDateBlur();
                  }}
                >
                  <BlurWrapper featureName="smartscheduling">
                    <span>
                      <DateFormatter includeDay>{d}</DateFormatter>
                    </span>
                  </BlurWrapper>
                </Button>
              ))}
              {!smartOptions.length > 1 && hasSmartSchedulingAccess && (
                <UpsellComponent upsell={upsellEnum().smartscheduling.general} />
              )}
            </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
              options={
                bodyshop.appt_colors &&
                bodyshop.appt_colors.map((color) => ({
                  value: color.color.hex,
                  label: color.label
                }))
              }
            />
          </Form.Item>
          <Form.Item name={"alt_transport"} label={t("jobs.fields.alt_transport")}>
            <Select
              allowClear
              options={
                bodyshop.appt_alt_transport &&
                bodyshop.appt_alt_transport.map((alt) => ({
                  value: alt,
                  label: alt
                }))
              }
            />
          </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);