From 396e2c322a196394376e7fc09c294e6976d06dd0 Mon Sep 17 00:00:00 2001
From: Doug Martin <dmartin@concord.org>
Date: Mon, 1 Apr 2024 06:18:35 -0400
Subject: [PATCH] fix: Change audio answer badge check [PT-187279104]

Previously the audio answer badge check looked at the attachments and if there was at least one audio attachment the badge was shown.  This was found to be incorrect in QA as when the audio is deleted the attachment remains but the interactive state is updated to remove the pointer to the attachment.

This commit changes to look at the interactive state within the report state.

This also fixes a missing key issue in the audio badges display that causes a warning.
---
 .../portal-dashboard/answer-compact.tsx       |  9 ++++----
 js/util/answer-utils.tsx                      | 23 ++++++++++---------
 2 files changed, 17 insertions(+), 15 deletions(-)

diff --git a/js/containers/portal-dashboard/answer-compact.tsx b/js/containers/portal-dashboard/answer-compact.tsx
index 4b9da4a5..3f9f0f73 100644
--- a/js/containers/portal-dashboard/answer-compact.tsx
+++ b/js/containers/portal-dashboard/answer-compact.tsx
@@ -62,18 +62,19 @@ export class AnswerCompact extends React.PureComponent<IProps> {
           ? this.renderAnswer(answerType?.icon, iconId)
           : this.renderNoAnswer()
         }
-        {answerBadges.map(answerBadge => {
+        {answerBadges.map((answerBadge, index) => {
+          const key = `${answerBadge}-${index}`;
           switch (answerBadge) {
             case "audioAttachment":
-              return <AudioRecordingBadge className={css.audioAttachmentBadge} data-cy="answer-audio-attachment-badge" />;
+              return <AudioRecordingBadge key={key} className={css.audioAttachmentBadge} data-cy="answer-audio-attachment-badge" />;
             case "questionFeedback":
               if (!hideFeedbackBadges) {
-                return <QuestionFeedbackBadge className={css.feedbackBadge} data-cy="question-feedback-badge" />;
+                return <QuestionFeedbackBadge key={key} className={css.feedbackBadge} data-cy="question-feedback-badge" />;
               }
               break;
             case "feedbackAnswerUpdated":
               if (!hideFeedbackBadges) {
-                return <FeedbackAnswerUpdatedBadge className={css.feedbackBadge} data-cy="answer-updated-feedback-badge" />;
+                return <FeedbackAnswerUpdatedBadge key={key} className={css.feedbackBadge} data-cy="answer-updated-feedback-badge" />;
               }
               break;
           }
diff --git a/js/util/answer-utils.tsx b/js/util/answer-utils.tsx
index e987de05..95ccc850 100644
--- a/js/util/answer-utils.tsx
+++ b/js/util/answer-utils.tsx
@@ -136,7 +136,6 @@ export const getAnswerIconId = (answerType: any) => {
 export const getAnswerBadges = (answer: Map<string, any>, feedback: Map<string, any>): AnswerBadge[] => {
   const badges: Set<AnswerBadge> = new Set();
   const type = answer && answer.get("questionType");
-  const attachments = answer && answer.get("attachments");
 
   if (feedback && feedback.get("feedback") !== "") {
     if (feedbackValidForAnswer(feedback, answer)) {
@@ -146,16 +145,18 @@ export const getAnswerBadges = (answer: Map<string, any>, feedback: Map<string,
     }
   }
 
-  switch (type) {
-    case "open_response":
-      if (attachments) {
-        attachments.forEach((attachment: any) => {
-          if (attachment.get("contentType")?.startsWith?.("audio/")) {
-            badges.add("audioAttachment");
-          }
-        }, false);
-      }
-      break;
+  if (type === "open_response") {
+    let interactiveState: any;
+    try {
+      const reportState = JSON.parse(answer && answer.get("reportState"));
+      interactiveState = JSON.parse(reportState?.interactiveState);
+    } catch (e) {
+      interactiveState = undefined;
+    }
+
+    if (interactiveState?.audioFile) {
+      badges.add("audioAttachment");
+    }
   }
 
   return Array.from(badges);