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

import React, { useState, useEffect } from "react";
import ScheduleJobModalComponent from "./schedule-job-modal.component";
import { useMutation, useQuery } from "@apollo/react-hooks";
import {
  INSERT_APPOINTMENT,
  QUERY_APPOINTMENTS_BY_JOBID,
} from "../../graphql/appointments.queries";
import moment from "moment";
import { notification, Modal } from "antd";
import { useTranslation } from "react-i18next";
import { UPDATE_JOBS } from "../../graphql/jobs.queries";
import { setEmailOptions } from "../../redux/email/email.actions";
import { connect } from "react-redux";
import { createStructuredSelector } from "reselect";
import { selectBodyshop } from "../../redux/user/user.selectors";
import { selectSchedule } from "../../redux/modals/modals.selectors";
import { toggleModalVisible } from "../../redux/modals/modals.actions";
import { TemplateList } from "../../utils/TemplateConstants";

const mapStateToProps = createStructuredSelector({
  bodyshop: selectBodyshop,
  scheduleModal: selectSchedule,
});
const mapDispatchToProps = (dispatch) => ({
  toggleModalVisible: () => dispatch(toggleModalVisible("schedule")),
  setEmailOptions: (e) => dispatch(setEmailOptions(e)),
});
export function ScheduleJobModalContainer({
  scheduleModal,
  bodyshop,
  toggleModalVisible,
  setEmailOptions,
}) {
  const { visible, context, actions } = scheduleModal;
  const { jobId, job } = context;
  const { refetch } = actions;

  const [appData, setAppData] = useState({
    start: null,
  });

  const [insertAppointment] = useMutation(INSERT_APPOINTMENT);
  const [updateJobStatus] = useMutation(UPDATE_JOBS);
  const [formData, setFormData] = useState({
    notifyCustomer: false,
    email: (job && job.ownr_ea) || "",
  });

  useEffect(() => {
    setFormData({
      notifyCustomer: !!(job && job.ownr_ea),
      email: (job && job.ownr_ea) || "",
      start: null,
    });
  }, [job, setFormData]);

  const { t } = useTranslation();

  const existingAppointments = useQuery(QUERY_APPOINTMENTS_BY_JOBID, {
    variables: { jobid: jobId },
    fetchPolicy: "network-only",
    skip: !visible || !!!jobId,
  });

  //TODO Customize the amount of minutes it will add.
  const handleOk = async () => {
    const appt = await insertAppointment({
      variables: {
        app: {
          ...appData,
          jobid: jobId,
          bodyshopid: bodyshop.id,
          end: moment(appData.start).add(bodyshop.appt_length || 60, "minutes"),
        },
      },
    });

    if (!!appt.errors) {
      notification["error"]({
        message: t("appointments.errors.saving", {
          message: JSON.stringify(appt.errors),
        }),
      });
      return;
    }
    notification["success"]({
      message: t("appointments.successes.created"),
    });
    if (jobId) {
      const jobUpdate = await updateJobStatus({
        variables: {
          jobIds: [jobId],
          fields: {
            status: bodyshop.md_ro_statuses.default_scheduled,
            date_scheduled: new Date(),
            scheduled_in: appData.start,
          },
        },
      });

      if (!!jobUpdate.errors) {
        notification["error"]({
          message: t("appointments.errors.saving", {
            message: JSON.stringify(jobUpdate.errors),
          }),
        });
        return;
      }
    }

    toggleModalVisible();
    if (formData.notifyCustomer) {
      setEmailOptions({
        messageOptions: {
          to: formData.email,
          replyTo: bodyshop.email,
        },
        template: {
          name: TemplateList.appointment_confirmation.key,
          variables: {
            id: appt.data.insert_appointments.returning[0].id,
          },
        },
      });
    }
    if (refetch) refetch();
  };

  return (
    <Modal
      visible={visible}
      onCancel={() => toggleModalVisible()}
      onOk={handleOk}
      width={"90%"}
      maskClosable={false}
      destroyOnClose
      okButtonProps={{ disabled: appData.start ? false : true }}
    >
      <ScheduleJobModalComponent
        existingAppointments={existingAppointments}
        appData={appData}
        setAppData={setAppData}
        formData={formData}
        setFormData={setFormData}
      />
    </Modal>
  );
}

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