feat: Add highlight content card to stepper and individual sets

package.json

@@ -99,6 +99,7 @@
     "enzyme-adapter-react-16": "1.15.6",
     "husky": "0.14.3",
     "identity-obj-proxy": "3.0.0",
+    "jest-canvas-mock": "^2.4.0",
     "jest-localstorage-mock": "^2.4.22",
     "postcss": "8.1.0",
     "react-dev-utils": "11.0.4",

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

@@ -1,36 +1,50 @@
 import React from 'react';
-import { Card } from '@edx/paragon';
+import { Card, Hyperlink } from '@edx/paragon';
 import Truncate from 'react-truncate';
 import PropTypes from 'prop-types';
-import { FOOTER_TEXT_BY_CONTENT_TYPE } from './data/constants';
+import { getContentHighlightCardFooter } from './data/utils';
 
 const ContentHighlightCardItem = ({
+  isLoading,
   title,
+  href,
   contentType,
   partners,
   cardImageUrl,
+  price,
 }) => {
-  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 cardInfo = {
+    cardImgSrc: cardImageUrl,
+    cardLogoSrc: partners.length === 1 ? partners[0].logoImageUrl : undefined,
+    cardLogoAlt: partners.length === 1 ? `${partners[0].name}'s logo` : undefined,
+    cardTitle: <Truncate lines={3} title={title}>{title}</Truncate>,
+    cardSubtitle: partners.map(p => p.name).join(', '),
+    cardFooter: getContentHighlightCardFooter({ price, contentType }),
+  };
+  if (href) {
+    cardInfo.cardTitle = (
+      <Hyperlink destination={href} target="_blank">
+        <Truncate lines={3} title={title}>{title}</Truncate>
+      </Hyperlink>
+    );
+  }
   return (
-    <Card>
+    <Card isLoading={isLoading}>
       <Card.ImageCap
-        src={cardImageUrl}
+        src={cardInfo.cardImgSrc}
         srcAlt=""
-        logoSrc={cardLogoSrc}
-        logoAlt={cardLogoAlt}
+        logoSrc={cardInfo.cardLogoSrc}
+        logoAlt={cardInfo.cardLogoAlt}
       />
       <Card.Header
-        title={<Truncate lines={3} title={title}>{title}</Truncate>}
-        subtitle={<Truncate lines={2} title={cardSubtitle}>{cardSubtitle}</Truncate>}
+        title={cardInfo.cardTitle}
+        subtitle={<Truncate lines={2} title={cardInfo.cardSubtitle}>{cardInfo.cardSubtitle}</Truncate>}
       />
       {contentType && (
         <>
           <Card.Section />
           <Card.Footer
-            textElement={FOOTER_TEXT_BY_CONTENT_TYPE[contentType.toLowerCase()]}
+            textElement={cardInfo.cardFooter}
           />
         </>
       )}
@@ -39,18 +53,24 @@ const ContentHighlightCardItem = ({
 };
 
 ContentHighlightCardItem.propTypes = {
+  isLoading: PropTypes.bool,
   cardImageUrl: PropTypes.string,
   title: PropTypes.string.isRequired,
+  href: PropTypes.string,
   contentType: PropTypes.oneOf(['course', 'program', 'learnerpathway']).isRequired,
   partners: PropTypes.arrayOf(PropTypes.shape({
     name: PropTypes.string,
     uuid: PropTypes.string,
     logoImageUrl: PropTypes.string,
   })).isRequired,
+  price: PropTypes.number,
 };
 
 ContentHighlightCardItem.defaultProps = {
+  isLoading: false,
+  href: undefined,
   cardImageUrl: undefined,
+  price: undefined,
 };
 
 export default ContentHighlightCardItem;

src/components/ContentHighlights/ContentHighlightSet.jsx

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

src/components/ContentHighlights/ContentHighlightsCardItemsContainer.jsx

@@ -1,39 +1,68 @@
-import React, { useState } from 'react';
-import { CardGrid } from '@edx/paragon';
-import { camelCaseObject } from '@edx/frontend-platform';
+import React from 'react';
+import { CardGrid, Alert } from '@edx/paragon';
+import PropTypes from 'prop-types';
+import { connect } from 'react-redux';
 import ContentHighlightCardItem from './ContentHighlightCardItem';
-import { TEST_COURSE_HIGHLIGHTS_DATA } from './data/constants';
+import {
+  DEFAULT_ERROR_MESSAGE, HIGHLIGHTS_CARD_GRID_COLUMN_SIZES, MAX_CONTENT_ITEMS_PER_HIGHLIGHT_SET,
+} from './data/constants';
+import SkeletonContentCardContainer from './SkeletonContentCardContainer';
+import { generateAboutPageUrl } from './data/utils';
 
-const ContentHighlightsCardItemsContainer = () => {
-  const [highlightCourses] = useState(
-    camelCaseObject(TEST_COURSE_HIGHLIGHTS_DATA)[0]?.highlightedContent,
-  );
-
-  if (!highlightCourses) {
-    return null;
+const ContentHighlightsCardItemsContainer = ({ enterpriseSlug, isLoading, highlightedContent }) => {
+  if (isLoading) {
+    return (
+      <SkeletonContentCardContainer length={MAX_CONTENT_ITEMS_PER_HIGHLIGHT_SET} />
+    );
+  }
+  if (!highlightedContent || highlightedContent?.length === 0) {
+    return (
+      <Alert data-testid="empty-highlighted-content" variant="warning">
+        {DEFAULT_ERROR_MESSAGE.EMPTY_HIGHLIGHT_SET}
+      </Alert>
+    );
   }
-
   return (
-    <CardGrid
-      columnSizes={{
-        xs: 12,
-        lg: 6,
-        xl: 4,
-      }}
-    >
-      {highlightCourses.map(({
-        uuid, title, contentType, authoringOrganizations,
+    <CardGrid columnSizes={HIGHLIGHTS_CARD_GRID_COLUMN_SIZES}>
+      {highlightedContent.map(({
+        uuid, title, contentType, authoringOrganizations, contentKey,
       }) => (
         <ContentHighlightCardItem
+          isLoading={isLoading}
           key={uuid}
           cardImageUrl="https://picsum.photos/200/300"
           title={title}
-          contentType={contentType.toLowerCase()}
+          href={generateAboutPageUrl({
+            enterpriseSlug,
+            contentType: contentType?.toLowerCase(),
+            contentKey,
+          })}
+          contentType={contentType?.toLowerCase()}
           partners={authoringOrganizations}
         />
       ))}
     </CardGrid>
   );
 };
 
-export default ContentHighlightsCardItemsContainer;
+ContentHighlightsCardItemsContainer.propTypes = {
+  enterpriseSlug: PropTypes.string.isRequired,
+  isLoading: PropTypes.bool.isRequired,
+  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,
+};
+
+const mapStateToProps = state => ({
+  enterpriseSlug: state.portalConfiguration.enterpriseSlug,
+});
+
+export default connect(mapStateToProps)(ContentHighlightsCardItemsContainer);

src/components/ContentHighlights/ContentHighlightsContext.jsx

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

src/components/ContentHighlights/ContentHighlightsDashboard.jsx

@@ -30,7 +30,7 @@ const ContentHighlightsDashboardBase = ({ children }) => {
   }, [history, location, locationState]);
 
   return (
-    <Container fluid className="my-5">
+    <Container className="my-5">
       <ContentHighlightHelmet title="Highlights" />
       {children}
       <Toast