cozy-bar 1.17.1

package/src/components/Banner.jsx

@@ -0,0 +1,41 @@
+import React, { Component } from 'react'
+import { ButtonLink } from 'cozy-ui/react/Button'
+import { translate } from 'cozy-ui/react/I18n'
+
+class Banner extends Component {
+  constructor(props) {
+    super(props)
+    this.state = { unmounted: true }
+    this.animate = this.animate.bind(this)
+  }
+
+  animate() {
+    // To animate we have to use a setTimeout to
+    // force a CSS class update and trigger CSS animation
+    return setTimeout(() => {
+      this.setState(() => ({ unmounted: false }))
+    }, 100)
+  }
+
+  componentDidMount() {
+    this.animate()
+  }
+
+  render() {
+    const { t, code, links } = this.props
+    const { unmounted } = this.state
+    return (
+      <div className={`coz-bar-banner${unmounted ? ' unmounted' : ''}`}>
+        <p>{t(`banner.${code}.description`)}</p>
+        <ButtonLink
+          className="coz-bar-banner-button"
+          size="tiny"
+          href={links}
+          label={t(`banner.${code}.CTA`)}
+        />
+      </div>
+    )
+  }
+}
+
+export default translate()(Banner)

package/src/components/Bar.jsx

@@ -0,0 +1,293 @@
+/* global __PIWIK_TRACKER_URL__  __PIWIK_SITEID__ __PIWIK_DIMENSION_ID_APP__ */
+
+import React, { Component } from 'react'
+import { connect } from 'react-redux'
+
+import { translate } from 'cozy-ui/react/I18n'
+import Icon from 'cozy-ui/react/Icon'
+import {
+  shouldEnableTracking,
+  getTracker,
+  configureTracker
+} from 'cozy-ui/react/helpers/tracker'
+import { isMobileApp } from 'cozy-device-helper'
+
+import { ButtonCozyHome } from 'components/Apps/ButtonCozyHome'
+import Banner from 'components/Banner'
+import Drawer from 'components/Drawer'
+import Settings from 'components/Settings'
+import Apps from 'components/Apps'
+import SearchBar from 'components/SearchBar'
+import Claudy from 'components/Claudy'
+import SupportModal from 'components/SupportModal'
+import {
+  getTheme,
+  hasFetched,
+  getContent,
+  isCurrentApp,
+  fetchApps,
+  fetchContext,
+  fetchSettingsData,
+  shouldEnableClaudy,
+  getWebviewContext
+} from 'lib/reducers'
+
+import appsIcon from 'assets/sprites/icon-apps.svg'
+
+export class Bar extends Component {
+  constructor(props) {
+    super(props)
+    this.state = {
+      claudyFired: false, // true to fire claudy (used by the drawer)
+      claudyOpened: false,
+      drawerVisible: false,
+      usageTracker: null,
+      supportDisplayed: false,
+      searchBarEnabled: props.isDrive && !props.isPublic && !isMobileApp()
+    }
+    this.fetchApps = this.fetchApps.bind(this)
+    this.fetchInitialData = this.fetchInitialData.bind(this)
+    this.handleTokenRefreshed = this.handleTokenRefreshed.bind(this)
+  }
+
+  componentDidMount() {
+    if (shouldEnableTracking()) {
+      this.initPiwikTracker()
+    }
+    this.fetchInitialData()
+
+    const cozyClient = this.props.cozyClient
+    cozyClient.on('tokenRefreshed', this.handleTokenRefreshed)
+  }
+
+  componentWillUnmount() {
+    const cozyClient = this.props.cozyClient
+    cozyClient.removeListener('tokenRefreshed', this.handleTokenRefreshed)
+  }
+
+  componentDidUpdate(prevProps, prevState) {
+    if (
+      !this.props.hasFetchedApps &&
+      this.state.drawerVisible &&
+      prevState.drawerVisible !== this.state.drawerVisible
+    ) {
+      this.fetchApps()
+    }
+  }
+
+  handleTokenRefreshed() {
+    this.fetchInitialData()
+  }
+
+  initPiwikTracker() {
+    const trackerInstance = getTracker(
+      __PIWIK_TRACKER_URL__,
+      __PIWIK_SITEID__,
+      false,
+      false
+    )
+    configureTracker({
+      appDimensionId: __PIWIK_DIMENSION_ID_APP__,
+      app: 'Cozy Bar',
+      heartbeat: 0
+    })
+    this.setState({ usageTracker: trackerInstance })
+  }
+
+  fetchApps() {
+    this.props.fetchApps()
+  }
+
+  fetchInitialData() {
+    if (this.props.isPublic) {
+      return
+    }
+    this.props.fetchContext()
+    this.props.fetchSettingsData(false)
+    this.fetchApps()
+  }
+
+  toggleDrawer = () => {
+    // don't allow to toggle the drawer if claudy opened or is opening
+    if (this.state.claudyOpened || this.state.claudyFired) return
+    const drawerVisible = !this.state.drawerVisible
+    // don't wait for transitionend if displaying
+    if (drawerVisible) this.props.onDrawer(drawerVisible)
+    this.setState({ drawerVisible })
+  }
+
+  toggleClaudy = (isFromDrawer = false) => {
+    if (!this.props.claudyEnabled) return
+    const { usageTracker, claudyOpened } = this.state
+    if (isFromDrawer && !claudyOpened) {
+      // if opened from drawer
+      // reset to toggle via the Claudy component
+      return this.setState({ claudyFired: true })
+    }
+    if (this.state.claudyFired) this.setState({ claudyFired: false })
+    if (usageTracker) {
+      usageTracker.push([
+        'trackEvent',
+        'Claudy',
+        claudyOpened ? 'close' : 'open',
+        'claudy'
+      ])
+    }
+    this.setState({ claudyOpened: !claudyOpened })
+  }
+
+  toggleSupport = () => {
+    const { supportDisplayed } = this.state
+    this.setState({ supportDisplayed: !supportDisplayed })
+  }
+
+  renderCenter() {
+    const {
+      appName,
+      appNamePrefix,
+      appSlug,
+      iconPath,
+      replaceTitleOnMobile,
+      isPublic
+    } = this.props
+    return (
+      <Apps
+        appName={appName}
+        appNamePrefix={appNamePrefix}
+        appSlug={appSlug}
+        iconPath={iconPath}
+        replaceTitleOnMobile={replaceTitleOnMobile}
+        isPublic={isPublic}
+      />
+    )
+  }
+
+  renderLeft = () => {
+    const { t, isPublic, webviewContext } = this.props
+
+    if (webviewContext) {
+      return <ButtonCozyHome webviewContext={webviewContext} />
+    }
+
+    // data-tutorial attribute allows to be targeted in an application tutorial
+    return !isPublic ? (
+      <button
+        type="button"
+        className="coz-bar-btn coz-bar-burger"
+        onClick={this.toggleDrawer}
+        data-tutorial="apps-mobile"
+      >
+        <Icon icon={appsIcon} width={16} height={16} color="currentColor" />
+        <span className="coz-bar-hidden">{t('drawer')}</span>
+      </button>
+    ) : null
+  }
+
+  renderRight = () => {
+    const { isPublic } = this.props
+    return !isPublic ? (
+      <Settings
+        toggleSupport={this.toggleSupport}
+        onLogOut={this.props.onLogOut}
+      />
+    ) : null
+  }
+
+  render() {
+    const {
+      claudyFired,
+      claudyOpened,
+      drawerVisible,
+      searchBarEnabled,
+      supportDisplayed,
+      usageTracker
+    } = this.state
+
+    const {
+      theme,
+      themeOverrides,
+      barLeft,
+      barRight,
+      barCenter,
+      barSearch,
+      claudyEnabled,
+      onDrawer,
+      isPublic,
+      onLogOut,
+      userActionRequired
+    } = this.props
+
+    const {
+      primaryColor: pColor,
+      primaryContrastTextColor: pctColor
+    } = themeOverrides
+    const pStyle = pColor ? { '--cozBarThemePrimaryColor': pColor } : {}
+    const pctStyle = pctColor
+      ? { '--cozBarThemePrimaryContrastTextColor': pctColor }
+      : {}
+    const themeStyle = { ...pStyle, ...pctStyle }
+
+    return (
+      <div className={`coz-bar-wrapper coz-theme-${theme}`} style={themeStyle}>
+        <div id="cozy-bar-modal-dom-place" />
+        <div className="coz-bar-container">
+          {barLeft || this.renderLeft()}
+          {barCenter || this.renderCenter()}
+          <div className="u-flex-grow">
+            {barSearch || (searchBarEnabled ? <SearchBar /> : null)}
+          </div>
+          {barRight || this.renderRight()}
+          {!isPublic ? (
+            <Drawer
+              visible={drawerVisible}
+              onClose={this.toggleDrawer}
+              onClaudy={
+                (claudyEnabled && (() => this.toggleClaudy(true))) || false
+              }
+              isClaudyLoading={claudyFired}
+              drawerListener={() => onDrawer(drawerVisible)}
+              toggleSupport={this.toggleSupport}
+              onLogOut={onLogOut}
+            />
+          ) : null}
+          {claudyEnabled && (
+            <Claudy
+              usageTracker={usageTracker}
+              claudyFired={claudyFired}
+              onToggle={() => this.toggleClaudy(false)}
+              opened={claudyOpened}
+            />
+          )}
+          {supportDisplayed && <SupportModal onClose={this.toggleSupport} />}
+        </div>
+        {userActionRequired && <Banner {...userActionRequired} />}
+      </div>
+    )
+  }
+}
+
+export const mapStateToProps = state => ({
+  theme: getTheme(state).name,
+  themeOverrides: getTheme(state).overrides,
+  barLeft: getContent(state, 'left'),
+  barRight: getContent(state, 'right'),
+  barCenter: getContent(state, 'center'),
+  barSearch: getContent(state, 'search'),
+  isDrive: isCurrentApp(state, { slug: 'drive' }),
+  claudyEnabled: shouldEnableClaudy(state),
+  hasFetchedApps: hasFetched(state),
+  webviewContext: getWebviewContext(state)
+})
+
+export const mapDispatchToProps = dispatch => ({
+  fetchApps: () => dispatch(fetchApps()),
+  fetchContext: () => dispatch(fetchContext()),
+  fetchSettingsData: displayBusy => dispatch(fetchSettingsData(displayBusy))
+})
+
+export default translate()(
+  connect(
+    mapStateToProps,
+    mapDispatchToProps
+  )(Bar)
+)

