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

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 { toggleModalVisible } from "../../redux/modals/modals.actions";
import { selectInvoiceEnterModal } from "../../redux/modals/modals.selectors";
import {
  selectBodyshop,
  selectCurrentUser,
} from "../../redux/user/user.selectors";
import { handleUpload } from "../documents-upload/documents-upload.utility";
import InvoiceFormContainer from "../invoice-form/invoice-form.container";
import { UPDATE_JOB_LINE_STATUS } from "../../graphql/jobs-lines.queries";

const mapStateToProps = createStructuredSelector({
  invoiceEnterModal: selectInvoiceEnterModal,
  bodyshop: selectBodyshop,
  currentUser: selectCurrentUser,
});
const mapDispatchToProps = (dispatch) => ({
  toggleModalVisible: () => dispatch(toggleModalVisible("invoiceEnter")),
});

function InvoiceEnterModalContainer({
  invoiceEnterModal,
  toggleModalVisible,
  bodyshop,
  currentUser,
}) {
  const [form] = Form.useForm();
  const { t } = useTranslation();
  const [enterAgain, setEnterAgain] = useState(false);
  const [insertInvoice] = useMutation(INSERT_NEW_INVOICE);
  const [updateJobLines] = useMutation(UPDATE_JOB_LINE_STATUS);
  const [loading, setLoading] = useState(false);

  const handleFinish = (values) => {
    setLoading(true);
    const { upload, location, ...remainingValues } = values;
    insertInvoice({
      variables: {
        invoice: [
          Object.assign({}, remainingValues, {
            invoicelines: {
              data:
                remainingValues.invoicelines &&
                remainingValues.invoicelines.map((i) => {
                  return {
                    ...i,
                    joblineid: i.joblineid === "noline" ? null : i.joblineid,
                  };
                }),
            },
          }),
        ],
      },
    })
      .then((r) => {
        const invoiceId = r.data.insert_invoices.returning[0].id;

        updateJobLines({
          variables: {
            ids: remainingValues.invoicelines
              .filter((il) => il.joblineid !== "noline")
              .map((li) => li.joblineid),
            status: bodyshop.md_order_statuses.default_received || "Received*",
            location: location,
          },
        }).then((joblineresult) => {
          /////////////////////////
          if (upload && upload.length > 0) {
            //insert Each of the documents?
            upload.forEach((u) => {
              handleUpload(
                { file: u.originFileObj },
                {
                  bodyshop: bodyshop,
                  uploaded_by: currentUser.email,
                  jobId: values.jobid,
                  invoiceId: invoiceId,
                  tagsArray: null,
                  callback: null,
                }
              );
            });
          }
          ///////////////////////////
          setLoading(false);
          notification["success"]({
            message: t("invoices.successes.created"),
          });
          if (invoiceEnterModal.actions.refetch)
            invoiceEnterModal.actions.refetch();

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

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

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

  useEffect(() => {
    if (invoiceEnterModal.visible) form.resetFields();
  }, [invoiceEnterModal.visible, form]);

  return (
    <Modal
      title={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 loading={loading} onClick={() => form.submit()}>
            {t("general.actions.save")}
          </Button>
          {invoiceEnterModal.context && invoiceEnterModal.context.id ? null : (
            <Button
              type="primary"
              loading={loading}
              onClick={() => {
                setEnterAgain(true);
              }}
            >
              {t("general.actions.saveandnew")}
            </Button>
          )}
        </span>
      }
      destroyOnClose
    >
      <Form
        onFinish={handleFinish}
        autoComplete={"off"}
        form={form}
        onFinishFailed={() => {
          setEnterAgain(false);
        }}
        initialValues={{
          ...invoiceEnterModal.context.invoice,
          jobid:
            (invoiceEnterModal.context.job &&
              invoiceEnterModal.context.job.id) ||
            null,
          federal_tax_rate: bodyshop.invoice_tax_rates.federal_tax_rate || 0,
          state_tax_rate: bodyshop.invoice_tax_rates.state_tax_rate || 0,
          local_tax_rate: bodyshop.invoice_tax_rates.local_tax_rate || 0,
        }}
      >
        <InvoiceFormContainer form={form} />
      </Form>
    </Modal>
  );
}

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