feat: Add highlight content card to stepper and individual sets

src/components/ContentHighlights/ContentHighlightCardContainer.jsx

@@ -8,7 +8,6 @@ import HighlightSetSection from './HighlightSetSection';
 const ContentHighlightCardContainer = () => {
   const { enterpriseCuration: { enterpriseCuration } } = useContext(EnterpriseAppContext);
   const highlightSets = useHighlightSetsForCuration(enterpriseCuration);
-
   return (
     <Stack gap={4}>
       <HighlightSetSection

src/components/ContentHighlights/ContentHighlightCardItem.jsx

@@ -9,11 +9,12 @@ const ContentHighlightCardItem = ({
   contentType,
   partners,
   cardImageUrl,
+  extras,
 }) => {
   const cardLogoSrc = partners?.length === 1 ? partners[0].logoImageUrl : undefined;
   const cardLogoAlt = partners?.length === 1 ? `${partners[0].name}'s logo` : undefined;
   const cardSubtitle = partners?.map(p => p.name).join(', ');
-
+  const cardFooter = extras?.firstEnrollablePaidSeatPrice ? `$${extras.firstEnrollablePaidSeatPrice} · ${FOOTER_TEXT_BY_CONTENT_TYPE[contentType.toLowerCase()]}` : FOOTER_TEXT_BY_CONTENT_TYPE[contentType.toLowerCase()];
   return (
     <Card>
       <Card.ImageCap
@@ -30,7 +31,7 @@ const ContentHighlightCardItem = ({
         <>
           <Card.Section />
           <Card.Footer
-            textElement={FOOTER_TEXT_BY_CONTENT_TYPE[contentType.toLowerCase()]}
+            textElement={cardFooter}
           />
         </>
       )}
@@ -47,10 +48,14 @@ ContentHighlightCardItem.propTypes = {
     uuid: PropTypes.string,
     logoImageUrl: PropTypes.string,
   })).isRequired,
+  extras: PropTypes.shape({
+    firstEnrollablePaidSeatPrice: PropTypes.number,
+  }),
 };
 
 ContentHighlightCardItem.defaultProps = {
   cardImageUrl: undefined,
+  extras: undefined,
 };
 
 export default ContentHighlightCardItem;

src/components/ContentHighlights/ContentHighlightSet.jsx

@@ -1,12 +1,20 @@
 import { Container } from '@edx/paragon';
+import { useParams } from 'react-router-dom';
+import React from 'react';
 import ContentHighlightsCardItemContainer from './ContentHighlightsCardItemsContainer';
 import CurrentContentHighlightItemsHeader from './CurrentContentHighlightItemsHeader';
+import { useHighlightSetItems } from './data/hooks';
 
-const ContentHighlightSet = () => (
-  <Container fluid className="mt-5">
-    <CurrentContentHighlightItemsHeader />
-    <ContentHighlightsCardItemContainer />
-  </Container>
-);
+const ContentHighlightSet = () => {
+  // const { enterpriseCuration: { enterpriseCuration } } = useContext(EnterpriseAppContext);
+  const { highlightSetUUID } = useParams();
+  const { highlightSetItems } = useHighlightSetItems(highlightSetUUID);
+  return (
+    <Container fluid className="mt-5">
+      <CurrentContentHighlightItemsHeader highlightTitle={highlightSetItems?.title} />
+      <ContentHighlightsCardItemContainer highlightedContent={highlightSetItems?.highlightedContent} />
+    </Container>
+  );
+};
 
 export default ContentHighlightSet;

src/components/ContentHighlights/ContentHighlightsCardItemsContainer.jsx

@@ -1,18 +1,12 @@
-import React, { useState } from 'react';
+import React from 'react';
 import { CardGrid } from '@edx/paragon';
-import { camelCaseObject } from '@edx/frontend-platform';
+import PropTypes from 'prop-types';
 import ContentHighlightCardItem from './ContentHighlightCardItem';
-import { TEST_COURSE_HIGHLIGHTS_DATA } from './data/constants';
 
-const ContentHighlightsCardItemsContainer = () => {
-  const [highlightCourses] = useState(
-    camelCaseObject(TEST_COURSE_HIGHLIGHTS_DATA)[0]?.highlightedContent,
-  );
-
-  if (!highlightCourses) {
+const ContentHighlightsCardItemsContainer = ({ highlightedContent }) => {
+  if (!highlightedContent) {
     return null;
   }
-
   return (
     <CardGrid
       columnSizes={{
@@ -21,7 +15,7 @@ const ContentHighlightsCardItemsContainer = () => {
         xl: 4,
       }}
     >
-      {highlightCourses.map(({
+      {highlightedContent.map(({
         uuid, title, contentType, authoringOrganizations,
       }) => (
         <ContentHighlightCardItem
@@ -36,4 +30,18 @@ const ContentHighlightsCardItemsContainer = () => {
   );
 };
 
+ContentHighlightsCardItemsContainer.propTypes = {
+  highlightedContent: PropTypes.arrayOf(PropTypes.shape({
+    uuid: PropTypes.string,
+    contentType: PropTypes.oneOf(['course', 'program', 'learnerpathway']),
+    title: PropTypes.string,
+    cardImageUrl: PropTypes.string,
+    authoringOrganizations: PropTypes.arrayOf(PropTypes.shape({
+      name: PropTypes.string,
+      logoImageUrl: PropTypes.string,
+      uuid: PropTypes.string,
+    })),
+  })).isRequired,
+};
+
 export default ContentHighlightsCardItemsContainer;

src/components/ContentHighlights/ContentHighlightsContext.jsx

@@ -23,7 +23,6 @@ const ContentHighlightsContextProvider = ({ children }) => {
     contentHighlights: [],
     searchClient,
   });
-
   return (
     <ContentHighlightsContext.Provider value={contextValue}>
       {children}

src/components/ContentHighlights/CurrentContentHighlightItemsHeader.jsx

@@ -1,28 +1,24 @@
 import React from 'react';
 import { ActionRow } from '@edx/paragon';
-import { useParams } from 'react-router-dom';
+import PropTypes from 'prop-types';
 import ContentHighlightHelmet from './ContentHighlightHelmet';
 import DeleteHighlightSet from './DeleteHighlightSet';
 
-const CurrentContentHighlightItemsHeader = () => {
-  const { highlightSetUUID } = useParams();
+const CurrentContentHighlightItemsHeader = ({ highlightTitle }) => (
+  <>
+    <ContentHighlightHelmet title={`${highlightTitle} - Highlights`} />
+    <ActionRow className="mb-4.5">
+      <h2 className="m-0">
+        {highlightTitle}
+      </h2>
+      <ActionRow.Spacer />
+      <DeleteHighlightSet />
+    </ActionRow>
+  </>
+);
 
-  const highlightTitle = highlightSetUUID;
-
-  const titleName = `${highlightTitle} - Highlights`;
-
-  return (
-    <>
-      <ContentHighlightHelmet title={titleName} />
-      <ActionRow className="mb-4.5">
-        <h2 className="m-0">
-          {highlightTitle}
-        </h2>
-        <ActionRow.Spacer />
-        <DeleteHighlightSet />
-      </ActionRow>
-    </>
-  );
+CurrentContentHighlightItemsHeader.propTypes = {
+  highlightTitle: PropTypes.string.isRequired,
 };
 
 export default CurrentContentHighlightItemsHeader;

src/components/ContentHighlights/HighlightStepper/ContentConfirmContentCard.jsx

@@ -0,0 +1,39 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+
+import ContentHighlightCardItem from '../ContentHighlightCardItem';
+
+const ContentConfirmContentCard = ({ original }) => {
+  const {
+    title,
+    contentType,
+    partners,
+    cardImageUrl,
+    originalImageUrl,
+    extras,
+  } = original;
+  return (
+    <ContentHighlightCardItem
+      title={title}
+      contentType={contentType}
+      partners={partners}
+      cardImageUrl={cardImageUrl || originalImageUrl}
+      extras={extras}
+    />
+  );
+};
+
+ContentConfirmContentCard.propTypes = {
+  original: PropTypes.shape({
+    title: PropTypes.string,
+    contentType: PropTypes.string,
+    partners: PropTypes.arrayOf(PropTypes.shape()),
+    cardImageUrl: PropTypes.string,
+    originalImageUrl: PropTypes.string,
+    extras: PropTypes.shape({
+      firstEnrollablePaidSeatPrice: PropTypes.number,
+    }),
+  }).isRequired,
+};
+
+export default ContentConfirmContentCard;

src/components/ContentHighlights/HighlightStepper/ContentHighlightStepper.jsx

@@ -69,7 +69,7 @@ const ContentHighlightStepper = ({ enterpriseId }) => {
       const newHighlightSet = {
         title: highlightTitle,
         isPublished: true,
-        // TODO: pass along the selected content keys!
+        content_key: Object.keys(currentSelectedRowIds).map(key => key.split(':')[1]),
       };
       const response = await EnterpriseCatalogApiService.createHighlightSet(enterpriseId, newHighlightSet);
       const result = camelCaseObject(response.data);
@@ -182,7 +182,7 @@ const ContentHighlightStepper = ({ enterpriseId }) => {
           title={STEPPER_STEP_LABELS.CONFIRM_PUBLISH}
           index={steps.indexOf(STEPPER_STEP_LABELS.CONFIRM_PUBLISH)}
         >
-          <HighlightStepperConfirmContent />
+          <HighlightStepperConfirmContent enterpriseId={enterpriseId} />
         </Stepper.Step>
       </FullscreenModal>
     </Stepper>

src/components/ContentHighlights/HighlightStepper/ContentSearchResultCard.jsx

@@ -11,13 +11,16 @@ const ContentSearchResultCard = ({ original }) => {
     cardImageUrl,
     originalImageUrl,
   } = original;
-
+  const extras = {
+    firstEnrollablePaidSeatPrice: original.firstEnrollablePaidSeatPrice,
+  };
   return (
     <ContentHighlightCardItem
       title={title}
       contentType={contentType}
       partners={partners}
       cardImageUrl={cardImageUrl || originalImageUrl}
+      extras={extras}
     />
   );
 };
@@ -29,6 +32,7 @@ ContentSearchResultCard.propTypes = {
     partners: PropTypes.arrayOf(PropTypes.shape()),
     cardImageUrl: PropTypes.string,
     originalImageUrl: PropTypes.string,
+    firstEnrollablePaidSeatPrice: PropTypes.number,
   }).isRequired,
 };
 

src/components/ContentHighlights/HighlightStepper/HighlightStepperConfirmContent.jsx

@@ -1,4 +1,4 @@
-import React, { useMemo } from 'react';
+import React, { useMemo, useState } from 'react';
 import PropTypes from 'prop-types';
 import { useContextSelector } from 'use-context-selector';
 import {
@@ -13,11 +13,13 @@ import { camelCaseObject } from '@edx/frontend-platform';
 import { Configure, InstantSearch, connectStateResults } from 'react-instantsearch-dom';
 
 import { configuration } from '../../../config';
-import { STEPPER_STEP_TEXT, MAX_CONTENT_ITEMS_PER_HIGHLIGHT_SET } from '../data/constants';
+
+import {
+  STEPPER_STEP_TEXT, MAX_CONTENT_ITEMS_PER_HIGHLIGHT_SET,
+} from '../data/constants';
 import { ContentHighlightsContext } from '../ContentHighlightsContext';
 import SkeletonContentCard from '../SkeletonContentCard';
-
-const prodEnterpriseId = 'e783bb19-277f-479e-9c41-8b0ed31b4060';
+import ContentConfirmContentCard from './ContentConfirmContentCard';
 
 const BaseReviewContentSelections = ({
   searchResults,
@@ -43,18 +45,40 @@ const BaseReviewContentSelections = ({
   }
 
   const { hits } = camelCaseObject(searchResults);
+  const contentCards = () => {
+    const cardData = hits.map((highlightedContent) => {
+      const {
+        aggregationKey, title, cardImageUrl, contentType, partners, originalImageUrl, firstEnrollablePaidSeatPrice,
+      } = highlightedContent;
+      const original = {
+        aggregationKey,
+        title,
+        contentType,
+        partners,
+        cardImageUrl,
+        originalImageUrl,
+      };
+      original.extras = {
+        firstEnrollablePaidSeatPrice,
+      };
+      return original;
+    });
+    return cardData;
+  };
 
+  // eslint-disable-next-line react-hooks/rules-of-hooks
+  const [cardData] = useState(contentCards());
   return (
-    <ul>
-      {hits.map((highlightedContent) => {
-        const { aggregationKey, title } = highlightedContent;
-        return (
-          <li key={aggregationKey}>
-            {title}
-          </li>
-        );
-      })}
-    </ul>
+    <CardGrid
+      columnSizes={{
+        xs: 12,
+        md: 6,
+        lg: 4,
+        xl: 3,
+      }}
+    >
+      {cardData.map((original) => (<ContentConfirmContentCard original={original} />))}
+    </CardGrid>
   );
 };
 
@@ -74,7 +98,7 @@ BaseReviewContentSelections.defaultProps = {
 
 const ReviewContentSelections = connectStateResults(BaseReviewContentSelections);
 
-const SelectedContent = () => {
+const SelectedContent = ({ enterpriseId }) => {
   const searchClient = useContextSelector(
     ContentHighlightsContext,
     v => v[0].searchClient,
@@ -92,7 +116,9 @@ const SelectedContent = () => {
    */
   /* eslint-enable max-len */
   const algoliaFilters = useMemo(() => {
-    let filterString = `enterprise_customer_uuids:${prodEnterpriseId}`;
+    // TODO: replace testEnterpriseId with enterpriseID before push,
+    // uncomment out import and replace with testEnterpriseId to test
+    let filterString = `enterprise_customer_uuids:${enterpriseId}`;
     if (currentSelectedRowIds.length > 0) {
       filterString += ' AND (';
       currentSelectedRowIds.forEach((selectedRowId, index) => {
@@ -104,6 +130,7 @@ const SelectedContent = () => {
       filterString += ')';
     }
     return filterString;
+  // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [currentSelectedRowIds]);
 
   if (currentSelectedRowIds.length === 0) {
@@ -124,7 +151,11 @@ const SelectedContent = () => {
   );
 };
 
-const HighlightStepperConfirmContent = () => (
+SelectedContent.propTypes = {
+  enterpriseId: PropTypes.string.isRequired,
+};
+
+const HighlightStepperConfirmContent = ({ enterpriseId }) => (
   <Container>
     <Row>
       <Col xs={12} md={8} lg={6}>
@@ -134,8 +165,12 @@ const HighlightStepperConfirmContent = () => (
         </h3>
       </Col>
     </Row>
-    <SelectedContent />
+    <SelectedContent enterpriseId={enterpriseId} />
   </Container>
 );
 
+HighlightStepperConfirmContent.propTypes = {
+  enterpriseId: PropTypes.string.isRequired,
+};
+
 export default HighlightStepperConfirmContent;