adds addClass to the alert, makes onClose a prop, adds an alert to the document

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,10 @@ Notice.propTypes = {
 }
 
 Notice.defaultProps = {
+  addClass: '',
+  alert: {
+    onClose: () => {}
+  },
   buttonProps: {},
   dismissible: true,
   withBackButton: false,

src/compounds/Document/Document.jsx

@@ -1,15 +1,17 @@
 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 './document.scss'
 
-const Document = ({ accessToken, addClass, acceptSOW, document, request }) => {
+const Document = ({ accessToken, addClass, acceptSOW, backgroundColor, document, request }) => {
   const { identifier, date, documentStatusColor, documentType,
     documentTypeColor, documentStatus, lineItems, requestIdentifier,
     shippingPrice, shipTo, shipFrom, sowID, subtotalPrice,
     taxAmount, terms, totalPrice } = document
   const [show, setShow] = useState(false)
+  const [sowAccepted, setSowAccepted] = useState(false)
   const handleClose = () => setShow(false)
   const handleShow = () => setShow(true)
 
@@ -34,30 +36,47 @@ const Document = ({ accessToken, addClass, acceptSOW, document, request }) => {
         </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 SOW should have submit for approval. It should also ONLY show the submit for approval when the SOW has not yet been submitted. Need to figure out a way to tell if it has been submitted or not. . */}
-                <Dropdown.Item
-                  href='#/action-1'
-                  onClick={() => {acceptSOW({
-                    request: request,
-                    sowID: sowID,
-                    accessToken: accessToken,
-                  })}}
-                >
-                  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>
+                  {/* TODO: @summer-cook SOW should have submit for approval. It should also ONLY show the submit for approval when the SOW has not yet been submitted. Need to figure out a way to tell if it has been submitted or not. . */}
+                  <Dropdown.Item
+                    href='#/action-1'
+                    onClick={() => {
+                      acceptSOW({
+                        request: request,
+                        sowID: sowID,
+                        accessToken: accessToken,
+                      })
+                      setSowAccepted(true)
+                    }}
+                  >
+                    Submit for Approval
+                  </Dropdown.Item>
+                </Dropdown.Menu>
+              </Dropdown>
+            </div>
+          }
         </Offcanvas.Header>
         <Offcanvas.Body>
+          {sowAccepted && 
+            <Row>
+              <Notice
+                addClass='my-3'
+                alert={{
+                  body: [`SOW ${identifier} has been accepted successfully. Now awaiting purchase order.`],
+                  variant: 'success',
+                  onClose: () => setSowAccepted(false)
+                }}
+              />
+            </Row>
+          }
           <div className='d-block d-md-flex justify-content-between'>
             <div className='details'>
               <h6>Details:</h6>
@@ -98,6 +117,7 @@ const Document = ({ accessToken, addClass, acceptSOW, document, request }) => {
 
 Document.propTypes = {
   addClass: PropTypes.string,
+  backgroundColor: PropTypes.string,
   accessToken: PropTypes.string.isRequired,
   acceptSOW: PropTypes.func.isRequired,
   document: PropTypes.shape({
@@ -127,6 +147,7 @@ Document.propTypes = {
 
 Document.defaultProps = {
   addClass: '',
+  backgroundColor: 'secondary',
   document: {
     documentTypeColor: 'bg-dark',
     documentStatusColor: 'bg-secondary',