From e8f8b044cd9d8e6671d82859f23e31cda3364440 Mon Sep 17 00:00:00 2001
From: Huyen Nguyen <25715018+huyenltnguyen@users.noreply.github.com>
Date: Tue, 14 Oct 2025 12:18:44 +0700
Subject: [PATCH] fix(client): allow transcript expanded state to not persist
 (#62492)

---
 .../components/challenge-transcript.test.tsx  | 29 +++++++++++++++----
 .../components/challenge-transcript.tsx       | 14 ++++++---
 2 files changed, 33 insertions(+), 10 deletions(-)

diff --git a/client/src/templates/Challenges/components/challenge-transcript.test.tsx b/client/src/templates/Challenges/components/challenge-transcript.test.tsx
index e4b888f84d9..644e998dec2 100644
--- a/client/src/templates/Challenges/components/challenge-transcript.test.tsx
+++ b/client/src/templates/Challenges/components/challenge-transcript.test.tsx
@@ -1,15 +1,16 @@
 import React from 'react';
-import { render, screen } from '@testing-library/react';
+import { render, screen, fireEvent } from '@testing-library/react';
 import store from 'store';
-import { describe, it, expect, beforeEach } from 'vitest';
+import { describe, it, expect, vi, afterEach } from 'vitest';
 import ChallengeTranscript from './challenge-transcript';
 
 const baseProps = {
-  transcript: 'Sample transcript text'
+  transcript: 'Sample transcript text',
+  shouldPersistExpanded: false
 };
 
 describe('<ChallengeTranscript />', () => {
-  beforeEach(() => {
+  afterEach(() => {
     store.clearAll();
   });
 
@@ -35,10 +36,26 @@ describe('<ChallengeTranscript />', () => {
     expect(screen.getByText('Sample transcript text')).not.toBeVisible();
   });
 
-  it("renders expanded when 'fcc-transcript-expanded = true'", () => {
+  it("renders expanded when 'fcc-transcript-expanded = true' and shouldPersistExpanded = true", () => {
     store.set('fcc-transcript-expanded', true);
-    render(<ChallengeTranscript {...baseProps} />);
+    render(<ChallengeTranscript {...baseProps} shouldPersistExpanded={true} />);
     expect(screen.getByTestId('challenge-transcript')).toHaveAttribute('open');
     expect(screen.getByText('Sample transcript text')).toBeVisible();
   });
+
+  it('writes to localstorage when shouldPersistExpanded = true', () => {
+    const setSpy = vi.spyOn(store, 'set');
+    render(<ChallengeTranscript {...baseProps} shouldPersistExpanded={true} />);
+    fireEvent.click(screen.getByText('learn.transcript'));
+    expect(setSpy).toHaveBeenCalledWith('fcc-transcript-expanded', true);
+    setSpy.mockRestore();
+  });
+
+  it('does not write to localstorage when shouldPersistExpanded = false', () => {
+    const setSpy = vi.spyOn(store, 'set');
+    render(<ChallengeTranscript {...baseProps} />);
+    fireEvent.click(screen.getByText('learn.transcript'));
+    expect(setSpy).not.toHaveBeenCalled();
+    setSpy.mockRestore();
+  });
 });
diff --git a/client/src/templates/Challenges/components/challenge-transcript.tsx b/client/src/templates/Challenges/components/challenge-transcript.tsx
index 9bc54727a84..0ee53c12550 100644
--- a/client/src/templates/Challenges/components/challenge-transcript.tsx
+++ b/client/src/templates/Challenges/components/challenge-transcript.tsx
@@ -7,21 +7,27 @@ import './challenge-transcript.css';
 
 interface ChallengeTranscriptProps {
   transcript: string;
+  shouldPersistExpanded?: boolean;
 }
 
 function ChallengeTranscript({
-  transcript
+  transcript,
+  shouldPersistExpanded
 }: ChallengeTranscriptProps): JSX.Element {
   const { t } = useTranslation();
 
   // default to collapsed
-  const [isOpen, setIsOpen] = useState(
-    () => (store.get('fcc-transcript-expanded') as boolean | null) ?? false
+  const [isOpen, setIsOpen] = useState(() =>
+    shouldPersistExpanded
+      ? (store.get('fcc-transcript-expanded') as boolean | null) ?? false
+      : false
   );
 
   function toggleExpandedState(e: React.MouseEvent<HTMLDetailsElement>) {
     e.preventDefault();
-    store.set('fcc-transcript-expanded', !isOpen);
+    if (shouldPersistExpanded) {
+      store.set('fcc-transcript-expanded', !isOpen);
+    }
     setIsOpen(!isOpen);
   }