Updated UI and added tech elements.

client/src/components/tech-sider/tech-sider.component.jsx

@@ -11,22 +11,38 @@ import { createStructuredSelector } from "reselect";
 import { techLogout } from "../../redux/tech/tech.actions";
 import { selectTechnician } from "../../redux/tech/tech.selectors";
 import { BsKanban } from "react-icons/bs";
+import { useTreatments } from "@splitsoftware/splitio-react";
+import { selectBodyshop } from "../../redux/user/user.selectors";
+import { setModalContext } from "../../redux/modals/modals.actions";
 
 const { Sider } = Layout;
 
 const mapStateToProps = createStructuredSelector({
   technician: selectTechnician,
+  bodyshop: selectBodyshop,
 });
 const mapDispatchToProps = (dispatch) => ({
   techLogout: () => dispatch(techLogout()),
+  setTimeTicketTaskContext: (context) =>
+    dispatch(setModalContext({ context: context, modal: "timeTicketTask" })),
 });
 
-export function TechSider({ technician, techLogout }) {
+export function TechSider({
+  technician,
+  techLogout,
+  bodyshop,
+  setTimeTicketTaskContext,
+}) {
   const [collapsed, setCollapsed] = useState(true);
   const { t } = useTranslation();
   const onCollapse = (collapsed) => {
     setCollapsed(collapsed);
   };
+  const { Enhanced_Payroll } = useTreatments(
+    ["Enhanced_Payroll"],
+    {},
+    bodyshop.imexshopid
+  );
 
   return (
     <Sider
@@ -51,13 +67,29 @@ export function TechSider({ technician, techLogout }) {
         <Menu.Item key="2" disabled={!!!technician} icon={<SearchOutlined />}>
           <Link to={`/tech/joblookup`}>{t("menus.tech.joblookup")}</Link>
         </Menu.Item>
-        <Menu.Item
-          key="3"
-          disabled={!!!technician}
-          icon={<Icon component={FaBusinessTime} />}
-        >
-          <Link to={`/tech/jobclock`}>{t("menus.tech.jobclockin")}</Link>
-        </Menu.Item>
+        {Enhanced_Payroll.treatment === "on" ? (
+          <Menu.Item
+            key="3"
+            disabled={!!!technician}
+            icon={<Icon component={FaBusinessTime} />}
+            onClick={() => {
+              setTimeTicketTaskContext({
+                actions: {},
+                context: { jobid: null },
+              });
+            }}
+          >
+            {t("menus.tech.claimtask")}
+          </Menu.Item>
+        ) : (
+          <Menu.Item
+            key="3"
+            disabled={!!!technician}
+            icon={<Icon component={FaBusinessTime} />}
+          >
+            <Link to={`/tech/jobclock`}>{t("menus.tech.jobclockin")}</Link>
+          </Menu.Item>
+        )}
         <Menu.Item
           key="4"
           disabled={!!!technician}