Merge pull request #103 from iblai/fix/autoplay-icon-based-on-autoplay-settings

Fix/autoplay icon based on autoplay settings

Author: michael-on-code

app/course-content/[course_id]/__tests__/layout.test.tsx

@@ -175,11 +175,16 @@ vi.mock('@iblai/iblai-js/data-layer', () => ({
 }));
 
 // Mock web-utils — layout dispatches setAdvancedDisplayMonetizationCheckoutModal
+// and reads the tenant `enable_course_voice_autoplay` flag via useTenantMetadata.
+const mockTenantMetadata = vi.hoisted(() => ({
+  current: { enable_course_voice_autoplay: true } as Record<string, unknown>,
+}));
 vi.mock('@iblai/iblai-js/web-utils', () => ({
   setAdvancedDisplayMonetizationCheckoutModal: (payload: unknown) => ({
     type: 'setAdvancedDisplayMonetizationCheckoutModal',
     payload,
   }),
+  useTenantMetadata: vi.fn(() => ({ metadata: mockTenantMetadata.current })),
 }));
 
 // Mock react-redux — layout calls useDispatch + useSelector(selectMentorSpinnerHidden)
@@ -226,6 +231,7 @@ describe('CourseContentLayout', () => {
 
   beforeEach(() => {
     vi.clearAllMocks();
+    mockTenantMetadata.current = { enable_course_voice_autoplay: true };
     vi.mocked(useCourseDetail).mockReturnValue({
       handleFetchCourseInfo: mockHandleFetchCourseInfo,
       handleFetchCourseSyllabus: mockHandleFetchCourseSyllabus,
@@ -1145,10 +1151,85 @@ describe('CourseContentLayout', () => {
   });
 
   describe('agent autoplay toggle', () => {
-    // NOTE: layout.tsx temporarily hard-codes `autoplayToggleVisible = true`, so
-    // the toggle currently renders regardless of `course.agent_autoplay`. Once
-    // the proper gate is restored, hide-when-false / hide-when-null specs can
-    // be added back here.
+    const renderWithCourse = (course: any) => {
+      vi.mocked(useCourseDetail).mockReturnValue({
+        handleFetchCourseInfo: mockHandleFetchCourseInfo,
+        handleFetchCourseSyllabus: mockHandleFetchCourseSyllabus,
+        handleOpenLesson: mockHandleOpenLesson,
+        handleFetchCourseProgress: mockHandleFetchCourseProgress,
+        handleFetchCourseCompletion: mockHandleFetchCourseCompletion,
+        handleCheckCourseMonetizationAccess: mockHandleCheckCourseMonetizationAccess,
+        course,
+        courseInfoLoadingState: 'successful',
+        courseOutline: null,
+        courseOutlineLoading: false,
+        courseCompletion: null,
+        courseGradingPolicyActive: false,
+      } as any);
+
+      return render(
+        <CourseContentLayout params={defaultParams}>
+          <div>children</div>
+        </CourseContentLayout>,
+      );
+    };
+
+    it('hides the autoplay toggle when course.agent_autoplay is false', () => {
+      renderWithCourse({ agent_autoplay: false });
+      expect(screen.queryByTestId('agent-autoplay-toggle')).not.toBeInTheDocument();
+      expect(screen.queryByTestId('agent-autoplay-popover-switch')).not.toBeInTheDocument();
+    });
+
+    it('hides the autoplay toggle when course.agent_autoplay is null', () => {
+      renderWithCourse({ agent_autoplay: null });
+      expect(screen.queryByTestId('agent-autoplay-toggle')).not.toBeInTheDocument();
+      expect(screen.queryByTestId('agent-autoplay-popover-switch')).not.toBeInTheDocument();
+    });
+
+    it('hides the autoplay toggle when course.agent_autoplay is missing', () => {
+      renderWithCourse({});
+      expect(screen.queryByTestId('agent-autoplay-toggle')).not.toBeInTheDocument();
+      expect(screen.queryByTestId('agent-autoplay-popover-switch')).not.toBeInTheDocument();
+    });
+
+    it('hides the autoplay toggle when course is null (still loading)', () => {
+      renderWithCourse(null);
+      expect(screen.queryByTestId('agent-autoplay-toggle')).not.toBeInTheDocument();
+      expect(screen.queryByTestId('agent-autoplay-popover-switch')).not.toBeInTheDocument();
+    });
+
+    it('hides the autoplay toggle for truthy-but-not-true values (e.g. 1)', () => {
+      renderWithCourse({ agent_autoplay: 1 });
+      expect(screen.queryByTestId('agent-autoplay-toggle')).not.toBeInTheDocument();
+      expect(screen.queryByTestId('agent-autoplay-popover-switch')).not.toBeInTheDocument();
+    });
+
+    it('hides the autoplay toggle when tenant enable_course_voice_autoplay is false (course flag on)', () => {
+      mockTenantMetadata.current = { enable_course_voice_autoplay: false };
+      renderWithCourse({ agent_autoplay: true });
+      expect(screen.queryByTestId('agent-autoplay-toggle')).not.toBeInTheDocument();
+      expect(screen.queryByTestId('agent-autoplay-popover-switch')).not.toBeInTheDocument();
+    });
+
+    it('hides the autoplay toggle when tenant enable_course_voice_autoplay is missing', () => {
+      mockTenantMetadata.current = {};
+      renderWithCourse({ agent_autoplay: true });
+      expect(screen.queryByTestId('agent-autoplay-toggle')).not.toBeInTheDocument();
+      expect(screen.queryByTestId('agent-autoplay-popover-switch')).not.toBeInTheDocument();
+    });
+
+    it('hides the autoplay toggle for tenant truthy-but-not-true values (e.g. "true")', () => {
+      mockTenantMetadata.current = { enable_course_voice_autoplay: 'true' };
+      renderWithCourse({ agent_autoplay: true });
+      expect(screen.queryByTestId('agent-autoplay-toggle')).not.toBeInTheDocument();
+      expect(screen.queryByTestId('agent-autoplay-popover-switch')).not.toBeInTheDocument();
+    });
+
+    it('shows the autoplay toggle only when BOTH course.agent_autoplay AND tenant flag are true', () => {
+      mockTenantMetadata.current = { enable_course_voice_autoplay: true };
+      renderWithCourse({ agent_autoplay: true });
+      expect(screen.getByTestId('agent-autoplay-toggle')).toBeInTheDocument();
+    });
 
     it('shows the autoplay toggle (defaults to off, play icon visible)', () => {
       vi.mocked(useCourseDetail).mockReturnValue({

app/course-content/[course_id]/layout.tsx

@@ -24,7 +24,10 @@ import { useGetDepartmentMemberCheckQuery } from '@/services/core';
 import { useGetCourseBlockDetailsQuery } from '@/services/course-metadata';
 import { Switch } from '@/components/ui/switch';
 import { Popover, PopoverContent, PopoverTrigger } from '@/components/ui/popover';
-import { setAdvancedDisplayMonetizationCheckoutModal } from '@iblai/iblai-js/web-utils';
+import {
+  setAdvancedDisplayMonetizationCheckoutModal,
+  useTenantMetadata,
+} from '@iblai/iblai-js/web-utils';
 import { useDispatch, useSelector } from 'react-redux';
 import { MONETIZATION_CLOSE_PAYLOAD } from '@/constants/global';
 import { config } from '@/lib/config';
@@ -48,6 +51,7 @@ export default function CourseContentLayout({
   const dispatch = useDispatch();
   const mentorSpinnerHidden = useSelector(selectMentorSpinnerHidden);
   const { setCourseMentor } = useChatState();
+  const { metadata } = useTenantMetadata({ org: getTenant() });
   const {
     handleFetchCourseInfo,
     handleFetchCourseSyllabus,
@@ -121,7 +125,9 @@ export default function CourseContentLayout({
     window.dispatchEvent(new CustomEvent('mentor:autoplay-changed', { detail: { enabled } }));
   };
 
-  const autoplayToggleVisible = true; // course?.agent_autoplay === true;
+  // enable_course_voice_autoplay tenant metadata flag and agent_autoplay flag from the course settings on studio to allow this feature
+  const autoplayToggleVisible =
+    course?.agent_autoplay === true && metadata?.enable_course_voice_autoplay === true;
 
   const { data: courseBlockDetails } = useGetCourseBlockDetailsQuery(
     { blockId: currentUnitID || '', username: getUserName() },