feat: add experimental single question version

src/skills-builder/SkillsBuilder.jsx

@@ -1,11 +1,23 @@
-import React from 'react';
+import React, { useRef } from 'react';
 import { SkillsBuilderModal } from './skills-builder-modal';
 import { SkillsBuilderProvider } from './skills-builder-context';
+import { useVisibilityFlags } from './skills-builder-modal/view-results/data/hooks';
+import SkillsBuilderProgressive from './skills-builder-modal/SkillsBuilderProgressive';
 
-const SkillsBuilder = () => (
-  <SkillsBuilderProvider>
-    <SkillsBuilderModal />
-  </SkillsBuilderProvider>
-);
+const SkillsBuilder = () => {
+  const visibilityFlags = useRef(useVisibilityFlags());
+  const { isProgressive } = visibilityFlags.current;
+
+  return (
+    <SkillsBuilderProvider>
+      { isProgressive ? (
+        <SkillsBuilderProgressive />
+      ) : (
+        <SkillsBuilderModal />
+      )}
+
+    </SkillsBuilderProvider>
+  );
+};
 
 export default SkillsBuilder;

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

@@ -0,0 +1,88 @@
+import React, { useContext } from 'react';
+import {
+  Button, Container, ModalDialog, Form, Hyperlink, useMediaQuery, breakpoints,
+} from '@edx/paragon';
+import { getConfig } from '@edx/frontend-platform';
+import { useIntl } from '@edx/frontend-platform/i18n';
+import { sendTrackEvent } from '@edx/frontend-platform/analytics';
+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 SkillsBuilderProgressive = () => {
+  const { formatMessage } = useIntl();
+  const isMedium = useMediaQuery({ maxWidth: breakpoints.medium.maxWidth });
+  const { state } = useContext(SkillsBuilderContext);
+  const { currentGoal, currentJobTitle, careerInterests } = state;
+
+  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 exitButtonHandle = () => {
+    sendActionButtonEvent('exit');
+  };
+  const closeButtonHandle = () => {
+    sendActionButtonEvent('close');
+    window.location.href = getConfig().MARKETING_SITE_SEARCH_URL;
+  };
+
+  return (
+    <ModalDialog
+      title="Skills Builder"
+      size="fullscreen"
+      className="skills-builder-modal bg-light-200"
+      isOpen
+      onClose={closeButtonHandle}
+    >
+      <ModalDialog.Hero className="med-min-height">
+        <ModalDialog.Hero.Background className="bg-primary-500">
+          { !isMedium && <img src={headerImage} alt="" className="h-100" /> }
+        </ModalDialog.Hero.Background>
+        <ModalDialog.Hero.Content>
+          <SkillsBuilderHeader isMedium={isMedium} />
+        </ModalDialog.Hero.Content>
+      </ModalDialog.Hero>
+
+      <ModalDialog.Body>
+        <Container size="md" className="p-4.5">
+          <Form>
+
+            <SelectPreferences />
+
+            { careerInterests.length > 0 && (
+              <ViewResults />
+            )}
+
+          </Form>
+        </Container>
+      </ModalDialog.Body>
+
+      <ModalDialog.Footer>
+        <Hyperlink destination={getConfig().MARKETING_SITE_SEARCH_URL}>
+          <Button onClick={exitButtonHandle}>
+            {formatMessage(messages.exitButton)}
+          </Button>
+        </Hyperlink>
+      </ModalDialog.Footer>
+    </ModalDialog>
+  );
+};
+
+export default SkillsBuilderProgressive;

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

@@ -1,4 +1,4 @@
-import React, { useContext } from 'react';
+import React, { useContext, useRef } from 'react';
 import { getConfig } from '@edx/frontend-platform';
 import { useIntl } from '@edx/frontend-platform/i18n';
 import { sendTrackEvent } from '@edx/frontend-platform/analytics';
@@ -10,13 +10,16 @@ import JobTitleInstantSearch from './JobTitleInstantSearch';
 import CareerInterestCard from './CareerInterestCard';
 import { addCareerInterest } from '../../data/actions';
 import { SkillsBuilderContext } from '../../skills-builder-context';
