FIrst round of changes for Instance Manger & Pro Manager

.editorconfig

@@ -3,10 +3,13 @@ root = true
 [*]
 charset = utf-8
 indent_style = space
-indent_size = 4
+indent_size = 2
 end_of_line = lf
 insert_final_newline = true
-trim_trailing_whitespace = true
+trim_trailing_whitespace = false
+quote_type = single
+max_line_length = 100
+bracketSpacing = false
 
 [*.md]
 trim_trailing_whitespace = false

_reference/BodyshopFeatures.json

@@ -0,0 +1,12 @@
+{
+  "mobile": "date",
+  "allAccess": "bool",
+  "timetickets": "date",
+  "payments": "date",
+  "partsorders": "date",
+  "bills": "Date",
+  "export": "date",
+  "csi": "Date",
+  "courtesycars": "date",
+  "media": "date"
+}

client/.env.development.imex

@@ -11,4 +11,4 @@ REACT_APP_STRIPE_PUBLIC_KEY=pk_test_51GqB4TJl3nQjrZ0wCQWAxAhlNF8jKe0tipIa6ExBaxw
 REACT_APP_AXIOS_BASE_API_URL=http://localhost:4000
 REACT_APP_REPORTS_SERVER_URL=https://reports3.test.imex.online
 REACT_APP_SPLIT_API=ts615lqgnmk84thn72uk18uu5pgce6e0l4rc
-INSTANCE=IMEX
+REACT_APP_INSTANCE=IMEX

client/.env.development.promanager

@@ -11,4 +11,4 @@ REACT_APP_STRIPE_PUBLIC_KEY=pk_test_51GqB4TJl3nQjrZ0wCQWAxAhlNF8jKe0tipIa6ExBaxw
 REACT_APP_AXIOS_BASE_API_URL=http://localhost:4000
 REACT_APP_REPORTS_SERVER_URL=https://reports3.test.imex.online
 REACT_APP_SPLIT_API=ts615lqgnmk84thn72uk18uu5pgce6e0l4rc
-INSTANCE=PROMANAGER
+REACT_APP_INSTANCE=PROMANAGER

client/.env.development.rome

@@ -12,4 +12,4 @@ REACT_APP_AXIOS_BASE_API_URL=http://localhost:4000
 REACT_APP_REPORTS_SERVER_URL=https://reports3.test.imex.online
 REACT_APP_SPLIT_API=ts615lqgnmk84thn72uk18uu5pgce6e0l4rc
 REACT_APP_COUNTRY=USA
-INSTANCE=ROME
+REACT_APP_INSTANCE=ROME

client/.env.production.imex

@@ -12,4 +12,4 @@ REACT_APP_STRIPE_PUBLIC_KEY=pk_test_51GqB4TJl3nQjrZ0wCQWAxAhlNF8jKe0tipIa6ExBaxw
 REACT_APP_AXIOS_BASE_API_URL=https://api.imex.online/
 REACT_APP_REPORTS_SERVER_URL=https://reports.imex.online
 REACT_APP_SPLIT_API=et9pjkik6bn67he5evpmpr1agoo7gactphgk
-INSTANCE=IMEX
+REACT_APP_INSTANCE=IMEX

client/.env.production.promanager

@@ -12,4 +12,4 @@ REACT_APP_STRIPE_PUBLIC_KEY=pk_test_51GqB4TJl3nQjrZ0wCQWAxAhlNF8jKe0tipIa6ExBaxw
 REACT_APP_AXIOS_BASE_API_URL=https://api.imex.online/
 REACT_APP_REPORTS_SERVER_URL=https://reports.imex.online
 REACT_APP_SPLIT_API=et9pjkik6bn67he5evpmpr1agoo7gactphgk
-INSTANCE=PROMANAGER
+REACT_APP_INSTANCE=PROMANAGER

client/.env.production.rome

@@ -12,4 +12,4 @@ REACT_APP_STRIPE_PUBLIC_KEY=pk_test_51GqB4TJl3nQjrZ0wCQWAxAhlNF8jKe0tipIa6ExBaxw
 REACT_APP_AXIOS_BASE_API_URL=https://api.romeonline.io/
 REACT_APP_REPORTS_SERVER_URL=https://reports.romeonline.io
 REACT_APP_SPLIT_API=et9pjkik6bn67he5evpmpr1agoo7gactphgk
-INSTANCE=ROME
+REACT_APP_INSTANCE=ROME

client/.env.test.imex

@@ -12,4 +12,4 @@ REACT_APP_AXIOS_BASE_API_URL=https://api.test.imex.online/
 REACT_APP_REPORTS_SERVER_URL=https://reports3.test.imex.online
 REACT_APP_IS_TEST=true
 REACT_APP_SPLIT_API=ts615lqgnmk84thn72uk18uu5pgce6e0l4rc
-INSTANCE=IMEX
+REACT_APP_INSTANCE=IMEX

client/.env.test.promanager

@@ -12,4 +12,4 @@ REACT_APP_AXIOS_BASE_API_URL=https://api.test.imex.online/
 REACT_APP_REPORTS_SERVER_URL=https://reports3.test.imex.online
 REACT_APP_IS_TEST=true
 REACT_APP_SPLIT_API=ts615lqgnmk84thn72uk18uu5pgce6e0l4rc
-INSTANCE=PROMANAGER
+REACT_APP_INSTANCE=PROMANAGER

client/.env.test.rome

@@ -12,4 +12,4 @@ REACT_APP_AXIOS_BASE_API_URL=https://api.test.romeonline.io/
 REACT_APP_REPORTS_SERVER_URL=https://reports.test.romeonline.io
 REACT_APP_IS_TEST=true
 REACT_APP_SPLIT_API=ts615lqgnmk84thn72uk18uu5pgce6e0l4rc
-INSTANCE=ROME
+REACT_APP_INSTANCE=ROME

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

@@ -1,9 +1,9 @@
 import dayjs from "../../utils/day";
 import React from "react";
