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

import { useApolloClient, useMutation } from "@apollo/react-hooks";
import { Button, Form, Modal, notification } from "antd";
import _ from "lodash";
import React, { useEffect, useState } from "react";
import { useTranslation } from "react-i18next";
import { connect } from "react-redux";
import { createStructuredSelector } from "reselect";
import { INSERT_NEW_BILL } from "../../graphql/bills.queries";
import { UPDATE_JOB_LINE } from "../../graphql/jobs-lines.queries";
import {
  QUERY_JOB_LBR_ADJUSTMENTS,
  UPDATE_JOB,
} from "../../graphql/jobs.queries";
import { toggleModalVisible } from "../../redux/modals/modals.actions";
import { selectBillEnterModal } from "../../redux/modals/modals.selectors";
import {
  selectBodyshop,
  selectCurrentUser,
} from "../../redux/user/user.selectors";
import BillFormContainer from "../bill-form/bill-form.container";
import { handleUpload } from "../documents-upload/documents-upload.utility";

const mapStateToProps = createStructuredSelector({
  billEnterModal: selectBillEnterModal,
  bodyshop: selectBodyshop,
  currentUser: selectCurrentUser,
});
const mapDispatchToProps = (dispatch) => ({
  toggleModalVisible: () => dispatch(toggleModalVisible("billEnter")),
});

function BillEnterModalContainer({
  billEnterModal,
  toggleModalVisible,
  bodyshop,
  currentUser,
}) {
  const [form] = Form.useForm();
  const { t } = useTranslation();
  const [enterAgain, setEnterAgain] = useState(false);
  const [insertBill] = useMutation(INSERT_NEW_BILL);
  const [updateJobLines] = useMutation(UPDATE_JOB_LINE);
  const [loading, setLoading] = useState(false);
  const client = useApolloClient();

  const handleFinish = async (values) => {
    setLoading(true);
    const { upload, location, ...remainingValues } = values;

    let adjustmentsToInsert = {};

    const r1 = await insertBill({
      variables: {
        bill: [
          {
            ...remainingValues,
            billlines: {
              data:
                remainingValues.billlines &&
                remainingValues.billlines.map((i) => {
                  const {
                    deductfromlabor,
                    lbr_adjustment,
                    location: lineLocation,
                    ...restI
                  } = i;

                  if (deductfromlabor) {
                    adjustmentsToInsert[lbr_adjustment.mod_lbr_ty] =
                      (adjustmentsToInsert[lbr_adjustment.mod_lbr_ty] || 0) -
                      restI.actual_price / lbr_adjustment.rate;
                  }
                  return {
                    ...restI,
                    deductedfromlbr: deductfromlabor,
                    joblineid: i.joblineid === "noline" ? null : i.joblineid,
                  };
                }),
            },
          },
        ],
      },
    });
    console.log("adjustmentsToInsert", adjustmentsToInsert);
    const adjKeys = Object.keys(adjustmentsToInsert);
    if (adjKeys.length > 0) {
      //Query the adjustments, merge, and update them.
      const existingAdjustments = await client.query({
        query: QUERY_JOB_LBR_ADJUSTMENTS,
        variables: {
          id: values.jobid,
        },
      });

      const newAdjustments = _.cloneDeep(
        existingAdjustments.data.jobs_by_pk.lbr_adjustments
      );

      adjKeys.forEach((key) => {
        newAdjustments[key] =
          (newAdjustments[key] || 0) + adjustmentsToInsert[key];
      });

      const jobUpdate = client.mutate({
        mutation: UPDATE_JOB,
        variables: {
          jobId: values.jobid,
          job: { lbr_adjustments: newAdjustments },
        },
      });
      if (!!jobUpdate.errors) {
        notification["error"]({
          message: t("jobs.errors.saving", {
            message: JSON.stringify(jobUpdate.errors),
          }),
        });
      }
    }

    if (!!r1.errors) {
      setLoading(false);
      setEnterAgain(false);
      notification["error"]({
        message: t("bills.errors.creating", {
          message: JSON.stringify(r1.errors),
        }),
      });
    }

    const billId = r1.data.insert_bills.returning[0].id;

    await Promise.all(
      remainingValues.billlines
        .filter((il) => il.joblineid !== "noline")
        .map((li) => {
          return updateJobLines({
            variables: {
              lineId: li.joblineid,
              line: {
                location: li.location || location,
                status:
                  bodyshop.md_order_statuses.default_received || "Received*",
              },
            },
          });
        })
    );

    // await updateJobLines({
    //   variables: {
    //     ids: remainingValues.billlines
    //       .filter((il) => il.joblineid !== "noline")
    //       .map((li) => li.joblineid),
    //     status: bodyshop.md_order_statuses.default_received || "Received*",
    //     location: location,
    //   },
    // });

    /////////////////////////
    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,
            billId: billId,
            tagsArray: null,
            callback: null,
          }
        );
      });
    }
    ///////////////////////////
    setLoading(false);
    notification["success"]({
      message: t("bills.successes.created"),
    });
    if (billEnterModal.actions.refetch) billEnterModal.actions.refetch();

    if (enterAgain) {
      form.resetFields();
      form.setFieldsValue({ billlines: [] });
    } else {
      toggleModalVisible();
    }
    setEnterAgain(false);
  };

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

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

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

  return (
    <Modal
      title={t("bills.labels.new")}
      width={"90%"}
      visible={billEnterModal.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>
          {billEnterModal.context && billEnterModal.context.id ? null : (
            <Button
              type="primary"
              loading={loading}
              onClick={() => {
                setEnterAgain(true);
              }}
            >
              {t("general.actions.saveandnew")}
            </Button>
          )}
        </span>
      }
      destroyOnClose
    >
      <Form
        onFinish={handleFinish}
        autoComplete={"off"}
        layout="vertical"
        form={form}
        onFinishFailed={() => {
          setEnterAgain(false);
        }}
        initialValues={{
          ...billEnterModal.context.bill,
          jobid:
            (billEnterModal.context.job && billEnterModal.context.job.id) ||
            null,
          federal_tax_rate:
            (bodyshop.bill_tax_rates &&
              bodyshop.bill_tax_rates.federal_tax_rate) ||
            0,
          state_tax_rate:
            (bodyshop.bill_tax_rates &&
              bodyshop.bill_tax_rates.state_tax_rate) ||
            0,
          local_tax_rate:
            (bodyshop.bill_tax_rates &&
              bodyshop.bill_tax_rates.local_tax_rate) ||
            0,
        }}
      >
        <BillFormContainer
          form={form}
          disableInvNumber={billEnterModal.context.disableInvNumber}
        />
      </Form>
    </Modal>
  );
}

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