+
+ {formatMessage(messages.skillsBuilderDescription)}
+
+
+
+
+
+ {currentGoal && (
+
+ )}
+
+ {currentGoal && currentJobTitle && (
+
+ )}
+
+
+ );
+};
+
+export default SelectPreferences;
diff --git a/src/skills-builder/skills-builder-modal/select-preferences/index.js b/src/skills-builder/skills-builder-modal/select-preferences/index.js
new file mode 100644
index 0000000..f8d553d
--- /dev/null
+++ b/src/skills-builder/skills-builder-modal/select-preferences/index.js
@@ -0,0 +1,2 @@
+// eslint-disable-next-line import/prefer-default-export
+export { default as SelectPreferences } from './SelectPreferences';
diff --git a/src/skills-builder/skills-builder-modal/select-preferences/messages.js b/src/skills-builder/skills-builder-modal/select-preferences/messages.js
new file mode 100644
index 0000000..8693ef0
--- /dev/null
+++ b/src/skills-builder/skills-builder-modal/select-preferences/messages.js
@@ -0,0 +1,80 @@
+import { defineMessages } from '@edx/frontend-platform/i18n';
+
+const messages = defineMessages({
+ skillsBuilderDescription: {
+ id: 'skills.builder.description',
+ defaultMessage: 'Find the right courses and programs that help you reach your goals.',
+ description: 'Description of what the Skills Builder seeks to accomplish',
+ },
+ learningGoalPrompt: {
+ id: 'learning.goal.prompt',
+ defaultMessage: 'First, tell us what you want to achieve',
+ description: 'Prompts the user to select their current goal.',
+ },
+ selectLearningGoal: {
+ id: 'select.learning.goal',
+ defaultMessage: 'Select a goal',
+ description: 'Placeholder text for the goal selection component.',
+ },
+ learningGoalStartCareer: {
+ id: 'learning.goal.start_career',
+ defaultMessage: 'I want to start my career',
+ description: 'Selected by user if their goal is to start their career.',
+ },
+ learningGoalAdvanceCareer: {
+ id: 'learning.goal.advance_career',
+ defaultMessage: 'I want to advance my career',
+ description: 'Selected by user if their goal is to advance their career.',
+ },
+ learningGoalChangeCareer: {
+ id: 'learning.goal.change_career',
+ defaultMessage: 'I want to change careers',
+ description: 'Selected by user if their goal is to change careers.',
+ },
+ learningGoalSomethingNew: {
+ id: 'learning.goal.something.new',
+ defaultMessage: 'I want to learn something new',
+ description: 'Selected by user if their goal is to learn something new.',
+ },
+ learningGoalSomethingElse: {
+ id: 'learning.goal.something.else',
+ defaultMessage: 'Something else',
+ description: 'Selected by user if their goal is not described by the other choices.',
+ },
+ jobTitlePrompt: {
+ id: 'job.title.prompt',
+ defaultMessage: 'Next, search and select your current job title',
+ description: 'Prompts the user to select their current job title or occupation.',
+ },
+ jobTitleInputPlaceholderText: {
+ id: 'job.title.input.placeholder.text',
+ defaultMessage: 'Search and select a job title',
+ description: 'Placeholder text for the job title input control.',
+ },
+ studentCheckboxPrompt: {
+ id: 'student.checkbox.prompt',
+ defaultMessage: 'I\'m a student',
+ description: 'Label text for the corresponding checkbox',
+ },
+ currentlyLookingCheckboxPrompt: {
+ id: 'currently.looking.checkbox.prompt',
+ defaultMessage: 'I\'m currently looking for work',
+ description: 'Label text for the corresponding checkbox',
+ },
+ careerInterestPrompt: {
+ id: 'career.interest.prompt',
+ defaultMessage: 'What careers are you interested in?',
+ description: 'Prompts the user to select careers they are interested in pursuing.',
+ },
+ careerInterestInputPlaceholderText: {
+ id: 'career.interest.input.placeholder.text',
+ defaultMessage: 'Select up to 3 new job titles',
+ description: 'Placeholder text for the career interest input control.',
+ },
+ removeCareerInterestButtonAltText: {
+ id: 'career.interest.remove.button.alt.text',
+ defaultMessage: 'Remove career interest: ',
+ },
+});
+
+export default messages;
diff --git a/src/skills-builder/skills-builder-modal/select-preferences/test/SelectPreferences.test.jsx b/src/skills-builder/skills-builder-modal/select-preferences/test/SelectPreferences.test.jsx
new file mode 100644
index 0000000..7f20a07
--- /dev/null
+++ b/src/skills-builder/skills-builder-modal/select-preferences/test/SelectPreferences.test.jsx
@@ -0,0 +1,180 @@
+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({
+ ALGOLIA_JOBS_INDEX_NAME: 'test-job-index-name',
+ });
+ });
+ beforeEach(() => cleanup());
+
+ describe('render behavior', () => {
+ it('should render the second prompt if a goal is selected', () => {
+ render(
+ SkillsBuilderWrapperWithContext(
+ {
+ ...contextValue,
+ state: {
+ ...contextValue.state,
+ currentGoal: 'I want to start my career',
+ },
+ },
+ ),
+ );
+ const expectedGoal = {
+ payload: 'I want to advance my career',
+ type: 'SET_GOAL',
+ };
+ const expectedStudent = {
+ payload: 'student',
+ type: 'SET_CURRENT_JOB_TITLE',
+ };
+
+ const expectedJobTitle = {
+ payload: 'Prospector',
+ type: 'SET_CURRENT_JOB_TITLE',
+ };
+
+ const goalSelect = screen.getByTestId('goal-select-dropdown');
+ fireEvent.change(goalSelect, { target: { value: 'I want to advance my career' } });
+
+ 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', () => {
+ render(
+ SkillsBuilderWrapperWithContext(
+ {
+ ...contextValue,
+ state: {
+ ...contextValue.state,
+ currentGoal: 'I want to start my career',
+ currentJobTitle: 'Goblin Guide',
+ },
+ },
+ ),
+ );
+ expect(screen.getByText('What careers are you interested in?')).toBeTruthy();
+ });
+
+ it('should render a