Onboarding: Add option to track appearance completion (https://github.com/woocommerce/woocommerce-admin/pull/3503)

* Add option to track appearance completion

* Disable proceed button if no logo and not dirty state

plugins/woocommerce-admin/client/dashboard/task-list/tasks.js

@@ -27,15 +27,15 @@ import Payments from './tasks/payments';
 
 export function getAllTasks( { profileItems, options, query, toggleCartModal } ) {
 	const {
-		hasHomepage,
 		hasPhysicalProducts,
 		hasProducts,
+		isAppearanceComplete,
 		isTaxComplete,
 		shippingZonesCount,
 	} = getSetting( 'onboarding', {
-		hasHomepage: false,
 		hasPhysicalProducts: false,
 		hasProducts: false,
+		isAppearanceComplete: false,
 		isTaxComplete: false,
 		shippingZonesCount: 0,
 	} );
@@ -93,7 +93,7 @@ export function getAllTasks( { profileItems, options, query, toggleCartModal } )
 			content: __( 'Create a custom homepage and upload your logo', 'wooocommerce-admin' ),
 			icon: 'palette',
 			container: <Appearance />,
-			completed: hasHomepage,
+			completed: isAppearanceComplete,
 			visible: true,
 		},
 		{

plugins/woocommerce-admin/client/dashboard/task-list/tasks/appearance.js

@@ -35,6 +35,7 @@ class Appearance extends Component {
 		};
 
 		this.state = {
+			isDirty: false,
 			isPending: false,
 			logo: null,
 			stepIndex: 0,
@@ -203,14 +204,20 @@ class Appearance extends Component {
 			added_text: Boolean( storeNoticeText.length ),
 		} );
 
+		setSetting( 'onboarding', {
+			...getSetting( 'onboarding', {} ),
+			isAppearanceComplete: true,
+		} );
+
 		updateOptions( {
+			woocommerce_task_list_appearance_complete: true,
 			woocommerce_demo_store: storeNoticeText.length ? 'yes' : 'no',
 			woocommerce_demo_store_notice: storeNoticeText,
 		} );
 	}
 
 	getSteps() {
-		const { isPending, logo, storeNoticeText } = this.state;
+		const { isDirty, isPending, logo, storeNoticeText } = this.state;
 		const { isRequesting } = this.props;
 
 		const steps = [
@@ -263,8 +270,16 @@ class Appearance extends Component {
 				description: __( 'Ensure your store is on-brand by adding your logo', 'woocommerce-admin' ),
 				content: isPending ? null : (
 					<Fragment>
-						<ImageUpload image={ logo } onChange={ image => this.setState( { logo: image } ) } />
+						<ImageUpload
-						<Button onClick={ this.updateLogo } isBusy={ isRequesting } isPrimary>
+							image={ logo }
+							onChange={ image => this.setState( { isDirty: true, logo: image } ) }
+						/>
+						<Button
+							disabled={ ! logo && ! isDirty }
+							onClick={ this.updateLogo }
+							isBusy={ isRequesting }
+							isPrimary
+						>
 							{ __( 'Proceed', 'woocommerce-admin' ) }
 						</Button>
 						<Button onClick={ () => this.completeStep() }>
@@ -343,7 +358,11 @@ export default compose(
 		const isRequesting =
 			Boolean( isUpdateOptionsRequesting( [ `theme_mods_${ stylesheet }` ] ) ) ||
 			Boolean(
-				isUpdateOptionsRequesting( [ 'woocommerce_demo_store', 'woocommerce_demo_store_notice' ] )
+				isUpdateOptionsRequesting( [
+					'woocommerce_task_list_appearance_complete',
+					'woocommerce_demo_store',
+					'woocommerce_demo_store_notice',
+				] )
 			);
 
 		return { errors, getOptionsError, hasErrors, isRequesting, options };

plugins/woocommerce-admin/src/Features/OnboardingTasks.php

@@ -94,6 +94,7 @@ class OnboardingTasks {
 			)
 		) > 0;
 		$settings['onboarding']['hasProducts']                    = self::check_task_completion( 'products' );
+		$settings['onboarding']['isAppearanceComplete']           = get_option( 'woocommerce_task_list_appearance_complete' );
 		$settings['onboarding']['isTaxComplete']                  = self::check_task_completion( 'tax' );
 		$settings['onboarding']['shippingZonesCount']             = count( \WC_Shipping_Zones::get_zones() );
 		$settings['onboarding']['stylesheet']                     = get_option( 'stylesheet' );