Create redux flow for UpgradePlanView

app/hub/Views/UpgradePlanView/UpgradePlanView.jsx

@@ -23,8 +23,8 @@ import { ToggleCheckbox } from '../../../shared-components';
  * @return {JSX} JSX for rendering the Home View of the Hub app
  * @memberof HubComponents
  */
-const UpgradePlanView = () => {
-	const test = '';
+const UpgradePlanView = (props) => {
+	console.log('pls props: ', props);
 	return (
 		<section className="pricing-page page-template-page-content-modules">
 			<div className="grid-container show-for-large">

app/hub/Views/UpgradePlanView/UpgradePlanViewActions.js

@@ -0,0 +1,59 @@
+/**
+ * UpgradePlanView Action creators
+ *
+ * Ghostery Browser Extension
+ * https://www.ghostery.com/
+ *
+ * Copyright 2019 Ghostery, Inc. All rights reserved.
+ *
+ * This Source Code Form is subject to the terms of the Mozilla Public
+ * License, v. 2.0. If a copy of the MPL was not distributed with this
+ * file, You can obtain one at http://mozilla.org/MPL/2.0
+ */
+
+import {
+	TOGGLE_MONTHLY_YEARLY_PRICES,
+	SHOW_BASIC_PROTECTION,
+	SHOW_PLUS_PROTECTION,
+	SHOW_PREMIUM_PROTECTION
+} from './UpgradePlanViewConstants';
+
+/**
+ * Toggle Monthly/Yearly Prices
+ * @return {Object}
+ */
+export function toggleMonthlyYearlyPrices() {
+	return {
+		type: TOGGLE_MONTHLY_YEARLY_PRICES,
+	};
+}
+
+/**
+ * Show Basic protection on Mobile View
+ * @return {Object}
+ */
+export function showBasicProtection() {
+	return {
+		type: SHOW_BASIC_PROTECTION,
+	};
+}
+
+/**
+ * Show Plus protection on Mobile View
+ * @return {Object}
+ */
+export function showPlusProtection() {
+	return {
+		type: SHOW_PLUS_PROTECTION,
+	};
+}
+
+/**
+ * Show Premium protection on Mobile View
+ * @return {Object}
+ */
+export function showPremiumProtection() {
+	return {
+		type: SHOW_PREMIUM_PROTECTION,
+	};
+}

app/hub/Views/UpgradePlanView/UpgradePlanViewConstants.js

@@ -0,0 +1,25 @@
+/**
+ * Upgrade Plan View Constants
+ *
+ * Ghostery Browser Extension
+ * https://www.ghostery.com/
+ *
+ * Copyright 2019 Ghostery, Inc. All rights reserved.
+ *
+ * This Source Code Form is subject to the terms of the Mozilla Public
+ * License, v. 2.0. If a copy of the MPL was not distributed with this
+ * file, You can obtain one at http://mozilla.org/MPL/2.0
+ */
+
+// Monthly/Yearly toggle
+export const TOGGLE_MONTHLY_YEARLY_PRICES = 'TOGGLE_MONTHLY_YEARLY_PRICES';
+
+// Free/Plus/Premium on Responsive view
+export const SET_BASIC_PROTECTION = 'SET_BASIC_PROTECTION';
+export const SET_PLUS_PROTECTION = 'SET_PLUS_PROTECTION';
+export const SET_PREMIUM_PROTECTION = 'SET_PREMIUM_PROTECTION';
+
+// Basic/Plus/Premium
+export const BASIC = 'BASIC';
+export const PLUS = 'PLUS';
+export const PREMIUM = 'PREMIUM';

app/hub/Views/UpgradePlanView/UpgradePlanViewReducer.js

@@ -0,0 +1,55 @@
+/**
+ * Reducer used throughout the UpgradePlanView's flow
+ *
+ * Ghostery Browser Extension
+ * https://www.ghostery.com/
+ *
+ * Copyright 2019 Ghostery, Inc. All rights reserved.
+ *
+ * This Source Code Form is subject to the terms of the Mozilla Public
+ * License, v. 2.0. If a copy of the MPL was not distributed with this
+ * file, You can obtain one at http://mozilla.org/MPL/2.0
+ */
+
+import {
+	TOGGLE_MONTHLY_YEARLY_PRICES,
+	SET_BASIC_PROTECTION,
+	SET_PLUS_PROTECTION,
+	SET_PREMIUM_PROTECTION,
+	BASIC,
+	PLUS,
+	PREMIUM
+} from './UpgradePlanViewConstants';
+
+const initialState = {
+	show_yearly_prices: true,
+	set_protection_level: BASIC
+};
+
+function UpgradePlanViewReducer(state = initialState, action) {
+	switch (action.type) {
+		case TOGGLE_MONTHLY_YEARLY_PRICES: {
+			return Object.assign({}, state, {
+				set_yearly_prices: !state.set_yearly_prices,
+			});
+		}
+		case SET_BASIC_PROTECTION: {
+			return Object.assign({}, state, {
+				set_protection_level: BASIC,
+			});
+		}
+		case SET_PLUS_PROTECTION: {
+			return Object.assign({}, state, {
+				set_protection_level: PLUS,
+			});
+		}
+		case SET_PREMIUM_PROTECTION: {
+			return Object.assign({}, state, {
+				set_protection_level: PREMIUM,
+			});
+		}
+		default: return state;
+	}
+}
+
+export default UpgradePlanViewReducer;

app/hub/Views/UpgradePlanView/index.js

@@ -0,0 +1,42 @@
+/**
+ * Point of entry index.js file for UpgradePlanView
+ *
+ * Ghostery Browser Extension
+ * https://www.ghostery.com/
+ *
+ * Copyright 2019 Ghostery, Inc. All rights reserved.
+ *
+ * This Source Code Form is subject to the terms of the Mozilla Public
+ * License, v. 2.0. If a copy of the MPL was not distributed with this
+ * file, You can obtain one at http://mozilla.org/MPL/2.0
+ */
+
+import { connect } from 'react-redux';
+import { bindActionCreators } from 'redux';
+import { withRouter } from 'react-router-dom';
+
+import UpgradePlanView from './UpgradePlanView';
+import UpgradePlanViewReducer from './UpgradePlanViewReducer';
+import * as UpgradePlanViewActions from './UpgradePlanViewActions';
+
+/**
+ * Map redux store state properties to the component's own properties.
+ * @param  {Object} state    entire Redux store's state
+ * @return {function}        this function returns a plain object, which will be merged into the component's props
+ * @memberof HubContainers
+ */
+const mapStateToProps = state => Object.assign({}, state.upgrade);
+
+/**
+ * Bind the component's action creators using Redux's bindActionCreators.
+ * @param  {function} dispatch redux store method which dispatches actions
+ * @return {function}          to be used as an argument in redux connect call
+ * @memberof SetupContainers
+ */
+const mapDispatchToProps = dispatch => ({
+	actions: bindActionCreators(Object.assign({}, UpgradePlanViewActions), dispatch),
+});
+
+export const reducer = UpgradePlanViewReducer;
+
+export default withRouter(connect(mapStateToProps, mapDispatchToProps)(UpgradePlanView));

app/hub/createStore.js

@@ -25,6 +25,7 @@ import { reducer as app } from './Views/AppView';
 import { reducer as home } from './Views/HomeView';
 import { reducer as setup } from './Views/SetupView';
 import { reducer as tutorial } from './Views/TutorialView';
+import { reducer as upgrade } from './Views/UpgradePlanView';
 import account from '../Account/AccountReducer';
 import settings from '../panel/reducers/settings';
 
@@ -35,6 +36,7 @@ const reducer = combineReducers({
 	tutorial,
 	account,
 	settings,
+	upgrade
 });
 
 /**

app/hub/index.jsx

@@ -30,7 +30,7 @@ import ProductsView from './Views/ProductsView';
 import CreateAccountView from './Views/CreateAccountView';
 import ForgotPasswordView from '../shared-components/ForgotPassword/ForgotPasswordContainer';
 import LogInView from './Views/LogInView';
-import UpgradePlanView from './Views/UpgradePlanView/UpgradePlanView';
+import UpgradePlanView from './Views/UpgradePlanView';
 
 const store = createStore();