UIOR-46 Close Order

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 (
+      <Fragment>
+        <Button
+          buttonStyle="primary"
+          marginBottom0
+          onClick={this.openModal}
+          style={{ marginRight: '10px' }}
+        >
+          <FormattedMessage id="ui-orders.paneBlock.closeBtn" />
+        </Button>
+        <ClosePOModalForm
+          close={this.closeModal}
+          orderId={orderId}
+          open={this.state.openModal}
+        />
+      </Fragment>
+    );
+  }
+}
+
+export default ClosePOModal;

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 = <FormattedMessage id="ui-orders.closePOModal.cancel" />;
+  const submitBtn = <FormattedMessage id="ui-orders.closePOModal.submit" />;
+  const footer = (
+    <ModalFooter
+      secondaryButton={{
+        label: cancelBtn,
+        onClick: close,
+      }}
+      primaryButton={{
+        label: submitBtn,
+        onClick: close,
+      }}
+    />
+  );
+
+  return (
+    <Modal
+      footer={footer}
+      label={<FormattedMessage id="ui-orders.closePOModal.title" values={{ orderId }} />}
+      open={open}
+    >
+      <Row>
+        <Col xs={12}>
+          <Field
+            component={Select}
+            label={<FormattedMessage id="ui-orders.closePOModal.reason" />}
+            name="reason"
+          />
+          <Field
+            component={TextArea}
+            label={<FormattedMessage id="ui-orders.closePOModal.notes" />}
+            name="notes"
+          />
+        </Col>
+      </Row>
+    </Modal>
+  );
+};
+
+ClosePOModalForm.propTypes = {
+  close: PropTypes.func.isRequired,
+  open: PropTypes.bool.isRequired,
+  orderId: PropTypes.string.isRequired,
+};
+
+export default stripesForm({
+  form: 'closePOModalForm',
+  navigationCheck: true,
+  enableReinitialize: true,
+})(ClosePOModalForm);

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 = (
       <PaneMenu>
         <IfPermission perm="purchase_order.item.put">
+          <ClosePOModal orderId={get(initialValues, 'id', '')} />
           <FormattedMessage id="ui-orders.paneMenu.editOrder">
             {ariaLabel => (
               <IconButton

translations/ui-orders/en.json

@@ -379,6 +379,7 @@
   "orderSummary.totalEstimatedPrice": "Total Estimated Price",
   "orderSummary.totalUnits": "Total Units",
   "orderSummary.workflowStatus": "Workflow Status",
+  "paneBlock.closeBtn": "Close Order",
   "paneBlock.adjustment": "Adjustment",
   "paneBlock.POLines": "PO Lines",
   "paneBlock.POSummary": "PO Summary",
@@ -443,6 +444,11 @@
   "settings.setPOLInesLimit": "Set Purchase Order Lines Limit",
   "settings.setPOLInesLimit.changed": "The Limit of Purchase Order Lines has been successfully saved",
   "settings.setPOLInesLimit.validatation": "Please enter a whole number greater than 0 and less than 1000 to continue",
+  "closePOModal.reason": "Reason",
+  "closePOModal.notes": "Notes",
+  "closePOModal.cancel": "Cancel",
+  "closePOModal.submit": "Submit",
+  "closePOModal.title": "Close - Purchase Order #{orderId}",
 
   "errors.noMatch.oops": "Uh-oh!",
   "errors.noMatch.how": "How did you get to {location}?"