feat(backup): Display last backup status

src/photos/ducks/backup/components/LastBackupStatus.jsx

@@ -0,0 +1,50 @@
+import React from 'react'
+
+import { useI18n } from 'cozy-ui/transpiled/react'
+
+import Typography from 'cozy-ui/transpiled/react/Typography'
+import { useBackupData } from '../hooks/useBackupData'
+
+const LastBackupStatus = () => {
+  const { t } = useI18n()
+
+  const { backupInfo } = useBackupData()
+
+  if (!backupInfo || !backupInfo.lastBackup) return null
+
+  const {
+    lastBackup: {
+      status,
+      errorMessage,
+      backedUpMediaCount,
+      totalMediasToBackupCount
+    }
+  } = backupInfo
+
+  let lastBackupDescription
+
+  if (status === 'success' && totalMediasToBackupCount > 0) {
+    if (backedUpMediaCount === totalMediasToBackupCount) {
+      lastBackupDescription = t('Backup.LastBackupStatus.success', {
+        smart_count: totalMediasToBackupCount
+      })
+    } else {
+      lastBackupDescription = t('Backup.LastBackupStatus.partialSuccess', {
+        smart_count: totalMediasToBackupCount,
+        backedUpMediaCount
+      })
+    }
+  } else if (status === 'error') {
+    lastBackupDescription = errorMessage
+  } else {
+    return null
+  }
+
+  return (
+    <Typography className="u-mt-1-half" align="center">
+      {t('Backup.LastBackupStatus.lastBackup')} {lastBackupDescription}
+    </Typography>
+  )
+}
+
+export default LastBackupStatus

src/photos/ducks/backup/index.jsx

@@ -10,6 +10,7 @@ import BackupInfo from './components/BackupInfo'
 import BackupActions from './components/BackupActions'
 import BackupDescription from './components/BackupDescription'
 import InstallAppAlert from './components/InstallAppAlert'
+import LastBackupStatus from './components/LastBackupStatus'
 import AllowPermissionsModal from './components/AllowPermissionsModal'
 import { BackupError } from './components/BackupError'
 
@@ -33,6 +34,7 @@ const BackupPage = () => {
               <BackupInfo />
               {!isFlagshipApp() ? <InstallAppAlert /> : null}
               <BackupActions />
+              <LastBackupStatus />
               {isFlagshipApp() ? <BackupDescription /> : null}
             </div>
           </div>

src/photos/locales/en.json

@@ -304,6 +304,11 @@
       "description": "Backup automatically all your photos and videos from your mobile devices",
       "install": "Install our app"
     },
+    "LastBackupStatus": {
+      "lastBackup": "Last backup:",
+      "success": "%{smart_count} element backed up |||| %{smart_count} elements backed up",
+      "partialSuccess": "%{backedUpMediaCount}/%{smart_count} element backed up |||| %{backedUpMediaCount}/%{smart_count} elements backed up"
+    },
     "AllowPermissionsModal": {
       "title": "Allow access to your photos and videos",
       "description": "Cozy needs access to the photos and videos stored on your device in order to synchronize them.",