507 Updated In Progress Form UI

src/components/RequestBox/InProgressFormBox/InProgressFormBox.js

@@ -0,0 +1,29 @@
+import { Box, Button, Paper, Typography, ButtonGroup } from '@mui/material';
+import React from 'react';
+import './InProgressFormBoxStyle.css';
+
+export default function InProgressFormBox(props) {
+    return (
+        props.qrResponse.questionnaire ? (
+                <Box className={'inprogress-container'}>
+                    <Typography variant='h6' color='text.primary' gutterBottom>
+                        In Progress Form
+                    </Typography>
+                    <Typography variant='subtitle1'>
+                        <Typography color='text.secondary'>  Practitioner: </Typography>{props.qrResponse.author ? props.qrResponse.author.reference : 'empty'}
+                    </Typography>
+                    <Typography variant='subtitle1' >
+                        <Typography color='text.secondary'>  Last Edited: </Typography> {props.qrResponse.authored ? props.qrResponse.authored : 'empty'}
+                    </Typography>
+                    <Typography sx={{ mb: 4 }} variant='subtitle1'>
+                        <Typography color='text.secondary'>  Form Link: </Typography>{props.qrResponse.questionnaire ? props.qrResponse.questionnaire : 'empty'}
+                    </Typography>
+                    <ButtonGroup variant='outlined' aria-label='button group'>
+                        <Button onClick={props.relaunch} color='primary' varient='outlined' style={{ width: '300px' }}>
+                            Open In-Progress Form
+                        </Button>
+                    </ButtonGroup>
+                </Box>
+        ) : ''
+    );
+}

src/components/RequestBox/InProgressFormBox/InProgressFormBoxStyle.css

@@ -0,0 +1,10 @@
+.inprogress-container {
+    background-color:#f8f8f8;
+    border: 1px solid black;
+    border-radius: 5px;
+    padding:20px;
+    margin:20px 0 20px 0;
+
+    /* This should be inherited, need to change */
+    width:48.5vw;
+}

src/components/RequestBox/RequestBox.js

@@ -7,6 +7,7 @@ import { defaultValues, shortNameMap, types } from '../../util/data';
 import { getAge } from '../../util/fhir';
 import { retrieveLaunchContext } from '../../util/util';
 import './request.css';
+import InProgressFormBox from './InProgressFormBox/InProgressFormBox.js';
 
 import PatientSearchBar from './PatientSearchBar/PatientSearchBar.js';
 
@@ -201,7 +202,6 @@ export default class RequestBox extends Component {
           State: {this.state.patientState ? this.state.patientState : this.emptyField}
         </div>
         {this.renderOtherInfo()}
-        {this.renderQRInfo()}
       </div>
     );
   }
@@ -225,32 +225,6 @@ export default class RequestBox extends Component {
     );
   }
 
-  renderQRInfo() {
-    const qrResponse = this.state.response;
-    return (
-      <div className="questionnaire-response">
-        {qrResponse.questionnaire ? (
-          <>
-            <div className="lower-border">
-              <span style={{ fontWeight: 'bold' }}>In Progress Form</span>
-            </div>
-            <div className="info lower-border">
-              Form: {qrResponse.questionnaire ? qrResponse.questionnaire : this.emptyField}
-            </div>
-            <div className="info lower-border">
-              Author: {qrResponse.author ? qrResponse.author.reference : this.emptyField}
-            </div>
-            <div className="info lower-border">
-              Date: {qrResponse.authored ? qrResponse.authored : this.emptyField}
-            </div>
-          </>
-        ) : (
-          <div />
-        )}
-      </div>
-    );
-  }
-
   renderPrefetchedResources() {
     const prefetchMap = new Map(Object.entries(this.state.prefetchedResources));
     if (prefetchMap.size > 0) {
@@ -460,7 +434,6 @@ export default class RequestBox extends Component {
 
   render() {
     const disableSendToCRD = this.isOrderNotSelected() || this.props.loading;
-    const disableLaunchDTR = !this.state.response.questionnaire;
     const disableSendRx = this.isOrderNotSelected() || this.props.loading;
     const disableLaunchSmartOnFhir = this.isPatientNotSelected();
     return (
@@ -512,10 +485,11 @@ export default class RequestBox extends Component {
         </div>
         {this.state.patient.id ? (
           <div className="action-btns">
+            <InProgressFormBox
+              qrResponse={this.state.response}
+              relaunch={this.relaunch}
+            />
             <ButtonGroup variant="outlined" aria-label="outlined button group">
-              <Button onClick={this.relaunch} disabled={disableLaunchDTR}>
-                Open In-Progress Form
-              </Button>
               <Button onClick={this.launchSmartOnFhirApp} disabled={disableLaunchSmartOnFhir}>
                 Launch SMART on FHIR App
               </Button>

src/components/RequestBox/request.css

@@ -12,7 +12,7 @@
 
 .request {
     border: 1px solid black;
-    height:530px;
+    height:375px;
     padding: 10px;
     border-radius: 5px;
     background-color: rgb(248, 248, 248)