diff --git a/src/components/Modal/ClosePOModal.js b/src/components/Modal/ClosePOModal.js
new file mode 100644
index 000000000..ad77b629e
--- /dev/null
+++ b/src/components/Modal/ClosePOModal.js
@@ -0,0 +1,57 @@
+import React, { Component, Fragment } from 'react';
+import { FormattedMessage } from 'react-intl';
+import PropTypes from 'prop-types';
+
+import { Button } from '@folio/stripes/components';
+
+import ClosePOModalForm from './ClosePOModalForm';
+
+class ClosePOModal extends Component {
+ static propTypes = {
+ orderId: PropTypes.string.isRequired,
+ };
+
+ constructor(props) {
+ super(props);
+
+ this.state = {
+ openModal: false,
+ };
+ }
+
+ openModal = () => {
+ this.setState({
+ openModal: true,
+ });
+ }
+
+ closeModal = () => {
+ this.setState({
+ openModal: false,
+ });
+ }
+
+ render() {
+ const { orderId } = this.props;
+
+ return (
+
+
+
+
+ );
+ }
+}
+
+export default ClosePOModal;
diff --git a/src/components/Modal/ClosePOModalForm.js b/src/components/Modal/ClosePOModalForm.js
new file mode 100644
index 000000000..386040695
--- /dev/null
+++ b/src/components/Modal/ClosePOModalForm.js
@@ -0,0 +1,66 @@
+import React from 'react';
+import { FormattedMessage } from 'react-intl';
+import PropTypes from 'prop-types';
+import { Field } from 'redux-form';
+
+import stripesForm from '@folio/stripes/form';
+import {
+ Col,
+ Modal,
+ ModalFooter,
+ Row,
+ Select,
+ TextArea,
+} from '@folio/stripes/components';
+
+const ClosePOModalForm = ({ close, open, orderId }) => {
+ const cancelBtn = ;
+ const submitBtn = ;
+ const footer = (
+
+ );
+
+ return (
+ }
+ open={open}
+ >
+
+
+ }
+ name="reason"
+ />
+ }
+ name="notes"
+ />
+
+
+
+ );
+};
+
+ClosePOModalForm.propTypes = {
+ close: PropTypes.func.isRequired,
+ open: PropTypes.bool.isRequired,
+ orderId: PropTypes.string.isRequired,
+};
+
+export default stripesForm({
+ form: 'closePOModalForm',
+ navigationCheck: true,
+ enableReinitialize: true,
+})(ClosePOModalForm);
diff --git a/src/components/PurchaseOrder/PO.js b/src/components/PurchaseOrder/PO.js
index ab27e53fc..6cdd30ab0 100644
--- a/src/components/PurchaseOrder/PO.js
+++ b/src/components/PurchaseOrder/PO.js
@@ -1,16 +1,37 @@
import React, { Component } from 'react';
import { FormattedMessage } from 'react-intl';
import PropTypes from 'prop-types';
-import { get, isEmpty, isEqual } from 'lodash';
+
+import {
+ get,
+ isEmpty,
+ isEqual,
+} from 'lodash';
import { IfPermission } from '@folio/stripes/core';
-import { Icon, IconButton, AccordionSet, Accordion, ExpandAllButton, Pane, PaneMenu, Row, Col, Button } from '@folio/stripes/components';
+import {
+ Accordion,
+ AccordionSet,
+ Button,
+ Col,
+ ExpandAllButton,
+ Icon,
+ IconButton,
+ Pane,
+ PaneMenu,
+ Row,
+} from '@folio/stripes/components';
+
+import {
+ LayerPO,
+ LayerPOLine,
+} from '../LayerCollection';
import transitionToParams from '../Utils/transitionToParams';
+import ClosePOModal from '../Modal/ClosePOModal';
import { AdjustmentView } from './Adjustment';
import LineListing from './LineListing';
import { PODetailsView } from './PODetails';
import { SummaryView } from './Summary';
-import { LayerPO, LayerPOLine } from '../LayerCollection';
class PO extends Component {
static manifest = Object.freeze({
@@ -166,6 +187,7 @@ class PO extends Component {
const lastMenu = (
+