feat: add support for a technical support URL in the LTI-based provid…

…er 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

@@ -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,
   },

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: '',

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;

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}
         />
       );
     }