Basic oAuth for QBO BOD-266

client/src/components/_test/paymentMethod.jsx

@@ -0,0 +1,96 @@
+import {
+  PaymentRequestButtonElement,
+  useStripe
+} from "@stripe/react-stripe-js";
+import React, { useEffect, useState } from "react";
+import { connect } from "react-redux";
+import { createStructuredSelector } from "reselect";
+import { logImEXEvent } from "../../firebase/firebase.utils";
+import { setEmailOptions } from "../../redux/email/email.actions";
+import { selectBodyshop } from "../../redux/user/user.selectors";
+import { TemplateList } from "../../utils/TemplateConstants";
+
+const mapStateToProps = createStructuredSelector({
+  bodyshop: selectBodyshop,
+});
+
+const mapDispatchToProps = (dispatch) => ({
+  setEmailOptions: (e) => dispatch(setEmailOptions(e)),
+});
+
+function Test({ bodyshop, setEmailOptions }) {
+  const stripe = useStripe();
+
+  const [paymentRequest, setPaymentRequest] = useState(null);
+  useEffect(() => {
+    if (stripe) {
+      const pr = stripe.paymentRequest({
+        country: "CA",
+        displayItems: [{ label: "Deductible", amount: 1099 }],
+        currency: "cad",
+        total: {
+          label: "Demo total",
+          amount: 1099,
+        },
+        requestPayerName: true,
+        requestPayerEmail: true,
+      });
+
+      // Check the availability of the Payment Request API.
+      pr.canMakePayment().then((result) => {
+        if (result) {
+          setPaymentRequest(pr);
+        } else {
+          // var details = {
+          //   total: { label: "", amount: { currency: "CAD", value: "0.00" } },
+          // };
+          new PaymentRequest(
+            [{ supportedMethods: ["basic-card"] }],
+            {}
+            //  details
+          ).show();
+        }
+      });
+    }
+  }, [stripe]);
+
+  if (paymentRequest) {
+    return (
+      <div style={{ height: "300px" }}>
+        <PaymentRequestButtonElement options={{ paymentRequest }} />
+      </div>
+    );
+  }
+
+  return (
+    <div>
+      <button
+        onClick={() => {
+          setEmailOptions({
+            messageOptions: {
+              to: ["patrickwf@gmail.com"],
+              replyTo: bodyshop.email,
+            },
+            template: {
+              name: TemplateList.parts_order_confirmation.key,
+              variables: {
+                id: "a7c2d4e1-f519-42a9-a071-c48cf0f22979",
+              },
+            },
+          });
+        }}
+      >
+        send email
+      </button>
+      <button
+        onClick={() => {
+          logImEXEvent("IMEXEVENT", { somethignArThare: 5 });
+        }}
+      >
+        Log an ImEX Event.
+      </button>
+    </div>
+  );
+}
+
+export default connect(mapStateToProps, mapDispatchToProps)(Test);

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

@@ -1,96 +1,27 @@
-import {
-  PaymentRequestButtonElement,
-  useStripe
-} from "@stripe/react-stripe-js";
-import React, { useEffect, useState } from "react";
-import { connect } from "react-redux";
-import { createStructuredSelector } from "reselect";
-import { logImEXEvent } from "../../firebase/firebase.utils";
-import { setEmailOptions } from "../../redux/email/email.actions";
-import { selectBodyshop } from "../../redux/user/user.selectors";
-import { TemplateList } from "../../utils/TemplateConstants";
+import Axios from "axios";
+import React from "react";
+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");
 
-const mapStateToProps = createStructuredSelector({
-  bodyshop: selectBodyshop,
-});
+    var win;
+    var checkConnect;
+    var parameters = "location=1,width=800,height=650";
+    parameters +=
+      ",left=" +
+      (window.screen.width - 800) / 2 +
+      ",top=" +
+      (window.screen.height - 650) / 2;
 
