From c449f9af7a8d58ea21b37082f3542f3dee1f4381 Mon Sep 17 00:00:00 2001
From: Ben Furber <ben.furber@googlemail.com>
Date: Fri, 14 Jun 2024 11:59:07 +0100
Subject: [PATCH] feat: add donation request to local howto files

---
 .../DonationRequest/DonationRequest.test.tsx  |  2 +-
 .../src/DonationRequest/DonationRequest.tsx   |  1 +
 .../DownloadButton/DownloadButton.stories.tsx | 12 ++-
 .../DownloadButton/DownloadButton.test.tsx    | 12 ++-
 .../src/DownloadButton/DownloadButton.tsx     | 17 ++++-
 .../DownloadFileFromLink.tsx                  |  2 +-
 .../DownloadStaticFile/DownloadStaticFile.tsx | 24 +++++-
 src/common/DownloadWithDonationAsk.test.tsx   | 73 +++++++++++++++++--
 src/common/DownloadWithDonationAsk.tsx        | 71 +++++++++++++++---
 .../Howto/HowtoDownloads/HowtoDownloads.tsx   | 39 ++--------
 10 files changed, 190 insertions(+), 63 deletions(-)

diff --git a/packages/components/src/DonationRequest/DonationRequest.test.tsx b/packages/components/src/DonationRequest/DonationRequest.test.tsx
index b8ddcc7761..51dbbc0a73 100644
--- a/packages/components/src/DonationRequest/DonationRequest.test.tsx
+++ b/packages/components/src/DonationRequest/DonationRequest.test.tsx
@@ -4,7 +4,7 @@ import { fireEvent } from '@testing-library/react'
 import { describe, expect, it, vi } from 'vitest'
 
 import { render } from '../test/utils'
