feat(store): add custom cover info to book product page

Author: jakeaturner

client/src/api.ts

@@ -490,7 +490,14 @@ class API {
   async getBookDetail(bookID: string) {
     const res = await axios.get<
       {
-        book: { license?: string; [key: string]: unknown };
+        book: {
+          license?: string;
+          exportInfo?: {
+            customCoverOrg?: string;
+            [key: string]: unknown;
+          };
+          [key: string]: unknown;
+        };
       } & ConductorBaseResponse
     >(`/commons/book/${bookID}`);
     return res;

client/src/screens/conductor/store/product.tsx

@@ -16,6 +16,8 @@ import { buildLibraryPageGoURL } from "../../../utils/projectHelpers";
 import { Alert, Button, Divider, Heading, Link, NumberInput, Radio, RadioGroup, Stack, Text } from "@libretexts/davis-react";
 import { IconBook2, IconShoppingCartPlus } from "@tabler/icons-react";
 import useStoreMaxQuantityPerItem from "../../../hooks/useStoreMaxQuantityPerItem";
+import useClientConfig from "../../../hooks/useClientConfig";
+import { getBookExportURL } from "../../../utils/bookExports";
 
 const BOOK_PAGE_LIMIT = 799;
 
@@ -25,6 +27,7 @@ export default function ProductPage() {
   const { cart, addToCart, removeFromCart, loading: cartLoading } = useCart();
   const params = useParams<{ product_id: string }>();
   const maxQuantityPerItem = useStoreMaxQuantityPerItem();
+  const { isProduction } = useClientConfig();
   const { data: product, isFetching } = useQuery<StoreProduct>({
     queryKey: ["store-product", params.product_id],
     queryFn: async () => {
@@ -118,7 +121,11 @@ export default function ProductPage() {
     return num_pages > BOOK_PAGE_LIMIT;
   }, [product, isBook]);
 
-  const [bookDetail, setBookDetail] = useState<{ license?: string;[key: string]: unknown } | null>(null);
+  const [bookDetail, setBookDetail] = useState<{
+    license?: string;
+    exportInfo?: { customCoverOrg?: string;[key: string]: unknown };
+    [key: string]: unknown;
+  } | null>(null);
 
   useEffect(() => {
     if (!product || !isBook) return;
@@ -141,6 +148,30 @@ export default function ProductPage() {
     return license.includes("cc-by-nc") || license.includes("ccbync");
   }, [bookDetail]);
 
+  /**
+   * The organization producing the book's custom cover, when it has one.
+   * Display-only: the field is informational and never gates pricing or
+   * fulfillment.
+   */
+  const customCoverOrg = useMemo(() => {
+    if (!isBook) return null;
+    const org = bookDetail?.exportInfo?.customCoverOrg;
+    return typeof org === "string" && org.trim() ? org.trim() : null;
+  }, [bookDetail, isBook]);
+
+  /**
+   * Cover artwork for the binding the customer currently has selected, so the
+   * link always points at the PDF that would actually be printed.
+   */
+  const customCoverURL = useMemo(() => {
+    if (!customCoverOrg) return "";
+    return getBookExportURL(
+      product?.metadata["book_id"],
+      hardcover ? "cover-casewrap" : "cover-perfectbound",
+      { isProduction }
+    );
+  }, [customCoverOrg, product, hardcover, isProduction]);
+
   function handleAddToCart() {
     if (!product) return;
     if (!price || !price.unit_amount) {
@@ -308,6 +339,25 @@ export default function ProductPage() {
                 error={quantity > maxQuantityPerItem}
                 errorMessage={`Maximum ${maxQuantityPerItem} per item. Please reduce the quantity to continue.`}
               />
+              {customCoverOrg && (
+                <Alert
+                  variant="info"
+                  message={`This book will ship with a custom cover by ${customCoverOrg}.`}
+                  {...(customCoverURL
+                    ? {
+                      action: {
+                        label: "View custom cover",
+                        onClick: () =>
+                          window.open(
+                            customCoverURL,
+                            "_blank",
+                            "noopener,noreferrer"
+                          ),
+                      },
+                    }
+                    : {})}
+                />
+              )}
               {hasNCLicense && (
                 <Alert variant="warning" message={"This book has a NonCommercial clause in its license and cannot be resold for profit."} />
               )}

client/src/utils/bookExports.ts

@@ -11,6 +11,12 @@ export interface BookExportDisplay {
   key: BookExportKey;
   label: string;
   group: BookExportGroup;
+  /**
+   * Segment appended to the book's downloads base URL. `null` for exports the
+   * downloads service does not produce yet. Mirrors `pathSegment` in
+   * `server/api/services/book-export-service.ts` and must stay in step with it.
+   */
+  pathSegment: string | null;
   /**
    * Whether the browser can render this export inline.
    *
@@ -42,6 +48,7 @@ export const BOOK_EXPORT_GROUP_LABELS: Record<BookExportGroup, string> = {
 export const BOOK_EXPORT_DISPLAY: BookExportDisplay[] = [
   {
     key: "full-pdf",
+    pathSegment: "pdf",
     label: "Full PDF",
     group: "full-book",
     previewable: true,
@@ -52,6 +59,7 @@ export const BOOK_EXPORT_DISPLAY: BookExportDisplay[] = [
   },
   {
     key: "content-pdf",
+    pathSegment: "content",
     label: "Content PDF",
     group: "publication",
     previewable: true,
@@ -61,6 +69,7 @@ export const BOOK_EXPORT_DISPLAY: BookExportDisplay[] = [
   },
   {
     key: "cover-perfectbound",
+    pathSegment: "cover-perfectbound",
     label: "Paperback Cover PDF",
     group: "publication",
     previewable: true,
@@ -70,6 +79,7 @@ export const BOOK_EXPORT_DISPLAY: BookExportDisplay[] = [
   },
   {
     key: "cover-casewrap",
+    pathSegment: "cover-casewrap",
     label: "Hardcover Cover PDF",
     group: "publication",
     previewable: true,
@@ -79,6 +89,7 @@ export const BOOK_EXPORT_DISPLAY: BookExportDisplay[] = [
   },
   {
     key: "thincc",
+    pathSegment: "thincc",
     label: "ThinCC",
     group: "full-book",
     previewable: false,
@@ -89,6 +100,7 @@ export const BOOK_EXPORT_DISPLAY: BookExportDisplay[] = [
   },
   {
     key: "page-pdfs",
+    pathSegment: "pages",
     label: "Page PDFs",
     group: "other",
     previewable: false,
@@ -98,6 +110,7 @@ export const BOOK_EXPORT_DISPLAY: BookExportDisplay[] = [
   },
   {
     key: "epub",
+    pathSegment: null,
     label: "EPUB",
     group: "other",
     previewable: false,
@@ -141,3 +154,30 @@ export const getDefaultExportKey = (
   );
   return firstAvailable?.key ?? BOOK_EXPORT_DISPLAY[0].key;
 };
+
+const DOWNLOADS_HOST_PRODUCTION = "https://downloads.libretexts.org";
+const DOWNLOADS_HOST_STAGING = "https://staging.downloads.libretexts.org";
+
+/**
+ * Download URL for one of a Book's exports.
+ *
+ * The server half of the registry owns the authoritative path shape
+ * (`getExportURL` in `server/api/services/book-export-service.ts`); this mirrors
+ * it for links the client renders on its own. Returns an empty string when the
+ * bookID is missing or the export has no artifact yet, so callers can gate on a
+ * falsy URL rather than rendering a dead link.
+ */
+export const getBookExportURL = (
+  bookID: string | undefined,
+  key: BookExportKey,
+  opts?: { isProduction?: boolean },
+): string => {
+  if (!bookID) return "";
+  const display = getExportDisplay(key);
+  if (!display?.enabled || !display.pathSegment) return "";
+  const host =
+    opts?.isProduction === false
+      ? DOWNLOADS_HOST_STAGING
+      : DOWNLOADS_HOST_PRODUCTION;
+  return `${host}/api/v1/download/${encodeURIComponent(bookID)}/${display.pathSegment}`;
+};