Add audiobook purchase button to book details pages (#2813)

* Add audiobook purchase button to book details pages

This adds a new audiobook purchase option box that appears above the
Individual and Bookstore print options when an audiobook link is
configured in the CMS.

Changes:
- Import faVolumeUp icon for audiobook representation
- Fetch audiobook_link from CMS API
- Add audiobook entry to purchase options (appears first when present)
- Update button styling to accommodate 3 boxes in grid layout
- Add translations for "Audiobook" and "Purchase options" (en/es)
- Add specific analytics tracking for audiobook clicks

The audiobook box only appears when the book has an audiobook_link
configured in the CMS, ensuring backwards compatibility.

Related to: CORE-1476

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

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

* Move audiobook box to end of purchase options list

Per review feedback, the audiobook option now appears after Individual
and Bookstore boxes instead of before them.

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

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

---------

Co-authored-by: Claude Sonnet 4.5 <noreply@anthropic.com>
Co-authored-by: Roy Johnson <roy.e.johnson@rice.edu>

Author: 3 people

src/app/lang/en.js

@@ -75,8 +75,10 @@ export default {
     'printcopy.individual': 'Individual',
     'printcopy.disclosure': '***',
     'printcopy.bookstore': 'Bookstore',
+    'printcopy.audiobook': 'Audiobook',
     'printcopy.button1': 'Buy a print copy',
     'printcopy.button2': 'Order options',
+    'printcopy.audiobook-button': 'Purchase options',
     'pubInfo.pdf.heading': 'PDF Version Last Updated:',
     'pubInfo.pdf.see': 'See changes in the',
     'pubInfo.pdf.notes': 'Revision Notes',

src/app/lang/es.js

@@ -75,8 +75,10 @@ export default {
     'printcopy.individual': 'Individuo',
     'printcopy.disclosure': 'Como afiliados de Amazon ganamos con compras calificadas',
     'printcopy.bookstore': 'Libreria',
+    'printcopy.audiobook': 'Audiolibro',
     'printcopy.button1': 'Comprar una copia impresa',
     'printcopy.button2': 'Opciones para solicitar',
+    'printcopy.audiobook-button': 'Opciones de compra',
     'pubInfo.pdf.heading': 'Última actualización de la versión PDF:',
     'pubInfo.pdf.see': 'Ver las modificaciones en las',
     'pubInfo.pdf.notes': 'Notas de revisión',

src/app/pages/details/common/get-this-title-files/order-print-copy/order-print-copy.scss

@@ -118,5 +118,9 @@
         grid-template-columns: 1fr 1fr;
         padding: $normal-margin;
         width: max-content;
+
+        &.boxes-3 {
+            grid-template-columns: 1fr 1fr 1fr;
+        }
     }
 }

src/app/pages/details/common/get-this-title-files/order-print-copy/order-print-copy.tsx

@@ -2,6 +2,7 @@ import React from 'react';
 import {FontAwesomeIcon} from '@fortawesome/react-fontawesome';
 import {faUser} from '@fortawesome/free-solid-svg-icons/faUser';
 import {faUsers} from '@fortawesome/free-solid-svg-icons/faUsers';
+import {faVolumeUp} from '@fortawesome/free-solid-svg-icons/faVolumeUp';
 import {useIntl} from 'react-intl';
 import './order-print-copy.scss';
 import cmsFetch from '~/helpers/cms-fetch';
@@ -12,6 +13,7 @@ type Content = {
     headerIcon: typeof faUser;
     buttonText: string;
     buttonUrl: string;
+    trackingLabel: string;
 };
 
 function Header({entry}: {entry: Content}) {
@@ -27,7 +29,7 @@ function Header({entry}: {entry: Content}) {
 
 function PhoneBox({entry}: {entry: Content}) {
     return (
-        <a className="box" href={entry.buttonUrl} data-track="Print">
+        <a className="box" href={entry.buttonUrl} data-track={entry.trackingLabel}>
             <Header entry={entry} />
         </a>
     );
@@ -46,21 +48,23 @@ function PhoneBoxes({contentArray}: {contentArray: Content[]}) {
 function Button({
     href,
     text,
-    buttonClass
+    buttonClass,
+    trackingLabel
 }: {
     href: string;
     text: string;
     buttonClass: string;
+    trackingLabel: string;
 }) {
     return (
-        <a className={`btn ${buttonClass}`} href={href} data-track="Print">
+        <a className={`btn ${buttonClass}`} href={href} data-track={trackingLabel}>
             {text}
         </a>
     );
 }
 
 function DesktopBox({index, entry}: {index: number; entry: Content}) {
-    const buttonClass = ['primary', 'secondary'][index];
+    const buttonClass = ['primary', 'primary', 'secondary'][index] || 'primary';
 
     return (
         <div className="box" key={entry.headerText}>
@@ -69,6 +73,7 @@ function DesktopBox({index, entry}: {index: number; entry: Content}) {
                 buttonClass={buttonClass}
                 href={entry.buttonUrl}
                 text={entry.buttonText}
+                trackingLabel={entry.trackingLabel}
             />
         </div>
     );
@@ -94,9 +99,20 @@ function useBookstoreContentLink(slug: string) {
     return url;
 }
 
+function useAudiobookLink(slug: string) {
+    const [url, setUrl] = React.useState<string | null>(null);
+
+    React.useEffect(() => {
+        cmsFetch(slug).then((data) => setUrl(data.audiobook_link));
+    }, [slug]);
+
+    return url;
+}
+
 export default function OrderPrintCopy({slug, campaign}: {slug: string; campaign: UtmCampaign}) {
     const {formatMessage} = useIntl();
     const bookstoreLink = useBookstoreContentLink(slug);
+    const audiobookLink = useAudiobookLink(slug);
     const contentArray = React.useMemo(() => {
         if (!bookstoreLink) {
             return null;
@@ -117,23 +133,46 @@ export default function OrderPrintCopy({slug, campaign}: {slug: string; campaign
             id: 'printcopy.button2',
             defaultMessage: 'Order options'
         });
+        const audiobook = formatMessage({
+            id: 'printcopy.audiobook',
+            defaultMessage: 'Audiobook'
+        });
+        const audiobookButtonText = formatMessage({
+            id: 'printcopy.audiobook-button',
+            defaultMessage: 'Purchase options'
+        });
 
-        return [
+        const content = [
             {
                 headerText: individual,
                 headerIcon: faUser,
                 buttonText: button1Text,
-                buttonUrl: linkHelper.setUtmCampaign(bookstoreLink, campaign)
+                buttonUrl: linkHelper.setUtmCampaign(bookstoreLink, campaign),
+                trackingLabel: 'Print'
             },
             {
                 headerText: bookstore,
                 headerIcon: faUsers,
                 buttonText: button2Text,
                 buttonUrl:
-                    'https://he.kendallhunt.com/sites/default/files/uploadedFiles/Kendall_Hunt/OPENSTAX_PRICE_LIST_and_ORDER_FORM.pdf'
+                    'https://he.kendallhunt.com/sites/default/files/uploadedFiles/Kendall_Hunt/OPENSTAX_PRICE_LIST_and_ORDER_FORM.pdf',
+                trackingLabel: 'Print'
             }
         ];
-    }, [formatMessage, bookstoreLink, campaign]);
+
+        // Add audiobook option at the end if link is available
+        if (audiobookLink) {
+            content.push({
+                headerText: audiobook,
+                headerIcon: faVolumeUp,
+                buttonText: audiobookButtonText,
+                buttonUrl: audiobookLink,
+                trackingLabel: 'Audiobook'
+            });
+        }
+
+        return content;
+    }, [formatMessage, bookstoreLink, audiobookLink, campaign]);
 
     if (!contentArray) {
         return null;