diff --git a/projects/plugins/jetpack/_inc/client/components/data/query-checklist-progress.js b/projects/plugins/jetpack/_inc/client/components/data/query-checklist-progress.js deleted file mode 100644 index 2ef5fff5643fc..0000000000000 --- a/projects/plugins/jetpack/_inc/client/components/data/query-checklist-progress.js +++ /dev/null @@ -1,36 +0,0 @@ -/** - * External dependencies - */ -import PropTypes from 'prop-types'; -import { Component } from 'react'; -import { connect } from 'react-redux'; - -/** - * Internal dependencies - */ -import { isLoading } from 'state/checklist/selectors'; -import { requestSiteChecklist } from 'state/checklist/actions'; - -class QuerySiteChecklist extends Component { - static propTypes = { - requestSiteChecklist: PropTypes.func, - isLoading: PropTypes.bool, - }; - - componentDidMount() { - if ( ! this.props.isLoading ) { - this.props.requestSiteChecklist(); - } - } - - render() { - return null; - } -} - -export default connect( - state => ( { - isLoading: isLoading( state ), - } ), - { requestSiteChecklist } -)( QuerySiteChecklist ); diff --git a/projects/plugins/jetpack/_inc/client/my-plan/index.jsx b/projects/plugins/jetpack/_inc/client/my-plan/index.jsx index adef9156866b1..333d58c301772 100644 --- a/projects/plugins/jetpack/_inc/client/my-plan/index.jsx +++ b/projects/plugins/jetpack/_inc/client/my-plan/index.jsx @@ -38,7 +38,7 @@ export function MyPlan( props ) { activeProducts={ props.activeProducts } plan={ sitePlan } purchases={ props.purchases } - siteRawUrl={ props.siteRawUrl } + siteAdminUrl={ props.siteAdminUrl } /> - - - ); -} diff --git a/projects/plugins/jetpack/_inc/client/my-plan/my-plan-header/checklist-progress-card/index.js b/projects/plugins/jetpack/_inc/client/my-plan/my-plan-header/checklist-progress-card/index.js deleted file mode 100644 index f34dcceb4d665..0000000000000 --- a/projects/plugins/jetpack/_inc/client/my-plan/my-plan-header/checklist-progress-card/index.js +++ /dev/null @@ -1,77 +0,0 @@ -/** - * External dependencies - */ -import React, { Component } from 'react'; -import { connect } from 'react-redux'; -import { _x } from '@wordpress/i18n'; - -/** - * Internal dependencies - */ -import analytics from 'lib/analytics'; -import Button from 'components/button'; -import Card from 'components/card'; -import getRedirectUrl from 'lib/jp-redirect'; -import ProgressBar from './progress-bar'; -import QueryChecklistProgress from 'components/data/query-checklist-progress'; -import { getSiteRawUrl } from 'state/initial-state'; -import { getChecklistCompletion } from 'state/checklist/selectors'; - -class ChecklistProgressCard extends Component { - trackCtaClick = () => - void analytics.tracks.recordEvent( - 'jetpack_myplan_progresschecklistcta_click', - this.props.plan - ? { - plan: this.props.plan, - } - : undefined - ); - - render() { - const { completed, total, siteSlug } = this.props; - return ( - <> - - { completed && total && ( - -
-
- - { _x( - 'Your Jetpack setup progress', - 'Onboarding task list progress', - 'jetpack' - ) } - - { `${ completed }/${ total }` } -
- -
-
- -
- - ) } - - ); - } -} - -export default connect( state => { - return { - siteSlug: getSiteRawUrl( state ), - ...getChecklistCompletion( state ), // add completed and total - }; -} )( ChecklistProgressCard ); diff --git a/projects/plugins/jetpack/_inc/client/my-plan/my-plan-header/checklist-progress-card/progress-bar/index.js b/projects/plugins/jetpack/_inc/client/my-plan/my-plan-header/checklist-progress-card/progress-bar/index.js deleted file mode 100644 index 39be7481bbb3c..0000000000000 --- a/projects/plugins/jetpack/_inc/client/my-plan/my-plan-header/checklist-progress-card/progress-bar/index.js +++ /dev/null @@ -1,43 +0,0 @@ -/** - * External dependencies - */ -import PropTypes from 'prop-types'; -import React, { PureComponent } from 'react'; -import classnames from 'classnames'; - -/** - * Internal dependencies - */ -import ScreenReaderText from 'components/screen-reader-text'; - -export default class ProgressBar extends PureComponent { - static defaultProps = { - total: 100, - }; - - static propTypes = { - value: PropTypes.number.isRequired, - total: PropTypes.number, - title: PropTypes.string, - className: PropTypes.string, - }; - - render() { - const classes = classnames( this.props.className, 'checklist-header-progress-bar' ); - const percentage = Math.min( Math.ceil( ( this.props.value / this.props.total ) * 100 ), 100 ); - const title = this.props.title ? ( - { this.props.title } - ) : null; - - return ( -
-
- { title } -
-
- ); - } -} diff --git a/projects/plugins/jetpack/_inc/client/my-plan/my-plan-header/checklist-progress-card/progress-bar/style.scss b/projects/plugins/jetpack/_inc/client/my-plan/my-plan-header/checklist-progress-card/progress-bar/style.scss deleted file mode 100644 index 31f3fcb9a0d61..0000000000000 --- a/projects/plugins/jetpack/_inc/client/my-plan/my-plan-header/checklist-progress-card/progress-bar/style.scss +++ /dev/null @@ -1,52 +0,0 @@ -.progress-bar { - width: 100%; - display: inline-block; - position: relative; - height: 9px; - background-color: $studio-gray-10; - border-radius: 4.5px; - - &.is-compact { - height: 4px; - } -} - -.progress-bar__progress { - display: inline-block; - position: absolute; - top: 0; - left: 0; - height: 100%; - background-color: $studio-blue-50; - border-radius: 4.5px; - transition: width 200ms; -} - -.progress-bar.is-pulsing .progress-bar__progress { - animation: jetpack_progress-bar-animation 3300ms infinite linear; - - background-size: 50px 100%; - background-image: linear-gradient( - -45deg, - $studio-blue-50 28%, - $studio-blue-30 28%, - $studio-blue-30 72%, - $studio-blue-50 72% - ); -} - -@keyframes jetpack_progress-bar-animation { - 0% { - background-position: 100px 0; - } -} - -/* Percentage bar */ -.percentage-bar { - border-radius: 0; - height: 8px; - width: 150px; - .progress-bar__progress { - border-radius: 0; - } -} diff --git a/projects/plugins/jetpack/_inc/client/my-plan/my-plan-header/checklist-progress-card/style.scss b/projects/plugins/jetpack/_inc/client/my-plan/my-plan-header/checklist-progress-card/style.scss deleted file mode 100644 index e0bc07f98cff5..0000000000000 --- a/projects/plugins/jetpack/_inc/client/my-plan/my-plan-header/checklist-progress-card/style.scss +++ /dev/null @@ -1,122 +0,0 @@ -.checklist__header { - display: flex; - flex-direction: row; - - &-main { - display: flex; - flex: 1 1; - flex-direction: column; - align-items: stretch; - } - - &-secondary { - display: flex; - flex: 2 1; - flex-direction: row; - align-items: center; - justify-content: flex-end; - } - - &-progress { - display: flex; - flex-direction: row; - font-size: 14px; - white-space: nowrap; - margin-bottom: 5px; - } - - &-progress-text { - display: flex; - flex: 1 1; - margin: 0; - color: $studio-gray-50; - } - - &-progress-number { - display: flex; - color: $studio-gray-50; - padding-left: 1em; - } - - &-summary { - font-size: 12px; - line-height: 24px; - color: $studio-gray-50; - cursor: pointer; - } - - &-action { - position: absolute; - top: 0; - right: 0; - width: 48px; - height: 100%; - border-left: 1px solid $studio-gray-0; - cursor: pointer; - - .gridicon { - fill: $studio-gray-30; - vertical-align: middle; - align-items: center; - transition: transform 0.15s cubic-bezier( 0.175, 0.885, 0.32, 1.275 ), color 0.2s ease-in; - } - - .checklist.is-expanded & { - .gridicon { - transform: rotate( 180deg ); - } - } - - .accessible-focus &:focus { - box-shadow: inset 0 0 0 2px $studio-blue-30; - } - } - - .checklist.is-expanded &-action { - .gridicon { - transform: rotate( 180deg ); - } - } - - .dops-button.is-primary { - margin-right: 0; - background: $green-primary; - border-color: $green-secondary; - - &:focus { - box-shadow: 0 0 0 2px lighten( $green-secondary, 20% ); - } - } -} - -@media ( max-width: 600px ) { - .checklist__header { - display: block; - - &-secondary { - display: block; - text-align: left; - padding-top: 15px; - } - } -} - -.checklist-header-progress-bar { - width: 100%; - display: inline-block; - position: relative; - background-color: $studio-gray-10; - border-radius: 4.5px; - height: 4px; -} - -.checklist-header-progress-bar__progress { - display: inline-block; - position: absolute; - top: 0; - left: 0; - height: 100%; - background-color: $green-primary; - border-radius: 4.5px; - transition: width 200ms; -} diff --git a/projects/plugins/jetpack/_inc/client/my-plan/my-plan-header/index.js b/projects/plugins/jetpack/_inc/client/my-plan/my-plan-header/index.js index f9dec83f1be2e..75d3e96aebf30 100644 --- a/projects/plugins/jetpack/_inc/client/my-plan/my-plan-header/index.js +++ b/projects/plugins/jetpack/_inc/client/my-plan/my-plan-header/index.js @@ -10,18 +10,23 @@ import { find, isEmpty } from 'lodash'; * WordPress dependencies */ import { createInterpolateElement } from '@wordpress/element'; -import { __ } from '@wordpress/i18n'; +import { __, _x } from '@wordpress/i18n'; /** * Internal dependencies */ +import analytics from 'lib/analytics'; +import Button from 'components/button'; import Card from 'components/card'; import ProductExpiration from 'components/product-expiration'; import UpgradeLink from 'components/upgrade-link'; import { getPlanClass } from 'lib/plans/constants'; -import { getUpgradeUrl, getSiteRawUrl, getDateFormat, showBackups } from 'state/initial-state'; -import ChecklistCta from './checklist-cta'; -import ChecklistProgress from './checklist-progress-card'; +import { + getUpgradeUrl, + getDateFormat, + showBackups, + showRecommendations, +} from 'state/initial-state'; import MyPlanCard from '../my-plan-card'; class MyPlanHeader extends React.Component { @@ -230,39 +235,54 @@ class MyPlanHeader extends React.Component { return

{ title }

; } - render() { - const { plan, siteSlug } = this.props; + trackRecommendationsClick = () => { + analytics.tracks.recordJetpackClick( { + target: 'recommendations-button', + page: 'my-plan', + } ); + }; + render() { return (
{ this.renderPlan() } { this.renderProducts() } - - - - + { this.props.showRecommendations && ( + +
+ +
+ + ) }
); } } MyPlanHeader.propTypes = { + activeProducts: PropTypes.array, plan: PropTypes.string, - siteRawUrl: PropTypes.string, + purchases: PropTypes.array, + siteAdminUrl: PropTypes.string, // From connect HoC - siteSlug: PropTypes.string, dateFormat: PropTypes.string, displayBackups: PropTypes.bool, plansMainTopUpgradeUrl: PropTypes.string, - purchases: PropTypes.array, + showRecommendations: PropTypes.bool, }; export default connect( state => { return { - siteSlug: getSiteRawUrl( state ), dateFormat: getDateFormat( state ), displayBackups: showBackups( state ), plansMainTopUpgradeUrl: getUpgradeUrl( state, 'plans-main-top' ), + showRecommendations: showRecommendations( state ), }; } )( MyPlanHeader ); diff --git a/projects/plugins/jetpack/_inc/client/my-plan/style.scss b/projects/plugins/jetpack/_inc/client/my-plan/style.scss index 401361bedb056..ee504eac81477 100644 --- a/projects/plugins/jetpack/_inc/client/my-plan/style.scss +++ b/projects/plugins/jetpack/_inc/client/my-plan/style.scss @@ -16,7 +16,7 @@ color: $gray-darken-20; } -.jp-landing__plan-features-header-checklist-cta-container { +.jp-landing__plan-features-header-recommendations-cta-container { order: 30; align-self: center; display: flex; @@ -133,5 +133,3 @@ text-align: center; } } - -@import './my-plan-header/checklist-progress-card/style.scss'; diff --git a/projects/plugins/jetpack/_inc/client/state/action-types.js b/projects/plugins/jetpack/_inc/client/state/action-types.js index 66a42865e59c1..06d57bb780514 100644 --- a/projects/plugins/jetpack/_inc/client/state/action-types.js +++ b/projects/plugins/jetpack/_inc/client/state/action-types.js @@ -218,9 +218,6 @@ export const JETPACK_SITE_VERIFY_GOOGLE_REQUEST_SUCCESS = 'JETPACK_SITE_VERIFY_GOOGLE_REQUEST_SUCCESS'; export const JETPACK_SITE_VERIFY_GOOGLE_REQUEST_FAIL = 'JETPACK_SITE_VERIFY_GOOGLE_REQUEST_FAIL'; -export const SITE_CHECKLIST_RECEIVE = 'SITE_CHECKLIST_RECEIVE'; -export const SITE_CHECKLIST_REQUEST = 'SITE_CHECKLIST_REQUEST'; - export const JETPACK_MOBILE_LOGIN_SEND_LOGIN_EMAIL = 'JETPACK_MOBILE_LOGIN_SEND_LOGIN_EMAIL'; export const JETPACK_MOBILE_LOGIN_SEND_LOGIN_EMAIL_SUCCESS = 'JETPACK_MOBILE_LOGIN_SEND_LOGIN_EMAIL_SUCCESS'; diff --git a/projects/plugins/jetpack/_inc/client/state/checklist/actions.js b/projects/plugins/jetpack/_inc/client/state/checklist/actions.js deleted file mode 100644 index 4829f2532aad8..0000000000000 --- a/projects/plugins/jetpack/_inc/client/state/checklist/actions.js +++ /dev/null @@ -1,23 +0,0 @@ -/** - * Internal dependencies - */ -import { SITE_CHECKLIST_RECEIVE, SITE_CHECKLIST_REQUEST } from 'state/action-types'; - -export function requestSiteChecklist() { - return dispatch => { - dispatch( { type: SITE_CHECKLIST_REQUEST } ); - }; -} - -/** - * Update checklist in state - * - * @param {Object} checklist the new checklist state - * @return {Object} action object - */ -export function receiveSiteChecklist( checklist ) { - return { - type: SITE_CHECKLIST_RECEIVE, - checklist, - }; -} diff --git a/projects/plugins/jetpack/_inc/client/state/checklist/reducer.js b/projects/plugins/jetpack/_inc/client/state/checklist/reducer.js deleted file mode 100644 index 1a6f85c2dd79a..0000000000000 --- a/projects/plugins/jetpack/_inc/client/state/checklist/reducer.js +++ /dev/null @@ -1,27 +0,0 @@ -/** - * Internal dependencies - */ -import { combineReducers } from 'redux'; -import { SITE_CHECKLIST_RECEIVE, SITE_CHECKLIST_REQUEST } from 'state/action-types'; - -export function isLoading( initialState = false, action ) { - switch ( action.type ) { - case SITE_CHECKLIST_REQUEST: - return true; - case SITE_CHECKLIST_RECEIVE: - return false; - } - return initialState; -} - -export function checklist( initialState = null, action ) { - if ( action.type === SITE_CHECKLIST_RECEIVE ) { - return action.checklist; - } - return initialState; -} - -export default combineReducers( { - checklist, - isLoading, -} ); diff --git a/projects/plugins/jetpack/_inc/client/state/checklist/selectors.js b/projects/plugins/jetpack/_inc/client/state/checklist/selectors.js deleted file mode 100644 index 9f7f651140445..0000000000000 --- a/projects/plugins/jetpack/_inc/client/state/checklist/selectors.js +++ /dev/null @@ -1,26 +0,0 @@ -/** - * External dependencies - */ -import { memoize, get } from 'lodash'; - -export function isLoading( state ) { - return state.jetpack.checklist.isLoading; -} - -export function getTasks( state ) { - return get( state, [ 'jetpack', 'checklist', 'checklist', 'tasks' ] ); -} - -const memoizedChecklistCompletion = memoize( tasks => { - const taskKeys = Object.keys( tasks ); - - return { - completed: taskKeys.filter( key => tasks[ key ].completed ).length, - total: taskKeys.length, - }; -} ); - -export function getChecklistCompletion( state ) { - const tasks = getTasks( state ); - return tasks ? memoizedChecklistCompletion( tasks ) : null; -} diff --git a/projects/plugins/jetpack/_inc/client/state/reducer.js b/projects/plugins/jetpack/_inc/client/state/reducer.js index 16f1c466200e0..72afb3532812b 100644 --- a/projects/plugins/jetpack/_inc/client/state/reducer.js +++ b/projects/plugins/jetpack/_inc/client/state/reducer.js @@ -9,7 +9,6 @@ import { globalNotices } from 'components/global-notices/state/notices/reducer'; */ import { initialState } from 'state/initial-state/reducer'; import { dashboard } from 'state/at-a-glance/reducer'; -import { default as checklist } from 'state/checklist/reducer'; import { reducer as connection } from 'state/connection/reducer'; import { reducer as devCard } from 'state/dev-version/reducer'; import { reducer as plans } from 'state/plans/reducer'; @@ -33,7 +32,6 @@ import { reducer as mobile } from 'state/mobile/reducer'; import { reducer as licensing } from 'state/licensing/reducer'; const jetpackReducer = combineReducers( { - checklist, connection, dashboard, devCard,