feat: Subtitles for each LOB (#13)

Add descriptive subtitle to each set of recommendations.
edx · Jul 20, 2023 · 45699ee · 45699ee
1 parent ed66b92
commit 45699ee
Show file tree

Hide file tree

Showing 4 changed files with 78 additions and 22 deletions.
diff --git a/src/skills-builder/skills-builder-modal/view-results/ProductTypeBanner.jsx b/src/skills-builder/skills-builder-modal/view-results/ProductTypeBanner.jsx
@@ -37,6 +37,23 @@ const ProductTypeBanner = ({
     }
   };
 
+  const normalizeProductDescription = () => {
+    switch (productTypeName) {
+      case COURSE:
+        return formatMessage(messages.productTypeCourseDescription);
+      case BOOT_CAMP:
+        return formatMessage(messages.productTypeBootCampDescription);
+      case EXECUTIVE_EDUCATION:
+        return formatMessage(messages.productTypeExecutiveEducationDescription);
+      case DEGREE:
+        return formatMessage(messages.productTypeDegreeDescription);
+      case PROGRAM:
+        return formatMessage(messages.productTypeProgramDescription);
+      default:
+        return '';
+    }
+  };
+
   const renderTitle = () => {
     const productTypeHeaderText = normalizeProductTitle(productTypeName);
     return (
@@ -67,6 +84,9 @@ const ProductTypeBanner = ({
   return (
     <Stack>
       {renderTitle(productTypeName)}
+      <span>
+        {normalizeProductDescription(productTypeName)}
+      </span>
       <Stack {...infoStackProps}>
         <span>
           {formatMessage(messages.productTypeBannerResults, {

diff --git a/src/skills-builder/skills-builder-modal/view-results/RecommendationCard.jsx b/src/skills-builder/skills-builder-modal/view-results/RecommendationCard.jsx
@@ -18,28 +18,30 @@ const RecommendationCard = ({ rec, productType, handleCourseCardClick }) => {
   const { logoImageUrl } = owners[0];
 
   return (
-    <Hyperlink destination={marketingUrl} target="_blank" showLaunchIcon={false}>
-      <Card
-        className="product-card"
-        onClick={() => handleCourseCardClick(courseKey, productType)}
-      >
-        <Card.ImageCap
-          src={cardImageUrl}
-          logoSrc={logoImageUrl}
-          fallbackSrc={cardImageCapFallbackSrc}
-          fallbackLogoSrc={cardImageCapFallbackSrc}
-        />
-        <Card.Header title={title} />
-        <Card.Section>
-          {partner.map((orgName, index) => (
-            // eslint-disable-next-line react/no-array-index-key
-            <Chip key={index} className="chip-max-width">
-              {orgName}
-            </Chip>
-          ))}
-        </Card.Section>
-      </Card>
-    </Hyperlink>
+    <Card
+      className="product-card"
+      onClick={() => handleCourseCardClick(courseKey, productType)}
+    >
+      <Card.ImageCap
+        as={Hyperlink}
+        destination={marketingUrl}
+        target="_blank"
+        showLaunchIcon={false}
+        src={cardImageUrl}
+        logoSrc={logoImageUrl}
+        fallbackSrc={cardImageCapFallbackSrc}
+        fallbackLogoSrc={cardImageCapFallbackSrc}
+      />
+      <Card.Header title={title} size="sm" />
+      <Card.Section>
+        {partner.map((orgName, index) => (
+          // eslint-disable-next-line react/no-array-index-key
+          <Chip key={index} className="chip-max-width">
+            {orgName}
+          </Chip>
+        ))}
+      </Card.Section>
+    </Card>
   );
 };
 

diff --git a/src/skills-builder/skills-builder-modal/view-results/messages.js b/src/skills-builder/skills-builder-modal/view-results/messages.js
@@ -66,6 +66,31 @@ const messages = defineMessages({
     defaultMessage: 'degrees',
     description: 'Header text for degrees',
   },
+  productTypeCourseDescription: {
+    id: 'product.type.course.description',
+    defaultMessage: 'Find new interests and advance career opportunities',
+    description: 'Description of courses product',
+  },
+  productTypeProgramDescription: {
+    id: 'product.type.program.description',
+    defaultMessage: 'Series of courses for a deep understanding of a topic',
+    description: 'Description of programs product',
+  },
+  productTypeBootCampDescription: {
+    id: 'product.type.boot_camp.description',
+    defaultMessage: 'Intensive, hands-on, project based learning',
+    description: 'Description of bootcamps product',
+  },
+  productTypeExecutiveEducationDescription: {
+    id: 'product.type.executive_education.description',
+    defaultMessage: 'Expert-led, fully supported courses that build career-critical skills',
+    description: 'Description of executive education product',
+  },
+  productTypeDegreeDescription: {
+    id: 'product.type.degree.description',
+    defaultMessage: 'Online degree programs from top universities',
+    description: 'Description of degrees product',
+  },
 });
 
 export default messages;
diff --git a/src/skills-builder/skills-builder-modal/view-results/test/ViewResults.test.jsx b/src/skills-builder/skills-builder-modal/view-results/test/ViewResults.test.jsx
@@ -3,6 +3,7 @@ import {
 } from '@testing-library/react';
 import { mergeConfig } from '@edx/frontend-platform';
 import { sendTrackEvent } from '@edx/frontend-platform/analytics';
+import messages from '../messages';
 import { SkillsBuilderWrapperWithContext, contextValue } from '../../../test/setupSkillsBuilder';
 import { getProductRecommendations } from '../../../utils/search';
 import { mockData } from '../../../test/__mocks__/jobSkills.mockData';
@@ -142,6 +143,14 @@ describe('view-results', () => {
       expect(screen.getByText('"Prospector" programs')).toBeTruthy();
       expect(screen.getByText('"Prospector" courses')).toBeTruthy();
     });
+
+    it('provides subtitles for each line of business', () => {
+      expect(screen.getByText(messages.productTypeDegreeDescription.defaultMessage)).toBeTruthy();
+      expect(screen.getByText(messages.productTypeBootCampDescription.defaultMessage)).toBeTruthy();
+      expect(screen.getByText(messages.productTypeExecutiveEducationDescription.defaultMessage)).toBeTruthy();
+      expect(screen.getByText(messages.productTypeProgramDescription.defaultMessage)).toBeTruthy();
+      expect(screen.getByText(messages.productTypeCourseDescription.defaultMessage)).toBeTruthy();
+    });
   });
 
   describe('fetch recommendations', () => {