[not verified] Update site type question on wp admin home (#26540)

* Update site type question on banner * Update site-type banner question * changelog
Automattic · Sep 30, 2022 · 1f834ca · 1f834ca
1 parent 865ab1c
commit 1f834ca
Show file tree

Hide file tree

Showing 5 changed files with 22 additions and 25 deletions.
diff --git a/projects/plugins/jetpack/_inc/client/state/recommendations/reducer.js b/projects/plugins/jetpack/_inc/client/state/recommendations/reducer.js
@@ -296,7 +296,7 @@ export const getDataByKey = ( state, key ) => {
 
 const stepToNextStep = {
 	'setup-wizard-completed': 'summary',
-	'banner-completed': 'woocommerce',
+	'banner-completed': 'agency',
 	'not-started': 'site-type-question',
 	'site-type-question': 'agency',
 	agency: 'woocommerce',

diff --git a/projects/plugins/jetpack/_inc/jetpack-recommendations-banner.js b/projects/plugins/jetpack/_inc/jetpack-recommendations-banner.js
@@ -22,21 +22,19 @@
 	} );
 
 	recommendationsBannerContinue.on( 'click', function () {
-		var fieldNames = [ 'personal', 'business', 'store', 'other' ];
+		var fieldNames = [ 'builder', 'store', 'personal' ];
 		var formData = {};
 		fieldNames.forEach( function ( name ) {
 			formData[ name ] = $( "input[name='" + name + "']" ).prop( 'checked' );
 		} );
-
 		$.post(
 			jp_banner.ajax_url,
 			{
 				action: 'jetpack_recommendations_banner',
 				nonce: jp_banner.nonce,
 				personal: formData.personal,
-				business: formData.business,
+				builder: formData.builder,
 				store: formData.store,
-				other: formData.other,
 			},
 			function ( response ) {
 				if ( true === response.success ) {

diff --git a/projects/plugins/jetpack/changelog/update-site-type-question-on-wp-admin-home b/projects/plugins/jetpack/changelog/update-site-type-question-on-wp-admin-home
@@ -0,0 +1,4 @@
+Significance: minor
+Type: enhancement
+
+Update site-type question on wp-admin banner
diff --git a/projects/plugins/jetpack/class-jetpack-recommendations-banner.php b/projects/plugins/jetpack/class-jetpack-recommendations-banner.php
@@ -129,10 +129,10 @@ public static function ajax_callback() {
 			$tracking_answers['personal'] = $value;
 		}
 
-		if ( isset( $_REQUEST['agency'] ) && is_string( $_REQUEST['agency'] ) ) {
-			$value                      = 'true' === $_REQUEST['agency'] ? true : false;
-			$data['site-type-agency']   = $value;
-			$tracking_answers['agency'] = $value;
+		if ( isset( $_REQUEST['builder'] ) && is_string( $_REQUEST['builder'] ) ) {
+			$value                       = 'true' === $_REQUEST['builder'] ? true : false;
+			$data['site-type-agency']    = $value;
+			$tracking_answers['builder'] = $value;
 		}
 
 		if ( isset( $_REQUEST['store'] ) && is_string( $_REQUEST['store'] ) ) {
@@ -208,19 +208,18 @@ public function render_banner() {
 				<h1 class="jp-recommendations-banner__question">
 					<?php
 					/* translators: placeholder is the name of the website */
-					echo sprintf( esc_html__( 'What type of site is %s?', 'jetpack' ), esc_html( $site_name ) );
+					echo sprintf( esc_html__( 'Tell us more about %s?', 'jetpack' ), esc_html( $site_name ) );
 					?>
 				</h1>
 				<p class="jp-recommendations-banner__description">
-					<?php esc_html_e( 'This assistant will help you get the most from Jetpack. Tell us more about your goals and we’ll recommend relevant features to help you succeed.', 'jetpack' ); ?>
+					<?php esc_html_e( 'To help you get the most from Jetpack, tell us about your site. Check all that apply:', 'jetpack' ); ?>
 				</p>
 				<div class="jp-recommendations-banner__answer">
 					<form id="jp-recommendations-banner__form" class="jp-recommendations-banner__form">
 						<div class="jp-recommendations-banner__checkboxes">
-							<?php $this->render_checkbox( 'personal', __( 'Personal', 'jetpack' ) ); ?>
-							<?php $this->render_checkbox( 'business', __( 'Business', 'jetpack' ) ); ?>
-							<?php $this->render_checkbox( 'store', __( 'Store', 'jetpack' ) ); ?>
-							<?php $this->render_checkbox( 'other', __( 'Other', 'jetpack' ) ); ?>
+							<?php $this->render_checkbox( 'builder', __( 'I build or manage this site for a client', 'jetpack' ) ); ?>
+							<?php $this->render_checkbox( 'store', __( 'This is an e-commerce store', 'jetpack' ) ); ?>
+							<?php $this->render_checkbox( 'personal', __( 'This is a personal site', 'jetpack' ) ); ?>
 						</div>
 					</form>
 					<a id="jp-recommendations-banner__continue-button" class="jp-banner-cta-button">

diff --git a/projects/plugins/jetpack/scss/jetpack-recommendations-banner.scss b/projects/plugins/jetpack/scss/jetpack-recommendations-banner.scss
@@ -75,7 +75,7 @@
 	color: var( --jp-gray-100 );
 
 	font-size: 1rem;
-	
+
 	@media (min-width: $jp-banner-md-breakpoint) {
 		max-width: 600px;
 	}
@@ -100,15 +100,10 @@
 }
 
 .jp-recommendations-banner__checkboxes {
-	display: grid;
-	gap: 1rem;
-	grid-template-rows: auto auto;
-	grid-template-columns: auto auto;
+	display: flex;
+	flex-direction: column;
 
-	@include breakpoint( '<480px' ) {
-		grid-template-rows: auto auto auto auto;
-		grid-template-columns: auto;
-	}
+	text-align: left;
 }
 
 .jp-recommendations-answer__checkbox-label {
@@ -119,6 +114,7 @@
 	border-radius: 2px;
 	cursor: pointer;
 	background: $studio-white;
+	margin-bottom: 1rem;
 
 	&.checked {
 		background: $studio-gray-0;
@@ -223,7 +219,7 @@
 	@include breakpoint( "<480px" ) {
 		margin-top: 0;
 	}
-	
+
 	&:hover,
 	&:active {
 		color: $studio-gray-100;