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' ) } - + ); }