From f554261b1cff383d1be79f4b1ebbb92ae7e830fc Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Th=C3=A9o=20Poizat?= <hello@zatteo.com>
Date: Wed, 23 Aug 2023 20:33:39 +0200
Subject: [PATCH] feat(backup): Display last backup status

---
 .../backup/components/LastBackupStatus.jsx    | 50 +++++++++++++++++++
 src/photos/ducks/backup/index.jsx             |  2 +
 src/photos/locales/en.json                    |  5 ++
 3 files changed, 57 insertions(+)
 create mode 100644 src/photos/ducks/backup/components/LastBackupStatus.jsx

diff --git a/src/photos/ducks/backup/components/LastBackupStatus.jsx b/src/photos/ducks/backup/components/LastBackupStatus.jsx
new file mode 100644
index 0000000000..a8b53a661b
--- /dev/null
+++ b/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
diff --git a/src/photos/ducks/backup/index.jsx b/src/photos/ducks/backup/index.jsx
index 7aa9b1e975..2f49359f4f 100644
--- a/src/photos/ducks/backup/index.jsx
+++ b/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 />
+              {isFlagshipApp() ? <LastBackupStatus /> : null}
               {isFlagshipApp() ? <BackupDescription /> : null}
             </div>
           </div>
diff --git a/src/photos/locales/en.json b/src/photos/locales/en.json
index 587956d5d4..71adc395bd 100755
--- a/src/photos/locales/en.json
+++ b/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.",