UIREQMED-2: Add pages: Confirm item arrival, Mediated requests action…

…s and Send item in transit

package.json

@@ -42,7 +42,8 @@
     "regenerator-runtime": "^0.13.3"
   },
   "dependencies": {
-    "prop-types": "^15.6.0"
+    "prop-types": "^15.6.0",
+    "react-router-prop-types": "^1.0.4"
   },
   "peerDependencies": {
     "@folio/stripes": "^9.0.0",
@@ -79,6 +80,39 @@
           "settings.enabled"
         ],
         "visible": true
+      },
+      {
+        "permissionName": "ui-requests-mediated.view",
+        "displayName": "Mediated requests: View",
+        "subPermissions": [
+          "module.requests-mediated.enabled",
+          "settings.requests-mediated.enabled"
+        ],
+        "visible": true
+      },
+      {
+        "permissionName": "ui-requests-mediated.view-create",
+        "displayName": "Mediated requests: View, create",
+        "subPermissions": [
+          "ui-requests-mediated.view"
+        ],
+        "visible": true
+      },
+      {
+        "permissionName": "ui-requests-mediated.view-create-edit",
+        "displayName": "Mediated requests: View, create, edit",
+        "subPermissions": [
+          "ui-requests-mediated.view-create"
+        ],
+        "visible": true
+      },
+      {
+        "permissionName": "ui-requests-mediated.all",
+        "displayName": "Mediated requests: All permissions",
+        "subPermissions": [
+          "ui-requests-mediated.view-create-edit"
+        ],
+        "visible": true
       }
     ]
   }

src/components/ConfirmItemArrival/ConfirmItemArrival.js

@@ -0,0 +1,49 @@
+import React from 'react';
+import ReactRouterPropTypes from 'react-router-prop-types';
+import { FormattedMessage } from 'react-intl';
+
+import {
+  Pane,
+  Paneset,
+} from '@folio/stripes/components';
+
+import NavigationMenu from '../NavigationMenu';
+
+import {
+  FILTER_PANE_WIDTH,
+  getConfirmItemArrivalUrl,
+} from '../../constants';
+
+export default class ConfirmItemArrival extends React.Component {
+  static propTypes = {
+    history: ReactRouterPropTypes.history.isRequired,
+    location: ReactRouterPropTypes.location.isRequired,
+  };
+
+  render() {
+    const {
+      history,
+      location,
+    } = this.props;
+
+    return (
+      <Paneset data-testid="confirmItemArrivalPaneSet">
+        <Pane
+          data-testid="confirmItemArrivalPane"
+          defaultWidth={FILTER_PANE_WIDTH}
+          paneTitle={<FormattedMessage id="ui-requests-mediated.app.filterPane.selectActivity" />}
+        >
+          <NavigationMenu
+            history={history}
+            location={location}
+            value={getConfirmItemArrivalUrl()}
+          />
+        </Pane>
+        <Pane
+          defaultWidth="fill"
+          paneTitle={<FormattedMessage id="ui-requests-mediated.app.confirmItemArrival.paneTitle" />}
+        />
+      </Paneset>
+    );
+  }
+}

src/components/ConfirmItemArrival/ConfirmItemArrival.test.js

@@ -0,0 +1,35 @@
+import {
+  render,
+  screen,
+  cleanup,
+} from '@folio/jest-config-stripes/testing-library/react';
+
+import ConfirmItemArrival from './ConfirmItemArrival';
+
+const testIds = {
+  confirmItemArrivalPaneSet: 'confirmItemArrivalPaneSet',
+  confirmItemArrivalPane: 'confirmItemArrivalPane',
+};
+const labelIds = {
+  paneTitle: 'ui-requests-mediated.app.confirmItemArrival.paneTitle',
+};
+
+describe('ConfirmItemArrival', () => {
+  beforeEach(() => {
+    render(<ConfirmItemArrival />);
+  });
+
+  afterEach(cleanup);
+
+  it('should render pane set', () => {
+    expect(screen.getByTestId(testIds.confirmItemArrivalPaneSet)).toBeInTheDocument();
+  });
+
+  it('should render pane', () => {
+    expect(screen.getByTestId(testIds.confirmItemArrivalPane)).toBeInTheDocument();
+  });
+
+  it('should render pane title', () => {
+    expect(screen.getByText(labelIds.paneTitle)).toBeVisible();
+  });
+});

