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/documents-upload/documents-upload.component.jsx

@@ -7,6 +7,8 @@ import { createStructuredSelector } from "reselect";
 import { selectBodyshop, selectCurrentUser } from "../../redux/user/user.selectors";
 import formatBytes from "../../utils/formatbytes";
 import { handleUpload } from "./documents-upload.utility";
+import LockWrapperComponent from "../lock-wrapper/lock-wrapper.component";
+import { HasFeatureAccess } from "../feature-wrapper/feature-wrapper.component";
 
 const mapStateToProps = createStructuredSelector({
   currentUser: selectCurrentUser,
@@ -45,11 +47,13 @@ export function DocumentsUploadComponent({
       setFileList((fileList) => fileList.filter((x) => x.uid !== uid));
     }, 2000);
   };
+  const hasMediaAccess = HasFeatureAccess({ bodyshop, featureName: "media" });
 
   return (
     <Upload.Dragger
       multiple={true}
       fileList={fileList}
+      disabled={!hasMediaAccess}
       onChange={(f) => {
         if (f.event && f.event.percent === 100) handleDone(f.file.uid);
         setFileList(f.fileList);
@@ -89,7 +93,9 @@ export function DocumentsUploadComponent({
           <p className="ant-upload-drag-icon">
             <UploadOutlined />
           </p>
-          <p className="ant-upload-text">Click or drag files to this area to upload.</p>
+          <p className="ant-upload-text">
+            <LockWrapperComponent featureName="media">{t("documents.labels.dragtoupload")}</LockWrapperComponent>
+          </p>
           {!ignoreSizeLimit && (
             <Space wrap className="ant-upload-text">
               <Progress type="dashboard" percent={pct} size="small" />