bodyshop/client/src/components/jobs-detail-header-actions/jobs-detail-header-actions.component.jsx

import { DownCircleFilled } from "@ant-design/icons";
import { useApolloClient } from "@apollo/react-hooks";
import { Button, Dropdown, Menu, Popconfirm } from "antd";
import React, { useMemo } from "react";
import { useTranslation } from "react-i18next";
import { connect } from "react-redux";
import { Link, useHistory } from "react-router-dom";
import { createStructuredSelector } from "reselect";
import { setModalContext } from "../../redux/modals/modals.actions";
import { selectBodyshop } from "../../redux/user/user.selectors";
import AddToProduction from "./jobs-detail-header-actions.addtoproduction.util";
import JobsDetaiLheaderCsi from "./jobs-detail-header-actions.csi.component";
import DuplicateJob from "./jobs-detail-header-actions.duplicate.util";
import { logImEXEvent } from "../../firebase/firebase.utils";
import { selectJobReadOnly } from "../../redux/application/application.selectors";

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

const mapDispatchToProps = (dispatch) => ({
  setScheduleContext: (context) =>
    dispatch(setModalContext({ context: context, modal: "schedule" })),
  setBillEnterContext: (context) =>
    dispatch(setModalContext({ context: context, modal: "billEnter" })),
  setPaymentContext: (context) =>
    dispatch(setModalContext({ context: context, modal: "payment" })),
  setJobCostingContext: (context) =>
    dispatch(setModalContext({ context: context, modal: "jobCosting" })),
});

export function JobsDetailHeaderActions({
  job,
  bodyshop,
  refetch,
  setScheduleContext,
  setBillEnterContext,
  setPaymentContext,
  setJobCostingContext,
  jobRO,
}) {
  const { t } = useTranslation();
  const client = useApolloClient();
  const history = useHistory();

  const jobInProduction = useMemo(() => {
    return bodyshop.md_ro_statuses.production_statuses.includes(job.status);
  }, [job, bodyshop.md_ro_statuses.production_statuses]);

  const jobInPreProduction = useMemo(() => {
    return bodyshop.md_ro_statuses.pre_production_statuses.includes(job.status);
  }, [job.status, bodyshop.md_ro_statuses.pre_production_statuses]);

  const jobInPostProduction = useMemo(() => {
    return bodyshop.md_ro_statuses.post_production_statuses.includes(
      job.status
    );
  }, [job.status, bodyshop.md_ro_statuses.post_production_statuses]);

  const statusmenu = (
    <Menu key="popovermenu">
      <Menu.Item
        disabled={!jobInPreProduction || !job.converted || jobRO}
        onClick={() => {
          logImEXEvent("job_header_schedule");

          setScheduleContext({
            actions: { refetch: refetch },
            context: {
              jobId: job.id,
              job: job,
            },
          });
        }}
      >
        {t("jobs.actions.schedule")}
      </Menu.Item>
      <Menu.Item
        disabled={
          !!job.intakechecklist ||
          !jobInPreProduction ||
          !job.converted ||
          jobRO
        }
      >
        {!!job.intakechecklist ||
        !jobInPreProduction ||
        !job.converted ||
        jobRO ? (
          t("jobs.actions.intake")
        ) : (
          <Link to={`/manage/jobs/${job.id}/intake`}>
            {t("jobs.actions.intake")}
          </Link>
        )}
      </Menu.Item>
      <Menu.Item disabled={!jobInProduction || jobRO}>
        {!jobInProduction ? (
          t("jobs.actions.deliver")
        ) : (
          <Link to={`/manage/jobs/${job.id}/deliver`}>
            {t("jobs.actions.deliver")}
          </Link>
        )}
      </Menu.Item>
      <Menu.Item
        key="enterpayments"
        disabled={jobRO}
        onClick={() => {
          logImEXEvent("job_header_enter_payment");

          setPaymentContext({
            actions: {},
            context: { jobid: job.id },
          });
        }}
      >
        {t("menus.header.enterpayment")}
      </Menu.Item>
      <Menu.Item key="cccontract" disabled={jobRO}>
        <Link
          to={{
            pathname: "/manage/courtesycars/contracts/new",
            state: { jobId: job.id },
          }}
        >
          {t("menus.jobsactions.newcccontract")}
        </Link>
      </Menu.Item>
      {job.inproduction ? (
        <Menu.Item
          key="addtoproduction"
          disabled={!!!job.converted || jobRO}
          onClick={() => AddToProduction(client, job.id, refetch, true)}
        >
          {t("jobs.actions.removefromproduction")}
        </Menu.Item>
      ) : (
        <Menu.Item
          key="addtoproduction"
          disabled={!!!job.converted || !!job.inproduction || jobRO}
          onClick={() => AddToProduction(client, job.id, refetch)}
        >
          {t("jobs.actions.addtoproduction")}
        </Menu.Item>
      )}

      <Menu.Item key="duplicatejob">
        <Popconfirm
          title={t("jobs.labels.duplicateconfirm")}
          okText="Yes"
          cancelText="No"
          onClick={(e) => e.stopPropagation()}
          onConfirm={() =>
            DuplicateJob(
              client,
              job.id,
              { defaultOpenStatus: bodyshop.md_ro_statuses.default_imported },
              (newJobId) => {
                history.push(`/manage/jobs/${newJobId}`);
              }
            )
          }
          getPopupContainer={(trigger) => trigger.parentNode}
        >
          {t("menus.jobsactions.duplicate")}
        </Popconfirm>
      </Menu.Item>
      <Menu.Item
        key="postbills"
        disabled={jobRO}
        onClick={() => {
          logImEXEvent("job_header_enter_bills");

          setBillEnterContext({
            actions: { refetch: refetch },
            context: {
              job: job,
            },
          });
        }}
      >
        {t("jobs.actions.postbills")}
      </Menu.Item>
      <Menu.Item
        disabled={!!job.date_invoiced || !jobInPostProduction || jobRO}
        key="closejob"
      >
        {!!job.date_invoiced || !jobInPostProduction || jobRO ? (
          t("menus.jobsactions.closejob")
        ) : (
          <Link
            to={{
              pathname: `/manage/jobs/${job.id}/close`,
            }}
          >
            {t("menus.jobsactions.closejob")}
          </Link>
        )}
      </Menu.Item>
      <JobsDetaiLheaderCsi job={job} />
      <Menu.Item
        key="jobcosting"
        onClick={() => {
          logImEXEvent("job_header_job_costing");

          setJobCostingContext({
            actions: { refetch: refetch },
            context: {
              jobId: job.id,
            },
          });
        }}
      >
        {t("jobs.labels.jobcosting")}
      </Menu.Item>
    </Menu>
  );
  return (
    <Dropdown
      className="imex-flex-row__margin"
      overlay={statusmenu}
      trigger={["click"]}
      key="changestatus"
    >
      <Button>
        {t("general.labels.actions")} <DownCircleFilled />
      </Button>
    </Dropdown>
  );
}
export default connect(
  mapStateToProps,
  mapDispatchToProps
)(JobsDetailHeaderActions);