[UIREQ-1313] [UIREQ-1314] Display anonymized requesters

CHANGELOG.md

@@ -15,6 +15,8 @@
 * Migrate tag flag from mod-configuration to mod-settings. Refs UIREQ-1344.
 * Add 'subscribesTo' field for servicepoints in package.json. Refs UIREQ-1061.
 * *BREAKING* Migrate config values from mod-configuration and mod-settings. Refs UIREQ-1346.
+* Display Anonymized when viewing a requester/proxy for a single anonymized request. Refs UIREQ-1313.
+* Display Anonymized when listing requests. Refs UIREQ-1314
 
 ## [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/RequestForm.js

@@ -391,7 +391,7 @@ class RequestForm extends React.Component {
       const resourceTypeId = getResourceTypeId(isTitleLevelRequest);
       const resourceId = isTitleLevelRequest ? request.instanceId : request.itemId;
 
-      this.findRequestTypes(resourceId, request.requester.id || request.requesterId, resourceTypeId);
+      this.findRequestTypes(resourceId, request.requester?.id || request.requesterId, resourceTypeId);
     }
 
     if (prevQuery.userBarcode !== query.userBarcode) {

src/UserDetail.js

@@ -10,7 +10,7 @@ import {
 } from '@folio/stripes/components';
 
 import {
-  getFullName,
+  computeUserDisplayForRequest,
   userHighlightBox,
   getPatronGroup,
   isProxyFunctionalityAvailable,
@@ -25,62 +25,65 @@ class UserDetail extends React.Component {
       })
     ),
     pickupServicePoint: PropTypes.string,
