IO-256 Export receivables for QBO

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");
+  }
+}