admin/bodyshop
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

IO-256 QBO Authorization Flow.

Browse Source
This commit is contained in:
Patrick Fic
2021-08-26 15:48:10 -07:00
parent db4e5d48af
commit 724c097d52
16 changed files with 673 additions and 73 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1
client/package.json
View File

@@ -45,6 +45,7 @@
"react": "^17.0.1",
"react-big-calendar": "^0.33.2",
"react-color": "^2.19.3",
"react-cookie": "^4.1.1",
"react-dom": "^17.0.1",
"react-drag-listview": "^0.1.8",
"react-grid-gallery": "^0.5.5",

20
client/src/components/_test/test.component.jsx
View File

@@ -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>
);
}

81
client/src/components/qbo-authorize/qbo-authorize.component.jsx Normal file
View File

@@ -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>
);
}

BIN
client/src/components/qbo-authorize/qbo_signin.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 21 KiB

47
client/src/pages/accounting-qbo/accounting-qbo.page.jsx Normal file
View File

@@ -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);

10
client/src/pages/manage/manage.page.component.jsx
View File

@@ -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`}

36
client/src/utils/CleanAxios.js
View File

@@ -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)

29
client/yarn.lock
View File

@@ -2338,6 +2338,11 @@
resolved "https://registry.npmjs.org/@types/component-emitter/-/component-emitter-1.2.10.tgz"
integrity sha512-bsjleuRKWmGqajMerkzox19aGbscQX5rmmvvXl3wlIp5gMG1HgkiwPxsN5p070fBDKTNSPgojVbuY1+HWMbFhg==
"@types/cookie@^0.3.3":
version "0.3.3"
resolved "https://registry.yarnpkg.com/@types/cookie/-/cookie-0.3.3.tgz#85bc74ba782fb7aa3a514d11767832b0e3bc6803"
integrity sha512-LKVP3cgXBT9RYj+t+9FDKwS5tdI+rPBXaNSkma7hvqy35lc7mAokC2zsqWJH0LaqIt3B962nuYI77hsJoT1gow==
"@types/d3-path@^1":
version "1.0.9"
resolved "https://registry.npmjs.org/@types/d3-path/-/d3-path-1.0.9.tgz"
@@ -2395,7 +2400,7 @@
dependencies:
"@types/node" "*"
"@types/hoist-non-react-statics@^3.3.0":
"@types/hoist-non-react-statics@^3.0.1", "@types/hoist-non-react-statics@^3.3.0":
version "3.3.1"
resolved "https://registry.npmjs.org/@types/hoist-non-react-statics/-/hoist-non-react-statics-3.3.1.tgz"
integrity sha512-iMIqiko6ooLrTh1joXodJK5X9xeEALT1kM5G3ZLhD3hszxBdIEd5C75U834D9mLcINgD4OyZf5uQXjkuYydWvA==
@@ -4395,6 +4400,11 @@ cookie@0.4.0:
resolved "https://registry.npmjs.org/cookie/-/cookie-0.4.0.tgz"
integrity sha512-+Hp8fLp57wnUSt0tY0tHEXh4voZRDnoIrZPqlo3DPiI4y9lwg/jqx+1Om94/W6ZaPDOUbnjOt/99w66zk+l1Xg==
cookie@^0.4.0:
version "0.4.1"
resolved "https://registry.yarnpkg.com/cookie/-/cookie-0.4.1.tgz#afd713fe26ebd21ba95ceb61f9a8116e50a537d1"
integrity sha512-ZwrFkGJxUR3EIoXtO+yVE69Eb7KlixbaeAWfBQB9vVsNn/o+Yw69gBWSSDK825hQNdN+wF8zELf3dFNl/kxkUA==
copy-anything@^2.0.1:
version "2.0.3"
resolved "https://registry.npmjs.org/copy-anything/-/copy-anything-2.0.3.tgz"
@@ -11048,6 +11058,15 @@ react-color@^2.19.3:
reactcss "^1.2.0"
tinycolor2 "^1.4.1"
react-cookie@^4.1.1:
version "4.1.1"
resolved "https://registry.yarnpkg.com/react-cookie/-/react-cookie-4.1.1.tgz#832e134ad720e0de3e03deaceaab179c4061a19d"
integrity sha512-ffn7Y7G4bXiFbnE+dKhHhbP+b8I34mH9jqnm8Llhj89zF4nPxPutxHT1suUqMeCEhLDBI7InYwf1tpaSoK5w8A==
dependencies:
"@types/hoist-non-react-statics" "^3.0.1"
hoist-non-react-statics "^3.0.0"
universal-cookie "^4.0.0"
react-dev-utils@^11.0.3:
version "11.0.4"
resolved "https://registry.npmjs.org/react-dev-utils/-/react-dev-utils-11.0.4.tgz"
@@ -13410,6 +13429,14 @@ unique-string@^1.0.0:
dependencies:
crypto-random-string "^1.0.0"
universal-cookie@^4.0.0:
version "4.0.4"
resolved "https://registry.yarnpkg.com/universal-cookie/-/universal-cookie-4.0.4.tgz#06e8b3625bf9af049569ef97109b4bb226ad798d"
integrity sha512-lbRVHoOMtItjWbM7TwDLdl8wug7izB0tq3/YVKhT/ahB4VDvWMyvnADfnJI8y6fSvsjh51Ix7lTGC6Tn4rMPhw==
dependencies:
"@types/cookie" "^0.3.3"
cookie "^0.4.0"
universalify@^0.1.0, universalify@^0.1.2:
version "0.1.2"
resolved "https://registry.npmjs.org/universalify/-/universalify-0.1.2.tgz"