IO-2598 Restrict IOU from Tech Console

Feature/IO-1828 Beta Updates To Test

client/src/App/App.jsx

@@ -22,6 +22,7 @@ import {
 } from "../redux/user/user.selectors";
 import PrivateRoute from "../utils/private-route";
 import "./App.styles.scss";
+import handleBeta from "../utils/handleBeta";
 
 const ResetPassword = lazy(() =>
   import("../pages/reset-password/reset-password.component")
@@ -57,7 +58,6 @@ export function App({
     if (!navigator.onLine) {
       setOnline(false);
     }
-
     checkUserSession();
   }, [checkUserSession, setOnline]);
 
@@ -73,6 +73,7 @@ export function App({
   window.addEventListener("online", function (e) {
     setOnline(true);
   });
+
   useEffect(() => {
     if (currentUser.authorized && bodyshop) {
       client.setAttribute("imexshopid", bodyshop.imexshopid);
@@ -107,6 +108,8 @@ export function App({
       />
     );
 
+  handleBeta();
+
   return (
     <Switch>
       <Suspense fallback={<LoadingSpinner message="ImEX Online" />}>

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

@@ -13,7 +13,7 @@ import Icon, {
   FileFilled,
   //GlobalOutlined,
   HomeFilled,
-  ImportOutlined,
+  ImportOutlined, InfoCircleOutlined,
   LineChartOutlined,
   PaperClipOutlined,
   PhoneOutlined,
@@ -26,8 +26,8 @@ import Icon, {
   UserOutlined,
 } from "@ant-design/icons";
 import { useTreatments } from "@splitsoftware/splitio-react";
-import { Layout, Menu } from "antd";
-import React from "react";
+import {Layout, Menu, Switch, Tooltip} from "antd";
+import React, {useEffect, useState} from "react";
 import { useTranslation } from "react-i18next";
 import { BsKanban } from "react-icons/bs";
 import {
@@ -52,6 +52,7 @@ import {
   selectBodyshop,
   selectCurrentUser,
 } from "../../redux/user/user.selectors";
+import {handleBeta, setBeta, checkBeta} from "../../utils/handleBeta";
 
 const mapStateToProps = createStructuredSelector({
   currentUser: selectCurrentUser,
@@ -102,9 +103,21 @@ function Header({
     {},
     bodyshop && bodyshop.imexshopid
   );
+  const [betaSwitch, setBetaSwitch] = useState(false);
 
   const { t } = useTranslation();
 
+  useEffect(() => {
+    const isBeta = checkBeta();
+    setBetaSwitch(isBeta);
+  }, []);
+
+  const betaSwitchChange = (checked) => {
+    setBeta(checked);
+    setBetaSwitch(checked);
+    handleBeta();
+  }
+
   return (
     <Layout.Header>
       <Menu
@@ -431,6 +444,17 @@ function Header({
             </Menu.Item>
           ))}
         </Menu.SubMenu>
+        <Menu.Item style={{marginLeft: 'auto'}} key="profile">
+          <Tooltip title="A more modern ImEX Online is ready for you to try! You can switch back at any time.">
+            <InfoCircleOutlined/>
+            <span style={{marginRight: 8}}>Try the new ImEX Online</span>
+            <Switch
+                checked={betaSwitch}
+                onChange={betaSwitchChange}
+            />
+          </Tooltip>
+        </Menu.Item>
+
       </Menu>
     </Layout.Header>
   );

client/src/components/job-create-iou/job-create-iou.component.jsx

@@ -7,21 +7,31 @@ import { connect } from "react-redux";
 import { useHistory } from "react-router";
 import { createStructuredSelector } from "reselect";
 import { UPDATE_JOB_LINES_IOU } from "../../graphql/jobs-lines.queries";
+import { selectTechnician } from "../../redux/tech/tech.selectors";
 import {
   selectBodyshop,
   selectCurrentUser,
 } from "../../redux/user/user.selectors";
 import { CreateIouForJob } from "../jobs-detail-header-actions/jobs-detail-header-actions.duplicate.util";
+
 const mapStateToProps = createStructuredSelector({
   bodyshop: selectBodyshop,
   currentUser: selectCurrentUser,
+  technician: selectTechnician,
 });
+
 const mapDispatchToProps = (dispatch) => ({
   //setUserLanguage: language => dispatch(setUserLanguage(language))
 });
 export default connect(mapStateToProps, mapDispatchToProps)(JobCreateIOU);
 
-export function JobCreateIOU({ bodyshop, currentUser, job, selectedJobLines }) {
+export function JobCreateIOU({
+  bodyshop,
+  currentUser,
+  job,
+  selectedJobLines,
+  technician,
+}) {
   const { t } = useTranslation();
   const [loading, setLoading] = useState(false);
   const client = useApolloClient();
@@ -79,13 +89,19 @@ export function JobCreateIOU({ bodyshop, currentUser, job, selectedJobLines }) {
       title={t("jobs.labels.createiouwarning")}
       onConfirm={handleCreateIou}
       disabled={
-        !selectedJobLines || selectedJobLines.length === 0 || !job.converted
+        !selectedJobLines ||
+        selectedJobLines.length === 0 ||
+        !job.converted ||
+        technician
       }
     >
       <Button
         loading={loading}
         disabled={
-          !selectedJobLines || selectedJobLines.length === 0 || !job.converted
+          !selectedJobLines ||
+          selectedJobLines.length === 0 ||
+          !job.converted ||
+          technician
         }
       >
         {t("jobs.actions.createiou")}

client/src/components/jobs-list-paginated/jobs-list-paginated.component.jsx

@@ -10,10 +10,9 @@ import { Link, useHistory, useLocation } from "react-router-dom";
 import { createStructuredSelector } from "reselect";
 import { selectBodyshop } from "../../redux/user/user.selectors";
 import CurrencyFormatter from "../../utils/CurrencyFormatter";
-import { pageLimit } from "../../utils/config";
-import useLocalStorage from "../../utils/useLocalStorage";
 import StartChatButton from "../chat-open-button/chat-open-button.component";
 import OwnerNameDisplay from "../owner-name-display/owner-name-display.component";
+import {pageLimit} from "../../utils/config";
 const mapStateToProps = createStructuredSelector({
   //currentUser: selectCurrentUser
   bodyshop: selectBodyshop,
@@ -26,7 +25,6 @@ export function JobsList({ bodyshop, refetch, loading, jobs, total }) {
   const search = queryString.parse(useLocation().search);
   const [openSearchResults, setOpenSearchResults] = useState([]);
   const [searchLoading, setSearchLoading] = useState(false);
-  const [filter, setFilter] = useLocalStorage("filter_jobs_all", null);
   const { page, sortcolumn, sortorder } = search;
   const history = useHistory();
 
@@ -95,7 +93,6 @@ export function JobsList({ bodyshop, refetch, loading, jobs, total }) {
       render: (text, record) => {
         return record.status || t("general.labels.na");
       },
-      filteredValue: filter?.status || null,
       filters: bodyshop.md_ro_statuses.statuses.map((s) => {
         return { text: s, value: [s] };
       }),
@@ -192,7 +189,6 @@ export function JobsList({ bodyshop, refetch, loading, jobs, total }) {
     } else {
       delete search.statusFilters;
     }
-    setFilter(filters);
     history.push({ search: queryString.stringify(search) });
   };
 

client/src/components/jobs-list/jobs-list.component.jsx

@@ -1,8 +1,8 @@
 import {
-    BranchesOutlined,
+    SyncOutlined,
     ExclamationCircleFilled,
     PauseCircleOutlined,
-    SyncOutlined,
+    BranchesOutlined,
 } from "@ant-design/icons";
 import { useQuery } from "@apollo/client";
 import { Button, Card, Grid, Input, Space, Table, Tooltip } from "antd";
@@ -14,389 +14,382 @@ import { Link, useHistory, useLocation } from "react-router-dom";
 import { createStructuredSelector } from "reselect";
 import { QUERY_ALL_ACTIVE_JOBS } from "../../graphql/jobs.queries";
 import { selectBodyshop } from "../../redux/user/user.selectors";
-import CurrencyFormatter from "../../utils/CurrencyFormatter";
 import { onlyUnique } from "../../utils/arrayHelper";
-import { alphaSort, statusSort } from "../../utils/sorters";
-import useLocalStorage from "../../utils/useLocalStorage";
+import CurrencyFormatter from "../../utils/CurrencyFormatter";
+import { alphaSort } from "../../utils/sorters";
 import AlertComponent from "../alert/alert.component";
 import ChatOpenButton from "../chat-open-button/chat-open-button.component";
 import OwnerNameDisplay from "../owner-name-display/owner-name-display.component";
 
 const mapStateToProps = createStructuredSelector({
-  bodyshop: selectBodyshop,
+    bodyshop: selectBodyshop,
 });
 
 export function JobsList({ bodyshop }) {
-  const searchParams = queryString.parse(useLocation().search);
-  const { selected } = searchParams;
-  const selectedBreakpoint = Object.entries(Grid.useBreakpoint())
-    .filter((screen) => !!screen[1])
-    .slice(-1)[0];
-  const { loading, error, data, refetch } = useQuery(QUERY_ALL_ACTIVE_JOBS, {
-    variables: {
-      statuses: bodyshop.md_ro_statuses.active_statuses || ["Open", "Open*"],
-    },
-    fetchPolicy: "network-only",
-    nextFetchPolicy: "network-only",
-  });
+    const searchParams = queryString.parse(useLocation().search);
+    const { selected } = searchParams;
+    const selectedBreakpoint = Object.entries(Grid.useBreakpoint())
+        .filter((screen) => !!screen[1])
+        .slice(-1)[0];
+    const { loading, error, data, refetch } = useQuery(QUERY_ALL_ACTIVE_JOBS, {
+        variables: {
+            statuses: bodyshop.md_ro_statuses.active_statuses || ["Open", "Open*"],
+        },
+        fetchPolicy: "network-only",
+        nextFetchPolicy: "network-only",
+    });
 
-  const [state, setState] = useState({ sortedInfo: {} });
-  const [filter, setFilter] = useLocalStorage("filter_jobs_list", null);
+    const [state, setState] = useState({
+        sortedInfo: {},
+        filteredInfo: { text: "" },
+    });
 
-  const { t } = useTranslation();
-  const history = useHistory();
-  const [searchText, setSearchText] = useState("");
+    const { t } = useTranslation();
+    const history = useHistory();
+    const [searchText, setSearchText] = useState("");
 
-  if (error) return <AlertComponent message={error.message} type="error" />;
+    if (error) return <AlertComponent message={error.message} type="error" />;
 
-  const jobs = data
-    ? searchText === ""
-      ? data.jobs
-      : data.jobs.filter(
-          (j) =>
-            (j.ro_number || "")
-              .toString()
-              .toLowerCase()
-              .includes(searchText.toLowerCase()) ||
-            (j.ownr_co_nm || "")
-              .toLowerCase()
-              .includes(searchText.toLowerCase()) ||
-            (j.comments || "")
-              .toLowerCase()
-              .includes(searchText.toLowerCase()) ||
-            (j.ownr_fn || "")
-              .toLowerCase()
-              .includes(searchText.toLowerCase()) ||
-            (j.ownr_ln || "")
-              .toLowerCase()
-              .includes(searchText.toLowerCase()) ||
-            (j.clm_no || "").toLowerCase().includes(searchText.toLowerCase()) ||
-            (j.plate_no || "")
-              .toLowerCase()
-              .includes(searchText.toLowerCase()) ||
-            (j.v_model_desc || "")
-              .toLowerCase()
-              .includes(searchText.toLowerCase()) ||
-            (j.est_ct_fn || "")
-              .toLowerCase()
-              .includes(searchText.toLowerCase()) ||
-            (j.est_ct_ln || "")
-              .toLowerCase()
-              .includes(searchText.toLowerCase()) ||
-            (j.v_make_desc || "")
-              .toLowerCase()
-              .includes(searchText.toLowerCase())
-        )
-    : [];
+    const jobs = data
+        ? searchText === ""
+            ? data.jobs
+            : data.jobs.filter(
+                (j) =>
+                    (j.ro_number || "")
+                        .toString()
+                        .toLowerCase()
+                        .includes(searchText.toLowerCase()) ||
+                    (j.ownr_co_nm || "")
+                        .toLowerCase()
+                        .includes(searchText.toLowerCase()) ||
+                    (j.comments || "")
+                        .toLowerCase()
+                        .includes(searchText.toLowerCase()) ||
+                    (j.ownr_fn || "")
+                        .toLowerCase()
+                        .includes(searchText.toLowerCase()) ||
+                    (j.ownr_ln || "")
+                        .toLowerCase()
+                        .includes(searchText.toLowerCase()) ||
+                    (j.clm_no || "").toLowerCase().includes(searchText.toLowerCase()) ||
+                    (j.plate_no || "")
+                        .toLowerCase()
+                        .includes(searchText.toLowerCase()) ||
+                    (j.v_model_desc || "")
+                        .toLowerCase()
+                        .includes(searchText.toLowerCase()) ||
+                    (j.est_ct_fn || "")
+                        .toLowerCase()
+                        .includes(searchText.toLowerCase()) ||
+                    (j.est_ct_ln || "")
+                        .toLowerCase()
+                        .includes(searchText.toLowerCase()) ||
+                    (j.v_make_desc || "")
+                        .toLowerCase()
+                        .includes(searchText.toLowerCase())
+            )
+        : [];
 
-  const handleTableChange = (pagination, filters, sorter) => {
-    setState({ ...state, sortedInfo: sorter });
-    setFilter(filters);
-  };
+    const handleTableChange = (pagination, filters, sorter) => {
+        setState({ ...state, filteredInfo: filters, sortedInfo: sorter });
+    };
 
-  const handleOnRowClick = (record) => {
-    if (record) {
-      if (record.id) {
-        history.push({
-          search: queryString.stringify({
-            ...searchParams,
-            selected: record.id,
-          }),
-        });
-      }
-    }
-  };
+    const handleOnRowClick = (record) => {
+        if (record) {
+            if (record.id) {
+                history.push({
+                    search: queryString.stringify({
+                        ...searchParams,
+                        selected: record.id,
+                    }),
+                });
+            }
+        }
+    };
 
-  const columns = [
-    {
-      title: t("jobs.fields.ro_number"),
-      dataIndex: "ro_number",
-      key: "ro_number",
-      sorter: (a, b) =>
-        parseInt((a.ro_number || "0").replace(/\D/g, "")) -
-        parseInt((b.ro_number || "0").replace(/\D/g, "")),
-      sortOrder:
-        state.sortedInfo.columnKey === "ro_number" && state.sortedInfo.order,
-      render: (text, record) => (
-        <Link
-          to={"/manage/jobs/" + record.id}
-          onClick={(e) => e.stopPropagation()}
-        >
-          <Space>
-            {record.ro_number || t("general.labels.na")}
-            {record.production_vars && record.production_vars.alert ? (
-              <ExclamationCircleFilled className="production-alert" />
-            ) : null}
-            {record.suspended && (
-              <PauseCircleOutlined style={{ color: "orangered" }} />
-            )}
-            {record.iouparent && (
-              <Tooltip title={t("jobs.labels.iou")}>
-                <BranchesOutlined style={{ color: "orangered" }} />
-              </Tooltip>
-            )}
-          </Space>
-        </Link>
-      ),
-    },
-    {
-      title: t("jobs.fields.owner"),
-      dataIndex: "owner",
-      key: "owner",
-      ellipsis: true,
-      responsive: ["md"],
-      sorter: (a, b) => alphaSort(a.ownr_ln, b.ownr_ln),
-      sortOrder:
-        state.sortedInfo.columnKey === "owner" && state.sortedInfo.order,
-      render: (text, record) => {
-        return record.ownerid ? (
-          <Link
-            to={"/manage/owners/" + record.ownerid}
-            onClick={(e) => e.stopPropagation()}
-          >
-            <OwnerNameDisplay ownerObject={record} />
-          </Link>
-        ) : (
-          <span>
+    const columns = [
+        {
+            title: t("jobs.fields.ro_number"),
+            dataIndex: "ro_number",
+            key: "ro_number",
+            sorter: (a, b) =>
+                parseInt((a.ro_number || "0").replace(/\D/g, "")) -
+                parseInt((b.ro_number || "0").replace(/\D/g, "")),
+            sortOrder:
+                state.sortedInfo.columnKey === "ro_number" && state.sortedInfo.order,
+
+            render: (text, record) => (
+                <Link
+                    to={"/manage/jobs/" + record.id}
+                    onClick={(e) => e.stopPropagation()}
+                >
+                    <Space>
+                        {record.ro_number || t("general.labels.na")}
+                        {record.production_vars && record.production_vars.alert ? (
+                            <ExclamationCircleFilled className="production-alert" />
+                        ) : null}
+                        {record.suspended && (
+                            <PauseCircleOutlined style={{ color: "orangered" }} />
+                        )}
+                        {record.iouparent && (
+                            <Tooltip title={t("jobs.labels.iou")}>
+                                <BranchesOutlined style={{ color: "orangered" }} />
+                            </Tooltip>
+                        )}
+                    </Space>
+                </Link>
+            ),
+        },
+        {
+            title: t("jobs.fields.owner"),
+            dataIndex: "owner",
+            key: "owner",
+            ellipsis: true,
+
+            responsive: ["md"],
+            sorter: (a, b) => alphaSort(a.ownr_ln, b.ownr_ln),
+            sortOrder:
+                state.sortedInfo.columnKey === "owner" && state.sortedInfo.order,
+            render: (text, record) => {
+                return record.ownerid ? (
+                    <Link
+                        to={"/manage/owners/" + record.ownerid}
+                        onClick={(e) => e.stopPropagation()}
+                    >
+                        <OwnerNameDisplay ownerObject={record} />
+                    </Link>
+                ) : (
+                    <span>
             <OwnerNameDisplay ownerObject={record} />
           </span>
-        );
-      },
-    },
-    {
-      title: t("jobs.fields.ownr_ph1"),
-      dataIndex: "ownr_ph1",
-      key: "ownr_ph1",
-      ellipsis: true,
-      responsive: ["md"],
-      render: (text, record) => (
-        <ChatOpenButton phone={record.ownr_ph1} jobid={record.id} />
-      ),
-    },
-    {
-      title: t("jobs.fields.ownr_ph2"),
-      dataIndex: "ownr_ph2",
-      key: "ownr_ph2",
-      ellipsis: true,
-      responsive: ["md"],
-      render: (text, record) => (
-        <ChatOpenButton phone={record.ownr_ph2} jobid={record.id} />
-      ),
-    },
-    {
-      title: t("jobs.fields.status"),
-      dataIndex: "status",
-      key: "status",
-      ellipsis: true,
-      sorter: (a, b) => alphaSort(a.status, b.status),
-      sortOrder:
-        state.sortedInfo.columnKey === "status" && state.sortedInfo.order,
-      filteredValue: filter?.status || null,
-      filters:
-        (jobs &&
-          jobs
-            .map((j) => j.status)
-            .filter(onlyUnique)
-            .map((s) => {
-              return {
-                text: s || "No Status*",
-                value: [s],
-              };
-            })
-            .sort((a, b) =>
-              statusSort(
-                a.text,
-                b.text,
-                bodyshop.md_ro_statuses.active_statuses
-              )
-            )) ||
-        [],
-      onFilter: (value, record) => value.includes(record.status),
-    },
-
-    {
-      title: t("jobs.fields.vehicle"),
-      dataIndex: "vehicle",
-      key: "vehicle",
-      ellipsis: true,
-      render: (text, record) => {
-        return record.vehicleid ? (
-          <Link
-            to={"/manage/vehicles/" + record.vehicleid}
-            onClick={(e) => e.stopPropagation()}
-          >
-            {`${record.v_model_yr || ""} ${record.v_make_desc || ""} ${
-              record.v_model_desc || ""
-            }`}
-          </Link>
-        ) : (
-          <span>{`${record.v_model_yr || ""} ${record.v_make_desc || ""} ${
-            record.v_model_desc || ""
-          }`}</span>
-        );
-      },
-    },
-    {
-      title: t("vehicles.fields.plate_no"),
-      dataIndex: "plate_no",
-      key: "plate_no",
-      ellipsis: true,
-
-      responsive: ["md"],
-      sorter: (a, b) => alphaSort(a.plate_no, b.plate_no),
-      sortOrder:
-        state.sortedInfo.columnKey === "plate_no" && state.sortedInfo.order,
-    },
-    {
-      title: t("jobs.fields.clm_no"),
-      dataIndex: "clm_no",
-      key: "clm_no",
-      ellipsis: true,
-      responsive: ["md"],
-      sorter: (a, b) => alphaSort(a.clm_no, b.clm_no),
-      sortOrder:
-        state.sortedInfo.columnKey === "clm_no" && state.sortedInfo.order,
-      render: (text, record) =>
-        `${record.clm_no || ""}${
-          record.po_number ? ` (PO: ${record.po_number})` : ""
-        }`,
-    },
-    {
-      title: t("jobs.fields.ins_co_nm"),
-      dataIndex: "ins_co_nm",
-      key: "ins_co_nm",
-      ellipsis: true,
-      filteredValue: filter?.ins_co_nm || null,
-      filters:
-        (jobs &&
-          jobs
-            .map((j) => j.ins_co_nm)
-            .filter(onlyUnique)
-            .map((s) => {
-              return {
-                text: s || "No Ins. Co.*",
-                value: [s],
-              };
-            })
-            .sort((a, b) => alphaSort(a.text, b.text))) ||
-        [],
-      onFilter: (value, record) => value.includes(record.ins_co_nm),
-      responsive: ["md"],
-    },
-    {
-      title: t("jobs.fields.clm_total"),
-      dataIndex: "clm_total",
-      key: "clm_total",
-      responsive: ["md"],
-      ellipsis: true,
-      sorter: (a, b) => a.clm_total - b.clm_total,
-      sortOrder:
-        state.sortedInfo.columnKey === "clm_total" && state.sortedInfo.order,
-      render: (text, record) => (
-        <CurrencyFormatter>{record.clm_total}</CurrencyFormatter>
-      ),
-    },
-    {
-      title: t("jobs.labels.estimator"),
-      dataIndex: "jobs.labels.estimator",
-      key: "estimator",
-      ellipsis: true,
-      responsive: ["xl"],
-      filterSearch: true,
-      filteredValue: filter?.estimator || null,
-      filters:
-        (jobs &&
-          jobs
-            .map((j) => `${j.est_ct_fn || ""} ${j.est_ct_ln || ""}`.trim())
-            .filter(onlyUnique)
-            .map((s) => {
-              return {
-                text: s || "No Estimator*",
-                value: [s],
-              };
-            })
-            .sort((a, b) => alphaSort(a.text, b.text))) ||
-        [],
-      onFilter: (value, record) =>
-        value.includes(
-          `${record.est_ct_fn || ""} ${record.est_ct_ln || ""}`.trim()
-        ),
-      render: (text, record) =>
-        `${record.est_ct_fn || ""} ${record.est_ct_ln || ""}`.trim(),
-    },
-    {
-      title: t("jobs.fields.comment"),
-      dataIndex: "comment",
-      key: "comment",
-      ellipsis: true,
-      responsive: ["md"],
-    },
-    // {
-    //   title: t("jobs.fields.owner_owing"),
-    //   dataIndex: "owner_owing",
-    //   key: "owner_owing",
-    //   responsive: ["md"],
-    //   render: (text, record) => (
-    //     <CurrencyFormatter>{record.owner_owing}</CurrencyFormatter>
-    //   ),
-    // },
-  ];
-
-  const scrollMapper = {
-    xs: true,
-    sm: true,
-    md: true,
-    lg: "100%",
-    xl: "100%",
-    xxl: "100%",
-  };
-
-  return (
-    <Card
-      title={t("titles.bc.jobs-active")}
-      extra={
-        <Space wrap>
-          <Button onClick={() => refetch()}>
-            <SyncOutlined />
-          </Button>
-          <Input.Search
-            placeholder={t("general.labels.search")}
-            onChange={(e) => {
-              setSearchText(e.target.value);
-            }}
-            value={searchText}
-            enterButton
-          />
-        </Space>
-      }
-    >
-      <Table
-        loading={loading}
-        pagination={{ defaultPageSize: 50 }}
-        columns={columns}
-        rowKey="id"
-        dataSource={jobs}
-        scroll={{
-          x: selectedBreakpoint ? scrollMapper[selectedBreakpoint[0]] : "100%",
-        }}
-        rowSelection={{
-          onSelect: (record) => {
-            handleOnRowClick(record);
-          },
-          selectedRowKeys: [selected],
-          type: "radio",
-        }}
-        onChange={handleTableChange}
-        onRow={(record, rowIndex) => {
-          return {
-            onClick: (event) => {
-              handleOnRowClick(record);
+                );
             },
-          };
-        }}
-      />
-    </Card>
-  );
+        },
+        {
+            title: t("jobs.fields.ownr_ph1"),
+            dataIndex: "ownr_ph1",
+            key: "ownr_ph1",
+            ellipsis: true,
+            responsive: ["md"],
+            render: (text, record) => (
+                <ChatOpenButton phone={record.ownr_ph1} jobid={record.id} />
+            ),
+        },
+        {
+            title: t("jobs.fields.ownr_ph2"),
+            dataIndex: "ownr_ph2",
+            key: "ownr_ph2",
+            ellipsis: true,
+            responsive: ["md"],
+            render: (text, record) => (
+                <ChatOpenButton phone={record.ownr_ph2} jobid={record.id} />
+            ),
+        },
+
+        {
+            title: t("jobs.fields.status"),
+            dataIndex: "status",
+            key: "status",
+            ellipsis: true,
+
+            sorter: (a, b) => alphaSort(a.status, b.status),
+            sortOrder:
+                state.sortedInfo.columnKey === "status" && state.sortedInfo.order,
+            filters:
+                (jobs &&
+                    jobs
+                        .map((j) => j.status)
+                        .filter(onlyUnique)
+                        .map((s) => {
+                            return {
+                                text: s || "No Status*",
+                                value: [s],
+                            };
+                        })) ||
+                [],
+            onFilter: (value, record) => value.includes(record.status),
+        },
+
+        {
+            title: t("jobs.fields.vehicle"),
+            dataIndex: "vehicle",
+            key: "vehicle",
+            ellipsis: true,
+            render: (text, record) => {
+                return record.vehicleid ? (
+                    <Link
+                        to={"/manage/vehicles/" + record.vehicleid}
+                        onClick={(e) => e.stopPropagation()}
+                    >
+                        {`${record.v_model_yr || ""} ${record.v_make_desc || ""} ${
+                            record.v_model_desc || ""
+                        }`}
+                    </Link>
+                ) : (
+                    <span>{`${record.v_model_yr || ""} ${record.v_make_desc || ""} ${
+                        record.v_model_desc || ""
+                    }`}</span>
+                );
+            },
+        },
+        {
+            title: t("vehicles.fields.plate_no"),
+            dataIndex: "plate_no",
+            key: "plate_no",
+            ellipsis: true,
+
+            responsive: ["md"],
+            sorter: (a, b) => alphaSort(a.plate_no, b.plate_no),
+            sortOrder:
+                state.sortedInfo.columnKey === "plate_no" && state.sortedInfo.order,
+        },
+        {
+            title: t("jobs.fields.clm_no"),
+            dataIndex: "clm_no",
+            key: "clm_no",
+            ellipsis: true,
+            responsive: ["md"],
+            sorter: (a, b) => alphaSort(a.clm_no, b.clm_no),
+            sortOrder:
+                state.sortedInfo.columnKey === "clm_no" && state.sortedInfo.order,
+            render: (text, record) =>
+                `${record.clm_no || ""}${
+                    record.po_number ? ` (PO: ${record.po_number})` : ""
+                }`,
+        },
+        {
+            title: t("jobs.fields.ins_co_nm"),
+            dataIndex: "ins_co_nm",
+            key: "ins_co_nm",
+            ellipsis: true,
+            filters:
+                (jobs &&
+                    jobs
+                        .map((j) => j.ins_co_nm)
+                        .filter(onlyUnique)
+                        .map((s) => {
+                            return {
+                                text: s,
+                                value: [s],
+                            };
+                        })) ||
+                [],
+            onFilter: (value, record) => value.includes(record.ins_co_nm),
+            responsive: ["md"],
+        },
+        {
+            title: t("jobs.fields.clm_total"),
+            dataIndex: "clm_total",
+            key: "clm_total",
+            responsive: ["md"],
+            ellipsis: true,
+
+            sorter: (a, b) => a.clm_total - b.clm_total,
+            sortOrder:
+                state.sortedInfo.columnKey === "clm_total" && state.sortedInfo.order,
+            render: (text, record) => (
+                <CurrencyFormatter>{record.clm_total}</CurrencyFormatter>
+            ),
+        },
+        {
+            title: t("jobs.labels.estimator"),
+            dataIndex: "jobs.labels.estimator",
+            key: "jobs.labels.estimator",
+            ellipsis: true,
+            responsive: ["xl"],
+            filterSearch: true,
+            filters:
+                (jobs &&
+                    jobs
+                        .map((j) => `${j.est_ct_fn || ""} ${j.est_ct_ln || ""}`.trim())
+                        .filter(onlyUnique)
+                        .map((s) => {
+                            return {
+                                text: s || "N/A",
+                                value: [s],
+                            };
+                        })) ||
+                [],
+            onFilter: (value, record) =>
+                value.includes(
+                    `${record.est_ct_fn || ""} ${record.est_ct_ln || ""}`.trim()
+                ),
+            render: (text, record) =>
+                `${record.est_ct_fn || ""} ${record.est_ct_ln || ""}`.trim(),
+        },
+        {
+            title: t("jobs.fields.comment"),
+            dataIndex: "comment",
+            key: "comment",
+            ellipsis: true,
+            responsive: ["md"],
+        },
+        // {
+        //   title: t("jobs.fields.owner_owing"),
+        //   dataIndex: "owner_owing",
+        //   key: "owner_owing",
+        //   responsive: ["md"],
+        //   render: (text, record) => (
+        //     <CurrencyFormatter>{record.owner_owing}</CurrencyFormatter>
+        //   ),
+        // },
+    ];
+
+    const scrollMapper = {
+        xs: true,
+        sm: true,
+        md: true,
+        lg: "100%",
+        xl: "100%",
+        xxl: "100%",
+    };
+
+    return (
+        <Card
+            title={t("titles.bc.jobs-active")}
+            extra={
+                <Space wrap>
+                    <Button onClick={() => refetch()}>
+                        <SyncOutlined />
+                    </Button>
+                    <Input.Search
+                        placeholder={t("general.labels.search")}
+                        onChange={(e) => {
+                            setSearchText(e.target.value);
+                        }}
+                        value={searchText}
+                        enterButton
+                    />
+                </Space>
+            }
+        >
+            <Table
+                loading={loading}
+                pagination={{ defaultPageSize: 50 }}
+                columns={columns}
+                rowKey="id"
+                dataSource={jobs}
+                scroll={{
+                    x: selectedBreakpoint ? scrollMapper[selectedBreakpoint[0]] : "100%",
+                }}
+                rowSelection={{
+                    onSelect: (record) => {
+                        handleOnRowClick(record);
+                    },
+                    selectedRowKeys: [selected],
+                    type: "radio",
+                }}
+                onChange={handleTableChange}
+                onRow={(record, rowIndex) => {
+                    return {
+                        onClick: (event) => {
+                            handleOnRowClick(record);
+                        },
+                    };
+                }}
+            />
+        </Card>
+    );
 }
 
 export default connect(mapStateToProps, null)(JobsList);

client/src/components/jobs-ready-list/jobs-ready-list.component.jsx

@@ -16,12 +16,11 @@ import { QUERY_ALL_ACTIVE_JOBS } from "../../graphql/jobs.queries";
 import { selectBodyshop } from "../../redux/user/user.selectors";
 import CurrencyFormatter from "../../utils/CurrencyFormatter";
 import { onlyUnique } from "../../utils/arrayHelper";
-import { pageLimit } from "../../utils/config";
-import { alphaSort, statusSort } from "../../utils/sorters";
-import useLocalStorage from "../../utils/useLocalStorage";
+import { alphaSort } from "../../utils/sorters";
 import AlertComponent from "../alert/alert.component";
 import ChatOpenButton from "../chat-open-button/chat-open-button.component";
 import OwnerNameDisplay from "../owner-name-display/owner-name-display.component";
+import {pageLimit} from "../../utils/config";
 
 const mapStateToProps = createStructuredSelector({
   bodyshop: selectBodyshop,
@@ -54,8 +53,10 @@ export function JobsReadyList({ bodyshop }) {
     nextFetchPolicy: "network-only",
   });
 
-  const [state, setState] = useState({ sortedInfo: {} });
-  const [filter, setFilter] = useLocalStorage("filter_jobs_ready", null);
+  const [state, setState] = useState({
+    sortedInfo: {},
+    filteredInfo: { text: "" },
+  });
 
   const { t } = useTranslation();
   const history = useHistory();
@@ -104,8 +105,7 @@ export function JobsReadyList({ bodyshop }) {
     : [];
 
   const handleTableChange = (pagination, filters, sorter) => {
-    setState({ ...state, sortedInfo: sorter });
-    setFilter(filters);
+    setState({ ...state, filteredInfo: filters, sortedInfo: sorter });
   };
 
   const handleOnRowClick = (record) => {
@@ -129,6 +129,7 @@ export function JobsReadyList({ bodyshop }) {
       sorter: (a, b) => alphaSort(a.ro_number, b.ro_number),
       sortOrder:
         state.sortedInfo.columnKey === "ro_number" && state.sortedInfo.order,
+
       render: (text, record) => (
         <Link
           to={"/manage/jobs/" + record.id}
@@ -156,6 +157,7 @@ export function JobsReadyList({ bodyshop }) {
       dataIndex: "owner",
       key: "owner",
       ellipsis: true,
+
       responsive: ["md"],
       sorter: (a, b) => alphaSort(a.ownr_ln, b.ownr_ln),
       sortOrder:
@@ -195,15 +197,16 @@ export function JobsReadyList({ bodyshop }) {
         <ChatOpenButton phone={record.ownr_ph2} jobid={record.id} />
       ),
     },
+
     {
       title: t("jobs.fields.status"),
       dataIndex: "status",
       key: "status",
       ellipsis: true,
+
       sorter: (a, b) => alphaSort(a.status, b.status),
       sortOrder:
         state.sortedInfo.columnKey === "status" && state.sortedInfo.order,
-      filteredValue: filter?.status || null,
       filters:
         (jobs &&
           jobs
@@ -214,17 +217,11 @@ export function JobsReadyList({ bodyshop }) {
                 text: s || "No Status*",
                 value: [s],
               };
-            })
-            .sort((a, b) =>
-              statusSort(
-                a.text,
-                b.text,
-                bodyshop.md_ro_statuses.active_statuses
-              )
-            )) ||
+            })) ||
         [],
       onFilter: (value, record) => value.includes(record.status),
     },
+
     {
       title: t("jobs.fields.vehicle"),
       dataIndex: "vehicle",
@@ -277,7 +274,6 @@ export function JobsReadyList({ bodyshop }) {
       dataIndex: "ins_co_nm",
       key: "ins_co_nm",
       ellipsis: true,
-      filteredValue: filter?.ins_co_nm || null,
       filters:
         (jobs &&
           jobs
@@ -285,11 +281,10 @@ export function JobsReadyList({ bodyshop }) {
             .filter(onlyUnique)
             .map((s) => {
               return {
-                text: s || "No Ins Co.*",
+                text: s,
                 value: [s],
               };
-            })
-            .sort((a, b) => alphaSort(a.text, b.text))) ||
+            })) ||
         [],
       onFilter: (value, record) => value.includes(record.ins_co_nm),
       responsive: ["md"],
@@ -300,6 +295,7 @@ export function JobsReadyList({ bodyshop }) {
       key: "clm_total",
       responsive: ["md"],
       ellipsis: true,
+
       sorter: (a, b) => a.clm_total - b.clm_total,
       sortOrder:
         state.sortedInfo.columnKey === "clm_total" && state.sortedInfo.order,
@@ -310,10 +306,9 @@ export function JobsReadyList({ bodyshop }) {
     {
       title: t("jobs.labels.estimator"),
       dataIndex: "jobs.labels.estimator",
-      key: "estimator",
+      key: "jobs.labels.estimator",
       ellipsis: true,
       responsive: ["xl"],
-      filteredValue: filter?.estimator || null,
       filterSearch: true,
       filters:
         (jobs &&
@@ -322,11 +317,10 @@ export function JobsReadyList({ bodyshop }) {
             .filter(onlyUnique)
             .map((s) => {
               return {
-                text: s || "No Estimator*",
+                text: s || "N/A",
                 value: [s],
               };
-            })
-            .sort((a, b) => alphaSort(a.text, b.text))) ||
+            })) ||
         [],
       onFilter: (value, record) =>
         value.includes(

client/src/utils/handleBeta.js

@@ -0,0 +1,37 @@
+export const BETA_KEY = 'betaSwitchImex';
+
+export const checkBeta = () => {
+    const cookie = document.cookie.split('; ').find(row => row.startsWith(BETA_KEY));
+    return cookie ? cookie.split('=')[1] === 'true' : false;
+}
+
+
+export const setBeta = (value) => {
+    const domain = window.location.hostname.split('.').slice(-2).join('.');
+    document.cookie = `${BETA_KEY}=${value}; path=/; domain=.${domain}`;
+}
+
+export const handleBeta = () => {
+    // If the current host name does not start with beta or test, then we don't need to do anything.
+    if (window.location.hostname.startsWith('localhost')) {
+        console.log('Not on beta or test, so no need to handle beta.');
+        return;
+    }
+
+    const isBeta = checkBeta();
+
+    const currentHostName = window.location.hostname;
+
+    // Beta is enabled, but the current host name does start with beta.
+    if (isBeta && !currentHostName.startsWith('beta')) {
+        const href= `${window.location.protocol}//beta.${currentHostName}${window.location.pathname}${window.location.search}${window.location.hash}`;
+        window.location.replace(href);
+    }
+
+    // Beta is not enabled, but the current host name does start with beta.
+    else if (!isBeta && currentHostName.startsWith('beta')) {
+        const href = `${window.location.protocol}//${currentHostName.replace('beta.', '')}${window.location.pathname}${window.location.search}${window.location.hash}`;
+        window.location.replace(href);
+    }
+}
+export default handleBeta;