From 20be659cef7be3f381b55829198d3844bb7fffbb Mon Sep 17 00:00:00 2001
From: Justin Shreve <justin.shreve@gmail.com>
Date: Mon, 4 Nov 2019 11:34:44 -0500
Subject: [PATCH] Only show the Jetpack logo in the header if we need to setup
 Jetpack (https://github.com/woocommerce/woocommerce-admin/pull/3160)

* Only show the Jetpack logo in the header if we need to setup Jetpack

* Adjust woo logo position
---
 .../dashboard/profile-wizard/header-logo.js   | 214 +++++++++++-------
 .../dashboard/profile-wizard/style.scss       |   6 +-
 2 files changed, 131 insertions(+), 89 deletions(-)

diff --git a/plugins/woocommerce-admin/client/dashboard/profile-wizard/header-logo.js b/plugins/woocommerce-admin/client/dashboard/profile-wizard/header-logo.js
index 4e3571e2968..a750830d70f 100644
--- a/plugins/woocommerce-admin/client/dashboard/profile-wizard/header-logo.js
+++ b/plugins/woocommerce-admin/client/dashboard/profile-wizard/header-logo.js
@@ -1,93 +1,131 @@
 /** @format */
+/**
+ * External dependencies
+ */
+import { Component } from '@wordpress/element';
+import { compose } from '@wordpress/compose';
+import classNames from 'classnames';
 
-export default () => (
-	<svg
-		role="img"
-		aria-label="Jetpack + Woo"
-		width="200"
-		viewBox="0 0 1270 170"
-		version="1.1"
-		xmlns="http://www.w3.org/2000/svg"
-	>
-		<g fill="none" fillRule="evenodd">
-			<g>
-				<g>
-					<g transform="translate(219 35.082353)" className="woocommerce-profile-wizard__plus">
-						<svg
-							xmlns="http://www.w3.org/2000/svg"
-							viewBox="0 0 24 24"
-							height="72"
-							width="72"
-							fill="#2B2D2F"
-						>
-							<g xmlns="http://www.w3.org/2000/svg">
-								<path d="M18 11h-5V6h-2v5H6v2h5v5h2v-5h5" />
+/**
+ * Internal depdencies
+ */ import withSelect from 'wc-api/with-select';
+
+class HeaderLogo extends Component {
+	render() {
+		const { isJetpackConnected } = this.props;
+
+		const ariaLabel = ! isJetpackConnected ? 'Jetpack + WooCommerce' : 'WooCommerce';
+		const classes = classNames( 'woocommerce-profile-wizard__header-logo', {
+			'woocommerce-profile-wizard__header-logo-with-jetpack': ! isJetpackConnected,
+		} );
+
+		return (
+			<svg
+				role="img"
+				aria-label={ ariaLabel }
+				width="200"
+				viewBox="0 0 1270 170"
+				version="1.1"
+				xmlns="http://www.w3.org/2000/svg"
+				className={ classes }
+			>
+				<g fill="none" fillRule="evenodd">
+					<g>
+						<g>
+							{ ! isJetpackConnected && (
+								<g
+									transform="translate(219 35.082353)"
+									className="woocommerce-profile-wizard__plus"
+								>
+									<svg
+										xmlns="http://www.w3.org/2000/svg"
+										viewBox="0 0 24 24"
+										height="72"
+										width="72"
+										fill="#2B2D2F"
+									>
+										<g xmlns="http://www.w3.org/2000/svg">
+											<path d="M18 11h-5V6h-2v5H6v2h5v5h2v-5h5" />
+										</g>
+									</svg>
+								</g>
+							) }
+							<g fillRule="nonzero" transform="translate(360)">
+								<path
+									d="M23.7,0.2 L222.8,0.2 C235.4,0.2 245.6,10.4 245.6,23
+											L245.6,99 C245.6,111.6 235.4,121.8 222.8,121.8 L151.4,121.8
+											L161.2,145.8 L118.1,121.8 L23.8,121.8 C11.2,121.8 1,111.6 1,99
+											L1,23 C0.9,10.5 11.1,0.2 23.7,0.2 Z"
+									id="Shape"
+									fill="#2B2D2F"
+								/>
+								<path
+									d="M13.2,20.9 C14.6,19 16.7,18 19.5,17.8 C24.6,17.4 27.5,19.8 28.2,25
+											C31.3,45.9 34.7,63.6 38.3,78.1 L60.2,36.4 C62.2,32.6 64.7,30.6 67.7,30.4
+											C72.1,30.1 74.8,32.9 75.9,38.8 C78.4,52.1 81.6,63.4 85.4,73 C88,47.6 92.4,29.3
+											98.6,18 C100.1,15.2 102.3,13.8 105.2,13.6 C107.5,13.4 109.6,14.1 111.5,15.6
+											C113.4,17.1 114.4,19 114.6,21.3 C114.7,23.1 114.4,24.6 113.6,26.1 C109.7,33.3
+											106.5,45.4 103.9,62.2 C101.4,78.5 100.5,91.2 101.1,100.3 C101.3,102.8
+											100.9,105 99.9,106.9 C98.7,109.1 96.9,110.3 94.6,110.5 C92,110.7 89.3,109.5
+											86.7,106.8 C77.4,97.3 70,83.1 64.6,64.2 C58.1,77 53.3,86.6 50.2,93 C44.3,104.3
+											39.3,110.1 35.1,110.4 C32.4,110.6 30.1,108.3 28.1,103.5 C23,90.4 17.5,65.1
+											11.6,27.6 C11.3,25 11.8,22.7 13.2,20.9 Z"
+									id="Shape"
+									fill="#F6F6F6"
+									fillRule="nonzero"
+								/>
+								<path
+									d="M228.2,36.6 C224.6,30.3 219.3,26.5 212.2,25 C210.3,24.6 208.5,24.4 206.8,24.4
+											C197.2,24.4 189.4,29.4 183.3,39.4 C178.1,47.9 175.5,57.3 175.5,67.6 C175.5,75.3
+											177.1,81.9 180.3,87.4 C183.9,93.7 189.2,97.5 196.3,99 C198.2,99.4 200,99.6
+											201.7,99.6 C211.4,99.6 219.2,94.6 225.2,84.6 C230.4,76 233,66.6 233,56.3
+											C233,48.5 231.4,42 228.2,36.6 Z M215.6,64.3 C214.2,70.9 211.7,75.8 208,79.1
+											C205.1,81.7 202.4,82.8 199.9,82.3 C197.5,81.8 195.5,79.7 194,75.8 C192.8,72.7
+											192.2,69.6 192.2,66.7 C192.2,64.2 192.4,61.7 192.9,59.4 C193.8,55.3 195.5,51.3
+											198.2,47.5 C201.5,42.6 205,40.6 208.6,41.3 C211,41.8 213,43.9 214.5,47.8
+											C215.7,50.9 216.3,54 216.3,56.9 C216.3,59.5 216,62 215.6,64.3 Z"
+									id="Shape"
+									fill="#F6F6F6"
+									fillRule="nonzero"
+								/>
+								<path
+									d="M165.5,36.6 C161.9,30.3 156.5,26.5 149.5,25 C147.6,24.6 145.8,24.4 144.1,24.4
+											C134.5,24.4 126.7,29.4 120.6,39.4 C115.4,47.9 112.8,57.3 112.8,67.6 C112.8,75.3
+											114.4,81.9 117.6,87.4 C121.2,93.7 126.5,97.5 133.6,99 C135.5,99.4 137.3,99.6
+											139,99.6 C148.7,99.6 156.5,94.6 162.5,84.6 C167.7,76 170.3,66.6 170.3,56.3
+											C170.3,48.5 168.7,42 165.5,36.6 Z M152.9,64.3 C151.5,70.9 149,75.8 145.3,79.1
+											C142.4,81.7 139.7,82.8 137.2,82.3 C134.8,81.8 132.8,79.7 131.3,75.8 C130.1,72.7
+											129.5,69.6 129.5,66.7 C129.5,64.2 129.7,61.7 130.2,59.4 C131.1,55.3 132.8,51.3
+											135.5,47.5 C138.8,42.6 142.3,40.6 145.9,41.3 C148.3,41.8 150.3,43.9 151.8,47.8
+											C153,50.9 153.6,54 153.6,56.9 C153.6,59.5 153.4,62 152.9,64.3 Z"
+									id="Shape"
+									fill="#F6F6F6"
+									fillRule="nonzero"
+								/>
 							</g>
-						</svg>
+							{ ! isJetpackConnected && (
+								<svg height="150" width="150" viewBox="0 0 32 32">
+									<path
+										fill="#2B2D2F"
+										d="M16,0C7.2,0,0,7.2,0,16s7.2,16,16,16s16-7.2,16-16S24.8,0,16,0z"
+									/>
+									<polygon fill="#F6F6F6" points="15,19 7,19 15,3 " />
+									<polygon fill="#F6F6F6" points="17,29 17,13 25,13 " />
+								</svg>
+							) }
+						</g>
 					</g>
-					<g fillRule="nonzero" transform="translate(360)">
-						<path
-							d="M23.7,0.2 L222.8,0.2 C235.4,0.2 245.6,10.4 245.6,23
-                                L245.6,99 C245.6,111.6 235.4,121.8 222.8,121.8 L151.4,121.8
-                                L161.2,145.8 L118.1,121.8 L23.8,121.8 C11.2,121.8 1,111.6 1,99
-                                L1,23 C0.9,10.5 11.1,0.2 23.7,0.2 Z"
-							id="Shape"
-							fill="#2B2D2F"
-						/>
-						<path
-							d="M13.2,20.9 C14.6,19 16.7,18 19.5,17.8 C24.6,17.4 27.5,19.8 28.2,25
-                                C31.3,45.9 34.7,63.6 38.3,78.1 L60.2,36.4 C62.2,32.6 64.7,30.6 67.7,30.4
-                                C72.1,30.1 74.8,32.9 75.9,38.8 C78.4,52.1 81.6,63.4 85.4,73 C88,47.6 92.4,29.3
-                                98.6,18 C100.1,15.2 102.3,13.8 105.2,13.6 C107.5,13.4 109.6,14.1 111.5,15.6
-                                C113.4,17.1 114.4,19 114.6,21.3 C114.7,23.1 114.4,24.6 113.6,26.1 C109.7,33.3
-                                106.5,45.4 103.9,62.2 C101.4,78.5 100.5,91.2 101.1,100.3 C101.3,102.8
-                                100.9,105 99.9,106.9 C98.7,109.1 96.9,110.3 94.6,110.5 C92,110.7 89.3,109.5
-                                86.7,106.8 C77.4,97.3 70,83.1 64.6,64.2 C58.1,77 53.3,86.6 50.2,93 C44.3,104.3
-                                39.3,110.1 35.1,110.4 C32.4,110.6 30.1,108.3 28.1,103.5 C23,90.4 17.5,65.1
-                                11.6,27.6 C11.3,25 11.8,22.7 13.2,20.9 Z"
-							id="Shape"
-							fill="#F6F6F6"
-							fillRule="nonzero"
-						/>
-						<path
-							d="M228.2,36.6 C224.6,30.3 219.3,26.5 212.2,25 C210.3,24.6 208.5,24.4 206.8,24.4
-                                C197.2,24.4 189.4,29.4 183.3,39.4 C178.1,47.9 175.5,57.3 175.5,67.6 C175.5,75.3
-                                177.1,81.9 180.3,87.4 C183.9,93.7 189.2,97.5 196.3,99 C198.2,99.4 200,99.6
-                                201.7,99.6 C211.4,99.6 219.2,94.6 225.2,84.6 C230.4,76 233,66.6 233,56.3
-                                C233,48.5 231.4,42 228.2,36.6 Z M215.6,64.3 C214.2,70.9 211.7,75.8 208,79.1
-                                C205.1,81.7 202.4,82.8 199.9,82.3 C197.5,81.8 195.5,79.7 194,75.8 C192.8,72.7
-                                192.2,69.6 192.2,66.7 C192.2,64.2 192.4,61.7 192.9,59.4 C193.8,55.3 195.5,51.3
-                                198.2,47.5 C201.5,42.6 205,40.6 208.6,41.3 C211,41.8 213,43.9 214.5,47.8
-                                C215.7,50.9 216.3,54 216.3,56.9 C216.3,59.5 216,62 215.6,64.3 Z"
-							id="Shape"
-							fill="#F6F6F6"
-							fillRule="nonzero"
-						/>
-						<path
-							d="M165.5,36.6 C161.9,30.3 156.5,26.5 149.5,25 C147.6,24.6 145.8,24.4 144.1,24.4
-                                C134.5,24.4 126.7,29.4 120.6,39.4 C115.4,47.9 112.8,57.3 112.8,67.6 C112.8,75.3
-                                114.4,81.9 117.6,87.4 C121.2,93.7 126.5,97.5 133.6,99 C135.5,99.4 137.3,99.6
-                                139,99.6 C148.7,99.6 156.5,94.6 162.5,84.6 C167.7,76 170.3,66.6 170.3,56.3
-                                C170.3,48.5 168.7,42 165.5,36.6 Z M152.9,64.3 C151.5,70.9 149,75.8 145.3,79.1
-                                C142.4,81.7 139.7,82.8 137.2,82.3 C134.8,81.8 132.8,79.7 131.3,75.8 C130.1,72.7
-                                129.5,69.6 129.5,66.7 C129.5,64.2 129.7,61.7 130.2,59.4 C131.1,55.3 132.8,51.3
-                                135.5,47.5 C138.8,42.6 142.3,40.6 145.9,41.3 C148.3,41.8 150.3,43.9 151.8,47.8
-                                C153,50.9 153.6,54 153.6,56.9 C153.6,59.5 153.4,62 152.9,64.3 Z"
-							id="Shape"
-							fill="#F6F6F6"
-							fillRule="nonzero"
-						/>
-					</g>
-					<svg height="150" width="150" viewBox="0 0 32 32">
-						<path
-							fill="#2B2D2F"
-							d="M16,0C7.2,0,0,7.2,0,16s7.2,16,16,16s16-7.2,16-16S24.8,0,16,0z"
-						/>
-						<polygon fill="#F6F6F6" points="15,19 7,19 15,3 " />
-						<polygon fill="#F6F6F6" points="17,29 17,13 25,13 " />
-					</svg>
 				</g>
-			</g>
-		</g>
-	</svg>
-);
+			</svg>
+		);
+	}
+}
+
+export default compose(
+	withSelect( select => {
+		const { isJetpackConnected } = select( 'wc-api' );
+		return {
+			isJetpackConnected: isJetpackConnected(),
+		};
+	} )
+)( HeaderLogo );
diff --git a/plugins/woocommerce-admin/client/dashboard/profile-wizard/style.scss b/plugins/woocommerce-admin/client/dashboard/profile-wizard/style.scss
index 3e5c58da088..9e577569ae1 100644
--- a/plugins/woocommerce-admin/client/dashboard/profile-wizard/style.scss
+++ b/plugins/woocommerce-admin/client/dashboard/profile-wizard/style.scss
@@ -57,7 +57,11 @@
 		justify-content: center;
 		background: $studio-white;
 
-		svg > g {
+		svg.woocommerce-profile-wizard__header-logo > g {
+			transform: translateX(12%);
+		}
+
+		svg.woocommerce-profile-wizard__header-logo-with-jetpack > g {
 			transform: translateX(25%);
 		}