IO-1211 Feature Restrictions

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

@@ -10,6 +10,7 @@ import LoadingSpinner from "../../components/loading-spinner/loading-spinner.com
 import TechHeader from "../../components/tech-header/tech-header.component";
 import TechSider from "../../components/tech-sider/tech-sider.component";
 import { selectTechnician } from "../../redux/tech/tech.selectors";
+import FeatureWrapper from "../../components/feature-wrapper/feature-wrapper.component";
 import "./tech.page.styles.scss";
 const TimeTicketModalContainer = lazy(() =>
   import("../../components/time-ticket-modal/time-ticket-modal.container")
@@ -51,52 +52,55 @@ export function TechPage({ technician, match }) {
   }, [t]);
 
   return (
-    <Layout className='tech-layout-container'>
+    <Layout className="tech-layout-container">
       <TechSider />
       <Layout>
         {technician ? null : <Redirect to={`${match.path}/login`} />}
         <TechHeader />
-        <Content className='tech-content-container'>
+        <Content className="tech-content-container">
           <FcmNotification />
           <ErrorBoundary>
             <Suspense
               fallback={
                 <LoadingSpinner message={t("general.labels.loadingapp")} />
-              }>
-              <TimeTicketModalContainer />
-              <PrintCenterModalContainer />
-              <Switch>
-                <Route
-                  exact
-                  path={`${match.path}/login`}
-                  component={TechLogin}
-                />
-                <Route
-                  exact
-                  path={`${match.path}/joblookup`}
-                  component={TechLookup}
-                />
-                <Route
-                  exact
-                  path={`${match.path}/list`}
-                  component={ProductionListPage}
-                />
-                <Route
-                  exact
-                  path={`${match.path}/jobclock`}
-                  component={TechJobClock}
-                />
-                <Route
-                  exact
-                  path={`${match.path}/shiftclock`}
-                  component={TechShiftClock}
-                />
-                <Route
-                  exact
-                  path={`${match.path}/board`}
-                  component={ProductionBoardPage}
-                />
-              </Switch>
+              }
+            >
+              <FeatureWrapper featureName="tech-console">
+                <TimeTicketModalContainer />
+                <PrintCenterModalContainer />
+                <Switch>
+                  <Route
+                    exact
+                    path={`${match.path}/login`}
+                    component={TechLogin}
+                  />
+                  <Route
+                    exact
+                    path={`${match.path}/joblookup`}
+                    component={TechLookup}
+                  />
+                  <Route
+                    exact
+                    path={`${match.path}/list`}
+                    component={ProductionListPage}
+                  />
+                  <Route
+                    exact
+                    path={`${match.path}/jobclock`}
+                    component={TechJobClock}
+                  />
+                  <Route
+                    exact
+                    path={`${match.path}/shiftclock`}
+                    component={TechShiftClock}
+                  />
+                  <Route
+                    exact
+                    path={`${match.path}/board`}
+                    component={ProductionBoardPage}
+                  />
+                </Switch>
+              </FeatureWrapper>
             </Suspense>
           </ErrorBoundary>
 

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

@@ -7,12 +7,18 @@ import { setBodyshop } from "../../redux/user/user.actions";
 import TechPage from "./tech.page.component";
 import LoadingSpinner from "../../components/loading-spinner/loading-spinner.component";
 import { useTranslation } from "react-i18next";
+import { selectBodyshop } from "../../redux/user/user.selectors";
+import { createStructuredSelector } from "reselect";
+
+const mapStateToProps = createStructuredSelector({
+  bodyshop: selectBodyshop,
+});
 
 const mapDispatchToProps = (dispatch) => ({
   setBodyshop: (bs) => dispatch(setBodyshop(bs)),
 });
 
-export function TechPageContainer({ setBodyshop, match }) {
+export function TechPageContainer({ bodyshop, setBodyshop, match }) {
   const { loading, error, data } = useQuery(QUERY_BODYSHOP, {
     fetchPolicy: "network-only",
   });
@@ -21,10 +27,10 @@ export function TechPageContainer({ setBodyshop, match }) {
     if (data) setBodyshop(data.bodyshops[0]);
   }, [data, setBodyshop]);
 
-  if (loading)
+  if (loading || !bodyshop)
     return <LoadingSpinner message={t("general.labels.loadingshop")} />;
   if (error) return <AlertComponent message={error.message} type="error" />;
   return <TechPage match={match} />;
 }
 
-export default connect(null, mapDispatchToProps)(TechPageContainer);
+export default connect(mapStateToProps, mapDispatchToProps)(TechPageContainer);