fix(photos): Improve wording for empty state

cozy · Sep 7, 2023 · a6cffd9 · a6cffd9
1 parent b857399
commit a6cffd9
Show file tree

Hide file tree

Showing 8 changed files with 26 additions and 13 deletions.
diff --git a/src/components/Error/Empty.jsx b/src/components/Error/Empty.jsx
@@ -7,6 +7,7 @@ import DriveIcon from 'cozy-ui/transpiled/react/Icons/FileTypeFolder'
 import TrashIcon from 'cozy-ui/transpiled/react/Icons/Trash'
 import PhotosIcon from 'cozy-ui/transpiled/react/Icons/FileTypeImage'
 import EncryptedFolderIcon from 'drive/web/modules/views/Folder/EncryptedFolderIcon'
+import useBreakpoints from 'cozy-ui/transpiled/react/hooks/useBreakpoints'
 
 import styles from './empty.styl'
 
@@ -17,14 +18,18 @@ const EmptyIcon = {
   trash: TrashIcon
 }
 
-const EmptyCanvas = ({ type, canUpload, localeKey }) => {
+const EmptyCanvas = ({ type, canUpload, localeKey, hasTextMobileVersion }) => {
   const { t } = useI18n()
+  const { isMobile } = useBreakpoints()
   return (
     <Empty
       data-testid="empty-folder"
       icon={EmptyIcon[type]}
       title={localeKey ? t(`empty.${localeKey}_title`) : t('empty.title')}
       text={
+        (hasTextMobileVersion &&
+          isMobile &&
+          t(`empty.${localeKey}_mobile_text`)) ||
         (localeKey && t(`empty.${localeKey}_text`)) ||
         (canUpload && t('empty.text'))
       }

diff --git a/src/photos/components/PhotoBoard.jsx b/src/photos/components/PhotoBoard.jsx
@@ -40,7 +40,9 @@ const PhotoBoard = ({
     return <Loading loadingType="photos_fetching" />
   }
   if (!isFetching && (lists.length === 0 || lists[0].photos.length === 0)) {
-    return <EmptyPhotos localeKey={`${photosContext}_photos`} />
+    return (
+      <EmptyPhotos localeKey={`${photosContext}_photos`} hasTextMobileVersion />
+    )
   }
 
   return (

diff --git a/src/photos/ducks/albums/components/AlbumPhotos.jsx b/src/photos/ducks/albums/components/AlbumPhotos.jsx
@@ -184,7 +184,7 @@ class AlbumPhotos extends Component {
               <PhotoBoard
                 lists={[{ photos }]}
                 selected={selected}
-                photosContext="timeline"
+                photosContext="album_with"
                 showSelection={active}
                 onPhotoToggle={selection.toggle}
                 onPhotosSelect={selection.select}

diff --git a/src/photos/ducks/albums/components/AlbumsList.jsx b/src/photos/ducks/albums/components/AlbumsList.jsx
@@ -19,7 +19,7 @@ const sortByCreationDate = (a, b) => {
 
 const AlbumsList = ({ data, hasMore, fetchMore, t }) =>
   data.length === 0 ? (
-    <EmptyPhotos localeKey="albums" />
+    <EmptyPhotos localeKey="albums" hasTextMobileVersion />
   ) : (
     <Content>
       <div className={styles['pho-album-list']}>

diff --git a/src/photos/ducks/albums/index.spec.js b/src/photos/ducks/albums/index.spec.js
@@ -60,7 +60,9 @@ describe('Album view', () => {
     setup()
 
     // Then
-    const label = await screen.findByText("You don't have any photos yet.")
+    const label = await screen.findByText(
+      'There is no photo in this album yet.'
+    )
     expect(label).toBeInTheDocument()
   })
 

diff --git a/src/photos/locales/en.json b/src/photos/locales/en.json
@@ -18,13 +18,17 @@
   },
   "empty": {
     "timeline_photos_title": "You don't have any photos yet.",
-    "timeline_photos_text": "Click the \"Upload\" button to add photos.",
+    "timeline_photos_text": "Click on \"Upload\" button to add photos.",
+    "timeline_photos_mobile_text": "Click on \"...\" in the top right-hand corner and then on \"Upload photos\" to add photos.",
     "albums_title": "You don't have any album yet.",
-    "albums_text": "Start by clicking \"New album\" to create your first album.",
-    "album_photos_title": "There is no photo in this album yet.",
-    "album_photos_text": "Start by clicking \"Add photos to album\" to add some.",
+    "albums_text": "Click on \"New album\" to create your first album.",
+    "albums_mobile_text": "Click on \"...\" in the top right-hand corner and then on \"New album\" to create your first album.",
+    "album_with_photos_title": "There is no photo in this album yet.",
+    "album_with_photos_text": "Click on \"...\" in the top right-hand corner and then on \"Add photos to album\" to add some.",
+    "album_with_photos_mobile_text": "Click on \"...\" in the top right-hand corner and then on \"Add photos to album\" to add some.",
     "shared_album_photos_title": "There is no photo in this album yet.",
-    "shared_album_photos_text": "Come back later"
+    "shared_album_photos_text": "Come back later",
+    "shared_album_photos_mobile_text": "Come back later"
   },
   "Error": {
     "albums_title": "An error occurred while retrieving the albums list. Please try again later.",

diff --git a/src/photos/targets/public/App.jsx b/src/photos/targets/public/App.jsx
@@ -107,7 +107,7 @@ export class App extends Component {
                 <PhotoBoard
                   lists={[{ photos }]}
                   selected={selected}
-                  photosContext="timeline"
+                  photosContext="shared_album"
                   showSelection={active}
                   onPhotoToggle={selection.toggle}
                   onPhotosSelect={selection.select}

diff --git a/src/photos/targets/public/__snapshots__/App.spec.jsx.snap b/src/photos/targets/public/__snapshots__/App.spec.jsx.snap
@@ -52,7 +52,7 @@ exports[`Public view should render children when they are present 1`] = `
         onPhotoToggle={[Function]}
         onPhotosSelect={[Function]}
         onPhotosUnselect={[Function]}
-        photosContext="timeline"
+        photosContext="shared_album"
         selected={Array []}
         showSelection={false}
       />
@@ -110,7 +110,7 @@ exports[`Public view should render the album 1`] = `
         onPhotoToggle={[Function]}
         onPhotosSelect={[Function]}
         onPhotosUnselect={[Function]}
-        photosContext="timeline"
+        photosContext="shared_album"
         selected={Array []}
         showSelection={false}
       />