IO-3020 IO-3036 Extend blur wrapper, add lock wrapper to components throughout the system. Many placeholders still left for upsell components.

bodyshop_translations.babel

@@ -1,4 +1,4 @@
-<babeledit_project version="1.2" be_version="2.7.1">
+<babeledit_project be_version="2.7.1" version="1.2">
     <!--
 
     BabelEdit project file
@@ -16353,6 +16353,27 @@
                                             </translation>
                                         </translations>
                                     </concept_node>
+                                    <concept_node>
+                                        <name>dragtoupload</name>
+                                        <definition_loaded>false</definition_loaded>
+                                        <description></description>
+                                        <comment></comment>
+                                        <default_text></default_text>
+                                        <translations>
+                                            <translation>
+                                                <language>en-US</language>
+                                                <approved>false</approved>
+                                            </translation>
+                                            <translation>
+                                                <language>es-MX</language>
+                                                <approved>false</approved>
+                                            </translation>
+                                            <translation>
+                                                <language>fr-CA</language>
+                                                <approved>false</approved>
+                                            </translation>
+                                        </translations>
+                                    </concept_node>
                                     <concept_node>
                                         <name>newjobid</name>
                                         <definition_loaded>false</definition_loaded>

client/src/components/bills-list-table/bills-list-table.component.jsx

@@ -15,6 +15,8 @@ import BillDeleteButton from "../bill-delete-button/bill-delete-button.component
 import BillDetailEditReturnComponent from "../bill-detail-edit/bill-detail-edit-return.component";
 import PrintWrapperComponent from "../print-wrapper/print-wrapper.component";
 import { FaTasks } from "react-icons/fa";
