Added a delete in-progress time ticket button. BOD-183

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

@@ -16,6 +16,7 @@ import { connect } from "react-redux";
 import { createStructuredSelector } from "reselect";
 import { selectBodyshop } from "../../redux/user/user.selectors";
 import { selectTechnician } from "../../redux/tech/tech.selectors";
+import TechJobClockoutDelete from "../tech-job-clock-out-delete/tech-job-clock-out-delete.component";
 const mapStateToProps = createStructuredSelector({
   bodyshop: selectBodyshop,
   technician: selectTechnician,
@@ -114,6 +115,7 @@ export function TechClockOffButton({
           <Button type="primary" htmlType="submit">
             {t("general.actions.save")}
           </Button>
+          <TechJobClockoutDelete timeTicketId={timeTicketId} />
         </Form>
       </div>
     </Card>

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

@@ -0,0 +1,40 @@
+import React from "react";
+import { Popconfirm, notification } from "antd";
+import { DeleteFilled } from "@ant-design/icons";
+import { DELETE_TIME_TICKET } from "../../graphql/timetickets.queries";
+import { useTranslation } from "react-i18next";
+import { useMutation } from "@apollo/react-hooks";
+
+export default function TechJobClockoutDelete({ timeTicketId }) {
+  const [deleteTimeTicket] = useMutation(DELETE_TIME_TICKET);
+  const { t } = useTranslation();
+  const handleDelete = async () => {
+    const result = await deleteTimeTicket({
+      variables: { id: timeTicketId },
+      refetchQueries: ["QUERY_ACTIVE_TIME_TICKETS"],
+    });
+
+    if (!!result.errors) {
+      notification["error"]({
+        message: t("timetickets.errors.deleting", {
+          message: JSON.stringify(result.errors),
+        }),
+      });
+    } else {
+      notification["success"]({
+        message: t("timetickets.successes.deleted"),
+      });
+    }
+  };
+
+  return (
+    <Popconfirm
+      title={t("timetickets.labels.deleteconfirm")}
+      okButtonProps={{ type: "danger" }}
+      okText={t("general.actions.delete")}
+      onConfirm={handleDelete}
+    >
+      <DeleteFilled style={{ margin: "1rem", color: "red" }} />
+    </Popconfirm>
+  );
+}