refactor: elevate download with donation to component level

packages/components/src/DownloadFileFromLink/DownloadFileFromLink.stories.tsx

@@ -9,21 +9,26 @@ export default {
 
 export const Default: StoryFn<typeof DownloadFileFromLink> = () => (
   <DownloadFileFromLink
-    link={'https://example.com'}
+    fileLink={'https://example.com'}
     handleClick={async () => {
       alert('Clicked')
     }}
+    isLoggedIn
+    fileDownloadCount={0}
+    files={[]}
+    themeStoreDonationProps={{}}
   />
 )
 
 export const LoggedOut: StoryFn<typeof DownloadFileFromLink> = () => (
   <DownloadFileFromLink
-    link={'https://example.com'}
+    fileLink={'https://example.com'}
     handleClick={async () => {
       alert('Clicked')
     }}
-    redirectToSignIn={async () => {
-      alert('Redirect to Sign In')
-    }}
+    isLoggedIn={false}
+    fileDownloadCount={0}
+    files={[]}
+    themeStoreDonationProps={{}}
   />
 )

packages/components/src/DownloadFileFromLink/DownloadFileFromLink.test.tsx

@@ -1,18 +1,96 @@
 import '@testing-library/jest-dom/vitest'
 
-import { describe, expect, it } from 'vitest'
+import { fireEvent, render } from '@testing-library/react'
+import { describe, expect, it, vi } from 'vitest'
 
-import { render } from '../test/utils'
-import { Default } from './DownloadFileFromLink.stories'
+import { DownloadFileFromLink } from './DownloadFileFromLink'
 
-import type { DownloadFileFromLinkProps } from './DownloadFileFromLink'
+import type { IUploadedFileMeta } from './types'
 
-describe('DownloadFiles', () => {
-  it('validates the component behaviour', () => {
-    const { getByText } = render(
-      <Default {...(Default.args as DownloadFileFromLinkProps)} />,
+const mockedUsedNavigate = vi.fn()
+vi.mock('react-router-dom', () => ({
+  useNavigate: () => mockedUsedNavigate,
+}))
+
+vi.mock('src/common/hooks/useCommonStores', () => ({
+  __esModule: true,
+  useCommonStores: vi.fn(),
+}))
+
+describe('DownloadFileFromLink', () => {
+  it('when logged out, requires users to login', () => {
+    const { getAllByTestId } = render(
+      <DownloadFileFromLink
+        handleClick={vi.fn()}
+        isLoggedIn={false}
+        fileDownloadCount={0}
+        fileLink="http://youtube.com/"
+        files={[]}
+        themeStoreDonationProps={{}}
+      />,
     )
 
-    expect(getByText('Download files')).toBeInTheDocument()
+    const downloadButton = getAllByTestId('downloadButton')[0]
+    fireEvent.click(downloadButton)
+
+    expect(mockedUsedNavigate).toHaveBeenCalledWith('/sign-in')
+  })
+
+  it('when logged in, opens the donation modal for fileLink', () => {
+    const handleClick = vi.fn()
+    const fileLink = 'http://youtube.com/'
+
+    const { getAllByTestId } = render(
+      <DownloadFileFromLink
+        handleClick={handleClick}
+        isLoggedIn={true}
+        fileDownloadCount={0}
+        fileLink={fileLink}
+        files={[]}
+        themeStoreDonationProps={{}}
+      />,
+    )
+
+    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 logged in, opens the donation modal for files', () => {
+    const downloadUrl = 'http://great-url.com/'
+    const handleClick = vi.fn()
+
+    const { getAllByTestId } = render(
+      <DownloadFileFromLink
+        handleClick={handleClick}
+        isLoggedIn={true}
+        fileDownloadCount={0}
+        fileLink={undefined}
+        files={[
+          {
+            downloadUrl,
+            name: 'first-file',
+            size: 435435,
+          } as IUploadedFileMeta,
+        ]}
+        themeStoreDonationProps={{}}
+      />,
+    )
+
+    const downloadButton = getAllByTestId('downloadButton')[0]
+    fireEvent.click(downloadButton)
+
+    expect(getAllByTestId('DonationRequestSkip')[0]).toHaveAttribute(
+      'href',
+      downloadUrl,
+    )
+    expect(getAllByTestId('DonationRequest')[0]).toBeInTheDocument()
+    expect(handleClick).not.toHaveBeenCalled()
   })
 })

packages/components/src/DownloadFileFromLink/DownloadFileFromLink.tsx

@@ -1,28 +1,92 @@
-import { DownloadButton } from '../DownloadButton/DownloadButton'
-import { ExternalLink } from '../ExternalLink/ExternalLink'
+import { useState } from 'react'
+import { useNavigate } from 'react-router-dom'
+import {
+  DonationRequestModal,
+  DownloadButton,
+  DownloadCounter,
+  DownloadStaticFile,
+} from 'oa-components'
 
-export interface DownloadFileFromLinkProps {
-  link: string
-  handleClick?: () => Promise<void>
-  redirectToSignIn?: () => Promise<void>
+import type { IThemeStoreDonationProps, IUploadedFileMeta } from './types'
+
+export interface IProps {
+  handleClick: () => Promise<void>
+  isLoggedIn: boolean
+  fileDownloadCount: number
+  fileLink: string | undefined
+  files: (IUploadedFileMeta | File | null)[] | undefined
+  themeStoreDonationProps: IThemeStoreDonationProps | undefined
 }
 
-export const DownloadFileFromLink = (props: DownloadFileFromLinkProps) => {
+export const DownloadFileFromLink = (props: IProps) => {
+  const {
+    handleClick,
+    fileDownloadCount,
+    fileLink,
+    files,
+    isLoggedIn,
+    themeStoreDonationProps,
+  } = props
+  const [isModalOpen, setIsModalOpen] = useState<boolean>(false)
+  const [link, setLink] = useState<string>('')
+  const navigate = useNavigate()
+
+  const toggleIsModalOpen = () => setIsModalOpen(!isModalOpen)
+
+  const callback = () => {
+    handleClick()
+    toggleIsModalOpen()
+  }
+
+  const filteredFiles: IUploadedFileMeta[] | undefined = files?.filter(
+    (file): file is IUploadedFileMeta => file !== null && 'downloadUrl' in file,
+  )
+
   return (
     <>
-      {!props.redirectToSignIn ? (
-        <ExternalLink
-          href={props.link}
-          onClick={() => props.handleClick && props.handleClick()}
-        >
-          <DownloadButton isLoggedIn onClick={() => {}} />
-        </ExternalLink>
-      ) : (
+      <DonationRequestModal
+        body={themeStoreDonationProps?.body}
+        callback={callback}
+        iframeSrc={themeStoreDonationProps?.iframeSrc}
+        imageURL={themeStoreDonationProps?.imageURL}
+        isOpen={isModalOpen}
+        link={link}
+        onDidDismiss={() => toggleIsModalOpen()}
+      />
+
+      {!isLoggedIn && (
         <DownloadButton
-          onClick={() => props.handleClick && props.handleClick()}
+          onClick={() => navigate('/sign-in')}
           isLoggedIn={false}
         />
       )}
+      {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
+              />
+            ))}
+        </>
+      )}
+      <DownloadCounter total={fileDownloadCount} />
     </>
   )
 }

packages/components/src/DownloadFileFromLink/types.ts

@@ -0,0 +1,16 @@
+export interface IUploadedFileMeta {
+  downloadUrl: string
+  contentType?: string | null
+  fullPath: string
+  name: string
+  type: string
+  size: number
+  timeCreated: string
+  updated: string
+}
+
+export interface IThemeStoreDonationProps {
+  body?: string
+  iframeSrc?: string
+  imageURL?: string
+}