feat: bulk transcations delete

packages/webapp/src/containers/Sales/CreditNotes/CreditNotesAlerts.tsx

@@ -18,6 +18,10 @@ const ReconcileCreditDeleteAlert = React.lazy(
     import('@/containers/Alerts/CreditNotes/ReconcileCreditNoteDeleteAlert'),
 );
 
+const CreditNoteBulkDeleteAlert = React.lazy(
+  () => import('@/containers/Alerts/CreditNotes/CreditNoteBulkDeleteAlert'),
+);
+
 /**
  * Credit notes alerts.
  */
@@ -38,4 +42,8 @@ export default [
     name: 'reconcile-credit-delete',
     component: ReconcileCreditDeleteAlert,
   },
+  {
+    name: 'credit-notes-bulk-delete',
+    component: CreditNoteBulkDeleteAlert,
+  },
 ];

packages/webapp/src/containers/Sales/CreditNotes/CreditNotesLanding/CreditNotesDataTable.tsx

@@ -33,6 +33,7 @@ import { DRAWERS } from '@/constants/drawers';
 function CreditNotesDataTable({
   // #withCreditNotesActions
   setCreditNotesTableState,
+  setCreditNotesSelectedRows,
 
   // #withAlertsActions
   openAlert,
@@ -79,6 +80,15 @@ function CreditNotesDataTable({
     [setCreditNotesTableState],
   );
 
+  // Handle selected rows change.
+  const handleSelectedRowsChange = React.useCallback(
+    (selectedFlatRows) => {
+      const selectedIds = selectedFlatRows?.map((row) => row.original.id) || [];
+      setCreditNotesSelectedRows(selectedIds);
+    },
+    [setCreditNotesSelectedRows],
+  );
+
   // Display create note empty status instead of the table.
   if (isEmptyStatus) {
     return <CreditNoteEmptyStatus />;
@@ -128,6 +138,8 @@ function CreditNotesDataTable({
         headerLoading={isCreditNotesLoading}
         progressBarLoading={isCreditNotesFetching}
         onFetchData={handleDataTableFetchData}
+        onSelectedRowsChange={handleSelectedRowsChange}
+        autoResetSelectedRows={false}
         manualSortBy={true}
         selectionColumn={true}
         noInitialFetch={true}

packages/webapp/src/containers/Sales/CreditNotes/CreditNotesLanding/components.tsx

@@ -80,19 +80,19 @@ export function StatusAccessor(creditNote) {
     <div>
       <Choose>
         <Choose.When condition={creditNote.is_open}>
-          <Tag intent={Intent.WARNING} round>
+          <Tag intent={Intent.WARNING} round minimal>
             <T id={'open'} />
           </Tag>
         </Choose.When>
 
         <Choose.When condition={creditNote.is_closed}>
-          <Tag intent={Intent.SUCCESS} round>
+          <Tag intent={Intent.SUCCESS} round minimal>
             <T id={'closed'} />
           </Tag>
         </Choose.When>
 
         <Choose.When condition={creditNote.is_draft}>
-          <Tag intent={Intent.NONE} round>
+          <Tag intent={Intent.NONE} round minimal>
             <T id={'draft'} />
           </Tag>
         </Choose.When>

packages/webapp/src/containers/Sales/CreditNotes/CreditNotesLanding/withCreditNotes.tsx

@@ -13,6 +13,7 @@ export default (mapState) => {
     const mapped = {
       creditNoteTableState: getCreditNoteTableState(state, props),
       creditNoteTableStateChanged: isCreditNoteTableChanged(state, props),
+      creditNotesSelectedRows: state.creditNotes?.selectedRows || [],
     };
     return mapState ? mapState(mapped, state, props) : mapped;
   };

packages/webapp/src/containers/Sales/CreditNotes/CreditNotesLanding/withCreditNotesActions.tsx

@@ -3,12 +3,14 @@ import { connect } from 'react-redux';
 import {
   setCreditNoteTableState,
   resetCreditNoteTableState,
+  setCreditNotesSelectedRows,
 } from '@/store/CreditNote/creditNote.actions';
 
 const mapDipatchToProps = (dispatch) => ({
   setCreditNotesTableState: (queries) =>
     dispatch(setCreditNoteTableState(queries)),
   resetCreditNotesTableState: () => dispatch(resetCreditNoteTableState()),
+  setCreditNotesSelectedRows: (selectedRows) => dispatch(setCreditNotesSelectedRows(selectedRows)),
 });
 
 export default connect(null, mapDipatchToProps);