From 15caea9e18a15e0026b9128b5e48ed01f611b4f5 Mon Sep 17 00:00:00 2001
From: OpenStaxClaude <tw33+clauderunner@rice.edu>
Date: Wed, 29 Oct 2025 10:46:11 -0400
Subject: [PATCH 1/4] CORE-1287: Port remaining book details page modules from
 JS to TS (#2786)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

* Port remaining book details page modules from JS to TS

Converted all remaining JavaScript files in src/app/pages/details to TypeScript:

Desktop view modules:
- desktop-view.js → desktop-view.tsx
- details-tab.js → details-tab.tsx
- videos-tab.js → videos-tab.tsx
- partners.js → partners.tsx
- import-*.js → import-*.ts

Phone view modules:
- phone-view.js → phone-view.tsx
- details-pane.js → details-pane.tsx
- student-resources-pane.js → student-resources-pane.tsx
- instructor-resources-pane.js → instructor-resources-pane.tsx

All conversions follow TypeScript best practices:
- Avoided using 'any' type
- Preferred 'type' to 'interface'
- Used type inference where possible
- Inline type definitions for function parameters
- Line lengths kept under 120 characters

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Port remaining book details page modules from JS to TS

Converted all remaining JavaScript files in src/app/pages/details to TypeScript:

Desktop view modules:
- desktop-view.js → desktop-view.tsx
- details-tab.js → details-tab.tsx
- videos-tab.js → videos-tab.tsx
- partners.js → partners.tsx
- import-*.js → import-*.ts

Phone view modules:
- phone-view.js → phone-view.tsx
- details-pane.js → details-pane.tsx
- student-resources-pane.js → student-resources-pane.tsx
- instructor-resources-pane.js → instructor-resources-pane.tsx

All conversions follow TypeScript best practices:
- Avoided using 'any' type
- Preferred 'type' to 'interface'
- Used type inference where possible
- Inline type definitions for function parameters
- Line lengths kept under 120 characters

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Revert to JS (loaders)

Co-Authored-By: Claude <noreply@anthropic.com>

* Lint clean

* Test coverage

---------

Co-authored-by: Claude <noreply@anthropic.com>
Co-authored-by: Roy Johnson <roy.e.johnson@rice.edu>
---
 .../accordion-group/accordion-group.tsx       |  22 +--
 .../common/get-this-title-files/options.tsx   |  20 +--
 .../pages/details/common/get-this-title.tsx   |  14 +-
 src/app/pages/details/common/hooks.tsx        |   4 +-
 .../pages/details/common/publication-info.tsx |   6 +-
 .../common/resource-box/left-content.tsx      |   2 +-
 .../resource-box/resource-box-utils.tsx       |  13 +-
 .../pages/details/{context.tsx => context.ts} |   8 +-
 .../details/desktop-view/desktop-view.js      | 109 --------------
 .../details/desktop-view/desktop-view.tsx     | 138 ++++++++++++++++++
 .../{details-tab.js => details-tab.tsx}       |  31 +++-
 .../details-tab/import-details-tab.js         |   3 +
 ...b.js => import-instructor-resource-tab.ts} |   0
 .../partners/{partners.js => partners.tsx}    |  50 +++++--
 ...-tab.js => import-student-resource-tab.ts} |   0
 .../desktop-view/videos-tab/videos-tab.js     |  19 ---
 .../desktop-view/videos-tab/videos-tab.tsx    |  21 +++
 .../{details-pane.js => details-pane.tsx}     |  15 +-
 .../instructor-resources-pane.js              | 104 -------------
 .../instructor-resources-pane.tsx             | 121 +++++++++++++++
 .../pages/details/phone-view/phone-view.js    | 104 -------------
 .../pages/details/phone-view/phone-view.tsx   | 136 +++++++++++++++++
 .../student-resources-pane.js                 |  34 -----
 .../student-resources-pane.tsx                |  56 +++++++
 test/src/data/details-college-algebra.js      |  14 +-
 test/src/pages/details/details-tab.test.tsx   |  36 +++++
 test/src/pages/details/details.test.tsx       |  93 +++++++++++-
 test/src/pages/details/left-content.test.tsx  |   7 +-
 28 files changed, 737 insertions(+), 443 deletions(-)
 rename src/app/pages/details/{context.tsx => context.ts} (93%)
 delete mode 100644 src/app/pages/details/desktop-view/desktop-view.js
 create mode 100644 src/app/pages/details/desktop-view/desktop-view.tsx
 rename src/app/pages/details/desktop-view/details-tab/{details-tab.js => details-tab.tsx} (72%)
 create mode 100644 src/app/pages/details/desktop-view/details-tab/import-details-tab.js
 rename src/app/pages/details/desktop-view/instructor-resource-tab/{import-instructor-resource-tab.js => import-instructor-resource-tab.ts} (100%)
 rename src/app/pages/details/desktop-view/instructor-resource-tab/partners/{partners.js => partners.tsx} (59%)
 rename src/app/pages/details/desktop-view/student-resource-tab/{import-student-resource-tab.js => import-student-resource-tab.ts} (100%)
 delete mode 100644 src/app/pages/details/desktop-view/videos-tab/videos-tab.js
 create mode 100644 src/app/pages/details/desktop-view/videos-tab/videos-tab.tsx
 rename src/app/pages/details/phone-view/details-pane/{details-pane.js => details-pane.tsx} (70%)
 delete mode 100644 src/app/pages/details/phone-view/instructor-resources-pane/instructor-resources-pane.js
 create mode 100644 src/app/pages/details/phone-view/instructor-resources-pane/instructor-resources-pane.tsx
 delete mode 100644 src/app/pages/details/phone-view/phone-view.js
 create mode 100644 src/app/pages/details/phone-view/phone-view.tsx
 delete mode 100644 src/app/pages/details/phone-view/student-resources-pane/student-resources-pane.js
 create mode 100644 src/app/pages/details/phone-view/student-resources-pane/student-resources-pane.tsx
 create mode 100644 test/src/pages/details/details-tab.test.tsx