+import { useVisibilityFlags } from '../view-results/data/hooks';
 import messages from './messages';
 
 const CareerInterestSelect = () => {
   const { formatMessage } = useIntl();
   const { state, dispatch, algolia } = useContext(SkillsBuilderContext);
   const { careerInterests } = state;
   const { searchClient } = algolia;
+  const visibilityFlags = useRef(useVisibilityFlags());
+  const { showCareerInterestCards } = visibilityFlags.current;
 
   const handleCareerInterestSelect = (value) => {
     if (!careerInterests.includes(value) && careerInterests.length < 3) {
@@ -50,14 +53,17 @@ const CareerInterestSelect = () => {
           />
         </InstantSearch>
       </Form.Label>
-      <Row>
-        {careerInterests.map((interest, index) => (
+      { showCareerInterestCards && (
+        <Row>
+          {careerInterests.map((interest, index) => (
           // eslint-disable-next-line react/no-array-index-key
-          <Col key={index} xs={12} sm={4} className="mb-4">
-            <CareerInterestCard interest={interest} />
-          </Col>
-        ))}
-      </Row>
+            <Col key={index} xs={12} sm={4} className="mb-4">
+              <CareerInterestCard interest={interest} />
+            </Col>
+          ))}
+        </Row>
+      )}
+
     </Stack>
   );
 };

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

@@ -1,9 +1,10 @@
-import React, { useContext } from 'react';
+import React, { useContext, useRef } from 'react';
 import {
   Stack,
 } from '@edx/paragon';
 import { useIntl } from '@edx/frontend-platform/i18n';
 import { SkillsBuilderContext } from '../../skills-builder-context';
+import { useVisibilityFlags } from '../view-results/data/hooks';
 import GoalSelect from './GoalSelect';
 import JobTitleSelect from './JobTitleSelect';
 import CareerInterestSelect from './CareerInterestSelect';
@@ -13,21 +14,24 @@ const SelectPreferences = () => {
   const { formatMessage } = useIntl();
   const { state } = useContext(SkillsBuilderContext);
   const { currentGoal, currentJobTitle } = state;
+  const visibilityFlags = useRef(useVisibilityFlags());
+  const { showGoal, showCurrentJobTitle, alwaysShowCareerInterest } = visibilityFlags.current;
 
   return (
     <Stack gap={4}>
       <p className="lead">
         {formatMessage(messages.skillsBuilderDescription)}
       </p>
       <Stack gap={4}>
+        { showGoal && (
+          <GoalSelect />
+        )}
 
-        <GoalSelect />
-
-        {currentGoal && (
+        {currentGoal && showCurrentJobTitle && (
           <JobTitleSelect />
         )}
 
-        {currentGoal && currentJobTitle && (
+        {(alwaysShowCareerInterest || (currentGoal && currentJobTitle)) && (
           <CareerInterestSelect />
         )}
       </Stack>

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

@@ -0,0 +1,105 @@
+import React, { useContext } from 'react';
+import PropTypes from 'prop-types';
+import {
+  Card, CardDeck, Chip, Stack,
+} from '@edx/paragon';
+import { useIntl } from '@edx/frontend-platform/i18n';
+import { sendTrackEvent } from '@edx/frontend-platform/analytics';
+import { addCareerInterest } from '../../data/actions';
+import { SkillsBuilderContext } from '../../skills-builder-context';
+import messages from './messages';
+
+/*
+  A variant on the RelatedSkillsSelectableBoxSet that allows for interactive content.
+  Instead of a radio select button in the top, there is a close button.
+  Since the contents can be interactive, this form will allow for selecting skills to
+  drill down for skill-specific recommendations.
+
+  This component needs to be like a CardDeck, but also behave like a radio group.
+*/
+const RelatedSkillsInteractiveBoxSet = ({
+  jobSkillsList, //  selectedJobTitle, onChange, // we will need these
+}) => {
+  const { formatMessage } = useIntl();
+  const { state, dispatch } = useContext(SkillsBuilderContext);
+  const { careerInterests } = state;
+
+  const renderTopFiveSkills = (skills) => {
+    const topFiveSkills = skills.sort((a, b) => b.significance - a.significance).slice(0, 5);
+    return (
+      topFiveSkills.map(skill => (
+        <Chip key={skill.external_id} className="chip-max-width">
+          {skill.name}
+        </Chip>
+      ))
+    );
+  };
+
+  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,
+          },
+        },
+      );
+    }
+  };
+
+  // eslint-disable-next-line react/prop-types
+  const CardComponent = ({ name, skills }) => (
+    <Card
+      isClickable
+      onClick={handleCareerInterestSelect}
+      key={name}
+      xs={12}
+      sm={4}
+      className="mb-4"
+    >
+      <Card.Header
+        title={name}
+        size="sm"
+      />
+      <Card.Section>
+        <Stack gap={2} className="align-items-start">
+          <p className="heading-label x-small">{formatMessage(messages.relatedSkillsHeading)}</p>
+          { renderTopFiveSkills(skills) }
+        </Stack>
+      </Card.Section>
+    </Card>
+  );
+
+  const interactiveBox = (() => (
+    <CardDeck
+      hasInteractiveChildren
+      hasEqualColumnHeights
+      columnSizes={4}
+    >
+      {jobSkillsList.map(job => (
+        <CardComponent
+          name={job.name}
+          skills={job.skills}
+          key={job.name}
+        />
+      ))}
+    </CardDeck>
+  ));
+
+  return (
+    interactiveBox()
+  );
+};
+
+RelatedSkillsInteractiveBoxSet.propTypes = {
+  jobSkillsList: PropTypes.arrayOf(PropTypes.shape({})).isRequired,
+  selectedJobTitle: PropTypes.string.isRequired,
+  onChange: PropTypes.func.isRequired,
+};
+
+export default RelatedSkillsInteractiveBoxSet;

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

@@ -10,11 +10,12 @@ import { useIntl } from '@edx/frontend-platform/i18n';
 import { CheckCircle, ErrorOutline } from '@edx/paragon/icons';
 import { SkillsBuilderContext } from '../../skills-builder-context';
 import RelatedSkillsSelectableBoxSet from './RelatedSkillsSelectableBoxSet';
+import RelatedSkillsInteractiveBoxSet from './RelatedSkillsInteractiveBoxSet';
 import messages from './messages';
 import RecommendationStack from './RecommendationStack';
 
 import { getRecommendations } from './data/service';
-import { useProductTypes } from './data/hooks';
+import { useProductTypes, useVisibilityFlags } from './data/hooks';
 import { extractProductKeys } from '../../utils/extractProductKeys';
 import { setExpandedList } from '../../data/actions';
 
@@ -23,7 +24,6 @@ const ViewResults = () => {
   const { algolia, state, dispatch } = useContext(SkillsBuilderContext);
   const { jobSearchIndex, productSearchIndex } = algolia;
   const { careerInterests } = state;
-
   const [selectedJobTitle, setSelectedJobTitle] = useState('');
   const [jobSkillsList, setJobSkillsList] = useState([]);
   const [productRecommendations, setProductRecommendations] = useState([]);
@@ -32,6 +32,8 @@ const ViewResults = () => {
   const [fetchError, setFetchError] = useState(false);
 
   const productTypes = useRef(useProductTypes());
+  const visibilityFlags = useRef(useVisibilityFlags());
+  const { showMatchesFoundAlert, isInteractiveBoxSet } = visibilityFlags.current;
 
   useEffect(() => {
     const getAllRecommendations = async () => {
@@ -138,25 +140,39 @@ const ViewResults = () => {
       </Row>
     ) : (
       <Stack gap={4.5} className="pb-4.5">
-        <Alert
-          variant="success"
-          icon={CheckCircle}
-        >
-          <Alert.Heading>
-            {formatMessage(messages.matchesFoundSuccessAlert)}
-          </Alert.Heading>
-        </Alert>
-
-        <RelatedSkillsSelectableBoxSet
-          jobSkillsList={jobSkillsList}
-          selectedJobTitle={selectedJobTitle}
-          onChange={handleJobTitleChange}
-        />
+        { showMatchesFoundAlert && (
+          <Alert
+            variant="success"
+            icon={CheckCircle}
+          >
+            <Alert.Heading>
+              {formatMessage(messages.matchesFoundSuccessAlert)}
+            </Alert.Heading>
+          </Alert>
+        )}
+        { /* This should just pass the isInteractiveBoxSet flag to the component */ }
+        { isInteractiveBoxSet ? (
+          <RelatedSkillsInteractiveBoxSet
+            jobSkillsList={jobSkillsList}
+            selectedJobTitle={selectedJobTitle}
+            onChange={handleJobTitleChange}
+            isInteractiveBoxSet={isInteractiveBoxSet}
+          />
+        ) : (
+          <RelatedSkillsSelectableBoxSet
+            jobSkillsList={jobSkillsList}
+            selectedJobTitle={selectedJobTitle}
+            onChange={handleJobTitleChange}
+          />
+        )}
 
+        {selectedRecommendations
+        && (
         <RecommendationStack
           selectedRecommendations={selectedRecommendations}
           productTypeNames={productTypes.current}
         />
+        )}
       </Stack>
     )
   );