Domain Site Redirect: Use shoppingCartManager to add products in SiteRedirectStep

client/my-sites/domains/controller.jsx

@@ -19,7 +19,6 @@ import {
 	getSelectedSiteSlug,
 } from 'calypso/state/ui/selectors';
 import { getCurrentUser } from 'calypso/state/current-user/selectors';
-import CartData from 'calypso/components/data/cart';
 import DomainSearch from './domain-search';
 import SiteRedirect from './domain-search/site-redirect';
 import MapDomain from 'calypso/my-sites/domains/map-domain';
@@ -97,9 +96,9 @@ const siteRedirect = ( context, next ) => {
 				title="Domain Search > Site Redirect"
 			/>
 			<DocumentHead title={ translate( 'Redirect a Site' ) } />
-			<CartData>
+			<CalypsoShoppingCartProvider>
 				<SiteRedirect />
-			</CartData>
+			</CalypsoShoppingCartProvider>
 		</Main>
 	);
 	next();

client/my-sites/domains/domain-search/site-redirect-step.jsx

@@ -7,6 +7,7 @@ import React from 'react';
 import { connect } from 'react-redux';
 import { localize } from 'i18n-calypso';
 import { get } from 'lodash';
+import { withShoppingCart } from '@automattic/shopping-cart';
 
 /**
  * Internal dependencies
@@ -18,9 +19,9 @@ import { hasProduct, siteRedirect } from 'calypso/lib/cart-values/cart-items';
 import { errorNotice } from 'calypso/state/notices/actions';
 import { canRedirect } from 'calypso/lib/domains';
 import DomainProductPrice from 'calypso/components/domains/domain-product-price';
-import { addItem } from 'calypso/lib/cart/actions';
 import { recordGoogleEvent } from 'calypso/state/analytics/actions';
 import { withoutHttp } from 'calypso/lib/url';
+import { fillInSingleCartItemAttributes } from 'calypso/lib/cart-values';
 
 /**
  * Style dependencies
@@ -29,12 +30,21 @@ import './site-redirect-step.scss';
 
 class SiteRedirectStep extends React.Component {
 	static propTypes = {
-		cart: PropTypes.object.isRequired,
 		products: PropTypes.object.isRequired,
 		selectedSite: PropTypes.object.isRequired,
 	};
 
-	state = { searchQuery: '' };
+	state = { searchQuery: '', isSubmitting: false };
+
+	isMounted = false;
+
+	componentWillUnmount() {
+		this.isMounted = false;
+	}
+
+	componentDidMount() {
+		this.isMounted = true;
+	}
 
 	render() {
 		const price = get( this.props, 'products.offsite_redirect.cost_display', null );
@@ -68,6 +78,8 @@ class SiteRedirectStep extends React.Component {
 							className="site-redirect-step__go"
 							type="submit"
 							onClick={ this.recordGoButtonClick }
+							busy={ this.state.isSubmitting }
+							disabled={ this.state.isSubmitting }
 						>
 							{ translate( 'Go', {
 								context: 'Upgrades: Label for adding Site Redirect',
@@ -95,6 +107,8 @@ class SiteRedirectStep extends React.Component {
 	handleFormSubmit = ( event ) => {
 		event.preventDefault();
 
+		this.setState( { isSubmitting: true } );
+
 		const domain = this.state.searchQuery;
 
 		this.props.recordFormSubmit( domain );
@@ -103,6 +117,7 @@ class SiteRedirectStep extends React.Component {
 			this.props.errorNotice(
 				this.getValidationErrorMessage( domain, { code: 'already_in_cart' } )
 			);
+			this.setState( { isSubmitting: false } );
 			return;
 		}
 
@@ -112,6 +127,7 @@ class SiteRedirectStep extends React.Component {
 			function ( error ) {
 				if ( error ) {
 					this.props.errorNotice( this.getValidationErrorMessage( domain, error ) );
+					this.setState( { isSubmitting: false } );
 					return;
 				}
 
@@ -121,8 +137,13 @@ class SiteRedirectStep extends React.Component {
 	};
 
 	addSiteRedirectToCart = ( domain ) => {
-		addItem( siteRedirect( { domain } ) );
-		page( '/checkout/' + this.props.selectedSite.slug );
+		this.props.shoppingCartManager
+			.addProductsToCart( [
+				fillInSingleCartItemAttributes( siteRedirect( { domain } ), this.props.products ),
+			] )
+			.then( () => {
+				this.isMounted && page( '/checkout/' + this.props.selectedSite.slug );
+			} );
 	};
 
 	getValidationErrorMessage = ( domain, error ) => {
@@ -189,4 +210,4 @@ export default connect( null, {
 	recordInputFocus,
 	recordGoButtonClick,
 	recordFormSubmit,
-} )( localize( SiteRedirectStep ) );
+} )( withShoppingCart( localize( SiteRedirectStep ) ) );

client/my-sites/domains/domain-search/site-redirect.jsx

@@ -28,7 +28,6 @@ import { getProductsList } from 'calypso/state/products-list/selectors';
 
 class SiteRedirect extends Component {
 	static propTypes = {
-		cart: PropTypes.object.isRequired,
 		selectedSite: PropTypes.object.isRequired,
 		selectedSiteSlug: PropTypes.string.isRequired,
 		isSiteAtomic: PropTypes.bool.isRequired,
@@ -59,7 +58,6 @@ class SiteRedirect extends Component {
 
 	render() {
 		const {
-			cart,
 			selectedSite,
 			selectedSiteAdminUrl,
 			isSiteAtomic,
@@ -87,7 +85,7 @@ class SiteRedirect extends Component {
 					{ translate( 'Redirect a Site' ) }
 				</HeaderCake>
 
-				<SiteRedirectStep cart={ cart } products={ productsList } selectedSite={ selectedSite } />
+				<SiteRedirectStep products={ productsList } selectedSite={ selectedSite } />
 			</Main>
 		);
 	}