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

import { useLazyQuery, useMutation, useQuery } from "@apollo/react-hooks";
import { Form, Modal, notification, Button } from "antd";
import React, { useState, useEffect } 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";

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,
}) {
  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: {
        invoice: [
          Object.assign({}, values, {
            invoicelines: { data: values.invoicelines },
          }),
        ],
      },
    })
      .then((r) => {
        notification["success"]({
          message: t("invoices.successes.created"),
        });
        if (invoiceEnterModal.actions.refetch)
          invoiceEnterModal.actions.refetch();

        if (enterAgain) {
          form.resetFields();
        } else {
          toggleModalVisible();
        }
        setEnterAgain(false);
      })
      .catch((error) => {
        setEnterAgain(false);
        notification["error"]({
          message: t("invoices.errors.creating", {
            message: JSON.stringify(error),
          }),
        });
      });
  };

  const handleCancel = () => {
    toggleModalVisible();
  };

  useEffect(() => {
    if (enterAgain) form.submit();
  }, [enterAgain, form]);

  return (
    <Modal
      title={
        invoiceEnterModal.context && invoiceEnterModal.context.id
          ? t("invoices.labels.edit")
          : t("invoices.labels.new")
      }
      width={"90%"}
      visible={invoiceEnterModal.visible}
      okText={t("general.actions.save")}
      onOk={() => form.submit()}
      onCancel={handleCancel}
      afterClose={() => form.resetFields()}
      footer={
        <span>
          <Button onClick={handleCancel}>{t("general.actions.cancel")}</Button>
          <Button onClick={() => form.submit()}>
            {t("general.actions.save")}
          </Button>
          {invoiceEnterModal.context && invoiceEnterModal.context.id ? null : (
            <Button
              type="primary"
              onClick={() => {
                setEnterAgain(true);
              }}
            >
              {t("general.actions.saveandnew")}
            </Button>
          )}
        </span>
      }
      destroyOnClose
    >
      <Form
        onFinish={handleFinish}
        autoComplete={"off"}
        form={form}
        onFinishFailed={() => {
          setEnterAgain(false);
          console.log("Finish failed");
        }}
        initialValues={{
          jobid:
            (invoiceEnterModal.context.job &&
              invoiceEnterModal.context.job.id) ||
            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}
        />
      </Form>
    </Modal>
  );
}

export default connect(
  mapStateToProps,
  mapDispatchToProps
)(InvoiceEnterModalContainer);