IO-3020 IO-3036 Extend blur wrapper, add lock wrapper to components throughout the system. Many placeholders still left for upsell components.

2024-12-04 11:51:54 -08:00
parent c85a5eb208
commit 6b3fb00cc0
47 changed files with 781 additions and 408 deletions
--- a/client/src/pages/accounting-payables/accounting-payables.container.jsx
+++ b/client/src/pages/accounting-payables/accounting-payables.container.jsx
@@ -57,7 +57,15 @@ export function AccountingPayablesContainer({ bodyshop, setBreadcrumbs, setSelec

  return (
    <div>
-      <FeatureWrapperComponent featureName="export">
+      <FeatureWrapperComponent
+        featureName="export"
+        noAuth
+        upsellComponent={
+          {
+            //TODO:Upsell
+          }
+        }
+      >
        <RbacWrapper action="accounting:payables">
          {noPath && <AlertComponent type="error" message={t("general.messages.noacctfilepath")} />}
          <AccountingPayablesTable loadaing={loading} bills={data ? data.bills : []} refetch={refetch} />
--- a/client/src/pages/accounting-payments/accounting-payments.container.jsx
+++ b/client/src/pages/accounting-payments/accounting-payments.container.jsx
@@ -55,7 +55,14 @@ export function AccountingPaymentsContainer({ bodyshop, setBreadcrumbs, setSelec
    !(bodyshop && (bodyshop.cdk_dealerid || bodyshop.pbs_serialnumber || bodyshop.accountingconfig.qbo));
  return (
    <div>
-      <FeatureWrapperComponent featureName="export">
+      <FeatureWrapperComponent
+        featureName="export"
+        upsellComponent={
+          {
+            //TODO:Upsell
+          }
+        }
+      >
        <RbacWrapper action="accounting:payments">
          {noPath && <AlertComponent type="error" message={t("general.messages.noacctfilepath")} />}
          <AccountingPaymentsTable loadaing={loading} payments={data ? data.payments : []} refetch={refetch} />
--- a/client/src/pages/accounting-receivables/accounting-receivables.container.jsx
+++ b/client/src/pages/accounting-receivables/accounting-receivables.container.jsx
@@ -60,7 +60,14 @@ export function AccountingReceivablesContainer({ bodyshop, setBreadcrumbs, setSe

  return (
    <div>
-      <FeatureWrapperComponent featureName="export">
+      <FeatureWrapperComponent
+        featureName="export"
+        upsellComponent={
+          {
+            //TODO:Upsell
+          }
+        }
+      >
        <RbacWrapper action="accounting:receivables">
          {noPath && <AlertComponent type="error" message={t("general.messages.noacctfilepath")} />}
          <AccountingReceivablesTable loadaing={loading} jobs={data ? data.jobs : []} refetch={refetch} />
--- a/client/src/pages/bills/bills.page.container.jsx
+++ b/client/src/pages/bills/bills.page.container.jsx
@@ -53,7 +53,14 @@ export function BillsPageContainer({ setBreadcrumbs, setSelectedHeader }) {

  if (error) return <AlertComponent message={error.message} type="error" />;
  return (
-    <FeatureWrapperComponent featureName="bills">
+    <FeatureWrapperComponent
+      featureName="bills"
+      upsellComponent={
+        {
+          //TODO:Upsell
+        }
+      }
+    >
      <RbacWrapper action="bills:list">
        <div>
          <BillsPageComponent
--- a/client/src/pages/contract-create/contract-create.page.container.jsx
+++ b/client/src/pages/contract-create/contract-create.page.container.jsx
@@ -120,7 +120,14 @@ export function ContractCreatePageContainer({ bodyshop, setBreadcrumbs, setSelec
  }, [t, setBreadcrumbs, setSelectedHeader]);

  return (
-    <FeatureWrapperComponent featureName="courtesycars">
+    <FeatureWrapperComponent
+      featureName="courtesycars"
+      upsellComponent={
+        {
+          //TODO:Upsell
+        }
+      }
+    >
      <RbacWrapper action="contracts:create">
        <Form form={form} layout="vertical" autoComplete="no" onFinish={handleFinish}>
          <ContractCreatePageComponent
--- a/client/src/pages/contract-detail/contract-detail.page.container.jsx
+++ b/client/src/pages/contract-detail/contract-detail.page.container.jsx
@@ -108,7 +108,14 @@ export function ContractDetailPageContainer({ setBreadcrumbs, addRecentItem, set
  if (!!!data.cccontracts_by_pk) return <NotFound />;

  return (
-    <FeatureWrapperComponent featureName="courtesycars">
+    <FeatureWrapperComponent
+      featureName="courtesycars"
+      upsellComponent={
+        {
+          //TODO:Upsell
+        }
+      }
+    >
      <RbacWrapper action="contracts:detail">
        <div>
          <CourtesyCarReturnModalContainer />
--- a/client/src/pages/contracts/contracts.page.container.jsx
+++ b/client/src/pages/contracts/contracts.page.container.jsx
@@ -56,7 +56,14 @@ export function ContractsPageContainer({ setBreadcrumbs, setSelectedHeader }) {

  if (error) return <AlertComponent message={error.message} type="error" />;
  return (
-    <FeatureWrapperComponent featureName="courtesycars">
+    <FeatureWrapperComponent
+      featureName="courtesycars"
+      upsellComponent={
+        {
+          //TODO:Upsell
+        }
+      }
+    >
      <RbacWrapper action="contracts:list">
        <ContractsPageComponent
          loading={loading}
--- a/client/src/pages/courtesy-car-create/courtesy-car-create.page.container.jsx
+++ b/client/src/pages/courtesy-car-create/courtesy-car-create.page.container.jsx
@@ -68,13 +68,20 @@ export function CourtesyCarCreateContainer({ bodyshop, setBreadcrumbs, setSelect
  }, [t, setBreadcrumbs, setSelectedHeader]);

  return (
-    <RbacWrapper action="courtesycar:create">
-      <FeatureWrapperComponent featureName="courtesycars">
+    <FeatureWrapperComponent
+      featureName="courtesycars"
+      upsellComponent={
+        {
+          //TODO:Upsell
+        }
+      }
+    >
+      <RbacWrapper action="courtesycar:create">
        <Form form={form} autoComplete="new-password" onFinish={handleFinish} layout="vertical">
          <CourtesyCarFormComponent form={form} saveLoading={loading} newCC={true} />
        </Form>
-      </FeatureWrapperComponent>
-    </RbacWrapper>
+      </RbacWrapper>
+    </FeatureWrapperComponent>
  );
 }

--- a/client/src/pages/courtesy-cars/courtesy-cars.page.container.jsx
+++ b/client/src/pages/courtesy-cars/courtesy-cars.page.container.jsx
@@ -34,11 +34,18 @@ export function CourtesyCarsPageContainer({ setBreadcrumbs, setSelectedHeader })

  if (error) return <AlertComponent message={error.message} type="error" />;
  return (
-    <RbacWrapper action="courtesycar:list">
-      <FeatureWrapperComponent featureName="courtesycars">
+    <FeatureWrapperComponent
+      featureName="courtesycars"
+      upsellComponent={
+        {
+          //TODO:Upsell
+        }
+      }
+    >
+      <RbacWrapper action="courtesycar:list">
        <CourtesyCarsPageComponent loading={loading} data={(data && data.courtesycars) || []} refetch={refetch} />
-      </FeatureWrapperComponent>
-    </RbacWrapper>
+      </RbacWrapper>
+    </FeatureWrapperComponent>
  );
 }

--- a/client/src/pages/dashboard/dashboard.container.jsx
+++ b/client/src/pages/dashboard/dashboard.container.jsx
@@ -32,7 +32,14 @@ export function ExportsLogPageContainer({ setBreadcrumbs, setSelectedHeader }) {
  }, [setBreadcrumbs, t, setSelectedHeader]);

  return (
-    <FeatureWrapper featureName="dashboard">
+    <FeatureWrapper
+      featureName="dashboard"
+      upsellComponent={
+        {
+          //TODO:Upsell
+        }
+      }
+    >
      <RbacWrapper action="shop:dashboard">
        <DashboardGridComponent />
      </RbacWrapper>
--- a/client/src/pages/export-logs/export-logs.page.container.jsx
+++ b/client/src/pages/export-logs/export-logs.page.container.jsx
@@ -32,7 +32,14 @@ export function ExportsLogPageContainer({ setBreadcrumbs, setSelectedHeader }) {
  }, [setBreadcrumbs, t, setSelectedHeader]);

  return (
-    <FeatureWrapperComponent featureName="export">
+    <FeatureWrapperComponent
+      featureName="export"
+      upsellComponent={
+        {
+          //TODO:Upsell
+        }
+      }
+    >
      <RbacWrapper action="accounting:exportlogs">
        <ExportLogsPage />
      </RbacWrapper>
--- a/client/src/pages/jobs-detail/jobs-detail.page.component.jsx
+++ b/client/src/pages/jobs-detail/jobs-detail.page.component.jsx
@@ -56,6 +56,7 @@ import { DateTimeFormat } from "../../utils/DateFormatter";
 import dayjs from "../../utils/day";
 import InstanceRenderManager from "../../utils/instanceRenderMgr";
 import UndefinedToNull from "../../utils/undefinedtonull";
+import LockWrapperComponent from "../../components/lock-wrapper/lock-wrapper.component.jsx";

 const mapStateToProps = createStructuredSelector({
  bodyshop: selectBodyshop,
@@ -376,9 +377,7 @@ export function JobsDetailPage({
              key: "partssublet",
              id: "job-details-partssublet",
              icon: <ToolFilled />,
-              label: HasFeatureAccess({ featureName: "bills", bodyshop })
-                ? t("menus.jobsdetail.partssublet")
-                : t("menus.jobsdetail.parts"),
+              label: t("menus.jobsdetail.partssublet"),
              children: (
                <JobsDetailPliContainer
                  job={job}
@@ -389,20 +388,16 @@ export function JobsDetailPage({
                />
              )
            },
-            ...(InstanceRenderManager({
-              rome: "USE_IMEX",
-              imex: HasFeatureAccess({ featureName: "timetickets", bodyshop })
-            })
-              ? [
-                  {
-                    key: "labor",
-                    id: "job-details-labor",
-                    icon: <Icon component={FaHardHat} />,
-                    label: t("menus.jobsdetail.labor"),
-                    children: <JobsDetailLaborContainer job={job} jobId={job.id} />
-                  }
-                ]
-              : []),
+
+            {
+              key: "labor",
+              id: "job-details-labor",
+              icon: <Icon component={FaHardHat} />,
+              label: (
+                <LockWrapperComponent featureName="timetickets">{t("menus.jobsdetail.labor")}</LockWrapperComponent>
+              ),
+              children: <JobsDetailLaborContainer job={job} jobId={job.id} />
+            },
            {
              key: "lifecycle",
              icon: <BarsOutlined />,
@@ -418,24 +413,18 @@ export function JobsDetailPage({
              forceRender: true,
              children: <JobsDetailDatesComponent job={job} />
            },
-            ...(InstanceRenderManager({
-              rome: "USE_IMEX",
-              imex: HasFeatureAccess({ featureName: "media", bodyshop })
-            })
-              ? [
-                  {
-                    key: "documents",
-                    id: "job-details-documents",
-                    icon: <FileImageFilled />,
-                    label: t("jobs.labels.documents"),
-                    children: bodyshop.uselocalmediaserver ? (
-                      <JobsDocumentsLocalGallery job={job} />
-                    ) : (
-                      <JobsDocumentsGalleryContainer jobId={job.id} />
-                    )
-                  }
-                ]
-              : []),
+
+            {
+              key: "documents",
+              id: "job-details-documents",
+              icon: <FileImageFilled />,
+              label: <LockWrapperComponent featureName="media">{t("jobs.labels.documents")}</LockWrapperComponent>,
+              children: bodyshop.uselocalmediaserver ? (
+                <JobsDocumentsLocalGallery job={job} />
+              ) : (
+                <JobsDocumentsGalleryContainer jobId={job.id} />
+              )
+            },
            {
              key: "notes",
              id: "job-details-notes",
@@ -447,7 +436,7 @@ export function JobsDetailPage({
              key: "audit",
              icon: <HistoryOutlined />,
              id: "job-details-audit",
-              label: t("jobs.labels.audit"),
+              label: <LockWrapperComponent featureName="audit">{t("jobs.labels.audit")}</LockWrapperComponent>,
              children: <JobAuditTrail jobId={job.id} />
            },
            {
--- a/client/src/pages/payments-all/payments-all.container.page.jsx
+++ b/client/src/pages/payments-all/payments-all.container.page.jsx
@@ -58,7 +58,14 @@ export function AllJobs({ bodyshop, setBreadcrumbs, setSelectedHeader }) {

  if (error) return <AlertComponent message={error.message} type="error" />;
  return (
-    <FeatureWrapperComponent featureName="payments">
+    <FeatureWrapperComponent
+      featureName="payments"
+      upsellComponent={
+        {
+          //TODO:Upsell
+        }
+      }
+    >
      <RbacWrapper action="payments:list">
        <PaymentsListPaginated
          refetch={refetch}
--- a/client/src/pages/production-board/production-board.container.jsx
+++ b/client/src/pages/production-board/production-board.container.jsx
@@ -38,7 +38,14 @@ export function ProductionBoardContainer({ setBreadcrumbs, bodyshop, setSelected
  }, [t, setBreadcrumbs, setSelectedHeader]);

  return (
-    <FeatureWrapper featureName="visualboard">
+    <FeatureWrapper
+      featureName="visualboard"
+      upsellComponent={
+        {
+          //TODO:Upsell
+        }
+      }
+    >
      <RbacWrapper action="production:board">
        <ProductionBoardComponent />
      </RbacWrapper>
--- a/client/src/pages/scoreboard/scoreboard.page.container.jsx
+++ b/client/src/pages/scoreboard/scoreboard.page.container.jsx
@@ -66,7 +66,14 @@ export function ScoreboardContainer({ setBreadcrumbs, setSelectedHeader }) {
   * Render the component
   */
  return (
-    <FeatureWrapper featureName="scoreboard">
+    <FeatureWrapper
+      featureName="scoreboard"
+      upsellComponent={
+        {
+          //TODO:Upsell
+        }
+      }
+    >
      <RbacWrapper action="scoreboard:view">
        <Tabs
          activeKey={tab || "sb"}
--- a/client/src/pages/shift-clock/shift-clock.page.jsx
+++ b/client/src/pages/shift-clock/shift-clock.page.jsx
@@ -5,7 +5,14 @@ import FeatureWrapperComponent from "../../components/feature-wrapper/feature-wr

 export default function ShiftClock() {
  return (
-    <FeatureWrapperComponent featureName="timetickets">
+    <FeatureWrapperComponent
+      featureName="timetickets"
+      upsellComponent={
+        {
+          //TODO:Upsell
+        }
+      }
+    >
      <RbacWrapper action="shiftclock:view">
        <TimeTicketShift />
      </RbacWrapper>
--- a/client/src/pages/tech/tech.page.component.jsx
+++ b/client/src/pages/tech/tech.page.component.jsx
@@ -82,7 +82,14 @@ export function TechPage({ technician }) {
                />
              }
            >
-              <FeatureWrapper featureName="tech-console">
+              <FeatureWrapper
+                featureName="tech-console"
+                upsellComponent={
+                  {
+                    //TODO:Upsell
+                  }
+                }
+              >
                <TimeTicketModalContainer />
                <EmailOverlayContainer />
                <PrintCenterModalContainer />
--- a/client/src/pages/temporary-docs/temporary-docs.container.jsx
+++ b/client/src/pages/temporary-docs/temporary-docs.container.jsx
@@ -38,11 +38,18 @@ export function TempDocumentsContainer({ setBreadcrumbs, setSelectedHeader }) {
  }, [t, setBreadcrumbs, setSelectedHeader]);

  return (
-    <RbacWrapper action="temporarydocs:view">
-      <FeatureWrapperComponent featureName="media">
+    <FeatureWrapperComponent
+      featureName="media"
+      upsellComponent={
+        {
+          //TODO:Upsell
+        }
+      }
+    >
+      <RbacWrapper action="temporarydocs:view">
        <TemporaryDocsComponent />
-      </FeatureWrapperComponent>
-    </RbacWrapper>
+      </RbacWrapper>
+    </FeatureWrapperComponent>
  );
 }

--- a/client/src/pages/time-tickets/time-tickets.container.jsx
+++ b/client/src/pages/time-tickets/time-tickets.container.jsx
@@ -73,7 +73,14 @@ export function TimeTicketsContainer({ bodyshop, setBreadcrumbs, setSelectedHead
  if (error) return <AlertComponent message={error.message} type="error" />;

  return (
-    <FeatureWrapperComponent featureName="timetickets">
+    <FeatureWrapperComponent
+      featureName="timetickets"
+      upsellComponent={
+        {
+          //TODO:Upsell
+        }
+      }
+    >
      <RbacWrapper action="timetickets:list">
        <Row gutter={[16, 16]}>
          <Col span={24}>
--- a/client/src/pages/tt-approvals/tt-approvals.page.container.jsx
+++ b/client/src/pages/tt-approvals/tt-approvals.page.container.jsx
@@ -38,7 +38,14 @@ export function TtApprovalsPage({ setBreadcrumbs, setSelectedHeader }) {
  }, [t, setBreadcrumbs, setSelectedHeader]);

  return (
-    <FeatureWrapperComponent featureName="timetickets">
+    <FeatureWrapperComponent
+      featureName="timetickets"
+      upsellComponent={
+        {
+          //TODO:Upsell
+        }
+      }
+    >
      <RbacWrapper action="ttapprovals:view">
        <TtApprovalsList />
      </RbacWrapper>