bodyshop/client/src/components/time-ticket-task-modal/time-ticket-task-modal.container.jsx

import React, { useEffect } from "react";

import { useLazyQuery, useMutation, useQuery } from "@apollo/client";
import { Form, Modal, notification } from "antd";
import Dinero from "dinero.js";
import _ from "lodash";
import moment from "moment";
import { useTranslation } from "react-i18next";
import { connect } from "react-redux";
import { createStructuredSelector } from "reselect";
import { QUERY_ACTIVE_EMPLOYEES } from "../../graphql/employees.queries";
import { GET_JOB_INFO_DRAW_CALCULATIONS } from "../../graphql/jobs-lines.queries";
import { INSERT_NEW_TIME_TICKET } from "../../graphql/timetickets.queries";
import { toggleModalVisible } from "../../redux/modals/modals.actions";
import { selectTimeTicketTasks } from "../../redux/modals/modals.selectors";
import { selectBodyshop } from "../../redux/user/user.selectors";
import TimeTicketTaskModalComponent from "./time-ticket-task-modal.component";
import { INSERT_NEW_TT_APPROVALS } from "../../graphql/tt-approvals.queries";

const mapStateToProps = createStructuredSelector({
  timeTicketTasksModal: selectTimeTicketTasks,
  bodyshop: selectBodyshop,
});
const mapDispatchToProps = (dispatch) => ({
  toggleModalVisible: () => dispatch(toggleModalVisible("timeTicketTask")),
});
export default connect(
  mapStateToProps,
  mapDispatchToProps
)(TimeTickeTaskModalContainer);

export function TimeTickeTaskModalContainer({
  bodyshop,
  timeTicketTasksModal,
  toggleModalVisible,
}) {
  const [form] = Form.useForm();
  const { context, visible } = timeTicketTasksModal;
  const { data: EmployeeAutoCompleteData } = useQuery(QUERY_ACTIVE_EMPLOYEES, {
    skip: !visible,
    fetchPolicy: "network-only",
    nextFetchPolicy: "network-only",
  });

  const { t } = useTranslation();
  const [insertTimeTickets] = useMutation(INSERT_NEW_TIME_TICKET);
  const [insertTimeTicketApproval] = useMutation(INSERT_NEW_TT_APPROVALS);
  const [queryJobInfo, { called, loading, data: lineTicketData }] =
    useLazyQuery(GET_JOB_INFO_DRAW_CALCULATIONS, {
      fetchPolicy: "network-only",
      nextFetchPolicy: "network-only",
    });

  async function handleFinish(values) {
    console.log(
      "🚀 ~ file: time-ticket-task-modal.container.jsx:55 ~ handleFinish ~ values:",
      values
    );
    try {
      if (true) {
        const result = await insertTimeTicketApproval({
          variables: {
            timeTicketInput: values.timetickets.map((ticket) => ({
              ..._.omit(ticket, "pay"),
              bodyshopid: bodyshop.id,
            })),
          },
        });
        if (result.errors) {
          notification.open({
            type: "error",
            message: t("timetickets.errors.creating", {
              message: JSON.stringify(result.errors),
            }),
          });
        } else {
          notification.open({
            type: "success",
            message: t("timetickets.successes.created"),
          });
          form.resetFields();
          toggleModalVisible();
        }
      } else {
        const result = await insertTimeTickets({
          variables: {
            timeTicketInput: values.timetickets.map((ticket) =>
              _.omit(ticket, "pay")
            ),
          },
        });
        if (result.errors) {
          notification.open({
            type: "error",
            message: t("timetickets.errors.creating", {
              message: JSON.stringify(result.errors),
            }),
          });
        } else {
          notification.open({
            type: "success",
            message: t("timetickets.successes.created"),
          });
          toggleModalVisible();
        }
      }
    } catch (error) {
    } finally {
    }
  }

  useEffect(() => {
    if (visible && context.jobid) {
      queryJobInfo({ variables: { id: context.jobid } });
    }
  }, [context.jobid, queryJobInfo, visible]);

  const calculateTimeTickets = (presetMemo) => {
    const formData = form.getFieldsValue();
    if (
      !formData.jobid ||
      !formData.employeeteamid ||
      !formData.hourstype ||
      formData.hourstype.length === 0 ||
      !formData.percent ||
      !lineTicketData
    ) {
      return;
    }

    let data = [];
    let eligibleHours = 0;

    const theTeam = JSON.parse(formData.employeeteamid);

    if (theTeam) {
      formData.hourstype.forEach((hourstype) => {
        eligibleHours =
          lineTicketData.joblines.reduce(
            (acc, val) =>
              acc + (hourstype === val.mod_lbr_ty ? val.mod_lb_hrs : 0),
            0
          ) * (formData.percent / 100 || 0);

        theTeam.employee_team_members.forEach((e) => {
          const newTicket = {
            employeeid: e.employeeid,
            bodyshopid: bodyshop.id,
            date: moment().format("YYYY-MM-DD"),
            jobid: formData.jobid,
            rate: e.labor_rates[hourstype],
            actualhrs: 0,
            memo: typeof presetMemo === "string" ? presetMemo : "",
            flat_rate: true,
            ciecacode: hourstype,
            cost_center:
              bodyshop.md_responsibility_centers.defaults.costs[hourstype],
            productivehrs:
              Math.round(eligibleHours * 100 * (e.percentage / 100)) / 100,
            pay: Dinero({
              amount: Math.round((e.labor_rates[hourstype] || 0) * 100),
            })
              .multiply(
                Math.round(eligibleHours * 100 * (e.percentage / 100)) / 100
              )
              .toFormat("$0.00"),
          };
          data.push(newTicket);
        });
      });

      form.setFieldsValue({
        timetickets: data.filter((d) => d.productivehrs > 0),
      });
      form.validateFields();
    }
  };

  return (
    <Modal
      destroyOnClose
      open={visible}
      onCancel={() => {
        toggleModalVisible();
        form.resetFields();
      }}
      width="80%"
      onOk={() => form.submit()}
    >
      <Form
        autoComplete={"off"}
        form={form}
        layout="vertical"
        onFinish={handleFinish}
        initialValues={context}
      >
        <TimeTicketTaskModalComponent
          form={form}
          employeeAutoCompleteOptions={
            EmployeeAutoCompleteData && EmployeeAutoCompleteData.employees
          }
          lineTicketData={lineTicketData}
          lineTicketLoading={loading}
          lineTicketCalled={called}
          calculateTimeTickets={calculateTimeTickets}
          queryJobInfo={queryJobInfo}
        />
      </Form>
    </Modal>
  );
}