CIAB: update Checkout for Woo Hosted sites (#106584)

* Hide logo for Woo Hosted sites

* Use WPcom colors for Woo Hosted

Author: michaeldcain

client/layout/masterbar/checkout.tsx

@@ -37,6 +37,13 @@ const CheckoutMasterbar = ( {
 	const leaveModalProps = useCheckoutLeaveModal( { siteUrl: siteSlug ?? '' } );
 
 	const getCheckoutType = () => {
+		// Woo Hosted sites are supposed to default to WPcom colors, but without
+		// a logo. We should update this once we have a better way to identify
+		// Garden sites outside of the Hosting Dashboard.
+		if ( isJetpackNotAtomic && siteSlug?.endsWith( '.commerce-garden.com' ) ) {
+			return 'woo-hosted';
+		}
+
 		if ( window.location.pathname.startsWith( '/checkout/jetpack' ) || isJetpackNotAtomic ) {
 			return 'jetpack';
 		}
@@ -54,7 +61,8 @@ const CheckoutMasterbar = ( {
 	const checkoutType = getCheckoutType();
 
 	const showCloseButton =
-		isLeavingAllowed && ( checkoutType === 'wpcom' || checkoutType === 'gravatar' );
+		isLeavingAllowed &&
+		( checkoutType === 'wpcom' || checkoutType === 'gravatar' || checkoutType === 'woo-hosted' );
 
 	return (
 		<Masterbar

client/my-sites/checkout/src/components/checkout-main.tsx

@@ -548,9 +548,9 @@ export default function CheckoutMain( {
 		[ dataForProcessor, translate ]
 	);
 
+	// Gravatar Theme
 	let gravatarColors = {};
 	let gravatarFontWeights = {};
-
 	if ( isGravatarDomain ) {
 		gravatarColors = {
 			primary: '#1d4fc4',
@@ -565,18 +565,25 @@ export default function CheckoutMain( {
 		};
 	}
 
-	const jetpackColors = isJetpackNotAtomic
-		? {
-				primary: colors[ 'Jetpack Green' ],
-				primaryBorder: colors[ 'Jetpack Green 80' ],
-				primaryOver: colors[ 'Jetpack Green 60' ],
-				success: colors[ 'Jetpack Green' ],
-				discount: colors[ 'Jetpack Green' ],
-				highlight: colors[ 'WordPress Blue 50' ],
-				highlightBorder: colors[ 'WordPress Blue 80' ],
-				highlightOver: colors[ 'WordPress Blue 60' ],
-		  }
-		: {};
+	// Jetpack Theme
+	// Woo Hosted sites are technically Jetpack, but are supposed to default to
+	// WPcom colors. We should update this once we have a better way to identify
+	// Garden sites outside of the Hosting Dashboard.
+	const jetpackColors =
+		isJetpackNotAtomic && ! updatedSiteSlug?.endsWith( '.commerce-garden.com' )
+			? {
+					primary: colors[ 'Jetpack Green' ],
+					primaryBorder: colors[ 'Jetpack Green 80' ],
+					primaryOver: colors[ 'Jetpack Green 60' ],
+					success: colors[ 'Jetpack Green' ],
+					discount: colors[ 'Jetpack Green' ],
+					highlight: colors[ 'WordPress Blue 50' ],
+					highlightBorder: colors[ 'WordPress Blue 80' ],
+					highlightOver: colors[ 'WordPress Blue 60' ],
+			  }
+			: {};
+
+	// A4A Theme
 	const a4aColors =
 		sitelessCheckoutType === 'a4a'
 			? {
@@ -588,6 +595,7 @@ export default function CheckoutMain( {
 					highlightOver: colors[ 'Automattic Blue 60' ],
 			  }
 			: {};
+
 	const theme = {
 		...checkoutTheme,
 		colors: { ...checkoutTheme.colors, ...gravatarColors, ...jetpackColors, ...a4aColors },