LiveChat.jsx

import React from 'react'
import { Provider, connect } from 'react-redux'
import { createStore, applyMiddleware } from 'redux'
import { composeWithDevTools } from 'redux-devtools-extension'
import createSagaMiddleware from 'redux-saga'
import PropTypes from 'prop-types'
import 'regenerator-runtime/runtime'

/* Core Sagas & Socket Sagas */
import { Reducers, Sagas as coreSagas } from './Core'
import { Sagas as socketSagas } from './Core/Socket'

/* App Setup */
import { Frame } from './containers'
import { ApiCreators } from './actions'
import { initTracking } from './Core/Tracking/helpers'
import './LiveChat.scss'

import middleware from './middleware'

const sagaMiddleware = createSagaMiddleware()
const webSocketMiddleware = createSagaMiddleware()

export const store = createStore(
  Reducers,
  composeWithDevTools(
    applyMiddleware(sagaMiddleware, webSocketMiddleware),
  )
)

sagaMiddleware.run(coreSagas)
webSocketMiddleware.run(socketSagas)

export class LiveChat extends React.Component {
  static propTypes = {
    frameIsActive: PropTypes.bool,
    onReceivedStatus: PropTypes.func,
    onGetContactCenterStatus: PropTypes.func
  }

  static defaultProps = {
    frameIsActive: false,
    onReceivedStatus: () => {},
    onGetContactCenterStatus: () => {}
  }

  componentDidMount() {
    const { onGetContactCenterStatus, onReceivedStatus } = this.props
    initTracking()
    onGetContactCenterStatus(onReceivedStatus)
  }

  render() {
    const {
      contactCenterOnline,
      contactCenterConnecting,
      frameIsActive
    } = this.props

    const chatOnline = !contactCenterConnecting && contactCenterOnline

    return (
      chatOnline && <Frame frameIsActive={frameIsActive} />
    )
  }
}

const mapStateToProps = (state) => ({
  contactCenterConnecting: state.Api.contactCenterConnecting,
  contactCenterOnline: state.Api.contactCenterOnline
})

const mapDispatchToProps = (dispatch) => ({
  onGetContactCenterStatus: (next) => dispatch(ApiCreators.contactCenterAttempt(next))
})

const LiveChatConnected = connect(mapStateToProps, mapDispatchToProps)(LiveChat)

export {
  middleware
}

export default ({ frameIsActive, onReceivedStatus }) =>
  <Provider store={store}>
    <LiveChatConnected {...{ frameIsActive, onReceivedStatus }} />
  </Provider>