Permalink
Browse files

Help Inbox users migrate to Gmail #788

  • Loading branch information...
Thomas101 committed Feb 5, 2019
1 parent c81d030 commit fdf65800d2584d21ba56cefc1398c432492fd6f5
@@ -76,6 +76,7 @@ const MAPPING = [
['fasArrowFromBottom', 'fasArrowDown'],
['fasMapPin', 'fasMapPin'],
['fasArrowToBottom', 'fasArrowDown'],
['fasExchangeAlt', 'fasExchangeAlt'],

['fabSlack', 'fabSlack'],
['fabGoogle', 'fabGoogle'],
@@ -28,6 +28,7 @@ import SERVICE_TYPES from 'shared/Models/ACAccounts/ServiceTypes'
import GenericService from 'shared/Models/ACAccounts/Generic/GenericService'
import CoreACService from 'shared/Models/ACAccounts/CoreACService'
import HtmlMetaService from 'HTTP/HtmlMetaService'
import GoogleMailService from 'shared/Models/ACAccounts/Google/GoogleMailService'

class AccountStore extends CoreAccountStore {
/* **************************************************************************/
@@ -105,7 +106,10 @@ class AccountStore extends CoreAccountStore {

// Reading queue
handleAddToReadingQueue: actions.ADD_TO_READING_QUEUE,
handleRemoveFromReadingQueue: actions.REMOVE_FROM_READING_QUEUE
handleRemoveFromReadingQueue: actions.REMOVE_FROM_READING_QUEUE,

// Google Inbox
handleConvertGoogleInboxToGmail: actions.CONVERT_GOOGLE_INBOX_TO_GMAIL
})
}

@@ -1329,6 +1333,33 @@ class AccountStore extends CoreAccountStore {
readingQueue: service.readingQueue.filter((b) => b.id !== id)
}))
}

/* **************************************************************************/
// Handlers: Google Inbox
/* **************************************************************************/

handleConvertGoogleInboxToGmail ({ serviceId, duplicateFirst }) {
const service = this.getService(serviceId)
if (!service) { this.preventDefault(); return }
if (service.type !== SERVICE_TYPES.GOOGLE_INBOX) { this.preventDefault(); return }

if (duplicateFirst) {
this.preventDefault()
const mailbox = this.getMailbox(service.parentId)
actions.createService.defer(service.parentId, mailbox.suggestedServiceUILocation, service.changeData({
type: SERVICE_TYPES.GOOGLE_MAIL,
inboxType: GoogleMailService.INBOX_TYPES.GMAIL_DEFAULT,
wasGoogleInboxService: true,
id: uuid.v4()
}))
} else {
this.saveService(serviceId, service.changeData({
type: SERVICE_TYPES.GOOGLE_MAIL,
inboxType: GoogleMailService.INBOX_TYPES.GMAIL_DEFAULT,
wasGoogleInboxService: true
}))
}
}
}

export default alt.createStore(AccountStore, STORE_NAME)
@@ -6,6 +6,7 @@ import { settingsStore, settingsActions } from 'stores/settings'
import { userStore } from 'stores/user'
import shallowCompare from 'react-addons-shallow-compare'
import red from '@material-ui/core/colors/red'
import green from '@material-ui/core/colors/green'
import SleepAllIcon from './SleepAllIcon'
import DeleteAllIcon from './DeleteAllIcon'
import OpenInNewIcon from '@material-ui/icons/OpenInNew'
@@ -26,6 +27,8 @@ import ServiceSidebarIcon from './ServiceSidebarIcon'
import ServiceToolbarStartIcon from './ServiceToolbarStartIcon'
import ServiceToolbarEndIcon from './ServiceToolbarEndIcon'
import MailboxReducer from 'shared/AltStores/Account/MailboxReducers/MailboxReducer'
import SERVICE_TYPES from 'shared/Models/ACAccounts/ServiceTypes'
import CompareArrowsIcon from '@material-ui/icons/CompareArrows'

