UIREQ-1313: Display Anonymized Requesters

CHANGELOG.md

@@ -12,6 +12,7 @@
 * Display loan type on the Request Detail page, as well as New Request page. Refs UIREQ-1328.
 * When creating or viewing a request, show whether the a loan on the item would be use-at-location. Fixes UIREQ-1327.
 * Added global permissions for get read-access to values such as tenant’s locale, timezone, and currency. Refs UIREQ-1341.
+* Display Anonymized when viewing a requester/proxy for a single anonymized loan. Refs UIREQ-1313.
 
 ## [12.0.4] (https://github.com/folio-org/ui-requests/tree/v12.0.4) (2025-10-29)
 [Full Changelog](https://github.com/folio-org/ui-requests/compare/v12.0.3...v12.0.4)

src/UserDetail.js

@@ -9,9 +9,8 @@ import {
   NoValue,
 } from '@folio/stripes/components';
 
+import UserHighlightBox from './components/UserHighlightBox';
 import {
-  getFullName,
-  userHighlightBox,
   getPatronGroup,
   isProxyFunctionalityAvailable,
 } from './utils';
@@ -61,26 +60,28 @@ class UserDetail extends React.Component {
     } = this.props;
 
     const id = user?.id ?? request.requesterId;
-    const name = getFullName(user);
-    const barcode = user ? user.barcode : '';
     const patronGroup = getPatronGroup(user, patronGroups) || {};
 
-    let proxyName;
-    let proxyBarcode;
     let proxyId;
     if (isProxyFunctionalityAvailable(isEcsTlrSettingEnabled) && proxy) {
-      proxyName = getFullName(proxy);
-      proxyBarcode = proxy?.barcode || <NoValue />;
       proxyId = proxy.id || request.proxyUserId;
     }
 
     const proxySection = proxyId
-      ? userHighlightBox(<FormattedMessage id="ui-requests.requester.proxy" />, proxyName, proxyId, proxyBarcode)
+      ? <UserHighlightBox
+        title={<FormattedMessage id="ui-requests.requester.proxy" />}
+        userId={proxyId}
+        user={proxy}
+      />
       : null;
 
     return (
       <div>
-        {userHighlightBox(<FormattedMessage id="ui-requests.requester.requester" />, name, id, barcode)}
+        <UserHighlightBox
+          title={<FormattedMessage id="ui-requests.requester.requester" />}
+          userId={id}
+          user={user}
+        />
         <Row>
           <Col xs={4}>
             <KeyValue

src/UserDetail.test.js

@@ -1,3 +1,4 @@
+import { MemoryRouter } from 'react-router-dom';
 import {
   render,
   screen,
@@ -7,9 +8,9 @@ import {
 import { NoValue } from '@folio/stripes/components';
 
 import UserDetail from './UserDetail';
+import * as UserHighlightBox from './components/UserHighlightBox/UserHighlightBox';
 import {
   getFullName,
-  userHighlightBox,
   getPatronGroup,
 } from './utils';
 
@@ -46,28 +47,30 @@ const labelIds = {
 
 jest.mock('./utils', () => ({
   getFullName: jest.fn((user) => user.lastName),
-  userHighlightBox: jest.fn((label, name, id, barcode) => (
-    <>
-      <div>{label}</div>
-      <div>{barcode}</div>
-    </>
-  )),
   getPatronGroup: jest.fn(() => ({
     group: 'testPatronGroup',
   })),
   isProxyFunctionalityAvailable: jest.fn(() => true),
 }));
 
 describe('UserDetail', () => {
+  let userHighlightBoxSpy;
+  beforeEach(() => {
+    userHighlightBoxSpy = jest.spyOn(UserHighlightBox, 'default');
+  });
+
   afterEach(() => {
     NoValue.mockClear();
+    userHighlightBoxSpy.mockClear();
     cleanup();
   });
 
   describe('when all data provided', () => {
     beforeEach(() => {
       render(
-        <UserDetail {...basicProps} />
+        <MemoryRouter>
+          <UserDetail {...basicProps} />
+        </MemoryRouter>
       );
     });
 
@@ -83,14 +86,14 @@ describe('UserDetail', () => {
       expect(getPatronGroup).toHaveBeenCalledWith(basicProps.user, basicProps.patronGroups);
     });
 
-    it('should trigger "userHighlightBox" with correct arguments', () => {
+    it('should trigger "UserHighlightBox" with correct arguments', () => {
       const expectedArgs = [
-        [expect.anything(), basicProps.proxy.lastName, basicProps.proxy.id, basicProps.proxy.barcode],
-        [expect.anything(), basicProps.user.lastName, basicProps.user.id, basicProps.user.barcode],
+        { title: expect.anything(), userId:basicProps.user.id, user:basicProps.user },
+        { title: expect.anything(), userId:basicProps.proxy.id, user:basicProps.proxy },
       ];
 
       expectedArgs.forEach((user, index) => {
-        expect(userHighlightBox).toHaveBeenNthCalledWith(index + 1, ...user);
+        expect(userHighlightBoxSpy).toHaveBeenNthCalledWith(index + 1, user, {});
       });
     });
 
@@ -139,7 +142,9 @@ describe('UserDetail', () => {
 
     beforeEach(() => {
       render(
-        <UserDetail {...props} />
+        <MemoryRouter>
+          <UserDetail {...props} />
+        </MemoryRouter>
       );
     });
 
@@ -156,7 +161,9 @@ describe('UserDetail', () => {
 
     beforeEach(() => {
       render(
-        <UserDetail {...props} />
+        <MemoryRouter>
+          <UserDetail {...props} />
+        </MemoryRouter>
       );
     });
 
@@ -182,7 +189,9 @@ describe('UserDetail', () => {
 
     beforeEach(() => {
       render(
-        <UserDetail {...props} />
+        <MemoryRouter>
+          <UserDetail {...props} />
+        </MemoryRouter>
       );
     });
 
@@ -202,7 +211,9 @@ describe('UserDetail', () => {
 
     beforeEach(() => {
       render(
-        <UserDetail {...props} />
+        <MemoryRouter>
+          <UserDetail {...props} />
+        </MemoryRouter>
       );
     });
 
@@ -215,7 +226,9 @@ describe('UserDetail', () => {
     beforeEach(() => {
       getPatronGroup.mockReturnValueOnce(undefined);
       render(
-        <UserDetail {...basicProps} />
+        <MemoryRouter>
+          <UserDetail {...basicProps} />
+        </MemoryRouter>
       );
     });
 
@@ -232,7 +245,9 @@ describe('UserDetail', () => {
 
     beforeEach(() => {
       render(
-        <UserDetail {...props} />
+        <MemoryRouter>
+          <UserDetail {...props} />
+        </MemoryRouter>
       );
     });
 
@@ -258,7 +273,9 @@ describe('UserDetail', () => {
 
     beforeEach(() => {
       render(
-        <UserDetail {...props} />
+        <MemoryRouter>
+          <UserDetail {...props} />
+        </MemoryRouter>
       );
     });
 
@@ -280,7 +297,9 @@ describe('UserDetail', () => {
 
     beforeEach(() => {
       render(
-        <UserDetail {...props} />
+        <MemoryRouter>
+          <UserDetail {...props} />
+        </MemoryRouter>
       );
     });
 

src/UserForm.js

@@ -11,9 +11,8 @@ import {
 } from '@folio/stripes/components';
 import { ProxyManager } from '@folio/stripes/smart-components';
 
+import UserHighlightBox from './components/UserHighlightBox';
 import {
-  getFullName,
-  userHighlightBox,
   isProxyFunctionalityAvailable,
 } from './utils';
 
@@ -59,27 +58,33 @@ class UserForm extends React.Component {
     } = this.props;
     const isProxyAvailable = isProxyFunctionalityAvailable(isEcsTlrSettingEnabled);
     const id = user?.id ?? request.requesterId;
-    const name = getFullName(user);
-    const barcode = user.barcode;
     const isEditable = !!request;
     const isProxyManagerAvailable = isProxyAvailable && !isEditable;
 
-    let proxyName;
-    let proxyBarcode;
     let proxyId;
     if (isProxyAvailable && proxy) {
-      proxyName = getFullName(proxy);
-      proxyBarcode = proxy?.barcode || '-';
       proxyId = proxy.id;
     }
 
     const proxySection = proxyId && proxyId !== id
-      ? userHighlightBox(<FormattedMessage id="ui-requests.requester.proxy" />, name, id, barcode)
+      ? <UserHighlightBox
+        title={<FormattedMessage id="ui-requests.requester.proxy" />}
+        userId={id}
+        user={user}
+      />
       : null;
 
     const userSection = proxyId
-      ? userHighlightBox(<FormattedMessage id="ui-requests.requester.requester" />, proxyName, proxyId, proxyBarcode)
-      : userHighlightBox(<FormattedMessage id="ui-requests.requester.requester" />, name, id, barcode);
+      ? <UserHighlightBox
+        title={<FormattedMessage id="ui-requests.requester.requester" />}
+        userId={proxyId}
+        user={proxy}
+      />
+      : <UserHighlightBox
+        title={<FormattedMessage id="ui-requests.requester.requester" />}
+        userId={id}
+        user={user}
+      />;
 
     return (
       <div>