cozy-bar 0.0.0-development

package/src/components/Settings/SettingsContent.jsx

@@ -0,0 +1,163 @@
+import React from 'react'
+import PropTypes from 'prop-types'
+
+import { isMobileApp } from 'cozy-device-helper'
+
+import { translate } from 'cozy-ui/react/I18n'
+import { ButtonLink } from 'cozy-ui/react/Button'
+import Icon from 'cozy-ui/transpiled/react/Icon'
+import PhoneIcon from 'cozy-ui/transpiled/react/Icons/Phone'
+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 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 NavGroup = ({ children }) => {
+  return <ul className="coz-nav-group">{children}</ul>
+}
+
+const NavItem = ({ children }) => {
+  return <li className="coz-nav-settings-item">{children}</li>
+}
+
+const SettingsContent = ({
+  t,
+  onLogOut,
+  settingsAppURL,
+  storageData,
+  onClaudy,
+  isDrawer = false,
+  isClaudyLoading,
+  toggleSupport,
+  shoulDisplayViewOfferButton,
+  managerUrlPremiumLink,
+  viewOfferButtonText
+}) => (
+  <div className="coz-nav-pop-content">
+    {isDrawer && <hr />}
+    {settingsAppURL && (
+      <NavGroup>
+        <NavItem>
+          <a
+            role="menuitem"
+            href={`${settingsAppURL}#/profile`}
+            target="_self"
+            title={t('profile')}
+          >
+            <MenuIcon className="u-mr-half" icon={PeopleIcon} />
+            {t('profile')}
+          </a>
+        </NavItem>
+        <NavItem>
+          <a
+            role="menuitem"
+            href={`${settingsAppURL}#/connectedDevices`}
+            target="_self"
+            title={t('connectedDevices')}
+          >
+            <MenuIcon icon={PhoneIcon} />
+            {t('connectedDevices')}
+          </a>
+        </NavItem>
+      </NavGroup>
+    )}
+    {isDrawer && onClaudy && !isMobileApp() && (
+      <NavGroup>
+        <NavItem>
+          <button
+            type="button"
+            role="menuitem"
+            className="coz-nav-settings-item-btn"
+            busy={isClaudyLoading}
+            onClick={onClaudy}
+          >
+            <MenuIcon icon={CloudIcon} /> {t('claudy.title')}
+          </button>
+        </NavItem>
+      </NavGroup>
+    )}
+    {!isDrawer && storageData && (
+      <NavGroup>
+        <NavItem>
+          <a
+            role="menuitem"
+            target="_self"
+            title={t('storage')}
+            href={`${settingsAppURL}#/storage`}
+          >
+            <MenuIcon icon={StorageIcon} /> {t('storage')}
+            <StorageData data={storageData} />
+          </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"
+          role="menuitem"
+          onClick={onLogOut}
+          title={t('logout')}
+        >
+          <MenuIcon icon={LogoutIcon} /> {t('logout')}
+        </button>
+      </NavItem>
+    </NavGroup>
+  </div>
+)
+
+SettingsContent.defaultProps = {
+  shoulDisplayViewOfferButton: false
+}
+
+SettingsContent.propTypes = {
+  shoulDisplayViewOfferButton: PropTypes.bool,
+  t: PropTypes.func.isRequired,
+  onLogOut: PropTypes.func.isRequired,
+  settingsAppURL: PropTypes.string,
+  storageData: PropTypes.object,
+  onClaudy: PropTypes.oneOfType([PropTypes.bool, PropTypes.func]),
+  isDrawer: PropTypes.bool,
+  isClaudyLoading: PropTypes.bool,
+  toggleSupport: PropTypes.func.isRequired,
+  viewOfferButtonText: PropTypes.string
+}
+export default translate()(SettingsContent)

package/src/components/Settings/StorageData.jsx

@@ -0,0 +1,29 @@
+import React from 'react'
+import { translate } from 'cozy-ui/react/I18n'
+
+const StorageData = ({ t, data }) => {
+  const diskQuota = Number.isInteger(data.quota)
+    ? (data.quota / (1000 * 1000 * 1000)).toFixed(2)
+    : data.quota
+  const diskUsage = Number.isInteger(data.usage)
+    ? (data.usage / (1000 * 1000 * 1000)).toFixed(2)
+    : data.usage
+  return (
+    <div className="coz-nav-storage">
+      <p className="coz-nav-storage-text">
+        {t('storage_phrase', {
+          diskUsage,
+          diskQuota
+        })}
+      </p>
+      <progress
+        className="cozy-nav-storage-bar"
+        value={diskUsage}
+        max={diskQuota}
+        min="0"
+      />
+    </div>
+  )
+}
+
+export default translate()(StorageData)

package/src/components/Settings/helper.js

@@ -0,0 +1,8 @@
+import { compareClientVersion } from 'lib/stack-client'
+export const isFetchingQueries = requests => {
+  return requests.some(request => request.fetchStatus === 'loading')
+}
+
+export const cozyClientCanCheckPremium = () => {
+  return compareClientVersion('8.3.0')
+}

package/src/components/Settings/index.jsx

@@ -0,0 +1,220 @@
+import React, { Component } from 'react'
+import { connect } from 'react-redux'
+import { compose } from 'redux'
+import get from 'lodash/get'
+
+import { translate } from 'cozy-ui/react/I18n'
+import { Button } from 'cozy-ui/react/Button'
+import GearIcon from 'cozy-ui/react/Icons/Gear'
+
+import { queryConnect } from 'cozy-client/dist'
+import { models } from 'cozy-client'
+let instanceModel = undefined
+let hasAnOffer = undefined
+let isFremiumFixed = undefined
+if (models) {
+  instanceModel = models.instance
+  // TODO fallback from cozy-client
+  isFremiumFixed = data => {
+    const GB = 1000 * 1000 * 1000
+    const PREMIUM_QUOTA = 50 * GB
+    const quota = get(data, 'diskUsage.data.attributes.quota', false)
+    return parseInt(quota) < PREMIUM_QUOTA
+  }
+  hasAnOffer = data => {
+    return (
+      !instanceModel.isSelfHosted(data) &&
+      instanceModel.arePremiumLinksEnabled(data) &&
+      instanceModel.getUuid(data) &&
+      !isFremiumFixed(data)
+    )
+  }
+}
+
+import SettingsContent from 'components/Settings/SettingsContent'
+import {
+  fetchSettingsData,
+  getStorageData,
+  getSettingsAppURL,
+  isSettingsBusy,
+  isFetchingSettings,
+  logOut
+} from 'lib/reducers'
+
+import { instanceReq, contextReq, diskUsageReq } from '../../queries'
+
+import {
+  isFetchingQueries,
+  cozyClientCanCheckPremium
+} from 'components/Settings/helper'
+
+export class Settings extends Component {
+  constructor(props) {
+    super(props)
+    this.state = {
+      opened: false
+    }
+  }
+
+  componentDidMount() {
+    document.body.addEventListener('click', this.onClickOutside)
+  }
+
+  componentWillUnmount() {
+    document.body.removeEventListener('click', this.onClickOutside)
+  }
+
+  onClickOutside = event => {
+    if (this.props.isFetching || this.state.opened) {
+      // if it's not a cozy-bar nav popup, close the opened popup
+      if (!this.rootRef.contains(event.target)) {
+        this.setState({ opened: false })
+        event.stopPropagation()
+      }
+    }
+  }
+
+  toggleMenu = () => {
+    let stateUpdate = { opened: false }
+    // if popup already opened, stop here to close it
+    if (this.state.opened) return this.setState(stateUpdate)
+    // fetch data
+    this.props.fetchSettingsData()
+    this.setState({ opened: true })
+  }
+
+  render() {
+    const {
+      isBusy,
+      logOut,
+      onLogOut,
+      t,
+      toggleSupport,
+      diskUsageQuery,
+      instanceQuery,
+      contextQuery,
+      storageData,
+      settingsAppURL,
+      isFetching
+    } = this.props
+
+    let shouldDisplayViewOfferButton = false
+    let managerUrlPremiumLink
+    let isFetchingFromQueries
+    let viewOfferButtonText = ''
+    const canCheckPremium = cozyClientCanCheckPremium()
+    if (canCheckPremium) {
+      isFetchingFromQueries = isFetchingQueries([
+        diskUsageQuery,
+        instanceQuery,
+        contextQuery
+      ])
+      if (!isFetchingFromQueries) {
+        const data = {
+          context: contextQuery,
+          diskUsage: diskUsageQuery,
+          instance: instanceQuery
+        }
+        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)
+      }
+    }
+
+    let areAllFetchingDone = false
+    if (!canCheckPremium) {
+      areAllFetchingDone = !isFetching
+    } else {
+      areAllFetchingDone = !isFetchingFromQueries && !isFetching
+    }
+
+    const { opened } = this.state
+    const openMenu = opened && areAllFetchingDone
+    return (
+      <div
+        className="coz-nav coz-nav-settings"
+        ref={ref => {
+          this.rootRef = ref
+        }}
+      >
+        <Button
+          type="button"
+          theme="text"
+          onClick={this.toggleMenu}
+          className="coz-nav-settings-btn"
+          aria-controls="coz-nav-pop--settings"
+          busy={isBusy}
+          icon={GearIcon}
+          label={t('menu.settings')}
+        />
+        <div
+          className="coz-nav-pop coz-nav-pop--settings"
+          id="coz-nav-pop--settings"
+          aria-hidden={!openMenu}
+        >
+          {areAllFetchingDone && (
+            <>
+              <SettingsContent
+                onLogOut={() => {
+                  if (onLogOut && typeof onLogOut === 'function') {
+                    onLogOut()
+                  } else {
+                    logOut()
+                  }
+                }}
+                toggleSupport={toggleSupport}
+                storageData={storageData}
+                settingsAppURL={settingsAppURL}
+                shoulDisplayViewOfferButton={shouldDisplayViewOfferButton}
+                managerUrlPremiumLink={managerUrlPremiumLink}
+                viewOfferButtonText={viewOfferButtonText}
+              />
+            </>
+          )}
+        </div>
+      </div>
+    )
+  }
+}
+
+const mapStateToProps = state => ({
+  storageData: getStorageData(state),
+  settingsAppURL: getSettingsAppURL(state),
+  isBusy: isSettingsBusy(state),
+  isFetching: isFetchingSettings(state)
+})
+
+const mapDispatchToProps = dispatch => ({
+  fetchSettingsData: () => dispatch(fetchSettingsData()),
+  logOut: () => dispatch(logOut())
+})
+let exported
+if (cozyClientCanCheckPremium()) {
+  exported = compose(
+    translate(),
+    queryConnect({
+      instanceQuery: instanceReq,
+      contextQuery: contextReq,
+      diskUsageQuery: diskUsageReq
+    }),
+    connect(
+      mapStateToProps,
+      mapDispatchToProps
+    )
+  )(Settings)
+} else {
+  exported = compose(
+    translate(),
+    connect(
+      mapStateToProps,
+      mapDispatchToProps
+    )
+  )(Settings)
+}
+export default exported

package/src/components/StorageIcon.jsx

@@ -0,0 +1,16 @@
+/* Automatically generated via svgr */
+
+import React from 'react'
+
+function SvgIconStorage16(props) {
+  return (
+    <svg width={16} height={16} {...props}>
+      <path
+        fillRule="evenodd"
+        d="M1 4h14v10.004a1 1 0 01-1.007.996H2.007A1 1 0 011 14.004V4zM0 2c0-.552.445-1 1-1h14c.552 0 1 .444 1 1v1H0V2zm5 4h6v2H5V6z"
+      />
+    </svg>
+  )
+}
+
+export default SvgIconStorage16

package/src/components/SupportModal.jsx

@@ -0,0 +1,59 @@
+import React, { Component } from 'react'
+import Modal, { ModalContent } from 'cozy-ui/react/Modal'
+import Spinner from 'cozy-ui/react/Spinner'
+import { getIntents } from 'lib/stack'
+
+class SupportModal extends Component {
+  constructor(props, context) {
+    super(props)
+    this.store = context.barStore
+    this.state = {
+      isLoading: false
+    }
+    this.intents = getIntents()
+  }
+
+  toggle = () => {
+    this.setState({ isLoading: true })
+    // init support intent
+    this.intents
+      .create('SUPPORT', 'io.cozy.settings')
+      .start(this.intentWrapperRef, () => {
+        this.setState({ isLoading: false })
+      })
+  }
+
+  componentDidMount() {
+    this.toggle()
+  }
+
+  render() {
+    const { isLoading } = this.state
+    return (
+      <div>
+        <Modal
+          secondaryAction={this.props.onClose}
+          className="coz-support-modal"
+          into="#cozy-bar-modal-dom-place"
+          closeBtnClassName="coz-support-modal-close"
+        >
+          <ModalContent className="coz-support-modal-wrapper u-mt-1">
+            <div className="coz-support-modal-content">
+              {isLoading && <Spinner size="xxlarge" middle />}
+              <div
+                className={`coz-support-intent-wrapper${
+                  isLoading ? ' coz-hidden' : ''
+                }`}
+                ref={wrapper => {
+                  this.intentWrapperRef = wrapper
+                }}
+              />
+            </div>
+          </ModalContent>
+        </Modal>
+      </div>
+    )
+  }
+}
+
+export default SupportModal