feat: Add actions for Settings menu

src/components/Settings/actions/appearance.js

@@ -0,0 +1,40 @@
+import React, { forwardRef } from 'react'
+
+import flag from 'cozy-flags'
+import ActionsMenuItem from 'cozy-ui/transpiled/react/ActionsMenu/ActionsMenuItem'
+import ListItemIcon from 'cozy-ui/transpiled/react/ListItemIcon'
+import ListItemText from 'cozy-ui/transpiled/react/ListItemText'
+import Icon from 'cozy-ui/transpiled/react/Icon'
+import PaletteIcon from 'cozy-ui/transpiled/react/Icons/Palette'
+
+import { getSettingsLink } from 'components/Settings/helper'
+
+const Component = forwardRef(({ action, ...props }, ref) => {
+  return (
+    <ActionsMenuItem {...props} ref={ref}>
+      <ListItemIcon>
+        <Icon icon={action.icon} />
+      </ListItemIcon>
+      <ListItemText primary={action.label} />
+    </ActionsMenuItem>
+  )
+})
+
+Component.displayName = 'AppearanceAction'
+
+export const appearance = ({ t }) => {
+  const icon = PaletteIcon
+  const label = t('appearance')
+
+  return {
+    name: 'appearance',
+    icon,
+    label,
+    displayCondition: () => flag('ui.darkmode.enabled'),
+    action: (_, { client }) => {
+      const link = getSettingsLink({ client, hash: 'appearance' })
+      window.open(link, '_self')
+    },
+    Component
+  }
+}

src/components/Settings/actions/connectedDevices.js

@@ -0,0 +1,38 @@
+import React, { forwardRef } from 'react'
+
+import ActionsMenuItem from 'cozy-ui/transpiled/react/ActionsMenu/ActionsMenuItem'
+import ListItemIcon from 'cozy-ui/transpiled/react/ListItemIcon'
+import ListItemText from 'cozy-ui/transpiled/react/ListItemText'
+import Icon from 'cozy-ui/transpiled/react/Icon'
+import DevicesIcon from 'cozy-ui/transpiled/react/Icons/Devices'
+
+import { getSettingsLink } from 'components/Settings/helper'
+
+const Component = forwardRef(({ action, ...props }, ref) => {
+  return (
+    <ActionsMenuItem {...props} ref={ref}>
+      <ListItemIcon>
+        <Icon icon={action.icon} />
+      </ListItemIcon>
+      <ListItemText primary={action.label} />
+    </ActionsMenuItem>
+  )
+})
+
+Component.displayName = 'ConnectedDevicesAction'
+
+export const connectedDevices = ({ t }) => {
+  const icon = DevicesIcon
+  const label = t('connectedDevices')
+
+  return {
+    name: 'connectedDevices',
+    icon,
+    label,
+    action: (_, { client }) => {
+      const link = getSettingsLink({ client, hash: 'connectedDevices' })
+      window.open(link, '_self')
+    },
+    Component
+  }
+}

src/components/Settings/actions/connections.js

@@ -0,0 +1,38 @@
+import React, { forwardRef } from 'react'
+
+import ActionsMenuItem from 'cozy-ui/transpiled/react/ActionsMenu/ActionsMenuItem'
+import ListItemIcon from 'cozy-ui/transpiled/react/ListItemIcon'
+import ListItemText from 'cozy-ui/transpiled/react/ListItemText'
+import Icon from 'cozy-ui/transpiled/react/Icon'
+import GlobeIcon from 'cozy-ui/transpiled/react/Icons/Globe'
+
+import { getSettingsLink } from 'components/Settings/helper'
+
+const Component = forwardRef(({ action, ...props }, ref) => {
+  return (
+    <ActionsMenuItem {...props} ref={ref}>
+      <ListItemIcon>
+        <Icon icon={action.icon} />
+      </ListItemIcon>
+      <ListItemText primary={action.label} />
+    </ActionsMenuItem>
+  )
+})
+
+Component.displayName = 'ConnectionsAction'
+
+export const connections = ({ t }) => {
+  const icon = GlobeIcon
+  const label = t('connections')
+
+  return {
+    name: 'connections',
+    icon,
+    label,
+    action: (_, { client }) => {
+      const link = getSettingsLink({ client, hash: 'sessions' })
+      window.open(link, '_self')
+    },
+    Component
+  }
+}

src/components/Settings/actions/contact.js

