IO-3020 IO-3036 Additional blurred components.

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

@@ -4,6 +4,7 @@ import { connect } from "react-redux";
 import { createStructuredSelector } from "reselect";
 import { selectBodyshop } from "../../redux/user/user.selectors";
 import { HasFeatureAccess } from "./feature-wrapper.component";
+import { DateTimeFormatterFunction } from "../../utils/DateFormatter";
 
 const mapStateToProps = createStructuredSelector({
   bodyshop: selectBodyshop
@@ -31,6 +32,7 @@ export function BlurWrapper({
   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 }));
@@ -61,8 +63,17 @@ export function BlurWrapper({
         } else {
           if (typeof overrideValueFunction === "function") {
             newValueProp = overrideValueFunction();
-          } else if (overrideValueFunction === "RandomDinero") {
+          } else if (typeof overrideValueFunction === "string" && overrideValueFunction === "RandomDinero") {
             newValueProp = RandomDinero();
+          } else if (typeof overrideValueFunction === "string" && overrideValueFunction === "RandomAmount") {
+            newValueProp = RandomAmount();
+          } else if (
+            typeof overrideValueFunction === "string" &&
+            overrideValueFunction.startsWith("RandomSmallString")
+          ) {
+            newValueProp = RandomSmallString(overrideValueFunction.split(":")[1] || 3); //Default back to 3 words, otherwise use the string.
+          } else if (typeof overrideValueFunction === "string" && overrideValueFunction.startsWith("RandomDate")) {
+            newValueProp = RandomDate();
           } else {
             newValueProp = "This is some random text. Nothing interesting here.";
           }
@@ -86,6 +97,23 @@ export default connect(mapStateToProps, null)(BlurWrapper);
 function RandomDinero() {
   return Dinero({ amount: Math.round(Math.exp(Math.random() * 10, 2)) }).toFormat();
 }
+function RandomAmount() {
+  return Math.round(Math.exp(Math.random() * 10));
+}
+
+function RandomSmallString(maxWords = 3) {
+  const words = ["lorem", "ipsum", "dolor", "sit", "amet", "consectetur", "adipiscing", "elit"];
+  const wordCount = Math.floor(Math.random() * maxWords) + 1; // Random number between 1 and 3
+  let result = [];
+  for (let i = 0; i < wordCount; i++) {
+    const randomIndex = Math.floor(Math.random() * words.length);
+    result.push(words[randomIndex]);
+  }
+  return result.join(" ");
+}
+function RandomDate() {
+  return DateTimeFormatterFunction(new Date(Math.floor(Math.random() * 1000000000000)));
+}
 
 const featureNameList = [
   "mobile",
@@ -104,9 +132,10 @@ const featureNameList = [
   "checklist",
   "smartscheduling",
   "roguard",
-  "dashboard"
+  "dashboard",
+  "lifecycle"
 ];
 
-function ValidateFeatureName(featureName) {
+export function ValidateFeatureName(featureName) {
   return featureNameList.includes(featureName);
 }

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

@@ -1,11 +1,12 @@
-import dayjs from "../../utils/day";
 import React from "react";
 import { useTranslation } from "react-i18next";
 import { connect } from "react-redux";
 import { createStructuredSelector } from "reselect";
 import { selectBodyshop } from "../../redux/user/user.selectors";
-import AlertComponent from "../alert/alert.component";
+import dayjs from "../../utils/day";
 import InstanceRenderManager from "../../utils/instanceRenderMgr";
+import AlertComponent from "../alert/alert.component";
+import { ValidateFeatureName } from "./blur-wrapper.component";
 
 const mapStateToProps = createStructuredSelector({
   bodyshop: selectBodyshop
@@ -21,9 +22,12 @@ function FeatureWrapper({
   ...restProps
 }) {
   const { t } = useTranslation();
+  if (import.meta.env.DEV) {
+    if (!ValidateFeatureName(featureName)) console.trace("*** INVALID FEATURE NAME", featureName);
+  }
 
   if (upsellComponent) {
-    console.error("Upsell component passed in. This is not yet implemented.");
+    console.error("*** Upsell component passed in. This is not yet implemented.");
   }
 
   if (HasFeatureAccess({ featureName, bodyshop })) return children;

client/src/components/job-lifecycle/job-lifecycle.component.jsx

@@ -8,6 +8,7 @@ import { isEmpty } from "lodash";
 import { useTranslation } from "react-i18next";
 
 import "./job-lifecycle.styles.scss";
+import BlurWrapperComponent from "../feature-wrapper/blur-wrapper.component";
 
 // show text on bar if text can fit
 export function JobLifecycleComponent({ job, statuses, ...rest }) {
@@ -65,14 +66,23 @@ export function JobLifecycleComponent({ job, statuses, ...rest }) {
     {
       title: t("job_lifecycle.columns.value"),
       dataIndex: "value",
-      key: "value"
+      key: "value",
+      render: (text, record) => (
+        <BlurWrapperComponent featureName="lifecycle" valueProp="children" overrideValueFunction="RandomSmallString:2">
+          <span>{text}</span>
+        </BlurWrapperComponent>
+      )
     },
     {
       title: t("job_lifecycle.columns.start"),
       dataIndex: "start",
       key: "start",
-      render: (text) => DateTimeFormatterFunction(text),
+      sorter: (a, b) => dayjs(a.start).unix() - dayjs(b.start).unix(),
-      sorter: (a, b) => dayjs(a.start).unix() - dayjs(b.start).unix()
+      render: (text, record) => (
+        <BlurWrapperComponent featureName="lifecycle" valueProp="children" overrideValueFunction="RandomDate">
+          <span>{DateTimeFormatterFunction(text)}</span>
+        </BlurWrapperComponent>
+      )
     },
     {
       title: t("job_lifecycle.columns.relative_start"),
@@ -92,7 +102,12 @@ export function JobLifecycleComponent({ job, statuses, ...rest }) {
         }
         return dayjs(a.end).unix() - dayjs(b.end).unix();
       },
-      render: (text) => (isEmpty(text) ? t("job_lifecycle.content.not_available") : DateTimeFormatterFunction(text))
+
+      render: (text, record) => (
+        <BlurWrapperComponent featureName="lifecycle" valueProp="children" overrideValueFunction="RandomDate">
+          <span>{isEmpty(text) ? t("job_lifecycle.content.not_available") : DateTimeFormatterFunction(text)}</span>
+        </BlurWrapperComponent>
+      )
     },
     {
       title: t("job_lifecycle.columns.relative_end"),
@@ -122,6 +137,10 @@ export function JobLifecycleComponent({ job, statuses, ...rest }) {
               }
               style={{ width: "100%" }}
             >
+              {
+                //TODO:Upsell
+              }
+              <BlurWrapperComponent featureName="lifecycle">
                 <div
                   id="bar-container"
                   style={{
@@ -183,6 +202,7 @@ export function JobLifecycleComponent({ job, statuses, ...rest }) {
                     );
                   })}
                 </div>
+              </BlurWrapperComponent>
               <Card type="inner" title={t("job_lifecycle.content.legend_title")} style={{ marginTop: "10px" }}>
                 <div>
                   {lifecycleData.durations.summations.map((key) => (
@@ -197,7 +217,15 @@ export function JobLifecycleComponent({ job, statuses, ...rest }) {
                           textAlign: "center"
                         }}
                       >
-                        {key.status} ({key.roundedPercentage})
+                        {key.status} (
+                        <BlurWrapperComponent
+                          featureName="lifecycle"
+                          overrideValueFunction="RandomAmount"
+                          valueProp="children"
+                        >
+                          <span>{key.roundedPercentage}</span>
+                        </BlurWrapperComponent>
+                        )
                       </div>
                     </Tag>
                   ))}

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

@@ -729,6 +729,7 @@ export function JobsDetailHeaderActions({
       onClick: () => {
         logImEXEvent("job_header_enter_time_ticekts");
 
+        HasFeatureAccess({ featureName: "timetickets", bodyshop }) &&
           setTimeTicketContext({
             actions: {},
             context: {
@@ -765,6 +766,7 @@ export function JobsDetailHeaderActions({
     onClick: () => {
       logImEXEvent("job_header_enter_payment");
 
+      HasFeatureAccess({ featureName: "payments", bodyshop }) &&
         setPaymentContext({
           actions: {},
           context: { jobid: job.id }

client/src/pages/jobs-deliver/jobs-delivery.page.container.jsx

@@ -12,6 +12,7 @@ import { setBreadcrumbs, setSelectedHeader } from "../../redux/application/appli
 import { selectBodyshop } from "../../redux/user/user.selectors";
 import JobchecklistComponent from "../../components/job-checklist/job-checklist.component";
 import InstanceRenderManager from "../../utils/instanceRenderMgr";
+import FeatureWrapperComponent from "../../components/feature-wrapper/feature-wrapper.component";
 
 const mapStateToProps = createStructuredSelector({
   //currentUser: selectCurrentUser
@@ -59,6 +60,14 @@ export function JobsDeliverContainer({ bodyshop, setBreadcrumbs, setSelectedHead
   if (data && !!!data.bodyshops_by_pk.deliverchecklist)
     return <AlertComponent message={t("deliver.errors.nochecklist")} type="error" />;
   return (
+    <FeatureWrapperComponent
+      featureName="checklist"
+      upsellComponent={
+        {
+          //TODO:Upsell
+        }
+      }
+    >
       <RbacWrapper action="jobs:deliver">
         <div>
           <JobchecklistComponent
@@ -68,6 +77,7 @@ export function JobsDeliverContainer({ bodyshop, setBreadcrumbs, setSelectedHead
           />
         </div>
       </RbacWrapper>
+    </FeatureWrapperComponent>
   );
 }
 

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

@@ -402,7 +402,9 @@ export function JobsDetailPage({
               key: "lifecycle",
               icon: <BarsOutlined />,
               id: "job-details-lifecycle",
-              label: t("menus.jobsdetail.lifecycle"),
+              label: (
+                <LockWrapperComponent featureName="lifecycle">{t("menus.jobsdetail.lifecycle")}</LockWrapperComponent>
+              ),
               children: <JobLifecycleComponent job={job} statuses={bodyshop.md_ro_statuses} />
             },
             {

client/src/pages/jobs-intake/jobs-intake.page.container.jsx

@@ -13,6 +13,7 @@ import { selectBodyshop } from "../../redux/user/user.selectors";
 import RbacWrapper from "../../components/rbac-wrapper/rbac-wrapper.component";
 import { Result } from "antd";
 import InstanceRenderManager from "../../utils/instanceRenderMgr";
+import FeatureWrapperComponent from "../../components/feature-wrapper/feature-wrapper.component";
 
 const mapStateToProps = createStructuredSelector({
   //currentUser: selectCurrentUser
@@ -63,6 +64,14 @@ export function JobsIntakeContainer({ bodyshop, setBreadcrumbs, setSelectedHeade
     return <AlertComponent message={t("intake.errors.nochecklist")} type="error" />;
 
   return (
+    <FeatureWrapperComponent
+      featureName="checklist"
+      upsellComponent={
+        {
+          //TODO:Upsell
+        }
+      }
+    >
       <RbacWrapper action="jobs:intake">
         <div>
           {!!data.jobs_by_pk.intakechecklist ||
@@ -77,6 +86,7 @@ export function JobsIntakeContainer({ bodyshop, setBreadcrumbs, setSelectedHeade
           )}
         </div>
       </RbacWrapper>
+    </FeatureWrapperComponent>
   );
 }