Merge pull request #169 from scientist-softserv/137-accept-sow

137 accept sow

Author: summer-cook

src/components/Notice/Notice.jsx

@@ -3,17 +3,22 @@ import React, { useState } from 'react'
 import PropTypes from 'prop-types'
 import { Alert, Button, Container } from 'react-bootstrap'
 
-const Notice = ({ alert, buttonProps, dismissible, withBackButton }) => {
+const Notice = ({ addClass, alert, buttonProps, dismissible, withBackButton }) => {
   const [show, setShow] = useState(true)
-  const { title, body, variant } = alert
+  const { title, body, variant, onClose } = alert
   let onClick
   let text
   if (withBackButton) ({ onClick, text } = buttonProps)
 
   return (
     show && (
-      <Container>
-        <Alert className='my-5 text-break' variant={variant} onClose={() => setShow(false)} dismissible={dismissible}>
+      <Container className={addClass}>
+        <Alert
+          className='text-break'
+          variant={variant}
+          onClose={onClose || (() => setShow(false))}
+          dismissible={dismissible}
+        >
           {title && (
             <Alert.Heading>{title}</Alert.Heading>
           )}
@@ -55,8 +60,10 @@ const Notice = ({ alert, buttonProps, dismissible, withBackButton }) => {
 }
 
 Notice.propTypes = {
+  addClass: PropTypes.string,
   alert: PropTypes.shape({
     body: PropTypes.arrayOf(PropTypes.string).isRequired,
+    onClose: PropTypes.func,
     title: PropTypes.string,
     variant: PropTypes.string.isRequired,
   }).isRequired,
@@ -69,6 +76,7 @@ Notice.propTypes = {
 }
 
 Notice.defaultProps = {
+  addClass: '',
   buttonProps: {},
   dismissible: true,
   withBackButton: false,

src/compounds/Document/Document.jsx

@@ -1,16 +1,19 @@
 import React, { useState } from 'react'
 import PropTypes from 'prop-types'
-import { Dropdown, Offcanvas } from 'react-bootstrap'
+import { Dropdown, Offcanvas, Row } from 'react-bootstrap'
 import LineItemsTable from '../../components/LineItemsTable/LineItemsTable'
+import Notice from '../../components/Notice/Notice'
+import { allowNull } from '../../resources/utilityFunctions'
 import './document.scss'
 
-const Document = ({ document, addClass }) => {
+const Document = ({ acceptSOW, addClass, backgroundColor, document }) => {
   const {
     adPO, date, documentStatusColor, documentType, documentTypeColor, documentStatus, identifier, lineItems, poNumber,
     relatedSOWIdentifier, requestIdentifier, shippingPrice, shipTo, shipFrom, subtotalPrice, taxAmount, terms, totalPrice,
     turnaroundTime,
   } = document
   const [show, setShow] = useState(false)
+  const [showNotice, setShowNotice] = useState(false)
   const handleClose = () => setShow(false)
   const handleShow = () => setShow(true)
 
@@ -35,22 +38,43 @@ const Document = ({ document, addClass }) => {
         </div>
       </div>
       <Offcanvas show={show} onHide={handleClose} placement='end' scroll='true'>
-        <Offcanvas.Header className='d-flex' closeButton>
+        <Offcanvas.Header className={`d-flex border-bottom px-3 py-2 bg-${backgroundColor}-8`} closeButton>
           <Offcanvas.Title> {documentType}: #{identifier}</Offcanvas.Title>
-          <div className='ms-auto me-2'>
-            <Dropdown>
-              <Dropdown.Toggle variant='light' id='dropdown-basic' size='small' className='border'>
-                Next Actions
-              </Dropdown.Toggle>
-              <Dropdown.Menu>
-                {/* TODO: @summer-cook Update this menu item so it submits this document for approval &
-                add more dropdown items depending on what actions we need here. */}
-                <Dropdown.Item href='#/action-1'>Submit for Approval</Dropdown.Item>
-              </Dropdown.Menu>
-            </Dropdown>
-          </div>
+          {documentType === 'SOW'
+            && (
+              <div className='ms-auto me-2'>
+                <Dropdown>
+                  <Dropdown.Toggle id='next-actions-dropdown' size='small' className='btn-outline-dark' variant={`btn-${backgroundColor}`}>
+                    Next Actions
+                  </Dropdown.Toggle>
+                  <Dropdown.Menu>
+                    <Dropdown.Item
+                      href='#/accept-sow'
+                      onClick={() => {
+                        acceptSOW
+                        setShowNotice(true)
+                      }}
+                    >
+                      Submit for Approval
+                    </Dropdown.Item>
+                  </Dropdown.Menu>
+                </Dropdown>
+              </div>
+            )}
         </Offcanvas.Header>
         <Offcanvas.Body>
+          {showNotice && (
+            <Row>
+              <Notice
+                addClass='my-3'
+                alert={{
+                  body: [`SOW ${identifier} has been accepted successfully. Now awaiting purchase order.`],
+                  variant: 'success',
+                  onClose: () => setShowNotice(false),
+                }}
+              />
+            </Row>
+          )}
           <div className='d-block d-md-flex justify-content-between'>
             <div className='details'>
               <h5>Details:</h5>
@@ -95,6 +119,8 @@ const Document = ({ document, addClass }) => {
 
 Document.propTypes = {
   addClass: PropTypes.string,
+  backgroundColor: PropTypes.string,
+  acceptSOW: PropTypes.func.isRequired,
   document: PropTypes.shape({
     adPO: PropTypes.string,
     identifier: PropTypes.string.isRequired,
@@ -116,6 +142,7 @@ Document.propTypes = {
       organizationName: PropTypes.string,
       text: PropTypes.string,
     }).isRequired,
+    sowID: allowNull(PropTypes.string),
     subtotalPrice: PropTypes.string.isRequired,
     taxAmount: PropTypes.string.isRequired,
     terms: PropTypes.string.isRequired,
@@ -126,6 +153,7 @@ Document.propTypes = {
 
 Document.defaultProps = {
   addClass: '',
+  backgroundColor: 'secondary',
   document: {
     documentTypeColor: 'bg-dark',
     documentStatusColor: 'bg-secondary',