src/components/ConfirmItemArrival/index.js

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

src/components/MediatedRequestsActions/MediatedRequestsActions.js

@@ -0,0 +1,55 @@
+import React from 'react';
+import ReactRouterPropTypes from 'react-router-prop-types';
+import { FormattedMessage } from 'react-intl';
+
+import {
+  AppIcon,
+} from '@folio/stripes/core';
+
+import {
+  Pane,
+  Paneset,
+} from '@folio/stripes/components';
+
+import NavigationMenu from '../NavigationMenu';
+
+import {
+  APP_ICON_NAME,
+  FILTER_PANE_WIDTH,
+  getMediatedRequestsActionsUrl,
+} from '../../constants';
+
+export default class MediatedRequestsActions extends React.Component {
+  static propTypes = {
+    history: ReactRouterPropTypes.history.isRequired,
+    location: ReactRouterPropTypes.location.isRequired,
+  };
+
+  render() {
+    const {
+      history,
+      location,
+    } = this.props;
+
+    return (
+      <Paneset data-testid="mediatedRequestsActionsPaneSet">
+        <Pane
+          data-testid="mediatedRequestsActionPane"
+          defaultWidth={FILTER_PANE_WIDTH}
+          paneTitle={<FormattedMessage id="ui-requests-mediated.app.filterPane.selectActivity" />}
+        >
+          <NavigationMenu
+            history={history}
+            location={location}
+            value={getMediatedRequestsActionsUrl()}
+          />
+        </Pane>
+        <Pane
+          defaultWidth="fill"
+          appIcon={<AppIcon app={APP_ICON_NAME} />}
+          paneTitle={<FormattedMessage id="ui-requests-mediated.app.mediatedRequestsActions.paneTitle" />}
+        />
+      </Paneset>
+    );
+  }
+}

src/components/MediatedRequestsActions/MediatedRequestsActions.test.js

@@ -0,0 +1,35 @@
+import {
+  render,
+  screen,
+  cleanup,
+} from '@folio/jest-config-stripes/testing-library/react';
+
+import MediatedRequestsActions from './MediatedRequestsActions';
+
+const testIds = {
+  mediatedRequestsActionsPaneSet: 'mediatedRequestsActionsPaneSet',
+  mediatedRequestsActionPane: 'mediatedRequestsActionPane',
+};
+const labelIds = {
+  paneTitle: 'ui-requests-mediated.app.mediatedRequestsActions.paneTitle',
+};
+
+describe('MediatedRequests', () => {
+  beforeEach(() => {
+    render(<MediatedRequestsActions />);
+  });
+
+  afterEach(cleanup);
+
+  it('should render pane set', () => {
+    expect(screen.getByTestId(testIds.mediatedRequestsActionsPaneSet)).toBeInTheDocument();
+  });
+
+  it('should render pane', () => {
+    expect(screen.getByTestId(testIds.mediatedRequestsActionPane)).toBeInTheDocument();
+  });
+
+  it('should render pane title', () => {
+    expect(screen.getByText(labelIds.paneTitle)).toBeVisible();
+  });
+});

src/components/MediatedRequestsActions/index.js

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

src/components/NavigationMenu/NavigationMenu.css

@@ -0,0 +1,4 @@
+.separator {
+  border-bottom: 1px solid var(--color-border-p2);
+  margin-bottom: 1rem;
+}

src/components/NavigationMenu/NavigationMenu.js