diff --git a/src/app/components/accordion-group/accordion-group.tsx b/src/app/components/accordion-group/accordion-group.tsx
index b7e57ffb9..31426eee4 100644
--- a/src/app/components/accordion-group/accordion-group.tsx
+++ b/src/app/components/accordion-group/accordion-group.tsx
@@ -109,8 +109,9 @@ function Item({
 
 type ItemType = {
     title: string;
-    inline?: React.ReactNode;
     contentComponent: React.ReactNode;
+} | {
+    inline: React.ReactNode;
 };
 
 export default function AccordionGroup({
@@ -161,16 +162,15 @@ export default function AccordionGroup({
                 preExpanded={preExpandedUuids}
                 data-analytics-nav={analyticsNav}
             >
-                {items.map(
-                    (item) =>
-                        item.inline || (
-                            <Item
-                                analytics={!!analyticsNav}
-                                key={item.title}
-                                {...item}
-                                checkChevronDirection={chevronDirection}
-                            />
-                        )
+                {items.filter((i) => 'title' in i).map(
+                    (item) => (
+                        <Item
+                            analytics={!!analyticsNav}
+                            key={item.title}
+                            {...item}
+                            checkChevronDirection={chevronDirection}
+                        />
+                    )
                 )}
             </Accordion>
         </div>
diff --git a/src/app/pages/details/common/get-this-title-files/options.tsx b/src/app/pages/details/common/get-this-title-files/options.tsx
index da09edad3..e3466066f 100644
--- a/src/app/pages/details/common/get-this-title-files/options.tsx
+++ b/src/app/pages/details/common/get-this-title-files/options.tsx
@@ -121,7 +121,7 @@ export function WebviewOption({model}: {model: Model}) {
     const {GiveDialog, openGiveDialog} = useOpenGiveDialog();
     const trackDownload = React.useCallback(
         (event: TrackedMouseEvent) => {
-            trackLink(event, model.id);
+            trackLink(event, model.id.toString());
         },
         [model.id]
     );
@@ -140,10 +140,10 @@ export function WebviewOption({model}: {model: Model}) {
                 <GiveDialog
                     link={webviewLink}
                     variant="View online"
-                    warning={model.contentWarningText}
+                    warning={model.contentWarningText ?? undefined}
                     track="Online"
                     onDownload={trackDownload}
-                    id={model.id}
+                    id={model.id.toString()}
                 />
                 {showCallout && (
                     <div className="callout recommended-callout">
@@ -173,12 +173,12 @@ export function PdfOption({model}: {model: Model}) {
     const {GiveDialog, openGiveDialog} = useOpenGiveDialog();
     const trackDownload = React.useCallback(
         (event: TrackedMouseEvent) => {
-            trackLink(event, model.id);
+            trackLink(event, model.id.toString());
         },
         [model.id]
     );
 
-    return (
+    return pdfLink ? (
         <React.Fragment>
             <SimpleLinkOption
                 link={pdfLink}
@@ -190,11 +190,11 @@ export function PdfOption({model}: {model: Model}) {
                 link={pdfLink}
                 track="PDF"
                 onDownload={trackDownload}
-                id={model.id}
-                warning={model.contentWarningText}
+                id={model.id.toString()}
+                warning={model.contentWarningText ?? undefined}
             />
         </React.Fragment>
-    );
+    ) : null;
 }
 
 export function usePrintCopyDialog() {
@@ -254,8 +254,8 @@ export function KindleOption({model}: {model: Model}) {
 
 export function CheggOption({model}: {model: Model}) {
     return (
-        <Option condition={model.cheggLink}>
-            <a href={model.cheggLink} data-track="Chegg Reader">
+        <Option condition={model.cheggLink ?? false}>
+            <a href={model.cheggLink as string} data-track="Chegg Reader">
                 <img
                     className="logo-img"
                     src="/dist/images/icons/Chegglogo.svg"
diff --git a/src/app/pages/details/common/get-this-title.tsx b/src/app/pages/details/common/get-this-title.tsx
index 0f18cbde7..0b8358e23 100644
--- a/src/app/pages/details/common/get-this-title.tsx
+++ b/src/app/pages/details/common/get-this-title.tsx
@@ -14,7 +14,7 @@ import './get-this-title-files/get-this-title.scss';
 import trackLink from './track-link';
 
 export type Model = {
-    id: string;
+    id: number;
     slug: string;
     bookState: string;
     comingSoon: boolean;
@@ -23,13 +23,13 @@ export type Model = {
     kindleLink: string;
     webviewRexLink: string;
     webviewLink: string;
-    contentWarningText?: string;
+    contentWarningText: string | null;
     rexCalloutTitle?: string;
     rexCalloutBlurb?: string;
-    highResolutionPdfUrl: string;
-    lowResolutionPdfUrl: string;
-    cheggLink: string; // These may not be supported at all anymore,
-    cheggLinkText: string; // but the CMS is still serving them.
+    highResolutionPdfUrl: string | null;
+    lowResolutionPdfUrl: string | null;
+    cheggLink: string | null; // These may not be supported at all anymore,
+    cheggLinkText: string | null; // but the CMS is still serving them.
 };
 type ModelKey = 'bookshareLink' | 'kindleLink';
 type TrackedMouseEvent = Parameters<typeof trackLink>[0];
@@ -50,7 +50,7 @@ export default function GetThisTitle({model}: {model: Model}) {
     const [expanded, toggleExpanded] = useToggle(additionalOptions < 1);
     const interceptLinkClicks = React.useCallback<React.MouseEventHandler>(
         (event: TrackedMouseEvent) => {
-            trackLink(event, model.id);
+            trackLink(event, model.id.toString());
         },
         [model.id]
     );
diff --git a/src/app/pages/details/common/hooks.tsx b/src/app/pages/details/common/hooks.tsx
index 1706c81f7..fe0858dc9 100644
--- a/src/app/pages/details/common/hooks.tsx
+++ b/src/app/pages/details/common/hooks.tsx
@@ -46,7 +46,7 @@ type PartnerData = {
 }
 
 export function usePartnerFeatures(bookAbbreviation: string) {
-    const [blurbs, setBlurbs] = useState<object[]>([]);
+    const [blurbs, setBlurbs] = useState<ReturnType<typeof toBlurb>[]>([]);
     const [includePartners, setIncludePartners] = useState('');
 
     useEffect(() => {
@@ -64,5 +64,5 @@ export function usePartnerFeatures(bookAbbreviation: string) {
             });
     }, [bookAbbreviation]);
 
-    return [blurbs, includePartners];
+    return [blurbs, includePartners] as const;
 }
diff --git a/src/app/pages/details/common/publication-info.tsx b/src/app/pages/details/common/publication-info.tsx
index c26e57779..c344466b0 100644
--- a/src/app/pages/details/common/publication-info.tsx
+++ b/src/app/pages/details/common/publication-info.tsx
@@ -7,7 +7,7 @@ import useDetailsContext, {ContextValues, IsbnType} from '../context';
 
 function PdfUpdateInfo({updateDate, url}: {
     updateDate?: string | null;
-    url?: string;
+    url: string | null;
 }) {
     if (!updateDate) {
         return null;
@@ -209,8 +209,8 @@ function LabeledDate({label, date, className}: {
     );
 }
 
-export default function PublicationInfo({url, polish}: {
-    url: string;
+export default function PublicationInfo({url = null, polish}: {
+    url?: string | null;
     polish?: boolean;
 }) {
     const model = useDetailsContext();
diff --git a/src/app/pages/details/common/resource-box/left-content.tsx b/src/app/pages/details/common/resource-box/left-content.tsx
index 4ea0487e2..8a916fce3 100644
--- a/src/app/pages/details/common/resource-box/left-content.tsx
+++ b/src/app/pages/details/common/resource-box/left-content.tsx
@@ -103,7 +103,7 @@ function LeftButton({model}: {model: ResourceModel & LinkIsSet}) {
     const trackDownloadClick = React.useCallback(
         (event: TrackedMouseEvent) => {
             if (userStatus?.isInstructor) {
-                trackLink(event, model.bookModel?.id.toString());
+                trackLink(event, model.bookModel.id.toString());
             }
         },
         [model.bookModel, userStatus]
diff --git a/src/app/pages/details/common/resource-box/resource-box-utils.tsx b/src/app/pages/details/common/resource-box/resource-box-utils.tsx
index e34faed2e..5f42de0b2 100644
--- a/src/app/pages/details/common/resource-box/resource-box-utils.tsx
+++ b/src/app/pages/details/common/resource-box/resource-box-utils.tsx
@@ -18,8 +18,8 @@ function encodeLocation(search: string) {
 }
 
 export type ResourceData = {
-    linkExternal: string;
-    linkDocumentUrl: string;
+    linkExternal?: string;
+    linkDocumentUrl?: string;
     linkDocument?: {
         file: string;
     };
@@ -29,17 +29,18 @@ export type ResourceData = {
         heading: string;
         resourceCategory: string;
         resourceUnlocked: boolean;
-        creatorFestResource: boolean;
+        creatorFestResource?: boolean;
         description: string;
+        comingSoonText?: string;
     };
     comingSoonText: string | null;
     videoReferenceNumber?: number | null;
     k12?: boolean;
     printLink: string | null;
-    resourceUnlocked: boolean;
+    resourceUnlocked?: boolean;
     lockedText?: string;
-    resourceHeading: string;
-    resourceDescription: string;
+    resourceHeading?: string;
+    resourceDescription?: string;
     featured?: boolean;
 };
 
diff --git a/src/app/pages/details/context.tsx b/src/app/pages/details/context.ts
similarity index 93%
rename from src/app/pages/details/context.tsx
rename to src/app/pages/details/context.ts
index 529cb24d8..8c23feec6 100644
--- a/src/app/pages/details/context.tsx
+++ b/src/app/pages/details/context.ts
@@ -2,6 +2,7 @@ import {useState} from 'react';
 import buildContext from '~/components/jsx-helpers/build-context';
 import type {ResourceData} from './common/resource-box/resource-box-utils';
 import type {PromoteData} from './desktop-view/promo';
+import type {Model as GetThisTitleModel} from './common/get-this-title';
 
 export type LocaleType = {
     locale: string;
@@ -24,7 +25,7 @@ type StuffContent = {
         heading: string;
     };
 };
-type VideoContent = {
+export type VideoContent = {
     title: string;
     description: string;
     embed: string;
@@ -37,13 +38,14 @@ type Author = {
 
 export type IsbnType = 'print' | 'printSoftcover' | 'digital' | 'assignable';
 
-export type ContextValues = {
+export type ContextValues = GetThisTitleModel & {
     id: number;
     slug: string;
     translations: Array<TranslationType>;
     bookState: string;
     comingSoon: boolean;
     coverColor: string;
+    description: string;
     meta: LocaleType;
     reverseGradient: boolean;
     title: string;
@@ -59,7 +61,7 @@ export type ContextValues = {
     webinarContent?: WebinarContent;
     freeStuffStudent: StuffContent;
     freeStuffInstructor: StuffContent;
-    videos: VideoContent[];
+    videos: [VideoContent[]] | never[];
     setUseCardBackground?: React.Dispatch<React.SetStateAction<boolean>>;
     authors: Author[];
     created: string;
diff --git a/src/app/pages/details/desktop-view/desktop-view.js b/src/app/pages/details/desktop-view/desktop-view.js
deleted file mode 100644
index 5a129761c..000000000
--- a/src/app/pages/details/desktop-view/desktop-view.js
+++ /dev/null
@@ -1,109 +0,0 @@
-import React, {useState, useEffect} from 'react';
-import TabGroup from '~/components/tab-group/tab-group';
-import ContentGroup from '~/components/content-group/content-group';
-import {useIntl} from 'react-intl';
-import VideoTab from './videos-tab/videos-tab';
-import useDetailsContext from '../context';
-import {GiveLink} from '../common/common';
-import {useNavigate} from 'react-router-dom';
-import $ from '~/helpers/$';
-import JITLoad from '~/helpers/jit-load';
-import {findSelectedTab, replaceSearchTerm} from '../common/tab-utils';
-import './desktop-view.scss';
-
-const importDetailsTab = () => import('./details-tab/details-tab.js');
-const importInstructorTab = () => import('./instructor-resource-tab/import-instructor-resource-tab.js');
-const importStudentTab = () => import('./student-resource-tab/import-student-resource-tab.js');
-
-// eslint-disable-next-line complexity
-function useLabelsFromModel(model, polish) {
-    const intl = useIntl();
-    const tabLabels = [polish ? 'Szczegóły książki' : intl.formatMessage({
-        id: 'tabs.bookDetails'
-    })];
-
-    if (!polish && model.freeStuffInstructor.content) {
-        tabLabels.push(intl.formatMessage({
-            id: 'tabs.instructorResources'
-        }));
-    }
-    if (!polish && model.freeStuffStudent.content) {
-        tabLabels.push(intl.formatMessage({
-            id: 'tabs.studentResources'
-        }));
-    }
-    if (model.videos.length) {
-        tabLabels.push(intl.formatMessage({
-            id: 'tabs.videos'
-        }));
-    }
-
-    return tabLabels;
-}
-
-function useSelectedLabelTiedToSearchString(labels) {
-    const navigate = useNavigate();
-    const selectedTab = findSelectedTab(labels);
-    const updateSelectedLabel = React.useCallback(
-        (newValue) => {
-            const newSearchString = replaceSearchTerm(labels, newValue);
-
-            navigate(newSearchString, {replace: true});
-        },
-        [labels, navigate]
-    );
-
-    return [selectedTab, updateSelectedLabel];
-}
-
-function StubUntilSeen({active, ...JLParams}) {
-    const [seen, setSeen] = useState(false);
-
-    useEffect(
-        () => {
-            if (active) {
-                setSeen(true);
-            }
-        },
-        [active]
-    );
-
-    return (
-        seen ? <JITLoad {...JLParams} /> : <div />
-    );
-}
-
-export default function DesktopView() {
-    const model = useDetailsContext();
-    const polish = $.isPolish(model.title);
-    const labels = useLabelsFromModel(model, polish);
-    const [selectedLabel, setSelectedLabel] = useSelectedLabelTiedToSearchString(labels);
-    const TabTag = 'h2';
-    const activeIndex = labels.indexOf(selectedLabel);
-    const isShowingCards = selectedLabel !== 'Book details';
-    const setUseCardBackground = model.setUseCardBackground;
-
-    useEffect(() => setUseCardBackground(isShowingCards), [isShowingCards, setUseCardBackground]);
-
-    return (
-        <React.Fragment>
-            <div className="tab-controller">
-                <TabGroup
-                    {...{TabTag, labels, selectedLabel, setSelectedLabel}}
-                    data-analytics-nav="Book Details Tabs"
-                    listLabel="Book Info Tabs"
-                >
-                    <GiveLink />
-                </TabGroup>
-            </div>
-            <div className="tab-content">
-                <ContentGroup activeIndex={activeIndex} labels={labels}>
-                    <StubUntilSeen active={activeIndex===0} importFn={importDetailsTab} polish={polish} model={model} />
-                    <StubUntilSeen active={activeIndex===1} importFn={importInstructorTab} model={model} />
-                    <StubUntilSeen active={activeIndex===2} importFn={importStudentTab} />
-                    {model.videos[0] && <VideoTab videos={model.videos[0]} />}
-                </ContentGroup>
-            </div>
-        </React.Fragment>
-    );
-}
diff --git a/src/app/pages/details/desktop-view/desktop-view.tsx b/src/app/pages/details/desktop-view/desktop-view.tsx
new file mode 100644
index 000000000..8ffa9a679
--- /dev/null
+++ b/src/app/pages/details/desktop-view/desktop-view.tsx
@@ -0,0 +1,138 @@
+import React, {useState, useEffect} from 'react';
+import TabGroup from '~/components/tab-group/tab-group';
+import ContentGroup from '~/components/content-group/content-group';
+import {useIntl} from 'react-intl';
+import VideoTab from './videos-tab/videos-tab';
+import useDetailsContext, {type ContextValues} from '../context';
+import {GiveLink} from '../common/common';
+import {useNavigate} from 'react-router-dom';
+import $ from '~/helpers/$';
+import JITLoad from '~/helpers/jit-load';
+import {findSelectedTab, replaceSearchTerm} from '../common/tab-utils';
+import './desktop-view.scss';
+
+const importDetailsTab = () => import('./details-tab/import-details-tab');
+const importInstructorTab = () =>
+    import('./instructor-resource-tab/import-instructor-resource-tab');
+const importStudentTab = () =>
+    import('./student-resource-tab/import-student-resource-tab');
+
+// eslint-disable-next-line complexity
+function useLabelsFromModel(model: ContextValues, polish: boolean) {
+    const intl = useIntl();
+    const tabLabels = [
+        polish
+            ? 'Szczegóły książki'
+            : intl.formatMessage({
+                  id: 'tabs.bookDetails'
+              })
+    ];
+
+    if (!polish && model.freeStuffInstructor.content) {
+        tabLabels.push(
+            intl.formatMessage({
+                id: 'tabs.instructorResources'
+            })
+        );
+    }
+    if (!polish && model.freeStuffStudent.content) {
+        tabLabels.push(
+            intl.formatMessage({
+                id: 'tabs.studentResources'
+            })
+        );
+    }
+    if (model.videos.length) {
+        tabLabels.push(
+            intl.formatMessage({
+                id: 'tabs.videos'
+            })
+        );
+    }
+
+    return tabLabels;
+}
+
+function useSelectedLabelTiedToSearchString(labels: string[]) {
+    const navigate = useNavigate();
+    const selectedTab = findSelectedTab(labels);
+    const updateSelectedLabel = React.useCallback(
+        (newValue: string) => {
+            const newSearchString = replaceSearchTerm(labels, newValue);
+
+            navigate(newSearchString, {replace: true});
+        },
+        [labels, navigate]
+    );
+
+    return [selectedTab, updateSelectedLabel] as const;
+}
+
+type StubUntilSeenProps = {
+    active: boolean;
+    polish?: boolean;
+    model?: ContextValues;
+} & Parameters<typeof JITLoad>[0]
+
+function StubUntilSeen({active, ...JLParams}: StubUntilSeenProps) {
+    const [seen, setSeen] = useState(false);
+
+    useEffect(() => {
+        if (active) {
+            setSeen(true);
+        }
+    }, [active]);
+
+    return seen ? <JITLoad {...JLParams} /> : <div />;
+}
+
+export default function DesktopView() {
+    const model = useDetailsContext();
+    const polish = $.isPolish(model.title);
+    const labels = useLabelsFromModel(model, polish);
+    const [selectedLabel, setSelectedLabel] =
+        useSelectedLabelTiedToSearchString(labels);
+    const TabTag = 'h2';
+    const activeIndex = labels.indexOf(selectedLabel);
+    const isShowingCards = selectedLabel !== 'Book details';
+    const setUseCardBackground = model.setUseCardBackground;
+
+    useEffect(
+        () => setUseCardBackground?.(isShowingCards),
+        [isShowingCards, setUseCardBackground]
+    );
+
+    return (
+        <React.Fragment>
+            <div className="tab-controller">
+                <TabGroup
+                    {...{TabTag, labels, selectedLabel, setSelectedLabel}}
+                    data-analytics-nav="Book Details Tabs"
+                    listLabel="Book Info Tabs"
+                >
+                    <GiveLink />
+                </TabGroup>
+            </div>
+            <div className="tab-content">
+                <ContentGroup activeIndex={activeIndex} labels={labels}>
+                    <StubUntilSeen
+                        active={activeIndex === 0}
+                        importFn={importDetailsTab as Parameters<typeof JITLoad>[0]['importFn']}
+                        polish={polish}
+                        model={model}
+                    />
+                    <StubUntilSeen
+                        active={activeIndex === 1}
+                        importFn={importInstructorTab}
+                        model={model}
+                    />
+                    <StubUntilSeen
+                        active={activeIndex === 2}
+                        importFn={importStudentTab}
+                    />
+                    {model.videos[0] && <VideoTab videos={model.videos[0]} />}
+                </ContentGroup>
+            </div>
+        </React.Fragment>
+    );
+}
diff --git a/src/app/pages/details/desktop-view/details-tab/details-tab.js b/src/app/pages/details/desktop-view/details-tab/details-tab.tsx
similarity index 72%
rename from src/app/pages/details/desktop-view/details-tab/details-tab.js
rename to src/app/pages/details/desktop-view/details-tab/details-tab.tsx
index 99ad6bb16..a75d59520 100644
--- a/src/app/pages/details/desktop-view/details-tab/details-tab.js
+++ b/src/app/pages/details/desktop-view/details-tab/details-tab.tsx
@@ -6,9 +6,15 @@ import GetThisTitle from '../../common/get-this-title';
 import LetUsKnow from '../../common/let-us-know/let-us-know';
 import SavingsBlurb from '../../common/savings-blurb';
 import Promo from '../promo';
+import type {ContextValues} from '../../context';
 import './details-tab.scss';
 
-function PolishTab({model}) {
+export type DetailsTabArgs = {
+    model: ContextValues;
+    polish: boolean;
+}
+
+function PolishTab({model}: {model: ContextValues}) {
     return (
         <div className="details-tab">
             <div className="sidebar">
@@ -27,19 +33,22 @@ function PolishTab({model}) {
                 </div>
                 <Authors />
                 <ErrataSection />
-                <PublicationInfo model={model} polish={true} />
+                <PublicationInfo polish={true} />
             </div>
         </div>
     );
 }
 
-function EnglishTab({model}) {
+function EnglishTab({model}: {model: ContextValues}) {
     return (
         <div className="details-tab">
             <div className="sidebar">
                 <div>
                     <h3>
-                        <FormattedMessage id="getTheBook" defaultMessage="Get the book" />
+                        <FormattedMessage
+                            id="getTheBook"
+                            defaultMessage="Get the book"
+                        />
                     </h3>
                     <GetThisTitle model={model} />
                 </div>
@@ -51,14 +60,17 @@ function EnglishTab({model}) {
                 <Promo promoteSnippet={model.promoteSnippet} />
                 <div className="loc-summary-text">
                     <h3>
-                        <FormattedMessage id="summary" defaultMessage="Summary" />
+                        <FormattedMessage
+                            id="summary"
+                            defaultMessage="Summary"
+                        />
                     </h3>
                     <RawHTML html={model.description} />
                 </div>
                 <Authors />
                 <ErrataSection />
                 <div className="publication-info">
-                    <PublicationInfo model={model} url={null} />
+                    <PublicationInfo url={null} />
                 </div>
                 {model.adoptions && <SavingsBlurb />}
             </div>
@@ -66,8 +78,11 @@ function EnglishTab({model}) {
     );
 }
 
-export default function DetailsTab({model, polish}) {
+export default function DetailsTab({
+    model,
+    polish
+}: DetailsTabArgs) {
     const Child = polish ? PolishTab : EnglishTab;
 
-    return (<Child model={model} />);
+    return <Child model={model} />;
 }
diff --git a/src/app/pages/details/desktop-view/details-tab/import-details-tab.js b/src/app/pages/details/desktop-view/details-tab/import-details-tab.js
new file mode 100644
index 000000000..b86453b71
--- /dev/null
+++ b/src/app/pages/details/desktop-view/details-tab/import-details-tab.js
@@ -0,0 +1,3 @@
+import DetailsTab from './details-tab';
+
+export default DetailsTab;
diff --git a/src/app/pages/details/desktop-view/instructor-resource-tab/import-instructor-resource-tab.js b/src/app/pages/details/desktop-view/instructor-resource-tab/import-instructor-resource-tab.ts
similarity index 100%
rename from src/app/pages/details/desktop-view/instructor-resource-tab/import-instructor-resource-tab.js
rename to src/app/pages/details/desktop-view/instructor-resource-tab/import-instructor-resource-tab.ts
diff --git a/src/app/pages/details/desktop-view/instructor-resource-tab/partners/partners.js b/src/app/pages/details/desktop-view/instructor-resource-tab/partners/partners.tsx
similarity index 59%
rename from src/app/pages/details/desktop-view/instructor-resource-tab/partners/partners.js
rename to src/app/pages/details/desktop-view/instructor-resource-tab/partners/partners.tsx
index c1ed371d0..acde31910 100644
--- a/src/app/pages/details/desktop-view/instructor-resource-tab/partners/partners.js
+++ b/src/app/pages/details/desktop-view/instructor-resource-tab/partners/partners.tsx
@@ -1,19 +1,42 @@
 import React from 'react';
-import {useNavigate} from 'react-router-dom';
+import {NavigateOptions, useNavigate} from 'react-router-dom';
 import PartnerCard from '~/components/partner-card/partner-card';
+import {assertNotNull} from '~/helpers/data';
 import './partners.scss';
 
-export default function Partners({bookAbbreviation, model}) {
+type PartnerBlurb = {
+    url: string;
+    name: string;
+    type: string;
+    image: string;
+    cost?: string;
+    verifiedFeatures?: string[];
+};
+
+type PartnersModel = {
+    title: string;
+    seeMoreText: string;
+    blurbs: PartnerBlurb[];
+    badgeImage?: string;
+};
+
+export default function Partners({
+    bookAbbreviation,
+    model
+}: {
+    bookAbbreviation: string;
+    model: PartnersModel;
+}) {
     const {title, seeMoreText, blurbs, badgeImage} = model;
     const navigate = useNavigate();
     const onClick = React.useCallback(
-        (event) => {
-            const destUrl = event.target.getAttribute('href');
+        (event: React.MouseEvent<HTMLAnchorElement>) => {
+            const destUrl = event.currentTarget.getAttribute('href');
 
-            navigate(destUrl, {
+            navigate(assertNotNull(destUrl), {
                 book: bookAbbreviation,
                 redirect: true
-            });
+            } as NavigateOptions);
             event.preventDefault();
         },
         [navigate, bookAbbreviation]
@@ -23,7 +46,7 @@ export default function Partners({bookAbbreviation, model}) {
         <div className="partners">
             <div className="callout"></div>
             <div className="title-bar" data-analytics-nav={title}>
-                <span role="heading" aria-level="3">
+                <span role="heading" aria-level={3}>
                     {title}
                 </span>
                 <a
@@ -34,7 +57,10 @@ export default function Partners({bookAbbreviation, model}) {
                     {seeMoreText}
                 </a>
             </div>
-            <div className="blurb-scroller" data-analytics-content-list={title}>
+            <div
+                className="blurb-scroller"
+                data-analytics-content-list={title}
+            >
                 <ul className="blurbs">
                     {blurbs.map((blurb) => (
                         <li key={blurb.url}>
@@ -43,11 +69,13 @@ export default function Partners({bookAbbreviation, model}) {
                                 title={blurb.name}
                                 href={blurb.url}
                                 logoUrl={blurb.image}
-                                tags={[blurb.cost, blurb.type].filter((x) => x)}
+                                tags={[blurb.cost, blurb.type].filter(
+                                    (x) => x
+                                ) as string[]}
                                 onClick={onClick}
                                 badgeImage={badgeImage}
-                                verifiedFeatures={blurb.verifiedFeatures}
-                                analyticsContentType='Partner Profile'
+                                verifiedFeatures={blurb.verifiedFeatures?.join(', ')}
+                                analyticsContentType="Partner Profile"
                             />
                         </li>
                     ))}
diff --git a/src/app/pages/details/desktop-view/student-resource-tab/import-student-resource-tab.js b/src/app/pages/details/desktop-view/student-resource-tab/import-student-resource-tab.ts
similarity index 100%
rename from src/app/pages/details/desktop-view/student-resource-tab/import-student-resource-tab.js
rename to src/app/pages/details/desktop-view/student-resource-tab/import-student-resource-tab.ts
diff --git a/src/app/pages/details/desktop-view/videos-tab/videos-tab.js b/src/app/pages/details/desktop-view/videos-tab/videos-tab.js
deleted file mode 100644
index 1ed626c63..000000000
--- a/src/app/pages/details/desktop-view/videos-tab/videos-tab.js
+++ /dev/null
@@ -1,19 +0,0 @@
-import React from 'react';
-import RawHTML from '~/components/jsx-helpers/raw-html';
-import './videos-tab.scss';
-
-export default function VideoTab({videos}) {
-    return (
-        <div className="videos-tab">
-            {
-                videos.map(({title, description, embed}) =>
-                    <div className="video-block" key={title}>
-                        <h2 className="title">{title}</h2>
-                        <RawHTML html={description} className="description" />
-                        <RawHTML html={embed} className="embed" embed />
-                    </div>
-                )
-            }
-        </div>
-    );
-}
diff --git a/src/app/pages/details/desktop-view/videos-tab/videos-tab.tsx b/src/app/pages/details/desktop-view/videos-tab/videos-tab.tsx
new file mode 100644
index 000000000..e7c17495e
--- /dev/null
+++ b/src/app/pages/details/desktop-view/videos-tab/videos-tab.tsx
@@ -0,0 +1,21 @@
+import React from 'react';
+import RawHTML from '~/components/jsx-helpers/raw-html';
+import type {VideoContent} from '../../context';
+import './videos-tab.scss';
+
+export default function VideoTab({videos}: {videos: VideoContent[]}) {
+    return (
+        <div className="videos-tab">
+            {videos.map(({title, description, embed}) => (
+                <div className="video-block" key={title}>
+                    <h2 className="title">{title}</h2>
+                    <RawHTML
+                        html={description}
+                        className="description"
+                    />
+                    <RawHTML html={embed} className="embed" embed />
+                </div>
+            ))}
+        </div>
+    );
+}
diff --git a/src/app/pages/details/phone-view/details-pane/details-pane.js b/src/app/pages/details/phone-view/details-pane/details-pane.tsx
similarity index 70%
rename from src/app/pages/details/phone-view/details-pane/details-pane.js
rename to src/app/pages/details/phone-view/details-pane/details-pane.tsx
index 2f27e9634..f830e2ddc 100644
--- a/src/app/pages/details/phone-view/details-pane/details-pane.js
+++ b/src/app/pages/details/phone-view/details-pane/details-pane.tsx
@@ -3,9 +3,16 @@ import RawHTML from '~/components/jsx-helpers/raw-html';
 import {Authors, PublicationInfo} from '../../common/common';
 import CollapsingPane from '~/components/collapsing-pane/collapsing-pane';
 import SavingsBlurb from '../../common/savings-blurb';
+import type {ContextValues} from '../../context';
 import './details-pane.scss';
 
-export default function DetailsPane({polish, model}) {
+export default function DetailsPane({
+    polish,
+    model
+}: {
+    polish: boolean;
+    model: ContextValues;
+}) {
     return (
         <div className="details-pane">
             <RawHTML html={model.description} />
@@ -17,8 +24,10 @@ export default function DetailsPane({polish, model}) {
                 </CollapsingPane>
             </div>
             <div className="product-details-region">
-                <CollapsingPane title={polish ? 'Szczegóły Produktu' : 'Product details'}>
-                    <PublicationInfo model={model} polish={polish} />
+                <CollapsingPane
+                    title={polish ? 'Szczegóły Produktu' : 'Product details'}
+                >
+                    <PublicationInfo polish={polish} />
                 </CollapsingPane>
             </div>
         </div>
diff --git a/src/app/pages/details/phone-view/instructor-resources-pane/instructor-resources-pane.js b/src/app/pages/details/phone-view/instructor-resources-pane/instructor-resources-pane.js
deleted file mode 100644
index 01b48174b..000000000
--- a/src/app/pages/details/phone-view/instructor-resources-pane/instructor-resources-pane.js
+++ /dev/null
@@ -1,104 +0,0 @@
-import React from 'react';
-import {FontAwesomeIcon} from '@fortawesome/react-fontawesome';
-import {faSignOutAlt} from '@fortawesome/free-solid-svg-icons/faSignOutAlt';
-import {useNavigate} from 'react-router-dom';
-import {resourceBoxModel, useResources} from '../../common/resource-box/resource-box-utils';
-import FeaturedResourcesSection from '../../common/featured-resources/featured-resources';
-import ResourceBoxes from '../../common/resource-box/resource-boxes';
-import VideoResourceBoxes from '../../common/resource-box/video-resource-box';
-import useUserContext from '~/contexts/user';
-import useWindowContext, {WindowContextProvider} from '~/contexts/window';
-import './instructor-resources-pane.scss';
-
-export function InstructorResourcesPane({model, userStatus}) {
-    const {
-        bookVideoFacultyResources,
-        bookFacultyResources
-    } = useResources(model.slug);
-    const bookId = model.id;
-
-    for (const r of bookFacultyResources) {
-        r.resource.description = '';
-        r.resource.comingSoonText = '';
-    }
-    const featuredResources = bookFacultyResources.filter((r) => r.featured);
-    const featuredModels = featuredResources
-        .map((res) => resourceBoxModel(res, userStatus, bookId));
-    const referenceModels = bookFacultyResources
-        .filter((r) => r.videoReferenceNumber !== null)
-        .map((res) => resourceBoxModel(res, userStatus, bookId));
-    const otherModels = bookFacultyResources
-        .filter((r) =>
-            !r.featured && r.videoReferenceNumber === null &&
-            r.linkText !== 'View resources'
-        )
-        .map((res) => resourceBoxModel(res, userStatus, bookId));
-    const navigate = useNavigate();
-
-    function goToPartners(event) {
-        event.preventDefault();
-        navigate('/partners', {
-            book: model.salesforceAbbreviation,
-            redirect: true
-        });
-    }
-
-    return (
-        <React.Fragment>
-            {
-                featuredModels.length > 0 &&
-                    <FeaturedResourcesSection
-                        data-analytics-content-list="Instructor Featured Resources"
-                        header={model.featuredResourcesHeader}
-                        models={featuredModels}
-                    />
-            }
-            <a className="card filter-for-book" onClick={goToPartners}>
-                OpenStax Partners{' '}
-                <FontAwesomeIcon icon={faSignOutAlt} />
-            </a>
-            <div
-                className="free-resources-region"
-                data-analytics-content-list="instructor_resources"
-                data-list-name="Instructor Resources"
-            >
-                <VideoResourceBoxes models={bookVideoFacultyResources} referenceModels={referenceModels} />
-                <ResourceBoxes models={otherModels} includeCommonsHub />
-            </div>
-        </React.Fragment>
-    );
-}
-
-function StubUnlessDisplayed({model, userStatus}) {
-    const ref = React.useRef();
-    const [y, setY] = React.useState(null);
-    const {innerWidth, scrollY} = useWindowContext();
-
-    React.useEffect(
-        () => setY(y || ref.current?.getBoundingClientRect().y),
-        [innerWidth, scrollY, y]
-    );
-
-    return (
-        <div className="instructor-resources-pane" ref={ref}>
-            {
-                y ?
-                    <InstructorResourcesPane model={model} userStatus={userStatus} /> :
-                    null
-            }
-        </div>
-    );
-}
-
-export default function LoadUserStatusThenInstructorPane({model}) {
-    const {userStatus} = useUserContext();
-
-    if (!userStatus) {
-        return null;
-    }
-    return (
-        <WindowContextProvider>
-            <StubUnlessDisplayed model={model} userStatus={userStatus} />
-        </WindowContextProvider>
-    );
-}
diff --git a/src/app/pages/details/phone-view/instructor-resources-pane/instructor-resources-pane.tsx b/src/app/pages/details/phone-view/instructor-resources-pane/instructor-resources-pane.tsx
new file mode 100644
index 000000000..a80e9e540
--- /dev/null
+++ b/src/app/pages/details/phone-view/instructor-resources-pane/instructor-resources-pane.tsx
@@ -0,0 +1,121 @@
+import React from 'react';
+import {FontAwesomeIcon} from '@fortawesome/react-fontawesome';
+import {faSignOutAlt} from '@fortawesome/free-solid-svg-icons/faSignOutAlt';
+import {NavigateOptions, useNavigate} from 'react-router-dom';
+import {resourceBoxModel, useResources} from '../../common/resource-box/resource-box-utils';
+import FeaturedResourcesSection from '../../common/featured-resources/featured-resources';
+import ResourceBoxes from '../../common/resource-box/resource-boxes';
+import VideoResourceBoxes from '../../common/resource-box/video-resource-box';
+import useUserContext, {type UserStatus} from '~/contexts/user';
+import useWindowContext, {WindowContextProvider} from '~/contexts/window';
+import type {ContextValues} from '../../context';
+import './instructor-resources-pane.scss';
+import {assertNotNull} from '~/helpers/data';
+
+export function InstructorResourcesPane({
+    model,
+    userStatus
+}: {
+    model: ContextValues;
+    userStatus: UserStatus;
+}) {
+    const {bookVideoFacultyResources, bookFacultyResources} = useResources(
+        model.slug
+    );
+
+    for (const r of bookFacultyResources) {
+        if (r.resource) {
+            r.resource.description = '';
+            r.resource.comingSoonText = '';
+        }
+    }
+    const featuredResources = bookFacultyResources.filter((r) => r.featured);
+    const featuredModels = featuredResources.map((res) =>
+        resourceBoxModel(res, userStatus, model)
+    );
+    const referenceModels = bookFacultyResources
+        .filter((r) => r.videoReferenceNumber !== null)
+        .map((res) => resourceBoxModel(res, userStatus, model));
+    const otherModels = bookFacultyResources
+        .filter(
+            (r) =>
+                !r.featured &&
+                r.videoReferenceNumber === null &&
+                r.linkText !== 'View resources'
+        )
+        .map((res) => resourceBoxModel(res, userStatus, model));
+    const navigate = useNavigate();
+
+    function goToPartners(event: React.MouseEvent) {
+        event.preventDefault();
+        navigate('/partners', {
+            book: model.salesforceAbbreviation,
+            redirect: true
+        } as NavigateOptions);
+    }
+
+    return (
+        <React.Fragment>
+            {featuredModels.length > 0 && (
+                <FeaturedResourcesSection
+                    data-analytics-content-list="Instructor Featured Resources"
+                    header={model.featuredResourcesHeader}
+                    models={featuredModels}
+                />
+            )}
+            <a className="card filter-for-book" href="/partners" onClick={goToPartners}>
+                OpenStax Partners <FontAwesomeIcon icon={faSignOutAlt} />
+            </a>
+            <div
+                className="free-resources-region"
+                data-analytics-content-list="instructor_resources"
+                data-list-name="Instructor Resources"
+            >
+                <VideoResourceBoxes
+                    models={bookVideoFacultyResources}
+                    referenceModels={referenceModels}
+                />
+                <ResourceBoxes models={otherModels} includeCommonsHub />
+            </div>
+        </React.Fragment>
+    );
+}
+
+function StubUnlessDisplayed({
+    model,
+    userStatus
+}: {
+    model: ContextValues;
+    userStatus: UserStatus;
+}) {
+    const ref = React.useRef<HTMLDivElement>(null);
+    const [y, setY] = React.useState<number | null>(null);
+    const {innerWidth, scrollY} = useWindowContext();
+
+    React.useEffect(
+        () => setY(y || assertNotNull(ref.current).getBoundingClientRect().y),
+        [innerWidth, scrollY, y]
+    );
+
+    return (
+        <div className="instructor-resources-pane" ref={ref}>
+            {y ? (
+                <InstructorResourcesPane model={model} userStatus={userStatus} />
+            ) : null}
+        </div>
+    );
+}
+
+export default function LoadUserStatusThenInstructorPane({
+    model
+}: {
+    model: ContextValues;
+}) {
+    const {userStatus} = useUserContext();
+
+    return (
+        <WindowContextProvider>
+            <StubUnlessDisplayed model={model} userStatus={userStatus} />
+        </WindowContextProvider>
+    );
+}
diff --git a/src/app/pages/details/phone-view/phone-view.js b/src/app/pages/details/phone-view/phone-view.js
deleted file mode 100644
index e5472b659..000000000
--- a/src/app/pages/details/phone-view/phone-view.js
+++ /dev/null
@@ -1,104 +0,0 @@
-import React from 'react';
-import LetUsKnow from '../common/let-us-know/let-us-know';
-import GetThisTitle from '../common/get-this-title';
-import AccordionGroup from '~/components/accordion-group/accordion-group';
-import useDetailsContext from '../context';
-import $ from '~/helpers/$';
-import JITLoad from '~/helpers/jit-load';
-import {findSelectedTab} from '../common/tab-utils';
-import RawHTML from '~/components/jsx-helpers/raw-html';
-import {useTableOfContents} from '../common/hooks';
-import {ErrataContents, GiveLink} from '../common/common';
-import './phone-view.scss';
-
-const importDetailsPane = () => import('./details-pane/details-pane.js');
-const importInstructorPane = () => import('./instructor-resources-pane/instructor-resources-pane.js');
-const importStudentPane = () => import('./student-resources-pane/student-resources-pane.js');
-
-function TocPane({model}) {
-    const tocHtml = useTableOfContents(model);
-
-    return (
-        <div className="toc-drawer">
-            <RawHTML html={tocHtml} className="table-of-contents" />
-        </div>
-    );
-}
-
-function ErrataPane({model, polish}) {
-    return (
-        <div className="errata-pane">
-            <ErrataContents model={model} polish={polish} />
-        </div>
-    );
-}
-
-function items(model) {
-    const polish = $.isPolish(model.title);
-    const result = polish ?
-        [
-            {
-                title: 'Szczegóły książki',
-                contentComponent: <JITLoad importFn={importDetailsPane} model={model} polish={polish} />
-            }
-        ] :
-        [
-            {
-                title: 'Book details',
-                contentComponent: <JITLoad importFn={importDetailsPane} model={model} polish={polish} />
-            },
-            {
-                title: 'Instructor resources',
-                titleTag: 'updated',
-                contentComponent: <JITLoad importFn={importInstructorPane} model={model} />
-            },
-            {
-                title: 'Student resources',
-                openTitle: `Student resources (${model.bookStudentResources.length})`,
-                contentComponent: <JITLoad importFn={importStudentPane} model={model} />
-            }
-        ];
-
-    const includeTOC = ['live', 'new_edition_available'].includes(model.bookState);
-
-    if (includeTOC) {
-        result.splice(1, 0, {
-            title: polish ? 'Spis treści' : 'Table of contents',
-            contentComponent: <TocPane model={model} />
-        });
-        result.push({
-            title: polish ? 'Zgłoś erratę' : 'Report errata',
-            contentComponent: <ErrataPane model={model} polish={polish} />
-        });
-    }
-
-    result.push({
-        inline: <GiveLink />
-    });
-
-    return result;
-}
-
-export default function PhoneView() {
-    const model = useDetailsContext();
-    const accordionItems = items(model);
-    const selectedTab = findSelectedTab(accordionItems.map((i) => i.title));
-
-    return (
-        <div className="detail-phone-view">
-            <div className="main-grid">
-                <GetThisTitle model={model} />
-                <div className="accordion-region">
-                    <AccordionGroup
-                      data-analytics-nav="Book Details Accordion"
-                      items={items(model)}
-                      preExpanded={[selectedTab]}
-                    />
-                </div>
-            </div>
-            <div className="let-us-know-region">
-                <LetUsKnow title={model.title} />
-            </div>
-        </div>
-    );
-}
diff --git a/src/app/pages/details/phone-view/phone-view.tsx b/src/app/pages/details/phone-view/phone-view.tsx
new file mode 100644
index 000000000..5dfbbf76a
--- /dev/null
+++ b/src/app/pages/details/phone-view/phone-view.tsx
@@ -0,0 +1,136 @@
+import React from 'react';
+import LetUsKnow from '../common/let-us-know/let-us-know';
+import GetThisTitle from '../common/get-this-title';
+import AccordionGroup from '~/components/accordion-group/accordion-group';
+import useDetailsContext, {type ContextValues} from '../context';
+import $ from '~/helpers/$';
+import JITLoad from '~/helpers/jit-load';
+import {findSelectedTab} from '../common/tab-utils';
+import RawHTML from '~/components/jsx-helpers/raw-html';
+import {useTableOfContents} from '../common/hooks';
+import {ErrataContents, GiveLink} from '../common/common';
+import './phone-view.scss';
+
+const importDetailsPane = () => import('./details-pane/details-pane');
+const importInstructorPane = () =>
+    import('./instructor-resources-pane/instructor-resources-pane');
+const importStudentPane = () =>
+    import('./student-resources-pane/student-resources-pane');
+
+function TocPane() {
+    const tocHtml = useTableOfContents();
+
+    return (
+        <div className="toc-drawer">
+            <RawHTML html={tocHtml} className="table-of-contents" />
+        </div>
+    );
+}
+
+function ErrataPane() {
+    return (
+        <div className="errata-pane">
+            <ErrataContents />
+        </div>
+    );
+}
+
+type AccordionItem = {
+    title: string;
+    titleTag?: string;
+    openTitle?: string;
+    contentComponent: React.ReactNode;
+} | {
+    inline: React.ReactNode;
+};
+
+function items(model: ContextValues) {
+    const polish = $.isPolish(model.title);
+    const result: AccordionItem[] = polish
+        ? [
+              {
+                  title: 'Szczegóły książki',
+                  contentComponent: (
+                      <JITLoad
+                          importFn={importDetailsPane}
+                          model={model}
+                          polish={polish}
+                      />
+                  )
+              }
+          ]
+        : [
+              {
+                  title: 'Book details',
+                  contentComponent: (
+                      <JITLoad
+                          importFn={importDetailsPane}
+                          model={model}
+                          polish={polish}
+                      />
+                  )
+              },
+              {
+                  title: 'Instructor resources',
+                  titleTag: 'updated',
+                  contentComponent: (
+                      <JITLoad importFn={importInstructorPane} model={model} />
+                  )
+              },
+              {
+                  title: 'Student resources',
+                  openTitle: `Student resources (${model.bookStudentResources.length})`,
+                  contentComponent: (
+                      <JITLoad importFn={importStudentPane} model={model} />
+                  )
+              }
+          ];
+
+    const includeTOC = ['live', 'new_edition_available'].includes(
+        model.bookState
+    );
+
+    if (includeTOC) {
+        result.splice(1, 0, {
+            title: polish ? 'Spis treści' : 'Table of contents',
+            contentComponent: <TocPane />
+        });
+        result.push({
+            title: polish ? 'Zgłoś erratę' : 'Report errata',
+            contentComponent: <ErrataPane />
+        });
+    }
+
+    result.push({
+        inline: <GiveLink />
+    });
+
+    return result;
+}
+
+export default function PhoneView() {
+    const model = useDetailsContext();
+    const accordionItems = items(model);
+    const selectedTab = findSelectedTab(
+        accordionItems.filter((i) => 'title' in i)
+        .map((i) => i.title)
+    );
+
+    return (
+        <div className="detail-phone-view">
+            <div className="main-grid">
+                <GetThisTitle model={model} />
+                <div className="accordion-region">
+                    <AccordionGroup
+                        data-analytics-nav="Book Details Accordion"
+                        items={accordionItems}
+                        preExpanded={[selectedTab]}
+                    />
+                </div>
+            </div>
+            <div className="let-us-know-region">
+                <LetUsKnow title={model.title} />
+            </div>
+        </div>
+    );
+}
diff --git a/src/app/pages/details/phone-view/student-resources-pane/student-resources-pane.js b/src/app/pages/details/phone-view/student-resources-pane/student-resources-pane.js
deleted file mode 100644
index bda5f3c04..000000000
--- a/src/app/pages/details/phone-view/student-resources-pane/student-resources-pane.js
+++ /dev/null
@@ -1,34 +0,0 @@
-import React from 'react';
-import {studentResourceBoxPermissions} from '../../common/resource-box/resource-box-utils';
-import ResourceBoxes from '../../common/resource-box/resource-boxes';
-import useUserContext from '~/contexts/user';
-import './student-resources-pane.scss';
-
-function resourceBoxModel(resourceData, userStatus) {
-    return Object.assign({
-        heading: resourceData.resourceHeading,
-        description: '',
-        comingSoon: Boolean(resourceData.comingSoonText),
-        comingSoonText: '',
-        printLink: resourceData.printLink
-    }, studentResourceBoxPermissions(resourceData, userStatus, 'Student resources'));
-}
-
-function StudentResourcesPane({model, userStatus}) {
-    return (
-        <div className="student-resources-pane">
-            <ResourceBoxes models={model.bookStudentResources.map((res) => resourceBoxModel(res, userStatus))} />
-        </div>
-    );
-}
-
-export default function LoadUserStatusThenStudentPane({model}) {
-    const {userStatus} = useUserContext();
-
-    if (!userStatus) {
-        return null;
-    }
-    return (
-        <StudentResourcesPane model={model} userStatus={userStatus} />
-    );
-}
diff --git a/src/app/pages/details/phone-view/student-resources-pane/student-resources-pane.tsx b/src/app/pages/details/phone-view/student-resources-pane/student-resources-pane.tsx
new file mode 100644
index 000000000..b1837b1d9
--- /dev/null
+++ b/src/app/pages/details/phone-view/student-resources-pane/student-resources-pane.tsx
@@ -0,0 +1,56 @@
+import React from 'react';
+import {
+    studentResourceBoxPermissions,
+    type ResourceData
+} from '../../common/resource-box/resource-box-utils';
+import ResourceBoxes, {type ResourceModel} from '../../common/resource-box/resource-boxes';
+import useUserContext, {type UserStatus} from '~/contexts/user';
+import type {ContextValues} from '../../context';
+import './student-resources-pane.scss';
+
+function resourceBoxModel(
+    resourceData: ResourceData,
+    userStatus: UserStatus
+): ResourceModel {
+    return Object.assign(
+        {
+            heading: resourceData.resourceHeading,
+            description: '',
+            comingSoon: Boolean(resourceData.comingSoonText),
+            comingSoonText: '',
+            printLink: resourceData.printLink
+        },
+        studentResourceBoxPermissions(
+            resourceData,
+            userStatus
+        )
+    ) as ResourceModel;
+}
+
+function StudentResourcesPane({
+    model,
+    userStatus
+}: {
+    model: ContextValues;
+    userStatus: UserStatus;
+}) {
+    return (
+        <div className="student-resources-pane">
+            <ResourceBoxes
+                models={model.bookStudentResources.map((res) =>
+                    resourceBoxModel(res, userStatus)
+                )}
+            />
+        </div>
+    );
+}
+
+export default function LoadUserStatusThenStudentPane({
+    model
+}: {
+    model: ContextValues;
+}) {
+    const {userStatus} = useUserContext();
+
+    return <StudentResourcesPane model={model} userStatus={userStatus} />;
+}
diff --git a/test/src/data/details-college-algebra.js b/test/src/data/details-college-algebra.js
index 8bfa44107..dbfbb8aa3 100644
--- a/test/src/data/details-college-algebra.js
+++ b/test/src/data/details-college-algebra.js
@@ -1313,7 +1313,19 @@ const details = {
     },
     "partner_list_label": "Technology Partners",
     "partner_page_link_text": "See all partners",
-    "videos": [],
+    "videos": [
+        {
+            "type": "video",
+            "value": [
+                {
+                    "title": "Interface",
+                    "description": "<p data-block-key=\"ftocg\">As the world’s largest producer of carpet tile and other flooring materials, Interface is everywhere. Their modular products foster a great degree of creativity and innovation in interior design and function, and allow their clients to have a positive impact on the world around them. Interface’s sustainability principles and initiatives -- Mission Zero and Climate Take Back -- have led to powerful community engagement and revolutionary technological enhancements.<br/><br/>This video is part of the OpenStax Business series, which showcases entrepreneurs and businesses with a focus on purpose, principles, and best business practices. It can be used with any OpenStax business textbook.</p>",
+                    "embed": "<script src=\"https://fast.wistia.com/embed/medias/hyb2pj6nrg.jsonp\" async></script><script src=\"https://fast.wistia.com/assets/external/E-v1.js\" async></script><div class=\"wistia_embed wistia_async_hyb2pj6nrg\" style=\"height:360px;position:relative;width:640px\"><div class=\"wistia_swatch\" style=\"height:100%;left:0;opacity:0;overflow:hidden;position:absolute;top:0;transition:opacity 200ms;width:100%;\"><img src=\"https://fast.wistia.com/embed/medias/hyb2pj6nrg/swatch\" style=\"filter:blur(5px);height:100%;object-fit:contain;width:100%;\" alt=\"\" aria-hidden=\"true\" onload=\"this.parentNode.style.opacity=1;\" /></div></div>"
+                }
+            ],
+            "id": "28d0ee63-04e0-4128-ba2b-9239b7da5e4e"
+        }
+    ],
     "promote_image": null,
     "last_updated_pdf": null,
     "featured_resources_header": null
diff --git a/test/src/pages/details/details-tab.test.tsx b/test/src/pages/details/details-tab.test.tsx
new file mode 100644
index 000000000..54ab6a0f5
--- /dev/null
+++ b/test/src/pages/details/details-tab.test.tsx
@@ -0,0 +1,36 @@
+// details-tab is dynamically loaded, so needs to be tested separately
+import React from 'react';
+import {render, screen} from '@testing-library/preact';
+import DetailsTab from '~/pages/details/desktop-view/details-tab/details-tab';
+import {LanguageContextProvider} from '~/contexts/language';
+
+type Props = Parameters<typeof DetailsTab>[0];
+
+jest.mock('~/pages/details/common/get-this-title');
+
+const model = {
+    id: 2,
+    title: 'model-title',
+    description: 'model-description',
+    adoptions: 69,
+    slug: 'whatever'
+} as Props['model'];
+
+function Component(props: Props) {
+    return (
+        <LanguageContextProvider>
+            <DetailsTab {...props} />
+        </LanguageContextProvider>
+    );
+}
+
+describe('details-tab', () => {
+    it('renders (English)', () => {
+        render(<Component model={model} polish={false} />);
+        screen.getByRole('heading', {level: 3, name: 'Summary'});
+    });
+    it('renders (Polish)', () => {
+        render(<Component model={model} polish={true} />);
+        screen.getByRole('heading', {level: 3, name: 'Przejdź do książki'});
+    });
+});
diff --git a/test/src/pages/details/details.test.tsx b/test/src/pages/details/details.test.tsx
index 88b79b341..1267f4a81 100644
--- a/test/src/pages/details/details.test.tsx
+++ b/test/src/pages/details/details.test.tsx
@@ -8,6 +8,7 @@ import ShellContextProvider from '~/../../test/helpers/shell-context';
 import * as DH from '~/helpers/use-document-head';
 import $ from '~/helpers/$';
 import * as WC from '~/contexts/window';
+import * as RBU from '~/pages/details/common/resource-box/resource-box-utils';
 
 // Tamp down meaningless errors
 jest.mock('~/models/rex-release', () =>
@@ -23,14 +24,15 @@ jest.mock('~/models/table-of-contents-html', () =>
     jest.fn().mockReturnValue(Promise.resolve({}))
 );
 
+jest.spyOn(window, 'scrollBy').mockImplementation(() => null);
 jest.spyOn(DH, 'setPageTitleAndDescriptionFromBookData').mockReturnValue();
 const spyIsPolish = jest.spyOn($, 'isPolish');
 const spyWindowContext = jest.spyOn(WC, 'default');
 
-function Component() {
+function Component({path='/details/books/college-algebra'}) {
     return (
         <ShellContextProvider>
-            <MemoryRouter initialEntries={['/details/books/college-algebra']}>
+            <MemoryRouter initialEntries={[path]}>
                 <Routes>
                     <Route
                         path="/details/books/:title"
@@ -58,6 +60,9 @@ function lengthOfView(phoneOrBigger: string) {
 }
 
 describe('Details page', () => {
+    const user = userEvent.setup();
+    const saveWarn = console.warn;
+
     beforeEach(() => {
         document.head.innerHTML = '';
         const el = document.createElement('meta');
@@ -65,20 +70,64 @@ describe('Details page', () => {
         el.setAttribute('name', 'description');
         document.head.appendChild(el);
     });
+    console.debug = jest.fn();
 
-    it('renders book', async () => {
+    it('renders book with video data', async () => {
          // eslint-disable-next-line @typescript-eslint/no-explicit-any
         spyWindowContext.mockReturnValue({innerWidth: 1280} as any);
         render(<Component />);
         await finishedRendering();
         expect(lengthOfView('phone')).toBeUndefined();
-        expect(lengthOfView('bigger')).toBe(98);
+        expect(lengthOfView('bigger')).toBe(794);
 
         const jsonLdScript = document.head.querySelector('script');
 
         expect(jsonLdScript?.textContent).toEqual(
             expect.stringContaining('mainEntity')
         );
+        const tabs = screen.getAllByRole('tab');
+
+        expect(tabs).toHaveLength(4);
+        // These do not seem to update the tab state as expected, though they
+        // do exercise some code.
+        await user.click(tabs[1]);
+    });
+    it('renders with Student tab selected', async () => {
+        const mockLocation = jest.spyOn(window, 'location', 'get').mockReturnValue({
+            ...window.location,
+            search: '?Student%20resources'
+        });
+
+        render(<Component path='/details/books/biology-2e' />);
+        const tabs = await screen.findAllByRole('tab');
+
+        expect(tabs[2].getAttribute('aria-selected')).toBe('true');
+        await user.click(tabs[1]);
+        mockLocation.mockRestore();
+    });
+    it('renders with Instructor tab selected', async () => {
+        jest.spyOn(RBU, 'useResources').mockReturnValue({
+            bookVideoFacultyResources: [],
+            bookFacultyResources: []
+        });
+        const mockLocation = jest.spyOn(window, 'location', 'get').mockReturnValue({
+            ...window.location,
+            search: '?Instructor%20resources'
+        });
+
+        render(<Component />);
+        await finishedRendering();
+        const tabs = screen.getAllByRole('tab');
+
+        expect(tabs[1].getAttribute('aria-selected')).toBe('true');
+        await user.click(tabs[2]);
+
+        screen.getByRole('heading', {name: 'Technology Partners'});
+        console.warn = jest.fn();
+        await user.click(screen.getByRole('link', {name: 'MagicBox E-Reader'}));
+        expect(console.warn).toHaveBeenCalled();
+        console.warn = saveWarn;
+        mockLocation.mockRestore();
     });
     it('renders Polish book', async () => {
         spyIsPolish.mockReturnValue(true);
@@ -104,11 +153,46 @@ describe('Details page', () => {
         );
     });
     it('renders only phone-view at phone width', async () => {
+        jest.spyOn(RBU, 'useResources').mockReturnValue({
+            bookVideoFacultyResources: [],
+            bookFacultyResources: [
+                {
+                    featured: true,
+                    linkText: 'Link text',
+                    comingSoonText: '',
+                    printLink: 'print-link',
+                    videoReferenceNumber: 13
+                },
+                {
+                    featured: false,
+                    linkText: 'Link text2',
+                    comingSoonText: '',
+                    printLink: 'print-link2',
+                    videoReferenceNumber: null,
+                    resource: {
+                        id: 1,
+                        heading: 'resource-heading',
+                        resourceCategory: 'any',
+                        resourceUnlocked: true,
+                        description: 'resource-description'
+                    }
+                }
+            ]
+        });
         spyWindowContext.mockReturnValue({innerWidth: 480} as any); // eslint-disable-line
         render(<Component />);
         await finishedRendering();
         expect(lengthOfView('phone')).toBe(346);
         expect(lengthOfView('bigger')).toBeUndefined();
+
+        jest.spyOn(Element.prototype, 'getBoundingClientRect').mockReturnValue({
+            y: 100
+        } as any); // eslint-disable-line
+        await user.click(screen.getByRole('button', {name: 'Instructor resources updated'}));
+        console.warn = jest.fn();
+        await user.click(await screen.findByRole('link', {name: 'OpenStax Partners'}));
+        expect(console.warn).toHaveBeenCalled();
+        console.warn = saveWarn;
     });
     it('toggles authors at phone width', async () => {
         spyWindowContext.mockReturnValue({innerWidth: 480} as any); // eslint-disable-line
@@ -116,7 +200,6 @@ describe('Details page', () => {
         await finishedRendering();
         const authorToggle = await screen.findByText('Authors');
         const detailsEl = authorToggle.closest('details');
-        const user = userEvent.setup();
 
         await user.click(authorToggle);
         expect(detailsEl?.open).toBe(true);
diff --git a/test/src/pages/details/left-content.test.tsx b/test/src/pages/details/left-content.test.tsx
index 57865e92b..383e6e89a 100644
--- a/test/src/pages/details/left-content.test.tsx
+++ b/test/src/pages/details/left-content.test.tsx
@@ -19,8 +19,11 @@ describe('left-content', () => {
         comingSoon: false,
         iconType: 'lock',
         heading: 'heading',
-        double: false
-    } as unknown as ModelType; // incomplete, but it's enough for testing
+        double: false,
+        bookModel: {
+            id: 1
+        }
+    } as ModelType; // incomplete, but it's enough for testing
     const link = {url: '#good-url', text: 'button-label'};
     // Setup option prevents await click from hanging when using faketimers
     const user = userEvent.setup({advanceTimers: jest.advanceTimersByTime});

From f2f6d4362fd04b20a61054136209932d1d29879a Mon Sep 17 00:00:00 2001
From: Roy Johnson <roy.e.johnson@rice.edu>
Date: Wed, 8 Oct 2025 19:00:52 -0500
Subject: [PATCH 2/4] Core-1277: Add 3 CTA buttons to Assignable landing page

[CORE-1277]
---
 src/app/pages/assignable/assignable.tsx       | 12 ++-
 .../assignable/sections/banner/banner.scss    | 44 +++++++++++
 .../assignable/sections/banner/banner.tsx     | 76 +++++++++++++------
 3 files changed, 104 insertions(+), 28 deletions(-)

diff --git a/src/app/pages/assignable/assignable.tsx b/src/app/pages/assignable/assignable.tsx
index dad7438b3..a72296545 100644
--- a/src/app/pages/assignable/assignable.tsx
+++ b/src/app/pages/assignable/assignable.tsx
@@ -6,7 +6,6 @@ import {
     About,
     Courses,
     FAQ,
-    OverlappingQuote,
     CTA
 } from './lazy-imports';
 import './assignable.scss';
@@ -55,6 +54,14 @@ type AssignablePageData = {
     addAssignableCtaDescription: string;
     addAssignableCtaLink: string;
     addAssignableCtaButtonText: string;
+    instructorInterestCtaHeader: string;
+    instructorInterestCtaDescription: string;
+    instructorInterestCtaLink: string;
+    instructorInterestCtaButtonText: string;
+    instructorHelpCtaHeader: string;
+    instructorHelpCtaDescription: string;
+    instructorHelpCtaLink: string;
+    instructorHelpCtaButtonText: string;
     assignableCtaText: string;
     assignableCtaLink: string;
     assignableCtaButtonText: string;
@@ -76,9 +83,6 @@ function AssignablePage({data}: {data: AssignablePageData}) {
             <LazyLoad>
                 <FAQ data={data} />
             </LazyLoad>
-            <LazyLoad>
-                <OverlappingQuote data={data} />
-            </LazyLoad>
             <LazyLoad>
                 <CTA data={data} />
             </LazyLoad>
diff --git a/src/app/pages/assignable/sections/banner/banner.scss b/src/app/pages/assignable/sections/banner/banner.scss
index 8812fac50..f0ea29412 100644
--- a/src/app/pages/assignable/sections/banner/banner.scss
+++ b/src/app/pages/assignable/sections/banner/banner.scss
@@ -15,8 +15,18 @@
         padding-bottom: 6rem;
     }
 
+    .content-block {
+        justify-items: center;
+        text-align: center;
+
+        h1 {
+            @include scale-set-font(h1, hero-h1);
+        }
+    }
+
     .title-image {
         max-width: 100%;
+        max-height: 12rem;
     }
 
     .background-image {
@@ -33,10 +43,44 @@
     }
 
     .text-content {
+        @include body-font(2.2rem);
         padding: 0;
+
+        @include width-up-to($tablet-max) {
+            @include set-font(body-large);
+        }
     }
 
     .btn {
         justify-self: left;
     }
+
+    .button-row {
+        display: flex;
+        flex-direction: row;
+        gap: $normal-margin;
+
+        @include width-up-to($phone-max) {
+            flex-direction: column;
+        }
+
+        .button-shaped {
+            background-color: ui-color(white);
+            border: thin solid os-color(orange);
+            border-radius: 1.2rem;
+            color: text-color(normal);
+            justify-items: center;
+            padding: 1rem 2rem;
+
+            p {
+                @include body-font(2rem);
+                margin: 0;
+            }
+
+            a {
+                @include set-font(body-regular);
+                line-height: 1;
+            }
+        }
+    }
 }
diff --git a/src/app/pages/assignable/sections/banner/banner.tsx b/src/app/pages/assignable/sections/banner/banner.tsx
index 3d1407219..9d46e8d3e 100644
--- a/src/app/pages/assignable/sections/banner/banner.tsx
+++ b/src/app/pages/assignable/sections/banner/banner.tsx
@@ -5,30 +5,32 @@ import useOptimizedImage, {
 } from '~/helpers/use-optimized-image';
 import './banner.scss';
 
-type BannerProps = {
-    data: {
-        headingTitleImageUrl: string;
-        subheading: string;
-        headingDescription: string;
-        headingImage: {
-            meta: {
-                downloadUrl: string;
-            };
+type BannerData = {
+    headingTitleImageUrl: string;
+    subheading: string;
+    headingDescription: string;
+    headingImage: {
+        meta: {
+            downloadUrl: string;
         };
     };
+    addAssignableCtaHeader: string;
+    addAssignableCtaDescription: string;
+    addAssignableCtaLink: string;
+    addAssignableCtaButtonText: string;
+    instructorInterestCtaHeader: string;
+    instructorInterestCtaDescription: string;
+    instructorInterestCtaLink: string;
+    instructorInterestCtaButtonText: string;
+    instructorHelpCtaHeader: string;
+    instructorHelpCtaDescription: string;
+    instructorHelpCtaLink: string;
+    instructorHelpCtaButtonText: string;
 };
 
-export default function Banner({
-    data: {
-        headingTitleImageUrl,
-        subheading,
-        headingDescription: description,
-        headingImage: {
-            meta: {downloadUrl: image}
-        }
-    }
-}: BannerProps) {
+export default function Banner({data}: {data: BannerData}) {
     const maxDim = maxDimIfNarrowerThan(1920);
+    const image = data.headingImage.meta.downloadUrl;
     const optimizedImage = useOptimizedImage(image, maxDim);
 
     return (
@@ -40,16 +42,42 @@ export default function Banner({
             <div className="content-block">
                 <div>
                     <img
-                        src={headingTitleImageUrl}
+                        src={data.headingTitleImageUrl}
                         className="title-image"
                         alt="Assignable by OpenStax"
                     />
-                    <div>
-                        <i>{subheading}</i>
-                    </div>
+                    <h1>{data.subheading}</h1>
+                </div>
+                <RawHTML className="text-content" html={data.headingDescription} />
+                <div className="button-row">
+                    <CTAButton
+                        header={data.addAssignableCtaHeader}
+                        href={data.addAssignableCtaLink}
+                        linkText={data.addAssignableCtaButtonText}
+                    />
+                    <CTAButton
+                        header={data.instructorInterestCtaHeader}
+                        href={data.instructorInterestCtaLink}
+                        linkText={data.instructorInterestCtaButtonText}
+                    />
+                    <CTAButton
+                        header={data.instructorHelpCtaHeader}
+                        href={data.instructorHelpCtaLink}
+                        linkText={data.instructorHelpCtaButtonText}
+                    />
                 </div>
-                <RawHTML className="text-content" html={description} />
             </div>
         </section>
     );
 }
+
+function CTAButton({header, href, linkText}: {
+    header: string;
+    href: string;
+    linkText: string;
+}) {
+    return <div className="button-shaped">
+        <p>{header}</p>
+        <a href={href}>{linkText}</a>
+    </div>;
+}

From eb522d73e313a50363dbffdb1b264eba41c33eef Mon Sep 17 00:00:00 2001
From: Roy Johnson <roy.e.johnson@rice.edu>
Date: Thu, 9 Oct 2025 09:23:23 -0500
Subject: [PATCH 3/4] Adjust layout within button-shaped

---
 src/app/pages/assignable/sections/banner/banner.scss | 6 +++++-
 1 file changed, 5 insertions(+), 1 deletion(-)

diff --git a/src/app/pages/assignable/sections/banner/banner.scss b/src/app/pages/assignable/sections/banner/banner.scss
index f0ea29412..10cd67623 100644
--- a/src/app/pages/assignable/sections/banner/banner.scss
+++ b/src/app/pages/assignable/sections/banner/banner.scss
@@ -69,7 +69,11 @@
             border: thin solid os-color(orange);
             border-radius: 1.2rem;
             color: text-color(normal);
+            display: flex;
+            flex-direction: column;
+            gap: 1rem;
             justify-items: center;
+            justify-content: space-between;
             padding: 1rem 2rem;
 
             p {
@@ -79,7 +83,7 @@
 
             a {
                 @include set-font(body-regular);
-                line-height: 1;
+                line-height: normal;
             }
         }
     }

From e22610cef0a06c9a2e627a5184463a485f1362b0 Mon Sep 17 00:00:00 2001
From: Roy Johnson <roy.e.johnson@rice.edu>
Date: Mon, 20 Oct 2025 18:09:33 -0500
Subject: [PATCH 4/4] Add ctaSectionFooter to banner

---
 src/app/components/jsx-helpers/raw-html.tsx   |  2 +-
 src/app/pages/assignable/assignable.tsx       | 25 ++-----------------
 .../assignable/sections/banner/banner.tsx     |  4 ++-
 3 files changed, 6 insertions(+), 25 deletions(-)

diff --git a/src/app/components/jsx-helpers/raw-html.tsx b/src/app/components/jsx-helpers/raw-html.tsx
index 585c67d14..26a767c9b 100644
--- a/src/app/components/jsx-helpers/raw-html.tsx
+++ b/src/app/components/jsx-helpers/raw-html.tsx
@@ -42,7 +42,7 @@ type RawHTMLArgs = {
 
 export default function RawHTML({
     Tag = 'div',
-    html,
+    html = '',
     embed = false,
     ...otherProps
 }: RawHTMLArgs) {
diff --git a/src/app/pages/assignable/assignable.tsx b/src/app/pages/assignable/assignable.tsx
index a72296545..5d61f7ea9 100644
--- a/src/app/pages/assignable/assignable.tsx
+++ b/src/app/pages/assignable/assignable.tsx
@@ -8,14 +8,9 @@ import {
     FAQ,
     CTA
 } from './lazy-imports';
+import type {BannerData} from './sections/banner/banner';
 import './assignable.scss';
 
-type ImageMeta = {
-    meta: {
-        downloadUrl: string;
-    };
-};
-
 type CarouselImage = {
     image: {
         file: string;
@@ -36,11 +31,7 @@ type FAQItem = {
     answer: string;
 };
 
-type AssignablePageData = {
-    headingTitleImageUrl: string;
-    subheading: string;
-    headingDescription: string;
-    headingImage: ImageMeta;
+type AssignablePageData = BannerData & {
     section2Heading: string;
     section2Description: string;
     imageCarousel: [CarouselImage[]];
@@ -50,18 +41,6 @@ type AssignablePageData = {
     comingSoonBooks: BookData[];
     faqHeader: string;
     faqs: FAQItem[];
-    addAssignableCtaHeader: string;
-    addAssignableCtaDescription: string;
-    addAssignableCtaLink: string;
-    addAssignableCtaButtonText: string;
-    instructorInterestCtaHeader: string;
-    instructorInterestCtaDescription: string;
-    instructorInterestCtaLink: string;
-    instructorInterestCtaButtonText: string;
-    instructorHelpCtaHeader: string;
-    instructorHelpCtaDescription: string;
-    instructorHelpCtaLink: string;
-    instructorHelpCtaButtonText: string;
     assignableCtaText: string;
     assignableCtaLink: string;
     assignableCtaButtonText: string;
diff --git a/src/app/pages/assignable/sections/banner/banner.tsx b/src/app/pages/assignable/sections/banner/banner.tsx
index 9d46e8d3e..aa3d1ce31 100644
--- a/src/app/pages/assignable/sections/banner/banner.tsx
+++ b/src/app/pages/assignable/sections/banner/banner.tsx
@@ -5,7 +5,7 @@ import useOptimizedImage, {
 } from '~/helpers/use-optimized-image';
 import './banner.scss';
 
-type BannerData = {
+export type BannerData = {
     headingTitleImageUrl: string;
     subheading: string;
     headingDescription: string;
@@ -26,6 +26,7 @@ type BannerData = {
     instructorHelpCtaDescription: string;
     instructorHelpCtaLink: string;
     instructorHelpCtaButtonText: string;
+    ctaSectionFooter: string;
 };
 
 export default function Banner({data}: {data: BannerData}) {
@@ -66,6 +67,7 @@ export default function Banner({data}: {data: BannerData}) {
                         linkText={data.instructorHelpCtaButtonText}
                     />
                 </div>
+                <RawHTML className="text-content" html={data.ctaSectionFooter} />
             </div>
         </section>
     );