bodyshop/client/src/components/parts-order-modal/parts-order-modal.container.jsx

import { useMutation, useQuery } from "@apollo/react-hooks";
import { 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 { UPDATE_JOB_LINE_STATUS } from "../../graphql/jobs-lines.queries";
import { INSERT_NEW_PARTS_ORDERS } from "../../graphql/parts-orders.queries";
import { QUERY_ALL_VENDORS_FOR_ORDER } from "../../graphql/vendors.queries";
import { setEmailOptions } from "../../redux/email/email.actions";
import { toggleModalVisible } from "../../redux/modals/modals.actions";
import { selectPartsOrder } from "../../redux/modals/modals.selectors";
import {
  selectBodyshop,
  selectCurrentUser,
} from "../../redux/user/user.selectors";
import AlertComponent from "../alert/alert.component";
import LoadingSpinner from "../loading-spinner/loading-spinner.component";
import PartsOrderModalComponent from "./parts-order-modal.component";
import RenderTemplate, {
  displayTemplateInWindow,
} from "../../utils/RenderTemplate";
import moment from "moment";
import { TemplateList } from "../../utils/TemplateConstants";
import { logImEXEvent } from "../../firebase/firebase.utils";

const mapStateToProps = createStructuredSelector({
  currentUser: selectCurrentUser,
  bodyshop: selectBodyshop,
  partsOrderModal: selectPartsOrder,
});

const mapDispatchToProps = (dispatch) => ({
  setEmailOptions: (e) => dispatch(setEmailOptions(e)),
  toggleModalVisible: () => dispatch(toggleModalVisible("partsOrder")),
});

export function PartsOrderModalContainer({
  partsOrderModal,
  toggleModalVisible,
  currentUser,
  bodyshop,
  setEmailOptions,
}) {
  const { t } = useTranslation();

  const { visible, context, actions } = partsOrderModal;
  const {
    jobId,
    linesToOrder,
    isReturn,
    vendorId,
    returnFromInvoice,
    invoiceNumber,
  } = context;

  const { refetch } = actions;
  const [form] = Form.useForm();

  const sendTypeState = useState("e");
  const sendType = sendTypeState[0];

  const { loading, error, data } = useQuery(QUERY_ALL_VENDORS_FOR_ORDER, {
    skip: !visible,
  });
  const [insertPartOrder] = useMutation(INSERT_NEW_PARTS_ORDERS);
  const [updateJobLines] = useMutation(UPDATE_JOB_LINE_STATUS);
  const [insertInvoice] = useMutation(INSERT_NEW_INVOICE);

  const handleFinish = async (values) => {
    logImEXEvent("parts_order_insert");

    const insertResult = await insertPartOrder({
      variables: {
        po: [
          {
            ...values,
            jobid: jobId,
            user_email: currentUser.email,
            status: bodyshop.md_order_statuses.default_ordered || "Ordered*",
          },
        ],
      },
    });
    if (!!insertResult.error) {
      notification["error"]({
        message: t("parts_orders.errors.creating"),
        description: JSON.stringify(insertResult.error),
      });
      return;
    }

    const jobLinesResult = await updateJobLines({
      variables: {
        ids: values.parts_order_lines.data.map((item) => item.job_line_id),
        status: isReturn
          ? bodyshop.md_order_statuses.default_returned || "Returned*"
          : bodyshop.md_order_statuses.default_ordered || "Ordered*",
      },
    });
    if (!!jobLinesResult.errors) {
      notification["error"]({
        message: t("parts_orders.errors.creating"),
        description: JSON.stringify(jobLinesResult.errors),
      });
    }

    notification["success"]({
      message: t("parts_orders.successes.created"),
    });

    if (values.vendorid === bodyshop.inhousevendorid) {
      console.log("Inhouse Invoice needs to be psoted.");
      logImEXEvent("parts_order_inhouse_invoice");

      let invoiceToPost = {
        vendorid: bodyshop.inhousevendorid,
        jobid: jobId,
        total: 0,
        invoice_number: `${jobId}`,
        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,
        invoicelines: {
          data: values.parts_order_lines.data.map((p) => {
            return {
              joblineid: p.job_line_id,
              actual_price: 0,
              actual_cost: 0,
              line_desc: p.line_desc,
              quantity: p.quantity || 1,
              cost_center:
                bodyshop.md_responsibility_centers.defaults.PAO || "Other*",
            };
          }),
        },
      };

      await insertInvoice({
        variables: { invoice: invoiceToPost },
      });
    }

    if (refetch) refetch();
    toggleModalVisible();

    if (sendType === "e") {
      setEmailOptions({
        messageOptions: {
          to: data.vendors.filter((item) => item.id === values.id)[0] || null,
          replyTo: bodyshop.email,
        },
        template: {
          name: isReturn
            ? TemplateList.parts_return_confirmation.key
            : TemplateList.parts_order_confirmation.key,
          variables: {
            id: insertResult.data.insert_parts_orders.returning[0].id,
          },
        },
      });
    } else {
      displayTemplateInWindow(
        await RenderTemplate(
          {
            name: isReturn
              ? TemplateList.parts_return_confirmation.key
              : TemplateList.parts_order_confirmation.key,
            variables: {
              id: insertResult.data.insert_parts_orders.returning[0].id,
            },
          },
          bodyshop
        )
      );
    }
  };

  const initialValues = {
    jobid: jobId,
    return: isReturn,
    deliver_by: isReturn ? moment(new Date()) : null,
    vendorid: vendorId,
    returnfrominvoice: returnFromInvoice,

    parts_order_lines: {
      data: linesToOrder
        ? linesToOrder.reduce((acc, value) => {
            acc.push({
              line_desc: value.line_desc,
              oem_partno: value.oem_partno,
              db_price: value.db_price,
              act_price: value.act_price,
              quantity: value.part_qty,
              job_line_id: isReturn ? value.joblineid : value.id,
            });
            return acc;
          }, [])
        : [],
    },
  };

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

  return (
    <Modal
      visible={visible}
      title={
        isReturn
          ? `${t("parts_orders.labels.returnpartsorder")} ${invoiceNumber}`
          : t("parts_orders.labels.newpartsorder")
      }
      onCancel={() => toggleModalVisible()}
      width='90%'
      onOk={() => form.submit()}
      destroyOnClose
      forceRender>
      {error ? <AlertComponent message={error.message} type='error' /> : null}
      <LoadingSpinner loading={loading}>
        <Form
          form={form}
          autoComplete='no'
          onFinish={handleFinish}
          initialValues={initialValues}>
          <PartsOrderModalComponent
            vendorList={(data && data.vendors) || []}
            sendTypeState={sendTypeState}
            isReturn={isReturn}
          />
        </Form>
      </LoadingSpinner>
    </Modal>
  );
}

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