{hasActiveLicenseOrLicenseRequest && (
@@ -89,7 +89,7 @@ const SubsidiesSummary = ({
licenseRequest={licenseRequests[0]}
courseEndDate={courseEndDate}
programProgressPage={programProgressPage}
- className="mb-2 border-0"
+ className="border-0 shadow-none"
/>
)}
{hasAssignedCodesOrCodeRequests && (
@@ -98,19 +98,19 @@ const SubsidiesSummary = ({
couponCodeRequestsCount={couponCodeRequests.length}
totalCoursesEligibleForCertificate={totalCoursesEligibleForCertificate}
programProgressPage={programProgressPage}
- className="mb-2 border-0"
+ className="border-0 shadow-none"
/>
)}
{canEnrollWithEnterpriseOffers && (
{searchCoursesCta && (
-
- )}
- {NO_PATHWAYS_ERROR_MESSAGE}
- - - -
+ {pathwayProgressData?.length > 0 ? (
+
+ {pathwayProgressData.map((pathway) => (
+
+ ) : (
+
);
};
diff --git a/src/components/pathway/SearchPathwayCard.jsx b/src/components/pathway/SearchPathwayCard.jsx
index 05b26be228..4cf6ec89e3 100644
--- a/src/components/pathway/SearchPathwayCard.jsx
+++ b/src/components/pathway/SearchPathwayCard.jsx
@@ -102,7 +102,7 @@ const SearchPathwayCard = ({
isClickable
isLoading={isLoading}
onClick={handleCardClick}
- className="bg-primary-500 border-0"
+ variant="dark"
{...rest}
>
+
+ )}
+ {NO_PATHWAYS_ERROR_MESSAGE}
+ + + +
-
- )}
+ subtitle={program.authoringOrganizations?.length > 0 ? (
+
- {program.authoringOrganizations?.length > 0
- && program.authoringOrganizations.map(org => org.key).join(' ')}
-
-
-
-
-
- })
- {program.type}
-
-
+
+ {program.type}
+
+
-
- )}
- {NO_PROGRAMS_ERROR_MESSAGE}
- - - -
+ {learnerProgramsData.length > 0 ? (
+
+ {learnerProgramsData.map((program) =>
+ ) : (
+
);
};
diff --git a/src/components/program-progress/tests/ProgramListingCard.test.jsx b/src/components/program-progress/tests/ProgramListingCard.test.jsx
index b2b96d3e95..be59db9bec 100644
--- a/src/components/program-progress/tests/ProgramListingCard.test.jsx
+++ b/src/components/program-progress/tests/ProgramListingCard.test.jsx
@@ -113,7 +113,7 @@ describe('
+
+ )}
+ {NO_PROGRAMS_ERROR_MESSAGE}
+ + + +
-
+
- {Array.from({ length: LOADING_NO_OF_CARDS }, (_, i) => (
-
-
- {/* eslint-disable-next-line jsx-a11y/anchor-is-valid */}
-
-
-
-
-
-
-
- ))}
-
-
- {getCommonSkills(
- course,
- allSkills,
- MAX_VISIBLE_SKILLS_COURSE,
- )
- .map((skill) => (
-
- {shortenString(
- skill,
- SKILL_NAME_CUTOFF_LIMIT,
- ELLIPSIS_STR,
- )}
-
- ))}
-
- )}
-
-
- {/* eslint-disable-next-line jsx-a11y/anchor-is-valid */}
-
- {isLoading ? loadingCard() : courseCard()}
-
-
- );
};
CourseCard.propTypes = {
course: PropTypes.shape({
title: PropTypes.string.isRequired,
cardImageUrl: PropTypes.string.isRequired,
+ originalImageUrl: PropTypes.string,
key: PropTypes.string.isRequired,
- partners: PropTypes.shape.isRequired,
+ partners: PropTypes.arrayOf(PropTypes.shape()).isRequired,
skillNames: PropTypes.array.isRequired,
}).isRequired,
- allSkills: PropTypes.shape.isRequired,
+ allSkills: PropTypes.arrayOf(PropTypes.string).isRequired,
isLoading: PropTypes.bool.isRequired,
};
diff --git a/src/components/skills-quiz/CurrentJobDropdown.jsx b/src/components/skills-quiz/CurrentJobDropdown.jsx
index f9b2c1a881..a13533f581 100644
--- a/src/components/skills-quiz/CurrentJobDropdown.jsx
+++ b/src/components/skills-quiz/CurrentJobDropdown.jsx
@@ -23,6 +23,7 @@ const CurrentJobDropdown = () => {
doRefinement={false}
customAttribute={customAttribute}
showBadge={false}
+ variant="default"
/>
);
};
diff --git a/src/components/skills-quiz/GoalDropdown.jsx b/src/components/skills-quiz/GoalDropdown.jsx
index 6871f95115..b56e313d80 100644
--- a/src/components/skills-quiz/GoalDropdown.jsx
+++ b/src/components/skills-quiz/GoalDropdown.jsx
@@ -17,8 +17,8 @@ const GoalDropdown = () => {
DROPDOWN_OPTION_GET_PROMOTED, DROPDOWN_OPTION_IMPROVE_CURRENT_ROLE, DROPDOWN_OPTION_OTHER];
return (
-
-
-
- {isLoading ? (
-
-
-
+
-
- )}
-
- )}
- - Median U.S. Salary: - {job.job_postings?.length > 0 ? `$${ formatStringAsNumber(job.job_postings[0].median_salary)}` - : NOT_AVAILABLE } -
-- Job Postings: - {job.job_postings?.length > 0 ? formatStringAsNumber(job.job_postings[0].unique_postings) - : NOT_AVAILABLE } -
-
+
+ )}
+ + Median U.S. Salary: + {job.job_postings?.length > 0 ? `$${ formatStringAsNumber(job.job_postings[0].median_salary)}` + : NOT_AVAILABLE } +
++ Job Postings: + {job.job_postings?.length > 0 ? formatStringAsNumber(job.job_postings[0].unique_postings) + : NOT_AVAILABLE } +
+
- {(hitCount > 0) ?
);
};
diff --git a/src/components/skills-quiz/SearchCurrentJobCard.jsx b/src/components/skills-quiz/SearchCurrentJobCard.jsx
index b17d4a7fd0..b25433a86d 100644
--- a/src/components/skills-quiz/SearchCurrentJobCard.jsx
+++ b/src/components/skills-quiz/SearchCurrentJobCard.jsx
@@ -44,11 +44,7 @@ const SearchCurrentJobCard = ({ index }) => {
[currentJob, dispatch, index, jobToFetch],
);
- return (
- Get started with these courses
: null} -
- {(hitCount > 0) && courses.map(course => (
-
-
- { hitCount === 0 && (
- Get started with these courses
+
+ {courses.map(course => (
+
+ ))}
+
-
- );
+ return
-
- );
+ return
- {(hitCount > 0) ?
);
};
diff --git a/src/components/skills-quiz/SearchProgramCard.jsx b/src/components/skills-quiz/SearchProgramCard.jsx
index 3a1e2b7f7e..ab1ba417af 100644
--- a/src/components/skills-quiz/SearchProgramCard.jsx
+++ b/src/components/skills-quiz/SearchProgramCard.jsx
@@ -2,13 +2,14 @@ import React, {
useContext, useMemo, useState, useEffect,
} from 'react';
import PropTypes from 'prop-types';
+import { v4 as uuidv4 } from 'uuid';
import Truncate from 'react-truncate';
-import { Link } from 'react-router-dom';
+import { useHistory } from 'react-router-dom';
import { AppContext } from '@edx/frontend-platform/react';
import { getAuthenticatedUser } from '@edx/frontend-platform/auth';
import { camelCaseObject } from '@edx/frontend-platform/utils';
import {
- Badge, Card, Icon, StatusAlert, Skeleton,
+ Badge, Card, Icon, StatusAlert, CardGrid, Stack,
} from '@edx/paragon';
import { Program } from '@edx/paragon/icons';
import { sendEnterpriseTrackEvent } from '@edx/frontend-enterprise-utils';
@@ -31,15 +32,6 @@ const linkToProgram = (program, slug, enterpriseUUID, programUuid) => {
if (!Object.keys(program).length) {
return '#';
}
- const { userId } = getAuthenticatedUser();
- sendEnterpriseTrackEvent(
- enterpriseUUID,
- 'edx.ui.enterprise.learner_portal.skills_quiz.program.clicked',
- {
- userId,
- programUuid,
- },
- );
return `/${slug}/program/${programUuid}`;
};
@@ -55,6 +47,7 @@ const renderDialog = () => (
);
const SearchProgramCard = ({ index }) => {
+ const history = useHistory();
const { enterpriseConfig } = useContext(AppContext);
const { slug, uuid } = enterpriseConfig;
const {
@@ -154,139 +147,105 @@ const SearchProgramCard = ({ index }) => {
[programs],
);
- const loadingCard = () => (
- Get started with these pathways
: null} -
- {(hitCount > 0) && pathways.map(pathway => (
+
+ {pathways.map(pathway => (
+
Get started with these pathways
+
-
- {getCommonSkills(program, selectedJobSkills, MAX_VISIBLE_SKILLS_PROGRAM).map((skill) => (
-
- { shortenString(skill, SKILL_NAME_CUTOFF_LIMIT, ELLIPSIS_STR) }
-
- ))}
-
- )}
-
-
-
-
-
-
-
-
-
- {(hitCount > 0) ?
+ {program.title}
+
+ )}
+ subtitle={program.authoringOrganizations?.length > 0 && (
+
+ {program.authoringOrganizations.map(org => org.key).join(', ')}
+
+ )}
+ />
+
+
+ {program.skillNames?.length > 0
+ && getCommonSkills(program, selectedJobSkills, MAX_VISIBLE_SKILLS_PROGRAM).map((skill) => (
+
+ {shortenString(skill, SKILL_NAME_CUTOFF_LIMIT, ELLIPSIS_STR)}
+
+ ))}
+
+
+
+
+
+
+ {getProgramCourseCount(program)}}
+ />
+
+ );
+ })}
+
);
};
diff --git a/src/components/skills-quiz/SelectedJobSkills.jsx b/src/components/skills-quiz/SelectedJobSkills.jsx
index 8bbd7d7204..4bde6635a6 100644
--- a/src/components/skills-quiz/SelectedJobSkills.jsx
+++ b/src/components/skills-quiz/SelectedJobSkills.jsx
@@ -11,13 +11,13 @@ const SelectedJobSkills = () => {
// Select currentJobRole from state if goal is to improve current job role otherwise choose interestedJobs
const jobSelected = goal === DROPDOWN_OPTION_IMPROVE_CURRENT_ROLE ? currentJobRole : interestedJobs;
- const selectedJobDetails = jobSelected.filter(job => job.name === selectedJob);
+ const selectedJobDetails = jobSelected?.filter(job => job.name === selectedJob) || [];
let selectedJobSkills = selectedJobDetails[0]?.skills?.sort((a, b) => (
(a.significance < b.significance) ? 1 : -1));
selectedJobSkills = selectedJobSkills?.slice(0, 5);
return (
- Get started with these programs
: null} -
- {(hitCount > 0) && programs.map(program => (
-
-
- { /* eslint-disable-next-line jsx-a11y/anchor-is-valid */ }
- Get started with these programs
+
+ {programs.map(program => {
+ const primaryPartnerLogo = getPrimaryPartnerLogo(partnerDetails[program.aggregationKey]);
+ return (
+ handleCardClick(program)}
+ variant="dark"
+ data-testid="search-program-card"
>
- {isLoading ? loadingCard() : programCard(program) }
-
-
- ))}
-
- { hitCount === 0 && (
-
+
+
+
+
{selectedJobSkills?.map(skill => (
{
variant="light"
data-testid="top-skills-badge"
>
- { skill.name }
+ {skill.name}
))}
diff --git a/src/components/skills-quiz/SkillsCourses.jsx b/src/components/skills-quiz/SkillsCourses.jsx
index 83e3cb4b12..62490655df 100644
--- a/src/components/skills-quiz/SkillsCourses.jsx
+++ b/src/components/skills-quiz/SkillsCourses.jsx
@@ -1,10 +1,17 @@
import React, {
useEffect, useState, useContext, useMemo,
} from 'react';
-import { Badge, StatusAlert, Skeleton } from '@edx/paragon';
+import {
+ Button,
+ Badge,
+ StatusAlert,
+ Skeleton,
+ CardGrid,
+} from '@edx/paragon';
import {
SearchContext,
} from '@edx/frontend-enterprise-catalog-search';
+import { v4 as uuidv4 } from 'uuid';
import { Link } from 'react-router-dom';
import { AppContext } from '@edx/frontend-platform/react';
import { camelCaseObject } from '@edx/frontend-platform/utils';
@@ -115,42 +122,54 @@ const SkillsCourses = ({ index }) => {
}, [courses, skillsWithSignificanceOrder]);
return (
-
+
{hitCount > 0 &&
Skills
}
- {isLoading ?
- {coursesWithSkill.key}
-
- )) }
+ {isLoading ? (
+
+ {coursesWithSkill.key}
+
+ ))}
- {isLoading ?
+
+ ) : coursesWithSkills?.map(coursesWithSkill => (
+ Top courses in {coursesWithSkill.key}
-
-
+
+ {coursesWithSkill?.value.map((course) => (
+
+
))}
- {coursesWithSkill?.value.map((course) => (
-
-
+ ) : coursesWithSkills?.map((coursesWithSkill) => (
+
+
-
+ Top courses in {coursesWithSkill.key}
+
- { hitCount === 0 && (
+ {hitCount === 0 && (
{
typeaheadOptions={typeaheadOptions}
searchable={!!typeaheadOptions}
doRefinement={false}
+ variant="default"
/>
);
};
diff --git a/src/components/skills-quiz/SkillsQuizStepper.jsx b/src/components/skills-quiz/SkillsQuizStepper.jsx
index d8f8c92770..592f14de39 100644
--- a/src/components/skills-quiz/SkillsQuizStepper.jsx
+++ b/src/components/skills-quiz/SkillsQuizStepper.jsx
@@ -2,7 +2,7 @@
/* eslint-disable object-curly-newline */
import React, { useEffect, useState, useContext, useMemo } from 'react';
import {
- Button, Stepper, ModalDialog, Container, Form,
+ Button, Stepper, ModalDialog, Container, Form, Stack,
} from '@edx/paragon';
import algoliasearch from 'algoliasearch/lite';
import { InstantSearch, Configure } from 'react-instantsearch-dom';
@@ -208,7 +208,7 @@ const SkillsQuizStepper = () => {
size="fullscreen"
className="bg-light-200 skills-quiz-modal"
isOpen
- onClose={() => closeSkillsQuiz()}
+ onClose={closeSkillsQuiz}
>
{
-
-
-
-
-
- )
- }
-
-
- {SKILLS_QUIZ_SEARCH_PAGE_MESSAGE} -
-- First, tell us a bit more about what you want to achieve. -
- -
-
- {
- skillsVisible && (
-
-
-
- Second, which skills are you interested in developing? (select at least one)
-
-
-
-
- {skillsVisible && (
- {
- if (selectedSkills.length > 1) {
- dispatch(removeFromRefinementArray('skill_names', skillMetadata.title));
- } else {
- dispatch(deleteRefinementAction('skill_names'));
- }
- }
- }
- />
- )}
-
-
- {
- jobsDropdownsVisible && (
-
-
-
-
-
- )
- }
-
+
- Next, tell us about your current job title.
-
-
-
-
- I am currently a student
-
-
-
- { goal !== DROPDOWN_OPTION_IMPROVE_CURRENT_ROLE
- ? (
-
-
- Lastly, tell us about career paths you're interested in (select up to three)
-
- ) : null }
-
+
-
+ {SKILLS_QUIZ_SEARCH_PAGE_MESSAGE} +
++ First, tell us a bit more about what you want to achieve. +
+
+
-
- {
- jobsDropdownsVisible && (
-
- { goalExceptImproveAndJobSelected
- ?
+
+ )}
+ {skillsVisible && (
+ {
+ if (selectedSkills.length > 1) {
+ dispatch(removeFromRefinementArray('skill_names', skillMetadata.title));
+ } else {
+ dispatch(deleteRefinementAction('skill_names'));
+ }
+ }}
+ />
+ )}
+ {jobsDropdownsVisible && (
+
+
- )
- }
+ + Second, which skills are you interested in developing? (select at least one) +
+
+
+
+
+
+ )}
+ {jobsDropdownsVisible && (
+ <>
+ {goalExceptImproveAndJobSelected
+ ? + Next, tell us about your current job title. +
+
+
+ I am currently a student
+
+
+
+ {goal !== DROPDOWN_OPTION_IMPROVE_CURRENT_ROLE
+ ? (
+ <>
+
+ + Lastly, tell us about career paths you're interested in (select up to three) +
+
+
+
+ ) : null }
+
+
-
Start Exploring Courses!
- { canContinueToRecommendedCourses ?
-
+ {canContinueToRecommendedCourses ?
- { (selectedJob || skills || goal === DROPDOWN_OPTION_IMPROVE_CURRENT_ROLE)
- && (
-
+
+ )}
-
- )}
+ {(selectedJob || skills || goal === DROPDOWN_OPTION_IMPROVE_CURRENT_ROLE) && (
+
-
+
@@ -364,7 +347,8 @@ const SkillsQuizStepper = () => {
diff --git a/src/components/skills-quiz/styles/SkillsQuizDropdowns.scss b/src/components/skills-quiz/styles/SkillsQuizDropdowns.scss
index a8214e5836..55674769e2 100644
--- a/src/components/skills-quiz/styles/SkillsQuizDropdowns.scss
+++ b/src/components/skills-quiz/styles/SkillsQuizDropdowns.scss
@@ -1,18 +1,3 @@
-.skills-quiz-dropdown {
- .dropdown-toggle {
- width: 55% !important;
- border-color: #707070;
- justify-content: left;
- font-variant-caps: all-small-caps;
- overflow: hidden;
- }
- .skills-drop-down{
- .dropdown-toggle {
- margin-top: 15px;
- }
- }
-}
-
.side-image {
clip-path: polygon(19% 0, 100% 0, 78% 100%, 0 100%);
margin-top: 20px;
diff --git a/src/components/skills-quiz/styles/_SearchContentCard.scss b/src/components/skills-quiz/styles/_SearchContentCard.scss
index d1485e77f2..c3333372c9 100644
--- a/src/components/skills-quiz/styles/_SearchContentCard.scss
+++ b/src/components/skills-quiz/styles/_SearchContentCard.scss
@@ -75,20 +75,3 @@
}
}
}
-
-.skill-quiz-results {
- display: flex;
- flex-wrap: wrap;
- flex-direction: row;
- column-gap: 1.0rem;
-}
-
-.more-courses-link {
- float: right;
- align-self: center;
- text-decoration: underline;
-}
-
-.skills-badge {
- margin-bottom: 30px;
-}
diff --git a/src/components/skills-quiz/styles/_SearchJobCard.scss b/src/components/skills-quiz/styles/_SearchJobCard.scss
index e33413b0a1..25a3419fa8 100644
--- a/src/components/skills-quiz/styles/_SearchJobCard.scss
+++ b/src/components/skills-quiz/styles/_SearchJobCard.scss
@@ -1,14 +1,9 @@
.search-job-card {
- .card {
- box-shadow: $box-shadow;
- width: 325px;
- padding: 5px;
- }
-
- .medium-font {
+ .medium-font {
font-size: medium;
- }
- .pgn__form-radio{
- float: right;
- }
+ }
+ // TODO: avoid overriding `.pgn__` classes
+ .pgn__form-radio{
+ float: right;
+ }
}
diff --git a/src/components/skills-quiz/tests/SearchCourseCard.test.jsx b/src/components/skills-quiz/tests/SearchCourseCard.test.jsx
index fb58d3161e..3b26e5f80f 100644
--- a/src/components/skills-quiz/tests/SearchCourseCard.test.jsx
+++ b/src/components/skills-quiz/tests/SearchCourseCard.test.jsx
@@ -1,7 +1,8 @@
/* eslint-disable react/prop-types */
import React from 'react';
import '@testing-library/jest-dom';
-import { screen, act } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import { screen } from '@testing-library/react';
import { AppContext } from '@edx/frontend-platform/react';
import '@testing-library/jest-dom/extend-expect';
import { SearchContext } from '@edx/frontend-enterprise-catalog-search';
@@ -29,14 +30,9 @@ jest.mock('react-truncate', () => ({
default: ({ children }) => children,
}));
-jest.mock('react-loading-skeleton', () => ({
- __esModule: true,
- default: (props = {}) => ,
-}));
-
const TEST_COURSE_KEY = 'test-course-key';
const TEST_TITLE = 'Test Title';
-const TEST_CARD_IMG_URL = 'http://fake.image';
+const TEST_CARD_IMG_URL = 'https://fake.image';
const TEST_PARTNER = {
name: 'Partner Name',
logoImageUrl: TEST_IMAGE_URL,
@@ -132,25 +128,30 @@ const SearchCourseCardWithContext = ({
describe('
-
-
-
-
-
-
-
-
- ,
- { route: '/test/skills-quiz/' },
- );
- expect(screen.queryByText(GOAL_DROPDOWN_DEFAULT_OPTION)).toBeInTheDocument();
- await act(async () => {
- await screen.queryByText(GOAL_DROPDOWN_DEFAULT_OPTION).click();
- await screen.queryByText(DROPDOWN_OPTION_GET_PROMOTED).click();
- });
- expect(screen.queryByText(SKILLS_FACET.title)).toBeInTheDocument();
-
- // Remove the first selected skill.
- screen.getByTestId('test-skill-1').click();
- expect(removeFromRefinementArray.mock.calls.length).toBe(1);
- });
-
it('checks header is correctly rendered', () => {
const searchContext = {
refinements: {},
@@ -304,15 +272,45 @@ describe('
+
+
+
+
+
+
+
+
+ ,
+ { route: '/test/skills-quiz/' },
+ );
expect(screen.queryByText(GOAL_DROPDOWN_DEFAULT_OPTION)).toBeInTheDocument();
- await act(async () => {
- await screen.queryByText(GOAL_DROPDOWN_DEFAULT_OPTION).click();
- screen.queryByText(DROPDOWN_OPTION_GET_PROMOTED).click();
- });
+ const goalDropdown = screen.getByText(GOAL_DROPDOWN_DEFAULT_OPTION);
+ userEvent.click(goalDropdown);
+ const getPromotedOption = await screen.findByText(DROPDOWN_OPTION_GET_PROMOTED);
+ expect(getPromotedOption).toBeInTheDocument();
+ userEvent.click(getPromotedOption);
- expect(screen.queryByText(SKILLS_FACET.title)).toBeInTheDocument();
- expect(screen.queryByText(CURRENT_JOB_FACET.title)).toBeInTheDocument();
- expect(screen.queryByText(DESIRED_JOB_FACET.title)).toBeInTheDocument();
+ expect(await screen.findByText(SKILLS_FACET.title)).toBeInTheDocument();
+
+ // Remove the first selected skill.
+ userEvent.click(screen.getByTestId('test-skill-1').querySelector('[role="button"]'));
+ expect(removeFromRefinementArray.mock.calls.length).toBe(1);
});
it('Handles removal of the last skill is handled correctly.', async () => {
@@ -337,13 +335,16 @@ describe('
+
-
-