Handle external recipients when viewing feedback.

Author: ocielliottc

web-ui/src/api/feedbackanswer.js

@@ -61,7 +61,8 @@ export const getQuestionsAndAnswers = async (feedbackRequests, cookie) => {
         return {
           answer: {
             ...obj.answer,
-            responder: obj.request.recipientId
+            responder: obj.request.recipientId ?? obj.request.externalRecipientId,
+            external: !!!obj.request.recipientId
           },
           ...obj.question
         };
@@ -85,7 +86,8 @@ export const getQuestionsAndAnswers = async (feedbackRequests, cookie) => {
             answer: val.answer.answer,
             requestId: val.answer.requestId,
             sentiment: val.answer.sentiment,
-            responder: val.answer.responder
+            responder: val.answer.responder,
+            external: val.answer.external,
           };
         });
 

web-ui/src/components/view_feedback_responses/ViewFeedbackResponses.jsx

@@ -3,7 +3,10 @@ import { styled } from '@mui/material/styles';
 import { Autocomplete, Avatar, Button, Checkbox, Chip, TextField, Typography, Box } from '@mui/material';
 import FeedbackResponseCard from './feedback_response_card/FeedbackResponseCard';
 import { getQuestionsAndAnswers } from '../../api/feedbackanswer';
-import { getFeedbackRequestById } from '../../api/feedback';
+import {
+  getFeedbackRequestById,
+  getExternalRecipients
+} from '../../api/feedback';
 import queryString from 'query-string';
 import { useLocation } from 'react-router-dom';
 import { AppContext } from '../../context/AppContext';
@@ -74,11 +77,24 @@ const ViewFeedbackResponses = () => {
   const [selectedResponders, setSelectedResponders] = useState([]);
   const [filteredQuestionsAndAnswers, setFilteredQuestionsAndAnswers] = useState([]);
   const [isLoading, setIsLoading] = useState(true);
+  const [externalRecipients, setExternalRecipients] = useState([]);
 
   useEffect(() => {
     setQuery(queryString.parse(location?.search));
   }, [location.search]);
 
+  useEffect(() => {
+    async function fetchExternalRecipients() {
+      const res = await getExternalRecipients();
+      setExternalRecipients(
+          res.payload && res.payload.data &&
+          res.payload.status === 200 && !res.error
+              ? res.payload.data
+              : null);
+    }
+    fetchExternalRecipients();
+  }, []);
+
   useEffect(() => {
     async function retrieveQuestionsAndAnswers(requests, cookie) {
       requests = requests
@@ -196,6 +212,24 @@ const ViewFeedbackResponses = () => {
   };
 
 
+  const getResponder = (responder, external) => {
+    let name = "";
+    let workEmail = "";
+    const info = selectProfile(state, responder);
+    if (external || !info) {
+      const current = externalRecipients.filter((e) => e.id === responder);
+      if (current.length > 0) {
+        const first = current[0];
+        name = `${first.firstName} ${first.lastName}`;
+        workEmail = first.email;
+      }     
+    } else if (info) {
+      name = info.name;
+      workEmail = info.workEmail;
+    }
+    return {name, workEmail};
+  };
+
   return selectCanViewFeedbackAnswerPermission(state) ? (
 
     <Root className="view-feedback-responses-page">
@@ -230,7 +264,7 @@ const ViewFeedbackResponses = () => {
           disableCloseOnSelect
           options={responderOptions}
           getOptionLabel={option => {
-            return selectProfile(state, option)?.name;
+            return getResponder(option)?.name;
           }}
           value={selectedResponders}
           onChange={(event, value) => setSelectedResponders(value)}
@@ -242,7 +276,7 @@ const ViewFeedbackResponses = () => {
                 style={{ marginRight: 8 }}
                 checked={selected}
               />
-              {selectProfile(state, option)?.name}
+              {getResponder(option)?.name}
             </li>
           )}
           renderInput={params => (
@@ -259,7 +293,7 @@ const ViewFeedbackResponses = () => {
           )}
           renderTags={(values, getTagProps) =>
             values.map((responderId, index) => {
-              const profile = selectProfile(state, responderId);
+              const profile = getResponder(responderId);
               return (
                 <Chip
                   key={`${responderId}-chip`}
@@ -313,15 +347,17 @@ const ViewFeedbackResponses = () => {
 
               {/* If the question has no answers or inputType is "NONE" */}
               {!hasResponses || question.inputType === 'NONE' ? null : (
-                question.answers.map(answer => (
-                  <FeedbackResponseCard
+                question.answers.map(answer => {
+                  const { workEmail, name } = getResponder(answer.responder, answer.external);
+                  return <FeedbackResponseCard
                     key={answer.id || answer.responder}
-                    responderId={answer.responder}
-                    answer={isEmptyOrWhitespace(answer.answer) ? ' ⚠️ No response submitted' : String(answer.answer)}
+                    responderName={name}
+                    responderEmail={workEmail}
+                    answer={String(answer.answer)}
                     inputType={question.inputType}
                     sentiment={answer.sentiment}
-                  />
-                ))
+                  />;
+                })
               )}
             </div>
           );
@@ -332,4 +368,4 @@ const ViewFeedbackResponses = () => {
   );
 };
 
-export default ViewFeedbackResponses;
+export default ViewFeedbackResponses;

web-ui/src/components/view_feedback_responses/feedback_response_card/FeedbackResponseCard.jsx

@@ -5,21 +5,20 @@ import CardContent from '@mui/material/CardContent';
 import { Typography } from '@mui/material';
 import './FeedbackResponseCard.css';
 import { AppContext } from '../../../context/AppContext';
-import { selectProfile } from '../../../context/selectors';
 import Avatar from '@mui/material/Avatar';
 import { getAvatarURL } from '../../../api/api.js';
 import FeedbackAnswerInput from '../../feedback_answer_input/FeedbackAnswerInput';
 
 const propTypes = {
-  responderId: PropTypes.string.isRequired,
+  responderName: PropTypes.string.isRequired,
+  responderEmail: PropTypes.string.isRequired,
   answer: PropTypes.string, // Allow answer to be null or undefined
   inputType: PropTypes.string.isRequired,
   sentiment: PropTypes.number
 };
 
 const FeedbackResponseCard = props => {
   const { state } = useContext(AppContext);
-  const userInfo = selectProfile(state, props.responderId);
 
   const getFormattedAnswer = () => {
     if (props.inputType === 'NONE') {
@@ -40,9 +39,9 @@ const FeedbackResponseCard = props => {
         <div className="response-card-recipient-info">
           <Avatar
             className="avatar-photo"
-            src={getAvatarURL(userInfo?.workEmail)}
+            src={getAvatarURL(props.responderEmail)}
           />
-          <Typography className="responder-name">{userInfo?.name}</Typography>
+          <Typography className="responder-name">{props.responderName}</Typography>
         </div>
         {props.inputType !== 'NONE' && (
           <FeedbackAnswerInput
@@ -58,4 +57,4 @@ const FeedbackResponseCard = props => {
 
 FeedbackResponseCard.propTypes = propTypes;
 
-export default FeedbackResponseCard;
+export default FeedbackResponseCard;