IO-779 Added shop sub status and blockers.

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

@@ -12,8 +12,10 @@ import ChatAffixContainer from "../../components/chat-affix/chat-affix.container
 import ConflictComponent from "../../components/conflict/conflict.component";
 import ErrorBoundary from "../../components/error-boundary/error-boundary.component";
 import FcmNotification from "../../components/fcm-notification/fcm-notification.component";
+import ShopSubStatusComponent from "../../components/shop-sub-status/shop-sub-status.component";
 //import FooterComponent from "../../components/footer/footer.component";
 //Component Imports
+
 import HeaderContainer from "../../components/header/header.container";
 import JiraSupportComponent from "../../components/jira-support-widget/jira-support-widget.component";
 import LoadingSpinner from "../../components/loading-spinner/loading-spinner.component";
@@ -21,7 +23,10 @@ import PartnerPingComponent from "../../components/partner-ping/partner-ping.com
 import PrintCenterModalContainer from "../../components/print-center-modal/print-center-modal.container";
 import TestComponent from "../../components/_test/test.component";
 import { QUERY_STRIPE_ID } from "../../graphql/bodyshop.queries";
-import { selectInstanceConflict } from "../../redux/user/user.selectors";
+import {
+  selectBodyshop,
+  selectInstanceConflict,
+} from "../../redux/user/user.selectors";
 import client from "../../utils/GraphQLClient";
 import "./manage.page.styles.scss";
 
