feat: added course card, job card and alert modal (#809)

src/components/skills-quiz-v2/ClosingAlert.jsx

@@ -0,0 +1,27 @@
+import { ActionRow, AlertModal, Button } from '@edx/paragon';
+import PropTypes from 'prop-types';
+
+const ClosingAlert = ({ navigateToSearchPage, hideCloseAlert, showAlert }) => (
+  <AlertModal
+    title="Exit Skills builder?"
+    isOpen={showAlert}
+    onClose={hideCloseAlert}
+    footerNode={(
+      <ActionRow className="mb-3.5">
+        <Button variant="tertiary" onClick={hideCloseAlert}>Back to Skills builder</Button>
+        <Button variant="primary" onClick={navigateToSearchPage}>Exit</Button>
+      </ActionRow>
+    )}
+  >
+    <p>
+      Learners who enroll in courses that align with their career goals are more likely to complete the course.
+    </p>
+  </AlertModal>
+);
+ClosingAlert.propTypes = {
+  navigateToSearchPage: PropTypes.func.isRequired,
+  hideCloseAlert: PropTypes.func.isRequired,
+  showAlert: PropTypes.bool.isRequired,
+};
+
+export default ClosingAlert;

src/components/skills-quiz-v2/SkillsQuiz.jsx

@@ -8,13 +8,14 @@ import { AppContext } from '@edx/frontend-platform/react';
 
 import GoalDropdown from '../skills-quiz/GoalDropdown';
 import {
-  industryCards,
+  InterestedJobs,
   SKILLS_QUIZ_SEARCH_PAGE_MESSAGE_V2,
 } from './constants';
 import SkillsQuizHeader from './SkillsQuizHeader';
 
 import headerImage from '../skills-quiz/images/headerImage.png';
 import CourseCard from './CourseCard';
+import ClosingAlert from './ClosingAlert';
 
 const SkillsQuizV2 = () => {
   const [showAdvancedOptions, setShowAdvancedOptions] = useState(false);
@@ -23,18 +24,27 @@ const SkillsQuizV2 = () => {
   const [value, setValue] = useState('green');
   const handleChange = (e) => setValue(e.target.value);
   const history = useHistory();
+  const [showAlert, setShowAlert] = useState(false);
 
-  const closeSkillsQuiz = () => {
+  const showCloseAlert = () => {
+    setShowAlert(true);
+  };
+
+  const navigateToSearchPage = () => {
     history.push(`/${enterpriseConfig.slug}/search`);
   };
 
+  const hideCloseAlert = () => {
+    setShowAlert(false);
+  };
+
   return (
     <ModalDialog
       title="Skills Quiz"
       size="fullscreen"
       className="bg-light-200 skills-quiz-modal"
       isOpen
-      onClose={closeSkillsQuiz}
+      onClose={showCloseAlert}
     >
       <ModalDialog.Hero className="md-img">
         <ModalDialog.Hero.Background
@@ -92,22 +102,22 @@ const SkillsQuizV2 = () => {
               type="radio"
               value={value}
               onChange={handleChange}
-              name="colors"
+              name="interested-jobs"
               columns="3"
               className="selectable-box "
             >
-              {industryCards.map((card) => (
+              {InterestedJobs.map((job) => (
                 <SelectableBox
                   className="box"
-                  value={card.name}
+                  value={job.name}
                   inputHidden={false}
                   type="radio"
-                  aria-label={card.name}
+                  aria-label={job.name}
                 >
                   <div>
-                    <div className="lead">{card.name}</div>
+                    <div className="lead">{job.name}</div>
                     <div className="x-small">Related skills</div>
-                    {card.skills.map((skill) => (
+                    {job.skills.slice(0, 5).map((skill) => (
                       <div>
                         <Chip>{skill}</Chip>
                       </div>
@@ -130,6 +140,11 @@ const SkillsQuizV2 = () => {
               <CourseCard />
             </CardGrid>
           </div>
+          <ClosingAlert
+            navigateToSearchPage={navigateToSearchPage}
+            hideCloseAlert={hideCloseAlert}
+            showAlert={showAlert}
+          />
         </Container>
       </ModalDialog.Body>
     </ModalDialog>

src/components/skills-quiz-v2/constants.js

@@ -1,12 +1,12 @@
 export const SKILLS_QUIZ_SEARCH_PAGE_MESSAGE_V2 = 'We combine the educational expertise with labor market data to help you reach your learning and professional goals. Whether you are looking to grow in your career, change careers, or just learn new skills, this toll can help you find a relevant course. Your role selection and recommendations are private and are not visible to your edX administrator.';
-export const industryCards = [
+export const InterestedJobs = [
   {
     name: 'Product Associate',
     skills: ['Data Analysis', 'Communication', 'Strategy'],
   },
   {
     name: 'Python Developer',
-    skills: ['Data Analysis', 'Django', 'Flask'],
+    skills: ['Data Analysis', 'Django', 'Flask', 'Rest', 'Database'],
   },
   {
     name: 'Django Developer',