Merge pull request #97 from buildingSMART/IVS_103_Embed_Feedback_Form

IVS-103 Embed feedback form

frontend/package.json

@@ -1,6 +1,6 @@
 {
     "name": "bsi-valsvc-ui",
-    "description": "WebUI of the bSI Validation Service",    
+    "description": "WebUI of the bSI Validation Service",
     "author": "buildingSMART International Ltd.",
     "license": "MIT",
     "private": true,
@@ -15,6 +15,7 @@
         "@testing-library/jest-dom": "^5.16.5",
         "@testing-library/react": "^13.4.0",
         "@testing-library/user-event": "^13.5.0",
+        "@typeform/embed-react": "^4.1.0",
         "react": "^18.2.0",
         "react-dom": "^18.2.0",
         "react-router-dom": "^6.4.3",

frontend/src/App.js

@@ -7,9 +7,10 @@ import Grid from '@mui/material/Grid';
 import Box from '@mui/material/Box';
 import SideMenu from './SideMenu';
 import VerticalLinearStepper from './VerticalLinearStepper'
+import FeedbackWidget from './FeedbackWidget';
 
 import { useEffect, useState } from 'react';
-import { FETCH_PATH } from './environment'
+import { FETCH_PATH } from './environment';
 
 import {PageContext} from './Page';
 import { useContext } from 'react';
@@ -23,7 +24,7 @@ function App() {
   const [user, setUser] = useState(null)
 
   const [prTitle, setPrTitle] = useState("")
- 
+
   useEffect(() => {
     fetch(context.sandboxId ? `${FETCH_PATH}/api/sandbox/me/${context.sandboxId}` : `${FETCH_PATH}/api/me`, { credentials: 'include' })
       .then(response => response.json())
@@ -43,6 +44,7 @@ function App() {
 
   document.body.style.overflow = "hidden";
   if (isLoggedIn) {
+
     return (
       <div class="home">
         <Grid direction="column"
@@ -59,7 +61,7 @@ function App() {
             }}
           >
             <SideMenu />
-            
+
             <Grid
               container
               flex={1}
@@ -124,7 +126,7 @@ function App() {
                       <VerticalLinearStepper />
                     </Box>
                   </Box>
-                    
+
                   <div style={{alignSelf:"start", backgroundColor: '#ffffffe0', padding: '0.5em 5em', boxSizing: 'border-box', borderTop: 'thin solid rgb(238, 238, 238)', width: '100%'}}>
                     <Typography style={{fontWeight: 'bold'}} sx={{paddingTop: '2em'}}>What it is</Typography>
                     <Typography align='left' paragraph>The bSI Validation Service is a free, online platform for validating IFC files, developed by buildingSMART – with the help of software vendors and bSI projects.</Typography>
@@ -163,10 +165,13 @@ function App() {
 
                     <Footer/>
                   </div>
-                
+
                 </Grid>
               </div>
             </Grid>
+
+            <FeedbackWidget user={user} />
+
           </Grid>
         </Grid>
       </div>

frontend/src/Dashboard.js

@@ -2,7 +2,8 @@ import Dz from './Dz'
 import ResponsiveAppBar from './ResponsiveAppBar'
 import DashboardTable from './DashboardTable'
 import Disclaimer from './Disclaimer';
-import Footer from './Footer'
+import Footer from './Footer';
+import FeedbackWidget from './FeedbackWidget';
 import Grid from '@mui/material/Grid';
 import VerticalLinearStepper from './VerticalLinearStepper'
 import Button from '@mui/material/Button';
@@ -126,6 +127,9 @@ function Dashboard() {
               </div>
             </Grid>
           </Grid>
+
+          <FeedbackWidget user={user} />
+
         </Grid>
       </div>
     );

frontend/src/FeedbackWidget.js

@@ -0,0 +1,22 @@
+import { Sidetab } from '@typeform/embed-react';
+import { VERSION, COMMIT_HASH } from './environment'
+
+function FeedbackWidget({ user }) {    
+
+    // Typeform widget
+    return (
+
+       <Sidetab
+        id="cttcZ07p"
+        medium="bsi-validation-service"
+        hidden={{
+            version: { VERSION },
+            commit_hash: { COMMIT_HASH },
+            user: user["email"]
+        }}
+        buttonText="Share feedback"
+        />
+    )
+}
+
+export default FeedbackWidget;

frontend/src/Report.js

@@ -10,10 +10,11 @@ import SchemaResult from './SchemaResult';
 import BsddTreeView from './BsddTreeView';
 import GherkinResults from './GherkinResult';
 import SideMenu from './SideMenu';
+import FeedbackWidget from './FeedbackWidget';
 import SearchOffOutlinedIcon from '@mui/icons-material/SearchOffOutlined';
 
 import { useEffect, useState, useContext } from 'react';
-import { FETCH_PATH } from './environment';
+import { FETCH_PATH } from './environment'
 import { PageContext } from './Page';
 import HandleAsyncError from './HandleAsyncError';
 
@@ -190,6 +191,9 @@ function Report({ kind }) {
               </div>
             </Grid>
           </Grid>
+
+          <FeedbackWidget user={user} />
+
         </Grid>
       </div>
     );