UIU-3027: Update fee/fine actions column UX for accessibility (#2836)

folio-org · Jan 13, 2025 · dcd3640 · dcd3640
1 parent 99a9cec
commit dcd3640
Show file tree

Hide file tree

Showing 5 changed files with 8 additions and 15 deletions.
diff --git 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
@@ -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
@@ -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
@@ -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
@@ -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",