IO-244 IOU Parts

client/src/components/job-create-iou/job-create-iou.component.jsx

@@ -0,0 +1,95 @@
+import { useApolloClient } from "@apollo/client";
+import { useTreatments } from "@splitsoftware/splitio-react";
+import { Button, notification, Popconfirm } from "antd";
+import React, { useState } from "react";
+import { useTranslation } from "react-i18next";
+import { connect } from "react-redux";
+import { useHistory } from "react-router";
+import { createStructuredSelector } from "reselect";
+import { UPDATE_JOB_LINES_IOU } from "../../graphql/jobs-lines.queries";
+import {
+  selectBodyshop,
+  selectCurrentUser,
+} from "../../redux/user/user.selectors";
+import { CreateIouForJob } from "../jobs-detail-header-actions/jobs-detail-header-actions.duplicate.util";
+const mapStateToProps = createStructuredSelector({
+  bodyshop: selectBodyshop,
+  currentUser: selectCurrentUser,
+});
+const mapDispatchToProps = (dispatch) => ({
+  //setUserLanguage: language => dispatch(setUserLanguage(language))
+});
+export default connect(mapStateToProps, mapDispatchToProps)(JobCreateIOU);
+
+export function JobCreateIOU({
+  bodyshop,
+  currentUser,
+  jobid,
+  selectedJobLines,
+}) {
+  const { t } = useTranslation();
+  const [loading, setLoading] = useState(false);
+  const client = useApolloClient();
+  const history = useHistory();
+
+  const { IOU_Tracking } = useTreatments(
+    ["IOU_Tracking"],
+    {},
+    bodyshop.imexshopid
+  );
+  if (IOU_Tracking.treatment !== "on") return null;
+
+  const handleCreateIou = async () => {
+    setLoading(true);
+    //Query all of the job details to recreate.
+    const iouId = await CreateIouForJob(
+      client,
+      jobid,
+      {
+        status: bodyshop.md_ro_statuses.default_open,
+        bodyshopid: bodyshop.id,
+        useremail: currentUser.email,
+      },
+      selectedJobLines
+    );
+    notification.open({
+      type: "success",
+      message: t("jobs.successes.ioucreated"),
+      onClick: () => history.push(`/manage/jobs/${iouId}`),
+    });
+    const selectedJobLinesIds = selectedJobLines.map((l) => l.id);
+    await client.mutate({
+      mutation: UPDATE_JOB_LINES_IOU,
+      variables: { ids: selectedJobLinesIds },
+      update(cache) {
+        cache.modify({
+          id: cache.identify(jobid),
+          fields: {
+            joblines(existingJobLines, { readField }) {
+              return existingJobLines.map((a) => {
+                if (!selectedJobLinesIds.includes(a.id)) return a;
+                return { ...a, ioucreated: true };
+              });
+            },
+          },
+        });
+      },
+    });
+
+    setLoading(false);
+  };
+
+  return (
+    <Popconfirm
+      title={t("jobs.labels.createiouwarning")}
+      onConfirm={handleCreateIou}
+    >
+      <Button
+        loading={loading}
+        disabled={!selectedJobLines || selectedJobLines.length === 0}
+      >
+        {t("jobs.actions.createiou")}
+      </Button>
+    </Popconfirm>
+  );
+}