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/bills-list-table/bills-list-table.component.jsx

@@ -15,6 +15,8 @@ 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";
 
 const mapStateToProps = createStructuredSelector({
   jobRO: selectJobReadOnly,
@@ -170,6 +172,8 @@ export function BillsListTableComponent({
         )
     : [];
 
+  const hasBillsAccess = HasFeatureAccess({ bodyshop, featureName: "bills" });
+
   return (
     <Card
       title={t("bills.labels.bills")}
@@ -181,6 +185,7 @@ export function BillsListTableComponent({
           {job && job.converted ? (
             <>
               <Button
+                disabled={!hasBillsAccess}
                 onClick={() => {
                   setBillEnterContext({
                     actions: { refetch: billsQuery.refetch },
@@ -190,9 +195,10 @@ export function BillsListTableComponent({
                   });
                 }}
               >
-                {t("jobs.actions.postbills")}
+                <LockerWrapperComponent featureName="bills">{t("jobs.actions.postbills")}</LockerWrapperComponent>
               </Button>
               <Button
+                disabled={!hasBillsAccess}
                 onClick={() => {
                   setReconciliationContext({
                     actions: { refetch: billsQuery.refetch },
@@ -203,7 +209,7 @@ export function BillsListTableComponent({
                   });
                 }}
               >
-                {t("jobs.actions.reconcile")}
+                <LockerWrapperComponent featureName="bills"> {t("jobs.actions.reconcile")}</LockerWrapperComponent>
               </Button>
             </>
           ) : null}
@@ -211,6 +217,7 @@ export function BillsListTableComponent({
           <Input.Search
             placeholder={t("general.labels.search")}
             value={searchText}
+            disabled={!hasBillsAccess}
             onChange={(e) => {
               e.preventDefault();
               setSearchText(e.target.value);
@@ -226,8 +233,20 @@ export function BillsListTableComponent({
         }}
         columns={columns}
         rowKey="id"
-        dataSource={filteredBills}
+        dataSource={hasBillsAccess ? filteredBills : []}
         onChange={handleTableChange}
+        locale={{
+          ...(!hasBillsAccess && {
+            emptyText: (
+              <div>
+                Upsell
+                {
+                  //TODO:Upsell
+                }
+              </div>
+            )
+          })
+        }}
       />
     </Card>
   );