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 moment from "moment";
import React, { useEffect, useState } from "react";
import { useTranslation } from "react-i18next";
import { connect } from "react-redux";
import { createStructuredSelector } from "reselect";
import { logImEXEvent } from "../../firebase/firebase.utils";
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 {
  setModalContext,
  toggleModalVisible,
} from "../../redux/modals/modals.actions";
import { selectPartsOrder } from "../../redux/modals/modals.selectors";
import {
  selectBodyshop,
  selectCurrentUser,
} from "../../redux/user/user.selectors";
import RenderTemplate, {
  displayTemplateInWindow,
} from "../../utils/RenderTemplate";
import { TemplateList } from "../../utils/TemplateConstants";
import AlertComponent from "../alert/alert.component";
import LoadingSpinner from "../loading-spinner/loading-spinner.component";
import PartsOrderModalComponent from "./parts-order-modal.component";

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

const mapDispatchToProps = (dispatch) => ({
  setEmailOptions: (e) => dispatch(setEmailOptions(e)),
  toggleModalVisible: () => dispatch(toggleModalVisible("partsOrder")),
  setBillEnterContext: (context) =>
    dispatch(setModalContext({ context: context, modal: "billEnter" })),
});

export function PartsOrderModalContainer({
  partsOrderModal,
  toggleModalVisible,
  currentUser,
  bodyshop,
  setEmailOptions,
  setBillEnterContext,
}) {
  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,
    variables: { jobId: jobId },
  });

  const [insertPartOrder] = useMutation(INSERT_NEW_PARTS_ORDERS);
  const [updateJobLines] = useMutation(UPDATE_JOB_LINE_STATUS);

  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) {
      setBillEnterContext({
        actions: { refetch: refetch },
        context: {
          disableInvNumber: true,
          job: { id: jobId },
          bill: {
            vendorid: bodyshop.inhousevendorid,
            invoice_number: "ih",
            isinhouse: true,
            date: new moment(),
            billlines: values.parts_order_lines.data.map((p) => {
              return {
                joblineid: p.job_line_id,
                actual_price: p.act_price,
                actual_cost: p.act_price,
                line_desc: p.line_desc,
                line_remarks: p.line_remarks,
                part_type: p.part_type,
                quantity: p.quantity || 1,
                applicable_taxes: {
                  local: false,
                  state: p.tax_part,
                  federal: true,
                },
              };
            }),
          },
        },
      });
      toggleModalVisible();
      return;
    }

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

    if (sendType === "e") {
      const matchingVendor = data.vendors.filter(
        (item) => item.id === values.vendorid
      )[0];
      setEmailOptions({
        messageOptions: {
          to: matchingVendor ? [matchingVendor.email] : null,
          replyTo: bodyshop.email,
          subject: TemplateList("job", bodyshop.shopname)
            .parts_order_confirmation.subject,
        },
        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}
      <Form
        form={form}
        layout="vertical"
        autoComplete="no"
        onFinish={handleFinish}
        initialValues={initialValues}
      >
        {loading ? (
          <LoadingSpinner />
        ) : (
          <PartsOrderModalComponent
            vendorList={(data && data.vendors) || []}
            sendTypeState={sendTypeState}
            isReturn={isReturn}
            preferredMake={data && data.jobs[0] && data.jobs[0].v_make_desc}
          />
        )}
      </Form>
    </Modal>
  );
}

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