bodyshop/client/src/components/tech-job-clock-out-button/tech-job-clock-out-button.component.jsx

import { useMutation } from "@apollo/client";
import { Button, Card, Form, notification, Popover, Select } from "antd";
import axios from "axios";
import React, { useState } from "react";
import { useTranslation } from "react-i18next";
import { connect } from "react-redux";
import { createStructuredSelector } from "reselect";
import { logImEXEvent } from "../../firebase/firebase.utils";
import { UPDATE_TIME_TICKET } from "../../graphql/timetickets.queries";
import { selectTechnician } from "../../redux/tech/tech.selectors";
import { selectBodyshop } from "../../redux/user/user.selectors";
import InputNumberCalculator from "../form-input-number-calculator/form-input-number-calculator.component";
import TechJobClockoutDelete from "../tech-job-clock-out-delete/tech-job-clock-out-delete.component";

const mapStateToProps = createStructuredSelector({
  bodyshop: selectBodyshop,
  technician: selectTechnician,
});

export function TechClockOffButton({
  bodyshop,
  technician,
  timeTicketId,
  completedCallback,
  isShiftTicket,
  otherBtnProps,
}) {
  const [loading, setLoading] = useState(false);
  const [updateTimeticket] = useMutation(UPDATE_TIME_TICKET);
  const [form] = Form.useForm();

  const { t } = useTranslation();
  const emps = bodyshop.employees.filter(
    (e) => e.id === (technician && technician.id)
  )[0];

  console.log(emps && emps.rates);

  const handleFinish = async (values) => {
    logImEXEvent("tech_clock_out_job");

    setLoading(true);
    const result = await updateTimeticket({
      variables: {
        timeticketId: timeTicketId,
        timeticket: {
          clockoff: (await axios.post("/utils/time")).data,
          ...values,
        },
      },
    });

    if (!!result.errors) {
      notification["error"]({
        message: t("timetickets.errors.clockingout", {
          message: JSON.stringify(result.errors),
        }),
      });
    } else {
      notification["success"]({
        message: t("timetickets.successes.clockedout"),
      });
    }
    setLoading(false);
    if (completedCallback) completedCallback();
  };

  const overlay = (
    <Card>
      <div>
        <Form
          form={form}
          layout="vertical"
          onFinish={handleFinish}
          initialValues={{
            cost_center: isShiftTicket
              ? "timetickets.labels.shift"
              : technician
              ? technician.cost_center
              : null,
          }}
        >
          {!isShiftTicket ? (
            <div>
              <Form.Item
                label={t("timetickets.fields.actualhrs")}
                name="actualhrs"
                rules={[
                  {
                    required: true,
                    message: t("general.validation.required"),
                  },
                ]}
              >
                <InputNumberCalculator precision={1} />
              </Form.Item>
              <Form.Item
                label={t("timetickets.fields.productivehrs")}
                name="productivehrs"
                rules={[
                  {
                    required: true,
                    message: t("general.validation.required"),
                  },
                ]}
              >
                <InputNumberCalculator precision={1} />
              </Form.Item>
            </div>
          ) : null}

          <Form.Item
            name="cost_center"
            label={t("timetickets.fields.cost_center")}
            rules={[
              {
                required: true,
                message: t("general.validation.required"),
              },
            ]}
          >
            <Select disabled={isShiftTicket}>
              {isShiftTicket ? (
                <Select.Option value="timetickets.labels.shift">
                  {t("timetickets.labels.shift")}
                </Select.Option>
              ) : (
                emps &&
                emps.rates.map((item) => (
                  <Select.Option key={item.cost_center}>
                    {item.cost_center}
                  </Select.Option>
                ))
              )}
            </Select>
          </Form.Item>
          <Button type="primary" htmlType="submit" loading={loading}>
            {t("general.actions.save")}
          </Button>
          <TechJobClockoutDelete
            completedCallback={completedCallback}
            timeTicketId={timeTicketId}
          />
        </Form>
      </div>
    </Card>
  );

  return (
    <Popover content={overlay} trigger="click">
      <Button loading={loading} {...otherBtnProps}>
        {t("timetickets.actions.clockout")}
      </Button>
    </Popover>
  );
}
export default connect(mapStateToProps, null)(TechClockOffButton);