@@ -0,0 +1,38 @@
+import React, { forwardRef } from 'react'
+
+import ActionsMenuItem from 'cozy-ui/transpiled/react/ActionsMenu/ActionsMenuItem'
+import ListItemIcon from 'cozy-ui/transpiled/react/ListItemIcon'
+import ListItemText from 'cozy-ui/transpiled/react/ListItemText'
+import Icon from 'cozy-ui/transpiled/react/Icon'
+import EmailIcon from 'cozy-ui/transpiled/react/Icons/Email'
+
+import { getSettingsLink } from 'components/Settings/helper'
+
+const Component = forwardRef(({ action, ...props }, ref) => {
+  return (
+    <ActionsMenuItem {...props} ref={ref}>
+      <ListItemIcon>
+        <Icon icon={action.icon} />
+      </ListItemIcon>
+      <ListItemText primary={action.label} />
+    </ActionsMenuItem>
+  )
+})
+
+Component.displayName = 'ContactAction'
+
+export const contact = ({ t }) => {
+  const icon = EmailIcon
+  const label = t('contact')
+
+  return {
+    name: 'contact',
+    icon,
+    label,
+    action: (_, { client }) => {
+      const link = getSettingsLink({ client, hash: 'support' })
+      window.open(link, '_self')
+    },
+    Component
+  }
+}

src/components/Settings/actions/help.js

@@ -0,0 +1,39 @@
+import React, { forwardRef } from 'react'
+
+import ActionsMenuItem from 'cozy-ui/transpiled/react/ActionsMenu/ActionsMenuItem'
+import ListItemIcon from 'cozy-ui/transpiled/react/ListItemIcon'
+import ListItemText from 'cozy-ui/transpiled/react/ListItemText'
+import Icon from 'cozy-ui/transpiled/react/Icon'
+import HelpIcon from 'cozy-ui/transpiled/react/Icons/Help'
+import OpenwithIcon from 'cozy-ui/transpiled/react/Icons/Openwith'
+
+const Component = forwardRef(({ action, ...props }, ref) => {
+  return (
+    <ActionsMenuItem {...props} ref={ref}>
+      <ListItemIcon>
+        <Icon icon={action.icon} />
+      </ListItemIcon>
+      <ListItemText primary={action.label} />
+      <ListItemIcon>
+        <Icon icon={OpenwithIcon} />
+      </ListItemIcon>
+    </ActionsMenuItem>
+  )
+})
+
+Component.displayName = 'HelpAction'
+
+export const help = ({ t }) => {
+  const icon = HelpIcon
+  const label = t('help')
+
+  return {
+    name: 'help',
+    icon,
+    label,
+    action: () => {
+      window.open('https://support.cozy.io/', '_blank', 'noopener, noreferrer')
+    },
+    Component
+  }
+}

src/components/Settings/actions/index.js

@@ -0,0 +1,10 @@
+export { appearance } from './appearance'
+export { connectedDevices } from './connectedDevices'
+export { connections } from './connections'
+export { contact } from './contact'
+export { help } from './help'
+export { logout } from './logout'
+export { permissions } from './permissions'
+export { plans } from './plans'
+export { profile } from './profile'
+export { storage } from './storage'

src/components/Settings/actions/logout.js

@@ -0,0 +1,47 @@
+import React, { forwardRef } from 'react'
+
+import { isFlagshipApp } from 'cozy-device-helper'
+import ActionsMenuItem from 'cozy-ui/transpiled/react/ActionsMenu/ActionsMenuItem'
+import ListItemIcon from 'cozy-ui/transpiled/react/ListItemIcon'
+import ListItemText from 'cozy-ui/transpiled/react/ListItemText'
+import Icon from 'cozy-ui/transpiled/react/Icon'
+import LogoutIcon from 'cozy-ui/transpiled/react/Icons/Logout'
+
+const Component = forwardRef(({ action, ...props }, ref) => {
+  return (
+    <ActionsMenuItem {...props} ref={ref}>
+      <ListItemIcon>
+        <Icon icon={action.icon} />
+      </ListItemIcon>
+      <ListItemText primary={action.label} />
+    </ActionsMenuItem>
+  )
+})
+
+Component.displayName = 'LogoutAction'
+
+export const logout = ({ t, onLogOut }) => {
+  const icon = LogoutIcon
+  const label = t('logout')
+
+  return {
+    name: 'logout',
+    icon,
+    label,
+    action: async (_, { client, webviewIntent }) => {
+      if (onLogOut && typeof onLogOut === 'function') {
+        const res = onLogOut()
+        if (res instanceof Promise) {
+          await res
+        }
+      } else {
+        await client.logout()
+
+        return isFlagshipApp() && webviewIntent
+          ? webviewIntent.call('logout')
+          : window.location.reload()
+      }
+    },
+    Component
+  }
+}

src/components/Settings/actions/permissions.js

