IO-256 QBO Authorization Flow.

client/src/components/_test/test.component.jsx

@@ -1,25 +1,9 @@
-import Axios from "axios";
 import React from "react";
+import QboAuthorizeComponent from "../qbo-authorize/qbo-authorize.component";
 export default function Test() {
-  const handleQbSignIn = async () => {
-    const result = await Axios.post("/qbo/authorize", { userId: "1234" });
-    console.log("handleQbSignIn -> result", result.data);
-    // window.open(result.data, "_blank", "toolbar=0,location=0,menubar=0");
-
-    var parameters = "location=1,width=800,height=650";
-    parameters +=
-      ",left=" +
-      (window.screen.width - 800) / 2 +
-      ",top=" +
-      (window.screen.height - 650) / 2;
-
-    // Launch Popup
-    window.open(result.data, "connectPopup", parameters);
-  };
-
   return (
     <div>
-      <button onClick={handleQbSignIn}>Sign Into Qb.</button>
+      <QboAuthorizeComponent />
     </div>
   );
 }

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

@@ -0,0 +1,81 @@
+import { Button, Space } 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 { useCookies } from "react-cookie";
+
+export default function QboAuthorizeComponent() {
+  const location = useLocation();
+
+  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;
+  };
+
+  useEffect(() => {
+    const ExchangeForAccessToken = async () => {
+      const response = await Axios.get(`/qbo/callback${location.search}`);
+
+      let expires = new Date();
+      expires.setTime(expires.getTime() + response.data.expires_in * 1000);
+      setCookie("qbo_access_token", response.data.access_token, {
+        path: "/",
+        expires,
+      });
+      expires = new Date();
+      expires.setTime(
+        expires.getTime() + response.data.x_refresh_token_expires_in * 1000
+      );
+      setCookie("qbo_refresh_token", response.data.refresh_token, {
+        path: "/",
+        expires,
+      });
+    };
+    const qs = queryString.parse(location.search);
+    const { code, state, realmId } = qs;
+    const hasBeenCalledBack = code && realmId && state;
+
+    if (hasBeenCalledBack) {
+      setCookie("qbo_code", code, { path: "/" });
+      setCookie("qbo_state", state, { path: "/" });
+
+      let expires = new Date();
+      expires.setTime(expires.getTime() + 8726400 * 1000);
+
+      setCookie("qbo_realmId", realmId, {
+        path: "/",
+        expires,
+      });
+      ExchangeForAccessToken();
+    }
+  }, [location, setCookie]);
+
+  return (
+    <div>
+      <Space>
+        <Button onClick={handleQbSignIn}>
+          <img
+            src={QboImg}
+            alt="Sign in with Intuit"
+            onClick={handleQbSignIn}
+          />
+        </Button>
+        <Button
+          onClick={async () => {
+            const response = await Axios.get(`/qbo/refresh`, {
+              withCredentials: true,
+            });
+            console.log(response);
+          }}
+        >
+          Refresh Token
+        </Button>
+      </Space>
+    </div>
+  );
+}

client/src/pages/accounting-qbo/accounting-qbo.page.jsx

@@ -0,0 +1,47 @@
+import React, { useEffect } from "react";
+import { useTranslation } from "react-i18next";
+import { connect } from "react-redux";
+import { createStructuredSelector } from "reselect";
+import QboAuthorizeComponent from "../../components/qbo-authorize/qbo-authorize.component";
+import {
+  setBreadcrumbs,
+  setSelectedHeader,
+} from "../../redux/application/application.actions";
+import { selectBodyshop } from "../../redux/user/user.selectors";
+
+const mapStateToProps = createStructuredSelector({
+  bodyshop: selectBodyshop,
+});
+
+const mapDispatchToProps = (dispatch) => ({
+  setBreadcrumbs: (breadcrumbs) => dispatch(setBreadcrumbs(breadcrumbs)),
+  setSelectedHeader: (key) => dispatch(setSelectedHeader(key)),
+});
+export function AccountingReceivablesContainer({
+  bodyshop,
+  setBreadcrumbs,
+  setSelectedHeader,
+}) {
+  const { t } = useTranslation();
+
+  useEffect(() => {
+    document.title = t("titles.accounting-qbo");
+    setSelectedHeader("qbo");
+    setBreadcrumbs([
+      {
+        link: "/manage/accounting/qbo",
+        label: t("titles.bc.accounting-qbo"),
+      },
+    ]);
+  }, [t, setBreadcrumbs, setSelectedHeader]);
+
+  return (
+    <div>
+      <QboAuthorizeComponent />
+    </div>
+  );
+}
+export default connect(
+  mapStateToProps,
+  mapDispatchToProps
+)(AccountingReceivablesContainer);

client/src/pages/manage/manage.page.component.jsx

@@ -116,6 +116,9 @@ const JobChecklistView = lazy(() =>
 const JobDeliver = lazy(() =>
   import("../jobs-deliver/jobs-delivery.page.container")
 );
+const AccountingQboCallback = lazy(() =>
+  import("../accounting-qbo/accounting-qbo.page")
+);
 const AccountingReceivables = lazy(() =>
   import("../accounting-receivables/accounting-receivables.container")
 );
@@ -333,6 +336,13 @@ export function Manage({ match, conflict, bodyshop }) {
         path={`${match.path}/shop/csi`}
         component={ShopCsiPageContainer}
       />
+
+      <Route
+        exact
+        path={`${match.path}/accounting/qbo`}
+        component={AccountingQboCallback}
+      />
+
       <Route
         exact
         path={`${match.path}/accounting/receivables`}

client/src/utils/CleanAxios.js

@@ -1,6 +1,9 @@
 import axios from "axios";
 import { auth } from "../firebase/firebase.utils";
 
+import { Cookies } from "react-cookie";
+
+const cookies = new Cookies();
 if (process.env.NODE_ENV === "production") {
   axios.defaults.baseURL =
     process.env.REACT_APP_AXIOS_BASE_API_URL || "https://api.imex.online/";
@@ -14,6 +17,39 @@ export const axiosAuthInterceptorId = axios.interceptors.request.use(
         config.headers.Authorization = `Bearer ${token}`;
       }
     }
+
+    //Check if Qbo Cookies need to be refreshed.
+    const qbo_access_token = cookies.get("qbo_access_token");
+    const qbo_refresh_token = cookies.get("qbo_refresh_token");
+
+    if (!qbo_refresh_token) {
+      //Kill both values just in case.
+      cookies.remove("qbo_access_token");
+      cookies.remove("qbo_refresh_token");
+      return config;
+    }
+    //Are they expired?
+    if (!qbo_access_token) {
+      //Refresh it first.
+      const response = await axios.get(`/qbo/refresh`, {
+        withCredentials: true,
+      });
+
+      let expires = new Date();
+      expires.setTime(expires.getTime() + response.data.expires_in * 1000);
+      cookies.set("qbo_access_token", response.data.access_token, {
+        path: "/",
+        expires,
+      });
+      expires = new Date();
+      expires.setTime(
+        expires.getTime() + response.data.x_refresh_token_expires_in * 1000
+      );
+      cookies.set("qbo_refresh_token", response.data.refresh_token, {
+        path: "/",
+        expires,
+      });
+    }
     return config;
   },
   (error) => Promise.reject(error)