-import { BUTTON_LABEL,DonationRequest } from './DonationRequest'
+import { BUTTON_LABEL, DonationRequest } from './DonationRequest'
 
 describe('DonationRequest', () => {
   it('shows the expected content', async () => {
diff --git a/packages/components/src/DonationRequest/DonationRequest.tsx b/packages/components/src/DonationRequest/DonationRequest.tsx
index c4981f130c..6663ee9cd7 100644
--- a/packages/components/src/DonationRequest/DonationRequest.tsx
+++ b/packages/components/src/DonationRequest/DonationRequest.tsx
@@ -99,6 +99,7 @@ export const DonationRequest = (props: IProps) => {
           href={link}
           onClick={callback}
           data-cy="DonationRequestSkip"
+          data-testid="DonationRequestSkip"
         >
           <Button>{BUTTON_LABEL}</Button>
         </ExternalLink>
diff --git a/packages/components/src/DownloadButton/DownloadButton.stories.tsx b/packages/components/src/DownloadButton/DownloadButton.stories.tsx
index 5966326cc0..95984d6be6 100644
--- a/packages/components/src/DownloadButton/DownloadButton.stories.tsx
+++ b/packages/components/src/DownloadButton/DownloadButton.stories.tsx
@@ -7,4 +7,14 @@ export default {
   component: DownloadButton,
 } as Meta<typeof DownloadButton>
 
-export const Default: StoryFn<typeof DownloadButton> = () => <DownloadButton />
+export const Default: StoryFn<typeof DownloadButton> = () => (
+  <DownloadButton onClick={() => {}} />
+)
+
+export const CustomDetails: StoryFn<typeof DownloadButton> = () => (
+  <DownloadButton
+    onClick={() => {}}
+    glyph="download-cloud"
+    label="Hello there"
+  />
+)
diff --git a/packages/components/src/DownloadButton/DownloadButton.test.tsx b/packages/components/src/DownloadButton/DownloadButton.test.tsx
index 6d626be9aa..930ed05509 100644
--- a/packages/components/src/DownloadButton/DownloadButton.test.tsx
+++ b/packages/components/src/DownloadButton/DownloadButton.test.tsx
@@ -3,14 +3,22 @@ import '@testing-library/jest-dom/vitest'
 import { describe, expect, it } from 'vitest'
 
 import { render } from '../test/utils'
-import { Default } from './DownloadButton.stories'
+import { CustomDetails, Default } from './DownloadButton.stories'
 
 import type { IProps } from './DownloadButton'
 
 describe('DownloadButton', () => {
-  it('validates the component behaviour', () => {
+  it('renders the default state', () => {
     const { getByText } = render(<Default {...(Default.args as IProps)} />)
 
     expect(getByText('Download files')).toBeInTheDocument()
   })
+
+  it('renders the custom options', () => {
+    const { getByText } = render(
+      <CustomDetails {...(CustomDetails.args as IProps)} />,
+    )
+
+    expect(getByText('Hello there')).toBeInTheDocument()
+  })
 })
diff --git a/packages/components/src/DownloadButton/DownloadButton.tsx b/packages/components/src/DownloadButton/DownloadButton.tsx
index ea663ee146..b16c29e12f 100644
--- a/packages/components/src/DownloadButton/DownloadButton.tsx
+++ b/packages/components/src/DownloadButton/DownloadButton.tsx
@@ -3,12 +3,21 @@ import { Flex, Text } from 'theme-ui'
 import { Icon } from '../Icon/Icon'
 import { Tooltip } from '../Tooltip/Tooltip'
 
+import type { IGlyphs } from '../Icon/types'
+
 export interface IProps {
-  onClick?: () => void
+  onClick: () => void
   isLoggedIn?: boolean
+  label?: string
+  glyph?: keyof IGlyphs
 }
 
-export const DownloadButton = ({ onClick, isLoggedIn }: IProps) => {
+export const DownloadButton = ({
+  glyph,
+  isLoggedIn,
+  label,
+  onClick,
+}: IProps) => {
   return (
     <>
       <Flex
@@ -29,9 +38,9 @@ export const DownloadButton = ({ onClick, isLoggedIn }: IProps) => {
         data-testid="downloadButton"
         data-tip={!isLoggedIn ? 'Login to download' : ''}
       >
-        <Icon size={24} glyph={'external-url'} mr={3} />
+        <Icon size={24} glyph={glyph || 'external-url'} mr={3} />
         <Text sx={{ flex: 1, fontSize: 1, color: 'black' }} mr={3}>
-          Download files
+          {label ? label : 'Download files'}
         </Text>
       </Flex>
       <Tooltip />
diff --git a/packages/components/src/DownloadFileFromLink/DownloadFileFromLink.tsx b/packages/components/src/DownloadFileFromLink/DownloadFileFromLink.tsx
index fe435f71c6..1649e4d6e0 100644
--- a/packages/components/src/DownloadFileFromLink/DownloadFileFromLink.tsx
+++ b/packages/components/src/DownloadFileFromLink/DownloadFileFromLink.tsx
@@ -15,7 +15,7 @@ export const DownloadFileFromLink = (props: DownloadFileFromLinkProps) => {
           href={props.link}
           onClick={() => props.handleClick && props.handleClick()}
         >
-          <DownloadButton isLoggedIn />
+          <DownloadButton isLoggedIn onClick={() => {}} />
         </ExternalLink>
       ) : (
         <DownloadButton
diff --git a/packages/components/src/DownloadStaticFile/DownloadStaticFile.tsx b/packages/components/src/DownloadStaticFile/DownloadStaticFile.tsx
index 2af45249b4..25f7411f05 100644
--- a/packages/components/src/DownloadStaticFile/DownloadStaticFile.tsx
+++ b/packages/components/src/DownloadStaticFile/DownloadStaticFile.tsx
@@ -1,6 +1,7 @@
 import * as React from 'react'
 import { Flex, Text } from 'theme-ui'
 
+import { DownloadButton } from '../DownloadButton/DownloadButton'
 import { ExternalLink } from '../ExternalLink/ExternalLink'
 import { Icon } from '../Icon/Icon'
 import { Tooltip } from '../Tooltip/Tooltip'
@@ -13,8 +14,10 @@ export interface IProps {
     size: number
     downloadUrl?: string | undefined
   }
+  forDonationRequest?: boolean
+  isLoggedIn?: boolean
   allowDownload?: boolean
-  handleClick?: () => Promise<void>
+  handleClick?: () => void
   redirectToSignIn?: () => Promise<void>
 }
 
@@ -72,6 +75,8 @@ export const DownloadStaticFile = ({
   allowDownload,
   handleClick,
   redirectToSignIn,
+  forDonationRequest,
+  isLoggedIn,
 }: IProps) => {
   const size = bytesToSize(file.size || 0)
 
@@ -79,9 +84,11 @@ export const DownloadStaticFile = ({
     return null
   }
 
+  const forDownload = allowDownload && file.downloadUrl && !redirectToSignIn
+
   return (
     <>
-      {allowDownload && file.downloadUrl && !redirectToSignIn ? (
+      {forDownload && (
         <ExternalLink
           m={1}
           onClick={() => handleClick && handleClick()}
@@ -91,7 +98,18 @@ export const DownloadStaticFile = ({
         >
           <FileDetails file={file} glyph="download-cloud" size={size} />
         </ExternalLink>
-      ) : (
+      )}
+
+      {forDonationRequest && (
+        <DownloadButton
+          onClick={() => handleClick && handleClick()}
+          isLoggedIn={isLoggedIn}
+          label={`${file.name} (${size})`}
+          glyph="download-cloud"
+        />
+      )}
+
+      {!forDownload && !forDonationRequest && (
         <FileDetails
           file={file}
           glyph="download-cloud"
diff --git a/src/common/DownloadWithDonationAsk.test.tsx b/src/common/DownloadWithDonationAsk.test.tsx
index d8cb16a9bf..0c93b176a6 100644
--- a/src/common/DownloadWithDonationAsk.test.tsx
+++ b/src/common/DownloadWithDonationAsk.test.tsx
@@ -8,6 +8,8 @@ import { describe, expect, it, vi } from 'vitest'
 import { useCommonStores } from './hooks/useCommonStores'
 import { DownloadWithDonationAsk } from './DownloadWithDonationAsk'
 
+import type { IUserPPDB } from 'src/models'
+import type { IUploadedFileMeta } from 'src/stores/storage'
 import type { Mock } from 'vitest'
 
 const mockedUsedNavigate = vi.fn()
@@ -19,19 +21,33 @@ vi.mock('src/common/hooks/useCommonStores', () => ({
   __esModule: true,
   useCommonStores: vi.fn(),
 }))
-const userToMock = (user) => {
+const userToMock = (user?: IUserPPDB) => {
   return (useCommonStores as Mock).mockImplementation(() => ({
-    stores: { userStore: { user } },
+    stores: {
+      userStore: { user: user ?? undefined },
+      themeStore: {
+        currentTheme: {
+          donations: {
+            body: '',
+            iframeSrc: '',
+            imageURL: '',
+          },
+        },
+      },
+    },
   }))
 }
 
 describe('DownloadFileFromLink', () => {
   it('when logged out, requires users to login', () => {
+    userToMock()
     const { getAllByTestId } = render(
       <DownloadWithDonationAsk
         handleClick={vi.fn()}
         isLoggedIn={false}
-        link="http://youtube.com/"
+        fileDownloadCount={0}
+        fileLink="http://youtube.com/"
+        files={[]}
       />,
     )
 
@@ -41,7 +57,7 @@ describe('DownloadFileFromLink', () => {
     expect(mockedUsedNavigate).toHaveBeenCalledWith('/sign-in')
   })
 
-  it('when logged in, opens the link via handleClick', () => {
+  it('when logged in, opens via handleClick', () => {
     const user = FactoryUser()
     userToMock(user)
 
@@ -50,7 +66,9 @@ describe('DownloadFileFromLink', () => {
       <DownloadWithDonationAsk
         handleClick={handleClick}
         isLoggedIn={true}
-        link="http://youtube.com/"
+        fileDownloadCount={0}
+        fileLink="http://youtube.com/"
+        files={[]}
       />,
     )
 
@@ -60,23 +78,64 @@ describe('DownloadFileFromLink', () => {
     expect(handleClick).toHaveBeenCalled()
   })
 
-  it('when a beta-tester, opens the donation modal', () => {
+  it('when a beta-tester, opens the donation modal for fileLink', () => {
     const user = FactoryUser({ userRoles: [UserRole.BETA_TESTER] })
     userToMock(user)
 
     const handleClick = vi.fn()
+    const fileLink = 'http://youtube.com/'
 
     const { getAllByTestId } = render(
       <DownloadWithDonationAsk
         handleClick={handleClick}
         isLoggedIn={true}
-        link="http://youtube.com/"
+        fileDownloadCount={0}
+        fileLink={fileLink}
+        files={[]}
       />,
     )
 
     const downloadButton = getAllByTestId('downloadButton')[0]
     fireEvent.click(downloadButton)
 
+    expect(getAllByTestId('DonationRequestSkip')[0]).toHaveAttribute(
+      'href',
+      fileLink,
+    )
+    expect(getAllByTestId('DonationRequest')[0]).toBeInTheDocument()
+    expect(handleClick).not.toHaveBeenCalled()
+  })
+
+  it('when a beta-tester, opens the donation modal for files', () => {
+    const user = FactoryUser({ userRoles: [UserRole.BETA_TESTER] })
+    userToMock(user)
+
+    const downloadUrl = 'http://great-url.com/'
+    const handleClick = vi.fn()
+
+    const { getAllByTestId } = render(
+      <DownloadWithDonationAsk
+        handleClick={handleClick}
+        isLoggedIn={true}
+        fileDownloadCount={0}
+        fileLink={undefined}
+        files={[
+          {
+            downloadUrl,
+            name: 'first-file',
+            size: 435435,
+          } as IUploadedFileMeta,
+        ]}
+      />,
+    )
+
+    const downloadButton = getAllByTestId('downloadButton')[0]
+    fireEvent.click(downloadButton)
+
+    expect(getAllByTestId('DonationRequestSkip')[0]).toHaveAttribute(
+      'href',
+      downloadUrl,
+    )
     expect(getAllByTestId('DonationRequest')[0]).toBeInTheDocument()
     expect(handleClick).not.toHaveBeenCalled()
   })
diff --git a/src/common/DownloadWithDonationAsk.tsx b/src/common/DownloadWithDonationAsk.tsx
index c7431ccf87..90360b0e41 100644
--- a/src/common/DownloadWithDonationAsk.tsx
+++ b/src/common/DownloadWithDonationAsk.tsx
@@ -3,18 +3,23 @@ import { useNavigate } from 'react-router-dom'
 import {
   DonationRequestModal,
   DownloadButton,
+  DownloadCounter,
   DownloadFileFromLink,
+  DownloadStaticFile,
 } from 'oa-components'
 
 import { useCommonStores } from './hooks/useCommonStores'
 import { AuthWrapper } from './AuthWrapper'
 
 import type { UserRole } from 'src/models'
+import type { IUploadedFileMeta } from 'src/stores/storage'
 
 export interface IProps {
   handleClick: () => Promise<void>
   isLoggedIn: boolean
-  link: string
+  fileDownloadCount: number
+  fileLink: string | undefined
+  files: (IUploadedFileMeta | File | null)[] | undefined
 }
 
 /*
@@ -23,8 +28,9 @@ export interface IProps {
   can/should move to the component library.
 */
 export const DownloadWithDonationAsk = (props: IProps) => {
-  const { handleClick, isLoggedIn, link } = props
+  const { handleClick, isLoggedIn, fileDownloadCount, fileLink, files } = props
   const [isModalOpen, setIsModalOpen] = useState<boolean>(false)
+  const [link, setLink] = useState<string>('')
   const navigate = useNavigate()
   const { themeStore } = useCommonStores().stores
 
@@ -35,14 +41,9 @@ export const DownloadWithDonationAsk = (props: IProps) => {
     toggleIsModalOpen()
   }
 
-  if (!isLoggedIn) {
-    return (
-      <DownloadButton
-        onClick={async () => navigate('/sign-in')}
-        isLoggedIn={false}
-      />
-    )
-  }
+  const filteredFiles: IUploadedFileMeta[] | undefined = files?.filter(
+    (file): file is IUploadedFileMeta => file !== null && 'downloadUrl' in file,
+  )
 
   return (
     <>
@@ -59,11 +60,57 @@ export const DownloadWithDonationAsk = (props: IProps) => {
       <AuthWrapper
         roleRequired={'beta-tester' as UserRole}
         fallback={
-          <DownloadFileFromLink handleClick={handleClick} link={link} />
+          <>
+            {!isLoggedIn && (
+              <DownloadButton
+                onClick={async () => navigate('/sign-in')}
+                isLoggedIn={false}
+              />
+            )}
+
+            {isLoggedIn && fileLink && (
+              <DownloadFileFromLink handleClick={handleClick} link={fileLink} />
+            )}
+            {isLoggedIn &&
+              filteredFiles &&
+              filteredFiles.map((file, index) => (
+                <DownloadStaticFile
+                  allowDownload
+                  file={file}
+                  key={file ? file.name : `file-${index}`}
+                  handleClick={handleClick}
+                  isLoggedIn
+                />
+              ))}
+          </>
         }
       >
-        <DownloadButton onClick={toggleIsModalOpen} isLoggedIn />
+        <>
+          {fileLink && (
+            <DownloadButton
+              onClick={() => {
+                setLink(fileLink)
+                toggleIsModalOpen()
+              }}
+              isLoggedIn
+            />
+          )}
+          {filteredFiles &&
+            filteredFiles.map((file, index) => (
+              <DownloadStaticFile
+                file={file}
+                key={file ? file.name : `file-${index}`}
+                handleClick={() => {
+                  setLink(file.downloadUrl)
+                  toggleIsModalOpen()
+                }}
+                forDonationRequest
+                isLoggedIn
+              />
+            ))}
+        </>
       </AuthWrapper>
+      <DownloadCounter total={fileDownloadCount} />
     </>
   )
 }
diff --git a/src/pages/Howto/Content/Howto/HowtoDownloads/HowtoDownloads.tsx b/src/pages/Howto/Content/Howto/HowtoDownloads/HowtoDownloads.tsx
index af80baa456..5f01e09c35 100644
--- a/src/pages/Howto/Content/Howto/HowtoDownloads/HowtoDownloads.tsx
+++ b/src/pages/Howto/Content/Howto/HowtoDownloads/HowtoDownloads.tsx
@@ -1,6 +1,4 @@
 import { useState } from 'react'
-import { useNavigate } from 'react-router-dom'
-import { DownloadCounter, DownloadStaticFile } from 'oa-components'
 import { DownloadWithDonationAsk } from 'src/common/DownloadWithDonationAsk'
 import { useCommonStores } from 'src/common/hooks/useCommonStores'
 import { Flex } from 'theme-ui'
@@ -23,13 +21,8 @@ export const HowtoDownloads = ({ howto, loggedInUser }: IProps) => {
   const { _id, files, fileLink, total_downloads } = howto
   const [fileDownloadCount, setFileDownloadCount] = useState(total_downloads)
 
-  const navigate = useNavigate()
   const { howtoStore } = useCommonStores().stores
 
-  const redirectToSignIn = async () => {
-    navigate('/sign-in')
-  }
-
   const incrementDownloadCount = async () => {
     const updatedDownloadCount = await howtoStore.incrementDownloadCount(_id)
     setFileDownloadCount(updatedDownloadCount!)
@@ -54,31 +47,13 @@ export const HowtoDownloads = ({ howto, loggedInUser }: IProps) => {
 
   return (
     <Flex className="file-container" mt={3} sx={{ flexDirection: 'column' }}>
-      {fileLink && (
-        <DownloadWithDonationAsk
-          handleClick={handleDownloadClick}
-          link={fileLink}
-          isLoggedIn={!!loggedInUser}
-        />
-      )}
-      {files &&
-        files
-          .filter(Boolean)
-          .map(
-            (file, index) =>
-              file && (
-                <DownloadStaticFile
-                  allowDownload
-                  file={file}
-                  key={file ? file.name : `file-${index}`}
-                  handleClick={handleDownloadClick}
-                  redirectToSignIn={
-                    !loggedInUser ? redirectToSignIn : undefined
-                  }
-                />
-              ),
-          )}
-      <DownloadCounter total={fileDownloadCount} />
+      <DownloadWithDonationAsk
+        handleClick={handleDownloadClick}
+        fileLink={fileLink}
+        files={files}
+        isLoggedIn={!!loggedInUser}
+        fileDownloadCount={fileDownloadCount || 0}
+      />
     </Flex>
   )
 }