IO-2763 Job Action Button

Create Courtesy Car and Create Task items added

Signed-off-by: Allan Carr <allan.carr@thinkimex.com>

client/src/components/header/header.component.jsx

@@ -311,10 +311,12 @@ function Header({
     {
       key: "home",
       icon: <HomeFilled />,
+      id: "header-home",
       label: <Link to="/manage/">{t("menus.header.home")}</Link>
     },
     {
       key: "schedule",
+      id: "header-schedule",
       icon: <Icon component={FaCalendarAlt} />,
       label: <Link to="/manage/schedule">{t("menus.header.schedule")}</Link>
     },
@@ -326,16 +328,19 @@ function Header({
       children: [
         {
           key: "activejobs",
+          id: "header-active-jobs",
           icon: <FileFilled />,
           label: <Link to="/manage/jobs">{t("menus.header.activejobs")}</Link>
         },
         {
           key: "readyjobs",
+          id: "header-ready-jobs",
           icon: <CheckCircleOutlined />,
           label: <Link to="/manage/jobs/ready">{t("menus.header.readyjobs")}</Link>
         },
         {
           key: "parts-queue",
+          id: "header-parts-queue",
           icon: <ToolFilled />,
           label: <Link to="/manage/partsqueue">{t("menus.header.parts-queue")}</Link>
         },
@@ -347,6 +352,7 @@ function Header({
         },
         {
           key: "newjob",
+          id: "header-new-job",
           icon: <FileAddOutlined />,
           label: <Link to="/manage/jobs/new">{t("menus.header.newjob")}</Link>
         },
@@ -355,6 +361,7 @@ function Header({
         },
         {
           key: "alljobs",
+          id: "header-all-jobs",
           icon: <UnorderedListOutlined />,
           label: <Link to="/manage/jobs/all">{t("menus.header.alljobs")}</Link>
         },
@@ -363,6 +370,7 @@ function Header({
         },
         {
           key: "productionlist",
+          id: "header-production-list",
           icon: <ScheduleOutlined />,
           label: <Link to="/manage/production/list">{t("menus.header.productionlist")}</Link>
         },
@@ -374,6 +382,7 @@ function Header({
           ? [
               {
                 key: "productionboard",
+                id: "header-production-board",
                 icon: <Icon component={BsKanban} />,
                 label: <Link to="/manage/production/board">{t("menus.header.productionboard")}</Link>
               }
@@ -391,6 +400,7 @@ function Header({
               },
               {
                 key: "scoreboard",
+                id: "header-scoreboard",
                 icon: <LineChartOutlined />,
                 label: <Link to="/manage/scoreboard">{t("menus.header.scoreboard")}</Link>
               }
@@ -401,15 +411,18 @@ function Header({
     {
       key: "customers",
       icon: <UserOutlined />,
+      id: "header-customers",
       label: t("menus.header.customers"),
       children: [
         {
           key: "owners",
+          id: "header-owners",
           icon: <TeamOutlined />,
           label: <Link to="/manage/owners">{t("menus.header.owners")}</Link>
         },
         {
           key: "vehicles",
+          id: "header-vehicles",
           icon: <CarFilled />,
           label: <Link to="/manage/vehicles">{t("menus.header.vehicles")}</Link>
         }
@@ -423,21 +436,25 @@ function Header({
       ? [
           {
             key: "ccs",
+            id: "header-css",
             icon: <CarFilled />,
             label: t("menus.header.courtesycars"),
             children: [
               {
                 key: "courtesycarsall",
+                id: "header-courtesycars-all",
                 icon: <CarFilled />,
                 label: <Link to="/manage/courtesycars">{t("menus.header.courtesycars-all")}</Link>
               },
               {
                 key: "contracts",
+                id: "header-contracts",
                 icon: <FileFilled />,
                 label: <Link to="/manage/courtesycars/contracts">{t("menus.header.courtesycars-contracts")}</Link>
               },
               {
                 key: "newcontract",
+                id: "header-newcontract",
                 icon: <FileAddFilled />,
                 label: <Link to="/manage/courtesycars/contracts/new">{t("menus.header.courtesycars-newcontract")}</Link>
               }
@@ -450,6 +467,7 @@ function Header({
       ? [
           {
             key: "accounting",
+            id: "header-accounting",
             icon: <DollarCircleFilled />,
             label: t("menus.header.accounting"),
             children: accountingChildren
@@ -458,6 +476,7 @@ function Header({
       : []),
     {
       key: "phonebook",
+      id: "header-phonebook",
       icon: <PhoneOutlined />,
       label: <Link to="/manage/phonebook">{t("menus.header.phonebook")}</Link>
     },
@@ -469,6 +488,7 @@ function Header({
       ? [
           {
             key: "temporarydocs",
+            id: "header-temporarydocs",
             icon: <PaperClipOutlined />,
             label: <Link to="/manage/temporarydocs">{t("menus.header.temporarydocs")}</Link>
           }
@@ -505,21 +525,25 @@ function Header({
     },
     {
       key: "shopsubmenu",
+      id: "header-shopsubmenu",
       icon: <SettingOutlined />,
       label: t("menus.header.shop"),
       children: [
         {
           key: "shop",
+          id: "header-shop",
           icon: <Icon component={GiSettingsKnobs} />,
           label: <Link to="/manage/shop?tab=info">{t("menus.header.shop_config")}</Link>
         },
         {
           key: "dashboard",
+          id: "header-dashboard",
           icon: <DashboardFilled />,
           label: <Link to="/manage/dashboard">{t("menus.header.dashboard")}</Link>
         },
         {
           key: "reportcenter",
+          id: "header-reportcenter",
           icon: <BarChartOutlined />,
           label: t("menus.header.reportcenter"),
           onClick: () => {
@@ -531,6 +555,7 @@ function Header({
         },
         {
           key: "shop-vendors",
+          id: "header-shop-vendors",
           icon: <Icon component={IoBusinessOutline} />,
           label: <Link to="/manage/shop/vendors">{t("menus.header.shop_vendors")}</Link>
         },
@@ -542,6 +567,7 @@ function Header({
           ? [
               {
                 key: "shop-csi",
+                id: "header-shop-csi",
                 icon: <Icon component={RiSurveyLine} />,
                 label: <Link to="/manage/shop/csi">{t("menus.header.shop_csi")}</Link>
               }
@@ -555,6 +581,7 @@ function Header({
       children: [
         {
           key: "signout",
+          id: "header-signout",
           icon: <Icon component={FiLogOut} />,
           danger: true,
           label: t("user.actions.signout"),
@@ -562,6 +589,7 @@ function Header({
         },
         {
           key: "help",
+          id: "header-help",
           icon: <Icon component={QuestionCircleFilled} />,
           label: t("menus.header.help"),
           onClick: () => {
@@ -593,6 +621,7 @@ function Header({
           ? [
               {
                 key: "shiftclock",
+                id: "header-shiftclock",
                 icon: <Icon component={GiPlayerTime} />,
                 label: <Link to="/manage/shiftclock">{t("menus.header.shiftclock")}</Link>
               }
@@ -600,6 +629,7 @@ function Header({
           : []),
         {
           key: "profile",
+          id: "header-profile",
           icon: <UserOutlined />,
           label: <Link to="/manage/profile">{t("menus.currentuser.profile")}</Link>
         }
@@ -635,6 +665,7 @@ function Header({
     {
       key: "recent",
       icon: <ClockCircleFilled />,
+      id: "header-recent",
       children: recentItems.map((i, idx) => ({
         key: idx,
         label: <Link to={i.url}>{i.label}</Link>
@@ -648,6 +679,7 @@ function Header({
     imex: () => {
       menuItems.push({
         key: "beta-switch",
+        id: "header-beta-switch",
         style: { marginLeft: "auto" },
         label: (
           <Tooltip

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

@@ -1,6 +1,9 @@
 import { DownCircleFilled } from "@ant-design/icons";
 import { useApolloClient, useMutation } from "@apollo/client";
-import { Button, Card, Dropdown, Form, Input, Modal, notification, Popconfirm, Popover, Select, Space } from "antd";
+import { useSplitTreatments } from "@splitsoftware/splitio-react";
+import { Button, Card, Dropdown, Form, Input, Modal, Popconfirm, Popover, Select, Space, notification } from "antd";
+import axios from "axios";
+import parsePhoneNumber from "libphonenumber-js";
 import React, { useMemo, useState } from "react";
 import { useTranslation } from "react-i18next";
 import { connect } from "react-redux";
@@ -8,27 +11,24 @@ import { Link, useNavigate } from "react-router-dom";
 import { createStructuredSelector } from "reselect";
 import { auth, logImEXEvent } from "../../firebase/firebase.utils";
 import { CANCEL_APPOINTMENTS_BY_JOB_ID, INSERT_MANUAL_APPT } from "../../graphql/appointments.queries";
+import { GET_CURRENT_QUESTIONSET_ID, INSERT_CSI } from "../../graphql/csi.queries";
 import { DELETE_JOB, UPDATE_JOB, VOID_JOB } from "../../graphql/jobs.queries";
 import { insertAuditTrail } from "../../redux/application/application.actions";
 import { selectJobReadOnly } from "../../redux/application/application.selectors";
+import { setEmailOptions } from "../../redux/email/email.actions";
+import { openChatByPhone, setMessage } from "../../redux/messaging/messaging.actions";
 import { setModalContext } from "../../redux/modals/modals.actions";
 import { selectBodyshop, selectCurrentUser } from "../../redux/user/user.selectors";
 import AuditTrailMapping from "../../utils/AuditTrailMappings";
+import { DateTimeFormatter } from "../../utils/DateFormatter";
+import { TemplateList } from "../../utils/TemplateConstants";
+import dayjs from "../../utils/day";
+import InstanceRenderManager from "../../utils/instanceRenderMgr";
+import { HasFeatureAccess } from "../feature-wrapper/feature-wrapper.component";
+import FormDateTimePickerComponent from "../form-date-time-picker/form-date-time-picker.component";
 import RbacWrapper from "../rbac-wrapper/rbac-wrapper.component";
 import AddToProduction from "./jobs-detail-header-actions.addtoproduction.util";
 import DuplicateJob from "./jobs-detail-header-actions.duplicate.util";
-import axios from "axios";
-import { setEmailOptions } from "../../redux/email/email.actions";
-import { openChatByPhone, setMessage } from "../../redux/messaging/messaging.actions";
-import { GET_CURRENT_QUESTIONSET_ID, INSERT_CSI } from "../../graphql/csi.queries";
-import { TemplateList } from "../../utils/TemplateConstants";
-import parsePhoneNumber from "libphonenumber-js";
-import { HasFeatureAccess } from "../feature-wrapper/feature-wrapper.component";
-import { DateTimeFormatter } from "../../utils/DateFormatter";
-import FormDateTimePickerComponent from "../form-date-time-picker/form-date-time-picker.component";
-import dayjs from "../../utils/day";
-import { useSplitTreatments } from "@splitsoftware/splitio-react";
-import InstanceRenderManager from "../../utils/instanceRenderMgr";
 import JobsDetailHeaderActionsToggleProduction from "./jobs-detail-header-actions.toggle-production";
 
 const mapStateToProps = createStructuredSelector({
@@ -83,6 +83,13 @@ const mapDispatchToProps = (dispatch) => ({
         modal: "timeTicketTask"
       })
     ),
+  setTaskUpsertContext: (context) =>
+    dispatch(
+      setModalContext({
+        context: context,
+        modal: "taskUpsert"
+      })
+    ),
   setEmailOptions: (e) => dispatch(setEmailOptions(e)),
   openChatByPhone: (phone) => dispatch(openChatByPhone(phone)),
   setMessage: (text) => dispatch(setMessage(text))
@@ -104,7 +111,8 @@ export function JobsDetailHeaderActions({
   setEmailOptions,
   openChatByPhone,
   setMessage,
-  setTimeTicketTaskContext
+  setTimeTicketTaskContext,
+  setTaskUpsertContext
 }) {
   const { t } = useTranslation();
   const client = useApolloClient();
@@ -766,7 +774,7 @@ export function JobsDetailHeaderActions({
     });
   }
 
-  if (HasFeatureAccess({ featureName: "courtesycars" })) {
+  if (HasFeatureAccess({ featureName: "courtesycars", bodyshop })) {
     menuItems.push({
       key: "cccontract",
       disabled: jobRO || !job.converted,
@@ -778,6 +786,16 @@ export function JobsDetailHeaderActions({
     });
   }
 
+  menuItems.push({
+    key: "createtask",
+    label: t("menus.header.create_task"),
+    onClick: () =>
+      setTaskUpsertContext({
+        actions: {},
+        context: { jobid: job.id }
+      })
+  });
+
   menuItems.push(
     job.inproduction
       ? {

client/src/components/shop-info/shop-info.component.jsx

@@ -1,25 +1,25 @@
-import {  useSplitTreatments  } from '@splitsoftware/splitio-react';
-import {  Button, Card, Tabs  } from 'antd';
-import React from 'react';
-import {  useTranslation  } from 'react-i18next';
-import {  connect  } from 'react-redux';
-import {  createStructuredSelector  } from 'reselect';
-import {  selectBodyshop  } from '../../redux/user/user.selectors';
-import ShopInfoGeneral from './shop-info.general.component';
-import ShopInfoIntakeChecklistComponent from './shop-info.intake.component';
-import ShopInfoLaborRates from './shop-info.laborrates.component';
-import ShopInfoOrderStatusComponent from './shop-info.orderstatus.component';
-import ShopInfoPartsScan from './shop-info.parts-scan';
-import ShopInfoRbacComponent from './shop-info.rbac.component';
-import ShopInfoResponsibilityCenterComponent from './shop-info.responsibilitycenters.component';
-import ShopInfoROStatusComponent from './shop-info.rostatus.component';
-import ShopInfoSchedulingComponent from './shop-info.scheduling.component';
-import ShopInfoSpeedPrint from './shop-info.speedprint.component';
-import {  useLocation, useNavigate  } from 'react-router-dom';
-import ShopInfoTaskPresets from './shop-info.task-presets.component';
-import queryString from 'query-string';
-import InstanceRenderManager from '../../utils/instanceRenderMgr';
-import ShopInfoRoGuard from './shop-info.roguard.component';
+import { useSplitTreatments } from "@splitsoftware/splitio-react";
+import { Button, Card, Tabs } from "antd";
+import React from "react";
+import { useTranslation } from "react-i18next";
+import { connect } from "react-redux";
+import { createStructuredSelector } from "reselect";
+import { selectBodyshop } from "../../redux/user/user.selectors";
+import ShopInfoGeneral from "./shop-info.general.component";
+import ShopInfoIntakeChecklistComponent from "./shop-info.intake.component";
+import ShopInfoLaborRates from "./shop-info.laborrates.component";
+import ShopInfoOrderStatusComponent from "./shop-info.orderstatus.component";
+import ShopInfoPartsScan from "./shop-info.parts-scan";
+import ShopInfoRbacComponent from "./shop-info.rbac.component";
+import ShopInfoResponsibilityCenterComponent from "./shop-info.responsibilitycenters.component";
+import ShopInfoROStatusComponent from "./shop-info.rostatus.component";
+import ShopInfoSchedulingComponent from "./shop-info.scheduling.component";
+import ShopInfoSpeedPrint from "./shop-info.speedprint.component";
+import { useLocation, useNavigate } from "react-router-dom";
+import ShopInfoTaskPresets from "./shop-info.task-presets.component";
+import queryString from "query-string";
+import InstanceRenderManager from "../../utils/instanceRenderMgr";
+import ShopInfoRoGuard from "./shop-info.roguard.component";
 
 const mapStateToProps = createStructuredSelector({
   bodyshop: selectBodyshop
@@ -47,44 +47,52 @@ export function ShopInfoComponent({ bodyshop, form, saveLoading }) {
     {
       key: "general",
       label: t("bodyshop.labels.shopinfo"),
-      children: <ShopInfoGeneral form={form} />
+      children: <ShopInfoGeneral form={form} />,
+      id: "tab-shop-general"
     },
     {
       key: "speedprint",
       label: t("bodyshop.labels.speedprint"),
-      children: <ShopInfoSpeedPrint form={form} />
+      children: <ShopInfoSpeedPrint form={form} />,
+      id: "tab-shop-speedprint"
     },
     {
       key: "rbac",
       label: t("bodyshop.labels.rbac"),
-      children: <ShopInfoRbacComponent form={form} />
+      children: <ShopInfoRbacComponent form={form} />,
+      id: "tab-shop-rbac"
     },
     {
       key: "roStatus",
       label: t("bodyshop.labels.jobstatuses"),
-      children: <ShopInfoROStatusComponent form={form} />
+      children: <ShopInfoROStatusComponent form={form} />,
+      id: "tab-shop-rostatus"
     },
     {
       key: "scheduling",
       label: t("bodyshop.labels.scheduling"),
-      children: <ShopInfoSchedulingComponent form={form} />
+      children: <ShopInfoSchedulingComponent form={form} />,
+      id: "tab-shop-scheduling"
     },
     {
       key: "orderStatus",
       label: t("bodyshop.labels.orderstatuses"),
-      children: <ShopInfoOrderStatusComponent form={form} />
+      children: <ShopInfoOrderStatusComponent form={form} />,
+      id: "tab-shop-orderstatus"
     },
     {
       key: "responsibilityCenters",
       label: t("bodyshop.labels.responsibilitycenters.title"),
-      children: <ShopInfoResponsibilityCenterComponent form={form} />
+      children: <ShopInfoResponsibilityCenterComponent form={form} />,
+      id: "tab-shop-responsibilitycenters"
     },
     ...InstanceRenderManager({
       imex: [
         {
           key: "checklists",
           label: t("bodyshop.labels.checklists"),
-          children: <ShopInfoIntakeChecklistComponent form={form} />
+          children: <ShopInfoIntakeChecklistComponent form={form} />,
+          id: "tab-shop-checklists"
         }
       ],
       rome: "USE_IMEX",
@@ -93,14 +101,16 @@ export function ShopInfoComponent({ bodyshop, form, saveLoading }) {
     {
       key: "laborrates",
       label: t("bodyshop.labels.laborrates"),
-      children: <ShopInfoLaborRates form={form} />
+      children: <ShopInfoLaborRates form={form} />,
+      id: "tab-shop-laborrates"
     },
     ...(CriticalPartsScanning.treatment === "on"
       ? [
           {
             key: "partsscan",
             label: t("bodyshop.labels.partsscan"),
-            children: <ShopInfoPartsScan form={form} />
+            children: <ShopInfoPartsScan form={form} />,
+            id: "tab-shop-partsscan"
           }
         ]
       : []),
@@ -109,21 +119,23 @@ export function ShopInfoComponent({ bodyshop, form, saveLoading }) {
           {
             key: "task-presets",
             label: t("bodyshop.labels.task-presets"),
-            children: <ShopInfoTaskPresets form={form} />
+            children: <ShopInfoTaskPresets form={form} />,
+            id: "tab-shop-task-presets"
           }
         ]
       : []),
-      ...InstanceRenderManager({
-        imex: [
-          {
-            key: 'roguard',
-            label: t('bodyshop.labels.roguard.title'),
-            children: <ShopInfoRoGuard form={form} />,
-          },
-        ],
-        rome: 'USE_IMEX',
-        promanager: [],
-      }),
+    ...InstanceRenderManager({
+      imex: [
+        {
+          key: "roguard",
+          label: t("bodyshop.labels.roguard.title"),
+          children: <ShopInfoRoGuard form={form} />,
+          id: "tab-shop-roguard"
+        }
+      ],
+      rome: "USE_IMEX",
+      promanager: []
+    })
   ];
   return (
     <Card

client/src/pages/jobs-create/jobs-create.component.jsx

@@ -20,18 +20,21 @@ export default function JobsCreateComponent({ form }) {
   const steps = [
     {
       title: t("jobs.labels.create.vehicleinfo"),
+      id: "step-job-vehicleinfo",
       content: <JobsCreateVehicleInfoContainer form={form} />,
       validation: !!state.vehicle.new || !!state.vehicle.selectedid || !!state.vehicle.none,
       error: t("vehicles.errors.selectexistingornew")
     },
     {
       title: t("jobs.labels.create.ownerinfo"),
+      id: "step-job-ownerinfo",
       content: <JobsCreateOwnerInfoContainer />,
       validation: !!state.owner.new || !!state.owner.selectedid,
       error: t("owners.errors.selectexistingornew")
     },
     {
       title: t("jobs.labels.create.jobinfo"),
+      id: "step-job-jobinfo",
       content: <JobsCreateJobsInfo form={form} selected={pageIndex === 2} />
     }
   ];