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,41 +1,41 @@
 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({
-    bodyshop: selectBodyshop,
+  bodyshop: selectBodyshop,
 });
 
 function FeatureWrapper({
-                            bodyshop,
+  bodyshop,
-                            featureName,
+  featureName,
-                            noauth,
+  noauth,
-                            children,
+  children,
-                            ...restProps
+  ...restProps
-                        }) {
+}) {
-    const {t} = useTranslation();
+  const { t } = useTranslation();
 
-    if (HasFeatureAccess({featureName, bodyshop})) return children;
+  if (HasFeatureAccess({ featureName, bodyshop })) return children;
 
-    return (
+  return (
-        noauth || (
+    noauth || (
-            <AlertComponent
+      <AlertComponent
-                message={t("general.messages.nofeatureaccess")}
+        message={t("general.messages.nofeatureaccess")}
-                type="warning"
+        type="warning"
-            />
+      />
-        )
+    )
-    );
+  );
 }
 
-export function HasFeatureAccess({featureName, bodyshop}) {
+export function HasFeatureAccess({ featureName, bodyshop }) {
-    return (
+  return (
-        bodyshop.features.allAccess ||
+    bodyshop?.features.allAccess ||
-        dayjs(bodyshop.features[featureName]).isAfter(dayjs())
+    dayjs(bodyshop?.features[featureName]).isAfter(dayjs())
-    );
+  );
 }
 
 export default connect(mapStateToProps, null)(FeatureWrapper);

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,
@@ -200,18 +201,22 @@ export function ScheduleCalendarHeaderComponent({
     };
 
     return (
-        <div className="imex-calendar-load">
+      <div className="imex-calendar-load">
-            <ScheduleBlockDay
+        <ScheduleBlockDay
-                alreadyBlocked={isDayBlocked.length > 0}
+          alreadyBlocked={isDayBlocked.length > 0}
-                date={date}
+          date={date}
-                refetch={refetch}
+          refetch={refetch}
-            >
+        >
-                <div style={{color: isShopOpen(date) ? "" : "tomato"}}>
+          <div style={{ color: isShopOpen(date) ? "" : "tomato" }}>
-                    {label}
+            {label}
-                    {calculating ? <LoadingSkeleton/> : LoadComponent}
+            {InstanceRenderMgr({
-                </div>
+              imex: calculating ? <LoadingSkeleton /> : LoadComponent,
-            </ScheduleBlockDay>
+              rome: "USE_IMEX",
-        </div>
+              promanager: <></>,
+            })}
+          </div>
+        </ScheduleBlockDay>
+      </div>
     );
 }
 

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

@@ -1,161 +1,171 @@
 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,
+  bodyshop: selectBodyshop,
-    problemJobs: selectProblemJobs,
+  problemJobs: selectProblemJobs,
 });
 const localizer = dayjsLocalizer(dayjs);
 
 export function ScheduleCalendarWrapperComponent({
-                                                     bodyshop,
+  bodyshop,
-                                                     problemJobs,
+  problemJobs,
-                                                     data,
+  data,
-                                                     refetch,
+  refetch,
-                                                     defaultView,
+  defaultView,
-                                                     setDateRangeCallback,
+  setDateRangeCallback,
-                                                     date,
+  date,
-                                                     ...otherProps
+  ...otherProps
-                                                 }) {
+}) {
-    const search = queryString.parse(useLocation().search);
+  const search = queryString.parse(useLocation().search);
-    const history = useNavigate();
+  const history = useNavigate();
-    const {t} = useTranslation();
+  const { t } = useTranslation();
-    const handleEventPropStyles = (event, start, end, isSelected) => {
+  const handleEventPropStyles = (event, start, end, isSelected) => {
-        return {
+    return {
-            ...(event.color && !((search.view || defaultView) === "agenda")
+      ...(event.color && !((search.view || defaultView) === "agenda")
-                ? {
+        ? {
-                    style: {
+            style: {
-                        backgroundColor:
+              backgroundColor:
-                            event.color && event.color.hex ? event.color.hex : event.color,
+                event.color && event.color.hex ? event.color.hex : event.color,
-                    },
+            },
-                }
+          }
-                : {}),
+        : {}),
-            className: `${event.arrived ? "imex-event-arrived" : ""} ${
+      className: `${event.arrived ? "imex-event-arrived" : ""} ${
-                event.block ? "imex-event-block" : ""
+        event.block ? "imex-event-block" : ""
-            }`,
+      }`,
-        };
     };
+  };
 
-    const selectedDate = new Date(date || dayjs(search.date) || Date.now());
+  const selectedDate = new Date(date || dayjs(search.date) || Date.now());
 
-    return (
+  return (
-        <>
+    <>
-            <JobDetailCards/>
+      <JobDetailCards />
-            {problemJobs && problemJobs.length > 2 ? (
+      {InstanceRenderManager({
-                <Collapse style={{marginBottom: '5px'}}>
+        imex:
-                    <Collapse.Panel
+          problemJobs && problemJobs.length > 2 ? (
-                        key="1"
+            <Collapse style={{ marginBottom: "5px" }}>
-                        header={
+              <Collapse.Panel
-                            <span style={{color: "tomato"}}>
+                key="1"
-                {t("appointments.labels.severalerrorsfound")}
+                header={
-              </span>
+                  <span style={{ color: "tomato" }}>
-                        }
+                    {t("appointments.labels.severalerrorsfound")}
-                    >
+                  </span>
-                        <Space direction="vertical" style={{width: '100%'}}>
+                }
-                            {problemJobs.map((problem) => (
+              >
-                                <Alert
+                <Space direction="vertical" style={{ width: "100%" }}>
-                                    key={problem.id}
+                  {problemJobs.map((problem) => (
-                                    type="error"
+                    <Alert
-                                    message={
+                      key={problem.id}
-                                        <Trans
+                      type="error"
-                                            i18nKey="appointments.labels.dataconsistency"
+                      message={
-                                            components={[
+                        <Trans
-                                                <Link
+                          i18nKey="appointments.labels.dataconsistency"
-                                                    to={`/manage/jobs/${problem.id}`}
+                          components={[
-                                                    target="_blank"
+                            <Link
-                                                />,
+                              to={`/manage/jobs/${problem.id}`}
-                                            ]}
+                              target="_blank"
-                                            values={{
+                            />,
-                                                ro_number: problem.ro_number,
+                          ]}
-                                                code: problem.code,
+                          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}
-                                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}
+                  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
+        rome: "USE_IMEX",
-                events={data}
+        promanager: <span />,
-                defaultView={search.view || defaultView || "week"}
+      })}
-                date={selectedDate}
+
-                onNavigate={(date, view, action) => {
+      <Calendar
-                    search.date = date.toISOString().substr(0, 10);
+        events={data}
-                    history({search: queryString.stringify(search)});
+        defaultView={search.view || defaultView || "week"}
-                }}
+        date={selectedDate}
-                onRangeChange={(start, end) => {
+        onNavigate={(date, view, action) => {
-                    if (setDateRangeCallback) setDateRangeCallback({start, end});
+          search.date = date.toISOString().substr(0, 10);
-                }}
+          history({ search: queryString.stringify(search) });
-                onView={(view) => {
+        }}
-                    search.view = view;
+        onRangeChange={(start, end) => {
-                    history({search: queryString.stringify(search)});
+          if (setDateRangeCallback) setDateRangeCallback({ start, end });
-                }}
+        }}
-                step={15}
+        onView={(view) => {
-                // timeslots={1}
+          search.view = view;
-                showMultiDayTimes
+          history({ search: queryString.stringify(search) });
-                localizer={localizer}
+        }}
-                min={
+        step={15}
-                    bodyshop.schedule_start_time
+        // timeslots={1}
-                        ? new Date(bodyshop.schedule_start_time)
+        showMultiDayTimes
-                        : new Date("2020-01-01T06:00:00")
+        localizer={localizer}
-                }
+        min={
-                max={
+          bodyshop.schedule_start_time
-                    bodyshop.schedule_end_time
+            ? new Date(bodyshop.schedule_start_time)
-                        ? new Date(bodyshop.schedule_end_time)
+            : new Date("2020-01-01T06:00:00")
-                        : new Date("2020-01-01T20:00:00")
+        }
-                }
+        max={
-                eventPropGetter={handleEventPropStyles}
+          bodyshop.schedule_end_time
-                components={{
+            ? new Date(bodyshop.schedule_end_time)
-                    event: (e) =>
+            : new Date("2020-01-01T20:00:00")
-                        Event({bodyshop: bodyshop, event: e.event, refetch: refetch}),
+        }
-                    header: (p) => (
+        eventPropGetter={handleEventPropStyles}
-                        <HeaderComponent {...p} events={data} refetch={refetch}/>
+        components={{
-                    ),
+          event: (e) =>
-                }}
+            Event({ bodyshop: bodyshop, event: e.event, refetch: refetch }),
-                {...otherProps}
+          header: (p) => (
-            />
+            <HeaderComponent {...p} events={data} refetch={refetch} />
-        </>
+          ),
-    );
+        }}
+        {...otherProps}
+      />
+    </>
+  );
 }
 
 export default connect(mapStateToProps, null)(ScheduleCalendarWrapperComponent);

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,
@@ -69,141 +70,144 @@ export function ScheduleJobModalComponent({
     };
 
     return (
-        <Row gutter={[16, 16]}>
+      <Row gutter={[16, 16]}>
-            <Col span={12}>
+        <Col span={12}>
-                <Space>
+          <Space>
-                    <Typography.Title level={3}>
+            <Typography.Title level={3}>
-                        {lbrHrsData?.jobs_by_pk?.ro_number}
+              {lbrHrsData?.jobs_by_pk?.ro_number}
-                    </Typography.Title>
+            </Typography.Title>
-                    <Typography.Title level={4}>{`B/R Hrs:${
+            <Typography.Title level={4}>{`B/R Hrs:${
-                        lbrHrsData?.jobs_by_pk.labhrs?.aggregate?.sum?.mod_lb_hrs || 0
+              lbrHrsData?.jobs_by_pk.labhrs?.aggregate?.sum?.mod_lb_hrs || 0
-                    }/${
+            }/${
-                        lbrHrsData?.jobs_by_pk.larhrs?.aggregate?.sum?.mod_lb_hrs || 0
+              lbrHrsData?.jobs_by_pk.larhrs?.aggregate?.sum?.mod_lb_hrs || 0
-                    }`}</Typography.Title>
+            }`}</Typography.Title>
-                </Space>
+          </Space>
-                <LayoutFormRow grow>
+          <LayoutFormRow grow>
-                    <Form.Item
+            <Form.Item
-                        name="start"
+              name="start"
-                        label={t("appointments.fields.time")}
+              label={t("appointments.fields.time")}
-                        rules={[
+              rules={[
-                            {
-                                required: true,
-                                //message: t("general.validation.required"),
-                            },
-                        ]}
-                    >
-                        <DateTimePicker onBlur={handleDateBlur} onlyFuture/>
-                    </Form.Item>
-                    <Form.Item
-                        name="scheduled_completion"
-                        label={t("jobs.fields.scheduled_completion")}
-                        rules={[
-                            {
-                                required: true,
-                                //message: t("general.validation.required"),
-                            },
-                        ]}
-                    >
-                        <DateTimePicker onlyFuture/>
-                    </Form.Item>
-                </LayoutFormRow>
-
-                <Typography.Title level={4}>
-                    {t("appointments.labels.smartscheduling")}
-                </Typography.Title>
-
                 {
-                    // smartOptions.length > 0 && (
+                  required: true,
-                    // <div>{t("appointments.labels.suggesteddates")}</div>
+                  //message: t("general.validation.required"),
-                    // )
+                },
-                }
+              ]}
+            >
+              <DateTimePicker onBlur={handleDateBlur} onlyFuture />
+            </Form.Item>
+            <Form.Item
+              name="scheduled_completion"
+              label={t("jobs.fields.scheduled_completion")}
+              rules={[
+                {
+                  required: true,
+                  //message: t("general.validation.required"),
+                },
+              ]}
+            >
+              <DateTimePicker onlyFuture />
+            </Form.Item>
+          </LayoutFormRow>
+          {InstanceRenderManager({
+            imex: (
+              <>
+                <Typography.Title level={4}>
+                  {t("appointments.labels.smartscheduling")}
+                </Typography.Title>
                 <Space wrap>
-                    <Button onClick={handleSmartScheduling} loading={loading}>
+                  <Button onClick={handleSmartScheduling} loading={loading}>
-                        {t("appointments.actions.calculate")}
+                    {t("appointments.actions.calculate")}
-                    </Button>
+                  </Button>
-                    {smartOptions.map((d, idx) => (
+                  {smartOptions.map((d, idx) => (
-                        <Button
+                    <Button
-                            className="imex-flex-row__margin"
+                      className="imex-flex-row__margin"
-                            key={idx}
+                      key={idx}
-                            onClick={() => {
+                      onClick={() => {
-                                const ssDate = dayjs(d);
+                        const ssDate = dayjs(d);
-                                if (ssDate.isBefore(dayjs())) {
+                        if (ssDate.isBefore(dayjs())) {
-                                    form.setFieldsValue({start: dayjs()});
+                          form.setFieldsValue({ start: dayjs() });
-                                } else {
+                        } else {
-                                    form.setFieldsValue({start: dayjs(d).add(8, "hour")});
+                          form.setFieldsValue({
-                                }
+                            start: dayjs(d).add(8, "hour"),
-                                handleDateBlur();
+                          });
-                            }}
-                        >
-                            <DateFormatter includeDay>{d}</DateFormatter>
-                        </Button>
-                    ))}
-                </Space>
-
-                <LayoutFormRow grow>
-                    <Form.Item
-                        name="notifyCustomer"
-                        valuePropName="checked"
-                        label={t("jobs.labels.appointmentconfirmation")}
-                    >
-                        <Switch/>
-                    </Form.Item>
-
-                    <Form.Item name="email" label={t("jobs.fields.ownr_ea")}>
-                        <EmailInput disabled={!form.getFieldValue("notifyCustomer")}/>
-                    </Form.Item>
-                </LayoutFormRow>
-                <LayoutFormRow grow>
-                    <Form.Item name="color" label={t("appointments.fields.color")}>
-                        <Select allowClear>
-                            {bodyshop.appt_colors &&
-                                bodyshop.appt_colors.map((color) => (
-                                    <Select.Option
-                                        style={{color: color.color.hex}}
-                                        key={color.color.hex}
-                                        value={color.color.hex}
-                                    >
-                                        {color.label}
-                                    </Select.Option>
-                                ))}
-                        </Select>
-                    </Form.Item>
-                    <Form.Item
-                        name={"alt_transport"}
-                        label={t("jobs.fields.alt_transport")}
-                    >
-                        <Select allowClear>
-                            {bodyshop.appt_alt_transport &&
-                                bodyshop.appt_alt_transport.map((alt) => (
-                                    <Select.Option key={alt}>{alt}</Select.Option>
-                                ))}
-                        </Select>
-                    </Form.Item>
-                    <Form.Item name={"note"} label={t("appointments.fields.note")}>
-                        <Input/>
-                    </Form.Item>
-                </LayoutFormRow>
-                {t("appointments.labels.history")}
-                <ScheduleExistingAppointmentsList
-                    existingAppointments={existingAppointments}
-                />
-            </Col>
-            <Col span={12}>
-                <Form.Item shouldUpdate={(prev, cur) => prev.start !== cur.start}>
-                    {() => {
-                        const values = form.getFieldsValue();
-                        if (values.start) {
-                            calculateScheduleLoad(dayjs(values.start).add(3, "day"));
                         }
-                        return (
+                        handleDateBlur();
-                            <div className="schedule-job-modal">
+                      }}
-                                <ScheduleDayViewContainer day={values.start}/>
+                    >
-                            </div>
+                      <DateFormatter includeDay>{d}</DateFormatter>
-                        );
+                    </Button>
-                    }}
+                  ))}
-                </Form.Item>
+                </Space>
-            </Col>
+              </>
-        </Row>
+            ),
+            rome: "USE_IMEX",
+            promanager: <></>,
+          })}
+
+          <LayoutFormRow grow>
+            <Form.Item
+              name="notifyCustomer"
+              valuePropName="checked"
+              label={t("jobs.labels.appointmentconfirmation")}
+            >
+              <Switch />
+            </Form.Item>
+
+            <Form.Item name="email" label={t("jobs.fields.ownr_ea")}>
+              <EmailInput disabled={!form.getFieldValue("notifyCustomer")} />
+            </Form.Item>
+          </LayoutFormRow>
+          <LayoutFormRow grow>
+            <Form.Item name="color" label={t("appointments.fields.color")}>
+              <Select allowClear>
+                {bodyshop.appt_colors &&
+                  bodyshop.appt_colors.map((color) => (
+                    <Select.Option
+                      style={{ color: color.color.hex }}
+                      key={color.color.hex}
+                      value={color.color.hex}
+                    >
+                      {color.label}
+                    </Select.Option>
+                  ))}
+              </Select>
+            </Form.Item>
+            <Form.Item
+              name={"alt_transport"}
+              label={t("jobs.fields.alt_transport")}
+            >
+              <Select allowClear>
+                {bodyshop.appt_alt_transport &&
+                  bodyshop.appt_alt_transport.map((alt) => (
+                    <Select.Option key={alt}>{alt}</Select.Option>
+                  ))}
+              </Select>
+            </Form.Item>
+            <Form.Item name={"note"} label={t("appointments.fields.note")}>
+              <Input />
+            </Form.Item>
+          </LayoutFormRow>
+          {t("appointments.labels.history")}
+          <ScheduleExistingAppointmentsList
+            existingAppointments={existingAppointments}
+          />
+        </Col>
+        <Col span={12}>
+          <Form.Item shouldUpdate={(prev, cur) => prev.start !== cur.start}>
+            {() => {
+              const values = form.getFieldsValue();
+              if (values.start) {
+                calculateScheduleLoad(dayjs(values.start).add(3, "day"));
+              }
+              return (
+                <div className="schedule-job-modal">
+                  <ScheduleDayViewContainer day={values.start} />
+                </div>
+              );
+            }}
+          </Form.Item>
+        </Col>
+      </Row>
     );
 }
 

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,14 +57,16 @@ export function ContractsPageContainer({setBreadcrumbs, setSelectedHeader}) {
 
     if (error) return <AlertComponent message={error.message} type="error"/>;
     return (
+      <FeatureWrapperComponent featureName="courtesycars">
         <RbacWrapper action="contracts:list">
-            <ContractsPageComponent
+          <ContractsPageComponent
-                loading={loading}
+            loading={loading}
-                refetch={refetch}
+            refetch={refetch}
-                data={data ? data.search_cccontracts : []}
+            data={data ? data.search_cccontracts : []}
-                total={data ? data.search_cccontracts_aggregate.aggregate.count : 0}
+            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,
@@ -67,16 +68,13 @@ export function CourtesyCarCreateContainer({
     }, [t, setBreadcrumbs, setSelectedHeader]);
 
     return (
-        <RbacWrapper action="courtesycar:create">
+      <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}
+          </Form>
-                layout="vertical"
+        </FeatureWrapperComponent>
-            >
+      </RbacWrapper>
-                <CourtesyCarFormComponent form={form} saveLoading={loading}/>
-            </Form>
-        </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)),
@@ -32,13 +33,15 @@ export function CourtesyCarsPageContainer({
 
     if (error) return <AlertComponent message={error.message} type="error"/>;
     return (
-        <RbacWrapper action="courtesycar:list">
+      <RbacWrapper action="courtesycar:list">
-            <CourtesyCarsPageComponent
+        <FeatureWrapperComponent featureName="courtesycars">
-                loading={loading}
+          <CourtesyCarsPageComponent
-                data={(data && data.courtesycars) || []}
+            loading={loading}
-                refetch={refetch}
+            data={(data && data.courtesycars) || []}
-            />
+            refetch={refetch}
-        </RbacWrapper>
+          />
+        </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 (
+  return (
-        <RbacWrapper action="shiftclock:view">
+    <FeatureWrapperComponent featureName="timetickets">
-            <TimeTicketShift/>
+      <RbacWrapper action="shiftclock:view">
-        </RbacWrapper>
+        <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,
@@ -31,9 +32,11 @@ export function TempDocumentsContainer({setBreadcrumbs, setSelectedHeader}) {
     }, [t, setBreadcrumbs, setSelectedHeader]);
 
     return (
-        <RbacWrapper action="temporarydocs:view">
+      <RbacWrapper action="temporarydocs:view">
-            <TemporaryDocsComponent/>
+        <FeatureWrapperComponent featureName="media">
-        </RbacWrapper>
+          <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,
+  let propToReturn = null;
-    rome,
-    promanager,
-    imex,
-}) {
-    let propToReturn = null;
 
-    switch (process.env.INSTANCE) {
+  switch (process.env.REACT_APP_INSTANCE) {
-        case "IMEX":
+    case 'IMEX':
-            propToReturn = imex;
+      propToReturn = imex;
-            break;
+      break;
-        case "ROME":
+    case 'ROME':
-            propToReturn = rome;
+      propToReturn = rome;
-            break;
+      break;
-        case "PROMANAGER":
+    case 'PROMANAGER':
-            propToReturn =
+      //Return the rome prop if USE_ROME.
-                promanager === "USE_ROME" ? rome : promanager || rome; //default promanager back to rome.
+      //If not USE_ROME, we want to default back to the rome prop if it's undefined.
-            break;
+      //If null, we might want to show nothing, so make sure we return null.
-        default:
+      propToReturn =
-            propToReturn = imex;
+        promanager === 'USE_ROME' ? rome : promanager !== undefined ? promanager : rome;
-            break;
+      break;
-    }
+    default:
+      propToReturn = imex;
+      break;
+  }
 
-    if (executeFunction && typeof propToReturn === "function") propToReturn();
+  if (executeFunction && typeof propToReturn === 'function') propToReturn();
-    return propToReturn === undefined ? null : 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;
 }