fix: hide video section on search page for learners with inactive sus…

…bcription (#1144)

Co-authored-by: Maham Akif <[email protected]>

src/components/search/Search.jsx

@@ -27,10 +27,12 @@ import {
   useEnterpriseFeatures,
   useEnterpriseOffers,
   useIsAssignmentsOnlyLearner,
+  useSubscriptions,
 } from '../app/data';
 import { useAlgoliaSearch } from '../../utils/hooks';
 import ContentTypeSearchResultsContainer from './ContentTypeSearchResultsContainer';
 import SearchVideo from './SearchVideo';
+import { hasActivatedAndCurrentSubscription } from './utils';
 
 export const sendPushEvent = (isPreQueryEnabled, courseKeyMetadata) => {
   if (isPreQueryEnabled) {
@@ -91,6 +93,13 @@ const Search = () => {
     config.PREQUERY_SEARCH_EXPERIMENT_VARIANT_ID,
   );
 
+  const { data: { subscriptionLicense } } = useSubscriptions();
+  const enableVideos = (
+    canOnlyViewHighlightSets === false
+    && features.FEATURE_ENABLE_VIDEO_CATALOG
+    && hasActivatedAndCurrentSubscription(subscriptionLicense)
+  );
+
   const PAGE_TITLE = intl.formatMessage({
     id: 'enterprise.search.page.title',
     defaultMessage: 'Search Courses and Programs - {enterpriseName}',
@@ -175,8 +184,7 @@ const Search = () => {
             {features.ENABLE_PATHWAYS && (canOnlyViewHighlightSets === false) && <SearchPathway filter={filters} />}
             {features.ENABLE_PROGRAMS && (canOnlyViewHighlightSets === false) && <SearchProgram filter={filters} />}
             {canOnlyViewHighlightSets === false && <SearchCourse filter={filters} /> }
-            {canOnlyViewHighlightSets === false
-            && (features.FEATURE_ENABLE_VIDEO_CATALOG) && <SearchVideo filter={filters} /> }
+            {enableVideos && <SearchVideo filter={filters} /> }
           </Stack>
         )}
         {/* render a single contentType if the refinement exist and is either a course, program or learnerpathway */}

src/components/search/SearchPage.jsx

@@ -3,26 +3,25 @@ import { SearchData } from '@edx/frontend-enterprise-catalog-search';
 import { useIntl } from '@edx/frontend-platform/i18n';
 
 import { useSubscriptions } from '../app/data';
-import { LICENSE_STATUS } from '../enterprise-user-subsidy/data/constants';
 import Search from './Search';
 import { SEARCH_TRACKING_NAME } from './constants';
-import { getSearchFacetFilters } from './utils';
+import { getSearchFacetFilters, hasActivatedAndCurrentSubscription } from './utils';
 import { features } from '../../config';
 
 const SearchPage = () => {
   const intl = useIntl();
 
   const { data: { subscriptionLicense } } = useSubscriptions();
-  const hasActivatedAndCurrentSubscription = (
-    subscriptionLicense?.status === LICENSE_STATUS.ACTIVATED
-    && subscriptionLicense?.subscriptionPlan?.isCurrent
+  const enableVideos = (
+    features.FEATURE_ENABLE_VIDEO_CATALOG
+    && hasActivatedAndCurrentSubscription(subscriptionLicense)
   );
 
   return (
     <SearchData
       searchFacetFilters={getSearchFacetFilters(intl)}
       trackingName={SEARCH_TRACKING_NAME}
-      enableVideos={features.FEATURE_ENABLE_VIDEO_CATALOG && hasActivatedAndCurrentSubscription}
+      enableVideos={enableVideos}
     >
       <Search />
     </SearchData>

src/components/search/tests/SearchPage.test.jsx

@@ -15,6 +15,7 @@ jest.mock('../../app/data', () => ({
 
 jest.mock('../utils', () => ({
   getSearchFacetFilters: jest.fn().mockReturnValue([]),
+  hasActivatedAndCurrentSubscription: jest.fn().mockReturnValue(true),
 }));
 
 jest.mock('../Search', () => function () {

src/components/search/tests/utils.test.js

@@ -1,4 +1,5 @@
-import { getSearchFacetFilters } from '../utils';
+import { getSearchFacetFilters, hasActivatedAndCurrentSubscription } from '../utils';
+import { LICENSE_STATUS } from '../../enterprise-user-subsidy/data/constants';
 
 jest.mock('../../../config', () => ({
   features: { PROGRAM_TYPE_FACET: true },
@@ -14,3 +15,34 @@ describe('getSearchFacetFilters', () => {
     expect(result.find(item => item.attribute === 'program_type')).toBeDefined();
   });
 });
+
+describe('hasActivatedAndCurrentSubscription', () => {
+  it('should return true when the subscription is activated and current', () => {
+    const subscriptionLicense = {
+      status: LICENSE_STATUS.ACTIVATED,
+      subscriptionPlan: {
+        isCurrent: true,
+      },
+    };
+
+    const result = hasActivatedAndCurrentSubscription(subscriptionLicense);
+    expect(result).toBe(true);
+  });
+
+  it('should return false when the subscription is not activated and not current', () => {
+    const subscriptionLicense = {
+      status: LICENSE_STATUS.REVOKED,
+      subscriptionPlan: {
+        isCurrent: false,
+      },
+    };
+
+    const result = hasActivatedAndCurrentSubscription(subscriptionLicense);
+    expect(result).toBe(false);
+  });
+
+  it('should return false when subscriptionLicense is undefined', () => {
+    const result = hasActivatedAndCurrentSubscription(undefined);
+    expect(result).toBe(false);
+  });
+});

src/components/search/utils.js

@@ -1,6 +1,7 @@
 import { defineMessages } from '@edx/frontend-platform/i18n';
 import { getSearchFacetFilters as getBaseSearchFacetFilters } from '@edx/frontend-enterprise-catalog-search';
 import { features } from '../../config';
+import { LICENSE_STATUS } from '../enterprise-user-subsidy/data/constants';
 
 export function isShortCourse(course) {
   return course.course_length === 'short';
@@ -58,3 +59,8 @@ export function getSearchFacetFilters(intl) {
 
   return searchFilters;
 }
+
+export const hasActivatedAndCurrentSubscription = (subscriptionLicense) => (
+  subscriptionLicense?.status === LICENSE_STATUS.ACTIVATED
+  && subscriptionLicense?.subscriptionPlan?.isCurrent
+);