UITEN-281: Add Routing service point option with Confirm modal to Service point page(ECS only)

CHANGELOG.md

@@ -1,6 +1,10 @@
 # Change history for ui-tenant-settings
 
 ## 9.1.0 (IN PROGRESS)
+* [UITEN-281](https://folio-org.atlassian.net/browse/UITEN-281) Add Routing service point option to Service point page(ECS only).
+* [UITEN-285](https://folio-org.atlassian.net/browse/UITEN-285) Disable edit of Routing service point field (ECS only).
+* [UITEN-294](https://folio-org.atlassian.net/browse/UITEN-294) Show routing service points on settings -> tenant -> servicePoints.
+* [UITEN-292](https://folio-org.atlassian.net/browse/UITEN-292) Change visibility rules for routing service points.
 
 ## [9.0.0](https://github.com/folio-org/ui-tenant-settings/tree/v9.0.0)(2024-10-30)
 
@@ -19,6 +23,7 @@
 * [UITEN-212](https://folio-org.atlassian.net/browse/UITEN-212) Permission changes for service point management.
 * [UITEN-299](https://folio-org.atlassian.net/browse/UITEN-299) Rewrite class components to functional ones (ui-tenant-settings module).
 * [UITEN-304](https://folio-org.atlassian.net/browse/UITEN-304) Provide case insensitive sorted data to edit record, field components.
+* [UITEN-306](https://folio-org.atlassian.net/browse/UITEN-306) Fix saving problem for routing service point(ECS only).
 * [UITEN-302](https://folio-org.atlassian.net/browse/UITEN-302) Address existing UI issues on Settings > Tenant > Locations
 * [UITEN-305](https://folio-org.atlassian.net/browse/UITEN-305) Permission changes for service point management (ECS environment)
 

package.json

@@ -194,7 +194,8 @@
           "inventory-storage.location-units.libraries.collection.get",
           "inventory-storage.service-points.collection.get",
           "inventory-storage.service-points.item.get",
-          "circulation-storage.staff-slips.collection.get"
+          "circulation-storage.staff-slips.collection.get",
+          "circulation.settings.collection.get"
         ],
         "visible": false
       },
@@ -260,6 +261,7 @@
     "@testing-library/dom": "^7.26.3",
     "@testing-library/jest-dom": "^5.11.1",
     "@testing-library/react": "^11.0.2",
+    "@testing-library/react-hooks": "^7.0.1",
     "@testing-library/user-event": "^12.1.10",
     "babel-eslint": "^9.0.0",
     "babel-jest": "^26.3.0",
@@ -284,6 +286,7 @@
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "react-intl": "^6.4.4",
+    "react-query": "^3.6.0",
     "react-redux": "^7.2.0",
     "react-router-dom": "^5.2.0",
     "redux": "^4.0.0",

src/hooks/index.js

@@ -0,0 +1 @@
+export { default as useCirculationSettingsEcsTlrFeature } from './useCirculationSettingsEcsTlrFeature';

src/hooks/useCirculationSettingsEcsTlrFeature/index.js

@@ -0,0 +1 @@
+export { default } from './useCirculationSettingsEcsTlrFeature';

src/hooks/useCirculationSettingsEcsTlrFeature/useCirculationSettingsEcsTlrFeature.js

@@ -0,0 +1,27 @@
+import { useQuery } from 'react-query';
+
+import { useNamespace, useOkapiKy } from '@folio/stripes/core';
+
+import { getEcsTlrFeature } from '../../settings/ServicePoints/utils';
+
+const useCirculationSettingsEcsTlrFeature = (enabled) => {
+  const ky = useOkapiKy();
+  const [namespace] = useNamespace({ key: 'circulationSettingsEcsTlrFeature' });
+  const searchParams = {
+    query: 'name==ecsTlrFeature',
+  };
+  const { isLoading, data, refetch, isFetching } = useQuery(
+    [namespace],
+    () => ky.get('circulation/settings', { searchParams }).json(),
+    { enabled },
+  );
+
+  return ({
+    titleLevelRequestsFeatureEnabled: getEcsTlrFeature(data?.circulationSettings),
+    isLoading,
+    isFetching,
+    refetch,
+  });
+};
+
+export default useCirculationSettingsEcsTlrFeature;

src/hooks/useCirculationSettingsEcsTlrFeature/useCirculationSettingsEcsTlrFeature.test.js

@@ -0,0 +1,43 @@
+import {
+  QueryClient,
+  QueryClientProvider,
+} from 'react-query';
+import {
+  renderHook,
+  act,
+} from '@testing-library/react-hooks';
+
+import { useOkapiKy } from '@folio/stripes/core';
+
+import useCirculationSettingsEcsTlrFeature from './useCirculationSettingsEcsTlrFeature';
+
+const queryClient = new QueryClient();
+
+// eslint-disable-next-line react/prop-types
+const wrapper = ({ children }) => (
+  <QueryClientProvider client={queryClient}>
+    {children}
+  </QueryClientProvider>
+);
+
+const data = 'data';
+
+describe('useCirculationSettingsEcsTlrFeature', () => {
+  it('should fetch data', async () => {
+    useOkapiKy.mockClear().mockReturnValue({
+      get: () => ({
+        json: () => ({
+          data,
+        }),
+      }),
+    });
+
+    const { result } = renderHook(() => useCirculationSettingsEcsTlrFeature(true), { wrapper });
+
+    await act(() => {
+      return !result.current.isLoading;
+    });
+
+    expect(result.current.titleLevelRequestsFeatureEnabled).toBeFalsy();
+  });
+});

src/settings/ServicePoints/ConfirmPickupLocationChangeModal.js

@@ -20,13 +20,13 @@ const ConfirmPickupLocationChangeModal = ({
         autoFocus
         onClick={onConfirm}
       >
-        <FormattedMessage id="ui-tenant-settings.settings.confirmPickupLocationChangeModal.button.confirm" />
+        <FormattedMessage id="ui-tenant-settings.settings.modal.button.confirm" />
       </Button>
       <Button
         data-testid="cancelButton"
         onClick={onCancel}
       >
-        <FormattedMessage id="ui-tenant-settings.settings.confirmPickupLocationChangeModal.button.cancel" />
+        <FormattedMessage id="ui-tenant-settings.settings.modal.button.cancel" />
       </Button>
     </ModalFooter>
   );

src/settings/ServicePoints/ConfirmPickupLocationChangeModal.test.js

@@ -22,8 +22,8 @@ const testIds = {
 const messageIds = {
   title: 'ui-tenant-settings.settings.confirmPickupLocationChangeModal.title',
   message: 'ui-tenant-settings.settings.confirmPickupLocationChangeModal.message',
-  buttonConfirm: 'ui-tenant-settings.settings.confirmPickupLocationChangeModal.button.confirm',
-  buttonCancel: 'ui-tenant-settings.settings.confirmPickupLocationChangeModal.button.cancel',
+  buttonConfirm: 'ui-tenant-settings.settings.modal.button.confirm',
+  buttonCancel: 'ui-tenant-settings.settings.modal.button.cancel',
 };
 
 describe('ConfirmPickupLocationChangeModal', () => {

src/settings/ServicePoints/ServicePointDetail.js

@@ -1,16 +1,18 @@
-import { cloneDeep, keyBy, orderBy } from 'lodash';
 import React from 'react';
 import PropTypes from 'prop-types';
 import {
   injectIntl,
   FormattedMessage,
 } from 'react-intl';
+import { cloneDeep, keyBy, orderBy } from 'lodash';
+
 import { Accordion, Col, ExpandAllButton, KeyValue, Row } from '@folio/stripes/components';
 import { ViewMetaData } from '@folio/stripes/smart-components';
-
 import { TitleManager } from '@folio/stripes/core';
+
 import LocationList from './LocationList';
 import StaffSlipList from './StaffSlipList';
+import { isEcsRequestRoutingVisible, isEcsRequestRoutingAssociatedFieldsVisible } from './utils';
 import { intervalPeriods } from '../../constants';
 import { closedLibraryDateManagementMapping } from './constants';
 
@@ -22,7 +24,8 @@ class ServicePointDetail extends React.Component {
     }).isRequired,
     initialValues: PropTypes.object,
     parentResources: PropTypes.object,
-    parentMutator: PropTypes.object
+    parentMutator: PropTypes.object,
+    titleLevelRequestsFeatureEnabled: PropTypes.bool,
   };
 
   constructor(props) {
@@ -80,7 +83,7 @@ class ServicePointDetail extends React.Component {
   }
 
   render() {
-    const { initialValues, parentResources } = this.props;
+    const { initialValues, parentResources, titleLevelRequestsFeatureEnabled } = this.props;
     const locations = (parentResources.locations || {}).records || [];
     const staffSlips = orderBy((parentResources.staffSlips || {}).records || [], 'name');
     const servicePoint = initialValues;
@@ -133,56 +136,74 @@ class ServicePointDetail extends React.Component {
                 />
               </Col>
             </Row>
-            <Row>
-              <Col xs={8}>
-                <KeyValue
-                  label={<FormattedMessage id="ui-tenant-settings.settings.servicePoints.shelvingLagTime" />}
-                  value={servicePoint.shelvingLagTime}
-                />
-              </Col>
-            </Row>
-            <Row>
-              <Col xs={8}>
-                <KeyValue label={<FormattedMessage id="ui-tenant-settings.settings.servicePoints.pickupLocation" />}>
-                  { servicePoint.pickupLocation
-                    ? <FormattedMessage id="ui-tenant-settings.settings.servicePoints.pickupLocation.yes" />
-                    : <FormattedMessage id="ui-tenant-settings.settings.servicePoints.pickupLocation.no" />
-                }
-                </KeyValue>
-              </Col>
-            </Row>
-            { servicePoint.pickupLocation && (
+            {isEcsRequestRoutingVisible(titleLevelRequestsFeatureEnabled) && (
+              <Row>
+                <Col xs={8}>
+                  <KeyValue label={<FormattedMessage id="ui-tenant-settings.settings.servicePoints.ecsRequestRouting" />}>
+                    { servicePoint.ecsRequestRouting
+                      ? <FormattedMessage id="ui-tenant-settings.settings.servicePoints.value.yes" />
+                      : <FormattedMessage id="ui-tenant-settings.settings.servicePoints.value.no" />
+                    }
+                  </KeyValue>
+                </Col>
+              </Row>
+            )}
+            {isEcsRequestRoutingAssociatedFieldsVisible(titleLevelRequestsFeatureEnabled, servicePoint.ecsRequestRouting) && (
               <>
                 <Row>
-                  <Col xs={8} data-test-hold-shelf-expiry-period>
+                  <Col xs={8}>
                     <KeyValue
-                      label={<FormattedMessage id="ui-tenant-settings.settings.servicePoints.expirationPeriod" />}
-                      value={`${duration} ${this.intervalPeriodMap[intervalId].label}`}
+                      label={<FormattedMessage id="ui-tenant-settings.settings.servicePoints.shelvingLagTime" />}
+                      value={servicePoint.shelvingLagTime}
                     />
                   </Col>
                 </Row>
                 <Row>
-                  <Col xs={8} data-test-closed-library-date-management-menu>
-                    <KeyValue label={<FormattedMessage id="ui-tenant-settings.settings.servicePoints.holdShelfClosedLibraryDateManagement" />}>
-                      <FormattedMessage id={`ui-tenant-settings.settings.servicePoints.holdShelfClosedLibraryDateManagement.${closedLibraryDateManagementMapping[holdShelfClosedLibraryDateManagement]}`} />
+                  <Col xs={8}>
+                    <KeyValue label={<FormattedMessage id="ui-tenant-settings.settings.servicePoints.pickupLocation" />}>
+                      { servicePoint.pickupLocation
+                        ? <FormattedMessage id="ui-tenant-settings.settings.servicePoints.value.yes" />
+                        : <FormattedMessage id="ui-tenant-settings.settings.servicePoints.value.no" />
+                      }
                     </KeyValue>
                   </Col>
                 </Row>
+                { servicePoint.pickupLocation && (
+                  <>
+                    <Row>
+                      <Col xs={8} data-test-hold-shelf-expiry-period>
+                        <KeyValue
+                          label={<FormattedMessage id="ui-tenant-settings.settings.servicePoints.expirationPeriod" />}
+                          value={`${duration} ${this.intervalPeriodMap[intervalId].label}`}
+                        />
+                      </Col>
+                    </Row>
+                    <Row>
+                      <Col xs={8} data-test-closed-library-date-management-menu>
+                        <KeyValue label={<FormattedMessage id="ui-tenant-settings.settings.servicePoints.holdShelfClosedLibraryDateManagement" />}>
+                          <FormattedMessage id={`ui-tenant-settings.settings.servicePoints.holdShelfClosedLibraryDateManagement.${closedLibraryDateManagementMapping[holdShelfClosedLibraryDateManagement]}`} />
+                        </KeyValue>
+                      </Col>
+                    </Row>
+                  </>
+                )
+              }
+                <StaffSlipList
+                  servicePoint={servicePoint}
+                  staffSlips={staffSlips}
+                />
               </>
-            )
-          }
-            <StaffSlipList
-              servicePoint={servicePoint}
-              staffSlips={staffSlips}
-            />
+            )}
           </Accordion>
 
-          <LocationList
-            locations={locations}
-            servicePoint={servicePoint}
-            expanded={sections.locationSection}
-            onToggle={this.handleSectionToggle}
-          />
+          {isEcsRequestRoutingAssociatedFieldsVisible(titleLevelRequestsFeatureEnabled, servicePoint.ecsRequestRouting) && (
+            <LocationList
+              locations={locations}
+              servicePoint={servicePoint}
+              expanded={sections.locationSection}
+              onToggle={this.handleSectionToggle}
+            />
+          )}
         </div>
       </TitleManager>
     );