fix: use https

chore: remove optimizely project id

.env

@@ -25,6 +25,7 @@ FAVICON_URL=''
 COLLECT_YEAR_OF_BIRTH=true
 APP_ID=''
 MFE_CONFIG_API_URL=''
+SEARCH_CATALOG_URL=''
 ENABLE_SKILLS_BUILDER=''
 ENABLE_SKILLS_BUILDER_PROFILE=''
 ALGOLIA_APP_ID=''

.env.development

@@ -26,6 +26,7 @@ FAVICON_URL=https://edx-cdn.org/v3/default/favicon.ico
 COLLECT_YEAR_OF_BIRTH=true
 APP_ID=''
 MFE_CONFIG_API_URL=''
+SEARCH_CATALOG_URL='http://localhost:18000/courses'
 ENABLE_SKILLS_BUILDER='true'
 ENABLE_SKILLS_BUILDER_PROFILE=''
 ALGOLIA_APP_ID=''

.github/workflows/ci.yml

@@ -13,13 +13,13 @@ jobs:
         - i18n_extract
         - lint
         - test
-        node: [16]
     steps:
     - uses: actions/checkout@v3
+    - name: Setup Nodejs Env
+      run: echo "NODE_VER=`cat .nvmrc`" >> $GITHUB_ENV
     - uses: actions/setup-node@v3
       with:
-        node-version: ${{ matrix.node }}
-    - run: npm install -g npm@8.x.x
+        node-version: ${{ env.NODE_VER }}
     - run: make requirements
     - run: make test NPM_TESTS=build
     - run: make test NPM_TESTS=${{ matrix.npm-test }}

.github/workflows/lockfileversion-check.yml

@@ -10,4 +10,4 @@ on:
 
 jobs:
   version-check:
-    uses: openedx/.github/.github/workflows/lockfileversion-check.yml@master
+    uses: openedx/.github/.github/workflows/lockfileversion-check-v3.yml@master

.gitignore

@@ -16,4 +16,7 @@ temp/babel-plugin-react-intl
 *~
 /temp
 /.vscode
-/module.config.js
+
+# Open edX
+module.config.js
+.env.development-stage

.nvmrc

@@ -1 +1 @@
-v16
+18

Makefile

@@ -2,6 +2,7 @@ export TRANSIFEX_RESOURCE = frontend-app-profile
 transifex_resource = frontend-app-profile
 transifex_langs = "ar,fr,es_419,zh_CN,pt,it,de,uk,ru,hi,fr_CA"
 
+intl_imports = ./node_modules/.bin/intl-imports.js
 transifex_utils = ./node_modules/.bin/transifex-utils.js
 i18n = ./src/i18n
 transifex_input = $(i18n)/transifex_input.json
@@ -49,9 +50,23 @@ push_translations:
 	# Pushing comments to Transifex...
 	./node_modules/@edx/reactifex/bash_scripts/put_comments_v3.sh
 
+ifeq ($(OPENEDX_ATLAS_PULL),)
 # Pulls translations from Transifex.
 pull_translations:
 	tx pull -t -f --mode reviewed --languages=$(transifex_langs)
+else
+# Experimental: OEP-58 Pulls translations using atlas
+pull_translations:
+	rm -rf src/i18n/messages
+	mkdir src/i18n/messages
+	cd src/i18n/messages \
+      && atlas pull --filter=$(transifex_langs) \
+               translations/frontend-component-header/src/i18n/messages:frontend-component-header \
+               translations/frontend-component-footer/src/i18n/messages:frontend-component-footer \
+               translations/frontend-app-profile/src/i18n/messages:frontend-app-profile
+
+	$(intl_imports) frontend-component-header frontend-component-footer frontend-app-profile
+endif
 
 # This target is used by Travis.
 validate-no-uncommitted-package-lock-changes:

env.config.js

@@ -0,0 +1,25 @@
+const config = {
+  // Override default .env.development values
+  ACCESS_TOKEN_COOKIE_NAME: 'stage-edx-jwt-cookie-header-payload',
+  CREDENTIALS_BASE_URL: 'https://credentials.stage.edx.org',
+  LMS_BASE_URL: 'https://courses.stage.edx.org',
+  LOGIN_URL: 'https://courses.stage.edx.org/login',
+  LOGOUT_URL: 'https://courses.stage.edx.org/logout',
+  MARKETING_SITE_BASE_URL: 'https://stage.edx.org',
+  ORDER_HISTORY_URL: 'https://orders.stage.edx.org/orders',
+  ENTERPRISE_LEARNER_PORTAL_HOSTNAME: 'enterprise.stage.edx.org',
+  REFRESH_ACCESS_TOKEN_ENDPOINT: 'https://courses.stage.edx.org/login_refresh',
+  // Paragon theme URLs
+  PARAGON_THEME_URLS: {
+    core: 'https://cdn.jsdelivr.net/npm/@edx/paragon@$paragonVersion/dist/core.min.css',
+    variants: {
+      light: {
+        url: 'https://cdn.jsdelivr.net/npm/@edx/paragon@$paragonVersion/dist/light.min.css',
+        default: true,
+        dark: false,
+      },
+    },
+  },
+};
+
+export default config;

package.json

