feat: add course/program detail to 'View Course' button

src/components/learner-credit-management/BudgetDetailCatalogTabContents.jsx

@@ -2,23 +2,18 @@ import React from 'react';
 import { InstantSearch } from 'react-instantsearch-dom';
 import algoliasearch from 'algoliasearch/lite';
 import { Row, Col } from '@edx/paragon';
+import { connect } from 'react-redux';
+import PropTypes from 'prop-types';
 
 import { SearchData, SEARCH_FACET_FILTERS } from '@edx/frontend-enterprise-catalog-search';
 import CatalogSearch from './search/CatalogSearch';
 import {
   LANGUAGE_REFINEMENT,
   LEARNING_TYPE_REFINEMENT,
-  useBudgetId,
-  useSubsidyAccessPolicy,
 } from './data';
 import { configuration } from '../../config';
 
-const BudgetDetailCatalogTabContents = () => {
-  const { subsidyAccessPolicyId } = useBudgetId();
-  const {
-    data: subsidyAccessPolicy,
-  } = useSubsidyAccessPolicy(subsidyAccessPolicyId);
-
+const BudgetDetailCatalogTabContents = ({ enterpriseSlug }) => {
   const language = {
     attribute: LANGUAGE_REFINEMENT,
     title: 'Language',
@@ -48,12 +43,20 @@ const BudgetDetailCatalogTabContents = () => {
             indexName={configuration.ALGOLIA.INDEX_NAME}
             searchClient={searchClient}
           >
-            <CatalogSearch catalogUuid={subsidyAccessPolicy?.catalogUuid} />
+            <CatalogSearch enterpriseSlug={enterpriseSlug} />
           </InstantSearch>
         </SearchData>
       </Col>
     </Row>
   );
 };
 
-export default BudgetDetailCatalogTabContents;
+BudgetDetailCatalogTabContents.propTypes = {
+  enterpriseSlug: PropTypes.string.isRequired,
+};
+
+const mapStateToProps = state => ({
+  enterpriseSlug: state.portalConfiguration.enterpriseSlug,
+});
+
+export default connect(mapStateToProps)(BudgetDetailCatalogTabContents);

src/components/learner-credit-management/cards/CourseCard.jsx

@@ -1,7 +1,8 @@
 /* eslint-disable @typescript-eslint/naming-convention */
 // variables taken from algolia not in camelcase
-import React from 'react';
+import React, { useContext } from 'react';
 import PropTypes from 'prop-types';
+import { AppContext } from '@edx/frontend-platform/react';
 
 import {
   Badge,
@@ -21,17 +22,19 @@ import { formatPrice, formatDate, getEnrollmentDeadline } from '../data/utils';
 import CARD_TEXT from '../constants';
 
 const CourseCard = ({
-  original,
+  original, enterpriseSlug,
 }) => {
   const {
     availability,
     cardImageUrl,
     courseType,
+    key,
     normalizedMetadata,
     partners,
     title,
   } = camelCaseObject(original);
 
+  const { config: { ENTERPRISE_LEARNER_PORTAL_URL } } = useContext(AppContext);
   const isSmall = useMediaQuery({ maxWidth: breakpoints.small.maxWidth });
   const isExtraSmall = useMediaQuery({ maxWidth: breakpoints.extraSmall.maxWidth });
 
@@ -72,6 +75,8 @@ const CourseCard = ({
 
   const isExecEd = courseType === EXEC_ED_COURSE_TYPE;
 
+  const linkToCourse = `${ENTERPRISE_LEARNER_PORTAL_URL}/${enterpriseSlug}/course/${key}`;
+
   return (
     <Card
       orientation={isSmall ? 'vertical' : 'horizontal'}
@@ -104,9 +109,9 @@ const CourseCard = ({
           textElement={isExecEd ? execEdEnrollmentInfo : courseEnrollmentInfo}
         >
           <Button
-            // TODO: Implementation to follow in ENT-7594
             as={Hyperlink}
-            destination="https://enterprise.stage.edx.org"
+            data-testid="hyperlink-view-course"
+            destination={linkToCourse}
             target="_blank"
             variant="outline-primary"
           >
@@ -120,6 +125,7 @@ const CourseCard = ({
 };
 
 CourseCard.propTypes = {
+  enterpriseSlug: PropTypes.string.isRequired,
   original: PropTypes.shape({
     availability: PropTypes.arrayOf(PropTypes.string),
     cardImageUrl: PropTypes.string,

src/components/learner-credit-management/cards/CourseCard.test.jsx

@@ -2,13 +2,15 @@ import React from 'react';
 import { fireEvent, render, screen } from '@testing-library/react';
 import '@testing-library/jest-dom/extend-expect';
 
+import { AppContext } from '@edx/frontend-platform/react';
 import { IntlProvider } from '@edx/frontend-platform/i18n';
 import CourseCard from './CourseCard';
 
 const originalData = {
   availability: ['Upcoming'],
   card_image_url: undefined,
   course_type: 'course',
+  key: 'course-123x',
   normalized_metadata: {
     enroll_by_date: '2016-02-18T04:00:00Z',
     start_date: '2016-04-18T04:00:00Z',
@@ -21,8 +23,11 @@ const originalData = {
 
 const defaultProps = {
   original: originalData,
+  enterpriseSlug: 'test-enterprise-slug',
 };
 
+const mockLearnerPortal = 'https://enterprise.stage.edx.org';
+
 const execEdData = {
   availability: ['Upcoming'],
   card_image_url: undefined,
@@ -46,7 +51,13 @@ describe('Course card works as expected', () => {
   test('course card renders', () => {
     render(
       <IntlProvider locale="en">
-        <CourseCard {...defaultProps} />
+        <AppContext.Provider
+          value={{
+            config: { ENTERPRISE_LEARNER_PORTAL_URL: mockLearnerPortal },
+          }}
+        >
+          <CourseCard {...defaultProps} />
+        </AppContext.Provider>
       </IntlProvider>,
     );
     expect(screen.queryByText(defaultProps.original.title)).toBeInTheDocument();
@@ -64,7 +75,13 @@ describe('Course card works as expected', () => {
   test('test card renders default image', async () => {
     render(
       <IntlProvider locale="en">
-        <CourseCard {...defaultProps} />
+        <AppContext.Provider
+          value={{
+            config: { ENTERPRISE_LEARNER_PORTAL_URL: mockLearnerPortal },
+          }}
+        >
+          <CourseCard {...defaultProps} />
+        </AppContext.Provider>
       </IntlProvider>,
     );
     const imageAltText = `${originalData.title} course image`;
@@ -75,11 +92,36 @@ describe('Course card works as expected', () => {
   test('exec ed card renders', async () => {
     render(
       <IntlProvider locale="en">
-        <CourseCard {...execEdProps} />
+        <AppContext.Provider
+          value={{
+            config: { ENTERPRISE_LEARNER_PORTAL_URL: mockLearnerPortal },
+          }}
+        >
+          <CourseCard {...execEdProps} />
+        </AppContext.Provider>
       </IntlProvider>,
     );
     expect(screen.queryByText('$999')).toBeInTheDocument();
     expect(screen.queryByText('Starts Apr 18, 2016 • Learner must enroll by Feb 18, 2016')).toBeInTheDocument();
     expect(screen.queryByText('Executive Education')).toBeInTheDocument();
   });
+
+  test('sets correct course hyperlink for course', async () => {
+    render(
+      <IntlProvider locale="en">
+        <AppContext.Provider
+          value={{
+            config: { ENTERPRISE_LEARNER_PORTAL_URL: mockLearnerPortal },
+          }}
+        >
+          <CourseCard {...defaultProps} />
+        </AppContext.Provider>
+      </IntlProvider>,
+    );
+
+    const hyperlink = screen.getByRole('link', {
+      name: 'View course Opens in a new tab',
+    });
+    expect(hyperlink.href).toContain('https://enterprise.stage.edx.org/test-enterprise-slug/course/course-123x');
+  });
 });

src/components/learner-credit-management/search/CatalogSearch.jsx

@@ -8,11 +8,15 @@ import { SearchHeader } from '@edx/frontend-enterprise-catalog-search';
 
 import { configuration } from '../../../config';
 import CatalogSearchResults from './CatalogSearchResults';
-import { SEARCH_RESULT_PAGE_SIZE } from '../data';
+import { SEARCH_RESULT_PAGE_SIZE, useBudgetId, useSubsidyAccessPolicy } from '../data';
 
-const CatalogSearch = ({ catalogUuid }) => {
+const CatalogSearch = ({ enterpriseSlug }) => {
   const searchClient = algoliasearch(configuration.ALGOLIA.APP_ID, configuration.ALGOLIA.SEARCH_API_KEY);
-  const searchFilters = `enterprise_catalog_uuids:${catalogUuid} AND content_type:course`;
+  const { subsidyAccessPolicyId } = useBudgetId();
+  const {
+    data: subsidyAccessPolicy,
+  } = useSubsidyAccessPolicy(subsidyAccessPolicyId);
+  const searchFilters = `enterprise_catalog_uuids:${subsidyAccessPolicy.catalogUuid} AND content_type:course`;
 
   return (
     <section>
@@ -35,14 +39,14 @@ const CatalogSearch = ({ catalogUuid }) => {
             disableSuggestionRedirect
           />
         </div>
-        <CatalogSearchResults />
+        <CatalogSearchResults enterpriseSlug={enterpriseSlug} />
       </InstantSearch>
     </section>
   );
 };
 
 CatalogSearch.propTypes = {
-  catalogUuid: PropTypes.string.isRequired,
+  enterpriseSlug: PropTypes.string.isRequired,
 };
 
 export default CatalogSearch;

src/components/learner-credit-management/search/CatalogSearchResults.jsx

@@ -25,6 +25,7 @@ export const ERROR_MESSAGE = 'An error occurred while retrieving data';
  */
 
 export const BaseCatalogSearchResults = ({
+  enterpriseSlug,
   searchResults,
   searchState,
   // algolia recommends this prop instead of searching
@@ -62,6 +63,13 @@ export const BaseCatalogSearchResults = ({
   const { refinements } = useContext(SearchContext);
   const page = refinements.page || (searchState.page || 0);
 
+  const renderCardComponent = (props) => (
+    <CourseCard
+      {...props}
+      enterpriseSlug={enterpriseSlug}
+    />
+  );
+
   useEffect(() => {
     setNoContent(searchResults === null || searchResults?.nbHits === 0);
   }, [searchResults, setNoContent]);
@@ -99,7 +107,7 @@ export const BaseCatalogSearchResults = ({
         <DataTable.TableControlBar />
         <CardView
           columnSizes={{ xs: 12 }}
-          CardComponent={CourseCard}
+          CardComponent={(props) => renderCardComponent(props)}
         />
         <DataTable.EmptyTable content="No results found" />
         <DataTable.TableFooter className="justify-content-center">
@@ -118,6 +126,7 @@ BaseCatalogSearchResults.defaultProps = {
 };
 
 BaseCatalogSearchResults.propTypes = {
+  enterpriseSlug: PropTypes.string.isRequired,
   // from Algolia
   searchResults: PropTypes.shape({
     _state: PropTypes.shape({