feat: add donation request to local howto files

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 () => {

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>

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"
+  />
+)

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()
+  })
 })

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 />

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

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,16 +75,20 @@ export const DownloadStaticFile = ({
   allowDownload,
   handleClick,
   redirectToSignIn,
+  forDonationRequest,
+  isLoggedIn,
 }: IProps) => {
   const size = bytesToSize(file.size || 0)
 
   if (!file) {
     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"

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()
   })