Show give dialog when downloading PDF from new Subjects

For: openstax/openstax.org#2352
openstax · Oct 6, 2023 · 08591fc · 08591fc
1 parent d462a6f
commit 08591fc
Showing 1 changed file with 29 additions and 7 deletions.
diff --git a/src/app/components/book-tile/book-tile.js b/src/app/components/book-tile/book-tile.js
@@ -8,6 +8,8 @@ import { FormattedMessage, useIntl } from 'react-intl';
 import useAmazonAssociatesLink from '~/pages/details/common/get-this-title-files//amazon-associates-link';
 import { usePrintCopyDialog, isRealPrintLink } from '~/pages/details/common/get-this-title-files/options';
 import bookPromise from '~/models/book-titles';
+import useGiveDialog from '~/pages/details/common/get-this-title-files/give-before-pdf/give-before-pdf';
+import {isMobileDisplay} from '~/helpers/device';
 import cn from 'classnames';
 import './book-tile.scss';
 
@@ -85,13 +87,7 @@ function GetTheBookDropdown({ bookInfo }) {
                     />
                 </a>
                 {
-                    pdfLink &&
-                    <a role="menuitem" href={pdfLink}>
-                        <FormattedMessage
-                            id="getit.pdf.download"
-                            defaultMessage="Download a PDF"
-                        />
-                    </a>
+                    pdfLink && <PDFLinkWithGiveDialog pdfLink={pdfLink} />
                 }
                 <PrintOption bookInfo={bookInfo} />
                 <hr />
@@ -115,6 +111,32 @@ function GetTheBookDropdown({ bookInfo }) {
     );
 }
 
+function PDFLinkWithGiveDialog({pdfLink}) {
+    const {GiveDialog, open, enabled} = useGiveDialog();
+
+    const openGiveDialog = React.useCallback(
+        (event) => {
+            if (enabled && !isMobileDisplay()) {
+                event.preventDefault();
+                open();
+            }
+        },
+        [enabled, open]
+    );
+
+    return (
+        <React.Fragment>
+            <a role="menuitem" href={pdfLink} onClick={openGiveDialog}>
+                <FormattedMessage
+                    id="getit.pdf.download"
+                    defaultMessage="Download a PDF"
+                />
+            </a>
+            <GiveDialog link={pdfLink} />
+        </React.Fragment>
+    );
+}
+
 function useBookInfo(id) {
     const [state, setState] = React.useState();