feat(ListItemContact): Add default actions

call, sms, email, modify and view in contacts app

react/MuiCozyTheme/List/Readme.md

@@ -296,17 +296,26 @@ const mockClient = {
       unsubscribe: () => {},
       unsubscribeAll: () => {}
     }
-  }
+  },
+  getStackClient: () => ({
+    uri: 'https://cozy.io/'
+  }),
+  getInstanceOptions: () => ({
+    subdomain: ''
+  })
 }
 
 const contacts = [
   {
+    _id: 'id01',
     _type: 'io.cozy.contacts',
     displayName: 'John Doe',
     birthday: '25/10/2022',
-    email: [{ address: 'johndoe@cozy.cc', primary: true }]
+    email: [{ address: 'johndoe@cozy.cc', primary: true }],
+    phone: [{ number: '0102030405', primary: true }]
   },
   {
+    _id: 'id02',
     _type: 'io.cozy.contacts',
     displayName: 'Jason Bourne',
     birthday: '01/01/2020',

react/MuiCozyTheme/ListItem/ListItemBase/ActionsMenu/Actions/call.js

@@ -0,0 +1,29 @@
+import React from 'react'
+
+import { useI18n } from '../../../../../I18n'
+import TelephoneIcon from '../../../../../Icons/Telephone'
+import withListItemLocales from '../../../hoc/withListItemLocales'
+import ActionMenuItemWrapper from '../ActionMenuItemWrapper'
+
+export const call = () => {
+  return {
+    name: 'call',
+    action: docs => {
+      const phoneNumber = docs?.[0]?.phone?.[0]?.number
+      !!phoneNumber && window.open(`tel:${phoneNumber}`, '_self')
+    },
+    Component: withListItemLocales(({ className, onClick }) => {
+      const { t } = useI18n()
+
+      return (
+        <ActionMenuItemWrapper
+          className={className}
+          icon={TelephoneIcon}
+          onClick={onClick}
+        >
+          {t('ListItem.actions.call')}
+        </ActionMenuItemWrapper>
+      )
+    })
+  }
+}

react/MuiCozyTheme/ListItem/ListItemBase/ActionsMenu/Actions/emailTo.js

@@ -0,0 +1,29 @@
+import React from 'react'
+
+import { useI18n } from '../../../../../I18n'
+import EmailIcon from '../../../../../Icons/Email'
+import withListItemLocales from '../../../hoc/withListItemLocales'
+import ActionMenuItemWrapper from '../ActionMenuItemWrapper'
+
+export const emailTo = () => {
+  return {
+    name: 'emailTo',
+    action: docs => {
+      const emailAddress = docs?.[0]?.email?.[0]?.address
+      !!emailAddress && window.open(`mailto:${emailAddress}`, '_self')
+    },
+    Component: withListItemLocales(({ className, onClick }) => {
+      const { t } = useI18n()
+
+      return (
+        <ActionMenuItemWrapper
+          className={className}
+          icon={EmailIcon}
+          onClick={onClick}
+        >
+          {t('ListItem.actions.emailTo')}
+        </ActionMenuItemWrapper>
+      )
+    })
+  }
+}

react/MuiCozyTheme/ListItem/ListItemBase/ActionsMenu/Actions/hr.js

@@ -0,0 +1,10 @@
+import React from 'react'
+
+export const hr = () => {
+  return {
+    name: 'hr',
+    Component: function hr() {
+      return <hr />
+    }
+  }
+}

react/MuiCozyTheme/ListItem/ListItemBase/ActionsMenu/Actions/modify.js

@@ -0,0 +1,41 @@
+import React from 'react'
+
+import { generateWebLink, useClient } from 'cozy-client'
+
+import Link from '../../../../../Link'
+import { useI18n } from '../../../../../I18n'
+import PenIcon from '../../../../../Icons/Pen'
+import withListItemLocales from '../../../hoc/withListItemLocales'
+import ActionMenuItemWrapper from '../ActionMenuItemWrapper'
+
+export const modify = () => {
+  return {
+    name: 'modify',
+    Component: withListItemLocales(({ className, docs, onClick }) => {
+      const { t } = useI18n()
+      const client = useClient()
+
+      const contactId = docs[0]._id
+
+      const webLink = generateWebLink({
+        slug: 'contacts',
+        cozyUrl: client.getStackClient().uri,
+        subDomainType: client.getInstanceOptions().subdomain,
+        pathname: '/',
+        hash: `/${contactId}/edit`
+      })
+
+      return (
+        <ActionMenuItemWrapper
+          className={className}
+          icon={PenIcon}
+          onClick={onClick}
+        >
+          <Link className="u-p-0" href={webLink} target="_blank">
+            {t('ListItem.actions.modify')}
+          </Link>
+        </ActionMenuItemWrapper>
+      )
+    })
+  }
+}

react/MuiCozyTheme/ListItem/ListItemBase/ActionsMenu/Actions/smsTo.js

@@ -0,0 +1,29 @@
+import React from 'react'
+
+import { useI18n } from '../../../../../I18n'
+import CommentIcon from '../../../../../Icons/Comment'
+import withListItemLocales from '../../../hoc/withListItemLocales'
+import ActionMenuItemWrapper from '../ActionMenuItemWrapper'
+
+export const smsTo = () => {
+  return {
+    name: 'smsTo',
+    action: docs => {
+      const phoneNumber = docs?.[0]?.phone?.[0]?.number
+      !!phoneNumber && window.open(`sms:${phoneNumber}`, '_self')
+    },
+    Component: withListItemLocales(({ className, onClick }) => {
+      const { t } = useI18n()
+
+      return (
+        <ActionMenuItemWrapper
+          className={className}
+          icon={CommentIcon}
+          onClick={onClick}
+        >
+          {t('ListItem.actions.smsTo')}
+        </ActionMenuItemWrapper>
+      )
+    })
+  }
+}

react/MuiCozyTheme/ListItem/ListItemBase/ActionsMenu/Actions/viewInContacts.js

@@ -0,0 +1,41 @@
+import React from 'react'
+
+import { generateWebLink, useClient } from 'cozy-client'
+
+import Link from '../../../../../Link'
+import { useI18n } from '../../../../../I18n'
+import OpenappIcon from '../../../../../Icons/Openapp'
+import withListItemLocales from '../../../hoc/withListItemLocales'
+import ActionMenuItemWrapper from '../ActionMenuItemWrapper'
+
+export const viewInContacts = () => {
+  return {
+    name: 'viewInContacts',
+    Component: withListItemLocales(({ className, docs, onClick }) => {
+      const { t } = useI18n()
+      const client = useClient()
+
+      const contactId = docs[0]._id
+
+      const webLink = generateWebLink({
+        slug: 'contacts',
+        cozyUrl: client.getStackClient().uri,
+        subDomainType: client.getInstanceOptions().subdomain,
+        pathname: '/',
+        hash: `/${contactId}`
+      })
+
+      return (
+        <ActionMenuItemWrapper
+          className={className}
+          icon={OpenappIcon}
+          onClick={onClick}
+        >
+          <Link className="u-p-0" href={webLink} target="_blank">
+            {t('ListItem.actions.viewInContacts')}
+          </Link>
+        </ActionMenuItemWrapper>
+      )
+    })
+  }
+}

react/MuiCozyTheme/ListItem/ListItemContact/index.jsx

@@ -6,6 +6,7 @@ import ContactsIcon from '../../../Icons/Contacts'
 import ListItemBase from '../ListItemBase'
 
 import { makeDefaultExpandedAttributes } from '../ExpandedAttributes/helpers'
+import useActions from './useActions'
 
 const ListItemContact = ({
   contact,
@@ -17,6 +18,7 @@ const ListItemContact = ({
   expandedAttributesProps: { isExpandedAttributesActive, expandedAttributes },
   onClick
 }) => {
+  const defaultActions = useActions(contact)
   const primaryText = primary || contact.displayName
   const secondaryText = secondary || contact.email?.[0]?.address
   const itemIcon = icon || <Icon icon={ContactsIcon} width="32" height="32" />
@@ -25,14 +27,15 @@ const ListItemContact = ({
     contact,
     expandedAttributes
   )
+  const itemActions = defaultActions.concat(actions)
 
   return (
     <ListItemBase
       doc={contact}
       primary={primaryText}
       secondary={secondaryText}
       icon={itemIcon}
-      actions={actions}
+      actions={itemActions}
       selectProps={selectProps}
       expandedAttributesProps={{
         isExpandedAttributesActive,
@@ -44,6 +47,7 @@ const ListItemContact = ({
 }
 
 ListItemContact.defaultProps = {
+  actions: [],
   expandedAttributesProps: {
     isExpandedAttributesActive: false
   }

react/MuiCozyTheme/ListItem/ListItemContact/useActions.jsx

@@ -0,0 +1,39 @@
+import { useMemo } from 'react'
+
+import { makeActions } from '../ListItemBase/ActionsMenu/helpers'
+import { hr } from '../ListItemBase/ActionsMenu/Actions/hr'
+import { emailTo } from '../ListItemBase/ActionsMenu/Actions/emailTo'
+import { smsTo } from '../ListItemBase/ActionsMenu/Actions/smsTo'
+import { call } from '../ListItemBase/ActionsMenu/Actions/call'
+import { modify } from '../ListItemBase/ActionsMenu/Actions/modify'
+import { viewInContacts } from '../ListItemBase/ActionsMenu/Actions/viewInContacts'
+
+const makeOptionalActions = contact => {
+  const optionalActions = [hr, call, smsTo, emailTo]
+
+  const hasPhoneAction = contact.phone?.length > 0
+  const hasEmailAction = contact.email?.length > 0
+  const hasMessageActions = hasPhoneAction || hasEmailAction
+
+  const conditions = {
+    hr: hasMessageActions,
+    call: hasPhoneAction,
+    smsTo: hasPhoneAction,
+    emailTo: hasEmailAction
+  }
+
+  return optionalActions.filter(action => conditions[action.name])
+}
+
+const useActions = contact => {
+  const optionalActions = useMemo(() => makeOptionalActions(contact), [contact])
+  const finalActions = useMemo(
+    () => [modify, viewInContacts].concat(optionalActions),
+    [optionalActions]
+  )
+  const actions = useMemo(() => makeActions(finalActions), [finalActions])
+
+  return actions
+}
+
+export default useActions

react/MuiCozyTheme/ListItem/locales/en.json

@@ -1,5 +1,12 @@
 {
   "ListItem": {
+    "actions": {
+      "viewInContacts": "View in Cozy Contacts",
+      "modify": "Modify",
+      "emailTo": "Send an email",
+      "smsTo": "Send a message",
+      "call": "Call"
+    },
     "attributes": {
       "birthday": "Birthday",
       "address": "Address",
@@ -31,13 +38,6 @@
         }
       }
     },
-    "contact": {
-      "birthday": "Birthday",
-      "actions": {
-        "copy": "Copy",
-        "delete": "Delete"
-      }
-    },
     "file": {
       "expired": "Expired",
       "expiresIn": "Expires in %{duration}",

react/MuiCozyTheme/ListItem/locales/fr.json

@@ -1,5 +1,12 @@
 {
   "ListItem": {
+    "actions": {
+      "viewInContacts": "Voir dans Cozy Contacts",
+      "modify": "Modifier",
+      "emailTo": "Envoyer un e-mail",
+      "smsTo": "Envoyer un message",
+      "call": "Appeler"
+    },
     "attributes": {
       "birthday": "Date de naissance",
       "address": "Adresse",
@@ -31,12 +38,6 @@
         }
       }
     },
-    "contact": {
-      "actions": {
-        "copy": "Copier",
-        "delete": "Supprimer"
-      }
-    },
     "file": {
       "expired": "Expiré",
       "expiresIn": "Expire dans %{duration}",