+import { HasFeatureAccess } from "../feature-wrapper/feature-wrapper.component";
+import LockerWrapperComponent from "../lock-wrapper/lock-wrapper.component";
 
 const mapStateToProps = createStructuredSelector({
   jobRO: selectJobReadOnly,
@@ -170,6 +172,8 @@ export function BillsListTableComponent({
         )
     : [];
 
+  const hasBillsAccess = HasFeatureAccess({ bodyshop, featureName: "bills" });
+
   return (
     <Card
       title={t("bills.labels.bills")}
@@ -181,6 +185,7 @@ export function BillsListTableComponent({
           {job && job.converted ? (
             <>
               <Button
+                disabled={!hasBillsAccess}
                 onClick={() => {
                   setBillEnterContext({
                     actions: { refetch: billsQuery.refetch },
@@ -190,9 +195,10 @@ export function BillsListTableComponent({
                   });
                 }}
               >
-                {t("jobs.actions.postbills")}
+                <LockerWrapperComponent featureName="bills">{t("jobs.actions.postbills")}</LockerWrapperComponent>
               </Button>
               <Button
+                disabled={!hasBillsAccess}
                 onClick={() => {
                   setReconciliationContext({
                     actions: { refetch: billsQuery.refetch },
@@ -203,7 +209,7 @@ export function BillsListTableComponent({
                   });
                 }}
               >
-                {t("jobs.actions.reconcile")}
+                <LockerWrapperComponent featureName="bills"> {t("jobs.actions.reconcile")}</LockerWrapperComponent>
               </Button>
             </>
           ) : null}
@@ -211,6 +217,7 @@ export function BillsListTableComponent({
           <Input.Search
             placeholder={t("general.labels.search")}
             value={searchText}
+            disabled={!hasBillsAccess}
             onChange={(e) => {
               e.preventDefault();
               setSearchText(e.target.value);
@@ -226,8 +233,20 @@ export function BillsListTableComponent({
         }}
         columns={columns}
         rowKey="id"
-        dataSource={filteredBills}
+        dataSource={hasBillsAccess ? filteredBills : []}
         onChange={handleTableChange}
+        locale={{
+          ...(!hasBillsAccess && {
+            emptyText: (
+              <div>
+                Upsell
+                {
+                  //TODO:Upsell
+                }
+              </div>
+            )
+          })
+        }}
       />
     </Card>
   );

client/src/components/documents-local-upload/documents-local-upload.component.jsx

@@ -6,6 +6,9 @@ import { connect } from "react-redux";
 import { createStructuredSelector } from "reselect";
 import { selectBodyshop, selectCurrentUser } from "../../redux/user/user.selectors";
 import { handleUpload } from "./documents-local-upload.utility";
+import { HasFeatureAccess } from "../feature-wrapper/feature-wrapper.component";
+import LockWrapperComponent from "../lock-wrapper/lock-wrapper.component";
+import { useTranslation } from "react-i18next";
 
 const mapStateToProps = createStructuredSelector({
   currentUser: selectCurrentUser,
@@ -23,17 +26,20 @@ export function DocumentsLocalUploadComponent({
   allowAllTypes
 }) {
   const [fileList, setFileList] = useState([]);
-
+  const { t } = useTranslation();
   const handleDone = (uid) => {
     setTimeout(() => {
       setFileList((fileList) => fileList.filter((x) => x.uid !== uid));
     }, 2000);
   };
 
+  const hasMediaAccess = HasFeatureAccess({ bodyshop, featureName: "media" });
+
   return (
     <Upload.Dragger
       multiple={true}
       fileList={fileList}
+      disabled={!hasMediaAccess}
       onChange={(f) => {
         if (f.event && f.event.percent === 100) handleDone(f.file.uid);
 
@@ -59,7 +65,9 @@ export function DocumentsLocalUploadComponent({
           <p className="ant-upload-drag-icon">
             <UploadOutlined />
           </p>
-          <p className="ant-upload-text">Click or drag files to this area to upload.</p>
+          <p className="ant-upload-text">
+            <LockWrapperComponent featureName="media">{t("documents.labels.dragtoupload")}</LockWrapperComponent>
+          </p>
         </>
       )}
     </Upload.Dragger>

client/src/components/documents-upload/documents-upload.component.jsx

@@ -7,6 +7,8 @@ import { createStructuredSelector } from "reselect";
 import { selectBodyshop, selectCurrentUser } from "../../redux/user/user.selectors";
 import formatBytes from "../../utils/formatbytes";
 import { handleUpload } from "./documents-upload.utility";
+import LockWrapperComponent from "../lock-wrapper/lock-wrapper.component";
+import { HasFeatureAccess } from "../feature-wrapper/feature-wrapper.component";
 
 const mapStateToProps = createStructuredSelector({
   currentUser: selectCurrentUser,
@@ -45,11 +47,13 @@ export function DocumentsUploadComponent({
       setFileList((fileList) => fileList.filter((x) => x.uid !== uid));
     }, 2000);
   };
+  const hasMediaAccess = HasFeatureAccess({ bodyshop, featureName: "media" });
 
   return (
     <Upload.Dragger
       multiple={true}
       fileList={fileList}
+      disabled={!hasMediaAccess}
       onChange={(f) => {
         if (f.event && f.event.percent === 100) handleDone(f.file.uid);
         setFileList(f.fileList);
@@ -89,7 +93,9 @@ export function DocumentsUploadComponent({
           <p className="ant-upload-drag-icon">
             <UploadOutlined />
           </p>
-          <p className="ant-upload-text">Click or drag files to this area to upload.</p>
+          <p className="ant-upload-text">
+            <LockWrapperComponent featureName="media">{t("documents.labels.dragtoupload")}</LockWrapperComponent>
+          </p>
           {!ignoreSizeLimit && (
             <Space wrap className="ant-upload-text">
               <Progress type="dashboard" percent={pct} size="small" />

client/src/components/feature-wrapper/blur-wrapper.component.jsx

@@ -13,7 +13,8 @@ const blurringProps = {
   webkitUserSelect: "none",
   msUserSelect: "none",
   mozUserSelect: "none",
-  userSelect: "none"
+  userSelect: "none",
+  pointerEvents: "none"
 };
 
 export function BlurWrapper({
@@ -24,11 +25,26 @@ export function BlurWrapper({
   overrideValue = true,
   overrideValueFunction,
   children,
+  debug,
   bypass
 }) {
   if (import.meta.env.DEV) {
     if (!ValidateFeatureName(featureName)) console.trace("*** INVALID FEATURE NAME", featureName);
   }
+  if (debug) {
+    console.trace("*** DEBUG MODE", featureName);
+    console.log("*** HAS FEATURE ACCESS?", featureName, HasFeatureAccess({ featureName, bodyshop }));
+    console.log(
+      "***LOG  ~ All Blur Wrapper Props ",
+      styleProp,
+      valueProp,
+      overrideValue,
+      overrideValueFunction,
+      children,
+      debug,
+      bypass
+    );
+  }
 
   if (bypass) {
     console.trace("*** BYPASS USED", featureName);
@@ -68,12 +84,13 @@ export function BlurWrapper({
 export default connect(mapStateToProps, null)(BlurWrapper);
 
 function RandomDinero() {
-  return Dinero({ amount: Math.round(Math.exp(Math.random() * 100, 2)) }).toFormat();
+  return Dinero({ amount: Math.round(Math.exp(Math.random() * 10, 2)) }).toFormat();
 }
 
 const featureNameList = [
   "mobile",
   "allAccess",
+  "audit",
   "timetickets",
   "payments",
   "partsorders",
@@ -86,7 +103,8 @@ const featureNameList = [
   "scoreboard",
   "checklist",
   "smartscheduling",
-  "roguard"
+  "roguard",
+  "dashboard"
 ];
 
 function ValidateFeatureName(featureName) {

client/src/components/feature-wrapper/feature-wrapper.component.jsx

@@ -11,9 +11,21 @@ const mapStateToProps = createStructuredSelector({
   bodyshop: selectBodyshop
 });
 
-function FeatureWrapper({ bodyshop, featureName, noauth, blurContent = false, children, ...restProps }) {
+function FeatureWrapper({
+  bodyshop,
+  featureName,
+  noauth,
+  blurContent = false,
+  children,
+  upsellComponent,
+  ...restProps
+}) {
   const { t } = useTranslation();
 
+  if (upsellComponent) {
+    console.error("Upsell component passed in. This is not yet implemented.");
+  }
+
   if (HasFeatureAccess({ featureName, bodyshop })) return children;
 
   if (blurContent) {

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

@@ -593,7 +593,11 @@ function Header({
           key: "dashboard",
           id: "header-dashboard",
           icon: <DashboardFilled />,
-          label: <Link to="/manage/dashboard">{t("menus.header.dashboard")}</Link>
+          label: (
+            <Link to="/manage/dashboard">
+              <LockWrapper featureName="bills">{t("menus.header.dashboard")}</LockWrapper>
+            </Link>
+          )
         },
         {
           key: "reportcenter",

client/src/components/job-audit-trail/job-audit-trail.component.jsx

@@ -8,6 +8,7 @@ import { DateTimeFormatter } from "../../utils/DateFormatter";
 import { connect } from "react-redux";
 import { createStructuredSelector } from "reselect";
 import { selectCurrentUser } from "../../redux/user/user.selectors";
+import BlurWrapperComponent from "../feature-wrapper/blur-wrapper.component";
 
 const mapStateToProps = createStructuredSelector({
   currentUser: selectCurrentUser
@@ -41,7 +42,12 @@ export function JobAuditTrail({ currentUser, jobId }) {
     {
       title: t("audit.fields.operation"),
       dataIndex: "operation",
-      key: "operation"
+      key: "operation",
+      render: (text, record) => (
+        <BlurWrapperComponent featureName="audit">
+          <div>{text}</div>
+        </BlurWrapperComponent>
+      )
     }
   ];
   const emailColumns = [
@@ -64,52 +70,78 @@ export function JobAuditTrail({ currentUser, jobId }) {
       dataIndex: "to",
       key: "to",
 
-      render: (text, record) => record.to && record.to.map((email, idx) => <Tag key={idx}>{email}</Tag>)
+      render: (text, record) =>
+        record.to &&
+        record.to.map((email, idx) => (
+          <Tag key={idx}>
+            <BlurWrapperComponent featureName="audit">
+              <div>{email}</div>
+            </BlurWrapperComponent>
+          </Tag>
+        ))
     },
     {
       title: t("audit.fields.cc"),
       dataIndex: "cc",
       key: "cc",
 
-      render: (text, record) => record.cc && record.cc.map((email, idx) => <Tag key={idx}>{email}</Tag>)
+      render: (text, record) =>
+        record.cc &&
+        record.cc.map((email, idx) => (
+          <Tag key={idx}>
+            <BlurWrapperComponent featureName="audit">
+              <div>{email}</div>
+            </BlurWrapperComponent>
+          </Tag>
+        ))
     },
     {
       title: t("audit.fields.subject"),
       dataIndex: "subject",
-      key: "subject"
+      key: "subject",
+      render: (text, record) => (
+        <BlurWrapperComponent featureName="audit">
+          <div>{text}</div>
+        </BlurWrapperComponent>
+      )
     },
     {
       title: t("audit.fields.status"),
       dataIndex: "status",
-      key: "status"
+      key: "status",
+      render: (text, record) => (
+        <BlurWrapperComponent featureName="audit">
+          <div>{text}</div>
+        </BlurWrapperComponent>
+      )
     },
-    ...(currentUser?.email.includes("@imex.")
+
-      ? [
+    {
-          {
+      title: t("audit.fields.contents"),
-            title: t("audit.fields.contents"),
+      dataIndex: "contents",
-            dataIndex: "contents",
+      key: "contents",
-            key: "contents",
+      width: "10%",
-            width: "10%",
+      render: (text, record) => (
-            render: (text, record) => (
+        <Button
-              <Button
+          onClick={() => {
-                onClick={() => {
+            var win = window.open(
-                  var win = window.open(
+              "",
-                    "",
+              "Title",
-                    "Title",
+              "toolbar=no,location=no,directories=no,status=no,menubar=no,scrollbars=yes,resizable=yes,width=780,height=400,"
-                    "toolbar=no,location=no,directories=no,status=no,menubar=no,scrollbars=yes,resizable=yes,width=780,height=400,"
+            );
-                  );
+            win.document.body.innerHTML = record.contents;
-                  win.document.body.innerHTML = record.contents;
+          }}
-                }}
+        >
-              >
+          Preview
-                Preview
+        </Button>
-              </Button>
+      )
-            )
+    }
-          }
-        ]
-      : [])
   ];
   return (
     <Row gutter={[16, 16]}>
+      {
+        //TODO:Upsell
+      }
       <Col span={24}>
         <Card
           title={t("jobs.labels.audit")}

client/src/components/job-bills-total/job-bills-total.component.jsx

@@ -147,7 +147,9 @@ export default function JobBillsTotalComponent({
                 />
               }
             >
-              <Statistic title={t("bills.labels.retailtotal")} value={billTotals.toFormat()} />
+              <BlurWrapperComponent featureName="bills" overrideValueFunction="RandomDinero">
+                <Statistic title={t("bills.labels.retailtotal")} value={billTotals.toFormat()} />
+              </BlurWrapperComponent>
             </Tooltip>
             <Typography.Title>=</Typography.Title>
             <Tooltip
@@ -159,13 +161,15 @@ export default function JobBillsTotalComponent({
                 />
               }
             >
-              <Statistic
+              <BlurWrapperComponent featureName="bills" overrideValueFunction="RandomDinero">
-                title={t("bills.labels.discrepancy")}
+                <Statistic
-                valueStyle={{
+                  title={t("bills.labels.discrepancy")}
-                  color: discrepancy.getAmount() === 0 ? "green" : "red"
+                  valueStyle={{
-                }}
+                    color: discrepancy.getAmount() === 0 ? "green" : "red"
-                value={discrepancy.toFormat()}
+                  }}
-              />
+                  value={discrepancy.toFormat()}
+                />
+              </BlurWrapperComponent>
             </Tooltip>
             <Typography.Title>+</Typography.Title>
             <Tooltip
@@ -177,7 +181,9 @@ export default function JobBillsTotalComponent({
                 />
               }
             >
-              <Statistic title={t("bills.labels.dedfromlbr")} value={lbrAdjustments.toFormat()} />
+              <BlurWrapperComponent featureName="bills" overrideValueFunction="RandomDinero">
+                <Statistic title={t("bills.labels.dedfromlbr")} value={lbrAdjustments.toFormat()} />
+              </BlurWrapperComponent>
             </Tooltip>
             <Typography.Title>=</Typography.Title>
             <Tooltip
@@ -189,13 +195,15 @@ export default function JobBillsTotalComponent({
                 />
               }
             >
-              <Statistic
+              <BlurWrapperComponent featureName="bills" overrideValueFunction="RandomDinero">
-                title={t("bills.labels.discrepancy")}
+                <Statistic
-                valueStyle={{
+                  title={t("bills.labels.discrepancy")}
-                  color: discrepWithLbrAdj.getAmount() === 0 ? "green" : "red"
+                  valueStyle={{
-                }}
+                    color: discrepWithLbrAdj.getAmount() === 0 ? "green" : "red"
-                value={discrepWithLbrAdj.toFormat()}
+                  }}
-              />
+                  value={discrepWithLbrAdj.toFormat()}
+                />
+              </BlurWrapperComponent>
             </Tooltip>
             <Typography.Title>+</Typography.Title>
             <Tooltip
@@ -207,7 +215,9 @@ export default function JobBillsTotalComponent({
                 />
               }
             >
-              <Statistic title={t("bills.labels.totalreturns")} value={totalReturns.toFormat()} />
+              <BlurWrapperComponent featureName="bills" overrideValueFunction="RandomDinero">
+                <Statistic title={t("bills.labels.totalreturns")} value={totalReturns.toFormat()} />
+              </BlurWrapperComponent>
             </Tooltip>
             <Typography.Title>=</Typography.Title>
             <Tooltip
@@ -219,16 +229,20 @@ export default function JobBillsTotalComponent({
                 />
               }
             >
-              <Statistic
+              <BlurWrapperComponent featureName="bills" overrideValueFunction="RandomDinero">
-                title={t("bills.labels.discrepancy")}
+                <Statistic
-                valueStyle={{
+                  title={t("bills.labels.discrepancy")}
-                  color: discrepWithCms.getAmount() === 0 ? "green" : "red"
+                  valueStyle={{
-                }}
+                    color: discrepWithCms.getAmount() === 0 ? "green" : "red"
-                value={discrepWithCms.toFormat()}
+                  }}
-              />
+                  value={discrepWithCms.toFormat()}
+                />
+              </BlurWrapperComponent>
             </Tooltip>
           </Space>
-
+          {
+            //TODO:Upsell
+          }
           {showWarning &&
             (discrepWithCms.getAmount() !== 0 ||
               discrepWithLbrAdj.getAmount() !== 0 ||
@@ -253,7 +267,9 @@ export default function JobBillsTotalComponent({
                 />
               }
             >
-              <Statistic title={t("bills.labels.totalreturns")} value={totalReturns.toFormat()} />
+              <BlurWrapperComponent featureName="bills" overrideValueFunction="RandomDinero">
+                <Statistic title={t("bills.labels.totalreturns")} value={totalReturns.toFormat()} />
+              </BlurWrapperComponent>
             </Tooltip>
             <Tooltip
               title={
@@ -264,17 +280,19 @@ export default function JobBillsTotalComponent({
                 />
               }
             >
-              <Statistic
+              <BlurWrapperComponent featureName="bills" overrideValueFunction="RandomDinero">
-                title={t("bills.labels.calculatedcreditsnotreceived")}
+                <Statistic
-                valueStyle={{
+                  title={t("bills.labels.calculatedcreditsnotreceived")}
-                  color: calculatedCreditsNotReceived.getAmount() <= 0 ? "green" : "red"
+                  valueStyle={{
-                }}
+                    color: calculatedCreditsNotReceived.getAmount() <= 0 ? "green" : "red"
-                value={
+                  }}
-                  calculatedCreditsNotReceived.getAmount() >= 0
+                  value={
-                    ? calculatedCreditsNotReceived.toFormat()
+                    calculatedCreditsNotReceived.getAmount() >= 0
-                    : Dinero().toFormat()
+                      ? calculatedCreditsNotReceived.toFormat()
-                }
+                      : Dinero().toFormat()
-              />
+                  }
+                />
+              </BlurWrapperComponent>
             </Tooltip>
             <Tooltip
               title={
@@ -285,22 +303,27 @@ export default function JobBillsTotalComponent({
                 />
               }
             >
-              <Statistic
+              <BlurWrapperComponent featureName="bills" overrideValueFunction="RandomDinero">
-                title={t("bills.labels.creditsnotreceived")}
+                <Statistic
-                valueStyle={{
+                  title={t("bills.labels.creditsnotreceived")}
-                  color: totalReturnsMarkedNotReceived.getAmount() <= 0 ? "green" : "red"
+                  valueStyle={{
-                }}
+                    color: totalReturnsMarkedNotReceived.getAmount() <= 0 ? "green" : "red"
-                value={
+                  }}
-                  totalReturnsMarkedNotReceived.getAmount() >= 0
+                  value={
-                    ? totalReturnsMarkedNotReceived.toFormat()
+                    totalReturnsMarkedNotReceived.getAmount() >= 0
-                    : Dinero().toFormat()
+                      ? totalReturnsMarkedNotReceived.toFormat()
-                }
+                      : Dinero().toFormat()
-              />
+                  }
+                />
+              </BlurWrapperComponent>
             </Tooltip>
           </Space>
           {showWarning && calculatedCreditsNotReceived.getAmount() > 0 && (
             <Alert style={{ margin: "8px 0px" }} type="warning" message={t("jobs.labels.outstanding_credit_memos")} />
           )}
+          {
+            //TODO:Upsell
+          }
         </Card>
       </Col>
     </Row>

client/src/components/job-scoreboard-add-button/job-scoreboard-add-button.component.jsx

@@ -1,19 +1,31 @@
-import { useLazyQuery, useMutation } from "@apollo/client";
 import { CheckCircleOutlined } from "@ant-design/icons";
+import { useLazyQuery, useMutation } from "@apollo/client";
 import { Button, Card, Form, InputNumber, notification, Popover, Space } from "antd";
-import dayjs from "../../utils/day";
 import React, { useEffect, useState } from "react";
 import { useTranslation } from "react-i18next";
+import { connect } from "react-redux";
+import { createStructuredSelector } from "reselect";
 import { logImEXEvent } from "../../firebase/firebase.utils";
 import {
   INSERT_SCOREBOARD_ENTRY,
   QUERY_SCOREBOARD_ENTRY,
   UPDATE_SCOREBOARD_ENTRY
 } from "../../graphql/scoreboard.queries";
-import LoadingSpinner from "../loading-spinner/loading-spinner.component";
+import { selectBodyshop } from "../../redux/user/user.selectors.js";
+import dayjs from "../../utils/day";
+import { HasFeatureAccess } from "../feature-wrapper/feature-wrapper.component.jsx";
 import DateTimePicker from "../form-date-time-picker/form-date-time-picker.component.jsx";
+import LoadingSpinner from "../loading-spinner/loading-spinner.component";
+import LockWrapperComponent from "../lock-wrapper/lock-wrapper.component.jsx";
 
-export default function ScoreboardAddButton({ job, disabled, ...otherBtnProps }) {
+const mapStateToProps = createStructuredSelector({
+  bodyshop: selectBodyshop
+});
+const mapDispatchToProps = (dispatch) => ({
+  //setUserLanguage: language => dispatch(setUserLanguage(language))
+});
+
+export function ScoreboardAddButton({ bodyshop, job, disabled, ...otherBtnProps }) {
   const { t } = useTranslation();
   const [insertScoreboardEntry] = useMutation(INSERT_SCOREBOARD_ENTRY);
   const [updateScoreboardEntry] = useMutation(UPDATE_SCOREBOARD_ENTRY);
@@ -162,12 +174,14 @@ export default function ScoreboardAddButton({ job, disabled, ...otherBtnProps })
     setVisibility(true);
     setLoading(false);
   };
-
+  const hasScoreboardAccess = HasFeatureAccess({ bodyshop, featureName: "scoreboard" });
   return (
     <Popover content={overlay} open={visibility} placement="bottom">
-      <Button loading={loading} disabled={disabled} onClick={handleClick} {...otherBtnProps}>
+      <Button loading={loading} disabled={disabled || !hasScoreboardAccess} onClick={handleClick} {...otherBtnProps}>
-        {t("jobs.actions.addtoscoreboard")}
+        <LockWrapperComponent featureName="scoreboard">{t("jobs.actions.addtoscoreboard")}</LockWrapperComponent>
       </Button>
     </Popover>
   );
 }
+
+export default connect(mapStateToProps, mapDispatchToProps)(ScoreboardAddButton);

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

@@ -959,7 +959,7 @@ export function JobsDetailHeaderActions({
   menuItems.push({
     key: "exportcustdata",
     id: "job-actions-exportcustdata",
-    disabled: !(job.converted && HasFeatureAccess({ bodyshop, featureName: "export", debug: true })),
+    disabled: !(job.converted && HasFeatureAccess({ bodyshop, featureName: "export" })),
     label: <LockerWrapperComponent featureName="export">{t("jobs.actions.exportcustdata")}</LockerWrapperComponent>,
     onClick: handleExportCustData
   });
@@ -968,21 +968,21 @@ export function JobsDetailHeaderActions({
     {
       key: "email",
       id: "job-actions-email",
-      disabled: !(job.ownr_ea && HasFeatureAccess({ bodyshop, featureName: "csi", debug: true })),
+      disabled: !(job.ownr_ea && HasFeatureAccess({ bodyshop, featureName: "csi" })),
       label: <LockerWrapperComponent featureName="checklist">{t("general.labels.email")}</LockerWrapperComponent>,
       onClick: handleCreateCsi
     },
     {
       key: "text",
       id: "job-actions-text",
-      disabled: !(job.ownr_ph1 && HasFeatureAccess({ bodyshop, featureName: "csi", debug: true })),
+      disabled: !(job.ownr_ph1 && HasFeatureAccess({ bodyshop, featureName: "csi" })),
       label: <LockerWrapperComponent featureName="checklist">{t("general.labels.text")}</LockerWrapperComponent>,
       onClick: handleCreateCsi
     },
     {
       key: "generate",
       id: "job-actions-generate",
-      disabled: job.csiinvites?.length > 0 || !HasFeatureAccess({ bodyshop, featureName: "csi", debug: true }),
+      disabled: job.csiinvites?.length > 0 || !HasFeatureAccess({ bodyshop, featureName: "csi" }),
       label: <LockerWrapperComponent featureName="checklist">{t("jobs.actions.generatecsi")}</LockerWrapperComponent>,
       onClick: handleCreateCsi
     }

client/src/components/jobs-detail-pli/jobs-detail-pli.component.jsx

@@ -22,16 +22,14 @@ export default function JobsDetailPliComponent({
       {billsQuery.error ? <AlertComponent message={billsQuery.error.message} type="error" /> : null}
       <BillDetailEditcontainer />
       <Row gutter={[16, 16]}>
-        <FeatureWrapperComponent featureName="bills" noauth={() => null}>
+        <Col span={24}>
-          <Col span={24}>
+          <JobBillsTotal
-            <JobBillsTotal
+            bills={billsQuery.data ? billsQuery.data.bills : []}
-              bills={billsQuery.data ? billsQuery.data.bills : []}
+            partsOrders={billsQuery.data ? billsQuery.data.parts_orders : []}
-              partsOrders={billsQuery.data ? billsQuery.data.parts_orders : []}
+            loading={billsQuery.loading}
-              loading={billsQuery.loading}
+            jobTotals={job.job_totals}
-              jobTotals={job.job_totals}
+          />
-            />
+        </Col>
-          </Col>
-        </FeatureWrapperComponent>
         <Col span={24}>
           <PartsOrderListTableComponent
             job={job}
@@ -39,11 +37,9 @@ export default function JobsDetailPliComponent({
             billsQuery={billsQuery}
           />
         </Col>
-        <FeatureWrapperComponent featureName="bills" noauth={() => null}>
+        <Col span={24}>
-          <Col span={24}>
+          <BillsListTable job={job} handleOnRowClick={handleBillOnRowClick} billsQuery={billsQuery} />
-            <BillsListTable job={job} handleOnRowClick={handleBillOnRowClick} billsQuery={billsQuery} />
+        </Col>
-          </Col>
-        </FeatureWrapperComponent>
         <Col span={24}>
           <PartsDispatchTable job={job} handleOnRowClick={handlePartsDispatchOnRowClick} billsQuery={billsQuery} />
         </Col>

client/src/components/jobs-documents-gallery/jobs-documents-gallery.component.jsx

@@ -13,8 +13,18 @@ import JobsDocumentsGallerySelectAllComponent from "./jobs-documents-gallery.sel
 
 import Lightbox from "react-image-lightbox";
 import "react-image-lightbox/style.css";
+import { HasFeatureAccess } from "../feature-wrapper/feature-wrapper.component";
+
+import { connect } from "react-redux";
+import { createStructuredSelector } from "reselect";
+import { selectBodyshop } from "../../redux/user/user.selectors";
+const mapStateToProps = createStructuredSelector({
+  bodyshop: selectBodyshop
+});
+const mapDispatchToProps = (dispatch) => ({});
 
 function JobsDocumentsComponent({
+  bodyshop,
   data,
   jobId,
   refetch,
@@ -103,6 +113,7 @@ function JobsDocumentsComponent({
     );
     setgalleryImages(documents);
   }, [data, setgalleryImages, t]);
+  const hasMediaAccess = HasFeatureAccess({ bodyshop, featureName: "media" });
 
   return (
     <div>
@@ -118,6 +129,9 @@ function JobsDocumentsComponent({
             {!billId && <JobsDocumentsGalleryReassign galleryImages={galleryImages} callback={refetch} />}
           </Space>
         </Col>
+        {
+          //TODO:Upsell
+        }
         <Col span={24}>
           <Card>
             <DocumentsUploadComponent
@@ -219,4 +233,4 @@ function JobsDocumentsComponent({
   );
 }
 
-export default JobsDocumentsComponent;
+export default connect(mapStateToProps, mapDispatchToProps)(JobsDocumentsComponent);

client/src/components/jobs-documents-local-gallery/jobs-documents-local-gallery.container.jsx

@@ -17,6 +17,7 @@ import JobsDocumentsLocalGallerySelectAllComponent from "./jobs-documents-local-
 
 import Lightbox from "react-image-lightbox";
 import "react-image-lightbox/style.css";
+import { HasFeatureAccess } from "../feature-wrapper/feature-wrapper.component";
 
 const mapStateToProps = createStructuredSelector({
   bodyshop: selectBodyshop,
@@ -84,7 +85,7 @@ export function JobsDocumentsLocalGallery({
           { images: [], other: [] }
         )
       : { images: [], other: [] };
-
+  const hasMediaAccess = HasFeatureAccess({ bodyshop, featureName: "media" });
   return (
     <div>
       <Space wrap>

client/src/components/labor-allocations-table/labor-allocations-table.component.jsx

@@ -12,6 +12,7 @@ import { alphaSort } from "../../utils/sorters";
 import LaborAllocationsAdjustmentEdit from "../labor-allocations-adjustment-edit/labor-allocations-adjustment-edit.component";
 import "./labor-allocations-table.styles.scss";
 import { CalculateAllocationsTotals } from "./labor-allocations-table.utility";
+import { HasFeatureAccess } from "../feature-wrapper/feature-wrapper.component";
 
 const mapStateToProps = createStructuredSelector({
   bodyshop: selectBodyshop,
@@ -190,6 +191,7 @@ export function LaborAllocationsTable({
     warningCallback({ key: "labor", warning: t("jobs.labels.outstandinghours") });
   }
 
+  const hasTimeTicketAccess = HasFeatureAccess({ bodyshop, featureName: "timetickets" });
   return (
     <Row gutter={[16, 16]}>
       <Col span={24}>
@@ -199,7 +201,19 @@ export function LaborAllocationsTable({
             rowKey={(record) => `${record.cost_center} ${record.mod_lbr_ty}`}
             pagination={false}
             onChange={handleTableChange}
-            dataSource={totals}
+            dataSource={hasTimeTicketAccess ? totals : []}
+            locale={{
+              ...(!hasTimeTicketAccess && {
+                emptyText: (
+                  <div>
+                    Upsell
+                    {
+                      //TODO:Upsell
+                    }
+                  </div>
+                )
+              })
+            }}
             scroll={{
               x: true
             }}
@@ -233,7 +247,19 @@ export function LaborAllocationsTable({
               columns={convertedTableCols}
               rowKey="id"
               pagination={false}
-              dataSource={convertedLines}
+              dataSource={hasTimeTicketAccess ? convertedLines : []}
+              locale={{
+                ...(!hasTimeTicketAccess && {
+                  emptyText: (
+                    <div>
+                      Upsell
+                      {
+                        //TODO:Upsell
+                      }
+                    </div>
+                  )
+                })
+              }}
               scroll={{
                 x: true
               }}

client/src/components/parts-order-list-table/parts-order-list-table-drawer.component.jsx

@@ -20,13 +20,14 @@ import { DateFormatter } from "../../utils/DateFormatter";
 import { TemplateList } from "../../utils/TemplateConstants";
 import { alphaSort } from "../../utils/sorters";
 import DataLabel from "../data-label/data-label.component";
-import FeatureWrapperComponent from "../feature-wrapper/feature-wrapper.component";
+import FeatureWrapperComponent, { HasFeatureAccess } from "../feature-wrapper/feature-wrapper.component";
 import PartsOrderBackorderEta from "../parts-order-backorder-eta/parts-order-backorder-eta.component";
 import PartsOrderCmReceived from "../parts-order-cm-received/parts-order-cm-received.component";
 import PartsOrderDeleteLine from "../parts-order-delete-line/parts-order-delete-line.component";
 import PartsOrderLineBackorderButton from "../parts-order-line-backorder-button/parts-order-line-backorder-button.component";
 import PartsReceiveModalContainer from "../parts-receive-modal/parts-receive-modal.container";
 import PrintWrapper from "../print-wrapper/print-wrapper.component";
+import LockWrapperComponent from "../lock-wrapper/lock-wrapper.component";
 
 const mapStateToProps = createStructuredSelector({
   jobRO: selectJobReadOnly,
@@ -169,40 +170,44 @@ export function PartsOrderListTableDrawerComponent({
           <DeleteFilled />
         </Button>
       </Popconfirm>
-      <FeatureWrapperComponent featureName="bills" noauth={() => null}>
+
-        <Button
+      <Button
-          disabled={(jobRO ? !record.return : jobRO) || record.vendor.id === bodyshop.inhousevendorid}
+        disabled={
-          onClick={() => {
+          (jobRO ? !record.return : jobRO) ||
-            logImEXEvent("parts_order_receive_bill");
+          record.vendor.id === bodyshop.inhousevendorid ||
-            setBillEnterContext({
+          !HasFeatureAccess({ bodyshop, featureName: "bills" })
-              actions: { refetch: refetch },
+        }
-              context: {
+        onClick={() => {
-                job: job,
+          logImEXEvent("parts_order_receive_bill");
-                bill: {
+          setBillEnterContext({
-                  vendorid: record.vendor.id,
+            actions: { refetch: refetch },
-                  is_credit_memo: record.return,
+            context: {
-                  billlines: record.parts_order_lines.map((pol) => ({
+              job: job,
-                    joblineid: pol.job_line_id || "noline",
+              bill: {
-                    line_desc: pol.line_desc,
+                vendorid: record.vendor.id,
-                    quantity: pol.quantity,
+                is_credit_memo: record.return,
-                    actual_price: pol.act_price,
+                billlines: record.parts_order_lines.map((pol) => ({
-                    cost_center: pol.jobline?.part_type
+                  joblineid: pol.job_line_id || "noline",
-                      ? bodyshop.pbs_serialnumber || bodyshop.cdk_dealerid
+                  line_desc: pol.line_desc,
-                        ? pol.jobline.part_type !== "PAE"
+                  quantity: pol.quantity,
-                          ? pol.jobline.part_type
+                  actual_price: pol.act_price,
-                          : null
+                  cost_center: pol.jobline?.part_type
-                        : responsibilityCenters.defaults &&
+                    ? bodyshop.pbs_serialnumber || bodyshop.cdk_dealerid
-                          (responsibilityCenters.defaults.costs[pol.jobline.part_type] || null)
+                      ? pol.jobline.part_type !== "PAE"
-                      : null
+                        ? pol.jobline.part_type
-                  }))
+                        : null
-                }
+                      : responsibilityCenters.defaults &&
+                        (responsibilityCenters.defaults.costs[pol.jobline.part_type] || null)
+                    : null
+                }))
               }
-            });
+            }
-          }}
+          });
-        >
+        }}
-          {t("parts_orders.actions.receivebill")}
+      >
-        </Button>
+        <LockWrapperComponent featureName="bills">{t("parts_orders.actions.receivebill")}</LockWrapperComponent>
-      </FeatureWrapperComponent>
+      </Button>
+
       <PrintWrapper
         templateObject={{
           name: record.return ? Templates.parts_return_slip.key : Templates.parts_order.key,

client/src/components/parts-order-list-table/parts-order-list-table.component.jsx

@@ -14,10 +14,11 @@ import { selectBodyshop } from "../../redux/user/user.selectors";
 import { DateFormatter } from "../../utils/DateFormatter";
 import { TemplateList } from "../../utils/TemplateConstants";
 import { alphaSort } from "../../utils/sorters";
-import FeatureWrapperComponent from "../feature-wrapper/feature-wrapper.component";
+import FeatureWrapperComponent, { HasFeatureAccess } from "../feature-wrapper/feature-wrapper.component";
 import PartsReceiveModalContainer from "../parts-receive-modal/parts-receive-modal.container";
 import PrintWrapper from "../print-wrapper/print-wrapper.component";
 import PartsOrderDrawer from "./parts-order-list-table-drawer.component";
+import LockWrapperComponent from "../lock-wrapper/lock-wrapper.component";
 
 const mapStateToProps = createStructuredSelector({
   jobRO: selectJobReadOnly,
@@ -140,45 +141,49 @@ export function PartsOrderListTableComponent({
           <DeleteFilled />
         </Button>
       </Popconfirm>
-      <FeatureWrapperComponent featureName="bills" noauth={() => null}>
-        <Button
-          disabled={(jobRO ? !record.return : jobRO) || record.vendor.id === bodyshop.inhousevendorid}
-          onClick={() => {
-            logImEXEvent("parts_order_receive_bill");
 
-            setBillEnterContext({
+      <Button
-              actions: { refetch: refetch },
+        disabled={
-              context: {
+          (jobRO ? !record.return : jobRO) ||
-                job: job,
+          record.vendor.id === bodyshop.inhousevendorid ||
-                bill: {
+          !HasFeatureAccess({ bodyshop, featureName: "bills" })
-                  vendorid: record.vendor.id,
+        }
-                  is_credit_memo: record.return,
+        onClick={() => {
-                  billlines: record.parts_order_lines.map((pol) => {
+          logImEXEvent("parts_order_receive_bill");
-                    return {
-                      joblineid: pol.job_line_id || "noline",
-                      line_desc: pol.line_desc,
-                      quantity: pol.quantity,
 
-                      actual_price: pol.act_price,
+          setBillEnterContext({
+            actions: { refetch: refetch },
+            context: {
+              job: job,
+              bill: {
+                vendorid: record.vendor.id,
+                is_credit_memo: record.return,
+                billlines: record.parts_order_lines.map((pol) => {
+                  return {
+                    joblineid: pol.job_line_id || "noline",
+                    line_desc: pol.line_desc,
+                    quantity: pol.quantity,
 
-                      cost_center: pol.jobline?.part_type
+                    actual_price: pol.act_price,
-                        ? bodyshop.pbs_serialnumber || bodyshop.cdk_dealerid
+
-                          ? pol.jobline.part_type !== "PAE"
+                    cost_center: pol.jobline?.part_type
-                            ? pol.jobline.part_type
+                      ? bodyshop.pbs_serialnumber || bodyshop.cdk_dealerid
-                            : null
+                        ? pol.jobline.part_type !== "PAE"
-                          : responsibilityCenters.defaults &&
+                          ? pol.jobline.part_type
-                            (responsibilityCenters.defaults.costs[pol.jobline.part_type] || null)
+                          : null
-                        : null
+                        : responsibilityCenters.defaults &&
-                    };
+                          (responsibilityCenters.defaults.costs[pol.jobline.part_type] || null)
-                  })
+                      : null
-                }
+                  };
+                })
               }
-            });
+            }
-          }}
+          });
-        >
+        }}
-          {t("parts_orders.actions.receivebill")}
+      >
-        </Button>
+        <LockWrapperComponent featureName="bills">{t("parts_orders.actions.receivebill")}</LockWrapperComponent>
-      </FeatureWrapperComponent>
+      </Button>
+
       <PrintWrapper
         templateObject={{
           name: record.return ? Templates.parts_return_slip.key : Templates.parts_order.key,

client/src/components/report-center-modal/report-center-modal.component.jsx

@@ -110,7 +110,13 @@ export function ReportCenterModalComponent({ reportCenterModal, bodyshop }) {
         to: values.to,
         subject: Templates[values.key]?.subject
       },
-      values.sendbytext === "text" ? values.sendbytext : values.sendbyexcel === "excel" ? "x" : values.sendby === "email" ? "e" : "p",
+      values.sendbytext === "text"
+        ? values.sendbytext
+        : values.sendbyexcel === "excel"
+          ? "x"
+          : values.sendby === "email"
+            ? "e"
+            : "p",
       id
     );
     setLoading(false);
@@ -127,7 +133,7 @@ export function ReportCenterModalComponent({ reportCenterModal, bodyshop }) {
     ...(!HasFeatureAccess({ featureName: "bills", bodyshop }) ? ["purchases"] : []),
     ...(!HasFeatureAccess({ featureName: "timetickets", bodyshop }) ? ["payroll"] : [])
   ];
-
+  //TODO: Find a way to filter out / blur on demand.
   return (
     <div>
       <Form onFinish={handleFinish} autoComplete={"off"} layout="vertical" form={form}>
@@ -145,15 +151,9 @@ export function ReportCenterModalComponent({ reportCenterModal, bodyshop }) {
           ]}
         >
           <Radio.Group>
-            {/* {Object.keys(Templates).map((key) => (
-                <Radio key={key} value={key}>
-                  {Templates[key].title}
-                </Radio>
-              ))} */}
-
             <Row gutter={[16, 16]}>
               {Object.keys(grouped)
-                .filter((key) => !groupExcludeKeyFilter.includes(key))
+                //.filter((key) => !groupExcludeKeyFilter.includes(key))
                 .map((key) => (
                   <Col md={8} sm={12} key={key}>
                     <Card.Grid

client/src/components/schedule-calendar-wrapper/schedule-calendar-header-graph.component.jsx

@@ -6,6 +6,7 @@ import { connect } from "react-redux";
 import { Legend, PolarAngleAxis, PolarGrid, PolarRadiusAxis, Radar, RadarChart, Tooltip } from "recharts";
 import { createStructuredSelector } from "reselect";
 import { selectBodyshop } from "../../redux/user/user.selectors";
+import BlurWrapperComponent from "../feature-wrapper/blur-wrapper.component";
 
 const mapStateToProps = createStructuredSelector({
   bodyshop: selectBodyshop
@@ -38,26 +39,35 @@ export function ScheduleCalendarHeaderGraph({ bodyshop, loadData }) {
     <div>
       <Space>
         {t("appointments.labels.expectedprodhrs")}
-        <strong>{loadData?.expectedHours?.toFixed(1)}</strong>
+        <BlurWrapperComponent featureName="smartscheduling">
+          <strong>{loadData?.expectedHours?.toFixed(1)}</strong>
+        </BlurWrapperComponent>
         {t("appointments.labels.expectedjobs")}
-        <strong>{loadData?.expectedJobCount}</strong>
+        <BlurWrapperComponent featureName="smartscheduling">
+          <strong>{loadData?.expectedJobCount}</strong>
+        </BlurWrapperComponent>
       </Space>
-      <RadarChart
+      <BlurWrapperComponent featureName="smartscheduling">
-        // cx={300}
+        <RadarChart
-        // cy={250}
+          // cx={300}
-        // outerRadius={150}
+          // cy={250}
-        width={800}
+          // outerRadius={150}
-        height={600}
+          width={800}
-        data={data}
+          height={600}
-      >
+          data={data}
-        <PolarGrid />
+        >
-        <PolarAngleAxis dataKey="bucket" />
+          <PolarGrid />
-        <PolarRadiusAxis angle={90} />
+          <PolarAngleAxis dataKey="bucket" />
-        <Radar name="Ideal Load" dataKey="target" stroke="darkgreen" fill="white" fillOpacity={0} />
+          <PolarRadiusAxis angle={90} />
-        <Radar name="EOD Load" dataKey="current" stroke="dodgerblue" fill="dodgerblue" fillOpacity={0.6} />
+          <Radar name="Ideal Load" dataKey="target" stroke="darkgreen" fill="white" fillOpacity={0} />
-        <Tooltip />
+          <Radar name="EOD Load" dataKey="current" stroke="dodgerblue" fill="dodgerblue" fillOpacity={0.6} />
-        <Legend />
+          <Tooltip />
-      </RadarChart>
+          <Legend />
+        </RadarChart>
+      </BlurWrapperComponent>
+      {
+        //TODO:Upsell
+      }
     </div>
   );
 

client/src/components/schedule-calendar-wrapper/schedule-calendar-header.component.jsx

@@ -18,6 +18,8 @@ import ScheduleBlockDay from "../schedule-block-day/schedule-block-day.component
 import ScheduleCalendarHeaderGraph from "./schedule-calendar-header-graph.component";
 import InstanceRenderMgr from "../../utils/instanceRenderMgr";
 import { HasFeatureAccess } from "../feature-wrapper/feature-wrapper.component";
+import BlurWrapper from "../feature-wrapper/blur-wrapper.component";
+import BlurWrapperComponent from "../feature-wrapper/blur-wrapper.component";
 
 const mapStateToProps = createStructuredSelector({
   bodyshop: selectBodyshop,
@@ -59,30 +61,37 @@ export function ScheduleCalendarHeaderComponent({
         <tbody>
           {loadData && loadData.allJobsOut ? (
             loadData.allJobsOut.map((j) => (
-              <tr key={j.id}>
+              <BlurWrapperComponent key={j.id} featureName="smartscheduling">
-                <td style={{ padding: "2.5px" }}>
+                <tr>
-                  <Link to={`/manage/jobs/${j.id}`}>{j.ro_number}</Link> ({j.status})
+                  <td style={{ padding: "2.5px" }}>
-                </td>
+                    <Link to={`/manage/jobs/${j.id}`}>{j.ro_number}</Link> ({j.status})
-                <td style={{ padding: "2.5px" }}>
+                  </td>
-                  <OwnerNameDisplay ownerObject={j} />
+                  <td style={{ padding: "2.5px" }}>
-                </td>
+                    <OwnerNameDisplay ownerObject={j} />
-                <td style={{ padding: "2.5px" }}>
+                  </td>
-                  {`(${j.labhrs?.aggregate?.sum?.mod_lb_hrs?.toFixed(1) || 0}/${
+                  <td style={{ padding: "2.5px" }}>
-                    j.larhrs?.aggregate?.sum?.mod_lb_hrs?.toFixed(1) || 0
+                    {`(${j.labhrs?.aggregate?.sum?.mod_lb_hrs?.toFixed(1) || 0}/${
-                  }/${(j.labhrs.aggregate?.sum?.mod_lb_hrs + j.larhrs.aggregate?.sum?.mod_lb_hrs).toFixed(
+                      j.larhrs?.aggregate?.sum?.mod_lb_hrs?.toFixed(1) || 0
-                    1
+                    }/${(j.labhrs.aggregate?.sum?.mod_lb_hrs + j.larhrs.aggregate?.sum?.mod_lb_hrs).toFixed(
-                  )} ${t("general.labels.hours")})`}
+                      1
-                </td>
+                    )} ${t("general.labels.hours")})`}
-                <td style={{ padding: "2.5px" }}>
+                  </td>
-                  <DateTimeFormatter>{j.scheduled_completion}</DateTimeFormatter>
+                  <td style={{ padding: "2.5px" }}>
-                </td>
+                    <DateTimeFormatter>{j.scheduled_completion}</DateTimeFormatter>
-              </tr>
+                  </td>
+                </tr>
+              </BlurWrapperComponent>
             ))
           ) : (
             <tr>
-              <td style={{ padding: "2.5px" }}>{t("appointments.labels.nocompletingjobs")}</td>
+              <BlurWrapperComponent featureName="smartscheduling">
+                <td style={{ padding: "2.5px" }}>{t("appointments.labels.nocompletingjobs")}</td>
+              </BlurWrapperComponent>
             </tr>
           )}
+          {
+            //TODO:Upsell
+          }
         </tbody>
       </table>
     </div>
@@ -94,30 +103,37 @@ export function ScheduleCalendarHeaderComponent({
         <tbody>
           {loadData && loadData.allJobsIn ? (
             loadData.allJobsIn.map((j) => (
-              <tr key={j.id}>
+              <BlurWrapperComponent key={j.id} featureName="smartscheduling">
-                <td style={{ padding: "2.5px" }}>
+                <tr>
-                  <Link to={`/manage/jobs/${j.id}`}>{j.ro_number}</Link>
+                  <td style={{ padding: "2.5px" }}>
-                </td>
+                    <Link to={`/manage/jobs/${j.id}`}>{j.ro_number}</Link>
-                <td style={{ padding: "2.5px" }}>
+                  </td>
-                  <OwnerNameDisplay ownerObject={j} />
+                  <td style={{ padding: "2.5px" }}>
-                </td>
+                    <OwnerNameDisplay ownerObject={j} />
-                <td style={{ padding: "2.5px" }}>
+                  </td>
-                  {`(${j.labhrs?.aggregate?.sum.mod_lb_hrs?.toFixed(1) || 0}/${
+                  <td style={{ padding: "2.5px" }}>
-                    j.larhrs?.aggregate?.sum?.mod_lb_hrs?.toFixed(1) || 0
+                    {`(${j.labhrs?.aggregate?.sum.mod_lb_hrs?.toFixed(1) || 0}/${
-                  }/${(j.labhrs?.aggregate?.sum?.mod_lb_hrs + j.larhrs?.aggregate?.sum?.mod_lb_hrs).toFixed(
+                      j.larhrs?.aggregate?.sum?.mod_lb_hrs?.toFixed(1) || 0
-                    1
+                    }/${(j.labhrs?.aggregate?.sum?.mod_lb_hrs + j.larhrs?.aggregate?.sum?.mod_lb_hrs).toFixed(
-                  )} ${t("general.labels.hours")})`}
+                      1
-                </td>
+                    )} ${t("general.labels.hours")})`}
-                <td style={{ padding: "2.5px" }}>
+                  </td>
-                  <DateTimeFormatter>{j.scheduled_in}</DateTimeFormatter>
+                  <td style={{ padding: "2.5px" }}>
-                </td>
+                    <DateTimeFormatter>{j.scheduled_in}</DateTimeFormatter>
-              </tr>
+                  </td>
+                </tr>
+              </BlurWrapperComponent>
             ))
           ) : (
             <tr>
-              <td style={{ padding: "2.5px" }}>{t("appointments.labels.noarrivingjobs")}</td>
+              <BlurWrapperComponent featureName="smartscheduling">
+                <td style={{ padding: "2.5px" }}>{t("appointments.labels.noarrivingjobs")}</td>
+              </BlurWrapperComponent>
             </tr>
           )}
+          {
+            //TODO:Upsell
+          }
         </tbody>
       </table>
     </div>
@@ -132,10 +148,12 @@ export function ScheduleCalendarHeaderComponent({
           trigger="hover"
           title={t("appointments.labels.arrivingjobs")}
         >
-          <Icon component={MdFileDownload} style={{ color: "green" }} />
+          <Space size="small">
-          {(loadData.allHoursInBody || 0) && loadData.allHoursInBody.toFixed(1)}/
+            <Icon component={MdFileDownload} style={{ color: "green" }} />
-          {(loadData.allHoursInRefinish || 0) && loadData.allHoursInRefinish.toFixed(1)}/
+            <BlurWrapper featureName="smartscheduling">
-          {(loadData.allHoursIn || 0) && loadData.allHoursIn.toFixed(1)}
+              <span>{`${(loadData.allHoursInBody || 0) && loadData.allHoursInBody.toFixed(1)}/${(loadData.allHoursInRefinish || 0) && loadData.allHoursInRefinish.toFixed(1)}/${(loadData.allHoursIn || 0) && loadData.allHoursIn.toFixed(1)}`}</span>
+            </BlurWrapper>
+          </Space>
         </Popover>
         <Popover
           placement={"bottom"}
@@ -143,8 +161,12 @@ export function ScheduleCalendarHeaderComponent({
           trigger="hover"
           title={t("appointments.labels.completingjobs")}
         >
-          <Icon component={MdFileUpload} style={{ color: "red" }} />
+          <Space size="small">
-          {(loadData.allHoursOut || 0) && loadData.allHoursOut.toFixed(1)}
+            <Icon component={MdFileUpload} style={{ color: "red" }} />
+            <BlurWrapper featureName="smartscheduling">
+              <span>{(loadData.allHoursOut || 0) && loadData.allHoursOut.toFixed(1)}</span>
+            </BlurWrapper>
+          </Space>
         </Popover>
         <ScheduleCalendarHeaderGraph loadData={loadData} />
       </Space>
@@ -196,18 +218,7 @@ export function ScheduleCalendarHeaderComponent({
       <ScheduleBlockDay alreadyBlocked={isDayBlocked.length > 0} date={date} refetch={refetch}>
         <div style={{ color: isShopOpen(date) ? "" : "tomato" }}>
           {label}
-          {InstanceRenderMgr({
+          {calculating ? <LoadingSkeleton /> : LoadComponent}
-            imex: HasFeatureAccess({ featureName: "smartscheduling", bodyshop }) ? (
-              calculating ? (
-                <LoadingSkeleton />
-              ) : (
-                LoadComponent
-              )
-            ) : (
-              <></>
-            ),
-            rome: "USE_IMEX"
-          })}
         </div>
       </ScheduleBlockDay>
     </div>

client/src/components/schedule-calendar-wrapper/scheduler-calendar-wrapper.component.jsx

@@ -56,36 +56,14 @@ export function ScheduleCalendarWrapperComponent({
     <>
       <JobDetailCards />
       {HasFeatureAccess({ featureName: "smartscheduling", bodyshop }) &&
-        InstanceRenderManager({
+        problemJobs &&
-          imex:
+        (problemJobs.length > 2 ? (
-            problemJobs && problemJobs.length > 2 ? (
+          <Collapse style={{ marginBottom: "5px" }}>
-              <Collapse style={{ marginBottom: "5px" }}>
+            <Collapse.Panel
-                <Collapse.Panel
+              key="1"
-                  key="1"
+              header={<span style={{ color: "tomato" }}>{t("appointments.labels.severalerrorsfound")}</span>}
-                  header={<span style={{ color: "tomato" }}>{t("appointments.labels.severalerrorsfound")}</span>}
+            >
-                >
+              <Space direction="vertical" style={{ width: "100%" }}>
-                  <Space direction="vertical" style={{ width: "100%" }}>
-                    {problemJobs.map((problem) => (
-                      <Alert
-                        key={problem.id}
-                        type="error"
-                        message={
-                          <Trans
-                            i18nKey="appointments.labels.dataconsistency"
-                            components={[<Link to={`/manage/jobs/${problem.id}`} target="_blank" />]}
-                            values={{
-                              ro_number: problem.ro_number,
-                              code: problem.code
-                            }}
-                          />
-                        }
-                      />
-                    ))}
-                  </Space>
-                </Collapse.Panel>
-              </Collapse>
-            ) : (
-              <Space direction="vertical" style={{ width: "100%", marginBottom: "5px" }}>
                 {problemJobs.map((problem) => (
                   <Alert
                     key={problem.id}
@@ -103,10 +81,28 @@ export function ScheduleCalendarWrapperComponent({
                   />
                 ))}
               </Space>
-            ),
+            </Collapse.Panel>
-
+          </Collapse>
-          rome: "USE_IMEX"
+        ) : (
-        })}
+          <Space direction="vertical" style={{ width: "100%", marginBottom: "5px" }}>
+            {problemJobs.map((problem) => (
+              <Alert
+                key={problem.id}
+                type="error"
+                message={
+                  <Trans
+                    i18nKey="appointments.labels.dataconsistency"
+                    components={[<Link to={`/manage/jobs/${problem.id}`} target="_blank" />]}
+                    values={{
+                      ro_number: problem.ro_number,
+                      code: problem.code
+                    }}
+                  />
+                }
+              />
+            ))}
+          </Space>
+        ))}
 
       <Calendar
         events={data}

client/src/components/schedule-job-modal/schedule-job-modal.component.jsx

@@ -15,6 +15,8 @@ import LayoutFormRow from "../layout-form-row/layout-form-row.component";
 import ScheduleDayViewContainer from "../schedule-day-view/schedule-day-view.container";
 import ScheduleExistingAppointmentsList from "../schedule-existing-appointments-list/schedule-existing-appointments-list.component";
 import "./schedule-job-modal.scss";
+import LockWrapperComponent from "../lock-wrapper/lock-wrapper.component";
+import { BlurWrapper } from "../feature-wrapper/blur-wrapper.component";
 
 const mapStateToProps = createStructuredSelector({
   bodyshop: selectBodyshop
@@ -99,36 +101,43 @@ export function ScheduleJobModalComponent({
             <DateTimePicker onlyFuture />
           </Form.Item>
         </LayoutFormRow>
-        {HasFeatureAccess({ featureName: "smartscheduling", bodyshop }) && (
+        {
           <>
             <Typography.Title level={4}>{t("appointments.labels.smartscheduling")}</Typography.Title>
             <Space wrap>
               <Button onClick={handleSmartScheduling} loading={loading}>
-                {t("appointments.actions.calculate")}
+                <LockWrapperComponent featureName="smartscheduling">
+                  {t("appointments.actions.calculate")}
+                </LockWrapperComponent>
               </Button>
               {smartOptions.map((d, idx) => (
-                <Button
+                <BlurWrapper featureName="smartscheduling" key={idx}>
-                  className="imex-flex-row__margin"
+                  <Button
-                  key={idx}
+                    className="imex-flex-row__margin"
-                  onClick={() => {
+                    disabled={!HasFeatureAccess({ bodyshop, featureName: "smartscheduling" })}
-                    const ssDate = dayjs(d);
+                    onClick={() => {
-                    if (ssDate.isBefore(dayjs())) {
+                      const ssDate = dayjs(d);
-                      form.setFieldsValue({ start: dayjs() });
+                      if (ssDate.isBefore(dayjs())) {
-                    } else {
+                        form.setFieldsValue({ start: dayjs() });
-                      form.setFieldsValue({
+                      } else {
-                        start: dayjs(d).add(8, "hour")
+                        form.setFieldsValue({
-                      });
+                          start: dayjs(d).add(8, "hour")
-                    }
+                        });
-                    handleDateBlur();
+                      }
-                  }}
+                      handleDateBlur();
-                >
+                    }}
-                  <DateFormatter includeDay>{d}</DateFormatter>
+                  >
-                </Button>
+                    <DateFormatter includeDay>{d}</DateFormatter>
+                  </Button>
+                </BlurWrapper>
               ))}
+              {
+                //TODO:Upsell
+              }
             </Space>
           </>
-        )}
+        }
-        ,
+
         <LayoutFormRow grow>
           <Form.Item name="notifyCustomer" valuePropName="checked" label={t("jobs.labels.appointmentconfirmation")}>
             <Switch />

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

@@ -22,6 +22,7 @@ import InstanceRenderManager from "../../utils/instanceRenderMgr";
 import ShopInfoRoGuard from "./shop-info.roguard.component";
 import ShopInfoIntellipay from "./shop-intellipay-config.component";
 import { HasFeatureAccess } from "../feature-wrapper/feature-wrapper.component";
+import LockWrapperComponent from "../lock-wrapper/lock-wrapper.component";
 
 const mapStateToProps = createStructuredSelector({
   bodyshop: selectBodyshop
@@ -88,16 +89,14 @@ export function ShopInfoComponent({ bodyshop, form, saveLoading }) {
       children: <ShopInfoResponsibilityCenterComponent form={form} />,
       id: "tab-shop-responsibilitycenters"
     },
-    ...(HasFeatureAccess({ featureName: "checklists", bodyshop })
+
-      ? [
+    {
-          {
+      key: "checklists",
-            key: "checklists",
+      label: <LockWrapperComponent featureName="checklist">{t("bodyshop.labels.checklists")}</LockWrapperComponent>,
-            label: t("bodyshop.labels.checklists"),
+      children: <ShopInfoIntakeChecklistComponent form={form} />,
-            children: <ShopInfoIntakeChecklistComponent form={form} />,
+      disabled: HasFeatureAccess({ bodyshop, featureName: "checklist" }),
-            id: "tab-shop-checklists"
+      id: "tab-shop-checklists"
-          }
+    },
-        ]
-      : []),
     {
       key: "laborrates",
       label: t("bodyshop.labels.laborrates"),

client/src/components/time-ticket-list/time-ticket-list.component.jsx

@@ -14,6 +14,8 @@ import dayjs from "../../utils/day";
 import { alphaSort, dateSort } from "../../utils/sorters";
 import { HasRbacAccess } from "../rbac-wrapper/rbac-wrapper.component";
 import TimeTicketEnterButton from "../time-ticket-enter-button/time-ticket-enter-button.component";
+import { HasFeatureAccess } from "../feature-wrapper/feature-wrapper.component";
+import LockWrapperComponent from "../lock-wrapper/lock-wrapper.component";
 
 const mapStateToProps = createStructuredSelector({
   bodyshop: selectBodyshop,
@@ -39,7 +41,7 @@ export function TimeTicketList({
   extra
 }) {
   const [state, setState] = useState({
-    sortedInfo: { columnKey: 'date', order: 'descend' },
+    sortedInfo: { columnKey: "date", order: "descend" },
     filteredInfo: { text: "" }
   });
 
@@ -77,7 +79,7 @@ export function TimeTicketList({
     if (isShiftTicket) {
       return !(canEditShiftTickets && (!isCommitted || canEditCommittedTimeTickets));
     }
-    
+
     return !(canEditTimeTickets && (!isCommitted || canEditCommittedTimeTickets));
   };
 
@@ -277,6 +279,8 @@ export function TimeTicketList({
     setState({ ...state, filteredInfo: filters, sortedInfo: sorter });
   };
 
+  const hasTimeTicketsAccess = HasFeatureAccess({ bodyshop, featureName: "timetickets" });
+
   return (
     <Card
       title={t("timetickets.labels.timetickets")}
@@ -284,7 +288,7 @@ export function TimeTicketList({
         <Space wrap>
           {jobId && bodyshop.md_tasks_presets.enable_tasks && (
             <Button
-              disabled={disabled}
+              disabled={disabled || !hasTimeTicketsAccess}
               onClick={() => {
                 setTimeTicketTaskContext({
                   actions: { refetch: refetch },
@@ -292,7 +296,9 @@ export function TimeTicketList({
                 });
               }}
             >
-              {t("timetickets.actions.claimtasks")}
+              <LockWrapperComponent featureName="timetickets">
+                {t("timetickets.actions.claimtasks")}
+              </LockWrapperComponent>
             </Button>
           )}
           {jobId &&
@@ -305,9 +311,9 @@ export function TimeTicketList({
                     ? currentUser.email.concat(" | ", currentUser.displayName)
                     : currentUser.email
                 }}
-                disabled={disabled}
+                disabled={disabled || !hasTimeTicketsAccess}
               >
-                {t("timetickets.actions.enter")}
+                <LockWrapperComponent featureName="timetickets">{t("timetickets.actions.enter")}</LockWrapperComponent>
               </TimeTicketEnterButton>
             ))}
           {extra}
@@ -328,7 +334,7 @@ export function TimeTicketList({
         scroll={{
           x: true
         }}
-        dataSource={timetickets}
+        dataSource={hasTimeTicketsAccess ? timetickets : []}
         onChange={handleTableChange}
         summary={() => {
           if (Enhanced_Payroll.treatment === "on") return null;
@@ -354,6 +360,18 @@ export function TimeTicketList({
               </Table.Summary.Row>
             );
         }}
+        locale={{
+          ...(!hasTimeTicketsAccess && {
+            emptyText: (
+              <div>
+                Upsell
+                {
+                  //TODO:Upsell
+                }
+              </div>
+            )
+          })
+        }}
       />
     </Card>
   );

client/src/pages/accounting-payables/accounting-payables.container.jsx

@@ -57,7 +57,15 @@ export function AccountingPayablesContainer({ bodyshop, setBreadcrumbs, setSelec
 
   return (
     <div>
-      <FeatureWrapperComponent featureName="export">
+      <FeatureWrapperComponent
+        featureName="export"
+        noAuth
+        upsellComponent={
+          {
+            //TODO:Upsell
+          }
+        }
+      >
         <RbacWrapper action="accounting:payables">
           {noPath && <AlertComponent type="error" message={t("general.messages.noacctfilepath")} />}
           <AccountingPayablesTable loadaing={loading} bills={data ? data.bills : []} refetch={refetch} />

client/src/pages/accounting-payments/accounting-payments.container.jsx

@@ -55,7 +55,14 @@ export function AccountingPaymentsContainer({ bodyshop, setBreadcrumbs, setSelec
     !(bodyshop && (bodyshop.cdk_dealerid || bodyshop.pbs_serialnumber || bodyshop.accountingconfig.qbo));
   return (
     <div>
-      <FeatureWrapperComponent featureName="export">
+      <FeatureWrapperComponent
+        featureName="export"
+        upsellComponent={
+          {
+            //TODO:Upsell
+          }
+        }
+      >
         <RbacWrapper action="accounting:payments">
           {noPath && <AlertComponent type="error" message={t("general.messages.noacctfilepath")} />}
           <AccountingPaymentsTable loadaing={loading} payments={data ? data.payments : []} refetch={refetch} />

client/src/pages/accounting-receivables/accounting-receivables.container.jsx

@@ -60,7 +60,14 @@ export function AccountingReceivablesContainer({ bodyshop, setBreadcrumbs, setSe
 
   return (
     <div>
-      <FeatureWrapperComponent featureName="export">
+      <FeatureWrapperComponent
+        featureName="export"
+        upsellComponent={
+          {
+            //TODO:Upsell
+          }
+        }
+      >
         <RbacWrapper action="accounting:receivables">
           {noPath && <AlertComponent type="error" message={t("general.messages.noacctfilepath")} />}
           <AccountingReceivablesTable loadaing={loading} jobs={data ? data.jobs : []} refetch={refetch} />

client/src/pages/bills/bills.page.container.jsx

@@ -53,7 +53,14 @@ export function BillsPageContainer({ setBreadcrumbs, setSelectedHeader }) {
 
   if (error) return <AlertComponent message={error.message} type="error" />;
   return (
-    <FeatureWrapperComponent featureName="bills">
+    <FeatureWrapperComponent
+      featureName="bills"
+      upsellComponent={
+        {
+          //TODO:Upsell
+        }
+      }
+    >
       <RbacWrapper action="bills:list">
         <div>
           <BillsPageComponent

client/src/pages/contract-create/contract-create.page.container.jsx

@@ -120,7 +120,14 @@ export function ContractCreatePageContainer({ bodyshop, setBreadcrumbs, setSelec
   }, [t, setBreadcrumbs, setSelectedHeader]);
 
   return (
-    <FeatureWrapperComponent featureName="courtesycars">
+    <FeatureWrapperComponent
+      featureName="courtesycars"
+      upsellComponent={
+        {
+          //TODO:Upsell
+        }
+      }
+    >
       <RbacWrapper action="contracts:create">
         <Form form={form} layout="vertical" autoComplete="no" onFinish={handleFinish}>
           <ContractCreatePageComponent

client/src/pages/contract-detail/contract-detail.page.container.jsx

@@ -108,7 +108,14 @@ export function ContractDetailPageContainer({ setBreadcrumbs, addRecentItem, set
   if (!!!data.cccontracts_by_pk) return <NotFound />;
 
   return (
-    <FeatureWrapperComponent featureName="courtesycars">
+    <FeatureWrapperComponent
+      featureName="courtesycars"
+      upsellComponent={
+        {
+          //TODO:Upsell
+        }
+      }
+    >
       <RbacWrapper action="contracts:detail">
         <div>
           <CourtesyCarReturnModalContainer />

client/src/pages/contracts/contracts.page.container.jsx

@@ -56,7 +56,14 @@ export function ContractsPageContainer({ setBreadcrumbs, setSelectedHeader }) {
 
   if (error) return <AlertComponent message={error.message} type="error" />;
   return (
-    <FeatureWrapperComponent featureName="courtesycars">
+    <FeatureWrapperComponent
+      featureName="courtesycars"
+      upsellComponent={
+        {
+          //TODO:Upsell
+        }
+      }
+    >
       <RbacWrapper action="contracts:list">
         <ContractsPageComponent
           loading={loading}

client/src/pages/courtesy-car-create/courtesy-car-create.page.container.jsx

@@ -68,13 +68,20 @@ export function CourtesyCarCreateContainer({ bodyshop, setBreadcrumbs, setSelect
   }, [t, setBreadcrumbs, setSelectedHeader]);
 
   return (
-    <RbacWrapper action="courtesycar:create">
+    <FeatureWrapperComponent
-      <FeatureWrapperComponent featureName="courtesycars">
+      featureName="courtesycars"
+      upsellComponent={
+        {
+          //TODO:Upsell
+        }
+      }
+    >
+      <RbacWrapper action="courtesycar:create">
         <Form form={form} autoComplete="new-password" onFinish={handleFinish} layout="vertical">
           <CourtesyCarFormComponent form={form} saveLoading={loading} newCC={true} />
         </Form>
-      </FeatureWrapperComponent>
+      </RbacWrapper>
-    </RbacWrapper>
+    </FeatureWrapperComponent>
   );
 }
 

client/src/pages/courtesy-cars/courtesy-cars.page.container.jsx

@@ -34,11 +34,18 @@ export function CourtesyCarsPageContainer({ setBreadcrumbs, setSelectedHeader })
 
   if (error) return <AlertComponent message={error.message} type="error" />;
   return (
-    <RbacWrapper action="courtesycar:list">
+    <FeatureWrapperComponent
-      <FeatureWrapperComponent featureName="courtesycars">
+      featureName="courtesycars"
+      upsellComponent={
+        {
+          //TODO:Upsell
+        }
+      }
+    >
+      <RbacWrapper action="courtesycar:list">
         <CourtesyCarsPageComponent loading={loading} data={(data && data.courtesycars) || []} refetch={refetch} />
-      </FeatureWrapperComponent>
+      </RbacWrapper>
-    </RbacWrapper>
+    </FeatureWrapperComponent>
   );
 }
 

client/src/pages/dashboard/dashboard.container.jsx

@@ -32,7 +32,14 @@ export function ExportsLogPageContainer({ setBreadcrumbs, setSelectedHeader }) {
   }, [setBreadcrumbs, t, setSelectedHeader]);
 
   return (
-    <FeatureWrapper featureName="dashboard">
+    <FeatureWrapper
+      featureName="dashboard"
+      upsellComponent={
+        {
+          //TODO:Upsell
+        }
+      }
+    >
       <RbacWrapper action="shop:dashboard">
         <DashboardGridComponent />
       </RbacWrapper>

client/src/pages/export-logs/export-logs.page.container.jsx

@@ -32,7 +32,14 @@ export function ExportsLogPageContainer({ setBreadcrumbs, setSelectedHeader }) {
   }, [setBreadcrumbs, t, setSelectedHeader]);
 
   return (
-    <FeatureWrapperComponent featureName="export">
+    <FeatureWrapperComponent
+      featureName="export"
+      upsellComponent={
+        {
+          //TODO:Upsell
+        }
+      }
+    >
       <RbacWrapper action="accounting:exportlogs">
         <ExportLogsPage />
       </RbacWrapper>

client/src/pages/jobs-detail/jobs-detail.page.component.jsx

@@ -56,6 +56,7 @@ import { DateTimeFormat } from "../../utils/DateFormatter";
 import dayjs from "../../utils/day";
 import InstanceRenderManager from "../../utils/instanceRenderMgr";
 import UndefinedToNull from "../../utils/undefinedtonull";
+import LockWrapperComponent from "../../components/lock-wrapper/lock-wrapper.component.jsx";
 
 const mapStateToProps = createStructuredSelector({
   bodyshop: selectBodyshop,
@@ -376,9 +377,7 @@ export function JobsDetailPage({
               key: "partssublet",
               id: "job-details-partssublet",
               icon: <ToolFilled />,
-              label: HasFeatureAccess({ featureName: "bills", bodyshop })
+              label: t("menus.jobsdetail.partssublet"),
-                ? t("menus.jobsdetail.partssublet")
-                : t("menus.jobsdetail.parts"),
               children: (
                 <JobsDetailPliContainer
                   job={job}
@@ -389,20 +388,16 @@ export function JobsDetailPage({
                 />
               )
             },
-            ...(InstanceRenderManager({
+
-              rome: "USE_IMEX",
+            {
-              imex: HasFeatureAccess({ featureName: "timetickets", bodyshop })
+              key: "labor",
-            })
+              id: "job-details-labor",
-              ? [
+              icon: <Icon component={FaHardHat} />,
-                  {
+              label: (
-                    key: "labor",
+                <LockWrapperComponent featureName="timetickets">{t("menus.jobsdetail.labor")}</LockWrapperComponent>
-                    id: "job-details-labor",
+              ),
-                    icon: <Icon component={FaHardHat} />,
+              children: <JobsDetailLaborContainer job={job} jobId={job.id} />
-                    label: t("menus.jobsdetail.labor"),
+            },
-                    children: <JobsDetailLaborContainer job={job} jobId={job.id} />
-                  }
-                ]
-              : []),
             {
               key: "lifecycle",
               icon: <BarsOutlined />,
@@ -418,24 +413,18 @@ export function JobsDetailPage({
               forceRender: true,
               children: <JobsDetailDatesComponent job={job} />
             },
-            ...(InstanceRenderManager({
+
-              rome: "USE_IMEX",
+            {
-              imex: HasFeatureAccess({ featureName: "media", bodyshop })
+              key: "documents",
-            })
+              id: "job-details-documents",
-              ? [
+              icon: <FileImageFilled />,
-                  {
+              label: <LockWrapperComponent featureName="media">{t("jobs.labels.documents")}</LockWrapperComponent>,
-                    key: "documents",
+              children: bodyshop.uselocalmediaserver ? (
-                    id: "job-details-documents",
+                <JobsDocumentsLocalGallery job={job} />
-                    icon: <FileImageFilled />,
+              ) : (
-                    label: t("jobs.labels.documents"),
+                <JobsDocumentsGalleryContainer jobId={job.id} />
-                    children: bodyshop.uselocalmediaserver ? (
+              )
-                      <JobsDocumentsLocalGallery job={job} />
+            },
-                    ) : (
-                      <JobsDocumentsGalleryContainer jobId={job.id} />
-                    )
-                  }
-                ]
-              : []),
             {
               key: "notes",
               id: "job-details-notes",
@@ -447,7 +436,7 @@ export function JobsDetailPage({
               key: "audit",
               icon: <HistoryOutlined />,
               id: "job-details-audit",
-              label: t("jobs.labels.audit"),
+              label: <LockWrapperComponent featureName="audit">{t("jobs.labels.audit")}</LockWrapperComponent>,
               children: <JobAuditTrail jobId={job.id} />
             },
             {

client/src/pages/payments-all/payments-all.container.page.jsx

@@ -58,7 +58,14 @@ export function AllJobs({ bodyshop, setBreadcrumbs, setSelectedHeader }) {
 
   if (error) return <AlertComponent message={error.message} type="error" />;
   return (
-    <FeatureWrapperComponent featureName="payments">
+    <FeatureWrapperComponent
+      featureName="payments"
+      upsellComponent={
+        {
+          //TODO:Upsell
+        }
+      }
+    >
       <RbacWrapper action="payments:list">
         <PaymentsListPaginated
           refetch={refetch}

client/src/pages/production-board/production-board.container.jsx

@@ -38,7 +38,14 @@ export function ProductionBoardContainer({ setBreadcrumbs, bodyshop, setSelected
   }, [t, setBreadcrumbs, setSelectedHeader]);
 
   return (
-    <FeatureWrapper featureName="visualboard">
+    <FeatureWrapper
+      featureName="visualboard"
+      upsellComponent={
+        {
+          //TODO:Upsell
+        }
+      }
+    >
       <RbacWrapper action="production:board">
         <ProductionBoardComponent />
       </RbacWrapper>

client/src/pages/scoreboard/scoreboard.page.container.jsx

@@ -66,7 +66,14 @@ export function ScoreboardContainer({ setBreadcrumbs, setSelectedHeader }) {
    * Render the component
    */
   return (
-    <FeatureWrapper featureName="scoreboard">
+    <FeatureWrapper
+      featureName="scoreboard"
+      upsellComponent={
+        {
+          //TODO:Upsell
+        }
+      }
+    >
       <RbacWrapper action="scoreboard:view">
         <Tabs
           activeKey={tab || "sb"}

client/src/pages/shift-clock/shift-clock.page.jsx

@@ -5,7 +5,14 @@ import FeatureWrapperComponent from "../../components/feature-wrapper/feature-wr
 
 export default function ShiftClock() {
   return (
-    <FeatureWrapperComponent featureName="timetickets">
+    <FeatureWrapperComponent
+      featureName="timetickets"
+      upsellComponent={
+        {
+          //TODO:Upsell
+        }
+      }
+    >
       <RbacWrapper action="shiftclock:view">
         <TimeTicketShift />
       </RbacWrapper>

client/src/pages/tech/tech.page.component.jsx

@@ -82,7 +82,14 @@ export function TechPage({ technician }) {
                 />
               }
             >
-              <FeatureWrapper featureName="tech-console">
+              <FeatureWrapper
+                featureName="tech-console"
+                upsellComponent={
+                  {
+                    //TODO:Upsell
+                  }
+                }
+              >
                 <TimeTicketModalContainer />
                 <EmailOverlayContainer />
                 <PrintCenterModalContainer />

client/src/pages/temporary-docs/temporary-docs.container.jsx

@@ -38,11 +38,18 @@ export function TempDocumentsContainer({ setBreadcrumbs, setSelectedHeader }) {
   }, [t, setBreadcrumbs, setSelectedHeader]);
 
   return (
-    <RbacWrapper action="temporarydocs:view">
+    <FeatureWrapperComponent
-      <FeatureWrapperComponent featureName="media">
+      featureName="media"
+      upsellComponent={
+        {
+          //TODO:Upsell
+        }
+      }
+    >
+      <RbacWrapper action="temporarydocs:view">
         <TemporaryDocsComponent />
-      </FeatureWrapperComponent>
+      </RbacWrapper>
-    </RbacWrapper>
+    </FeatureWrapperComponent>
   );
 }
 

client/src/pages/time-tickets/time-tickets.container.jsx

@@ -73,7 +73,14 @@ export function TimeTicketsContainer({ bodyshop, setBreadcrumbs, setSelectedHead
   if (error) return <AlertComponent message={error.message} type="error" />;
 
   return (
-    <FeatureWrapperComponent featureName="timetickets">
+    <FeatureWrapperComponent
+      featureName="timetickets"
+      upsellComponent={
+        {
+          //TODO:Upsell
+        }
+      }
+    >
       <RbacWrapper action="timetickets:list">
         <Row gutter={[16, 16]}>
           <Col span={24}>

client/src/pages/tt-approvals/tt-approvals.page.container.jsx

@@ -38,7 +38,14 @@ export function TtApprovalsPage({ setBreadcrumbs, setSelectedHeader }) {
   }, [t, setBreadcrumbs, setSelectedHeader]);
 
   return (
-    <FeatureWrapperComponent featureName="timetickets">
+    <FeatureWrapperComponent
+      featureName="timetickets"
+      upsellComponent={
+        {
+          //TODO:Upsell
+        }
+      }
+    >
       <RbacWrapper action="ttapprovals:view">
         <TtApprovalsList />
       </RbacWrapper>

client/src/translations/en_us/common.json

@@ -991,6 +991,7 @@
 			"labels": {
 				"confirmdelete": "Are you sure you want to delete these documents. This CANNOT be undone.",
 				"doctype": "Document Type",
+				"dragtoupload": "Click or drag files to this area to upload",
 				"newjobid": "Assign to Job",
 				"openinexplorer": "Open in Explorer",
 				"optimizedimage": "The below image is optimized. Click on the picture below to open in a new window and view it full size, or open it in explorer.",

client/src/translations/es/common.json

@@ -991,6 +991,7 @@
 			"labels": {
 				"confirmdelete": "",
 				"doctype": "",
+				"dragtoupload": "",
 				"newjobid": "",
 				"openinexplorer": "",
 				"optimizedimage": "",

client/src/translations/fr/common.json

@@ -991,6 +991,7 @@
 			"labels": {
 				"confirmdelete": "",
 				"doctype": "",
+				"dragtoupload": "",
 				"newjobid": "",
 				"openinexplorer": "",
 				"optimizedimage": "",