feature/IO-3255-simplified-parts-management - Add Shop / Vendor Configuration

client/src/pages/parts-settings/parts-settings.page.component.jsx

@@ -0,0 +1,77 @@
+import { Tabs } from "antd";
+import queryString from "query-string";
+import React, { useEffect } from "react";
+import { useTranslation } from "react-i18next";
+import { connect } from "react-redux";
+import { useLocation, useNavigate } from "react-router-dom";
+import { createStructuredSelector } from "reselect";
+import RbacWrapper from "../../components/rbac-wrapper/rbac-wrapper.component";
+import ShopVendorPageComponent from "../shop-vendor/shop-vendor.page.component";
+import { setBreadcrumbs, setSelectedHeader } from "../../redux/application/application.actions";
+import { selectBodyshop } from "../../redux/user/user.selectors";
+import InstanceRenderManager from "../../utils/instanceRenderMgr";
+import PartsShopInfoContainer from "../../components/parts-shop-info/parts-shop-info.container";
+
+const mapStateToProps = createStructuredSelector({
+  bodyshop: selectBodyshop
+});
+
+const mapDispatchToProps = (dispatch) => ({
+  setSelectedHeader: (key) => dispatch(setSelectedHeader(key)),
+  setBreadcrumbs: (breadcrumbs) => dispatch(setBreadcrumbs(breadcrumbs))
+});
+
+export function PartsSettingsPage({ bodyshop, setSelectedHeader, setBreadcrumbs }) {
+  const { t } = useTranslation();
+  const history = useNavigate();
+  const search = queryString.parse(useLocation().search);
+
+  useEffect(() => {
+    document.title = t("titles.parts_settings", {
+      app: InstanceRenderManager({
+        imex: "$t(titles.imexonline)",
+        rome: "$t(titles.romeonline)"
+      })
+    });
+    setSelectedHeader("parts-settings");
+    setBreadcrumbs([
+      {
+        link: "/parts",
+        label: t("titles.bc.parts")
+      },
+      {
+        link: "/parts/settings",
+        label: t("titles.bc.parts_settings")
+      }
+    ]);
+  }, [t, setSelectedHeader, setBreadcrumbs]);
+
+  useEffect(() => {
+    if (!search.tab) history({ search: "?tab=shop" });
+  }, [history, search]);
+
+  const items = [
+    {
+      key: "shop",
+      label: t("bodyshop.labels.shop_management"),
+      children: (
+        <RbacWrapper action="shop:config">
+          <PartsShopInfoContainer />
+        </RbacWrapper>
+      )
+    },
+    {
+      key: "vendors",
+      label: t("bodyshop.labels.vendor_management"),
+      children: (
+        <RbacWrapper action="shop:vendors">
+          <ShopVendorPageComponent />
+        </RbacWrapper>
+      )
+    }
+  ];
+
+  return <Tabs activeKey={search.tab} onChange={(key) => history({ search: `?tab=${key}` })} items={items} />;
+}
+
+export default connect(mapStateToProps, mapDispatchToProps)(PartsSettingsPage);

client/src/pages/simplified-parts/simplified-parts.page.component.jsx

@@ -22,6 +22,7 @@ const SimplifiedPartsJobsPage = lazy(() => import("../simplified-parts-jobs/simp
 const SimplifiedPartsJobsDetailPage = lazy(
   () => import("../simplified-parts-jobs-detail/simplified-parts-jobs-detail.container.jsx")
 );
+const PartsSettingsPage = lazy(() => import("../parts-settings/parts-settings.page.component.jsx"));
 const ShopPage = lazy(() => import("../shop/shop.page.component.jsx"));
 const ShopVendorPageContainer = lazy(() => import("../shop-vendor/shop-vendor.page.container.jsx"));
 const EmailOverlayContainer = lazy(() => import("../../components/email-overlay/email-overlay.container.jsx"));
@@ -183,6 +184,14 @@ export function SimplifiedPartsPage({ conflict, bodyshop, alerts, setAlerts }) {
             </Suspense>
           }
         />
+        <Route
+          path="/parts-settings"
+          element={
+            <Suspense fallback={<Spin />}>
+              <PartsSettingsPage />
+            </Suspense>
+          }
+        />
       </Routes>
     </Suspense>
   );