GH-1936 & GH-1920 Remove email opt-in from account creation in panel …

…and hub (#495)

* Opt-in to emails by default on account creation in panel and hub. Remove checkboxes

* Update snapshots

* Add function to proptypes

* Remove opt into emails entirely

* Update styling after removing checkbox; approved by design team

* Remove promotion unit tests and scss

Co-authored-by: Ethan Gooding <32471984+Eden12345@users.noreply.github.com>
Co-authored-by: Christopher Tino <4699516+christophertino@users.noreply.github.com>

_locales/en/messages.json

@@ -1646,9 +1646,6 @@
 	"hub_create_account_label_password_invalid_length": {
 		"message": "Use between 8 and 50 characters."
 	},
-	"hub_create_account_checkbox_promotions": {
-		"message": "Send me Ghostery updates & promotions."
-	},
 	"hub_create_account_already_have_account": {
 		"message": "Already have a Ghostery Account?"
 	},

app/Account/AccountActions.js

@@ -26,8 +26,6 @@ import {
 	GET_USER_FAIL,
 	GET_USER_SETTINGS_SUCCESS,
 	GET_USER_SETTINGS_FAIL,
-	UPDATE_PROMOTIOS_FAIL,
-	UPDATE_PROMOTIOS_SUCCESS,
 	GET_USER_SUBSCRIPTION_DATA_FAIL,
 	GET_USER_SUBSCRIPTION_DATA_SUCCESS
 } from './AccountConstants';
@@ -191,26 +189,3 @@ export const resetPassword = email => dispatch => (
 			});
 		})
 );
-
-export const updateAccountPromotions = promotions => dispatch => (
-	sendMessageInPromise('account.promotions', { promotions }).then((res) => {
-		const { errors } = res;
-		if (errors) {
-			dispatch({
-				type: UPDATE_PROMOTIOS_FAIL,
-				payload: { errors },
-			});
-			return false;
-		}
-		dispatch({ type: UPDATE_PROMOTIOS_SUCCESS });
-		return true;
-	}).catch((err) => {
-		const errors = [{ title: err.toString(), detail: err.toString() }];
-		dispatch({
-			type: UPDATE_PROMOTIOS_FAIL,
-			payload: {
-				errors,
-			},
-		});
-	})
-);

app/Account/AccountConstants.js

@@ -33,10 +33,6 @@ export const GET_USER_FAIL = 'GET_USER_FAIL';
 export const GET_USER_SETTINGS_SUCCESS = 'GET_USER_SETTINGS_SUCCESS';
 export const GET_USER_SETTINGS_FAIL = 'GET_USER_SETTINGS_FAIL';
 
-// Update Promotions
-export const UPDATE_PROMOTIOS_FAIL = 'UPDATE_PROMOTIOS_FAIL';
-export const UPDATE_PROMOTIOS_SUCCESS = 'UPDATE_PROMOTIOS_SUCCESS';
-
 // Update Subscription Data
 export const GET_USER_SUBSCRIPTION_DATA_FAIL = 'GET_USER_SUBSCRIPTION_DATA_FAIL';
 export const GET_USER_SUBSCRIPTION_DATA_SUCCESS = 'GET_USER_SUBSCRIPTION_DATA_SUCCESS';

app/hub/Views/CreateAccountView/CreateAccountView.jsx

@@ -35,10 +35,8 @@ const CreateAccountView = (props) => {
 		passwordLengthError,
 		legalConsentChecked,
 		legalConsentNotCheckedError,
-		promotionsChecked,
 		handleInputChange,
 		handleLegalConsentCheckboxChange,
-		handlePromotionsCheckboxChange,
 		handleSubmit,
 	} = props;
 
