IO-3020 IO-3036 Update ESLint. Add LockWrapper for Header. Add Blur Wrapper.

client/src/components/feature-wrapper/feature-wrapper.component.jsx

@@ -11,24 +11,36 @@ const mapStateToProps = createStructuredSelector({
   bodyshop: selectBodyshop
 });
 
-function FeatureWrapper({ bodyshop, featureName, noauth, children, ...restProps }) {
+function FeatureWrapper({ bodyshop, featureName, noauth, blurContent = false, children, ...restProps }) {
   const { t } = useTranslation();
 
   if (HasFeatureAccess({ featureName, bodyshop })) return children;
 
-  return (
-    noauth || (
-      <AlertComponent
-        message={t("general.messages.nofeatureaccess", {
-          app: InstanceRenderManager({
-            imex: "$t(titles.imexonline)",
-            rome: "$t(titles.romeonline)"
-          })
-        })}
-        type="warning"
-      />
-    )
-  );
+  if (blurContent) {
+    const childrenWithBlurProps = React.Children.map(children, (child) => {
+      // Checking isValidElement is the safe way and avoids a
+      // typescript error too.
+      if (React.isValidElement(child)) {
+        return React.cloneElement(child, { blur: true });
+      }
+      return child;
+    });
+    return childrenWithBlurProps;
+  } else {
+    return (
+      noauth || (
+        <AlertComponent
+          message={t("general.messages.nofeatureaccess", {
+            app: InstanceRenderManager({
+              imex: "$t(titles.imexonline)",
+              rome: "$t(titles.romeonline)"
+            })
+          })}
+          type="warning"
+        />
+      )
+    );
+  }
 }
 
 export function HasFeatureAccess({ featureName, bodyshop }) {