-const mapDispatchToProps = (dispatch) => ({
-  setEmailOptions: (e) => dispatch(setEmailOptions(e)),
-});
-
-function Test({ bodyshop, setEmailOptions }) {
-  const stripe = useStripe();
-
-  const [paymentRequest, setPaymentRequest] = useState(null);
-  useEffect(() => {
-    if (stripe) {
-      const pr = stripe.paymentRequest({
-        country: "CA",
-        displayItems: [{ label: "Deductible", amount: 1099 }],
-        currency: "cad",
-        total: {
-          label: "Demo total",
-          amount: 1099,
-        },
-        requestPayerName: true,
-        requestPayerEmail: true,
-      });
-
-      // Check the availability of the Payment Request API.
-      pr.canMakePayment().then((result) => {
-        if (result) {
-          setPaymentRequest(pr);
-        } else {
-          // var details = {
-          //   total: { label: "", amount: { currency: "CAD", value: "0.00" } },
-          // };
-          new PaymentRequest(
-            [{ supportedMethods: ["basic-card"] }],
-            {}
-            //  details
-          ).show();
-        }
-      });
-    }
-  }, [stripe]);
-
-  if (paymentRequest) {
-    return (
-      <div style={{ height: "300px" }}>
-        <PaymentRequestButtonElement options={{ paymentRequest }} />
-      </div>
-    );
-  }
+    // Launch Popup
+    win = window.open(result.data, "connectPopup", parameters);
+  };
 
   return (
     <div>
-      <button
-        onClick={() => {
-          setEmailOptions({
-            messageOptions: {
-              to: ["patrickwf@gmail.com"],
-              replyTo: bodyshop.email,
-            },
-            template: {
-              name: TemplateList.parts_order_confirmation.key,
-              variables: {
-                id: "a7c2d4e1-f519-42a9-a071-c48cf0f22979",
-              },
-            },
-          });
-        }}
-      >
-        send email
-      </button>
-      <button
-        onClick={() => {
-          logImEXEvent("IMEXEVENT", { somethignArThare: 5 });
-        }}
-      >
-        Log an ImEX Event.
-      </button>
+      <button onClick={handleQbSignIn}>Sign Into Qb.</button>
     </div>
   );
 }
-
-export default connect(mapStateToProps, mapDispatchToProps)(Test);

client/src/components/tech-lookup-jobs-drawer/tech-lookup-jobs-drawer.component.jsx

@@ -6,7 +6,7 @@ import React from "react";
 import { useTranslation } from "react-i18next";
 import { connect } from "react-redux";
 import { Link, useHistory, useLocation } from "react-router-dom";
-import { QUERY_JOB_CARD_DETAILS } from "../../graphql/jobs.queries";
+import { GET_JOB_BY_PK } from "../../graphql/jobs.queries";
 import { setModalContext } from "../../redux/modals/modals.actions";
 import AlertComponent from "../alert/alert.component";
 import LoadingSpinner from "../loading-spinner/loading-spinner.component";
@@ -50,7 +50,7 @@ export function JobDetailCards({ setPrintCenterContext }) {
   const searchParams = queryString.parse(useLocation().search);
   const { selected } = searchParams;
   const history = useHistory();
-  const { loading, error, data, refetch } = useQuery(QUERY_JOB_CARD_DETAILS, {
+  const { loading, error, data, refetch } = useQuery(GET_JOB_BY_PK, {
     fetchPolicy: "network-only",
     variables: { id: selected },
     skip: !selected,
@@ -124,7 +124,11 @@ export function JobDetailCards({ setPrintCenterContext }) {
           </Row>
           <Tabs size="large">
             <Tabs.TabPane key="lines" tab={t("jobs.labels.lines")}>
-              <JobLinesContainer jobId={searchParams.selected} />
+              <JobLinesContainer
+                jobId={selected}
+                joblines={data.jobs_by_pk.joblines}
+                refetch={refetch}
+              />
             </Tabs.TabPane>
             <Tabs.TabPane key="documents" tab={t("jobs.labels.documents")}>
               <JobsDocumentsGalleryContainer jobId={searchParams.selected} />