From 8a7e085464615363f7400ec8d1372da65e176f3a Mon Sep 17 00:00:00 2001
From: michaelroytman <mroytman@edx.org>
Date: Wed, 20 Dec 2023 08:22:40 -0500
Subject: [PATCH] feat: add support for a technical support URL in the
 LTI-based provider download instructions

This commit adds support for displaying a technical support URL for LTI-based providers on the download instructions interstitial. The download instructions will display a technical support URL when it is returned from the proctoring settings backend endpoint. If the technical support URL is not available, then the technical support email and technical support phone number will be used instead.
---
 src/data/__snapshots__/redux.test.jsx.snap    |  5 ++
 src/data/slice.js                             |  1 +
 .../LtiProviderInstructions.jsx               | 63 +++++++++++++------
 .../download-instructions/index.jsx           |  2 +
 4 files changed, 51 insertions(+), 20 deletions(-)

diff --git a/src/data/__snapshots__/redux.test.jsx.snap b/src/data/__snapshots__/redux.test.jsx.snap
index e1cb7ba9..69475b13 100644
--- a/src/data/__snapshots__/redux.test.jsx.snap
+++ b/src/data/__snapshots__/redux.test.jsx.snap
@@ -84,6 +84,7 @@ Object {
       "provider_name": "",
       "provider_tech_support_email": "",
       "provider_tech_support_phone": "",
+      "provider_tech_support_url": "",
     },
     "timeIsOver": false,
   },
@@ -129,6 +130,7 @@ Object {
       "provider_name": "",
       "provider_tech_support_email": "",
       "provider_tech_support_phone": "",
+      "provider_tech_support_url": "",
     },
     "timeIsOver": false,
   },
@@ -148,6 +150,7 @@ Object {
   "provider_name": "",
   "provider_tech_support_email": "",
   "provider_tech_support_phone": "",
+  "provider_tech_support_url": "",
 }
 `;
 
@@ -302,6 +305,7 @@ Object {
       "provider_name": "",
       "provider_tech_support_email": "",
       "provider_tech_support_phone": "",
+      "provider_tech_support_url": "",
     },
     "timeIsOver": false,
   },
@@ -370,6 +374,7 @@ Object {
       "provider_name": "",
       "provider_tech_support_email": "",
       "provider_tech_support_phone": "",
+      "provider_tech_support_url": "",
     },
     "timeIsOver": false,
   },
diff --git a/src/data/slice.js b/src/data/slice.js
index 39c038ed..0b633dcc 100644
--- a/src/data/slice.js
+++ b/src/data/slice.js
@@ -17,6 +17,7 @@ export const examSlice = createSlice({
       },
       provider_tech_support_email: '',
       provider_tech_support_phone: '',
+      provider_tech_support_url: '',
       provider_name: '',
       learner_notification_from_email: '',
       integration_specific_email: '',
diff --git a/src/instructions/proctored_exam/download-instructions/LtiProviderInstructions.jsx b/src/instructions/proctored_exam/download-instructions/LtiProviderInstructions.jsx
index e9cc2d84..a68e9fca 100644
--- a/src/instructions/proctored_exam/download-instructions/LtiProviderInstructions.jsx
+++ b/src/instructions/proctored_exam/download-instructions/LtiProviderInstructions.jsx
@@ -1,47 +1,70 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import { FormattedMessage } from '@edx/frontend-platform/i18n';
+import { Hyperlink } from '@edx/paragon';
 
 const LtiProviderExamInstructions = ({
-  providerName, supportEmail, supportPhone,
-}) => (
-  <>
-    <p>
-      <FormattedMessage
-        id="exam.DownloadSoftwareProctoredExamInstructions.text1"
-        defaultMessage={'Note: As part of the proctored exam setup, you '
-        + 'will be asked to verify your identity. Before you begin, make '
-        + 'sure you are on a computer with a webcam, and that you have a '
-        + 'valid form of photo identification such as a driver’s license or passport.'}
-      />
-    </p>
-    {supportEmail && supportPhone && (
-      <p>
+  providerName, supportEmail, supportPhone, supportURL,
+}) => {
+  const supportURLHyperlink = (chunks) => (
+    <Hyperlink destination={chunks} target="_blank">
+      {chunks}
+    </Hyperlink>
+  );
+
+  const getSupportText = () => {
+    // We assume that an LTI-based provider will either have a supportURL or a supportEmail and supportPhone.
+    // In the unlikely event a provider has all three, we prioritize the supportURL.
+    if (supportURL) {
+      return (
         <FormattedMessage
-          id="exam.DownloadSoftwareProctoredExamInstructions.supportText"
+          id="exam.DownloadSoftwareProctoredExamInstructions.LTI.supportText.URL"
           defaultMessage={'If you have issues relating to proctoring, you can contact '
-          + '{providerName} technical support by emailing {supportEmail} or by calling {supportPhone}.'}
+            + '{providerName} technical support by visiting <a>{supportURL}</a>.'}
+          values={{
+            providerName,
+            supportURL,
+            a: supportURLHyperlink,
+          }}
+        />
+      );
+    }
+    if (supportEmail && supportPhone) {
+      return (
+        <FormattedMessage
+          id="exam.DownloadSoftwareProctoredExamInstructions.LTI.supportText.EmailPhone"
+          defaultMessage={'If you have issues relating to proctoring, you can contact '
+            + '{providerName} technical support by emailing {supportEmail} or by calling {supportPhone}.'}
           values={{
             providerName,
             supportEmail,
             supportPhone,
           }}
         />
-      </p>
-    )}
-  </>
-);
+      );
+    }
+    return null;
+  };
+
+  return (
+    <p>
+      {getSupportText()}
+    </p>
+  );
+};
 
 LtiProviderExamInstructions.propTypes = {
   providerName: PropTypes.string,
   supportEmail: PropTypes.string,
   supportPhone: PropTypes.string,
+  supportURL: PropTypes.string,
 };
 
 LtiProviderExamInstructions.defaultProps = {
   providerName: '',
   supportEmail: '',
   supportPhone: '',
+  supportURL: '',
 };
 
 export default LtiProviderExamInstructions;
diff --git a/src/instructions/proctored_exam/download-instructions/index.jsx b/src/instructions/proctored_exam/download-instructions/index.jsx
index 868db55b..298d81c2 100644
--- a/src/instructions/proctored_exam/download-instructions/index.jsx
+++ b/src/instructions/proctored_exam/download-instructions/index.jsx
@@ -39,6 +39,7 @@ const DownloadSoftwareProctoredExamInstructions = ({ intl, skipProctoredExam })
     provider_name: providerName,
     provider_tech_support_email: supportEmail,
     provider_tech_support_phone: supportPhone,
+    provider_tech_support_url: supportURL,
     exam_proctoring_backend: proctoringBackend,
   } = proctoringSettings;
   const examHasLtiProvider = !useLegacyAttemptApi;
@@ -81,6 +82,7 @@ const DownloadSoftwareProctoredExamInstructions = ({ intl, skipProctoredExam })
           providerName={providerName}
           supportEmail={supportEmail}
           supportPhone={supportPhone}
+          supportURL={supportURL}
         />
       );
     }