From 21dad99ac70357adb357ff7ee7dfbdb14ef98d28 Mon Sep 17 00:00:00 2001
From: Igor Klimer <github@gpg.klimer.eu>
Date: Mon, 26 Apr 2021 16:41:16 +0000
Subject: [PATCH 1/4] Domains: Use checkoutless flow for adding mappings on
 eligible sites

---
 .../domains/map-domain-step/index.jsx         |  6 ++-
 .../wpcom-undocumented/lib/undocumented.js    | 21 ++++++++
 client/my-sites/domains/map-domain/index.jsx  | 48 ++++++++++++++-----
 3 files changed, 62 insertions(+), 13 deletions(-)

diff --git a/client/components/domains/map-domain-step/index.jsx b/client/components/domains/map-domain-step/index.jsx
index 29f2dcf17167e..497dfb9931949 100644
--- a/client/components/domains/map-domain-step/index.jsx
+++ b/client/components/domains/map-domain-step/index.jsx
@@ -44,6 +44,7 @@ class MapDomainStep extends React.Component {
 		products: PropTypes.object,
 		cart: PropTypes.object,
 		selectedSite: PropTypes.oneOfType( [ PropTypes.object, PropTypes.bool ] ),
+		isBusyMapping: PropTypes.bool,
 		initialQuery: PropTypes.string,
 		analyticsSection: PropTypes.string.isRequired,
 		domainsWithPlansOnly: PropTypes.bool.isRequired,
@@ -54,6 +55,7 @@ class MapDomainStep extends React.Component {
 	};
 
 	static defaultProps = {
+		isBusyMapping: false,
 		onSave: noop,
 		initialQuery: '',
 	};
@@ -124,7 +126,7 @@ class MapDomainStep extends React.Component {
 							autoFocus // eslint-disable-line jsx-a11y/no-autofocus
 						/>
 						<Button
-							busy={ this.state.isPendingSubmit }
+							busy={ this.state.isPendingSubmit || this.props.isBusyMapping }
 							disabled={ ! getTld( searchQuery ) || this.state.isPendingSubmit }
 							className="map-domain-step__go button is-primary"
 							onClick={ this.handleAddButtonClick }
@@ -248,8 +250,8 @@ class MapDomainStep extends React.Component {
 					! includes( [ AVAILABILITY_CHECK_ERROR, NOT_REGISTRABLE ], status ) &&
 					includes( [ MAPPABLE, UNKNOWN ], mappableStatus )
 				) {
-					// No need to disable isPendingSubmit because this handler should perform a redirect
 					this.props.onMapDomain( domain );
+					this.setState( { isPendingSubmit: false } );
 					return;
 				}
 
diff --git a/client/lib/wpcom-undocumented/lib/undocumented.js b/client/lib/wpcom-undocumented/lib/undocumented.js
index 9ceb639222621..ff5dde9763bb6 100644
--- a/client/lib/wpcom-undocumented/lib/undocumented.js
+++ b/client/lib/wpcom-undocumented/lib/undocumented.js
@@ -1900,6 +1900,27 @@ Undocumented.prototype.updateWhois = function ( domainName, whois, transferLock,
 	);
 };
 
+/**
+ * Add domain mapping for eligible clients.
+ *
+ * @param {number} siteId The site ID
+ * @param {string} [domainName] Name of the domain mapping
+ * @param {Function} fn The callback function
+ * @returns {Promise} A promise that resolves when the request completes
+ */
+Undocumented.prototype.addDomainMapping = function ( siteId, domainName, fn ) {
+	debug( '/site/:site_id/add-domain-mapping' );
+	return this.wpcom.req.post(
+		{
+			path: `/sites/${ siteId }/add-domain-mapping`,
+			body: {
+				domain: domainName,
+			},
+		},
+		fn
+	);
+};
+
 /**
  * Add domain mapping for VIP clients.
  *
diff --git a/client/my-sites/domains/map-domain/index.jsx b/client/my-sites/domains/map-domain/index.jsx
index 84e4ea4f8c7a0..91d537e46da40 100644
--- a/client/my-sites/domains/map-domain/index.jsx
+++ b/client/my-sites/domains/map-domain/index.jsx
@@ -17,10 +17,11 @@ import MapDomainStep from 'calypso/components/domains/map-domain-step';
 import { DOMAINS_WITH_PLANS_ONLY } from 'calypso/state/current-user/constants';
 import { domainRegistration } from 'calypso/lib/cart-values/cart-items';
 import wp from 'calypso/lib/wp';
-import { domainManagementList } from 'calypso/my-sites/domains/paths';
+import { domainManagementEdit, domainManagementList } from 'calypso/my-sites/domains/paths';
 import Notice from 'calypso/components/notice';
 import { currentUserHasFlag } from 'calypso/state/current-user/selectors';
 import isSiteUpgradeable from 'calypso/state/selectors/is-site-upgradeable';
+import isSiteOnPaidPlan from 'calypso/state/selectors/is-site-on-paid-plan';
 import {
 	getSelectedSite,
 	getSelectedSiteId,
@@ -39,6 +40,7 @@ export class MapDomain extends Component {
 		query: PropTypes.string,
 		domainsWithPlansOnly: PropTypes.bool.isRequired,
 		isSiteUpgradeable: PropTypes.bool,
+		isSiteOnPaidPlan: PropTypes.bool.isRequired,
 		productsList: PropTypes.object.isRequired,
 		selectedSite: PropTypes.object,
 		selectedSiteId: PropTypes.number,
@@ -49,6 +51,7 @@ export class MapDomain extends Component {
 	isMounted = false;
 
 	state = {
+		isBusyMapping: false,
 		errorMessage: null,
 		suggestion: null,
 		showTrademarkClaimsNotice: false,
@@ -104,7 +107,10 @@ export class MapDomain extends Component {
 	handleMapDomain = ( domain ) => {
 		const { selectedSite, selectedSiteSlug } = this.props;
 
-		this.setState( { errorMessage: null } );
+		this.setState( {
+			errorMessage: null,
+			isBusyMapping: true,
+		} );
 
 		// For VIP sites we handle domain mappings differently
 		// We don't go through the usual checkout process
@@ -115,6 +121,21 @@ export class MapDomain extends Component {
 				( error ) => this.setState( { errorMessage: error.message } )
 			);
 			return;
+		} else if ( this.props.isSiteOnPaidPlan ) {
+			wpcom
+				.addDomainMapping( selectedSite.ID, domain )
+				.then(
+					() => {
+						page( domainManagementEdit( selectedSiteSlug, domain ) );
+					},
+					( error ) => {
+						this.setState( { errorMessage: error.message } );
+					}
+				)
+				.finally( () => {
+					this.setState( { isBusyMapping: false } );
+				} );
+			return;
 		}
 
 		page( '/checkout/' + selectedSiteSlug + '/domain-mapping:' + domain );
@@ -189,11 +210,12 @@ export class MapDomain extends Component {
 
 				<HeaderCake onClick={ this.goBack }>{ translate( 'Map a Domain' ) }</HeaderCake>
 
-				{ errorMessage && <Notice status="is-error" text={ errorMessage } /> }
+				{ errorMessage && <Notice status="is-error" text={ errorMessage } showDismiss={ false } /> }
 
 				<MapDomainStep
 					domainsWithPlansOnly={ domainsWithPlansOnly }
 					initialQuery={ initialQuery }
+					isBusyMapping={ this.state.isBusyMapping }
 					products={ productsList }
 					selectedSite={ selectedSite }
 					onRegisterDomain={ this.handleRegisterDomain }
@@ -205,11 +227,15 @@ export class MapDomain extends Component {
 	}
 }
 
-export default connect( ( state ) => ( {
-	selectedSite: getSelectedSite( state ),
-	selectedSiteId: getSelectedSiteId( state ),
-	selectedSiteSlug: getSelectedSiteSlug( state ),
-	domainsWithPlansOnly: currentUserHasFlag( state, DOMAINS_WITH_PLANS_ONLY ),
-	isSiteUpgradeable: isSiteUpgradeable( state, getSelectedSiteId( state ) ),
-	productsList: getProductsList( state ),
-} ) )( withShoppingCart( localize( MapDomain ) ) );
+export default connect( ( state ) => {
+	const selectedSiteId = getSelectedSiteId( state );
+	return {
+		selectedSite: getSelectedSite( state ),
+		selectedSiteId,
+		selectedSiteSlug: getSelectedSiteSlug( state ),
+		domainsWithPlansOnly: currentUserHasFlag( state, DOMAINS_WITH_PLANS_ONLY ),
+		isSiteUpgradeable: isSiteUpgradeable( state, selectedSiteId ),
+		isSiteOnPaidPlan: isSiteOnPaidPlan( state, selectedSiteId ),
+		productsList: getProductsList( state ),
+	};
+} )( withShoppingCart( localize( MapDomain ) ) );

From 6002684ef64f0729436022aaf92dea18cc38bb0e Mon Sep 17 00:00:00 2001
From: Igor Klimer <github@gpg.klimer.eu>
Date: Thu, 29 Apr 2021 13:55:40 +0000
Subject: [PATCH 2/4] Improve the VIP case as well

---
 client/my-sites/domains/map-domain/index.jsx | 17 +++++++++++++----
 1 file changed, 13 insertions(+), 4 deletions(-)

diff --git a/client/my-sites/domains/map-domain/index.jsx b/client/my-sites/domains/map-domain/index.jsx
index 91d537e46da40..856e72aed5fdc 100644
--- a/client/my-sites/domains/map-domain/index.jsx
+++ b/client/my-sites/domains/map-domain/index.jsx
@@ -116,10 +116,19 @@ export class MapDomain extends Component {
 		// We don't go through the usual checkout process
 		// Instead, we add the mapping directly
 		if ( selectedSite.is_vip ) {
-			wpcom.addVipDomainMapping( selectedSite.ID, domain ).then(
-				() => page( domainManagementList( selectedSiteSlug ) ),
-				( error ) => this.setState( { errorMessage: error.message } )
-			);
+			wpcom
+				.addVipDomainMapping( selectedSite.ID, domain )
+				.then(
+					() => {
+						page( domainManagementList( selectedSiteSlug ) );
+					},
+					( error ) => {
+						this.setState( { errorMessage: error.message } );
+					}
+				)
+				.finally( () => {
+					this.setState( { isBusyMapping: false } );
+				} );
 			return;
 		} else if ( this.props.isSiteOnPaidPlan ) {
 			wpcom

From cf9b07f34c058e57c6d0dc78c5264e1e104dab73 Mon Sep 17 00:00:00 2001
From: Igor Klimer <github@gpg.klimer.eu>
Date: Fri, 30 Apr 2021 12:41:54 +0000
Subject: [PATCH 3/4] Add successNotice after successful mapping

---
 client/my-sites/domains/map-domain/index.jsx | 39 +++++++++++++-------
 1 file changed, 26 insertions(+), 13 deletions(-)

diff --git a/client/my-sites/domains/map-domain/index.jsx b/client/my-sites/domains/map-domain/index.jsx
index 856e72aed5fdc..d2188f226ad41 100644
--- a/client/my-sites/domains/map-domain/index.jsx
+++ b/client/my-sites/domains/map-domain/index.jsx
@@ -31,6 +31,7 @@ import QueryProductsList from 'calypso/components/data/query-products-list';
 import { getProductsList } from 'calypso/state/products-list/selectors';
 import TrademarkClaimsNotice from 'calypso/components/domains/trademark-claims-notice';
 import { fillInSingleCartItemAttributes } from 'calypso/lib/cart-values';
+import { successNotice } from 'calypso/state/notices/actions';
 
 const wpcom = wp.undocumented();
 
@@ -105,7 +106,7 @@ export class MapDomain extends Component {
 	};
 
 	handleMapDomain = ( domain ) => {
-		const { selectedSite, selectedSiteSlug } = this.props;
+		const { selectedSite, selectedSiteSlug, translate } = this.props;
 
 		this.setState( {
 			errorMessage: null,
@@ -135,6 +136,13 @@ export class MapDomain extends Component {
 				.addDomainMapping( selectedSite.ID, domain )
 				.then(
 					() => {
+						this.props.successNotice(
+							translate( 'Domain mapping added! Please make sure to follow the next steps below.' ),
+							{
+								isPersistent: true,
+								duration: 10000,
+							}
+						);
 						page( domainManagementEdit( selectedSiteSlug, domain ) );
 					},
 					( error ) => {
@@ -236,15 +244,20 @@ export class MapDomain extends Component {
 	}
 }
 
-export default connect( ( state ) => {
-	const selectedSiteId = getSelectedSiteId( state );
-	return {
-		selectedSite: getSelectedSite( state ),
-		selectedSiteId,
-		selectedSiteSlug: getSelectedSiteSlug( state ),
-		domainsWithPlansOnly: currentUserHasFlag( state, DOMAINS_WITH_PLANS_ONLY ),
-		isSiteUpgradeable: isSiteUpgradeable( state, selectedSiteId ),
-		isSiteOnPaidPlan: isSiteOnPaidPlan( state, selectedSiteId ),
-		productsList: getProductsList( state ),
-	};
-} )( withShoppingCart( localize( MapDomain ) ) );
+export default connect(
+	( state ) => {
+		const selectedSiteId = getSelectedSiteId( state );
+		return {
+			selectedSite: getSelectedSite( state ),
+			selectedSiteId,
+			selectedSiteSlug: getSelectedSiteSlug( state ),
+			domainsWithPlansOnly: currentUserHasFlag( state, DOMAINS_WITH_PLANS_ONLY ),
+			isSiteUpgradeable: isSiteUpgradeable( state, selectedSiteId ),
+			isSiteOnPaidPlan: isSiteOnPaidPlan( state, selectedSiteId ),
+			productsList: getProductsList( state ),
+		};
+	},
+	{
+		successNotice,
+	}
+)( withShoppingCart( localize( MapDomain ) ) );

From 86fe0417bcfc52b65bc50ddfd133a4f30be4bc1f Mon Sep 17 00:00:00 2001
From: Kamen Stanev <hambai@gmail.com>
Date: Tue, 18 May 2021 16:18:52 +0300
Subject: [PATCH 4/4] * skip some of the steps in the map a domain e2e test

---
 test/e2e/specs/specs-calypso/wp-manage-domains-spec.js | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/test/e2e/specs/specs-calypso/wp-manage-domains-spec.js b/test/e2e/specs/specs-calypso/wp-manage-domains-spec.js
index f201af81be577..777c477337dc8 100644
--- a/test/e2e/specs/specs-calypso/wp-manage-domains-spec.js
+++ b/test/e2e/specs/specs-calypso/wp-manage-domains-spec.js
@@ -187,16 +187,16 @@ describe( `[${ host }] Managing Domains: (${ screenSize }) @parallel`, function
 			return await enterADomainComponent.enterADomain( blogName );
 		} );
 
-		it( 'Can add domain to the cart', async function () {
+		it.skip( 'Can add domain to the cart', async function () {
 			const enterADomainComponent = await EnterADomainComponent.Expect( driver );
 			return await enterADomainComponent.clickonAddButtonToAddDomainToTheCart();
 		} );
 
-		it( 'Can see checkout page', async function () {
+		it.skip( 'Can see checkout page', async function () {
 			return await MapADomainCheckoutPage.Expect( driver );
 		} );
 
-		it( 'Empty the cart', async function () {
+		it.skip( 'Empty the cart', async function () {
 			await ReaderPage.Visit( driver );
 			const navBarComponent = await NavBarComponent.Expect( driver );
 			await navBarComponent.clickMySites();