Added Backordered parts eta to parts order list BOD-215

client/src/components/parts-order-line-backorder-button/parts-order-line-backorder-button.component.jsx

@@ -1,6 +1,6 @@
 import React, { useState } from "react";
 import { useTranslation } from "react-i18next";
-import { Button, notification } from "antd";
+import { Button, notification, DatePicker, Popover } from "antd";
 import { useMutation } from "@apollo/react-hooks";
 import { MUTATION_BACKORDER_PART_LINE } from "../../graphql/parts-orders.queries";
 import { selectBodyshop } from "../../redux/user/user.selectors";
@@ -18,6 +18,8 @@ export function PartsOrderLineBackorderButton({
   jobLineId,
   bodyshop,
 }) {
+  const [visibility, setVisibility] = useState(false);
+  const [eta, setEta] = useState(null);
   const [loading, setLoading] = useState(false);
   const [backorderLine] = useMutation(MUTATION_BACKORDER_PART_LINE);
   const { t } = useTranslation();
@@ -25,17 +27,26 @@ export function PartsOrderLineBackorderButton({
   const isAlreadyBackordered =
     bodyshop.md_order_statuses.default_bo === partsOrderStatus;
 
-  const handleOnClick = async () => {
+  const handleSave = async () => {
     setLoading(true);
     logImEXEvent("job_parts_backorder");
 
+    const partsOrder = {
+      status: isAlreadyBackordered
+        ? bodyshop.md_order_statuses.default_received || "Received*"
+        : bodyshop.md_order_statuses.default_bo || "Backordered*",
+    };
+    if (!isAlreadyBackordered) {
+      partsOrder.backordered_on = new Date();
+      partsOrder.backordered_eta = eta;
+    }
+
     const result = await backorderLine({
       variables: {
         jobLineId,
         partsLineId,
-        status: isAlreadyBackordered
-          ? bodyshop.md_order_statuses.default_received || "Received*"
-          : bodyshop.md_order_statuses.default_bo || "Backordered*",
+        partsOrder: partsOrder,
+        status: partsOrder.status,
       },
     });
 
@@ -46,16 +57,39 @@ export function PartsOrderLineBackorderButton({
         }),
       });
     }
-
+    setEta(null);
+    setVisibility(false);
     setLoading(false);
   };
 
+  const handlePopover = (e) => {
+    if (isAlreadyBackordered) {
+      handleSave();
+      //Receive the part.
+    } else {
+      //Show the date selector to back order the part.
+      setVisibility(true);
+    }
+  };
+
+  const popContent = (
+    <div>
+      <DatePicker onChange={(e) => setEta(e)} />
+      <Button type="primary" disabled={eta === null} onClick={handleSave}>
+        {t("parts_orders.actions.backordered")}
+      </Button>
+      <Button onClick={() => setVisibility(false)}>Close</Button>
+    </div>
+  );
+
   return (
-    <Button loading={loading} onClick={handleOnClick}>
-      {isAlreadyBackordered
-        ? t("parts_orders.actions.receive")
-        : t("parts_orders.actions.backordered")}
-    </Button>
+    <Popover destroyTooltipOnHide content={popContent} visible={visibility}>
+      <Button loading={loading} onClick={handlePopover}>
+        {isAlreadyBackordered
+          ? t("parts_orders.actions.receive")
+          : t("parts_orders.actions.backordered")}
+      </Button>
+    </Popover>
   );
 }