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

client/src/components/shop-info/shop-info.component.jsx

@@ -22,6 +22,7 @@ import InstanceRenderManager from "../../utils/instanceRenderMgr";
 import ShopInfoRoGuard from "./shop-info.roguard.component";
 import ShopInfoIntellipay from "./shop-intellipay-config.component";
 import { HasFeatureAccess } from "../feature-wrapper/feature-wrapper.component";
+import LockWrapperComponent from "../lock-wrapper/lock-wrapper.component";
 
 const mapStateToProps = createStructuredSelector({
   bodyshop: selectBodyshop
@@ -88,16 +89,14 @@ export function ShopInfoComponent({ bodyshop, form, saveLoading }) {
       children: <ShopInfoResponsibilityCenterComponent form={form} />,
       id: "tab-shop-responsibilitycenters"
     },
-    ...(HasFeatureAccess({ featureName: "checklists", bodyshop })
-      ? [
-          {
-            key: "checklists",
-            label: t("bodyshop.labels.checklists"),
-            children: <ShopInfoIntakeChecklistComponent form={form} />,
-            id: "tab-shop-checklists"
-          }
-        ]
-      : []),
+
+    {
+      key: "checklists",
+      label: <LockWrapperComponent featureName="checklist">{t("bodyshop.labels.checklists")}</LockWrapperComponent>,
+      children: <ShopInfoIntakeChecklistComponent form={form} />,
+      disabled: HasFeatureAccess({ bodyshop, featureName: "checklist" }),
+      id: "tab-shop-checklists"
+    },
     {
       key: "laborrates",
       label: t("bodyshop.labels.laborrates"),