Added third party payer support IO-546

client/src/components/bill-form/bill-form.component.jsx

@@ -18,13 +18,14 @@ import { CHECK_BILL_INVOICE_NUMBER } from "../../graphql/bills.queries";
 import { selectBodyshop } from "../../redux/user/user.selectors";
 import AlertComponent from "../alert/alert.component";
 import FormDatePicker from "../form-date-picker/form-date-picker.component";
+import FormFieldsChanged from "../form-fields-changed-alert/form-fields-changed-alert.component";
 import CurrencyInput from "../form-items-formatted/currency-form-item.component";
 import JobSearchSelect from "../job-search-select/job-search-select.component";
 import LayoutFormRow from "../layout-form-row/layout-form-row.component";
 import VendorSearchSelect from "../vendor-search-select/vendor-search-select.component";
 import BillFormLines from "./bill-form.lines.component";
 import { CalculateBillTotal } from "./bill-form.totals.utility";
-import FormFieldsChanged from "../form-fields-changed-alert/form-fields-changed-alert.component";
+
 const mapStateToProps = createStructuredSelector({
   bodyshop: selectBodyshop,
 });

client/src/components/job-3rd-party-modal/job-3rd-party-modal.component.jsx

@@ -0,0 +1,178 @@
+import { useQuery } from "@apollo/react-hooks";
+import { Button, Form, Input, InputNumber, Modal, Radio } from "antd";
+import React, { useState } from "react";
+import { useTranslation } from "react-i18next";
+import { SEARCH_VENDOR_AUTOCOMPLETE_WITH_ADDR } from "../../graphql/vendors.queries";
+import { GenerateDocument } from "../../utils/RenderTemplate";
+import { TemplateList } from "../../utils/TemplateConstants";
+import LayoutFormRow from "../layout-form-row/layout-form-row.component";
+import VendorSearchSelect from "../vendor-search-select/vendor-search-select.component";
+
+export default function Jobd3RdPartyModal({ jobId }) {
+  const [isModalVisible, setIsModalVisible] = useState(false);
+  const { t } = useTranslation();
+  const [form] = Form.useForm();
+  const { data: VendorAutoCompleteData } = useQuery(
+    SEARCH_VENDOR_AUTOCOMPLETE_WITH_ADDR
+  );
+
+  const showModal = () => {
+    setIsModalVisible(true);
+  };
+
+  const handleOk = () => {
+    form.submit();
+    setIsModalVisible(false);
+  };
+
+  const handleCancel = () => {
+    setIsModalVisible(false);
+  };
+  const handleFinish = (values) => {
+    const { sendtype, ...restVals } = values;
+    console.log(restVals);
+    GenerateDocument(
+      {
+        name: TemplateList("job_special").thirdpartypayer.key,
+        variables: { id: jobId },
+        context: restVals,
+      },
+      {},
+      sendtype
+    );
+  };
+
+  const handleVendorSelect = (vendorid, opt) => {
+    const vendor = VendorAutoCompleteData.vendors.filter(
+      (v) => v.id === vendorid
+    )[0];
+    if (vendor) {
+      form.setFieldsValue({
+        addr1: vendor.name,
+        addr2: vendor.street1,
+        addr3: vendor.street2,
+        city: vendor.city,
+        state: vendor.state,
+        zip: vendor.zip,
+      });
+    }
+  };
+
+  return (
+    <>
+      <Button type="primary" onClick={showModal}>
+        {t("printcenter.jobs.3rdpartypayer")}
+      </Button>
+      <Modal visible={isModalVisible} onOk={handleOk} onCancel={handleCancel}>
+        <Form
+          onFinish={handleFinish}
+          autoComplete={"off"}
+          layout="vertical"
+          form={form}
+        >
+          <Form.Item label={t("bills.fields.vendor")} name="vendorid">
+            <VendorSearchSelect
+              options={VendorAutoCompleteData && VendorAutoCompleteData.vendors}
+              onSelect={handleVendorSelect}
+            />
+          </Form.Item>
+          <LayoutFormRow grow>
+            <Form.Item
+              label={t("printcenter.jobs.3rdpartyfields.addr1")}
+              name="addr1"
+            >
+              <Input />
+            </Form.Item>
+            <Form.Item
+              label={t("printcenter.jobs.3rdpartyfields.addr2")}
+              name="addr2"
+            >
+              <Input />
+            </Form.Item>
+            <Form.Item
+              label={t("printcenter.jobs.3rdpartyfields.addr3")}
+              name="addr3"
+            >
+              <Input />
+            </Form.Item>
+          </LayoutFormRow>
+          <LayoutFormRow grow>
+            <Form.Item
+              label={t("printcenter.jobs.3rdpartyfields.city")}
+              name="city"
+            >
+              <Input />
+            </Form.Item>
+            <Form.Item
+              label={t("printcenter.jobs.3rdpartyfields.state")}
+              name="state"
+            >
+              <Input />
+            </Form.Item>
+            <Form.Item
+              label={t("printcenter.jobs.3rdpartyfields.zip")}
+              name="zip"
+            >
+              <Input />
+            </Form.Item>
+          </LayoutFormRow>
+          <LayoutFormRow grow>
+            <Form.Item
+              label={t("printcenter.jobs.3rdpartyfields.attn")}
+              name="attn"
+            >
+              <Input />
+            </Form.Item>
+            <Form.Item
+              label={t("printcenter.jobs.3rdpartyfields.ponumber")}
+              name="ponumber"
+            >
+              <Input />
+            </Form.Item>
+          </LayoutFormRow>
+          <LayoutFormRow grow>
+            <Form.Item
+              label={t("printcenter.jobs.3rdpartyfields.ded_amt")}
+              name="ded_amt"
+            >
+              <InputNumber min={0} precision={2} />
+            </Form.Item>
+            <Form.Item
+              label={t("printcenter.jobs.3rdpartyfields.depreciation")}
+              name="depreciation"
+            >
+              <InputNumber min={0} precision={2} />
+            </Form.Item>
+            <Form.Item
+              label={t("printcenter.jobs.3rdpartyfields.custgst")}
+              name="custgst"
+            >
+              <InputNumber min={0} precision={2} />
+            </Form.Item>
+            <Form.Item
+              label={t("printcenter.jobs.3rdpartyfields.other")}
+              name="other"
+            >
+              <InputNumber min={0} precision={2} />
+            </Form.Item>
+          </LayoutFormRow>
+          <Form.Item
+            label={t("printcenter.jobs.3rdpartyfields.sendtype")}
+            name="sendtype"
+            rules={[
+              {
+                required: true,
+                message: t("general.validation.required"),
+              },
+            ]}
+          >
+            <Radio.Group>
+              <Radio value={"e"}>{t("parts_orders.labels.email")}</Radio>
+              <Radio value={"p"}>{t("parts_orders.labels.print")}</Radio>
+            </Radio.Group>
+          </Form.Item>
+        </Form>
+      </Modal>
+    </>
+  );
+}

