Merge with develop. Fix resulting linting errors

app/hub/Views/HomeView/HomeViewContainer.jsx

@@ -108,7 +108,8 @@ class HomeViewContainer extends Component {
 	_render() {
 		const { justInstalled } = this.state;
 		const { home, user } = this.props;
-		const isPlus = (user && user.subscriptionsPlus) || false;
+		const isPlus = (user && user.plusAccess) || false;
+		const isPremium = (user && user.premiumAccess) || false;
 		const {
 			premium_promo_modal_shown,
 			setup_complete,

app/hub/Views/PlusView/PlusViewContainer.jsx

@@ -47,7 +47,7 @@ class PlusViewContainer extends Component {
 		const { user } = this.props;
 		return (
 			<PlusView
-				isPlus={(user && user.subscriptionsPlus) || false}
+				isPlus={(user && user.plusAccess) || false}
 				onPlusClick={this._sendPlusPing}
 			/>
 		);

app/panel/components/Detail.jsx

@@ -73,7 +73,7 @@ class Detail extends React.Component {
 	 * @return {ReactComponent}   ReactComponent instance
 	 */
 	render() {
-		const { is_expanded, history, user } = this.props;
+		const { is_expanded, user, history } = this.props;
 		const condensedToggleClassNames = ClassNames('condensed-toggle', {
 			condensed: is_expanded,
 		});
@@ -94,7 +94,7 @@ class Detail extends React.Component {
 					<Route path="/detail/rewards" render={this.RewardsComponent} />
 					<DetailMenu
 						hasReward={false}
-						subscriptionsPlus={user && user.subscriptionsPlus}
+						plusAccess={user && user.plusAccess}
 						activeTab={activeTab}
 					/>
 				</div>

app/panel/components/Header.jsx

@@ -155,8 +155,9 @@ class Header extends React.Component {
 		const { history } = this.props;
 		sendMessage('ping', 'plus_panel_from_badge');
 		const { user } = this.props;
-		const subscriber = user && user.subscriptionsPlus;
-		history.push(subscriber ? '/subscription/info' : `/subscribe/${!!user}`);
+		const hasPlusAccess = user && user.plusAccess;
+		const hasPremiumAccess = user && user.premiumAccess;
+		history.push(hasPlusAccess || hasPremiumAccess ? '/subscription/info' : `/subscribe/${!!user}`);
 	}
 
 	/**

app/panel/components/HeaderMenu.jsx

@@ -155,11 +155,11 @@ class HeaderMenu extends React.Component {
 	 */
 	clickSubscriber = () => {
 		const {
-			history, toggleDropdown, subscriber, loggedIn
+			history, hasPremiumAccess, hasPlusAccess, toggleDropdown
 		} = this.props;
 		sendMessage('ping', 'plus_panel_from_menu');
 		toggleDropdown();
-		history.push(subscriber ? '/subscription/info' : `/subscribe/${loggedIn}`);
+		history.push(hasPlusAccess || hasPremiumAccess ? '/subscription/info' : '/subscribe/false');
 	}
 
 	/**
@@ -168,10 +168,21 @@ class HeaderMenu extends React.Component {
 	 */
 	render() {
 		const {
-			loggedIn, email, subscriber, kebab
+			loggedIn,
+			email,
+			hasPremiumAccess,
+			hasPlusAccess,
+			kebab
 		} = this.props;
-		const optionClasses = ClassNames({ 'menu-option': subscriber, 'menu-option-non-subscriber': !subscriber });
-		const iconClasses = ClassNames('menu-icon-container', { subscriber }, { 'non-subscriber': !subscriber });
+		const optionClasses = ClassNames({
+			'menu-option': hasPlusAccess || hasPremiumAccess,
+			'menu-option-non-subscriber': !(hasPlusAccess || hasPremiumAccess)
+		});
+		const iconClasses = ClassNames('menu-icon-container', {
+			premium: hasPremiumAccess,
+			plus: !hasPremiumAccess && hasPlusAccess,
+			'non-subscriber': !(hasPremiumAccess || hasPlusAccess)
+		});
 		return (
 			<ClickOutside onClickOutside={this.handleClickOutside} excludeEl={kebab}>
 				<div ref={(node) => { this.node = node; }} className="dropdown-pane" id="header-dropdown">

app/panel/components/Stats.jsx

@@ -31,7 +31,7 @@ class Stats extends React.Component {
 	 */
 	componentDidMount() {
 		sendMessage('ping', 'hist_stats_panel');
-		if (!this._isPlus(this.props)) {
+		if (!this._hasPlusAccess(this.props)) {
 			this.setState(this._reset(true));
 			return;
 		}
@@ -42,8 +42,8 @@ class Stats extends React.Component {
 	 * Lifecycle event
 	 */
 	componentDidUpdate(prevProps) {
-		const thisPlus = this._isPlus(this.props);
-		const prevPlus = this._isPlus(prevProps);
+		const thisPlus = this._hasPlusAccess(this.props);
+		const prevPlus = this._hasPlusAccess(prevProps);
 		if (thisPlus !== prevPlus) {
 			if (thisPlus) {
 				this._init();
@@ -334,7 +334,7 @@ class Stats extends React.Component {
 			monthlyAverageData: clearData,
 			dailyAverageData: clearData,
 			showResetModal: false,
-			showPitchModal: (!user || !user.subscriptionsPlus),
+			showPitchModal: (!user || !user.plusAccess),
 		};
 		return clearOrDemoState;
 	}

app/panel/components/Subscription/SubscriptionInfo.jsx

@@ -38,7 +38,7 @@ function _handleManageClick() {
  */
 const SubscriptionInfo = ({ subscriptionData }) => {
 	const {
-		active, plan_amount, plan_interval, charge_date, plan_ends, loading
+		productName, active, plan_amount, plan_interval, charge_date, plan_ends, loading
 	} = subscriptionData;
 	const subscriptionExpiration = (plan_ends > 1) ? t('subscription_days_left', plan_ends.toString()) : t('subscription_one_day_left');
 	return (

app/panel/components/Summary.jsx

@@ -263,7 +263,7 @@ class Summary extends React.Component {
 		const { history, user } = this.props;
 		sendMessage('ping', 'plus_panel_from_badge');
 
-		history.push(this._isPlusSubscriber() ? '/subscription/info' : `/subscribe/${!!user}`);
+		history.push(this._hasPremiumAccess() || this._hasPlusAccess() ? '/subscription/info' : `/subscribe/${!!user}`);
 	}
 
 	/**

src/background.js

@@ -891,7 +891,7 @@ function onMessageHandler(request, sender, callback) {
 			.then((foundUser) => {
 				const user = { user: { ...foundUser } };
 				if (foundUser) {
-					user.user.subscriptionsPlus = account.hasScopesUnverified(['subscriptions:plus']);
+					user.user.premiumAccess = account.hasScopesUnverified(['subscriptions:premium']);
 				}
 				callback(user);
 			})