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, { useState } from "react";
import { useTranslation } from "react-i18next";
import { connect } from "react-redux";
import { createStructuredSelector } from "reselect";
import PartsOrderEmailTemplate from "../../emails/templates/parts-order/parts-order.email";
import { REPORT_QUERY_PARTS_ORDER_BY_PK } from "../../emails/templates/parts-order/parts-order.query";
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,
  toggleEmailOverlayVisible
} 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";
const mapStateToProps = createStructuredSelector({
  currentUser: selectCurrentUser,
  bodyshop: selectBodyshop,
  partsOrderModal: selectPartsOrder
});
const mapDispatchToProps = dispatch => ({
  setEmailOptions: e => dispatch(setEmailOptions(e)),
  toggleEmailOverlayVisible: () => dispatch(toggleEmailOverlayVisible()),
  toggleModalVisible: () => dispatch(toggleModalVisible("partsOrder"))
});
export default connect(
  mapStateToProps,
  mapDispatchToProps
)(function PartsOrderModalContainer({
  partsOrderModal,
  toggleModalVisible,
  currentUser,
  bodyshop,
  setEmailOptions,
  toggleEmailOverlayVisible
}) {
  const { t } = useTranslation();

  const { visible, context, actions } = partsOrderModal;
  const { jobId, linesToOrder } = 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, {
    fetchPolicy: "network-only",
    skip: !visible
  });
  const [insertPartOrder] = useMutation(INSERT_NEW_PARTS_ORDERS);
  const [updateJobLines] = useMutation(UPDATE_JOB_LINE_STATUS);

  const handleFinish = values => {
    insertPartOrder({
      variables: {
        po: [
          {
            ...values,
            jobid: jobId,
            user_email: currentUser.email,
            status: bodyshop.md_order_statuses.default_ordered || "Ordered*"
          }
        ]
      }
    })
      .then(r => {
        updateJobLines({
          variables: {
            ids: values.parts_order_lines.data.map(item => item.job_line_id),
            status: bodyshop.md_order_statuses.default_ordered || "Ordered*"
          }
        })
          .then(response => {
            notification["success"]({
              message: t("parts_orders.successes.created")
            });
            if (refetch) refetch();
            toggleModalVisible();

            if (sendType === "e") {
              //Show the email modal and set the data.

              //TODO Remove hardcoding
              setEmailOptions({
                messageOptions: {
                  from: {
                    name: "Kavia Autobdoy",
                    address: "noreply@bodyshop.app"
                  },
                  to: "patrickwf@gmail.com",
                  replyTo: "snaptsoft@gmail.com"
                },
                template: PartsOrderEmailTemplate,
                queryConfig: [
                  REPORT_QUERY_PARTS_ORDER_BY_PK,
                  {
                    variables: {
                      id: r.data.insert_parts_orders.returning[0].id
                    }
                  }
                ]
              });
              //toggleEmailOverlayVisible();
            }
          })
          .catch(error => {
            notification["error"]({
              message: t("parts_orders.errors.creating"),
              description: error.message
            });
          });

        //end no good
      })
      .catch(error => {
        notification["error"]({
          message: t("parts_orders.errors.creating"),
          description: error.message
        });
      });
  };

  const initialValues =
    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,
        job_line_id: value.id,
        status: bodyshop.md_order_statuses.default_ordered || "Ordered*"
      });
      return acc;
    }, []);

  return (
    <Modal
      visible={visible}
      onCancel={() => toggleModalVisible()}
      width="90%"
      onOk={() => form.submit()}
      destroyOnClose
    >
      {error ? <AlertComponent message={error.message} type="error" /> : null}
      <LoadingSpinner loading={loading}>
        <Form
          form={form}
          autoComplete="no"
          onFinish={handleFinish}
          initialValues={{ parts_order_lines: { data: initialValues } }}
        >
          <PartsOrderModalComponent
            vendorList={(data && data.vendors) || []}
            sendTypeState={sendTypeState}
          />
        </Form>
      </LoadingSpinner>
    </Modal>
  );
});