client/src/components/parts-receive-modal/parts-receive-modal.container.jsx

@@ -33,7 +33,7 @@ export function PartsReceiveModalContainer({
   const { t } = useTranslation();
 
   const { visible, context, actions } = partsOrderModal;
-  const { jobId, partsorderlines } = context;
+  const { partsorderlines } = context;
 
   const { refetch } = actions;
   const [form] = Form.useForm();

client/src/components/print-center-jobs/print-center-jobs.component.jsx

@@ -5,6 +5,7 @@ import { connect } from "react-redux";
 import { createStructuredSelector } from "reselect";
 import { selectPrintCenter } from "../../redux/modals/modals.selectors";
 import { TemplateList } from "../../utils/TemplateConstants";
+import Jobd3RdPartyModal from "../job-3rd-party-modal/job-3rd-party-modal.component";
 import PrintCenterItem from "../print-center-item/print-center-item.component";
 import PrintCenterSpeedPrint from "../print-center-speed-print/print-center-speed-print.component";
 
@@ -44,6 +45,7 @@ export function PrintCenterJobsComponent({ printCenterModal }) {
                 ))}
               </ul>
             </Collapse.Panel>
+            <Jobd3RdPartyModal jobId={jobId} />
           </Collapse>
         </Col>
       </Row>