bodyshop/client/src/components/tech-job-clock-in-form/tech-job-clock-in-form.container.jsx

import { useMutation } from "@apollo/client/react";
import { Button, Card, Form, Space } from "antd";
import axios from "axios";
import dayjs from "../../utils/day";
import { useState } from "react";
import { useTranslation } from "react-i18next";
import { connect } from "react-redux";
import { createStructuredSelector } from "reselect";
import { INSERT_NEW_TIME_TICKET } from "../../graphql/timetickets.queries";
import { setModalContext } from "../../redux/modals/modals.actions";
import { selectTechnician } from "../../redux/tech/tech.selectors";
import { selectBodyshop, selectCurrentUser } from "../../redux/user/user.selectors";
import TechJobPrintTickets from "../tech-job-print-tickets/tech-job-print-tickets.component";
import TechClockInComponent from "./tech-job-clock-in-form.component";
import { useTreatmentsWithConfig } from "@splitsoftware/splitio-react";
import { useNotification } from "../../contexts/Notifications/notificationContext.jsx";

const mapStateToProps = createStructuredSelector({
  technician: selectTechnician,
  bodyshop: selectBodyshop,
  currentUser: selectCurrentUser
});
const mapDispatchToProps = (dispatch) => ({
  setTimeTicketContext: (context) => dispatch(setModalContext({ context: context, modal: "timeTicket" }))
});

export function TechClockInContainer({ setTimeTicketContext, technician, bodyshop, currentUser }) {
  const {
    treatments: { Enhanced_Payroll }
  } = useTreatmentsWithConfig({
    attributes: {},
    names: ["Enhanced_Payroll"],
    splitKey: bodyshop.imexshopid
  });

  const [form] = Form.useForm();
  const [loading, setLoading] = useState(false);
  const [insertTimeTicket] = useMutation(INSERT_NEW_TIME_TICKET, {
    refetchQueries: ["QUERY_ACTIVE_TIME_TICKETS"]
  });
  const { t } = useTranslation();
  const notification = useNotification();

  const emps = bodyshop.employees.filter((e) => e.id === technician?.id)[0];

  const TechForm = () => {
    if (technician) {
      return (
        <Form form={form} layout="vertical" onFinish={handleFinish}>
          <TechClockInComponent form={form} />
        </Form>
      );
    } else {
      return <div />;
    }
  };

  const handleFinish = async (values) => {
    setLoading(true);
    const theTime = (await axios.post("/utils/time")).data;
    const result = await insertTimeTicket({
      variables: {
        timeTicketInput: [
          {
            bodyshopid: bodyshop.id,
            employeeid: technician.id,
            date:
              typeof bodyshop.timezone === "string"
                ? // TODO: Client Update - This may be broken
                  dayjs.tz(theTime, bodyshop.timezone).format("YYYY-MM-DD")
                : typeof bodyshop.timezone === "number"
                  ? dayjs(theTime).format("YYYY-MM-DD").utcOffset(bodyshop.timezone)
                  : dayjs(theTime).format("YYYY-MM-DD"),
            clockon: dayjs(theTime),
            jobid: values.jobid,
            cost_center: values.cost_center,
            ciecacode:
              bodyshop.cdk_dealerid ||
              bodyshop.pbs_serialnumber ||
              bodyshop.rr_dealerid ||
              Enhanced_Payroll.treatment === "on"
                ? values.cost_center
                : Object.keys(bodyshop.md_responsibility_centers.defaults.costs).find((key) => {
                    return bodyshop.md_responsibility_centers.defaults.costs[key] === values.cost_center;
                  }),
            created_by: currentUser.email.concat(
              " | ",
              technician.employee_number.concat(" ", technician.first_name, " ", technician.last_name).trim()
            )
          }
        ]
      }
    });

    if (result.errors) {
      notification["error"]({
        message: t("timetickets.errors.clockingin", {
          message: JSON.stringify(result.errors)
        })
      });
    } else {
      notification["success"]({
        message: t("timetickets.successes.clockedin")
      });
    }
    form.resetFields();
    setLoading(false);
  };

  return (
    <Card
      title={t("timetickets.labels.clockintojob")}
      extra={
        <Space wrap>
          <Button
            onClick={() => {
              setTimeTicketContext({
                actions: {},
                context: {
                  timeticket: {
                    employeeid: technician.id,
                    flat_rate: emps.flat_rate
                  },
                  created_by: currentUser.email.concat(
                    " | ",
                    technician.employee_number.concat(" ", technician.first_name, " ", technician.last_name).trim()
                  )
                }
              });
            }}
          >
            {t("timetickets.actions.enter")}
          </Button>
          <TechJobPrintTickets attendacePrint={false} />
          <Button type="primary" onClick={() => form.submit()} loading={loading}>
            {t("timetickets.actions.clockin")}
          </Button>
        </Space>
      }
    >
      <TechForm />
    </Card>
  );
}

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