diff --git a/client/my-sites/domains/controller.jsx b/client/my-sites/domains/controller.jsx
index a1dcee42089f79..d3666599c9aaf2 100644
--- a/client/my-sites/domains/controller.jsx
+++ b/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"
/>
-
+
-
+
);
next();
diff --git a/client/my-sites/domains/domain-search/site-redirect-step.jsx b/client/my-sites/domains/domain-search/site-redirect-step.jsx
index 270fea5a5adaac..7b258bd5227b06 100644
--- a/client/my-sites/domains/domain-search/site-redirect-step.jsx
+++ b/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 ) ) );
diff --git a/client/my-sites/domains/domain-search/site-redirect.jsx b/client/my-sites/domains/domain-search/site-redirect.jsx
index 84a4a568d9cc8d..3a390631672e2d 100644
--- a/client/my-sites/domains/domain-search/site-redirect.jsx
+++ b/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' ) }
-
+
);
}