-    proxy: PropTypes.shape({
-      id: PropTypes.string,
-      barcode: PropTypes.string,
-    }),
     request: PropTypes.shape({
       requesterId: PropTypes.string,
+      requester: PropTypes.shape({
+        id: PropTypes.string,
+        barcode: PropTypes.string,
+      }),
       proxyUserId: PropTypes.string,
+      proxy: PropTypes.shape({
+        id: PropTypes.string,
+        barcode: PropTypes.string,
+      }),
       fulfillmentPreference: PropTypes.string,
     }).isRequired,
     user: PropTypes.shape({
       id: PropTypes.string,
-      barcode: PropTypes.string,
     }).isRequired,
     isEcsTlrSettingEnabled: PropTypes.bool,
     selectedDelivery: PropTypes.bool,
   };
 
   static defaultProps = {
     pickupServicePoint: '',
-    proxy: {},
     selectedDelivery: false,
   };
 
   render() {
     const {
       user,
-      proxy,
       request,
       patronGroups,
       deliveryAddress,
       pickupServicePoint,
       selectedDelivery,
       isEcsTlrSettingEnabled,
     } = this.props;
-
-    const id = user?.id ?? request.requesterId;
-    const name = getFullName(user);
-    const barcode = user ? user.barcode : '';
     const patronGroup = getPatronGroup(user, patronGroups) || {};
+    const detailRequest = { ...request };
 
-    let proxyName;
-    let proxyBarcode;
-    let proxyId;
-    if (isProxyFunctionalityAvailable(isEcsTlrSettingEnabled) && proxy) {
-      proxyName = getFullName(proxy);
-      proxyBarcode = proxy?.barcode || <NoValue />;
-      proxyId = proxy.id || request.proxyUserId;
+    if (!isProxyFunctionalityAvailable(isEcsTlrSettingEnabled)) {
+      delete detailRequest.proxyUserId;
+      delete detailRequest.proxy;
     }
 
-    const proxySection = proxyId
-      ? userHighlightBox(<FormattedMessage id="ui-requests.requester.proxy" />, proxyName, proxyId, proxyBarcode)
+    const userDisplay = computeUserDisplayForRequest(detailRequest);
+    const proxySection = userDisplay.proxy
+      ? userHighlightBox(
+        <FormattedMessage id="ui-requests.requester.proxy" />,
+        userDisplay.proxy.proxyNameLink,
+        userDisplay.proxy.proxyBarcodeLink,
+      )
       : null;
 
     return (
       <div>
-        {userHighlightBox(<FormattedMessage id="ui-requests.requester.requester" />, name, id, barcode)}
+        {userHighlightBox(
+          <FormattedMessage id="ui-requests.requester.requester" />,
+          userDisplay.requesterNameLink,
+          userDisplay.requesterBarcodeLink,
+        )}
         <Row>
           <Col xs={4}>
             <KeyValue

src/UserDetail.test.js

@@ -8,7 +8,6 @@ import { NoValue } from '@folio/stripes/components';
 
 import UserDetail from './UserDetail';
 import {
-  getFullName,
   userHighlightBox,
   getPatronGroup,
 } from './utils';
@@ -17,21 +16,22 @@ const basicProps = {
   deliveryAddress: 'deliveryAddress',
   patronGroups: [],
   pickupServicePoint: 'SP',
-  proxy: {
-    barcode: 'proxyBarcode',
-    id: 'proxyId',
-    lastName: 'proxyLastName',
-  },
   request: {
     requesterId: 'requesterId',
+    requester: {
+      id: 'requesterId',
+      lastName: 'userLastName',
+      barcode: 'userBarcode',
+    },
     proxyUserId: 'proxyUserId',
+    proxy: {
+      id: 'proxyId',
+      barcode: 'proxyBarcode',
+      lastName: 'proxyLastName',
+    },
     fulfillmentPreference: 'fulfillmentPreference',
   },
-  user: {
-    id: 'userId',
-    barcode: 'userBarcode',
-    lastName: 'userLastName',
-  },
+  user: { id: 'userId' },
   selectedDelivery: true,
   isEcsTlrSettingEnabled: false,
 };
@@ -45,8 +45,19 @@ const labelIds = {
 };
 
 jest.mock('./utils', () => ({
-  getFullName: jest.fn((user) => user.lastName),
-  userHighlightBox: jest.fn((label, name, id, barcode) => (
+  computeUserDisplayForRequest: jest.fn((request) => ({
+    requesterNameLink: request.requester.lastName,
+    requesterBarcodeLink: request.requester.barcode,
+    ...(request.proxy ?
+      {
+        proxy: {
+          proxyNameLink: request.proxy.lastName,
+          proxyBarcodeLink: request.proxy.barcode
+        }
+      }
+      : {}),
+  })),
+  userHighlightBox: jest.fn((label, name, barcode) => (
     <>
       <div>{label}</div>
       <div>{barcode}</div>
@@ -71,22 +82,14 @@ describe('UserDetail', () => {
       );
     });
 
-    it('should trigger "getFullName" with correct argument', () => {
-      const expectedArgs = [basicProps.user, basicProps.proxy];
-
-      expectedArgs.forEach((user, index) => {
-        expect(getFullName).toHaveBeenNthCalledWith(index + 1, user);
-      });
-    });
-
     it('should trigger "getPatronGroup" with correct arguments', () => {
       expect(getPatronGroup).toHaveBeenCalledWith(basicProps.user, basicProps.patronGroups);
     });
 
     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],
+        [expect.anything(), basicProps.request.proxy.lastName, basicProps.request.proxy.barcode],
+        [expect.anything(), basicProps.request.requester.lastName, basicProps.request.requester.barcode],
       ];
 
       expectedArgs.forEach((user, index) => {
@@ -227,32 +230,10 @@ describe('UserDetail', () => {
   describe('when proxy is not provided', () => {
     const props = {
       ...basicProps,
-      proxy: null,
-    };
-
-    beforeEach(() => {
-      render(
-        <UserDetail {...props} />
-      );
-    });
-
-    it('should not render proxy label', () => {
-      const proxyLabel = screen.queryByText(labelIds.proxy);
-
-      expect(proxyLabel).toBeNull();
-    });
-  });
-
-  describe('when proxy id and proxy user id are not provided', () => {
-    const props = {
-      ...basicProps,
-      proxy: {
-        ...basicProps.proxy,
-        id: undefined,
-      },
       request: {
         ...basicProps.request,
-        proxyUserId: undefined,
+        proxyUserId: null,
+        proxy: null,
       },
     };
 
@@ -268,24 +249,4 @@ describe('UserDetail', () => {
       expect(proxyLabel).toBeNull();
     });
   });
-
-  describe('when proxy barcode is not provided', () => {
-    const props = {
-      ...basicProps,
-      proxy: {
-        ...basicProps.proxy,
-        barcode: undefined,
-      },
-    };
-
-    beforeEach(() => {
-      render(
-        <UserDetail {...props} />
-      );
-    });
-
-    it('should render "NoValue" component once', () => {
-      expect(NoValue).toBeCalledTimes(1);
-    });
-  });
 });

src/UserForm.js

@@ -12,7 +12,7 @@ import {
 import { ProxyManager } from '@folio/stripes/smart-components';
 
 import {
-  getFullName,
+  computeUserDisplayForRequest,
   userHighlightBox,
   isProxyFunctionalityAvailable,
 } from './utils';
@@ -41,7 +41,6 @@ class UserForm extends React.Component {
 
   static defaultProps = {
     patronGroup: '',
-    proxy: {},
   };
 
   constructor(props) {
@@ -58,28 +57,28 @@ class UserForm extends React.Component {
       isEcsTlrSettingEnabled,
     } = this.props;
     const isProxyAvailable = isProxyFunctionalityAvailable(isEcsTlrSettingEnabled);
-    const id = user?.id ?? request.requesterId;
-    const name = getFullName(user);
-    const barcode = user.barcode;
+    const pseudoRequest = {
+      ...request,
+      requesterId: user?.id ?? request.requesterId,
+      requester: user,
+    };
     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;
+      pseudoRequest.proxyUserId = proxy.id;
+      pseudoRequest.proxy = proxy;
     }
 
-    const proxySection = proxyId && proxyId !== id
-      ? userHighlightBox(<FormattedMessage id="ui-requests.requester.proxy" />, name, id, barcode)
+    const userDisplay = computeUserDisplayForRequest(pseudoRequest);
+
+    const proxySection = userDisplay.proxy && pseudoRequest.proxyUserId !== pseudoRequest.requesterId
+      ? userHighlightBox(<FormattedMessage id="ui-requests.requester.proxy" />, userDisplay.requesterNameLink, userDisplay.requesterBarcodeLink)
       : null;
 
-    const userSection = proxyId
-      ? userHighlightBox(<FormattedMessage id="ui-requests.requester.requester" />, proxyName, proxyId, proxyBarcode)
-      : userHighlightBox(<FormattedMessage id="ui-requests.requester.requester" />, name, id, barcode);
+    const userSection = userDisplay.proxy
+      ? userHighlightBox(<FormattedMessage id="ui-requests.requester.requester" />, userDisplay.proxy.proxyNameLink, userDisplay.proxy.proxyBarcodeLink)
+      : userHighlightBox(<FormattedMessage id="ui-requests.requester.requester" />, userDisplay.requesterNameLink, userDisplay.requesterBarcodeLink);
 
     return (
       <div>
@@ -95,7 +94,7 @@ class UserForm extends React.Component {
         {isProxyManagerAvailable &&
           <this.connectedProxyManager
             patron={user}
-            proxy={proxy}
+            proxy={proxy || {}}
             onSelectPatron={this.props.onSelectProxy}
             onClose={this.props.onCloseProxy}
           /> }