feat: Integrated Optimizely Prompt Experiment

.github/workflows/ci.yml

@@ -1,5 +1,5 @@
 name: Default CI
-on: 
+on:
   push:
     branches:
       - 'main'
@@ -28,7 +28,7 @@ jobs:
     - name: Lint
       run: npm run lint
     - name: Test
-      run: npm run test
+      run: npm run test:ci
     - name: Build
       run: npm run build
     - name: i18n_extract

.github/workflows/release.yml

@@ -22,7 +22,7 @@ jobs:
       - name: Install dependencies
         run: npm ci
       - name: Test
-        run: npm run test
+        run: npm run test:ci
       - name: Release
         env:
           GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}

package.json

@@ -19,7 +19,8 @@
     "lint:fix": "fedx-scripts eslint --fix --ext .js --ext .jsx .",
     "snapshot": "fedx-scripts jest --updateSnapshot",
     "start": "fedx-scripts webpack-dev-server --progress",
-    "test": "fedx-scripts jest --coverage --passWithNoTests"
+    "test": "fedx-scripts jest --coverage --passWithNoTests",
+    "test:ci": "fedx-scripts jest --silent --coverage --passWithNoTests"
   },
   "files": [
     "/dist"
@@ -72,6 +73,7 @@
     "@reduxjs/toolkit": "1.8.1",
     "@testing-library/jest-dom": "6.4.5",
     "@testing-library/react": "^12.1.5",
+    "@testing-library/react-hooks": "^8.0.1",
     "@testing-library/user-event": "^14.4.3",
     "glob": "7.2.3",
     "husky": "7.0.4",

src/components/Disclosure/index.jsx

@@ -30,19 +30,21 @@ const Disclosure = ({ children }) => (
         </ul>
       </div>
     </div>
-    <p className="disclaimer text-light-100 py-3">
-      <strong>Note: </strong>
-      This chat is AI generated (powered by ChatGPT). Mistakes are possible.
-      By using it you agree that edX may create a record of this chat.
-      Your personal data will be used as described in our&nbsp;
-      <Hyperlink
-        className="privacy-policy-link text-light-100"
-        destination={getConfig().PRIVACY_POLICY_URL}
-      >
-        privacy policy
-      </Hyperlink>
-      .
-    </p>
+    {getConfig().PRIVACY_POLICY_URL ? (
+      <p className="disclaimer text-light-100 py-3">
+        <strong>Note: </strong>
+        This chat is AI generated (powered by ChatGPT). Mistakes are possible.
+        By using it you agree that edX may create a record of this chat.
+        Your personal data will be used as described in our&nbsp;
+        <Hyperlink
+          className="privacy-policy-link text-light-100"
+          destination={getConfig().PRIVACY_POLICY_URL}
+        >
+          privacy policy
+        </Hyperlink>
+        .
+      </p>
+    ) : null }
     {children}
   </div>
 );

src/components/Sidebar/index.jsx

@@ -9,14 +9,15 @@ import {
 } from '@openedx/paragon';
 import { Close } from '@openedx/paragon/icons';
 
+import { clearMessages } from '../../data/thunks';
+import { PROMPT_EXPERIMENT_FLAG, PROMPT_EXPERIMENT_KEY } from '../../constants/experiments';
+import { showControlSurvey, showVariationSurvey } from '../../utils/surveyMonkey';
+
 import APIError from '../APIError';
 import ChatBox from '../ChatBox';
 import Disclosure from '../Disclosure';
 import MessageForm from '../MessageForm';
 import './Sidebar.scss';
-import {
-  clearMessages,
-} from '../../data/thunks';
 
 const Sidebar = ({
   courseId,
@@ -28,7 +29,9 @@ const Sidebar = ({
     apiError,
     disclosureAcknowledged,
     messageList,
+    experiments,
   } = useSelector(state => state.learningAssistant);
+  const { variationKey } = experiments?.[PROMPT_EXPERIMENT_FLAG] || {};
   const chatboxContainerRef = useRef(null);
   const dispatch = useDispatch();
 
@@ -69,17 +72,20 @@ const Sidebar = ({
   const handleClick = () => {
     setIsOpen(false);
 
-    // check to see if hotjar is available, then trigger hotjar event if user has sent and received a message
-    const hasWindow = typeof window !== 'undefined';
-    if (hasWindow && window.hj && messageList.length >= 2) {
-      window.hj('event', 'ocm_learning_assistant_chat_closed');
+    if (messageList.length >= 2) {
+      if (variationKey === PROMPT_EXPERIMENT_KEY) {
+        showVariationSurvey();
+      } else {
+        showControlSurvey();
+      }
     }
   };
 
   const handleClearMessages = () => {
     dispatch(clearMessages());
     sendTrackEvent('edx.ui.lms.learning_assistant.clear', {
       course_id: courseId,
+      ...(variationKey ? { experiment_name: PROMPT_EXPERIMENT_FLAG, variation_key: variationKey } : {}),
     });
   };
 
@@ -88,7 +94,7 @@ const Sidebar = ({
   );
 
   const getSidebar = () => (
-    <div className="h-100 d-flex flex-column justify-content-stretch">
+    <div className="h-100 d-flex flex-column justify-content-stretch" data-testid="sidebar-xpert">
       <div className="d-flex flex-column align-items-center p-3">
         <h1 className="font-weight-bold mb-3">
           Hi, I&apos;m Xpert!
@@ -119,6 +125,7 @@ const Sidebar = ({
           aria-label="clear"
           variant="primary"
           type="button"
+          data-testid="sidebar-clear-btn"
         >
           Clear
         </Button>
@@ -130,16 +137,18 @@ const Sidebar = ({
     isOpen && (
       <div
         className="sidebar position-fixed"
+        data-testid="sidebar"
       >
         <IconButton
           className="chat-close position-absolute m-2 border-0"
           src={Close}
           iconAs={Icon}
-          data-testid="close-button"
           onClick={handleClick}
+          alt="close"
           aria-label="close"
           variant="primary"
           invertColors={!disclosureAcknowledged}
+          data-testid="close-button"
         />
         {disclosureAcknowledged ? (getSidebar()) : (<Disclosure>{getMessageForm()}</Disclosure>)}
       </div>