@@ -28,18 +28,18 @@
   ],
   "dependencies": {
     "@edx/brand": "npm:@edx/brand-openedx@1.2.0",
-    "@edx/frontend-component-footer": "11.7.1",
-    "@edx/frontend-component-header": "3.6.5",
-    "@edx/frontend-platform": "3.3.1",
-    "@edx/paragon": "^20.20.0",
+    "@edx/frontend-component-footer": "12.0.0",
+    "@edx/frontend-component-header": "4.0.0",
+    "@edx/frontend-platform": "4.5.0",
+    "@edx/paragon": "^20.32.0",
     "@fortawesome/fontawesome-svg-core": "1.2.36",
     "@fortawesome/free-brands-svg-icons": "5.15.4",
     "@fortawesome/free-regular-svg-icons": "5.15.4",
     "@fortawesome/free-solid-svg-icons": "5.15.4",
     "@fortawesome/react-fontawesome": "0.2.0",
-    "algoliasearch": "4.6.0",
+    "algoliasearch": "4.17.1",
     "classnames": "2.3.2",
-    "core-js": "3.27.2",
+    "core-js": "3.30.2",
     "history": "4.10.1",
     "lodash.camelcase": "4.3.0",
     "lodash.get": "4.4.2",
@@ -59,15 +59,15 @@
     "redux-saga": "1.2.3",
     "redux-thunk": "2.4.2",
     "regenerator-runtime": "0.13.11",
-    "reselect": "4.1.7",
+    "reselect": "4.1.8",
     "universal-cookie": "4.0.4"
   },
   "devDependencies": {
-    "@commitlint/cli": "17.5.1",
-    "@commitlint/config-angular": "17.4.4",
+    "@commitlint/cli": "17.6.3",
+    "@commitlint/config-angular": "17.6.3",
     "@edx/browserslist-config": "^1.1.1",
-    "@edx/frontend-build": "12.8.6",
-    "@edx/reactifex": "2.1.1",
+    "@edx/frontend-build": "12.8.38",
+    "@edx/reactifex": "2.2.0",
     "@testing-library/react": "11.2.7",
     "codecov": "3.8.3",
     "enzyme": "3.11.0",

src/i18n/index.js

@@ -1,3 +1,6 @@
+import { messages as headerMessages } from '@edx/frontend-component-header';
+import { messages as footerMessages } from '@edx/frontend-component-footer';
+
 import arMessages from './messages/ar.json';
 import frMessages from './messages/fr.json';
 import es419Messages from './messages/es_419.json';
@@ -11,7 +14,7 @@ import hiMessages from './messages/hi.json';
 import frCAMessages from './messages/fr_CA.json';
 // no need to import en messages-- they are in the defaultMessage field
 
-const messages = {
+const appMessages = {
   ar: arMessages,
   'es-419': es419Messages,
   fr: frMessages,
@@ -25,4 +28,8 @@ const messages = {
   uk: ukMessages,
 };
 
-export default messages;
+export default [
+  headerMessages,
+  footerMessages,
+  appMessages,
+];

src/i18n/messages/ar.json

@@ -34,11 +34,11 @@
   "profile.formcontrols.button.saved": "تم الحفظ",
   "profile.visibility.who.just.me": "أنا فقط",
   "profile.visibility.who.everyone": "جميع من على {siteName}",
-  "profile.learningGoal.learningGoal": "Learning Goal",
-  "profile.learningGoal.options.start_career": "I want to start my career",
-  "profile.learningGoal.options.advance_career": "I want to advance my career",
-  "profile.learningGoal.options.learn_something_new": "I want to learn something new",
-  "profile.learningGoal.options.something_else": "Something else",
+  "profile.learningGoal.learningGoal": "هدف التعلم",
+  "profile.learningGoal.options.start_career": "أريد أن أبدأ مسيرتي المهنية",
+  "profile.learningGoal.options.advance_career": "أريد أن ارتقي في مسيرتي المهنية",
+  "profile.learningGoal.options.learn_something_new": "أريد أن أتعلم شيئًا جديدًا",
+  "profile.learningGoal.options.something_else": "شيء آخر",
   "profile.name.full.name": "الاسم الكامل",
   "profile.name.details": "هذا هو الاسم الذي يظهر في حسابك وفي شهاداتك",
   "profile.name.empty": "إضافة الاسم",
@@ -54,31 +54,31 @@
   "profile.viewMyRecords": "عرض سجلّاتي",
   "profile.loading": "يتم تحميل الملف الشخصي...",
   "profile.username.description": "معلومات ملفك الشخصي تظهر لك فقط. وحده اسم المستخدم الخاص بك يظهر للآخرين على {siteName}.",
-  "skills.builder.header.title": "Skills Builder",
-  "skills.builder.header.subheading": "Let edX be your guide",
-  "go.back.button": "Go Back",
-  "next.step.button": "Next Step",
-  "exit.button": "Exit",
-  "select.preferences": "Select preferences",
-  "review.results": "Review results",
-  "skills.builder.description": "Find the right courses and programs that help you reach your goals.",
-  "learning.goal.prompt": "First, tell us what you want to achieve",
-  "select.learning.goal": "Select a goal",
-  "learning.goal.start_career": "I want to start my career",
-  "learning.goal.advance_career": "I want to advance my career",
-  "learning.goal.change_career": "I want to change careers",
-  "learning.goal.something.new": "I want to learn something new",
-  "learning.goal.something.else": "Something else",
-  "job.title.prompt": "Next, search and select your current job title",
-  "job.title.input.placeholder.text": "Search and select a job title",
-  "student.checkbox.prompt": "I'm a student",
-  "currently.looking.checkbox.prompt": "I'm currently looking for work",
-  "career.interest.prompt": "What careers are you interested in?",
-  "career.interest.input.placeholder.text": "Select up to 3 new job titles",
-  "career.interest.remove.button.alt.text": "Remove career interest: ",
-  "matches.found.success.alert": "We found skills and courses that match your preferences!",
-  "matches.not.found.danger.alert": "We were not able to retrieve recommendations at this time. Please try again later.",
-  "related.skills.heading": "Related Skills",
-  "related.skills.selectable.box.label.text": "Related skills:",
+  "skills.builder.header.title": "باني المهارات",
+  "skills.builder.header.subheading": "دع (المنصة التعليمية أو edX) ان تكون دليلك",
+  "go.back.button": "العودة إلى الخلف",
+  "next.step.button": "الخطوة التالية",
+  "exit.button": "خروج",
+  "select.preferences": "حدد التفضيلاتك",
+  "review.results": "مراجعة النتائج",
+  "skills.builder.description": "ابحث عن الدورات والبرامج المناسبة التي تساعدك في الوصول إلى أهدافك.",
+  "learning.goal.prompt": "أولاً، أخبرنا بما تريد تحقيقه",
+  "select.learning.goal": "اختر هدفًا",
+  "learning.goal.start_career": "أريد أن أبدأ مسيرتي المهنية",
+  "learning.goal.advance_career": "أريد أن ارتقي في مهنتي",
+  "learning.goal.change_career": "اريد تغيير المهنتي",
+  "learning.goal.something.new": "أريد أن أتعلم شيئًا جديدًا",
+  "learning.goal.something.else": "شيء آخر",
+  "job.title.prompt": "بعد ذلك، ابحث وحدد المسمى الوظيفي الحالي الخاص بك",
+  "job.title.input.placeholder.text": "أبحث واختار مسمى وظيفي",
+  "student.checkbox.prompt": "أنا طالب",
+  "currently.looking.checkbox.prompt": "أنا حاليا أبحث عن عمل",
+  "career.interest.prompt": "ما هي المهن التي تثير اهتمامك؟",
+  "career.interest.input.placeholder.text": "حدد ما يصل إلى ثلاث عناوين وظيفية جديدة",
+  "career.interest.remove.button.alt.text": "إزالة الاهتمام الوظيفي:",
+  "matches.found.success.alert": "وجدنا المهارات والدورات التي تناسب تفضيلاتك!",
+  "matches.not.found.danger.alert": "لم نتمكن من استرداد التوصيات في هذا الوقت. الرجاء معاودة المحاولة في وقت لاحق.",
+  "related.skills.heading": "مهارات ذات الصلة",
+  "related.skills.selectable.box.label.text": "مهارات ذات الصلة:",
   "product.recommendations.header.text": "{productType} recommendations for {jobName}"
 }

src/i18n/messages/uk.json

@@ -8,7 +8,7 @@
   "profile.certificate.organization.label": "From",
   "profile.certificate.completion.date.label": "Completed on {date}",
   "profile.no.certificates": "You don't have any certificates yet.",
-  "profile.certificates.my.certificates": "My Certificates",
+  "profile.certificates.my.certificates": "Мої сертифікати",
   "profile.certificates.view.certificate": "View Certificate",
   "profile.certificates.types.verified": "Verified Certificate",
   "profile.certificates.types.professional": "Professional Certificate",

src/index.jsx

@@ -16,10 +16,10 @@ import {
 import React from 'react';
 import ReactDOM from 'react-dom';
 
-import Header, { messages as headerMessages } from '@edx/frontend-component-header';
-import Footer, { messages as footerMessages } from '@edx/frontend-component-footer';
+import Header from '@edx/frontend-component-header';
+import Footer from '@edx/frontend-component-footer';
 
-import appMessages from './i18n';
+import messages from './i18n';
 import configureStore from './data/configureStore';
 
 import './index.scss';
@@ -46,11 +46,7 @@ subscribe(APP_INIT_ERROR, (error) => {
 });
 
 initialize({
-  messages: [
-    appMessages,
-    headerMessages,
-    footerMessages,
-  ],
+  messages,
   hydrateAuthenticatedUser: true,
   handlers: {
     config: () => {
@@ -62,6 +58,7 @@ initialize({
         ALGOLIA_JOBS_INDEX_NAME: process.env.ALGOLIA_JOBS_INDEX_NAME || null,
         ALGOLIA_PRODUCT_INDEX_NAME: process.env.ALGOLIA_PRODUCT_INDEX_NAME || null,
         ALGOLIA_SEARCH_API_KEY: process.env.ALGOLIA_SEARCH_API_KEY || null,
+        MARKETING_SITE_SEARCH_URL: process.env.SEARCH_CATALOG_URL || null,
       }, 'App loadConfig override handler');
     },
   },

src/skills-builder/skills-builder-modal/SkillsBuilderModal.jsx

@@ -1,9 +1,10 @@
 import React, { useState, useContext } from 'react';
 import {
-  Button, Container, Stepper, ModalDialog,
+  Button, Container, Stepper, ModalDialog, Form, Hyperlink,
 } from '@edx/paragon';
+import { getConfig } from '@edx/frontend-platform';
 import { useIntl } from '@edx/frontend-platform/i18n';
-import { useHistory } from 'react-router';
+import { sendTrackEvent } from '@edx/frontend-platform/analytics';
 import {
   STEP1, STEP2,
 } from '../data/constants';
@@ -19,13 +20,34 @@ import headerImage from '../images/headerImage.png';
 const SkillsBuilderModal = () => {
   const { formatMessage } = useIntl();
   const { state } = useContext(SkillsBuilderContext);
-  const { careerInterests } = state;
+  const { currentGoal, currentJobTitle, careerInterests } = state;
   const [currentStep, setCurrentStep] = useState(STEP1);
 
-  const history = useHistory();
+  const sendActionButtonEvent = (eventSuffix) => {
+    sendTrackEvent(
+      `edx.skills_builder.${eventSuffix}`,
+      {
+        app_name: 'skills_builder',
+        category: 'skills_builder',
+        learner_data: {
+          current_goal: currentGoal,
+          current_job_title: currentJobTitle,
+          career_interests: careerInterests,
+        },
+      },
+    );
+  };
 
-  const onCloseHandle = () => {
-    history.goBack();
+  const nextStepHandle = () => {
+    setCurrentStep(STEP2);
+    sendActionButtonEvent('next_step');
+  };
+  const exitButtonHandle = () => {
+    sendActionButtonEvent('exit');
+  };
+  const closeButtonHandle = () => {
+    sendActionButtonEvent('close');
+    window.location.href = getConfig().MARKETING_SITE_SEARCH_URL;
   };
 
   return (
@@ -35,7 +57,7 @@ const SkillsBuilderModal = () => {
         size="fullscreen"
         className="skills-builder-modal bg-light-200"
         isOpen
-        onClose={onCloseHandle}
+        onClose={closeButtonHandle}
       >
         <ModalDialog.Hero>
           <ModalDialog.Hero.Background className="bg-primary-500">
@@ -50,40 +72,37 @@ const SkillsBuilderModal = () => {
 
         <ModalDialog.Body>
           <Container size="md" className="p-4.5">
-            <Stepper.Step eventKey={STEP1} title={formatMessage(messages.selectPreferences)}>
-              <SelectPreferences />
-            </Stepper.Step>
+            <Form>
+              <Stepper.Step eventKey={STEP1} title={formatMessage(messages.selectPreferences)}>
+                <SelectPreferences />
+              </Stepper.Step>
 
-            <Stepper.Step eventKey={STEP2} title={formatMessage(messages.reviewResults)}>
-              <ViewResults />
-            </Stepper.Step>
+              <Stepper.Step eventKey={STEP2} title={formatMessage(messages.reviewResults)}>
+                <ViewResults />
+              </Stepper.Step>
+            </Form>
           </Container>
         </ModalDialog.Body>
 
         <ModalDialog.Footer>
           <Stepper.ActionRow eventKey={STEP1}>
-            <Button variant="outline-primary" onClick={onCloseHandle}>
-              {formatMessage(messages.goBackButton)}
-            </Button>
-            <Stepper.ActionRow.Spacer />
             <Button
-              onClick={() => setCurrentStep(STEP2)}
+              onClick={nextStepHandle}
               disabled={careerInterests.length === 0}
             >
               {formatMessage(messages.nextStepButton)}
             </Button>
           </Stepper.ActionRow>
           <Stepper.ActionRow eventKey={STEP2}>
-            <Button
-              variant="outline-primary"
-              onClick={() => setCurrentStep(STEP1)}
-            >
+            <Button variant="outline-primary" onClick={() => setCurrentStep(STEP1)}>
               {formatMessage(messages.goBackButton)}
             </Button>
             <Stepper.ActionRow.Spacer />
-            <Button onClick={onCloseHandle}>
-              {formatMessage(messages.exitButton)}
-            </Button>
+            <Hyperlink destination={getConfig().MARKETING_SITE_SEARCH_URL}>
+              <Button onClick={exitButtonHandle}>
+                {formatMessage(messages.exitButton)}
+              </Button>
+            </Hyperlink>
           </Stepper.ActionRow>
         </ModalDialog.Footer>
       </ModalDialog>

src/skills-builder/skills-builder-modal/select-preferences/CareerInterestCard.jsx

@@ -4,6 +4,7 @@ import {
   IconButton, Icon,
 } from '@edx/paragon';
 import { useIntl } from '@edx/frontend-platform/i18n';
+import { sendTrackEvent } from '@edx/frontend-platform/analytics';
 import { Close } from '@edx/paragon/icons';
 import { SkillsBuilderContext } from '../../skills-builder-context';
 import { removeCareerInterest } from '../../data/actions';
@@ -13,6 +14,21 @@ const CareerInterestCard = ({ interest }) => {
   const { formatMessage } = useIntl();
   const { dispatch } = useContext(SkillsBuilderContext);
 
+  const handleRemoveCareerInterest = () => {
+    dispatch(removeCareerInterest(interest));
+
+    sendTrackEvent(
+      'edx.skills_builder.career_interest.removed',
+      {
+        app_name: 'skills_builder',
+        category: 'skills_builder',
+        learner_data: {
+          career_interest: interest,
+        },
+      },
+    );
+  };
+
   return (
     <div className="d-flex justify-content-between align-items-center pb-2 pr-2 pl-4 rounded shadow-sm">
       <p className="pt-4">
@@ -22,7 +38,7 @@ const CareerInterestCard = ({ interest }) => {
         iconAs={Icon}
         src={Close}
         alt={`${formatMessage(messages.removeCareerInterestButtonAltText)} ${interest}`}
-        onClick={() => dispatch(removeCareerInterest(interest))}
+        onClick={handleRemoveCareerInterest}
       />
     </div>
   );

src/skills-builder/skills-builder-modal/select-preferences/CareerInterestSelect.jsx

@@ -1,10 +1,11 @@
 import React, { useContext } from 'react';
 import { getConfig } from '@edx/frontend-platform';
 import { useIntl } from '@edx/frontend-platform/i18n';
+import { sendTrackEvent } from '@edx/frontend-platform/analytics';
 import {
   Stack, Row, Col, Form,
 } from '@edx/paragon';
-import { InstantSearch } from 'react-instantsearch-hooks-web';
+import { Configure, InstantSearch } from 'react-instantsearch-hooks-web';
 import JobTitleInstantSearch from './JobTitleInstantSearch';
 import CareerInterestCard from './CareerInterestCard';
 import { addCareerInterest } from '../../data/actions';
@@ -20,6 +21,17 @@ const CareerInterestSelect = () => {
   const handleCareerInterestSelect = (value) => {
     if (!careerInterests.includes(value) && careerInterests.length < 3) {
       dispatch(addCareerInterest(value));
+
+      sendTrackEvent(
+        'edx.skills_builder.career_interest.added',
+        {
+          app_name: 'skills_builder',
+          category: 'skills_builder',
+          learner_data: {
+            career_interest: value,
+          },
+        },
+      );
     }
   };
 
@@ -30,9 +42,11 @@ const CareerInterestSelect = () => {
           {formatMessage(messages.careerInterestPrompt)}
         </h4>
         <InstantSearch searchClient={searchClient} indexName={getConfig().ALGOLIA_JOBS_INDEX_NAME}>
+          <Configure filters="b2c_opt_in:true" />
           <JobTitleInstantSearch
             onSelected={handleCareerInterestSelect}
             placeholder={formatMessage(messages.careerInterestInputPlaceholderText)}
+            data-testid="career-interest-select"
           />
         </InstantSearch>
       </Form.Label>

src/skills-builder/skills-builder-modal/select-preferences/GoalSelect.jsx

@@ -3,6 +3,7 @@ import {
   Form,
 } from '@edx/paragon';
 import { useIntl } from '@edx/frontend-platform/i18n';
+import { sendTrackEvent } from '@edx/frontend-platform/analytics';
 import { setGoal } from '../../data/actions';
 import { SkillsBuilderContext } from '../../skills-builder-context';
 import messages from './messages';
@@ -12,6 +13,22 @@ const GoalDropdown = () => {
   const { state, dispatch } = useContext(SkillsBuilderContext);
   const { currentGoal } = state;
 
+  const handleGoalSelect = (e) => {
+    const { value } = e.target;
+    dispatch(setGoal(value));
+
+    sendTrackEvent(
+      'edx.skills_builder.goal.select',
+      {
+        app_name: 'skills_builder',
+        category: 'skills_builder',
+        learner_data: {
+          current_goal: value,
+        },
+      },
+    );
+  };
+
   return (
     <Form.Group>
       <Form.Label>
@@ -22,10 +39,10 @@ const GoalDropdown = () => {
       <Form.Control
         as="select"
         value={currentGoal}
-        onChange={(e) => dispatch(setGoal(e.target.value))}
+        onChange={handleGoalSelect}
         data-testid="goal-select-dropdown"
       >
-        <option value="">{formatMessage(messages.selectLearningGoal)}</option>
+        <option value="" disabled={currentGoal}>{formatMessage(messages.selectLearningGoal)}</option>
         <option>{formatMessage(messages.learningGoalStartCareer)}</option>
         <option>{formatMessage(messages.learningGoalAdvanceCareer)}</option>
         <option>{formatMessage(messages.learningGoalChangeCareer)}</option>

src/skills-builder/skills-builder-modal/select-preferences/JobTitleSelect.jsx

@@ -4,6 +4,7 @@ import {
   Form, Stack,
 } from '@edx/paragon';
 import { useIntl } from '@edx/frontend-platform/i18n';
+import { sendTrackEvent } from '@edx/frontend-platform/analytics';
 import { InstantSearch } from 'react-instantsearch-hooks-web';
 import { setCurrentJobTitle } from '../../data/actions';
 import { SkillsBuilderContext } from '../../skills-builder-context';
@@ -12,16 +13,37 @@ import messages from './messages';
 
 const JobTitleSelect = () => {
   const { formatMessage } = useIntl();
-  const { dispatch, algolia } = useContext(SkillsBuilderContext);
+  const { state, dispatch, algolia } = useContext(SkillsBuilderContext);
   const { searchClient } = algolia;
+  const { currentJobTitle } = state;
 
   const handleCurrentJobTitleSelect = (value) => {
     dispatch(setCurrentJobTitle(value));
+    sendTrackEvent(
+      'edx.skills_builder.current_job.select',
+      {
+        app_name: 'skills_builder',
+        category: 'skills_builder',
+        learner_data: {
+          current_job_title: value,
+        },
+      },
+    );
   };
 
-  // Below implementation sets the job title to "Student" or "Looking for work" — this overwrites any previous selection
-  // This will need to be revisited when we decide what to do with this data
-  const handleCheckboxChange = (e) => dispatch(setCurrentJobTitle(e.target.value));
+  const handleCheckboxChange = (e) => {
+    const { value } = e.target;
+    // only setCurrentJobTitle if the user hasn't selected a current job as we don't want to override their selection
+    if (!currentJobTitle) { dispatch(setCurrentJobTitle(value)); }
+
+    sendTrackEvent(
+      `edx.skills_builder.current_job.${value}`,
+      {
+        app_name: 'skills_builder',
+        category: 'skills_builder',
+      },
+    );
+  };
 
   return (
     <Stack>
@@ -33,6 +55,7 @@ const JobTitleSelect = () => {
           <JobTitleInstantSearch
             onSelected={handleCurrentJobTitleSelect}
             placeholder={formatMessage(messages.jobTitleInputPlaceholderText)}
+            data-testid="job-title-select"
           />
         </InstantSearch>
       </Form.Label>
@@ -41,10 +64,10 @@ const JobTitleSelect = () => {
           name="other-occupations"
           onChange={handleCheckboxChange}
         >
-          <Form.Checkbox value="Student">
+          <Form.Checkbox value="student">
             {formatMessage(messages.studentCheckboxPrompt)}
           </Form.Checkbox>
-          <Form.Checkbox value="Looking for work">
+          <Form.Checkbox value="looking_for_work">
             {formatMessage(messages.currentlyLookingCheckboxPrompt)}
           </Form.Checkbox>
         </Form.CheckboxSet>

src/skills-builder/skills-builder-modal/select-preferences/SelectPreferences.jsx

@@ -27,7 +27,7 @@ const SelectPreferences = () => {
           <JobTitleSelect />
         )}
 
-        {currentJobTitle && (
+        {currentGoal && currentJobTitle && (
           <CareerInterestSelect />
         )}
       </Stack>

src/skills-builder/skills-builder-modal/select-preferences/test/SelectPreferences.test.jsx

@@ -2,8 +2,13 @@ import {
   screen, render, cleanup, fireEvent,
 } from '@testing-library/react';
 import { mergeConfig } from '@edx/frontend-platform';
+import { sendTrackEvent } from '@edx/frontend-platform/analytics';
 import { SkillsBuilderWrapperWithContext, dispatchMock, contextValue } from '../../../test/setupSkillsBuilder';
 
+jest.mock('@edx/frontend-platform/analytics', () => ({
+  sendTrackEvent: jest.fn(),
+}));
+
 describe('select-preferences', () => {
   beforeAll(() => {
     mergeConfig({
@@ -29,8 +34,13 @@ describe('select-preferences', () => {
         payload: 'I want to advance my career',
         type: 'SET_GOAL',
       };
+      const expectedStudent = {
+        payload: 'student',
+        type: 'SET_CURRENT_JOB_TITLE',
+      };
+
       const expectedJobTitle = {
-        payload: 'Student',
+        payload: 'Prospector',
         type: 'SET_CURRENT_JOB_TITLE',
       };
 
@@ -40,9 +50,41 @@ describe('select-preferences', () => {
       const checkbox = screen.getByRole('checkbox', { name: 'I\'m a student' });
       fireEvent.click(checkbox);
 
+      const jobTitleInput = screen.getByTestId('job-title-select');
+      fireEvent.change(jobTitleInput, { target: { value: 'Prospector' } });
+      fireEvent.click(screen.getByRole('button', { name: 'Prospector' }));
+
       expect(screen.getByText('Next, search and select your current job title')).toBeTruthy();
       expect(dispatchMock).toHaveBeenCalledWith(expectedGoal);
+      expect(dispatchMock).toHaveBeenCalledWith(expectedStudent);
       expect(dispatchMock).toHaveBeenCalledWith(expectedJobTitle);
+      expect(sendTrackEvent).toHaveBeenCalledWith(
+        'edx.skills_builder.goal.select',
+        {
+          app_name: 'skills_builder',
+          category: 'skills_builder',
+          learner_data: {
+            current_goal: 'I want to advance my career',
+          },
+        },
+      );
+      expect(sendTrackEvent).toHaveBeenCalledWith(
+        'edx.skills_builder.current_job.student',
+        {
+          app_name: 'skills_builder',
+          category: 'skills_builder',
+        },
+      );
+      expect(sendTrackEvent).toHaveBeenCalledWith(
+        'edx.skills_builder.current_job.select',
+        {
+          app_name: 'skills_builder',
+          category: 'skills_builder',
+          learner_data: {
+            current_job_title: 'Prospector',
+          },
+        },
+      );
     });
 
     it('should render the third prompt if a current job title is selected', () => {
@@ -70,14 +112,33 @@ describe('select-preferences', () => {
               ...contextValue.state,
               currentGoal: 'I want to start my career',
               currentJobTitle: 'Goblin Lackey',
-              careerInterests: ['Prospector', 'Mirror Breaker', 'Bombardment'],
+              careerInterests: ['Prospector'],
             },
           },
         ),
       );
       expect(screen.getByText('Prospector')).toBeTruthy();
-      expect(screen.getByText('Mirror Breaker')).toBeTruthy();
-      expect(screen.getByText('Bombardment')).toBeTruthy();
+
+      const careerInterestInput = screen.getByTestId('career-interest-select');
+      fireEvent.change(careerInterestInput, { target: { value: 'Mirror Breaker' } });
+      fireEvent.click(screen.getByRole('button', { name: 'Mirror Breaker' }));
+
+      expect(sendTrackEvent).toHaveBeenCalledWith(
+        'edx.skills_builder.career_interest.added',
+        {
+          app_name: 'skills_builder',
+          category: 'skills_builder',
+          learner_data: {
+            career_interest: 'Mirror Breaker',
+          },
+        },
+      );
+      expect(dispatchMock).toHaveBeenCalledWith(
+        {
+          payload: 'Mirror Breaker',
+          type: 'ADD_CAREER_INTEREST',
+        },
+      );
     });
   });
 
@@ -104,6 +165,16 @@ describe('select-preferences', () => {
 
       fireEvent.click(screen.getByLabelText('Remove career interest: Prospector'));
       expect(dispatchMock).toHaveBeenCalledWith(expected);
+      expect(sendTrackEvent).toHaveBeenCalledWith(
+        'edx.skills_builder.career_interest.removed',
+        {
+          app_name: 'skills_builder',
+          category: 'skills_builder',
+          learner_data: {
+            career_interest: 'Prospector',
+          },
+        },
+      );
     });
   });
 });

src/skills-builder/skills-builder-modal/view-results/CarouselStack.jsx

@@ -1,13 +1,18 @@
 import React from 'react';
 import { CardCarousel } from '@edx/paragon';
 import { useIntl } from '@edx/frontend-platform/i18n';
+import { sendTrackEvent } from '@edx/frontend-platform/analytics';
 import RecommendationCard from './RecommendationCard';
 import messages from './messages';
 
 const CarouselStack = ({ selectedRecommendations }) => {
   const { formatMessage } = useIntl();
-  const { name: jobName, recommendations } = selectedRecommendations;
+  const { id: jobId, name: jobName, recommendations } = selectedRecommendations;
   const productTypeNames = Object.keys(recommendations);
+  const courseKeys = recommendations.course?.map(rec => ({
+    title: rec.title,
+    courserun_key: rec.active_run_key,
+  }));
 
   const normalizeProductTypeName = (productType) => {
     // If the productType is more than one word (i.e. boot_camp)
@@ -35,6 +40,24 @@ const CarouselStack = ({ selectedRecommendations }) => {
     </h3>
   );
 
+  const handleCourseCardClick = (courseKey, productType) => {
+    sendTrackEvent(
+      'edx.skills_builder.recommendation.click',
+      {
+        app_name: 'skills_builder',
+        category: 'skills_builder',
+        page: 'skills_builder',
+        courserun_key: courseKey,
+        product_type: productType,
+        selected_recommendations: {
+          job_id: jobId,
+          job_name: jobName,
+          courserun_keys: courseKeys,
+        },
+      },
+    );
+  };
+
   return (
     productTypeNames.map(productType => (
       <CardCarousel
@@ -43,7 +66,12 @@ const CarouselStack = ({ selectedRecommendations }) => {
         title={renderCarouselTitle(productType)}
       >
         {recommendations[productType].map(rec => (
-          <RecommendationCard rec={rec} key={rec.uuid} />
+          <RecommendationCard
+            key={rec.uuid}
+            handleCourseCardClick={handleCourseCardClick}
+            rec={rec}
+            productType={productType}
+          />
         ))}
       </CardCarousel>
     )));

src/skills-builder/skills-builder-modal/view-results/RecommendationCard.jsx

@@ -1,13 +1,13 @@
 import React from 'react';
 import { Card, Chip, Hyperlink } from '@edx/paragon';
-import classNames from 'classnames';
 import PropTypes from 'prop-types';
 import cardImageCapFallbackSrc from '../../images/card-imagecap-fallback.png';
 
-const RecommendationCard = ({ rec }) => {
+const RecommendationCard = ({ rec, productType, handleCourseCardClick }) => {
   const {
     card_image_url: cardImageUrl,
     marketing_url: marketingUrl,
+    active_run_key: courseKey,
     owners,
     partner,
     title,
@@ -17,12 +17,15 @@ const RecommendationCard = ({ rec }) => {
 
   return (
     <Hyperlink destination={marketingUrl} target="_blank" showLaunchIcon={false}>
-      <Card className={classNames('carousel-card')}>
+      <Card
+        className="carousel-card"
+        onClick={() => handleCourseCardClick(courseKey, productType)}
+      >
         <Card.ImageCap
           src={cardImageUrl}
           logoSrc={logoImageUrl}
-          fallackSrc={cardImageCapFallbackSrc}
-          fallBackLogo={cardImageCapFallbackSrc}
+          fallbackSrc={cardImageCapFallbackSrc}
+          fallbackLogoSrc={cardImageCapFallbackSrc}
         />
         <Card.Header title={title} />
         <Card.Section>
@@ -48,7 +51,10 @@ RecommendationCard.propTypes = {
       key: PropTypes.string,
       logoImageUrl: PropTypes.string,
     })),
+    active_run_key: PropTypes.string.isRequired,
   }).isRequired,
+  productType: PropTypes.string.isRequired,
+  handleCourseCardClick: PropTypes.func.isRequired,
 };
 
 export default RecommendationCard;

src/skills-builder/skills-builder-modal/view-results/ViewResults.jsx

@@ -1,7 +1,10 @@
-import React, { useContext, useEffect, useState } from 'react';
+import React, {
+  useContext, useEffect, useState,
+} from 'react';
 import {
   Stack, Row, Alert, Spinner,
 } from '@edx/paragon';
+import { sendTrackEvent } from '@edx/frontend-platform/analytics';
 import { useIntl } from '@edx/frontend-platform/i18n';
 import { CheckCircle, ErrorOutline } from '@edx/paragon/icons';
 import { SkillsBuilderContext } from '../../skills-builder-context';
@@ -55,9 +58,24 @@ const ViewResults = () => {
       }));
 
       setJobSkillsList(jobInfo);
-      setSelectedJobTitle(jobInfo[0].name);
+      setSelectedJobTitle(results[0].name);
       setProductRecommendations(results);
       setIsLoading(false);
+      sendTrackEvent('edx.skills_builder.recommendation.shown', {
+        app_name: 'skills_builder',
+        category: 'skills_builder',
+        page: 'skills_builder',
+        selected_recommendations: {
+          job_id: results[0].id,
+          job_name: results[0].name,
+          /* We extract the title and course key into an array of objects */
+          courserun_keys: results[0].recommendations.course?.map(rec => ({
+            title: rec.title,
+            courserun_key: rec.active_run_key,
+          })),
+        },
+        is_default: true,
+      });
     };
     getRecommendations()
       .catch(() => {
@@ -70,6 +88,35 @@ const ViewResults = () => {
     setSelectedRecommendations(productRecommendations.find(rec => rec.name === selectedJobTitle));
   }, [productRecommendations, selectedJobTitle]);
 
+  const handleJobTitleChange = (e) => {
+    const { value } = e.target;
+    setSelectedJobTitle(value);
+    const currentSelection = productRecommendations.find(rec => rec.name === value);
+    const { id: jobId, name: jobName, recommendations } = currentSelection;
+    const courseKeys = recommendations.course?.map(rec => ({
+      title: rec.title,
+      courserun_key: rec.active_run_key,
+    }));
+    /*
+      The is_default value will be set to false for any selections made by the user.
+      This code is intentionally duplicated from the event that fires in the useEffect for fetching recommendations.
+      This proved less clunky than refactoring to make things DRY as we have to ensure the first call fires only once.
+      The previous implementation wrapped the event in an additional useEffect that was looping unnecessarily.
+      We have plans to refactor all of the event code as part of APER-2392, where we will revisit this approach.
+    */
+    sendTrackEvent('edx.skills_builder.recommendation.shown', {
+      app_name: 'skills_builder',
+      category: 'skills_builder',
+      page: 'skills_builder',
+      selected_recommendations: {
+        job_id: jobId,
+        job_name: jobName,
+        courserun_keys: courseKeys,
+      },
+      is_default: false,
+    });
+  };
+
   if (fetchError) {
     return (
       <Alert
@@ -106,7 +153,7 @@ const ViewResults = () => {
         <RelatedSkillsSelectableBoxSet
           jobSkillsList={jobSkillsList}
           selectedJobTitle={selectedJobTitle}
-          onChange={(e) => setSelectedJobTitle(e.target.value)}
+          onChange={handleJobTitleChange}
         />
 
         <CarouselStack selectedRecommendations={selectedRecommendations} />

src/skills-builder/skills-builder-modal/view-results/test/ViewResults.test.jsx

@@ -2,9 +2,14 @@ import {
   screen, render, cleanup, fireEvent, act,
 } from '@testing-library/react';
 import { mergeConfig } from '@edx/frontend-platform';
+import { sendTrackEvent } from '@edx/frontend-platform/analytics';
 import { SkillsBuilderWrapperWithContext, contextValue } from '../../../test/setupSkillsBuilder';
 import { getProductRecommendations } from '../../../utils/search';
 
+jest.mock('@edx/frontend-platform/analytics', () => ({
+  sendTrackEvent: jest.fn(),
+}));
+
 const renderSkillsBuilderWrapper = (
   value = {
     ...contextValue,
@@ -37,22 +42,117 @@ describe('view-results', () => {
       });
     });
 
-    it('should render a <JobSillsSelectableBox> for each career interest the learner has submitted', async () => {
+    afterEach(() => {
+      jest.clearAllMocks();
+    });
+
+    it('should render a <JobSillsSelectableBox> for each career interest the learner has submitted', () => {
       expect(screen.getByText('Prospector')).toBeTruthy();
       expect(screen.getByText('Mirror Breaker')).toBeTruthy();
 
       const chipComponents = document.querySelectorAll('.pgn__chip');
       expect(chipComponents[0].textContent).toEqual('finding shiny things');
       expect(chipComponents[1].textContent).toEqual('mining');
+      expect(sendTrackEvent).toHaveBeenCalledWith(
+        'edx.skills_builder.recommendation.shown',
+        {
+          app_name: 'skills_builder',
+          category: 'skills_builder',
+          page: 'skills_builder',
+          selected_recommendations: {
+            job_id: 0,
+            job_name: 'Prospector',
+            courserun_keys: [
+              {
+                title: 'Mining with the Mons',
+                courserun_key: 'MONS101',
+              },
+              {
+                title: 'The Art of Warren Upkeep',
+                courserun_key: 'WAR101',
+              },
+            ],
+          },
+          is_default: true,
+        },
+      );
+      // called once when "Next Step" button is clicked and then again for above event
+      expect(sendTrackEvent).toHaveBeenCalledTimes(2);
     });
 
-    it('renders a carousel of <Card> components', async () => {
+    it('renders a carousel of <Card> components', () => {
       expect(screen.getByText('Course recommendations for Prospector')).toBeTruthy();
     });
 
     it('changes the recommendations based on the selected job title', () => {
       fireEvent.click(screen.getByRole('radio', { name: 'Mirror Breaker' }));
       expect(screen.getByText('Course recommendations for Mirror Breaker')).toBeTruthy();
+      expect(sendTrackEvent).toHaveBeenCalledWith(
+        'edx.skills_builder.recommendation.shown',
+        {
+          app_name: 'skills_builder',
+          category: 'skills_builder',
+          page: 'skills_builder',
+          selected_recommendations: {
+            job_id: 1,
+            job_name: 'Mirror Breaker',
+            courserun_keys: [
+              {
+                title: 'Mining with the Mons',
+                courserun_key: 'MONS101',
+              },
+              {
+                title: 'The Art of Warren Upkeep',
+                courserun_key: 'WAR101',
+              },
+            ],
+          },
+          is_default: false,
+        },
+      );
+    });
+
+    it('sends an event when the "Next Step" button is clicked', () => {
+      expect(sendTrackEvent).toHaveBeenCalledWith(
+        'edx.skills_builder.next_step',
+        {
+          app_name: 'skills_builder',
+          category: 'skills_builder',
+          learner_data: {
+            current_goal: 'I want to start my career',
+            current_job_title: 'Goblin Lackey',
+            career_interests: ['Prospector', 'Mirror Breaker', 'Bombardment'],
+          },
+        },
+      );
+    });
+
+    it('fires an event when a product recommendation is clicked', () => {
+      fireEvent.click(screen.getByText('Mining with the Mons'));
+      expect(sendTrackEvent).toHaveBeenCalledWith(
+        'edx.skills_builder.recommendation.click',
+        {
+          app_name: 'skills_builder',
+          category: 'skills_builder',
+          page: 'skills_builder',
+          courserun_key: 'MONS101',
+          product_type: 'course',
+          selected_recommendations: {
+            job_id: 0,
+            job_name: 'Prospector',
+            courserun_keys: [
+              {
+                title: 'Mining with the Mons',
+                courserun_key: 'MONS101',
+              },
+              {
+                title: 'The Art of Warren Upkeep',
+                courserun_key: 'WAR101',
+              },
+            ],
+          },
+        },
+      );
     });
   });
 

src/skills-builder/test/__mocks__/jobSkills.mockData.js

@@ -2,11 +2,11 @@ export const mockData = {
   hits: [
     {
       id: 0,
-      name: 'Text File Engineer'
+      name: 'Prospector'
     },
     {
       id: 1,
-      name: 'Screen Viewer'
+      name: 'Mirror Breaker'
     },
   ],
   searchJobs: [
@@ -44,6 +44,7 @@ export const mockData = {
       partner: ['edx'],
       card_image_url: 'https://thisIsAUrl.ForAnImage.01.jpeg',
       marketing_url: 'https://thisIsAUrl.ForTheRecommendedContent.01.com',
+      active_run_key: 'MONS101',
       owners: [
         {
           logoImageUrl: 'https://thisIsAUrl.ForALogoImage.01.jpeg',
@@ -56,6 +57,7 @@ export const mockData = {
       partner: ['edx'],
       card_image_url: 'https://thisIsAUrl.ForAnImage.02.jpeg',
       marketing_url: 'https://thisIsAUrl.ForTheRecommendedContent.02.com',
+      active_run_key: 'WAR101',
       owners: [
         {
           logoImageUrl: 'https://thisIsAUrl.ForALogoImage.02.jpeg',

src/skills-builder/test/setupSkillsBuilder.jsx

@@ -11,6 +11,7 @@ jest.mock('@edx/frontend-platform/logging');
 jest.mock('react-instantsearch-hooks-web', () => ({
   // eslint-disable-next-line react/prop-types
   InstantSearch: ({ children }) => (<div>{children}</div>),
+  Configure: jest.fn(() => (null)),
   useSearchBox: jest.fn(() => ({ refine: jest.fn() })),
   useHits: jest.fn(() => ({ hits: mockData.hits })),
 }));

src/skills-builder/utils/search.jsx

@@ -96,7 +96,7 @@ export const getProductRecommendations = async (productIndex, productType, skill
   const formattedSkillNames = formatFacetFilterData('skills.skill', skills);
   try {
     const { hits } = await productIndex.search('', {
-      filters: `product: "${productType}"`,
+      filters: `product: "${productType}" AND language: "English"`,
       facetFilters: [
         formattedSkillNames,
       ],

src/skills-builder/utils/tests/search.test.jsx

@@ -55,7 +55,7 @@ describe('Algolias utility function', () => {
 
   it('getProductRecommendations() queries Algolia with the expected search parameters', async () => {
     const expectedSearchParameters = {
-      filters: 'product: "Course"',
+      filters: 'product: "Course" AND language: "English"',
       facetFilters: [
         ['skills.skill:Sword Lobbing'],
       ],

webpack.dev.config.js

@@ -0,0 +1,8 @@
+const { createConfig } = require('@edx/frontend-build');
+
+module.exports = createConfig('webpack-dev', {
+  devServer: {
+    allowedHosts: 'all',
+    https: true,
+  },
+});