From fa8a2dc669c72ccbcea4bcb5dcf426979bab5263 Mon Sep 17 00:00:00 2001
From: Ejaz Ahmad <86868918+jajjibhai008@users.noreply.github.com>
Date: Tue, 20 Aug 2024 12:28:53 +0500
Subject: [PATCH] feat: implemented some pre release requirements on video
 detail page (#1153)

---
 .../microlearning/VideoDetailPage.jsx         | 35 +++++++------------
 .../tests/VideoDetailPage.test.jsx            | 31 ++++++++++++++++
 2 files changed, 43 insertions(+), 23 deletions(-)

diff --git a/src/components/microlearning/VideoDetailPage.jsx b/src/components/microlearning/VideoDetailPage.jsx
index 15ed7610d..75e185188 100644
--- a/src/components/microlearning/VideoDetailPage.jsx
+++ b/src/components/microlearning/VideoDetailPage.jsx
@@ -1,8 +1,7 @@
 /* eslint-disable max-len */
 import React, { useEffect } from 'react';
-import { Link, useLocation } from 'react-router-dom';
 import {
-  Container, Breadcrumb, Row, Badge, Skeleton,
+  Container, Row, Badge, Skeleton,
   Hyperlink,
   Icon,
   Button,
@@ -14,6 +13,7 @@ import {
 } from '@openedx/paragon/icons';
 import {
   useVideoDetails, useEnterpriseCustomer, useVideoCourseMetadata,
+  useSubscriptions,
 } from '../app/data';
 import './styles/VideoDetailPage.scss';
 import DelayedFallbackContainer from '../DelayedFallback/DelayedFallbackContainer';
@@ -22,6 +22,8 @@ import { getCoursePrice, useCoursePacingType } from '../course/data';
 import VideoCourseReview from './VideoCourseReview';
 import { hasTruthyValue, isDefinedAndNotNull } from '../../utils/common';
 import { getLevelType } from './data/utils';
+import { hasActivatedAndCurrentSubscription } from '../search/utils';
+import { features } from '../../config';
 
 const VideoPlayer = loadable(() => import(/* webpackChunkName: "videojs" */ '../video/VideoPlayer'), {
   fallback: (
@@ -32,11 +34,11 @@ const VideoPlayer = loadable(() => import(/* webpackChunkName: "videojs" */ '../
 });
 
 const VideoDetailPage = () => {
-  const location = useLocation();
   const { data: enterpriseCustomer } = useEnterpriseCustomer();
   const { data: videoData } = useVideoDetails();
   const { data: courseMetadata } = useVideoCourseMetadata(videoData?.courseKey);
   const [pacingType, pacingTypeContent] = useCoursePacingType(courseMetadata?.activeCourseRun);
+  const { data: { subscriptionLicense } } = useSubscriptions();
   const intl = useIntl();
 
   const customOptions = {
@@ -44,6 +46,10 @@ const VideoDetailPage = () => {
     showTranscripts: true,
     transcriptUrls: videoData?.transcriptUrls,
   };
+  const enableVideos = (
+    features.FEATURE_ENABLE_VIDEO_CATALOG
+    && hasActivatedAndCurrentSubscription(subscriptionLicense)
+  );
 
   useEffect(() => {
     if (videoData?.videoURL) {
@@ -51,16 +57,9 @@ const VideoDetailPage = () => {
     }
   }, [videoData?.videoURL]);
 
-  const routeLinks = [
-    {
-      label: 'Explore Videos',
-      to: `/${enterpriseCustomer.slug}/videos`,
-    },
-  ];
-  if (location.state?.parentRoute) {
-    routeLinks.push(location.state.parentRoute);
+  if (!enableVideos) {
+    return <NotFoundPage />;
   }
-
   // Comprehensive error handling will be implemented upon receiving specific error use cases from the UX team
   // and corresponding Figma designs.
   if (!videoData) {
@@ -76,14 +75,7 @@ const VideoDetailPage = () => {
   }
   const levelType = courseMetadata?.activeCourseRun?.levelType ? getLevelType(intl, courseMetadata.activeCourseRun.levelType) : null;
   return (
-    <Container size="lg" className="pt-3 video-detail-page-wrapper">
-      <div className="small">
-        <Breadcrumb
-          links={routeLinks}
-          activeLabel={videoData?.courseTitle}
-          linkAs={Link}
-        />
-      </div>
+    <Container size="lg" className="mt-4 video-detail-page-wrapper">
       <Row>
         <article className="col-12 col-lg-9">
           <div className="d-flex flex-column align-items-start flex-grow-1 video-container">
@@ -154,7 +146,6 @@ const VideoDetailPage = () => {
                 <div className="x-small">
                   <Hyperlink
                     destination={`/${enterpriseCustomer.slug}/course/${courseMetadata?.key}`}
-                    target="_blank"
                   >
                     {courseMetadata?.title}
                   </Hyperlink>
@@ -242,7 +233,6 @@ const VideoDetailPage = () => {
                     a: (chunks) => (
                       <Hyperlink
                         destination={`/${enterpriseCustomer.slug}/course/${courseMetadata?.key}`}
-                        target="_blank"
                       >
                         {chunks}
                       </Hyperlink>
@@ -255,7 +245,6 @@ const VideoDetailPage = () => {
                   variant="primary"
                   as={Hyperlink}
                   destination={`/${enterpriseCustomer.slug}/course/${courseMetadata?.key}`}
-                  target="_blank"
                   className="mt-4.5 w-100"
                 >
                   <FormattedMessage
diff --git a/src/components/microlearning/tests/VideoDetailPage.test.jsx b/src/components/microlearning/tests/VideoDetailPage.test.jsx
index b23670080..c954dd760 100644
--- a/src/components/microlearning/tests/VideoDetailPage.test.jsx
+++ b/src/components/microlearning/tests/VideoDetailPage.test.jsx
@@ -10,8 +10,11 @@ import VideoDetailPage from '../VideoDetailPage';
 import {
   useVideoDetails, useEnterpriseCustomer, useVideoCourseMetadata,
   useVideoCourseReviews,
+  useSubscriptions,
 } from '../../app/data';
 import { COURSE_PACING_MAP } from '../../course/data';
+import { LICENSE_STATUS } from '../../enterprise-user-subsidy/data/constants';
+import { features } from '../../../config';
 
 const APP_CONFIG = {
   USE_API_CACHE: true,
@@ -44,6 +47,7 @@ jest.mock('../../app/data', () => ({
   useRedeemablePolicies: jest.fn(() => ({ data: { redeemablePolicies: [] } })),
   useVideoCourseMetadata: jest.fn(() => ({ data: { courseKey: 'test-course-key' } })),
   useVideoCourseReviews: jest.fn(() => ({ data: { courseKey: 'test-course-key' } })),
+  useSubscriptions: jest.fn(),
 }));
 
 jest.mock('react-router-dom', () => ({
@@ -97,6 +101,18 @@ describe('VideoDetailPage Tests', () => {
     useEnterpriseCustomer.mockReturnValue({ data: mockEnterpriseCustomer });
     useVideoDetails.mockReturnValue({ data: VIDEO_MOCK_DATA });
     useVideoCourseReviews.mockReturnValue({ data: mockCourseReviews });
+    useSubscriptions.mockReturnValue({
+      data: {
+        subscriptionLicense: {
+          status: LICENSE_STATUS.ACTIVATED,
+          subscriptionPlan: {
+            enterpriseCatalogUuid: 'test-catalog-uuid',
+            isCurrent: true,
+          },
+        },
+      },
+    });
+    features.FEATURE_ENABLE_VIDEO_CATALOG = true;
   });
 
   it('Renders video details when data is available', () => {
@@ -135,4 +151,19 @@ describe('VideoDetailPage Tests', () => {
     renderWithRouter(<VideoDetailPageWrapper />);
     expect(screen.getByTestId('not-found-page')).toBeInTheDocument();
   });
+  it('renders a not found page when user do not have active subscription', () => {
+    useSubscriptions.mockReturnValue({
+      data: {
+        subscriptionLicense: {
+          status: LICENSE_STATUS.ACTIVATED,
+          subscriptionPlan: {
+            enterpriseCatalogUuid: 'test-catalog-uuid',
+            isCurrent: false,
+          },
+        },
+      },
+    });
+    renderWithRouter(<VideoDetailPageWrapper />);
+    expect(screen.getByTestId('not-found-page')).toBeInTheDocument();
+  });
 });