package/src/components/Bar.spec.jsx

@@ -0,0 +1,133 @@
+import React from 'react'
+import { shallow } from 'enzyme'
+import { isFlagshipApp, isMobileApp } from 'cozy-device-helper'
+import toJson from 'enzyme-to-json'
+import reducers from 'lib/reducers'
+import CozyClient from 'cozy-client'
+
+import { Bar, mapStateToProps, mapDispatchToProps } from './Bar'
+
+jest.mock('cozy-device-helper', () => ({
+  ...require.requireActual('cozy-device-helper'),
+  isMobileApp: jest.fn(),
+  isFlagshipApp: jest.fn()
+}))
+
+describe('Bar', () => {
+  let props, client
+  beforeEach(() => {
+    jest.resetAllMocks()
+    jest.spyOn(Bar.prototype, 'fetchApps')
+    isMobileApp.mockReturnValue(false)
+    client = new CozyClient({})
+    props = {
+      fetchContext: jest.fn().mockResolvedValue({}),
+      fetchApps: jest.fn().mockResolvedValue([]),
+      fetchSettingsData: jest.fn().mockResolvedValue({}),
+      theme: 'default',
+      themeOverrides: {},
+      t: x => x,
+      cozyClient: client
+    }
+  })
+
+  afterEach(() => {
+    Bar.prototype.fetchApps.mockRestore()
+    isFlagshipApp.mockClear()
+  })
+
+  it('should fetch data when mounted', () => {
+    shallow(<Bar {...props} />)
+    expect(props.fetchContext).toHaveBeenCalled()
+    expect(props.fetchApps).toHaveBeenCalled()
+    expect(props.fetchSettingsData).toHaveBeenCalled()
+    expect(Bar.prototype.fetchApps).toHaveBeenCalled()
+  })
+
+  it('should not fetch data if public', () => {
+    shallow(<Bar {...props} isPublic={true} />)
+    expect(props.fetchContext).not.toHaveBeenCalled()
+    expect(props.fetchApps).not.toHaveBeenCalled()
+    expect(props.fetchSettingsData).not.toHaveBeenCalled()
+    expect(Bar.prototype.fetchApps).not.toHaveBeenCalled()
+  })
+
+  it('should not fetch apps if hasFetchedApps is true', () => {
+    const barWrapper = shallow(<Bar {...props} hasFetchedApps={true} />)
+    jest.resetAllMocks()
+    barWrapper.setState({ drawerVisible: true }) // to call componentdidUpdate
+    expect(props.fetchApps).not.toHaveBeenCalled()
+    expect(Bar.prototype.fetchApps).not.toHaveBeenCalled()
+  })
+
+  it('should re-fetch apps if apps are not fetched and drawer opens', () => {
+    const barWrapper = shallow(<Bar {...props} />)
+    expect(Bar.prototype.fetchApps).toHaveBeenCalledTimes(1)
+    expect(props.fetchApps).toHaveBeenCalledTimes(1)
+    barWrapper.setState({ drawerVisible: true })
+    expect(props.fetchApps).toHaveBeenCalledTimes(2)
+    expect(Bar.prototype.fetchApps).toHaveBeenCalledTimes(2)
+    barWrapper.setState({ drawerVisible: true, usageTracker: {} })
+    expect(props.fetchApps).toHaveBeenCalledTimes(2)
+    expect(Bar.prototype.fetchApps).toHaveBeenCalledTimes(2)
+  })
+
+  it('should change theme', () => {
+    const barWrapper = shallow(<Bar {...props} theme="primary" />)
+    expect(toJson(barWrapper)).toMatchSnapshot()
+  })
+
+  it('should change allow theme overrides', () => {
+    const barWrapper = shallow(
+      <Bar
+        {...props}
+        theme="primary"
+        themeOverrides={{ primaryColor: 'red' }}
+      />
+    )
+    expect(toJson(barWrapper)).toMatchSnapshot()
+  })
+
+  it('should display the Searchbar', () => {
+    const barWrapper = shallow(<Bar {...props} isDrive isPublic={false} />)
+    expect(toJson(barWrapper)).toMatchSnapshot()
+  })
+
+  it('should not display searchbar if we are on mobile', () => {
+    isMobileApp.mockReturnValue(true)
+    const barWrapper = shallow(<Bar {...props} isDrive isPublic={false} />)
+    expect(toJson(barWrapper)).toMatchSnapshot()
+  })
+
+  it('should not display searchbar if we are not on Cozy Drive', () => {
+    isMobileApp.mockReturnValue(true)
+    const barWrapper = shallow(
+      <Bar {...props} isDrive={false} isPublic={false} />
+    )
+    expect(toJson(barWrapper)).toMatchSnapshot()
+  })
+
+  it('should not display searchbar if we are not on  a public page', () => {
+    isMobileApp.mockReturnValue(true)
+    const barWrapper = shallow(<Bar {...props} isDrive isPublic={true} />)
+    expect(toJson(barWrapper)).toMatchSnapshot()
+  })
+
+  it('should have correct state props provided by the store with the initial state', () => {
+    const initialState = reducers(undefined, {})
+    expect(mapStateToProps(initialState)).toMatchSnapshot()
+  })
+
+  it('should have correct dispatch props provided by the store', () => {
+    expect(mapDispatchToProps(jest.fn())).toMatchSnapshot()
+  })
+
+  it('should call re-fetch data when token is refreshed', () => {
+    shallow(<Bar {...props} isDrive={false} isPublic={false} />)
+    client.emit('tokenRefreshed')
+    expect(props.fetchContext).toHaveBeenCalledTimes(2)
+    expect(props.fetchApps).toHaveBeenCalledTimes(2)
+    expect(props.fetchSettingsData).toHaveBeenCalledTimes(2)
+    expect(Bar.prototype.fetchApps).toHaveBeenCalledTimes(2)
+  })
+})

