CORE-1287: Port remaining book details page modules from JS to TS

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>

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"

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]
     );

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;
 }

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();

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]

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;
 };
 

src/app/pages/details/context.tsx → 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;