Refactored to use invoice form for modal + detail edit page. BOD-634

client/src/components/invoice-enter-modal/invoice-enter-modal.container.jsx

@@ -1,61 +1,27 @@
-import { useLazyQuery, useMutation, useQuery } from "@apollo/react-hooks";
-import { Form, Modal, notification, Button } from "antd";
-import React, { useState, useEffect } from "react";
+import { useMutation } from "@apollo/react-hooks";
+import { Button, Form, Modal, notification } from "antd";
+import React, { useEffect, useState } from "react";
 import { useTranslation } from "react-i18next";
 import { connect } from "react-redux";
 import { createStructuredSelector } from "reselect";
 import { INSERT_NEW_INVOICE } from "../../graphql/invoices.queries";
-import { GET_JOB_LINES_TO_ENTER_INVOICE } from "../../graphql/jobs-lines.queries";
-import { ACTIVE_JOBS_FOR_AUTOCOMPLETE } from "../../graphql/jobs.queries";
-import { SEARCH_VENDOR_AUTOCOMPLETE } from "../../graphql/vendors.queries";
 import { toggleModalVisible } from "../../redux/modals/modals.actions";
 import { selectInvoiceEnterModal } from "../../redux/modals/modals.selectors";
-import { selectBodyshop } from "../../redux/user/user.selectors";
-import InvoiceEnterModalComponent from "./invoice-enter-modal.component";
-import { setModalContext } from "../../redux/modals/modals.actions";
+import InvoiceFormContainer from "../invoice-form/invoice-form.container";
 
 const mapStateToProps = createStructuredSelector({
   invoiceEnterModal: selectInvoiceEnterModal,
-  bodyshop: selectBodyshop,
 });
 const mapDispatchToProps = (dispatch) => ({
   toggleModalVisible: () => dispatch(toggleModalVisible("invoiceEnter")),
-  setInvoiceEnterContext: (context) =>
-    dispatch(setModalContext({ context: context, modal: "invoiceEnter" })),
 });
 
-function InvoiceEnterModalContainer({
-  invoiceEnterModal,
-  toggleModalVisible,
-  bodyshop,
-  setInvoiceEnterContext,
-}) {
+function InvoiceEnterModalContainer({ invoiceEnterModal, toggleModalVisible }) {
   const [form] = Form.useForm();
   const { t } = useTranslation();
   const [enterAgain, setEnterAgain] = useState(false);
   const [insertInvoice] = useMutation(INSERT_NEW_INVOICE);
 
-  const { data: RoAutoCompleteData } = useQuery(ACTIVE_JOBS_FOR_AUTOCOMPLETE, {
-    fetchPolicy: "network-only",
-    variables: { statuses: bodyshop.md_ro_statuses.open_statuses || ["Open"] },
-    skip: !invoiceEnterModal.visible,
-  });
-
-  const { data: VendorAutoCompleteData } = useQuery(
-    SEARCH_VENDOR_AUTOCOMPLETE,
-    {
-      fetchPolicy: "network-only",
-      skip: !invoiceEnterModal.visible,
-    }
-  );
-
-  const [loadLines, { data: lineData }] = useLazyQuery(
-    GET_JOB_LINES_TO_ENTER_INVOICE,
-    {
-      fetchPolicy: "network-only",
-    }
-  );
-
   const handleFinish = (values) => {
     insertInvoice({
       variables: {
@@ -107,11 +73,7 @@ function InvoiceEnterModalContainer({
 
   return (
     <Modal
-      title={
-        invoiceEnterModal.context && invoiceEnterModal.context.id
-          ? t("invoices.labels.edit")
-          : t("invoices.labels.new")
-      }
+      title={t("invoices.labels.new")}
       width={"90%"}
       visible={invoiceEnterModal.visible}
       okText={t("general.actions.save")}
@@ -153,16 +115,7 @@ function InvoiceEnterModalContainer({
             null,
         }}
       >
-        <InvoiceEnterModalComponent
-          form={form}
-          roAutoCompleteOptions={RoAutoCompleteData && RoAutoCompleteData.jobs}
-          vendorAutoCompleteOptions={
-            VendorAutoCompleteData && VendorAutoCompleteData.vendors
-          }
-          loadLines={loadLines}
-          lineData={lineData ? lineData.joblines : null}
-          responsibilityCenters={bodyshop.md_responsibility_centers || null}
-        />
+        <InvoiceFormContainer form={form} />
       </Form>
     </Modal>
   );