feat: Update settings sections

cozy · Dec 2, 2022 · 259953a · 259953a
1 parent 1f4beec
commit 259953a
Show file tree

Hide file tree

Showing 8 changed files with 103 additions and 89 deletions.
diff --git a/src/components/Drawer.spec.jsx b/src/components/Drawer.spec.jsx
@@ -24,7 +24,7 @@ const Wrapper = ({ children }) => {
 describe('bar', () => {
   describe('logout', () => {
     const findLogoutButton = () => {
-      return screen.getByText('Sign out')
+      return screen.getByText('Log out')
     }
     const setup = ({ onLogOut, logOut }) => {
       render(

diff --git a/src/components/Settings/SettingsContent.jsx b/src/components/Settings/SettingsContent.jsx
@@ -1,25 +1,38 @@
 import React from 'react'
 import PropTypes from 'prop-types'
+import flag from 'cozy-flags'
 
 import { isMobileApp } from 'cozy-device-helper'
 
-import { ButtonLink } from 'cozy-ui/react/Button'
 import { translate } from 'cozy-ui/transpiled/react/I18n'
 import Icon from 'cozy-ui/transpiled/react/Icon'
-import PhoneIcon from 'cozy-ui/transpiled/react/Icons/Phone'
+import OpenwithIcon from 'cozy-ui/transpiled/react/Icons/Openwith'
 import CloudIcon from 'cozy-ui/transpiled/react/Icons/Cloud'
 import PeopleIcon from 'cozy-ui/transpiled/react/Icons/People'
-import CloudHappyIcon from 'cozy-ui/transpiled/react/Icons/CloudHappy'
+import GraphCircleIcon from 'cozy-ui/transpiled/react/Icons/GraphCircle'
+import CozyCircleIcon from 'cozy-ui/transpiled/react/Icons/CozyCircle'
+import HandIcon from 'cozy-ui/transpiled/react/Icons/Hand'
+import DevicesIcon from 'cozy-ui/transpiled/react/Icons/Devices'
+import GlobeIcon from 'cozy-ui/transpiled/react/Icons/Globe'
 import LogoutIcon from 'cozy-ui/transpiled/react/Icons/Logout'
 import HelpIcon from 'cozy-ui/transpiled/react/Icons/Help'
 
 import StorageData from 'components/Settings/StorageData'
-import StorageIcon from 'components/StorageIcon'
 
 const MenuIcon = ({ icon }) => {
   return <Icon className="u-mr-half" color="var(--slateGrey)" icon={icon} />
 }
 
+const ExternalLinkIcon = () => {
+  return (
+    <Icon
+      className="coz-nav-settings-item-btn-external-icon"
+      color="var(--coolGrey)"
+      icon={OpenwithIcon}
+    />
+  )
+}
+
 const NavGroup = ({ children }) => {
   return <ul className="coz-nav-group">{children}</ul>
 }
@@ -36,10 +49,8 @@ const SettingsContent = ({
   onClaudy,
   isDrawer = false,
   isClaudyLoading,
-  toggleSupport,
   shoulDisplayViewOfferButton,
-  managerUrlPremiumLink,
-  viewOfferButtonText
+  managerUrlPremiumLink
 }) => (
   <div className="coz-nav-pop-content">
     {isDrawer && <hr />}
@@ -56,19 +67,73 @@ const SettingsContent = ({
             {t('profile')}
           </a>
         </NavItem>
+        {(!isDrawer || !isMobileApp()) && shoulDisplayViewOfferButton && (
+          <NavItem>
+            <a
+              role="menuitem"
+              href={managerUrlPremiumLink}
+              target="_self"
+              title={t('plans')}
+            >
+              <MenuIcon icon={CozyCircleIcon} />
+              {t('plans')}
+              <ExternalLinkIcon />
+            </a>
+          </NavItem>
+        )}
         <NavItem>
           <a
             role="menuitem"
-            href={`${settingsAppURL}#/connectedDevices`}
             target="_self"
-            title={t('connectedDevices')}
+            title={t('storage')}
+            href={`${settingsAppURL}#/storage`}
           >
-            <MenuIcon icon={PhoneIcon} />
-            {t('connectedDevices')}
+            <MenuIcon icon={GraphCircleIcon} />
+            <span>
+              {t('storage')}
+              <StorageData data={storageData} />
+            </span>
           </a>
         </NavItem>
       </NavGroup>
     )}
+    <NavGroup>
+      {flag('settings.permissions-dashboard') && (
+        <NavItem>
+          <a
+            role="menuitem"
+            href={`${settingsAppURL}#/permissions/slug`}
+            target="_self"
+            title={t('permissions')}
+          >
+            <MenuIcon icon={HandIcon} />
+            {t('permissions')}
+          </a>
+        </NavItem>
+      )}
+      <NavItem>
+        <a
+          role="menuitem"
+          href={`${settingsAppURL}#/connectedDevices`}
+          target="_self"
+          title={t('connectedDevices')}
+        >
+          <MenuIcon icon={DevicesIcon} />
+          {t('connectedDevices')}
+        </a>
+      </NavItem>
+      <NavItem>
+        <a
+          role="menuitem"
+          href={`${settingsAppURL}#/sessions`}
+          target="_self"
+          title={t('connections')}
+        >
+          <MenuIcon icon={GlobeIcon} />
+          {t('connections')}
+        </a>
+      </NavItem>
+    </NavGroup>
     {isDrawer && onClaudy && !isMobileApp() && (
       <NavGroup>
         <NavItem>
@@ -84,52 +149,22 @@ const SettingsContent = ({
         </NavItem>
       </NavGroup>
     )}
-    {!isDrawer && storageData && (
-      <NavGroup>
+    <NavGroup>
+      {!isMobileApp() && (
         <NavItem>
           <a
             role="menuitem"
-            target="_self"
-            title={t('storage')}
-            href={`${settingsAppURL}#/storage`}
+            target="_blank"
+            rel="noopener noreferrer"
+            href="https://support.cozy.io/"
+            title={t('help')}
           >
-            <MenuIcon icon={StorageIcon} /> {t('storage')}
-            <StorageData data={storageData} />
+            <MenuIcon icon={HelpIcon} />
+            {t('help')}
+            <ExternalLinkIcon />
           </a>
         </NavItem>
-      </NavGroup>
-    )}
-    {(!isDrawer || !isMobileApp()) && shoulDisplayViewOfferButton && (
-      <NavGroup>
-        <NavItem>
-          <ButtonLink
-            subtle
-            role="menuitem"
-            className="coz-nav-settings-item-btn"
-            icon={<MenuIcon icon={CloudHappyIcon} />}
-            title={viewOfferButtonText}
-            label={viewOfferButtonText}
-            href={managerUrlPremiumLink}
-          />
-        </NavItem>
-      </NavGroup>
-    )}
-
-    {!isMobileApp() && (
-      <NavGroup>
-        <NavItem>
-          <button
-            type="button"
-            role="menuitem"
-            className="coz-nav-settings-item-btn"
-            onClick={toggleSupport}
-          >
-            <MenuIcon icon={HelpIcon} /> {t('help')}
-          </button>
-        </NavItem>
-      </NavGroup>
-    )}
-    <NavGroup>
+      )}
       <NavItem>
         <button
           type="button"
@@ -156,8 +191,6 @@ SettingsContent.propTypes = {
   storageData: PropTypes.object,
   onClaudy: PropTypes.oneOfType([PropTypes.bool, PropTypes.func]),
   isDrawer: PropTypes.bool,
-  isClaudyLoading: PropTypes.bool,
-  toggleSupport: PropTypes.func.isRequired,
-  viewOfferButtonText: PropTypes.string
+  isClaudyLoading: PropTypes.bool
 }
 export default translate()(SettingsContent)
diff --git a/src/components/Settings/index.jsx b/src/components/Settings/index.jsx
@@ -101,7 +101,6 @@ export class Settings extends Component {
     let shouldDisplayViewOfferButton = false
     let managerUrlPremiumLink
     let isFetchingFromQueries
-    let viewOfferButtonText = ''
     const canCheckPremium = cozyClientCanCheckPremium()
     if (canCheckPremium) {
       isFetchingFromQueries = isFetchingQueries([
@@ -118,11 +117,6 @@ export class Settings extends Component {
         shouldDisplayViewOfferButton =
           instanceModel.shouldDisplayOffers(data) || hasAnOffer(data)
 
-        if (shouldDisplayViewOfferButton && !hasAnOffer(data)) {
-          viewOfferButtonText = t('view_offers')
-        } else if (hasAnOffer(data)) {
-          viewOfferButtonText = t('view_my_offer')
-        }
         managerUrlPremiumLink = instanceModel.buildPremiumLink(data)
       }
     }
@@ -173,7 +167,6 @@ export class Settings extends Component {
                 settingsAppURL={settingsAppURL}
                 shoulDisplayViewOfferButton={shouldDisplayViewOfferButton}
                 managerUrlPremiumLink={managerUrlPremiumLink}
-                viewOfferButtonText={viewOfferButtonText}
               />
             </>
           )}

diff --git a/src/components/StorageIcon.jsx b/src/components/StorageIcon.jsx
diff --git a/src/locales/en.json b/src/locales/en.json
@@ -1,13 +1,14 @@
 {
   "drawer": "Show menu drawer",
   "profile": "Profile",
+  "plans": "Plans",
+  "permissions": "Permissions",
   "connectedDevices": "Connected devices",
+  "connections": "Connections",
   "storage": "Storage",
   "storage_phrase": "%{diskUsage} GB of %{diskQuota} GB used",
-  "view_offers": "View offers",
-  "view_my_offer": "My offer",
-  "help": "Help",
-  "logout": "Sign out",
+  "help": "FAQ",
+  "logout": "Log out",
   "soon": "soon",
   "error_UnavailableStack": "The stack is unreachable (connection timed-out).",
   "error_UnauthorizedStack": "Some permissions are missing, the application can't access the requested resource on the stack.",

diff --git a/src/locales/fr.json b/src/locales/fr.json
@@ -1,12 +1,13 @@
 {
   "drawer": "Afficher le menu latéral",
   "profile": "Profil",
+  "plans": "Forfait",
+  "permissions": "Permissions",
   "connectedDevices": "Appareils connectés",
-  "storage": "Espace disque",
+  "connections": "Connexions",
+  "storage": "Stockage",
   "storage_phrase": "%{diskUsage} Go sur %{diskQuota} Go",
-  "view_offers": "Voir les offres",
-  "view_my_offer": "Mon offre",
-  "help": "Aide",
+  "help": "Manuel d'utilisation",
   "logout": "Déconnexion",
   "soon": "à venir",
   "error_UnavailableStack": "Connexion à la stack impossible (connection timed-out)",

diff --git a/src/styles/settings.css b/src/styles/settings.css
@@ -13,7 +13,7 @@
 }
 
 [role=banner] .coz-nav-settings-item [role=menuitem] {
-  display: block;
+  display: flex;
   box-sizing: border-box;
   margin: 0;
   width: 100%;
@@ -36,3 +36,6 @@
   margin-right: auto;
 }
 
+[role=banner] .coz-nav-settings-item .coz-nav-settings-item-btn-external-icon {
+  margin-left: auto;
+}
diff --git a/test/components/AppItem.spec.jsx b/test/components/AppItem.spec.jsx
@@ -72,8 +72,7 @@ describe('AppItem', () => {
         slug: 'invalid-app'
       }
       const { wrapper } = setup({ app: invalidApp })
-      const appLinkerWrapper = wrapper.find('AppLinker')
-      expect(appLinkerWrapper.props().href).toEqual('')
+      expect(wrapper.props().href).toEqual('')
     })
   })
 })