UIU-2966 - display item title and barcode as text for dcb virtual ite…

…m. (#2597)

* UIU-2966 - initial commit to display item title and barcode as text for dcb virtual item.

* UIU-2966 - render item title and barcode as normal text when item is dcb item.

* UIU-2966 - fix review comments

* UIU-2966 - fix linting errors

CHANGELOG.md

@@ -8,6 +8,7 @@
 * Fix problem with Date field in User app reports does not populate when a first entry was cleared. Refs UIU-2991.
 * Hide all actionalble buttons on user details pane for DCB Virtual user. Refs UIU-2987.
 * Open loan page modifications for a virtual patron. Refs UIU-2988.
+* Display item title and barcode as text when the item is dcb virtual item. Refs UIU-2966.
 
 ## [10.0.4](https://github.com/folio-org/ui-users/tree/v10.0.4) (2023-11-10)
 [Full Changelog](https://github.com/folio-org/ui-users/compare/v10.0.3...v10.0.4)

src/views/LoanDetails/LoanDetails.js

@@ -43,6 +43,7 @@ import {
   accountsMatchStatus,
   checkUserActive,
   isDcbUser,
+  isDCBItem,
 } from '../../components/util';
 import { itemStatuses, loanActions, refundClaimReturned } from '../../constants';
 import {
@@ -298,23 +299,57 @@ class LoanDetails extends React.Component {
 
   showTitle(loan) {
     this.loan = loan;
-    const title = `${get(this.loan, ['item', 'title'], '')}`;
+    const title = get(this.loan, ['item', 'title'], '');
+    const instanceId = get(this.loan, ['item', 'instanceId'], '');
+    const holdingsRecordId = get(this.loan, ['item', 'holdingsRecordId'], '');
+    const isVirtualItem = isDCBItem({ instanceId, holdingsRecordId });
+    const titleLengthCheck = 77;
+
     if (title) {
-      const titleTodisplay = (title.length >= 77) ? `${title.substring(0, 77)}...` : title;
-      return <KeyValue
+      const titleTodisplay = (title.length >= titleLengthCheck) ? `${title.substring(0, titleLengthCheck)}...` : title;
+      const formattedValue = `${titleTodisplay} (${get(this.loan, ['item', 'materialType', 'name'])})`;
+      return (
+        <KeyValue
+          data-testId="item-title"
+          label={<FormattedMessage id="ui-users.loans.columns.title" />}
+          value={
+            isVirtualItem ?
+              formattedValue :
+              <Link to={`/inventory/view/${instanceId}`}>
+                {formattedValue}
+              </Link>
+              }
+        />
+      );
+    }
+
+    return (
+      <KeyValue
         label={<FormattedMessage id="ui-users.loans.columns.title" />}
-        value={(
-          <Link to={`/inventory/view/${get(this.loan, ['item', 'instanceId'], '')}`}>
-            {`${titleTodisplay} (${get(this.loan, ['item', 'materialType', 'name'])})`}
-          </Link>
-        )}
-      />;
+        value={<NoValue />}
+      />
+    );
+  }
+
+  showBarcode(loan) {
+    this.loan = loan;
+    const instanceId = get(this.loan, ['item', 'instanceId'], '');
+    const holdingsRecordId = get(this.loan, ['item', 'holdingsRecordId'], '');
+    const itemId = get(this.loan, ['itemId'], '');
+    const itemBarcode = get(loan, ['item', 'barcode']);
+    const isVirtualItem = isDCBItem({ instanceId, holdingsRecordId });
+
+    if (isVirtualItem) {
+      return itemBarcode;
     }
 
-    return <KeyValue
-      label={<FormattedMessage id="ui-users.loans.columns.title" />}
-      value="-"
-    />;
+    return (
+      <Link
+        to={`/inventory/view/${instanceId}/${holdingsRecordId}/${itemId}`}
+      >
+        {itemBarcode}
+      </Link>
+    );
   }
 
   renderChangeDueDateDialog() {
@@ -627,8 +662,9 @@ class LoanDetails extends React.Component {
               </Col>
               <Col xs={2}>
                 <KeyValue
+                  data-testId="item-barcode"
                   label={<FormattedMessage id="ui-users.loans.columns.barcode" />}
-                  value={<Link to={`/inventory/view/${get(loan, ['item', 'instanceId'], '')}/${get(loan, ['item', 'holdingsRecordId'], '')}/${get(loan, ['itemId'], '')}`}>{get(loan, ['item', 'barcode'], '')}</Link>}
+                  value={this.showBarcode(loan)}
                 />
               </Col>
               <Col xs={2}>

src/views/LoanDetails/LoanDetails.test.js

@@ -1,11 +1,15 @@
 // eslint-disable-next-line import/no-extraneous-dependencies
-import { screen } from '@folio/jest-config-stripes/testing-library/react';
+import { screen, within } from '@folio/jest-config-stripes/testing-library/react';
 import userEvent from '@folio/jest-config-stripes/testing-library/user-event';
 // eslint-disable-next-line import/no-extraneous-dependencies
 import okapiOpenLoan from 'fixtures/openLoan';
 import okapiCurrentUser from 'fixtures/okapiCurrentUser';
 import renderWithRouter from 'helpers/renderWithRouter';
 import LoanDetails from './LoanDetails';
+import {
+  DCB_INSTANCE_ID,
+  DCB_HOLDINGS_RECORD_ID,
+} from '../../constants';
 
 jest.useFakeTimers('legacy');
 jest.mock('react-intl', () => ({
@@ -539,4 +543,38 @@ describe('LoanDetails', () => {
       expect(screen.getByRole('button', { name:'ui-users.loans.newStaffInfo' })).toBeDisabled();
     });
   });
+
+  describe('when item is dcb item', () => {
+    const virtualItemPropsData = {
+      ...propsData,
+      loan: {
+        ...okapiOpenLoan,
+        item: {
+          ...okapiOpenLoan.item,
+          instanceId: DCB_INSTANCE_ID,
+          holdingsRecordId: DCB_HOLDINGS_RECORD_ID,
+          title: 'Vitual item',
+          barcode: 'virtual barcode'
+        }
+      }
+    };
+
+    it('render item title not as a link but as text', () => {
+      renderLoanProxyDetails({
+        ...virtualItemPropsData,
+      });
+
+      expect(screen.queryByRole('link', { name: /Virtual item/i })).toBeNull();
+      expect(within(screen.getByTestId('item-title')).queryByText('Virtual Item')).toBeDefined();
+    });
+
+    it('render item barcode as text', () => {
+      renderLoanProxyDetails({
+        ...virtualItemPropsData,
+      });
+
+      expect(screen.queryByRole('link', { name: /Virtual barcode/i })).toBeNull();
+      expect(within(screen.getByTestId('item-barcode')).queryByText('Virtual barcode')).toBeDefined();
+    });
+  });
 });