const ITEM_TYPES = Object.freeze({
DIVIDER: 'DIVIDER',
@@ -46,7 +49,8 @@ const ITEM_TYPES = Object.freeze({
MAILBOX_ADD_SERVICE: 'MAILBOX_ADD_SERVICE',
DELETE_MAILBOX: 'DELETE_MAILBOX',
DELETE_SERVICE: 'DELETE_SERVICE',
BAR_LOCK: 'BAR_LOCK'
BAR_LOCK: 'BAR_LOCK',
GOOGLE_INBOX_CONVERT: 'GOOGLE_INBOX_CONVERT'
})

export default class MailboxAndServiceContextMenu extends React.Component {
@@ -67,14 +71,12 @@ export default class MailboxAndServiceContextMenu extends React.Component {
/* **************************************************************************/

componentDidMount () {
this.renderTO = null
accountStore.listen(this.accountChanged)
userStore.listen(this.userChanged)
settingsStore.listen(this.settingsChanged)
}

componentWillUnmount () {
clearTimeout(this.renderTO)
accountStore.unlisten(this.accountChanged)
userStore.unlisten(this.userChanged)
settingsStore.unlisten(this.settingsChanged)
@@ -84,17 +86,6 @@ export default class MailboxAndServiceContextMenu extends React.Component {
if (this.props.mailboxId !== nextProps.mailboxId || this.props.serviceId !== nextProps.serviceId) {
this.setState(this.generateAccountState(nextProps))
}
if (this.props.isOpen !== nextProps.isOpen) {
if (nextProps.isOpen) {
clearTimeout(this.renderTO)
this.setState({ rendering: true })
} else {
clearTimeout(this.renderTO)
this.renderTO = setTimeout(() => {
this.setState({ rendering: false })
}, 500)
}
}
}

/* **************************************************************************/
@@ -103,7 +94,6 @@ export default class MailboxAndServiceContextMenu extends React.Component {

state = {
...this.generateAccountState(this.props),
rendering: this.props.isOpen,
userHasSleepable: userStore.getState().user.hasSleepable,
lockSidebarsAndToolbars: settingsStore.getState().ui.lockSidebarsAndToolbars
}
@@ -117,6 +107,7 @@ export default class MailboxAndServiceContextMenu extends React.Component {
const { mailboxId, serviceId } = props
const mailbox = accountState.getMailbox(mailboxId)
const mailboxActiveServiceId = accountState.activeServiceIdInMailbox(mailboxId)
const service = accountState.getService(serviceId)

return {
mailbox: mailbox,
@@ -136,13 +127,15 @@ export default class MailboxAndServiceContextMenu extends React.Component {
serviceDisplayName: accountState.resolvedServiceDisplayName(serviceId),
isServiceSleeping: accountState.isServiceSleeping(serviceId),
isServiceActive: accountState.isServiceActive(serviceId),
isServiceAuthInvalid: accountState.isMailboxAuthInvalidForServiceId(serviceId)
isServiceAuthInvalid: accountState.isMailboxAuthInvalidForServiceId(serviceId),
serviceType: service.type
} : {
service: null,
serviceDisplayName: 'Untitled',
isServiceSleeping: false,
isServiceActive: false,
isServiceAuthInvalid: false
isServiceAuthInvalid: false,
serviceType: null
})
}
}
@@ -386,6 +379,13 @@ export default class MailboxAndServiceContextMenu extends React.Component {
})
}

handleConvertGoogleInboxToGmail = (evt, duplicateFirst) => {
const { serviceId } = this.props
this.closePopover(evt, () => {
accountActions.convertGoogleInboxToGmail(serviceId, duplicateFirst)
})
}

/* **************************************************************************/
// Rendering
/* **************************************************************************/
@@ -588,6 +588,17 @@ export default class MailboxAndServiceContextMenu extends React.Component {
primary={`${lockSidebarsAndToolbars ? 'Unlock' : 'Lock'} sidebar & toolbars`} />
</MenuItem>
)
case ITEM_TYPES.GOOGLE_INBOX_CONVERT:
return (
<MenuItem onClick={(evt) => this.handleConvertGoogleInboxToGmail(evt, false)}>
<ListItemIcon>
<CompareArrowsIcon style={{ color: green[700] }} />
</ListItemIcon>
<ListItemText
inset
primary={(<span style={{ color: green[700] }}>Convert to Gmail</span>)} />
</MenuItem>
)
}
}

@@ -610,14 +621,14 @@ export default class MailboxAndServiceContextMenu extends React.Component {
const {
mailbox,
service,
rendering,
serviceCount,
userHasSleepable,
isServiceSleeping,
mailboxActiveServiceId,
mailboxActiveServiceIsSleeping
mailboxActiveServiceIsSleeping,
serviceType
} = this.state
if (!mailbox || !rendering) { return false }
if (!mailbox) { return false }

const serviceIsPriority = this.isServicePriority(mailbox, service)

@@ -630,6 +641,7 @@ export default class MailboxAndServiceContextMenu extends React.Component {
onClose={this.closePopover}>
{/* Info & Util */}
{this.renderItem(ITEM_TYPES.INFO)}
{serviceType === SERVICE_TYPES.GOOGLE_INBOX ? this.renderItem(ITEM_TYPES.GOOGLE_INBOX_CONVERT) : undefined}
{service ? this.renderItem(ITEM_TYPES.SERVICE_OPEN_NEW) : undefined}

{/* Sleep */}
@@ -0,0 +1,143 @@
import PropTypes from 'prop-types'
import React from 'react'
import { accountActions } from 'stores/account'
import { userStore } from 'stores/user'
import { withStyles } from '@material-ui/core/styles'
import shallowCompare from 'react-addons-shallow-compare'
import AccessTimeIcon from '@material-ui/icons/AccessTime'
import ServiceInfoPanelActionButton from 'wbui/ServiceInfoPanelActionButton'
import ServiceInfoPanelActions from 'wbui/ServiceInfoPanelActions'
import ServiceInfoPanelBody from 'wbui/ServiceInfoPanelBody'
import ServiceInfoPanelContent from 'wbui/ServiceInfoPanelContent'
import ServiceInfoPanelTitle from 'wbui/ServiceInfoPanelTitle'
import Resolver from 'Runtime/Resolver'
import blue from '@material-ui/core/colors/blue'
import electron from 'electron'
import GoogleInboxServiceReducer from 'shared/AltStores/Account/ServiceReducers/GoogleInboxServiceReducer'
import CompareArrowsIcon from '@material-ui/icons/CompareArrows'

const styles = {
headImgContainer: {
textAlign: 'center'
},
headImg: {
width: 128,
height: 128,
marginTop: 8,
marginLeft: 8,
marginRight: 8
},
buttonIcon: {
marginRight: 6
},
link: {
textDecoration: 'underline',
cursor: 'pointer',
color: blue[600]
},
hr: {
borderBottom: '2px solid #b3b3b3',
borderTop: 'none',
borderLeft: 'none',
borderRight: 'none'
}
}

@withStyles(styles)
class GoogleInboxRetirement extends React.Component {
/* **************************************************************************/
// Class
/* **************************************************************************/

static propTypes = {
serviceId: PropTypes.string.isRequired
}

/* **************************************************************************/
// UI Events
/* **************************************************************************/

handleMoreGoogleInfoClick = (evt) => {
electron.remote.shell.openExternal('https://www.google.com/inbox/')
}

handleOpenBlog = (evt) => {
electron.remote.shell.openExternal('https://blog.wavebox.io/inbox_to_gmail/')
}

handleLater = (evt) => {
accountActions.reduceService(
this.props.serviceId,
GoogleInboxServiceReducer.setGinboxSeenRetirementVersion,
userStore.getState().wireConfigGoogleInboxRetirementVersion()
)
}

handleConvert = (evt) => {
accountActions.convertGoogleInboxToGmail(this.props.serviceId, false)
}

/* **************************************************************************/
// Rendering
/* **************************************************************************/

shouldComponentUpdate (nextProps, nextState) {
return shallowCompare(this, nextProps, nextState)
}

render () {
const {
serviceId,
classes,
...passProps
} = this.props

return (
<ServiceInfoPanelContent {...passProps}>
<ServiceInfoPanelBody actions={2}>
<div className={classes.headImgContainer}>
<img className={classes.headImg} src={Resolver.image('google/logo_ginbox_512px.png')} />
<img className={classes.headImg} src={Resolver.image('google/logo_gmail_512px.png')} />
</div>
<ServiceInfoPanelTitle>Google Inbox is signing off</ServiceInfoPanelTitle>
<p>
Google are retiring Inbox at the end of March 2019. Here at Wavebox HQ we've
been busy making our Gmail support even better and now that the new Gmail has
a fresh new look, with the top Inbox features like snooze, nudges and more
there's never been a better time to switch to the new Gmail.
<br />
<span className={classes.link} onClick={this.handleMoreGoogleInfoClick}>Learn more</span>
</p>
<p>
We've written a comprehensive article about making the move from Google Inbox
to Gmail, to help you get started and setup as quickly as possible.
<br />
<span className={classes.link} onClick={this.handleOpenBlog}>Read the article</span>
</p>
<hr className={classes.hr} />
<p>
Once you're ready to move to the new Gmail, choose convert below. If you want to do
it another time, right click your Google Inbox account icon at any time and pick Convert.
</p>
</ServiceInfoPanelBody>
<ServiceInfoPanelActions actions={2}>
<ServiceInfoPanelActionButton
variant='contained'
onClick={this.handleLater}>
<AccessTimeIcon className={classes.buttonIcon} />
Remind me later
</ServiceInfoPanelActionButton>
<ServiceInfoPanelActionButton
color='primary'
variant='contained'
onClick={this.handleConvert}>
<CompareArrowsIcon className={classes.buttonIcon} />
Convert to Gmail
</ServiceInfoPanelActionButton>
</ServiceInfoPanelActions>
</ServiceInfoPanelContent>
)
}
}

export default GoogleInboxRetirement
Oops, something went wrong.

0 comments on commit fdf6580

Please sign in to comment.