Added first round of analytics and event tracking BOD-190

client/src/components/jobs-detail-header-actions/jobs-detail-header-actions.addtoproduction.util.jsx

@@ -1,12 +1,15 @@
 import { notification } from "antd";
 import i18n from "i18next";
 import { UPDATE_JOB } from "../../graphql/jobs.queries";
+import { logImEXEvent } from "../../firebase/firebase.utils";
 
 export default function AddToProduction(
   apolloClient,
   jobId,
   completionCallback
 ) {
+  logImEXEvent("job_add_to_production");
+
   //get a list of all fields on the job
   apolloClient
     .mutate({

client/src/components/jobs-detail-header-actions/jobs-detail-header-actions.component.jsx

@@ -11,6 +11,7 @@ import { selectBodyshop } from "../../redux/user/user.selectors";
 import AddToProduction from "./jobs-detail-header-actions.addtoproduction.util";
 import JobsDetaiLheaderCsi from "./jobs-detail-header-actions.csi.component";
 import DuplicateJob from "./jobs-detail-header-actions.duplicate.util";
+import { logImEXEvent } from "../../firebase/firebase.utils";
 
 const mapStateToProps = createStructuredSelector({
   bodyshop: selectBodyshop,
@@ -37,9 +38,11 @@ export function JobsDetailHeaderActions({
   const client = useApolloClient();
   const history = useHistory();
   const statusmenu = (
-    <Menu key="popovermenu">
+    <Menu key='popovermenu'>
       <Menu.Item
         onClick={() => {
+          logImEXEvent("job_header_schedule");
+
           setScheduleContext({
             actions: { refetch: refetch },
             context: {
@@ -47,43 +50,41 @@ export function JobsDetailHeaderActions({
               job: job,
             },
           });
-        }}
-      >
+        }}>
         {t("jobs.actions.schedule")}
       </Menu.Item>
       <Menu.Item
-        key="enterpayments"
+        key='enterpayments'
         onClick={() => {
+          logImEXEvent("job_header_enter_payment");
+
           setPaymentContext({
             actions: {},
             context: { jobId: job.id },
           });
-        }}
-      >
+        }}>
         {t("menus.header.enterpayment")}
       </Menu.Item>
-      <Menu.Item key="cccontract">
+      <Menu.Item key='cccontract'>
         <Link
           to={{
             pathname: "/manage/courtesycars/contracts/new",
             state: { jobId: job.id },
-          }}
-        >
+          }}>
           {t("menus.jobsactions.newcccontract")}
         </Link>
       </Menu.Item>
       <Menu.Item
-        key="addtoproduction"
+        key='addtoproduction'
         disabled={!!!job.converted || !!job.inproduction}
-        onClick={() => AddToProduction(client, job.id, refetch)}
-      >
+        onClick={() => AddToProduction(client, job.id, refetch)}>
         {t("jobs.actions.addtoproduction")}
       </Menu.Item>
-      <Menu.Item key="duplicatejob">
+      <Menu.Item key='duplicatejob'>
         <Popconfirm
           title={t("jobs.labels.duplicateconfirm")}
-          okText="Yes"
-          cancelText="No"
+          okText='Yes'
+          cancelText='No'
           onClick={(e) => e.stopPropagation()}
           onConfirm={() =>
             DuplicateJob(
@@ -95,30 +96,29 @@ export function JobsDetailHeaderActions({
               }
             )
           }
-          getPopupContainer={(trigger) => trigger.parentNode}
-        >
+          getPopupContainer={(trigger) => trigger.parentNode}>
           {t("menus.jobsactions.duplicate")}
         </Popconfirm>
       </Menu.Item>
       <Menu.Item
-        key="postinvoices"
+        key='postinvoices'
         onClick={() => {
+          logImEXEvent("job_header_enter_invoice");
+
           setInvoiceEnterContext({
             actions: { refetch: refetch },
             context: {
               job: job,
             },
           });
-        }}
-      >
+        }}>
         {t("jobs.actions.postInvoices")}
       </Menu.Item>
-      <Menu.Item key="closejob">
+      <Menu.Item key='closejob'>
         <Link
           to={{
             pathname: `/manage/jobs/${job.id}/close`,
-          }}
-        >
+          }}>
           {t("menus.jobsactions.closejob")}
         </Link>
       </Menu.Item>
@@ -127,11 +127,10 @@ export function JobsDetailHeaderActions({
   );
   return (
     <Dropdown
-      className="imex-flex-row__margin"
+      className='imex-flex-row__margin'
       overlay={statusmenu}
       trigger={["click"]}
-      key="changestatus"
-    >
+      key='changestatus'>
       <Button>
         {t("general.labels.actions")} <DownCircleFilled />
       </Button>

client/src/components/jobs-detail-header-actions/jobs-detail-header-actions.csi.component.jsx

@@ -11,6 +11,7 @@ import {
 import { selectBodyshop } from "../../redux/user/user.selectors";
 import { setEmailOptions } from "../../redux/email/email.actions";
 import { TemplateList } from "../../utils/TemplateConstants";
+import { logImEXEvent } from "../../firebase/firebase.utils";
 
 const mapStateToProps = createStructuredSelector({
   //currentUser: selectCurrentUser'
@@ -31,7 +32,7 @@ export function JobsDetailHeaderCsi({
   const client = useApolloClient();
 
   const handleCreateCsi = async (e) => {
-    console.log("e.target.key", e.key);
+    logImEXEvent("job_create_csi");
 
     const questionSetResult = await client.query({
       query: GET_CURRENT_QUESTIONSET_ID,

client/src/components/jobs-detail-header-actions/jobs-detail-header-actions.duplicate.util.js

@@ -2,6 +2,7 @@ import {
   QUERY_ALL_JOB_FIELDS,
   INSERT_NEW_JOB,
 } from "../../graphql/jobs.queries";
+import { logImEXEvent } from "../../firebase/firebase.utils";
 
 export default function DuplicateJob(
   apolloClient,
@@ -9,6 +10,8 @@ export default function DuplicateJob(
   config,
   completionCallback
 ) {
+  logImEXEvent("job_duplicate");
+
   const { defaultOpenStatus } = config;
   //get a list of all fields on the job
   apolloClient