diff --git a/.github/workflows/build.yml b/.github/workflows/build.yml
index 9fd13bfd4..4ba573269 100644
--- a/.github/workflows/build.yml
+++ b/.github/workflows/build.yml
@@ -8,9 +8,10 @@ jobs:
         uses: actions/checkout@v2
       -
         name: "Setup NVM"
-        uses: dcodeIO/setup-node-nvm@master
+        uses: actions/setup-node@v3
         with:
-          node-version: v16.20.2
+          node-version-file: .nvmrc
+          cache: yarn
       -
         name: "Setup environment"
         run: ./script/setup
diff --git a/src/app/pages/details/common/featured-resources/featured-resources.js b/src/app/pages/details/common/featured-resources/featured-resources.js
deleted file mode 100644
index 9a99d055a..000000000
--- a/src/app/pages/details/common/featured-resources/featured-resources.js
+++ /dev/null
@@ -1,51 +0,0 @@
-import React from 'react';
-import ResourceBoxes from '../resource-box/resource-boxes';
-import {FormattedMessage} from 'react-intl';
-import './featured-resources.scss';
-
-function FeaturedResources({headline, resources, ...props}) {
-    const modResources = resources.map((res) => {
-        const storageKey = `featured-resource-${res.heading}`;
-        const seenTimes = 1 + Number(window.localStorage[storageKey] || 0);
-        const model = Object.assign({
-            isNew: seenTimes <= 3,
-            onClick: () => {
-                window.localStorage[storageKey] = 5;
-                model.isNew = false;
-            }
-        }, res);
-
-        window.localStorage[storageKey] = seenTimes;
-
-        return model;
-    });
-
-    return (
-        <div className="card">
-            <div className="headline">
-                {headline}
-            </div>
-            <div
-                data-analytics-content-list={props['data-analytics-content-list']}
-                className="resources"
-            >
-                <ResourceBoxes models={modResources} />
-            </div>
-        </div>
-    );
-}
-
-export default function FeaturedResourcesSection({header, models, ...props}) {
-    return (
-        <div>
-            <div className="featured-resources">
-                <FeaturedResources headline={header} resources={models} {...props} />
-            </div>
-            <div className="divider">
-                <div className="line"></div>
-                <FormattedMessage id="resources.additional" defaultMessage="see additional resources below" />
-                <div className="line"></div>
-            </div>
-        </div>
-    );
-}
diff --git a/src/app/pages/details/common/featured-resources/featured-resources.tsx b/src/app/pages/details/common/featured-resources/featured-resources.tsx
new file mode 100644
index 000000000..e4d2200ad
--- /dev/null
+++ b/src/app/pages/details/common/featured-resources/featured-resources.tsx
@@ -0,0 +1,64 @@
+import React from 'react';
+import ResourceBoxes, {ResourceModel} from '../resource-box/resource-boxes';
+import {FormattedMessage} from 'react-intl';
+import './featured-resources.scss';
+
+type ResourcesProps = {
+    header: string;
+    models: ResourceModel[];
+    'data-analytics-content-list': string;
+};
+
+function FeaturedResources({header, models, ...props}: ResourcesProps) {
+    const modResources = models.map((res) => {
+        const storageKey = `featured-resource-${res.heading}`;
+        const seenTimes = 1 + Number(window.localStorage[storageKey] || 0);
+        const model = Object.assign(
+            {
+                isNew: seenTimes <= 3
+                // There was an onClick defined here that nothing used
+            },
+            res
+        );
+
+        window.localStorage[storageKey] = seenTimes;
+
+        return model;
+    });
+
+    return (
+        <div className="card">
+            <div className="headline">{header}</div>
+            <div
+                data-analytics-content-list={
+                    props['data-analytics-content-list']
+                }
+                className="resources"
+            >
+                <ResourceBoxes models={modResources} />
+            </div>
+        </div>
+    );
+}
+
+export default function FeaturedResourcesSection({
+    header,
+    models,
+    ...props
+}: ResourcesProps) {
+    return (
+        <div>
+            <div className="featured-resources">
+                <FeaturedResources header={header} models={models} {...props} />
+            </div>
+            <div className="divider">
+                <div className="line"></div>
+                <FormattedMessage
+                    id="resources.additional"
+                    defaultMessage="see additional resources below"
+                />
+                <div className="line"></div>
+            </div>
+        </div>
+    );
+}
diff --git a/src/app/pages/details/common/get-this-title-files/give-before-pdf/give-before-other.tsx b/src/app/pages/details/common/get-this-title-files/give-before-pdf/give-before-other.tsx
index 490ae5b88..5a4ab56e9 100644
--- a/src/app/pages/details/common/get-this-title-files/give-before-pdf/give-before-other.tsx
+++ b/src/app/pages/details/common/get-this-title-files/give-before-pdf/give-before-other.tsx
@@ -17,7 +17,7 @@ export default function GiveBeforeOther({
     close: () => void;
     data: DonationPopupData;
     track?: string;
-    variant?: string;
+    variant: string;
     onDownload?: (event: React.MouseEvent) => void;
     id?: string;
 }) {
diff --git a/src/app/pages/details/common/get-this-title-files/give-before-pdf/give-before-pdf.tsx b/src/app/pages/details/common/get-this-title-files/give-before-pdf/give-before-pdf.tsx
index e55d066d6..f4e6f4675 100644
--- a/src/app/pages/details/common/get-this-title-files/give-before-pdf/give-before-pdf.tsx
+++ b/src/app/pages/details/common/get-this-title-files/give-before-pdf/give-before-pdf.tsx
@@ -62,7 +62,7 @@ function GiveBeforePdfAfterConditionals({
 }: {
     onThankYouClick: ReturnType<typeof useOnThankYouClick>['onThankYouClick'];
     link: string;
-    track: string | undefined;
+    track?: string;
     data: DonationPopupData;
     close: () => void;
     onDownload?: (event: React.MouseEvent) => void;
diff --git a/src/app/pages/details/common/get-this-title-files/give-before-pdf/thank-you-form.js b/src/app/pages/details/common/get-this-title-files/give-before-pdf/thank-you-form.tsx
similarity index 54%
rename from src/app/pages/details/common/get-this-title-files/give-before-pdf/thank-you-form.js
rename to src/app/pages/details/common/get-this-title-files/give-before-pdf/thank-you-form.tsx
index 9aef197a9..a7157dbc6 100644
--- a/src/app/pages/details/common/get-this-title-files/give-before-pdf/thank-you-form.js
+++ b/src/app/pages/details/common/get-this-title-files/give-before-pdf/thank-you-form.tsx
@@ -2,54 +2,67 @@ import React from 'react';
 import useUserContext from '~/contexts/user';
 import trackLink from '../../track-link';
 import './thank-you-form.scss';
+import {TrackedMouseEvent} from '~/components/shell/router-helpers/use-link-handler';
 
 function FormWithAfterSubmit({
     afterSubmit,
     responseId = 'form-response',
     children,
-    onSubmit: firstOnSubmit,
     ...formProps
-}) {
-    const iframeRef = React.useRef();
+}: React.PropsWithChildren<
+    {
+        afterSubmit: () => void;
+        responseId?: string;
+    } & React.FormHTMLAttributes<HTMLFormElement>
+>) {
+    const iframeRef = React.useRef<HTMLIFrameElement>(null);
     const onSubmit = React.useCallback(
-        (event) => {
-            if (firstOnSubmit) {
-                firstOnSubmit(event);
-                if (event.defaultPrevented) {
-                    return;
-                }
-            }
+        () => {
             const iframe = iframeRef.current;
             const runAfterSubmit = () => {
                 afterSubmit();
-                iframe.removeEventListener('load', runAfterSubmit);
+                iframe?.removeEventListener('load', runAfterSubmit);
             };
 
-            iframe.addEventListener('load', runAfterSubmit);
+            iframe?.addEventListener('load', runAfterSubmit);
         },
-        [firstOnSubmit, afterSubmit]
+        [afterSubmit]
     );
 
     return (
         <React.Fragment>
             <iframe
-                name={responseId}
+                title={responseId}
                 id={responseId}
-                className='hidden'
-                src=''
-                width='0'
-                height='0'
-                tabIndex='-1'
+                className="hidden"
+                src=""
+                width="0"
+                height="0"
+                tabIndex={-1}
                 ref={iframeRef}
             />
-            <form target={responseId} {...formProps} onSubmit={onSubmit}>
+            <form target={responseId} {...formProps} onSubmit={onSubmit} name="thank-you form">
                 {children}
             </form>
         </React.Fragment>
     );
 }
 
-export default function ThankYou({link, close, source, itemType='PDF', track, id}) {
+export default function ThankYou({
+    link,
+    close,
+    source,
+    itemType = 'PDF',
+    track,
+    id
+}: {
+    link: string;
+    close: () => void;
+    source: string;
+    itemType?: string;
+    track?: string;
+    id?: string;
+}) {
     const {userModel} = useUserContext();
     const first = userModel?.first_name;
     const last = userModel?.last_name;
@@ -59,7 +72,7 @@ export default function ThankYou({link, close, source, itemType='PDF', track, id
         close();
     }, [link, close]);
     const trackDownload = React.useCallback(
-        (event) => {
+        (event: TrackedMouseEvent) => {
             trackLink(event, id);
         },
         [id]
@@ -68,52 +81,52 @@ export default function ThankYou({link, close, source, itemType='PDF', track, id
     return (
         <FormWithAfterSubmit
             action={`${process.env.API_ORIGIN}/apps/cms/api/donations/thankyounote/`}
-            method='post'
-            className='thank-you-form'
+            method="post"
+            className="thank-you-form"
             afterSubmit={afterSubmit}
         >
-            <input type='hidden' name='source' value={source} />
+            <input type="hidden" name="source" value={source} />
             <h1>Send us a thank you note</h1>
-            <div className='instructions'>
-                <span className='asterisk' />
+            <div className="instructions">
+                <span className="asterisk" />
                 indicates required field
             </div>
             <label>
-                Your message <span className='asterisk' />
+                Your message <span className="asterisk" />
                 <textarea
-                    name='thank_you_note'
-                    rows='4'
-                    placeholder='Start typing'
+                    name="thank_you_note"
+                    rows={4}
+                    placeholder="Start typing"
                     required
                 />
             </label>
-            <div className='names'>
+            <div className="names">
                 <label>
-                    First name <span className='asterisk' />
+                    First name <span className="asterisk" />
                     <input
-                        name='first_name'
-                        type='text'
-                        placeholder='Your first name'
+                        name="first_name"
+                        type="text"
+                        placeholder="Your first name"
                         required
                         defaultValue={first}
                     />
                 </label>
                 <label>
-                    Last name <span className='asterisk' />
+                    Last name <span className="asterisk" />
                     <input
-                        name='last_name'
-                        type='text'
-                        placeholder='Your last name'
+                        name="last_name"
+                        type="text"
+                        placeholder="Your last name"
                         required
                         defaultValue={last}
                     />
                 </label>
                 <label>
-                    Institution name <span className='asterisk' />
+                    Institution name <span className="asterisk" />
                     <input
-                        name='institution'
-                        type='text'
-                        placeholder='Your school'
+                        name="institution"
+                        type="text"
+                        placeholder="Your school"
                         required
                         defaultValue={school}
                     />
@@ -121,28 +134,30 @@ export default function ThankYou({link, close, source, itemType='PDF', track, id
                 <label>
                     Email address
                     <input
-                        name='contact_email_address'
-                        type='email'
-                        placeholder='Your email (optional)'
+                        name="contact_email_address"
+                        type="email"
+                        placeholder="Your email (optional)"
                     />
                 </label>
             </div>
-            <div className='consent-checkbox'>
+            <div className="consent-checkbox">
                 <label>
-                    Consent <span className='asterisk' />
+                    Consent <span className="asterisk" />
                 </label>
-                <label className='cb-group'>
+                <label className="cb-group">
                     <input
-                        type='checkbox'
-                        name='consent_to_share_or_contact'
-                        value='True'
+                        type="checkbox"
+                        name="consent_to_share_or_contact"
+                        value="True"
                     />
                     By clicking here I understand that OpenStax may include my
                     story in publications and distribution in printed,
                     electronic, and digital media.
                 </label>
             </div>
-            <button className='primary'>Submit note and go to {itemType}</button>
+            <button className="primary">
+                Submit note and go to {itemType}
+            </button>
             <a
                 className="never-mind"
                 href={link}
@@ -158,7 +173,7 @@ export default function ThankYou({link, close, source, itemType='PDF', track, id
 
 export function useOnThankYouClick() {
     const [showThankYou, setShowThankYou] = React.useState(false);
-    const onThankYouClick = React.useCallback((event) => {
+    const onThankYouClick = React.useCallback((event: React.MouseEvent) => {
         event.preventDefault();
         setShowThankYou(true);
     }, []);
diff --git a/src/app/pages/details/common/get-this-title-files/give-before-pdf/use-give-dialog.tsx b/src/app/pages/details/common/get-this-title-files/give-before-pdf/use-give-dialog.tsx
index 4c13871cb..0bc106258 100644
--- a/src/app/pages/details/common/get-this-title-files/give-before-pdf/use-give-dialog.tsx
+++ b/src/app/pages/details/common/get-this-title-files/give-before-pdf/use-give-dialog.tsx
@@ -34,7 +34,8 @@ export default function useGiveDialog() {
             warning?: string;
             id?: string;
         }) => {
-            const Variant = lookupVariant(warning, variant, id) as typeof GiveBeforeOther;
+            const variantParams = {link, track, close, data, onDownload, variant, warning, id};
+            const [Variant, typedVariantParams] = lookupVariant(warning, variantParams);
             const aria =
                 Variant === GiveBeforePdf
                     ? {labelledby: 'dialog-heading'}
@@ -42,9 +43,7 @@ export default function useGiveDialog() {
 
             return (
                 <Dialog aria={aria}>
-                    <Variant
-                        {...{link, track, close, data, onDownload, variant, warning, id}}
-                    />
+                    <Variant {...typedVariantParams} />
                 </Dialog>
             );
         },
@@ -73,12 +72,21 @@ export function useOpenGiveDialog() {
     return {GiveDialog, openGiveDialog};
 }
 
-function lookupVariant(warning: string, variant?: VariantValue, id?: string) {
+// This was a little bit clever, so typing became a problem
+function lookupVariant(warning: string, variantParams: {
+    id?: string;
+    variant?: string;
+}): [
+    Variant: (p: any) => React.JSX.Element, // eslint-disable-line @typescript-eslint/no-explicit-any
+    p: object
+] {
+    const {id, variant} = variantParams;
+
     if (warning && id && !checkWarningCookie(id)) {
-        return ContentWarning;
+        return [ContentWarning, variantParams as Parameters<typeof ContentWarning>];
     }
     if (variant !== undefined) {
-        return GiveBeforeOther;
+        return [GiveBeforeOther, variantParams as Parameters<typeof GiveBeforeOther>];
     }
-    return GiveBeforePdf;
+    return [GiveBeforePdf, variantParams as Parameters<typeof GiveBeforePdf>];
 }
diff --git a/src/app/pages/details/common/get-this-title-files/options.js b/src/app/pages/details/common/get-this-title-files/options.tsx
similarity index 67%
rename from src/app/pages/details/common/get-this-title-files/options.js
rename to src/app/pages/details/common/get-this-title-files/options.tsx
index 1739c68ff..d3f5cfbd7 100644
--- a/src/app/pages/details/common/get-this-title-files/options.js
+++ b/src/app/pages/details/common/get-this-title-files/options.tsx
@@ -1,5 +1,8 @@
 import React from 'react';
-import {FontAwesomeIcon} from '@fortawesome/react-fontawesome';
+import {
+    FontAwesomeIcon,
+    FontAwesomeIconProps
+} from '@fortawesome/react-fontawesome';
 import {faLaptop} from '@fortawesome/free-solid-svg-icons/faLaptop';
 import {faListOl} from '@fortawesome/free-solid-svg-icons/faListOl';
 import {faCloudDownloadAlt} from '@fortawesome/free-solid-svg-icons/faCloudDownloadAlt';
@@ -16,25 +19,46 @@ import RecommendedCallout from './recommended-callout/recommended-callout';
 import {useOpenGiveDialog} from './give-before-pdf/use-give-dialog';
 import useCalloutCounter from './recommended-callout/use-callout-counter';
 import trackLink from '../track-link';
+import type {Model} from '../get-this-title';
+import type {TrackedMouseEvent} from '~/components/shell/router-helpers/use-link-handler';
 
-function IconAndText({icon, text}) {
+type Icon = FontAwesomeIconProps['icon'];
+
+function IconAndText({icon, text}: {icon: Icon; text: string}) {
     return (
         <React.Fragment>
             <FontAwesomeIcon icon={icon} />
-            <span className='text'>{text}</span>
+            <span className="text">{text}</span>
         </React.Fragment>
     );
 }
 
-function Option({condition, children}) {
+function Option({
+    condition,
+    children
+}: React.PropsWithChildren<{
+    condition: string | false;
+}>) {
     if (!condition) {
         return null;
     }
 
-    return <div className='option' children={children} />;
+    return <div className="option" children={children} />;
 }
 
-export function SimpleLinkOption({link, icon, text, children, ...linkOptions}) {
+export function SimpleLinkOption({
+    link,
+    icon,
+    text,
+    children,
+    ...linkOptions
+}: React.PropsWithChildren<
+    {
+        link: string;
+        icon: Icon;
+        text: string;
+    } & React.AnchorHTMLAttributes<HTMLAnchorElement>
+>) {
     return (
         <Option condition={link}>
             <a href={link} {...linkOptions}>
@@ -45,7 +69,7 @@ export function SimpleLinkOption({link, icon, text, children, ...linkOptions}) {
     );
 }
 
-export function TocOption({model}) {
+export function TocOption({model}: {model: Model}) {
     const {toggle, isOpen} = useTOCContext();
     const includeTOC = ['live', 'deprecated', 'new_edition_available'].includes(
         model.bookState
@@ -59,31 +83,32 @@ export function TocOption({model}) {
         return null;
     }
 
-    function toggleToc(event) {
+    function toggleToc(event: React.MouseEvent) {
         toggle();
         event.preventDefault();
     }
 
     return (
-        <div className='option toc-option'>
+        <div className="option toc-option">
             <a
-                href='/'
-                role='button'
-                className='show-toc'
+                href="/"
+                role="button"
+                className="show-toc"
                 aria-pressed={isOpen}
                 onClick={toggleToc}
                 onKeyDown={treatSpaceOrEnterAsClick}
             >
                 <FontAwesomeIcon icon={faListOl} />
-                <span className='text'>{text}</span>
+                <span className="text">{text}</span>
             </a>
         </div>
     );
 }
 
 // eslint-disable-next-line complexity
-export function WebviewOption({model}) {
+export function WebviewOption({model}: {model: Model}) {
     const [showCallout, hideForever] = useCalloutCounter(model.slug);
+
     const intl = useIntl();
     const texts = {
         link: intl.formatMessage({id: 'getit.webview.link'})
@@ -96,7 +121,7 @@ export function WebviewOption({model}) {
     };
     const {GiveDialog, openGiveDialog} = useOpenGiveDialog();
     const trackDownload = React.useCallback(
-        (event) => {
+        (event: TrackedMouseEvent) => {
             trackLink(event, model.id);
         },
         [model.id]
@@ -104,24 +129,25 @@ export function WebviewOption({model}) {
 
     return (
         <Option condition={!model.comingSoon && webviewLink}>
-            <div className='option-with-callout'>
+            <div className="option-with-callout">
                 <a
                     href={webviewLink}
                     data-local={isRex}
-                    rel='noreferrer'
+                    rel="noreferrer"
                     onClick={openGiveDialog}
                 >
                     <IconAndText {...iconAndTextArgs} />
                 </a>
                 <GiveDialog
                     link={webviewLink}
-                    variant='View online'
+                    variant="View online"
                     warning={model.contentWarningText}
-                    track='Online'
-                    onDownload={trackDownload} id={model.id}
+                    track="Online"
+                    onDownload={trackDownload as (e: React.MouseEvent) => void}
+                    id={model.id}
                 />
                 {showCallout && (
-                    <div className='callout recommended-callout'>
+                    <div className="callout recommended-callout">
                         <RecommendedCallout
                             title={model.rexCalloutTitle}
                             blurb={model.rexCalloutBlurb}
@@ -134,7 +160,7 @@ export function WebviewOption({model}) {
     );
 }
 
-export function PdfOption({model}) {
+export function PdfOption({model}: {model: Model}) {
     const polish = $.isPolish(model.title);
     const intl = useIntl();
     const pdfText = polish
@@ -144,10 +170,10 @@ export function PdfOption({model}) {
         ? ' przykład'
         : intl.formatMessage({id: 'getit.pdf.sample'});
     const text = pdfText + (model.comingSoon ? sampleText : '');
-    const pdfLink = model.highResolutionPdfUrl || model.lowResolutionPdfUrl;
+    const pdfLink = model.highResolutionPdfUrl; // low res option is obsolete now
     const {GiveDialog, openGiveDialog} = useOpenGiveDialog();
     const trackDownload = React.useCallback(
-        (event) => {
+        (event: TrackedMouseEvent) => {
             trackLink(event, model.id);
         },
         [model.id]
@@ -162,8 +188,9 @@ export function PdfOption({model}) {
                 onClick={openGiveDialog}
             />
             <GiveDialog
-                link={pdfLink} track='PDF'
-                onDownload={trackDownload}
+                link={pdfLink}
+                track="PDF"
+                onDownload={trackDownload as (e: React.MouseEvent) => void}
                 id={model.id}
                 warning={model.contentWarningText}
             />
@@ -172,20 +199,17 @@ export function PdfOption({model}) {
 }
 
 export function usePrintCopyDialog() {
-    const [Dialog, open, close] = useDialog();
+    const [Dialog, open] = useDialog();
     const PCDialog = React.useCallback(
-        ({text, slug}) => (
+        ({text, slug}: {text: string; slug: string}) => (
             <Dialog title={text}>
-                <OrderPrintCopy
-                    slug={slug}
-                    hideDialog={() => close()}
-                />
+                <OrderPrintCopy slug={slug} />
             </Dialog>
         ),
-        [close, Dialog]
+        [Dialog]
     );
     const onClick = React.useCallback(
-        (event) => {
+        (event: React.MouseEvent) => {
             event.preventDefault();
             open();
         },
@@ -195,43 +219,43 @@ export function usePrintCopyDialog() {
     return {onClick, PCDialog};
 }
 
-export function BookshareOption({model}) {
+export function BookshareOption({model}: {model: Model}) {
     return (
         <SimpleLinkOption
             link={model.bookshareLink}
             icon={faVolumeUp}
-            text='Bookshare'
-            data-track='Bookshare'
+            text="Bookshare"
+            data-track="Bookshare"
         />
     );
 }
 
-export function Ibooks2Volumes({model}) {
+export function Ibooks2Volumes({model}: {model: Model}) {
     const intl = useIntl();
     const download = intl.formatMessage({id: 'getit.ibooks.download'});
 
     return (
         <React.Fragment>
-            <span className='option-header'>
+            <span className="option-header">
                 <IconAndText icon={faApple} text={download} />
             </span>
-            <a href={model.ibookLink} data-track='iBooks'>
+            <a href={model.ibookLink} data-track="iBooks">
                 <FormattedMessage
-                    id='getit.ibooks.part1'
-                    defaultMessage='iBooks part 1'
+                    id="getit.ibooks.part1"
+                    defaultMessage="iBooks part 1"
                 />
             </a>
-            <a href={model.ibookLink2} data-track='iBooks'>
+            <a href={model.ibookLink2} data-track="iBooks">
                 <FormattedMessage
-                    id='getit.ibooks.part2'
-                    defaultMessage='iBooks part 2'
+                    id="getit.ibooks.part2"
+                    defaultMessage="iBooks part 2"
                 />
             </a>
         </React.Fragment>
     );
 }
 
-export function IbooksOption({model}) {
+export function IbooksOption({model}: {model: Model}) {
     const intl = useIntl();
     const download = intl.formatMessage({id: 'getit.ibooks.download'});
 
@@ -240,7 +264,7 @@ export function IbooksOption({model}) {
             {model.ibookLink2 ? (
                 <Ibooks2Volumes model={model} />
             ) : (
-                <a href={model.ibookLink} data-track='iBooks'>
+                <a href={model.ibookLink} data-track="iBooks">
                     <IconAndText icon={faApple} text={download} />
                 </a>
             )}
@@ -248,7 +272,7 @@ export function IbooksOption({model}) {
     );
 }
 
-export function KindleOption({model}) {
+export function KindleOption({model}: {model: Model}) {
     const intl = useIntl();
     const header = intl.formatMessage({id: 'getit.kindle.header'});
     const defaultDisclaimer =
@@ -259,11 +283,11 @@ export function KindleOption({model}) {
             link={model.kindleLink}
             icon={faAmazon}
             text={header}
-            data-track='Kindle'
+            data-track="Kindle"
         >
-            <div className='disclaimer'>
+            <div className="disclaimer">
                 <FormattedMessage
-                    id='getit.kindle.disclaimer'
+                    id="getit.kindle.disclaimer"
                     defaultMessage={defaultDisclaimer}
                 />
             </div>
@@ -271,22 +295,22 @@ export function KindleOption({model}) {
     );
 }
 
-export function CheggOption({model}) {
+export function CheggOption({model}: {model: Model}) {
     return (
         <Option condition={model.cheggLink}>
-            <a href={model.cheggLink} data-track='Chegg Reader'>
+            <a href={model.cheggLink} data-track="Chegg Reader">
                 <img
-                    className='logo-img'
-                    src='/dist/images/icons/Chegglogo.svg'
-                    alt=''
+                    className="logo-img"
+                    src="/dist/images/icons/Chegglogo.svg"
+                    alt=""
                 />
-                <span className='text'>{model.cheggLinkText}</span>
+                <span className="text">{model.cheggLinkText}</span>
             </a>
         </Option>
     );
 }
 
-function useExpanderText(optionCount) {
+function useExpanderText(optionCount: number) {
     const intl = useIntl();
     const options =
         optionCount > 1
@@ -302,11 +326,19 @@ function useExpanderText(optionCount) {
     };
 }
 
-export function OptionExpander({expanded, additionalOptions, toggle}) {
+export function OptionExpander({
+    expanded,
+    additionalOptions,
+    toggle
+}: {
+    expanded: boolean;
+    toggle: () => void;
+    additionalOptions: number;
+}) {
     const text =
         useExpanderText(additionalOptions)[expanded ? 'fewer' : 'more'];
     const doToggle = React.useCallback(
-        (event) => {
+        (event: React.MouseEvent) => {
             toggle();
             event.preventDefault();
         },
@@ -318,9 +350,9 @@ export function OptionExpander({expanded, additionalOptions, toggle}) {
     }
 
     return (
-        <div className='option expander'>
+        <div className="option expander">
             <a
-                href='.'
+                href="."
                 onClick={doToggle}
                 onKeyDown={treatSpaceOrEnterAsClick}
                 aria-expanded={expanded}
diff --git a/src/app/pages/details/common/get-this-title-files/order-print-copy/order-print-copy.js b/src/app/pages/details/common/get-this-title-files/order-print-copy/order-print-copy.tsx
similarity index 63%
rename from src/app/pages/details/common/get-this-title-files/order-print-copy/order-print-copy.js
rename to src/app/pages/details/common/get-this-title-files/order-print-copy/order-print-copy.tsx
index 75f3974ee..d43a33663 100644
--- a/src/app/pages/details/common/get-this-title-files/order-print-copy/order-print-copy.js
+++ b/src/app/pages/details/common/get-this-title-files/order-print-copy/order-print-copy.tsx
@@ -1,5 +1,4 @@
 import React from 'react';
-import RawHTML from '~/components/jsx-helpers/raw-html';
 import {FontAwesomeIcon} from '@fortawesome/react-fontawesome';
 import {faUser} from '@fortawesome/free-solid-svg-icons/faUser';
 import {faUsers} from '@fortawesome/free-solid-svg-icons/faUsers';
@@ -7,7 +6,14 @@ import {useIntl} from 'react-intl';
 import './order-print-copy.scss';
 import cmsFetch from '~/helpers/cms-fetch';
 
-function Header({entry}) {
+type Content = {
+    headerText: string;
+    headerIcon: typeof faUser;
+    buttonText: string;
+    buttonUrl: string;
+};
+
+function Header({entry}: {entry: Content}) {
     return (
         <React.Fragment>
             <h1>
@@ -18,55 +24,45 @@ function Header({entry}) {
     );
 }
 
-function PhoneBox({entry, closeAfterDelay}) {
-    if (typeof entry === 'string') {
-        return <RawHTML className='iframe-box' html={entry} />;
-    }
-
+function PhoneBox({entry}: {entry: Content}) {
     return (
-        <a
-            className='box'
-            href={entry.buttonUrl}
-            onClick={closeAfterDelay}
-            data-track='Print'
-        >
+        <a className="box" href={entry.buttonUrl} data-track="Print">
             <Header entry={entry} />
         </a>
     );
 }
 
-function PhoneBoxes({contentArray}) {
+function PhoneBoxes({contentArray}: {contentArray: Content[]}) {
     return (
         <div className={`phone-version boxes boxes-${contentArray.length}`}>
             {contentArray.map((entry) => (
-                <PhoneBox {...{entry}} key={entry} />
+                <PhoneBox {...{entry}} key={entry.headerText} />
             ))}
         </div>
     );
 }
 
-function Button({href, text, buttonClass, onClick}) {
+function Button({
+    href,
+    text,
+    buttonClass
+}: {
+    href: string;
+    text: string;
+    buttonClass: string;
+}) {
     return (
-        <a
-            className={`btn ${buttonClass}`}
-            href={href}
-            onClick={onClick}
-            data-track='Print'
-        >
+        <a className={`btn ${buttonClass}`} href={href} data-track="Print">
             {text}
         </a>
     );
 }
 
-function DesktopBox({index, entry}) {
+function DesktopBox({index, entry}: {index: number; entry: Content}) {
     const buttonClass = ['primary', 'secondary'][index];
 
-    if (typeof entry === 'string') {
-        return <RawHTML className='iframe-box' html={entry} />;
-    }
-
     return (
-        <div className='box' key={entry.headerText}>
+        <div className="box" key={entry.headerText}>
             <Header entry={entry} />
             <Button
                 buttonClass={buttonClass}
@@ -77,31 +73,33 @@ function DesktopBox({index, entry}) {
     );
 }
 
-function DesktopBoxes({contentArray}) {
+function DesktopBoxes({contentArray}: {contentArray: Content[]}) {
     return (
         <div className={`larger-version boxes boxes-${contentArray.length}`}>
             {contentArray.map((entry, index) => (
-                <DesktopBox {...{index, entry}} key={entry} />
+                <DesktopBox {...{index, entry}} key={entry.headerText} />
             ))}
         </div>
     );
 }
 
-function useBookstoreContentLink(slug) {
-    const [url, setUrl] = React.useState(null);
+function useBookstoreContentLink(slug: string) {
+    const [url, setUrl] = React.useState<string | null>(null);
 
-    React.useEffect(
-        () => cmsFetch(slug).then((data) => setUrl(data.amazon_link)),
-        [slug]
-    );
+    React.useEffect(() => {
+        cmsFetch(slug).then((data) => setUrl(data.amazon_link));
+    }, [slug]);
 
     return url;
 }
 
-export default function OrderPrintCopy({slug}) {
+export default function OrderPrintCopy({slug}: {slug: string}) {
     const {formatMessage} = useIntl();
     const bookstoreLink = useBookstoreContentLink(slug);
     const contentArray = React.useMemo(() => {
+        if (!bookstoreLink) {
+            return null;
+        }
         const individual = formatMessage({
             id: 'printcopy.individual',
             defaultMessage: 'Individual'
@@ -130,17 +128,18 @@ export default function OrderPrintCopy({slug}) {
                 headerText: bookstore,
                 headerIcon: faUsers,
                 buttonText: button2Text,
-                buttonUrl: 'https://he.kendallhunt.com/sites/default/files/uploadedFiles/Kendall_Hunt/OPENSTAX_PRICE_LIST_and_ORDER_FORM.pdf'
+                buttonUrl:
+                    'https://he.kendallhunt.com/sites/default/files/uploadedFiles/Kendall_Hunt/OPENSTAX_PRICE_LIST_and_ORDER_FORM.pdf'
             }
         ];
     }, [formatMessage, bookstoreLink]);
 
-    if (!bookstoreLink) {
+    if (!contentArray) {
         return null;
     }
 
     return (
-        <nav className='order-print-copy'>
+        <nav className="order-print-copy">
             <PhoneBoxes {...{contentArray}} />
             <DesktopBoxes {...{contentArray}} />
         </nav>
diff --git a/src/app/pages/details/common/get-this-title-files/recommended-callout/recommended-callout.js b/src/app/pages/details/common/get-this-title-files/recommended-callout/recommended-callout.tsx
similarity index 60%
rename from src/app/pages/details/common/get-this-title-files/recommended-callout/recommended-callout.js
rename to src/app/pages/details/common/get-this-title-files/recommended-callout/recommended-callout.tsx
index be5f13a4a..6e47bcd7e 100644
--- a/src/app/pages/details/common/get-this-title-files/recommended-callout/recommended-callout.js
+++ b/src/app/pages/details/common/get-this-title-files/recommended-callout/recommended-callout.tsx
@@ -5,7 +5,15 @@ import {FontAwesomeIcon} from '@fortawesome/react-fontawesome';
 import {faTimes} from '@fortawesome/free-solid-svg-icons/faTimes';
 import './recommended-callout.scss';
 
-export default function RecommendedCallout({title, blurb, onPutAway}) {
+export default function RecommendedCallout({
+    title,
+    blurb,
+    onPutAway
+}: {
+    title?: string;
+    blurb?: string;
+    onPutAway: () => void;
+}) {
     const intl = useIntl();
     const titleToUse = title || intl.formatMessage({id: 'recommended'});
 
@@ -13,12 +21,15 @@ export default function RecommendedCallout({title, blurb, onPutAway}) {
         <div className="triangle-attachment">
             <div className="container">
                 <span className="callout-title">{titleToUse}</span>
-                <button type="button" className="put-away" onClick={onPutAway} aria-label="close-popup">
+                <button
+                    type="button"
+                    className="put-away"
+                    onClick={onPutAway}
+                    aria-label="close-popup"
+                >
                     <FontAwesomeIcon icon={faTimes} />
                 </button>
-                {
-                    blurb && <RawHTML className="callout-blurb" html={blurb} />
-                }
+                {blurb && <RawHTML className="callout-blurb" html={blurb} />}
             </div>
         </div>
     );
diff --git a/src/app/pages/details/common/get-this-title-files/recommended-callout/use-callout-counter.js b/src/app/pages/details/common/get-this-title-files/recommended-callout/use-callout-counter.js
deleted file mode 100644
index e5853f2d5..000000000
--- a/src/app/pages/details/common/get-this-title-files/recommended-callout/use-callout-counter.js
+++ /dev/null
@@ -1,77 +0,0 @@
-import React from 'react';
-
-const MAX_CALLOUTS = 3;
-const RESET_DATE = new Date('2020/01/29');
-
-export default function useCalloutCounter(slug) {
-    const [incremented, setIncremented] = React.useState(false);
-    const index = React.useMemo(
-        () => {
-            if (slug === null) {
-                throw new Error('calloutCounter: no slug set');
-            }
-            return `callout-${slug}`;
-        },
-        [slug]
-    );
-    const savedCount = React.useMemo(
-        () => Number(window.localStorage?.getItem(index)) || 0,
-        [index]
-    );
-    const [count, setCount] = React.useState(savedCount);
-    const resetIndex = React.useMemo(
-        () => `callout-reset-${slug}`,
-        [slug]
-    );
-    const savedLastReset = React.useMemo(
-        () => new Date(
-            Number(window.localStorage?.getItem(resetIndex)) ||
-                Number(RESET_DATE) - 100
-        ),
-        [resetIndex]
-    );
-    const [lastReset, setLastReset] = React.useState(savedLastReset);
-    const showCallout = React.useMemo(
-        () => count < MAX_CALLOUTS,
-        [count]
-    );
-    const hideForever = React.useCallback(
-        () => setCount(MAX_CALLOUTS),
-        []
-    );
-
-    React.useEffect(
-        () => {
-            setIncremented(false);
-            if (slug && Date.now() > RESET_DATE && lastReset < RESET_DATE) {
-                setCount(0);
-                setLastReset(Date.now());
-            }
-        },
-        [slug, lastReset]
-    );
-
-    React.useEffect(
-        () => {
-            if (slug && !incremented) {
-                setCount(count + 1);
-                setIncremented(true);
-            }
-        },
-        [slug, incremented, count]
-    );
-
-    React.useEffect(
-        () => {
-            window.localStorage?.setItem(resetIndex, Number(Date.now()).toString());
-        },
-        [resetIndex]
-    );
-
-    React.useEffect(
-        () => window.localStorage?.setItem(index, count),
-        [index, count]
-    );
-
-    return [showCallout, hideForever];
-}
diff --git a/src/app/pages/details/common/get-this-title-files/recommended-callout/use-callout-counter.ts b/src/app/pages/details/common/get-this-title-files/recommended-callout/use-callout-counter.ts
new file mode 100644
index 000000000..96eda6d24
--- /dev/null
+++ b/src/app/pages/details/common/get-this-title-files/recommended-callout/use-callout-counter.ts
@@ -0,0 +1,56 @@
+import React from 'react';
+
+const MAX_CALLOUTS = 3;
+const RESET_DATE = new Date('2020/01/29');
+
+export default function useCalloutCounter(
+    slug: string
+): [show: boolean, hideForever: () => void] {
+    const [incremented, setIncremented] = React.useState(false);
+    const index = `callout-${slug}`;
+    const savedCount = React.useMemo(
+        () => Number(window.localStorage?.getItem(index)) || 0,
+        [index]
+    );
+    const [count, setCount] = React.useState(savedCount);
+    const resetIndex = `callout-reset-${slug}`;
+    const savedLastReset = React.useMemo(
+        () =>
+            new Date(
+                Number(window.localStorage?.getItem(resetIndex)) ||
+                    Number(RESET_DATE) - 100
+            ),
+        [resetIndex]
+    );
+    const [lastReset, setLastReset] = React.useState(savedLastReset);
+    const showCallout = React.useMemo(() => count < MAX_CALLOUTS, [count]);
+    const hideForever = React.useCallback(() => setCount(MAX_CALLOUTS), []);
+
+    React.useEffect(() => {
+        setIncremented(false);
+        const now = new Date(Date.now());
+
+        if (slug && now > RESET_DATE && lastReset < RESET_DATE) {
+            setCount(0);
+            setLastReset(now);
+        }
+    }, [slug, lastReset]);
+
+    React.useEffect(() => {
+        if (slug && !incremented) {
+            setCount(count + 1);
+            setIncremented(true);
+        }
+    }, [slug, incremented, count]);
+
+    React.useEffect(() => {
+        window.localStorage?.setItem(resetIndex, Number(Date.now()).toString());
+    }, [resetIndex]);
+
+    React.useEffect(
+        () => window.localStorage?.setItem(index, count.toString()),
+        [index, count]
+    );
+
+    return [showCallout, hideForever];
+}
diff --git a/src/app/pages/details/common/get-this-title.tsx b/src/app/pages/details/common/get-this-title.tsx
index 35c938df2..b9a3b23ec 100644
--- a/src/app/pages/details/common/get-this-title.tsx
+++ b/src/app/pages/details/common/get-this-title.tsx
@@ -14,12 +14,25 @@ import OrderPrintCopy from './get-this-title-files/order-print-copy/order-print-
 import './get-this-title-files/get-this-title.scss';
 import trackLink from './track-link';
 
-type Model = {
+export type Model = {
     id: string;
     slug: string;
+    bookState: string;
+    comingSoon: boolean;
+    title: string;
     bookshareLink: string;
     ibookLink: string;
+    ibookLink2: string;
     kindleLink: string;
+    webviewRexLink: string;
+    webviewLink: string;
+    contentWarningText?: string;
+    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.
 };
 type ModelKey = 'bookshareLink' | 'ibookLink' | 'kindleLink';
 type TrackedMouseEvent = Parameters<typeof trackLink>[0];
diff --git a/src/app/pages/details/common/resource-box/resource-boxes.tsx b/src/app/pages/details/common/resource-box/resource-boxes.tsx
index 4885472d5..14b645f0c 100644
--- a/src/app/pages/details/common/resource-box/resource-boxes.tsx
+++ b/src/app/pages/details/common/resource-box/resource-boxes.tsx
@@ -1,7 +1,7 @@
 import React from 'react';
 import RawHTML from '~/components/jsx-helpers/raw-html';
-import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
-import { faExternalLinkAlt } from '@fortawesome/free-solid-svg-icons/faExternalLinkAlt';
+import {FontAwesomeIcon} from '@fortawesome/react-fontawesome';
+import {faExternalLinkAlt} from '@fortawesome/free-solid-svg-icons/faExternalLinkAlt';
 import ResourceBox from './resource-box';
 import useDetailsContext from '../../context';
 import './resource-box.scss';
@@ -43,9 +43,21 @@ function CommonsHubBox() {
     );
 }
 
-export default function ResourceBoxes({ models, includeCommonsHub = false }: {
-    models: {heading: string;
-    }[]; // Will be a real type when other stuff becomes TS
+// There's more, but this is all we need for now
+export type ResourceModel = {
+    heading: string;
+    description?: string;
+    link: {
+        text: string;
+        url: string;
+    }
+};
+
+export default function ResourceBoxes({
+    models,
+    includeCommonsHub = false
+}: {
+    models: ResourceModel[];
     includeCommonsHub?: boolean;
 }) {
     return (
@@ -57,4 +69,3 @@ export default function ResourceBoxes({ models, includeCommonsHub = false }: {
         </React.Fragment>
     );
 }
-
diff --git a/src/app/pages/details/desktop-view/instructor-resource-tab/instructor-resource-tab.js b/src/app/pages/details/desktop-view/instructor-resource-tab/instructor-resource-tab.js
index 636d12226..9b202e963 100644
--- a/src/app/pages/details/desktop-view/instructor-resource-tab/instructor-resource-tab.js
+++ b/src/app/pages/details/desktop-view/instructor-resource-tab/instructor-resource-tab.js
@@ -1,5 +1,5 @@
 import React from 'react';
-import FeaturedResourcesSection from '../../common/featured-resources/featured-resources.js';
+import FeaturedResourcesSection from '../../common/featured-resources/featured-resources';
 import {resourceBoxModel, useResources} from '../../common/resource-box/resource-box';
 import ResourceBoxes from '../../common/resource-box/resource-boxes';
 import VideoResourceBoxes from '../../common/resource-box/video-resource-box';
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
index a7b1e7617..903dfc6aa 100644
--- 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
@@ -3,7 +3,7 @@ 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';
-import FeaturedResourcesSection from '../../common/featured-resources/featured-resources.js';
+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';
diff --git a/test/src/components/__snapshots__/book-tile.test.tsx.snap b/test/src/components/__snapshots__/book-tile.test.tsx.snap
deleted file mode 100644
index 11f6f81ae..000000000
--- a/test/src/components/__snapshots__/book-tile.test.tsx.snap
+++ /dev/null
@@ -1,103 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`book-tile renders 1`] = `
-<body>
-  <div>
-    <div
-      class="book-tile"
-    >
-      <a
-        aria-label="Sample Title book"
-        href="/details/sample"
-      >
-        <img
-          height="240"
-          role="presentation"
-          src="cover.jpg"
-          width="240"
-        />
-        <div
-          class="text-block"
-        >
-          Sample Title
-        </div>
-      </a>
-      <div
-        class="navmenu"
-        data-analytics-nav="Get the book dropdown"
-      >
-        <button
-          aria-controls="sample-ddm"
-          aria-expanded="false"
-          aria-haspopup="true"
-          id="sample-ddb"
-          type="button"
-        >
-          Get the book
-          <svg
-            aria-hidden="true"
-            class="svg-inline--fa fa-caret-down "
-            data-icon="caret-down"
-            data-prefix="fas"
-            focusable="false"
-            role="img"
-            viewBox="0 0 320 512"
-            xmlns="http://www.w3.org/2000/svg"
-          >
-            <path
-              d="M137.4 374.6c12.5 12.5 32.8 12.5 45.3 0l128-128c9.2-9.2 11.9-22.9 6.9-34.9s-16.6-19.8-29.6-19.8L32 192c-12.9 0-24.6 7.8-29.6 19.8s-2.2 25.7 6.9 34.9l128 128z"
-              fill="currentColor"
-            />
-          </svg>
-        </button>
-        <div
-          aria-labelledby="sample-ddb"
-          id="sample-ddm"
-          role="menu"
-        >
-          <a
-            href="link-to-rex"
-            role="menuitem"
-          >
-            View online
-          </a>
-          <a
-            href="hi-res.pdf"
-            role="menuitem"
-          >
-             Download a PDF
-          </a>
-          <a
-            href="open a dialog"
-            role="menuitem"
-          >
-            Order a print copy
-          </a>
-          <hr />
-          <a
-            href="/details/sample?Instructor resources"
-            role="menuitem"
-          >
-            Instructor resources
-          </a>
-          <a
-            href="/details/sample?Student resources"
-            role="menuitem"
-          >
-            Student resources
-          </a>
-        </div>
-      </div>
-    </div>
-  </div>
-  <div
-    class="ReactModalPortal"
-  />
-  <div
-    class="ReactModalPortal"
-  />
-  <div
-    class="ReactModalPortal"
-  />
-</body>
-`;
diff --git a/test/src/components/book-tile.test.tsx b/test/src/components/book-tile.test.tsx
index 96e2dff57..89ba919a9 100644
--- a/test/src/components/book-tile.test.tsx
+++ b/test/src/components/book-tile.test.tsx
@@ -5,6 +5,7 @@ import ShellContextProvider from '~/../../test/helpers/shell-context';
 import {Book as BookInfo} from '~/pages/subjects/new/specific/context';
 import BookTile from '~/components/book-tile/book-tile';
 import userEvent from '@testing-library/user-event';
+import * as CF from '~/helpers/cms-fetch';
 
 const bookData: BookInfo = {
     id: 46,
@@ -69,49 +70,66 @@ jest.mock('~/models/book-titles', () => ({
 }));
 
 describe('book-tile', () => {
-    it('renders', () => {
-        const {baseElement} = render(<Component book={[bookData]} />);
+    const user = userEvent.setup();
+    const originalError = console.error;
 
-        expect(baseElement).toMatchSnapshot();
-    });
     it('renders coming soon', async () => {
         render(<Component book={[{...bookData, id: 130}]} />);
 
         await screen.findByText('Coming soon');
     });
     it('falls back on webviewLink', async () => {
-        const save = bookData.webviewRexLink;
+        const noRexData = {...bookData, webviewRexLink: ''};
 
-        bookData.webviewRexLink = '';
-        render(<Component book={[bookData]} />);
-        const user = userEvent.setup();
+        render(<Component book={[noRexData]} />);
 
         await user.click(screen.getByRole('button'));
 
-        const links = screen.getAllByRole('link');
-
-        expect(links).toHaveLength(1);
+        const link = screen.getByRole('link');
 
-        await user.click(screen.getAllByRole('link')[0]);
-
-        bookData.webviewRexLink = save;
+        console.error = jest.fn();
+        await user.click(link);
+        expect(console.error).toHaveBeenCalledWith(
+            expect.stringContaining('Not implemented: navigation'),
+            undefined
+        );
+        console.error = originalError;
     });
     it('falls back on lowResolutionPdfUrl (may be obsolete)', async () => {
-        const save = bookData.highResolutionPdfUrl;
-
-        bookData.lowResolutionPdfUrl = 'low-res.pdf';
-        bookData.highResolutionPdfUrl = '';
-
+        const lowResPdfData = {
+            ...bookData,
+            highResolutionPdfUrl: '',
+            lowResolutionPdfUrl: 'low-res.pdf'
+        };
+
+        render(<Component book={[lowResPdfData]} />);
+
+        const link = screen.getByRole('link');
+
+        console.error = jest.fn();
+        await user.click(link);
+        expect(console.error).toHaveBeenCalledWith(
+            expect.stringContaining('Not implemented: navigation'),
+            undefined
+        );
+        console.error = originalError;
+    });
+    it('brings up dialog when selecting print copy', async () => {
         render(<Component book={[bookData]} />);
-
-        const user = userEvent.setup();
-
-        const links = screen.getAllByRole('link');
-
-        expect(links).toHaveLength(1);
-
-        await user.click(screen.getAllByRole('link')[0]);
-
-        bookData.highResolutionPdfUrl = save;
+        const printCopyLink = screen.getByRole('menuitem', {
+            name: 'Order a print copy'
+        });
+        const mockCmsFetch = jest
+            .spyOn(CF, 'default')
+            .mockImplementation(() => {
+                return Promise.resolve({
+                    amazon_link: 'where you go'
+                });
+            });
+
+        await userEvent.click(printCopyLink);
+
+        expect(screen.getAllByRole('dialog')).toHaveLength(2);
+        mockCmsFetch.mockRestore();
     });
 });
diff --git a/test/src/data/details-college-algebra.js b/test/src/data/details-college-algebra.js
index 012d96762..8bfa44107 100644
--- a/test/src/data/details-college-algebra.js
+++ b/test/src/data/details-college-algebra.js
@@ -1,7 +1,7 @@
 const details = {
     "id": 39,
     "meta": {
-        "slug": "college-algebra",
+        "slug": "books/college-algebra",
         "seo_title": "Free College Algebra Textbook Available for Download",
         "search_description": "Study algebra online free by downloading OpenStax's College Algebra book and using our accompanying online resources including an algebra study guide.",
         "type": "books.Book",
diff --git a/test/src/pages/details/common/featured-resources.test.tsx b/test/src/pages/details/common/featured-resources.test.tsx
new file mode 100644
index 000000000..866d2f79b
--- /dev/null
+++ b/test/src/pages/details/common/featured-resources.test.tsx
@@ -0,0 +1,58 @@
+import React from 'react';
+import {render, screen} from '@testing-library/preact';
+import FeaturedResourcesSection from '~/pages/details/common/featured-resources/featured-resources';
+import ShellContextProvider from '../../../../helpers/shell-context';
+import {MemoryRouter} from 'react-router-dom';
+import userEvent from '@testing-library/user-event';
+
+const mockUseUserContext = jest.fn();
+
+jest.mock('~/contexts/user', () => ({
+    ...jest.requireActual('~/contexts/user'),
+    __esModule: true,
+    default: () => mockUseUserContext()
+}));
+
+const resourceModels = [
+    {
+        heading: 'one',
+        link: {
+            text: 'link1',
+            url: 'url1'
+        }
+    },
+    {heading: 'two',
+        link: {
+            text: 'link2',
+            url: 'url2'
+        }
+    }
+];
+
+describe('details/featured-resources', () => {
+    const user = userEvent.setup();
+    const originalError = console.error;
+
+    it('renders', async () => {
+        mockUseUserContext.mockReturnValue({
+            userStatus: {
+                isInstructor: true
+            }
+        });
+        render(
+            <ShellContextProvider>
+                <MemoryRouter initialEntries={['/path?Instructor']}>
+                    <FeaturedResourcesSection
+                        header="section header"
+                        models={resourceModels}
+                        data-analytics-content-list="featured-resource"
+                    />
+                </MemoryRouter>
+            </ShellContextProvider>
+        );
+        console.error = jest.fn();
+        await user.click(screen.getByRole('link', {name: 'Go to one'}));
+        expect(console.error).toHaveBeenCalledWith(expect.stringContaining('Not implemented: navigation'), undefined);
+        console.error = originalError;
+    });
+});
diff --git a/test/src/pages/details/get-this-title/get-this-title.test.tsx b/test/src/pages/details/get-this-title/get-this-title.test.tsx
index 0118157a7..b96758221 100644
--- a/test/src/pages/details/get-this-title/get-this-title.test.tsx
+++ b/test/src/pages/details/get-this-title/get-this-title.test.tsx
@@ -4,15 +4,19 @@ import userEvent from '@testing-library/user-event';
 import GetThisTitle from '~/pages/details/common/get-this-title';
 import {TOCContextProvider} from '~/pages/details/common/toc-slideout/context';
 import BookDetailsLoader from '../book-details-context';
+import * as UDH from '~/helpers/use-document-head';
+import $ from '~/helpers/$';
+import * as TL from '~/pages/details/common/track-link';
+import * as UC from '~/contexts/user';
 // College algebra book details
 import details from '../../../data/details-college-algebra';
 import {transformData, camelCaseKeys} from '~/helpers/page-data-utils';
 
-const model = camelCaseKeys(transformData(details));
+const baseModel = camelCaseKeys(transformData(details));
 
-function GTTinContext() {
+function GTTinContext({model = baseModel}) {
     return (
-        <BookDetailsLoader slug='books/college-algebra'>
+        <BookDetailsLoader slug="books/college-algebra">
             <TOCContextProvider>
                 <GetThisTitle model={model} />
             </TOCContextProvider>
@@ -28,9 +32,19 @@ jest.mock('~/helpers/device', () => ({
     isMobileDisplay: () => mockIsMobileDisplay()
 }));
 
+jest.spyOn(UDH, 'setPageTitleAndDescriptionFromBookData').mockImplementation(
+    () => null
+);
+jest.spyOn(UC, 'UserContextProvider').mockImplementation(
+    ({children}: any) => children // eslint-disable-line
+);
+const mockTrackLink = jest.spyOn(TL, 'default');
+
 const user = userEvent.setup();
 
 describe('get-this-title', () => {
+    const originalError = console.error;
+
     it('renders with unexpanded options', async () => {
         render(<GTTinContext />);
         const expander = await screen.findByText('+ 1 more option...');
@@ -38,7 +52,51 @@ describe('get-this-title', () => {
         await user.click(expander);
         await screen.findByText('See 1 fewer option');
         // Exercise link tracking
+
+        console.error = jest.fn();
         await user.click(screen.getByText('Download for Kindle'));
+        expect(console.error).toHaveBeenCalledWith(
+            expect.stringContaining('Not implemented: navigation'),
+            undefined
+        );
+        console.error = originalError;
+    });
+    it('shows no expander if not needed', async () => {
+        const noKindleModel = {...baseModel, kindleLink: ''};
+
+        render(<GTTinContext model={noKindleModel} />);
+        const links = await screen.findAllByRole('link');
+
+        expect(links).toHaveLength(2);
+        expect(
+            links.find((el) => el.textContent?.includes('more option'))
+        ).toBeUndefined();
+    });
+    it('opens give dialog for Webview', async () => {
+        render(<GTTinContext />);
+        const wvLink = await screen.findByText('View online');
+
+        const closeRecommendedCallout = screen.getByRole('button', {
+            name: 'close-popup'
+        });
+
+        await user.click(closeRecommendedCallout);
+
+        await user.click(wvLink);
+        expect(screen.getAllByRole('dialog')).toHaveLength(2);
+        const trackingLink = await screen.findByRole('link', {
+            name: 'Go to your book'
+        });
+
+        console.error = jest.fn();
+        await user.click(trackingLink);
+        expect(console.error).toHaveBeenCalledWith(
+            expect.stringContaining('Not implemented: navigation'),
+            undefined
+        );
+        console.error = originalError;
+        expect(mockTrackLink).toHaveBeenCalled();
+        mockTrackLink.mockReset();
     });
     it('opens give dialog for PDF', async () => {
         render(<GTTinContext />);
@@ -46,13 +104,82 @@ describe('get-this-title', () => {
 
         await user.click(pdfLink);
         expect(screen.getAllByRole('dialog')).toHaveLength(2);
+        const trackingLink = await screen.findByRole('link', {
+            name: 'Go to your file'
+        });
+
+        console.error = jest.fn();
+        await user.click(trackingLink);
+        expect(console.error).toHaveBeenCalledWith(
+            expect.stringContaining('Not implemented: navigation'),
+            undefined
+        );
+        console.error = originalError;
+        expect(mockTrackLink).toHaveBeenCalled();
+        mockTrackLink.mockReset();
     });
     it('no dialog on mobile display', async () => {
         mockIsMobileDisplay.mockReturnValue(true);
         render(<GTTinContext />);
         const pdfLink = await screen.findByText('Download a PDF');
 
+        console.error = jest.fn();
         await user.click(pdfLink);
-        expect(screen.findByRole('dialog')).toBeTruthy();
+        expect(screen.queryAllByRole('dialog')).toHaveLength(0);
+        expect(console.error).toHaveBeenCalledWith(
+            expect.stringContaining('Not implemented: navigation'),
+            undefined
+        );
+        console.error = originalError;
+    });
+    it('expands TOC option (Polish)', async () => {
+        const mockIsPolish = jest.spyOn($, 'isPolish').mockReturnValue(true);
+
+        render(<GTTinContext />);
+        const toggleLink = await screen.findByRole('button', {
+            name: 'Spis treści'
+        });
+
+        expect(toggleLink.getAttribute('aria-pressed')).toBe('false');
+        await user.click(toggleLink);
+        expect(toggleLink.getAttribute('aria-pressed')).toBe('true');
+        mockIsPolish.mockReset();
+    });
+    it('excludes TOC option for retired books', async () => {
+        const retiredModel = {
+            ...baseModel,
+            bookState: 'comingSoon',
+            webviewRexLink: ''
+        };
+
+        render(<GTTinContext model={retiredModel} />);
+        await screen.findByText('Download a PDF');
+        expect(
+            screen.queryAllByRole('button', {name: 'Table of contents'})
+        ).toHaveLength(0);
+    });
+    it('shows PDF sample text for comingsoon books with PDF)', async () => {
+        const comingSoonModel = {
+            ...baseModel,
+            bookState: 'comingSoon',
+            comingSoon: true
+        };
+
+        render(<GTTinContext model={comingSoonModel} />);
+        await screen.findByText('Download a PDF sample');
+    });
+    it('shows iBooks options (2 volumes)', async () => {
+        const ibooksModel = {
+            ...baseModel,
+            ibookLink: 'first-volume',
+            ibookLink2: 'second-volume'
+        };
+
+        render(<GTTinContext model={ibooksModel} />);
+        const expander = await screen.findByText('+ 2 more options...');
+
+        await user.click(expander);
+        screen.getByRole('link', {name: 'iBooks part 1'});
+        screen.getByRole('link', {name: 'iBooks part 2'});
     });
 });
diff --git a/test/src/pages/details/get-this-title/give-before-other.test.tsx b/test/src/pages/details/get-this-title/give-before-other.test.tsx
index 7c83ab39f..9736faadf 100644
--- a/test/src/pages/details/get-this-title/give-before-other.test.tsx
+++ b/test/src/pages/details/get-this-title/give-before-other.test.tsx
@@ -21,6 +21,7 @@ describe('give-before-other', () => {
                     close={close}
                     data={data}
                     onDownload={onDownload}
+                    variant=''
                 />
             </MemoryRouter>
         );
diff --git a/test/src/pages/details/get-this-title/give-before-pdf.test.tsx b/test/src/pages/details/get-this-title/give-before-pdf.test.tsx
index 1dcbebec4..5b1dbebcb 100644
--- a/test/src/pages/details/get-this-title/give-before-pdf.test.tsx
+++ b/test/src/pages/details/get-this-title/give-before-pdf.test.tsx
@@ -1,5 +1,5 @@
 import React from 'react';
-import {render, screen} from '@testing-library/preact';
+import {fireEvent, render, screen} from '@testing-library/preact';
 import userEvent from '@testing-library/user-event';
 import {MemoryRouter} from 'react-router-dom';
 import GiveBeforePdf from '~/pages/details/common/get-this-title-files/give-before-pdf/give-before-pdf';
@@ -19,7 +19,18 @@ const data: DonationPopupData = {
 } as unknown as DonationPopupData; // doesn't matter
 /* eslint-enable camelcase */
 
+function ShowThankYouButton({children}: React.PropsWithChildren<object>) {
+    const {showThankYou, onThankYouClick} = TY.useOnThankYouClick();
+
+    if (showThankYou) {
+        return children;
+    }
+    return <button onClick={onThankYouClick}>Show thank you</button>;
+}
+
 describe('give-before-pdf', () => {
+    const originalError = console.error;
+
     afterEach(() => {
         jest.resetAllMocks();
         jest.restoreAllMocks();
@@ -41,9 +52,27 @@ describe('give-before-pdf', () => {
         await screen.findByText('your download is ready');
     });
     it('shows Thank You', async () => {
+        render(
+            <ShowThankYouButton>
+                <MemoryRouter initialEntries={['']}>
+                    <GiveBeforePdf
+                        link="gbp-link"
+                        close={close}
+                        data={data}
+                        onDownload={onDownload}
+                    />
+                </MemoryRouter>
+            </ShowThankYouButton>
+        );
+        await user.click(await screen.findByRole('button'));
+        await screen.findByText('Go to your file');
+    });
+    it('Thank You note can be filled and submitted', async () => {
+        const thankYouClick = jest.fn(() => console.info('** Thank you'));
+
         jest.spyOn(TY, 'useOnThankYouClick').mockReturnValue({
             showThankYou: true,
-            onThankYouClick: () => null
+            onThankYouClick: () => thankYouClick()
         });
         render(
             <MemoryRouter initialEntries={['']}>
@@ -52,11 +81,34 @@ describe('give-before-pdf', () => {
                     close={close}
                     data={data}
                     onDownload={onDownload}
+                    track="thanks"
                 />
             </MemoryRouter>
         );
         jest.runAllTimers();
-        await screen.findByText('Send us a thank you note');
+        await screen.findByRole('heading', {
+            level: 1,
+            name: 'Send us a thank you note'
+        });
+        screen.getAllByRole('textbox').forEach((el) => {
+            fireEvent.input(el, {target: {value: 'something'}});
+        });
+        await user.click(screen.getByRole('checkbox'));
+        console.error = jest.fn();
+        // This is the submit button, but submit doesn't work in testing :(
+        await user.click(screen.getByRole('button'));
+        expect(console.error).toHaveBeenCalledWith(
+            expect.stringContaining(
+                'Not implemented: HTMLFormElement.prototype.submit'
+            ),
+            undefined
+        );
+        // So we can test the "never mind" link
+        await user.click(screen.getByRole('link'));
+        // Even firing the submit event doesn't cause anything to happen?
+        fireEvent.submit(screen.getByRole('form'));
+        // So we directly fire the load on the form target iframe
+        fireEvent.load(screen.getByTitle('form-response'));
     });
     it('Exercise data-track and datalayer effect', async () => {
         (window as unknown as Window & {dataLayer: object[]}).dataLayer = [];
@@ -67,7 +119,7 @@ describe('give-before-pdf', () => {
                     close={close}
                     data={data}
                     onDownload={onDownload}
-                    track='something'
+                    track="something"
                 />
             </MemoryRouter>
         );
@@ -83,11 +135,7 @@ describe('give-before-pdf', () => {
         expect(close).not.toHaveBeenCalled();
         render(
             <MemoryRouter initialEntries={['']}>
-                <GiveBeforePdf
-                    link="gbp-link"
-                    close={close}
-                    data={data}
-                />
+                <GiveBeforePdf link="gbp-link" close={close} data={data} />
             </MemoryRouter>
         );
         screen.getByText('Downloading...');
@@ -99,11 +147,7 @@ describe('give-before-pdf', () => {
     it('handles Give link click', async () => {
         render(
             <MemoryRouter initialEntries={['/k12/something']}>
-                <GiveBeforePdf
-                    link="gbp-link"
-                    close={close}
-                    data={data}
-                />
+                <GiveBeforePdf link="gbp-link" close={close} data={data} />
             </MemoryRouter>
         );
         screen.getByText('Downloading...');
@@ -113,6 +157,12 @@ describe('give-before-pdf', () => {
         const links = screen.getAllByRole('link');
 
         expect(links.length).toBe(2);
+        console.error = jest.fn();
         await user.click(links[0]);
+        expect(console.error).toHaveBeenCalledWith(
+            expect.stringContaining('Not implemented: window.open'),
+            undefined
+        );
+        console.error = originalError;
     });
 });
diff --git a/test/src/pages/details/get-this-title/recommended-callout.test.js b/test/src/pages/details/get-this-title/recommended-callout.test.js
deleted file mode 100644
index 468fc227b..000000000
--- a/test/src/pages/details/get-this-title/recommended-callout.test.js
+++ /dev/null
@@ -1,32 +0,0 @@
-import React from 'react';
-import {render, screen} from '@testing-library/preact';
-import {LanguageContextProvider} from '~/contexts/language';
-import RecommendedCallout from '~/pages/details/common/get-this-title-files/recommended-callout/recommended-callout';
-import BookDetailsLoader from '../book-details-context';
-
-function LangWrapRecommendedCallout({...args}) {
-    return (
-        <LanguageContextProvider>
-            <BookDetailsLoader slug={'books/college-algebra'}>
-                <RecommendedCallout {...args} />
-            </BookDetailsLoader>
-        </LanguageContextProvider>
-    );
-}
-
-test('defaults to "Recommended" and no blurb', async () => {
-    render(<LangWrapRecommendedCallout />);
-    await screen.findByText('Recommended');
-    expect(screen.getByRole('button').nextSibling).toBeNull();
-});
-test('displays custom title', async () => {
-    render(<LangWrapRecommendedCallout title="custom title" />)
-    await screen.findByText('custom title');
-});
-test('displays custom blurb', async () => {
-    const blurbHtml = '<b>some text</b>';
-
-    render(<LangWrapRecommendedCallout blurb={blurbHtml} />)
-    await screen.findByText('some text');
-    expect(screen.getByRole('button').nextSibling).not.toBeNull();
-})
diff --git a/test/src/pages/details/get-this-title/recommended-callout.test.tsx b/test/src/pages/details/get-this-title/recommended-callout.test.tsx
new file mode 100644
index 000000000..e2fa3ed89
--- /dev/null
+++ b/test/src/pages/details/get-this-title/recommended-callout.test.tsx
@@ -0,0 +1,36 @@
+import React from 'react';
+import {render, screen} from '@testing-library/preact';
+import {LanguageContextProvider} from '~/contexts/language';
+import RecommendedCallout from '~/pages/details/common/get-this-title-files/recommended-callout/recommended-callout';
+import BookDetailsLoader from '../book-details-context';
+
+const onPutAway = jest.fn();
+
+function LangWrapRecommendedCallout({...args}) {
+    return (
+        <LanguageContextProvider>
+            <BookDetailsLoader slug='books/college-algebra'>
+                <RecommendedCallout onPutAway={onPutAway} {...args} />
+            </BookDetailsLoader>
+        </LanguageContextProvider>
+    );
+}
+
+describe('details/recommended-callout', () => {
+    test('defaults to "Recommended" and no blurb', async () => {
+        render(<LangWrapRecommendedCallout />);
+        await screen.findByText('Recommended');
+        expect(screen.getByRole('button').nextSibling).toBeNull();
+    });
+    test('displays custom title', async () => {
+        render(<LangWrapRecommendedCallout title="custom title" />);
+        await screen.findByText('custom title');
+    });
+    test('displays custom blurb', async () => {
+        const blurbHtml = '<b>some text</b>';
+
+        render(<LangWrapRecommendedCallout blurb={blurbHtml} />);
+        await screen.findByText('some text');
+        expect(screen.getByRole('button').nextSibling).not.toBeNull();
+    });
+});