Example Page
-Hello world!
-
+ 
+
+
+ );
+};
+
+export default SkillsBuilderHeader;
diff --git a/src/skills-builder/skills-builder-header/index.js b/src/skills-builder/skills-builder-header/index.js
new file mode 100644
index 00000000..00e6b020
--- /dev/null
+++ b/src/skills-builder/skills-builder-header/index.js
@@ -0,0 +1,2 @@
+// eslint-disable-next-line import/prefer-default-export
+export { default as SkillsBuilderHeader } from './SkillsBuilderHeader';
diff --git a/src/skills-builder/skills-builder-header/messages.js b/src/skills-builder/skills-builder-header/messages.js
new file mode 100644
index 00000000..1c7fabfb
--- /dev/null
+++ b/src/skills-builder/skills-builder-header/messages.js
@@ -0,0 +1,16 @@
+import { defineMessages } from '@edx/frontend-platform/i18n';
+
+const messages = defineMessages({
+ skillsBuilderHeaderTitle: {
+ id: 'skills.builder.header.title',
+ defaultMessage: 'Skills Builder',
+ description: 'Title for the Skills Builder feature',
+ },
+ skillsBuilderHeaderSubheading: {
+ id: 'skills.builder.header.subheading',
+ defaultMessage: 'Let edX be your guide',
+ description: 'Subheading to the Skills Builder title in the header component',
+ },
+});
+
+export default messages;
diff --git a/src/skills-builder/skills-builder-header/skillsBuilderHeader.scss b/src/skills-builder/skills-builder-header/skillsBuilderHeader.scss
new file mode 100644
index 00000000..ca4be483
--- /dev/null
+++ b/src/skills-builder/skills-builder-header/skillsBuilderHeader.scss
@@ -0,0 +1,4 @@
+.vertical-line {
+ border-left: 7px solid #D23228;
+ transform: rotate(13deg);
+}
diff --git a/src/skills-builder/skills-builder-modal/SkillsBuilderModal.jsx b/src/skills-builder/skills-builder-modal/SkillsBuilderModal.jsx
new file mode 100644
index 00000000..4bff358b
--- /dev/null
+++ b/src/skills-builder/skills-builder-modal/SkillsBuilderModal.jsx
@@ -0,0 +1,113 @@
+import React, { useState, useContext } from 'react';
+import {
+ Button, Container, Stepper, ModalDialog, Form, Hyperlink,
+} from '@edx/paragon';
+import { getConfig } from '@edx/frontend-platform';
+import { useIntl } from '@edx/frontend-platform/i18n';
+import { sendTrackEvent } from '@edx/frontend-platform/analytics';
+import {
+ STEP1, STEP2,
+} from '../data/constants';
+import messages from './messages';
+
+import { SkillsBuilderContext } from '../skills-builder-context';
+import { SkillsBuilderHeader } from '../skills-builder-header';
+import { SelectPreferences } from './select-preferences';
+import ViewResults from './view-results/ViewResults';
+
+import headerImage from '../images/headerImage.png';
+
+const SkillsBuilderModal = () => {
+ const { formatMessage } = useIntl();
+ const { state } = useContext(SkillsBuilderContext);
+ const { currentGoal, currentJobTitle, careerInterests } = state;
+ const [currentStep, setCurrentStep] = useState(STEP1);
+
+ 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 nextStepHandle = () => {
+ setCurrentStep(STEP2);
+ sendActionButtonEvent('next_step');
+ };
+ const exitButtonHandle = () => {
+ sendActionButtonEvent('exit');
+ };
+ const closeButtonHandle = () => {
+ sendActionButtonEvent('close');
+ window.location.href = getConfig().MARKETING_SITE_SEARCH_URL;
+ };
+
+ return (
+
+
+ + {formatMessage(messages.skillsBuilderHeaderTitle)} +
++ {formatMessage(messages.skillsBuilderHeaderSubheading)} +
+
+
+ );
+};
+
+CareerInterestCard.propTypes = {
+ interest: PropTypes.string.isRequired,
+};
+
+export default CareerInterestCard;
diff --git a/src/skills-builder/skills-builder-modal/select-preferences/CareerInterestSelect.jsx b/src/skills-builder/skills-builder-modal/select-preferences/CareerInterestSelect.jsx
new file mode 100644
index 00000000..1fc38e70
--- /dev/null
+++ b/src/skills-builder/skills-builder-modal/select-preferences/CareerInterestSelect.jsx
@@ -0,0 +1,65 @@
+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 { Configure, InstantSearch } from 'react-instantsearch-hooks-web';
+import JobTitleInstantSearch from './JobTitleInstantSearch';
+import CareerInterestCard from './CareerInterestCard';
+import { addCareerInterest } from '../../data/actions';
+import { SkillsBuilderContext } from '../../skills-builder-context';
+import messages from './messages';
+
+const CareerInterestSelect = () => {
+ const { formatMessage } = useIntl();
+ const { state, dispatch, algolia } = useContext(SkillsBuilderContext);
+ const { careerInterests } = state;
+ const { searchClient } = algolia;
+
+ 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,
+ },
+ },
+ );
+ }
+ };
+
+ return (
+ + {interest} +
++ {formatMessage(messages.careerInterestPrompt)} +
++ {formatMessage(messages.learningGoalPrompt)} +
++ {formatMessage(messages.jobTitlePrompt)} +
++ {formatMessage(messages.skillsBuilderDescription)} +
++ {formatMessage(messages.productRecommendationsHeaderText, { + productType: normalizeProductTypeName(productType), + jobName, + })} +
+ ); + + 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 => ( +{job.name}
+{formatMessage(messages.relatedSkillsHeading)}
+ {renderTopFiveSkills(job.skills)} +{children}
),
+ Configure: jest.fn(() => (null)),
+ useSearchBox: jest.fn(() => ({ refine: jest.fn() })),
+ useHits: jest.fn(() => ({ hits: mockData.hits })),
+}));
+
+jest.mock('../utils/search', () => ({
+ searchJobs: jest.fn(),
+ getProductRecommendations: jest.fn(),
+ useAlgoliaSearch: jest.fn(),
+}));
+
+searchJobs.mockReturnValue(mockData.searchJobs);
+getProductRecommendations.mockReturnValue(mockData.productRecommendations);
+useAlgoliaSearch.mockReturnValue(mockData.useAlgoliaSearch);
+
+export const dispatchMock = jest.fn();
+
+export const contextValue = {
+ state: {
+ ...skillsInitialState,
+ },
+ dispatch: dispatchMock,
+ algolia: {
+ // Without this, tests would fail to destructure `searchClient` in the