feat(harvest): Add dismissable alert when running

packages/cozy-harvest-lib/src/__mocks__/cozy-ui/transpiled/react/Icons/ArrowUp.js

@@ -0,0 +1 @@
+export default () => null

packages/cozy-harvest-lib/src/components/cards/LaunchTriggerAlert.jsx

@@ -13,6 +13,7 @@ import Typography from 'cozy-ui/transpiled/react/Typography'
 import { makeStyles } from 'cozy-ui/transpiled/react/styles'
 
 import LaunchTriggerAlertMenu from './LaunchTriggerAlertMenu'
+import { RunningAlert } from './RunningAlert'
 import { makeLabel } from './helpers'
 import { isDisconnected } from '../../helpers/konnectors'
 import { getAccountId, getKonnectorSlug } from '../../helpers/triggers'
@@ -65,6 +66,16 @@ export const LaunchTriggerAlert = ({
   const isClisk = konnectorPolicy.name === 'clisk'
   const isKonnectorDisconnected = isDisconnected(konnector, trigger)
 
+  const shouldDisplayRunningAlert = () => {
+    if (isInError) return false
+    if (isInMaintenance) return false
+    if (!isKonnectorRunnable) return false
+    if (isKonnectorDisconnected) return false
+    if (running && konnector.clientSide) return true
+
+    return false
+  }
+
   useEffect(() => {
     if (status === SUCCESS) {
       setShowSuccessSnackbar(true)
@@ -202,6 +213,9 @@ export const LaunchTriggerAlert = ({
           )}
         </div>
       </Alert>
+
+      {shouldDisplayRunningAlert() && <RunningAlert />}
+
       <Snackbar
         open={showSuccessSnackbar}
         onClose={() => setShowSuccessSnackbar(false)}

packages/cozy-harvest-lib/src/components/cards/RunningAlert.spec.tsx

@@ -0,0 +1,55 @@
+import { render, fireEvent } from '@testing-library/react'
+import React from 'react'
+
+import { RunningAlert } from './RunningAlert'
+
+// Mock the isFlagshipApp function for easier testing
+const mockIsFlagshipApp = jest.fn()
+
+jest.mock('cozy-device-helper', () => ({
+  isFlagshipApp: (): unknown => mockIsFlagshipApp()
+}))
+
+// Mock the translation hook with distinct strings
+jest.mock('cozy-ui/transpiled/react/I18n', () => ({
+  useI18n: (): {
+    t: jest.Mock
+  } => ({ t: jest.fn().mockImplementation(key => key as string) })
+}))
+
+describe('RunningAlert', () => {
+  it('renders correctly when isFlagshipApp returns true', () => {
+    mockIsFlagshipApp.mockReturnValue(true)
+
+    const { getByText } = render(<RunningAlert />)
+
+    // We're now using the translation keys as text
+    expect(
+      getByText('card.launchTrigger.runningAlert.title')
+    ).toBeInTheDocument()
+    expect(
+      getByText('card.launchTrigger.runningAlert.body')
+    ).toBeInTheDocument()
+  })
+
+  it('does not render when isFlagshipApp returns false', () => {
+    mockIsFlagshipApp.mockReturnValue(false)
+
+    const { queryByText } = render(<RunningAlert />)
+
+    // We're now using the translation key as text
+    expect(queryByText('card.launchTrigger.runningAlert.title')).toBeNull()
+  })
+
+  it('hides the alert when the button is clicked', () => {
+    mockIsFlagshipApp.mockReturnValue(true)
+
+    const { getByText, queryByText } = render(<RunningAlert />)
+
+    // We're now using the translation key as text for the button
+    fireEvent.click(getByText('card.launchTrigger.runningAlert.button'))
+
+    // We're now using the translation key as text
+    expect(queryByText('card.launchTrigger.runningAlert.title')).toBeNull()
+  })
+})

packages/cozy-harvest-lib/src/components/cards/RunningAlert.tsx

@@ -0,0 +1,35 @@
+import React, { useState } from 'react'
+
+import { isFlagshipApp } from 'cozy-device-helper'
+import Alert from 'cozy-ui/transpiled/react/Alert'
+import AlertTitle from 'cozy-ui/transpiled/react/AlertTitle'
+import Button from 'cozy-ui/transpiled/react/Buttons'
+import { useI18n } from 'cozy-ui/transpiled/react/I18n'
+import Icon from 'cozy-ui/transpiled/react/Icon'
+import ArrowUp from 'cozy-ui/transpiled/react/Icons/ArrowUp'
+
+export const RunningAlert = (): JSX.Element | null => {
+  const { t } = useI18n()
+  const [isVisible, setIsVisible] = useState(isFlagshipApp())
+  const handleClose = (): void => setIsVisible(false)
+
+  return isVisible ? (
+    <Alert
+      action={
+        <Button
+          variant="text"
+          size="small"
+          label={t('card.launchTrigger.runningAlert.button')}
+          onClick={handleClose}
+        />
+      }
+      block
+      className="u-mt-1"
+      icon={<Icon icon={ArrowUp} />}
+    >
+      <AlertTitle>{t('card.launchTrigger.runningAlert.title')}</AlertTitle>
+
+      {t('card.launchTrigger.runningAlert.body')}
+    </Alert>
+  ) : null
+}

packages/cozy-harvest-lib/src/locales/en.json

@@ -103,6 +103,11 @@
         "format": "MM/DD/YYYY",
         "disconnected": "Disconnected",
         "justNow": "Sync. just now"
+      },
+      "runningAlert": {
+        "title": "Don't Close Your App!",
+        "body": "For the data recovery to be complete, the phone must remain turned on. However, you can continue to browse within the mobile app as long as it stays active in the foreground.",
+        "button": "I understand"
       }
     },
     "appLink": {

packages/cozy-harvest-lib/src/locales/fr.json

@@ -103,6 +103,11 @@
         "format": "DD/MM/YYYY",
         "disconnected": "Déconnecté",
         "justNow": "Sync. à l'instant"
+      },
+      "runningAlert": {
+        "title": "Ne fermez pas votre app !",
+        "body": "Pour que la récupération de vos données soit complète, le téléphone doit rester allumé. Vous pouvez cependant continuer à naviguer dans l'app mobile tant qu'elle reste active au premier plan.",
+        "button": "J'ai compris"
       }
     },
     "appLink": {