feat: show video learning type to learners with active subscription

openedx · Aug 5, 2024 · aafda44 · aafda44
1 parent 7581607
commit aafda44
Show file tree

Hide file tree

Showing 3 changed files with 32 additions and 23 deletions.
diff --git a/packages/catalog-search/src/LearningTypeRadioFacet.jsx b/packages/catalog-search/src/LearningTypeRadioFacet.jsx
@@ -12,7 +12,7 @@ import {
   LEARNING_TYPE_COURSE, LEARNING_TYPE_PROGRAM, LEARNING_TYPE_PATHWAY, LEARNING_TYPE_VIDEO,
 } from './data/constants';
 
-const LearningTypeRadioFacet = ({ enablePathways }) => {
+const LearningTypeRadioFacet = ({ enablePathways, enableVideos }) => {
   const { refinements, dispatch } = useContext(SearchContext);
 
   // only bold the dropdown title if the learning type is Course or Program
@@ -115,25 +115,25 @@ const LearningTypeRadioFacet = ({ enablePathways }) => {
               </Dropdown.Item>
             )
           }
-          {features.ENABLE_VIDEO_CATALOG
-            && (
-              <Dropdown.Item as="label" className="mb-0 py-3 d-flex align-items-center">
-                <Input
-                  type="radio"
-                  checked={typeVideoSelected}
-                  className="facet-item position-relative mr-2 mb-2"
-                  onChange={() => handleInputOnChange(LEARNING_TYPE_VIDEO)}
-                  data-testid="learning-type-videos"
-                />
-                <span className={classNames('facet-item-label', { 'is-refined': typeVideoSelected })}>
-                  <FormattedMessage
-                    id="search.facetFilters.learningType.videos"
-                    defaultMessage="Videos"
-                    description="Title for the learning type facet filter to return videos only"
-                  />
-                </span>
-              </Dropdown.Item>
-            )}
+          {features.ENABLE_VIDEO_CATALOG && enableVideos
+          && (
+          <Dropdown.Item as="label" className="mb-0 py-3 d-flex align-items-center">
+            <Input
+              type="radio"
+              checked={typeVideoSelected}
+              className="facet-item position-relative mr-2 mb-2"
+              onChange={() => handleInputOnChange(LEARNING_TYPE_VIDEO)}
+              data-testid="learning-type-videos"
+            />
+            <span className={classNames('facet-item-label', { 'is-refined': typeVideoSelected })}>
+              <FormattedMessage
+                id="search.facetFilters.learningType.videos"
+                defaultMessage="Videos"
+                description="Title for the learning type facet filter to return videos only"
+              />
+            </span>
+          </Dropdown.Item>
+          )}
         </Dropdown.Menu>
       </Dropdown>
     </div>
@@ -142,10 +142,12 @@ const LearningTypeRadioFacet = ({ enablePathways }) => {
 
 LearningTypeRadioFacet.defaultProps = {
   enablePathways: null,
+  enableVideos: false,
 };
 
 LearningTypeRadioFacet.propTypes = {
   enablePathways: PropTypes.bool,
+  enableVideos: PropTypes.bool,
 };
 
 export default LearningTypeRadioFacet;
diff --git a/packages/catalog-search/src/SearchFilters.jsx b/packages/catalog-search/src/SearchFilters.jsx
@@ -17,7 +17,7 @@ import LearningTypeRadioFacet from './LearningTypeRadioFacet';
 
 export const FREE_ALL_TITLE = 'Free / All';
 
-const SearchFilters = ({ variant, enablePathways }) => {
+const SearchFilters = ({ variant, enablePathways, enableVideos }) => {
   const { refinements, searchFacetFilters } = useContext(SearchContext);
 
   const searchFacets = useMemo(
@@ -48,7 +48,9 @@ const SearchFilters = ({ variant, enablePathways }) => {
       return (
         <>
           {filtersFromRefinements}
-          {features.LEARNING_TYPE_FACET && (<LearningTypeRadioFacet enablePathways={enablePathways} />)}
+          {features.LEARNING_TYPE_FACET && (
+            <LearningTypeRadioFacet enablePathways={enablePathways} enableVideos={enableVideos} />
+          )}
         </>
       );
     },
@@ -77,11 +79,13 @@ const SearchFilters = ({ variant, enablePathways }) => {
 SearchFilters.defaultProps = {
   variant: STYLE_VARIANTS.inverse,
   enablePathways: null,
+  enableVideos: false,
 };
 
 SearchFilters.propTypes = {
   variant: PropTypes.oneOf([STYLE_VARIANTS.default, STYLE_VARIANTS.inverse]),
   enablePathways: PropTypes.bool,
+  enableVideos: PropTypes.bool,
 };
 
 export default SearchFilters;
diff --git a/packages/catalog-search/src/SearchHeader.jsx b/packages/catalog-search/src/SearchHeader.jsx
@@ -26,6 +26,7 @@ const SearchHeader = ({
   optimizelySuggestionClickHandler,
   isPreQueryEnabled,
   hideSearchBox,
+  enableVideos,
 }) => {
   const { refinements } = useContext(SearchContext);
   let searchQueryFromRefinements;
@@ -71,7 +72,7 @@ const SearchHeader = ({
             className={classNames('fe__searchbox-col', { 'fe__searchbox-col--default': variant === STYLE_VARIANTS.default })}
             xs={12}
           >
-            <SearchFilters className="mb-3" variant={variant} enablePathways={enablePathways} />
+            <SearchFilters className="mb-3" variant={variant} enablePathways={enablePathways} enableVideos={enableVideos} />
           </Col>
         </Row>
       </Container>
@@ -92,6 +93,7 @@ SearchHeader.defaultProps = {
   optimizelySuggestionClickHandler: undefined,
   isPreQueryEnabled: false,
   hideSearchBox: false,
+  enableVideos: false,
 };
 
 SearchHeader.propTypes = {
@@ -115,6 +117,7 @@ SearchHeader.propTypes = {
   optimizelySuggestionClickHandler: PropTypes.func,
   isPreQueryEnabled: PropTypes.bool,
   hideSearchBox: PropTypes.bool,
+  enableVideos: PropTypes.bool,
 };
 
 export default SearchHeader;