IO-3020 IO-3036 Add basic upsell component and blur out reports.

client/src/components/bills-list-table/bills-list-table.component.jsx

@@ -1,7 +1,8 @@
 import { EditFilled, SyncOutlined } from "@ant-design/icons";
 import { Button, Card, Checkbox, Input, Space, Table } from "antd";
-import React, { useState } from "react";
+import React, { useRef, useState } from "react";
 import { useTranslation } from "react-i18next";
+import { FaTasks } from "react-icons/fa";
 import { connect } from "react-redux";
 import { createStructuredSelector } from "reselect";
 import { selectJobReadOnly } from "../../redux/application/application.selectors";
@@ -13,10 +14,11 @@ import { alphaSort, dateSort } from "../../utils/sorters";
 import { TemplateList } from "../../utils/TemplateConstants";
 import BillDeleteButton from "../bill-delete-button/bill-delete-button.component";
 import BillDetailEditReturnComponent from "../bill-detail-edit/bill-detail-edit-return.component";
-import PrintWrapperComponent from "../print-wrapper/print-wrapper.component";
-import { FaTasks } from "react-icons/fa";
 import { HasFeatureAccess } from "../feature-wrapper/feature-wrapper.component";
 import LockerWrapperComponent from "../lock-wrapper/lock-wrapper.component";
+import PrintWrapperComponent from "../print-wrapper/print-wrapper.component";
+import UpsellComponent from "../upsell/upsell.component";
+import upsellEnum from "../upsell/upsell.enum";
 
 const mapStateToProps = createStructuredSelector({
   jobRO: selectJobReadOnly,
@@ -59,6 +61,7 @@ export function BillsListTableComponent({
   // const search = queryString.parse(useLocation().search);
   // const selectedBill = search.billid;
   const [searchText, setSearchText] = useState("");
+  const containerRef = useRef(null);
 
   const Templates = TemplateList("bill");
   const bills = billsQuery.data ? billsQuery.data.bills : [];
@@ -237,14 +240,7 @@ export function BillsListTableComponent({
         onChange={handleTableChange}
         locale={{
           ...(!hasBillsAccess && {
-            emptyText: (
-              <div>
-                Upsell
-                {
-                  //TODO:Upsell
-                }
-              </div>
-            )
+            emptyText: <UpsellComponent upsell={upsellEnum.bills.table} />
           })
         }}
       />