feat: added logic to display hotjar survey widget (#120)

Author: jszewczulak

src/components/HotjarSurvey/index.jsx

@@ -0,0 +1,40 @@
+import React, { useEffect } from 'react';
+import { useGlobalState, useStepInfo, useAssessmentStepConfig } from 'hooks/app';
+import { stepNames, stepStates } from 'constants';
+
+export const HotjarSurvey = () => {
+  const configInfo = useAssessmentStepConfig();
+  const stepInfo = useStepInfo();
+  const isSelfRequired = configInfo.settings[stepNames.self].required;
+  const isPeerRequired = configInfo.settings[stepNames.peer].required;
+  const stepState = useGlobalState(stepNames.self).activeStepState;
+
+  let isShowSurvey = false;
+  /*
+    Hotjar survey widget will show for the following scenarios:
+    1. ORA is configured with self AND NOT peer assessment.
+       After completing self assessment survey will render (xblock)
+    2. ORA is configured with self AND peer assessment. Survey
+       will render when learner completed their assignments
+  */
+  if (isSelfRequired && !isPeerRequired) {
+    isShowSurvey = (stepState === stepStates.done);
+  } else if (isPeerRequired && stepInfo[stepNames.peer] != null) {
+    const stepConfigInfo = configInfo.settings[stepNames.peer];
+    const { minNumberToGrade } = stepConfigInfo;
+    const { numberOfAssessmentsCompleted } = stepInfo[stepNames.peer];
+
+    isShowSurvey = (minNumberToGrade === numberOfAssessmentsCompleted);
+  }
+
+  useEffect(() => {
+    if (isShowSurvey && window.hj) {
+      window.hj('event', 'lms_openassessment_survey');
+    }
+  });
+  return (
+    <div id="openassessment_hotjar" />
+  );
+};
+
+export default HotjarSurvey;

src/views/XBlockView/index.jsx

@@ -7,6 +7,7 @@ import Prompt from 'components/Prompt';
 import Rubric from 'components/Rubric';
 import Instructions from 'components/Instructions';
 import StatusAlert from 'components/StatusAlert';
+import HotjarSurvey from 'components/HotjarSurvey';
 
 import StatusRow from './StatusRow';
 import Actions from './Actions';
@@ -31,6 +32,7 @@ export const XBlockView = () => {
       <ProgressBar />
       <StatusRow />
       <StatusAlert />
+      <HotjarSurvey />
       <Instructions />
       <Actions />
       {prompts.map(prompt => <Prompt key={prompt} prompt={prompt} />)}