package/src/components/Claudy.jsx

@@ -0,0 +1,81 @@
+import React, { Component } from 'react'
+import { getIntents } from 'lib/stack'
+
+class Claudy extends Component {
+  constructor(props, context) {
+    super(props)
+    this.store = context.barStore
+    this.state = {
+      isLoading: false,
+      isActive: false
+    }
+    this.intents = getIntents()
+  }
+
+  UNSAFE_componentWillReceiveProps(nextProps) {
+    if (nextProps.claudyFired) this.toggle()
+  }
+
+  componentWillReceiveProps(nextProps) {
+    return this.UNSAFE_componentWillReceiveProps(nextProps)
+  }
+
+  toggle = () => {
+    if (!this.props.opened && !this.intentWrapperRef.childNodes.length) {
+      this.setState({ isLoading: true })
+      // init Claudy intent
+      this.intents
+        .create('CLAUDY', 'io.cozy.settings', {
+          exposeIntentFrameRemoval: true
+        })
+        .start(this.intentWrapperRef, () => {
+          this.setState({ isLoading: false, isActive: true })
+          this.props.onToggle() // toggle claudy when the intent is loaded
+        })
+        .then(({ removeIntentIframe }) => {
+          // exposeFrameRemoval intent event
+          // remove the intent frame at the end of the menu closing transition
+          const closedListener = e => {
+            if (e.propertyName === 'transform') {
+              removeIntentIframe()
+              this.setState({ isActive: false })
+              e.target.removeEventListener('transitionend', closedListener)
+            }
+          }
+          this.intentWrapperRef.addEventListener(
+            'transitionend',
+            closedListener,
+            false
+          )
+          this.props.onToggle()
+        })
+    } else {
+      this.setState({ isActive: !this.state.isActive })
+      this.props.onToggle()
+    }
+  }
+
+  render() {
+    const { opened } = this.props
+    const { isLoading, isActive } = this.state
+    return (
+      <div className={`coz-claudy ${opened ? 'coz-claudy--opened' : ''}`}>
+        <button
+          type="button"
+          className="coz-claudy-icon coz-bar-hide-sm"
+          data-claudy-opened={isActive}
+          data-claudy-loading={isLoading}
+          onClick={this.toggle}
+        />
+        <div
+          className="coz-claudy-intent-wrapper"
+          ref={wrapper => {
+            this.intentWrapperRef = wrapper
+          }}
+        />
+      </div>
+    )
+  }
+}
+
+export default Claudy