Skip to content

Commit

Permalink
UITEN-281: Add Routing service point option with Confirm modal to Ser…
Browse files Browse the repository at this point in the history
…vice point page(ECS only)
  • Loading branch information
Dmitriy-Litvinenko committed Apr 23, 2024
1 parent d0f9fa0 commit aa9b177
Show file tree
Hide file tree
Showing 13 changed files with 515 additions and 113 deletions.
2 changes: 2 additions & 0 deletions CHANGELOG.md
Original file line number Diff line number Diff line change
Expand Up @@ -4,6 +4,8 @@

* [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-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) Add Confirm Routing service point change modal to edit 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)
Expand Down
1 change: 1 addition & 0 deletions jest.config.js
Original file line number Diff line number Diff line change
Expand Up @@ -19,6 +19,7 @@ module.exports = {
moduleNameMapper: {
'^.+\\.(css)$': 'identity-obj-proxy',
'^.+\\.(svg)$': 'identity-obj-proxy',
'^.+\\.(png)$': 'identity-obj-proxy',
'ky': 'ky/umd',
},
testMatch: ['**/(lib|src)/**/?(*.)test.{js,jsx}'],
Expand Down
54 changes: 54 additions & 0 deletions src/settings/ServicePoints/ConfirmEcsRequestRoutingChangeModal.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,54 @@
import React from 'react';
import PropTypes from 'prop-types';
import { FormattedMessage } from 'react-intl';
import {
Button,
Modal,
ModalFooter,
} from '@folio/stripes/components';

const ConfirmEcsRequestRoutingChangeModal = ({
open,
targetValue,
onConfirm,
onCancel,
}) => {
const footer = (
<ModalFooter>
<Button
data-testid="confirmButton"
buttonStyle="primary"
autoFocus
onClick={onConfirm}
>
<FormattedMessage id="ui-tenant-settings.settings.modal.button.confirm" />
</Button>
<Button
data-testid="cancelButton"
onClick={onCancel}
>
<FormattedMessage id="ui-tenant-settings.settings.modal.button.cancel" />
</Button>
</ModalFooter>
);

return (
<Modal
label={<FormattedMessage id="ui-tenant-settings.settings.confirmEcsRequestRoutingChangeModal.title" />}
open={open}
size="small"
footer={footer}
>
<FormattedMessage id={`ui-tenant-settings.settings.confirmEcsRequestRoutingChangeModal.message${targetValue ? 'NoToYes' : 'YesToNo'}`} />
</Modal>
);
};

ConfirmEcsRequestRoutingChangeModal.propTypes = {
open: PropTypes.bool.isRequired,
targetValue: PropTypes.bool.isRequired,
onConfirm: PropTypes.func.isRequired,
onCancel: PropTypes.func.isRequired,
};

export default ConfirmEcsRequestRoutingChangeModal;
102 changes: 102 additions & 0 deletions src/settings/ServicePoints/ConfirmEcsRequestRoutingChangeModal.test.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,102 @@
import {
render,
screen,
fireEvent,
} from '@testing-library/react';

import { runAxeTest } from '@folio/stripes-testing';

import ConfirmEcsRequestRoutingChangeModal from './ConfirmEcsRequestRoutingChangeModal';

const defaultProps = {
open: true,
targetValue: true,
onConfirm: jest.fn(),
onCancel: jest.fn(),
};
const testIds = {
confirmButton: 'confirmButton',
cancelButton: 'cancelButton',
};
const messageIds = {
title: 'ui-tenant-settings.settings.confirmEcsRequestRoutingChangeModal.title',
messageNoToYes: 'ui-tenant-settings.settings.confirmEcsRequestRoutingChangeModal.messageNoToYes',
messageYesToNo: 'ui-tenant-settings.settings.confirmEcsRequestRoutingChangeModal.messageYesToNo',
confirmButton: 'ui-tenant-settings.settings.modal.button.confirm',
cancelButton: 'ui-tenant-settings.settings.modal.button.cancel',
};

describe('ConfirmEcsRequestRoutingChangeModal', () => {
afterEach(() => {
jest.clearAllMocks();
});

beforeEach(() => {
render(
<ConfirmEcsRequestRoutingChangeModal {...defaultProps} />
);
});

it('should render with no axe errors', async () => {
await runAxeTest({
rootNode: document.body,
});
});

it('should render title', () => {
expect(screen.getByText(messageIds.title)).toBeVisible();
});

it('should render message', () => {
expect(screen.getByText(messageIds.messageNoToYes)).toBeVisible();
});

describe('Alternative props', () => {
const props = {
...defaultProps,
targetValue: false,
};

beforeEach(() => {
render(
<ConfirmEcsRequestRoutingChangeModal {...props} />
);
});

it('should render message', () => {
expect(screen.getByText(messageIds.messageYesToNo)).toBeVisible();
});
});

describe('Confirm button', () => {
it('should render confirm button', () => {
expect(screen.getByTestId(testIds.confirmButton)).toBeVisible();
});

it('should render confirm button text', () => {
expect(screen.getByText(messageIds.confirmButton)).toBeVisible();
});

it('should call onConfirm', () => {
fireEvent.click(screen.getByTestId(testIds.confirmButton));

expect(defaultProps.onConfirm).toHaveBeenCalled();
});
});

describe('Cancel button', () => {
it('should render cancel button', () => {
expect(screen.getByTestId(testIds.cancelButton)).toBeVisible();
});

it('should render cancel button text', () => {
expect(screen.getByText(messageIds.cancelButton)).toBeVisible();
});

it('should call onCancel', () => {
fireEvent.click(screen.getByTestId(testIds.cancelButton));

expect(defaultProps.onCancel).toHaveBeenCalled();
});
});
});
Original file line number Diff line number Diff line change
Expand Up @@ -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>
);
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -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', () => {
Expand Down
101 changes: 61 additions & 40 deletions src/settings/ServicePoints/ServicePointDetail.js
Original file line number Diff line number Diff line change
@@ -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';

Expand All @@ -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,
Expand Down Expand Up @@ -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;
Expand Down Expand Up @@ -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>
);
Expand Down
Loading

0 comments on commit aa9b177

Please sign in to comment.