Remove Is Reskinned Flag: Completely cleanup domains of the isReskinned flag

client/components/domains/domain-registration-suggestion/index.jsx

@@ -68,7 +68,7 @@ class DomainRegistrationSuggestion extends Component {
 		productCost: PropTypes.string,
 		renewCost: PropTypes.string,
 		productSaleCost: PropTypes.string,
-		isReskinned: PropTypes.bool,
+		hideMatchReasons: PropTypes.bool,
 		domainAndPlanUpsellFlow: PropTypes.bool,
 		products: PropTypes.object,
 	};
@@ -393,17 +393,12 @@ class DomainRegistrationSuggestion extends Component {
 	}
 
 	renderMatchReason() {
-		if ( this.props.isReskinned ) {
-			return null;
-		}
-
 		const {
 			suggestion: { domain_name: domain },
-			isFeatured,
 		} = this.props;
 
-		if ( ! isFeatured || ! Array.isArray( this.props.suggestion.match_reasons ) ) {
-			return null;
+		if ( ! Array.isArray( this.props.suggestion.match_reasons ) ) {
+			return <div className="domain-registration-suggestion__match-reasons"></div>;
 		}
 
 		const matchReasons = parseMatchReasons( domain, this.props.suggestion.match_reasons );
@@ -430,7 +425,7 @@ class DomainRegistrationSuggestion extends Component {
 			productSaleCost,
 			premiumDomain,
 			showStrikedOutPrice,
-			isReskinned,
+			hideMatchReasons,
 		} = this.props;
 
 		const isUnavailableDomain = this.isUnavailableDomain( domain );
@@ -454,11 +449,11 @@ class DomainRegistrationSuggestion extends Component {
 				{ ...this.getButtonProps() }
 				isFeatured={ isFeatured }
 				showStrikedOutPrice={ showStrikedOutPrice }
-				isReskinned={ isReskinned }
+				hideMatchReasons={ hideMatchReasons }
 			>
 				{ this.renderBadges() }
 				{ this.renderDomain() }
-				{ this.renderMatchReason() }
+				{ ! hideMatchReasons && isFeatured && this.renderMatchReason() }
 			</DomainSuggestion>
 		);
 	}

client/components/domains/domain-search-results/index.jsx

@@ -42,6 +42,7 @@ class DomainSearchResults extends Component {
 		mappingSuggestionLabel: PropTypes.string,
 		offerUnavailableOption: PropTypes.bool,
 		showAlreadyOwnADomain: PropTypes.bool,
+		showDomainTransferSuggestion: PropTypes.bool,
 		onClickResult: PropTypes.func.isRequired,
 		onAddMapping: PropTypes.func,
 		onAddTransfer: PropTypes.func,
@@ -318,7 +319,7 @@ class DomainSearchResults extends Component {
 					selectedSite={ this.props.selectedSite }
 					pendingCheckSuggestion={ this.props.pendingCheckSuggestion }
 					unavailableDomains={ this.props.unavailableDomains }
-					isReskinned={ this.props.isReskinned }
+					hideMatchReasons={ this.props.hideMatchReasons }
 					domainAndPlanUpsellFlow={ this.props.domainAndPlanUpsellFlow }
 					products={ this.props.useProvidedProductsList ? this.props.products : undefined }
 					isCartPendingUpdateDomain={ this.props.isCartPendingUpdateDomain }
@@ -354,7 +355,7 @@ class DomainSearchResults extends Component {
 						premiumDomain={ this.props.premiumDomains[ suggestion.domain_name ] }
 						pendingCheckSuggestion={ this.props.pendingCheckSuggestion }
 						unavailableDomains={ this.props.unavailableDomains }
-						isReskinned={ this.props.isReskinned }
+						hideMatchReasons={ this.props.hideMatchReasons }
 						domainAndPlanUpsellFlow={ this.props.domainAndPlanUpsellFlow }
 						products={ this.props.useProvidedProductsList ? this.props.products : undefined }
 						isCartPendingUpdateDomain={ this.props.isCartPendingUpdateDomain }
@@ -367,7 +368,7 @@ class DomainSearchResults extends Component {
 			if (
 				this.props.offerUnavailableOption &&
 				this.props.siteDesignType !== DESIGN_TYPE_STORE &&
-				! this.props.isReskinned
+				this.props.showDomainTransferSuggestion
 			) {
 				unavailableOffer = (
 					<DomainTransferSuggestion
@@ -390,13 +391,12 @@ class DomainSearchResults extends Component {
 
 		return (
 			<div className="domain-search-results__domain-suggestions">
-				{ ! this.props.isReskinned && this.props.children }
 				{ suggestionCount }
 				{ featuredSuggestionElement }
 				{ suggestionElements }
 				{ unavailableOffer }
 				{ this.props.showSkipButton && domainSkipSuggestion }
-				{ this.props.isReskinned && this.props.children }
+				{ this.props.children }
 			</div>
 		);
 	}

client/components/domains/domain-suggestion/index.jsx

@@ -36,7 +36,6 @@ class DomainSuggestion extends Component {
 			salePrice,
 			isSignupStep,
 			showStrikedOutPrice,
-			isReskinned,
 		} = this.props;
 
 		if ( hidePrice ) {
@@ -55,13 +54,12 @@ class DomainSuggestion extends Component {
 				rule={ priceRule }
 				isSignupStep={ isSignupStep }
 				showStrikedOutPrice={ showStrikedOutPrice }
-				isReskinned={ isReskinned }
 			/>
 		);
 	}
 
 	render() {
-		const { children, extraClasses, isAdded, isFeatured, showStrikedOutPrice, isReskinned } =
+		const { children, extraClasses, isAdded, isFeatured, showStrikedOutPrice, hideMatchReasons } =
 			this.props;
 		const classes = clsx(
 			'domain-suggestion',
@@ -87,8 +85,8 @@ class DomainSuggestion extends Component {
 				<div className={ contentClassName }>
 					{ domainContent }
 					{ matchReason }
-					{ ( isReskinned || ! isFeatured ) && this.renderPrice() }
-					{ ! isReskinned && isFeatured && (
+					{ ( hideMatchReasons || ! isFeatured ) && this.renderPrice() }
+					{ ! hideMatchReasons && isFeatured && (
 						<div className="domain-suggestion__price-container">{ this.renderPrice() }</div>
 					) }
 					<div className="domain-suggestion__action-container">

client/components/domains/featured-domain-suggestions/index.jsx

@@ -122,7 +122,7 @@ export class FeaturedDomainSuggestions extends Component {
 						premiumDomain={ this.props.premiumDomains[ suggestion.domain_name ] }
 						fetchAlgo={ this.getFetchAlgorithm( suggestion ) }
 						buttonStyles={ { primary: true } }
-						isReskinned={ this.props.isReskinned }
+						hideMatchReasons={ this.props.hideMatchReasons }
 						products={ this.props.products ?? undefined }
 						isCartPendingUpdateDomain={ this.props.isCartPendingUpdateDomain }
 						{ ...childProps }

client/components/domains/featured-domain-suggestions/style.scss

@@ -79,6 +79,7 @@
 		flex-grow: 1;
 		margin-top: 0;
 		flex-wrap: wrap;
+		min-height: 95px;
 		.domain-registration-suggestion__title-info {
 			width: 100%;
 		}

client/components/domains/register-domain-step/index.jsx

@@ -126,7 +126,10 @@ class RegisterDomainStep extends Component {
 		deemphasiseTlds: PropTypes.array,
 		recordFiltersSubmit: PropTypes.func.isRequired,
 		recordFiltersReset: PropTypes.func.isRequired,
-		isReskinned: PropTypes.bool,
+		/**
+		 * A flag signalling if the step is being used in the onboarding flow
+		 */
+		isOnboarding: PropTypes.bool,
 		showSkipButton: PropTypes.bool,
 		onSkip: PropTypes.func,
 		promoTlds: PropTypes.array,
@@ -537,7 +540,7 @@ class RegisterDomainStep extends Component {
 			! Array.isArray( this.state.searchResults ) &&
 			! this.state.loadingResults &&
 			! this.props.showExampleSuggestions;
-		const showFilters = ! isRenderingInitialSuggestions || this.props.isReskinned;
+		const showFilters = ! isRenderingInitialSuggestions || this.props.isOnboarding;
 
 		const showTldFilter =
 			( Array.isArray( this.state.availableTlds ) && this.state.availableTlds.length > 0 ) ||
@@ -622,7 +625,7 @@ class RegisterDomainStep extends Component {
 			onSearch: this.onSearch,
 			onSearchChange: this.onSearchChange,
 			ref: this.bindSearchCardReference,
-			isReskinned: this.props.isReskinned,
+			isOnboarding: this.props.isOnboarding,
 			childrenBeforeCloseButton:
 				this.props.isDomainAndPlanPackageFlow && this.renderSearchFilters(),
 		};
@@ -1524,10 +1527,10 @@ class RegisterDomainStep extends Component {
 	}
 
 	renderExampleSuggestions() {
-		const { isReskinned, domainsWithPlansOnly, offerUnavailableOption, products, path } =
+		const { isOnboarding, domainsWithPlansOnly, offerUnavailableOption, products, path } =
 			this.props;
 
-		if ( isReskinned ) {
+		if ( isOnboarding ) {
 			return this.renderBestNamesPrompt();
 		}
 
@@ -1694,15 +1697,16 @@ class RegisterDomainStep extends Component {
 				unavailableDomains={ this.state.unavailableDomains }
 				onSkip={ this.props.onSkip }
 				showSkipButton={ this.props.showSkipButton }
-				isReskinned={ this.props.isReskinned }
+				hideMatchReasons={ this.props.isOnboarding }
+				showDomainTransferSuggestion={ this.props.isOnboarding }
 				domainAndPlanUpsellFlow={ this.props.domainAndPlanUpsellFlow }
 				useProvidedProductsList={ this.props.useProvidedProductsList }
 				isCartPendingUpdateDomain={ this.props.isCartPendingUpdateDomain }
 				wpcomSubdomainSelected={ this.props.wpcomSubdomainSelected }
 				temporaryCart={ this.props.temporaryCart }
 				domainRemovalQueue={ this.props.domainRemovalQueue }
 			>
-				{ ! this.props.isReskinned &&
+				{ ! this.props.isOnboarding &&
 					hasResults &&
 					isFreeDomainExplainerVisible &&
 					this.renderFreeDomainExplainer() }
@@ -1711,7 +1715,7 @@ class RegisterDomainStep extends Component {
 	}
 
 	renderSideContent() {
-		return this.props.isReskinned && ! this.state.loadingResults && this.props.reskinSideContent;
+		return this.props.isOnboarding && ! this.state.loadingResults && this.props.reskinSideContent;
 	}
 
 	getFetchAlgo() {

client/landing/stepper/declarative-flow/internals/steps-repository/domains/domain-form-control.tsx

@@ -202,14 +202,6 @@ export function DomainFormControl( {
 		);
 	};
 
-	const isReskinnedSupportedFlow = () => {
-		if ( ! flow ) {
-			return false;
-		}
-
-		return isDomainUpsellFlow( flow ) || isSiteAssemblerFlow( flow );
-	};
-
 	const renderDomainForm = () => {
 		let initialState: DomainForm = {};
 		if ( domainForm ) {
@@ -251,7 +243,7 @@ export function DomainFormControl( {
 					includeWordPressDotCom={ includeWordPressDotCom ?? true }
 					initialState={ initialState }
 					isPlanSelectionAvailableInFlow={ isPlanSelectionAvailableLaterInFlow }
-					isReskinned
+					isOnboarding
 					reskinSideContent={ getSideContent() }
 					isSignupStep
 					key="domainForm"
@@ -289,7 +281,7 @@ export function DomainFormControl( {
 		content = renderDomainForm();
 	}
 
-	if ( isReskinnedSupportedFlow() && ! showUseYourDomain ) {
+	if ( ( isDomainUpsellFlow( flow ) || isSiteAssemblerFlow( flow ) ) && ! showUseYourDomain ) {
 		sideContent = getSideContent();
 	}
 

client/landing/stepper/declarative-flow/internals/steps-repository/unified-domains/index.tsx

@@ -62,7 +62,6 @@ const RenderDomainsStepConnect = connect(
 			flowName: flow,
 			path: window.location.pathname,
 			positionInFlow: 1,
-			isReskinned: true,
 			stepSectionName,
 			signupDependencies: step,
 		};

client/signup/steps/domains/index.jsx

@@ -44,7 +44,6 @@ import {
 } from 'calypso/lib/domains';
 import { getSuggestionsVendor } from 'calypso/lib/domains/suggestions';
 import { triggerGuidesForStep } from 'calypso/lib/guides/trigger-guides-for-step';
-import { getSitePropertyDefaults } from 'calypso/lib/signup/site-properties';
 import CalypsoShoppingCartProvider from 'calypso/my-sites/checkout/calypso-shopping-cart-provider';
 import withCartKey from 'calypso/my-sites/checkout/with-cart-key';
 import { domainManagementRoot } from 'calypso/my-sites/domains/paths';
@@ -103,7 +102,6 @@ export class RenderDomainsStep extends Component {
 		stepName: PropTypes.string.isRequired,
 		stepSectionName: PropTypes.string,
 		selectedSite: PropTypes.object,
-		isReskinned: PropTypes.bool,
 		recordTracksEvent: PropTypes.func,
 	};
 
@@ -1080,7 +1078,7 @@ export class RenderDomainsStep extends Component {
 				forceHideFreeDomainExplainerAndStrikeoutUi={
 					this.props.forceHideFreeDomainExplainerAndStrikeoutUi
 				}
-				isReskinned={ this.props.isReskinned }
+				isOnboarding
 				reskinSideContent={ this.getSideContent() }
 				isInLaunchFlow={ 'launch-site' === this.props.flowName }
 				promptText={
@@ -1153,7 +1151,7 @@ export class RenderDomainsStep extends Component {
 	isHostingFlow = () => isHostingSignupFlow( this.props.flowName );
 
 	getSubHeaderText() {
-		const { flowName, isAllDomains, stepSectionName, isReskinned, translate } = this.props;
+		const { flowName, isAllDomains, stepSectionName, translate } = this.props;
 
 		if ( isAllDomains ) {
 			return translate( 'Find the domain that defines you' );
@@ -1183,12 +1181,8 @@ export class RenderDomainsStep extends Component {
 			return translate( 'Find and claim one or more domain names' );
 		}
 
-		if ( isReskinned ) {
-			return (
-				! stepSectionName &&
-				'domain-transfer' !== flowName &&
-				translate( 'Enter some descriptive keywords to get started' )
-			);
+		if ( ! stepSectionName && 'domain-transfer' !== flowName ) {
+			return translate( 'Enter some descriptive keywords to get started' );
 		}
 
 		return 'transfer' === this.props.stepSectionName || 'mapping' === this.props.stepSectionName
@@ -1197,8 +1191,7 @@ export class RenderDomainsStep extends Component {
 	}
 
 	getHeaderText() {
-		const { headerText, isAllDomains, isReskinned, stepSectionName, translate, flowName } =
-			this.props;
+		const { headerText, isAllDomains, stepSectionName, translate, flowName } = this.props;
 
 		if ( stepSectionName === 'use-your-domain' || 'domain-transfer' === flowName ) {
 			return '';
@@ -1212,14 +1205,10 @@ export class RenderDomainsStep extends Component {
 			return translate( 'Your next big idea starts here' );
 		}
 
-		if ( isReskinned ) {
-			if ( shouldUseMultipleDomainsInCart( flowName ) ) {
-				return ! stepSectionName && translate( 'Choose your domains' );
-			}
-			return ! stepSectionName && translate( 'Choose a domain' );
+		if ( shouldUseMultipleDomainsInCart( flowName ) ) {
+			return ! stepSectionName && translate( 'Choose your domains' );
 		}
-
-		return getSitePropertyDefaults( 'signUpFlowDomainsStepHeader' );
+		return ! stepSectionName && translate( 'Choose a domain' );
 	}
 
 	getAnalyticsSection() {
@@ -1238,7 +1227,7 @@ export class RenderDomainsStep extends Component {
 			content = this.domainForm();
 		}
 
-		if ( ! this.props.stepSectionName && this.props.isReskinned ) {
+		if ( ! this.props.stepSectionName ) {
 			sideContent = this.getSideContent();
 		}
 
@@ -1325,7 +1314,6 @@ export class RenderDomainsStep extends Component {
 			stepSectionName,
 			isAllDomains,
 			translate,
-			isReskinned,
 			userSiteCount,
 			previousStepName,
 			useStepperWrapper,
@@ -1473,7 +1461,7 @@ export class RenderDomainsStep extends Component {
 				hideSkip
 				goToNextStep={ this.handleSkip }
 				align="center"
-				isWideLayout={ isReskinned }
+				isWideLayout
 			/>
 		);
 	}