@@ -0,0 +1,40 @@
+import React, { forwardRef } from 'react'
+
+import flag from 'cozy-flags'
+import ActionsMenuItem from 'cozy-ui/transpiled/react/ActionsMenu/ActionsMenuItem'
+import ListItemIcon from 'cozy-ui/transpiled/react/ListItemIcon'
+import ListItemText from 'cozy-ui/transpiled/react/ListItemText'
+import Icon from 'cozy-ui/transpiled/react/Icon'
+import HandIcon from 'cozy-ui/transpiled/react/Icons/Hand'
+
+import { getSettingsLink } from 'components/Settings/helper'
+
+const Component = forwardRef(({ action, ...props }, ref) => {
+  return (
+    <ActionsMenuItem {...props} ref={ref}>
+      <ListItemIcon>
+        <Icon icon={action.icon} />
+      </ListItemIcon>
+      <ListItemText primary={action.label} />
+    </ActionsMenuItem>
+  )
+})
+
+Component.displayName = 'PermissionsAction'
+
+export const permissions = ({ t }) => {
+  const icon = HandIcon
+  const label = t('permissions')
+
+  return {
+    name: 'permissions',
+    icon,
+    label,
+    displayCondition: () => flag('settings.permissions-dashboard'),
+    action: (_, { client }) => {
+      const link = getSettingsLink({ client, hash: 'permissions/slug' })
+      window.open(link, '_self')
+    },
+    Component
+  }
+}

src/components/Settings/actions/plans.js

@@ -0,0 +1,60 @@
+import React, { forwardRef } from 'react'
+
+import flag from 'cozy-flags'
+import { generateWebLink } from 'cozy-client'
+import {
+  hasAnOffer,
+  shouldDisplayOffers,
+  buildPremiumLink
+} from 'cozy-client/dist/models/instance'
+import ActionsMenuItem from 'cozy-ui/transpiled/react/ActionsMenu/ActionsMenuItem'
+import ListItemIcon from 'cozy-ui/transpiled/react/ListItemIcon'
+import ListItemText from 'cozy-ui/transpiled/react/ListItemText'
+import Icon from 'cozy-ui/transpiled/react/Icon'
+import CozyCircleIcon from 'cozy-ui/transpiled/react/Icons/CozyCircle'
+import OpenwithIcon from 'cozy-ui/transpiled/react/Icons/Openwith'
+
+const Component = forwardRef(({ action, ...props }, ref) => {
+  return (
+    <ActionsMenuItem {...props} ref={ref}>
+      <ListItemIcon>
+        <Icon icon={action.icon} />
+      </ListItemIcon>
+      <ListItemText primary={action.label} />
+      {!flag('settings.subscription') && (
+        <ListItemIcon>
+          <Icon icon={OpenwithIcon} />
+        </ListItemIcon>
+      )}
+    </ActionsMenuItem>
+  )
+})
+
+Component.displayName = 'PlansAction'
+
+export const plans = ({ t, instanceInfo }) => {
+  const icon = CozyCircleIcon
+  const label = t('plans')
+
+  return {
+    name: 'plans',
+    icon,
+    label,
+    displayCondition: () =>
+      shouldDisplayOffers(instanceInfo) || hasAnOffer(instanceInfo),
+    action: (_, { client }) => {
+      const link =
+        flag('settings.subscription') && client
+          ? generateWebLink({
+              cozyUrl: client.getStackClient().uri,
+              hash: '/subscription',
+              pathname: '/',
+              slug: 'settings',
+              subDomainType: client.getInstanceOptions().subdomain
+            })
+          : buildPremiumLink(instanceInfo)
+      window.open(link, '_self')
+    },
+    Component
+  }
+}

src/components/Settings/actions/profile.js

@@ -0,0 +1,38 @@
+import React, { forwardRef } from 'react'
+
+import ActionsMenuItem from 'cozy-ui/transpiled/react/ActionsMenu/ActionsMenuItem'
+import ListItemIcon from 'cozy-ui/transpiled/react/ListItemIcon'
+import ListItemText from 'cozy-ui/transpiled/react/ListItemText'
+import Icon from 'cozy-ui/transpiled/react/Icon'
+import PeopleIcon from 'cozy-ui/transpiled/react/Icons/People'
+
+import { getSettingsLink } from 'components/Settings/helper'
+
+const Component = forwardRef(({ action, ...props }, ref) => {
+  return (
+    <ActionsMenuItem {...props} ref={ref} color="primary">
+      <ListItemIcon>
+        <Icon icon={action.icon} />
+      </ListItemIcon>
+      <ListItemText primary={action.label} />
+    </ActionsMenuItem>
+  )
+})
+
+Component.displayName = 'ProfileAction'
+
+export const profile = ({ t }) => {
+  const icon = PeopleIcon
+  const label = t('profile')
+
+  return {
+    name: 'profile',
+    icon,
+    label,
+    action: (_, { client }) => {
+      const link = getSettingsLink({ client, hash: 'profile' })
+      window.open(link, '_self')
+    },
+    Component
+  }
+}