@@ -0,0 +1,88 @@
+import PropTypes from 'prop-types';
+import { useIntl } from 'react-intl';
+
+import {
+  Select,
+} from '@folio/stripes/components';
+
+import {
+  getConfirmItemArrivalUrl,
+  getMediatedRequestsActionsUrl,
+  getSendItemInTransitUrl,
+} from '../../constants';
+
+import css from './NavigationMenu.css';
+
+const NavigationMenu = ({
+  history,
+  location,
+  value,
+  dataOptions,
+  separator,
+}) => {
+  const intl = useIntl();
+
+  const defaultOptions = [
+    {
+      label: intl.formatMessage({ id: 'ui-requests-mediated.app.mediatedRequestsActions.navigation' }),
+      value: getMediatedRequestsActionsUrl(),
+    },
+    {
+      label: intl.formatMessage({ id: 'ui-requests-mediated.app.confirmItemArrival.navigation' }),
+      value: getConfirmItemArrivalUrl(),
+    },
+    {
+      label: intl.formatMessage({ id: 'ui-requests-mediated.app.sendItemInTransit.navigation' }),
+      value: getSendItemInTransitUrl(),
+    },
+  ];
+
+  const handleChangeMenu = (event) => {
+    const pathname = event.target.value;
+    const destination = {
+      pathname,
+      state: location.state,
+    };
+
+    if (pathname === getMediatedRequestsActionsUrl()) {
+      destination.search = location.state;
+    } else {
+      destination.state = location.search;
+    }
+
+    history.push(destination);
+  };
+
+  return (
+    <>
+      <Select
+        value={value}
+        dataOptions={dataOptions || defaultOptions}
+        onChange={handleChangeMenu}
+      />
+      {separator &&
+        <div
+          className={css.separator}
+          data-testid="separator"
+        />
+      }
+    </>
+  );
+};
+
+NavigationMenu.defaultProps = {
+  value: getMediatedRequestsActionsUrl(),
+};
+
+NavigationMenu.propTypes = {
+  history: PropTypes.shape({ push: PropTypes.func.isRequired }).isRequired,
+  location: PropTypes.object.isRequired,
+  dataOptions: PropTypes.arrayOf(PropTypes.shape({
+    label: PropTypes.string.isRequired,
+    value: PropTypes.string.isRequired,
+  })),
+  separator: PropTypes.bool,
+  value: PropTypes.string,
+};
+
+export default NavigationMenu;

src/components/NavigationMenu/index.js

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

src/components/SendItemInTransit/SendItemInTransit.js

@@ -0,0 +1,49 @@
+import React from 'react';
+import ReactRouterPropTypes from 'react-router-prop-types';
+import { FormattedMessage } from 'react-intl';
+
+import {
+  Pane,
+  Paneset,
+} from '@folio/stripes/components';
+
+import NavigationMenu from '../NavigationMenu';
+
+import {
+  FILTER_PANE_WIDTH,
+  getSendItemInTransitUrl,
+} from '../../constants';
+
+export default class SendItemInTransit extends React.Component {
+  static propTypes = {
+    history: ReactRouterPropTypes.history.isRequired,
+    location: ReactRouterPropTypes.location.isRequired,
+  };
+
+  render() {
+    const {
+      history,
+      location,
+    } = this.props;
+
+    return (
+      <Paneset data-testid="sendItemInTransitPaneSet">
+        <Pane
+          data-testid="sendItemInTransitPane"
+          defaultWidth={FILTER_PANE_WIDTH}
+          paneTitle={<FormattedMessage id="ui-requests-mediated.app.filterPane.selectActivity" />}
+        >
+          <NavigationMenu
+            history={history}
+            location={location}
+            value={getSendItemInTransitUrl()}
+          />
+        </Pane>
+        <Pane
+          defaultWidth="fill"
+          paneTitle={<FormattedMessage id="ui-requests-mediated.app.sendItemInTransit.paneTitle" />}
+        />
+      </Paneset>
+    );
+  }
+}