Decompose give-before-pdf

src/app/components/book-tile/dropdown-menu.tsx

@@ -5,7 +5,9 @@ import {
     isRealPrintLink
 } from '~/pages/details/common/get-this-title-files/options';
 import {FormattedMessage, useIntl} from 'react-intl';
-import useGiveDialog from '~/pages/details/common/get-this-title-files/give-before-pdf/give-before-pdf';
+import useGiveDialog, {
+    VariantOptions
+} from '~/pages/details/common/get-this-title-files/give-before-pdf/use-give-dialog';
 import {isMobileDisplay} from '~/helpers/device';
 import {useToggle} from '~/helpers/data';
 import {FontAwesomeIcon} from '@fortawesome/react-fontawesome';
@@ -160,7 +162,7 @@ function MenuItem({
 }
 
 type MenuItemWithGiveDialogProps = {
-    variant?: string;
+    variant?: VariantOptions;
 } & Parameters<typeof MenuItem>[0];
 function MenuItemWithGiveDialog({
     variant,

src/app/components/dialog/dialog.d.ts

@@ -0,0 +1,27 @@
+import React from 'react';
+
+export default function Dialog({
+    isOpen,
+    title,
+    onPutAway,
+    children,
+    className,
+    closeOnOutsideClick = false
+}: React.PropsWithChildren<{
+    isOpen: boolean;
+    title: string;
+    onPutAway: () => void;
+    className?: string;
+    closeOnOutsideClick?: boolean;
+}>): React.ReactNode;
+
+export function useDialog(
+    initallyOpen?: boolean
+): [
+    BoundDialog: ({
+        children
+    }: React.PropsWithChildren<object>) => React.ReactNode,
+    open: () => void,
+    close: () => void,
+    showDialog: boolean
+];

src/app/pages/details/common/get-this-title-files/give-before-pdf/common-elements.tsx

@@ -0,0 +1,90 @@
+import React from 'react';
+import {enroll} from '@openstax/experiments';
+import {FontAwesomeIcon} from '@fortawesome/react-fontawesome';
+import {faHeart} from '@fortawesome/free-solid-svg-icons/faHeart';
+import useGiveLinks from './use-give-links';
+
+type Data = {
+    header_subtitle: string;
+    header_image: string;
+    header_title: string;
+    give_link_text: string;
+    thank_you_link: string;
+    thank_you_link_text: string;
+    giving_optional: string;
+};
+export default function CommonElements({
+    data,
+    onThankYouClick
+}: {
+    data: Data;
+    onThankYouClick: (event: React.MouseEvent) => void;
+}) {
+    const [controlLink, alternateLink] = useGiveLinks();
+    const donationExperiment = enroll({
+        name: 'Donation Experiment 2023',
+        variants: [
+            {
+                name: 'control',
+                // eslint-disable-next-line camelcase
+                header_subtitle: data.header_subtitle,
+                giveLink: controlLink
+            },
+            {
+                name: 'public good',
+                // eslint-disable-next-line camelcase
+                header_subtitle:
+                    'Join us in sustaining OpenStax as a public good for years to come by giving today.',
+                giveLink: alternateLink
+            }
+        ]
+    });
+
+    return (
+        <React.Fragment>
+            <img
+                className='header-image'
+                src={data.header_image}
+                alt=''
+                height='165'
+                width='165'
+            />
+            <p>
+                <span className='header-title'>{data.header_title}</span>
+                <br />
+                <span>{donationExperiment.header_subtitle}</span>
+            </p>
+            <div className='button-row'>
+                <a
+                    href={donationExperiment.giveLink}
+                    className='btn primary'
+                    onClick={OpenGiveInNewWindow}
+                    data-nudge-action='interacted'
+                >
+                    {data.give_link_text}
+                    <FontAwesomeIcon icon={faHeart} />
+                </a>
+                <a
+                    href={data.thank_you_link}
+                    className='btn secondary'
+                    onClick={onThankYouClick}
+                    data-nudge-action='thank-you'
+                >
+                    {data.thank_you_link_text}
+                </a>
+            </div>
+            <p className='giving-optional'>{data.giving_optional}</p>
+            <hr />
+        </React.Fragment>
+    );
+}
+
+function OpenGiveInNewWindow(event: React.MouseEvent) {
+    event.preventDefault();
+    const url = (event.target as HTMLAnchorElement).href;
+    const {innerWidth, innerHeight} = window;
+    const w = 0.8 * innerWidth;
+    const h = 0.8 * innerHeight;
+
+    window.open(url, 'givewindow', `menubar=0,width=${w},height=${h}`);
+}

src/app/pages/details/common/get-this-title-files/give-before-pdf/give-before-online.tsx

@@ -0,0 +1,33 @@
+import React from 'react';
+import ThankYou, {useOnThankYouClick} from './thank-you-form';
+import CommonElements from './common-elements';
+import type {DonationPopupData} from './use-donation-popup-data';
+
+export default function GiveBeforeOnline({
+    link,
+    close,
+    data
+}: {
+    link: string;
+    close: () => void;
+    data: DonationPopupData;
+}) {
+    const {showThankYou, onThankYouClick} = useOnThankYouClick();
+
+    if (showThankYou) {
+        return <ThankYou link={link} close={close} />;
+    }
+
+    return (
+        <div
+            className='give-before-pdf'
+            data-analytics-view
+            data-analytics-nudge='donate'
+        >
+            <CommonElements data={data} onThankYouClick={onThankYouClick} />
+            <a href={link} onClick={close} className='btn go-to'>
+                Go to your book
+            </a>
+        </div>
+    );
+}