IO-256 Export receivables for QBO

client/src/components/accounting-receivables-table/accounting-receivables-table.component.jsx

@@ -11,6 +11,7 @@ import JobsExportAllButton from "../jobs-export-all-button/jobs-export-all-butto
 import { connect } from "react-redux";
 import { createStructuredSelector } from "reselect";
 import { selectBodyshop } from "../../redux/user/user.selectors";
+import QboAuthorizeComponent from "../qbo-authorize/qbo-authorize.component";
 const mapStateToProps = createStructuredSelector({
   bodyshop: selectBodyshop,
 });
@@ -206,6 +207,9 @@ export function AccountingReceivablesTableComponent({
               completedCallback={setSelectedJobs}
             />
           )}
+          {bodyshop.accountingconfig && bodyshop.accountingconfig.qbo && (
+            <QboAuthorizeComponent />
+          )}
           <Input.Search
             value={state.search}
             onChange={handleSearch}

client/src/components/jobs-close-export-button/jobs-close-export-button.component.jsx

@@ -34,6 +34,7 @@ export function JobsCloseExportButton({
   const [loading, setLoading] = useState(false);
 
   const handleQbxml = async () => {
+    //Check if it's a CDK setup.
     if (bodyshop.cdk_dealerid) {
       history.push(`/manage/dms?jobId=${jobId}`);
       return;
@@ -41,48 +42,58 @@ export function JobsCloseExportButton({
     logImEXEvent("jobs_close_export");
 
     setLoading(true);
-    let QbXmlResponse;
-    try {
-      QbXmlResponse = await axios.post(
-        "/accounting/qbxml/receivables",
-        { jobIds: [jobId] },
-        {
-          headers: {
-            Authorization: `Bearer ${await auth.currentUser.getIdToken()}`,
-          },
-        }
-      );
-      console.log("handle -> XML", QbXmlResponse);
-    } catch (error) {
-      console.log("Error getting QBXML from Server.", error);
-      notification["error"]({
-        message: t("jobs.errors.exporting", {
-          error: "Unable to retrieve QBXML. " + JSON.stringify(error.message),
-        }),
-      });
-      setLoading(false);
-      return;
-    }
-
+    //Check if it's a QBO Setup.
     let PartnerResponse;
-    try {
-      PartnerResponse = await axios.post(
-        "http://localhost:1337/qb/",
-        // "http://609feaeae986.ngrok.io/qb/",
-        QbXmlResponse.data,
-        {
-          headers: {
-            Authorization: `Bearer ${await auth.currentUser.getIdToken()}`,
-          },
-        }
-      );
-    } catch (error) {
-      console.log("Error connecting to quickbooks or partner.", error);
-      notification["error"]({
-        message: t("jobs.errors.exporting-partner"),
+    if (bodyshop.accountingconfig && bodyshop.accountingconfig.qbo) {
+      PartnerResponse = await axios.post(`/qbo/receivables`, {
+        withCredentials: true,
+        jobIds: [jobId],
       });
-      setLoading(false);
-      return;
+    } else {
+      //Default is QBD
+
+      let QbXmlResponse;
+      try {
+        QbXmlResponse = await axios.post(
+          "/accounting/qbxml/receivables",
+          { jobIds: [jobId] },
+          {
+            headers: {
+              Authorization: `Bearer ${await auth.currentUser.getIdToken()}`,
+            },
+          }
+        );
+        console.log("handle -> XML", QbXmlResponse);
+      } catch (error) {
+        console.log("Error getting QBXML from Server.", error);
+        notification["error"]({
+          message: t("jobs.errors.exporting", {
+            error: "Unable to retrieve QBXML. " + JSON.stringify(error.message),
+          }),
+        });
+        setLoading(false);
+        return;
+      }
+
+      try {
+        PartnerResponse = await axios.post(
+          "http://localhost:1337/qb/",
+          // "http://609feaeae986.ngrok.io/qb/",
+          QbXmlResponse.data,
+          {
+            headers: {
+              Authorization: `Bearer ${await auth.currentUser.getIdToken()}`,
+            },
+          }
+        );
+      } catch (error) {
+        console.log("Error connecting to quickbooks or partner.", error);
+        notification["error"]({
+          message: t("jobs.errors.exporting-partner"),
+        });
+        setLoading(false);
+        return;
+      }
     }
 
     console.log("PartnerResponse", PartnerResponse);

client/src/components/jobs-export-all-button/jobs-export-all-button.component.jsx

@@ -34,53 +34,61 @@ export function JobsExportAllButton({
   const [loading, setLoading] = useState(false);
   const handleQbxml = async () => {
     logImEXEvent("jobs_export_all");
-
-    setLoading(true);
-    let QbXmlResponse;
-    try {
-      QbXmlResponse = await axios.post(
-        "/accounting/qbxml/receivables",
-        { jobIds: jobIds },
-        {
-          headers: {
-            Authorization: `Bearer ${await auth.currentUser.getIdToken()}`,
-          },
-        }
-      );
-    } catch (error) {
-      console.log("Error getting QBXML from Server.", error);
-      notification["error"]({
-        message: t("jobs.errors.exporting", {
-          error: "Unable to retrieve QBXML. " + JSON.stringify(error.message),
-        }),
-      });
-      setLoading(false);
-      return;
-    }
-
     let PartnerResponse;
-    try {
-      PartnerResponse = await axios.post(
-        "http://localhost:1337/qb/",
-        // "http://609feaeae986.ngrok.io/qb/",
-        QbXmlResponse.data,
-        {
-          headers: {
-            Authorization: `Bearer ${await auth.currentUser.getIdToken()}`,
-          },
-        }
-      );
-    } catch (error) {
-      console.log("Error connecting to quickbooks or partner.", error);
-      notification["error"]({
-        message: t("jobs.errors.exporting-partner"),
+    setLoading(true);
+    if (bodyshop.accountingconfig && bodyshop.accountingconfig.qbo) {
+      PartnerResponse = await axios.post(`/qbo/receivables`, {
+        withCredentials: true,
+        jobIds: jobIds,
       });
-      setLoading(false);
-      return;
-    }
+    } else {
+      let QbXmlResponse;
+      try {
+        QbXmlResponse = await axios.post(
+          "/accounting/qbxml/receivables",
+          { jobIds: jobIds },
+          {
+            headers: {
+              Authorization: `Bearer ${await auth.currentUser.getIdToken()}`,
+            },
+          }
+        );
+      } catch (error) {
+        console.log("Error getting QBXML from Server.", error);
+        notification["error"]({
+          message: t("jobs.errors.exporting", {
+            error: "Unable to retrieve QBXML. " + JSON.stringify(error.message),
+          }),
+        });
+        setLoading(false);
+        return;
+      }
 
+      try {
+        PartnerResponse = await axios.post(
+          "http://localhost:1337/qb/",
+          // "http://609feaeae986.ngrok.io/qb/",
+          QbXmlResponse.data,
+          {
+            headers: {
+              Authorization: `Bearer ${await auth.currentUser.getIdToken()}`,
+            },
+          }
+        );
+      } catch (error) {
+        console.log("Error connecting to quickbooks or partner.", error);
+        notification["error"]({
+          message: t("jobs.errors.exporting-partner"),
+        });
+        setLoading(false);
+        return;
+      }
+    }
     console.log("PartnerResponse", PartnerResponse);
-    const groupedData = _.groupBy(PartnerResponse.data, "id");
+    const groupedData = _.groupBy(
+      PartnerResponse.data,
+      bodyshop.accountingconfig.qbo ? "jobid" : "id"
+    );
 
     await Promise.all(
       Object.keys(groupedData).map(async (key) => {
@@ -157,6 +165,7 @@ export function JobsExportAllButton({
 
     if (!!completedCallback) completedCallback([]);
     if (!!loadingCallback) loadingCallback(false);
+
     setLoading(false);
   };
 

client/src/components/qbo-authorize/qbo-authorize.component.jsx

@@ -1,19 +1,19 @@
-import { Button, Space } from "antd";
+import { Space, Tag } from "antd";
 import Axios from "axios";
-import React, { useEffect } from "react";
-//import QboImg from "./qbo_signin.png";
 import queryString from "query-string";
-import { useLocation } from "react-router-dom";
+import React, { useEffect } from "react";
 import { useCookies } from "react-cookie";
+import { useHistory, useLocation } from "react-router-dom";
+import QboSignIn from "../../assets/qbo/C2QB_green_btn_med_default.svg";
+import "./qbo-authorize.scss";
 
 export default function QboAuthorizeComponent() {
   const location = useLocation();
-
-  const [, setCookie] = useCookies(["access_token", "refresh_token"]);
+  const history = useHistory();
+  const [cookies, setCookie] = useCookies(["access_token", "refresh_token"]);
 
   const handleQbSignIn = async () => {
     const result = await Axios.post("/qbo/authorize");
-    console.log("pushing to history", result.data);
     window.location.href = result.data;
   };
   const qs = queryString.parse(location.search);
@@ -35,42 +35,24 @@ export default function QboAuthorizeComponent() {
         path: "/",
         expires,
       });
+
+      history.push({ pathname: `/manage/accounting/receivables` });
     }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [qs, location, setCookie]);
 
   return (
-    <div>
-      <Space wrap>
-        <Button onClick={handleQbSignIn}>
-          {/* <img
-            src={QboImg}
-            alt="Sign in with Intuit"
-            onClick={handleQbSignIn}
-          /> */}
-          auth
-        </Button>
-        <Button
-          onClick={async () => {
-            const response = await Axios.get(`/qbo/refresh`, {
-              withCredentials: true,
-            });
-            console.log(response);
-          }}
-        >
-          Refresh Token
-        </Button>
-        <Button
-          onClick={async () => {
-            const response = await Axios.post(`/qbo/receivables`, {
-              withCredentials: true,
-            });
-            console.log(response);
-          }}
-        >
-          REC
-        </Button>
-      </Space>
+    <Space>
+      <img
+        onClick={handleQbSignIn}
+        alt="Sign In to QuickBooks Online"
+        src={QboSignIn}
+        style={{ cursor: "pointer" }}
+      />
+      {!cookies.qbo_realmId && (
+        <Tag color="red">No QuickBooks company has been connected.</Tag>
+      )}
       {error && JSON.parse(decodeURIComponent(error)).error_description}
-    </div>
+    </Space>
   );
 }

client/src/components/qbo-authorize/qbo-authorize.scss

@@ -0,0 +1,8 @@
+.qbo-sign-in {
+  background-image: url("../../assets/qbo/C2QB_green_btn_med_default.svg");
+  width: 274px;
+  height: 48px;
+  &:hover {
+    background-image: url("../../assets/qbo/C2QB_green_btn_med_hover.svg");
+  }
+}

client/src/components/shop-info/shop-info.general.component.jsx

@@ -121,6 +121,13 @@ export default function ShopInfoGeneral({ form }) {
         </Form.Item>
       </LayoutFormRow>
       <LayoutFormRow header={t("bodyshop.labels.accountingsetup")}>
+        <Form.Item
+          label={t("bodyshop.labels.qbo")}
+          valuePropName="checked"
+          name={["accountingconfig", "qbo"]}
+        >
+          <Switch />
+        </Form.Item>
         <Form.Item
           label={t("bodyshop.labels.accountingtiers")}
           rules={[

client/src/translations/en_us/common.json

@@ -509,6 +509,7 @@
 				"orderstatuses": "Order Statuses",
 				"partslocations": "Parts Locations",
 				"printlater": "Print Later",
+				"qbo": "Use QuickBooks Online?",
 				"rbac": "Role Based Access Control",
 				"responsibilitycenters": {
 					"costs": "Cost Centers",

client/src/translations/es/common.json

@@ -509,6 +509,7 @@
 				"orderstatuses": "",
 				"partslocations": "",
 				"printlater": "",
+				"qbo": "",
 				"rbac": "",
 				"responsibilitycenters": {
 					"costs": "",

client/src/translations/fr/common.json

@@ -509,6 +509,7 @@
 				"orderstatuses": "",
 				"partslocations": "",
 				"printlater": "",
+				"qbo": "",
 				"rbac": "",
 				"responsibilitycenters": {
 					"costs": "",