From c29337c469b631cd418412de5579dd636a0f3fc5 Mon Sep 17 00:00:00 2001
From: Patrick Fic <>
Date: Tue, 16 Mar 2021 12:27:07 -0700
Subject: [PATCH] IO-768 Update Backorder Parts ETA

---
 .../parts-order-backorder-eta.component.jsx   | 91 +++++++++++++++++++
 .../parts-order-list-table.component.jsx      | 11 ++-
 client/src/graphql/parts-orders.queries.js    | 18 ++++
 3 files changed, 119 insertions(+), 1 deletion(-)
 create mode 100644 client/src/components/parts-order-backorder-eta/parts-order-backorder-eta.component.jsx

diff --git a/client/src/components/parts-order-backorder-eta/parts-order-backorder-eta.component.jsx b/client/src/components/parts-order-backorder-eta/parts-order-backorder-eta.component.jsx
new file mode 100644
index 000000000..5df9127e9
--- /dev/null
+++ b/client/src/components/parts-order-backorder-eta/parts-order-backorder-eta.component.jsx
@@ -0,0 +1,91 @@
+import { useMutation } from "@apollo/client";
+import { Button, Form, notification, Popover, Spin } from "antd";
+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 { MUTATION_UPDATE_BO_ETA } from "../../graphql/parts-orders.queries";
+import { selectBodyshop } from "../../redux/user/user.selectors";
+import { DateFormatter } from "../../utils/DateFormatter";
+import FormDatePicker from "../form-date-picker/form-date-picker.component";
+import { CalendarFilled } from "@ant-design/icons";
+const mapStateToProps = createStructuredSelector({
+  bodyshop: selectBodyshop,
+});
+
+export function PartsOrderBackorderEta({
+  backordered_eta,
+  partsOrderStatus,
+  partsLineId,
+  jobLineId,
+  disabled,
+  bodyshop,
+}) {
+  const [visibility, setVisibility] = useState(false);
+  const [loading, setLoading] = useState(false);
+  const [updateBoDate] = useMutation(MUTATION_UPDATE_BO_ETA);
+  const { t } = useTranslation();
+  const [form] = Form.useForm();
+
+  const isAlreadyBackordered =
+    bodyshop.md_order_statuses.default_bo === partsOrderStatus;
+
+  const handleFinish = async (values) => {
+    setLoading(true);
+    logImEXEvent("job_parts_backorder_update_eta");
+
+    const result = await updateBoDate({
+      variables: {
+        partsLineId,
+        partsOrder: { backordered_eta: values.eta },
+      },
+    });
+
+    if (!!result.errors) {
+      notification["error"]({
+        message: t("parts_orders.errors.backordering", {
+          message: JSON.stringify(result.errors),
+        }),
+      });
+    }
+
+    setVisibility(false);
+    setLoading(false);
+  };
+
+  const handlePopover = (e) => {
+    setVisibility(true);
+  };
+
+  const popContent = (
+    <div>
+      <Form form={form} onFinish={handleFinish}>
+        <Form.Item name="eta">
+          <FormDatePicker />
+        </Form.Item>
+        <Button type="primary" onClick={() => form.submit()}>
+          {t("general.actions.save")}
+        </Button>
+        <Button onClick={() => setVisibility(false)}>Close</Button>
+      </Form>
+    </div>
+  );
+
+  return (
+    <Popover
+      destroyTooltipOnHide
+      content={popContent}
+      visible={visibility}
+      disabled={disabled}
+    >
+      <DateFormatter>{backordered_eta}</DateFormatter>
+      {isAlreadyBackordered && (
+        <CalendarFilled style={{ cursor: "pointer" }} onClick={handlePopover} />
+      )}
+      {loading && <Spin size="small" />}
+    </Popover>
+  );
+}
+
+export default connect(mapStateToProps, null)(PartsOrderBackorderEta);
diff --git a/client/src/components/parts-order-list-table/parts-order-list-table.component.jsx b/client/src/components/parts-order-list-table/parts-order-list-table.component.jsx
index 3cc442633..78552bb98 100644
--- a/client/src/components/parts-order-list-table/parts-order-list-table.component.jsx
+++ b/client/src/components/parts-order-list-table/parts-order-list-table.component.jsx
@@ -14,6 +14,7 @@ import CurrencyFormatter from "../../utils/CurrencyFormatter";
 import { DateFormatter } from "../../utils/DateFormatter";
 import { alphaSort } from "../../utils/sorters";
 import { TemplateList } from "../../utils/TemplateConstants";
+import PartsOrderBackorderEta from "../parts-order-backorder-eta/parts-order-backorder-eta.component";
 import PartsOrderLineBackorderButton from "../parts-order-line-backorder-button/parts-order-line-backorder-button.component";
 import PartsReceiveModalContainer from "../parts-receive-modal/parts-receive-modal.container";
 import PrintWrapper from "../print-wrapper/print-wrapper.component";
@@ -245,7 +246,15 @@ export function PartsOrderListTableComponent({
         title: t("parts_orders.fields.backordered_eta"),
         dataIndex: "backordered_eta",
         key: "backordered_eta",
-        render: (text, record) => <DateFormatter>{text}</DateFormatter>,
+        render: (text, record) => (
+          <PartsOrderBackorderEta
+            backordered_eta={record.backordered_eta}
+            disabled={jobRO}
+            partsOrderStatus={record.status}
+            partsLineId={record.id}
+            jobLineId={record.job_line_id}
+          />
+        ),
       },
       {
         title: t("general.labels.actions"),
diff --git a/client/src/graphql/parts-orders.queries.js b/client/src/graphql/parts-orders.queries.js
index 65de1f573..3559b4bc7 100644
--- a/client/src/graphql/parts-orders.queries.js
+++ b/client/src/graphql/parts-orders.queries.js
@@ -10,6 +10,24 @@ export const INSERT_NEW_PARTS_ORDERS = gql`
   }
 `;
 
+export const MUTATION_UPDATE_BO_ETA = gql`
+  mutation MUTATION_UPDATE_BO_ETA(
+    $partsLineId: uuid!
+    $partsOrder: parts_order_lines_set_input
+  ) {
+    update_parts_order_lines(
+      where: { id: { _eq: $partsLineId } }
+      _set: $partsOrder
+    ) {
+      returning {
+        status
+        backordered_eta
+        id
+      }
+    }
+  }
+`;
+
 export const MUTATION_BACKORDER_PART_LINE = gql`
   mutation MUTATION_BACKORDER_PART_LINE(
     $jobLineId: uuid!