Bring back Twilio recordings overlay (#1672)

techmatters · Sep 21, 2023 · 043cdcc · 043cdcc
1 parent 9e46230
commit 043cdcc
Show file tree

Hide file tree

Showing 2 changed files with 30 additions and 14 deletions.
diff --git a/plugin-hrm-form/src/components/contact/ContactDetailsHome.tsx b/plugin-hrm-form/src/components/contact/ContactDetailsHome.tsx
@@ -240,12 +240,15 @@ const ContactDetailsHome: React.FC<Props> = function ({
       (twilioStoredTranscript || externalStoredTranscript),
   );
 
+  const twilioStoredRecording =
+    featureFlags.enable_voice_recordings && savedContact.details.conversationMedia?.find(isTwilioStoredMedia);
+  const externalStoredRecording = savedContact.details.conversationMedia?.find(isS3StoredRecording);
   const showRecordingSection = Boolean(
     isVoiceChannel(channel) &&
+      savedContact.details.conversationMedia?.length &&
       can(PermissionActions.VIEW_RECORDING) &&
-      savedContact.details.conversationMedia?.find(isS3StoredRecording),
+      (twilioStoredRecording || externalStoredRecording),
   );
-  const externalStoredRecording = savedContact.details.conversationMedia?.find(isS3StoredRecording);
 
   const csamReportEnabled = featureFlags.enable_csam_report && featureFlags.enable_csam_clc_report;
 
@@ -421,7 +424,11 @@ const ContactDetailsHome: React.FC<Props> = function ({
           showEditButton={false}
         >
           <Flex justifyContent="center" flexDirection="row" paddingTop="20px">
-            <RecordingSection contactId={contactId} externalStoredRecording={externalStoredRecording} />{' '}
+            <RecordingSection
+              contactId={contactId}
+              externalStoredRecording={externalStoredRecording}
+              loadConversationIntoOverlay={loadConversationIntoOverlay}
+            />{' '}
           </Flex>
         </ContactDetailsSection>
       )}

diff --git a/plugin-hrm-form/src/components/contact/MediaSection/RecordingSection.tsx b/plugin-hrm-form/src/components/contact/MediaSection/RecordingSection.tsx
@@ -22,9 +22,13 @@ import { S3StoredRecording } from '../../../types/types';
 import { generateExternalMediaPath } from '../../../services/ContactService';
 import fetchHrmApi from '../../../services/fetchHrmApi';
 
-type OwnProps = { contactId: string; externalStoredRecording: S3StoredRecording };
+type OwnProps = {
+  contactId: string;
+  externalStoredRecording?: S3StoredRecording;
+  loadConversationIntoOverlay: () => Promise<void>;
+};
 
-const RecordingSection: React.FC<OwnProps> = ({ contactId, externalStoredRecording }) => {
+const RecordingSection: React.FC<OwnProps> = ({ contactId, externalStoredRecording, loadConversationIntoOverlay }) => {
   const [voiceRecording, setVoiceRecording] = useState(null);
   const [loading, setLoading] = useState(false);
   const [showButton, setShowButton] = useState(true);
@@ -35,16 +39,21 @@ const RecordingSection: React.FC<OwnProps> = ({ contactId, externalStoredRecordi
       setLoading(true);
       setShowButton(false);
 
-      // TODO: this won't currently work for local dev env
-      const { media_url: recordingPreSignedUrl } = await fetchHrmApi(
-        generateExternalMediaPath(
-          contactId,
-          externalStoredRecording.location.bucket,
-          externalStoredRecording.location.key,
-        ),
-      );
+      if (externalStoredRecording) {
+        // TODO: this won't currently work for local dev env
+        const { media_url: recordingPreSignedUrl } = await fetchHrmApi(
+          generateExternalMediaPath(
+            contactId,
+            externalStoredRecording.location.bucket,
+            externalStoredRecording.location.key,
+          ),
+        );
 
-      setVoiceRecording(recordingPreSignedUrl);
+        setVoiceRecording(recordingPreSignedUrl);
+      } else {
+        await loadConversationIntoOverlay();
+        setShowButton(true);
+      }
 
       setLoading(false);
     } catch (error) {