-import {useTranslation} from "react-i18next";
+import { useTranslation } from "react-i18next";
-import {connect} from "react-redux";
+import { connect } from "react-redux";
-import {createStructuredSelector} from "reselect";
+import { createStructuredSelector } from "reselect";
-import {selectBodyshop} from "../../redux/user/user.selectors";
+import { selectBodyshop } from "../../redux/user/user.selectors";
 import AlertComponent from "../alert/alert.component";
 
 const mapStateToProps = createStructuredSelector({
@@ -16,10 +16,10 @@ function FeatureWrapper({
   noauth,
   children,
   ...restProps
-                        }) {
+}) {
-    const {t} = useTranslation();
+  const { t } = useTranslation();
 
-    if (HasFeatureAccess({featureName, bodyshop})) return children;
+  if (HasFeatureAccess({ featureName, bodyshop })) return children;
 
   return (
     noauth || (
@@ -31,10 +31,10 @@ function FeatureWrapper({
   );
 }
 
-export function HasFeatureAccess({featureName, bodyshop}) {
+export function HasFeatureAccess({ featureName, bodyshop }) {
   return (
-        bodyshop.features.allAccess ||
+    bodyshop?.features.allAccess ||
-        dayjs(bodyshop.features[featureName]).isAfter(dayjs())
+    dayjs(bodyshop?.features[featureName]).isAfter(dayjs())
   );
 }
 

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

@@ -24,26 +24,30 @@ import Icon, {
   ToolFilled,
   UnorderedListOutlined,
   UserOutlined,
-} from "@ant-design/icons";
+} from '@ant-design/icons';
-import {useSplitTreatments} from "@splitsoftware/splitio-react";
+import { useSplitTreatments } from '@splitsoftware/splitio-react';
-import {Layout, Menu, Switch, Tooltip} from "antd";
+import { Layout, Menu, Switch, Tooltip } from 'antd';
-import React, {useEffect, useState} from "react";
+import React, { useEffect, useState } from 'react';
-import {useTranslation} from "react-i18next";
+import { useTranslation } from 'react-i18next';
-import {BsKanban} from "react-icons/bs";
+import { BsKanban } from 'react-icons/bs';
-import {FaCalendarAlt, FaCarCrash, FaCreditCard, FaFileInvoiceDollar,} from "react-icons/fa";
+import { FaCalendarAlt, FaCarCrash, FaCreditCard, FaFileInvoiceDollar } from 'react-icons/fa';
-import {GiPayMoney, GiPlayerTime, GiSettingsKnobs} from "react-icons/gi";
+import { GiPayMoney, GiPlayerTime, GiSettingsKnobs } from 'react-icons/gi';
-import {IoBusinessOutline} from "react-icons/io5";
+import { IoBusinessOutline } from 'react-icons/io5';
-import {RiSurveyLine} from "react-icons/ri";
+import { RiSurveyLine } from 'react-icons/ri';
-import {connect} from "react-redux";
+import { connect } from 'react-redux';
-import {Link} from "react-router-dom";
+import { Link } from 'react-router-dom';
-import {createStructuredSelector} from "reselect";
+import { createStructuredSelector } from 'reselect';
-import {selectRecentItems, selectSelectedHeader,} from "../../redux/application/application.selectors";
+import {
-import {setModalContext} from "../../redux/modals/modals.actions";
+  selectRecentItems,
-import {signOutStart} from "../../redux/user/user.actions";
+  selectSelectedHeader,
-import {selectBodyshop, selectCurrentUser,} from "../../redux/user/user.selectors";
+} from '../../redux/application/application.selectors';
-import {FiLogOut} from "react-icons/fi";
+import { setModalContext } from '../../redux/modals/modals.actions';
-import {checkBeta, handleBeta, setBeta} from "../../utils/betaHandler";
+import { signOutStart } from '../../redux/user/user.actions';
-import InstanceRenderManager from "../../utils/instanceRenderMgr";
+import { selectBodyshop, selectCurrentUser } from '../../redux/user/user.selectors';
+import { FiLogOut } from 'react-icons/fi';
+import { checkBeta, handleBeta, setBeta } from '../../utils/betaHandler';
+import InstanceRenderManager from '../../utils/instanceRenderMgr';
+import { HasFeatureAccess } from '../feature-wrapper/feature-wrapper.component';
 
 const mapStateToProps = createStructuredSelector({
   currentUser: selectCurrentUser,
@@ -54,16 +58,15 @@ const mapStateToProps = createStructuredSelector({
 
 const mapDispatchToProps = (dispatch) => ({
   setBillEnterContext: (context) =>
-        dispatch(setModalContext({context: context, modal: "billEnter"})),
+    dispatch(setModalContext({ context: context, modal: 'billEnter' })),
   setTimeTicketContext: (context) =>
-        dispatch(setModalContext({context: context, modal: "timeTicket"})),
+    dispatch(setModalContext({ context: context, modal: 'timeTicket' })),
-    setPaymentContext: (context) =>
+  setPaymentContext: (context) => dispatch(setModalContext({ context: context, modal: 'payment' })),
-        dispatch(setModalContext({context: context, modal: "payment"})),
   setReportCenterContext: (context) =>
-        dispatch(setModalContext({context: context, modal: "reportCenter"})),
+    dispatch(setModalContext({ context: context, modal: 'reportCenter' })),
   signOutStart: () => dispatch(signOutStart()),
   setCardPaymentContext: (context) =>
-        dispatch(setModalContext({context: context, modal: "cardPayment"})),
+    dispatch(setModalContext({ context: context, modal: 'cardPayment' })),
 });
 
 function Header({
@@ -77,73 +80,90 @@ function Header({
   setPaymentContext,
   setReportCenterContext,
   recentItems,
-                    setCardPaymentContext
+  setCardPaymentContext,
-                }) {
+}) {
-
+  const {
-    const {treatments: {ImEXPay, DmsAp, Simple_Inventory}} = useSplitTreatments({
+    treatments: { ImEXPay, DmsAp, Simple_Inventory },
+  } = useSplitTreatments({
     attributes: {},
-        names: ["ImEXPay", "DmsAp", "Simple_Inventory"],
+    names: ['ImEXPay', 'DmsAp', 'Simple_Inventory'],
     splitKey: bodyshop && bodyshop.imexshopid,
   });
   const [betaSwitch, setBetaSwitch] = useState(false);
-    const {t} = useTranslation();
+  const { t } = useTranslation();
 
   useEffect(() => {
     const isBeta = checkBeta();
     setBetaSwitch(isBeta);
   }, []);
 
-
   const betaSwitchChange = (checked) => {
     setBeta(checked);
     setBetaSwitch(checked);
     handleBeta();
-    }
+  };
 
-    const accountingChildren = [
+  const accountingChildren = [];
+
+  if (
+    InstanceRenderManager({
+      imex: true,
+      rome: true,
+      promanager: HasFeatureAccess({ featureName: 'bills', bodyshop }),
+    })
+  ) {
+    accountingChildren.push([
       {
         key: 'bills',
-            icon: <Icon component={FaFileInvoiceDollar}/>,
+        icon: <Icon component={FaFileInvoiceDollar} />,
-            label: (<Link to="/manage/bills">{t("menus.header.bills")}</Link>)
+        label: <Link to="/manage/bills">{t('menus.header.bills')}</Link>,
       },
       {
         key: 'enterbills',
-            icon: <Icon component={GiPayMoney}/>,
+        icon: <Icon component={GiPayMoney} />,
-            label: t("menus.header.enterbills"),
+        label: t('menus.header.enterbills'),
         onClick: () => {
           setBillEnterContext({
             actions: {},
             context: {},
           });
-            }
         },
-    ];
+      },
+    ]);
+  }
 
-    if (Simple_Inventory.treatment === "on") {
+  if (Simple_Inventory.treatment === 'on') {
     accountingChildren.push(
       {
         type: 'divider',
       },
       {
         key: 'inventory',
-                icon: <Icon component={FaFileInvoiceDollar}/>,
+        icon: <Icon component={FaFileInvoiceDollar} />,
-                label: (<Link to="/manage/inventory">{t("menus.header.inventory")}</Link>)
+        label: <Link to="/manage/inventory">{t('menus.header.inventory')}</Link>,
       }
     );
   }
+  if (
+    InstanceRenderManager({
+      imex: true,
+      rome: true,
+      promanager: HasFeatureAccess({ featureName: 'payments', bodyshop }),
+    })
+  ) {
     accountingChildren.push(
       {
-            type: 'divider'
+        type: 'divider',
       },
       {
         key: 'allpayments',
-            icon: <BankFilled/>,
+        icon: <BankFilled />,
-            label: (<Link to="/manage/payments">{t("menus.header.allpayments")}</Link>)
+        label: <Link to="/manage/payments">{t('menus.header.allpayments')}</Link>,
       },
       {
         key: 'enterpayments',
-            icon: <Icon component={FaCreditCard}/>,
+        icon: <Icon component={FaCreditCard} />,
-            label: t("menus.header.enterpayment"),
+        label: t('menus.header.enterpayment'),
         onClick: () => {
           setPaymentContext({
             actions: {},
@@ -152,12 +172,13 @@ function Header({
         },
       }
     );
+  }
 
-    if (ImEXPay.treatment === "on") {
+  if (ImEXPay.treatment === 'on') {
     accountingChildren.push({
       key: 'entercardpayments',
-            icon: <Icon component={FaCreditCard}/>,
+      icon: <Icon component={FaCreditCard} />,
-            label: t("menus.header.entercardpayment"),
+      label: t('menus.header.entercardpayment'),
       onClick: () => {
         setCardPaymentContext({
           actions: {},
@@ -167,37 +188,42 @@ function Header({
     });
   }
 
+  if (
+    InstanceRenderManager({
+      imex: true,
+      rome: true,
+      promanager: HasFeatureAccess({ featureName: 'timetickets', bodyshop }),
+    })
+  ) {
     accountingChildren.push(
       {
         type: 'divider',
       },
       {
         key: 'timetickets',
-            icon: <FieldTimeOutlined/>,
+        icon: <FieldTimeOutlined />,
-            label: (<Link to="/manage/timetickets">{t("menus.header.timetickets")}</Link>)
+        label: <Link to="/manage/timetickets">{t('menus.header.timetickets')}</Link>,
-        });
+      }
+    );
 
     if (bodyshop?.md_tasks_presets?.use_approvals) {
       accountingChildren.push({
         key: 'ttapprovals',
-            icon: <FieldTimeOutlined/>,
+        icon: <FieldTimeOutlined />,
-            label:
+        label: <Link to="/manage/ttapprovals">{t('menus.header.ttapprovals')}</Link>,
-                <Link to="/manage/ttapprovals">
-                    {t("menus.header.ttapprovals")}
-                </Link>
       });
     }
-
+    accountingChildren.push(
-    accountingChildren.push({
+      {
         key: 'entertimetickets',
-            icon: <Icon component={GiPlayerTime}/>,
+        icon: <Icon component={GiPlayerTime} />,
-            label: t("menus.header.entertimeticket"),
+        label: t('menus.header.entertimeticket'),
         onClick: () => {
           setTimeTicketContext({
             actions: {},
             context: {
               created_by: currentUser.displayName
-                            ? currentUser.email.concat(" | ", currentUser.displayName)
+                ? currentUser.email.concat(' | ', currentUser.displayName)
                 : currentUser.email,
             },
           });
@@ -207,237 +233,287 @@ function Header({
         type: 'divider',
       }
     );
+  }
 
   const accountingExportChildren = [
     {
       key: 'receivables',
-            label: (<Link to="/manage/accounting/receivables">{t("menus.header.accounting-receivables")}</Link>)
+      label: (
+        <Link to="/manage/accounting/receivables">{t('menus.header.accounting-receivables')}</Link>
+      ),
     },
-    ]
+  ];
 
-    if (!((bodyshop && bodyshop.cdk_dealerid) || (bodyshop && bodyshop.pbs_serialnumber)) || DmsAp.treatment === "on") {
+  if (
+    !((bodyshop && bodyshop.cdk_dealerid) || (bodyshop && bodyshop.pbs_serialnumber)) ||
+    DmsAp.treatment === 'on'
+  ) {
     accountingExportChildren.push({
       key: 'payables',
-            label: (<Link to="/manage/accounting/payables">{t("menus.header.accounting-payables")}</Link>)
+      label: <Link to="/manage/accounting/payables">{t('menus.header.accounting-payables')}</Link>,
     });
   }
 
-    if (!(
+  if (!((bodyshop && bodyshop.cdk_dealerid) || (bodyshop && bodyshop.pbs_serialnumber))) {
-        (bodyshop && bodyshop.cdk_dealerid) ||
-        (bodyshop && bodyshop.pbs_serialnumber)
-    )) {
     accountingExportChildren.push({
       key: 'payments',
-            label: (<Link to="/manage/accounting/payments">{t("menus.header.accounting-payments")}</Link>)
+      label: <Link to="/manage/accounting/payments">{t('menus.header.accounting-payments')}</Link>,
     });
   }
 
-    accountingExportChildren.push({
+  accountingExportChildren.push(
-        type: 'divider',
-    }, {
-        key: 'exportlogs',
-        label: (<Link to="/manage/accounting/exportlogs">{t("menus.header.export-logs")}</Link>)
-    });
-
-    accountingChildren.push(
     {
-            key: 'accountingexport',
+      type: 'divider',
-            icon: <ExportOutlined/>,
-            label: t("menus.header.export"),
-            children: accountingExportChildren
     },
+    {
+      key: 'exportlogs',
+      label: <Link to="/manage/accounting/exportlogs">{t('menus.header.export-logs')}</Link>,
+    }
   );
 
+  if (
+    InstanceRenderManager({
+      imex: true,
+      rome: true,
+      promanager: HasFeatureAccess({ featureName: 'export', bodyshop }),
+    })
+  ) {
+    accountingChildren.push({
+      key: 'accountingexport',
+      icon: <ExportOutlined />,
+      label: t('menus.header.export'),
+      children: accountingExportChildren,
+    });
+  }
+
   const menuItems = [
     {
       key: 'home',
-            icon: <HomeFilled/>,
+      icon: <HomeFilled />,
-            label: (<Link to="/manage/">{t("menus.header.home")}</Link>)
+      label: <Link to="/manage/">{t('menus.header.home')}</Link>,
     },
     {
       key: 'schedule',
-            icon: <Icon component={FaCalendarAlt}/>,
+      icon: <Icon component={FaCalendarAlt} />,
-            label: (<Link to="/manage/schedule">{t("menus.header.schedule")}</Link>)
+      label: <Link to="/manage/schedule">{t('menus.header.schedule')}</Link>,
     },
     {
       key: 'jobssubmenu',
-            icon: <Icon component={FaCarCrash}/>,
+      icon: <Icon component={FaCarCrash} />,
-            label: t("menus.header.jobs"),
+      label: t('menus.header.jobs'),
       children: [
         {
           key: 'activejobs',
-                    icon: <FileFilled/>,
+          icon: <FileFilled />,
-                    label: (<Link to="/manage/jobs">{t("menus.header.activejobs")}</Link>)
+          label: <Link to="/manage/jobs">{t('menus.header.activejobs')}</Link>,
         },
         {
           key: 'readyjobs',
-                    icon: <CheckCircleOutlined/>,
+          icon: <CheckCircleOutlined />,
-                    label: (<Link to="/manage/jobs/ready">{t("menus.header.readyjobs")}</Link>)
+          label: <Link to="/manage/jobs/ready">{t('menus.header.readyjobs')}</Link>,
         },
         {
           key: 'parts-queue',
-                    icon: <ToolFilled/>,
+          icon: <ToolFilled />,
-                    label: (<Link to="/manage/partsqueue">{t("menus.header.parts-queue")}</Link>)
+          label: <Link to="/manage/partsqueue">{t('menus.header.parts-queue')}</Link>,
         },
         {
           key: 'availablejobs',
-                    icon: <ImportOutlined/>,
+          icon: <ImportOutlined />,
-                    label: (<Link to="/manage/available">{t("menus.header.availablejobs")}</Link>)
+          label: <Link to="/manage/available">{t('menus.header.availablejobs')}</Link>,
         },
         {
           key: 'newjob',
-                    icon: <FileAddOutlined/>,
+          icon: <FileAddOutlined />,
-                    label: (<Link to="/manage/jobs/new">{t("menus.header.newjob")}</Link>)
+          label: <Link to="/manage/jobs/new">{t('menus.header.newjob')}</Link>,
         },
         {
           type: 'divider',
         },
         {
           key: 'alljobs',
-                    icon: <UnorderedListOutlined/>,
+          icon: <UnorderedListOutlined />,
-                    label: (<Link to="/manage/jobs/all">{t("menus.header.alljobs")}</Link>)
+          label: <Link to="/manage/jobs/all">{t('menus.header.alljobs')}</Link>,
         },
         {
           type: 'divider',
         },
         {
           key: 'productionlist',
-                    icon: <ScheduleOutlined/>,
+          icon: <ScheduleOutlined />,
-                    label: (<Link to="/manage/production/list">{t("menus.header.productionlist")}</Link>)
+          label: <Link to="/manage/production/list">{t('menus.header.productionlist')}</Link>,
         },
         {
           key: 'productionboard',
-                    icon: <Icon component={BsKanban}/>,
+          icon: <Icon component={BsKanban} />,
-                    label: (<Link to="/manage/production/board">{t("menus.header.productionboard")}</Link>)
+          label: <Link to="/manage/production/board">{t('menus.header.productionboard')}</Link>,
         },
         {
           type: 'divider',
         },
         {
           key: 'scoreboard',
-                    icon: <LineChartOutlined/>,
+          icon: <LineChartOutlined />,
-                    label: (<Link to="/manage/scoreboard">{t("menus.header.scoreboard")}</Link>)
+          label: <Link to="/manage/scoreboard">{t('menus.header.scoreboard')}</Link>,
         },
-            ]
+      ],
     },
     {
       key: 'customers',
-            icon: <UserOutlined/>,
+      icon: <UserOutlined />,
-            label: t("menus.header.customers"),
+      label: t('menus.header.customers'),
       children: [
         {
           key: 'owners',
-                    icon: <TeamOutlined/>,
+          icon: <TeamOutlined />,
-                    label: (<Link to="/manage/owners">{t("menus.header.owners")}</Link>)
+          label: <Link to="/manage/owners">{t('menus.header.owners')}</Link>,
         },
         {
           key: 'vehicles',
-                    icon: <CarFilled/>,
+          icon: <CarFilled />,
-                    label: (<Link to="/manage/vehicles">{t("menus.header.vehicles")}</Link>)
+          label: <Link to="/manage/vehicles">{t('menus.header.vehicles')}</Link>,
         },
-            ]
+      ],
     },
+    ...(InstanceRenderManager({
+      imex: true,
+      rome: true,
+      promanager: HasFeatureAccess({ featureName: 'courtesycards', bodyshop }),
+    })
+      ? [
           {
             key: 'ccs',
-            icon: <CarFilled/>,
+            icon: <CarFilled />,
-            label: t("menus.header.courtesycars"),
+            label: t('menus.header.courtesycars'),
             children: [
               {
                 key: 'courtesycarsall',
-                    icon: <CarFilled/>,
+                icon: <CarFilled />,
-                    label: (<Link to="/manage/courtesycars">{t("menus.header.courtesycars-all")}</Link>)
+                label: <Link to="/manage/courtesycars">{t('menus.header.courtesycars-all')}</Link>,
               },
               {
                 key: 'contracts',
-                    icon: <FileFilled/>,
+                icon: <FileFilled />,
-                    label: (<Link to="/manage/courtesycars/contracts">{t("menus.header.courtesycars-contracts")}</Link>)
+                label: (
+                  <Link to="/manage/courtesycars/contracts">
+                    {t('menus.header.courtesycars-contracts')}
+                  </Link>
+                ),
               },
               {
                 key: 'newcontract',
-                    icon: <FileAddFilled/>,
+                icon: <FileAddFilled />,
-                    label: (<Link
+                label: (
-                        to="/manage/courtesycars/contracts/new">{t("menus.header.courtesycars-newcontract")}</Link>)
+                  <Link to="/manage/courtesycars/contracts/new">
+                    {t('menus.header.courtesycars-newcontract')}
+                  </Link>
+                ),
+              },
+            ],
           },
         ]
-        },
+      : []),
+
+    ...(accountingChildren.length > 0
+      ? [
           {
             key: 'accounting',
-            icon: <DollarCircleFilled/>,
+            icon: <DollarCircleFilled />,
-            label: t("menus.header.accounting"),
+            label: t('menus.header.accounting'),
             children: accountingChildren,
           },
+        ]
+      : []),
     {
       key: 'phonebook',
-            icon: <PhoneOutlined/>,
+      icon: <PhoneOutlined />,
-            label: (<Link to="/manage/phonebook">{t("menus.header.phonebook")}</Link>)
+      label: <Link to="/manage/phonebook">{t('menus.header.phonebook')}</Link>,
     },
+    ...(InstanceRenderManager({
+      imex: true,
+      rome: true,
+      promanager: HasFeatureAccess({ featureName: 'media', bodyshop }),
+    })
+      ? [
           {
             key: 'temporarydocs',
-            icon: <PaperClipOutlined/>,
+            icon: <PaperClipOutlined />,
-            label: (<Link to="/manage/temporarydocs">{t("menus.header.temporarydocs")}</Link>)
+            label: <Link to="/manage/temporarydocs">{t('menus.header.temporarydocs')}</Link>,
           },
+        ]
+      : []),
     {
       key: 'shopsubmenu',
-            icon: <SettingOutlined/>,
+      icon: <SettingOutlined />,
-            label: t("menus.header.shop"),
+      label: t('menus.header.shop'),
       children: [
         {
           key: 'shop',
-                    icon: <Icon component={GiSettingsKnobs}/>,
+          icon: <Icon component={GiSettingsKnobs} />,
-                    label: (<Link to="/manage/shop?tab=info">{t("menus.header.shop_config")}</Link>)
+          label: <Link to="/manage/shop?tab=info">{t('menus.header.shop_config')}</Link>,
         },
         {
           key: 'dashboard',
-                    icon: <DashboardFilled/>,
+          icon: <DashboardFilled />,
-                    label: (<Link to="/manage/dashboard">{t("menus.header.dashboard")}</Link>)
+          label: <Link to="/manage/dashboard">{t('menus.header.dashboard')}</Link>,
         },
         {
           key: 'reportcenter',
-                    icon: <BarChartOutlined/>,
+          icon: <BarChartOutlined />,
-                    label: t("menus.header.reportcenter"),
+          label: t('menus.header.reportcenter'),
           onClick: () => {
             setReportCenterContext({
               actions: {},
               context: {},
             });
-                    }
+          },
         },
         {
           key: 'shop-vendors',
-                    icon: <Icon component={IoBusinessOutline}/>,
+          icon: <Icon component={IoBusinessOutline} />,
-                    label: (<Link to="/manage/shop/vendors">{t("menus.header.shop_vendors")}</Link>)
+          label: <Link to="/manage/shop/vendors">{t('menus.header.shop_vendors')}</Link>,
         },
+        ...(InstanceRenderManager({
+          imex: true,
+          rome: true,
+          promanager: HasFeatureAccess({ featureName: 'csi', bodyshop }),
+        })
+          ? [
               {
                 key: 'shop-csi',
-                    icon: <Icon component={RiSurveyLine}/>,
+                icon: <Icon component={RiSurveyLine} />,
-                    label: (<Link to="/manage/shop/csi">{t("menus.header.shop_csi")}</Link>)
+                label: <Link to="/manage/shop/csi">{t('menus.header.shop_csi')}</Link>,
               },
             ]
+          : []),
+      ],
     },
     {
       key: 'user',
-            label: (
+      label: currentUser.displayName || currentUser.email || t('general.labels.unknown'),
-                currentUser.displayName ||
-                currentUser.email ||
-                t("general.labels.unknown")
-            ),
       children: [
         {
           key: 'signout',
-                    icon: <Icon component={FiLogOut}/>,
+          icon: <Icon component={FiLogOut} />,
           danger: true,
-                    label: t("user.actions.signout"),
+          label: t('user.actions.signout'),
-                    onClick: () => signOutStart()
+          onClick: () => signOutStart(),
         },
         {
           key: 'help',
-                    icon: <Icon component={QuestionCircleFilled}/>,
+          icon: <Icon component={QuestionCircleFilled} />,
-                    label: t("menus.header.help"),
+          label: t('menus.header.help'),
           onClick: () => {
-                        window.open(InstanceRenderManager({imex:"https://help.imex.online/",rome:  "https://rometech.com//", promanager:"https://web-est.com" })
+            window.open(
+              InstanceRenderManager({
+                imex: 'https://help.imex.online/',
+                rome: 'https://rometech.com//',
+                promanager: 'https://web-est.com',
+              }),
 
-                            , "_blank");
+              '_blank'
-                    }
+            );
+          },
         },
         // {
         //     key: 'rescue',
@@ -447,15 +523,24 @@ function Header({
         //         window.open("https://imexrescue.com/", "_blank");
         //     }
         // },
+
+        ...(InstanceRenderManager({
+          imex: true,
+          rome: true,
+          promanager: HasFeatureAccess({ featureName: 'timetickets', bodyshop }),
+        })
+          ? [
               {
                 key: 'shiftclock',
-                    icon: <Icon component={GiPlayerTime}/>,
+                icon: <Icon component={GiPlayerTime} />,
-                    label: (<Link to="/manage/shiftclock">{t("menus.header.shiftclock")}</Link>)
+                label: <Link to="/manage/shiftclock">{t('menus.header.shiftclock')}</Link>,
               },
+            ]
+          : []),
         {
           key: 'profile',
-                    icon: <UserOutlined/>,
+          icon: <UserOutlined />,
-                    label: (<Link to="/manage/profile">{t("menus.currentuser.profile")}</Link>)
+          label: <Link to="/manage/profile">{t('menus.currentuser.profile')}</Link>,
         },
         // {
         //   key: 'langselecter',
@@ -484,46 +569,45 @@ function Header({
         //     },
         //   ]
         // },
-            ]
+      ],
     },
     {
       key: 'recent',
-            icon: <ClockCircleFilled/>,
+      icon: <ClockCircleFilled />,
       children: recentItems.map((i, idx) => ({
         key: idx,
-                label: (<Link to={i.url}>{i.label}</Link>)
+        label: <Link to={i.url}>{i.label}</Link>,
-
       })),
-        }
+    },
   ];
 
-
   menuItems.push({
     key: 'beta-switch',
-        style: {marginLeft: 'auto'},
+    style: { marginLeft: 'auto' },
     label: (
-            <Tooltip title={`A more modern ${InstanceRenderManager({imex: 'ImEX Online', rome: "Rome Online"})} is ready for you to try! You can switch back at any time.`}>
+      <Tooltip
-                <InfoCircleOutlined/>
+        title={`A more modern ${InstanceRenderManager({
-                <span style={{marginRight: 8}}>Try the new app</span>
+          imex: 'ImEX Online',
-                <Switch
+          rome: 'Rome Online',
-                    checked={betaSwitch}
+        })} is ready for you to try! You can switch back at any time.`}
-                    onChange={betaSwitchChange}
+      >
-                />
+        <InfoCircleOutlined />
+        <span style={{ marginRight: 8 }}>Try the new app</span>
+        <Switch checked={betaSwitch} onChange={betaSwitchChange} />
       </Tooltip>
-        )
+    ),
   });
 
   return (
     <Layout.Header>
       <Menu
         mode="horizontal"
-                theme={"dark"}
+        theme={'dark'}
         selectedKeys={[selectedHeader]}
         onClick={handleMenuClick}
         subMenuCloseDelay={0.3}
         items={menuItems}
       />
-
     </Layout.Header>
   );
 }

client/src/components/job-detail-lines/job-lines.component.jsx

@@ -41,6 +41,7 @@ import JoblineTeamAssignment from "../job-line-team-assignment/job-line-team-ass
 import JobLineDispatchButton from "../job-line-dispatch-button/job-line-dispatch-button.component";
 import JobLineBulkAssignComponent from "../job-line-bulk-assign/job-line-bulk-assign.component";
 import {useSplitTreatments} from "@splitsoftware/splitio-react";
+import { HasFeatureAccess } from "../feature-wrapper/feature-wrapper.component";
 
 const mapStateToProps = createStructuredSelector({
     bodyshop: selectBodyshop,
@@ -318,13 +319,13 @@ export function JobLinesComponent({
                 <JobLineLocationPopup jobline={record} disabled={jobRO}/>
             ),
         },
-        {
+        ...HasFeatureAccess({featureName: "bills"}) ? [    {
             title: t("joblines.labels.billref"),
             dataIndex: "billref",
             key: "billref",
             render: (text, record) => <JobLinesBillRefernece jobline={record}/>,
             responsive: ["md"],
-        },
+        },] : [],
         {
             title: t("joblines.fields.status"),
             dataIndex: "status",

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

@@ -7,6 +7,7 @@ import JobBillsTotal from "../job-bills-total/job-bills-total.component";
 import PartsOrderListTableComponent from "../parts-order-list-table/parts-order-list-table.component";
 import PartsOrderModal from "../parts-order-modal/parts-order-modal.container";
 import PartsDispatchTable from "../parts-dispatch-table/parts-dispatch-table.component";
+import FeatureWrapperComponent from "../feature-wrapper/feature-wrapper.component";
 
 export default function JobsDetailPliComponent({
                                                    job,
@@ -23,6 +24,7 @@ export default function JobsDetailPliComponent({
             ) : null}
             <BillDetailEditcontainer/>
             <Row gutter={[16, 16]}>
+              <FeatureWrapperComponent featureName='bills' noauth={() => null}>
                 <Col span={24}>
                     <JobBillsTotal
                         bills={billsQuery.data ? billsQuery.data.bills : []}
@@ -31,6 +33,7 @@ export default function JobsDetailPliComponent({
                         jobTotals={job.job_totals}
                     />
                 </Col>
+              </FeatureWrapperComponent>  
                 <Col span={24}>
                     <PartsOrderListTableComponent
                         job={job}
@@ -38,6 +41,7 @@ export default function JobsDetailPliComponent({
                         billsQuery={billsQuery}
                     />
                 </Col>
+              <FeatureWrapperComponent featureName='bills' noauth={() => null}>
                 <Col span={24}>
                     <BillsListTable
                         job={job}
@@ -45,6 +49,7 @@ export default function JobsDetailPliComponent({
                         billsQuery={billsQuery}
                     />
                 </Col>
+              </FeatureWrapperComponent>
                 <Col span={24}>
                     <PartsDispatchTable
                         job={job}

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

@@ -26,6 +26,7 @@ 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 FeatureWrapperComponent from "../feature-wrapper/feature-wrapper.component";
 
 const mapStateToProps = createStructuredSelector({
     jobRO: selectJobReadOnly,
@@ -86,6 +87,7 @@ export function PartsOrderListTableComponent({
                     <EyeFilled/>
                 </Button>
             )}
+     
             <Button
                 disabled={
                     jobRO ||
@@ -115,6 +117,7 @@ export function PartsOrderListTableComponent({
             >
                 {t("parts_orders.actions.receive")}
             </Button>
+      
             <Popconfirm
                 title={t("parts_orders.labels.confirmdelete")}
                 disabled={jobRO}
@@ -141,6 +144,7 @@ export function PartsOrderListTableComponent({
                     <DeleteFilled/>
                 </Button>
             </Popconfirm>
+            <FeatureWrapperComponent featureName='bills' noauth={() => null}>
             <Button
                 disabled={
                     (jobRO ? !record.return : jobRO) ||
@@ -184,6 +188,7 @@ export function PartsOrderListTableComponent({
             >
                 {t("parts_orders.actions.receivebill")}
             </Button>
+            </FeatureWrapperComponent>
             <PrintWrapper
                 templateObject={{
                     name: record.return

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

@@ -16,6 +16,7 @@ import LoadingSkeleton from "../loading-skeleton/loading-skeleton.component";
 import OwnerNameDisplay from "../owner-name-display/owner-name-display.component";
 import ScheduleBlockDay from "../schedule-block-day/schedule-block-day.component";
 import ScheduleCalendarHeaderGraph from "./schedule-calendar-header-graph.component";
+import InstanceRenderMgr from '../../utils/instanceRenderMgr'
 
 const mapStateToProps = createStructuredSelector({
     bodyshop: selectBodyshop,
@@ -206,9 +207,13 @@ export function ScheduleCalendarHeaderComponent({
           date={date}
           refetch={refetch}
         >
-                <div style={{color: isShopOpen(date) ? "" : "tomato"}}>
+          <div style={{ color: isShopOpen(date) ? "" : "tomato" }}>
             {label}
-                    {calculating ? <LoadingSkeleton/> : LoadComponent}
+            {InstanceRenderMgr({
+              imex: calculating ? <LoadingSkeleton /> : LoadComponent,
+              rome: "USE_IMEX",
+              promanager: <></>,
+            })}
           </div>
         </ScheduleBlockDay>
       </div>

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

@@ -1,18 +1,19 @@
 import dayjs from "../../utils/day";
 import queryString from "query-string";
 import React from "react";
-import {Calendar, dayjsLocalizer} from "react-big-calendar";
+import { Calendar, dayjsLocalizer } from "react-big-calendar";
-import {connect} from "react-redux";
+import { connect } from "react-redux";
-import {Link, useLocation, useNavigate} from "react-router-dom";
+import { Link, useLocation, useNavigate } from "react-router-dom";
-import {createStructuredSelector} from "reselect";
+import { createStructuredSelector } from "reselect";
-import {selectBodyshop} from "../../redux/user/user.selectors";
+import { selectBodyshop } from "../../redux/user/user.selectors";
 import Event from "../job-at-change/schedule-event.container";
 import HeaderComponent from "./schedule-calendar-header.component";
 import "./schedule-calendar.styles.scss";
 import JobDetailCards from "../job-detail-cards/job-detail-cards.component";
-import {selectProblemJobs} from "../../redux/application/application.selectors";
+import { selectProblemJobs } from "../../redux/application/application.selectors";
-import {Alert, Collapse, Space} from "antd";
+import { Alert, Collapse, Space } from "antd";
-import {Trans, useTranslation} from "react-i18next";
+import { Trans, useTranslation } from "react-i18next";
+import InstanceRenderManager from "../../utils/instanceRenderMgr";
 
 const mapStateToProps = createStructuredSelector({
   bodyshop: selectBodyshop,
@@ -29,10 +30,10 @@ export function ScheduleCalendarWrapperComponent({
   setDateRangeCallback,
   date,
   ...otherProps
-                                                 }) {
+}) {
   const search = queryString.parse(useLocation().search);
   const history = useNavigate();
-    const {t} = useTranslation();
+  const { t } = useTranslation();
   const handleEventPropStyles = (event, start, end, isSelected) => {
     return {
       ...(event.color && !((search.view || defaultView) === "agenda")
@@ -53,18 +54,20 @@ export function ScheduleCalendarWrapperComponent({
 
   return (
     <>
-            <JobDetailCards/>
+      <JobDetailCards />
-            {problemJobs && problemJobs.length > 2 ? (
+      {InstanceRenderManager({
-                <Collapse style={{marginBottom: '5px'}}>
+        imex:
+          problemJobs && problemJobs.length > 2 ? (
+            <Collapse style={{ marginBottom: "5px" }}>
               <Collapse.Panel
                 key="1"
                 header={
-                            <span style={{color: "tomato"}}>
+                  <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}
@@ -87,13 +90,14 @@ export function ScheduleCalendarWrapperComponent({
                     />
                   ))}
                 </Space>
-
               </Collapse.Panel>
             </Collapse>
           ) : (
-                <Space direction="vertical" style={{width: '100%', marginBottom: '5px'}}>
+            <Space
-                    {
+              direction="vertical"
-                        problemJobs.map((problem) => (
+              style={{ width: "100%", marginBottom: "5px" }}
+            >
+              {problemJobs.map((problem) => (
                 <Alert
                   key={problem.id}
                   type="error"
@@ -101,7 +105,10 @@ export function ScheduleCalendarWrapperComponent({
                     <Trans
                       i18nKey="appointments.labels.dataconsistency"
                       components={[
-                                            <Link to={`/manage/jobs/${problem.id}`} target="_blank"/>,
+                        <Link
+                          to={`/manage/jobs/${problem.id}`}
+                          target="_blank"
+                        />,
                       ]}
                       values={{
                         ro_number: problem.ro_number,
@@ -110,10 +117,13 @@ export function ScheduleCalendarWrapperComponent({
                     />
                   }
                 />
-                        ))
+              ))}
-                    }
             </Space>
-            )}
+          ),
+
+        rome: "USE_IMEX",
+        promanager: <span />,
+      })}
 
       <Calendar
         events={data}
@@ -121,14 +131,14 @@ export function ScheduleCalendarWrapperComponent({
         date={selectedDate}
         onNavigate={(date, view, action) => {
           search.date = date.toISOString().substr(0, 10);
-                    history({search: queryString.stringify(search)});
+          history({ search: queryString.stringify(search) });
         }}
         onRangeChange={(start, end) => {
-                    if (setDateRangeCallback) setDateRangeCallback({start, end});
+          if (setDateRangeCallback) setDateRangeCallback({ start, end });
         }}
         onView={(view) => {
           search.view = view;
-                    history({search: queryString.stringify(search)});
+          history({ search: queryString.stringify(search) });
         }}
         step={15}
         // timeslots={1}
@@ -147,9 +157,9 @@ export function ScheduleCalendarWrapperComponent({
         eventPropGetter={handleEventPropStyles}
         components={{
           event: (e) =>
-                        Event({bodyshop: bodyshop, event: e.event, refetch: refetch}),
+            Event({ bodyshop: bodyshop, event: e.event, refetch: refetch }),
           header: (p) => (
-                        <HeaderComponent {...p} events={data} refetch={refetch}/>
+            <HeaderComponent {...p} events={data} refetch={refetch} />
           ),
         }}
         {...otherProps}

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

@@ -15,6 +15,7 @@ import ScheduleDayViewContainer from "../schedule-day-view/schedule-day-view.con
 import ScheduleExistingAppointmentsList
   from "../schedule-existing-appointments-list/schedule-existing-appointments-list.component";
 import "./schedule-job-modal.scss";
+import InstanceRenderManager from "../../utils/instanceRenderMgr";
 
 const mapStateToProps = createStructuredSelector({
     bodyshop: selectBodyshop,
@@ -92,7 +93,7 @@ export function ScheduleJobModalComponent({
                 },
               ]}
             >
-                        <DateTimePicker onBlur={handleDateBlur} onlyFuture/>
+              <DateTimePicker onBlur={handleDateBlur} onlyFuture />
             </Form.Item>
             <Form.Item
               name="scheduled_completion"
@@ -104,19 +105,15 @@ export function ScheduleJobModalComponent({
                 },
               ]}
             >
-                        <DateTimePicker onlyFuture/>
+              <DateTimePicker onlyFuture />
             </Form.Item>
           </LayoutFormRow>
-
+          {InstanceRenderManager({
+            imex: (
+              <>
                 <Typography.Title level={4}>
                   {t("appointments.labels.smartscheduling")}
                 </Typography.Title>
-
-                {
-                    // smartOptions.length > 0 && (
-                    // <div>{t("appointments.labels.suggesteddates")}</div>
-                    // )
-                }
                 <Space wrap>
                   <Button onClick={handleSmartScheduling} loading={loading}>
                     {t("appointments.actions.calculate")}
@@ -128,9 +125,11 @@ export function ScheduleJobModalComponent({
                       onClick={() => {
                         const ssDate = dayjs(d);
                         if (ssDate.isBefore(dayjs())) {
-                                    form.setFieldsValue({start: dayjs()});
+                          form.setFieldsValue({ start: dayjs() });
                         } else {
-                                    form.setFieldsValue({start: dayjs(d).add(8, "hour")});
+                          form.setFieldsValue({
+                            start: dayjs(d).add(8, "hour"),
+                          });
                         }
                         handleDateBlur();
                       }}
@@ -139,6 +138,11 @@ export function ScheduleJobModalComponent({
                     </Button>
                   ))}
                 </Space>
+              </>
+            ),
+            rome: "USE_IMEX",
+            promanager: <></>,
+          })}
 
           <LayoutFormRow grow>
             <Form.Item
@@ -146,11 +150,11 @@ export function ScheduleJobModalComponent({
               valuePropName="checked"
               label={t("jobs.labels.appointmentconfirmation")}
             >
-                        <Switch/>
+              <Switch />
             </Form.Item>
 
             <Form.Item name="email" label={t("jobs.fields.ownr_ea")}>
-                        <EmailInput disabled={!form.getFieldValue("notifyCustomer")}/>
+              <EmailInput disabled={!form.getFieldValue("notifyCustomer")} />
             </Form.Item>
           </LayoutFormRow>
           <LayoutFormRow grow>
@@ -159,7 +163,7 @@ export function ScheduleJobModalComponent({
                 {bodyshop.appt_colors &&
                   bodyshop.appt_colors.map((color) => (
                     <Select.Option
-                                        style={{color: color.color.hex}}
+                      style={{ color: color.color.hex }}
                       key={color.color.hex}
                       value={color.color.hex}
                     >
@@ -180,7 +184,7 @@ export function ScheduleJobModalComponent({
               </Select>
             </Form.Item>
             <Form.Item name={"note"} label={t("appointments.fields.note")}>
-                        <Input/>
+              <Input />
             </Form.Item>
           </LayoutFormRow>
           {t("appointments.labels.history")}
@@ -197,7 +201,7 @@ export function ScheduleJobModalComponent({
               }
               return (
                 <div className="schedule-job-modal">
-                                <ScheduleDayViewContainer day={values.start}/>
+                  <ScheduleDayViewContainer day={values.start} />
                 </div>
               );
             }}

client/src/index.js

@@ -66,6 +66,12 @@ const router = createBrowserRouter(
     createRoutesFromElements(<Route path="*" element={<AppContainer />} />)
 );
 
+
+if (process.env.NODE_ENV === "development") {
+    let styles = 'font-weight: bold; font-size: 50px;color: red;  6px 6px 0 rgb(226,91,14) , 9px 9px 0 rgb(245,221,8) , 12px 12px 0 rgb(5,148,68) '
+    console.log('%c %s', styles, `VER: ${process.env.REACT_APP_INSTANCE}`)
+}
+
 function App() {
     return (
         <PersistGate

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

@@ -11,6 +11,7 @@ import {QUERY_BILLS_FOR_EXPORT} from "../../graphql/accounting.queries";
 import {setBreadcrumbs, setSelectedHeader,} from "../../redux/application/application.actions";
 import {selectPartnerVersion} from "../../redux/application/application.selectors";
 import {selectBodyshop} from "../../redux/user/user.selectors";
+import FeatureWrapperComponent from "../../components/feature-wrapper/feature-wrapper.component";
 
 const mapStateToProps = createStructuredSelector({
     bodyshop: selectBodyshop,
@@ -60,6 +61,7 @@ export function AccountingPayablesContainer({
 
     return (
         <div>
+        <FeatureWrapperComponent featureName='export'>
             <RbacWrapper action="accounting:payables">
                 {noPath && (
                     <AlertComponent
@@ -73,6 +75,7 @@ export function AccountingPayablesContainer({
                     refetch={refetch}
                 />
             </RbacWrapper>
+          </FeatureWrapperComponent>
         </div>
     );
 }

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

@@ -11,6 +11,7 @@ import {selectBodyshop} from "../../redux/user/user.selectors";
 import RbacWrapper from "../../components/rbac-wrapper/rbac-wrapper.component";
 import {checkPartnerStatus} from "../../components/partner-ping/partner-ping.component";
 import {selectPartnerVersion} from "../../redux/application/application.selectors";
+import FeatureWrapperComponent from "../../components/feature-wrapper/feature-wrapper.component";
 
 const mapStateToProps = createStructuredSelector({
     bodyshop: selectBodyshop,
@@ -61,6 +62,7 @@ export function AccountingPaymentsContainer({
         );
     return (
         <div>
+        <FeatureWrapperComponent featureName='export'>
             <RbacWrapper action="accounting:payments">
                 {noPath && (
                     <AlertComponent
@@ -74,6 +76,7 @@ export function AccountingPaymentsContainer({
                     refetch={refetch}
                 />
             </RbacWrapper>
+          </FeatureWrapperComponent>
         </div>
     );
 }

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

@@ -12,6 +12,7 @@ import {selectBodyshop} from "../../redux/user/user.selectors";
 import RbacWrapper from "../../components/rbac-wrapper/rbac-wrapper.component";
 import {checkPartnerStatus} from "../../components/partner-ping/partner-ping.component";
 import {selectPartnerVersion} from "../../redux/application/application.selectors";
+import FeatureWrapperComponent from "../../components/feature-wrapper/feature-wrapper.component";
 
 const mapStateToProps = createStructuredSelector({
     bodyshop: selectBodyshop,
@@ -64,6 +65,7 @@ export function AccountingReceivablesContainer({
 
     return (
         <div>
+        <FeatureWrapperComponent featureName="export">
             <RbacWrapper action="accounting:receivables">
                 {noPath && (
                     <AlertComponent
@@ -77,6 +79,7 @@ export function AccountingReceivablesContainer({
                     refetch={refetch}
                 />
             </RbacWrapper>
+          </FeatureWrapperComponent>
         </div>
     );
 }

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

@@ -11,6 +11,7 @@ import {QUERY_ALL_BILLS_PAGINATED} from "../../graphql/bills.queries";
 import {setBreadcrumbs, setSelectedHeader,} from "../../redux/application/application.actions";
 import BillsPageComponent from "./bills.page.component";
 import {pageLimit} from "../../utils/config";
+import FeatureWrapperComponent from "../../components/feature-wrapper/feature-wrapper.component";
 
 const mapDispatchToProps = (dispatch) => ({
     setBreadcrumbs: (breadcrumbs) => dispatch(setBreadcrumbs(breadcrumbs)),
@@ -55,6 +56,7 @@ export function BillsPageContainer({setBreadcrumbs, setSelectedHeader}) {
 
     if (error) return <AlertComponent message={error.message} type="error"/>;
     return (
+      <FeatureWrapperComponent featureName='bills'>
         <RbacWrapper action="bills:list">
             <div>
                 <BillsPageComponent
@@ -67,6 +69,7 @@ export function BillsPageContainer({setBreadcrumbs, setSelectedHeader}) {
                 <BillDetailEditContainer/>
             </div>
         </RbacWrapper>
+      </FeatureWrapperComponent>
     );
 }
 

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

@@ -15,6 +15,7 @@ import {addRecentItem, setBreadcrumbs, setSelectedHeader,} from "../../redux/app
 import {CreateRecentItem} from "../../utils/create-recent-item";
 import ContractDetailPageComponent from "./contract-detail.page.component";
 import NotFound from "../../components/not-found/not-found.component";
+import FeatureWrapperComponent from "../../components/feature-wrapper/feature-wrapper.component";
 
 const mapDispatchToProps = (dispatch) => ({
     setBreadcrumbs: (breadcrumbs) => dispatch(setBreadcrumbs(breadcrumbs)),
@@ -122,6 +123,7 @@ export function ContractDetailPageContainer({
     if (!!!data.cccontracts_by_pk) return <NotFound/>;
 
     return (
+      <FeatureWrapperComponent featureName='courtesycars'>
         <RbacWrapper action="contracts:detail">
             <div>
                 <CourtesyCarReturnModalContainer/>
@@ -160,6 +162,7 @@ export function ContractDetailPageContainer({
                 </Form>
             </div>
         </RbacWrapper>
+      </FeatureWrapperComponent>
     );
 }
 

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

@@ -10,6 +10,7 @@ import {QUERY_ACTIVE_CONTRACTS_PAGINATED} from "../../graphql/cccontracts.querie
 import {setBreadcrumbs, setSelectedHeader,} from "../../redux/application/application.actions";
 import ContractsPageComponent from "./contracts.page.component";
 import {pageLimit} from "../../utils/config";
+import FeatureWrapperComponent from "../../components/feature-wrapper/feature-wrapper.component";
 
 const mapDispatchToProps = (dispatch) => ({
     setBreadcrumbs: (breadcrumbs) => dispatch(setBreadcrumbs(breadcrumbs)),
@@ -56,6 +57,7 @@ export function ContractsPageContainer({setBreadcrumbs, setSelectedHeader}) {
 
     if (error) return <AlertComponent message={error.message} type="error"/>;
     return (
+      <FeatureWrapperComponent featureName="courtesycars">
         <RbacWrapper action="contracts:list">
           <ContractsPageComponent
             loading={loading}
@@ -64,6 +66,7 @@ export function ContractsPageContainer({setBreadcrumbs, setSelectedHeader}) {
             total={data ? data.search_cccontracts_aggregate.aggregate.count : 0}
           />
         </RbacWrapper>
+      </FeatureWrapperComponent>
     );
 }
 

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

@@ -10,6 +10,7 @@ import RbacWrapper from "../../components/rbac-wrapper/rbac-wrapper.component";
 import {INSERT_NEW_COURTESY_CAR} from "../../graphql/courtesy-car.queries";
 import {setBreadcrumbs, setSelectedHeader,} from "../../redux/application/application.actions";
 import {selectBodyshop} from "../../redux/user/user.selectors";
+import FeatureWrapperComponent from "../../components/feature-wrapper/feature-wrapper.component";
 
 const mapStateToProps = createStructuredSelector({
     bodyshop: selectBodyshop,
@@ -68,14 +69,11 @@ export function CourtesyCarCreateContainer({
 
     return (
       <RbacWrapper action="courtesycar:create">
-            <Form
+        <FeatureWrapperComponent featureName="courtesycars">
-                form={form}
+          <Form form={form} autoComplete="new-password" onFinish={handleFinish} layout="vertical">
-                autoComplete="new-password"
+            <CourtesyCarFormComponent form={form} saveLoading={loading} />
-                onFinish={handleFinish}
-                layout="vertical"
-            >
-                <CourtesyCarFormComponent form={form} saveLoading={loading}/>
           </Form>
+        </FeatureWrapperComponent>
       </RbacWrapper>
     );
 }

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

@@ -7,6 +7,7 @@ import RbacWrapper from "../../components/rbac-wrapper/rbac-wrapper.component";
 import {QUERY_ALL_CC} from "../../graphql/courtesy-car.queries";
 import {setBreadcrumbs, setSelectedHeader,} from "../../redux/application/application.actions";
 import CourtesyCarsPageComponent from "./courtesy-cars.page.component";
+import FeatureWrapperComponent from "../../components/feature-wrapper/feature-wrapper.component";
 
 const mapDispatchToProps = (dispatch) => ({
     setBreadcrumbs: (breadcrumbs) => dispatch(setBreadcrumbs(breadcrumbs)),
@@ -33,11 +34,13 @@ export function CourtesyCarsPageContainer({
     if (error) return <AlertComponent message={error.message} type="error"/>;
     return (
       <RbacWrapper action="courtesycar:list">
+        <FeatureWrapperComponent featureName="courtesycars">
           <CourtesyCarsPageComponent
             loading={loading}
             data={(data && data.courtesycars) || []}
             refetch={refetch}
           />
+        </FeatureWrapperComponent>
       </RbacWrapper>
     );
 }

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

@@ -4,6 +4,7 @@ import {connect} from "react-redux";
 import RbacWrapper from "../../components/rbac-wrapper/rbac-wrapper.component";
 import {setBreadcrumbs, setSelectedHeader,} from "../../redux/application/application.actions";
 import ExportLogsPage from "./export-logs.page.component";
+import FeatureWrapperComponent from "../../components/feature-wrapper/feature-wrapper.component";
 
 const mapDispatchToProps = (dispatch) => ({
     setBreadcrumbs: (breadcrumbs) => dispatch(setBreadcrumbs(breadcrumbs)),
@@ -25,9 +26,11 @@ export function ExportsLogPageContainer({setBreadcrumbs, setSelectedHeader}) {
     }, [setBreadcrumbs, t, setSelectedHeader]);
 
     return (
+      <FeatureWrapperComponent featureName='export'>
         <RbacWrapper action="accounting:exportlogs">
             <ExportLogsPage/>
         </RbacWrapper>
+      </FeatureWrapperComponent>
     );
 }
 

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

@@ -52,6 +52,8 @@ import _ from "lodash";
 import JobProfileDataWarning from "../../components/job-profile-data-warning/job-profile-data-warning.component";
 import {DateTimeFormat} from "../../utils/DateFormatter";
 import JobLifecycleComponent from "../../components/job-lifecycle/job-lifecycle.component";
+import InstanceRenderManager from "../../utils/instanceRenderMgr";
+import { HasFeatureAccess } from "../../components/feature-wrapper/feature-wrapper.component";
 
 const mapStateToProps = createStructuredSelector({
     bodyshop: selectBodyshop,
@@ -333,12 +335,12 @@ export function JobsDetailPage({
                             label: t("menus.jobsdetail.partssublet"),
                             children: <JobsDetailPliContainer job={job}/>,
                         },
-                        {
+                        ...InstanceRenderManager({ imex: true, rome: true, promanager: HasFeatureAccess({ featureName: 'timetickets', bodyshop }) }) ? [  {
                             key: "labor",
                             icon: <Icon component={FaHardHat}/>,
                             label: t("menus.jobsdetail.labor"),
                             children: <JobsDetailLaborContainer job={job} jobId={job.id}/>,
-                        },
+                        },]: [],
                         {
                             key: 'lifecycle',
                             icon: <BarsOutlined/>,
@@ -352,7 +354,7 @@ export function JobsDetailPage({
                             forceRender: true,
                             children: <JobsDetailDatesComponent job={job}/>,
                         },
-                        {
+                        ...InstanceRenderManager({ imex: true, rome: true, promanager: HasFeatureAccess({ featureName: 'media', bodyshop }) }) ? [ {
                             key: "documents",
                             icon: <FileImageFilled/>,
                             label: t("jobs.labels.documents"),
@@ -361,7 +363,7 @@ export function JobsDetailPage({
                             ) : (
                                 <JobsDocumentsGalleryContainer jobId={job.id}/>
                             ),
-                        },
+                        },]:[],                       
                         {
                             key: "notes",
                             icon: <Icon component={FaRegStickyNote}/>,

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

@@ -12,6 +12,7 @@ import {QUERY_ALL_PAYMENTS_PAGINATED} from "../../graphql/payments.queries";
 import {setBreadcrumbs, setSelectedHeader,} from "../../redux/application/application.actions";
 import {selectBodyshop} from "../../redux/user/user.selectors";
 import {pageLimit} from "../../utils/config";
+import FeatureWrapperComponent from "../../components/feature-wrapper/feature-wrapper.component";
 
 const mapStateToProps = createStructuredSelector({
     bodyshop: selectBodyshop,
@@ -60,6 +61,7 @@ export function AllJobs({bodyshop, setBreadcrumbs, setSelectedHeader}) {
 
     if (error) return <AlertComponent message={error.message} type="error"/>;
     return (
+      <FeatureWrapperComponent featureName='payments'>
         <RbacWrapper action="payments:list">
             <PaymentsListPaginated
                 refetch={refetch}
@@ -69,6 +71,7 @@ export function AllJobs({bodyshop, setBreadcrumbs, setSelectedHeader}) {
                 payments={data ? data.payments : []}
             />
         </RbacWrapper>
+      </FeatureWrapperComponent>
     );
 }
 

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

@@ -1,11 +1,14 @@
-import React from "react";
+import React from 'react';
-import RbacWrapper from "../../components/rbac-wrapper/rbac-wrapper.component";
+import RbacWrapper from '../../components/rbac-wrapper/rbac-wrapper.component';
-import TimeTicketShift from "../../components/time-ticket-shift/time-ticket-shift.container";
+import TimeTicketShift from '../../components/time-ticket-shift/time-ticket-shift.container';
+import FeatureWrapperComponent from '../../components/feature-wrapper/feature-wrapper.component';
 
 export default function ShiftClock() {
   return (
+    <FeatureWrapperComponent featureName="timetickets">
       <RbacWrapper action="shiftclock:view">
-            <TimeTicketShift/>
+        <TimeTicketShift />
       </RbacWrapper>
+    </FeatureWrapperComponent>
   );
 }

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

@@ -6,6 +6,7 @@ import RbacWrapper from "../../components/rbac-wrapper/rbac-wrapper.component";
 import {setBreadcrumbs, setSelectedHeader,} from "../../redux/application/application.actions";
 import {selectBodyshop} from "../../redux/user/user.selectors";
 import TemporaryDocsComponent from "./temporary-docs.component";
+import FeatureWrapperComponent from "../../components/feature-wrapper/feature-wrapper.component";
 
 const mapStateToProps = createStructuredSelector({
     bodyshop: selectBodyshop,
@@ -32,7 +33,9 @@ export function TempDocumentsContainer({setBreadcrumbs, setSelectedHeader}) {
 
     return (
       <RbacWrapper action="temporarydocs:view">
-            <TemporaryDocsComponent/>
+        <FeatureWrapperComponent featureName="media">
+          <TemporaryDocsComponent />
+        </FeatureWrapperComponent>
       </RbacWrapper>
     );
 }

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

@@ -19,6 +19,7 @@ import TimeTicketsAttendanceTable
     from "../../components/time-tickets-attendance-table/time-tickets-attendance-table.component";
 import {setBreadcrumbs, setSelectedHeader,} from "../../redux/application/application.actions";
 import TimeTicketsCommit from "../../components/time-tickets-commit/time-tickets-commit.component";
+import FeatureWrapperComponent from "../../components/feature-wrapper/feature-wrapper.component";
 
 const mapStateToProps = createStructuredSelector({});
 
@@ -64,6 +65,7 @@ export function TimeTicketsContainer({
     if (error) return <AlertComponent message={error.message} type="error"/>;
 
     return (
+      <FeatureWrapperComponent featureName='timetickets'>
         <RbacWrapper action="timetickets:list">
             <Row gutter={[16, 16]}>
                 <Col span={24}>
@@ -90,6 +92,7 @@ export function TimeTicketsContainer({
                 </Col>
             </Row>
         </RbacWrapper>
+      </FeatureWrapperComponent>
     );
 }
 

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

@@ -6,6 +6,7 @@ import RbacWrapper from "../../components/rbac-wrapper/rbac-wrapper.component";
 import TtApprovalsList from "../../components/tt-approvals-list/tt-approvals-list.container";
 import {setBreadcrumbs, setSelectedHeader,} from "../../redux/application/application.actions";
 import {selectBodyshop} from "../../redux/user/user.selectors";
+import FeatureWrapperComponent from "../../components/feature-wrapper/feature-wrapper.component";
 
 const mapStateToProps = createStructuredSelector({
     bodyshop: selectBodyshop,
@@ -31,9 +32,11 @@ export function TtApprovalsPage({setBreadcrumbs, setSelectedHeader}) {
     }, [t, setBreadcrumbs, setSelectedHeader]);
 
     return (
+      <FeatureWrapperComponent featureName='timetickets'>
         <RbacWrapper action="ttapprovals:view">
             <TtApprovalsList/>
         </RbacWrapper>
+      </FeatureWrapperComponent>
     );
 }
 

client/src/utils/instanceRenderMgr.js

@@ -9,30 +9,39 @@
  * @property { string | object | function } imex  Return this prop if Rome.
  */
 
-export default function InstanceRenderManager({
+export default function InstanceRenderManager({ executeFunction, rome, promanager, imex, debug }) {
-    executeFunction,
-    rome,
-    promanager,
-    imex,
-}) {
   let propToReturn = null;
 
-    switch (process.env.INSTANCE) {
+  switch (process.env.REACT_APP_INSTANCE) {
-        case "IMEX":
+    case 'IMEX':
       propToReturn = imex;
       break;
-        case "ROME":
+    case 'ROME':
       propToReturn = rome;
       break;
-        case "PROMANAGER":
+    case 'PROMANAGER':
+      //Return the rome prop if USE_ROME.
+      //If not USE_ROME, we want to default back to the rome prop if it's undefined.
+      //If null, we might want to show nothing, so make sure we return null.
       propToReturn =
-                promanager === "USE_ROME" ? rome : promanager || rome; //default promanager back to rome.
+        promanager === 'USE_ROME' ? rome : promanager !== undefined ? promanager : rome;
       break;
     default:
       propToReturn = imex;
       break;
   }
 
-    if (executeFunction && typeof propToReturn === "function") propToReturn();
+  if (executeFunction && typeof propToReturn === 'function') propToReturn();
+
+  //Checking to see if we need to default to another one.
+  if (propToReturn === 'imex') {
+    propToReturn = imex;
+  }
+  if (debug) {
+    console.log('InstanceRenderManager Debugger');
+    console.log('=========================');
+    console.log({ executeFunction, rome, promanager, imex, debug, propToReturn });
+    console.log('=========================');
+  }
   return propToReturn === undefined ? null : propToReturn;
 }