wip

packages/webapp/src/containers/Sales/Invoices/InvoicesLanding/InvoicesActionsBar.tsx

@@ -123,6 +123,22 @@ function InvoiceActionsBar({
     openAlert('invoices-bulk-delete', { invoicesIds: invoicesSelectedRows });
   };
 
+  if (!isEmpty(invoicesSelectedRows)) {
+    return (
+      <DashboardActionsBar>
+        <NavbarGroup>
+          <Button
+            className={Classes.MINIMAL}
+            icon={<Icon icon="trash-16" iconSize={16} />}
+            text={<T id={'delete'} />}
+            intent={Intent.DANGER}
+            onClick={handleBulkDelete}
+          />
+        </NavbarGroup>
+      </DashboardActionsBar>
+    );
+  }
+
   return (
     <DashboardActionsBar>
       <NavbarGroup>
@@ -155,16 +171,6 @@ function InvoiceActionsBar({
         </AdvancedFilterPopover>
 
         <NavbarDivider />
-
-        <If condition={!isEmpty(invoicesSelectedRows)}>
-          <Button
-            className={Classes.MINIMAL}
-            icon={<Icon icon={'trash-16'} iconSize={16} />}
-            text={<T id={'delete'} />}
-            intent={Intent.DANGER}
-            onClick={handleBulkDelete}
-          />
-        </If>
         <Button
           className={Classes.MINIMAL}
           icon={<Icon icon={'print-16'} iconSize={'16'} />}
@@ -224,9 +230,9 @@ export default compose(
   withInvoiceActions,
   withSettingsActions,
   withAlertActions,
-  withInvoices(({ invoicesTableState }) => ({
+  withInvoices(({ invoicesTableState, invoicesSelectedRows }) => ({
     invoicesFilterRoles: invoicesTableState.filterRoles,
-    invoicesSelectedRows: invoicesTableState?.selectedRows || [],
+    invoicesSelectedRows,
   })),
   withSettings(({ invoiceSettings }) => ({
     invoicesTableSize: invoiceSettings?.tableSize,

packages/webapp/src/containers/Sales/Invoices/InvoicesLanding/withInvoices.tsx

@@ -3,17 +3,19 @@ import { connect } from 'react-redux';
 import {
   getInvoicesTableStateFactory,
   isInvoicesTableStateChangedFactory,
+  getInvoicesSelectedRowsFactory,
 } from '@/store/Invoice/invoices.selector';
 
 export default (mapState) => {
   const getInvoicesTableState = getInvoicesTableStateFactory();
   const isInvoicesTableStateChanged = isInvoicesTableStateChangedFactory();
+  const getSelectedRows = getInvoicesSelectedRowsFactory();
 
   const mapStateToProps = (state, props) => {
     const mapped = {
       invoicesTableState: getInvoicesTableState(state, props),
       invoicesTableStateChanged: isInvoicesTableStateChanged(state, props),
-      invoicesSelectedRows: state.invoices?.selectedRows || [],
+      invoicesSelectedRows: getSelectedRows(state, props),
     };
     return mapState ? mapState(mapped, state, props) : mapped;
   };