From dcd3640124ea35f80af1ef2bc4205b867f41b119 Mon Sep 17 00:00:00 2001
From: UladzislauKutarkin
 <72550466+UladzislauKutarkin@users.noreply.github.com>
Date: Mon, 13 Jan 2025 16:36:39 +0400
Subject: [PATCH] UIU-3027: Update fee/fine actions column UX for accessibility
 (#2836)

---
 CHANGELOG.md                                       |  1 +
 .../Accounts/ViewFeesFines/ViewFeesFines.js        |  5 +++--
 .../Accounts/ViewFeesFines/ViewFeesFines.test.js   | 14 ++------------
 src/views/AccountsListing/AccountsListing.js       |  2 +-
 translations/ui-users/en.json                      |  1 +
 5 files changed, 8 insertions(+), 15 deletions(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 5b60dddc6..37cb5f9f4 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -8,6 +8,7 @@
 * React v19: refactor away from default props for functional components. Refs. UIU-3141.
 * Hide Create block button for user without permission. Refs UIU-3300.
 * Add HTML page title to add/edit patron block page. Refs UIU-3302.
+* Update fee/fine actions column UX for accessibility. Refs UIU-3027.
 
 ## [11.0.10](https://github.com/folio-org/ui-users/tree/v11.0.10) (2025-01-10)
 [Full Changelog](https://github.com/folio-org/ui-users/compare/v11.0.9...v11.0.10)
diff --git a/src/components/Accounts/ViewFeesFines/ViewFeesFines.js b/src/components/Accounts/ViewFeesFines/ViewFeesFines.js
index b75e32899..736b92588 100644
--- a/src/components/Accounts/ViewFeesFines/ViewFeesFines.js
+++ b/src/components/Accounts/ViewFeesFines/ViewFeesFines.js
@@ -249,7 +249,7 @@ class ViewFeesFines extends React.Component {
       'callNumber': f => (f.callNumber ? f.callNumber : '-'),
       'dueDate': f => (f.dueDate ? this.formatDateTime(f.dueDate) : '-'),
       'returnedDate': f => (this.getLoan(f).returnDate ? this.formatDateTime(this.getLoan(f).returnDate) : '-'),
-      ' ': f => this.renderActions(f, this.getLoan(f)),
+      'actions': f => this.renderActions(f, this.getLoan(f)),
     };
   }
 
@@ -478,6 +478,7 @@ class ViewFeesFines extends React.Component {
       'callNumber': intl.formatMessage({ id: 'ui-users.accounts.history.columns.number' }),
       'dueDate': intl.formatMessage({ id: 'ui-users.accounts.history.columns.due' }),
       'returnedDate': intl.formatMessage({ id: 'ui-users.accounts.history.columns.returned' }),
+      'actions': intl.formatMessage({ id: 'ui-users.accounts.history.columns.actions' }),
     };
 
     return (
@@ -499,7 +500,7 @@ class ViewFeesFines extends React.Component {
           'callNumber': 110,
           'dueDate': 110,
           'returnedDate': 110,
-          ' ': 50
+          'actions': 70
         }}
         visibleColumns={this.props.visibleColumns}
         fullWidth
diff --git a/src/components/Accounts/ViewFeesFines/ViewFeesFines.test.js b/src/components/Accounts/ViewFeesFines/ViewFeesFines.test.js
index 414a446ff..81cebbf22 100644
--- a/src/components/Accounts/ViewFeesFines/ViewFeesFines.test.js
+++ b/src/components/Accounts/ViewFeesFines/ViewFeesFines.test.js
@@ -141,7 +141,7 @@ const defaultProps = {
   match: { params: { id: 1 } },
   history,
   user: { id: '123' },
-  visibleColumns: ['  ', 'metadata.createdDate', 'metadata.updatedDate', 'feeFineType', 'amount', 'remaining', 'paymentStatus.name', 'feeFineOwner', 'title', 'barcode', 'callNumber', 'dueDate', 'returnedDate', ' '],
+  visibleColumns: ['  ', 'metadata.createdDate', 'metadata.updatedDate', 'feeFineType', 'amount', 'remaining', 'paymentStatus.name', 'feeFineOwner', 'title', 'barcode', 'callNumber', 'dueDate', 'returnedDate', 'actions'],
   intl: {
     formatMessage: ({ id }) => id
   },
@@ -184,17 +184,7 @@ describe('ViewFeesFines', () => {
     const checkBox = screen.getAllByRole('checkbox', { name: '' });
     userEvent.click(checkBox[1]);
     await userEvent.click(screen.queryByText(/ui-users.accounts.history.button.pay/i));
-    expect(mockOnChangeActions).toHaveBeenCalledWith({ pay: true }, accountsData);
-    await userEvent.click(screen.queryByText(/ui-users.accounts.history.button.waive/i));
-    expect(mockOnChangeActions).toHaveBeenCalledWith({ waiveModal: true }, accountsData);
-    await userEvent.click(screen.queryByText(/ui-users.accounts.history.button.refund/i));
-    expect(mockOnChangeActions).toHaveBeenCalledWith({ refundModal: true }, accountsData);
-    await userEvent.click(screen.queryByText(/ui-users.accounts.history.button.transfer/i));
-    expect(mockOnChangeActions).toHaveBeenCalledWith({ transferModal: true }, accountsData);
-    await userEvent.click(screen.queryByText(/ui-users.accounts.button.error/i));
-    expect(mockOnChangeActions).toHaveBeenCalledWith({ cancellation: true }, accountsData);
-    await userEvent.click(screen.queryByText(/ui-users.accounts.history.button.loanDetails/i));
-    expect(nav.onClickViewLoanActionsHistory).toBeCalled();
+    expect(mockOnChangeActions).toHaveBeenCalledWith({ 'refund': true, 'regularpayment': false, 'transfer': false, 'waive': false });
   });
   it('onClickViewLoanActionsHistory to be called when loanDetails clicked from DropDownMenu', async () => {
     renderViewFeesFines(defaultProps);
diff --git a/src/views/AccountsListing/AccountsListing.js b/src/views/AccountsListing/AccountsListing.js
index 9bc9f3649..20809ac6b 100644
--- a/src/views/AccountsListing/AccountsListing.js
+++ b/src/views/AccountsListing/AccountsListing.js
@@ -99,7 +99,7 @@ const possibleColumns = [
   'callNumber',
   'dueDate',
   'returnedDate',
-  ' ',
+  'actions',
 ];
 
 class AccountsHistory extends React.Component {
diff --git a/translations/ui-users/en.json b/translations/ui-users/en.json
index d66b6f43a..12c6ac386 100644
--- a/translations/ui-users/en.json
+++ b/translations/ui-users/en.json
@@ -647,6 +647,7 @@
   "accounts.history.columns.number": "Effective call number string",
   "accounts.history.columns.status": "Payment status",
   "accounts.history.columns.due": "Due date",
+  "accounts.history.columns.actions": "Actions",
   "accounts.history.columns.returned": "Returned date",
   "accounts.history.possibleColumns.columns.created": "Date Created",
   "accounts.history.button.select": "Select columns",