Private by default launch flow (#30242)

* merging conflicts

* some cleanup

* Launch site after completing all flow steps

* Exclude steps for the site launch flow, if user has already made a domain or plan purchase

* In the domain step, removing the free *.wordpress.com suggestion, and showing by default domain suggestions derived from siteSlug

* Added a Skip button on the Domains step for users who don't want to purchase a domain for launching a site

* 1. Copy change 2. Fixes an error of occasional domain step failure due to missing prevProps.selectedSite

* Added customized header/sub-header for the domains and plans steps for those in the launch flow; Modified the CTA button copy in the plans step

* Move launching to apiRequestFunction; remove infoNotices and success messages for launch

* refactored addPlanToCart and addDomainToCart functions, consolidating the common code

* Remove siteId dependency where not needed

* removes siteID from providesDependenciesInQuery

* Updating README

* Some code cleanup

* 1. Removed siteSlug as a providedDependency in steps, since it's already provided as a dependency in query 2. Removed delayApiRequestUntilComplete for steps that don't need to delay the API request 3. The launch site endpoint can accept a site id or slug, so removing site ID fetch from launchSiteApi()

* Check if site has a domain or a plan from the state tree

* Moved the domain check to state

* Clarifying that the launch site API can take either an ID or slug

* Use QuerySiteDomains component to force fetch site domains

* Use QuerySiteDomains component to force fetch site domains

* This revision now handles removing the plan step and domain step in the framework. In the launch flow, if the site has a domain or a paid plan, then the corresponding step is skipped.

* In handleSkip() function for the domain step, removing a bunch of variables with undefined values since they are not needed to submit the signup step. Outcome: code is cleaner

* i18n fixes - translator comments and rewording text

* Refactored removeFulfilledSteps() function to make it generic and applicable to all steps. It also combines the functionality of submitQueryDependencies()

* Removed submitQueryDependencies() function and some code cleanup

* Removed stray console statements

* Moving the lines for checking if a step is already fulfilled one level up

* Change button text on Paid plans in the plan step for launch flow

* Fixing a typo on a translator comment

* i18n bot suggestion to reuse context

* Use the destructured isLaunchPage variable

* Removing unused variables

* 1. If a step provides multiple dependencies, the entire step was getting excluded even if just one dependency was getting fulfilled. Introduced a change in which we exclude a step only if all of the dependencies it provides have been fulfilled 2. Added the isSiteTopicFulfilled callback to the site topic step of the preview flow

* Add the site topic callback to the domain step only in the subdomain flow. This should hopefully fix the failing e2e test (though hacky)

* Adding a site-topic step to the subdomain flow, so that it can fulfill the vertical query dependency

* rename flow to launch-site

client/components/domains/README.md

@@ -17,6 +17,11 @@ domain-search-results
 ---------------------
 The results of domain search - offers mapping or registration
 
+domain-skip-suggestion
+---------------------
+Shows a Skip option if a user wants to continue without selecting a domain.
+Presently, this is used in the 'launch-site' flow.
+
 domain-suggestion
 -----------------
 A single registration suggestion

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

@@ -0,0 +1,48 @@
+/** @format */
+
+/**
+ * External dependencies
+ */
+import PropTypes from 'prop-types';
+import React from 'react';
+import { localize } from 'i18n-calypso';
+
+/**
+ * Internal dependencies
+ */
+import DomainSuggestion from 'components/domains/domain-suggestion';
+
+class DomainSkipSuggestion extends React.Component {
+	static propTypes = {
+		onButtonClick: PropTypes.func.isRequired,
+	};
+
+	render() {
+		const { translate } = this.props;
+		const buttonContent = translate( 'Skip Purchase' );
+
+		return (
+			<DomainSuggestion
+				buttonContent={ buttonContent }
+				buttonStyles={ { borderless: true } }
+				extraClasses="is-visible domain-skip-suggestion"
+				hidePrice={ true }
+				onButtonClick={ this.props.onButtonClick }
+				showChevron
+				// tracksButtonClickSource={ this.props.tracksButtonClickSource }
+			>
+				<div className="domain-skip-suggestion__domain-description">
+					<h3>{ this.props.selectedSiteSlug }</h3>
+					<p>
+						{ translate( 'This is your current free site address', {
+							comment:
+								"Explains that the domain name shown above this sentence is this site's currently active domain, and it is free of cost.",
+						} ) }
+					</p>
+				</div>
+			</DomainSuggestion>
+		);
+	}
+}
+
+export default localize( DomainSkipSuggestion );

client/components/domains/domain-skip-suggestion/style.scss

@@ -0,0 +1,28 @@
+.domain-skip-suggestion {
+	display: flex;
+	align-items: center;
+
+	& .button.domain-suggestion__action.is-borderless {
+	    flex: 1 0 auto;
+	}
+}
+
+.domain-skip-suggestion__domain-description {
+	padding-right: 1em;
+
+	@include breakpoint( '>660px' ) {
+		width: 75%;
+	}
+
+	> p {
+		color: var( --color-neutral-700 );
+		font-size: 12px;
+		font-weight: 600;
+		margin-bottom: 0;
+		opacity: 0.7;
+
+		@include breakpoint( '>960px' ) {
+			margin-bottom: 8px;
+		}
+	}
+}

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

@@ -50,6 +50,7 @@ import { getAvailabilityNotice } from 'lib/domains/registration/availability-mes
 import Search from 'components/search';
 import DomainRegistrationSuggestion from 'components/domains/domain-registration-suggestion';
 import DomainTransferSuggestion from 'components/domains/domain-transfer-suggestion';
+import DomainSkipSuggestion from 'components/domains/domain-skip-suggestion';
 import DomainSuggestion from 'components/domains/domain-suggestion';
 import DomainSearchResults from 'components/domains/domain-search-results';
 import ExampleDomainSuggestions from 'components/domains/example-domain-suggestions';
@@ -319,6 +320,7 @@ class RegisterDomainStep extends React.Component {
 
 		if (
 			this.props.selectedSite &&
+			prevProps.selectedSite &&
 			this.props.selectedSite.domain !== prevProps.selectedSite.domain
 		) {
 			this.focusSearchCard();
@@ -975,6 +977,7 @@ class RegisterDomainStep extends React.Component {
 		let domainRegistrationSuggestions;
 		let domainUnavailableSuggestion;
 		let suggestions;
+		let domainSkipPurchase;
 
 		if ( this.isLoadingSuggestions() || isEmpty( this.props.products ) ) {
 			domainRegistrationSuggestions = times( INITIAL_SUGGESTION_QUANTITY + 1, function( n ) {
@@ -1006,6 +1009,13 @@ class RegisterDomainStep extends React.Component {
 					tracksButtonClickSource="initial-suggestions-bottom"
 				/>
 			);
+
+			domainSkipPurchase = (
+				<DomainSkipSuggestion
+					selectedSiteSlug={ this.props.selectedSite.slug }
+					onButtonClick={ this.props.onSkip }
+				/>
+			);
 		}
 
 		return (
@@ -1015,6 +1025,7 @@ class RegisterDomainStep extends React.Component {
 			>
 				{ domainRegistrationSuggestions }
 				{ domainUnavailableSuggestion }
+				{ this.props.showSkipButton && domainSkipPurchase }
 			</div>
 		);
 	}