wip

src/app/models/amazon-snippet.ts

@@ -0,0 +1,3 @@
+export default Promise.resolve(
+    'This is a blurb about how cheap our books are'
+);

src/app/pages/details/common/get-this-title-files/options.js

@@ -1,6 +1,5 @@
 import React from 'react';
 import {FontAwesomeIcon} from '@fortawesome/react-fontawesome';
-import {faBook} from '@fortawesome/free-solid-svg-icons/faBook';
 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';
@@ -11,7 +10,6 @@ import $ from '~/helpers/$';
 import {treatSpaceOrEnterAsClick} from '~/helpers/events';
 import {useIntl, FormattedMessage} from 'react-intl';
 import OrderPrintCopy from './order-print-copy/order-print-copy';
-import useAmazonAssociatesLink from './amazon-associates-link';
 import useTOCContext from '../toc-slideout/context';
 import {useDialog} from '~/components/dialog/dialog';
 import RecommendedCallout from './recommended-callout/recommended-callout';
@@ -179,28 +177,6 @@ export function usePrintCopyDialog() {
     return {onClick, PCDialog};
 }
 
-export function PrintOption({model, icon = faBook}) {
-    const slug = (model.slug || '').replace('books/', '');
-    const amazonDataLink = useAmazonAssociatesLink(slug);
-    const intl = useIntl();
-    const printText = intl.formatMessage({id: 'getit.print'});
-    const text = $.isPolish(model.title)
-        ? 'Zamów egzemplarz drukowany'
-        : printText;
-    const {onClick, PCDialog} = usePrintCopyDialog({});
-
-    return (
-        <SimpleLinkOption
-            link={isRealPrintLink(amazonDataLink.url)}
-            icon={icon}
-            text={text}
-            onClick={onClick}
-        >
-            <PCDialog text={text} amazonDataLink={amazonDataLink} />
-        </SimpleLinkOption>
-    );
-}
-
 export function BookshareOption({model}) {
     return (
         <SimpleLinkOption

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

@@ -1,10 +1,14 @@
 import React from 'react';
 import RawHTML from '~/components/jsx-helpers/raw-html';
+import useDetailsContext from '../../../context';
 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 { useIntl } from 'react-intl';
+import {useIntl} from 'react-intl';
 import './order-print-copy.scss';
+import useAmazonAssociatesLink from '../amazon-associates-link';
+import amazonSnippet from '~/models/amazon-snippet';
+import {usePromise} from '~/helpers/use-data';
 
 function Header({entry}) {
     return (
@@ -21,115 +25,133 @@ function Header({entry}) {
 function PhoneBox({entry, closeAfterDelay}) {
     return (
         <a
-            className="box"
+            className='box'
             href={entry.buttonUrl}
-            onClick={closeAfterDelay} data-track="Print"
+            onClick={closeAfterDelay}
+            data-track='Print'
         >
             <Header entry={entry} />
         </a>
     );
 }
 
-function PhoneBoxes({contentArray, ...otherProps}) {
+function PhoneBoxes({contentArray}) {
     return (
         <div className={`phone-version boxes boxes-${contentArray.length}`}>
-            {contentArray.map((entry) => <PhoneBox {...{entry, ...otherProps}} key={entry} />)}
+            {contentArray.map((entry) => (
+                <PhoneBox {...{entry}} key={entry} />
+            ))}
         </div>
     );
 }
 
 function Button({href, text, buttonClass, onClick}) {
     return (
-        <a className={`btn ${buttonClass}`} href={href} onClick={onClick} data-track="Print">
+        <a
+            className={`btn ${buttonClass}`}
+            href={href}
+            onClick={onClick}
+            data-track='Print'
+        >
             {text}
         </a>
     );
 }
 
-function DesktopBox({index, entry, closeAfterDelay}) {
+function DesktopBox({index, entry}) {
     const buttonClass = ['primary', 'secondary'][index];
 
-    return (<div className="box" key={entry.headerText}>
-        <Header entry={entry} />
-        <Button
-            buttonClass={buttonClass}
-            href={entry.buttonUrl}
-            onClick={closeAfterDelay}
-            text={entry.buttonText}
-        />
-    </div>);
+    if (typeof entry === 'string') {
+        return <RawHTML html={entry} />;
+    }
+
+    return (
+        <div className='box' key={entry.headerText}>
+            <Header entry={entry} />
+            <Button
+                buttonClass={buttonClass}
+                href={entry.buttonUrl}
+                text={entry.buttonText}
+            />
+        </div>
+    );
 }
 
-function DesktopBoxes({contentArray, ...otherProps}) {
+function DesktopBoxes({contentArray}) {
     return (
         <div className={`larger-version boxes boxes-${contentArray.length}`}>
-            {
-                contentArray.map((entry, index) =>
-                    <DesktopBox {...{index, entry, ...otherProps}} key={entry} />
-                )
-            }
+            {contentArray.map((entry, index) => (
+                <DesktopBox {...{index, entry}} key={entry} />
+            ))}
         </div>
     );
 }
 
-export default function OrderPrintCopy({amazonDataLink, hideDialog}) {
-    const { formatMessage } = useIntl();
-    const contentArray = React.useMemo(
-        () => {
-            const individual = formatMessage({
-                id: 'printcopy.individual',
-                defaultMessage: 'Individual'
-            });
-            const bookstore = formatMessage({
-                id: 'printcopy.bookstore',
-                defaultMessage: 'Bookstore'
-            });
-            const disclosure = formatMessage({
-                id: 'printcopy.disclosure',
-                defaultMessage: '***'
-            });
-            const button1Text = formatMessage({
-                id: 'printcopy.button1',
-                defaultMessage: 'Order a personal copy'
-            });
-            const button2Text = formatMessage({
-                id: 'printcopy.button2',
-                defaultMessage: 'Order options'
-            });
+export default function OrderPrintCopy({slug}) {
+    const amazonDataLink = useAmazonAssociatesLink(slug);
+    const {formatMessage} = useIntl();
+    const {iframe} = useDetailsContext();
+
+    const iframeCode = React.useMemo(
+        () => iframe.length > 0 ? (`
+            ${iframe}
+            <div>
+                ${amazonDataLink.disclosure}
+            </div>
+        `) : null,
+        [iframe, amazonDataLink.disclosure]
+    );
+    const contentArray = React.useMemo(() => {
+        const individual = formatMessage({
+            id: 'printcopy.individual',
+            defaultMessage: 'Individual'
+        });
+        const bookstore = formatMessage({
+            id: 'printcopy.bookstore',
+            defaultMessage: 'Bookstore'
+        });
+        const disclosure = formatMessage({
+            id: 'printcopy.disclosure',
+            defaultMessage: '***'
+        });
+        const button1Text = formatMessage({
+            id: 'printcopy.button1',
+            defaultMessage: 'Order a personal copy'
+        });
+        const button2Text = formatMessage({
+            id: 'printcopy.button2',
+            defaultMessage: 'Order options'
+        });
 
-            return [
+        return [
+            (iframeCode ??
                 {
                     headerText: individual,
                     headerIcon: faUser,
-                    disclosure: disclosure === '***' ? amazonDataLink.disclosure : disclosure,
+                    disclosure:
+                        disclosure === '***'
+                            ? amazonDataLink.disclosure
+                            : disclosure,
                     buttonText: button1Text,
                     buttonUrl: amazonDataLink.url
-                },
-                {
-                    headerText: bookstore,
-                    headerIcon: faUsers,
-                    buttonText: button2Text,
-                    buttonUrl: 'https://buyprint.openstax.org/bookstore-suppliers'
-                }
-            ];
-        },
-        [amazonDataLink, formatMessage]
-    );
-    const otherProps = React.useMemo(
-        () => ({
-            closeAfterDelay(event) {
-                if (event) {
-                    window.requestAnimationFrame(hideDialog);
-                }
+                }),
+            {
+                headerText: bookstore,
+                headerIcon: faUsers,
+                buttonText: button2Text,
+                buttonUrl: 'https://buyprint.openstax.org/bookstore-suppliers'
             }
-        }),
-        [hideDialog]
-    );
+        ];
+    }, [amazonDataLink, formatMessage, iframeCode]);
+    const blurb = usePromise(amazonSnippet, '');
 
     return (
-        <nav className="order-print-copy">
-            <PhoneBoxes {...{contentArray, ...otherProps}} />
-            <DesktopBoxes {...{contentArray, ...otherProps}} />
+        <nav className='order-print-copy'>
+            <div className='blurb'>
+                {blurb}
+            </div>
+            <PhoneBoxes {...{contentArray}} />
+            <DesktopBoxes {...{contentArray}} />
         </nav>
     );
 }

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

@@ -4,6 +4,11 @@
 
     background-color: ui-color(page-bg);
 
+    .blurb {
+        padding: 1rem $normal-margin 0;
+        max-width: 22rem;
+    }
+
     h1 {
         @include set-font(h4);
 
@@ -23,8 +28,6 @@
             @include wider-than($phone-max) {
                 display: grid;
                 grid-gap: 2rem;
-                max-width: 90rem; // Matches dialog width
-                overflow-x: auto;
             }
         }
 
@@ -38,28 +41,16 @@
         display: grid;
         grid-gap: 2rem;
         justify-items: center;
-        padding: 2rem;
+        padding: 2rem 0.5rem;
 
         @include width-up-to($phone-max) {
             width: 100%;
         }
 
         @include wider-than($phone-max) {
             grid-gap: 4rem;
+            grid-template-columns: auto;
             margin: auto;
-            padding: 4rem;
-
-            &.boxes-1 {
-                grid-template-columns: auto;
-            }
-
-            &.boxes-2 {
-                grid-template-columns: 1fr 1fr;
-            }
-
-            &.boxes-3 {
-                grid-template-columns: 1fr 1fr 1fr;
-            }
         }
     }
 

src/app/pages/details/common/get-this-title.js

@@ -2,9 +2,10 @@ import React from 'react';
 import {useToggle} from '~/helpers/data';
 import userModel from '~/models/usermodel';
 import {
-    TocOption, WebviewOption, PdfOption, PrintOption, BookshareOption,
+    TocOption, WebviewOption, PdfOption, BookshareOption,
     IbooksOption, KindleOption, CheggOption, OptionExpander
 } from './get-this-title-files/options';
+import OrderPrintCopy from './get-this-title-files/order-print-copy/order-print-copy';
 import './get-this-title-files/get-this-title.scss';
 import linkhelper from '~/helpers/link';
 
@@ -59,7 +60,6 @@ export default function GetThisTitle({model}) {
                     <TocOption model={model} />
                     <WebviewOption model={model} />
                     <PdfOption model={model} />
-                    <PrintOption model={model} />
                     <CheggOption model={model} />
                     {
                         expanded &&
@@ -68,6 +68,7 @@ export default function GetThisTitle({model}) {
                     <OptionExpander {...{expanded, additionalOptions}} toggle={toggleExpanded} />
                 </div>
             </div>
+            <OrderPrintCopy slug={model.slug} />
         </div>
     );
 }

src/app/pages/details/context.d.ts

@@ -25,6 +25,7 @@ export type ContextValues = {
     communityResourceBlurb: string;
     communityResourceFeatureLinkUrl: string;
     communityResourceFeatureText: string;
+    iframe: string;
     webinarContent?: WebinarContent;
 };
 

src/app/pages/details/context.js

@@ -6,7 +6,25 @@ function useContextValue({data}) {
 
     data.comingSoon = data.bookState === 'coming_soon';
 
-    return {...data, useCardBackground, setUseCardBackground};
+    // TODO remove this when the field is in the CMS
+    const iframe = data.slug === 'books/college-success' ?
+    `<iframe
+    sandbox='allow-popups allow-scripts allow-modals allow-forms allow-same-origin'
+    style='width:120px;height:240px;'
+    marginWidth='0'
+    marginHeight='0'
+    scrolling='no'
+    frameBorder='0'
+    src=${
+        '//ws-na.amazon-adsystem.com/widgets/q?ServiceVersion=20070822&OneJS=1' +
+        '&Operation=GetAdHtml&MarketPlace=US&source=ss&ref=as_ss_li_til&ad_type=product_link' +
+        '&tracking_id=openstax00-20&language=en_US&marketplace=amazon&region=US&' +
+        'placement=1951693183&asins=1951693183&linkId=a97817093e32d0b3fb1df46222197674' +
+        '&show_border=true&link_opens_in_new_window=true'
+    }
+    ></iframe>` : '';
+
+    return {iframe, ...data, useCardBackground, setUseCardBackground};
 }
 
 const {useContext, ContextProvider} = buildContext({useContextValue});