@@ -166,15 +171,198 @@ const stripePromise = new Promise((resolve, reject) => {
 
 const mapStateToProps = createStructuredSelector({
   conflict: selectInstanceConflict,
+  bodyshop: selectBodyshop,
 });
 
-export function Manage({ match, conflict }) {
+export function Manage({ match, conflict, bodyshop }) {
   const { t } = useTranslation();
 
   useEffect(() => {
     document.title = t("titles.app");
   }, [t]);
 
+  const AppRouteTable = (
+    <Suspense
+      fallback={<LoadingSpinner message={t("general.labels.loadingapp")} />}
+    >
+      <Elements stripe={stripePromise}>
+        <PaymentModalContainer />
+      </Elements>
+      <BreadCrumbs />
+      <BillEnterModalContainer />
+      <JobCostingModal />
+      <ReportCenterModal />
+      <EmailOverlayContainer />
+      <TimeTicketModalContainer />
+      <PrintCenterModalContainer />
+      <Route exact path={`${match.path}/_test`} component={TestComponent} />
+      <Route exact path={`${match.path}`} component={ManageRootPage} />
+
+      <Route exact path={`${match.path}/jobs`} component={JobsPage} />
+      <Switch>
+        <Route
+          exact
+          path={`${match.path}/jobs/:jobId/intake`}
+          component={JobIntake}
+        />
+        <Route
+          exact
+          path={`${match.path}/jobs/:jobId/deliver`}
+          component={JobDeliver}
+        />
+        <Route
+          exact
+          path={`${match.path}/jobs/:jobId/checklist`}
+          component={JobChecklistView}
+        />
+        <Route
+          exact
+          path={`${match.path}/jobs/:jobId/close`}
+          component={JobsClose}
+        />
+        <Route
+          exact
+          path={`${match.path}/jobs/:jobId/admin`}
+          component={JobsAdmin}
+        />
+        <Route exact path={`${match.path}/jobs/all`} component={AllJobs} />
+        <Route
+          exact
+          path={`${match.path}/jobs/new`}
+          component={JobsCreateContainerPage}
+        />
+        <Route path={`${match.path}/jobs/:jobId`} component={JobsDetailPage} />
+      </Switch>
+      <Route exact path={`${match.path}/temporarydocs/`} component={TempDocs} />
+      <Route
+        exact
+        path={`${match.path}/courtesycars/`}
+        component={CourtesyCarsPage}
+      />
+      <Switch>
+        <Route
+          exact
+          path={`${match.path}/courtesycars/new`}
+          component={CourtesyCarCreateContainer}
+        />
+
+        <Route
+          exact
+          path={`${match.path}/courtesycars/contracts`}
+          component={ContractsList}
+        />
+
+        <Route
+          exact
+          path={`${match.path}/courtesycars/contracts/new`}
+          component={ContractCreatePage}
+        />
+        <Route
+          exact
+          path={`${match.path}/courtesycars/contracts/:contractId`}
+          component={ContractDetailPage}
+        />
+
+        <Route
+          exact
+          path={`${match.path}/courtesycars/:ccId`}
+          component={CourtesyCarDetailContainer}
+        />
+      </Switch>
+      <Route exact path={`${match.path}/profile`} component={ProfilePage} />
+      <Route
+        exact
+        path={`${match.path}/vehicles`}
+        component={VehiclesContainer}
+      />
+      <Route
+        exact
+        path={`${match.path}/production/list`}
+        component={ProductionListPage}
+      />
+      <Route
+        exact
+        path={`${match.path}/production/board`}
+        component={ProductionBoardPage}
+      />
+      <Route
+        exact
+        path={`${match.path}/vehicles/:vehId`}
+        component={VehiclesDetailContainer}
+      />
+      <Route exact path={`${match.path}/bills`} component={BillsListPage} />
+      <Route exact path={`${match.path}/owners`} component={OwnersContainer} />
+      <Route
+        exact
+        path={`${match.path}/owners/:ownerId`}
+        component={OwnersDetailContainer}
+      />
+      <Route
+        exact
+        path={`${match.path}/schedule`}
+        component={ScheduleContainer}
+      />
+      <Route
+        exact
+        path={`${match.path}/available`}
+        component={JobsAvailablePage}
+      />
+      <Route exact path={`${match.path}/shop/`} component={ShopPage} />
+
+      {
+        //   <Route
+        // exact
+        // path={`${match.path}/shop/templates`}
+        // component={ShopTemplates}
+        //   />
+      }
+
+      <Route
+        exact
+        path={`${match.path}/shop/vendors`}
+        component={ShopVendorPageContainer}
+      />
+      <Route
+        exact
+        path={`${match.path}/shop/csi`}
+        component={ShopCsiPageContainer}
+      />
+      <Route
+        exact
+        path={`${match.path}/accounting/receivables`}
+        component={AccountingReceivables}
+      />
+      <Route
+        exact
+        path={`${match.path}/accounting/payables`}
+        component={AccountingPayables}
+      />
+      <Route
+        exact
+        path={`${match.path}/accounting/payments`}
+        component={AccountingPayments}
+      />
+      <Route exact path={`${match.path}/partsqueue`} component={PartsQueue} />
+      <Route exact path={`${match.path}/payments`} component={PaymentsAll} />
+      <Route exact path={`${match.path}/shiftclock`} component={ShiftClock} />
+      <Route exact path={`${match.path}/scoreboard`} component={Scoreboard} />
+      <Route
+        exact
+        path={`${match.path}/timetickets`}
+        component={TimeTicketsAll}
+      />
+      <Route exact path={`${match.path}/help`} component={Help} />
+      <Route exact path={`${match.path}/emailtest`} component={EmailTest} />
+    </Suspense>
+  );
+
+  let PageContent;
+
+  if (conflict) PageContent = <ConflictComponent />;
+  else if (bodyshop && bodyshop.sub_status !== "active")
+    PageContent = <ShopSubStatusComponent />;
+  else PageContent = AppRouteTable;
+
   return (
     <Layout className="layout-container">
       <Header>
@@ -183,233 +371,7 @@ export function Manage({ match, conflict }) {
       <Content className="content-container">
         <FcmNotification />
         <PartnerPingComponent />
-        <ErrorBoundary>
-          {conflict ? (
-            <ConflictComponent />
-          ) : (
-            <Suspense
-              fallback={
-                <LoadingSpinner message={t("general.labels.loadingapp")} />
-              }
-            >
-              <Elements stripe={stripePromise}>
-                <PaymentModalContainer />
-              </Elements>
-              <BreadCrumbs />
-              <BillEnterModalContainer />
-              <JobCostingModal />
-              <ReportCenterModal />
-              <EmailOverlayContainer />
-              <TimeTicketModalContainer />
-              <PrintCenterModalContainer />
-              <Route
-                exact
-                path={`${match.path}/_test`}
-                component={TestComponent}
-              />
-              <Route exact path={`${match.path}`} component={ManageRootPage} />
-
-              <Route exact path={`${match.path}/jobs`} component={JobsPage} />
-              <Switch>
-                <Route
-                  exact
-                  path={`${match.path}/jobs/:jobId/intake`}
-                  component={JobIntake}
-                />
-                <Route
-                  exact
-                  path={`${match.path}/jobs/:jobId/deliver`}
-                  component={JobDeliver}
-                />
-                <Route
-                  exact
-                  path={`${match.path}/jobs/:jobId/checklist`}
-                  component={JobChecklistView}
-                />
-                <Route
-                  exact
-                  path={`${match.path}/jobs/:jobId/close`}
-                  component={JobsClose}
-                />
-                <Route
-                  exact
-                  path={`${match.path}/jobs/:jobId/admin`}
-                  component={JobsAdmin}
-                />
-                <Route
-                  exact
-                  path={`${match.path}/jobs/all`}
-                  component={AllJobs}
-                />
-                <Route
-                  exact
-                  path={`${match.path}/jobs/new`}
-                  component={JobsCreateContainerPage}
-                />
-                <Route
-                  path={`${match.path}/jobs/:jobId`}
-                  component={JobsDetailPage}
-                />
-              </Switch>
-              <Route
-                exact
-                path={`${match.path}/temporarydocs/`}
-                component={TempDocs}
-              />
-              <Route
-                exact
-                path={`${match.path}/courtesycars/`}
-                component={CourtesyCarsPage}
-              />
-              <Switch>
-                <Route
-                  exact
-                  path={`${match.path}/courtesycars/new`}
-                  component={CourtesyCarCreateContainer}
-                />
-
-                <Route
-                  exact
-                  path={`${match.path}/courtesycars/contracts`}
-                  component={ContractsList}
-                />
-
-                <Route
-                  exact
-                  path={`${match.path}/courtesycars/contracts/new`}
-                  component={ContractCreatePage}
-                />
-                <Route
-                  exact
-                  path={`${match.path}/courtesycars/contracts/:contractId`}
-                  component={ContractDetailPage}
-                />
-
-                <Route
-                  exact
-                  path={`${match.path}/courtesycars/:ccId`}
-                  component={CourtesyCarDetailContainer}
-                />
-              </Switch>
-              <Route
-                exact
-                path={`${match.path}/profile`}
-                component={ProfilePage}
-              />
-              <Route
-                exact
-                path={`${match.path}/vehicles`}
-                component={VehiclesContainer}
-              />
-              <Route
-                exact
-                path={`${match.path}/production/list`}
-                component={ProductionListPage}
-              />
-              <Route
-                exact
-                path={`${match.path}/production/board`}
-                component={ProductionBoardPage}
-              />
-              <Route
-                exact
-                path={`${match.path}/vehicles/:vehId`}
-                component={VehiclesDetailContainer}
-              />
-              <Route
-                exact
-                path={`${match.path}/bills`}
-                component={BillsListPage}
-              />
-              <Route
-                exact
-                path={`${match.path}/owners`}
-                component={OwnersContainer}
-              />
-              <Route
-                exact
-                path={`${match.path}/owners/:ownerId`}
-                component={OwnersDetailContainer}
-              />
-              <Route
-                exact
-                path={`${match.path}/schedule`}
-                component={ScheduleContainer}
-              />
-              <Route
-                exact
-                path={`${match.path}/available`}
-                component={JobsAvailablePage}
-              />
-              <Route exact path={`${match.path}/shop/`} component={ShopPage} />
-
-              {
-                //   <Route
-                // exact
-                // path={`${match.path}/shop/templates`}
-                // component={ShopTemplates}
-                //   />
-              }
-
-              <Route
-                exact
-                path={`${match.path}/shop/vendors`}
-                component={ShopVendorPageContainer}
-              />
-              <Route
-                exact
-                path={`${match.path}/shop/csi`}
-                component={ShopCsiPageContainer}
-              />
-              <Route
-                exact
-                path={`${match.path}/accounting/receivables`}
-                component={AccountingReceivables}
-              />
-              <Route
-                exact
-                path={`${match.path}/accounting/payables`}
-                component={AccountingPayables}
-              />
-              <Route
-                exact
-                path={`${match.path}/accounting/payments`}
-                component={AccountingPayments}
-              />
-              <Route
-                exact
-                path={`${match.path}/partsqueue`}
-                component={PartsQueue}
-              />
-              <Route
-                exact
-                path={`${match.path}/payments`}
-                component={PaymentsAll}
-              />
-              <Route
-                exact
-                path={`${match.path}/shiftclock`}
-                component={ShiftClock}
-              />
-              <Route
-                exact
-                path={`${match.path}/scoreboard`}
-                component={Scoreboard}
-              />
-              <Route
-                exact
-                path={`${match.path}/timetickets`}
-                component={TimeTicketsAll}
-              />
-              <Route exact path={`${match.path}/help`} component={Help} />
-              <Route
-                exact
-                path={`${match.path}/emailtest`}
-                component={EmailTest}
-              />
-            </Suspense>
-          )}
-        </ErrorBoundary>
+        <ErrorBoundary>{PageContent}</ErrorBoundary>
         <ChatAffixContainer />
 
         <BackTop />

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

@@ -1,15 +1,14 @@
 import { useQuery } from "@apollo/client";
 import React, { useEffect } from "react";
+import { useTranslation } from "react-i18next";
 import { connect } from "react-redux";
+import { createStructuredSelector } from "reselect";
 import AlertComponent from "../../components/alert/alert.component";
+import LoadingSpinner from "../../components/loading-spinner/loading-spinner.component";
 import { QUERY_BODYSHOP } from "../../graphql/bodyshop.queries";
 import { setBodyshop } from "../../redux/user/user.actions";
-import ManagePage from "./manage.page.component";
-import LoadingSpinner from "../../components/loading-spinner/loading-spinner.component";
-import { useTranslation } from "react-i18next";
-import { createStructuredSelector } from "reselect";
 import { selectBodyshop } from "../../redux/user/user.selectors";
-import NoShop from "../../components/no-shop/no-shop.component";
+import ManagePage from "./manage.page.component";
 
 const mapStateToProps = createStructuredSelector({ bodyshop: selectBodyshop });
 
@@ -32,8 +31,6 @@ function ManagePageContainer({ match, setBodyshop, bodyshop }) {
     return <LoadingSpinner message={t("general.labels.loadingshop")} />;
   if (error) return <AlertComponent message={error.message} type="error" />;
 
-  if (bodyshop && bodyshop.notfound) return <NoShop />;
-
   return <ManagePage match={match} />;
 }