IO-3020 IO-3036 Add upsell components to several components. Add upsell mask wrapper.

client/src/components/jobs-documents-gallery/jobs-documents-gallery.component.jsx

@@ -18,6 +18,7 @@ import { HasFeatureAccess } from "../feature-wrapper/feature-wrapper.component";
 import { connect } from "react-redux";
 import { createStructuredSelector } from "reselect";
 import { selectBodyshop } from "../../redux/user/user.selectors";
+import UpsellComponent, { upsellEnum } from "../upsell/upsell.component";
 const mapStateToProps = createStructuredSelector({
   bodyshop: selectBodyshop
 });
@@ -114,7 +115,7 @@ function JobsDocumentsComponent({
     setgalleryImages(documents);
   }, [data, setgalleryImages, t]);
   const hasMediaAccess = HasFeatureAccess({ bodyshop, featureName: "media" });
-
+  const hasMobileAccess = HasFeatureAccess({ bodyshop, featureName: "mobile" });
   return (
     <div>
       <Row gutter={[16, 16]}>
@@ -129,9 +130,14 @@ function JobsDocumentsComponent({
             {!billId && <JobsDocumentsGalleryReassign galleryImages={galleryImages} callback={refetch} />}
           </Space>
         </Col>
-        {
-          //TODO:Upsell
-        }
+        {!hasMediaAccess && (
+          <Col span={24}>
+            <Card>
+              <UpsellComponent upsell={upsellEnum.media.general} />
+            </Card>
+          </Col>
+        )}
+
         <Col span={24}>
           <Card>
             <DocumentsUploadComponent
@@ -143,7 +149,13 @@ function JobsDocumentsComponent({
             />
           </Card>
         </Col>
-
+        {hasMediaAccess && !hasMobileAccess && (
+          <Col span={24}>
+            <Card>
+              <UpsellComponent upsell={upsellEnum.media.mobile} />
+            </Card>
+          </Col>
+        )}
         <Col span={24}>
           <Card title={t("jobs.labels.documents-images")}>
             <Gallery