From 7201ab218cdab08d3347861e27687af4b15e8120 Mon Sep 17 00:00:00 2001 From: Ben Date: Wed, 13 Jan 2021 11:21:42 -0500 Subject: [PATCH 1/3] Remove learn more dropdown and update design --- .../Step1_CreateAccountView.jsx | 43 ++++--------------- .../Step1_CreateAccountView.scss | 22 +++------- 2 files changed, 15 insertions(+), 50 deletions(-) diff --git a/app/ghostery-browser-hub/Views/OnboardingViews/Step1_CreateAccountView/Step1_CreateAccountView.jsx b/app/ghostery-browser-hub/Views/OnboardingViews/Step1_CreateAccountView/Step1_CreateAccountView.jsx index 1f8044c43..1898653b0 100644 --- a/app/ghostery-browser-hub/Views/OnboardingViews/Step1_CreateAccountView/Step1_CreateAccountView.jsx +++ b/app/ghostery-browser-hub/Views/OnboardingViews/Step1_CreateAccountView/Step1_CreateAccountView.jsx @@ -11,10 +11,9 @@ * file, You can obtain one at http://mozilla.org/MPL/2.0 */ -import React, { Fragment, useRef, useState } from 'react'; +import React, { Fragment, useState } from 'react'; import { NavLink } from 'react-router-dom'; import PropTypes from 'prop-types'; -import ClassNames from 'classnames'; import Step1_LogInForm from '../Step1_LogInForm'; import Step1_CreateAccountForm from '../Step1_CreateAccountForm'; import globals from '../../../../../src/classes/Globals'; @@ -38,10 +37,10 @@ const faqList = [ const renderFAQListItem = (icon, label, description) => (
-
+
-
+
{label}
{description}
@@ -58,24 +57,8 @@ const Step1_CreateAccountView = (props) => { const { setSetupStep } = actions; const email = user && user.email; - const [expanded, setExpanded] = useState(false); const [view, setView] = useState(CREATE_ACCOUNT); - const arrowClassNames = ClassNames('Step1_CreateAccountView__arrow', { - up: expanded, - down: !expanded, - }); - - const faqRef = useRef(null); - const scrollToFAQ = () => { - faqRef.current.scrollIntoView({ behavior: 'smooth' }); - }; - - const handleFAQLearnMoreClick = () => { - setTimeout(scrollToFAQ, 1); - setExpanded(!expanded); - }; - const renderSkipLink = () => (
@@ -120,22 +103,14 @@ const Step1_CreateAccountView = (props) => { {/* eslint-disable-next-line react/jsx-pascal-case */} {renderSkipLink()} -
-
{t('ghostery_browser_hub_onboarding_we_take_your_privacy_very_seriously')}
+
+ {faqList.map(item => renderFAQListItem(item.icon, item.label, item.description))}
-
-
- {expanded && - faqList.map(item => renderFAQListItem(item.icon, item.label, item.description)) - } + - {expanded && ( - - )} ) : ( diff --git a/app/ghostery-browser-hub/Views/OnboardingViews/Step1_CreateAccountView/Step1_CreateAccountView.scss b/app/ghostery-browser-hub/Views/OnboardingViews/Step1_CreateAccountView/Step1_CreateAccountView.scss index 93fabacfd..a5bf757b1 100644 --- a/app/ghostery-browser-hub/Views/OnboardingViews/Step1_CreateAccountView/Step1_CreateAccountView.scss +++ b/app/ghostery-browser-hub/Views/OnboardingViews/Step1_CreateAccountView/Step1_CreateAccountView.scss @@ -174,27 +174,17 @@ $color-create-account-form-error-red: #e74055; text-decoration: underline; cursor: pointer; } -.Step1_CreateAccountView__arrow { - margin: 15px auto 0 auto; - height: 12px; - width: 12px; - border-left: 2px solid #00aef0; - border-top: 2px solid #00aef0; - cursor: pointer; - - &.up { - transform: rotate(45deg); - } - &.down { - transform: rotate(225deg); - } -} .Step1_CreateAccountView__FAQContainer { - margin-top: 10px; + margin-top: 48px; padding-top: 20px; @include breakpoint(small down) { + margin-top: 42px; text-align: center; } + @include breakpoint(large up) { + width: 108%; + margin-left: -4%; + } } .Step1_CreateAccountView__faqItemContainer { margin-bottom: 30px; From a8a755216d40ff034b03d8da8859e4b7edda9234 Mon Sep 17 00:00:00 2001 From: Ben Date: Wed, 13 Jan 2021 11:46:08 -0500 Subject: [PATCH 2/3] Remove updates and promotions checkbox and automatically subscribe the user to emails upon registering in the hub instead --- _locales/en/messages.json | 6 ----- app/Account/AccountActions.js | 8 +++---- app/Account/AccountConstants.js | 2 +- app/Account/AccountReducer.js | 8 +++---- .../Step1_CreateAccountForm.jsx | 23 ------------------- .../Step1_CreateAccountForm.scss | 7 ------ .../Step1_CreateAccountFormContainer.jsx | 11 +-------- .../Step1_CreateAccountForm/index.js | 4 ++-- app/hub/Views/CreateAccountView/index.js | 4 ++-- 9 files changed, 14 insertions(+), 59 deletions(-) diff --git a/_locales/en/messages.json b/_locales/en/messages.json index d77171d7e..3e267c58b 100644 --- a/_locales/en/messages.json +++ b/_locales/en/messages.json @@ -1848,12 +1848,6 @@ "ghostery_browser_hub_onboarding_already_have_account": { "message": "I already have an account." }, - "ghostery_browser_hub_onboarding_send_me": { - "message": "Send me" - }, - "ghostery_browser_hub_onboarding_updates_and_promotions": { - "message": "updates & promotions." - }, "ghostery_browser_hub_onboarding_skip": { "message": "Skip" }, diff --git a/app/Account/AccountActions.js b/app/Account/AccountActions.js index c51317dec..9211d5c8b 100644 --- a/app/Account/AccountActions.js +++ b/app/Account/AccountActions.js @@ -28,7 +28,7 @@ import { GET_USER_SETTINGS_FAIL, GET_USER_SUBSCRIPTION_DATA_FAIL, GET_USER_SUBSCRIPTION_DATA_SUCCESS, - ACCOUNT_DATA_EMAIL_PREFERENCES_CHECKBOX_CHANGE + SUBSCRIBE_TO_EMAIL_LIST } from './AccountConstants'; import { SET_TOAST } from '../hub/Views/AppView/AppViewConstants'; import { CLEAR_THEME } from '../panel/constants/constants'; @@ -203,9 +203,9 @@ export const resetPassword = email => dispatch => ( }) ); -export const handleEmailPreferencesCheckboxChange = (name, checked) => dispatch => ( +export const subscribeToEmailList = name => dispatch => ( dispatch({ - type: ACCOUNT_DATA_EMAIL_PREFERENCES_CHECKBOX_CHANGE, - payload: { name, checked }, + type: SUBSCRIBE_TO_EMAIL_LIST, + payload: { name }, }) ); diff --git a/app/Account/AccountConstants.js b/app/Account/AccountConstants.js index 0f95a09c4..e3a4f2bae 100644 --- a/app/Account/AccountConstants.js +++ b/app/Account/AccountConstants.js @@ -38,4 +38,4 @@ export const GET_USER_SUBSCRIPTION_DATA_FAIL = 'GET_USER_SUBSCRIPTION_DATA_FAIL' export const GET_USER_SUBSCRIPTION_DATA_SUCCESS = 'GET_USER_SUBSCRIPTION_DATA_SUCCESS'; // Opt into/out of updates and promotions sendgrid emails -export const ACCOUNT_DATA_EMAIL_PREFERENCES_CHECKBOX_CHANGE = 'ACCOUNT_DATA_EMAIL_PREFERENCES_CHECKBOX_CHANGE'; +export const SUBSCRIBE_TO_EMAIL_LIST = 'SUBSCRIBE_TO_EMAIL_LIST'; diff --git a/app/Account/AccountReducer.js b/app/Account/AccountReducer.js index 0a91127a1..e8b63cc0b 100644 --- a/app/Account/AccountReducer.js +++ b/app/Account/AccountReducer.js @@ -21,7 +21,7 @@ import { GET_USER_SUBSCRIPTION_DATA_SUCCESS, RESET_PASSWORD_SUCCESS, RESET_PASSWORD_FAIL, - ACCOUNT_DATA_EMAIL_PREFERENCES_CHECKBOX_CHANGE + SUBSCRIBE_TO_EMAIL_LIST } from './AccountConstants'; import { UPDATE_PANEL_DATA } from '../panel/constants/constants'; @@ -119,11 +119,11 @@ export default (state = initialState, action) => { resetPasswordError: true }; } - case ACCOUNT_DATA_EMAIL_PREFERENCES_CHECKBOX_CHANGE: { - const { name, checked } = action.payload; + case SUBSCRIBE_TO_EMAIL_LIST: { + const { name } = action.payload; let emailPreferences; if (name === 'global') { - emailPreferences = { ...state.user.emailPreferences, ...{ global: checked } }; + emailPreferences = { ...state.user.emailPreferences, ...{ global: true } }; } const user = { ...state.user, ...{ emailPreferences } }; return { ...state, ...{ user } }; diff --git a/app/ghostery-browser-hub/Views/OnboardingViews/Step1_CreateAccountForm/Step1_CreateAccountForm.jsx b/app/ghostery-browser-hub/Views/OnboardingViews/Step1_CreateAccountForm/Step1_CreateAccountForm.jsx index 33c96999c..838b3f431 100644 --- a/app/ghostery-browser-hub/Views/OnboardingViews/Step1_CreateAccountForm/Step1_CreateAccountForm.jsx +++ b/app/ghostery-browser-hub/Views/OnboardingViews/Step1_CreateAccountForm/Step1_CreateAccountForm.jsx @@ -16,8 +16,6 @@ import PropTypes from 'prop-types'; import ClassNames from 'classnames'; import ToggleCheckbox from '../../../../shared-components/ToggleCheckbox'; -const promoString = `${t('ghostery_browser_hub_onboarding_send_me')} Ghostery ${t('ghostery_browser_hub_onboarding_updates_and_promotions')}`; - /** * A Functional React component for rendering the Browser Create Account View * @return {JSX} JSX for rendering the Browser Create Account View of the Hub app @@ -39,9 +37,7 @@ const Step1_CreateAccountForm = (props) => { legalConsentChecked, legalConsentNotCheckedError, handleLegalConsentCheckboxChange, - isUpdatesChecked, handleInputChange, - handleUpdatesCheckboxChange, handleSubmit, } = props; @@ -192,23 +188,6 @@ const Step1_CreateAccountForm = (props) => { )}
-
-
-
- - -
-
-
-
@@ -242,13 +221,11 @@ Step1_CreateAccountForm.propTypes = { confirmEmailError: PropTypes.bool.isRequired, firstName: PropTypes.string.isRequired, lastName: PropTypes.string.isRequired, - isUpdatesChecked: PropTypes.bool.isRequired, password: PropTypes.string.isRequired, confirmPassword: PropTypes.string.isRequired, passwordInvalidError: PropTypes.bool.isRequired, passwordLengthError: PropTypes.bool.isRequired, handleInputChange: PropTypes.func.isRequired, - handleUpdatesCheckboxChange: PropTypes.func.isRequired, handleSubmit: PropTypes.func.isRequired, }; diff --git a/app/ghostery-browser-hub/Views/OnboardingViews/Step1_CreateAccountForm/Step1_CreateAccountForm.scss b/app/ghostery-browser-hub/Views/OnboardingViews/Step1_CreateAccountForm/Step1_CreateAccountForm.scss index 964008ede..579635dbf 100644 --- a/app/ghostery-browser-hub/Views/OnboardingViews/Step1_CreateAccountForm/Step1_CreateAccountForm.scss +++ b/app/ghostery-browser-hub/Views/OnboardingViews/Step1_CreateAccountForm/Step1_CreateAccountForm.scss @@ -48,13 +48,6 @@ color: red; } } -.Step1_CreateAccountForm__promoString { - font-size: 14px; - margin-top: 15px; - @include breakpoint(small down) { - margin-top: 0; - } -} .Step1_CreateAccountForm__legalConsentCheckedLabel { font-size: 14px; @include breakpoint(small down) { diff --git a/app/ghostery-browser-hub/Views/OnboardingViews/Step1_CreateAccountForm/Step1_CreateAccountFormContainer.jsx b/app/ghostery-browser-hub/Views/OnboardingViews/Step1_CreateAccountForm/Step1_CreateAccountFormContainer.jsx index 31f9ffc76..571d8c8a4 100644 --- a/app/ghostery-browser-hub/Views/OnboardingViews/Step1_CreateAccountForm/Step1_CreateAccountFormContainer.jsx +++ b/app/ghostery-browser-hub/Views/OnboardingViews/Step1_CreateAccountForm/Step1_CreateAccountFormContainer.jsx @@ -113,13 +113,6 @@ class CreateAccountFormContainer extends Component { this.setState(prevState => ({ legalConsentChecked: !prevState.legalConsentChecked })); } - /** - * Update updates checkbox value by updating state - */ - _handleUpdatesCheckboxChange = () => { - this.setState(prevState => ({ isUpdatesChecked: !prevState.isUpdatesChecked })); - } - /** * Handle creating an account, but validate the data first. * @param {Object} event the 'submit' event @@ -134,7 +127,6 @@ class CreateAccountFormContainer extends Component { legalConsentChecked, password, confirmPassword, - isUpdatesChecked, } = this.state; const emailIsValid = email && validateEmail(email); const confirmIsValid = confirmEmail && validateConfirmEmail(email, confirmEmail); @@ -164,7 +156,7 @@ class CreateAccountFormContainer extends Component { if (success) { // User is automatically logged in, and redirected to the logged in view of BrowserCreateAccountForm actions.getUser().then(() => { - if (isUpdatesChecked) actions.handleEmailPreferencesCheckboxChange('global', isUpdatesChecked); + actions.subscribeToEmailList('global'); }); // Toggle legal consent checked here actions.setToast({ @@ -222,7 +214,6 @@ class CreateAccountFormContainer extends Component { handleLegalConsentCheckboxChange={this._handleLegalConsentCheckboxChange} handleSubmit={this._handleCreateAccountAttempt} isUpdatesChecked={isUpdatesChecked} - handleUpdatesCheckboxChange={this._handleUpdatesCheckboxChange} /> ); } diff --git a/app/ghostery-browser-hub/Views/OnboardingViews/Step1_CreateAccountForm/index.js b/app/ghostery-browser-hub/Views/OnboardingViews/Step1_CreateAccountForm/index.js index 4dcac5d05..7580c740c 100644 --- a/app/ghostery-browser-hub/Views/OnboardingViews/Step1_CreateAccountForm/index.js +++ b/app/ghostery-browser-hub/Views/OnboardingViews/Step1_CreateAccountForm/index.js @@ -13,7 +13,7 @@ import { buildReduxHOC } from '../../../../shared-hub/utils'; import Step1_CreateAccountFormContainer from './Step1_CreateAccountFormContainer'; -import { register, getUser, handleEmailPreferencesCheckboxChange } from '../../../../Account/AccountActions'; +import { register, getUser, subscribeToEmailList } from '../../../../Account/AccountActions'; import { setToast } from '../../../../hub/Views/AppView/AppViewActions'; const stateSlices = ['account']; @@ -21,7 +21,7 @@ const actionCreators = { setToast, register, getUser, - handleEmailPreferencesCheckboxChange + subscribeToEmailList }; export default buildReduxHOC(stateSlices, actionCreators, Step1_CreateAccountFormContainer); diff --git a/app/hub/Views/CreateAccountView/index.js b/app/hub/Views/CreateAccountView/index.js index da18f1190..4fd46dc48 100644 --- a/app/hub/Views/CreateAccountView/index.js +++ b/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 } from '../../../Account/AccountActions'; +import { register, getUser, subscribeToEmailList } from '../../../Account/AccountActions'; import { setToast } from '../AppView/AppViewActions'; /** @@ -36,7 +36,7 @@ const mapDispatchToProps = dispatch => ({ actions: bindActionCreators({ setToast, register, - getUser + getUser, }, dispatch), }); From f949dfafb206414679d4fc9d9bc7d97e82de9b7e Mon Sep 17 00:00:00 2001 From: Ben Date: Wed, 13 Jan 2021 11:50:04 -0500 Subject: [PATCH 3/3] Remove , --- app/hub/Views/CreateAccountView/index.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/app/hub/Views/CreateAccountView/index.js b/app/hub/Views/CreateAccountView/index.js index 4fd46dc48..e3da2f3f4 100644 --- a/app/hub/Views/CreateAccountView/index.js +++ b/app/hub/Views/CreateAccountView/index.js @@ -36,7 +36,7 @@ const mapDispatchToProps = dispatch => ({ actions: bindActionCreators({ setToast, register, - getUser, + getUser }, dispatch), });