UITEN-281: Add Routing service point option with Confirm modal to Ser…

…vice point page(ECS only)
folio-org · Apr 24, 2024 · 0b2872d · 0b2872d
1 parent 879cdb0
commit 0b2872d
Show file tree

Hide file tree

Showing 10 changed files with 329 additions and 113 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -5,6 +5,7 @@
 * [UITEN-274](https://folio-org.atlassian.net/browse/UITEN-274) Use Save & close button label stripes-component translation key.
 * [UITEN-280](https://folio-org.atlassian.net/browse/UITEN-280) Conditionally include SSO Settings based on login-saml interface.
 * [UITEN-286](https://folio-org.atlassian.net/browse/UITEN-286) *BREAKING* Add new interface. Add new permission to view reading room access in tenant settings.
+* [UITEN-281](https://folio-org.atlassian.net/browse/UITEN-281) Add Routing service point option to Service point page(ECS only).
 
 ## [8.1.0](https://github.com/folio-org/ui-tenant-settings/tree/v8.1.0)(2024-03-19)
 [Full Changelog](https://github.com/folio-org/ui-tenant-settings/compare/v8.0.0...v8.1.0)

diff --git a/src/settings/ServicePoints/ConfirmPickupLocationChangeModal.js b/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>
   );

diff --git a/src/settings/ServicePoints/ConfirmPickupLocationChangeModal.test.js b/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', () => {

diff --git a/src/settings/ServicePoints/ServicePointDetail.js b/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';
 
@@ -19,6 +21,7 @@ class ServicePointDetail extends React.Component {
     intl: PropTypes.object,
     stripes: PropTypes.shape({
       connect: PropTypes.func.isRequired,
+      hasInterface: PropTypes.func.isRequired,
     }).isRequired,
     initialValues: PropTypes.object,
     parentResources: PropTypes.object,
@@ -80,7 +83,7 @@ class ServicePointDetail extends React.Component {
   }
 
   render() {
-    const { initialValues, parentResources } = this.props;
+    const { initialValues, parentResources, stripes } = 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(stripes) && (
+              <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(stripes, 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(stripes, servicePoint.ecsRequestRouting) && (
+            <LocationList
+              locations={locations}
+              servicePoint={servicePoint}
+              expanded={sections.locationSection}
+              onToggle={this.handleSectionToggle}
+            />
+          )}
         </div>
       </TitleManager>
     );

diff --git a/src/settings/ServicePoints/ServicePointForm.js b/src/settings/ServicePoints/ServicePointForm.js
@@ -39,6 +39,8 @@ import { intervalPeriods } from '../../constants';
 import {
   validateServicePointForm,
   getUniquenessValidation,
+  isEcsRequestRoutingVisible,
+  isEcsRequestRoutingAssociatedFieldsVisible,
 } from './utils';
 
 import {
@@ -49,6 +51,7 @@ import {
 
 import styles from './ServicePoints.css';
 
+export const SELECTED_ROUTING_SERVICE_POINT_VALUE = 'true';
 export const SELECTED_PICKUP_LOCATION_VALUE = 'true';
 export const UNSELECTED_PICKUP_LOCATION_VALUE = 'false';
 export const LAYER_EDIT = 'layer=edit';
@@ -88,11 +91,11 @@ const ServicePointForm = ({
 
   const selectOptions = [
     {
-      label: intl.formatMessage({ id: 'ui-tenant-settings.settings.servicePoints.pickupLocation.no' }),
+      label: intl.formatMessage({ id: 'ui-tenant-settings.settings.servicePoints.value.no' }),
       value: false
     },
     {
-      label: intl.formatMessage({ id: 'ui-tenant-settings.settings.servicePoints.pickupLocation.yes' }),
+      label: intl.formatMessage({ id: 'ui-tenant-settings.settings.servicePoints.value.yes' }),
       value: true
     }
   ];
@@ -200,6 +203,12 @@ const ServicePointForm = ({
     )));
   };
 
+  const handleEcsRequestRoutingChange = (e) => {
+    const value = e.target.value;
+
+    form.change('ecsRequestRouting', value === SELECTED_ROUTING_SERVICE_POINT_VALUE);
+  };
+
   const handleChange = (e) => {
     const value = e.target.value;
 
@@ -290,67 +299,88 @@ const ServicePointForm = ({
                 />
               </Col>
             </Row>
-            <Row>
-              <Col xs={4}>
-                <Field
-                  label={<FormattedMessage id="ui-tenant-settings.settings.servicePoints.shelvingLagTime" />}
-                  name="shelvingLagTime"
-                  id="input-service-shelvingLagTime"
-                  component={TextField}
-                  fullWidth
-                  disabled={disabled}
-                />
-              </Col>
-            </Row>
-            <Row>
-              <Col xs={2}>
-                <Field
-                  data-test-pickup-location
-                  label={<FormattedMessage id="ui-tenant-settings.settings.servicePoints.pickupLocation" />}
-                  name="pickupLocation"
-                  id="input-service-pickupLocation"
-                  component={Select}
-                  dataOptions={selectOptions}
-                  onChange={handleChange}
-                  disabled={disabled}
-                />
-              </Col>
-            </Row>
-            {
-              formValues.pickupLocation && (
-                <>
-                  <div data-test-holdshelfexpiry>
-                    <Period
-                      fieldLabel="ui-tenant-settings.settings.servicePoints.expirationPeriod"
-                      selectPlaceholder="ui-tenant-settings.settings.servicePoints.selectInterval"
-                      inputValuePath="holdShelfExpiryPeriod.duration"
-                      selectValuePath="holdShelfExpiryPeriod.intervalId"
-                      entity={formValues}
-                      intervalPeriods={periods}
-                      changeFormValue={form.mutators.changeFormValue}
-                      dependentValuePath="holdShelfClosedLibraryDateManagement"
+            {isEcsRequestRoutingVisible(stripes) && (
+              <Row>
+                <Col xs={2}>
+                  <Field
+                    label={<FormattedMessage id="ui-tenant-settings.settings.servicePoints.ecsRequestRouting" />}
+                    name="ecsRequestRouting"
+                    id="input-service-ecsRequestRouting"
+                    component={Select}
+                    dataOptions={selectOptions}
+                    onChange={handleEcsRequestRoutingChange}
+                    disabled={disabled}
+                  />
+                </Col>
+              </Row>
+            )}
+            {isEcsRequestRoutingAssociatedFieldsVisible(stripes, formValues.ecsRequestRouting) && (
+              <>
+                <Row>
+                  <Col xs={4}>
+                    <Field
+                      label={<FormattedMessage id="ui-tenant-settings.settings.servicePoints.shelvingLagTime" />}
+                      name="shelvingLagTime"
+                      id="input-service-shelvingLagTime"
+                      component={TextField}
+                      fullWidth
+                      disabled={disabled}
                     />
-                  </div>
-                  <div data-test-closed-library-date-managemnet>
+                  </Col>
+                </Row>
+                <Row>
+                  <Col xs={2}>
                     <Field
-                      id="input-service-closed-library-date-management"
-                      label={<FormattedMessage id="ui-tenant-settings.settings.servicePoints.holdShelfClosedLibraryDateManagement" />}
-                      name="holdShelfClosedLibraryDateManagement"
+                      data-test-pickup-location
+                      label={<FormattedMessage id="ui-tenant-settings.settings.servicePoints.pickupLocation" />}
+                      name="pickupLocation"
+                      id="input-service-pickupLocation"
                       component={Select}
-                      dataOptions={getClosedLibraryDateManagementOptions()}
+                      dataOptions={selectOptions}
+                      onChange={handleChange}
+                      disabled={disabled}
                     />
-                  </div>
-                </>
-              )
-            }
-            <StaffSlipEditList staffSlips={staffSlips} />
+                  </Col>
+                </Row>
+                {
+                  formValues.pickupLocation && (
+                    <>
+                      <div data-test-holdshelfexpiry>
+                        <Period
+                          fieldLabel="ui-tenant-settings.settings.servicePoints.expirationPeriod"
+                          selectPlaceholder="ui-tenant-settings.settings.servicePoints.selectInterval"
+                          inputValuePath="holdShelfExpiryPeriod.duration"
+                          selectValuePath="holdShelfExpiryPeriod.intervalId"
+                          entity={formValues}
+                          intervalPeriods={periods}
+                          changeFormValue={form.mutators.changeFormValue}
+                          dependentValuePath="holdShelfClosedLibraryDateManagement"
+                        />
+                      </div>
+                      <div data-test-closed-library-date-managemnet>
+                        <Field
+                          id="input-service-closed-library-date-management"
+                          label={<FormattedMessage id="ui-tenant-settings.settings.servicePoints.holdShelfClosedLibraryDateManagement" />}
+                          name="holdShelfClosedLibraryDateManagement"
+                          component={Select}
+                          dataOptions={getClosedLibraryDateManagementOptions()}
+                        />
+                      </div>
+                    </>
+                  )
+                }
+                <StaffSlipEditList staffSlips={staffSlips} />
+              </>
+            )}
           </Accordion>
-          <LocationList
-            locations={locations}
-            servicePoint={servicePoint}
-            expanded={sections.locationSection}
-            onToggle={handleSectionToggle}
-          />
+          {isEcsRequestRoutingAssociatedFieldsVisible(stripes, formValues.ecsRequestRouting) && (
+            <LocationList
+              locations={locations}
+              servicePoint={servicePoint}
+              expanded={sections.locationSection}
+              onToggle={handleSectionToggle}
+            />
+          )}
           <ConfirmPickupLocationChangeModal
             open={isConfirmPickupLocationChangeModal}
             onConfirm={onConfirmConfirmPickupLocationChangeModal}
@@ -373,6 +403,10 @@ ServicePointForm.propTypes = {
     search: PropTypes.string.isRequired,
   }).isRequired,
   submitting: PropTypes.bool,
+  stripes: PropTypes.shape({
+    hasInterface: PropTypes.func.isRequired,
+    hasPerm: PropTypes.func.isRequired,
+  }).isRequired,
   form: PropTypes.object.isRequired,
 };