@@ -183,16 +181,6 @@ const CreateAccountView = (props) => {
 								dangerouslySetInnerHTML={{ __html: t('create_account_form_legal_consent_checkbox_label') }}
 							/>
 						</div>
-						<div className="CreateAccountView__checkboxContainer CreateAccountView--marginBottom flex-container">
-							<ToggleCheckbox
-								checked={promotionsChecked}
-								className="ToggleCheckbox--flush-left"
-								onChange={handlePromotionsCheckboxChange}
-							/>
-							<span className="CreateAccountView__inputLabel clickable" onClick={handlePromotionsCheckboxChange}>
-								{t('hub_create_account_checkbox_promotions')}
-							</span>
-						</div>
 					</div>
 				</div>
 				<div className="row align-center">
@@ -235,10 +223,8 @@ CreateAccountView.propTypes = {
 	password: PropTypes.string.isRequired,
 	passwordInvalidError: PropTypes.bool.isRequired,
 	passwordLengthError: PropTypes.bool.isRequired,
-	promotionsChecked: PropTypes.bool.isRequired,
 	handleInputChange: PropTypes.func.isRequired,
 	handleLegalConsentCheckboxChange: PropTypes.func.isRequired,
-	handlePromotionsCheckboxChange: PropTypes.func.isRequired,
 	handleSubmit: PropTypes.func.isRequired,
 };
 

app/hub/Views/CreateAccountView/CreateAccountViewContainer.jsx

@@ -42,7 +42,6 @@ class CreateAccountViewContainer extends Component {
 			password: '',
 			passwordInvalidError: false,
 			passwordLengthError: false,
-			promotionsChecked: false,
 			validateInput: false,
 		};
 
@@ -101,13 +100,6 @@ class CreateAccountViewContainer extends Component {
 		this.setState(prevState => ({ legalConsentChecked: !prevState.legalConsentChecked }));
 	}
 
-	/**
-	 * Update promotions checkbox value by updating state
-	 */
-	_handlePromotionsCheckboxChange = () => {
-		this.setState(prevState => ({ promotionsChecked: !prevState.promotionsChecked }));
-	}
-
 	/**
 	 * Handle creating an account, but validate the data first.
 	 * @param  {Object} event the 'submit' event
@@ -121,7 +113,6 @@ class CreateAccountViewContainer extends Component {
 			lastName,
 			legalConsentChecked,
 			password,
-			promotionsChecked
 		} = this.state;
 		const emailIsValid = email && validateEmail(email);
 		const confirmIsValid = confirmEmail && validateConfirmEmail(email, confirmEmail);
@@ -147,7 +138,6 @@ class CreateAccountViewContainer extends Component {
 		});
 		this.props.actions.register(email, confirmEmail, firstName, lastName, password).then((success) => {
 			if (success) {
-				this.props.actions.updateAccountPromotions(promotionsChecked);
 				this.props.actions.getUser();
 				this.props.actions.setToast({
 					toastMessage: t('hub_create_account_toast_success'),
@@ -181,7 +171,6 @@ class CreateAccountViewContainer extends Component {
 			password,
 			passwordInvalidError,
 			passwordLengthError,
-			promotionsChecked,
 		} = this.state;
 		const createAccountChildProps = {
 			email,
@@ -195,10 +184,8 @@ class CreateAccountViewContainer extends Component {
 			password,
 			passwordInvalidError,
 			passwordLengthError,
-			promotionsChecked,
 			handleInputChange: this._handleInputChange,
 			handleLegalConsentCheckboxChange: this._handleLegalConsentCheckboxChange,
-			handlePromotionsCheckboxChange: this._handlePromotionsCheckboxChange,
 			handleSubmit: this._handleCreateAccountAttempt
 		};
 		const signedInChildProps = {
@@ -219,7 +206,6 @@ CreateAccountViewContainer.propTypes = {
 		setToast: PropTypes.func.isRequired,
 		register: PropTypes.func.isRequired,
 		getUser: PropTypes.func.isRequired,
-		updateAccountPromotions: PropTypes.func.isRequired,
 	}).isRequired,
 };
 

app/hub/Views/CreateAccountView/__tests__/CreateAccountView.test.jsx

@@ -31,10 +31,8 @@ describe('app/hub/Views/CreateAccount component', () => {
 				password: '',
 				passwordInvalidError: false,
 				passwordLengthError: false,
-				promotionsChecked: false,
 				handleInputChange: () => {},
 				handleLegalConsentCheckboxChange: () => {},
-				handlePromotionsCheckboxChange: () => {},
 				handleSubmit: () => {},
 			};
 
@@ -58,10 +56,8 @@ describe('app/hub/Views/CreateAccount component', () => {
 				password: '',
 				passwordInvalidError: true,
 				passwordLengthError: true,
-				promotionsChecked: true,
 				handleInputChange: () => {},
 				handleLegalConsentCheckboxChange: () => {},
-				handlePromotionsCheckboxChange: () => {},
 				handleSubmit: () => {},
 			};
 
@@ -87,10 +83,8 @@ describe('app/hub/Views/CreateAccount component', () => {
 				password: '',
 				passwordInvalidError: false,
 				passwordLengthError: false,
-				promotionsChecked: false,
 				handleInputChange: () => {},
 				handleLegalConsentCheckboxChange: () => {},
-				handlePromotionsCheckboxChange: () => {},
 				handleSubmit: jest.fn(),
 			};
 

app/hub/Views/CreateAccountView/__tests__/__snapshots__/CreateAccountView.test.jsx.snap

@@ -169,28 +169,6 @@ exports[`app/hub/Views/CreateAccount component Snapshot tests with react-test-re
             onClick={[Function]}
           />
         </div>
-        <div
-          className="CreateAccountView__checkboxContainer CreateAccountView--marginBottom flex-container"
-        >
-          <div
-            className="ToggleCheckbox ToggleCheckbox--flush-left"
-            onClick={[Function]}
-          >
-            <svg
-              viewBox="0 0 24 24"
-            >
-              <path
-                d="M19 5v14H5V5h14m0-2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2z"
-              />
-            </svg>
-          </div>
-          <span
-            className="CreateAccountView__inputLabel clickable"
-            onClick={[Function]}
-          >
-            hub_create_account_checkbox_promotions
-          </span>
-        </div>
       </div>
     </div>
     <div
@@ -437,28 +415,6 @@ exports[`app/hub/Views/CreateAccount component Snapshot tests with react-test-re
             onClick={[Function]}
           />
         </div>
-        <div
-          className="CreateAccountView__checkboxContainer CreateAccountView--marginBottom flex-container"
-        >
-          <div
-            className="ToggleCheckbox ToggleCheckbox--flush-left ToggleCheckbox--active"
-            onClick={[Function]}
-          >
-            <svg
-              viewBox="0 0 24 24"
-            >
-              <path
-                d="M19 3H5c-1.11 0-2 .9-2 2v14c0 1.1.89 2 2 2h14c1.11 0 2-.9 2-2V5c0-1.1-.89-2-2-2zm-9 14l-5-5 1.41-1.41L10 14.17l7.59-7.59L19 8l-9 9z"
-              />
-            </svg>
-          </div>
-          <span
-            className="CreateAccountView__inputLabel clickable"
-            onClick={[Function]}
-          >
-            hub_create_account_checkbox_promotions
-          </span>
-        </div>
       </div>
     </div>
     <div

app/hub/Views/CreateAccountView/index.js

@@ -15,7 +15,7 @@ import { connect } from 'react-redux';
 import { bindActionCreators } from 'redux';
 
 import CreateAccountViewContainer from './CreateAccountViewContainer';
-import { register, getUser, updateAccountPromotions } from '../../../Account/AccountActions';
+import { register, getUser } from '../../../Account/AccountActions';
 import { setToast } from '../AppView/AppViewActions';
 
 /**
@@ -37,7 +37,6 @@ const mapDispatchToProps = dispatch => ({
 		setToast,
 		register,
 		getUser,
-		updateAccountPromotions,
 	}), dispatch),
 });
 

app/panel/components/CreateAccount.jsx

@@ -36,7 +36,6 @@ class CreateAccount extends React.Component {
 			legalConsentChecked: false,
 			legalConsentNotCheckedError: false,
 			password: '',
-			promotionsChecked: false,
 			loading: false,
 			passwordInvalidError: false,
 			passwordLengthError: false,
@@ -70,7 +69,7 @@ class CreateAccount extends React.Component {
 		e.preventDefault();
 		this.setState({ loading: true }, () => {
 			const {
-				email, confirmEmail, firstName, lastName, legalConsentChecked, password, promotionsChecked
+				email, confirmEmail, firstName, lastName, legalConsentChecked, password,
 			} = this.state;
 			this.setState({ loading: true }, () => {
 				if (!validateEmail(email)) {
@@ -119,7 +118,6 @@ class CreateAccount extends React.Component {
 					this.props.actions.register(email, confirmEmail, firstName, lastName, password).then((success) => {
 						this.setState({ loading: false });
 						if (success) {
-							this.props.actions.updateAccountPromotions(promotionsChecked);
 							new RSVP.Promise((resolve) => {
 								this.props.actions.getUser()
 									.then(() => resolve())
@@ -140,7 +138,7 @@ class CreateAccount extends React.Component {
 	 */
 	render() {
 		const {
-			email, confirmEmail, firstName, lastName, password, promotionsChecked, legalConsentChecked, loading, emailError, confirmEmailError, legalConsentNotCheckedError, passwordInvalidError, passwordLengthError
+			email, confirmEmail, firstName, lastName, password, legalConsentChecked, loading, emailError, confirmEmailError, legalConsentNotCheckedError, passwordInvalidError, passwordLengthError
 		} = this.state;
 		const buttonClasses = ClassNames('button ghostery-button', { loading });
 		return (
@@ -222,14 +220,6 @@ class CreateAccount extends React.Component {
 									</div>
 								</div>
 							</div>
-							<div className="row">
-								<div className="small-12 columns">
-									<div id="create-account-promotions">
-										<input id="promotionsChecked" name="promotionsChecked" type="checkbox" checked={promotionsChecked} onChange={this.handleCheckboxChange} />
-										<label htmlFor="promotionsChecked">{t('hub_create_account_checkbox_promotions')}</label>
-									</div>
-								</div>
-							</div>
 							<div className="row">
 								<div className="small-12 columns">
 									<div id="account-creation-buttons" className="row align-center">

app/panel/containers/CreateAccountContainer.js

@@ -15,7 +15,7 @@ import { connect } from 'react-redux';
 import { bindActionCreators } from 'redux';
 import CreateAccount from '../components/CreateAccount';
 import * as actions from '../actions/PanelActions'; // get shared actions from Panel
-import { register, getUser, updateAccountPromotions } from '../../Account/AccountActions';
+import { register, getUser } from '../../Account/AccountActions';
 
 /**
  * Map redux store state properties to CreateAccount component own properties.
@@ -38,7 +38,7 @@ const mapStateToProps = state => Object.assign({}, state.createAccount, {
  * @param  {Object} 	ownProps  CreateAccount component own props
  * @return {function}          	  to be used as an argument in redux connect call
  */
-const mapDispatchToProps = dispatch => ({ actions: bindActionCreators(Object.assign(actions, { register, getUser, updateAccountPromotions }), dispatch) });
+const mapDispatchToProps = dispatch => ({ actions: bindActionCreators(Object.assign(actions, { register, getUser }), dispatch) });
 /**
  * Connects CreateAccount component to the Redux store.
  * @memberOf PanelContainers

app/scss/partials/_account.scss

@@ -204,7 +204,7 @@ p.warning {
 
 /* CREATE ACCOUNT PANEL */
 #create-account-panel {
-	margin-top: 10px;
+	margin-top: 25px;
 	input {
 		margin-bottom: 5px;
 		margin-top: 5px;
@@ -225,13 +225,6 @@ p.warning {
 			}
 		}
 	}
-	#create-account-promotions {
-		margin-bottom: 10px;
-		label {
-			font-size: 11px;
-			font-weight: 500;
-		}
-	}
 	#create-account-legal-consent-checkbox {
 		margin-bottom: 10px;
 		label {
@@ -250,7 +243,7 @@ p.warning {
 		}
 	}
 	#account-creation-buttons .button {
-		margin-bottom: 0;
+		margin: 20px 0 0;
 		width: 150px;
 	}
 }

src/background.js

@@ -896,16 +896,6 @@ function onMessageHandler(request, sender, callback) {
 			});
 		return true;
 	}
-	if (name === 'account.promotions') {
-		const { promotions } = message;
-		account.updateEmailPreferences(promotions).then((success) => {
-			callback(success);
-		}).catch((err) => {
-			callback({ errors: _getJSONAPIErrorsObject(err) });
-			log('UPDATE PROMOTIONS FAIL', err);
-		});
-		return true;
-	}
 	if (name === 'update_database') {
 		checkLibraryVersion().then((result) => {
 			callback(result);