fix(GroupRecipientDetail): Improve member display

cozy · Apr 8, 2024 · 2bb65cf · 2bb65cf
1 parent f0945b7
commit 2bb65cf
Show file tree

Hide file tree

Showing 8 changed files with 34 additions and 25 deletions.
diff --git a/packages/cozy-sharing/locales/en.json b/packages/cozy-sharing/locales/en.json
@@ -399,7 +399,8 @@
       "status": {
         "mail-not-sent": "Invitation failed",
         "revoked": "Sharing revoked"
-      }
+      },
+      "addEmail": "Enter an email address to invite the contact"
     }
   }
 }
diff --git a/packages/cozy-sharing/locales/fr.json b/packages/cozy-sharing/locales/fr.json
@@ -399,7 +399,8 @@
       "status": {
         "mail-not-sent": "Echec de l’invitation",
         "revoked": "Partage révoqué"
-      }
+      },
+      "addEmail": "Renseigner un email pour pouvoir inviter le contact"
     }
   }
 }
diff --git a/packages/cozy-sharing/src/components/Recipient/GroupRecipient.jsx b/packages/cozy-sharing/src/components/Recipient/GroupRecipient.jsx
@@ -19,7 +19,7 @@ import {
 import { GroupAvatar } from '../Avatar/GroupAvatar'
 
 const GroupRecipient = props => {
-  const { name, members, fadeIn, owner } = props
+  const { name, members, fadeIn, owner, isOwner } = props
   const { t } = useI18n()
   const client = useClient()
   const { isMobile } = useBreakpoints()
@@ -76,6 +76,7 @@ const GroupRecipient = props => {
       </Fade>
       {isDetailOpened ? (
         <GroupRecipientDetail
+          isOwner={isOwner}
           owner={owner}
           name={name}
           members={members}

diff --git a/packages/cozy-sharing/src/components/Recipient/GroupRecipientDetail.jsx b/packages/cozy-sharing/src/components/Recipient/GroupRecipientDetail.jsx
@@ -7,7 +7,7 @@ import { useI18n } from 'cozy-ui/transpiled/react/providers/I18n'
 import { GroupRecipientDetailWithAccess } from './GroupRecipientDetailWithAccess'
 import { GroupRecipientDetailWithoutAccess } from './GroupRecipientDetailWithoutAccess'
 
-const GroupRecipientDetail = ({ name, owner, members, onClose }) => {
+const GroupRecipientDetail = ({ name, owner, members, onClose, isOwner }) => {
   const { t } = useI18n()
   const withAccess = members.filter(
     member => !['revoked', 'mail-not-sent'].includes(member.status)
@@ -39,7 +39,10 @@ const GroupRecipientDetail = ({ name, owner, members, onClose }) => {
             <GroupRecipientDetailWithAccess withAccess={withAccess} />
           ) : null}
           {withoutAccess.length > 0 ? (
-            <GroupRecipientDetailWithoutAccess withoutAccess={withoutAccess} />
+            <GroupRecipientDetailWithoutAccess
+              withoutAccess={withoutAccess}
+              isOwner={isOwner}
+            />
           ) : null}
         </div>
       }

diff --git a/packages/cozy-sharing/src/components/Recipient/GroupRecipientDetailWithAccess.jsx b/packages/cozy-sharing/src/components/Recipient/GroupRecipientDetailWithAccess.jsx
@@ -1,19 +1,20 @@
 import React from 'react'
 
+import { useClient } from 'cozy-client'
 import Avatar from 'cozy-ui/transpiled/react/Avatar'
-import Icon from 'cozy-ui/transpiled/react/Icon'
-import ToTheCloudIcon from 'cozy-ui/transpiled/react/Icons/ToTheCloud'
 import List from 'cozy-ui/transpiled/react/List'
 import ListItem from 'cozy-ui/transpiled/react/ListItem'
 import ListItemIcon from 'cozy-ui/transpiled/react/ListItemIcon'
 import ListItemText from 'cozy-ui/transpiled/react/ListItemText'
 import Typography from 'cozy-ui/transpiled/react/Typography'
 import { useI18n } from 'cozy-ui/transpiled/react/providers/I18n'
 
+import MemberRecipientStatus from './MemberRecipientStatus'
 import { getInitials, getDisplayName } from '../../models'
 
 const GroupRecipientDetailWithAccess = ({ withAccess }) => {
   const { t } = useI18n()
+  const client = useClient()
 
   return (
     <div>
@@ -23,6 +24,7 @@ const GroupRecipientDetailWithAccess = ({ withAccess }) => {
       <List>
         {withAccess.map(recipient => {
           const name = getDisplayName(recipient)
+          const isMe = recipient.instance === client.options.uri
 
           return (
             <ListItem disableGutters key={recipient.index}>
@@ -32,18 +34,11 @@ const GroupRecipientDetailWithAccess = ({ withAccess }) => {
               <ListItemText
                 primary={name}
                 secondary={
-                  recipient.instance ? (
-                    <div className="u-flex u-flex-items-center">
-                      <Icon
-                        icon={ToTheCloudIcon}
-                        size={10}
-                        style={{
-                          marginRight: '0.25rem'
-                        }}
-                      />
-                      {recipient.instance}
-                    </div>
-                  ) : null
+                  <MemberRecipientStatus
+                    status={recipient.status}
+                    isMe={isMe}
+                    instance={recipient.instance}
+                  />
                 }
               />
             </ListItem>

diff --git a/packages/cozy-sharing/src/components/Recipient/GroupRecipientDetailWithoutAccess.jsx b/packages/cozy-sharing/src/components/Recipient/GroupRecipientDetailWithoutAccess.jsx
@@ -10,9 +10,10 @@ import ListItemText from 'cozy-ui/transpiled/react/ListItemText'
 import Typography from 'cozy-ui/transpiled/react/Typography'
 import { useI18n } from 'cozy-ui/transpiled/react/providers/I18n'
 
+import { DEFAULT_DISPLAY_NAME } from '../../helpers/recipients'
 import { getInitials, getDisplayName } from '../../models'
 
-const GroupRecipientDetailWithoutAccess = ({ withoutAccess }) => {
+const GroupRecipientDetailWithoutAccess = ({ withoutAccess, isOwner }) => {
   const { t } = useI18n()
 
   return (
@@ -23,10 +24,11 @@ const GroupRecipientDetailWithoutAccess = ({ withoutAccess }) => {
       <List>
         {withoutAccess.map(recipient => {
           const icon = recipient.status === 'revoked' ? ForbiddenIcon : null
-          const name = getDisplayName(recipient)
+          const defaultDisplayName = t(DEFAULT_DISPLAY_NAME)
+          const name = getDisplayName(recipient, defaultDisplayName)
 
           return (
-            <ListItem disableGutters key={recipient.index}>
+            <ListItem disableGutters key={recipient.index} ellipsis={false}>
               <ListItemIcon>
                 <Avatar text={getInitials(recipient)} textId={name} />
               </ListItemIcon>
@@ -46,6 +48,9 @@ const GroupRecipientDetailWithoutAccess = ({ withoutAccess }) => {
                     {t(
                       `GroupRecipientDetail.withoutAccess.status.${recipient.status}`
                     )}
+                    {isOwner
+                      ? ` - ${t('GroupRecipientDetail.withoutAccess.addEmail')}`
+                      : null}
                   </div>
                 }
               />

diff --git a/packages/cozy-sharing/src/components/Recipient/MemberRecipient.jsx b/packages/cozy-sharing/src/components/Recipient/MemberRecipient.jsx
@@ -13,12 +13,13 @@ import { useI18n } from 'cozy-ui/transpiled/react/providers/I18n'
 import MemberRecipientPermissions from './MemberRecipientPermissions'
 import MemberRecipientStatus from './MemberRecipientStatus'
 import RecipientConfirm from './RecipientConfirm'
-import { FADE_IN_DURATION } from '../../helpers/recipients'
+import {
+  FADE_IN_DURATION,
+  DEFAULT_DISPLAY_NAME
+} from '../../helpers/recipients'
 import { getDisplayName } from '../../models'
 import { MemberAvatar } from '../Avatar/MemberAvatar'
 
-const DEFAULT_DISPLAY_NAME = 'Share.contacts.defaultDisplayName'
-
 const MemberRecipient = props => {
   const { t } = useI18n()
   const client = useClient()

diff --git a/packages/cozy-sharing/src/helpers/recipients.js b/packages/cozy-sharing/src/helpers/recipients.js
@@ -4,6 +4,8 @@ import flag from 'cozy-flags'
 
 import { Group } from '../models'
 
+export const DEFAULT_DISPLAY_NAME = 'Share.contacts.defaultDisplayName'
+
 export const filterAndReworkRecipients = (recipients, previousRecipients) => {
   return recipients
     .filter(recipient => recipient.status !== 'owner')