Setup Typeform Survey

package.json

@@ -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": "^2.31.0",
     "axios": "^1.3.3",
     "framer-motion": "^9.0.0",
     "react": "^18.2.0",

src/pages/Profile/ProfileMentee.js

@@ -5,6 +5,7 @@ import { Avatar, Typography, Grid, Box } from "@mui/material";
 import { Switch } from "@mui/material";
 import FormControlLabel from "@mui/material/FormControlLabel";
 import { styled } from "@mui/material/styles";
+import Survey from "./Survey"
 
 export default function ProfileMentee({ token, pk, setAuth }) {
   // first name, last name, phone number
@@ -232,6 +233,7 @@ export default function ProfileMentee({ token, pk, setAuth }) {
           </Grid>
         </Box>
       </Box>
+      <Survey/>
     </Box >
   );
 }

src/pages/Profile/ProfileMentor.js

@@ -15,6 +15,7 @@ import { Switch } from "@mui/material";
 import FormControlLabel from "@mui/material/FormControlLabel";
 import TimeSlot from "../Profile/TimeSlot";
 import { styled } from "@mui/material/styles";
+import Survey from "./Survey"
 
 export default function ProfileMentor({ token, pk, setAuth }) {
   // first name, last name, phone number
@@ -405,6 +406,7 @@ export default function ProfileMentor({ token, pk, setAuth }) {
           />
         </Box>
       </Stack>
+        <Survey/>
     </Box>
   );
 }

src/pages/Profile/Survey.jsx

@@ -0,0 +1,20 @@
+// This component is for surveys on how to make the app better. 
+
+import { Sidetab } from '@typeform/embed-react'
+
+export default function Survey(){
+  const survey_username = localStorage.getItem("momentorsUserName")
+
+  const hidden_field = {
+    username: survey_username
+  }
+
+
+  return (
+    <Sidetab 
+    id={process.env.REACT_APP_WEBSITE_FEEDBACK_FORM} 
+    buttonText="click to open"
+    hidden={survey_username}
+    />
+  )
+}